/* =========================================================== STUDIO MAIO, sistema visual v2 Minimalismo suíço: branco, preto, grotesca pesada, alto contraste =========================================================== */ /* Fontes carregadas via no de cada página, em vez de @import (que bloqueia a renderização). */ /* Oldsman No.1: fonte da logo, vendorizada localmente (zero CDN). Uso exclusivo nos numerais editoriais de seção. */ @font-face{ font-family:'Oldsman No1'; src:url('fonts/oldsman-no1.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } :root{ --paper: #ffffff; /* branco puro */ --paper-2: #f4f1ec; /* areia clareada para seções */ --ink: #0a0a0a; /* black da marca */ --ink-soft: #625e59; /* terroso escuro, corpo secundário, 6.4:1 sobre branco (AA) */ --line: #e6e1d8; /* divisores em tom areia */ --accent: #aa7259; /* terracota Arizona Clay, acento oficial */ --silver: #b7ada2; /* Silver Chalice */ --display: 'Archivo', system-ui, sans-serif; /* títulos */ --sans: 'Bellota Text', system-ui, sans-serif; /* corpo, fonte secundária oficial */ --num: 'Oldsman No1', 'Archivo', serif; /* numerais editoriais de seção */ --max: 1280px; --gutter: clamp(1.4rem, 5vw, 5rem); --t-slow: 0.9s cubic-bezier(.16,1,.3,1); --t-med: 0.5s cubic-bezier(.16,1,.3,1); --t-fast: 0.16s cubic-bezier(.16,1,.3,1); /* feedback de toque/press */ --t-hover: 0.2s ease; /* hover de cor e opacidade */ } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; } body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; line-height:1.6; font-size:clamp(1rem, 0.6rem + 0.5vw, 1.08rem); letter-spacing:0; overflow-x:hidden; } /* grão sutil, bem mais discreto sobre o branco */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.018; 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='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img{ display:block; width:100%; height:auto; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); } /* ---------- tipografia: títulos grossos, alto contraste ---------- */ h1,h2,h3{ font-family:var(--display); font-weight:500; line-height:1.0; letter-spacing:-0.012em; overflow-wrap:break-word; } em{ font-style:normal; font-weight:400; } /* sem itálico, contraste por peso */ .eyebrow{ font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); } /* ---------- header ---------- */ header.nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.4rem var(--gutter); color:#fff; transition:background var(--t-med), color var(--t-med); } header.nav.solid{ color:var(--ink); } header.nav::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity var(--t-med); } header.nav.solid::before{ opacity:1; } .logo{ display:inline-flex; align-items:center; line-height:0; } .logo img{ height:24px; width:auto; display:block; } header.nav .logo img{ height:30px; } footer.foot .logo img{ height:30px; } /* logo: claro sobre fundo escuro (topo da hero), escuro quando header vira sólido */ .logo .lg-dark{ display:none; } .logo .lg-light{ display:block; } header.nav.solid .logo .lg-light{ display:none; } header.nav.solid .logo .lg-dark{ display:block; } /* páginas internas sem hero: header já entra sólido via JS/classe */ footer.foot .logo .lg-dark{ display:none; } footer.foot .logo .lg-light{ display:block; } .menu{ display:flex; gap:2rem; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .menu a{ position:relative; padding-bottom:2px; } .menu a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .26s cubic-bezier(.16,1,.3,1); } .menu a:hover::after, .menu a.active::after{ transform:scaleX(1); } .menu-btn{ display:none; background:none; border:0; color:inherit; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; } /* ---------- hero home ---------- */ .hero-slides{ position:relative; height:100svh; min-height:560px; width:100%; overflow:hidden; background:#0a0a0a; } .hero-slides .slides{ position:absolute; inset:0; overflow:hidden; } .hero-slides .track{ display:flex; height:100%; width:100%; transition:transform 1.1s cubic-bezier(.65,0,.35,1); will-change:transform; } .hero-slides .slide{ position:relative; margin:0; flex:0 0 100%; height:100%; } .hero-slides .slide img{ width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block; } /* setas discretas */ .hero-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:20; width:56px; height:56px; border:0; cursor:pointer; background:transparent; display:flex; align-items:center; justify-content:center; opacity:.55; transition:opacity var(--t-hover), transform var(--t-fast); } .hero-nav:hover{ opacity:1; } .hero-nav:active{ transform:translateY(-50%) scale(.9); } .hero-nav.prev{ left:clamp(.6rem,2vw,1.6rem); } .hero-nav.next{ right:clamp(.6rem,2vw,1.6rem); } .hero-nav span{ width:16px; height:16px; border-top:1.5px solid #fff; border-right:1.5px solid #fff; display:block; } .hero-nav.prev span{ transform:rotate(-135deg); margin-left:5px; } .hero-nav.next span{ transform:rotate(45deg); margin-right:5px; } @media (max-width:600px){ .hero-nav{ width:44px; height:44px; opacity:.7; } } .hero-slides::before{ content:""; position:absolute; top:0; left:0; right:0; height:30%; z-index:2; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.32), transparent); } .hero-slides .scroll-cue{ position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); z-index:3; opacity:0; animation:fade 1s 1.2s forwards; pointer-events:none; filter:drop-shadow(0 1px 6px rgba(0,0,0,.45)); } .hero-slides .scroll-cue::after{ content:""; display:block; width:1.1rem; height:1.1rem; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); animation:cue 2.2s ease-in-out 1.6s infinite; } @keyframes cue{ 0%{ transform:translateY(-0.35rem) rotate(45deg); opacity:.35; } 50%{ transform:translateY(0.35rem) rotate(45deg); opacity:1; } 100%{ transform:translateY(-0.35rem) rotate(45deg); opacity:.35; } } /* ---------- bloco tese (composição editorial) ---------- */ .tese{ background:var(--ink); color:var(--paper); padding-block:clamp(5rem,12vw,11rem); } .tese .tese-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4.5rem); } .tese-lead{ font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,1rem+3vw,3.4rem); line-height:1.12; letter-spacing:-0.015em; text-align:left; max-width:20ch; color:var(--paper); margin:0; text-wrap:balance; } .tese-lead::after{ content:""; display:block; width:64px; height:2px; background:var(--accent); margin-top:clamp(1.4rem,3vw,2.2rem); } .tese-body{ max-width:62ch; } .tese-body p{ font-family:var(--sans); font-weight:300; font-size:clamp(1.05rem,.95rem+.6vw,1.32rem); line-height:1.7; color:var(--silver); text-align:left; margin:0; text-wrap:pretty; } .tese-body p + p{ margin-top:1.6rem; } @media (min-width:880px){ .tese .tese-grid{ grid-template-columns:1.05fr 1fr; align-items:center; gap:clamp(3rem,6vw,6rem); } .tese-lead{ font-size:clamp(2.2rem,1rem+2.6vw,3.4rem); } } /* ---------- princípios ---------- */ .principles{ padding-top:clamp(5rem,12vw,10rem); padding-bottom:clamp(3.5rem,8vw,6.5rem); } .principles .row{ display:grid; grid-template-columns:6rem 1fr; gap:clamp(1rem,4vw,4rem); padding-block:clamp(2.4rem,5vw,4rem); border-top:1px solid var(--ink); align-items:start; } .principles .row:last-child{ border-bottom:1px solid var(--ink); } .principles .num{ font-family:var(--num); font-weight:400; font-size:clamp(2.6rem, 1.4rem + 3vw, 4rem); line-height:.82; color:var(--accent); } .principles h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,1rem+2vw,2.6rem); margin-bottom:1rem; text-transform:uppercase; letter-spacing:-0.01em; } .principles p{ max-width:48ch; color:var(--ink-soft); } /* ---------- fechamento / CTA ---------- */ .band-white{ background:var(--paper); height:clamp(4rem,9vw,7.5rem); } .closing{ background:var(--ink); color:var(--paper); padding-block:clamp(6rem,14vw,11rem); text-align:center; } .closing-inner{ display:flex; flex-direction:column; align-items:center; } .closing-title{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,1rem+3.4vw,3.8rem); line-height:1.04; text-transform:uppercase; letter-spacing:-0.02em; text-wrap:balance; } .closing-body{ max-width:46ch; margin-top:clamp(1.8rem,4vw,2.8rem); } .closing-body p{ font-size:clamp(1.05rem,1rem+.5vw,1.25rem); line-height:1.6; color:var(--silver); text-wrap:pretty; } .closing-body p + p{ margin-top:1.1rem; } .closing .cta{ display:inline-block; margin-top:clamp(2.8rem,6vw,4rem); font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; background:var(--paper); color:var(--ink); border:2px solid var(--paper); padding:1.1rem 2.4rem; transition:background var(--t-hover), color var(--t-hover), transform var(--t-fast); } .closing .cta:hover{ background:transparent; color:var(--paper); } .closing .cta:active{ transform:scale(.97); } /* ---------- página processo (fusão processo + serviços) ---------- */ .proc-hero{ position:relative; height:88svh; min-height:560px; overflow:hidden; } .proc-hero.sobre-hero{ height:66svh; min-height:440px; } .proc-hero img{ width:100%; height:100%; object-fit:cover; } .proc-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.34) 0%, rgba(10,10,10,.05) 38%, rgba(10,10,10,.62) 100%); } .proc-hero-cap{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(3rem,7vw,6rem); z-index:1; } .proc-hero-cap h1{ font-family:var(--display); font-weight:400; color:var(--paper); font-size:clamp(2.4rem,1rem+6vw,5.4rem); line-height:.96; text-transform:uppercase; letter-spacing:-0.02em; text-wrap:balance; } .proc-hero-cap h1 em{ font-style:normal; font-weight:400; } .proc-hero-cap h1 .hl{ font-weight:500; } .proc-hero-cap p{ color:var(--paper); opacity:.92; max-width:54ch; margin-top:1.4rem; font-size:clamp(1rem,.95rem+.4vw,1.18rem); line-height:1.6; text-wrap:pretty; } .journey{ position:relative; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); padding-block:clamp(4rem,9vw,8rem); } .journey::before{ content:""; position:absolute; left:calc(var(--gutter) - 1px); top:0; bottom:0; width:1px; background:linear-gradient(180deg, transparent, var(--line) 6%, var(--line) 94%, transparent); } @media (max-width:879px){ .journey::before{ display:none; } } .stage{ display:grid; grid-template-columns:1fr; gap:clamp(1.4rem,3vw,2.4rem); padding-block:clamp(3rem,7vw,6rem); position:relative; } .stage-img{ margin:0; overflow:hidden; background:var(--paper-2); } .stage-img img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.04); transition:transform .9s cubic-bezier(.2,.7,.2,1); } .stage-num{ font-family:var(--num); font-weight:400; font-size:1rem; color:var(--accent); letter-spacing:.08em; } .stage-text h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.8rem,1rem+3vw,3.2rem); text-transform:uppercase; letter-spacing:-0.02em; line-height:1; margin:.5rem 0 1.1rem; text-wrap:balance; } .stage-text p{ max-width:54ch; color:var(--ink-soft); font-size:1.04rem; line-height:1.66; text-wrap:pretty; } .stage-do{ margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.92rem; color:var(--ink); letter-spacing:.01em; } .stage-do span{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; } @media (min-width:880px){ .journey::before{ left:50%; } .stage{ grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; } .stage-text{ padding-left:clamp(1rem,3vw,3rem); } /* alterna: etapas pares com imagem à direita */ .stage:nth-child(even) .stage-img{ order:2; } .stage:nth-child(even) .stage-text{ order:1; padding-left:0; padding-right:clamp(1rem,3vw,3rem); text-align:right; } .stage:nth-child(even) .stage-text p, .stage:nth-child(even) .stage-text .stage-do{ margin-left:auto; } .stage:nth-child(even) .stage-text p{ max-width:54ch; } /* ponto na linha do tempo */ .stage::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:11px; border-radius:50%; background:var(--paper); border:2px solid var(--accent); transform:translate(-50%,-50%); z-index:2; } } /* etapa-diferencial: leve destaque */ .feature-stage .stage-do span{ color:var(--accent); } @media (max-width:879px){ .stage-img{ aspect-ratio:4/5; } } /* ---------- home: os arquitetos ---------- */ .architects{ display:grid; grid-template-columns:1fr; } .architects-img{ background:var(--paper-2); aspect-ratio:16/9; } .architects-photo{ width:100%; height:100%; object-fit:cover; display:block; } .architects-text{ padding:clamp(2.4rem,6vw,5rem) var(--gutter); display:flex; flex-direction:column; justify-content:center; } .architects-text h2{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,1rem+3.5vw,3.4rem); text-transform:uppercase; letter-spacing:-0.02em; line-height:1; margin:1rem 0 1.6rem; } .architects-text p{ max-width:50ch; color:var(--ink-soft); font-size:1.04rem; line-height:1.66; margin-bottom:1.1rem; text-wrap:pretty; } .architects-quote{ font-family:var(--display)!important; font-size:clamp(1.3rem,1rem+1.1vw,1.7rem)!important; line-height:1.3!important; color:var(--ink)!important; margin-top:1.8rem; text-transform:none; max-width:34ch; } @media (min-width:880px){ .architects{ grid-template-columns:1fr 1fr; align-items:stretch; } .architects-img{ height:100%; aspect-ratio:auto; } } /* ---------- home: método (resumo) ---------- */ .method{ padding-block:clamp(4rem,9vw,7rem); border-top:1px solid var(--line); } .method-head{ max-width:60ch; } .method-head h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.8rem,1rem+3vw,3rem); text-transform:uppercase; letter-spacing:-0.02em; line-height:1; margin:1rem 0 1.2rem; } .method-head p{ color:var(--ink-soft); font-size:1.04rem; line-height:1.66; max-width:54ch; } .method-steps{ list-style:none; margin:clamp(2.4rem,5vw,3.6rem) 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); } .method-steps li{ display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.4rem; padding:1.5rem 0; border-bottom:1px solid var(--line); align-items:baseline; } .method-steps span{ font-family:var(--num); font-weight:400; color:var(--accent); font-size:.95rem; letter-spacing:.06em; } .method-steps strong{ font-family:var(--display); font-weight:500; font-size:1.15rem; text-transform:uppercase; letter-spacing:-0.01em; } .method-steps em{ grid-column:2; font-style:normal; color:var(--ink-soft); font-size:.96rem; line-height:1.55; max-width:52ch; } .method-link{ margin-top:2.2rem; } .method-link a{ font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:.3rem; transition:color var(--t-hover); } .method-link a:hover{ color:var(--accent); } @media (min-width:760px){ .method-steps{ grid-template-columns:1fr 1fr; column-gap:clamp(2.5rem,5vw,5rem); } .method-steps li:nth-last-child(2){ border-bottom:1px solid var(--line); } } /* ---------- home: repertório ---------- */ .repertoire{ display:grid; grid-template-columns:1fr; margin-top:clamp(4rem,10vw,8rem); } .repertoire-img{ margin:0; overflow:hidden; } .repertoire-img img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3; } .repertoire-text{ padding:clamp(2.4rem,6vw,5rem) var(--gutter); display:flex; flex-direction:column; justify-content:center; background:var(--paper-2); } .repertoire-text h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.9rem,1rem+3vw,3.2rem); text-transform:uppercase; letter-spacing:-0.02em; line-height:1; margin:1rem 0 1.4rem; } .repertoire-text p{ max-width:52ch; color:var(--ink-soft); font-size:1.04rem; line-height:1.66; margin-bottom:1.1rem; text-wrap:pretty; } @media (min-width:880px){ .repertoire{ grid-template-columns:1.1fr .9fr; align-items:stretch; } .repertoire-img img{ height:100%; aspect-ratio:auto; } } /* ---------- páginas internas ---------- */ .page-head{ padding-top:clamp(8rem,16vw,12rem); padding-bottom:clamp(3rem,7vw,6rem); } .page-head h1{ font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,1rem+7vw,6rem); text-transform:uppercase; letter-spacing:-0.015em; line-height:.95; } .page-head p{ max-width:46ch; margin-top:1.6rem; color:var(--ink-soft); } /* ---------- índice de projetos ---------- */ .index .item{ display:grid; grid-template-columns:17rem 1fr auto; gap:clamp(1rem,2.5vw,2.4rem); align-items:center; padding-block:clamp(1.6rem,3.5vw,2.6rem); border-top:1px solid var(--ink); transition:transform .32s cubic-bezier(.16,1,.3,1); } .index .item:last-child{ border-bottom:1px solid var(--ink); } .index .thumb{ width:17rem; aspect-ratio:3/2; overflow:hidden; background:var(--paper-2); } .index .thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.05); } .index .num{ font-family:var(--display); font-weight:500; color:var(--accent); font-size:1.2rem; align-self:center; } .index .name{ font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,1rem+1.8vw,2.5rem); text-transform:uppercase; letter-spacing:-0.01em; } .index .meta{ font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:.4rem; } .index .syn{ margin-top:.8rem; color:var(--ink-soft); max-width:50ch; font-size:.96rem; } .index .go{ font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); white-space:nowrap; align-self:center; } /* ---------- estúdio ---------- */ .studio-text{ padding-block:clamp(3rem,7vw,6rem); } .studio-text .col{ max-width:62ch; } .studio-text p{ font-size:clamp(1.1rem,1rem+.6vw,1.35rem); line-height:1.65; } .studio-text p + p{ margin-top:1.5rem; } .studio-portrait{ background:var(--paper-2); padding-top:clamp(4rem,9vw,7rem); padding-bottom:clamp(1.5rem,3vw,2.5rem); } .studio-portrait .sp-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.4rem,5vw,4rem); align-items:center; } .sp-text h2{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,1rem+3.2vw,3.2rem); text-transform:uppercase; letter-spacing:-0.02em; line-height:1.02; margin-bottom:1.8rem; text-wrap:balance; } .sp-text p{ max-width:54ch; color:var(--ink-soft); font-size:1.04rem; line-height:1.66; margin-bottom:1.1rem; text-wrap:pretty; } .sp-photos{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; } .sp-photos .portrait-photo{ aspect-ratio:3/4; margin:0; background:var(--paper-2); } .sp-photos .portrait-photo img{ width:100%; height:100%; object-fit:cover; display:block; } @media (min-width:900px){ .studio-portrait .sp-grid{ grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); } } @media (max-width:520px){ .sp-photos{ grid-template-columns:1fr; } } .approach{ background:var(--paper-2); padding-top:clamp(1.5rem,3vw,2.5rem); padding-bottom:clamp(4rem,10vw,8rem); } .approach .eyebrow{ display:block; margin-bottom:3rem; } .approach .blocks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(2rem,4vw,4rem); } .approach h3{ font-family:var(--display); font-weight:500; font-size:1.5rem; margin-bottom:.8rem; text-transform:uppercase; letter-spacing:-0.01em; } .approach p{ color:var(--ink-soft); } .partners{ padding-block:clamp(4rem,9vw,7rem); } .partners .p{ border-top:1px solid var(--ink); padding-block:2.2rem; } .partners .p h3{ font-family:var(--display); font-weight:500; font-size:1.5rem; text-transform:uppercase; letter-spacing:-0.01em; margin-bottom:1rem; } .partners .p span, .partners .p p{ display:block; color:var(--ink-soft); max-width:70ch; } /* ---------- contato ---------- */ .contact{ min-height:100svh; display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(2.5rem,7vw,7rem) clamp(2.5rem,7vw,7rem); align-items:start; padding-top:clamp(6rem,9vw,8rem); padding-bottom:clamp(4rem,9vw,7rem); } .contact-lead{ grid-column:1; grid-row:1; } .contact h1{ font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,1rem+6vw,5.4rem); max-width:14ch; text-transform:uppercase; letter-spacing:-0.02em; line-height:.94; text-wrap:balance; } .contact .body{ max-width:46ch; margin-top:2rem; color:var(--ink-soft); text-wrap:pretty; } .contact-info{ grid-column:2; grid-row:1; display:grid; gap:clamp(1.4rem,2.5vw,2rem); border-top:1px solid var(--line); padding-top:clamp(2rem,4vw,3rem); } .contact-info .block .k{ font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); } .contact-info .block .v{ font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,1rem+0.7vw,1.55rem); margin-top:.35rem; letter-spacing:-0.01em; overflow-wrap:anywhere; } .contact-info .block.address .v{ font-family:var(--sans); font-weight:400; font-size:1rem; line-height:1.55; letter-spacing:0; color:var(--ink); } .contact-info .block.address .v{ padding-bottom:1.2rem; border-bottom:1px solid var(--line); } .contact-info .block .v a{ transition:color var(--t-hover); } .contact-info .block .v a:hover{ color:var(--accent); } .contact-cta{ grid-column:2; grid-row:2; margin-top:clamp(1.6rem,3vw,2.4rem); } .cta-note{ max-width:48ch; color:var(--ink-soft); font-size:.95rem; line-height:1.6; text-wrap:pretty; } .cta-buttons{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; max-width:34rem; } .cta-buttons .wa-btn{ flex:1 1 0; min-width:14rem; text-align:center; } .wa-btn{ display:inline-block; padding:.95rem 1.8rem; font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); transition:background var(--t-hover),color var(--t-hover),border-color var(--t-hover),transform var(--t-fast); } .wa-btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--paper); } .wa-btn:active{ transform:scale(.97); } .wa-btn.ghost{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .wa-btn.ghost:hover{ background:var(--accent); border-color:var(--accent); color:var(--paper); } .contact-sketch{ grid-column:1; grid-row:2; margin:0; align-self:start; } .contact-sketch img{ width:100%; height:auto; max-height:34vh; object-fit:contain; display:block; } @media (max-width:860px){ .contact-sketch{ display:none; } } @media (max-width:880px){ .contact-cta{ grid-column:1; grid-row:3; } } @media (max-width:860px){ .contact{ display:flex; flex-direction:column; gap:2.5rem; align-items:stretch; min-height:0; padding-top:calc(3.5rem + 24px + 1.4rem); } .contact-lead{ grid-row:auto; grid-column:auto; position:static; top:auto; order:1; } .contact-info{ grid-row:auto; grid-column:auto; order:2; display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; gap:1.6rem 2rem; } .contact-info .block.address{ grid-column:1 / -1; } .contact-cta{ grid-row:auto; grid-column:auto; order:3; margin-top:.5rem; } .contact h1{ margin-top:.5rem; } .contact .body{ margin-top:1.5rem; } } @media (max-width:520px){ .contact-info{ grid-template-columns:1fr; } } /* ---------- footer ---------- */ footer.foot{ background:var(--ink); color:var(--paper); border-top:none; padding-block:clamp(3rem,6vw,4.5rem); } footer.foot .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr auto; gap:clamp(2rem,5vw,4rem); align-items:start; } footer.foot .logo img{ height:32px; } footer.foot .foot-tag{ margin-top:1.2rem; font-size:.78rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--silver); } footer.foot .foot-legal p{ font-size:.82rem; line-height:1.7; color:var(--silver); } footer.foot .foot-legal .foot-copy{ margin-top:1rem; } footer.foot .foot-credit{ display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; } footer.foot .foot-credit span{ font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); } footer.foot .foot-credit .nothing img{ height:13px; width:auto; display:block; opacity:.7; transition:opacity var(--t-hover); } footer.foot .foot-credit .nothing:hover img{ opacity:1; } @media (max-width:760px){ footer.foot .foot-grid{ grid-template-columns:1fr; gap:2.4rem; } } /* ---------- reveal on scroll ---------- */ /* Conteúdo é visível por padrão. Só esconde para animar quando o JS confirma que vai controlar o reveal (classe .js no ). Sem JS / IO não disparado / render headless, nada fica escondido. */ .reveal{ opacity:1; transform:none; transition:opacity var(--t-slow), transform var(--t-slow); } html.js .reveal{ opacity:0; transform:translateY(14px); } html.js .reveal.in{ opacity:1; transform:none; } /* ---------- animações ---------- */ @keyframes fade{ to{ opacity:1; } } /* ---------- responsivo ---------- */ @media (max-width:720px){ /* menu mobile: overlay branco em tela cheia, links pretos (independente da cor do header) */ .menu{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.7rem; background:#fff; color:var(--ink); font-size:1.4rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility .3s; overscroll-behavior:contain; } .menu a{ color:var(--ink); padding:.4rem 1.2rem; } .menu a::after{ display:none; } body.nav-open .menu{ opacity:1; visibility:visible; pointer-events:auto; } body.nav-open{ overflow:hidden; } /* botão sanduíche -> X */ .menu-btn{ display:flex; align-items:center; justify-content:center; position:relative; z-index:130; width:44px; height:44px; padding:0; -webkit-tap-highlight-color:transparent; } .menu-btn .bar, .menu-btn .bar::before, .menu-btn .bar::after{ content:""; position:absolute; left:50%; width:22px; height:2px; background:currentColor; transform:translateX(-50%); transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease, background .3s; } .menu-btn .bar{ top:50%; margin-top:-1px; } .menu-btn .bar::before{ top:-7px; } .menu-btn .bar::after{ top:7px; } body.nav-open .menu-btn{ color:var(--ink); } body.nav-open .menu-btn .bar{ background:transparent; } body.nav-open .menu-btn .bar::before{ top:0; transform:translateX(-50%) rotate(45deg); background:var(--ink); } body.nav-open .menu-btn .bar::after{ top:0; transform:translateX(-50%) rotate(-45deg); background:var(--ink); } /* menu aberto: header acima do overlay, logo sempre escuro sobre o branco */ body.nav-open header.nav::before{ opacity:0; } body.nav-open header.nav .logo{ position:relative; z-index:130; } body.nav-open header.nav .logo .lg-light{ display:none; } body.nav-open header.nav .logo .lg-dark{ display:block; } .index .item{ grid-template-columns:1fr; gap:.5rem; } .index .thumb{ width:100%; aspect-ratio:16/9; order:-1; } .index .num{ display:none; } .index .go{ margin-top:1rem; } .principles .row{ grid-template-columns:1fr; gap:.6rem; } .contact-lead{ position:static; top:auto; } } @media (prefers-reduced-motion:reduce){ /* Sem animações em loop nem keyframes; sem movimento ou posição. Mantém transições suaves de cor e opacidade, que ajudam a leitura. */ html{ scroll-behavior:auto; } *{ animation:none !important; } .reveal{ opacity:1 !important; transform:none !important; transition:opacity .2s ease !important; } .hero-slides .track{ transition:none !important; } .stage:hover .stage-img img, .strip figure:hover img, .index .item:hover{ transform:none !important; } } /* faixa de obra (home) */ .strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--ink); } .strip figure{ margin:0; aspect-ratio:16/9; overflow:hidden; } .strip img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.06); transition:transform .9s cubic-bezier(.2,.7,.2,1); } @media (max-width:720px){ .strip{ display:none; } .band-white{ display:none; } .repertoire{ margin-top:2.5rem; } } /* ---------- ensaio longo (modelo editorial) ---------- */ .essay-back{ padding:var(--gutter); padding-top:calc(2.8rem + 24px + 1.4rem); } /* compensa o header fixo */ .essay-back a{ font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); } .essay-back a:hover{ color:var(--ink); } .essay-hero{ width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); } .essay-hero img{ width:100%; height:100%; object-fit:cover; display:block; } .essay-title{ padding:clamp(3rem,7vw,6rem) var(--gutter) clamp(2rem,4vw,3rem); border-bottom:1px solid var(--ink); } .essay-title h1{ font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,1rem+6vw,6rem); text-transform:uppercase; letter-spacing:-0.015em; line-height:.92; } .essay-title .loc{ font-family:var(--display); font-weight:500; font-size:clamp(1.1rem,1rem+1vw,1.6rem); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-top:.6rem; } /* ficha tecnica em duas colunas */ .specsheet{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); padding:clamp(3rem,6vw,5rem) var(--gutter); border-bottom:1px solid var(--ink); } .specsheet h2{ font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:1.6rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); } .specsheet .row{ display:flex; justify-content:space-between; gap:1.5rem; padding-block:.7rem; border-bottom:1px solid var(--line); } .specsheet .row:last-child{ border-bottom:none; } .specsheet .k{ font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); flex-shrink:0; } .specsheet .v{ font-size:.92rem; text-align:right; } .specsheet .credits .v{ font-size:.86rem; line-height:1.4; } /* texto editorial: tudo em duas colunas, lead abre a 1ª coluna com drop-cap, centralizado */ .essay-body{ padding:clamp(3.5rem,8vw,7rem) var(--gutter); } .essay-body .essay-cols{ max-width:74ch; margin-inline:auto; columns:2; column-gap:clamp(2.5rem,4vw,4rem); column-fill:balance; } .essay-body .essay-cols p{ font-size:clamp(1.02rem,1rem+.4vw,1.18rem); line-height:1.72; text-wrap:pretty; color:var(--ink-soft); margin:0; break-inside:avoid-column; } .essay-body .essay-cols p + p{ margin-top:1.4rem; } .essay-body .essay-cols .lead{ font-size:clamp(1.15rem,1rem+.7vw,1.45rem); line-height:1.55; color:var(--ink); } .essay-body .essay-cols .lead::first-letter{ font-family:var(--display); font-weight:500; font-size:3em; float:left; line-height:.78; padding:.05em .14em 0 0; color:var(--accent); } .essay-body .essay-close{ max-width:74ch; margin:clamp(1.4rem,3vw,2rem) auto 0; font-size:clamp(1.02rem,1rem+.4vw,1.18rem); line-height:1.72; text-wrap:pretty; color:var(--ink-soft); } /* imagens do ensaio: largura total, empilhadas */ .essay-shot{ width:100%; overflow:hidden; background:var(--paper-2); } .essay-shot img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; display:block; } .essay-shot + .essay-shot{ margin-top:2px; } /* plantas e cortes */ .plans{ padding:clamp(3rem,6vw,5rem) var(--gutter) clamp(4rem,8vw,7rem); border-top:1px solid var(--ink); } .plans h2{ font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:2rem; } .plans .doc{ background:var(--paper); border:1px solid var(--line); margin-bottom:2px; padding:2rem; } .plans .doc img{ width:100%; height:auto; display:block; } /* proximo projeto */ .next-proj{ border-top:1px solid var(--ink); padding:clamp(3rem,7vw,6rem) var(--gutter); display:flex; align-items:baseline; justify-content:space-between; gap:2rem; } .next-proj .lbl{ font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); } .next-proj a{ font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,1rem+3vw,3.4rem); text-transform:uppercase; letter-spacing:-0.012em; } .next-proj a:hover{ color:var(--ink-soft); } @media (max-width:720px){ .specsheet{ grid-template-columns:1fr; gap:2.5rem; } .specsheet .row{ flex-wrap:wrap; } .essay-hero{ aspect-ratio:4/5; } /* fotos do ensaio: proporção natural no celular, foto inteira, sem corte */ .essay-shot img{ aspect-ratio:auto; height:auto; } .next-proj{ flex-direction:column; gap:1rem; } /* texto: coluna única no celular (duas colunas ficariam estreitas demais) */ .essay-body .essay-cols{ columns:1; } } /* =========================================================== AJUSTES DE ACABAMENTO (auditoria impeccable) =========================================================== */ /* Contraste AA: o terracota #aa7259 dá 4.0:1 sobre branco, abaixo do minimo para texto pequeno. Variante mais profunda (4.6:1) reservada aos rotulos pequenos; o terracota vivo permanece nos usos grandes. */ :root{ --accent-deep:#a4654c; } .stage-do span, .feature-stage .stage-do span, .specsheet h2, .plans h2, .index .go, .method-steps span, .stage-num, .next-proj .lbl{ color:var(--accent-deep); } /* Respiro nas linhas divisorias: rotulos e linhas de ficha tecnica nao encostam mais na borda. */ .specsheet .row{ padding-block:.9rem; } .specsheet h2{ padding-bottom:.85rem; } /* Tier de micro-rotulo unificado num so tamanho, removendo variacoes quase identicas que achatavam a escala. */ footer.foot .foot-credit span, .stage-do span{ font-size:.72rem; } /* Skip link: oculto até receber foco por teclado. */ .skip-link{ position:fixed; top:.6rem; left:.6rem; z-index:100; transform:translateY(-150%); transition:transform .18s cubic-bezier(.16,1,.3,1); background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:.85rem; font-weight:600; letter-spacing:.04em; padding:.75rem 1.1rem; } .skip-link:focus{ transform:translateY(0); outline:none; } /* Foco visível por teclado em elementos interativos (anel terracota). */ a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* Hovers de transform só em dispositivos com ponteiro fino (evita estado preso no toque). */ @media (hover:hover) and (pointer:fine){ .stage:hover .stage-img img{ transform:scale(1.03); } .index .item:hover{ transform:translateX(12px); } .strip figure:hover img{ transform:scale(1.04); } } /* ---------- refinamento mobile: CTA em coluna no celular estreito ---------- */ @media (max-width:520px){ .cta-buttons{ flex-direction:column; align-items:stretch; } .cta-buttons .wa-btn{ width:100%; text-align:center; } } /* ========================================================= MOTION: cortinas, títulos por linha, profundidade. Tudo condicionado a html.js, que só existe com JS ativo e sem prefers-reduced-motion: sem JS ou com reduce, nada disso roda. */ /* cortina de imagem: o container permanece mensurável pelo observador; quem desliza é a imagem, dentro do overflow. Mesmo gesto, sem deadlock. */ html.js .img-reveal{ overflow:hidden; } html.js .img-reveal img{ transform:translateY(102%) scale(1.04); transition:transform 1.25s cubic-bezier(.16,1,.3,1); } html.js .img-reveal.in img{ transform:none; } /* failsafe: se o observador falhar em qualquer ambiente, tudo se revela */ html.io-fallback .img-reveal img{ transform:none !important; transition:none !important; } html.io-fallback h1 .line-in{ transform:none !important; } html.io-fallback .reveal, html.io-fallback .specsheet .row{ opacity:1 !important; transform:none !important; } /* títulos por linha: máscara e deslize, com cascata curta */ html.js h1 .line{ display:block; overflow:hidden; padding-block:.14em; margin-block:-.14em; } html.js h1 .line-in{ display:block; transform:translateY(130%); transition:transform .95s cubic-bezier(.16,1,.3,1); } html.js h1.in .line-in{ transform:none; } html.js h1 .line:nth-child(2) .line-in{ transition-delay:.09s; } html.js h1 .line:nth-child(3) .line-in{ transition-delay:.18s; } /* ken burns no hero da home: zoom lento e contínuo, CSS puro */ @media (prefers-reduced-motion: no-preference){ .hero-slides .slide.active img{ animation:kenburns 14s cubic-bezier(.37,0,.63,1) infinite alternate; } } @keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.05); } } /* ficha técnica: linhas entram em sequência de documento */ html.js .specsheet .row{ opacity:0; transform:translateY(10px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } html.js .specsheet.in .row{ opacity:1; transform:none; } html.js .specsheet.in .row:nth-of-type(2){ transition-delay:.07s; } html.js .specsheet.in .row:nth-of-type(3){ transition-delay:.14s; } html.js .specsheet.in .row:nth-of-type(4){ transition-delay:.21s; } html.js .specsheet.in .row:nth-of-type(5){ transition-delay:.28s; } /* menu mobile: links em cascata na abertura */ @media (max-width:879px) and (prefers-reduced-motion: no-preference){ body.nav-open .menu a{ animation:menu-in .55s cubic-bezier(.16,1,.3,1) backwards; } body.nav-open .menu a:nth-child(1){ animation-delay:.06s; } body.nav-open .menu a:nth-child(2){ animation-delay:.12s; } body.nav-open .menu a:nth-child(3){ animation-delay:.18s; } body.nav-open .menu a:nth-child(4){ animation-delay:.24s; } body.nav-open .menu a:nth-child(5){ animation-delay:.30s; } } @keyframes menu-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } /* próximo projeto: o link desliza ao hover, só em ponteiro fino */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){ .next-proj a{ display:inline-block; transition:transform .3s cubic-bezier(.16,1,.3,1); } .next-proj a:hover{ transform:translateX(8px); } } /* linha do processo: desenha com o scroll, pontos acendem (desktop) */ @media (min-width:880px){ html.js .journey{ --draw:1; } html.js .journey::before{ transform:scaleY(var(--draw)); transform-origin:top; } html.js .stage::after{ transition:background .5s cubic-bezier(.16,1,.3,1); } html.js .stage.lit::after{ background:var(--accent); } } /* lenis ativo: o smooth nativo sai de cena para nao disputar o scroll */ html.lenis{ scroll-behavior:auto; } /* impressao: todo conteudo gated aparece por inteiro no papel */ @media print{ html.js .reveal, html.js .specsheet .row{ opacity:1 !important; transform:none !important; } html.js .img-reveal img{ transform:none !important; } html.js h1 .line-in{ transform:none !important; } }