/* site.min.css */ @font-face{font-family:"Geist";src:url("/assets/fonts/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}:root{--escuro:#0a0a0a;--escuro-rgb:10,10,10;--grafite:#161616;--grafite-2:#222222;--primaria:var(--marca);--primaria-rgb:var(--marca-rgb);--primaria-escura:var(--marca-escura);--primaria-clara:var(--marca-clara);--primaria-hover:var(--marca-escura);--primaria-suave:var(--marca-suave);--primaria-link:var(--marca-escura);--primaria-no-claro:var(--marca-escura);--primaria-no-escuro:var(--acao-clara);--sobre-primaria:#ffffff;--acento:var(--marca);--acento-rgb:var(--marca-rgb);--branco:#ffffff;--creme:#faf8f4;--cinza-1:#efede8;--cinza-2:#cfcbc2;--cinza-texto:#5a5750;--cinza-claro:#c8c4bb;--verde-zap:#25d366;--verde-zap-escuro:#1ebe5a;--verde-zap-sombra:rgba(37,211,102,.38);--fonte:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--t-xs:.8125rem;--t-sm:.9375rem;--t-base:1.0625rem;--t-md:1.25rem;--t-lg:1.625rem;--gap-xs:.5rem;--gap-sm:1rem;--gap-md:1.75rem;--gap-lg:3rem;--gap-xl:5.5rem;--raio:14px;--raio-lg:20px;--raio-sm:8px;--largura:1200px;--largura-texto:68ch;--lateral:clamp(1rem,4vw,2.25rem);--altura-cab:72px;--sombra:0 2px 8px rgba(var(--escuro-rgb),.06),0 16px 40px rgba(var(--escuro-rgb),.08);--sombra-forte:0 6px 14px rgba(var(--escuro-rgb),.18),0 28px 60px rgba(var(--escuro-rgb),.28);--sombra-primaria:0 10px 30px rgba(var(--primaria-rgb),.35)}@media (max-width:1079px){:root{--altura-cab:62px}}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--altura-cab) + 12px);background:var(--escuro)}body{margin:0;font-family:var(--fonte);font-size:var(--t-base);font-weight:500;line-height:1.65;color:var(--escuro);background:var(--escuro);overflow-x:hidden}main{display:block;background:var(--branco)}img,video,svg{max-width:100%;height:auto;display:block}h1,h2,h3{line-height:1.14;margin:0 0 var(--gap-sm);font-weight:800;letter-spacing:-.025em;text-wrap:balance}h1{font-size:clamp(2rem,4.8vw,3.4rem)}h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}h3{font-size:clamp(1.08rem,2vw,1.3rem);font-weight:700;letter-spacing:-.01em}p{margin:0 0 var(--gap-sm)}p:last-child{margin-bottom:0}a{color:var(--primaria-link);text-underline-offset:.18em}strong{font-weight:700}ul,ol{margin:0 0 var(--gap-sm);padding-left:1.2rem}:focus-visible{outline:3px solid var(--primaria);outline-offset:2px;border-radius:var(--raio-sm)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}.wrap{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--lateral)}.secao{padding-block:clamp(3rem,7vw,var(--gap-xl));position:relative}.secao--compacta{padding-block:clamp(2.25rem,5vw,3.5rem)}.secao--clara{background:var(--creme)}.secao--escura{background:var(--escuro);color:var(--branco)}.secao--escura h2,.secao--escura h3{color:var(--branco)}.secao--escura p{color:#d9d5cc}.grade{display:grid;gap:var(--gap-md)}@media (min-width:720px){.grade--3{grid-template-columns:repeat(2,minmax(0,1fr))}.grade--4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1000px){.grade--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grade--4{grid-template-columns:repeat(4,minmax(0,1fr))}}.centro{text-align:center;margin-inline:auto}.texto-medida{max-width:var(--largura-texto)}.cabeca{display:grid;gap:.25rem var(--gap-md);margin-bottom:clamp(1.5rem,3.5vw,2.5rem)}.cabeca h2{margin-bottom:.4rem;max-width:26ch}.cabeca p{color:var(--cinza-texto);max-width:60ch}.secao--escura .cabeca p{color:var(--cinza-claro)}@media (min-width:900px){.cabeca--link{grid-template-columns:1fr auto;align-items:end}.cabeca--link>:last-child{justify-self:end}}.rotulo{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--t-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primaria-no-claro);margin-bottom:.55rem}.secao--escura .rotulo{color:var(--primaria)}.rotulo::before{content:"";width:22px;height:3px;background:var(--primaria);border-radius:2px}.marca-destaque{background:linear-gradient(transparent 62%,rgba(var(--acento-rgb),.6) 62%);padding-inline:.08em}.heroi .marca-destaque{background:linear-gradient(transparent 64%,rgba(var(--primaria-rgb),.6) 64%)}.botao{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:inherit;font-size:var(--t-base);font-weight:800;letter-spacing:-.005em;line-height:1.2;text-decoration:none;padding:.95rem 1.55rem;border:0;border-radius:999px;background:var(--primaria);color:var(--sobre-primaria);cursor:pointer;white-space:nowrap;box-shadow:var(--sombra-primaria);transition:background .15s ease,transform .15s ease,box-shadow .15s ease,color .15s ease,border-color .15s ease}.botao:hover{background:var(--primaria-clara);transform:translateY(-1px)}.botao:active{transform:translateY(1px);box-shadow:none}.botao svg{width:20px;height:20px;fill:currentColor;flex:none}.botao--zap{background:var(--verde-zap);color:var(--branco);box-shadow:0 12px 30px var(--verde-zap-sombra)}.botao--zap:hover{background:var(--verde-zap-escuro);color:var(--branco)}.botao--zap .ico-zap{width:24px;height:24px}.botao--contorno{background:transparent;color:var(--escuro);box-shadow:inset 0 0 0 2px var(--escuro)}.botao--contorno:hover{background:var(--escuro);color:var(--branco)}.botoes{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}@media (max-width:479px){.botoes .botao{flex:1 1 100%}}.link-seta{display:inline-flex;align-items:center;gap:.45rem;font-weight:800;font-size:var(--t-sm);color:var(--escuro);text-decoration:none}.link-seta::after{content:"";width:.5rem;height:.5rem;border-top:2.5px solid var(--primaria);border-right:2.5px solid var(--primaria);transform:rotate(45deg);transition:transform .15s ease}.link-seta:hover::after{transform:translateX(3px) rotate(45deg)}.ico-zap{fill:currentColor;flex:none}.pular{position:absolute;left:1rem;top:-60px;z-index:100;background:var(--primaria);color:var(--sobre-primaria);font-weight:800;padding:.6rem 1rem;border-radius:var(--raio-sm);text-decoration:none}.pular:focus{top:.75rem}.mt-md{margin-top:var(--gap-md)}[hidden]{display:none !important}.cab{position:sticky;top:0;z-index:60;background:var(--escuro);color:var(--branco);border-bottom:1px solid rgba(255,255,255,.08)}.cab__linha{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--altura-cab)}.cab__logo{display:block;width:clamp(126px,13vw,158px);flex:none}.cab__logo img{width:100%;height:auto}.nav{display:flex;align-items:center}.nav__lista{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem}.nav__item{position:relative}.nav__link{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.9375rem;font-weight:700;color:#e9e6df;text-decoration:none;padding:.6rem .8rem;border-radius:999px;background:transparent;border:0;cursor:pointer;white-space:nowrap;transition:color .15s ease,background .15s ease}.nav__link:hover,.nav__item:focus-within>.nav__link{color:var(--branco);background:rgba(255,255,255,.07)}.nav__link[aria-current="page"],.nav__link--ativo{color:var(--primaria)}.nav__seta{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}.nav__contato{margin-left:.6rem;box-shadow:inset 0 0 0 2px var(--primaria);color:var(--branco)}.nav__contato:hover{background:var(--primaria);color:var(--sobre-primaria)}.sub{list-style:none;margin:0;padding:.5rem}.sub a{display:block;text-decoration:none;color:var(--escuro);padding:.6rem .75rem;border-radius:10px;line-height:1.3}.sub a:hover,.sub a:focus-visible{background:var(--creme)}.sub strong{display:block;font-size:var(--t-sm);font-weight:800}.sub small{display:block;font-size:.78rem;color:var(--cinza-texto);font-weight:500;margin-top:.15rem}@media (min-width:1080px){.cab__botao{display:none}.nav__painel{display:contents}.nav__rodape{display:none}.sub-painel{position:absolute;left:50%;top:calc(100% + 10px);min-width:300px;background:var(--branco);border-radius:16px;box-shadow:0 18px 50px rgba(var(--escuro-rgb),.28);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}.sub-painel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}.sub-painel--largo{min-width:560px}.sub-painel--largo .sub{display:grid;grid-template-columns:1fr 1fr}.nav__item:hover>.sub-painel,.nav__item:focus-within>.sub-painel,.nav__item--aberto>.sub-painel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .16s ease,transform .16s ease}.nav__item:hover>.nav__link .nav__seta,.nav__item:focus-within>.nav__link .nav__seta{transform:translateY(1px) rotate(225deg)}}@media (max-width:1079px){.cab__botao{position:relative;width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--branco);cursor:pointer;display:grid;place-content:center}.cab__botao span,.cab__botao span::before,.cab__botao span::after{display:block;width:22px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .2s ease,background .2s ease}.cab__botao span{position:relative}.cab__botao span::before,.cab__botao span::after{content:"";position:absolute;left:0}.cab__botao span::before{top:-7px}.cab__botao span::after{top:7px}.cab--aberto .cab__botao span{background:transparent}.cab--aberto .cab__botao span::before{transform:translateY(7px) rotate(45deg)}.cab--aberto .cab__botao span::after{transform:translateY(-7px) rotate(-45deg)}.nav__painel{position:fixed;left:0;right:0;top:var(--altura-cab);bottom:0;z-index:59;background:var(--escuro);overflow-y:auto;overscroll-behavior:contain;padding:1rem var(--lateral) calc(1.5rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:1rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}.cab--aberto .nav__painel{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}.nav__lista{flex-direction:column;align-items:stretch;gap:0}.nav__item{border-bottom:1px solid rgba(255,255,255,.08)}.nav__link{width:100%;justify-content:space-between;font-size:1.15rem;padding:1rem .25rem;border-radius:0}.nav__link:hover,.nav__item:focus-within>.nav__link{background:transparent}.nav__item--aberto>.nav__link .nav__seta{transform:translateY(2px) rotate(225deg)}.sub-painel{display:none;padding-bottom:.75rem}.nav__item--aberto>.sub-painel{display:block}.sub{padding:0}.sub a{color:var(--branco);padding:.65rem .25rem .65rem .9rem;border-left:2px solid rgba(var(--primaria-rgb),.5);border-radius:0;margin-bottom:.2rem}.sub a:hover{background:rgba(255,255,255,.05)}.sub small{color:var(--cinza-claro)}.nav__contato{margin:0;box-shadow:none;color:#e9e6df}.nav__rodape{margin-top:auto;display:grid;gap:.75rem;padding-top:1rem}.nav__rodape .botao{width:100%}.nav__rodape p{color:var(--cinza-claro);font-size:var(--t-sm);margin:0;text-align:center}body.menu-aberto{overflow:hidden}}.heroi{position:relative;background:var(--escuro);color:var(--branco);overflow:hidden;isolation:isolate}.heroi__foto{position:absolute;inset:0;z-index:-2}.heroi__foto img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,center)}.heroi::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--escuro-rgb),.45) 0%,rgba(var(--escuro-rgb),0) 28%,rgba(var(--escuro-rgb),0) 60%,rgba(var(--escuro-rgb),.92) 100%),linear-gradient(90deg,rgba(var(--escuro-rgb),.94) 0%,rgba(var(--escuro-rgb),.82) 40%,rgba(var(--escuro-rgb),.35) 75%,rgba(var(--escuro-rgb),.2) 100%)}.heroi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--primaria),var(--acento))}.heroi__conteudo{padding-block:clamp(3rem,9vw,6.5rem) clamp(3rem,8vw,5.5rem);max-width:720px}.heroi h1{color:var(--branco);margin-bottom:1rem}.heroi--interna h1{font-size:clamp(1.9rem,4.2vw,3rem)}.heroi__sub{font-size:clamp(1.05rem,1.8vw,1.25rem);color:#e4e0d8;max-width:52ch;margin-bottom:1.6rem}.heroi .selo{display:inline-block;align-self:flex-start;background:var(--primaria);color:var(--sobre-primaria);font-size:var(--t-xs);font-weight:800;text-transform:uppercase;letter-spacing:.08em;line-height:1.3;padding:.42rem .85rem;border-radius:10px;margin-bottom:1.1rem;box-shadow:var(--sombra-primaria)}@media (max-width:719px){.heroi::before{background:linear-gradient(180deg,rgba(var(--escuro-rgb),.55) 0%,rgba(var(--escuro-rgb),.72) 45%,rgba(var(--escuro-rgb),.94) 100%)}}.heroi--sem-foto{background:radial-gradient(60% 80% at 85% 0%,rgba(var(--primaria-rgb),.26) 0%,rgba(var(--primaria-rgb),0) 70%),radial-gradient(40% 60% at 0% 100%,rgba(var(--acento-rgb),.08) 0%,transparent 60%),var(--escuro)}.heroi--sem-foto::before{display:none}.heroi--sem-foto .heroi__conteudo{padding-block:clamp(2.5rem,6vw,4.5rem)}.migalhas{font-size:var(--t-xs);font-weight:600;margin-bottom:1rem}.migalhas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .5rem}.migalhas li{display:inline-flex;align-items:center;gap:.5rem;color:var(--cinza-claro)}.migalhas li + li::before{content:"/";color:rgba(255,255,255,.35)}.migalhas a{color:var(--cinza-claro);text-decoration:none}.migalhas a:hover{color:var(--primaria)}.migalhas [aria-current]{color:var(--branco)}.faixa-cta{position:relative;overflow:hidden;background:var(--escuro);color:var(--branco);border-radius:var(--raio-lg);padding:clamp(1.75rem,5vw,3.25rem);display:grid;gap:1.25rem 2rem;align-items:center}.faixa-cta::before{content:"";position:absolute;right:-80px;top:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(var(--primaria-rgb),.38),transparent 68%);pointer-events:none}.faixa-cta>*{position:relative}.faixa-cta h2{color:var(--branco);margin-bottom:.5rem;max-width:24ch}.faixa-cta p{color:#d9d5cc;max-width:54ch}@media (min-width:900px){.faixa-cta{grid-template-columns:1fr auto}}.rod{background:var(--escuro);color:#b8b4ab;font-size:var(--t-sm);padding-top:clamp(3rem,6vw,4.5rem)}.rod a{color:#e2ded6;text-decoration:none}.rod a:hover{color:var(--primaria)}.rod__grade{display:grid;gap:2.25rem;grid-template-columns:1fr;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)}@media (min-width:720px){.rod__grade{grid-template-columns:1fr 1fr}}@media (min-width:1000px){.rod__grade{grid-template-columns:1.3fr .9fr .9fr 1.2fr}}.rod__logo{width:150px;margin-bottom:1rem}.rod__texto{max-width:36ch;margin-bottom:1.25rem}.rod__titulo{font-size:var(--t-xs);font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--branco);margin-bottom:1rem}.rod ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}.rod__contato a,.rod__contato .rod__hora{display:grid;grid-template-columns:20px 1fr;gap:.6rem;align-items:start}.rod__contato svg{width:18px;height:18px;fill:var(--primaria);margin-top:.2rem}.rod__contato .ico-zap{fill:var(--verde-zap)}.redes{display:flex;gap:.5rem;flex-wrap:wrap}.redes a{width:40px;height:40px;border-radius:50%;display:grid;place-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:background .15s ease}.redes a:hover{background:var(--primaria)}.redes svg{width:18px;height:18px;fill:var(--branco)}.redes a:hover svg{fill:var(--sobre-primaria)}.rod__base{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;padding-block:1.25rem calc(1.25rem + env(safe-area-inset-bottom));font-size:var(--t-xs)}.rod__base ul{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}.zap{position:fixed;right:clamp(.85rem,3vw,1.5rem);bottom:clamp(.85rem,3vw,1.5rem);z-index:55;display:inline-flex;align-items:center;gap:.55rem;background:var(--verde-zap);color:var(--branco);font-weight:800;font-size:var(--t-sm);text-decoration:none;padding:.8rem 1.2rem .8rem .95rem;border-radius:999px;box-shadow:0 12px 34px var(--verde-zap-sombra),var(--sombra);transition:transform .15s ease,background .15s ease,opacity .2s ease}.zap:hover{background:var(--verde-zap-escuro);color:var(--branco);transform:translateY(-2px)}.zap .ico-zap{width:28px;height:28px}@media (max-width:719px){.zap span{display:none}.zap{padding:.85rem}}body.menu-aberto .zap{opacity:0;pointer-events:none}.cookies{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--grafite);color:var(--branco);padding:1rem var(--lateral) calc(1rem + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(0,0,0,.35);border-top:1px solid rgba(255,255,255,.08);display:none}.cookies.ativo{display:block}body.com-cookies .zap{display:none}.cookies__linha{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;max-width:var(--largura);margin-inline:auto}.cookies p{font-size:var(--t-sm);margin:0;max-width:64ch;color:#e2ded6}.cookies a{color:var(--primaria)}.cookies__acoes{display:flex;gap:.5rem;flex-wrap:wrap}.cookies .botao{padding:.6rem 1.05rem;font-size:var(--t-sm);box-shadow:none}.cookies .botao--contorno{color:var(--branco);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}.foto{position:relative;margin:0;overflow:hidden;background:var(--cor,var(--grafite-2));border-radius:var(--raio)}.foto img{width:100%;height:100%;object-fit:cover}.foto--43{aspect-ratio:4 / 3}@keyframes logos-rolar{from{transform:translateX(0)}to{transform:translateX(-100%)}}.cartao{background:var(--branco);border:1px solid var(--cinza-1);border-radius:var(--raio-lg);padding:clamp(1.25rem,2.4vw,1.75rem);height:100%;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.cartao p{font-size:var(--t-sm);color:var(--cinza-texto)}.cartao h3{margin-bottom:.45rem}.secao--escura .cartao{background:var(--grafite);border-color:rgba(255,255,255,.08)}.secao--escura .cartao p{color:var(--cinza-claro)}a.cartao{display:block;color:inherit;text-decoration:none}a.cartao:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--primaria)}.cartao__num{font-size:2.4rem;font-weight:800;color:var(--primaria);line-height:1;letter-spacing:-.04em;margin-bottom:.7rem}.solucao{display:flex;flex-direction:column;background:var(--branco);border:1px solid var(--cinza-1);border-radius:var(--raio-lg);overflow:hidden;text-decoration:none;color:inherit;height:100%;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.solucao:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--primaria)}.solucao .foto{border-radius:0;aspect-ratio:4 / 3}.solucao .foto img{transition:transform .4s ease}.solucao:hover .foto img{transform:scale(1.04)}.solucao__corpo{padding:1.2rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.35rem;flex:1}.solucao__corpo p{font-size:var(--t-sm);color:var(--cinza-texto);margin:0 0 .5rem}.solucao__corpo .link-seta{margin-top:auto}.servicos{display:grid;gap:1px;background:rgba(255,255,255,.1);border-radius:var(--raio-lg);overflow:hidden;grid-template-columns:1fr}@media (min-width:640px){.servicos{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1000px){.servicos{grid-template-columns:repeat(4,minmax(0,1fr))}}.servico{display:flex;flex-direction:column;gap:.4rem;padding:1.5rem 1.35rem;background:var(--grafite);color:var(--branco);text-decoration:none;min-height:100%;transition:background .18s ease}.servico:hover{background:var(--grafite-2)}.servico__num{font-size:var(--t-xs);font-weight:800;color:var(--primaria);letter-spacing:.1em}.servico h3{color:var(--branco);margin:0;font-size:1.12rem}.servico p{font-size:var(--t-sm);color:var(--cinza-claro);margin:0 0 .75rem}.servico .link-seta{margin-top:auto;color:var(--branco)}.secao:not(.secao--escura) .servicos{background:var(--cinza-1);border:1px solid var(--cinza-1)}.secao:not(.secao--escura) .servico{background:var(--branco);color:var(--escuro)}.secao:not(.secao--escura) .servico:hover{background:var(--creme)}.secao:not(.secao--escura) .servico h3{color:var(--escuro)}.secao:not(.secao--escura) .servico p{color:var(--cinza-texto)}.secao:not(.secao--escura) .servico .link-seta{color:var(--escuro)}.split{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.split .foto{aspect-ratio:4 / 3;box-shadow:var(--sombra)}.split__texto p{color:var(--cinza-texto)}.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}.chips li{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-xs);font-weight:700;padding:.45rem .8rem;border-radius:999px;background:var(--branco);border:1px solid var(--cinza-1);color:var(--escuro)}.filtro{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.35rem;margin-bottom:1.75rem;scrollbar-width:none}.filtro::-webkit-scrollbar{display:none}.filtro button{flex:none;font:inherit;font-size:var(--t-sm);font-weight:700;padding:.6rem 1rem;border-radius:999px;border:1.5px solid var(--cinza-2);background:var(--branco);color:var(--escuro);cursor:pointer;transition:all .15s ease}.filtro button:hover{border-color:var(--primaria)}.filtro button[aria-pressed="true"]{background:var(--escuro);border-color:var(--escuro);color:var(--branco)}.filtro small{font-weight:600;opacity:.6;margin-left:.25rem}.galeria{display:grid;gap:.9rem;grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:900px){.galeria{grid-template-columns:repeat(3,minmax(0,1fr))}.galeria--4{grid-template-columns:repeat(4,minmax(0,1fr))}}.galeria .foto{aspect-ratio:4 / 3}.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem .85rem .7rem;color:var(--branco);font-size:var(--t-xs);font-weight:700;background:linear-gradient(180deg,transparent,rgba(var(--escuro-rgb),.85));line-height:1.3}@media (max-width:719px){.galeria[data-carrossel]{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem var(--lateral) 1rem;margin-inline:calc(-1 * var(--lateral));scroll-padding-inline:var(--lateral);scrollbar-width:none}.galeria[data-carrossel]::-webkit-scrollbar{display:none}.galeria[data-carrossel] .foto{flex:0 0 82%;scroll-snap-align:center;box-shadow:var(--sombra)}}.pontos{display:flex;justify-content:center;gap:.45rem;margin-top:.25rem}.pontos button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--cinza-2);cursor:pointer;transition:width .2s ease,background .2s ease}.pontos button[aria-current="true"]{width:22px;border-radius:999px;background:var(--primaria)}@media (min-width:720px){.pontos{display:none}}.faq-grade{display:grid;gap:var(--gap-md)}@media (min-width:1000px){.faq-grade{grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:1.5rem clamp(2rem,4vw,4rem);align-items:start}}.faq{display:grid;gap:.65rem}.faq__item{border:1px solid var(--cinza-1);border-radius:16px;background:var(--branco);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease}.faq__item[open]{border-color:var(--primaria);box-shadow:0 10px 30px rgba(var(--escuro-rgb),.07)}.faq__pergunta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;padding:1.05rem 1.15rem;cursor:pointer;list-style:none;font-weight:700;line-height:1.3}.faq__pergunta::-webkit-details-marker{display:none}.faq__num{font-size:var(--t-xs);font-weight:800;color:var(--primaria-no-claro);letter-spacing:.06em}.faq__icone{position:relative;width:32px;height:32px;border-radius:50%;background:var(--creme);border:1px solid var(--cinza-1);transition:background .18s ease,transform .25s ease,border-color .18s ease}.faq__icone::before,.faq__icone::after{content:"";position:absolute;left:50%;top:50%;background:var(--escuro);border-radius:2px;transform:translate(-50%,-50%)}.faq__icone::before{width:12px;height:2px}.faq__icone::after{width:2px;height:12px}.faq__item[open] .faq__icone{background:var(--primaria);border-color:var(--primaria);transform:rotate(45deg)}.faq__item[open] .faq__icone::before,.faq__item[open] .faq__icone::after{background:var(--sobre-primaria)}.faq__corpo{overflow:hidden}.faq__resposta{padding:0 1.15rem 1.15rem calc(1.15rem + 1.6rem + .9rem);font-size:var(--t-sm);color:var(--cinza-texto)}@media (max-width:719px){.faq__resposta{padding-left:1.15rem}}.artigo{font-size:1.0625rem;line-height:1.75}.artigo>*{max-width:var(--largura-texto)}.artigo h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin:2.25rem 0 .75rem}.artigo p{margin-bottom:1.1rem;color:#2b2925}.artigo ul{padding-left:1.25rem;margin-bottom:1.25rem}.artigo li{margin-bottom:.45rem}.artigo li::marker{color:var(--primaria)}.artigo__capa{margin:0 0 2rem;aspect-ratio:16 / 9;max-width:100%}.artigo__fonte{font-size:var(--t-sm);color:var(--cinza-texto);border-top:1px solid var(--cinza-1);padding-top:1rem;margin-top:2rem}.video-quadro{position:relative;aspect-ratio:16 / 9;border-radius:var(--raio-lg);overflow:hidden;background:#000}.video-quadro iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.contatos{display:grid;gap:1rem;grid-template-columns:1fr}@media (min-width:720px){.contatos{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:900px){.contatos--coluna{grid-template-columns:1fr;gap:.7rem}.contatos--coluna .contato-item{padding:1rem 1.15rem}}.contato-item{display:grid;grid-template-columns:48px 1fr;gap:1rem;align-items:center;padding:1.25rem;background:var(--branco);border:1px solid var(--cinza-1);border-radius:var(--raio-lg);color:inherit;text-decoration:none}a.contato-item:hover{border-color:var(--primaria);box-shadow:var(--sombra)}.contato-item__ico{width:48px;height:48px;border-radius:14px;display:grid;place-content:center;background:var(--primaria-suave)}.contato-item__ico svg{width:22px;height:22px;fill:var(--primaria-no-claro)}.contato-item__ico--zap{background:#e3f9ec}.contato-item__ico--zap svg{fill:#1a9e4f}.contato-item strong{display:block;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--cinza-texto);margin-bottom:.2rem}.contato-item span:not(.contato-item__ico){display:block;font-weight:700;line-height:1.4}.erro{text-align:center;padding-block:clamp(4rem,12vw,8rem)}.erro__codigo{font-size:clamp(5rem,18vw,10rem);font-weight:800;line-height:1;letter-spacing:-.06em;color:var(--primaria-no-claro)} /* ajustes de grade e a ficha da obra (antes embutidos em cada página) */ .ficha{display:grid;grid-template-columns:max-content 1fr;gap:.55rem 1.75rem;margin:1.75rem 0 0;padding:1.25rem 1.5rem;background:var(--creme);border:1px solid var(--cinza-1);border-radius:var(--raio-lg)}.ficha dt{font-weight:800;font-size:var(--t-sm)}.ficha dd{margin:0;color:var(--cinza-texto)}@media (min-width:1000px){.servicos:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}.grade--3:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1100px){.obras:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}} /* sistema.css */ /* =========================================================================== Sistema de design do modelo de site do SolarZ Ads --------------------------------------------------------------------------- Escrito a partir das três referências aprovadas pelo time: o painel do resultado (movimento e disciplina de token), o planejador da 1ª reunião (número grande, proporção, curvas) e o ritmo de página com cartão em bandeja, cabeçalho de seção e CTA assinatura. Carrega DEPOIS do site.min.css e redefine o que precisa ser redefinido. =========================================================================== */ /* --------------------------------------------------------------------------- TOKENS Cada cor tem um papel escrito. Vermelho só em ação e marca; verde só no WhatsApp, que é o que converte; o resto é neutro quente. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- RESERVA DA GEIST COM AS MESMAS MEDIDAS --------------------------------------------------------------------------- Enquanto a Geist não chega, o texto aparece em Arial ajustada para ocupar o mesmo espaço (largura média, ascendente, descendente e entrelinha medidas numa frase em português nas duas fontes). Quando a Geist entra, nada se move: o CLS do swap vai a zero. Calculado pelo fontTools em 16/10/2026. --------------------------------------------------------------------------- */ @font-face { font-family: "Geist Reserva"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 102.47%; ascent-override: 98.08%; descent-override: 28.79%; line-gap-override: 0.00%; } :root { /* PALETA:INICIO (gerado pelo motor a partir de cores_site; não editar à mão) */ --s0: #ffffff; --s1: #f2f4f7; --s2: #e7ecf4; --s-escura: #0a1a40; --s-escura-2: #0d2152; --tinta: #0a1a40; --tinta-media: #48525b; --tinta-fraca: #535e6e; --linha: #dce1ea; --linha-forte: #c2ccdb; --marca: #004bc4; --marca-escura: #003996; --marca-suave: #e3ebf7; --acao: #0a1a40; --acao-clara: #ffb700; --acento: #004bc4; --acento-claro: #bdceea; --escura-rgb: 10, 26, 64; --escura-funda-rgb: 8, 21, 51; --noite-rgb: 12, 14, 18; --marca-rgb: 0, 75, 196; --marca-media: #0044b2; --marca-clara: #0263ff; --vivo-rgb: 9, 111, 195; --acao-clara-rgb: 255, 183, 0; --acao-clara-2: #ffc124; --vidro-rgb: 251, 252, 253; --vidro-2-rgb: 249, 250, 251; /* PALETA:FIM */ /* Tinta sobre fundo escuro */ --tinta-clara: #ffffff; /* sobre fundo escuro */ --tinta-clara-media: rgba(255, 255, 255, .74); --linha-escura: rgba(255, 255, 255, .14); /* WhatsApp: verde só no botão que abre conversa */ --zap: #25d366; /* só no botão que abre conversa */ --zap-escuro: #1ebe5a; /* Profundidade: duas camadas claras, nunca uma sombra preta só */ --elev-1: 0 1px 2px rgba(var(--escura-rgb), .05), 0 1px 3px rgba(var(--escura-rgb), .04); --elev-2: 0 4px 8px -4px rgba(var(--escura-rgb), .10), 0 12px 18px -2px rgba(var(--escura-rgb), .06); --elev-3: 0 18px 40px rgba(var(--escura-rgb), .14), 0 6px 14px rgba(var(--escura-rgb), .07); /* Tipografia, medida na referência: títulos em peso 500 com entrelinha curta e espaçamento negativo forte; texto em 400 com entrelinha larga. O site estava em 700 e 800, que é peso de outra família. */ --peso-titulo: 500; --peso-forte: 600; --esp-titulo: -.05em; /* Raio: um valor e derivados */ --r: 14px; --r-sm: 10px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px; /* Movimento */ --e-saida: cubic-bezier(.16, 1, .3, 1); --e-suave: cubic-bezier(.2, .7, .2, 1); --e-passa: cubic-bezier(.34, 1.56, .64, 1); --e-mola: linear(0, .006, .025, .101, .539, .826, .946, .991, 1.008, 1.006, 1); --t-toque: .14s; --t-curta: .25s; --t-media: .45s; --t-longa: .75s; /* Tipografia: escala de seis degraus */ --f-display: clamp(2.3rem, 1.1rem + 5vw, 3.75rem); --f-titulo: clamp(1.8rem, 1.1rem + 2.6vw, 2.6rem); --f-bloco: clamp(1.15rem, 1rem + .6vw, 1.4rem); --f-corpo: 1.0625rem; --f-apoio: .9375rem; --f-micro: .75rem; /* Medidas */ --largura: 1200px; --largura-leitura: 62ch; --lateral: clamp(1rem, 4vw, 2.5rem); --respiro: clamp(3.5rem, 7vw, 6rem); --topo-altura: 76px; } /* --------------------------------------------------------------------------- BASE --------------------------------------------------------------------------- */ body { background: var(--s0); color: var(--tinta); font-size: var(--f-corpo); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--tinta); font-weight: 600; letter-spacing: -.025em; } h1 { font-size: var(--f-display); line-height: 1.03; letter-spacing: -.035em; text-wrap: balance; } h2 { font-size: var(--f-titulo); line-height: 1.08; text-wrap: balance; } h3 { font-size: var(--f-bloco); line-height: 1.25; } p { color: var(--tinta-media); line-height: 1.6; text-wrap: pretty; } .wrap { width: min(var(--largura), 100% - var(--lateral) * 2); margin-inline: auto; } /* O ritmo da página: faixas alternadas, nunca duas iguais seguidas */ .faixa { padding-block: var(--respiro); } .faixa--clara { background: var(--s0); } .faixa--cinza { background: var(--s1); } .faixa--bandeja { background: var(--s2); } .faixa--escura { background: var(--s-escura); color: var(--tinta-clara); } .faixa--escura h2, .faixa--escura h3 { color: var(--tinta-clara); } .faixa--escura p { color: var(--tinta-clara-media); } /* --------------------------------------------------------------------------- CABEÇALHO DE SEÇÃO Pílula, título, descrição. O mesmo desenho em toda seção. --------------------------------------------------------------------------- */ .cabsec { display: grid; gap: .9rem; justify-items: start; margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: 44rem; } .cabsec--centro { justify-items: center; text-align: center; margin-inline: auto; } /* --------------------------------------------------------------------------- Variante em duas colunas: título à esquerda, ação à direita, alinhada pela base do título. Na versão anterior o link de passagem caía embaixo da descrição e a metade direita da tela ficava vazia em toda seção. --------------------------------------------------------------------------- */ @media (min-width: 900px) { .cabsec--linha { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2rem; } .cabsec--linha .pill { grid-column: 1; } .cabsec--linha h2 { grid-column: 1; } .cabsec--linha p { grid-column: 1; } .cabsec--linha > .seta { grid-column: 2; grid-row: 2 / span 2; align-self: end; justify-self: end; margin-bottom: .35rem; white-space: nowrap; } /* sem descrição, a ação encosta na linha do título */ .cabsec--linha > .seta:nth-child(3) { grid-row: 2; } } .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border: 1px solid var(--linha); border-radius: var(--r-pill); background: var(--s0); color: var(--tinta-media); font-size: var(--f-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--marca); } .faixa--escura .pill { border-color: var(--linha-escura); background: rgba(255, 255, 255, .06); color: var(--tinta-clara-media); } .faixa--escura .pill::before { background: var(--acento); } .cabsec p { font-size: var(--f-corpo); max-width: var(--largura-leitura); margin: 0; } /* --------------------------------------------------------------------------- BOTÕES --------------------------------------------------------------------------- */ .bt { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.5rem; border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--f-apoio); font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: transform var(--t-toque) var(--e-suave), box-shadow var(--t-curta) var(--e-suave), background-color var(--t-toque) linear, border-color var(--t-toque) linear; } .bt:hover { transform: translateY(-2px); } .bt:active { transform: translateY(0) scale(.97); } .bt:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; } /* --------------------------------------------------------------------------- OS TONS DOS BOTÕES --------------------------------------------------------------------------- Medidos na referência, onde há dois e só dois: ação principal fundo --acao-clara, texto --tinta ação secundária fundo --acao, texto branco O verde do WhatsApp saiu do fundo do botão: ele não pertence à paleta e, ao lado do verde profundo, puxava a tela para outra família de verde. O ícone continua no botão, e é ele que diz qual canal abre, o reconhecimento vem do desenho, não do fundo. --------------------------------------------------------------------------- */ .bt--zap { background: var(--acao-clara); color: var(--acao); box-shadow: 0 6px 16px rgba(var(--marca-rgb), .26); } .bt--zap:hover { background: var(--acao-clara-2); box-shadow: 0 12px 26px rgba(var(--marca-rgb), .34); } .bt--escuro { background: var(--acao); color: var(--tinta-clara); } .bt--escuro:hover { box-shadow: var(--elev-3); } .bt--linha { background: transparent; border-color: var(--linha-forte); color: var(--tinta); } .bt--linha:hover { border-color: var(--tinta); background: var(--s1); } .faixa--escura .bt--linha { border-color: var(--linha-escura); color: var(--tinta-clara); } .faixa--escura .bt--linha:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255,255,255,.4); } /* O CTA assinatura: pílula com o círculo da seta à esquerda */ .bt--assina { padding: .4rem 1.4rem .4rem .4rem; gap: .7rem; } .bt--assina .circ { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(255, 255, 255, .22); flex: 0 0 auto; transition: transform var(--t-media) var(--e-passa); } .bt--assina:hover { gap: 1rem; } .bt--assina:hover .circ { transform: translateX(3px); } /* Link com seta */ .seta { display: inline-flex; align-items: center; gap: .45rem; color: var(--tinta); font-weight: 600; text-decoration: none; transition: gap var(--t-curta) var(--e-passa); } .seta:hover { gap: .75rem; } .seta svg { transition: transform var(--t-curta) var(--e-passa); } .seta:hover svg { transform: translateX(3px); } /* --------------------------------------------------------------------------- CARTÃO E BANDEJA --------------------------------------------------------------------------- */ .bandeja { background: var(--s2); border-radius: var(--r-xl); padding: 8px; display: grid; gap: 8px; } .ec-cartao { background: var(--s0); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform var(--t-curta) var(--e-saida), box-shadow var(--t-curta) var(--e-suave); } .ec-cartao:hover { transform: translateY(-4px); box-shadow: var(--elev-3); } .ec-cartao__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--s2); } .ec-cartao__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-longa) var(--e-saida); } .ec-cartao:hover .ec-cartao__foto img { transform: scale(1.05); } .ec-cartao__corpo { padding: 1.25rem; display: grid; gap: .5rem; flex: 1; } .ec-cartao__titulo { font-size: var(--f-bloco); font-weight: 600; } .ec-cartao__texto { font-size: var(--f-apoio); color: var(--tinta-media); margin: 0; } .ec-cartao__pe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--linha); font-size: var(--f-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-fraca); } .ec-cartao__seta { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--linha-forte); border-radius: var(--r-sm); color: var(--tinta); transition: background-color var(--t-curta) var(--e-suave), border-color var(--t-curta) linear, color var(--t-curta) linear, transform var(--t-curta) var(--e-passa); } .ec-cartao:hover .ec-cartao__seta { background: var(--marca); border-color: var(--marca); color: #fff; transform: translateX(3px); } /* --------------------------------------------------------------------------- GRADES --------------------------------------------------------------------------- */ .ec-grade { display: grid; gap: 1.25rem; } .ec-grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .ec-grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .ec-grade--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .bandeja .ec-grade { gap: 8px; } /* --------------------------------------------------------------------------- TRILHA --------------------------------------------------------------------------- No computador a grade mostra tudo de uma vez. No celular, oito obras empilhadas viravam 4101px de rolagem vertical, e quem chega pelo anúncio desistia antes do fim. Com a trilha, o dedo arrasta de lado, cada cartão encaixa na borda e a seção ocupa a altura de um cartão. A régua de posição é desenhada pelo JS, a partir do número de cartões. --------------------------------------------------------------------------- */ @media (max-width: 719px) { .trilha { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; /* sangra até a borda da tela, não até a borda do wrap: 50% - 50vw chega à extremidade seja qual for a margem dos pais; o recuo interno repõe a distância do texto, e o cartão seguinte fica cortado na borda, sem faixa vazia antes dela */ margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); scroll-padding-inline: calc(var(--lateral) * 2); padding-block: 2px .5rem; scrollbar-width: none; -ms-overflow-style: none; } .trilha::-webkit-scrollbar { display: none; } .trilha > * { scroll-snap-align: start; } /* dentro da bandeja o respiro já vem do pai */ .bandeja .trilha { margin-inline: 0; padding-inline: 0; } .trilha--larga { grid-auto-columns: 86%; } .regua { display: flex; gap: 0; justify-content: center; margin-top: .6rem; padding: 0; list-style: none; } /* o ponto tem 6 px, mas a área de toque tem 24: o dedo acerta */ .regua__ponto { display: grid; place-items: center; width: 24px; height: 24px; cursor: pointer; } .regua__ponto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--linha-forte); transition: width var(--t-curta) var(--e-saida), background-color var(--t-curta) linear; } .regua__ponto[aria-current="true"] { width: 36px; } .regua__ponto[aria-current="true"]::before { width: 20px; border-radius: 3px; background: var(--marca); } .faixa--escura .regua__ponto::before { background: rgba(255, 255, 255, .28); } .faixa--escura .regua__ponto[aria-current="true"]::before { background: var(--acento); } } @media (min-width: 720px) { .regua { display: none; } } /* --------------------------------------------------------------------------- CARTÃO EM DUPLA, NO CELULAR --------------------------------------------------------------------------- As quatro soluções são a porta de entrada do site: esconder três atrás de um arraste custaria clique. Então aqui elas encurtam em vez de sumir: foto quadrada, título e seta, duas por linha. --------------------------------------------------------------------------- */ @media (max-width: 719px) { .ec-grade--duo { grid-template-columns: 1fr 1fr; gap: 8px; } .ec-grade--duo .ec-cartao__foto { aspect-ratio: 1 / 1; } .ec-grade--duo .ec-cartao__corpo { padding: .85rem .85rem .6rem; gap: .25rem; } .ec-grade--duo .ec-cartao__titulo { font-size: 1rem; line-height: 1.25; } .ec-grade--duo .ec-cartao__texto { display: none; } .ec-grade--duo .ec-cartao__pe { justify-content: flex-end; padding: 0 .85rem .85rem; border: 0; } .ec-grade--duo .ec-cartao__pe > span:first-child { display: none; } .ec-grade--duo .ec-cartao__seta { width: 28px; height: 28px; } } /* --------------------------------------------------------------------------- NÚMERO GRANDE COM UNIDADE SATÉLITE (planejador) --------------------------------------------------------------------------- */ .num { display: flex; align-items: baseline; gap: .4rem; font-size: clamp(2.125rem, 1.3rem + 3.4vw, 3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; font-variant-numeric: tabular-nums; } .num .un { font-size: .36em; font-weight: 500; color: var(--tinta-fraca); letter-spacing: 0; } .num-rot { font-size: var(--f-apoio); color: var(--tinta-media); margin-top: .35rem; } .faixa--escura .num-rot { color: var(--tinta-clara-media); } .faixa--escura .num .un { color: var(--tinta-clara-media); } /* --------------------------------------------------------------------------- MOVIMENTO --------------------------------------------------------------------------- */ [data-entra] { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity var(--t-media) var(--e-suave), transform .6s var(--e-mola); } [data-entra].dentro { opacity: 1; transform: none; } [data-escada] > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity var(--t-media) var(--e-suave), transform .55s var(--e-mola); } [data-escada].dentro > * { opacity: 1; transform: none; } [data-escada].dentro > *:nth-child(1) { transition-delay: 0ms; } [data-escada].dentro > *:nth-child(2) { transition-delay: 70ms; } [data-escada].dentro > *:nth-child(3) { transition-delay: 140ms; } [data-escada].dentro > *:nth-child(4) { transition-delay: 210ms; } [data-escada].dentro > *:nth-child(5) { transition-delay: 280ms; } [data-escada].dentro > *:nth-child(6) { transition-delay: 350ms; } [data-escada].dentro > *:nth-child(7) { transition-delay: 420ms; } [data-escada].dentro > *:nth-child(8) { transition-delay: 490ms; } /* --------------------------------------------------------------------------- ENTRADA PRESA À ROLAGEM --------------------------------------------------------------------------- O que havia acima dispara de uma vez: o bloco cruza uma linha invisível e a animação roda sozinha, no tempo dela, sem relação com a velocidade do dedo. Quem rola devagar vê o bloco parado e depois um salto; quem rola rápido perde a animação inteira. É isso que dá a sensação de travado. Aqui a animação é a própria rolagem: o bloco entra na medida em que sobe na tela, para quando o dedo para e volta se a página voltar. Roda no compositor, sem JavaScript no caminho. Onde o navegador não tiver linha do tempo de rolagem, nada disto se aplica e vale o bloco de cima, com o observador. --------------------------------------------------------------------------- */ @supports (animation-timeline: view()) { .com-timeline [data-entra] { opacity: 1; transform: none; transition: none; animation: sobe-entrando linear both; animation-timeline: view(); animation-range: cover 0% cover 34%; } .com-timeline [data-escada] > * { opacity: 1; transform: none; transition: none; animation: sobe-entrando linear both; animation-timeline: view(); } /* A escada mede o percurso de cada filho, não o da grade inteira. Com `cover`, os cartões da segunda linha só completavam muito depois: com a grade já inteira na tela, metade dela ainda estava invisível. Com `entry`, cada cartão anima enquanto ele próprio entra, e o atraso entre um e outro é pequeno, o bastante para o olho ver a cascata, pouco para não deixar buraco. */ .com-timeline [data-escada] > *:nth-child(1) { animation-range: entry 6% entry 58%; } .com-timeline [data-escada] > *:nth-child(2) { animation-range: entry 10% entry 62%; } .com-timeline [data-escada] > *:nth-child(3) { animation-range: entry 14% entry 66%; } .com-timeline [data-escada] > *:nth-child(4) { animation-range: entry 18% entry 70%; } .com-timeline [data-escada] > *:nth-child(5) { animation-range: entry 22% entry 74%; } .com-timeline [data-escada] > *:nth-child(6) { animation-range: entry 26% entry 78%; } .com-timeline [data-escada] > *:nth-child(7) { animation-range: entry 30% entry 82%; } .com-timeline [data-escada] > *:nth-child(n+8) { animation-range: entry 34% entry 86%; } @keyframes sobe-entrando { from { opacity: 0; transform: translate3d(0, 54px, 0) scale(.962); filter: blur(3px); } 34% { opacity: .78; filter: blur(1.4px); } 56% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } } /* Os filhos de uma escada são muitos, oito cartões numa grade. Ali o desfoque multiplica o custo de pintura sem mudar a leitura, então eles sobem só com escala e opacidade. */ .com-timeline [data-escada] > * { animation-name: sobe-escada; } @keyframes sobe-escada { from { opacity: 0; transform: translate3d(0, 44px, 0) scale(.97); } to { opacity: 1; transform: none; } } } /* Título palavra a palavra */ .palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .palavra > span { display: inline-block; transform: translate3d(0, 110%, 0) rotate(3deg); transition: transform .95s var(--e-saida); } .animado .palavra > span { transform: none; } /* --------------------------------------------------------------------------- TEXTURA E LUZ PARA A FAIXA ESCURA --------------------------------------------------------------------------- */ .faixa--escura { position: relative; isolation: isolate; overflow: hidden; } .faixa--escura::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 85% 65% at 50% 40%, #000 35%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 40%, #000 35%, transparent 100%); } .faixa--escura::after { content: ""; position: absolute; z-index: -1; width: 680px; height: 680px; border-radius: 50%; top: -30%; left: -10%; background: radial-gradient(closest-side, rgba(var(--marca-rgb), .28), rgba(var(--escura-rgb), .14) 45%, transparent 100%); animation: flutua 24s var(--e-suave) infinite alternate; pointer-events: none; } @keyframes flutua { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8%, 6%, 0) scale(1.1); } } /* --------------------------------------------------------------------------- ESQUELETO --------------------------------------------------------------------------- */ .esq { position: relative; overflow: hidden; background: var(--s2); } .esq::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: brilha 1.4s infinite; } @keyframes brilha { to { transform: translateX(100%); } } /* --------------------------------------------------------------------------- PREFERÊNCIA DE MENOS MOVIMENTO --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-entra], [data-escada] > *, .palavra > span { opacity: 1 !important; transform: none !important; transition: none !important; } .faixa--escura::after, .esq::after { animation: none !important; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* --------------------------------------------------------------------------- QUADRO DA PRÉVIA --------------------------------------------------------------------------- A prévia da skill captura a página dentro de um quadro da altura da página inteira. Ali o site fica parado, como no movimento reduzido, e o topo usa a altura de uma tela de verdade (--tela, gravada pelo cabeçalho da página). --------------------------------------------------------------------------- */ html.quadro-previa [data-entra], html.quadro-previa [data-escada] > *, html.quadro-previa .palavra > span { opacity: 1 !important; transform: none !important; transition: none !important; } html.quadro-previa *, html.quadro-previa *::before, html.quadro-previa *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } /* --------------------------------------------------------------------------- IMPRESSÃO --------------------------------------------------------------------------- */ @media print { .faixa--escura { background: #fff !important; color: #000 !important; } .faixa--escura::before, .faixa--escura::after { display: none; } * { box-shadow: none !important; animation: none !important; transition: none !important; } [data-entra], [data-escada] > * { opacity: 1 !important; transform: none !important; } } /* --------------------------------------------------------------------------- CABEÇALHO E RODAPÉ DE AÇÃO --------------------------------------------------------------------------- */ body.rolou .topo, body.rolou header { box-shadow: 0 1px 0 rgba(var(--escura-rgb), .05), 0 6px 18px rgba(var(--escura-rgb), .05); } .acao-fixa { position: fixed; inset: auto 0 0 0; z-index: 60; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--linha); transform: translateY(115%); transition: transform var(--t-media) var(--e-saida); } body.mostra-acao .acao-fixa { transform: none; } .acao-fixa .bt { width: 100%; } @media (max-width: 719px) { input, select, textarea { font-size: 16px; } /* Rótulo em maiúsculas com espaçamento largo pede um ponto a mais de corpo para não virar um friso cinza no celular. */ .pill, .rotulo { font-size: .8125rem; letter-spacing: .12em; } } /* --------------------------------------------------------------------------- LEGIBILIDADE MEDIDA --------------------------------------------------------------------------- Cada valor abaixo saiu de medição com `bin/cores.py`, que compõe a transparência do texto com a pilha de fundos antes de dividir. O mínimo é 4,5:1 no texto corrido e 3:1 no que é só desenho. --------------------------------------------------------------------------- */ /* Rodapé do site: cinza morno sobre quase preto dava 2,77:1 */ .rod__texto, .rod__hora { color: rgba(255, 255, 255, .62); } /* Aviso de cookies: no escuro, o verde de destaque também não se sustenta */ .cookies__linha a, .cookies a { color: #cce9a0; } /* Botão do WhatsApp do cabeçalho: branco sobre verde dava 1,98:1 */ .botao--zap, .botao--zap:visited { color: #06310f; } /* Estrelas da avaliação: desenho, não texto. O número fica ao lado, escrito */ .estrelas { color: var(--marca); } /* --------------------------------------------------------------------------- ALVO DE TOQUE --------------------------------------------------------------------------- No celular, link de navegação precisa de área, não só de texto. Os 44px valem para menu, rodapé e links de passagem; link dentro de parágrafo fica de fora, porque quebrar a linha é pior que o alvo pequeno. --------------------------------------------------------------------------- */ @media (max-width: 719px) { .nav__painel a, .sub-painel a, .rod__grade a, .rod__base a, .rod__contato a, .redes a, a.seta { display: inline-flex; align-items: center; min-height: 44px; } .nav__painel .nav__link, .sub-painel a { width: 100%; padding-block: .55rem; } .rod__contato a, .rod__base a { padding-block: .35rem; } } /* --------------------------------------------------------------------------- ACERTOS FINAIS, TODOS MEDIDOS --------------------------------------------------------------------------- */ /* Nada pode empurrar a página para o lado. O clip, diferente do hidden, não cria contexto de rolagem e por isso não quebra o cabeçalho grudado. */ html { overflow-x: clip; } body { overflow-x: clip; } /* O botão do site antigo segue o mesmo par da referência: fundo claro da paleta, texto no verde profundo. O verde do WhatsApp com texto branco dava 1,98:1, e com o fundo novo o contraste passa de 9:1. */ .zap, .zap span, a.zap, .botao--zap, .botao--zap:hover, .botao--zap:focus-visible, .botao--zap:visited { color: var(--acao); } .botao--zap, .zap, a.zap { background: var(--acao-clara) !important; box-shadow: 0 6px 16px rgba(var(--marca-rgb), .26) !important; } .botao--zap:hover, a.zap:hover { background: var(--acao-clara-2) !important; } /* Link de passagem na faixa escura: era tinta escura sobre fundo escuro */ .faixa--escura .seta, .secao--escura .seta { color: var(--tinta-clara); } .faixa--escura .seta:hover, .secao--escura .seta:hover { color: var(--acento); } /* Alvo de toque: a norma pede 24px, e aqui a conta é 44px para tudo que é navegação. Faltavam as listas de passagem das páginas internas. */ @media (max-width: 719px) { .migalhas a, .lista-links a, .faq a, .acordeao a, .secao li > a, .cartao .link-seta, .link-seta { display: inline-flex; align-items: center; min-height: 44px; } } /* --------------------------------------------------------------------------- TRANSIÇÃO ENTRE PÁGINAS --------------------------------------------------------------------------- Sem isto, clicar num link é um corte seco: a tela pisca em branco e a página seguinte aparece de uma vez. Com isto, o conteúdo troca por esmaecimento curto enquanto o cabeçalho e o rodapé ficam parados, que é o que faz a navegação parecer um aplicativo e não uma sequência de telas. Onde o navegador não entender, nada acontece: a navegação continua como sempre foi. --------------------------------------------------------------------------- */ @view-transition { navigation: auto; } /* o que não deve piscar na troca */ .cab { view-transition-name: topo-do-site; } .rod { view-transition-name: pe-do-site; } ::view-transition-old(root) { animation: sai-pagina .22s var(--e-suave) both; } ::view-transition-new(root) { animation: entra-pagina .34s var(--e-saida) both; } @keyframes sai-pagina { to { opacity: 0; transform: translateY(-6px); } } @keyframes entra-pagina { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* =========================================================================== BOTÕES: O QUE ACONTECE NO HOVER --------------------------------------------------------------------------- Antes, todo botão do site reagia do mesmo jeito: trocava de cor e levantava um pouco. Três botões com papéis diferentes, um movimento só. A regra aqui é que o movimento conte o papel do botão: AÇÃO (verde, WhatsApp) o rótulo rola para cima e volta por baixo, como um letreiro que vira. É o botão que mais importa, e é o único que se move por dentro. PASSAGEM (contorno) um fundo sobe de baixo e toma o botão, o texto inverte. A direção é a mesma de quem avança. ASSINATURA (escuro) o círculo da seta cresce e vira o fundo; a seta anda para a direita dentro dele. LINK DE TEXTO (.seta) a seta avança e um traço cresce sob o texto. Tudo com transformação e opacidade, que o navegador resolve sem repintar. =========================================================================== */ /* --- o letreiro que vira ------------------------------------------------- */ .bt__rolo { display: inline-grid; overflow: hidden; padding-block: .16em; margin-block: -.16em; } .bt__rolo > span { grid-area: 1 / 1; display: block; white-space: nowrap; transition: transform .42s var(--e-saida), opacity .26s linear; } .bt__rolo > span + span { transform: translateY(105%); opacity: 0; } .bt:hover .bt__rolo > span:first-child, .bt:focus-visible .bt__rolo > span:first-child, .botao:hover .bt__rolo > span:first-child { transform: translateY(-105%); opacity: 0; } .bt:hover .bt__rolo > span + span, .bt:focus-visible .bt__rolo > span + span, .botao:hover .bt__rolo > span + span { transform: none; opacity: 1; } /* --- ação: o verde ------------------------------------------------------- */ .bt--zap { position: relative; overflow: hidden; } .bt--zap .ico-zap { transition: transform .4s var(--e-mola); } .bt--zap:hover .ico-zap, .bt--zap:focus-visible .ico-zap { transform: scale(1.14) rotate(-8deg); } /* --- passagem: o contorno ------------------------------------------------ */ .bt--linha { position: relative; overflow: hidden; z-index: 0; transition: color var(--t-curta) linear, border-color var(--t-curta) linear; } .bt--linha::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tinta); transform: translateY(101%); transition: transform .42s var(--e-saida); } .bt--linha:hover, .bt--linha:focus-visible { color: var(--s0); border-color: var(--tinta); background: transparent; } .bt--linha:hover::before, .bt--linha:focus-visible::before { transform: none; } /* na faixa escura o preenchimento é claro */ .faixa--escura .bt--linha::before, .heroi-novo .bt--linha::before, .secao--escura .bt--linha::before { background: var(--s0); } .faixa--escura .bt--linha:hover, .heroi-novo .bt--linha:hover, .secao--escura .bt--linha:hover { color: var(--tinta); border-color: var(--s0); } /* --- assinatura: o círculo que cresce ------------------------------------ */ .bt--assina { position: relative; overflow: hidden; z-index: 0; } .bt--assina .circ { position: relative; z-index: 1; transition: transform .45s var(--e-saida), background-color .3s linear; } .bt--assina::before { content: ""; position: absolute; z-index: -1; left: .4rem; top: 50%; width: 2.1rem; height: 2.1rem; margin-top: -1.05rem; border-radius: 50%; background: var(--marca); transform: scale(1); transform-origin: center; transition: transform .5s var(--e-saida); } .bt--assina:hover::before, .bt--assina:focus-visible::before { transform: scale(22); } .bt--assina:hover .circ, .bt--assina:focus-visible .circ { transform: translateX(3px); } .bt--assina:hover, .bt--assina:focus-visible { color: #fff; } /* --- link de passagem ---------------------------------------------------- */ .seta { position: relative; display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 600; padding-bottom: .15rem; } .seta svg { transition: transform .36s var(--e-passa); } .seta:hover svg, .seta:focus-visible svg { transform: translateX(5px); } .seta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--e-saida); } .seta:hover::after, .seta:focus-visible::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .bt__rolo > span, .bt--zap .ico-zap, .bt--linha::before, .bt--assina::before, .bt--assina .circ, .seta svg, .seta::after { transition: none !important; } .bt--linha::before, .bt--assina::before { display: none; } } /* Só para leitor de tela: o rótulo do botão é lido uma vez, embora esteja escrito duas no letreiro. */ .so-leitor { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } /* --------------------------------------------------------------------------- NÚMEROS: A CONTAGEM E O TOQUE DO MOUSE --------------------------------------------------------------------------- Durante a contagem o número leva um desfoque que segue a velocidade: no começo, quando os dígitos trocam depressa, ele é forte; no fim, quando o número assenta, é zero. O JavaScript escreve --borrao e --sobe a cada quadro, e o desenho é só daqui. No hover, o bloco inteiro sobe um pouco, a unidade acende na cor da marca e um traço cresce embaixo. Nada pisca: tudo tem caminho de ida e volta. --------------------------------------------------------------------------- */ /* O desfoque só existe enquanto a contagem acontece. Antes ficava declarado o tempo todo, com will-change junto: isso mantinha o número numa camada própria e, quando a camada era desfeita, o texto saltava um fio de pixel. Era o pulo que aparecia ao passar o mouse. */ .num.contando { filter: blur(var(--borrao, 0)); transform: translateY(var(--sobe, 0)); transition: none; } /* --- o toque do mouse ---------------------------------------------------- */ /* O hover usa `translate`, não `transform`: a animação presa à rolagem fica com transform fixado no valor final e engoliria qualquer transform daqui. As duas propriedades são separadas e se somam. */ .prova__item, .numeros__item, .heroi-novo__prova { position: relative; transition: translate .42s var(--e-saida); } .prova__item::after, .heroi-novo__prova::after { content: ""; position: absolute; left: 0; bottom: -.5rem; width: 100%; height: 2px; border-radius: 2px; background: var(--marca); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--e-saida); } .prova__item:hover, .numeros__item:hover, .heroi-novo__prova:hover { translate: 0 -4px; } .prova__item:hover::after, .heroi-novo__prova:hover::after { transform: scaleX(1); } .prova__item .un, .numeros__item .un, .heroi-novo__prova .un { transition: color .34s linear; } .prova__item:hover .un, .numeros__item:hover .un { color: var(--marca); } .prova__item .num, .numeros__item .numeros__num { transition: text-shadow .45s var(--e-suave), filter .3s var(--e-suave), transform .3s var(--e-saida); } .prova__item:hover .num { text-shadow: 0 10px 30px rgba(var(--marca-rgb), .3); } .numeros__item:hover .numeros__num { text-shadow: 0 10px 30px rgba(var(--marca-rgb), .26); } .prova__item .num-rot, .numeros__item .numeros__rot { transition: color .34s linear; } .prova__item:hover .num-rot, .numeros__item:hover .numeros__rot { color: var(--tinta-media); } /* na faixa escura o traço é o verde do logo */ .faixa--escura .prova__item::after, .heroi-novo .heroi-novo__prova::after, .secao--escura .numeros__item::after { background: var(--acento); } .heroi-novo .heroi-novo__prova:hover .un { color: var(--acento); } @media (prefers-reduced-motion: reduce) { .num { filter: none !important; transform: none !important; } .prova__item, .numeros__item, .heroi-novo__prova, .prova__item::after, .heroi-novo__prova::after { transition: none !important; translate: none !important; } } /* --------------------------------------------------------------------------- LINK DE PASSAGEM COM PESO --------------------------------------------------------------------------- O link de texto com uma seta resolve bem dentro de um cabeçalho de seção, ao lado de um título. Sozinho num bloco, como embaixo do vídeo, some: fica com peso de legenda onde devia ter peso de convite. Esta variante mantém o desenho de link, sem virar mais um botão cheio, mas ganha a seta dentro de um círculo e uma moldura que se fecha no hover. O círculo é o mesmo elemento do botão de assinatura, do outro lado. --------------------------------------------------------------------------- */ .seta--forte { gap: .85rem; padding: .5rem .5rem .5rem 1.15rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--linha); transition: box-shadow .4s var(--e-suave), background-color .4s linear; } .seta--forte::after { display: none; } /* o traço cede lugar à moldura */ .seta--forte .circ { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; background: var(--marca); color: #fff; transition: transform .42s var(--e-mola), background-color .3s linear; } /* A seta não se arrasta três pixels e volta: ela sai pela direita e outra igual entra pela esquerda, no mesmo movimento. O círculo só segura as duas, com o corte nas bordas. */ .seta--forte .circ { overflow: hidden; } .circ__troca { display: grid; grid-auto-flow: column; width: 200%; transform: translateX(-25%); transition: transform .44s var(--e-saida); } .circ__troca svg { justify-self: center; } .seta--forte:hover .circ__troca, .seta--forte:focus-visible .circ__troca { transform: translateX(25%); } .seta--forte:hover, .seta--forte:focus-visible { box-shadow: inset 0 0 0 1px var(--linha-forte); background: var(--s1); } .seta--forte:hover .circ { transform: scale(1.08); } /* na faixa escura a moldura é clara e o fundo quase não existe */ .faixa--escura .seta--forte, .secao--escura .seta--forte, .heroi .seta--forte { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } /* O verde do logo serve para um detalhe pequeno, não para uma frase inteira: aqui ele disputava com o círculo vermelho ao lado. O texto fica branco. */ .faixa--escura .seta--forte:hover, .secao--escura .seta--forte:hover, .heroi .seta--forte:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff; } @media (prefers-reduced-motion: reduce) { .seta--forte, .seta--forte .circ, .circ__troca { transition: none; } } /* =========================================================================== CARTÃO DE OBRA --------------------------------------------------------------------------- Seguindo a referência do Airbnb, e entendendo por que ela funciona: Lá o cartão não tem moldura, nem fundo branco, nem sombra, nem botão. A foto é o cartão, arredondada, grande, sem nada em volta, e o texto vem logo abaixo, pequeno e denso, três ou quatro linhas que cabem num olhar. O que carrega o peso é a imagem; o texto só a legenda. Um pé com "VER A OBRA" e uma seta dentro de um círculo, como havia aqui, rouba espaço da foto para repetir o que o cartão inteiro já faz: ele é um link. O selo sobre a imagem é o único elemento que disputa com ela, e por isso diz a coisa mais útil para quem procura obra: o tipo de telhado. =========================================================================== */ .obra-grade { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem) clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .obra-cartao { display: grid; gap: .7rem; text-decoration: none; color: inherit; background: none; border: 0; box-shadow: none; padding: 0; } .obra-cartao__foto { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--s2); } .obra-cartao__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* um véu discreto no pé, para o selo e o canto não sumirem em foto clara */ .obra-cartao__foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(22, 19, 15, .06); transition: box-shadow .4s linear; } .obra-cartao:hover .obra-cartao__foto::after { box-shadow: inset 0 0 0 1px rgba(22, 19, 15, .16); } .obra-cartao__selo { position: absolute; left: .7rem; top: .7rem; z-index: 1; padding: .35rem .7rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--tinta); font-size: var(--f-micro); font-weight: 600; line-height: 1; box-shadow: 0 2px 8px rgba(22, 19, 15, .12); } .obra-cartao__corpo { display: grid; gap: .1rem; } .obra-cartao__t { font-weight: 600; font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .obra-cartao__sub { font-size: var(--f-apoio); color: var(--tinta-fraca); } /* --------------------------------------------------------------------------- O cartão de obra sob o mouse --------------------------------------------------------------------------- Sem zoom na foto: ampliar a imagem no hover corta a obra justamente onde ela importa, que são as bordas do telhado. O que entra é um botão redondo subindo do canto, com a seta, o gesto de "abrir", e um escurecimento de pé para ele não sumir em foto clara. O selo recua um fio para o botão não disputar atenção com ele. --------------------------------------------------------------------------- */ .obra-cartao__abre { position: absolute; right: .7rem; bottom: .7rem; z-index: 1; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--s0); color: var(--tinta); box-shadow: 0 6px 18px rgba(22, 19, 15, .28); opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .3s linear, transform .42s var(--e-saida), background-color .3s linear, color .3s linear; } .obra-cartao__foto::before { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(transparent, rgba(12, 10, 9, .34)); opacity: 0; transition: opacity .45s var(--e-suave); pointer-events: none; } .obra-cartao:hover .obra-cartao__abre, .obra-cartao:focus-visible .obra-cartao__abre { opacity: 1; transform: none; } .obra-cartao:hover .obra-cartao__foto::before { opacity: 1; } .obra-cartao:hover .obra-cartao__abre { background: var(--marca); color: #fff; } .obra-cartao__selo { transition: transform .42s var(--e-saida), background-color .3s linear; } .obra-cartao:hover .obra-cartao__selo { transform: translateY(-2px); } .obra-cartao:hover .obra-cartao__t { text-decoration: underline; text-underline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .obra-cartao__abre, .obra-cartao__selo, .obra-cartao__foto::before { transition: none; } .obra-cartao:hover .obra-cartao__abre { transform: none; } } @media (max-width: 719px) { .obra-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .6rem; } .obra-cartao__t { font-size: .9375rem; } .obra-cartao__sub { font-size: .8125rem; } .obra-cartao__selo { left: .5rem; top: .5rem; padding: .3rem .55rem; } } /* --------------------------------------------------------------------------- ESQUELETO DA TROCA DE PÁGINA --------------------------------------------------------------------------- Entra no clique, com a forma da página de destino: ossos no lugar do título, do texto, dos botões, das fotos. Quem já viu a página reconhece a silhueta; quem nunca viu entende o que vem. O cabeçalho fica de fora, porque é o mesmo nas duas páginas. Os ossos respiram num brilho que corre da esquerda para a direita. A transição entre documentos faz o resto: quando a página chega, o esqueleto dissolve no conteúdo que ele desenhava. --------------------------------------------------------------------------- */ .trocando { position: fixed; /* a janela inteira, por baixo do cabeçalho (z 60): antes começava em --altura-cab, e com a página rolada o cabeçalho encolhe e sobrava uma fresta de página entre ele e o esqueleto */ inset: 0; padding-top: var(--topo-real, var(--altura-cab)); z-index: 55; background: var(--s1); opacity: 0; visibility: hidden; transition: opacity .14s linear, visibility .14s linear; overflow: hidden; } body.em-troca .trocando { opacity: 1; visibility: visible; } .trocando__barra { position: absolute; left: 0; top: var(--topo-real, var(--altura-cab)); height: 2px; width: 100%; background: linear-gradient(90deg, transparent, var(--marca), var(--acao-clara), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: corre-barra 1.1s linear infinite; } @keyframes corre-barra { from { background-position: -50% 0; } to { background-position: 150% 0; } } .trocando__corpo { display: grid; gap: .9rem; padding-top: clamp(2rem, 5vw, 3.5rem); } .trocando__duas { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 960px) { .trocando__duas { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); } .trocando__duas--texto { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: start; } } .trocando__coluna { display: grid; gap: .9rem; justify-items: start; } .trocando__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; justify-self: stretch; } .trocando__grade { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .trocando__cartao { display: grid; gap: .6rem; } .trocando__bento { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; aspect-ratio: 1 / 1; } .trocando__pilha { display: grid; gap: 10px; grid-template-rows: 1fr 1fr; } /* --- os ossos ------------------------------------------------------------ */ .osso { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--s2) 25%, var(--linha) 37%, var(--s2) 63%); background-size: 400% 100%; animation: brilha-osso 1.4s var(--e-suave) infinite; } @keyframes brilha-osso { from { background-position: 100% 0; } to { background-position: -100% 0; } } .osso--pill { width: 11rem; height: 1.9rem; border-radius: var(--r-pill); } .osso--migalha { width: 16rem; height: 1rem; } .osso--display { width: min(100%, 30rem); height: clamp(2.6rem, 4vw, 3.6rem); } .osso--titulo { width: min(100%, 32rem); height: 2.6rem; } .osso--linha { width: min(100%, 40rem); height: 1.05rem; } .osso--medio { width: min(100%, 26rem); } .osso--curto { width: min(100%, 18rem); } .osso--botao { width: 11rem; max-width: 100%; height: 3rem; border-radius: var(--r-pill); } .osso--vazado { background: transparent; box-shadow: inset 0 0 0 1px var(--linha-forte); animation: none; } .osso--fita { width: 100%; height: min(42vh, 22rem); border-radius: var(--r-xl); margin-top: .6rem; } .osso--foto { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-lg); } .osso--foto-lado { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-xl); } .osso--alto { width: 100%; height: 100%; border-radius: var(--r-xl); } .osso--quadro { width: 100%; height: 100%; border-radius: var(--r-lg); } .osso--cartao-alto { width: 100%; height: 16rem; border-radius: var(--r-xl); } @media (max-width: 719px) { .trocando__bento { aspect-ratio: 4 / 3; } .osso--fita { height: 13rem; } .osso--cartao-alto { height: 10rem; } } @media (prefers-reduced-motion: reduce) { .trocando__barra, .osso { animation: none; } } /* --------------------------------------------------------------------------- SELEÇÃO DE TEXTO O azul do sistema é a única cor de fora que ainda aparecia na tela, e aparece justamente quando alguém copia um trecho para mandar a alguém. --------------------------------------------------------------------------- */ ::selection { background: var(--acao-clara); color: var(--acao); } ::-moz-selection { background: var(--acao-clara); color: var(--acao); } /* na faixa escura, o claro da paleta continua legível */ .faixa--escura ::selection, .secao--escura ::selection { background: var(--acao-clara); color: var(--acao); } /* --------------------------------------------------------------------------- AS FAIXAS DE DESTAQUE --------------------------------------------------------------------------- Eram verde profundo de borda a borda. Com o herói claro, cada uma delas virava um poço escuro no meio de uma página clara, o contrário do que a referência faz, onde o destaque vem de um tom mais fechado dentro da família clara, com a mesma textura do alto da página. Agora a faixa de destaque é a bandeja, o degrau mais fechado do claro, com a trama e os pontos do herói por cima e a mancha de cor do logo ao fundo. O texto volta ao verde profundo, que é a cor de leitura do site. --------------------------------------------------------------------------- */ .faixa--escura, .secao--escura { position: relative; background: var(--s2); color: var(--tinta); isolation: isolate; overflow: hidden; } .faixa--escura h2, .faixa--escura h3, .secao--escura h2, .secao--escura h3 { color: var(--tinta); } .faixa--escura p, .secao--escura p { color: var(--tinta-media); } /* a trama, igual à do herói */ .faixa--escura::before, .secao--escura::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(rgba(var(--escura-rgb), .15) 1.1px, transparent 1.1px), linear-gradient(to right, rgba(var(--escura-rgb), .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--escura-rgb), .05) 1px, transparent 1px); background-size: 26px 26px, 26px 26px, 26px 26px; background-position: 13px 13px, 0 0, 0 0; -webkit-mask-image: radial-gradient(140% 120% at 74% 4%, #000 40%, transparent 90%); mask-image: radial-gradient(140% 120% at 74% 4%, #000 40%, transparent 90%); animation: none; opacity: 1; width: auto; height: auto; border-radius: 0; } /* a mancha de cor do fundo */ .faixa--escura::after, .secao--escura::after { content: ""; position: absolute; inset: -30% -10% auto; z-index: -1; width: auto; height: 150%; top: -30%; left: -10%; right: -10%; border-radius: 0; background: radial-gradient(44% 48% at 76% 26%, rgba(var(--vivo-rgb), .22), transparent 68%), radial-gradient(38% 40% at 8% 86%, rgba(var(--escura-rgb), .06), transparent 70%); animation: respira-faixa 26s var(--e-suave) infinite alternate; pointer-events: none; } @keyframes respira-faixa { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.1); } } /* o que dependia do fundo escuro volta aos tons claros */ .faixa--escura .pill, .secao--escura .rotulo { border-color: var(--linha); background: var(--s0); color: var(--tinta-media) !important; } .faixa--escura .pill::before, .secao--escura .rotulo::before { background: var(--marca); } .faixa--escura .bt--linha, .secao--escura .bt--linha, .secao--escura .botao--contorno { border-color: var(--linha-forte); color: var(--tinta); } .faixa--escura .bt--linha::before, .secao--escura .bt--linha::before { background: var(--acao); } .faixa--escura .bt--linha:hover, .secao--escura .bt--linha:hover { color: var(--s0); } .faixa--escura .seta, .secao--escura .seta { color: var(--tinta); } .faixa--escura .seta:hover, .secao--escura .seta:hover { color: var(--marca); } .faixa--escura .seta--forte, .secao--escura .seta--forte { box-shadow: inset 0 0 0 1px var(--linha); } .faixa--escura .seta--forte:hover, .secao--escura .seta--forte:hover { background: var(--s0); box-shadow: inset 0 0 0 1px var(--linha-forte); color: var(--tinta); } .faixa--escura .num, .secao--escura .numeros__num { color: var(--tinta); } .faixa--escura .num-rot, .secao--escura .numeros__rot { color: var(--tinta-fraca); } .faixa--escura .num .un { color: var(--tinta-fraca); } .faixa--escura .estrelas { color: var(--marca); } .faixa--escura .prova__item::after { background: var(--marca); } .secao--escura .cartao { background: var(--s0); border-color: var(--linha); } .secao--escura .cartao p { color: var(--tinta-media); } .secao--escura .numeros { background: var(--s0); } .secao--escura .numeros__item { background: var(--s1); } .secao--escura .selos strong { color: var(--tinta); } .secao--escura .selos span { color: var(--tinta-media); } /* --------------------------------------------------------------------------- RODAPÉ --------------------------------------------------------------------------- Era quase preto, com texto cinza. Fechava a página num tom que não existe mais em lugar nenhum do site: a última coisa que a pessoa via era de outra paleta. Passa ao degrau mais fechado do claro, com a mesma trama do alto da página, e o texto volta ao verde profundo. --------------------------------------------------------------------------- */ .rod { position: relative; background: var(--s2); color: var(--tinta-media); isolation: isolate; overflow: hidden; } /* O rodapé fica liso: textura ali compete com o conteúdo que fecha a página, e o fim de uma leitura pede descanso, não mais trama. */ .rod a { color: var(--tinta); } .rod a:hover { color: var(--marca); } .rod h2, .rod__titulo { color: var(--tinta); } .rod__texto, .rod__hora { color: var(--tinta-media); } .rod__grade { border-bottom-color: var(--linha-forte); } .rod__base { color: var(--tinta-fraca); } .rod__contato svg { fill: var(--marca); } .rod__contato .ico-zap { fill: var(--marca); } .redes a { background: var(--s0); border: 1px solid var(--linha); } .redes svg { fill: var(--tinta); } .redes a:hover { background: var(--acao); border-color: var(--acao); } .redes a:hover svg { fill: var(--s0); } /* o aviso de cookies acompanha o rodapé */ .cookies { background: var(--s-escura); } .cookies__linha a, .cookies a { color: var(--acao-clara); } /* --------------------------------------------------------------------------- VARREDURA DAS FAIXAS QUE DEIXARAM DE SER ESCURAS --------------------------------------------------------------------------- O site antigo tem dezenas de regras que pintam texto de branco ou cinza claro por estar dentro de .secao--escura. Elas foram escritas para um fundo preto que não existe mais. Em vez de caçar uma a uma, aqui vale a regra do contexto: dentro dessas faixas, texto é verde profundo e apoio é verde acinzentado, com a exceção do que tem cor própria declarada (botão, pílula, selo), que vem depois na folha. --------------------------------------------------------------------------- */ .secao--escura, .secao--escura *:not(.bt):not(.botao):not(.bt *):not(.botao *):not(svg):not(path), .faixa--escura, .faixa--escura *:not(.bt):not(.botao):not(.bt *):not(.botao *):not(svg):not(path) { --tinta-clara: var(--tinta); --tinta-clara-media: var(--tinta-media); } .secao--escura p, .secao--escura li, .secao--escura small, .secao--escura dd, .secao--escura figcaption, .faixa--escura p, .faixa--escura li, .faixa--escura small, .faixa--escura dd, .faixa--escura figcaption { color: var(--tinta-media); } .secao--escura .cabeca p, .faixa--escura .cabeca p, .secao--escura .cabsec p, .faixa--escura .cabsec p { color: var(--tinta-media); } .secao--escura h1, .secao--escura h2, .secao--escura h3, .secao--escura h4, .secao--escura strong, .secao--escura dt, .secao--escura b, .faixa--escura h1, .faixa--escura h2, .faixa--escura h3, .faixa--escura h4, .faixa--escura strong, .faixa--escura dt, .faixa--escura b { color: var(--tinta); } /* o botão de ação mantém a cor dele */ .secao--escura .bt--zap, .faixa--escura .bt--zap, .secao--escura .botao--zap, .faixa--escura .botao--zap { color: var(--acao); } .secao--escura .bt--escuro, .faixa--escura .bt--escuro { color: var(--s0); } /* =========================================================================== ABERTURA --------------------------------------------------------------------------- A cortina da primeira pintura. O que a pessoa vê enquanto a página chega: 1. o fundo claro do site, com a trama de células; 2. a trama acende em onda a partir do centro, como luz chegando numa placa, é a mesma cena do herói, só que em movimento; 3. o logo surge no meio, e uma barra fina corre no alto; 4. a cortina sai como uma íris: um círculo que se abre do centro e revela a página pronta por trás. Tudo em transformação e opacidade, no compositor: nada repinta a página que carrega por baixo, nem no celular. A regra que esconde a cortina sem JavaScript vem por último, com atraso, para o site nunca ficar preso. =========================================================================== */ .abertura { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--s1); overflow: hidden; isolation: isolate; } /* O disco: o fundo e a trama. É um círculo maior que a tela; na saída ele encolhe até o centro (transformação, no compositor) e vira a íris que revela a página. Antes a íris era um clip-path animado, que repintava a tela inteira a cada quadro: no celular, mais de um segundo de bloqueio. */ .abertura::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 230vmax; height: 230vmax; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--s1); background-image: radial-gradient(rgba(var(--escura-rgb), .26) 1.1px, transparent 1.1px), linear-gradient(to right, rgba(var(--escura-rgb), .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--escura-rgb), .07) 1px, transparent 1px); background-size: 26px 26px, 26px 26px, 26px 26px; background-position: 13px 13px, 0 0, 0 0; opacity: 0; animation: acende-trama .9s cubic-bezier(.2, .7, .2, 1) forwards; transition: transform .85s cubic-bezier(.76, 0, .24, 1); will-change: transform; } @keyframes acende-trama { to { opacity: 1; } } /* a mancha de luz que floresce do centro */ .abertura::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(42% 42% at 50% 50%, rgba(var(--acao-clara-rgb), .55), transparent 70%); animation: respira-abertura 1.1s cubic-bezier(.2, .7, .2, 1) forwards; transition: opacity .3s linear; } @keyframes respira-abertura { from { transform: scale(.4); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1.6); opacity: .55; } } /* o logo nasce do meio da luz */ .abertura__logo { width: clamp(140px, 22vw, 220px); opacity: 0; transform: translateY(10px) scale(.94); animation: surge-logo .7s .18s cubic-bezier(.16, 1, .3, 1) forwards; transition: transform .6s cubic-bezier(.76, 0, .24, 1), opacity .45s linear; } .abertura__logo img { width: 100%; height: auto; display: block; } @keyframes surge-logo { to { opacity: 1; transform: none; } } /* a barra que corre no alto */ .abertura__barra { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--acao), var(--acao-clara)); transform-origin: left center; transform: scaleX(0); animation: corre-abertura 1.4s cubic-bezier(.2, .7, .2, 1) forwards; } @keyframes corre-abertura { 0% { transform: scaleX(0); } 70% { transform: scaleX(.82); } 100% { transform: scaleX(.96); } } /* a saída: o fundo some, o disco encolhe em íris, o logo vai junto */ .abertura.abertura--sai { background: transparent; pointer-events: none; } .abertura--sai::before { transform: translate(-50%, -50%) scale(0); animation: none; opacity: 1; } .abertura--sai::after { opacity: 0; animation: none; } .abertura--sai .abertura__logo { animation: none; opacity: 0; transform: scale(.2); } .abertura--sai .abertura__barra { transform: scaleX(1); transition: transform .25s linear; } /* sem JavaScript, a cortina some sozinha depois de dois segundos */ .abertura { animation: some-sem-script .6s 2.2s forwards; } @keyframes some-sem-script { to { opacity: 0; visibility: hidden; } } html.abriu .abertura { animation: none; } @media (prefers-reduced-motion: reduce) { .abertura { transition: opacity .2s linear; } .abertura--sai { opacity: 0; } .abertura::before, .abertura::after, .abertura__logo, .abertura__barra { animation: none; opacity: 1; transform: none; } .abertura::before { transform: translate(-50%, -50%); } } /* --------------------------------------------------------------------------- RESTOS DO SITE ANTIGO NA PALETA NOVA --------------------------------------------------------------------------- O site.min.css do site antigo ainda carrega. Nele o fundo do documento era preto (aparecia no overscroll do celular e na medição do cabeçalho durante a transição entre páginas), o botão sem modificador era vermelho (o "Aceitar" dos cookies) e os filtros das obras eram pretos. Aqui cada um passa para os tons da referência. --------------------------------------------------------------------------- */ html { background: var(--s2); } /* a cor do rodapé: no elástico do Mac, rolar além do fim mostra o mesmo tom */ body { background: var(--s1); } /* a cor do herói: é o que o Safari pinta nas barras quando nada fixo encosta na borda */ /* --------------------------------------------------------------------------- AS BORDAS QUE O SAFARI LÊ --------------------------------------------------------------------------- O Safari 26 pinta as barras de cima e de baixo com a cor de fundo do elemento fixo encostado na borda (vale com opacidade zero), antes de olhar o body. Então duas fitas fixas de 1 px, invisíveis, carregam a cor da seção que está em cada borda, atualizada pelo vida.js a cada rolagem: as barras acompanham a página (herói, branco, rodapé, faixa escura). --------------------------------------------------------------------------- */ .borda-safari { position: fixed; left: 0; width: 100%; height: 1px; z-index: 9998; opacity: 0; pointer-events: none; background: var(--s1); transition: background-color .3s linear; } .borda-safari--topo { top: 0; } .borda-safari--pe { bottom: 0; } .botao:not([class*="--"]):not(.zap) { background: var(--acao); color: var(--s0); box-shadow: none; } .botao:not([class*="--"]):not(.zap):hover { background: var(--s-escura-2); } .cookies .botao:not(.botao--contorno) { background: var(--acao-clara); color: var(--acao); } .cookies .botao:not(.botao--contorno):hover { background: var(--acento-claro); } .cookies .botao--contorno { background: transparent; color: var(--s0); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); } .cookies .botao--contorno:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); } .filtro button { border-color: var(--linha-forte); background: var(--s0); color: var(--tinta); } .filtro button:hover { border-color: var(--marca); } .filtro button[aria-pressed="true"] { background: var(--acao); border-color: var(--acao); color: var(--s0); } /* --------------------------------------------------------------------------- VARIÁVEIS DO CSS ANTIGO, NA PALETA NOVA --------------------------------------------------------------------------- O site.min.css ainda pinta bordas de hover, sombras, fundos e textos com as variáveis do tema antigo (vermelho e preto). Em vez de caçar regra por regra, as variáveis passam a apontar para os tons da referência: o que era a cor primária vira a cor da marca, o que era preto vira a tinta. --------------------------------------------------------------------------- */ :root { --primaria: var(--marca); --primaria-rgb: var(--marca-rgb); --primaria-escura: var(--marca-escura); --primaria-clara: var(--marca-clara); --primaria-hover: var(--marca-escura); --primaria-suave: var(--marca-suave); --primaria-link: var(--marca-escura); --primaria-no-claro: var(--marca-escura); --primaria-no-escuro: var(--acao-clara); --sobre-primaria: #ffffff; --acento-rgb: var(--marca-rgb); --escuro: var(--tinta); --escuro-rgb: var(--escura-rgb); --grafite: var(--s-escura); --grafite-2: var(--s-escura-2); --creme: var(--s1); --cinza-1: var(--s2); --cinza-2: var(--linha-forte); --cinza-texto: var(--tinta-media); --cinza-claro: var(--linha-forte); --verde-zap: var(--acao-clara); --verde-zap-escuro: var(--marca); --verde-zap-sombra: rgba(var(--marca-rgb), .3); --sombra-primaria: 0 10px 30px rgba(var(--marca-rgb), .22); } /* o link "pular para o conteúdo" (só aparece no foco) ficou verde médio com o remapeamento; precisa do verde profundo para o branco ler */ .pular { background: var(--acao); color: #fff; } /* --------------------------------------------------------------------------- DIVISA ENTRE FAIXAS DA MESMA COR --------------------------------------------------------------------------- Duas faixas do mesmo fundo em sequência (simulador e Quem somos, blog e mapa) viravam um vazio sem fim. Quando a próxima tem a mesma cor, a faixa fecha com uma linha fina na largura do conteúdo e um ponto da marca no meio: liga uma à outra sem mudar o ritmo. --------------------------------------------------------------------------- */ .faixa--clara:has(+ .faixa--clara), .faixa--cinza:has(+ .faixa--cinza), .faixa--bandeja:has(+ .faixa--bandeja), .faixa:not([class*="faixa--"]):has(+ .faixa:not([class*="faixa--"])), .secao--clara:has(+ .secao--clara), .secao:not([class*="secao--"]):has(+ .secao:not([class*="secao--"])) { position: relative; } .faixa--clara:has(+ .faixa--clara)::after, .faixa--cinza:has(+ .faixa--cinza)::after, .faixa--bandeja:has(+ .faixa--bandeja)::after, .faixa:not([class*="faixa--"]):has(+ .faixa:not([class*="faixa--"]))::after, .secao--clara:has(+ .secao--clara)::after, .secao:not([class*="secao--"]):has(+ .secao:not([class*="secao--"]))::after { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); width: min(var(--largura), 100% - var(--lateral) * 2); height: 9px; pointer-events: none; background: radial-gradient(circle at 50% 50%, var(--marca) 0 3px, transparent 3.6px), linear-gradient(transparent 4px, var(--linha-forte) 4px 5px, transparent 5px); } /* o botão flutuante do WhatsApp sai de cena onde já existe um convite próprio */ a.zap { transition: transform .45s var(--e-saida), opacity .35s linear, background .15s ease; } body.sem-flutuante a.zap { transform: translateY(140%); opacity: 0; pointer-events: none; } /* topo.css */ /* =========================================================================== CABEÇALHO --------------------------------------------------------------------------- Depende de sistema.css. Vale para todas as páginas, por isso mora separado. O que muda em relação ao cabeçalho que estava no ar: - Era uma barra preta sólida, do mesmo tamanho o tempo todo. Agora é vidro: sobre o herói escuro ele desaparece e os dois viram uma peça; assim que a página rola para as faixas claras, ele fecha o fundo e ganha sombra. - Encolhe ao rolar, junto com o logo, para devolver altura à leitura. - Cada item do menu ganha um traço que cresce da esquerda, em vez do retângulo cinza que acendia atrás do texto. - O submenu entrava de repente. Agora sobe três pixels enquanto aparece. - No celular era uma tela cheia que piscava. Agora é um painel que entra pela direita, com o resto da página escurecido atrás. =========================================================================== */ /* No alto da página o cabeçalho não tem fundo nenhum: a textura de pontos e a luz do herói passam por baixo dele, e os dois viram uma peça só em vez de uma barra apoiada em cima de outra coisa. O fundo só aparece quando a página rola, que é quando ele precisa separar o menu do conteúdo. Em página cujo topo seja claro, o tema claro entra e o texto escurece; sem fundo, continua legível, porque quem está atrás é a própria faixa clara. */ .cab { background: transparent; border-bottom: 1px solid transparent; transition: background-color .5s cubic-bezier(.4, 0, .2, 1), border-color .5s cubic-bezier(.4, 0, .2, 1), box-shadow .5s var(--e-suave), backdrop-filter .5s linear; } /* O site é claro do alto ao rodapé. Então o cabeçalho nasce claro, e o escuro é que vira exceção, marcada por classe. Antes era o contrário: se o script demorasse um quadro ou falhasse, o menu ficava branco sobre fundo claro e sumia, que é o "bug" de cabeçalho sem contraste. */ body.rolou .cab { background: rgba(var(--vidro-rgb), .9); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 1px 0 rgba(var(--escura-rgb), .05), 0 8px 24px rgba(var(--escura-rgb), .06); } body.rolou .cab.cab--escuro { background: rgba(var(--escura-funda-rgb), .88); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); } .cab__linha { transition: height var(--t-media) var(--e-saida); } body.rolou .cab__linha { height: calc(var(--altura-cab) - 12px); } .cab__logo { transition: width var(--t-media) var(--e-saida); } body.rolou .cab__logo { width: clamp(108px, 11vw, 132px); } /* --------------------------------------------------------------------------- O MENU, no computador --------------------------------------------------------------------------- O que havia era uma barra de botões: texto em negrito, um retângulo cinza acendendo atrás de cada item e, no fim, "Contato" dentro de uma cápsula de contorno vermelho. Três pesos diferentes brigando em vinte centímetros de barra. Agora o menu tem um peso só. Os itens são leves e espaçados, e quem marca onde o mouse está é uma pílula que desliza de um item para o outro, em vez de acender e apagar em cada um. A página atual fica com um ponto discreto embaixo. O contato deixa de ser cápsula vermelha e vira o único item sólido, pequeno, no fim da linha. --------------------------------------------------------------------------- */ @media (min-width: 1080px) { .nav__lista { gap: .1rem; } .nav__link { position: relative; z-index: 1; font-size: .875rem; font-weight: 500; letter-spacing: .01em; color: var(--tinta-media); padding: .55rem .85rem; border-radius: var(--r-pill); transition: color .28s linear; } .nav__link:hover, .nav__item:focus-within > .nav__link { background: transparent; color: var(--tinta); } .nav__lista::before { background: rgba(var(--escura-rgb), .07); } /* a pílula que corre atrás do cursor */ .nav__lista { position: relative; } .nav__lista::before { content: ""; position: absolute; z-index: 0; left: 0; top: 50%; width: var(--pilula-w, 0); height: 2.1rem; margin-top: -1.05rem; border-radius: var(--r-pill); background: rgba(var(--escura-rgb), .07); transform: translateX(var(--pilula-x, 0)); opacity: var(--pilula-o, 0); transition: transform .42s var(--e-saida), width .42s var(--e-saida), opacity .3s linear; pointer-events: none; } /* a página de agora: um ponto, não uma barra */ .nav__link[aria-current="page"] { color: var(--tinta); } .nav__link::after { content: ""; position: absolute; left: 50%; bottom: .28rem; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--marca); transform: scale(0); transition: transform .36s var(--e-mola); } .nav__link[aria-current="page"]::after { transform: scale(1); } /* o contato é o único item sólido */ .nav__contato { margin-left: .7rem; box-shadow: none; background: var(--acao); color: var(--s0); font-weight: 600; transition: background-color .3s linear, color .3s linear; } .nav__contato:hover { background: var(--marca); color: #fff; } .nav__contato::after { display: none; } .nav__seta { opacity: .6; transition: transform .3s var(--e-saida), opacity .3s linear; } .nav__item:hover > .nav__link .nav__seta { opacity: 1; } .sub-painel { border-radius: var(--r-lg); box-shadow: var(--elev-3); border: 1px solid var(--linha); transform: translate(-50%, 6px); transition: opacity var(--t-curta) linear, transform var(--t-media) var(--e-saida), visibility var(--t-media) linear; } .nav__item:hover > .sub-painel, .nav__item:focus-within > .sub-painel, .nav__item--aberto > .sub-painel { transform: translate(-50%, 0); } } /* uma linha de luz no pé do cabeçalho, que acende quando a página rola */ .cab::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--marca-rgb), .5) 22%, rgba(var(--acao-clara-rgb), .42) 58%, transparent); opacity: 0; transition: opacity .5s linear; } body.rolou .cab::before { opacity: 1; } /* --------------------------------------------------------------------------- PAINEL LATERAL, no celular e no tablet --------------------------------------------------------------------------- */ @media (max-width: 1079px) { /* No painel lateral o fundo é escuro, então ali o item continua claro; a regra do site antigo pintava o item de claro também na barra, onde o fundo agora é claro: 1,25:1, medido. */ .cab__linha .nav__link { color: var(--tinta); } .nav__painel .nav__link { color: rgba(255, 255, 255, .92); } /* no painel escuro o item da página atual acende no verde claro da paleta */ .nav__painel .nav__link[aria-current="page"] { color: var(--acao-clara); } /* O painel ia de `top: var(--altura-cab)`, o que presume o cabeçalho colado no alto da tela. Basta qualquer faixa acima dele para a conta furar: aqui o painel passava a cobrir o próprio botão de fechar e o menu virava uma armadilha. Agora ele ocupa a tela toda e o conteúdo desce pela posição medida do cabeçalho, que o JS escreve em --topo-real. */ .nav__painel { top: 0; bottom: 0; left: auto; width: min(88vw, 380px); background: var(--s-escura-2); box-shadow: -30px 0 70px rgba(var(--escura-rgb), 0); /* a sombra só existe com o painel aberto: fechado, ela vazava pela borda da tela */ padding: calc(var(--topo-real, var(--altura-cab)) + 1.25rem) var(--lateral) 2rem; transform: translateX(102%); opacity: 1; visibility: visible; transition: transform .42s var(--e-saida), box-shadow .42s var(--e-saida); display: flex; flex-direction: column; } /* O painel mora dentro da mesma linha do logo e do botão, então quem precisa subir são eles, não a linha: elevar a linha levaria o painel junto e o botão de fechar continuaria soterrado. */ .cab__botao, .cab__logo { position: relative; z-index: 60; } .cab--aberto .nav__painel { transform: none; box-shadow: -30px 0 70px rgba(var(--escura-rgb), .35); transition: transform .42s var(--e-saida), box-shadow .42s var(--e-saida); } /* véu: escurece a página atrás do painel */ .cab::after { content: ""; position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity var(--t-media) linear, visibility var(--t-media) linear; } .cab--aberto::after { opacity: 1; visibility: visible; } /* os itens entram em cascata depois do painel */ .cab--aberto .nav__item { animation: item-entra .36s var(--e-saida) both; } .cab--aberto .nav__item:nth-child(1) { animation-delay: .10s; } .cab--aberto .nav__item:nth-child(2) { animation-delay: .15s; } .cab--aberto .nav__item:nth-child(3) { animation-delay: .20s; } .cab--aberto .nav__item:nth-child(4) { animation-delay: .25s; } .cab--aberto .nav__item:nth-child(5) { animation-delay: .30s; } .cab--aberto .nav__item:nth-child(6) { animation-delay: .35s; } @keyframes item-entra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .nav__link { min-height: 52px; border-radius: var(--r-sm); padding-inline: .5rem; } .nav__link:active { background: rgba(255, 255, 255, .06); } } @media (prefers-reduced-motion: reduce) { .cab--aberto .nav__item { animation: none; } .cab__linha, .cab__logo, .nav__painel { transition: none; } } /* --------------------------------------------------------------------------- PÁGINA ATUAL NO MENU O vermelho da marca sobre o cabeçalho preto dá 2,95:1, medido. Quem marca a página passa a ser o traço embaixo, que já existe; o texto fica branco. --------------------------------------------------------------------------- */ /* O item da página atual segue a cor de texto do site; no cabeçalho escuro, a regra .cab--escuro mais abaixo o devolve ao branco. */ .nav__link[aria-current="page"], .nav__link--ativo { color: var(--tinta); } @media (max-width: 1079px) { .nav__link[aria-current="page"] { position: relative; } .nav__link[aria-current="page"]::before { content: ""; position: absolute; left: -.5rem; top: 50%; width: 3px; height: 1.1em; border-radius: 2px; transform: translateY(-50%); background: var(--marca); } } /* =========================================================================== O CABEÇALHO CLARO --------------------------------------------------------------------------- Quando o que passa por baixo é uma faixa clara, o cabeçalho acompanha. A troca não pode ser um corte: tudo que tem cor ali dentro, fundo, linha, nome dos itens, pílula, ponto da página, botão de contato, traços do hambúrguer, atravessa junto, no mesmo tempo e na mesma curva. Se um componente trocasse antes do outro, a barra piscaria em duas etapas. O tempo é o mesmo em todos: meio segundo, que é o que leva uma faixa a passar por baixo do cabeçalho numa rolagem comum. =========================================================================== */ .cab, .cab__linha, .nav__link, .nav__contato, .cab__botao, .cab__botao span, .cab__botao span::before, .cab__botao span::after, .nav__lista::before, .nav__link::after { transition-duration: .5s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } /* o logo tem contorno branco: sobre o claro ele precisa de um respaldo de sombra para não encostar no fundo */ .cab__logo img { filter: drop-shadow(0 1px 2px rgba(22, 19, 15, .18)); transition: filter .5s cubic-bezier(.4, 0, .2, 1); } @media (prefers-reduced-motion: reduce) { .cab, .cab__linha, .nav__link, .nav__contato, .cab__botao, .nav__lista::before, .cab__logo img { transition: none !important; } } /* --------------------------------------------------------------------------- O QUE FICA ATRÁS DO CABEÇALHO TRANSPARENTE --------------------------------------------------------------------------- O cabeçalho vem antes do conteúdo no documento, então o espaço que ele ocupa é dele: por trás não havia o herói, havia o fundo do documento, que é branco. Com o cabeçalho sem fundo, o menu branco ficava sobre branco , invisível, e medido em 1,00:1. A correção é puxar o primeiro bloco da página para debaixo do cabeçalho e devolver a altura em espaçamento interno. O bloco passa a ocupar também a faixa do cabeçalho, sem mexer em onde o conteúdo aparece, e o que se vê atrás do menu é a própria seção, com a textura e a luz dela. --------------------------------------------------------------------------- */ main > :first-child { margin-top: calc(var(--altura-cab) * -1); padding-top: var(--altura-cab); } /* o herói da home já tinha respiro próprio; aqui ele só compensa a subida */ .heroi-novo { padding-top: calc(var(--altura-cab) + clamp(2.75rem, 6vw, 5rem)); } /* --------------------------------------------------------------------------- O LOGO Estava com 158px de largura numa barra de 72px de altura: sobrava marca e faltava ar. Menor, ele divide melhor a linha com o menu. --------------------------------------------------------------------------- */ .cab__logo { width: clamp(104px, 9.5vw, 132px); display: flex; align-items: center; } body.rolou .cab__logo { width: clamp(94px, 8.5vw, 116px); } /* --------------------------------------------------------------------------- RESPIRO E BORDA --------------------------------------------------------------------------- A barra tinha 72px com um logo de 51px dentro: dez pixels de folga em cima e embaixo, que é pouco para a marca não parecer espremida. Passa a 86px, e encolhe para 66px quando a página rola, a diferença agora se nota. A linha colorida embaixo saiu. Num cabeçalho que já troca de cor conforme a faixa, ela era mais um elemento disputando atenção, e aparecia como um risco no meio da tela quando o fundo era claro. O que separa o cabeçalho do conteúdo passa a ser só a sombra, que já faz esse trabalho. --------------------------------------------------------------------------- */ :root { --altura-cab: 86px; } @media (max-width: 1079px) { :root { --altura-cab: 68px; } } body.rolou .cab__linha { height: 66px; } @media (max-width: 1079px) { body.rolou .cab__linha { height: 56px; } } .cab::before { display: none; } body.rolou .cab { box-shadow: 0 1px 0 rgba(var(--escura-rgb), .05), 0 8px 24px rgba(var(--escura-rgb), .06); } /* --------------------------------------------------------------------------- A PRIMEIRA TELA --------------------------------------------------------------------------- O herói terminava onde o conteúdo acabava, e em telas altas sobrava faixa clara embaixo dele já na primeira visão. Agora ele ocupa a altura da tela de verdade: svh conta a barra do navegador no celular, que 100vh ignora e por isso corta. --------------------------------------------------------------------------- */ .heroi-novo { min-height: var(--tela, 100svh); display: flex; align-items: center; } @supports not (height: 100svh) { .heroi-novo { min-height: var(--tela, 100vh); } } .heroi-novo > .wrap { width: 100%; } /* em tela baixa e deitada, altura cheia esmaga o conteúdo */ @media (max-height: 620px) and (min-width: 720px) { .heroi-novo { min-height: auto; } } /* =========================================================================== OS SUBMENUS --------------------------------------------------------------------------- Eram uma lista de títulos em negrito pesado, todos do mesmo tamanho, com "Todos os serviços" no fim como se fosse mais um serviço. Nada ali dizia o que cada página é, e o painel tinha o dobro da altura necessária. Agora cada linha é um item de verdade: o traço do serviço à esquerda, o nome em peso normal e, embaixo, a frase curta que a página já tinha. A última linha se separa do resto, porque ela não é um serviço: é a saída para a lista inteira. O realce do item é uma faixa arredondada, igual à pílula que corre no menu de cima. =========================================================================== */ @media (min-width: 1080px) { .sub-painel { padding: .55rem; border-radius: var(--r-lg); background: var(--s0); } .sub-painel--largo { min-width: 36rem; } .sub-painel--largo .sub { gap: .1rem .3rem; } .sub { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; } .sub li { margin: 0; } .sub a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: var(--r-sm); text-decoration: none; color: var(--tinta); transition: background-color .25s linear; } .sub a:hover, .sub a:focus-visible { background: var(--s1); } .sub strong { grid-column: 2; font-weight: 600; font-size: .9375rem; line-height: 1.3; letter-spacing: -.01em; } .sub small { grid-column: 2; font-size: var(--f-micro); color: var(--tinta-fraca); line-height: 1.4; } /* o traço do serviço, posto pelo script */ .sub__icone { grid-row: 1 / span 2; grid-column: 1; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: var(--r-sm); background: var(--s2); color: var(--tinta-media); transition: background-color .25s linear, color .25s linear; } .sub__icone svg { width: 17px; height: 17px; } .sub a:hover .sub__icone { background: var(--marca); color: #fff; } /* sem ícone, o texto ocupa as duas colunas */ .sub a:not(:has(.sub__icone)) { grid-template-columns: 1fr; } .sub a:not(:has(.sub__icone)) strong, .sub a:not(:has(.sub__icone)) small { grid-column: 1; } /* a saída para a lista inteira não é mais um item da lista */ .sub li:last-child { margin-top: .35rem; padding-top: .45rem; border-top: 1px solid var(--linha); } .sub-painel--largo .sub li:last-child { grid-column: 1 / -1; } .sub li:last-child a { color: var(--marca-escura); font-weight: 600; } .sub li:last-child strong { font-weight: 600; } .sub li:last-child .sub__icone { display: none; } } /* --------------------------------------------------------------------------- O CABEÇALHO SOBRE FUNDO ESCURO Só entra onde a faixa por baixo for escura de verdade, hoje, nenhuma seção da home. Fica porque o herói de página interna ainda pode ser foto. --------------------------------------------------------------------------- */ .cab--escuro .cab__logo img { filter: none; } @media (min-width: 1080px) { .cab--escuro .nav__link { color: rgba(255, 255, 255, .76); } .cab--escuro .nav__link:hover, .cab--escuro .nav__item:focus-within > .nav__link, .cab--escuro .nav__link[aria-current="page"] { color: #fff; } .cab--escuro .nav__lista::before { background: rgba(255, 255, 255, .1); } .cab--escuro .nav__contato { background: rgba(255, 255, 255, .14); color: #fff; } .cab--escuro .nav__contato:hover { background: #fff; color: var(--acao); } } @media (max-width: 1079px) { .cab--escuro .cab__botao { border-color: rgba(255, 255, 255, .22); color: #fff; } } /* Na página de contato o botão Contato é o item atual: a cor de item atual (tinta escura) sumia no fundo escuro do botão, e o ponto indicador não cabe num botão. */ .nav__contato[aria-current="page"] { color: var(--s0); } .nav__contato[aria-current="page"]::before { display: none; } /* --------------------------------------------------------------------------- HAMBÚRGUER NA COR DO CABEÇALHO --------------------------------------------------------------------------- As três linhas nasciam brancas, do tempo do cabeçalho escuro: sobre o cabeçalho claro do celular sumiam. Agora seguem a cor do texto, e só ficam brancas sobre fundo escuro (modo escuro ou painel aberto). --------------------------------------------------------------------------- */ .cab__botao { color: var(--tinta); } .cab__botao span, .cab__botao span::before, .cab__botao span::after { background: currentColor; } .cab--escuro .cab__botao, .cab--aberto .cab__botao { color: #fff; } .cab--aberto .cab__botao span { background: transparent; } /* =========================================================================== MENU DO CELULAR, TELA CHEIA --------------------------------------------------------------------------- O painel lateral escuro deixava uma fresta da página, punha o logo colorido sobre verde e escondia o botão de fechar atrás de si em algumas telas. Agora o menu é a tela inteira, claro como o site, com a trama de pontos e uma luz no canto: abre em íris a partir do próprio botão, os itens sobem em cascata e cada submenu abre pela altura, sem salto. O logo e o X ficam sobre o claro, onde sempre leram bem. =========================================================================== */ @media (max-width: 1079px) { .cab::after { display: none; } .nav__painel { position: fixed; inset: 0; left: 0; right: 0; width: auto; height: 100dvh; z-index: 59; background: radial-gradient(60% 42% at 92% 0%, rgba(var(--marca-rgb), .24), transparent 70%), radial-gradient(circle, rgba(var(--escura-rgb), .14) .7px, transparent 1.3px) 0 0 / 22px 22px, var(--s1); box-shadow: none; padding: calc(var(--topo-real, var(--altura-cab)) + .5rem) var(--lateral) calc(1.5rem + env(safe-area-inset-bottom)); transform: none; opacity: 1; visibility: hidden; clip-path: circle(0 at calc(100% - var(--lateral) - 22px) 34px); transition: clip-path .5s var(--e-saida), visibility 0s linear .5s; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0; } .cab--aberto .nav__painel { visibility: visible; clip-path: circle(165% at calc(100% - var(--lateral) - 22px) 34px); transition: clip-path .65s var(--e-saida), visibility 0s; box-shadow: none; } .cab--aberto .cab__botao { color: var(--tinta); } /* Com o menu aberto o desfoque do cabeçalho sai: desfoque (como transform) prende os filhos com position: fixed ao cabeçalho, e o painel precisa ser a janela inteira, não a caixa de 56 px do cabeçalho rolado. */ body.rolou .cab.cab--aberto, .cab--aberto { backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; } /* O CSS antigo travava a rolagem com overflow no body. Como o html tem overflow-x: clip, o overflow do body não sobe para a janela: o body vira o seu próprio rolador, o cabeçalho sticky passa a grudar nele (que não está rolado) e, com a página rolada, cabeçalho e X somem para cima. A trava agora vai no html, pelo vida.js; o body fica como é. */ body.menu-aberto { overflow: clip visible; } .nav__painel .nav__lista { gap: 0; } .nav__painel .nav__item { border-bottom: 1px solid var(--linha-forte); } .nav__painel .nav__item:last-child { border-bottom: 0; } .nav__painel .nav__link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: .7rem .15rem; border-radius: 0; color: var(--tinta); font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; } .nav__painel .nav__link[aria-current="page"] { color: var(--marca-escura); } .nav__painel .nav__link[aria-current="page"]::before { display: none; } .nav__painel .nav__item--aberto > .nav__link, .nav__painel .nav__link:hover, .nav__painel .nav__item:focus-within > .nav__link { color: var(--marca-escura); background: transparent; } .nav__painel .nav__link:active { background: transparent; } .nav__painel .nav__contato { background: transparent; color: var(--tinta); box-shadow: none; margin: 0; } .nav__painel .nav__seta { width: 9px; height: 9px; border-color: var(--tinta-fraca); margin-right: .35rem; } .nav__painel .nav__item--aberto > .nav__link .nav__seta { border-color: var(--marca-escura); } /* o acordeão abre pela altura */ .nav__painel .sub-painel { display: grid; grid-template-rows: 0fr; position: static; min-width: 0; width: auto; /* herda do painel: fechado, fica oculto junto; `visible` aqui tornava os subitens visíveis por trás do recorte */ transform: none; opacity: 1; visibility: inherit; background: transparent; box-shadow: none; border-radius: 0; padding: 0; transition: grid-template-rows .45s var(--e-saida); } .nav__painel .nav__item--aberto > .sub-painel { grid-template-rows: 1fr; } .nav__painel .sub-painel::before { display: none; } .nav__painel .sub { overflow: hidden; min-height: 0; margin: 0; padding: 0 0 .25rem; display: grid; gap: 0; } .nav__painel .sub-painel--largo .sub { grid-template-columns: 1fr; } .nav__painel .sub li { margin: 0; } .nav__painel .sub a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .1rem .85rem; padding: .5rem .15rem; margin: 0; border: 0; border-radius: 0; color: var(--tinta); background: transparent; } .nav__painel .sub a:not(:has(.sub__icone)) { grid-template-columns: 1fr; padding-left: .15rem; } .nav__painel .sub a:hover, .nav__painel .sub a:active { background: transparent; } .nav__painel .sub a[aria-current="page"] strong { color: var(--marca-escura); } .nav__painel .sub strong { font-weight: 500; font-size: .98rem; letter-spacing: -.005em; color: inherit; } .nav__painel .sub small { font-size: var(--f-micro); color: var(--tinta-fraca); margin-top: .05rem; } .nav__painel .sub__icone { grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: var(--s0); color: var(--marca); border: 1px solid var(--linha); display: grid; place-items: center; } .nav__painel .sub__icone svg { width: 18px; height: 18px; } .nav__painel .sub li:last-child { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--linha); } .nav__painel .sub li:last-child a { color: var(--marca-escura); } /* o rodapé do menu: o convite e o horário */ .nav__painel .nav__rodape { margin-top: auto; display: grid; gap: .6rem; padding-top: 1.5rem; } .nav__painel .nav__rodape p { color: var(--tinta-fraca); font-size: var(--f-micro); margin: 0; text-align: center; } /* a cascata, depois da íris */ .cab--aberto .nav__item, .cab--aberto .nav__rodape { animation: item-sobe .55s var(--e-saida) both; } .cab--aberto .nav__item:nth-child(1) { animation-delay: .18s; } .cab--aberto .nav__item:nth-child(2) { animation-delay: .23s; } .cab--aberto .nav__item:nth-child(3) { animation-delay: .28s; } .cab--aberto .nav__item:nth-child(4) { animation-delay: .33s; } .cab--aberto .nav__item:nth-child(5) { animation-delay: .38s; } .cab--aberto .nav__item:nth-child(6) { animation-delay: .43s; } .cab--aberto .nav__rodape { animation-delay: .5s; } @keyframes item-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } } @media (max-width: 1079px) and (prefers-reduced-motion: reduce) { .nav__painel, .cab--aberto .nav__painel { transition: visibility 0s; clip-path: none; } .nav__painel { display: none; } .cab--aberto .nav__painel { display: flex; } .cab--aberto .nav__item, .cab--aberto .nav__rodape { animation: none; } .nav__painel .sub-painel { transition: none; } } /* --------------------------------------------------------------------------- CABEÇALHO NO CELULAR: SEM ENCOLHER, SEM DESFOQUE --------------------------------------------------------------------------- No iPhone o logo piscava ao rolar perto do topo: a linha encolhia de 68 para 56 px enquanto o logo diminuía, e no meio da transição o Safari recortava o logo; o desfoque de fundo (backdrop-filter) animando ao mesmo tempo re-rasteriza a camada e dá o mesmo efeito. Sem mouse, o cabeçalho mantém a altura e o logo, e ganha fundo quase sólido em vez de vidro. --------------------------------------------------------------------------- */ @media (hover: none) { body.rolou .cab__linha { height: var(--altura-cab); } body.rolou .cab__logo { width: clamp(104px, 9.5vw, 132px); } .cab__linha, .cab__logo { transition: none; } body.rolou .cab { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--vidro-2-rgb), .96); transition: background-color .3s linear, box-shadow .3s linear; } body.rolou .cab.cab--escuro { background: rgba(var(--escura-funda-rgb), .96); } } /* home.css */ /* =========================================================================== Blocos da página inicial do modelo Depende de sistema.css. =========================================================================== */ /* --------------------------------------------------------------------------- HERÓI --------------------------------------------------------------------------- Quarta versão, e a razão desta: O herói era verde profundo, e com a paleta nova ficou um bloco escuro de tela cheia logo na abertura, pesado para um site que fala de luz do sol. Agora é branco esverdeado, o tom mais claro da paleta da referência. Tudo que acontecia no escuro continua acontecendo, com o sinal trocado: - a textura de pontos era clara sobre o escuro; passa a ser verde profundo com pouca opacidade sobre o claro; - as luzes de fundo eram clarões; passam a ser manchas de cor saturada, que é o que se nota num fundo claro; - a grade que acende sob o cursor era desenhada somando luz; passa a ser desenhada tirando luz, porque num fundo claro quem chama atenção é o traço escuro, não o brilho. --------------------------------------------------------------------------- */ .heroi-novo { position: relative; isolation: isolate; padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); background: var(--s1); color: var(--tinta); overflow: hidden; } /* --------------------------------------------------------------------------- A TEXTURA --------------------------------------------------------------------------- No escuro, um ponto claro a 5% de opacidade já se via. No claro, o mesmo ponto a 9% de verde sumia: fundo claro perdoa muito menos, e a textura só aparecia quando a luz do cursor passava por cima, ou seja, metade do tempo não havia textura nenhuma. Agora são duas camadas que se sustentam paradas: 1. a grade de linhas finas, que dá a trama da célula fotovoltaica; 2. os pontos nos cruzamentos, mais escuros que antes, que dão o ritmo. A máscara deixa de apagar quase tudo: abre em três quartos da área, com a borda esfumada só no canto de baixo à esquerda, onde o texto começa. --------------------------------------------------------------------------- */ .heroi-novo::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: /* os pontos */ radial-gradient(rgba(var(--escura-rgb), .17) 1.1px, transparent 1.1px), /* a trama: linhas finas na vertical e na horizontal */ linear-gradient(to right, rgba(var(--escura-rgb), .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--escura-rgb), .055) 1px, transparent 1px); background-size: 26px 26px, 26px 26px, 26px 26px; background-position: 13px 13px, 0 0, 0 0; -webkit-mask-image: radial-gradient(150% 130% at 76% 6%, #000 42%, transparent 92%); mask-image: radial-gradient(150% 130% at 76% 6%, #000 42%, transparent 92%); } /* As manchas de cor: o verde do logo onde as fotos ficam, e um toque do vermelho da marca do outro lado. Num fundo claro, cor saturada rende o que o clarão rendia no escuro. */ .heroi-novo::after { content: ""; position: absolute; inset: -30% -10% auto; height: 150%; z-index: -1; background: radial-gradient(44% 48% at 74% 30%, rgba(var(--vivo-rgb), .20), transparent 68%), radial-gradient(40% 42% at 10% 84%, rgba(var(--escura-rgb), .07), transparent 70%); animation: respira-luz 26s var(--e-suave) infinite alternate; } @keyframes respira-luz { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.1); } } /* O facho que persegue o cursor, em verde claro saturado */ .heroi-novo.tem-luz, [data-luz].tem-luz { --luz-x: 72%; --luz-y: 34%; } .heroi-novo__facho { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(30rem 30rem at var(--luz-x) var(--luz-y), rgba(var(--vivo-rgb), .16), transparent 66%), radial-gradient(15rem 15rem at var(--luz-x) var(--luz-y), rgba(var(--escura-rgb), .07), transparent 72%); } .heroi-novo__pontos { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* Numa faixa comum o conteúdo não tem camada própria, então as duas camadas da luz ficariam por cima do texto. */ [data-luz] { position: relative; isolation: isolate; } [data-luz] .heroi-novo__facho, [data-luz] .heroi-novo__pontos { z-index: 0; } [data-luz] > .wrap { position: relative; z-index: 1; } .heroi-novo .heroi-novo__facho, .heroi-novo .heroi-novo__pontos { z-index: -1; } .heroi-novo.tem-luz::before { opacity: .78; } @media (prefers-reduced-motion: reduce) { .heroi-novo::after { animation: none; } .heroi-novo__facho { display: none; } .heroi-novo__pontos { display: none; } } .heroi-novo__grade { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 960px) { .heroi-novo__grade { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); } } .heroi-novo__texto { display: grid; gap: 1.3rem; justify-items: start; } .heroi-novo__texto h1 { margin: 0; color: var(--tinta); text-wrap: balance; letter-spacing: -.035em; } .heroi-novo__sub { margin: 0; font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem); color: var(--tinta-media); max-width: 44ch; } .heroi-novo__acoes { display: flex; flex-wrap: wrap; gap: .75rem; } .heroi-novo__provas { display: flex; flex-wrap: wrap; gap: 1.1rem 2.5rem; margin-top: .6rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); width: 100%; } .heroi-novo__prova { display: grid; gap: .25rem; } .heroi-novo__prova strong { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--tinta); } .heroi-novo__prova > span { font-size: var(--f-apoio); color: var(--tinta-fraca); } /* --------------------------------------------------------------------------- A GRADE DE FOTOS --------------------------------------------------------------------------- */ .heroi-novo__visual { position: relative; } .bento { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; aspect-ratio: 1 / 1; } .bento figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--s2); box-shadow: var(--elev-3); } .bento figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--escura-rgb), .08); } .bento img { width: 100%; height: 100%; object-fit: cover; display: block; } .bento__a { grid-row: span 2; border-radius: var(--r-xl) !important; } /* Selo de vidro sobre a foto grande: claro, como o resto */ .bento__selo { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; display: grid; gap: .1rem; padding: .75rem 1rem; border-radius: var(--r); background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(var(--escura-rgb), .1), 0 10px 30px rgba(var(--escura-rgb), .22); color: var(--tinta); } .bento__selo .num { font-size: 1.7rem; color: var(--tinta); } .bento__selo .num .un { color: var(--tinta-fraca); } .bento__selo .num-rot { font-size: .8125rem; color: var(--tinta-fraca); margin-top: .1rem; } /* sobre o claro, o âmbar vivo cai para 1,7:1 */ .estrelas { color: var(--marca); letter-spacing: .08em; font-size: .95rem; } .faixa--escura .estrelas { color: var(--marca); } @media (max-width: 719px) { .bento { aspect-ratio: 4 / 3; gap: 8px; } .heroi-novo__visual { margin-top: 2rem; } .bento__selo { left: .6rem; bottom: .6rem; padding: .6rem .8rem; } .bento__selo .num { font-size: 1.35rem; } } /* --------------------------------------------------------------------------- COMO FUNCIONA --------------------------------------------------------------------------- Os quatro passos ficavam grudados no topo, um por cima do outro. A pilha cortava o passo de baixo no meio de uma frase, e o que se via era meia linha de texto espiando atrás do cartão seguinte. Ninguém lê assim. No lugar da pilha, uma linha do tempo: os passos ficam em sequência, com um fio ligando os números, e o fio se pinta conforme a página desce. O passo que chega acende o número; os de trás continuam legíveis. --------------------------------------------------------------------------- */ .como__grade { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (min-width: 960px) { .como__grade { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } .como__lado { position: sticky; top: calc(var(--topo-altura) + 2rem); } } /* --- o fio ---------------------------------------------------------------- */ .empilha { position: relative; display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); } /* O fio corre atrás dos cartões e aparece nos vãos, ligando um número ao seguinte. Por cima, cortava as frases ao meio. */ .empilha::before { content: ""; position: absolute; z-index: 0; left: calc(1.5rem + 1.3rem - 1px); top: 2.5rem; bottom: 2.5rem; width: 2px; background: var(--linha-forte); } /* a parte pintada do fio cresce com a rolagem */ .empilha::after { content: ""; position: absolute; z-index: 0; left: calc(1.5rem + 1.3rem - 1px); top: 2.5rem; width: 2px; height: calc(100% - 5rem); transform-origin: top center; transform: scaleY(0); background: var(--marca); } @supports (animation-timeline: view()) { .com-timeline .empilha::after { animation: pinta-fio linear both; animation-timeline: view(); animation-range: cover 18% cover 72%; } @keyframes pinta-fio { from { transform: scaleY(0); } to { transform: scaleY(1); } } } .passo { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; padding: 1.5rem; background: var(--s0); border: 1px solid var(--linha); border-radius: var(--r-lg); box-shadow: var(--elev-1); transition: box-shadow .5s var(--e-suave), translate .5s var(--e-saida); } .passo:hover { box-shadow: var(--elev-3); translate: 0 -3px; } .passo__n { position: relative; z-index: 1; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; /* O verde de destaque sobre o verde pálido dá 2,98:1, medido. O número do passo vai para o verde profundo, que é a cor de texto da paleta. */ background: var(--marca-suave); color: var(--acao); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; transition: background-color .45s linear, color .45s linear, box-shadow .5s var(--e-suave), scale .5s var(--e-mola); } /* o número do passo acende quando ele chega à altura de leitura */ @supports (animation-timeline: view()) { .com-timeline .passo__n { animation: acende-passo linear both; animation-timeline: view(); animation-range: cover 28% cover 48%; } @keyframes acende-passo { /* O número parado ficava no verde de destaque sobre verde pálido: 2,98:1, medido. Começa no verde profundo e acende no destaque, com texto escuro, que é o par da referência. */ from { background-color: var(--marca-suave); color: var(--acao); scale: 1; } to { background-color: var(--acao-clara); color: var(--acao); scale: 1.08; box-shadow: 0 8px 24px rgba(var(--marca-rgb), .3); } } } @media (max-width: 719px) { /* O número ao lado comia um quinto da largura do cartão e a leitura caía para 27 caracteres por linha, medido. Acima do título, o texto usa a largura inteira. */ .passo { grid-template-columns: 1fr; gap: .8rem; padding: 1.25rem 1.15rem; } .passo__n { width: 2.3rem; height: 2.3rem; font-size: .82rem; } } .passo h3 { margin: 0 0 .35rem; } .passo p { margin: 0; font-size: var(--f-apoio); } /* --------------------------------------------------------------------------- VÍDEO, com o celular desenhado em CSS --------------------------------------------------------------------------- */ .video-bloco__grade { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 960px) { .video-bloco__grade { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); } } .fone { position: relative; margin: 0 auto; width: 100%; max-width: 280px; padding: 10px; border-radius: 34px; background: linear-gradient(160deg, #2a2a2a, #121212); box-shadow: var(--elev-3), inset 0 0 0 1.5px rgba(255, 255, 255, .08); isolation: isolate; } .fone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 54px; height: 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .18); z-index: 2; } .fone::after { content: ""; position: absolute; inset: 12% 4% -6%; z-index: -1; border-radius: 64px; background: rgba(var(--marca-rgb), .18); filter: blur(70px); } .fone video { display: block; width: 100%; border-radius: 26px; background: #000; } @media (max-width: 719px) { .fone { max-width: 100%; padding: 0; background: none; box-shadow: none; border-radius: 20px; } .fone::before { display: none; } .fone video { border-radius: 20px; } } /* --------------------------------------------------------------------------- DEPOIMENTOS --------------------------------------------------------------------------- Terceira versão da seção, e o motivo de cada mudança: A primeira era uma bandeja que encolhia até o conteúdo: em tela larga deixava dois retângulos perdidos no meio do bege, em tela estreita virava trilha de arrastar sem pista de que havia um segundo vídeo. A segunda acertou o cartão, mas manteve o cabeçalho centralizado em cima: a leitura descia por uma coluna estreita no meio de uma faixa de 1200px, e sobrava largura dos dois lados sem função nenhuma. Esta divide em duas: o argumento, a nota do Google e o caminho para as obras de um lado; a cara de quem comprou do outro. No celular empilha, e os dois depoimentos ficam lado a lado em meia largura, que é o suficiente para reconhecer uma pessoa e tocar. --------------------------------------------------------------------------- */ .clientes__grade { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } /* Duas colunas só a partir de 1100px: entre 900 e 1100 a coluna dos vídeos fica com 409px e os dois cartões não cabem lado a lado, quebram em duas linhas e a seção dobra de altura. Abaixo disso, empilha. */ @media (min-width: 1100px) { .clientes__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } } @media (min-width: 720px) and (max-width: 1099px) { .clientes__lado { justify-items: center; text-align: center; } .clientes__lado h2, .clientes__lado p { max-width: 34ch; margin-inline: auto; } .clientes__nota { border-left: 0; padding-left: 0; padding-top: .9rem; border-top: 3px solid var(--marca); justify-items: center; } } .clientes__lado { display: grid; justify-items: start; gap: 1.1rem; } .clientes__lado h2 { margin: 0; max-width: 16ch; } .clientes__lado p { margin: 0; max-width: 40ch; color: var(--tinta-media); } .clientes__nota { display: grid; gap: .1rem; margin-block: .4rem; padding-left: 1.1rem; border-left: 3px solid var(--marca); } .clientes__nota-topo { display: flex; align-items: center; gap: .6rem; } .clientes__nota-topo strong { font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; } .clientes__nota-pe { font-size: var(--f-apoio); color: var(--tinta-fraca); } /* --- os cartões ---------------------------------------------------------- */ .deps { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: clamp(.75rem, 2vw, 1.25rem); } .dep { margin: 0; flex: 1 1 13rem; max-width: 17rem; display: grid; grid-template-rows: auto 1fr; background: var(--s0); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--elev-2); transition: box-shadow .45s var(--e-suave), translate .45s var(--e-saida); } /* --------------------------------------------------------------------------- O CARTÃO SOB O MOUSE --------------------------------------------------------------------------- O que havia era o cartão subindo quatro pixels e o botão de play dando um tranco de mola. Dois movimentos sem relação com o que o cartão é: um vídeo parado esperando alguém tocar. O que acontece agora, tudo ao mesmo tempo e na mesma curva: - o véu escuro sobre a capa dissolve, e a cena aparece como vai aparecer quando o vídeo rodar; - o botão cresce sem tranco e a sombra dele se abre; - o anel acelera, de dois segundos e meio para um e meio; - o pé do cartão acende e o nome anda um fio para a direita, que é o lado para onde a leitura vai. O cartão sobe dois pixels, não quatro: o suficiente para descolar da página, pouco o bastante para não parecer um salto. --------------------------------------------------------------------------- */ /* Nada se desloca no hover. O cartão também é animado pela rolagem, e o deslocamento daqui se somava àquele: passar o mouse enquanto a seção ainda entrava fazia o cartão pular de posição. O que muda agora é só cor, sombra e o tamanho do botão, nenhum deles mexe no lugar das coisas. */ .dep:hover { box-shadow: var(--elev-3); } .dep .vsl__veu { transition: opacity .55s var(--e-suave); } .dep:hover .vsl__veu { opacity: .4; } .dep .vsl__play-circulo { transition: transform .5s var(--e-saida), background-color .4s linear, box-shadow .5s var(--e-suave); } .dep:hover .vsl__play-circulo { transform: scale(1.12); background: var(--marca-media); box-shadow: 0 16px 44px rgba(var(--escura-rgb), .45); } .dep:hover .vsl__play-circulo::before { animation-duration: 1.5s; } .dep .dep__pe { transition: background-color .45s linear; } .dep:hover .dep__pe { background: var(--s1); } .dep .dep__nome { transition: color .4s linear; } .dep:hover .dep__nome { color: var(--marca); } /* enquanto o vídeo toca, nada disso se aplica: a capa já saiu de cena */ .dep [data-vsl].tocando .vsl__veu { opacity: 0; } @media (prefers-reduced-motion: reduce) { .dep, .dep .vsl__veu, .dep .vsl__play-circulo, .dep .dep__pe, .dep .dep__nome { transition: none !important; } .dep:hover .vsl__play-circulo { transform: none; } } /* a tela do depoimento usa o reprodutor do site, em pé */ .dep__tela { position: relative; aspect-ratio: 9 / 16; background: #000; overflow: hidden; isolation: isolate; } .dep__tela .vsl__video { width: 100%; height: 100%; object-fit: cover; display: block; } .dep__pe { display: grid; gap: .15rem; padding: .9rem 1rem 1.05rem; } .dep__nome { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; } .dep__meta { font-size: var(--f-micro); color: var(--tinta-fraca); } /* o botão de play dentro do cartão é menor que o do vídeo principal */ .dep__tela .vsl__play-circulo { width: 3.25rem; height: 3.25rem; box-shadow: 0 12px 30px rgba(var(--escura-rgb), .38); } .dep__tela .vsl__play-circulo svg { width: 18px; height: 18px; } .dep__tela .vsl__dica { bottom: 9%; font-size: var(--f-micro); } .dep__tela .vsl__barra { padding: .45rem .5rem; gap: .35rem; } .dep__tela .vsl__btn { width: 1.6rem; height: 1.6rem; } .dep__tela .vsl__tempo { font-size: .66rem; } .dep__tela .vsl__btn[data-cheia] { display: none; } /* não cabe, e o cartão já é pequeno */ @media (max-width: 719px) { .deps { gap: .6rem; } .dep { flex: 1 1 8rem; max-width: none; } .dep__pe { padding: .7rem .75rem .85rem; } .dep__nome { font-size: .9rem; } .dep__tela .vsl__play-circulo { width: 2.6rem; height: 2.6rem; } .dep__tela .vsl__play-circulo svg { width: 15px; height: 15px; } .dep__tela .vsl__dica { display: none; } .dep__tela .vsl__tempo, .dep__tela .vsl__btn[data-som] { display: none; } } /* --------------------------------------------------------------------------- QUEM SOMOS, na faixa escura --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- A FOTO AO LADO DO TEXTO --------------------------------------------------------------------------- A coluna da esquerda tem título, três parágrafos, três selos e um botão: é alta. A foto era 4:3 deitada e ficava centralizada ao lado, com um palmo de nada acima e outro abaixo, a seção parecia ter um buraco do lado direito. Agora a foto é vertical e acompanha a altura do texto: o objeto fica preso ao topo enquanto a coluna existir, e a imagem preenche o que houver. Em tela estreita ela volta a deitar, porque uma foto em pé ocupando a largura do celular empurra o resto da página para baixo. --------------------------------------------------------------------------- */ .quem__grade { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; } @media (min-width: 960px) { .quem__grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, .78fr); } } .quem__foto { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--elev-3); min-height: 100%; } .quem__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 960px) { /* em pé, com teto: numa tela muito alta a foto não vira um painel */ .quem__foto { aspect-ratio: 3 / 4; max-height: 40rem; } } @media (max-width: 959px) { .quem__foto { aspect-ratio: 4 / 3; min-height: 0; } } .selos { list-style: none; margin: 1.75rem 0; padding: 0; display: grid; gap: .9rem; } .selos li { display: grid; gap: .1rem; padding-left: 1.6rem; position: relative; } .selos li::before { content: ""; position: absolute; left: 0; top: .45rem; width: 10px; height: 10px; border-radius: 3px; background: var(--acento); } .selos strong { font-weight: 600; } .selos span { color: var(--tinta-media); font-size: var(--f-apoio); } .selos li::before { background: var(--marca); } /* A pílula pequena, usada dentro do cartão do blog */ .pill--sm { padding: .25rem .6rem; font-size: .6875rem; letter-spacing: .1em; } .pill--sm::before { width: 4px; height: 4px; } /* As provas do herói precisam de ar entre o número e o rótulo */ .heroi-novo__prova { gap: .25rem; } .heroi-novo__prova strong { line-height: 1.1; } .heroi-novo__provas { gap: 2rem 2.5rem; } /* O título não pode encostar na coluna: a palavra mais longa manda */ .heroi-novo__texto h1 { max-width: 17ch; } @media (max-width: 959px) { .heroi-novo__texto h1 { max-width: 22ch; } } /* Sem mouse, o facho anda sozinho por animação do navegador: vida no fundo sem um laço de JavaScript gastando bateria em celular. */ .heroi-novo.luz-sozinha .heroi-novo__facho { animation: passeia-facho 22s linear infinite; } @keyframes passeia-facho { 0% { --luz-x: 72%; --luz-y: 30%; } 25% { --luz-x: 30%; --luz-y: 58%; } 50% { --luz-x: 58%; --luz-y: 82%; } 75% { --luz-x: 86%; --luz-y: 54%; } 100% { --luz-x: 72%; --luz-y: 30%; } } @property --luz-x { syntax: ""; inherits: true; initial-value: 72%; } @property --luz-y { syntax: ""; inherits: true; initial-value: 34%; } .heroi-novo__pontos { transition: opacity .6s var(--e-suave); } @media (prefers-reduced-motion: reduce) { .heroi-novo.luz-sozinha .heroi-novo__facho { animation: none; } } /* =========================================================================== REPRODUTOR DO VÍDEO --------------------------------------------------------------------------- Antes: o vídeo em pé dentro de um celular desenhado, com os controles de fábrica do navegador por cima. O quadro vertical comia altura da página, os controles eram de outro desenho e o convite para dar play era um triangulinho cinza de 20 pixels. Agora: quadro quadrado, capa com um botão grande no meio e controles próprios, no desenho do site. Parados, os controles somem e fica só a imagem; tocando, a barra aparece embaixo e some sozinha. =========================================================================== */ .vsl { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 34rem; margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); isolation: isolate; } .vsl::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none; } .vsl__video { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; /* o rosto fica no terço de cima */ display: block; background: #0b0b0b; } /* o véu só existe antes de começar, para o botão ter contraste */ /* O vídeo não é escuro: medido, todos os quadros ficam em 60% de brilho. Quem escurecia a capa era este véu, que chegava a 52% de preto nas bordas. Agora é um sombreado leve só na base, para o botão e a duração terem contraste, e a pessoa aparece como está. */ .vsl__veu { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%); transition: opacity .5s var(--e-suave); pointer-events: none; } [data-vsl].tocando .vsl__veu { opacity: 0; } /* --- o botão grande ------------------------------------------------------ */ .vsl__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; border: 0; background: none; padding: 0; cursor: pointer; transition: opacity .35s var(--e-suave); } [data-vsl].tocando .vsl__play { opacity: 0; pointer-events: none; } .vsl__play-circulo { position: relative; display: grid; place-items: center; width: clamp(4.5rem, 12vw, 5.75rem); height: clamp(4.5rem, 12vw, 5.75rem); border-radius: 50%; background: var(--marca); box-shadow: 0 18px 48px rgba(var(--escura-rgb), .42); transition: transform .4s var(--e-mola), background-color .3s linear; } .vsl__play:hover .vsl__play-circulo { transform: scale(1.08); background: var(--marca-media); } .vsl__play:active .vsl__play-circulo { transform: scale(.97); } .vsl__play-circulo svg { margin-left: .22em; } /* o anel que respira, convidando a tocar */ .vsl__play-circulo::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); animation: anel-vsl 2.6s var(--e-suave) infinite; } @keyframes anel-vsl { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } .vsl__dica { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); font-size: var(--f-apoio); font-weight: 600; color: rgba(255, 255, 255, .86); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); white-space: nowrap; } [data-vsl].tocando .vsl__dica { opacity: 0; } /* --- a barra de controles ------------------------------------------------ */ .vsl__barra { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .72) 42%); opacity: 0; transform: translateY(8px); transition: opacity .3s linear, transform .35s var(--e-saida); } [data-vsl].tocando:hover .vsl__barra, [data-vsl].tocando.mexendo .vsl__barra, .vsl:focus-within .vsl__barra { opacity: 1; transform: none; } .vsl__btn { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; padding: 0; transition: background-color .25s linear, transform .3s var(--e-passa); } .vsl__btn:hover { background: rgba(255, 255, 255, .26); transform: scale(1.08); } .vsl__tempo { font-size: .75rem; font-weight: 600; color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums; flex: none; } .vsl__trilho { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); cursor: pointer; } .vsl__trilho::before { content: ""; position: absolute; inset: -9px 0; /* área de toque */ } .vsl__progresso { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 2px; background: var(--marca); } .vsl__progresso::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .25s linear; } .vsl__trilho:hover .vsl__progresso::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .vsl__play-circulo::before { animation: none; } .vsl__play-circulo, .vsl__barra, .vsl__btn { transition: none; } } /* As animações que correm sozinhas param quando ninguém as vê. O navegador não faz isso por conta própria: uma animação fora da tela continua sendo calculada e composta a cada quadro. */ .heroi-novo:not(.na-vista)::after { animation-play-state: paused; } .vsl:not(.na-vista) .vsl__play-circulo::before { animation-play-state: paused; } /* seis soluções fecham em duas linhas de três, não em quatro mais duas */ @media (min-width: 1000px) { .ec-grade--4:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* blocos.css */ /* =========================================================================== BLOCOS COMPARTILHADOS --------------------------------------------------------------------------- O que nasceu na home e passou a servir às páginas de solução: a grade de ofertas com traços, o fecho, o simulador de economia e o mapa da loja. Carregado por todas as páginas, depois do sistema e antes do que é só de cada uma. =========================================================================== */ /* --------------------------------------------------------------------------- SERVIÇOS --------------------------------------------------------------------------- Refeito. Eram seis linhas de texto em duas colunas, com a seta lá na outra ponta da linha e um resumo cortado na primeira vírgula, que não dizia nada. Linha de texto não diz o que a empresa faz além de energia solar; um traço desenhado diz na hora. Cada serviço vira um cartão com o traço do que ele é, o número, o nome e a frase inteira. A grade acomoda três por linha no computador, dois no tablet e um no celular. O traço nasce no tom da bandeja e ganha a cor da marca quando o mouse chega. --------------------------------------------------------------------------- */ .serv-grade { display: grid; gap: 8px; /* 17rem cabia quatro por linha em 1200px: cartão estreito e alto, com o resumo quebrando em quatro linhas. 21rem fecha em três. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); } .serv { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icone corpo seta"; align-items: center; gap: 1.1rem; padding: 1.35rem 1.4rem; background: var(--s0); border-radius: var(--r-lg); text-decoration: none; color: inherit; box-shadow: var(--elev-1); transition: box-shadow .45s var(--e-suave), background-color .4s linear; } .serv:hover { box-shadow: var(--elev-3); } .serv__icone { grid-area: icone; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: var(--r-sm); background: var(--s2); color: var(--tinta-media); transition: background-color .4s linear, color .4s linear; } .serv__icone svg { width: 22px; height: 22px; } .serv:hover .serv__icone { background: var(--marca); color: #fff; } /* O número dividia a linha com o título e criava um degrau no alto do cartão. Agora anda junto do nome, como prefixo. */ .serv__n { font-size: var(--f-micro); font-variant-numeric: tabular-nums; color: var(--tinta-fraca); letter-spacing: .1em; margin-right: .5rem; } .serv__corpo { grid-area: corpo; display: grid; gap: .3rem; } .serv__t { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em; } /* Duas linhas, e o navegador corta onde couber. Cortar no gerador por contagem de letras dava reticência no meio de palavra em umas e sobra de espaço em outras, porque os cartões não têm a mesma largura em toda tela. */ .serv__d { font-size: var(--f-apoio); color: var(--tinta-fraca); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .serv__seta { grid-area: seta; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--tinta-fraca); transition: transform .4s var(--e-passa), color .4s linear, background-color .4s linear; } .serv:hover .serv__seta { transform: translateX(3px); color: var(--marca); background: var(--marca-suave); } @media (max-width: 719px) { .serv { padding: 1.1rem 1.15rem; gap: .25rem .9rem; } .serv__icone { width: 2.5rem; height: 2.5rem; } .serv__icone svg { width: 19px; height: 19px; } .serv__t { font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { .serv, .serv__icone, .serv__seta { transition: none; } .serv:hover .serv__seta { transform: none; } } /* --------------------------------------------------------------------------- FECHAMENTO --------------------------------------------------------------------------- */ .fecha { text-align: center; } .fecha__grade { display: grid; justify-items: center; } .fecha__grade > div { display: grid; justify-items: center; gap: 1.1rem; max-width: 46rem; } .fecha__titulo { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); margin: 0; } .fecha p { margin: 0; font-size: 1.0625rem; } .fecha__acoes { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .5rem; } /* =========================================================================== SIMULADOR DE ECONOMIA --------------------------------------------------------------------------- No desenho da referência: o argumento de um lado, a ferramenta do outro, num cartão branco. Abas em pílula escolhem o caminho, a conta entra por número ou por arraste, as premissas abrem num detalhe, e o resultado sai numa caixa verde clara com o anual grande, o mensal e duas barras. =========================================================================== */ .sim__grade { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 1000px) { .sim__grade { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } } .sim__lado { display: grid; justify-items: start; gap: 1.1rem; } .sim__lado h2 { margin: 0; } .sim__lado > p { margin: 0; max-width: 38ch; color: var(--tinta-media); } .sim__promessa { display: flex; align-items: center; gap: .9rem; margin-top: .4rem; color: var(--tinta); font-size: var(--f-apoio); line-height: 1.45; } .sim__promessa svg { width: 26px; height: 26px; flex: none; color: var(--marca); } .sim__promessa strong { font-weight: 600; } .sim__lado .sim__aviso { margin: .4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linha); max-width: 40ch; font-size: var(--f-micro); color: var(--tinta-fraca); text-align: left; } /* --- o cartão ------------------------------------------------------------ */ .sim__caixa { display: grid; gap: 1rem; padding: clamp(1.1rem, 2.5vw, 1.75rem); background: var(--s0); border: 1px solid var(--linha); border-radius: var(--r-xl); box-shadow: var(--elev-2); } .sim__abas { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--s1); border-radius: 10px; } .sim__aba { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem .5rem; border: 0; border-radius: 8px; background: transparent; color: var(--tinta-media); font: inherit; font-size: var(--f-apoio); font-weight: 500; cursor: pointer; transition: background-color .3s linear, color .3s linear; } .sim__aba.ativo { background: var(--acao); color: var(--s0); } .sim__aba svg { width: 16px; height: 16px; } .sim__sub { font-size: var(--f-micro); color: var(--tinta-fraca); margin: -.4rem 0 0; } .sim__linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .sim__rotulo { font-weight: 600; max-width: 18ch; } .sim__campo { display: flex; align-items: center; gap: .35rem; padding: .55rem .85rem; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--s0); transition: border-color .25s linear, box-shadow .25s linear; } .sim__campo:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(var(--marca-rgb), .18); } .sim__campo span { color: var(--tinta-fraca); font-size: var(--f-micro); } .sim__campo input { width: 5.5ch; border: 0; outline: 0; background: none; font: inherit; font-size: 1.35rem; font-weight: 500; color: var(--tinta); font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .sim__campo input::-webkit-outer-spin-button, .sim__campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* --- a régua -------------------------------------------------------------- */ .sim__faixa { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: linear-gradient(var(--acao), var(--acao)) no-repeat, linear-gradient(var(--linha), var(--linha)); background-size: var(--cheio, 4%) 100%, 100% 100%; border-radius: 2px; outline: 0; cursor: pointer; } /* foco do teclado na régua: o contorno em volta da faixa e o anel no botão de arrastar */ .sim__faixa:focus-visible { outline: 2px solid var(--marca); outline-offset: 8px; border-radius: 4px; } .sim__faixa:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--marca-rgb), .28); } .sim__faixa:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(var(--marca-rgb), .28); } .sim__faixa::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--s0); border: 1px solid var(--linha-forte); box-shadow: 0 1px 4px rgba(var(--escura-rgb), .25); cursor: grab; transition: box-shadow .2s linear; } .sim__faixa::-webkit-slider-thumb:hover, .sim__faixa::-webkit-slider-thumb:active { box-shadow: 0 0 0 4px rgba(var(--marca-rgb), .22); } .sim__faixa::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--s0); border: 1px solid var(--linha-forte); box-shadow: 0 1px 4px rgba(var(--escura-rgb), .25); cursor: grab; } .sim__limites { display: flex; justify-content: space-between; font-size: var(--f-micro); color: var(--tinta-fraca); margin-top: -.55rem; } /* --- as premissas --------------------------------------------------------- */ .sim__premissas summary { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; font-size: var(--f-micro); color: var(--tinta-media); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; } .sim__premissas summary::-webkit-details-marker { display: none; } .sim__premissas summary svg { width: 15px; height: 15px; color: var(--tinta-fraca); } .sim__premissas summary:hover { color: var(--tinta); } .sim__premissas-corpo { display: grid; gap: .6rem; margin-top: .9rem; padding: 1rem 1.1rem; background: var(--s1); border-radius: 10px; } .sim__premissas-corpo label { font-size: var(--f-apoio); font-weight: 500; } .sim__premissas-corpo p { margin: 0; font-size: var(--f-micro); color: var(--tinta-fraca); line-height: 1.5; } .sim__premissas-corpo [data-so] { display: grid; gap: .6rem; } .sim__premissas-corpo [hidden] { display: none; } .sim__premissas-corpo input[type="number"] { width: 100%; padding: .55rem .75rem; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--s0); font: inherit; font-size: 1rem; color: var(--tinta); -moz-appearance: textfield; } .sim__premissas-corpo input[type="number"]:focus { outline: 0; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(var(--marca-rgb), .18); } .sim__premissas-corpo input::-webkit-outer-spin-button, .sim__premissas-corpo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* --- o resultado ---------------------------------------------------------- */ .sim__saida { display: grid; gap: .6rem; padding: clamp(1rem, 2.2vw, 1.4rem); background: var(--marca-suave); border-radius: 10px; } .sim__saida-topo { font-size: var(--f-apoio); color: var(--tinta-media); } .sim__valor { display: flex; align-items: baseline; gap: .4rem; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; color: var(--tinta); } .sim__valor small { font-size: .42em; font-weight: 400; letter-spacing: 0; color: var(--tinta-fraca); } .sim__mes { font-size: var(--f-apoio); color: var(--tinta-media); margin: 0; } .sim__comparo { display: grid; gap: .55rem; margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--linha-forte); } .sim__par { display: grid; gap: .35rem; } .sim__par-linha { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--f-micro); } .sim__par-linha strong { font-weight: 600; font-variant-numeric: tabular-nums; } .sim__barra { height: 6px; border-radius: 3px; background: var(--linha); overflow: hidden; } .sim__barra i { display: block; height: 100%; border-radius: 3px; background: var(--marca); transition: width .5s var(--e-saida); } .sim__par--depois .sim__barra i { background: var(--acao); } .sim__nota { font-size: var(--f-micro); color: var(--tinta-fraca); margin: .2rem 0 0; line-height: 1.5; } .sim__caixa .sim__botao { width: 100%; justify-content: center; gap: .6rem; border-radius: 8px; padding-block: 1rem; } .sim__botao svg { width: 18px; height: 18px; transition: transform .3s var(--e-passa); } .sim__botao:hover svg { transform: translate(2px, -2px); } .sim__rodape { font-size: var(--f-micro); color: var(--tinta-fraca); text-align: center; margin: -.4rem 0 0; } @media (prefers-reduced-motion: reduce) { .sim__barra i, .sim__aba, .sim__campo, .sim__botao svg { transition: none; } } /* =========================================================================== ONDE FICA A LOJA --------------------------------------------------------------------------- Endereço de um lado, mapa do outro, num cartão só, como na referência. O mapa tem altura própria e não estica com o texto: um mapa esticado vira uma faixa fina onde não se enxerga rua nenhuma. =========================================================================== */ .mapa-cartao { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--s0); border: 1px solid var(--linha); border-radius: var(--r-xl); box-shadow: var(--elev-2); } @media (min-width: 900px) { .mapa-cartao { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } } .mapa-cartao__lado { display: grid; justify-items: start; gap: .9rem; } .mapa-cartao__lado h2 { margin: 0; font-size: var(--f-bloco-grande, 1.75rem); } .mapa-cartao__lado p { margin: 0; color: var(--tinta-media); line-height: 1.7; } .mapa-cartao__hora { font-size: var(--f-apoio); color: var(--tinta-fraca) !important; } .mapa-cartao__tela { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--s2); height: clamp(16rem, 34vw, 24rem); } .mapa-cartao__tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.92); } @media (max-width: 719px) { .mapa-cartao__tela { height: 15rem; } } /* --------------------------------------------------------------------------- CARROSSÉIS DO CELULAR --------------------------------------------------------------------------- No celular as soluções, as obras e os depoimentos deixam de empilhar e andam de lado, na trilha do sistema (com a régua de pontos que o JS desenha). Cada cartão entra crescendo e clareando conforme encaixa na tela, pela própria rolagem horizontal, sem laço de JavaScript. --------------------------------------------------------------------------- */ @media (max-width: 719px) { /* a bandeja some no celular: o carrossel corre de ponta a ponta da tela */ .bandeja { background: none; padding: 0; border-radius: 0; box-shadow: none; } .bandeja .trilha { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } .trilha.ec-grade, .trilha.grade, .trilha.obra-grade { grid-template-columns: none; gap: .75rem; } .galeria[data-carrossel] { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); scroll-padding-inline: calc(var(--lateral) * 2); } .trilha.ec-grade--duo { grid-auto-columns: 74%; } .trilha.ec-grade--duo .ec-cartao__texto { display: block; } .trilha.ec-grade--duo .ec-cartao__pe > span:first-child { display: inline; } .trilha.ec-grade--duo .ec-cartao__pe { justify-content: space-between; } .trilha.obra-grade { grid-auto-columns: 80%; } .deps.trilha { display: grid; grid-auto-columns: 78%; justify-content: start; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } .deps.trilha .dep { flex: none; max-width: none; } .deps.trilha .dep__tela { aspect-ratio: 1 / 1; } .deps.trilha .dep__tela .vsl__video { object-position: center 30%; } .clientes__grade { gap: 1.5rem; } } @keyframes trilha-chega { from { opacity: .45; transform: scale(.93); } to { opacity: 1; transform: none; } } @media (max-width: 719px) and (prefers-reduced-motion: no-preference) { html.com-timeline .trilha > * { animation: trilha-chega linear both; animation-timeline: view(inline); animation-range: entry 10% entry 85%; } } /* --------------------------------------------------------------------------- PROVA --------------------------------------------------------------------------- */ .prova { padding-block: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--linha); } .prova__grade { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .prova__item { display: grid; gap: .2rem; }