/* ===== OVO FILMS — feed cinematográfico (ref. The Mill) ===== */ :root{ --black:#101820; --yellow:#FFB71B; --white:#FFFFFF; --gray:#9aa0a6; --line:rgba(255,255,255,.14); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--black); color:var(--white); font-family:'Archivo',Arial,sans-serif; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} /* ===== SCROLL REVEAL (sutil: fade + leve subida) ===== */ /* estado inicial só quando há JS (classe .js no ) -> sem flash se JS falhar */ .js .reveal{ opacity:0;transform:translateY(20px); transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1); transition-delay:var(--rd,0s);will-change:opacity,transform; } .js .reveal.is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .js .reveal{opacity:1!important;transform:none!important;transition:none!important} } .egg{display:inline-block;width:26px;flex:none;line-height:0} .egg img,.egg svg{width:100%;height:auto;display:block} /* ===== NAV ===== */ .nav{ position:fixed;top:0;left:0;right:0;z-index:60; display:flex;align-items:center;justify-content:space-between; padding:26px 5vw;mix-blend-mode:difference; } .nav__logo{display:flex;align-items:center;gap:10px} .wordmark{font-size:15px;letter-spacing:1.5px;font-weight:400;color:#fff} .wordmark strong{font-weight:600} .nav__links{display:flex;gap:34px} .nav__links a{ font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#fff; opacity:.8;transition:opacity .2s; } .nav__links a:hover{opacity:1} .nav__toggle{display:none} /* ===== HERO ===== */ .hero{position:relative;height:100vh;overflow:hidden;display:flex} .hero__media{position:absolute;inset:0;z-index:1} .hero__media iframe{width:100%;height:100%;border:0} .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* hero no mobile: slideshow leve com as capas dos projetos (sem baixar o vídeo) */ .hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;will-change:opacity,transform} .hero__slide.is-active{opacity:1;animation:heroKen 7s ease-out forwards} @keyframes heroKen{from{transform:scale(1.07)}to{transform:scale(1)}} @media(prefers-reduced-motion:reduce){.hero__slide.is-active{animation:none}} .hero__placeholder{ position:absolute;inset:0; background: radial-gradient(120% 90% at 50% 40%, rgba(255,183,27,.10), transparent 60%), linear-gradient(180deg,#16212c,#0b1117); } .hero__placeholder::after{ content:"";position:absolute;inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 2px,transparent 2px 4px); } .hero__overlay{ position:relative;z-index:3;margin:auto 0 auto 5vw;max-width:none;padding-right:5vw; } .hero__manifesto{ font-size:clamp(2rem,4.5vw,3.6rem);font-weight:300;line-height:1.1; letter-spacing:-.01em;color:#fff;margin-top:22px; } .hero__manifesto em{font-style:italic;font-weight:400;color:var(--yellow)} .hero__tag{ text-transform:uppercase;letter-spacing:4px;font-size:11px; color:var(--gray);font-weight:500; } .hero::after{content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(180deg,rgba(16,24,32,.45),rgba(16,24,32,.15) 40%,rgba(16,24,32,.7))} .hero__reel{ position:absolute;z-index:4;bottom:42px;right:5vw; display:flex;align-items:center;gap:12px; background:none;border:none;color:#fff;cursor:pointer; font-family:inherit;font-size:11px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase; } .hero__reel-play{ width:42px;height:42px;border:1px solid rgba(255,255,255,.5);border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:12px;padding-left:3px; transition:background .25s,color .25s,border-color .25s; } .hero__reel:hover .hero__reel-play{background:var(--yellow);color:var(--black);border-color:var(--yellow)} .hero__down{ position:absolute;z-index:5;bottom:38px;left:5vw; font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#fff; display:flex;align-items:center;gap:10px; } .hero__down::before{content:"";width:1px;height:34px;background:rgba(255,255,255,.6); animation:scrolline 1.8s ease-in-out infinite;transform-origin:top} @keyframes scrolline{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}} /* ===== GRAFISMOS — visor de câmera ===== */ .viewfinder{position:absolute;inset:0;z-index:4;pointer-events:none} .vf{position:absolute;width:26px;height:26px;border:1px solid rgba(255,255,255,.55)} .vf--tl{top:26px;left:26px;border-right:0;border-bottom:0} .vf--tr{top:26px;right:26px;border-left:0;border-bottom:0} .vf--bl{bottom:26px;left:26px;border-right:0;border-top:0} .vf--br{bottom:26px;right:26px;border-left:0;border-top:0} .vf__cross{position:absolute;top:50%;left:50%;width:18px;height:18px;transform:translate(-50%,-50%);opacity:.5} .vf__cross::before,.vf__cross::after{content:"";position:absolute;background:#fff} .vf__cross::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)} .vf__cross::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)} .vf__rec{position:absolute;top:24px;left:50%;transform:translateX(-50%); display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:2px;color:#fff;opacity:.75} .vf__rec i{width:7px;height:7px;border-radius:50%;background:#e0564f;animation:blink 1.3s steps(1) infinite} @keyframes blink{50%{opacity:.2}} .vf__tc{position:absolute;bottom:30px;right:26px; font-family:'Courier New',monospace;font-size:11px;letter-spacing:1px;color:#fff;opacity:.7} /* ===== RÉGUA DE PROGRESSO ===== */ .rail{ position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40; display:flex;flex-direction:column;align-items:center;gap:14px; opacity:0;transition:opacity .4s;pointer-events:none; } .rail.show{opacity:1} .rail__count{color:var(--yellow);font-size:11px;font-weight:600;letter-spacing:1px} .rail__total{color:var(--gray);font-size:11px;letter-spacing:1px} .rail__track{width:1px;height:130px;background:rgba(255,255,255,.18);position:relative;overflow:hidden} .rail__fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--yellow);transition:height .15s linear} @media(max-width:760px){.rail{display:none}} /* ===== WORK FEED ===== */ .feed{display:block} .tile{ position:relative;height:82vh;min-height:520px;overflow:hidden;cursor:pointer; display:flex;align-items:flex-end; border-top:1px solid var(--line); } .tile__media{ position:absolute;inset:0; background:#1a2530 center/cover no-repeat; transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s; filter:grayscale(.3) brightness(.78); } /* leve escurecimento p/ legibilidade do texto sobre a imagem */ .tile__media::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(16,24,32,.15),rgba(16,24,32,.35)); } .tile:hover .tile__media{transform:scale(1.05);filter:grayscale(0) brightness(.9)} .tile::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(16,24,32,.85),transparent 55%)} .tile__info{position:relative;z-index:2;padding:0 5vw 7vh;width:100%} .tile__num{ font-size:11px;font-weight:500;letter-spacing:3px;color:var(--yellow); } .tile__title{ font-size:clamp(1.7rem,4.5vw,3.4rem);font-weight:500;line-height:1.05; letter-spacing:.01em;margin:12px 0 10px; transition:transform .5s cubic-bezier(.2,.7,.2,1); } .tile:hover .tile__title{transform:translateX(14px)} .tile__cat{ text-transform:uppercase;letter-spacing:3px;font-size:11px;font-weight:500;color:var(--gray); } /* play hint */ .tile__info::after{ content:"ver projeto →";position:absolute;right:5vw;bottom:7vh; font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500; color:#fff;opacity:0;transform:translateY(8px);transition:.4s; } .tile:hover .tile__info::after{opacity:.9;transform:none} /* ===== CLIENTES (grade fixa, logos equalizados) ===== */ .clients{padding:15vh 5vw;border-top:1px solid var(--line)} .clients__label{ text-transform:uppercase;letter-spacing:4px;font-size:11px;font-weight:500;color:var(--yellow); text-align:center;margin-bottom:70px; } .clients__grid{ max-width:1080px;margin:0 auto; display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:56px 80px; } .client{display:flex;align-items:center;justify-content:center} /* altura-base (--logo-h) escalada por logo p/ EQUILIBRAR PESO ÓPTICO: wordmarks bold/densos encolhem, scripts/leves crescem, empilhados ganham altura. o multiplicador é relativo à base -> mobile só muda --logo-h e tudo escala junto. */ .clients__grid{--logo-h:29px} .client img{ max-height:var(--logo-h);max-width:118px;width:auto;object-fit:contain; opacity:.55;transition:opacity .35s; } /* PNGs já vêm branqueados; SVGs (wordmarks) viram brancos pelo filtro */ .client img[src$=".svg"]{filter:brightness(0) invert(1)} /* --- ajuste fino por logo (peso visual) --- */ .client img[src*="logo8"] {max-height:calc(var(--logo-h) * .82)} /* Nestlé: muito denso */ .client img[src*="vigor"] {max-height:calc(var(--logo-h) * .88)} /* bold pesado */ .client img[src*="habibs"] {max-height:calc(var(--logo-h) * .90)} /* bold largo */ .client img[src*="equatorial"] {max-height:calc(var(--logo-h) * .93)} .client img[src*="delphi"] {max-height:calc(var(--logo-h) * .97)} .client img[src*="mendorato"] {max-height:calc(var(--logo-h) * 1.03)} .client img[src*="crokissimo"] {max-height:calc(var(--logo-h) * 1.05)} .client img[src*="nescau"] {max-height:calc(var(--logo-h) * 1.14)} /* fino/inclinado */ .client img[src*="solito"] {max-height:calc(var(--logo-h) * 1.20)} /* script leve */ .client img[src*="santa-massa"]{max-height:calc(var(--logo-h) * 1.82);max-width:64px} /* empilhado */ .client img[src*="continental"] {max-height:calc(var(--logo-h) * 1.05);max-width:128px} /* wordmark largo/fino */ .client img[src*="pullman"] {max-height:calc(var(--logo-h) * 1.15)} /* badge c/ ondas */ .client img[src*="rap10"] {max-height:calc(var(--logo-h) * 1.05)} /* script leve */ .client img[src*="artesano"] {max-height:calc(var(--logo-h) * 1.10);max-width:104px} /* wordmark + tagline */ .client img[src*="ana-maria"] {max-height:calc(var(--logo-h) * 1.25);max-width:72px} /* script empilhado */ .client:hover img{opacity:1} @media(max-width:600px){.clients__grid{gap:40px 48px;--logo-h:23px}} /* ===== STUDIO ===== */ .studio{ position:relative;overflow:hidden; padding:24vh 5vw;border-top:1px solid var(--line); } /* fundo full-bleed; -15%/130% dá margem p/ o parallax deslocar sem mostrar borda */ .studio__bg{position:absolute;left:0;right:0;top:-22%;height:144%;z-index:0; overflow:hidden;pointer-events:none;will-change:transform} .studio__slide{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; filter:grayscale(1) contrast(1.05) brightness(.85); opacity:0;transition:opacity 1.8s ease; } .studio__slide.is-active{opacity:.42;animation:kenburns 14s ease-in-out infinite alternate} @keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.1) translate(-2%,-1%)}} /* véu escuro p/ legibilidade */ .studio::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(130% 100% at 28% 45%,rgba(16,24,32,.32),rgba(16,24,32,.72))} .studio__content{position:relative;z-index:2;max-width:1400px} @media(prefers-reduced-motion:reduce){.studio__slide.is-active{animation:none}} .studio__label,.contact__label{ text-transform:uppercase;letter-spacing:4px;font-size:11px;font-weight:500;color:var(--yellow); } .studio__statement{ margin-top:30px;font-size:clamp(1.4rem,3.2vw,2.6rem);font-weight:400; line-height:1.3;letter-spacing:0;max-width:24ch; } .studio__cols{ display:grid;grid-template-columns:repeat(2,1fr);gap:40px; margin-top:70px;max-width:760px; } .studio__cols--3{grid-template-columns:repeat(3,1fr);max-width:980px} .studio__cols span{ display:block;text-transform:uppercase;letter-spacing:2px;font-size:11px; font-weight:500;color:var(--gray);margin-bottom:12px; } .studio__cols p{font-size:.98rem;line-height:1.65;font-weight:400} .studio__more{ display:inline-block;margin-top:48px;font-size:13px;font-weight:500;letter-spacing:1px; color:#fff;border-bottom:1px solid var(--line);padding-bottom:5px; transition:color .25s,border-color .25s,gap .25s; } .studio__more:hover{color:var(--yellow);border-color:var(--yellow)} .studio__more{ display:inline-block;margin-top:46px;font-size:14px;font-weight:500;letter-spacing:1px;color:#fff; border-bottom:1px solid var(--line);padding-bottom:5px;transition:color .25s,border-color .25s; } .studio__more:hover{color:var(--yellow);border-color:var(--yellow)} /* ===== CONTATO / ORÇAMENTO ===== */ .contact{position:relative;overflow:hidden;padding:18vh 5vw 6vh;border-top:1px solid var(--line)} /* textura de fundo: fotos de bastidores em P&B, crossfade + ken burns (mesmo padrão do estúdio) */ .contact__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .contact__slide{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; filter:grayscale(1) contrast(1.05) brightness(.85); opacity:0;transition:opacity 1.8s ease;will-change:opacity,transform; } .contact__slide.is-active{opacity:.42;animation:kenburns 14s ease-in-out infinite alternate} /* gradiente p/ legibilidade: escurece base, bordas e o lado do texto */ .contact__bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg, var(--black) 0%, rgba(16,24,32,.72) 32%, rgba(16,24,32,.45) 100%), linear-gradient(0deg, var(--black) 0%, rgba(16,24,32,.30) 38%, rgba(16,24,32,.55) 100%); } @media(prefers-reduced-motion:reduce){.contact__slide.is-active{animation:none}} .contact__grid,.contact__foot{position:relative;z-index:1} .contact__grid{ max-width:1180px;margin:0 auto; display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start; } .contact__title{ margin:22px 0 18px;font-size:clamp(1.9rem,4.2vw,3.2rem); font-weight:300;line-height:1.08;letter-spacing:-.015em; } .contact__lead{color:var(--gray);font-size:1.05rem;line-height:1.6;max-width:34ch;font-weight:300} /* WhatsApp flutuante */ .wa-float{ position:fixed;right:24px;bottom:24px;z-index:80; width:56px;height:56px;border-radius:50%;background:#25D366; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .25s,box-shadow .25s; } .wa-float svg{width:30px;height:30px;fill:#fff} .wa-float:hover{transform:scale(1.08);box-shadow:0 12px 30px rgba(37,211,102,.4)} .quote__ok{ grid-column:1 / -1;color:var(--yellow);font-size:1rem;font-weight:400; padding:16px 0; } .contact__direct{margin-top:38px;display:flex;flex-direction:column;gap:18px} .phoneblock{display:flex;flex-direction:column;gap:10px} .phoneblock__label{ text-transform:uppercase;letter-spacing:3px;font-size:10px;font-weight:600; color:var(--yellow); } .phone{ display:inline-flex;align-items:center;gap:14px;width:fit-content; font-size:clamp(1.5rem,2.9vw,2.15rem);font-weight:400;letter-spacing:.5px; color:#fff;transition:color .25s;position:relative; } .phone__ic{ width:1em;height:1em;flex:none;fill:var(--yellow); transform:translateY(1px);transition:transform .25s; } .phone__num{position:relative;padding-bottom:4px} /* sublinhado que cresce no hover */ .phone__num::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:0; background:var(--yellow);transition:width .35s cubic-bezier(.22,.61,.36,1); } .phone:hover{color:var(--yellow)} .phone:hover .phone__num::after{width:100%} .phone:hover .phone__ic{transform:translateY(1px) rotate(-8deg) scale(1.06)} .contact__addr{ font-style:normal;color:var(--gray);font-size:13px;line-height:1.6;letter-spacing:.3px; } .contact__social{display:flex;gap:18px;align-items:center} .contact__social a{ display:inline-flex;align-items:center;justify-content:center;color:var(--gray);transition:color .25s,transform .25s; } .contact__social svg{width:22px;height:22px;fill:currentColor;display:block} .contact__social a:hover{color:var(--yellow);transform:translateY(-2px)} /* formulário */ .quote{display:grid;grid-template-columns:1fr 1fr;gap:30px 26px} .field{position:relative} .field--full{grid-column:1 / -1} .field input,.field select,.field textarea{ width:100%;background:transparent;border:0;border-bottom:1px solid var(--line); color:#fff;font-family:inherit;font-size:1rem;font-weight:300; padding:14px 0 10px;outline:none;transition:border-color .25s;resize:none; } .field textarea{min-height:54px} .field select{cursor:pointer;color:#fff} .field select option{background:var(--black);color:#fff} .field label{ position:absolute;left:0;top:14px;color:var(--gray);font-size:1rem;font-weight:300; pointer-events:none;transition:transform .2s,font-size .2s,color .2s;transform-origin:left; } .field label span{font-size:.8em;opacity:.7} /* label sobe quando focado ou preenchido */ .field input:focus~label,.field textarea:focus~label, .field input:not(:placeholder-shown)~label,.field textarea:not(:placeholder-shown)~label, .field--select select:focus~label,.field--select select:valid~label{ transform:translateY(-22px) scale(.78);color:var(--yellow); } .field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--yellow)} .field .invalid,.field input.invalid,.field select.invalid,.field textarea.invalid{border-bottom-color:#e0564f} /* placeholder vazio p/ acionar :not(:placeholder-shown) */ .field input,.field textarea{} .quote__send{ grid-column:1 / -1;justify-self:start;margin-top:8px; background:var(--yellow);color:var(--black);border:0;cursor:pointer; padding:16px 32px;border-radius:50px;font-family:inherit;font-weight:600;font-size:14.5px; letter-spacing:.2px;transition:transform .25s,box-shadow .25s; } .quote__send:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,183,27,.22)} .quote__hint{grid-column:1 / -1;color:var(--gray);font-size:12.5px;font-weight:300;margin-top:-12px} .contact__foot{ max-width:1180px;margin:14vh auto 0;padding-top:30px;border-top:1px solid var(--line); font-size:12px;letter-spacing:2px;color:var(--gray);text-align:center; } .contact__foot a{color:var(--gray);transition:color .25s} .contact__foot a:hover{color:var(--yellow)} .contact__footnav{display:flex;gap:28px;justify-content:center;margin-bottom:16px;letter-spacing:1px} .contact__footnav a{font-weight:500} /* ===== LIGHTBOX ===== */ .lightbox{ position:fixed;inset:0;z-index:100;background:rgba(8,12,16,.96); display:none;align-items:center;justify-content:center;padding:5vw; } .lightbox.open{display:flex} .lightbox__frame{width:min(1100px,100%);aspect-ratio:16/9} .lightbox__frame iframe{width:100%;height:100%;border:0} .lightbox__close{ position:absolute;top:24px;right:30px;background:none;border:none;color:#fff; font-size:26px;cursor:pointer;line-height:1; } .lightbox__frame img{width:100%;height:100%;object-fit:contain} /* ===== PÁGINA DE PROJETO ===== */ .page-project{padding-top:0} .project{padding-bottom:0} /* full-bleed: estoura a largura do container até as bordas da viewport */ .full-bleed{width:100vw;margin-left:calc(50% - 50vw)} .project__wrap{max-width:1180px;margin:0 auto;padding:0 5vw} .project__top{max-width:1180px;margin:0 auto;padding:64px 5vw 44px} .back-link{ display:inline-block;text-transform:uppercase;letter-spacing:2px;font-size:12px; font-weight:500;color:var(--gray);margin-bottom:60px;transition:color .25s; } .back-link:hover{color:#fff} .project__head{ display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px; padding-bottom:30px;border-bottom:1px solid var(--line); } .project__cat{ text-transform:uppercase;letter-spacing:3px;font-size:11px;font-weight:500;color:var(--yellow); } .project__title{ font-size:clamp(2.2rem,6vw,4.8rem);font-weight:300;line-height:1; letter-spacing:-.015em;margin:18px 0 0; } .project__meta{ display:flex;flex-direction:column;gap:4px;text-align:right; color:var(--gray);font-size:13px;letter-spacing:1px;text-transform:uppercase; } .project__meta span:first-child{color:#fff;font-weight:500} .project__player{position:relative;aspect-ratio:16/9;background:#0b1117} .project__player iframe,.project__player video{width:100%;height:100%;border:0;display:block;object-fit:cover} /* facade do player: capa limpa + play; o YouTube só carrega ao clicar (marca mínima) */ .ytlite{position:absolute;inset:0;padding:0;margin:0;border:0;cursor:pointer;background:#0b1117;overflow:hidden} .ytlite__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)} .ytlite::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,24,32,.12),rgba(16,24,32,.34));transition:background .3s} .ytlite:hover .ytlite__thumb{transform:scale(1.04)} .ytlite__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(16,24,32,.5);border:1.5px solid rgba(255,255,255,.9);transition:background .25s,border-color .25s,transform .25s;z-index:1} .ytlite__play::after{content:"";position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff;transition:border-color .25s} .ytlite:hover .ytlite__play{background:var(--yellow);border-color:var(--yellow);transform:translate(-50%,-50%) scale(1.06)} .ytlite:hover .ytlite__play::after{border-left-color:var(--black)} .project__player--main{margin:0 0 0} .project__body{ display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);gap:64px; padding:90px 0 0;align-items:start; } /* corpo com galeria: layout justificado de 2 zonas (posicionado em projeto.js) */ .project__body--grid{display:block;position:relative;padding:90px 0 0} .project__h{ text-transform:uppercase;letter-spacing:2.5px;font-size:11px;font-weight:600; color:var(--gray);margin-bottom:24px; } .project__about p{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.7;font-weight:300} .ficha{display:flex;flex-direction:column} .ficha__row{ display:flex;justify-content:space-between;gap:20px; padding:14px 0;border-top:1px solid var(--line);font-size:13.5px; } .ficha__row:last-child{border-bottom:1px solid var(--line)} .ficha__row dt{color:var(--gray);font-weight:500;letter-spacing:.3px} .ficha__row dd{text-align:right;font-weight:400} /* ficha agrupada por categoria */ .ficha__group{margin-bottom:28px} .ficha__group:last-child{margin-bottom:0} .ficha__grouptitle{ text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:600; color:var(--yellow);margin-bottom:2px; } .ficha__group .ficha__row{font-size:13px} .project__making{padding-top:100px} .project__films{padding-top:100px} .project__filmgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .project__film{margin:0} .project__film figcaption{margin-top:12px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gray)} @media(max-width:760px){.project__filmgrid{grid-template-columns:1fr;gap:32px}} /* mosaico justificado (posicionamento calculado em projeto.js) */ .mosaic{position:relative;width:100%} .mosaic__item{ border:0;padding:0;margin:0;cursor:pointer;overflow:hidden;background:#0b1117; display:block; } .mosaic__item img{ width:100%;height:100%;object-fit:cover;display:block; filter:grayscale(.3) brightness(.92);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s; } .mosaic__item:hover img{transform:scale(1.05);filter:none} /* banda do próximo projeto */ .next-band{ position:relative;display:block;margin-top:110px;min-height:46vh;overflow:hidden; } .next-band{background-size:cover;background-position:center} .next-band::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(16,24,32,.82),rgba(16,24,32,.5));transition:background .4s} .next-band:hover::after{background:linear-gradient(0deg,rgba(16,24,32,.7),rgba(16,24,32,.35))} .next-band__inner{ position:relative;z-index:2;height:100%;min-height:46vh; display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center;gap:10px;padding:60px 5vw; } .next-band__inner span{text-transform:uppercase;letter-spacing:3px;font-size:11px;color:var(--gray)} .next-band__inner strong{ font-size:clamp(1.8rem,5vw,3.4rem);font-weight:300;letter-spacing:-.01em; transition:transform .4s cubic-bezier(.2,.7,.2,1); } .next-band:hover .next-band__inner strong{transform:translateY(-4px)} .next-band__inner em{font-style:normal;text-transform:uppercase;letter-spacing:2px; font-size:12px;color:var(--yellow)} .project__empty{padding:200px 5vw;text-align:center;color:var(--gray)} /* ===== RESPONSIVE ===== */ @media(max-width:760px){ .nav__toggle{ display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer; width:30px;height:22px;justify-content:center;position:relative;z-index:2; } .nav__toggle span{height:2px;width:100%;background:#fff;transition:transform .3s,opacity .3s} /* menu aberto: desliga o blend da nav (senão o fundo do menu some sobre o hero) e vira o hambúrguer em X */ .nav:has(.nav__links.open){mix-blend-mode:normal} .nav:has(.nav__links.open) .nav__toggle span:nth-child(1){transform:translateY(3.5px) rotate(45deg)} .nav:has(.nav__links.open) .nav__toggle span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)} .nav__links{ position:fixed;inset:0;background:var(--black);flex-direction:column; align-items:center;justify-content:center;gap:34px; transform:translateX(100%);transition:transform .4s;mix-blend-mode:normal; } .nav__links.open{transform:none} .nav__links a{font-size:20px} .tile{height:70vh;min-height:420px} .studio__cols,.studio__cols--3{grid-template-columns:1fr;gap:30px} .contact__grid{grid-template-columns:1fr;gap:64px} .quote{grid-template-columns:1fr;gap:28px} .marquee__track img{height:28px} .project__head{grid-template-columns:1fr;align-items:start;gap:16px} .project__meta{text-align:left;flex-direction:row;gap:16px} .project__body{grid-template-columns:1fr;gap:48px;padding-top:60px} .project__main .collage{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(54px,15vw,110px)} .project__top{padding-top:48px} } /* ===== PÁGINA LEGAL (cookies / privacidade) ===== */ .legal{max-width:780px;margin:0 auto;padding:24vh 6vw 10vh} .legal__eyebrow{text-transform:uppercase;letter-spacing:4px;font-size:11px;font-weight:600;color:var(--yellow);margin-bottom:18px} .legal__title{font-size:clamp(2rem,5vw,3rem);font-weight:300;letter-spacing:-.015em;line-height:1.08} .legal__updated{color:var(--gray);font-size:13px;margin-top:14px;letter-spacing:.3px} .legal__body{margin-top:48px} .legal__body h2{font-size:1.15rem;font-weight:600;margin:38px 0 12px;letter-spacing:.2px} .legal__body p{color:#cfd3d7;font-weight:300;line-height:1.75;font-size:1rem;margin-bottom:10px} .legal__body a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px} .legal__list{margin:6px 0 10px;padding-left:20px} .legal__list li{color:#cfd3d7;font-weight:300;line-height:1.7;margin-bottom:8px} .legal__list ul{margin:8px 0 8px;padding-left:20px} .legal__back{ display:inline-block;margin-top:54px;font-size:13px;font-weight:500;letter-spacing:1px; color:#fff;border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .25s,border-color .25s; } .legal__back:hover{color:var(--yellow);border-color:var(--yellow)} .legal__foot{border-top:1px solid var(--line)} /* ===== BANNER DE COOKIES ===== */ .cookiebar{ position:fixed;left:24px;right:24px;bottom:24px;z-index:200;max-width:560px;margin:0 auto; display:flex;align-items:center;gap:22px;flex-wrap:wrap; background:rgba(18,26,34,.92);backdrop-filter:blur(10px); border:1px solid var(--line);border-radius:14px;padding:18px 22px; box-shadow:0 18px 50px rgba(0,0,0,.45); opacity:0;transform:translateY(20px);transition:opacity .42s ease,transform .42s ease; } .cookiebar.show{opacity:1;transform:none} .cookiebar__txt{flex:1 1 240px;font-size:13px;line-height:1.55;color:var(--gray);font-weight:300} .cookiebar__txt a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px} .cookiebar__btns{display:flex;gap:10px;flex:none} .cookiebar__btn{ font:inherit;font-size:12px;font-weight:600;letter-spacing:.5px;cursor:pointer; padding:10px 20px;border-radius:30px;border:1px solid var(--yellow); background:var(--yellow);color:var(--black);transition:filter .2s,background .2s,color .2s; } .cookiebar__btn:hover{filter:brightness(1.08)} .cookiebar__btn--ghost{background:transparent;color:#fff;border-color:var(--line)} .cookiebar__btn--ghost:hover{border-color:#fff;background:transparent;filter:none} @media(prefers-reduced-motion:reduce){.cookiebar{transition:none}} @media(max-width:600px){ .cookiebar{left:12px;right:12px;bottom:12px;padding:16px 18px;gap:14px} .cookiebar__btns{flex:1 1 100%} .cookiebar__btn{flex:1} } /* ===== PÁGINA QUEM SOMOS ===== */ .sobre{max-width:1180px;margin:0 auto;padding:0 5vw 6vh} .sobre__intro{padding:24vh 0 0} .sobre__intro .back-link{display:inline-block;margin-bottom:34px} .sobre__eyebrow{text-transform:uppercase;letter-spacing:4px;font-size:11px;font-weight:600;color:var(--yellow)} .sobre__title{margin-top:20px;font-size:clamp(2.2rem,6vw,4rem);font-weight:300;line-height:1.05;letter-spacing:-.02em} .sobre__text{margin-top:38px;max-width:60ch;display:flex;flex-direction:column;gap:18px} .sobre__text p{color:#cfd3d7;font-weight:300;line-height:1.8;font-size:1.08rem} .sobre__text strong{color:#fff;font-weight:500} .sobre__cols{ display:grid;grid-template-columns:repeat(3,1fr);gap:40px; margin:64px 0;padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .sobre__cols span{display:block;text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:500;color:var(--gray);margin-bottom:12px} .sobre__cols p{font-size:.98rem;line-height:1.6;font-weight:400} /* galeria full-bleed (quebra a coluna de texto p/ ocupar a largura) */ .sobre__gallery{margin-top:20px;width:100vw;margin-left:calc(50% - 50vw);padding:0 clamp(16px,4vw,52px)} .sobre__gallerylabel{text-transform:uppercase;letter-spacing:4px;font-size:11px;font-weight:600;color:var(--yellow);margin-bottom:26px} /* collage editorial: grid de 12 colunas, itens com spans variados */ .collage{ display:grid;grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(46px,5.4vw,92px);gap:10px;grid-auto-flow:dense; } .collage__item{ overflow:hidden;position:relative;margin:0;padding:0;border:0;background:#0b1117;cursor:zoom-in; opacity:0;transform:scale(.985);transition:opacity .7s ease,transform .7s ease; } .collage__item.in{opacity:1;transform:none} .collage__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,.61,.36,1)} .collage__item:hover img{transform:scale(1.05)} /* tamanhos */ .c-std {grid-column:span 4;grid-row:span 4} .c-tall {grid-column:span 3;grid-row:span 5} .c-wide {grid-column:span 5;grid-row:span 3} .c-small{grid-column:span 3;grid-row:span 3} .c-fwide{grid-column:span 7;grid-row:span 5} .c-ftall{grid-column:span 4;grid-row:span 7} @media(prefers-reduced-motion:reduce){.collage__item{opacity:1;transform:none;transition:none}} @media(max-width:760px){ .collage{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(58px,15vw,120px);gap:7px} .c-std{grid-column:span 3;grid-row:span 3} .c-tall{grid-column:span 3;grid-row:span 4} .c-wide{grid-column:span 6;grid-row:span 3} .c-small{grid-column:span 3;grid-row:span 3} .c-fwide{grid-column:span 6;grid-row:span 4} .c-ftall{grid-column:span 6;grid-row:span 5} } .sobre__cta{text-align:center;padding:16vh 0 6vh} .sobre__cta h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:300;letter-spacing:-.01em} .sobre__ctabtn{ display:inline-block;margin-top:28px;padding:15px 34px;border-radius:34px; background:var(--yellow);color:var(--black);font-weight:600;font-size:14px;letter-spacing:.5px; transition:filter .2s,transform .2s; } .sobre__ctabtn:hover{filter:brightness(1.08);transform:translateY(-2px)} @media(max-width:760px){ .sobre__cols{grid-template-columns:1fr;gap:28px} }