/* ============================================================ KOMBAT ORG — design system Figma: KOMBAT-ID (canvas 1728px) — revisão v2 ============================================================ */ :root{ --paper:#f8f3eb; --ink:#1b1212; --white:#fff; --rule-light:rgba(3,9,13,.2); --rule-dark:rgba(255,255,255,.2); --line-light:rgba(27,18,18,.45); --muted-dark:rgba(255,255,255,.7); --faint-dark:rgba(255,255,255,.55); --tile-bg:#2a211f; /* placeholder escuro: tile vazio le como midia carregando, nao como furo */ --maxw:none; /* full-bleed: nada de coluna centralizada */ --pad:clamp(20px,2.546vw,80px); /* Figma: 44px sobre 1728 */ --gut:clamp(16px,1vw,17px); --nav:12px; --respiro-rodape:clamp(60px,12.79vw,221px); /* Figma da home: 221 sobre 1728 */ /* gaveta do menu (Figma 160:15341) */ --menu-link:#a3a3a3; --menu-fraco:rgba(255,255,255,.3); --menu-filete:rgba(255,255,255,.3); --menu-x:#d9d9d9; /* superficies que trocam de pele no modo claro (Figma 198:2047) */ --gaveta-fundo:#000; --escuro-fundo:var(--ink); --escuro-texto:var(--white); --escuro-filete:rgba(255,255,255,.45); --cta-fundo:var(--ink); --cta-texto:var(--white); --botao-fundo:var(--white); --botao-texto:var(--ink); --pilula-fundo:#000; --pilula-texto:var(--white); --sobre-foto:var(--white); --sobre-foto-fraco:rgba(255,255,255,.35); --selo-filtro:invert(1); --selo-filtro-papel:none; --veu:rgba(0,0,0,.45); --lb-fundo:rgba(15,10,10,.94); --lb-texto:#fff; --titulo-secao:#000; /* o Figma pinta o titulo de secao mais forte que o corpo */ --fantasma:rgba(255,255,255,.15); --font:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,sans-serif; } /* ============================================================ MODO CLARO (Figma 198:2047) O papel continua o mesmo. O que era preto vira vermelho puro e o que era superficie escura vira papel — nenhum bloco vermelho solto, so os botoes. Um atributo em troca o site inteiro porque tudo abaixo le token, nunca cor crua. ============================================================ */ :root[data-tema="light"]{ --ink:#8a221b; --tile-bg:#efe7db; --rule-light:rgba(138,34,27,.2); --rule-dark:rgba(138,34,27,.2); --line-light:rgba(138,34,27,.45); --muted-dark:rgba(138,34,27,.7); --faint-dark:rgba(138,34,27,.55); --menu-link:#8a221b; --menu-fraco:rgba(138,34,27,.3); --menu-filete:rgba(138,34,27,.3); --menu-x:#8a221b; --gaveta-fundo:var(--paper); --escuro-fundo:var(--paper); --escuro-texto:#8a221b; --escuro-filete:rgba(138,34,27,.45); --cta-texto:var(--paper); --botao-fundo:#8a221b; --botao-texto:var(--paper); --pilula-fundo:#8a221b; --pilula-texto:var(--paper); --sobre-foto:#8a221b; --sobre-foto-fraco:rgba(138,34,27,.35); --selo-filtro:url(#vermelho); --selo-filtro-papel:url(#vermelho); --veu:rgba(27,18,18,.3); /* o veu nao tinge: so afasta a pagina da gaveta */ --lb-fundo:rgba(248,243,235,.96); --lb-texto:#8a221b; --titulo-secao:#8a221b; --fantasma:rgba(138,34,27,.15); } /* arte que nao e tipo: o filtro SVG (base.njk) mapeia qualquer RGB para vermelho puro e preserva o alfa, entao serve tanto para o logo branco do hero quanto para os selos escuros */ :root[data-tema="light"] .hero-logo img{filter:url(#vermelho)} :root[data-tema="light"] .hero{background:var(--tile-bg)} :root[data-tema="light"] .sobre-faixa{border-top-color:rgba(138,34,27,.2)} :root[data-tema="light"] .contact-block--dark .btn-send--ghost:hover{background:rgba(138,34,27,.08)} :root[data-tema="light"] .contact-v4 .ko-bg{filter:url(#vermelho);opacity:.12} :root[data-tema="light"] .awards img{mix-blend-mode:normal;filter:url(#vermelho)} :root[data-tema="light"] .tile--laurels>img{mix-blend-mode:normal;filter:url(#vermelho)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--paper)} body{ margin:0; background:var(--paper); /* sem textura: o papel e cor plana */ color:var(--ink); font-family:var(--font); font-synthesis-weight:none; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} :focus-visible{outline:2px solid currentColor;outline-offset:3px} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ============================================================ HEADER ============================================================ */ .site-header{max-width:var(--maxw);margin-inline:auto;padding:clamp(24px,2.84vw,49px) var(--pad) 0;position:relative;z-index:60} .header-grid{display:flex;align-items:flex-start;gap:clamp(20px,3.6vw,62px)} /* the lockup is artwork, not text — it never wraps or reflows */ .brand{flex:0 0 auto;display:block;width:clamp(92px,8.77vw,196px)} .brand-mark{width:100%;height:auto} .brand-sub{ display:block;width:57.9%;height:auto; margin:clamp(11px,1.42vw,24.5px) 0 0 16.8%; } .header-right{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} .main-nav{display:flex;justify-content:flex-end;gap:clamp(24px,6.5vw,112px);padding-bottom:clamp(10px,1.1vw,18px)} .main-nav a{font-size:var(--nav);letter-spacing:.02em;white-space:nowrap;padding:2px 0;transition:opacity .2s} .main-nav a:hover{opacity:.55} .header-rule{height:2px;background:var(--rule-light);width:100%} .awards{margin-top:clamp(8px,.58vw,10px);display:flex;justify-content:flex-end} .awards img{width:clamp(240px,31.9vw,716px);height:auto;mix-blend-mode:multiply;opacity:.5} /* dark header (contact page) */ .theme-dark{background:var(--escuro-fundo);color:var(--escuro-texto)} .theme-dark .header-rule{background:var(--rule-dark)} .theme-dark .awards img{mix-blend-mode:normal;opacity:1;filter:invert(1) brightness(2)} .nav-toggle{ display:none;background:none;border:0;padding:10px;cursor:pointer; margin-left:auto;position:relative;z-index:70; } .nav-toggle span{ display:block;width:26px;height:2px;background:currentColor;margin:6px 0; transition:transform .3s,opacity .3s,background-color .3s; } /* menu aberto: overlay escuro, então o X precisa ser claro para aparecer */ .nav-open .nav-toggle span{background:var(--escuro-texto)} .nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)} .nav-open .nav-toggle span:nth-child(2){opacity:0} .nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ============================================================ MOSAIC — seamless 16:9 tile grid ============================================================ */ .mosaic{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; max-width:var(--maxw);margin:clamp(28px,4.6vw,80px) auto 0; } .mosaic--4{grid-template-columns:repeat(4,1fr)} /* Tile ratios must agree with the rows/columns they span, or the grid rows desynchronise: 1x1 = 16/9, 2 cols x 1 row = 32/9, 1 col x 2 rows = 8/9, 2 cols x 2 rows = 16/9 again. */ /* width:100% é obrigatório junto com height:100%. Só com a altura fixada, o navegador deriva a largura do aspect-ratio e o tile fica alguns px mais estreito que a célula do grid — abrindo uma fresta ao redimensionar a janela. Com as duas dimensões definidas, o tile preenche a área exata. */ .tile{position:relative;overflow:hidden;aspect-ratio:16/9;width:100%;height:100%;background:var(--tile-bg)} .tile>img,.tile>video{width:100%;height:100%;object-fit:cover} .tile--w2{grid-column:span 2;aspect-ratio:32/9} .tile--h2{grid-row:span 2;aspect-ratio:8/9} .tile--w2.tile--h2{aspect-ratio:16/9} .tile--plain{background:var(--paper)} .tile--clay{background:#6f3720} .tile--ink{background:var(--escuro-fundo)} a.tile>img,a.tile>video{transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .4s} a.tile:hover>img,a.tile:hover>video{transform:scale(1.035)} .tile-label{ position:absolute;left:0;right:0;bottom:0; padding:clamp(12px,1.2vw,20px); font-size:clamp(11px,.76vw,13px);letter-spacing:.08em;text-transform:uppercase; color:var(--sobre-foto);background:linear-gradient(transparent,rgba(0,0,0,.62)); opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s; } a.tile:hover .tile-label,a.tile:focus-visible .tile-label{opacity:1;transform:none} /* quadrante de prêmios: duas artes posicionadas em % do tile, como no Figma (cell 578x325 → Cannes 220x95 em 1198,698 · BSFF 172x132 em 1486,680) */ .tile--laurels{display:block;padding:0;background:var(--paper)} /* precisa de 2 classes no seletor: `.tile>img` (classe+elemento) tem especificidade maior que uma classe sozinha e sequestraria width/height */ .tile--laurels>img{position:absolute;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply} .tile--laurels>.laurel--cannes{left:8.3%;top:35.4%;width:38.1%} .tile--laurels>.laurel--bsff{left:58.1%;top:29.8%;width:29.8%} /* text cells inside the mosaic. height:auto + overflow visível fazem a proporção 16/9 valer como piso, não como teto: se a copy não couber, a célula cresce e a linha inteira do grid acompanha (os tiles de imagem esticam via height:100% e só recortam um pouco mais). Sem isso o texto era cortado sempre que a frase passava do comprimento exato do placeholder do Figma. */ .tile--text{ aspect-ratio:16/9;height:auto;display:flex;align-items:flex-start; padding:clamp(14px,1.1vw,18px) clamp(14px,1.4vw,24px) clamp(14px,1.1vw,18px) clamp(8px,.75vw,13px); background:var(--paper);overflow:visible; } .tile--text.tile--w2{aspect-ratio:32/9} .tile--text.tile--h2{aspect-ratio:8/9} .tile--text.tile--w2.tile--h2{aspect-ratio:16/9} .mosaic-copy{font-size:clamp(14px,1.39vw,31px);line-height:1.28;font-weight:700;margin:0;max-width:66ch} .mosaic-copy--md{font-weight:500} .mosaic-copy--lg{font-size:clamp(20px,2.78vw,62px);line-height:1.1} .mosaic-copy+.mosaic-copy{margin-top:1em} .tile--text .stack{display:flex;flex-direction:column;justify-content:space-between;height:100%;width:100%} .eyebrow{font-size:clamp(11px,.76vw,13px);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .9em} /* oversized director names */ .tile--name{display:flex;align-items:center;background:var(--paper);aspect-ratio:16/9} .tile--name.tile--h2{aspect-ratio:8/9} .tile--name.tile--w2.tile--h2{aspect-ratio:16/9} .display-name{font-size:clamp(34px,6.37vw,143px);line-height:.945;font-weight:500;margin:0;padding:0 clamp(10px,1.2vw,20px);letter-spacing:-.02em} /* name set inside a dark block (OS/ON). Precisa repetir o fundo aqui: .tile--name define o creme e vem depois de .tile--ink com a mesma especificidade, então venceria a disputa. */ .tile--name.tile--ink{background:var(--escuro-fundo);justify-content:center} .display-name--ghost{ color:var(--fantasma); font-size:clamp(46px,8.68vw,195px); letter-spacing:.06em;text-align:center; } /* ============================================================ PAGE SECTIONS ============================================================ */ .section{padding-top:clamp(36px,5.5vw,95px)} .krafting{font-size:13px;font-weight:700;line-height:1.05;letter-spacing:.01em;max-width:154px;margin:clamp(10px,1.28vw,22px) 0 0} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(24px,3.4vw,58px);align-items:start} .split--wide{grid-template-columns:minmax(0,1087fr) minmax(0,533fr)} .split--director{grid-template-columns:minmax(0,29.2vw) minmax(0,20.8vw);justify-content:start;gap:clamp(24px,5.4vw,84px)} .meta-title{font-size:16px;font-weight:700;margin:0 0 clamp(10px,1vw,16px);letter-spacing:.01em} .meta-body{font-size:clamp(12px,.9vw,17px);line-height:1.65;margin:0} .meta-body+.meta-body{margin-top:1em} .portrait{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--tile-bg)} .still{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--tile-bg)} .film-still{width:100%;aspect-ratio:1087/612;object-fit:cover;background:var(--tile-bg)} .film-row{display:grid;grid-template-columns:minmax(0,1087fr) minmax(0,533fr);gap:clamp(24px,3.4vw,58px);align-items:start;margin-top:clamp(30px,3.9vw,68px)} /* Figma 85:3335 — passo vertical de 503px entre linhas, coluna com 27px de gutter */ .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,6.02vw,104px) clamp(16px,1.56vw,27px);margin-top:clamp(28px,4vw,68px)} .grid3 figure{margin:0} .grid3 figcaption{font-size:clamp(11px,.64vw,14px);line-height:1.6;margin-top:clamp(10px,.9vw,14px)} /* hero with play button */ .hero{position:relative;width:100%;aspect-ratio:1087/612;overflow:hidden;background:#111} .hero img,.hero video{width:100%;height:100%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);pointer-events:none;transition:opacity .4s} .hero.is-playing::after{opacity:0} .hero-play{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:clamp(44px,4.05vw,70px);height:clamp(44px,4.05vw,70px); background:none;border:0;cursor:pointer;padding:0;z-index:2; transition:transform .3s,opacity .3s; } .hero-play img{width:100%;height:100%;object-fit:contain} .hero-play:hover{transform:translate(-50%,-50%) scale(1.09)} .hero.is-playing .hero-play{opacity:0;pointer-events:none} /* ============================================================ CONTACT + FOOTER Light on the content pages; dark only on /contact. ============================================================ */ .contact-block{ background:var(--paper);color:var(--ink); margin-top:clamp(40px,5.4vw,93px);padding-top:clamp(40px,4.9vw,85px); } /* quando a página termina num mosaico full-bleed, o bloco encosta no último tile */ main:has(> .mosaic:last-child) + .contact-block{margin-top:0} .contact-grid{display:grid;grid-template-columns:minmax(0,35.4vw) minmax(0,1fr);gap:clamp(30px,4vw,70px);align-items:center} .contact-form{display:block;width:100%} .field{position:relative;padding-top:clamp(20px,2.3vw,40px)} .field label{display:block;font-size:clamp(15px,1.16vw,26px);letter-spacing:-.06em;margin-bottom:clamp(8px,.9vw,15px)} .field input,.field textarea{ width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-light); color:inherit;font:inherit;font-size:clamp(14px,1.04vw,18px); padding:0 0 clamp(8px,.7vw,12px);border-radius:0;-webkit-appearance:none;transition:border-color .25s; } .field textarea{resize:vertical;min-height:44px} .field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)} .btn-send{ width:100%;height:clamp(44px,2.95vw,66px); background:var(--cta-fundo);color:var(--cta-texto);border:0;cursor:pointer; font-size:clamp(15px,1.16vw,26px);letter-spacing:-.06em; margin-top:clamp(24px,2.7vw,47px);transition:opacity .25s; } .btn-send:hover{opacity:.85} .form-note{font-size:12px;opacity:.6;margin:14px 0 0;min-height:1.2em} .ko-mark{width:100%;max-width:40.4vw;height:auto;justify-self:end} .site-footer{padding:clamp(44px,6.2vw,107px) 0 clamp(22px,2vw,34px)} .footer-cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap} .footer-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(6px,.5vw,7px)} .footer-cols li a{font-size:12px;transition:opacity .2s} .footer-cols li a:hover{opacity:.6} .footer-cols .col-right{text-align:right} .rights{text-align:center;font-size:12px;line-height:18px;margin:clamp(26px,3vw,52px) 0 0} /* dark variant — /contact */ .contact-block--dark{background:var(--escuro-fundo);color:var(--escuro-texto);margin-top:0} .contact-block--dark .field label{color:var(--muted-dark)} .contact-block--dark .field input, .contact-block--dark .contact-block--dark textarea, .contact-block--dark .field textarea{border-bottom-color:var(--escuro-filete);color:inherit} .contact-block--dark .field input:focus, .contact-block--dark .field textarea:focus{border-bottom-color:currentColor} .contact-block--dark .btn-send{background:var(--botao-fundo);color:var(--botao-texto)} .contact-block--dark .rights, .contact-block--dark .form-note{color:var(--faint-dark);opacity:1} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1024px){ .main-nav{gap:clamp(18px,3.4vw,40px)} .split,.split--wide,.split--director,.film-row{grid-template-columns:1fr;gap:20px} .split--director .portrait{max-width:504px} .grid3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:768px){ .nav-toggle{display:block} .header-grid{align-items:center;gap:16px;flex-wrap:wrap} .header-right{order:3;flex-basis:100%;flex-direction:column} .main-nav{ position:fixed;inset:0;background:var(--escuro-fundo);color:var(--escuro-texto); flex-direction:column;justify-content:center;align-items:center;gap:28px; padding:0;z-index:50; opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s; } .nav-open .main-nav{opacity:1;visibility:visible} .main-nav a{font-size:18px;letter-spacing:.06em} .header-rule{display:none} .awards{margin-top:14px;justify-content:flex-start} .awards img{width:min(78vw,340px)} .site-header{padding-bottom:6px} /* mosaico em coluna única; spans zerados */ .mosaic,.mosaic--4{grid-template-columns:1fr} .tile--w2,.tile--h2,.tile--w2.tile--h2{grid-column:auto;grid-row:auto} .tile--w2.tile--h2{aspect-ratio:16/9} /* células de texto e de nome acompanham o conteúdo — precisam listar todas as combinações de span para vencer a especificidade das regras de proporção */ .tile--text,.tile--text.tile--w2,.tile--text.tile--h2,.tile--text.tile--w2.tile--h2{ aspect-ratio:auto;height:auto;overflow:visible;padding:26px var(--pad) 30px; } .tile--name,.tile--name.tile--w2,.tile--name.tile--h2{ aspect-ratio:auto;height:auto;padding:22px 0; } .tile--name.tile--ink{padding:44px 0} .display-name{padding-inline:var(--pad)} .mosaic-copy{font-size:17px;line-height:1.4;max-width:none} .mosaic-copy--lg{font-size:26px;line-height:1.2} .grid3{grid-template-columns:1fr;gap:26px} .contact-grid{grid-template-columns:1fr;gap:36px} .ko-mark{justify-self:start;max-width:82%} .footer-cols{gap:28px} .footer-cols .col-right{text-align:left} .rights{text-align:left} .hero{aspect-ratio:16/9} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} a.tile:hover>img,a.tile:hover>video{transform:none} } /* ============================================================ ABOUT — mesma linguagem da home: papel, grade de 3 colunas, destaque de 2 colunas com o texto na terceira. O conteudo e o do site antigo (kombatfilms.com), palavra por palavra. ============================================================ */ .sobre{padding-bottom:var(--respiro-rodape)} .sobre-abre{padding:clamp(40px,6.6vw,114px) 0 clamp(28px,3.24vw,56px)} .sobre-frase{ margin:0;max-width:22ch; font-size:clamp(34px,5.2vw,90px);line-height:1.02;font-weight:500;letter-spacing:-.035em; } .sobre-bloco{align-items:start} .sobre-texto p{ margin:0 0 1.1em;font-size:clamp(16px,1.16vw,20px);line-height:1.5; } .sobre-texto p:last-child{margin-bottom:0} .sobre-assina{ margin:clamp(18px,1.6vw,28px) 0 0; font-size:clamp(13px,.98vw,17px);font-weight:700; } .sobre-faixa{ display:grid;grid-template-columns:minmax(0,246px) minmax(0,1fr); gap:clamp(16px,2vw,34px); padding-top:clamp(34px,4.28vw,74px); border-top:1px solid rgba(27,18,18,.16); margin-top:clamp(34px,4.28vw,74px); } .sobre-rotulo{ margin:0;font-size:13px;font-weight:700;letter-spacing:-.02em; text-transform:uppercase; } .sobre-selos{ display:flex;align-items:center;flex-wrap:wrap; gap:clamp(18px,3.38vw,58px); } .sobre-selos img{width:auto;flex:0 0 auto;height:clamp(24px,2.48vw,43px);filter:var(--selo-filtro-papel)} .sobre-selos .mark--netflix{height:clamp(20px,2.04vw,35px)} .sobre-selos .mark--cannes{height:clamp(14px,1.37vw,24px)} .sobre-selos .mark--clio{height:clamp(11px,1.11vw,19px)} .sobre-marcas,.sobre-cidades{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,20px) clamp(20px,2.6vw,45px); font-size:clamp(16px,1.16vw,20px); } .sobre-cidades{flex-direction:column;gap:clamp(6px,.7vw,12px)} .sobre-sigla{display:inline-block;min-width:2.4em;font-weight:700} @media (max-width:768px){ .sobre-faixa{grid-template-columns:1fr;gap:16px} .sobre-bloco{gap:24px} } /* ============================================================ RODAPÉ — medidas do Figma 180:2 (bloco 1728x477) Colunas ancoradas em x fixo, nao distribuidas: 52 (botao 610x51), 829 (redes), 1105 (menu), 1400.8 (marca 124 de largura). Linhas dos links: 15px/18 com passo 30. "All rights reserved." embaixo a ESQUERDA em x52, 22 do pe. ============================================================ */ .foot{ background:var(--paper);color:var(--ink); padding:clamp(48px,8.6vw,149px) 0 22px; } main:has(> .mosaic:last-child) + .foot{margin-top:0} /* o recuo do rodape e 52, nao os 44 do resto do site */ .foot .wrap{padding-inline:clamp(20px,3.01vw,52px)} .foot-row{ display:grid;align-items:start;gap:0; /* 777 / 276 / 296 / resto, sobre os 1624 entre os recuos de 52 */ grid-template-columns:47.85% 16.99% 18.21% 1fr; } .btn-talk{ display:flex;align-items:center;justify-content:center; width:min(100%,35.3vw);min-height:clamp(46px,2.95vw,51px); background:var(--cta-fundo);color:var(--cta-texto); font-size:clamp(14px,1.16vw,20px);letter-spacing:-.06em;text-transform:uppercase; border:0;cursor:pointer;text-align:center;padding:.6em 1em; transition:opacity .25s; } .btn-talk:hover{opacity:.85} /* Figma: links de 15px Medium, caixa de 18, passo de 30 */ .foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .foot-links a{ display:block;font-size:clamp(14px,.98vw,17px);line-height:20px;font-weight:500; transition:opacity .2s; } .foot-links a:hover{opacity:.6} .foot-brand{display:block;width:clamp(84px,7.2vw,124px);justify-self:start;line-height:0} .foot-brand svg{width:100%;height:auto;display:block} .foot-rights{ text-align:left;font-size:13px;line-height:19px;opacity:.52; /* Figma: #928e8e */ margin:clamp(40px,8.68vw,150px) 0 0; } /* variante escura (página de contato) */ .foot--dark{background:var(--escuro-fundo);color:var(--escuro-texto)} .foot--dark .btn-talk{background:var(--botao-fundo);color:var(--botao-texto)} @media (max-width:768px){ .foot-row{grid-template-columns:1fr;gap:32px} .btn-talk{width:100%} } } /* célula de texto escura dentro da galeria (mescla com as imagens) */ .tile--text.tile--ink{background:var(--escuro-fundo);color:var(--escuro-texto)} /* ============================================================ GALERIA DE DIRETORES (Figma 77:2179) 3 colunas de retratos 504x504, nome 16px logo abaixo. ============================================================ */ .dir-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(40px,5.15vw,89px) clamp(34px,4.86vw,84px); padding-bottom:var(--respiro-rodape); /* mesmo respiro da home */ } .dir-card{display:block} .dir-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--tile-bg)} .dir-name{ font-size:clamp(14px,.93vw,16px);font-weight:700;letter-spacing:.01em; margin:clamp(14px,1.56vw,27px) 0 0; } a.dir-card img{transition:transform .7s cubic-bezier(.2,.7,.3,1)} a.dir-card:hover img{transform:scale(1.03)} a.dir-card{overflow:hidden} a.dir-card>img{will-change:transform} @media (max-width:1024px){ .dir-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:768px){ .dir-grid{grid-template-columns:1fr;gap:38px} } /* contato: ENVIAR vazado, separador "ou", AGENDE UM CALL sólido. Precisa dos 2 níveis no seletor: `.contact-block--dark .btn-send` já pinta o botão de branco e venceria uma classe sozinha. */ .contact-block--dark .btn-send--ghost{background:transparent;color:var(--escuro-texto);border:1px solid var(--escuro-filete)} .contact-block--dark .btn-send--ghost:hover{background:rgba(255,255,255,.08);opacity:1} .or-sep{text-align:center;font-size:12px;margin:clamp(10px,1vw,16px) 0;opacity:.75} .contact-block--dark .btn-send--solid{ display:flex;align-items:center;justify-content:center;text-decoration:none; background:var(--botao-fundo);color:var(--botao-texto);margin-top:0; } /* ============================================================ MARCA FIXA — burger na esquerda, K.O. na direita A barra antiga saiu de todas as paginas. Sobra so este par, sem fundo, colado no topo da tela. Na home ele entra depois que o topo do hero sai de vista; nas outras paginas ja nasce visivel. A cor e decidida no main.js: preto sobre claro, branco sobre escuro. ============================================================ */ .marca-fixa{ position:fixed;top:0;left:0;right:0;z-index:80; display:flex;align-items:flex-start;justify-content:space-between;gap:16px; padding:clamp(18px,2.43vw,42px) clamp(18px,2.55vw,44px) 0; pointer-events:none; /* so os dois filhos clicam */ color:var(--ink); /* estado padrao: preto */ opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .28s,visibility .28s,transform .28s,color .2s; } .marca-fixa--sempre,.marca-fixa.esta-visivel{opacity:1;visibility:visible;transform:none} /* cada marca vira branca sozinha: o burger pode estar sobre papel e o logo sobre uma foto no mesmo instante */ .marca-burger.sobre-escuro,.marca-logo.sobre-escuro{color:var(--sobre-foto)} /* sobre foto o branco pode cair num trecho claro: uma sombra de fio de cabelo segura a leitura sem virar fundo */ .marca-logo.sobre-escuro svg, .marca-burger.sobre-escuro span{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))} /* com a gaveta aberta o par sai da frente: a gaveta ja tem logo e X */ .nav-open .marca-fixa{opacity:0;visibility:hidden;transform:translateY(-6px)} .marca-burger{ pointer-events:auto;flex:0 0 auto; background:none;border:0;padding:0;cursor:pointer; width:clamp(22px,1.487vw,26px);margin-top:clamp(2px,.23vw,4px); display:flex;flex-direction:column;gap:clamp(4px,.313vw,5.4px); } .marca-burger span{ display:block;width:100%;height:clamp(3px,.235vw,4px); background:currentColor;transition:background-color .2s; } .marca-logo{ pointer-events:auto;flex:0 0 auto;display:block; width:clamp(46px,3.53vw,61px); } .marca-logo svg{width:100%;height:auto;display:block} .marca-logo{line-height:0} /* sem hero o conteudo comecava colado no topo, embaixo da marca */ body.sem-hero main{padding-top:clamp(74px,6.6vw,114px)} /* ---- toggle de idioma: irmao da marca fixa, no pe da tela ---- */ .idioma{ position:fixed;left:0;bottom:0;z-index:80; display:flex;align-items:baseline;gap:6px; padding:0 clamp(18px,2.55vw,44px) clamp(16px,1.9vw,33px); pointer-events:none;color:var(--ink); font-size:13px;font-weight:700;letter-spacing:-.02em;line-height:1; opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .28s,visibility .28s,transform .28s,color .2s; } .idioma--sempre,.idioma.esta-visivel{opacity:1;visibility:visible;transform:none} .nav-open .idioma, .idioma.idioma--escondido{opacity:0;visibility:hidden;transform:translateY(6px)} .idioma.sobre-escuro{color:var(--sobre-foto)} .idioma.sobre-escuro .idioma-op{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))} .idioma-op{ pointer-events:auto;color:inherit;opacity:.4; transition:opacity .2s;text-decoration:none; } .idioma-op--atual{opacity:1;cursor:default} a.idioma-op:hover{opacity:.75} .idioma-barra{opacity:.28;font-weight:400} @media (max-width:560px){ .idioma{padding:0 16px 14px} .marca-fixa{padding:16px 16px 0} .marca-burger{width:24px;gap:5px} .marca-burger span{height:3px} .marca-logo{width:44px} } /* ============================================================ MENU — GAVETA LATERAL (Figma 160:15341) Medidas tiradas do PNG 1:1 do Figma, nao de estimativa: gaveta 314 | conteudo x44..290 | filetes 246 de largura logo y42..77 | X 19x19 em x270..289, y49..68 filetes y 138 185 232 279 326 (passo 47) e 437 links cap-top y 150 197 243 291 (20px bold, #a3a3a3) cidades cap-top y 338 370 401 (passo 32, rgba(255,255,255,.3)) redes cap-top y 452 484 (passo 32) pe: imagem y709..834 (223x125) | texto y862..983 (9 linhas, passo 14) A gaveta tem largura fixa, entao o tipo aqui e em px fixo — ela nao acompanha a viewport como o resto do site. ============================================================ */ .nav-menu{ position:fixed;top:0;left:0;bottom:0;z-index:95; /* acima da .nav (60) */ width:314px; background:var(--gaveta-fundo);color:var(--menu-link); display:flex;flex-direction:column; padding:42px 24px 61px 44px; /* 314-24=290: borda direita dos filetes */ transform:translateX(-100%);transition:transform .38s cubic-bezier(.4,.1,.2,1); overflow-y:auto;overscroll-behavior:contain; } .nav-open .nav-menu{transform:none} /* veu sobre o resto da pagina: fecha ao clicar fora */ .nav-veu{ position:fixed;inset:0;z-index:90;background:var(--veu); opacity:0;visibility:hidden;transition:opacity .38s,visibility .38s; border:0;padding:0;cursor:pointer; } .nav-open .nav-veu{opacity:1;visibility:visible} .nav-menu-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} /* o Figma recua o logo e o still do pe 2px a mais que os filetes (x46) */ .nav-menu-logo{display:block;width:78px;margin-left:2px} /* Figma: x46..123, y42..77 */ .nav-menu-logo svg{width:100%;height:auto;display:block;color:var(--menu-x)} .nav-menu-x{ flex:0 0 auto;background:none;border:0;cursor:pointer; width:19px;height:19px;margin-top:7px; /* Figma: y49..68 */ color:var(--menu-x);padding:0;display:block; transition:opacity .2s; } .nav-menu-x:hover{opacity:.6} .nav-menu-x svg{width:100%;height:100%;display:block} .nav-menu-lista{list-style:none;margin:0;padding:0;width:246px} .nav-menu-lista a,.nav-menu-lista span{ display:block;font-size:20px;line-height:1;font-weight:700;letter-spacing:-.05em; } .nav-menu-lista a{color:var(--menu-link);transition:color .2s} .nav-menu-lista a:hover{color:var(--menu-x)} /* os quatro links: cada linha tem 47 de altura, filete em cima e o ultimo fecha com o filete de baixo da lista */ /* 60 quando o logo era so a marca (h36); com o lockup (h50) vira 46 para o primeiro filete continuar em y138 */ .nav-menu-lista--links{margin-top:46px;border-bottom:1px solid var(--menu-filete)} .nav-menu-lista--links li{border-top:1px solid var(--menu-filete)} .nav-menu-lista--links a{padding:8px 0 0;height:46px;box-sizing:border-box} /* cidades e redes: mesmo corpo E mesmo peso dos links de cima — so o tom e mais apagado. Passo 32. */ .nav-menu-lista--fraca a,.nav-menu-lista--fraca span{ color:var(--menu-fraco);font-weight:700;padding:8px 0 0;height:32px;box-sizing:border-box; } .nav-menu-lista--redes{margin-top:14px;padding-top:3px;border-top:1px solid var(--menu-filete)} .nav-menu-lista--fraca a:hover{color:var(--menu-x)} /* chave do modo claro — Figma 198:2047: filete em y516, pastilha 47x20 em x43/y535, bolinha de 14. Curso = 47 - 2*2 (recuo) - 2*1 (fio) - 14 = 27. */ .tema{width:246px;margin-top:11px;padding-top:19px;border-top:1px solid var(--menu-filete)} .tema-btn{ display:block;width:47px;height:20px;padding:2px;border-radius:10px; background:none;border:1px solid var(--menu-filete);cursor:pointer; transition:border-color .2s; } .tema-btn:hover{border-color:var(--menu-link)} .tema-bola{ display:block;width:14px;height:14px;border-radius:50%; background:var(--menu-link); transform:translateX(0);transition:transform .25s,background-color .2s; } :root[data-tema="light"] .tema-bola{transform:translateX(27px)} .tema-btn:focus-visible{outline:2px solid var(--menu-link);outline-offset:3px} /* pe da gaveta: still + texto, ancorado embaixo */ .nav-menu-pe{margin-top:auto;width:246px} .nav-menu-pe img{ display:block;width:223px;height:125px;margin-left:2px;object-fit:cover;background:var(--tile-bg); } .nav-menu-pe p{ font-size:13px;line-height:16px;color:var(--menu-x); margin:26px 0 0; /* imagem y834 -> cap-top y862 */ } /* No celular a gaveta tem a mesma largura fixa mas a tela toda e menor: o corpo de 20px pesa e as linhas colam. Corpo 20 -> 18 e passo um pouco maior: 47 -> 51 nos links, 32 -> 37 nas cidades e redes. O recuo de cima cai junto com o corpo para o topo da caixa alta nao descer. */ @media (max-width:560px){ .nav-menu{width:min(86vw,314px);padding-right:20px} .nav-menu-lista{width:100%} .nav-menu-lista a,.nav-menu-lista span{font-size:18px} .nav-menu-lista--links{margin-top:40px} .nav-menu-lista--links a{padding:12px 0 0;height:51px} .nav-menu-lista--fraca a,.nav-menu-lista--fraca span{padding:9px 0 0;height:37px} .nav-menu-lista--redes{margin-top:16px;padding-top:5px} .tema{margin-top:13px;padding-top:20px} /* o still do pe sai: no celular ele empurra a lista pra cima e a gaveta vira uma imagem com menu em volta */ .nav-menu-pe{display:none} } /* ============================================================ HOME v5 — HERO CHEIO (Figma 160:14946) Artboard 1728x1044. Burger e selos por cima da imagem; logo e frase numa coluna que comeca em x964 (55.79%). ============================================================ */ .hero-full{ /* tela cheia: o hero toma a janela inteira e a pagina rola por baixo. svh e a altura "pequena" — no celular ela ja desconta a barra do navegador, entao o hero nao pula quando a barra some ao rolar. O vh na frente e a rede para quem nao entende svh. */ position:relative;width:100%;height:100vh;height:100svh; overflow:hidden;background:var(--tile-bg);color:var(--sobre-foto); } .hero-full>img,.hero-full>video{width:100%;height:100%;object-fit:cover;display:block} .hero-full::after{ /* escurece o topo e o rodape para o texto branco sempre ler */ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%); } .hero-topo{ position:absolute;top:0;left:0;right:0;z-index:2; display:flex;align-items:flex-start;justify-content:space-between;gap:16px; padding:clamp(18px,2.43vw,42px) clamp(18px,3.3vw,57px) 0 clamp(18px,2.55vw,44px); } .hero-burger{ flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer; width:clamp(22px,1.487vw,26px);margin-top:clamp(2px,.23vw,4px); display:flex;flex-direction:column;gap:clamp(4px,.313vw,5.4px); } .hero-burger span{display:block;width:100%;height:clamp(3px,.235vw,4px);background:var(--sobre-foto)} /* A fileira de selos tem as duas bordas presas: a esquerda no mesmo x do logo (55.79%) e a direita no recuo da caixa. O espaco entre eles e o que sobra, entao o primeiro selo sempre nasce alinhado com o K.O. por baixo, independente da largura da arte que o painel subir. */ .hero-awards{ display:flex;align-items:center;justify-content:space-between; width:calc(44.21vw - clamp(18px,3.3vw,57px)); gap:clamp(10px,1vw,18px); /* piso, para nao encostarem em tela estreita */ flex:0 0 auto;min-width:0; } /* os selos sao arte escura em fundo transparente: invertidos viram brancos */ .hero-awards img{width:auto;flex:0 0 auto;filter:var(--selo-filtro);height:clamp(26px,2.89vw,50px)} .hero-awards .mark--netflix{height:clamp(21px,2.31vw,40px)} .hero-awards .mark--cannes{height:clamp(16px,1.74vw,30px)} .hero-awards .mark--clio{height:clamp(11px,1.22vw,21px)} .hero-logo{ position:absolute;left:55.79%;top:16.52%;z-index:2; width:8.22vw;max-width:142px; /* K.svg oficial: 360x259, K ocupa a caixa toda */ } .hero-logo img{width:100%;height:auto} .hero-frase{ /* ancorada pelo pe (Figma: bloco termina em y938 de 1044) — assim o numero de linhas pode variar sem vazar do hero */ position:absolute;left:55.79%;bottom:10.15%;z-index:2; width:37.21vw;max-width:643px;margin:0; font-size:clamp(16px,1.56vw,27px);font-weight:700;line-height:1.28; } @media (max-width:900px){ .hero-awards{display:none} .hero-logo{left:var(--pad);right:var(--pad);top:22%;width:auto;max-width:none} .hero-logo img{width:min(30.8vw,154px)} .hero-frase{ left:var(--pad);right:var(--pad);top:auto;bottom:clamp(24px,6vw,48px); width:auto;max-width:none;font-size:clamp(15px,4.2vw,20px); } } /* ============================================================ SECOES DA HOME — titulo + link, e blocos de 3 cards + destaque Grade de 3 colunas: 535px cada com 16px de gutter sobre 1728. ============================================================ */ .secao{padding-top:clamp(34px,4.28vw,74px)} /* Figma 160:14946: o ultimo bloco termina em y4552 e o rodape comeca em y4773 — 221 de respiro antes da faixa escura */ .secao:last-child{padding-bottom:var(--respiro-rodape)} .secao-cabeca{ display:flex;align-items:baseline;justify-content:space-between; gap:clamp(16px,2vw,34px);padding-bottom:clamp(20px,2.49vw,43px); } .secao-titulo{ font-size:clamp(22px,2.08vw,36px);font-weight:500;letter-spacing:-.01em; color:var(--titulo-secao);margin:0; } .bloco{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(30px,3.76vw,65px) var(--gut); } .bloco+.bloco{margin-top:clamp(30px,3.76vw,65px)} .card{display:block} .card img,.card video,.card-video{width:100%;aspect-ratio:535/301;object-fit:cover;background:var(--tile-bg);display:block} .card-meta{ display:flex;align-items:flex-start;justify-content:space-between; gap:10px;padding-top:9px; /* Figma: base do card y430 -> topo do FEATURED y441 */ } /* o retangulo do video/imagem nao e link: quem leva ao projeto e o nome */ .card-link{display:block;color:inherit} .card-link--morto{cursor:default} .card-tag{display:block;font-size:14px;font-weight:700;line-height:1.25} .card-name{display:block;font-size:13px;font-weight:400;line-height:1.25;margin-top:1px} a.card-link{transition:opacity .2s} a.card-link:hover{opacity:.6} .card-ver{flex:0 0 auto;font-size:13px;font-weight:400;transition:opacity .2s} .card-ver:hover{opacity:.6} /* ---- mini player: so aparece com o mouse em cima ---- */ .card-video{position:relative;overflow:hidden} .card-video video{width:100%;height:100%;object-fit:cover;display:block} .vplayer{ position:absolute;left:0;right:0;bottom:0;z-index:2; display:flex;align-items:center;gap:10px; padding:10px clamp(10px,.93vw,16px) clamp(10px,.93vw,14px); background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0)); opacity:0;transform:translateY(6px);pointer-events:none; transition:opacity .22s,transform .22s; } .card-video:hover .vplayer, .card-video:focus-within .vplayer{opacity:1;transform:none;pointer-events:auto} /* sem mouse nao existe hover: no celular o player fica sempre visivel, senao o botao de play viraria um retangulo morto */ @media (hover:none){ .vplayer{opacity:1;transform:none;pointer-events:auto} } .vplayer-btn{ flex:0 0 auto;width:20px;height:20px;padding:0;border:0;background:none; cursor:pointer;color:var(--sobre-foto);display:grid;place-items:center; } .vplayer-btn svg{width:11px;height:13px;fill:currentColor;display:block} .vplayer-btn[data-estado="tocando"] .vplayer-play, .vplayer-btn[data-estado="pausado"] .vplayer-pausa{display:none} .vplayer-barra{ flex:1 1 auto;min-width:0;height:20px;margin:0;padding:0; background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none; } .vplayer-barra::-webkit-slider-runnable-track{ height:3px;border-radius:2px; background:linear-gradient(to right,var(--sobre-foto) var(--tocado,0%),var(--sobre-foto-fraco) var(--tocado,0%)); } .vplayer-barra::-moz-range-track{height:3px;border-radius:2px;background:var(--sobre-foto-fraco)} .vplayer-barra::-moz-range-progress{height:3px;border-radius:2px;background:var(--sobre-foto)} .vplayer-barra::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%; background:var(--sobre-foto);border:0;margin-top:-4px; } .vplayer-barra::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--sobre-foto);border:0} .vplayer-barra:focus-visible{outline:2px solid var(--sobre-foto);outline-offset:3px} /* destaque: imagem larga ocupando 2 colunas, texto na terceira */ .destaque{grid-column:span 2} .destaque img,.destaque video,.destaque .card-video{width:100%;aspect-ratio:1082/609;object-fit:cover;background:var(--tile-bg);display:block} .destaque-lado{display:flex;flex-direction:column;justify-content:space-between;gap:20px} .destaque-lado .card-meta{padding-top:0} .destaque-texto{font-size:14px;line-height:19px;margin:0} @media (max-width:1024px){ .bloco{grid-template-columns:repeat(2,minmax(0,1fr))} .destaque{grid-column:span 2} .destaque-lado{grid-column:span 2} .destaque-lado{flex-direction:row;align-items:flex-start;justify-content:space-between} .destaque-texto{max-width:60ch} } @media (max-width:768px){ .bloco{grid-template-columns:1fr;gap:26px} .destaque,.destaque-lado{grid-column:auto} .destaque img,.destaque video{aspect-ratio:535/301} .destaque-lado{flex-direction:column;gap:12px} .secao-cabeca{gap:14px} } /* ============================================================ CONTATO v4 (Figma 112:3076) — sem formulario, so os atalhos. Frame de 1728x1152. Marca d'agua: x0 y383 w1728 h801.6 (mesma proporcao do ko-watermark-light.svg, 699x324). Linhas em x52, y664/758/852, h51. ============================================================ */ .contact-v4{ position:relative;background:var(--escuro-fundo);color:var(--escuro-texto); min-height:calc(100vh - 114px); display:flex;align-items:flex-end;overflow:hidden; padding-block:clamp(80px,14vh,160px) clamp(90px,21.6vh,250px); } .contact-v4 .ko-bg{ position:absolute;left:0;bottom:-1.9vw;width:67%;height:auto; opacity:.1;pointer-events:none; /* #322a2a sobre #1b1212 = branco a 10% */ /* so o K (K.svg oficial, 360x259): a largura e a que da a mesma altura de arte do K.O. antigo — a 75% o ponto do K saia cortado embaixo */ } .contact-v4 .wrap{width:100%} .contact-actions{ position:relative;z-index:1; display:flex;flex-direction:column;gap:clamp(12px,2.49vw,43px); } .contact-row{display:flex;align-items:stretch;gap:clamp(6px,.58vw,10px)} .pill{ display:flex;align-items:center;justify-content:center;text-align:center; width:clamp(220px,18.23vw,315px);height:clamp(42px,2.95vw,51px); padding:0 clamp(10px,1vw,18px); font-size:clamp(14px,1.04vw,18px);font-weight:700;letter-spacing:-.01em; background:var(--pilula-fundo);color:var(--pilula-texto);transition:opacity .25s; } .pill--full{width:clamp(260px,21.76vw,376px)} .pill--light{background:var(--botao-fundo);color:var(--botao-texto)} .pill:hover,.pill-icon:hover{opacity:.75} .pill-icon{ flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:clamp(42px,2.95vw,51px);height:clamp(42px,2.95vw,51px); background:var(--pilula-fundo);color:var(--pilula-texto);transition:opacity .25s; } .pill-icon svg{width:52%;height:auto} .contact-rights{ position:absolute;left:var(--pad);bottom:clamp(18px,4vh,46px); font-size:12px;color:var(--faint-dark);margin:0;z-index:1; } @media (max-width:768px){ .contact-v4{min-height:auto;padding-block:clamp(70px,18vw,140px) clamp(90px,26vw,180px)} .contact-v4 .ko-bg{width:127%;left:-14%;bottom:-6vw} } /* ============================================================ SECAO ESCURA FULL-BLEED (Figma 85:3335 — Rectangle 292) ============================================================ */ .band--dark{ background:var(--escuro-fundo);color:var(--escuro-texto); margin-top:clamp(40px,7.23vw,125px); padding:clamp(40px,7.23vw,125px) 0 clamp(48px,8.5vw,147px); } .band--dark .meta-title{margin-bottom:clamp(14px,2.55vw,44px)} .band--dark .grid3{margin-top:0} .band--dark figcaption{color:var(--muted-dark)} /* o rodape encosta na banda escura: sem respiro branco entre os dois */ .band--dark + .foot{margin-top:0} main:has(> .band--dark:last-child) + .foot{margin-top:0} /* ============================================================ BRAIN DUMP — galeria em mosaico tipo cosmos.so / pinterest Colunas de CSS, nao grid: assim cada imagem guarda a propria proporcao e a altura se resolve sozinha em qualquer largura. Grid exigiria altura em px fixa, que quebra ao redimensionar. ============================================================ */ .bd-head{padding:clamp(28px,3.5vw,60px) 0 clamp(18px,2vw,34px)} .bd-head h1{font-size:clamp(22px,2.08vw,36px);font-weight:700;letter-spacing:-.02em;margin:0} .bd-head p{ font-size:clamp(13px,.98vw,17px);line-height:1.55;margin:clamp(8px,.8vw,14px) 0 0; max-width:56ch;opacity:.7; } .bd-grid{ column-count:5;column-gap:var(--gut); padding-bottom:var(--respiro-rodape); } @media (max-width:1400px){ .bd-grid{column-count:4} } @media (max-width:1100px){ .bd-grid{column-count:3} } @media (max-width:760px){ .bd-grid{column-count:2;column-gap:10px} } @media (max-width:420px){ .bd-grid{column-count:2;column-gap:8px} } .bd-item{ break-inside:avoid; /* impede a imagem de ser fatiada entre colunas */ -webkit-column-break-inside:avoid; margin:0 0 var(--gut); position:relative;display:block;width:100%; background:var(--tile-bg);overflow:hidden;cursor:zoom-in; border:0;padding:0; } @media (max-width:760px){ .bd-item{margin-bottom:10px} } .bd-item img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .bd-item:hover img{transform:scale(1.02)} .bd-item figcaption{ position:absolute;left:0;right:0;bottom:0; padding:28px 12px 10px;text-align:left; font-size:11px;line-height:1.35;color:var(--sobre-foto); background:linear-gradient(to top,rgba(0,0,0,.62),transparent); opacity:0;transition:opacity .25s;pointer-events:none; } .bd-item:hover figcaption,.bd-item:focus-visible figcaption{opacity:1} .bd-vazio{ padding:clamp(60px,10vw,140px) 0 var(--respiro-rodape);text-align:center; font-size:clamp(13px,1vw,16px);opacity:.55; } /* ---------- lightbox ---------- */ .bd-lb{ position:fixed;inset:0;z-index:200; background:var(--lb-fundo); display:flex;align-items:center;justify-content:center; padding:clamp(16px,4vw,64px); opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s; } .bd-lb[data-aberto]{opacity:1;visibility:visible} .bd-lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .bd-lb-legenda{ position:absolute;left:0;right:0;bottom:clamp(12px,2vw,26px); text-align:center;color:var(--lb-texto);opacity:.75;font-size:12px;padding:0 24px; } .bd-lb-legenda a{color:var(--lb-texto);text-decoration:underline;text-underline-offset:3px} .bd-lb button{ position:absolute;background:none;border:0;color:var(--lb-texto);cursor:pointer; padding:14px;line-height:0;opacity:.7;transition:opacity .2s; } .bd-lb button:hover{opacity:1} .bd-lb-fechar{top:clamp(8px,1.4vw,22px);right:clamp(8px,1.4vw,22px)} .bd-lb-ant{left:clamp(4px,1vw,18px);top:50%;transform:translateY(-50%)} .bd-lb-prox{right:clamp(4px,1vw,18px);top:50%;transform:translateY(-50%)} .bd-lb svg{width:clamp(20px,2vw,30px);height:auto;display:block} @media (max-width:600px){ .bd-lb-ant,.bd-lb-prox{display:none} }