/* 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); } } /* interna.css */ /* =========================================================================== PÁGINAS INTERNAS --------------------------------------------------------------------------- Depende de sistema.css e topo.css. As 33 páginas internas foram escritas com outro vocabulário de classes (.secao, .cabeca, .numeros, .cartao, .split). Reescrever o HTML de todas custaria caro e arriscaria perder conteúdo. Então o sistema novo entra por aqui: as mesmas classes, com as cores, os raios, as sombras, o respiro e o movimento da home. O que muda, bloco a bloco: - o herói era foto esticada com véu cinzento e uma barra colorida embaixo; passa a ser escuro de verdade, com textura, foco na foto e um fim limpo; - o cabeçalho de seção ganha a pílula e o mesmo peso de título da home; - a faixa de números vira bandeja com cartões, como no painel; - cartão, botão e link de passagem herdam o desenho do sistema. =========================================================================== */ /* --------------------------------------------------------------------------- HERÓI DA PÁGINA --------------------------------------------------------------------------- Segue o herói da home: claro, com a trama de células e a mancha de cor do logo ao fundo. Era verde profundo de tela cheia, o último bloco escuro que sobrou depois de o site inteiro passar para o claro, e o motivo de o cabeçalho perder contraste nas páginas internas: a detecção marcava o tema escuro e os itens ficavam quase da cor do fundo. --------------------------------------------------------------------------- */ .heroi { position: relative; background: var(--s1); color: var(--tinta); isolation: isolate; overflow: hidden; } .heroi::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(rgba(var(--escura-rgb), .17) 1.1px, transparent 1.1px), linear-gradient(to right, rgba(var(--escura-rgb), .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--escura-rgb), .055) 1px, transparent 1px) !important; background-size: 26px 26px, 26px 26px, 26px 26px !important; 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%); } .heroi::after { content: ""; position: absolute; inset: -30% -10% auto; height: 150%; z-index: -1; left: -10%; right: -10%; bottom: auto; 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%) !important; animation: respira-luz-interna 26s var(--e-suave) infinite alternate; } @keyframes respira-luz-interna { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.1); } } .heroi--interna .heroi__conteudo { padding-block: clamp(3.5rem, 8vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); max-width: 44rem; position: relative; z-index: 1; } .heroi--interna h1 { font-size: var(--f-titulo); letter-spacing: -.035em; text-wrap: balance; color: var(--tinta); } .heroi h1, .heroi .heroi__sub, .heroi p { color: var(--tinta); } .heroi p, .heroi .heroi__sub { color: var(--tinta-media); } /* o selo e a migalha, no claro */ .heroi .selo { 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; line-height: 1; } .heroi .selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--marca); } .heroi .migalhas { color: var(--tinta-fraca); } .heroi .migalhas a { color: var(--tinta-media); } .heroi .migalhas a:hover { color: var(--tinta); } .heroi .migalhas [aria-current="page"] { color: var(--tinta); } .heroi .botao--contorno { color: var(--tinta); box-shadow: inset 0 0 0 2px var(--linha-forte); } .heroi .botao--contorno:hover { background: var(--acao); color: #fff; box-shadow: none; } .heroi .rotulo { color: var(--tinta-media) !important; background: var(--s0); border-color: var(--linha); } .heroi .rotulo::before { background: var(--marca); } .heroi .marca-destaque { color: var(--tinta); } .heroi .chip { background: var(--s0); border-color: var(--linha); color: var(--tinta); } /* --- a foto, agora emoldurada ------------------------------------------- */ .heroi__foto { position: relative; inset: auto; z-index: 0; margin: 0 var(--lateral) clamp(2rem, 5vw, 3rem); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 24px 60px rgba(var(--escura-rgb), .16); aspect-ratio: 16 / 9; } .heroi__foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--escura-rgb), .08); } .heroi__foto img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 980px) { /* No computador a foto volta para o lado, como no herói da home. A proporção é fixa, e não esticada pela altura do texto: esticada, uma paisagem de 16:9 num quadro quase quadrado virava textura de painel sem contexto nenhum. */ .heroi__foto { position: absolute; top: 50%; bottom: auto; left: auto; /* A margem do conteúdo não é --lateral: o .wrap tem largura máxima e se centraliza, então em tela larga sobra bem mais que isso de cada lado. Alinhar pela lateral mínima jogava a foto para fora da coluna, à direita do menu. Aqui a conta é a mesma que o .wrap faz. */ right: max(var(--lateral), (100% - var(--largura)) / 2); transform: translateY(-50%); width: min(38%, 30rem); aspect-ratio: 4 / 3; margin: 0; } .heroi--interna { min-height: 30rem; display: flex; align-items: center; } .heroi--interna .heroi__conteudo { max-width: min(52%, 36rem); } /* sem foto, o texto usa a largura que quiser */ .heroi--sem-foto .heroi__conteudo { max-width: 46rem; } } .heroi--interna h1 { font-size: var(--f-titulo); letter-spacing: -.035em; text-wrap: balance; } /* o texto, o selo e a migalha do herói estão no bloco HERÓI DA PÁGINA, acima (herói claro) */ /* --------------------------------------------------------------------------- SEÇÕES --------------------------------------------------------------------------- */ .secao { padding-block: var(--respiro); } .secao--compacta { padding-block: clamp(2.25rem, 5vw, 3.5rem); } .secao--clara { background: var(--s1); } /* A faixa de destaque das internas segue o mesmo caminho da home: deixou de ser escura quando o site inteiro passou para o claro. A regra fica aqui só para anular a do site antigo; o desenho vem do sistema. */ .secao--escura { position: relative; background: var(--s2); color: var(--tinta); isolation: isolate; overflow: hidden; } /* a trama e a mancha vêm do sistema.css, iguais às da home */ .secao--escura p { color: var(--tinta-media); } /* --------------------------------------------------------------------------- CABEÇALHO DE SEÇÃO --------------------------------------------------------------------------- */ .cabeca { gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .cabeca h2 { margin-bottom: 0; max-width: 22ch; letter-spacing: -.03em; } .cabeca p { color: var(--tinta-media); font-size: var(--f-corpo); } .rotulo { /* Dentro de .cabeca, que é grade, um inline-flex vira item de grade e se estica pela coluna inteira: a pílula ia de borda a borda da tela. */ display: inline-flex; align-items: center; gap: .5rem; justify-self: start; width: fit-content; 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; margin-bottom: .2rem; } .rotulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--marca); } .secao--escura .rotulo, .heroi .rotulo { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .82) !important; } .secao--escura .rotulo::before, .heroi .rotulo::before { background: var(--acento); } /* --------------------------------------------------------------------------- NÚMEROS A faixa de quatro células com traço de 1px vira bandeja com cartões. --------------------------------------------------------------------------- */ .numeros { gap: 8px; padding: 8px; background: var(--s2); border: 0; border-radius: var(--r-xl); } .numeros__item { background: var(--s0); border-radius: var(--r-lg); padding: clamp(1.1rem, 2.2vw, 1.6rem); } .numeros__num { color: var(--tinta); font-weight: 600; letter-spacing: -.035em; font-size: clamp(1.75rem, 3.2vw, 2.4rem); } .numeros__rot { color: var(--tinta-fraca); font-size: var(--f-apoio); } .numeros--sobe { box-shadow: var(--elev-3); } .secao--escura .numeros { background: rgba(255, 255, 255, .07); border: 0; } .secao--escura .numeros__item { background: var(--s-escura-2); } .secao--escura .numeros__num { color: var(--tinta-clara); } .secao--escura .numeros__rot { color: rgba(255, 255, 255, .6); } /* --------------------------------------------------------------------------- CARTÃO --------------------------------------------------------------------------- */ .cartao { background: var(--s0); border: 1px solid var(--linha); border-radius: var(--r-lg); box-shadow: var(--elev-1); transition: transform var(--t-curta) var(--e-saida), box-shadow var(--t-curta) var(--e-suave), border-color var(--t-curta) linear; } a.cartao:hover, .cartao--link:hover { transform: translateY(-4px); box-shadow: var(--elev-3); border-color: var(--linha-forte); } .cartao p { color: var(--tinta-media); } .secao--escura .cartao { background: var(--s-escura-2); border-color: var(--linha-escura); } .secao--escura .cartao p { color: var(--tinta-clara-media); } /* --------------------------------------------------------------------------- FOTO EM BLOCO --------------------------------------------------------------------------- */ .split .foto, .foto { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--elev-3); } /* --------------------------------------------------------------------------- LINK DE PASSAGEM --------------------------------------------------------------------------- */ .link-seta { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; text-decoration: none; transition: gap var(--t-curta) var(--e-passa), color var(--t-curta) linear; } .link-seta:hover { gap: .75rem; color: var(--marca); } .secao--escura .link-seta:hover { color: var(--acento); } /* --------------------------------------------------------------------------- MIGALHA DE PÃO Sobre a foto do herói ela ficava cinza fraco: 3,09:1 na medição. --------------------------------------------------------------------------- */ .migalhas { font-size: var(--f-apoio); color: rgba(255, 255, 255, .66); margin-bottom: 1rem; } .migalhas a { color: rgba(255, 255, 255, .82); text-decoration: none; } .migalhas a:hover { color: #fff; text-decoration: underline; } .migalhas [aria-current="page"] { color: #fff; } /* Fora do herói, a migalha vive em fundo claro */ .secao .migalhas, .secao--clara .migalhas { color: var(--tinta-fraca); } .secao .migalhas a { color: var(--tinta-media); } /* --------------------------------------------------------------------------- DESTAQUE NO TÍTULO Era uma tarja que começava no meio da letra e cortava o texto ao meio. Agora é um traço baixo, com a espessura da haste da fonte. --------------------------------------------------------------------------- */ .marca-destaque, .secao--escura .marca-destaque, .heroi .marca-destaque { background-image: linear-gradient(var(--marca), var(--marca)) !important; background-repeat: no-repeat; background-position: 0 92%; background-size: 100% .14em; padding-bottom: .04em; } /* --------------------------------------------------------------------------- CHAMADA DE FECHO --------------------------------------------------------------------------- Era um retângulo escuro com um círculo desfocado no canto. Recebe o mesmo acabamento do fechamento da home: raio maior, textura de pontos e a luz da marca atrás do título. --------------------------------------------------------------------------- */ .faixa-cta { border-radius: var(--r-xl); padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem); box-shadow: var(--elev-3); isolation: isolate; } .faixa-cta::before { right: auto; top: auto; width: auto; height: auto; border-radius: 0; inset: 0 !important; background: radial-gradient(38% 60% at 88% 10%, rgba(var(--marca-rgb), .32), transparent 68%), radial-gradient(30% 50% at 6% 100%, rgba(var(--vivo-rgb), .14), transparent 70%) !important; } .faixa-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(90% 100% at 20% 0%, #000 10%, transparent 76%); mask-image: radial-gradient(90% 100% at 20% 0%, #000 10%, transparent 76%); } .faixa-cta h2 { letter-spacing: -.03em; } .faixa-cta p { color: var(--tinta-clara-media); } /* --------------------------------------------------------------------------- LISTA DE SERVIÇOS A grade de células coladas por um traço de 1px vira bandeja com cartões, igual às soluções da home. --------------------------------------------------------------------------- */ .secao:not(.secao--escura) .servicos { gap: 8px; padding: 8px; background: var(--s2); border: 0; border-radius: var(--r-xl); overflow: visible; } .secao:not(.secao--escura) .servico { border-radius: var(--r-lg); padding: clamp(1.25rem, 2.4vw, 1.6rem); transition: transform var(--t-curta) var(--e-saida), box-shadow var(--t-curta) var(--e-suave), background-color var(--t-curta) linear; } .secao:not(.secao--escura) .servico:hover { transform: translateY(-3px); box-shadow: var(--elev-2); background: var(--s0); } .servico__num { color: var(--marca); font-weight: 700; font-size: var(--f-micro); letter-spacing: .1em; } /* --------------------------------------------------------------------------- PERGUNTAS --------------------------------------------------------------------------- */ .faq__item { border-radius: var(--r-lg); border-color: var(--linha); transition: border-color var(--t-curta) linear, box-shadow var(--t-curta) var(--e-suave), background-color var(--t-curta) linear; } .faq__item:hover { border-color: var(--linha-forte); } .faq__item[open] { border-color: var(--marca); box-shadow: var(--elev-2); } .faq__num { color: var(--marca); } .faq__icone { background: var(--s1); border-color: var(--linha); transition: all var(--t-curta) var(--e-saida); } .faq__resposta { color: var(--tinta-media); } /* =========================================================================== SEÇÃO DE TEXTO LONGO COM FOTO --------------------------------------------------------------------------- O bloco .split divide a largura em duas metades e centraliza as duas verticalmente. Funciona quando os dois lados têm tamanho parecido. Não funciona na história da empresa, que tem quatro parágrafos de trezentos caracteres de um lado e uma foto do outro: o texto desce por uma coluna estreita, a foto fica boiando no meio da altura e sobra um retângulo vazio embaixo dela. Aqui, quando o lado do texto tem três parágrafos ou mais: - a coluna do texto cresce e a da foto encolhe, porque ler é o que se faz nesta seção; - os dois lados se alinham pelo topo, e não pelo meio; - a foto fica presa enquanto o texto passa, então acompanha a leitura em vez de ficar parada num ponto só; - a foto fica em pé, que é o formato que preenche uma coluna alta. Em tela estreita nada disso vale: foto em cima, texto embaixo, cada um com a largura inteira. =========================================================================== */ @media (min-width: 900px) { .split:has(.split__texto p + p + p) { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; gap: clamp(2.5rem, 5vw, 4.5rem); } .split:has(.split__texto p + p + p) .foto { position: sticky; top: calc(var(--altura-cab) + 2.5rem); aspect-ratio: 4 / 5; border-radius: var(--r-xl); } /* texto longo pede medida de leitura e ar entre os parágrafos */ .split:has(p + p + p) .split__texto p { max-width: 62ch; margin-bottom: 1.15em; } /* o primeiro parágrafo abre a leitura num corpo maior */ .split:has(p + p + p) .split__texto > p:first-of-type { font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); color: var(--tinta); } } @media (max-width: 899px) { /* a foto sobe para antes do texto: ninguém rola quatro parágrafos para descobrir que havia uma imagem no fim */ .split:has(.split__texto p + p + p) { display: flex; flex-direction: column; } .split:has(.split__texto p + p + p) .foto { order: -1; aspect-ratio: 16 / 10; } } /* =========================================================================== PÁGINA DE OBRA --------------------------------------------------------------------------- Desenho de página de anúncio: título em cima, no claro; a foto larga logo abaixo, em fita; o texto de um lado e, do outro, um cartão que acompanha a leitura com o convite para orçamento. =========================================================================== */ .obra-topo { background: var(--s0); padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem); } .obra-topo .migalhas { color: var(--tinta-fraca); margin-bottom: .9rem; } .obra-topo .migalhas a { color: var(--tinta-media); } .obra-topo .migalhas [aria-current="page"] { color: var(--tinta); } .obra-topo__titulo { font-size: var(--f-titulo); letter-spacing: -.035em; margin: .2rem 0 .6rem; max-width: 22ch; text-wrap: balance; } .obra-topo__meta { margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem); color: var(--tinta-fraca); font-size: var(--f-corpo); } /* A foto tinha proporção fixa de 2:1. Numa tela de 1200px isso dá 600px de altura, e com o título em cima a primeira tela do visitante virava uma foto só, sem texto, sem a ficha, sem o convite. O teto é a altura da janela: a foto ocupa no máximo pouco mais da metade dela, e o resto da página aparece junto. */ .obra-topo__foto { margin: 0; border-radius: var(--r-xl); overflow: hidden; /* Altura fixa em vez de proporção: com aspect-ratio e um teto de altura, o navegador encolhe a largura para manter a proporção, e a foto ficava mais estreita que a coluna de texto ao lado. */ width: 100%; height: min(56vh, 29rem); box-shadow: var(--elev-2); background: var(--s2); } .obra-topo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 719px) { .obra-topo__foto { height: min(44vh, 19rem); border-radius: var(--r-lg); } } /* --- o miolo ------------------------------------------------------------- */ .obra-corpo__grade { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } @media (min-width: 980px) { .obra-corpo__grade { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } } .obra-corpo__texto p { max-width: 62ch; } .obra-corpo__abre { font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); color: var(--tinta); } .obra-corpo__texto .ficha { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; } .obra-corpo__texto .ficha dt { color: var(--tinta-fraca); font-size: var(--f-apoio); } .obra-corpo__texto .ficha dd { margin: 0; font-weight: 600; } /* --- o cartão que acompanha ---------------------------------------------- */ @media (min-width: 980px) { .obra-cta { position: sticky; top: calc(var(--altura-cab) + 2rem); } } .obra-cta__caixa { display: grid; justify-items: start; gap: .85rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--s0); border: 1px solid var(--linha); border-radius: var(--r-xl); box-shadow: var(--elev-2); } .obra-cta__t { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; } .obra-cta__d { margin: 0; font-size: var(--f-apoio); color: var(--tinta-media); } .obra-cta .bt { width: 100%; justify-content: center; } /* --------------------------------------------------------------------------- ACERTOS DE LEITURA NO CELULAR Medidos com bin/auditar_mobile.py, que conta caracteres por linha e corpo de letra em cada bloco de texto. --------------------------------------------------------------------------- */ @media (max-width: 719px) { /* 28 caracteres por linha, medido: o cartão de solução apertava o texto num bloco de 213px dentro de 390 de tela. */ .solucao { grid-template-columns: 1fr; } .solucao__corpo { padding-inline: 1.15rem; } /* a legenda do cartão de obra em 12px vira friso cinza */ .obra-cartao__sub { font-size: .8125rem; } } /* --------------------------------------------------------------------------- LEGENDA SOBRE FOTO --------------------------------------------------------------------------- A varredura que escureceu o texto das faixas pegou também as legendas que ficam por cima das fotos da galeria. Ali o fundo é a própria imagem, então o texto volta a ser claro, com um véu atrás para não depender da foto ser escura naquele canto. --------------------------------------------------------------------------- */ .galeria figcaption, .foto figcaption, figure.foto figcaption { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); } .galeria figure::after, figure.foto:has(figcaption)::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(transparent, rgba(var(--noite-rgb), .62)); border-radius: inherit; pointer-events: none; z-index: 0; } .galeria figcaption, figure.foto figcaption { position: relative; z-index: 1; } /* o rótulo dentro da faixa de destaque, que herdava branco */ .secao--escura .rotulo, .faixa--escura .pill { color: var(--tinta-media) !important; background: var(--s0); border-color: var(--linha); } /* o número do passo era vermelho no CSS antigo; vermelho só no logo */ .cartao .cartao__num, .cartao__num { color: var(--marca); } /* --------------------------------------------------------------------------- FAIXA DE CHAMADA NA PALETA --------------------------------------------------------------------------- A faixa de chamada do fim das páginas era preta, do CSS antigo. Passa ao verde profundo da paleta, o mesmo do botão Contato e do painel do menu. E os cartões que caem dentro de uma faixa com trama (secao--escura, hoje clara) voltam a ser cartões brancos: o CSS antigo os pintava de escuro. --------------------------------------------------------------------------- */ .faixa-cta { background: var(--s-escura); color: var(--tinta-clara); border-color: transparent; } .faixa-cta h2, .faixa-cta h3 { color: var(--s0); } .faixa-cta p { color: rgba(255, 255, 255, .78); } .secao--escura .cartao, .faixa--escura .cartao { background: var(--s0); color: var(--tinta); border-color: var(--linha); } .secao--escura .cartao h3, .faixa--escura .cartao h3 { color: var(--tinta); } .secao--escura .cartao p, .faixa--escura .cartao p { color: var(--tinta-media); } .secao--escura .cabeca h2, .secao--escura .cabeca p { color: var(--tinta); } .secao--escura .cabeca p { color: var(--tinta-media); } /* --------------------------------------------------------------------------- SETAS E GRADES DAS VISÕES GERAIS --------------------------------------------------------------------------- */ .link-seta { color: var(--acao); } .link-seta::after { border-color: var(--marca); } .link-seta svg { color: var(--marca); } .secao--escura .link-seta, .faixa--escura .link-seta, .secao--clara .link-seta { color: var(--acao); } .servico:hover .link-seta, .solucao:hover .link-seta { color: var(--marca); } /* seis soluções fecham em duas linhas de três, não em quatro mais duas */ @media (min-width: 1000px) { .grade--4:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* a ressalva que fecha um bloco de cartões */ .secao__nota { max-width: var(--largura-leitura, 68ch); margin: 1.5rem 0 0; font-size: var(--f-apoio); color: var(--tinta-fraca); } .cartao > .cartao__num + h3:last-child { margin-bottom: 0; } /* o cartão "Todos os serviços" era vermelho no CSS antigo */ .servico--todos, .secao:not(.secao--escura) .servico--todos { background: var(--acao); color: var(--s0); border-color: var(--acao); } .servico--todos:hover, .secao:not(.secao--escura) .servico--todos:hover { background: var(--s-escura-2); } .servico--todos .link-seta::after { border-color: var(--acao-clara); } /* --------------------------------------------------------------------------- CORES LITERAIS QUE SOBRARAM DO CSS ANTIGO --------------------------------------------------------------------------- */ .artigo p { color: var(--tinta); } .contato-item__ico--zap { background: var(--marca-suave); } .contato-item__ico--zap svg { fill: var(--marca); } .secao--escura .split__texto p, .secao--escura .case p, .destaque p { color: var(--tinta-media); } /* os números das internas contam como os da home: borrão enquanto correm */ .numeros__num { will-change: filter, transform; } .numeros__num.contando { filter: blur(var(--borrao, 0px)); transform: translateY(var(--sobe, 0px)); } .numeros__num .un { font-size: .55em; font-weight: 500; color: var(--tinta-fraca); margin-left: .15em; letter-spacing: 0; } /* --------------------------------------------------------------------------- CHIPS DE ASSUNTO (perguntas frequentes) --------------------------------------------------------------------------- Eram links pequenos sublinhados em verde. Viram pílulas, como as do resto do site, e no celular correm de lado até a borda da tela. --------------------------------------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; } .chips li { margin: 0; } .chips a { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem 1rem; border: 1px solid var(--linha-forte); border-radius: var(--r-pill); background: var(--s0); color: var(--tinta); font-size: var(--f-apoio); font-weight: 500; text-decoration: none; transition: border-color .25s linear, background-color .25s linear, color .25s linear; } .chips a:hover, .chips a:focus-visible { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-escura); } @media (max-width: 719px) { .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); scroll-padding-inline: calc(var(--lateral) * 2); } .chips::-webkit-scrollbar { display: none; } .chips a { white-space: nowrap; flex: none; } } /* 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; }