/* Estilos do Atelier Gustavo Gomes que não cabem em widget de builder. Carregado pelo mu-plugin fluxxo-assets.php */ :root{ --gg-ink:#110F12; /* Cores da marca, medidas no arquivo da logo entregue em 15/09. Sao so duas: azul e laranja. O magenta e o limao do mockup sairam. */ --gg-azul:#2D7AB9; /* azul da logo */ --gg-laranja:#ED7424; /* laranja da logo */ /* As variacoes existem por contraste, nao por gosto: branco sobre o azul da logo da 4,6:1 e laranja sobre branco da 3,0:1. Faixa com texto branco usa o azul fechado (7,1:1). O laranja fechado ficou so pra TEXTO MIUDO sobre claro, que precisa de 4,5:1. Titulo grande usa o laranja da marca mesmo: foi escolha do Gustavo em 15/09, e em corpo de 46px a leitura aguenta. */ --gg-azul-fundo:#225C8B; --gg-azul-claro:#4E9AD8; /* azul so p/ texto sobre escuro (6,3:1) */ --gg-laranja-texto:#B4500F; --gg-suave:#6B6B6E; --gg-linha:#DCDBD8; --gg-papel2:#F1F0EE; } /* ---------- faixa rolante ---------- */ .gg-ticker{background:var(--gg-azul-fundo);color:#fff;overflow:hidden;padding:7px 0} .gg-ticker__track{ display:flex;gap:40px;width:max-content; animation:gg-slide 38s linear infinite; } .gg-ticker span{ font-family:'Chakra Petch',system-ui,-apple-system,sans-serif; font-size:clamp(13px,1.5vw,18px);font-weight:700;font-style:italic; letter-spacing:.04em;white-space:nowrap; } @keyframes gg-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- barra do rodapé ---------- */ .gg-strip{ background:var(--gg-azul-fundo);color:#fff; display:flex;justify-content:space-between;align-items:center;gap:24px; padding:7px clamp(20px,5vw,64px); font-family:'Chakra Petch',system-ui,sans-serif; } .gg-strip b{font-size:clamp(12px,1.5vw,19px);font-weight:700;font-style:italic;letter-spacing:.04em} .gg-strip span{font-size:12px} @media (prefers-reduced-motion:reduce){ .gg-ticker__track{animation:none} } @media (max-width:640px){ .gg-strip{flex-direction:column;align-items:flex-start;gap:4px;text-align:left} } /* ---------- ficha de dados do projeto ---------- */ .gg-dados{ display:flex;flex-wrap:wrap;gap:0; border-top:2px solid var(--gg-ink);margin:24px 0 32px; } .gg-dado{ flex:1 1 160px;padding:14px 20px 16px 0; border-bottom:1px solid var(--gg-linha); } .gg-dado span{ display:block;font-size:11px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--gg-suave);margin-bottom:4px; } .gg-dado b{font-size:16px;font-weight:700;letter-spacing:-.01em} /* ---------- grid de projetos ---------- */ .gg-dados + *{margin-top:0} /* ================= HOME ================= */ .gg-hero{position:relative} /* O Elementor poe position:relative no wrapper do widget, entao inset:0 no botao se resolvia contra um wrapper de altura zero e ele colava no topo. Centraliza pelo flex do proprio container, que e o que o Elementor ja usa. */ .gg-hero{justify-content:center;align-items:center} .gg-play{ position:static;width:84px;height:84px;border-radius:999px; border:2px solid rgba(255,255,255,.92);background:rgba(0,0,0,.15); display:grid;place-items:center;cursor:pointer; transition:transform .7s cubic-bezier(.32,.72,0,1),background .7s cubic-bezier(.32,.72,0,1); } .gg-play:hover{transform:scale(1.08);background:rgba(0,0,0,.35)} .gg-play svg{width:28px;height:28px;fill:#fff;margin-left:5px} /* ---------- disciplinas do 01 Since 2001 ---------- Desde 17/09 sao tres widgets de Editor de texto dentro de um container, e nao mais uma lista
    escrita a mao. O numero de cada item vem de contador CSS no container: acrescentar ou tirar item no Elementor renumera sozinho, ninguem precisa lembrar de corrigir "03" na unha. */ .gg-disc{counter-reset:d} .gg-disc > .elementor-widget{ counter-increment:d; border-top:1px solid var(--gg-ink); padding:24px 0 32px; display:grid;grid-template-columns:44px 1fr;gap:16px; } .gg-disc > .elementor-widget:last-child{border-bottom:1px solid var(--gg-ink)} /* O widget de Editor de texto cospe o h3 e o p como filhos DIRETOS, sem invólucro. Sem as duas regras abaixo o grid trata cada um como um item e o parágrafo cai dentro da coluna de 44px do número, saindo uma palavra por linha. O número ocupa a coluna 1 inteira e todo o resto vai pra coluna 2. */ .gg-disc > .elementor-widget::before{ content:"0" counter(d);font-size:13px;font-weight:700;letter-spacing:.1em; color:var(--gg-azul-fundo);padding-top:4px; grid-column:1;grid-row:1 / -1; } .gg-disc > .elementor-widget > *{grid-column:2;min-width:0} .gg-disc h3{font-size:clamp(17px,1.5vw,21px);font-weight:700;margin:0 0 6px} .gg-disc p{margin:0;font-size:15px;line-height:1.5;color:var(--gg-suave)} /* ---------- lema do Atelier ---------- Veio do portfolio (pagina 16) e substituiu o manifesto palavra a palavra. Tarja laranja inclinada com o texto em tinta, e a versao em ingles em azul italico embaixo, sem tarja. A inclinacao e de 12 graus, medida no arquivo original: a tarja desloca 9px em 42px de altura. So a tarja e inclinada, o texto fica em pe. Por isso ela e um pseudo- elemento atras, e nao um skew no elemento inteiro. Caixa alta vem do CSS e nao do HTML: leitor de tela soletra palavra escrita em CAIXA, e texto copiado da pagina volta legivel. */ .gg-lema{margin:0} .gg-lema__pt{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px} .gg-lema__tarja{ position:relative;display:inline-block; padding:6px 20px 8px; isolation:isolate; } .gg-lema__tarja::before{ content:"";position:absolute;inset:0;z-index:-1; background:var(--gg-laranja); transform:skewX(-12deg); transform-origin:left center; transition:transform .9s cubic-bezier(.32,.72,0,1); } .gg-lema__tarja b{ font-size:clamp(21px,3.3vw,42px);font-weight:700; text-transform:uppercase;letter-spacing:-.01em;line-height:1.06; color:var(--gg-ink); } .gg-lema__en{ margin:12px 0 0; font-size:clamp(16px,2.4vw,32px);font-weight:600;font-style:italic; text-transform:uppercase;letter-spacing:-.01em;line-height:1.1; color:var(--gg-azul); transition:opacity .9s cubic-bezier(.32,.72,0,1),transform .9s cubic-bezier(.32,.72,0,1); } /* Estado ESCONDIDO e o de excecao, nao o padrao. Se o observador nunca rodar (movimento reduzido, JS fora do ar), o lema aparece inteiro em vez de sumir. O contrario ja aconteceu neste site. */ .gg-rv:not(.on) .gg-lema__tarja::before{transform:skewX(-12deg) scaleX(0)} .gg-rv:not(.on) .gg-lema__en{opacity:0;transform:translateY(10px)} .gg-lema__tarja:nth-child(2)::before{transition-delay:.14s} .gg-lema__en{transition-delay:.3s} .gg-mapa{position:relative;max-width:1180px;margin:0 auto} .gg-mapa img{width:100%;display:block} .gg-pin{ position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;padding:0; border:0;background:none;cursor:pointer;display:grid;place-items:center; } .gg-pin i{ width:11px;height:11px;border-radius:999px;background:var(--gg-azul); transition:transform .7s cubic-bezier(.32,.72,0,1),background .7s cubic-bezier(.32,.72,0,1); } .gg-pin::before{ content:"";position:absolute;width:11px;height:11px;border-radius:999px; border:1px solid var(--gg-azul);animation:gg-ping 2.8s cubic-bezier(.32,.72,0,1) infinite; } @keyframes gg-ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3.4);opacity:0}} .gg-pin:hover i{transform:scale(1.6);background:var(--gg-laranja)} .gg-pin__tip{ position:absolute;bottom:22px;left:50%;transform:translate(-50%,6px); background:#fff;color:var(--gg-ink);padding:8px 12px;border-radius:3px; white-space:nowrap;text-align:left;opacity:0;pointer-events:none;z-index:5; transition:opacity .5s,transform .5s; } .gg-pin:hover .gg-pin__tip,.gg-pin:focus-visible .gg-pin__tip{opacity:1;transform:translate(-50%,0)} .gg-pin:hover,.gg-pin:focus-visible{z-index:6} .gg-pin__tip strong{display:block;font-size:14px;font-weight:700} .gg-pin__tip span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gg-suave)} @media (prefers-reduced-motion:reduce){ .gg-pin::before{animation:none;opacity:.4} .gg-tag .w{color:var(--gg-ink)} } /* ---------- ficha do pico ---------- */ .gg-pico{ display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(24px,4vw,64px); align-items:start;max-width:1180px;margin:56px auto 64px;color:#fff; } .gg-pico__conta{ font-size:12px;font-weight:700;letter-spacing:.2em; color:var(--gg-azul-claro);margin:0 0 12px; } .gg-pico__nome{ font-size:clamp(28px,3.6vw,50px);font-weight:700;line-height:1.03; letter-spacing:-.03em;margin:0;color:#fff; } .gg-pico__onde{ font-size:13px;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.55);margin:12px 0 0; } .gg-pico__nav{display:flex;gap:8px;margin-top:32px} .gg-pico__nav button{ width:38px;height:38px;border-radius:999px;cursor:pointer; border:1px solid rgba(255,255,255,.16);background:none;color:#fff; display:grid;place-items:center; /* padding:0 e obrigatorio. O botao herdava 8px/16px de outro lugar, e com box-sizing:border-box isso deixava a caixa de conteudo com 4px de largura num botao de 38: a seta ficava 17px da borda esquerda e 5 da direita. Parecia problema do desenho do icone e era padding. */ padding:0; transition:background .7s cubic-bezier(.32,.72,0,1),color .7s cubic-bezier(.32,.72,0,1); } .gg-pico__nav button:hover{background:var(--gg-laranja);color:var(--gg-ink);border-color:var(--gg-laranja)} .gg-pico__nav svg{width:16px;height:16px;fill:currentColor} /* galeria justificada: altura comum, largura proporcional (o flex-grow de cada peca vem do JS, que mede a foto no load). Sem corte e sem barra. */ .gg-pico__media{display:flex;gap:16px;align-items:stretch;min-height:120px} .gg-pico__media figure{margin:0;overflow:hidden;background:rgba(255,255,255,.05)} .gg-pico__media > *{min-width:0} .gg-pico__media img{width:100%;height:100%;object-fit:cover;display:block} .gg-pico__media > *{min-width:0;flex:0 0 auto} .gg-pico__blank{ aspect-ratio:16/7;display:flex;align-items:flex-end;padding:24px;color:var(--gg-ink); } .gg-pico__blank b{font-size:clamp(22px,3vw,40px);font-weight:700;line-height:.95;letter-spacing:-.03em} .gg-pico__blank--0{background:var(--gg-azul)} .gg-pico__blank--1{background:var(--gg-laranja)} .gg-pico__blank--2{background:var(--gg-azul-fundo);color:#fff} .gg-pico__blank--3{background:var(--gg-ink);color:#fff} .gg-pico__blank--4{background:#fff} .gg-pico.is-troca .gg-pico__media, .gg-pico.is-troca .gg-pico__head > *{opacity:0;transform:translateY(10px)} .gg-pico__media,.gg-pico__head > *{ transition:opacity .45s cubic-bezier(.32,.72,0,1),transform .45s cubic-bezier(.32,.72,0,1); } /* ---------- lista de lugares ---------- */ .gg-places{ display:grid;grid-template-columns:repeat(4,1fr);gap:32px; max-width:1180px;margin:0 auto; } .gg-place h3{ font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff; padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.16);margin:0 0 12px; } .gg-place ul{list-style:none;margin:0;padding:0} .gg-place li button{ border:0;background:none;padding:0;cursor:pointer;font:inherit; font-size:14px;line-height:1.7;letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.62);text-align:left; transition:color .7s cubic-bezier(.32,.72,0,1); } .gg-place li button:hover, .gg-place li button[aria-current="true"]{color:var(--gg-laranja)} .gg-pin[aria-current="true"] i{transform:scale(1.6);background:var(--gg-laranja)} .gg-pin[aria-current="true"]::before{border-color:var(--gg-laranja)} @media (max-width:1080px){ .gg-pico{grid-template-columns:1fr;gap:32px} .gg-places{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .gg-pico__media{flex-direction:column;height:auto} .gg-pico__media > *{flex:0 0 auto;width:100%!important} /* 4/3 e so o espaco RESERVADO ate a foto carregar: sem altura nenhuma a imagem nunca entra na tela, o carregamento preguicoso nunca dispara e ela fica em branco pra sempre. Assim que carrega, o JS troca pela proporcao real, entao nada e cortado. */ .gg-pico__media img{height:auto;aspect-ratio:4/3;object-fit:cover} .gg-pico__blank{aspect-ratio:16/9} .gg-places{grid-template-columns:1fr} } /* ---------- abre-seção com número gigante ---------- */ .gg-secnum{ display:flex;align-items:baseline;gap:24px; border-top:2px solid currentColor;padding-top:16px;margin:0 0 56px; } .gg-secnum h1, .gg-secnum h2{ font-size:clamp(22px,2.6vw,34px);font-weight:700; text-transform:uppercase;letter-spacing:.02em;margin:0; } .gg-secnum p{margin:0 0 0 auto;max-width:34ch;font-size:14px;text-align:right;color:var(--gg-suave)} .gg-secnum--escuro{color:#fff;border-top-color:rgba(255,255,255,.16)} .gg-secnum--escuro h1, .gg-secnum--escuro h2{color:#fff} .gg-secnum--escuro p{color:rgba(255,255,255,.5)} /* ---------- grid assimétrico de projetos ---------- */ .gg-shots{display:grid;gap:24px} .gg-par{display:grid;grid-template-columns:1.32fr 1fr;gap:24px} .gg-shot{position:relative;display:block;overflow:hidden;text-decoration:none;background:var(--gg-papel2)} .gg-shot img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.4s cubic-bezier(.32,.72,0,1)} .gg-shot:hover img{transform:scale(1.045)} .gg-shot--banner img,.gg-shot--offset img{aspect-ratio:16/3.4} .gg-shot--par img{aspect-ratio:4/3.4} .gg-shot--offset{width:82%;margin-left:auto} .gg-shot::after{ content:"";position:absolute;inset:auto 0 0 0;height:45%; background:linear-gradient(to top,rgba(17,15,18,.72),rgba(17,15,18,0)); opacity:0;transition:opacity .7s cubic-bezier(.32,.72,0,1);pointer-events:none; } .gg-shot:hover::after,.gg-shot:focus-within::after{opacity:1} .gg-shot__cap{ position:absolute;left:24px;right:24px;bottom:24px;color:#fff;z-index:2; opacity:0;transform:translateY(14px); transition:opacity .7s cubic-bezier(.32,.72,0,1),transform .7s cubic-bezier(.32,.72,0,1); } .gg-shot:hover .gg-shot__cap,.gg-shot:focus-within .gg-shot__cap{opacity:1;transform:translateY(0)} .gg-shot__cap strong{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em} .gg-shot__cap span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.82} .gg-shot__vazio{display:flex;align-items:flex-end;padding:24px;color:var(--gg-ink)} .gg-shot--banner .gg-shot__vazio,.gg-shot--offset .gg-shot__vazio{aspect-ratio:16/3.4} .gg-shot--par .gg-shot__vazio{aspect-ratio:4/3.4} .gg-shot__vazio b{font-size:clamp(20px,2.6vw,34px);font-weight:700;line-height:.95;letter-spacing:-.03em} .gg-shot__vazio--0{background:var(--gg-azul)} .gg-shot__vazio--1{background:var(--gg-laranja)} .gg-shot__vazio--2{background:var(--gg-azul-fundo);color:#fff} .gg-shot__vazio--3{background:var(--gg-ink);color:#fff} .gg-shot__vazio--4{background:var(--gg-papel2)} /* ---------- números do World ---------- */ @media (max-width:1080px){ .gg-par{grid-template-columns:1fr} .gg-shot--offset{width:100%} .gg-secnum p{display:none} } /* ---------- grão: quebra a chapadura sem gradiente ---------- */ body::after{ content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- entrada por rolagem ---------- */ .gg-rv{opacity:0;transform:translateY(48px);filter:blur(6px)} .gg-rv.on{ opacity:1;transform:none;filter:none; transition:opacity .85s cubic-bezier(.32,.72,0,1), transform .85s cubic-bezier(.32,.72,0,1), filter .85s cubic-bezier(.32,.72,0,1); } @media (prefers-reduced-motion:reduce){ .gg-rv{opacity:1;transform:none;filter:none} body::after{display:none} } /* Container do Elementor 4 resolve altura por variavel: .e-con{min-height:var(--min-height)}. A folha dele carrega depois da nossa e tem a mesma especificidade, entao setar min-height direto perde no desempate. Setando a variavel, funciona. dvh em vez de vh pra nao dar salto na barra do Safari do iPhone. */ .gg-hero{--min-height:64dvh;min-height:64dvh} /* foco visível no play, que é botão de verdade */ .gg-play:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:4px} /* ================= CELULAR ================= */ @media (max-width:767px){ /* O hero é um mural panorâmico. Com altura de viewport em tela retrato, o cover recorta pra um filete de concreto e some com a obra. Em celular vira faixa de proporção fixa, mostrando o mural inteiro. */ .gg-hero{ --min-height:0;min-height:0; aspect-ratio:16/10; background-size:cover;background-position:center center; } .gg-play{width:64px;height:64px} .gg-play svg{width:22px;height:22px} /* Container "boxed" do Elementor põe os filhos dentro de .e-con-inner. Regra de flex no container não pega nada: tem que mirar o wrapper. */ .elementor-element-ggtopo > .e-con-inner{ gap:12px!important;flex-wrap:nowrap!important; justify-content:space-between!important;align-items:center!important; } .elementor-element-ggtopo{ padding-left:16px!important;padding-right:16px!important; } .elementor-element-ggmarca .elementor-heading-title{font-size:15px!important} /* marca + hambúrguer + botão não cabem em 390px. O botão sai: o menu já tem Contato, e a âncora fica a um toque. */ .elementor-element-ggbtn{display:none!important} .elementor-element-ggnav{flex:0 0 auto} .elementor-element-ggnav .elementor-widget-container{display:flex;align-items:center} /* faixa rolante não precisa de texto gigante no celular */ .gg-ticker span{font-size:12px} /* abre-seção: número e título um sobre o outro cansam menos */ .gg-secnum{gap:12px;margin-bottom:32px} /* statement: a régua vertical vira horizontal */ .elementor-element-ggstmt2{ border-left:0!important;border-top:2px solid #110F12!important; padding-left:0!important;padding-top:16px!important; } /* ficha do pico e grid já empilham, só falta respiro */ .gg-pico{margin:32px auto 40px} .gg-disc > .elementor-widget{grid-template-columns:32px 1fr;gap:12px;padding:16px 0 24px} .gg-shots{gap:16px} .gg-par{gap:16px} } /* tablet: o par assimétrico fica apertado antes de empilhar */ @media (min-width:768px) and (max-width:1023px){ .gg-par{grid-template-columns:1fr 1fr} .gg-shot--offset{width:92%} } /* ---------- widget não pode encolher abaixo do conteúdo ---------- Container do Elementor 4 é flex em coluna. Item de flex encolhe no eixo principal por padrão, então widget com filho de aspect-ratio (o grid de projetos, a ficha do pico) era medido menor que o conteúdo e vazava por cima da seção de baixo. flex-shrink:0 resolve na raiz. */ /* flex-shrink:0 foi removido daqui: impedia o widget de encolher e empurrava a coluna das disciplinas pra fora da tela no desktop. */ /* ---------- widget de shortcode com altura fixa ---------- O Elementor renderiza o widget de shortcode com altura travada (32px aqui), e o conteúdo vazava por cima da seção seguinte. Altura tem que ser do conteúdo. */ .e-con > .elementor-widget, .e-con-inner > .elementor-widget, .elementor-widget-shortcode .elementor-shortcode{height:auto!important} /* ---------- no celular o par vira bloco, não grid ---------- Em grid de uma coluna, a altura do widget do Elementor era medida com o layout de desktop (uma linha de duas colunas) e a segunda peça vazava por cima da seção seguinte. Fluxo de bloco tem altura sempre correta. */ @media (max-width:767px){ .gg-par{display:block} .gg-par > .gg-shot + .gg-shot{margin-top:16px} .gg-shots{display:block} .gg-shots > * + *{margin-top:16px} } /* ---------- container de projetos em fluxo de bloco no celular ---------- O .e-con-inner do Elementor é flex em coluna e mede o widget do grid mais curto que o conteúdo: sobrava 190px vazando por cima da seção de baixo. Fluxo de bloco mede o filho corretamente e o container cresce junto. */ @media (max-width:767px){ .elementor-element-ggproj > .e-con-inner{display:block} .elementor-element-ggproj > .e-con-inner > .elementor-widget + .elementor-widget{margin-top:24px} } /* ---------- colunas do 01 Since 2001 ---------- Sem largura explicita a citacao empurra a lista pra fora da tela. min-width:0 e obrigatorio: item de flex nao encolhe abaixo do conteudo sem ele. */ @media (min-width:768px){ .elementor-element-ggsince > .e-con-inner{align-items:flex-start} .elementor-element-ggsince1{flex:1 1 56%;min-width:0} .elementor-element-ggsince2{flex:1 1 40%;min-width:0} .elementor-element-ggstmt1, .elementor-element-ggstmt2{min-width:0} .elementor-element-ggman > .e-con-inner > .elementor-widget{min-width:0} } /* nada na pagina pode empurrar rolagem lateral */ html,body{overflow-x:hidden} .e-con,.e-con-inner{max-width:100%} /* ---------- composição do statement ---------- Errado antes: space-between espalhou os tres elementos e virou ilha boiando no branco. No mockup isso e UM objeto tipografico denso, com o laranja colado na regua e o spray encostado no conjunto, nao decorando o canto. */ @media (min-width:768px){ /* justify-content e align-items NAO vem daqui: o Elementor aplica `justify-content: var(--justify-content)` no .e-con-inner e a variavel vem da configuracao do container, em folha que carrega depois desta. Regra direta com a mesma especificidade perde calada. Isso mora em flex_justify_content / flex_align_items no _elementor_data. */ .elementor-element-ggstmt > .e-con-inner{gap:0!important} /* o par de tipos anda junto, sem folga */ .elementor-element-ggstmt1{margin:0 20px 0 0;min-width:0} .elementor-element-ggstmt2{margin:0;min-width:0} /* escala: este e o segundo momento mais forte da pagina, depois do hero */ .elementor-element-ggstmt1 .elementor-heading-title{ font-size:clamp(24px,2.7vw,36px)!important;line-height:1.05!important; } .elementor-element-ggstmt2 .elementor-heading-title{ font-size:clamp(36px,5.2vw,70px)!important;line-height:.98!important; letter-spacing:-.035em!important; } .elementor-element-ggstmt2{padding-left:24px!important} /* o spray encosta no conjunto e sobe um pouco, como no desenho dele */ /* o spray acompanha o bloco sem encostar na letra: folga de 40px e altura limitada a linha de baixo, senao ele sobe e cobre o "Creative" */ .elementor-element-ggstmt3{ margin:0 0 0 48px;align-self:center; } /* O adesivo desenhado a mao (1178x1303) e bem mais largo em relacao a altura que a lata chapada de antes (proporcao 0,90 contra 0,63). Na mesma largura ele ficaria 100px mais baixo e perderia presenca ao lado das tres linhas do "Creative visual arts". Por isso a largura sobe: o que importa aqui e a altura bater com o bloco de texto. A sombra propria do adesivo ja separa ele do fundo branco, entao nao precisa de contorno nem de caixa. */ .elementor-element-ggstmt3 img{ width:clamp(150px,18vw,290px)!important;max-width:none!important; transform:none; } } @media (max-width:767px){ .elementor-element-ggstmt2 .elementor-heading-title{font-size:clamp(36px,11vw,56px)!important} .elementor-element-ggstmt1 .elementor-heading-title{font-size:clamp(24px,7vw,34px)!important} /* 120px era da lata antiga, que era estreita e alta. O adesivo e mais largo que alto, entao na mesma largura encolhia demais. */ .elementor-element-ggstmt3 img{width:158px!important} } /* ---------- tablet em retrato ---------- Abaixo de 1024 a tela ainda é mais alta que larga, e o mural panorâmico com altura de viewport vira um recorte de concreto. Mesma solução do celular: faixa de proporção fixa, que mostra a obra inteira. */ @media (max-width:1023px){ .gg-hero{--min-height:0;min-height:0;aspect-ratio:16/9} } /* as duas colunas do 01 ficam em 379 e 270px no tablet: apertado demais. Empilhar dá largura de leitura confortável pros dois blocos. */ @media (max-width:1023px){ .elementor-element-ggsince > .e-con-inner{flex-direction:column;gap:40px} .elementor-element-ggsince1, .elementor-element-ggsince2{flex:1 1 auto!important;width:100%} } /* ================= LOJA ================= O WooCommerce chega com roxo, bordas arredondadas e tipografia do tema. Aqui ele passa a falar a mesma língua do resto do site. */ /* ---------- botões ---------- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce .wp-element-button{ background:var(--gg-laranja);color:var(--gg-ink); font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700; font-size:14px;letter-spacing:.04em;text-transform:none; border:0;border-radius:3px;padding:12px 20px; transition:background .7s cubic-bezier(.32,.72,0,1),transform .7s cubic-bezier(.32,.72,0,1); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{ background:var(--gg-ink);color:#fff; } .woocommerce a.button:active, .woocommerce button.button:active{transform:scale(.98)} .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible{outline:3px solid var(--gg-azul);outline-offset:3px} /* ---------- preço ---------- */ .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price{ color:var(--gg-ink);font-family:'Chakra Petch',system-ui,sans-serif; font-weight:700;font-size:22px;letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .woocommerce ul.products li.product .price{font-size:16px;font-weight:700} .woocommerce div.product p.price del, .woocommerce ul.products li.product .price del{color:var(--gg-suave);font-weight:400} .woocommerce div.product p.price ins{text-decoration:none;color:var(--gg-laranja-texto)} /* ---------- vitrine ---------- */ .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;font-size:17px; letter-spacing:-.01em;color:var(--gg-ink);padding:12px 0 4px; } .woocommerce ul.products li.product a img{margin-bottom:0;border-radius:2px} .woocommerce ul.products li.product{text-align:left} .woocommerce ul.products li.product .button{margin-top:12px;display:inline-block} .woocommerce span.onsale{ background:var(--gg-laranja);color:var(--gg-ink);border-radius:2px; font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;font-size:12px; letter-spacing:.1em;text-transform:uppercase;min-height:0;min-width:0; padding:4px 10px;line-height:1.4; } /* ---------- quantidade ---------- */ .woocommerce .quantity .qty{ border:2px solid var(--gg-ink);border-radius:3px;padding:10px 8px; font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700; font-variant-numeric:tabular-nums; } /* ---------- migalhas ---------- */ .woocommerce .woocommerce-breadcrumb{ font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--gg-suave);margin-bottom:24px; } .woocommerce .woocommerce-breadcrumb a{color:var(--gg-suave);text-decoration:none} .woocommerce .woocommerce-breadcrumb a:hover{color:var(--gg-azul-fundo)} /* ---------- abas ---------- */ .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 24px} .woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom-color:var(--gg-linha)} .woocommerce div.product .woocommerce-tabs ul.tabs li{ background:none;border:0;border-radius:0;margin:0 24px 0 0;padding:0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-family:'Chakra Petch',system-ui,sans-serif;font-weight:600;font-size:13px; letter-spacing:.12em;text-transform:uppercase;color:var(--gg-suave); padding:10px 0;border-bottom:2px solid transparent; transition:color .7s cubic-bezier(.32,.72,0,1),border-color .7s cubic-bezier(.32,.72,0,1); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{ color:var(--gg-ink);border-bottom-color:var(--gg-azul); } .woocommerce div.product .woocommerce-tabs .panel h2{ font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em; } /* ---------- meta e avisos ---------- */ .woocommerce div.product .product_meta{ font-size:13px;color:var(--gg-suave);border-top:1px solid var(--gg-linha); padding-top:16px;margin-top:24px; } .woocommerce div.product .product_meta a{color:var(--gg-ink);text-decoration:none} .woocommerce div.product .product_meta a:hover{color:var(--gg-azul-fundo)} .woocommerce-message,.woocommerce-info,.woocommerce-error{ border-top-color:var(--gg-azul);font-family:'Chakra Petch',system-ui,sans-serif; } .woocommerce-message::before,.woocommerce-info::before{color:var(--gg-azul-fundo)} /* ---------- 404 ---------- */ .gg-404{max-width:680px} .gg-404__num{ font-size:clamp(72px,14vw,160px);font-weight:700; line-height:.8;letter-spacing:-.05em;color:var(--gg-azul);margin:0 0 16px; } .gg-404 h1{ font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.03em; line-height:1.04;margin:0 0 16px; } .gg-404__txt{font-size:17px;line-height:1.55;color:var(--gg-suave);margin:0 0 40px;max-width:52ch} .gg-404__links{display:flex;flex-wrap:wrap;gap:24px;align-items:center} .gg-404__links a{ font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--gg-ink); text-decoration:none;border-bottom:2px solid var(--gg-linha);padding-bottom:2px; transition:border-color .7s cubic-bezier(.32,.72,0,1),color .7s cubic-bezier(.32,.72,0,1); } .gg-404__links a:hover{border-bottom-color:var(--gg-azul-fundo);color:var(--gg-azul-fundo)} .gg-404__cta{ background:var(--gg-laranja);border:0!important;border-radius:3px; padding:12px 20px!important;font-weight:700; } .gg-404__cta:hover{background:var(--gg-ink);color:#fff!important} /* ---------- carrinho no cabeçalho ---------- */ .elementor-menu-cart__toggle .elementor-button{background:transparent!important;padding:6px!important} .elementor-menu-cart__toggle .elementor-button-icon{font-size:22px} /* ---------- dados de contato ---------- */ /* ---------- formulário no fundo escuro ---------- */ .elementor-element-ggform .elementor-field-group > label{ font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.6);margin-bottom:8px; } .elementor-element-ggform .elementor-field-textual{ background:#fff;border:0;border-radius:3px;padding:14px 16px; font-family:'Chakra Petch',system-ui,sans-serif;font-size:16px;color:var(--gg-ink); } .elementor-element-ggform .elementor-field-textual:focus{ outline:3px solid var(--gg-laranja);outline-offset:2px; } .elementor-element-ggform .elementor-button{border-radius:3px;padding:14px 26px} .elementor-element-ggform .elementor-button:hover{background:#fff!important} .elementor-element-ggform .elementor-message{font-family:'Chakra Petch',system-ui,sans-serif} .elementor-element-ggform .elementor-message.elementor-message-success{color:var(--gg-laranja)} /* ---------- hero: faixa deliberada ---------- A FOTO ja vem cortada. Foi recortada do PDF do mockup, onde o mural ja aparecia cortado pra caber numa faixa do layout, e as cabecas das quatro faces nao existem em pixel nenhum. mural-1 e a mesma parede, cortada ainda mais. Proporcao nenhuma conserta isso. Entao o corte vira escolha: faixa larga, enquadrada na altura dos olhos, que le como recorte de direcao e nao como foto que nao coube. TROCAR por aspect-ratio 1778/716 quando a foto original do Gustavo chegar. */ @media (min-width:1024px){ /* 17/09: o Gustavo pediu o topo maior, "uns 800px". A foto e 1778x716. Em tela de 1440 ela cobre 580px na escala natural, entao 800 exige ampliar 12% e cortar mais das laterais. Aceitavel, mas e o limite: mais que isso comeca a borrar. A foto original sem corte resolveria os dois problemas de uma vez. O min() segura em notebook baixo: 800px numa tela de 768 de altura cobriria a pagina inteira e ninguem veria que tem site embaixo. */ .gg-hero{ --min-height:min(800px,82dvh); min-height:min(800px,82dvh); aspect-ratio:auto;max-height:none; background-size:cover;background-position:center 38%; } } @media (min-width:768px) and (max-width:1023px){ .gg-hero{aspect-ratio:16/7;background-position:center 38%} } @media (max-width:767px){ .gg-hero{aspect-ratio:16/9;background-position:center 38%} } /* ---------- contato por WhatsApp ---------- */ .gg-wa__topo{ /* era laranja; sobre o azul do contato o contraste ficava ruim de ler */ font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:#fff;margin:0 0 24px; } .gg-wa__botoes{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px} .gg-wa__btn{ display:inline-block;padding:14px 22px;border-radius:3px;text-decoration:none; font-family:'Chakra Petch',system-ui,sans-serif;font-size:15px;font-weight:600; letter-spacing:.01em;color:#fff;border:1px solid rgba(255,255,255,.28); transition:background .7s cubic-bezier(.32,.72,0,1),color .7s cubic-bezier(.32,.72,0,1), border-color .7s cubic-bezier(.32,.72,0,1),transform .7s cubic-bezier(.32,.72,0,1); } .gg-wa__btn:hover{background:#fff;color:var(--gg-ink);border-color:#fff} .gg-wa__btn:active{transform:scale(.98)} .gg-wa__btn:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:3px} .gg-wa__btn--principal{ background:var(--gg-laranja);color:var(--gg-ink);border-color:var(--gg-laranja); font-weight:700; } .gg-wa__btn--principal:hover{background:#fff;border-color:#fff} .gg-wa__ou{font-size:14px;color:rgba(255,255,255,.55);margin:0} .gg-wa__ou a{color:rgba(255,255,255,.85);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)} .gg-wa__ou a:hover{color:var(--gg-laranja);border-bottom-color:var(--gg-laranja)} @media (max-width:767px){ .gg-wa__botoes{flex-direction:column;align-items:stretch} .gg-wa__btn{text-align:center} } /* ---------- galeria do projeto ---------- As fotos do portfolio vem em proporcoes muito diferentes (parede de 2,5:1, escultura de 0,56:1). Grid com altura fixa cortaria as duas. Aqui cada foto entra na altura que tem, em uma ou duas colunas conforme o formato. */ .gg-galeria{ display:grid;grid-template-columns:repeat(2,1fr); gap:24px;margin:48px 0 0; } .gg-galeria__item{margin:0} .gg-galeria__item img{width:100%;height:auto;display:block;border-radius:2px} .gg-galeria__item figcaption{ font-size:13px;line-height:1.5;color:var(--gg-suave);margin-top:10px; } /* foto sozinha ocupa a largura toda, senao fica uma coluna orfa */ .gg-galeria__item:only-child{grid-column:1 / -1} /* ---------- recortes de imprensa ---------- Prova de terceiro, nao obra: entra menor, depois das fotos, com borda porque quase todo recorte tem fundo branco e sumiria no papel da pagina. */ .gg-imprensa{margin:56px 0 0;border-top:1px solid var(--gg-linha);padding-top:32px} .gg-imprensa h2{ font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--gg-suave);margin:0 0 20px; } .gg-imprensa__lista{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start} .gg-imprensa__item{margin:0} .gg-imprensa__item img{ width:100%;height:auto;display:block; border:1px solid var(--gg-linha);border-radius:2px; } @media (max-width:767px){ .gg-galeria{grid-template-columns:1fr;gap:16px} .gg-imprensa__lista{grid-template-columns:1fr 1fr;gap:12px} } /* ---------- capa da pagina de projeto ---------- As capas vem em proporcao muito diferente: o paredao do MPF e 2,3:1, a escultura do CIEE e 0,56:1. Faixa fixa recortava a escultura no meio e ninguem via que ela tem vinte metros. Aqui a foto mantem a propria proporcao, com teto de altura: a larga preenche a largura, a alta para no teto e fica centrada no campo escuro, como parede de galeria. */ .gg-projcapa{background:var(--gg-ink)} .gg-projcapa .elementor-widget-container, .gg-projcapa .elementor-widget-theme-post-featured-image{display:flex;justify-content:center} .gg-projcapa img{ display:block;width:auto;max-width:100%; max-height:72dvh;height:auto;object-fit:contain; } @media (max-width:767px){ /* A obra aparece INTEIRA, como no computador. A versao anterior usava `cover` com min-height de 38dvh pra capa nao ficar uma tira fina. O comentario dizia que isso "corta um pouco das laterais": medi em 03/10 e eram 53% da largura. No mural da 11a Aldeia do SESC, de cinco rostos sobravam tres. E ainda saia borrada, porque o navegador escolhe o arquivo pela largura (768px) e o `cover` esticava ele pra cobrir uma caixa muito mais alta. Agora o telefone faz o mesmo que o computador: `contain` sobre o campo escuro, que e a "parede de galeria" do projeto. O bloco continua alto pelo min-height, entao a capa segue mandando na primeira dobra, mas quem perde altura e o fundo preto, nao a pintura. */ .gg-projcapa img{ width:100%;max-width:100%; max-height:62dvh;height:auto; object-fit:contain;object-position:center; } /* O campo escuro so fica bonito se a foto ficar NO MEIO dele. O container e do Elementor 4, que manda no alinhamento por variavel: `align-items` direto perde calado, a variavel pega. */ .gg-projcapa{min-height:34dvh;--align-items:center;--justify-content:center} } /* ---------- parede de marcas ---------- Trinta e sete logos. Em faixa unica eles ficariam do tamanho de um selo; em grid dao pra ler, e o proprio numero de linhas ja e o argumento. Altura travada e largura livre porque as marcas tem proporcoes muito diferentes: travar a largura deixaria a Unylaser gigante e a Art Battle minuscula. */ .gg-marcas{max-width:1180px;margin:0 auto} /* Flex e nao grid de propósito: 37 nao divide por 6, e em grid a ultima linha ficava com uma marca sozinha encostada na esquerda, parecendo erro. Em flex com justify-content:center a sobra centraliza. */ .gg-marcas__grid{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:clamp(22px,3vw,46px) clamp(16px,2.5vw,32px); } .gg-marca{ flex:0 0 calc((100% - 5 * clamp(16px,2.5vw,32px)) / 6); display:flex;align-items:center;justify-content:center;min-width:0; } .gg-marca img{ max-width:100%;max-height:46px;width:auto;height:auto;display:block; opacity:.78; transition:opacity .7s cubic-bezier(.32,.72,0,1); } .gg-marca:hover img{opacity:1} .gg-marcas__conta{ margin:clamp(32px,4vw,56px) 0 0;padding-top:20px; border-top:1px solid var(--gg-linha); font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--gg-suave); } .gg-marcas__conta b{color:var(--gg-ink);font-size:14px;letter-spacing:.1em} @media (max-width:1023px){ .gg-marca{flex:0 0 calc((100% - 3 * 24px) / 4)} .gg-marca img{max-height:38px} } @media (max-width:600px){ .gg-marcas__grid{gap:26px 16px} .gg-marca{flex:0 0 calc((100% - 2 * 16px) / 3)} .gg-marca img{max-height:32px} } /* ---------- blocos que estavam encostados na esquerda ---------- Pedido do Gustavo em 15/09. O container e de 1280, mas o conteudo do statement e do manifesto soma bem menos que isso e o resto virava um vazio de quase 400px so do lado direito, que lia como erro de montagem e nao como respiro. Centralizar so a partir de 768: no celular eles empilham e texto centralizado fica pior de ler. */ /* (a centralizacao do ggman tambem mora na configuracao do container, pelo mesmo motivo do ggstmt) */ /* A secao da bio e diferente: a foto sangra na borda esquerda de proposito, entao centralizar o par so criaria uma folga torta do lado de la. Aqui o que sobrava era a coluna do FAQ nao chegar na borda direita. Ela passa a ocupar o que resta, e a foto acompanha a altura da secao em vez de parar no meio e deixar um degrau branco. */ @media (min-width:768px){ .elementor-element-ggbio > .e-con-inner{align-items:stretch} /* o Gustavo pediu a divisao exatamente no meio: metade foto, metade perguntas */ .elementor-element-ggbioi{flex:0 0 50%;min-width:0;align-self:stretch} .elementor-element-ggbioi .elementor-widget-container, .elementor-element-ggbioi figure, .elementor-element-ggbioi a{height:100%} .elementor-element-ggbioi img{width:100%;height:100%;object-fit:cover;display:block} .elementor-element-ggbiof{flex:1 1 auto;min-width:0} } /* ---------- botao de "ver todos" ---------- O grid da home mostra cinco dos onze projetos. Sem saida dali, os outros seis so existem pra quem adivinhar a URL do arquivo. */ .gg-maisproj{margin:40px 0 0;display:flex;justify-content:center} .gg-maisproj a{ display:inline-flex;align-items:center;gap:12px; font-family:'Chakra Petch',system-ui,sans-serif; font-size:15px;font-weight:700;letter-spacing:.02em; color:var(--gg-ink);text-decoration:none; padding:14px 26px;border:2px solid var(--gg-ink);border-radius:3px; transition:background .7s cubic-bezier(.32,.72,0,1),color .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1); } .gg-maisproj a::after{ content:"";width:18px;height:2px;background:currentColor; transition:width .7s cubic-bezier(.32,.72,0,1); } .gg-maisproj a:hover{background:var(--gg-ink);color:#fff} .gg-maisproj a:hover::after{width:28px} .gg-maisproj a:active{transform:scale(.98)} .gg-maisproj a:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:3px} .gg-maisproj b{font-weight:700} .gg-maisproj span{ font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase; opacity:.55; } /* No celular a linha mais longa do lema ("assim como na vida.") encosta na borda: sao 19 caracteres em caixa alta mais o respiro da tarja. Tipo e respiro menores, senao a tarja estoura a tela. */ @media (max-width:600px){ .gg-lema__tarja{padding:5px 14px 7px} .gg-lema__tarja b{font-size:clamp(21px,5.6vw,30px)} .gg-lema__pt{gap:8px} .gg-lema__en{font-size:clamp(17px,4.4vw,24px);margin-top:12px} } /* ---------- subdivisoes do WORLD ---------- A secao passou a cobrir tres assuntos (viagens, coletivos e o livro), entao precisa de rotulo interno. Mesma familia visual dos titulos de coluna da lista de lugares: miudo, em caixa, bem espacado, com regua em cima. */ /* Os rotulos e o bloco de coletivos viraram widgets nativos em 17/09. A tipografia, a regua e o respiro moram na configuracao de cada um agora. O `margin:0 auto` que estava aqui centralizava o widget inteiro, e era por isso que "COLETIVOS" aparecia no meio da tela. */ /* ================================================================== PAGINAS SEM ELEMENTOR Carrinho, finalizar compra, minha conta e as paginas de texto caem no template do Hello Elementor, que nao tem largura maxima nem respiro: o titulo encostava na faixa rolante e a linha de leitura ia de ponta a ponta. A classe .gg-simples vem do mu-plugin. ================================================================== */ .gg-simples main.site-main{ max-width:1280px;margin:0 auto; padding:clamp(48px,6vw,80px) 20px clamp(72px,8vw,110px); } .gg-simples .page-header{margin:0 0 clamp(28px,4vw,44px)} .gg-simples .entry-title{ font-family:'Chakra Petch',system-ui,sans-serif; font-size:clamp(30px,4.4vw,52px);font-weight:700;letter-spacing:-.03em; line-height:1.04;color:var(--gg-ink);margin:0; } /* texto corrido das paginas legais: medida de leitura, nao largura da tela */ .gg-simples .page-content > h2, .gg-simples .page-content > h3, .gg-simples .page-content > p, .gg-simples .page-content > ul, .gg-simples .page-content > ol{max-width:68ch} .gg-simples .page-content h2{ font-size:clamp(20px,2.4vw,27px);font-weight:700;letter-spacing:-.02em; margin:44px 0 12px; } .gg-simples .page-content h3{ font-size:clamp(17px,2vw,20px);font-weight:600;margin:32px 0 8px; } .gg-simples .page-content p, .gg-simples .page-content li{font-size:16px;line-height:1.65;color:#3A3A3E} .gg-simples .page-content li{margin-bottom:6px} .gg-simples .page-content a{color:var(--gg-azul-fundo);text-decoration:underline;text-underline-offset:3px} .gg-simples .page-content a:hover{color:var(--gg-ink)} /* ================================================================== CARRINHO E CHECKOUT EM BLOCOS Estas duas paginas NAO usam a marcacao classica do WooCommerce, e sim os blocos (wc-block-*). Todo o CSS de loja que ja existe acima nao alcanca nada aqui: sao outros nomes de classe. Descobri isso olhando o conteudo das paginas, que comeca em wp:woocommerce/cart. ================================================================== */ /* ---------- tipografia comum dos blocos ---------- */ .wc-block-cart,.wc-block-checkout{ font-family:'Chakra Petch',system-ui,sans-serif;color:var(--gg-ink); } .wc-block-cart-items__header, .wc-block-cart__totals-title{ font-family:'Chakra Petch',system-ui,sans-serif!important; font-size:12px!important;font-weight:700!important; letter-spacing:.18em!important;text-transform:uppercase!important; color:var(--gg-suave)!important; } .wc-block-components-checkout-step__title{ font-family:'Chakra Petch',system-ui,sans-serif!important; font-size:13px!important;font-weight:700!important; letter-spacing:.14em!important;text-transform:uppercase!important; color:var(--gg-ink)!important; } .wc-block-components-product-name{ font-weight:700;font-size:17px;letter-spacing:-.01em; color:var(--gg-ink)!important;text-decoration:none!important; border-bottom:1px solid transparent; transition:border-color .7s cubic-bezier(.32,.72,0,1); } .wc-block-components-product-name:hover{border-bottom-color:var(--gg-ink)} .wc-block-components-product-metadata__description p{ font-size:13px;line-height:1.5;color:var(--gg-suave); } .wc-block-components-product-price__value, .wc-block-components-formatted-money-amount, .wc-block-formatted-money-amount{font-variant-numeric:tabular-nums;font-weight:700} .wc-block-components-totals-item__label{color:var(--gg-suave)} .wc-block-components-totals-footer-item{font-size:19px} .wc-block-cart-items__row{border-color:var(--gg-linha)!important} /* ---------- botoes dos blocos ---------- Mesma regra do resto do site: laranja e acao, tinta no hover. */ .wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button{ background:var(--gg-laranja)!important;color:var(--gg-ink)!important; border:0!important;border-radius:3px!important; font-family:'Chakra Petch',system-ui,sans-serif!important; font-weight:700!important;font-size:15px!important;letter-spacing:.02em!important; text-decoration:none!important;padding:15px 24px!important; transition:background .7s cubic-bezier(.32,.72,0,1),color .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1); } .wc-block-components-button:not(.is-link):hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover{ background:var(--gg-ink)!important;color:#fff!important; } .wc-block-components-button:not(.is-link):active, .wc-block-components-checkout-place-order-button:active{transform:scale(.98)} .wc-block-components-button:not(.is-link):focus-visible, .wc-block-components-checkout-place-order-button:focus-visible{ outline:3px solid var(--gg-azul)!important;outline-offset:3px!important; } .wc-block-components-button__text, .wc-block-components-checkout-place-order-button__text{text-decoration:none!important} /* ---------- campos do checkout ---------- */ .wc-block-components-text-input input, .wc-block-components-country-input select, .wc-block-components-state-input select, .wc-block-components-textarea{ border:2px solid var(--gg-linha)!important;border-radius:3px!important; font-family:'Chakra Petch',system-ui,sans-serif!important;font-size:16px!important; color:var(--gg-ink)!important; transition:border-color .5s cubic-bezier(.32,.72,0,1); } .wc-block-components-text-input input:focus, .wc-block-components-country-input select:focus, .wc-block-components-textarea:focus{ border-color:var(--gg-ink)!important; outline:3px solid var(--gg-laranja)!important;outline-offset:2px!important; } .wc-block-components-text-input label{color:var(--gg-suave)!important} .wc-block-components-checkout-step__description, .wc-block-checkout__guest-checkout-notice{font-size:13px;color:var(--gg-suave)} /* ---------- painel do resumo e avisos ---------- */ .wc-block-components-sidebar .wc-block-components-panel, .wc-block-cart__sidebar, .wc-block-checkout__no-payment-methods-notice{border-radius:3px} .wc-block-components-checkout-order-summary__title{ font-family:'Chakra Petch',system-ui,sans-serif!important;font-weight:700!important; } .wc-block-checkout__terms{font-size:13px;color:var(--gg-suave)} .wc-block-checkout__terms a{color:var(--gg-azul-fundo)} /* ================================================================== MINHA CONTA (marcacao classica, entao o CSS de loja la de cima pega) ================================================================== */ .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register, .woocommerce-account .woocommerce-ResetPassword{ max-width:440px;border:1px solid var(--gg-linha)!important;border-radius:3px; padding:28px!important; } .woocommerce-account .woocommerce-form-login label, .woocommerce-account .woocommerce-form-register label{ font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--gg-suave);margin-bottom:6px;display:block; } .woocommerce-account .woocommerce-form-login input.input-text, .woocommerce-account .woocommerce-form-register input.input-text{ border:2px solid var(--gg-linha);border-radius:3px;padding:12px 14px; font-family:'Chakra Petch',system-ui,sans-serif;font-size:16px;width:100%; } .woocommerce-account .woocommerce-form-login input.input-text:focus, .woocommerce-account .woocommerce-form-register input.input-text:focus{ border-color:var(--gg-ink);outline:3px solid var(--gg-laranja);outline-offset:2px; } .woocommerce-account h2{ font-size:clamp(20px,2.6vw,26px);font-weight:700;letter-spacing:-.02em;margin:0 0 16px; } .woocommerce-account .woocommerce-LostPassword a{ color:var(--gg-azul-fundo);font-size:14px;text-underline-offset:3px; } .woocommerce-account .woocommerce-LostPassword a:hover{color:var(--gg-ink)} .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0} .woocommerce-account .woocommerce-MyAccount-navigation a{ display:block;padding:10px 0;color:var(--gg-ink);text-decoration:none; border-bottom:1px solid var(--gg-linha);font-weight:600;font-size:15px; } .woocommerce-account .woocommerce-MyAccount-navigation .is-active a{color:var(--gg-laranja-texto)} @media (max-width:640px){ .gg-simples main.site-main{padding-left:16px;padding-right:16px} } /* ================================================================== CHECKOUT CLASSICO A pagina voltou pra marcacao classica porque o checkout em blocos nao renderiza CPF nem numero do endereco (o plugin brasileiro so registra esses campos no classico). O visual abaixo repete o que ja vale pro resto da loja. ================================================================== */ .woocommerce form.checkout h3, .woocommerce-checkout h3#order_review_heading{ font-family:'Chakra Petch',system-ui,sans-serif; font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--gg-ink);margin:0 0 20px;padding-bottom:12px; border-bottom:1px solid var(--gg-linha); } .woocommerce form .form-row label{ font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--gg-suave);margin-bottom:6px; } .woocommerce form .form-row label .required{color:var(--gg-laranja-texto);border:0} .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .select2-container .select2-selection--single{ border:2px solid var(--gg-linha)!important;border-radius:3px!important; padding:12px 14px!important;height:auto!important; font-family:'Chakra Petch',system-ui,sans-serif!important;font-size:16px!important; color:var(--gg-ink)!important;background:#fff!important; transition:border-color .5s cubic-bezier(.32,.72,0,1); } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus{ border-color:var(--gg-ink)!important; outline:3px solid var(--gg-laranja)!important;outline-offset:2px!important; } .woocommerce form .form-row.woocommerce-invalid input.input-text{ border-color:var(--gg-laranja-texto)!important; } .woocommerce form .form-row.woocommerce-validated input.input-text{ border-color:var(--gg-linha)!important; } .woocommerce form .form-row{margin-bottom:18px} /* resumo do pedido */ .woocommerce-checkout #order_review{ border:1px solid var(--gg-linha);border-radius:3px;padding:24px; } .woocommerce table.shop_table{ border:0;border-radius:0;font-family:'Chakra Petch',system-ui,sans-serif; } .woocommerce table.shop_table th{ font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--gg-suave);border-bottom:1px solid var(--gg-linha);padding:10px 0; } .woocommerce table.shop_table td{ border-top:1px solid var(--gg-linha);padding:12px 0;font-size:15px; } .woocommerce table.shop_table tfoot .order-total td, .woocommerce table.shop_table tfoot .order-total th{ font-size:19px;font-weight:700;border-top:2px solid var(--gg-ink); } .woocommerce table.shop_table .amount{font-variant-numeric:tabular-nums;font-weight:700} /* barra do cupom e avisos */ .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce .checkout_coupon{ border-radius:3px;font-family:'Chakra Petch',system-ui,sans-serif;font-size:14px; } .woocommerce-checkout #payment{background:transparent;border-radius:3px} .woocommerce-checkout #payment div.form-row{padding:16px 0 0} .woocommerce-checkout #place_order{width:100%;font-size:16px!important;padding:16px 24px!important} @media (max-width:767px){ .woocommerce-checkout #order_review{padding:16px} } /* ---------- botao flutuante de WhatsApp ---------- Laranja e nao verde do WhatsApp: no site inteiro laranja e acao, e o icone ja diz sozinho de que aplicativo se trata. Texto em tinta sobre o laranja da 6,5:1, que passa folgado. Nao aparece no carrinho nem no checkout: la ele cobriria o resumo do pedido e o botao de finalizar bem na hora da compra. Isso e controlado no PHP. env(safe-area-inset-bottom) e por causa da barra do iPhone: sem isso o botao fica embaixo dela em tela cheia. */ .gg-zap{ position:fixed;z-index:900; right:clamp(16px,2.4vw,28px); bottom:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-bottom,0px)); display:inline-flex;align-items:center;gap:10px; padding:14px 20px 14px 16px;border-radius:999px; background:var(--gg-laranja);color:var(--gg-ink);text-decoration:none; font-family:'Chakra Petch',system-ui,sans-serif; font-size:15px;font-weight:700;letter-spacing:.01em;line-height:1; box-shadow:0 10px 30px rgba(17,15,18,.22); transition:background .7s cubic-bezier(.32,.72,0,1), color .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1), box-shadow .7s cubic-bezier(.32,.72,0,1); } .gg-zap svg{width:24px;height:24px;fill:currentColor;flex:0 0 auto;display:block} .gg-zap:hover{ background:var(--gg-ink);color:#fff; transform:translateY(-2px); box-shadow:0 16px 38px rgba(17,15,18,.3); } .gg-zap:active{transform:translateY(0) scale(.98)} .gg-zap:focus-visible{outline:3px solid var(--gg-ink);outline-offset:3px} /* No celular so o icone: rotulo ocupa quase um terco da largura da tela e cobre conteudo. O aria-label continua dizendo o que o botao faz. */ @media (max-width:640px){ .gg-zap{padding:0;width:54px;height:54px;justify-content:center;gap:0} .gg-zap span{display:none} } @media (prefers-reduced-motion:reduce){ .gg-zap{transition:none} .gg-zap:hover{transform:none} } /* No fim da pagina o botao cobriria o texto da faixa azul. Empurrar a faixa pra dentro resolveria, mas custaria 250px de recuo o tempo todo pra resolver um encontro que so acontece no ultimo rolar. Melhor: o botao sai de cena quando a secao de contato ou o rodape entram na tela. Nessa altura ja existem quatro botoes de WhatsApp na pagina, entao o flutuante ali e repeticao, nao ajuda. Se o JS nao rodar, ele simplesmente fica visivel: some e o estado de excecao, aparecer e o padrao. */ .gg-zap.is-oculto{ opacity:0;transform:translateY(14px) scale(.94);pointer-events:none; } /* ---------- foto do mapa: botao, nao figura ---------- Vira botao pra quem navega por teclado alcancar e pro cursor avisar que aquilo abre. Reset de botao porque o tema entrega borda e respiro proprios. */ /* O seletor carrega o pai porque a regra de botao do tema ganhava no desempate e devolvia o cursor pra "pointer". Aqui o cursor precisa dizer que amplia, nao que navega. */ .gg-pico__media .gg-pico__foto{ margin:0;padding:0;border:0;background:rgba(255,255,255,.05); overflow:hidden;cursor:zoom-in;display:block; position:relative; } .gg-pico__foto img{ transition:transform 1.2s cubic-bezier(.32,.72,0,1),opacity .6s cubic-bezier(.32,.72,0,1); } .gg-pico__foto:hover img{transform:scale(1.04);opacity:.88} .gg-pico__foto:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:3px} /* ---------- lupa ---------- Fundo tinta quase opaco em vez de preto puro: o preto do site e #110F12 e o corte com o resto da pagina fica mais natural assim. */ .gg-lupa{ position:fixed;inset:0;z-index:1000; display:flex;align-items:center;justify-content:center; flex-direction:column;gap:20px; padding:clamp(16px,4vw,48px); background:rgba(17,15,18,.95); opacity:0;transition:opacity .3s cubic-bezier(.32,.72,0,1); } .gg-lupa.on{opacity:1} .gg-lupa[hidden]{display:none} .gg-lupa__quadro{ margin:0;display:flex;flex-direction:column;align-items:center;gap:14px; max-width:100%;min-height:0; } .gg-lupa__quadro img{ max-width:min(100%,1400px);max-height:76dvh; width:auto;height:auto;object-fit:contain;display:block; transform:scale(.97); transition:transform .45s cubic-bezier(.32,.72,0,1); } .gg-lupa.on .gg-lupa__quadro img{transform:scale(1)} .gg-lupa__quadro figcaption{ font-family:'Chakra Petch',system-ui,sans-serif; font-size:14px;line-height:1.5;color:rgba(255,255,255,.62); text-align:center;max-width:66ch;margin:0; } .gg-lupa__barra{display:flex;align-items:center;gap:20px} .gg-lupa__conta{ font-family:'Chakra Petch',system-ui,sans-serif; font-size:12px;font-weight:700;letter-spacing:.2em; color:rgba(255,255,255,.55);margin:0;font-variant-numeric:tabular-nums; } .gg-lupa__ant,.gg-lupa__prox,.gg-lupa__fecha{ width:44px;height:44px;padding:0;border-radius:999px;cursor:pointer; border:1px solid rgba(255,255,255,.2);background:none;color:#fff; display:grid;place-items:center; transition:background .7s cubic-bezier(.32,.72,0,1), color .7s cubic-bezier(.32,.72,0,1), border-color .7s cubic-bezier(.32,.72,0,1); } .gg-lupa__ant svg,.gg-lupa__prox svg,.gg-lupa__fecha svg{ width:18px;height:18px;fill:currentColor; } .gg-lupa__ant:hover,.gg-lupa__prox:hover,.gg-lupa__fecha:hover{ background:var(--gg-laranja);color:var(--gg-ink);border-color:var(--gg-laranja); } .gg-lupa__ant:focus-visible,.gg-lupa__prox:focus-visible,.gg-lupa__fecha:focus-visible{ outline:3px solid var(--gg-laranja);outline-offset:3px; } .gg-lupa__fecha{position:absolute;top:clamp(12px,2.4vw,28px);right:clamp(12px,2.4vw,28px)} .gg-lupa__ant[hidden],.gg-lupa__prox[hidden],.gg-lupa__conta[hidden]{display:none} /* enquanto a lupa esta aberta a pagina de tras nao rola */ html.gg-travado{overflow:hidden} @media (max-width:640px){ .gg-lupa__quadro img{max-height:66dvh} .gg-lupa__barra{gap:14px} } @media (prefers-reduced-motion:reduce){ .gg-lupa,.gg-lupa__quadro img,.gg-pico__foto img{transition:none} .gg-lupa__quadro img{transform:none} .gg-pico__foto:hover img{transform:none} } /* ---------- botao de ampliar nas galerias de projeto ---------- Mesmo papel do .gg-pico__foto no mapa, mas aqui o botao mora dentro de um
    que ja tem legenda, entao ele so embrulha a imagem. */ .gg-galeria__item .gg-amplia, .gg-imprensa__item .gg-amplia{ display:block;width:100%;margin:0;padding:0;border:0;background:none; cursor:zoom-in;overflow:hidden;border-radius:2px; } .gg-galeria__item .gg-amplia img, .gg-imprensa__item .gg-amplia img{ transition:transform 1.2s cubic-bezier(.32,.72,0,1),opacity .6s cubic-bezier(.32,.72,0,1); } .gg-galeria__item .gg-amplia:hover img{transform:scale(1.03);opacity:.9} .gg-imprensa__item .gg-amplia:hover img{opacity:.78} .gg-galeria__item .gg-amplia:focus-visible, .gg-imprensa__item .gg-amplia:focus-visible{ outline:3px solid var(--gg-laranja);outline-offset:3px; } /* o recorte ja tem borda propria no figure; dentro do botao ela ficaria dupla */ .gg-imprensa__item .gg-amplia img{border:0} .gg-imprensa__item{border:1px solid var(--gg-linha);border-radius:2px;overflow:hidden} @media (prefers-reduced-motion:reduce){ .gg-galeria__item .gg-amplia img, .gg-imprensa__item .gg-amplia img{transition:none} .gg-galeria__item .gg-amplia:hover img{transform:none} } /* ---------- rodape da parede de marcas: contagem + clipagem ---------- O botao da clipagem mora aqui porque faz o mesmo trabalho da parede: provar por terceiro. */ .gg-marcas__rodape{ margin:clamp(32px,4vw,56px) 0 0;padding-top:20px; border-top:1px solid var(--gg-linha); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:20px; } .gg-marcas__rodape .gg-marcas__conta{margin:0;padding:0;border:0} .gg-marcas__clip{ display:inline-flex;align-items:center;gap:10px; font-family:'Chakra Petch',system-ui,sans-serif; font-size:14px;font-weight:700;letter-spacing:.02em; color:var(--gg-ink);text-decoration:none; padding:12px 20px;border:2px solid var(--gg-ink);border-radius:3px; transition:background .7s cubic-bezier(.32,.72,0,1), color .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1); } .gg-marcas__clip svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto} .gg-marcas__clip:hover{background:var(--gg-ink);color:#fff} .gg-marcas__clip:active{transform:scale(.98)} .gg-marcas__clip:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:3px} /* Aviso de que o link sai do site: invisivel na tela, lido em voz alta. Quem usa leitor de tela merece saber que vai cair em outro dominio. */ .gg-fora{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } @media (max-width:640px){ .gg-marcas__rodape{flex-direction:column;align-items:flex-start;gap:16px} .gg-marcas__clip{width:100%;justify-content:center} } /* ================================================================== RODAPE (refeito em 17/09 a pedido do Gustavo) A assinatura foi pra esquerda com as redes embaixo, e a linha de servicos foi pra direita com o credito da Fluxxo embaixo. A faixa azul deixou de ser um filete e virou o bloco principal. ================================================================== */ /* Desde 17/09 o rodape e feito de widgets NATIVOS do Elementor, e a aparencia de cada um mora na configuracao dele, nao aqui. O motivo: quem edita o site depois de entregue e o Gustavo. Campo de cor que na verdade esta preso num CSS e campo que ele mexe e nada acontece, que e pior que nao ter campo. Empilhamento e alinhamento das colunas tambem vem do container, porque container do Elementor le flex de variavel CSS propria e regra minha aqui perderia calada (ja documentado la em cima). Sobra pra ca so a regua que separa a fileira dos links, que nao tem controle de borda por lado no container. */ .gg-rodalinks{ padding-top:clamp(20px,2.4vw,28px); border-top:1px solid rgba(255,255,255,.22); } /* ---------- PT | EN no cabecalho ---------- O seletor do TranslatePress renderiza vazio quando se pede nome curto sem bandeira, e com nome completo vira uma caixa com borda que nao combina com o cabecalho. Este e o shortcode [gg_idiomas], que usa a API de URL do proprio plugin pra nao perder a pagina atual na troca. */ .gg-idiomas{display:inline-flex;align-items:center;gap:2px} .gg-idioma__op{ font-family:'Chakra Petch',system-ui,sans-serif; font-size:13px;font-weight:700;letter-spacing:.1em; color:var(--gg-suave);text-decoration:none; padding:6px 8px;border-radius:3px; transition:color .7s cubic-bezier(.32,.72,0,1),background .7s cubic-bezier(.32,.72,0,1); } .gg-idioma__op + .gg-idioma__op{ border-left:1px solid var(--gg-linha);border-radius:0 3px 3px 0; } .gg-idioma__op:hover{color:var(--gg-ink)} .gg-idioma__op.is-atual{color:var(--gg-ink)} .gg-idioma__op:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:2px} /* O seletor nativo continua existindo pro caso de alguem usar o widget dele em outro lugar; aqui ele so nao pode aparecer duas vezes. */ .gg-idioma .trp-shortcode-switcher__wrapper{display:none} /* ---------- parede de marcas entrando uma de cada vez ---------- Pedido do Gustavo em 18/09. O estado escondido depende da classe que o JavaScript poe no container: sem script, nada some. */ .gg-marcas--anima .gg-marca{ opacity:0;transform:translateY(14px) scale(.96); transition:opacity .8s cubic-bezier(.32,.72,0,1), transform .8s cubic-bezier(.32,.72,0,1); } .gg-marcas--anima .gg-marca.on{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .gg-marcas--anima .gg-marca{opacity:1;transform:none;transition:none} } /* ---------- vídeo do projeto ---------- Mesma largura e mesmo respiro da galeria de fotos, porque os dois contam a mesma obra e alternam na página. Proporção travada em 16:9 pra a página não dar um pulo quando o vídeo termina de carregar. */ .gg-projvideo{ margin:48px 0 0;position:relative; aspect-ratio:16/9;background:var(--gg-papel2);border-radius:2px;overflow:hidden; } .gg-projvideo__quadro{ position:absolute;inset:0;width:100%;height:100%; border:0;display:block;object-fit:cover; } /* Vídeo de celular em pé: o quadro segue a proporção do arquivo (vem no style, calculada pelo shortcode) e não passa da largura de uma foto. */ .gg-projvideo--vertical{ max-width:min(420px,100%);margin-left:auto;margin-right:auto; } /* ---------- contato: colunas que nao podem empurrar a pagina ---------- Item de flex nao encolhe abaixo do proprio conteudo por padrao. Basta uma palavra grande demais numa das colunas pra largura toda crescer e a pagina ganhar rolagem lateral no celular. */ .gg-contato__corpo, .gg-contato__dupla{min-width:0} .gg-contato__corpo > *{max-width:100%} /* ---------- cabeçalho no celular: carrinho saindo da tela ---------- O botão do carrinho mostra o subtotal ("R$ 0,00"), e com o seletor de idioma ao lado isso passou 28px da borda direita num aparelho de 375px: o valor encostava no EN e a sacola ficava cortada. No celular fica só a sacola e o contador. O valor continua escrito na marcação, apenas fora da tela, porque quem usa leitor de tela não deve perder o subtotal por causa de falta de espaço. */ @media (max-width:767px){ header .elementor-menu-cart__toggle .elementor-button-text{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } header .elementor-element-ggidioma{margin-right:6px} } /* ---------- mosaico do portfólio (30/09) ---------- Molde do Gustavo: 4 colunas de célula quadrada, blocos de 7 peças. A altura da linha sai da largura da caixa (cqw), então a grade tem altura definida e o widget do Elementor mede certo, sem vazar na seção de baixo (o problema que obrigou a grade antiga a virar bloco no celular). */ .gg-mosaico-caixa{container-type:inline-size} .gg-mosaico{ /* vao menor = peca maior: a altura da linha sai deste valor, entao apertar o vao aumenta a area de foto sem mexer no encaixe do mosaico */ --gg-vao:10px; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:calc((100cqw - 3 * var(--gg-vao)) / 4); grid-auto-flow:dense;gap:var(--gg-vao); } .gg-tile--c2{grid-column:span 2} .gg-tile--c4{grid-column:span 4} .gg-tile--l2{grid-row:span 2} .gg-mosaico .gg-tile img, .gg-mosaico .gg-tile .gg-shot__vazio{position:absolute;inset:0;width:100%;height:100%} .gg-mosaico .gg-shot__cap{left:14px;right:14px;bottom:12px} .gg-mosaico .gg-tile--c1.gg-tile--l1 .gg-shot__cap strong{font-size:13px} /* Tela de toque não tem hover: sem isto o nome do projeto nunca aparecia. */ @media (hover:none){ .gg-mosaico .gg-shot::after{opacity:1} .gg-mosaico .gg-shot__cap{opacity:1;transform:none} } @media (max-width:767px){ .gg-mosaico{ --gg-vao:6px;grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:calc((100cqw - var(--gg-vao)) / 2); } .gg-tile--c4{grid-column:span 2} .gg-mosaico .gg-shot__cap{left:12px;right:12px;bottom:12px} .gg-mosaico .gg-shot__cap strong{font-size:13px} .gg-mosaico .gg-shot__cap span{font-size:10px} } @supports not (width:1cqw){ .gg-mosaico{grid-auto-rows:22vw} @media (max-width:767px){.gg-mosaico{grid-auto-rows:46vw}} } /* ---------- mapa: bolinha azul, laranja só a ativa (30/09) ---------- O quadrado atrás da bolinha era o tema Hello: ele pinta o fundo de todo