/* ============================================================= RAF MATOS — styles.css (componentes e secções) ============================================================= */ /* ---------------- HEADER / NAVBAR (azul-marinho, logo amarelo) ---------------- */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; /* Opaca, e não a 94 %. Com translucidez a barra clareia por cima da fotografia do hero e deixa de bater certo com o azul opaco que está dentro do logótipo — os painéis solares voltavam a ler-se como manchas escuras. Sem transparência, o desfoque por trás também deixa de ter função. */ background:#041832; border-bottom:1px solid rgba(255,255,255,.08);transition:background var(--t),box-shadow var(--t),border-color var(--t); } .site-header.is-scrolled{background:#041832;box-shadow:0 10px 30px -18px rgba(0,0,0,.6)} .nav{display:flex;align-items:center;gap:1.1rem;padding-block:12px;transition:padding var(--t)} .site-header.is-scrolled .nav{padding-block:7px} /* Logo lockup: ícone (casa+solar) + wordmark — imagens do logótipo real */ .nav__brand{display:inline-flex;align-items:center;gap:.6rem;flex:none} .nav__mark{height:48px;width:auto;transition:height var(--t)} .nav__word{display:flex;flex-direction:column;line-height:1;gap:.32rem;align-items:center;transition:transform var(--t)} .nav__word-img{height:26px;width:auto;transition:height var(--t)} .nav__word small{font-family:var(--font-head);font-weight:600;font-size:.6rem;letter-spacing:.135em;text-transform:uppercase;color:#F6D77A;transition:font-size var(--t),letter-spacing var(--t)} .site-header.is-scrolled .nav__mark{height:40px} .site-header.is-scrolled .nav__word-img{height:22px} .site-header.is-scrolled .nav__word small{font-size:.52rem;letter-spacing:.1em} .nav__spacer{flex:1} .nav__links{display:flex;align-items:center;gap:.1rem} .nav__links a{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:1rem;color:#DCE6F2;padding:.5em .8em;border-radius:8px;position:relative;transition:color var(--t-fast)} .nav__links a::after{content:"";position:absolute;left:.8em;right:.8em;bottom:.28em;height:3px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--t)} .nav__links a:hover{color:#fff} .nav__links a.is-current{color:#fff} .nav__links a:hover::after,.nav__links a.is-current::after{transform:scaleX(1)} .nav__actions{display:flex;align-items:center;gap:.6rem} .nav__toggle{display:none;width:48px;height:48px;border-radius:10px;border:1.5px solid rgba(255,255,255,.28);align-items:center;justify-content:center;background:rgba(255,255,255,.06)} .nav__toggle:hover{border-color:var(--gold)} .nav__burger,.nav__burger::before,.nav__burger::after{content:"";display:block;width:22px;height:2.6px;border-radius:2px;background:#fff;transition:transform var(--t),opacity var(--t-fast)} .nav__burger{position:relative}.nav__burger::before{position:absolute;top:-7px}.nav__burger::after{position:absolute;top:7px} /* ---------------- MENU MOBILE (ECRÃ INTEIRO) ---------------- */ .mobile-menu{position:fixed;inset:0;z-index:130;background:var(--grad-navy);color:#fff;overflow:hidden auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .32s var(--ease),transform .38s var(--ease),visibility .32s} .mobile-menu.is-open{opacity:1;visibility:visible;transform:none} .mobile-menu::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--gold)} .mobile-menu__inner{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;gap:1.2rem;padding:20px var(--gutter) calc(28px + env(safe-area-inset-bottom));max-width:640px;margin-inline:auto} .mobile-menu__top{display:flex;align-items:center;justify-content:space-between;color:#fff} .mobile-menu__top .nav__word-img{height:24px;width:auto} .mobile-menu__close{width:48px;height:48px;border-radius:10px;border:1.5px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;color:#fff} .mobile-menu__close svg{width:24px;height:24px} .mobile-menu__nav{margin-top:.5rem} .mobile-menu__nav ul{display:flex;flex-direction:column;list-style:none;padding:0;margin:0} .mobile-menu__nav a{display:flex;align-items:baseline;gap:.9rem;font-family:var(--font-head);font-weight:700;font-size:clamp(1.6rem,7vw,2.2rem);color:#fff;padding:.42em 0;border-bottom:1px solid rgba(255,255,255,.12)} .mobile-menu__nav a span{font-size:.8rem;color:var(--gold);font-weight:700;min-width:2ch} .mobile-menu__nav a:hover{color:var(--gold)} .mobile-menu__footer{margin-top:auto;display:flex;flex-direction:column;gap:1rem;padding-top:1.4rem} .mobile-menu__contact{display:flex;flex-direction:column;gap:.3rem;color:#C7D5E8} .mobile-menu__contact a{color:#C7D5E8}.mobile-menu__contact a:hover{color:#fff} .call-note{display:block;font-family:var(--font-body);font-weight:400;font-size:.78rem;line-height:1.3;opacity:.72} body.menu-open{overflow:hidden} /* ---------------- RESPONSIVO NAV ---------------- */ @media (max-width:920px){ .nav__links,.nav__cta{display:none} .nav__toggle{display:inline-flex} .nav__actions{margin-left:auto} .nav__mark{height:44px} .nav__word-img{height:21px} .site-header.is-scrolled .nav__mark{height:38px} } /* O nome novo é 23% mais largo que o antigo — a mesma altura dá 8,2 de proporção em vez de 6,7. A 360 px isso empurrava o botão do menu para fora do ecrã (media: acabava a 362 num espaço de 345) e nas páginas legais fazia a página ganhar barra horizontal. Aqui a marca encolhe o suficiente para caber outra vez, com folga. */ @media (max-width:420px){ .nav__word small{display:none} .nav__mark{height:38px} .nav__word-img{height:17px} .site-header.is-scrolled .nav__mark{height:34px} .site-header.is-scrolled .nav__word-img{height:15px} } /* Ecrãs de 320 px ainda existem. Aqui a marca inteira mais o botão do menu davam 278 px num espaço de 269, e o botão ficava cortado pela margem. */ @media (max-width:360px){ .nav__mark{height:34px} .nav__word-img{height:15px} } /* No cabeçalho das páginas legais não há espaço para o nome ao lado do botão «Voltar ao site». Fica a marca, que já liga à entrada. */ @media (max-width:560px){ .legalhead .nav__word-img{display:none} } /* ---------------- HERO ---------------- */ /* Uma fotografia a ocupar o topo inteiro, o H1 e uma acção. Mais nada. A armadilha deste desenho já foi paga uma vez: um véu global escurece a fotografia até ela deixar de se ler como fotografia («a metade de cima é azul liso»). Aqui não há véu global. Há uma sombra colada ao BLOCO DE TEXTO — não ao hero, não ao rodapé do ecrã — que se apaga por cima dele. O resto da fotografia não leva nada. --bleed = distância do bordo interior do .container ao bordo do ecrã. */ .hero{ --bleed:calc(max(0px,(100vw - var(--maxw)) / 2) + var(--gutter)); position:relative;display:flex;align-items:flex-end;overflow:hidden; /* Três declarações de propósito, da mais antiga para a mais nova: quem não tiver min() fica pelos 430px, quem não tiver svh fica pelo vh, e quem tiver tudo usa svh — assim a barra do browser no telemóvel não faz o hero saltar. */ min-height:430px; min-height:min(69vh,600px); min-height:min(69svh,600px); /* A fotografia COMEÇA onde o cabeçalho acaba: nada dela fica escondido por baixo da barra. O --header-real é medido em JS (o cabeçalho é fixo e a sua altura depende do conteúdo e da largura), com os 92px do token como valor de recurso enquanto o JS não corre. É margem e não padding, porque o padding ficaria DENTRO da secção e a fotografia, que é absoluta a inset:0, voltaria a passar por trás da barra. O padding de baixo é do bloco de texto, não do hero — a sombra tem de poder chegar ao bordo inferior da secção. */ margin-top:var(--header-real,var(--header-h)); padding-top:1.4rem; padding-bottom:0; background:var(--navy-900); /* pinta enquanto a fotografia não chega */ color:#fff; } /* e não background-image: assim o pré-scanner do parser encontra o LCP antes de o CSS estar aplicado e o fetchpriority="high" vale alguma coisa. O 52% é o recorte, e é o número que decide o que se vê: a fotografia é vertical (722x1600) e em `cover` o corte dá-se todo em altura. A 390x844 vê-se 67% da imagem (linhas 17% a 84%) — a sala inteira, do tecto ao chão; a 1440x620 vê-se uma faixa de 19% (linhas 42% a 61%), com o ripado à esquerda, o forno e a bancada à direita e o chão a atravessar. */ .hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%} .hero__inner{position:relative;z-index:1;width:100%} .hero__copy{position:relative;max-width:36rem;padding-bottom:clamp(1.8rem,5vw,2.6rem)} /* A SOMBRA, e é aqui que está a diferença entre esta versão e as três que falharam o teste do texto do sistema a 200%. Ela é um pseudo-elemento do BLOCO DE TEXTO: começa 4,6rem acima dele e acaba no rodapé da secção, e sangra para os dois bordos do ecrã (o hero corta o que passa). Como a caixa é o próprio bloco, cresce com o texto: se o utilizador puser a letra a 200% e o título passar de 3 para 6 linhas, a sombra passa a ter 6 linhas de altura sozinha. As versões anteriores mediam o degradê a partir do rodapé — em px ou em rem — e a 200% o título subia para fora da zona escura: medi 1,00:1 e 2,29:1 nessas condições. Dentro do bloco a opacidade nunca desce de 0,63. É um número escolhido, não afinado à fotografia: com 0,63 o pixel mais claro que pode existir debaixo do texto é 255*0,37 + 6*0,63 = 98, o que dá 6,09:1 no branco e 3,30:1 no amarelo AINDA QUE a fotografia fosse branca por baixo. O contraste deixa de depender do recorte, da largura e do zoom — que era a propriedade boa do painel de jornal, mas aqui sem o rectângulo de cor chapada. Sobre o chão desta fotografia o pixel real é muito mais escuro, e por isso os valores medidos ficam nos 10:1 e 5,5:1 (ver mais abaixo). */ .hero__copy::after{ content:"";position:absolute;z-index:-1;pointer-events:none; left:calc(-1 * var(--bleed));width:100vw; top:-4.6rem;bottom:0; background:linear-gradient(to bottom, rgba(6,17,32,0) 0, rgba(6,17,32,.20) 1.6rem, rgba(6,17,32,.48) 3.2rem, rgba(6,17,32,.63) 4.6rem, rgba(6,17,32,.70) 100%); } /* A marca acima do título, dentro do próprio h1: é o sinal de marca mais forte de uma página, e este não tinha o nome uma única vez — o site aparecia em «rafmatos» por causa do domínio, não do conteúdo. --gold-soft e não --gold. O sobretítulo assenta em cima da fotografia do hero, e mesmo com o véu do ::after a 0,70 de alfa o dourado da marca dava 3,28:1 nas zonas claras da foto — chumbado para 14,7px. Este tom, que é o brilho do metal do logótipo, dá 5,25:1 no pior caso medido. */ .hero__brand{display:block;font-family:var(--font-head);font-weight:700; font-size:clamp(.78rem,2.2vw,.92rem);letter-spacing:.22em;text-transform:uppercase; color:var(--gold-soft);margin-bottom:.55rem} /* A mesma régua amarela de 3px que abre a lista de serviços: costura o hero à secção seguinte e põe a marca no topo sem gastar uma palavra. */ .hero__copy::before{content:"";display:block;width:56px;height:3px;border-radius:2px; background:var(--gold);margin-bottom:clamp(.85rem,2vw,1.2rem)} /* A marca acima do título, na mesma etiqueta h1. Fica no h1 e não numa linha à parte porque o h1 é o sinal de marca mais forte de uma página, e este não tinha o nome nenhuma vez — o site aparecia em «rafmatos» por causa do domínio, não do conteúdo. Visualmente é um sobretítulo. */ .hero__title{ font-size:clamp(2.15rem,1.05rem + 3.4vw,3.6rem);line-height:1.04;letter-spacing:-.015em; color:#fff;text-wrap:balance;overflow-wrap:break-word; } .hero__title .hl{color:var(--gold)} .hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.5rem; margin-top:clamp(1.25rem,2.6vw,1.8rem)} /* O telefone e a nota do custo da chamada só existem no computador — a razão está no @media (min-width:881px). */ .hero__tel,.hero__note{display:none} /* Computador. Três coisas mudam, e as três estão medidas. 1) O título cabe numa linha: o tecto é 3,1rem e não 3,4rem — a 1440 a frase completa a 3,4rem dá ~1170px contra 1152 úteis e passava à segunda linha. 2) O bloco perde o limite de 36rem, senão o título ficava em três linhas numa coluna estreita com meio ecrã vazio ao lado. 3) Aparece o número de telefone. Não é enfeite nem informação: o cabeçalho do site não mostra número nenhum em largura nenhuma (procurei «tel:» no index.html: só existe dentro do menu do telemóvel, no Contacto e no rodapé), portanto no computador quem quer ligar não tem para onde olhar antes de rolar ~2600px. No telemóvel não aparece porque lá o mesmo número está a um toque no menu, e porque a primeira dobra está encostada ao banner de cookies. */ @media (min-width:881px){ /* MEDIDO: com o texto do sistema a 200% o cabeçalho do computador passa de 73px para 215,4px (os links do menu e o subtítulo do logótipo duplicam), e como o bloco de texto está encostado ao rodapé o topo do H1 ia parar aos 215,0 — debaixo do cabeçalho, com 0,4px de folga. O token --header-h-min está em px e não acompanha a raiz; o max() com um valor em rem acompanha. A 100% não muda nada de visível: o bloco continua encostado ao rodapé e sobra altura (128 de padding + ~300 de bloco contra 620 de hero). */ .hero{ min-height:520px;min-height:min(74vh,620px);min-height:min(74svh,620px); padding-top:calc(var(--header-h-min) + 1.4rem); padding-top:max(calc(var(--header-h-min) + 1.4rem),8rem); } .hero__copy{max-width:none} /* clamp e não min(): com min(3.1rem,4.3vw) o título ficava preso ao vw e deixava de crescer quando o utilizador aumenta a letra do sistema. Com o clamp, a 100% manda o vw (49,6px a 1440, uma linha) e a 200% manda o piso em rem (76,8px, duas linhas) — e as duas linhas já não custam contraste nenhum, porque a sombra está colada ao bloco e cresce com ele. */ /* A marca acima do título, na mesma etiqueta h1. Fica no h1 e não numa linha à parte porque o h1 é o sinal de marca mais forte de uma página, e este não tinha o nome nenhuma vez — o site aparecia em «rafmatos» por causa do domínio, não do conteúdo. Visualmente é um sobretítulo. */ .hero__title{font-size:clamp(2.4rem,4.3vw,3.1rem)} .hero__tel{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding-inline:2px; font-family:var(--font-head);font-weight:700;font-size:1.12rem;color:#fff; text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.42em; text-decoration-color:rgba(217,164,65,.95);transition:text-decoration-color var(--t-fast)} .hero__tel svg{width:1.05em;height:1.05em;flex:none;color:var(--gold)} .hero__tel:hover{text-decoration-color:#fff} /* O .call-note global vive a opacity .72; sobre fotografia isso deixaria os 12,5px abaixo do AA. Fixo a cor e devolvo a opacidade a 1. */ .hero__note{display:block;margin-top:.55rem;opacity:1;color:#DCE5F2} } /* Ecrã curto (telemóvel de 640, janela baixa). Duas correcções medidas: - o hero desce para 66svh, porque a 360x640 o banner de cookies começa aos 420,8px e o botão principal tem de fechar acima disso; - o recorte desce para 70%, porque num hero de 422px o bloco de texto mede 271px e com o recorte de 52% a primeira linha do título ficava acima da linha do chão, em cima do ripado claro. */ @media (max-width:880px) and (max-height:700px){ .hero{min-height:380px;min-height:min(66vh,600px);min-height:min(66svh,600px)} .hero__bg{object-position:50% 70%} } /* Ecrã baixo (telemóvel deitado, janela curta). Aqui o hero tem 390px de altura para tudo e a faixa visível é 16% da fotografia — e é por causa disso que o recorte SOBE para 45% em vez de descer. A 66% via-se só chão, uma textura escura sem assunto (que era a queixa contra o hero anterior); a 45% entram o ripado, o forno e a bancada, e a fotografia volta a ser reconhecível. Só é possível porque a sombra garante o contraste sozinha: não é preciso pousar o texto numa zona escura da imagem. 78svh e não 92: a 844x390 o banner de cookies começa aos 282,2 e com 92svh o botão fechava aos 317,2, por baixo dele; com 78svh fecha aos 262,6. */ @media (max-height:560px){ .hero{min-height:auto;min-height:min(78vh,600px);min-height:min(78svh,600px); padding-top:calc(var(--header-h-min) + .9rem)} .hero__bg{object-position:50% 45%} /* A marca acima do título, na mesma etiqueta h1. Fica no h1 e não numa linha à parte porque o h1 é o sinal de marca mais forte de uma página, e este não tinha o nome nenhuma vez — o site aparecia em «rafmatos» por causa do domínio, não do conteúdo. Visualmente é um sobretítulo. */ .hero__title{font-size:clamp(1.8rem,.9rem + 2.6vw,2.4rem)} .hero__copy::after{top:-3rem} } /* Abaixo dos 360px o título fica mais contido, como no resto do site, e o hero encolhe mais um pouco. Medido a 320x568: o banner de cookies da primeira visita ocupa 240,8px dos 568 — é ele que é grande, não o hero — e começa aos 327,2. Com 66svh o botão fechava aos 346,1 e ficava com os últimos 19px por baixo do banner; com 60svh fecha aos 312,0 e sobra folga de 15,2px. Para comparar: no site actual o botão fecha aos 424,0, ou seja 96,9px por baixo. */ @media (max-width:359px){ .hero{min-height:340px;min-height:min(60vh,600px);min-height:min(60svh,600px)} /* A marca acima do título, na mesma etiqueta h1. Fica no h1 e não numa linha à parte porque o h1 é o sinal de marca mais forte de uma página, e este não tinha o nome nenhuma vez — o site aparecia em «rafmatos» por causa do domínio, não do conteúdo. Visualmente é um sobretítulo. */ .hero__title{font-size:1.95rem} } /* Sem movimento não há nada a desligar no hero (a sombra e o recorte são estáticos); fica só a transição de cor do sublinhado do telefone. */ @media (prefers-reduced-motion:reduce){ .hero__tel{transition:none} } /* ---------------- SERVIÇOS (lista) ---------------- */ /* É a primeira secção depois do hero: respira menos que as vizinhas, de propósito. */ .section.services{padding-block:clamp(2.4rem,5.5vw,4.6rem)} .services .section-head{margin-bottom:clamp(1.3rem,3vw,2.1rem)} .services__list{max-width:980px;margin-inline:auto;border-top:3px solid var(--gold);border-bottom:1px solid var(--line-2)} /* Base (telemóvel): ícone e nome na mesma linha, descrição por baixo. */ .svc{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico name" ". desc";column-gap:.65rem;row-gap:.1rem;padding-block:.9rem} .svc + .svc{border-top:1px solid var(--line)} .svc__icon{grid-area:ico;display:flex;margin-top:1px;color:var(--blue)} .svc__icon svg{width:20px;height:20px;flex:none} .svc__title{grid-area:name;font-size:1.08rem;line-height:1.25} .svc__desc{grid-area:desc;color:var(--body);font-size:.93rem;line-height:1.45} /* A partir do tablet: nome numa coluna, descrição noutra, alinhadas nas seis linhas. A coluna do nome (7rem) é o nome mais comprido — «Eletricidade», 101px em Barlow, 109px na fonte de recurso enquanto a Barlow não carrega — e nem um pixel mais. */ @media (min-width:720px){ .svc{grid-template-columns:auto 7rem minmax(0,1fr);grid-template-areas:"ico name desc";align-items:baseline;column-gap:.9rem;padding-block:1.05rem} .svc__icon{align-self:start;margin-top:2px} .svc__icon svg{width:22px;height:22px} .svc__title{font-size:1.2rem} .svc__desc{font-size:.95rem;line-height:1.5} } /* ---------------- ANTES & DEPOIS ---------------- */ .ba__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1.4rem;margin-top:.5rem} .ba{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)} .ba__stage{position:relative;aspect-ratio:4/3;overflow:hidden;user-select:none;touch-action:pan-y} .ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none} .ba__after{clip-path:inset(0 0 0 var(--pos,50%))} .ba__tag{position:absolute;top:10px;font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;padding:.3em .7em;border-radius:6px;color:#fff;z-index:3} .ba__tag--a{left:10px;background:rgba(12,38,68,.85)} .ba__tag--b{right:10px;background:var(--gold);color:var(--ink)} .ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);z-index:2;box-shadow:0 0 0 1px rgba(0,0,0,.15)} .ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;color:var(--blue);cursor:ew-resize} .ba__grip svg{width:22px;height:22px} .ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0} /* Em ecras tacteis o arrasto e feito pelo main.js a partir do .ba__stage: um input[type=range] salta para o x do dedo logo no toque, e isso fazia o comparador mudar quando so se queria percorrer a pagina. */ @media (pointer:coarse){.ba__range{pointer-events:none}} .ba__cap{padding:.9rem 1.1rem;font-family:var(--font-head);font-weight:600;color:var(--ink)} /* ---------------- OBRAS / CARROSSEL ---------------- * FAIXA COM ESPREITADELA. Uma unica fila horizontal com scroll nativo e scroll-snap: ve-se a peca actual e uma nesga da seguinte encostada ao bordo direito. Essa nesga E a afordancia — diz "ha mais, arraste" sem uma linha de texto e sem um byte de JavaScript. As setas e a barra de progresso sao um extra que o JS acrescenta por cima; sem JS a faixa percorre-se na mesma com o dedo, com o trackpad e com as setas do teclado. A MOLDURA 3:4 MANTEM-SE, e aqui e ainda mais precisa do que na grelha: as 12 fotografias so tem dois extremos e nada pelo meio — 0,45 (vertical de telemovel, 8 ficheiros) e 2,23 (corte panoramico herdado do Facebook, 4 ficheiros). Numa fila horizontal, proporcoes livres nao dariam so molduras feias: dariam uma faixa que MUDA DE ALTURA a cada peca que passa, e a pagina inteira a saltar por baixo dela. Moldura fixa, `cover` por dentro, e o enquadramento de cada fotografia em style="--pos:x y" no HTML. O que o corte tira nao se perde: a lightbox abre a fotografia inteira. */ /* A margem de baixo e do carrossel e nao do bloco seguinte: a barra de progresso e o ultimo elemento da faixa e sem ela o "Quer ver o seu espaco assim?" encostava-se-lhe (medido: 36px entre os dois). */ .carrossel{position:relative;margin-bottom:clamp(1.7rem,4vw,2.6rem)} .carrossel__janela{position:relative} /* --n = quantas pecas cabem no ecra, COM CASA DECIMAL — a parte fraccionaria e a espreitadela. Nao ha "peca a 85% e ponto": a nesga tem de ser larga o suficiente para se ler como fotografia cortada e nao como um risco. Medido a 390px: peca de 317px (81% do ecra) e 44px de nesga; a 320px, 253px de peca e 39px de nesga. */ .carrossel__faixa{ --gap:.7rem; --n:1.08; display:grid;grid-auto-flow:column; grid-auto-columns:calc((100% - var(--n) * var(--gap)) / var(--n)); gap:var(--gap); /* A faixa sangra ate ao bordo do .container (margem negativa igual ao gutter) e devolve esse espaco como padding POR DENTRO. Assim a primeira peca fica alinhada com o titulo, a ultima respira no fim, e a nesga da direita e cortada pelo bordo do ecra em vez de o ser por uma margem — que e o que faz a faixa parecer continuar para la do ecra. A pagina nao cresce com isto: a faixa tem overflow proprio, por isso o excedente nunca chega ao documento. Assenta em `--gutter` ser exactamente o padding-inline do .container; se um dia o .container levar outro padding nalgum breakpoint, a faixa fica com uma aresta de um lado. O scroll-padding e obrigatorio, nao decorativo: sem ele o primeiro snap alinha a peca 1 com o bordo do ECRA e come o gutter da esquerda. */ margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); /* folga vertical: sem ela o overflow-y corta a sombra das molduras */ padding-block:3px 10px; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; /* Trava so o encadeamento HORIZONTAL (nao dispara o "voltar atras" do browser ao chegar ao fim da faixa). O eixo vertical fica em `auto` de proposito: e ele que entrega o deslize para cima/baixo a pagina em vez de o engolir — foi este o defeito que tivemos no comparador Antes & Depois. */ overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .carrossel__faixa::-webkit-scrollbar{display:none} /* O anel de foco vai para DENTRO (offset negativo): a faixa chega aos bordos do ecra e um anel por fora ficava cortado ao meio, so com as linhas de cima e de baixo visiveis. */ .carrossel__faixa:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;border-radius:var(--radius)} /* O corte dos 440px nao e um numero redondo: e o telemovel mais largo que existe em retrato (430px). Ate ai a peca ocupa quase o ecra; a partir dai comeca a encolher, senao aos 600px dava uma moldura de 500x667 — mais alta do que a maior parte das janelas. Os passos sao sempre ~1,45x uns dos outros, para nenhuma largura ter um salto maior do que os outros. */ @media (min-width:440px){.carrossel__faixa{--gap:1rem;--n:1.6}} @media (min-width:601px){.carrossel__faixa{--n:2.35}} @media (min-width:960px){.carrossel__faixa{--n:3.35}} @media (min-width:1200px){.carrossel__faixa{--n:4.3}} /* Telemovel deitado: 1,08 pecas dava uma moldura 3:4 mais alta do que o ecra inteiro e nao se via uma fotografia de uma vez. */ @media (orientation:landscape) and (max-height:520px){.carrossel__faixa{--n:3.35}} @media (prefers-reduced-motion:reduce){.carrossel__faixa{scroll-behavior:auto}} /* scroll-snap-stop fica em `normal` (o valor por omissao) de proposito: com `always` cada deslize so avancaria UMA peca e chegar a decima segunda dava doze gestos. */ .gitem{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;cursor:zoom-in;box-shadow:var(--shadow-sm);background:var(--bg-soft);display:block;scroll-snap-align:start} /* aspect-ratio na propria (e nao na
) reserva a caixa antes de a fotografia carregar: a faixa deixa de mudar de altura quando as imagens chegam. O tecto de altura e para o ecra DEITADO: a 844x390 a moldura 3:4 pedia 288px de altura e a legenda saia por baixo do ecra com a barra de progresso. 70svh corta 15px e faz caber tudo. Em retrato NUNCA chega a pegar (medido: a pior largura, 439px, pede 484px de moldura contra 652px de tecto), e quando pega corta todas as pecas na mesma medida — as molduras continuam iguais entre si, que era a razao de ser da moldura fixa. */ .gitem img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:var(--pos,50% 50%);display:block;transition:transform .6s var(--ease); max-height:70vh;max-height:70svh} /* O guarda (hover:hover) e obrigatorio: sem ele o :hover fica agarrado a peca depois de um toque e a fotografia continua ampliada. */ @media (hover:hover){.gitem:hover img{transform:scale(1.05)}} /* ENQUADRAMENTO: vive no HTML, em style="--pos:x y", ao lado da a que pertence. Deliberadamente NAO em selectores por nome de ficheiro: esses falham em silencio quando alguem renomeia ou substitui uma fotografia. Fotografia nova entra sem --pos e fica ao centro. */ /* LEGENDA sempre visivel — no telemovel nao ha hover. Fica sobreposta dentro da moldura, por isso custa ZERO pixels de altura a faixa. O veu e de alfa FIXO (nao um degrade por baixo do texto): assim o contraste nao depende da fotografia nem do numero de linhas. Branco sobre rgba(22,35,58,.9) — o token --ink — da 11,6:1 no pior caso possivel (uma fotografia 100% branca por baixo). AA pede 4,5:1. O esbatimento por cima e uma curva acelerada (quase nada no topo) para nao deixar aresta visivel — um degrade linear cria uma banda de Mach no inicio. `pointer-events:none` deixa o toque atravessar para a imagem e abrir a lightbox. */ .gitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:.42rem .5rem .48rem;color:#fff;font-family:var(--font-head);font-weight:600;font-size:.77rem;line-height:1.25;background:rgba(22,35,58,.9);text-shadow:0 1px 3px rgba(22,35,58,.6);pointer-events:none} .gitem figcaption::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:2.4rem;background:linear-gradient(180deg,rgba(22,35,58,0) 0%,rgba(22,35,58,.06) 30%,rgba(22,35,58,.18) 50%,rgba(22,35,58,.40) 68%,rgba(22,35,58,.66) 84%,rgba(22,35,58,.9) 100%)} /* A legenda cresce aos 521px e nao aos 760px da grelha antiga: na faixa a peca a 521px ja tem 287px de largura (contra 165px que a grelha de 3 colunas dava a essa largura), e a legenda mais comprida — "Revestimento tipo marmore" — mede 173px a .9rem. Cabe numa linha em toda a gama a partir daqui; medido em 521, 601, 768 e 960px, sempre uma linha. */ @media (min-width:521px){.gitem figcaption{padding:.55rem .8rem .6rem;font-size:.9rem}} @media (prefers-reduced-motion:reduce){.gitem img{transition:none}.gitem:hover img{transform:none}} /* SETAS. `display:none` na base e a regra de hover a reactiva-las: assim o atributo `hidden` do HTML continua a mandar (o atributo nao esconde nada quando o CSS declara um display) e num ecra tactil nunca aparecem — quem tem dedo tem o gesto, e duas bolas brancas por cima das fotografias so tapavam obra. 46px de alvo (>=44px). */ .carrossel__seta{ display:none;position:absolute;z-index:2; top:calc(50% - 4px);transform:translateY(-50%); width:46px;height:46px;padding:0;border:0;border-radius:50%; align-items:center;justify-content:center;cursor:pointer; background:rgba(255,255,255,.95);color:var(--navy); box-shadow:0 8px 22px -8px rgba(12,38,68,.6),0 0 0 1px rgba(12,38,68,.12); transition:opacity var(--t),background var(--t),color var(--t); } @media (hover:hover){.carrossel__seta:not([hidden]){display:flex}} .carrossel__seta svg{width:22px;height:22px} .carrossel__seta--prev{inset-inline-start:8px} .carrossel__seta--next{inset-inline-end:8px} @media (hover:hover){.carrossel__seta:hover{background:#fff;color:var(--blue)}} /* No inicio e no fim a seta correspondente desaparece em vez de ficar la a nao fazer nada. `disabled` — e nao aria-disabled — porque ela desaparece MESMO (opacity:0): um botao invisivel que continuasse na ordem de tabulacao dava uma paragem de Tab sem nada para ver, que e a falha 2.4.7. Com `disabled` sai da ordem de tabulacao ao mesmo tempo que sai da vista. */ .carrossel__seta[disabled]{opacity:0;pointer-events:none} @media (prefers-reduced-motion:reduce){.carrossel__seta{transition:none}} /* BARRA DE PROGRESSO em vez de pontos: com 12 fotografias, doze pontinhos sao ruido visual e alvos de toque pequenos de mais. A barra diz duas coisas ao mesmo tempo — onde vamos e QUANTO FALTA — e nao cresce com o numero de fotografias. Azul --blue sobre --line-2: 4,97:1, acima dos 3:1 que a WCAG pede a um elemento nao textual. */ .carrossel__barra{position:relative;height:4px;width:min(260px,52%);margin:1.15rem auto 0;border-radius:var(--radius-pill);background:var(--line-2);overflow:hidden} .carrossel__barra[hidden]{display:none} .carrossel__polegar{position:absolute;inset-block:0;left:0;width:30%;border-radius:inherit;background:var(--blue);transition:transform .15s linear,width .2s ease} @media (prefers-reduced-motion:reduce){.carrossel__polegar{transition:none}} /* A chamada final estava alinhada a esquerda por baixo de uma seccao centrada — nao tinha uma unica regra em lado nenhum do site. */ .obras__cta{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center} /* ============================================================ BLOCO SEPARADO — NAO E DO CARROSSEL. Vai no fim do styles.css. Se outra sessao ja tiver escrito CSS para a lightbox, deitem este fora. ============================================================ */ /* ---------------- LIGHTBOX ---------------- * NAO E DO CARROSSEL: a marcacao (#lightbox) e o JS que a abre ja existiam, mas nao havia UMA regra de CSS para eles em lado nenhum — nem no ficheiro de trabalho nem no HEAD do git. Sem isto a "lightbox" e um bloco sem estilo no fim do documento, sempre visivel, com a fotografia esticada (object-fit computa `fill`) — ou seja, a promessa "clique para ver a fotografia inteira", que e o que justifica cortar as 12 fotografias em 3:4, nao se cumpre nem hoje com a grelha nem amanha com o carrossel. Fecha-se com `[hidden]`? Nao: o JS nao mexe no atributo hidden, so na classe .is-open e no aria-hidden. Por isso e a classe que manda aqui. */ .lightbox{ position:fixed;inset:0;z-index:200;/* acima do menu (130) e do banner (180) */ display:flex;align-items:center;justify-content:center; padding:clamp(.8rem,3vw,2rem); background:rgba(6,22,39,.94); opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t); } .lightbox.is-open{opacity:1;visibility:visible} @media (prefers-reduced-motion:reduce){.lightbox{transition:none}} /* A figura nao pode crescer alem do ecra: e o `min-height:0` que deixa a encolher dentro dela (sem ele um flex item nao desce abaixo do seu conteudo e a fotografia saia por baixo). */ .lightbox__figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:.7rem;min-height:0} /* `contain` e o contrato desta janela: aqui ve-se a fotografia INTEIRA, com as proporcoes dela, seja panoramica ou vertical. */ .lightbox__img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;border-radius:var(--radius);background:var(--navy-900)} .lightbox__cap{flex:none;color:#fff;font-family:var(--font-head);font-weight:600;font-size:.95rem;text-align:center} /* 52px de alvo. O fundo dos botoes e ESCURO e nao claro: eles ficam por cima da fotografia (num ecra largo o `contain` deixa-a chegar aos lados) e um branco a 14% sobre uma cozinha branca dava um icone que praticamente desaparecia. Branco sobre rgba(6,22,39,.82) por cima da fotografia mais clara possivel (100% branca) = 8,98:1; sobre o veu escuro da propria lightbox, 16,1:1. */ .lightbox__btn{ position:absolute;z-index:2;width:52px;height:52px;padding:0;border:0;border-radius:50%; display:flex;align-items:center;justify-content:center;cursor:pointer; background:rgba(6,22,39,.82);color:#fff; transition:background var(--t-fast),color var(--t-fast); } .lightbox__btn svg{width:26px;height:26px} @media (hover:hover){.lightbox__btn:hover{background:#fff;color:var(--navy)}} .lightbox__btn--close{top:max(.6rem,env(safe-area-inset-top));inset-inline-end:.6rem} .lightbox__btn--prev{inset-inline-start:.4rem;top:50%;transform:translateY(-50%)} .lightbox__btn--next{inset-inline-end:.4rem;top:50%;transform:translateY(-50%)} /* Em ecra estreito as setas descem para uma fila POR BAIXO. Se ficassem nos lados, tinham de ser descontados 120px de largura a fotografia — e as quatro panoramicas, que ja perdem 66% da largura na moldura da faixa, abriam com 118px de altura. Medido a 390px: a panoramica passou de 262x118 para 364x164 e a vertical de 262x581 para 324x717. */ @media (max-width:600px){ .lightbox{padding-block-end:78px} .lightbox__btn--prev,.lightbox__btn--next{top:auto;bottom:13px;transform:none} .lightbox__btn--prev{inset-inline-start:calc(50% - 62px)} .lightbox__btn--next{inset-inline-end:calc(50% - 62px)} } /* ---------------- OBRAS · CTA ---------------- */ /* Perdido no mesmo recorte que levou a lightbox: sem isto o «Quer ver o seu espaco assim?» ficava encostado a esquerda por baixo de uma seccao centrada. */ .obras__cta{margin-top:2.4rem;display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center} .obras__cta p{font-family:var(--font-head);font-weight:600;font-size:1.15rem;color:var(--ink)} /* ---------------- VER MAIS (mobile) ---------------- */ /* Levado no mesmo recorte que levou a lightbox e o .obras__cta: sem isto o botao do Antes & Depois fica encostado a esquerda, sem centragem nem largura minima. A galeria ja nao usa isto (passou a faixa), mas o comparador Antes & Depois continua a usar. */ .more-wrap{margin-top:1.5rem;display:flex;justify-content:center} .more-btn{min-width:210px} /* ---------------- CONTACTO ---------------- */ .contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,2.6rem);align-items:stretch;margin-top:.5rem} .contact__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-sm);display:flex;flex-direction:column} .contact__card h3{font-size:1.35rem;margin-bottom:1.4rem} .contact__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;justify-content:center;gap:1.3rem;flex:1} .contact__list li{display:flex;gap:.9rem;align-items:center} .contact__ic{flex:none;width:46px;height:46px;border-radius:50%;background:var(--blue-050);color:var(--blue);display:flex;align-items:center;justify-content:center;border:1px solid #D8E5F6} .contact__ic svg{width:21px;height:21px} .contact__list small{color:var(--muted);display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600} .contact__list a{color:var(--ink);font-family:var(--font-head);font-weight:700;display:inline-flex;align-items:center;min-height:44px;font-size:1.05rem} .contact__list a:hover{color:var(--blue)} .contact__list li>div span{display:block} .contact__list .call-note{font-family:var(--font-body);font-weight:400;text-transform:none;letter-spacing:0;opacity:.72} .contact__actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem} .contact__actions .btn{flex:1} .contact__map{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:1/1;border:1px solid var(--line)} /* inset:0 em vez de height:100%: a altura da caixa vem do aspect-ratio e uma percentagem contra uma altura assim nem sempre resolve — quando nao resolve, o iframe cai para os 150px de origem e sobra branco dentro da propria caixa. Absoluto preenche sempre, nos dois estados. */ .map-box{position:absolute;inset:0} .contact__map iframe{width:100%;height:100%;display:block;border:0} .map-facade{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:1.6rem;color:var(--ink);background:radial-gradient(circle at 30% 20%,#eef3f9,#e2e9f2)} .map-facade svg{width:46px;height:46px;color:var(--blue)} .map-facade p{font-size:.88rem;color:var(--muted);max-width:34ch} /* O 4/3 deitado num ecra vertical dava uma caixa de 355x266 e o Google cortava as etiquetas nas margens (lia-se «Mini Merca...»); a rua da morada nem chegava a ser desenhada. Em pe, a mesma largura da 355 rende 473px de altura e cabe «R. 5 de Outubro» inteira a volta do marcador. */ @media (max-width:820px){.contact__grid{grid-template-columns:1fr}.contact__map{aspect-ratio:3/4} /* O «vazio» por baixo do mapa nao era anomalia nenhuma: era o padding-block do .section (51,2px aos 390px). So que o cartao do mapa fica a 17,6px das margens laterais e a 51,2px do rodape — quase o triplo — e a assimetria le-se como buraco. Metade da cadencia da seccao chega: o rodape ja traz 44,8px de escuro por cima do logotipo. */ #contacto{padding-bottom:clamp(1.6rem,3.5vw,3rem)}} /* Telemovel ao alto mas ecra deitado (667x375 e afins): a caixa em pe passava dos 900px de altura num ecra de 375. Ai a proporcao segue a do ecra. */ @media (max-width:820px) and (orientation:landscape){.contact__map{aspect-ratio:3/2}} /* ---------------- FOOTER ---------------- */ .footer{position:relative;background:var(--grad-navy);color:#B9C7DA;padding-top:clamp(2.8rem,5vw,4.2rem)} .footer::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--gold)} .footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:2rem;padding-bottom:2.4rem} .footer__logo{height:auto;width:230px;max-width:70%} .footer__brand p{max-width:34ch;font-size:.95rem;margin-top:1rem} .footer__social{display:flex;gap:.6rem;margin-top:1.1rem} .footer__social a{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#fff;transition:background var(--t-fast),transform var(--t-fast)} .footer__social a:hover{background:var(--gold);color:var(--navy);transform:translateY(-2px)} .footer__social svg{width:22px;height:22px} .footer__col h4{color:#fff;font-size:1.05rem;margin-bottom:.9rem;font-family:var(--font-head)} .footer__col ul{display:flex;flex-direction:column;list-style:none;padding:0;margin:0} .footer__col a{color:#B9C7DA;font-size:.95rem}.footer__col a:hover{color:#fff} /* Eram 19px de altura (e o «Obras» 43x19). Agora cada linha e um alvo de 44. So na coluna de navegacao: a dos contactos e tambem um