/* ========================================================================== Jardinagem Coelho — sistema de estilos Paleta retirada do logótipo: preto profundo, verde JARDIN (#00ab4f), verde relva (#3cd30c), folhas (#9bc643 / #74ae3d / #228134 / #006b31), cinza COELHO (#b0b1b3) e terra dos rolos (#5f5647 / #857d6e). ========================================================================== */ /* letras: "block" = enquanto a letra não chega o texto fica invisível (uma fração de segundo) e aparece já na letra certa, em vez de surgir numa letra de recurso e mudar à frente do visitante; as letras são pré-carregadas no de cada página para chegarem logo a seguir ao CSS */ @font-face { font-family: "Oswald"; src: url("../assets/fonts/oswald-latin.woff2") format("woff2"); font-weight: 200 700; font-display: block; } /* letras: "block" = enquanto a letra não chega o texto fica invisível (uma fração de segundo) e aparece já na letra certa, em vez de surgir numa letra de recurso e mudar à frente do visitante; as letras são pré-carregadas no de cada página para chegarem logo a seguir ao CSS */ @font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: block; } /* letras: "block" = enquanto a letra não chega o texto fica invisível (uma fração de segundo) e aparece já na letra certa, em vez de surgir numa letra de recurso e mudar à frente do visitante; as letras são pré-carregadas no de cada página para chegarem logo a seguir ao CSS */ @font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-500-latin.woff2") format("woff2"); font-weight: 500; font-display: block; } /* letras: "block" = enquanto a letra não chega o texto fica invisível (uma fração de segundo) e aparece já na letra certa, em vez de surgir numa letra de recurso e mudar à frente do visitante; as letras são pré-carregadas no de cada página para chegarem logo a seguir ao CSS */ @font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-600-latin.woff2") format("woff2"); font-weight: 600; font-display: block; } /* letras: "block" = enquanto a letra não chega o texto fica invisível (uma fração de segundo) e aparece já na letra certa, em vez de surgir numa letra de recurso e mudar à frente do visitante; as letras são pré-carregadas no de cada página para chegarem logo a seguir ao CSS */ @font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-700-latin.woff2") format("woff2"); font-weight: 700; font-display: block; } /* letras: "block" = enquanto a letra não chega o texto fica invisível (uma fração de segundo) e aparece já na letra certa, em vez de surgir numa letra de recurso e mudar à frente do visitante; as letras são pré-carregadas no de cada página para chegarem logo a seguir ao CSS */ @font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-latin.woff2") format("woff2"); font-weight: 300 700; font-display: block; } /* letras: "block" = enquanto a letra não chega o texto fica invisível (uma fração de segundo) e aparece já na letra certa, em vez de surgir numa letra de recurso e mudar à frente do visitante; as letras são pré-carregadas no de cada página para chegarem logo a seguir ao CSS */ @font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-italic-latin.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: block; } :root { --preto: #060907; --carvao: #0f1411; --grafite: #1a211c; --verde: #00ab4f; --verde-vivo: #3cd30c; --verde-escuro: #006b31; --folha: #74ae3d; --lima: #9bc643; --cinza: #b0b1b3; --cinza-escuro: #6f7470; --areia: #f3f2ec; --areia-escura: #e6e4da; --papel: #ffffff; --terra: #5f5647; --terra-clara: #857d6e; --tinta: #10140f; --tinta-suave: #4a5048; --fonte-titulo: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif; --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fonte-ui: "Poppins", "Inter", system-ui, sans-serif; --fonte-serifa: "Cormorant Garamond", "Times New Roman", Georgia, serif; --gutter: clamp(16px, 5vw, 56px); --largura: 1240px; --secao: clamp(72px, 11vw, 150px); --raio: 6px; --cabecalho: 76px; --marca-altura: clamp(126px, 13.4vw, 210px); /* altura do selo verde pendurado no topo */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); color-scheme: dark; /* 1 % da altura do ecrã. No PC são exatamente 1vh e 1svh; no telemóvel o script do fixa-as em píxeis */ --vh: 1vh; --svh: 1vh; } @supports (height: 1svh) { :root { --svh: 1svh; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* scroll suave nas âncoras só com rato/trackpad: no telemóvel qualquer acerto de scroll feito por código passava a ser um deslizar visível (a página parecia voltar para cima sozinha) */ @media (hover: hover) and (pointer: fine) { html { scroll-behavior: smooth; } } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--preto); color: var(--areia); font-family: var(--fonte-texto); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, video, svg { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; text-wrap: balance; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--verde); color: var(--preto); } :focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 3px; } .secao--clara :focus-visible, .secao--papel :focus-visible { outline-color: var(--verde-escuro); } /* com o dedo ou o rato (data-entrada="ponteiro", posto pelo script do ) o foco que os scripts põem em botões e ligações (menu, galeria, janelas, idioma) não mostra o contorno verde; com o teclado mostra sempre */ html[data-entrada="ponteiro"] :focus-visible { outline: none !important; } .secao--clara, .secao--papel { color-scheme: light; } [hidden] { display: none !important; } .visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .saltar { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--verde); color: var(--preto); padding: 10px 16px; border-radius: var(--raio); font-weight: 600; transition: top .2s; } .saltar:focus { top: 16px; } /* ---------- utilitários de layout ---------- */ .container { width: min(100% - 2 * var(--gutter), var(--largura)); margin-inline: auto; } .container-estreito { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; } .secao { padding-block: var(--secao); position: relative; scroll-margin-top: 56px; } .secao--clara { background: var(--areia); color: var(--tinta); } .secao--papel { background: var(--papel); color: var(--tinta); } .secao--escura { background: var(--preto); color: var(--areia); } .secao--clara a, .secao--papel a { color: inherit; } .grelha { display: grid; gap: clamp(24px, 4vw, 56px); } .grelha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .grelha--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .grelha--3 { grid-template-columns: minmax(0, 1fr); } } /* ---------- tipografia ---------- */ .rotulo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fonte-texto); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--verde); } .rotulo::before { content: ""; width: 28px; height: 2px; background: currentColor; } .secao--clara .rotulo, .secao--papel .rotulo { color: var(--verde-escuro); } .titulo-xl { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.95; } .titulo-l { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 0.98; } .titulo-m { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.02; } .titulo-s { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1; } .texto-l { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.6; } .texto-suave { color: var(--cinza); } .secao--clara .texto-suave, .secao--papel .texto-suave { color: var(--tinta-suave); } .texto-limitado { max-width: 62ch; } .texto-limitado--curto { max-width: 46ch; } .cabecalho-secao { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); } .cabecalho-secao--linha { grid-template-columns: 1fr auto; align-items: end; } @media (max-width: 700px) { .cabecalho-secao--linha { grid-template-columns: 1fr; } } /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.02rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--raio); border: 1.5px solid transparent; transition: transform .35s var(--ease-out), background-color .25s, color .25s, border-color .25s, box-shadow .35s; will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primario { background: var(--verde); color: var(--preto); box-shadow: 0 10px 30px -12px rgba(0, 171, 79, .7); } .btn--primario:hover { background: var(--verde-vivo); box-shadow: 0 16px 34px -12px rgba(60, 211, 12, .75); } .btn--contorno { border-color: rgba(255,255,255,.35); color: var(--areia); } .btn--contorno:hover { border-color: var(--verde-vivo); color: var(--verde-vivo); } .secao--clara .btn--contorno, .secao--papel .btn--contorno { border-color: rgba(16,20,15,.35); color: var(--tinta); } .secao--clara .btn--contorno:hover, .secao--papel .btn--contorno:hover { border-color: var(--verde-escuro); color: var(--verde-escuro); } .btn--escuro { background: var(--tinta); color: var(--areia); } .btn--escuro:hover { background: var(--verde-escuro); } .secao--clara .btn--escuro, .secao--papel .btn--escuro { color: var(--areia); } .btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease-out); } .btn:hover svg { transform: translateX(4px); } .ligacao-seta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 1rem; position: relative; } .ligacao-seta::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); } .ligacao-seta:hover::after { transform: scaleX(1); } .ligacao-seta svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); } .ligacao-seta:hover svg { transform: translateX(4px); } /* ---------- cabeçalho ---------- */ /* sem barra nem gradiente: só o botão "Menu" flutua sobre a página. O cabeçalho usa mix-blend-mode: difference, por isso o botão fica branco sobre fundos escuros e escuro sobre fundos claros, sem precisar de faixa por trás. */ .cabecalho { position: fixed; inset: 0 0 auto 0; z-index: 120; height: var(--cabecalho); background: none; pointer-events: none; mix-blend-mode: difference; transition: transform .5s var(--ease-out); } .cabecalho.esta-escondida { transform: translateY(-100%); } .cabecalho__interior { position: relative; height: 100%; display: flex; align-items: center; justify-content: flex-end; } .cabecalho__interior > * { pointer-events: auto; } /* selo de marca: bloco verde pendurado no topo da página, como o retângulo do avantgarden. Não é fixo: rola com o conteúdo e volta a aparecer quando se regressa ao topo. */ .marca-ancora { position: absolute; top: 0; left: 0; right: 0; z-index: 101; height: 0; pointer-events: none; } .entrada .marca-ancora { z-index: 7; } .marca { position: absolute; top: 0; left: clamp(16px, 6vw, 96px); pointer-events: auto; width: clamp(104px, 11vw, 172px); min-height: var(--marca-altura); background: var(--verde); color: #fff; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 16px 10px 18px; text-align: center; text-decoration: none; box-shadow: 0 24px 48px -24px rgba(0,0,0,.6); transition: opacity .5s, visibility .5s, transform .6s var(--ease-out), background-color .3s; } .marca:hover { background: #02b856; } .marca__icone { width: 52%; margin-bottom: 8px; display: block; } .marca__icone img, .marca__icone svg { width: 100%; height: auto; display: block; } .marca__nome { font-family: var(--fonte-ui); font-weight: 700; font-size: clamp(.72rem, 1vw, .98rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; } .marca__apelido { font-family: var(--fonte-ui); font-weight: 500; font-size: clamp(.62rem, .82vw, .8rem); letter-spacing: .34em; text-transform: uppercase; line-height: 1; opacity: .92; margin-left: .34em; } .entrada .marca { opacity: 0; visibility: hidden; transform: translateY(-16px); } .entrada.logo-visivel .marca, .entrada--estatica .marca, .entrada-vista .entrada .marca { opacity: 1; visibility: visible; transform: none; } /* botão "Menu" no canto superior direito */ .menu-botao { display: inline-flex; align-items: center; gap: 14px; height: 44px; padding: 0 4px; font-family: var(--fonte-ui); font-weight: 500; font-size: .95rem; letter-spacing: .02em; color: #fff; position: relative; } .menu-botao__icone { position: relative; width: 24px; height: 16px; display: block; } .menu-botao__icone::before, .menu-botao__icone::after, .menu-botao__icone i { content: ""; position: absolute; left: 0; width: 24px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out), opacity .3s; } .menu-botao__icone::before { top: 1px; } .menu-botao__icone i { top: 7px; } .menu-botao__icone::after { top: 13px; } .menu-botao[aria-expanded="true"] .menu-botao__icone::before { transform: translateY(6px) rotate(45deg); } .menu-botao[aria-expanded="true"] .menu-botao__icone i { opacity: 0; } .menu-botao[aria-expanded="true"] .menu-botao__icone::after { transform: translateY(-6px) rotate(-45deg); } .menu-botao:hover .menu-botao__icone::before { transform: translateX(-3px); } .menu-botao:hover .menu-botao__icone::after { transform: translateX(3px); } .menu-botao[aria-expanded="true"]:hover .menu-botao__icone::before { transform: translateY(6px) rotate(45deg); } .menu-botao[aria-expanded="true"]:hover .menu-botao__icone::after { transform: translateY(-6px) rotate(-45deg); } /* menu de ecrã inteiro (todas as páginas, todos os tamanhos) */ .menu { position: fixed; inset: 0; z-index: 110; background: var(--preto); background-image: radial-gradient(ellipse 60% 50% at 80% 100%, rgba(0,171,79,.18), transparent 60%); display: grid; align-items: center; padding: calc(var(--cabecalho) + 16px) 0 40px; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; overflow: auto; } .menu.esta-aberto { opacity: 1; visibility: visible; } .menu, .modal__caixa { overscroll-behavior: contain; } .menu__interior { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; } @media (max-width: 800px) { .menu__interior { grid-template-columns: 1fr; align-items: start; } } .menu__lista { display: grid; gap: 4px; } .menu__ligacao { font-family: var(--fonte-titulo); font-size: clamp(2rem, min(7vw, calc(8.4 * var(--vh))), 5.2rem); text-transform: uppercase; font-weight: 600; line-height: 1; display: flex; align-items: baseline; gap: clamp(12px, 2vw, 24px); padding: 8px 0; color: var(--areia); transform: translateY(24px); opacity: 0; transition: transform .6s var(--ease-out), opacity .6s, color .3s; } .menu__ligacao:hover, .menu__ligacao[aria-current="page"] { color: var(--verde-vivo); } .menu__ligacao small { font-family: var(--fonte-ui); font-weight: 500; font-size: .78rem; color: var(--verde); letter-spacing: .18em; min-width: 2.2em; } .menu.esta-aberto .menu__ligacao { transform: none; opacity: 1; } /* entrada em cascata: o atraso só se aplica ao transform e à opacidade, não à cor do hover */ .menu.esta-aberto li:nth-child(2) .menu__ligacao { transition-delay: .05s, .05s, 0s; } .menu.esta-aberto li:nth-child(3) .menu__ligacao { transition-delay: .1s, .1s, 0s; } .menu.esta-aberto li:nth-child(4) .menu__ligacao { transition-delay: .15s, .15s, 0s; } .menu.esta-aberto li:nth-child(5) .menu__ligacao { transition-delay: .2s, .2s, 0s; } .menu.esta-aberto li:nth-child(6) .menu__ligacao { transition-delay: .25s, .25s, 0s; } .menu.esta-aberto li:nth-child(7) .menu__ligacao { transition-delay: .3s, .3s, 0s; } .menu__lado { display: grid; gap: 14px; color: var(--cinza); font-size: .98rem; transform: translateY(24px); opacity: 0; transition: transform .6s var(--ease-out) .2s, opacity .6s .2s; } .menu.esta-aberto .menu__lado { transform: none; opacity: 1; } .menu__lado a:not(.btn) { color: var(--areia); } .menu__lado a:not(.btn):hover { color: var(--verde-vivo); } .menu__lado .btn { justify-self: start; margin-top: 8px; } .menu__lado .redes { margin-top: 4px; } /* ---------- seletor de idioma ---------- */ /* fica fora do cabeçalho (que usa mix-blend-mode: difference e inverteria as cores das bandeiras); alinha-se pelo mesmo contentor e esconde-se ao rolar junto com o botão "Menu" (main.js). O botão "Menu" recua para lhe dar lugar. */ .cabecalho__interior { padding-right: 76px; } .idioma { position: fixed; inset: 0 0 auto 0; z-index: 121; height: var(--cabecalho); pointer-events: none; transition: transform .5s var(--ease-out); } .idioma.esta-escondida { transform: translateY(-100%); } /* o seletor fica 44 px à direita da margem do contentor (menos em ecrãs estreitos, para não sair do ecrã) */ .idioma__interior { position: relative; height: 100%; display: flex; align-items: center; justify-content: flex-end; transform: translateX(min(44px, var(--gutter) - 12px)); } /* sem fundo nem rebordo: só a bandeira, o código e a seta. Sobre zonas claras da página o idioma.js põe a classe sobre-claro no seletor e as letras passam a escuras (o mesmo efeito que o botão "Menu" tem por blend mode). */ .idioma__botao { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; border-radius: 999px; background: none; border: 0; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.4); font-family: var(--fonte-ui); font-weight: 500; font-size: .82rem; letter-spacing: .06em; transition: color .25s, opacity .25s; } .idioma__botao:hover, .idioma__botao[aria-expanded="true"] { opacity: .78; } .idioma__botao img { width: 26px; height: auto; border-radius: 2px; box-shadow: 0 1px 6px rgba(0,0,0,.35); } .idioma__botao svg { width: 12px; height: 12px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); transition: transform .3s var(--ease-out); } .idioma.sobre-claro .idioma__botao { color: var(--tinta); text-shadow: none; } .idioma.sobre-claro .idioma__botao svg { filter: none; } .idioma.sobre-claro .idioma__botao img { box-shadow: 0 0 0 1px rgba(16,20,15,.18); } .idioma__botao[aria-expanded="true"] svg { transform: rotate(180deg); } .idioma__lista { pointer-events: auto; position: absolute; right: 0; top: calc(50% + 28px); min-width: 224px; padding: 8px; display: grid; gap: 4px; list-style: none; margin: 0; border-radius: 14px; background: rgba(6,9,7,.94); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .idioma__lista[hidden] { display: none; } .idioma__opcao { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 9px; text-align: left; color: var(--areia); font-family: var(--fonte-ui); font-weight: 500; font-size: .98rem; transition: background-color .2s, color .2s; } .idioma__opcao:hover { background: rgba(255,255,255,.1); } .idioma__opcao[aria-selected="true"] { color: var(--verde-vivo); background: rgba(0,171,79,.14); } .idioma__opcao img { width: 46px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.22); } @media (max-width: 500px) { .cabecalho__interior { padding-right: 58px; } .idioma__botao { padding: 0 2px; } .idioma__botao .idioma__codigo, .idioma__botao svg { display: none; } } /* ---------- entrada imersiva ---------- */ /* a entrada tem no mínimo a altura do ecrã, mas cresce se o texto não couber (janelas muito baixas): como no avantgarden, o resto aparece ao rolar em vez de ficar cortado. --entrada-ecra é a altura do primeiro ecrã, onde ficam o logótipo e a dica. */ .entrada { --entrada-ecra: max(calc(100 * var(--svh)), 560px); position: relative; min-height: var(--entrada-ecra); background: var(--preto); overflow: clip; color: var(--areia); /* clip (não hidden): a pílula fica agarrada ao fundo do ecrã com position: sticky */ } .entrada__cena { position: relative; min-height: var(--entrada-ecra); } /* o contexto 3D fica confinado ao palco do logótipo; fotos, véus e texto ficam fora dele (dentro de um preserve-3d as camadas planas do carrossel deixavam de ser desenhadas) */ .entrada__palco { position: absolute; inset: 0 0 auto 0; height: var(--entrada-ecra); z-index: 4; perspective: 1400px; perspective-origin: 50% 50%; transform-style: preserve-3d; pointer-events: none; } /* fundo com paralaxe (fotografia aérea + carrossel): cobre o hero inteiro e, depois da entrada, desce a 20 % da velocidade do rolar, para a fotografia subir mais devagar do que o texto (entrada.js) */ .entrada__fundo { position: absolute; inset: 0; z-index: 0; will-change: transform; } /* fase 1: fotografia aérea atrás do logótipo */ .entrada__foto { position: absolute; inset: 0; z-index: 0; will-change: transform, opacity; background: #0b1410 url("data:image/webp;base64,UklGRqIBAABXRUJQVlA4IJYBAACQCACdASowABwAPrVOnEmnJKKhMBqqqOAWiWYAnTLCR8hevAJYqQZEp48APw4nBcMkdP9Zv9gfUvbfOO+ORb5cARSHqcn+ba9uSw+gAAD+mcdH6ZlMi5dg4CWhGAiSlxLoEFHx9W0rta8lZTQD6qp/mhex8v29uhI2q6ODoLm8EO+3KrL/h/izHY8ZTpT9NBqVWCp/YZqRGrqoOcoEK39iETAOYCjnBOFsyWNSHLSf8cIZEoanZmrz4YZAgEPiUhgadctbeeNxZCd4PsIkXeCCG11xUukjC9gAHAnGXuqESsfF+uvALL926OgZBK6aeHQbfxZvFl0n6Ab2e5gYA9r51jH2qeQe63+pupFHLIRSVAB0K6R50J6sV3h3FN3Thr3O9xoDBHrB+ArozK+VeJVEsGAb2yXupa1a6TZB4rmYTAtbe7gzru1Nvdk9GUmoxYIHjkF91sCkmNBuJBjVqiXte10MuYXTJMnRm1/ur/gASoX5Hr/PqNebs3OfOLhz39qnrjy/x9P3gAxCX6Iu8kFRKYGltyAA") center / cover no-repeat; } .entrada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } /* fase 2: carrossel de moradias ao estilo avantgarden */ .entrada__slides { position: absolute; inset: 0; z-index: 1; opacity: 0; will-change: opacity; } /* cada fotografia fica sempre na sua própria camada de GPU (transform contínuo + will-change), para a troca ser um simples crossfade sem promoção de camadas nem descodificação a meio */ .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s var(--ease-in-out); will-change: opacity; backface-visibility: hidden; } .slide img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: translateZ(0) scale(1.04); animation: slide-respira 22s ease-in-out infinite alternate; } .slide.esta-ativo { opacity: 1; } /* 1.ª fotografia: se ainda não chegou (sem cache), aparece com um fade curto sobre o fundo escuro (entrada.js) */ .slide img.a-carregar { opacity: 0; } .slide:first-child img { transition: opacity .45s ease; } /* só a fotografia ativa "respira"; as outras ficam paradas onde estavam (sem salto) e tudo pára fora do ecrã */ .slide img { animation-play-state: paused; } .slide.esta-ativo img { animation-play-state: running; } .entrada.fora-de-vista .slide img { animation-play-state: paused; } @keyframes slide-respira { from { transform: translateZ(0) scale(1.04); } to { transform: translateZ(0) scale(1.09); } } /* telemóvel/tablet: depois da entrada o hero usa poucas camadas de GPU (a memória gráfica do telemóvel é pouca: o hero ficava preto e o scroll engasgava) e as fotografias cruzam-se sem o zoom lento */ @media (hover: none) and (pointer: coarse) { .entrada:not(.esta-presa) .entrada__fundo, .entrada:not(.esta-presa) .entrada__slides, .entrada:not(.esta-presa) .entrada__veu, .entrada:not(.esta-presa) .entrada__veu-leve, .entrada:not(.esta-presa) .slide, .entrada:not(.esta-presa) .slide img { will-change: auto; } .entrada:not(.esta-presa) .slide { backface-visibility: visible; } .slide img { animation: none; transform: scale(1.04); } } /* véu escuro que mantém o logótipo e o texto legíveis (mais leve na fase 2, via GSAP) */ .entrada__veu { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: opacity; background: radial-gradient(ellipse 70% 60% at 50% 48%, rgba(6,9,7,.28), rgba(6,9,7,.58)), linear-gradient(to bottom, rgba(6,9,7,.55), rgba(6,9,7,.08) 35%, rgba(6,9,7,.22) 70%, rgba(6,9,7,.66)); } .entrada__veu-leve { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; will-change: opacity; background: linear-gradient(to bottom, rgba(6,9,7,.42), rgba(6,9,7,.04) 30%, rgba(6,9,7,.06) 60%, rgba(6,9,7,.46)); } .entrada--estatica .entrada__veu, .entrada-vista .entrada__veu { display: none; } .entrada--estatica .entrada__veu-leve, .entrada-vista .entrada__veu-leve { opacity: 1; } .entrada__brilho { position: absolute; left: 50%; top: calc(var(--entrada-ecra) * 0.58); z-index: 2; width: 120vmax; height: 60vmax; transform: translate(-50%, -30%); background: radial-gradient(ellipse at center, rgba(0,171,79,.22), rgba(0,171,79,.05) 40%, transparent 65%); pointer-events: none; will-change: opacity, transform; } .entrada__logo { position: absolute; left: 50%; top: 50%; z-index: 4; width: min(72vw, 880px, calc(92 * var(--vh))); aspect-ratio: 276 / 194; transform: translate(-50%, -54%); transform-style: preserve-3d; will-change: transform; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); } .entrada__camada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-style: preserve-3d; will-change: transform, opacity; backface-visibility: hidden; pointer-events: none; user-select: none; } /* conteúdo da fase 2 (tagline, título em serifa, pílula) */ /* como no avantgarden, o hero tem 125 % da altura do ecrã: o texto vive no primeiro ecrã e o quarto restante é só fotografia, que ainda se vê depois de o texto sair; a pílula fica agarrada ao fundo do ecrã durante esse quarto */ .entrada__conteudo { position: relative; min-height: calc(var(--entrada-ecra) * 1.25); z-index: 5; pointer-events: none; display: grid; grid-template-rows: 1fr auto 1fr calc(var(--entrada-ecra) * 0.25); align-items: center; /* o topo reserva o espaço do selo para a tagline nunca ficar tapada */ padding: calc(var(--marca-altura) + 32px) var(--gutter) clamp(32px, calc(7 * var(--vh)), 72px); } .entrada__conteudo > * { pointer-events: auto; } .entrada__tagline, .entrada__titulo-serifa, .entrada .pilula, .entrada__explorar, .entrada__pontos { opacity: 0; visibility: hidden; will-change: transform, opacity; } .entrada__bloco { grid-row: 2; max-width: 1240px; width: 100%; margin: 0 auto; display: grid; gap: clamp(14px, calc(2 * var(--vh)), 24px); } .entrada__tagline { font-family: var(--fonte-ui); font-weight: 500; font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.4; max-width: 30ch; color: var(--areia); text-shadow: 0 2px 20px rgba(0,0,0,.5); transform: translateY(24px); } .entrada__titulo-serifa { font-family: var(--fonte-serifa); font-weight: 300; text-transform: none; letter-spacing: -.01em; /* duas linhas em ecrãs largos (a quebra está no HTML); o tamanho conta com a largura e com a altura da janela, para o título e a pílula caberem sempre num portátil de ecrã baixo */ font-size: clamp(3rem, min(7.4vw, calc(14 * var(--vh))), 7.6rem); line-height: .98; color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.45); transform: translateY(40px); } .entrada__titulo-serifa em { font-style: italic; } /* a pílula vive no fundo do hero de 125 % (linha extra) e, com position: sticky, é puxada para o fundo do ecrã enquanto esse sítio ainda está abaixo dele: fica agarrada ao fundo do ecrã durante o quarto restante do hero e depois sobe com a página, como o "Contacteer ons" do avantgarden */ /* o rodapé estica pelas linhas 3 e 4 da grelha (o resto do primeiro ecrã + o quarto de ecrã extra) para a pílula, que é sticky, ter espaço para se agarrar ao fundo do ecrã enquanto o hero sobe; se encolhesse à altura da pílula, o sticky não tinha onde a mover */ .entrada__rodape { grid-row: 3 / 5; align-self: stretch; max-width: 1240px; width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-end; pointer-events: none; } .entrada .pilula { position: sticky; bottom: clamp(32px, calc(7 * var(--vh)), 72px); pointer-events: auto; } .entrada__explorar { grid-row: 3; align-self: end; justify-self: end; max-width: 1240px; width: 100%; margin: 0 auto; justify-content: flex-end; pointer-events: none; } .pilula { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 30px 0 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55); color: #fff; font-family: var(--fonte-ui); font-weight: 500; font-size: 1.02rem; letter-spacing: .01em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(6,9,7,.18); transition: background-color .35s, border-color .35s, transform .35s var(--ease-out); } /* na entrada a pílula começa escondida e deslocada: é a animação que a traz */ .entrada .pilula { transform: translateY(24px); } .pilula:hover { background: rgba(255,255,255,.14); border-color: #fff; } .pilula svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); } .pilula:hover svg { transform: translate(2px, -2px); } .entrada__explorar { font-family: var(--fonte-ui); font-weight: 500; font-size: .9rem; color: var(--areia); display: inline-flex; align-items: center; gap: 12px; } .entrada__explorar i { display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, #fff, transparent); animation: dica-fluxo 1.8s var(--ease-in-out) infinite; } .entrada__pontos { position: absolute; right: var(--gutter); top: calc(var(--entrada-ecra) / 2); transform: translateY(-50%); display: grid; gap: 10px; } .entrada__ponto { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); border: 0; padding: 0; transition: background-color .3s, transform .3s; } .entrada__ponto[aria-current="true"] { background: #fff; transform: scale(1.5); } @media (max-width: 900px) { .entrada__conteudo { padding-bottom: clamp(28px, calc(6 * var(--vh)), 56px); } .entrada__rodape { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 18px; } .entrada__explorar { display: none; } .entrada__pontos { right: 16px; top: calc(var(--entrada-ecra) - clamp(28px, calc(6 * var(--vh)), 56px)); bottom: auto; transform: translateY(-100%); grid-auto-flow: column; } } /* dica da fase 1 */ .entrada__dica { position: absolute; left: 50%; top: calc(var(--entrada-ecra) - clamp(20px, calc(4 * var(--vh)), 40px)); z-index: 6; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 10px; color: var(--areia); font-family: var(--fonte-ui); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; will-change: opacity; text-shadow: 0 2px 12px rgba(0,0,0,.6); } .entrada__dica i { display: block; width: 1px; height: 46px; background: linear-gradient(to bottom, var(--verde-vivo), transparent); animation: dica-fluxo 1.8s var(--ease-in-out) infinite; } @keyframes dica-fluxo { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } .entrada__dica i, .entrada__dica span { pointer-events: none; } /* sem JavaScript / entrada vista há pouco: mostra logo a fase 2 */ /* "entrada-vista" (no ) é posto por um script no do index.html antes do primeiro desenho: repete o estado estático logo de início, para o logótipo da entrada não piscar ao voltar à página inicial */ .entrada--estatica .entrada__foto, .entrada--estatica .entrada__logo, .entrada--estatica .entrada__dica, .entrada--estatica .entrada__brilho, .entrada-vista .entrada__foto, .entrada-vista .entrada__logo, .entrada-vista .entrada__dica, .entrada-vista .entrada__brilho { display: none; } .entrada--estatica .entrada__slides, .entrada-vista .entrada__slides { opacity: 1; } .entrada--estatica .entrada__tagline, .entrada--estatica .entrada__titulo-serifa, .entrada--estatica .pilula, .entrada--estatica .entrada__explorar, .entrada--estatica .entrada__pontos, .entrada-vista .entrada__tagline, .entrada-vista .entrada__titulo-serifa, .entrada-vista .entrada .pilula, .entrada-vista .entrada__explorar, .entrada-vista .entrada__pontos { opacity: 1; visibility: visible; transform: none; } .entrada__acoes { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- apresentação / intro ---------- */ .intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: end; } @media (max-width: 900px) { .intro { grid-template-columns: 1fr; } } .intro__texto { display: grid; gap: 22px; } .numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); margin-top: 8px; align-items: start; } @media (max-width: 500px) { .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .numero { display: grid; gap: 4px; } .numero strong { font-family: var(--fonte-titulo); font-size: clamp(1.8rem, 3.3vw, 2.8rem); font-weight: 600; line-height: 1; color: var(--verde-escuro); white-space: nowrap; } .numero > span { font-size: .85rem; color: var(--tinta-suave); letter-spacing: .04em; } /* unidade ("m²") mais pequena, colada ao número; os números contam em fonte de largura fixa para não tremerem */ .numero strong small { font-size: .42em; font-weight: 500; letter-spacing: .04em; margin-left: .18em; vertical-align: .55em; } .numero strong [data-contar] { display: inline-block; font-variant-numeric: tabular-nums; } /* ---------- painéis de ecrã inteiro (destaques da página inicial) ---------- */ /* ao estilo avantgarden: cada painel ocupa o ecrã e fica preso ao topo enquanto o seguinte desliza por cima dele. --coberto (0 a 1, posto pelo main.js) diz quanto do painel já está tapado e serve para o escurecer; --posicao é o ponto da fotografia que fica sempre à vista. */ .paineis { position: relative; background: var(--preto); color: #fff; } /* o último painel fica preso mais um ecrã, enquanto a secção seguinte sobe por cima dele (tem de ser um bloco e não padding: o sticky só conta com a caixa de conteúdo do pai) */ .paineis.tem-paineis::after { content: ""; display: block; height: calc(100 * var(--svh)); } .paineis.tem-paineis + .secao { margin-top: calc(-100 * var(--svh)); z-index: 1; } .painel { position: sticky; top: 0; height: calc(100 * var(--svh)); overflow: hidden; isolation: isolate; background: #000; } .painel__media { position: absolute; inset: 0 0 -6% 0; z-index: -1; transform: translate3d(0, calc(var(--coberto, 0) * -5%), 0); will-change: transform; } .painel__media picture { display: block; width: 100%; height: 100%; } .painel__media img, .painel__media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--posicao, 50% 50%); opacity: .76; transition: transform 1.6s var(--ease-out); } .painel:hover .painel__media img, .painel:hover .painel__media video { transform: scale(1.03); } /* o painel 3D tem um vídeo em ciclo (sem som); só toca enquanto está no ecrã (main.js) */ .painel__video { display: block; background: #000; } .painel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,9,7,.42), rgba(6,9,7,.04) 30%, rgba(6,9,7,.08) 60%, rgba(6,9,7,.5)); } .painel__veu { position: absolute; inset: 0; z-index: 3; background: #000; opacity: calc(var(--coberto, 0) * .72); pointer-events: none; } .painel__ligacao { position: absolute; inset: 0; z-index: 1; } .painel__ligacao:focus-visible { outline-offset: -8px; } .painel__corpo { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; pointer-events: none; padding-block: calc(var(--cabecalho) + 8px) clamp(28px, calc(7 * var(--vh)), 72px); } .painel__texto { flex: 1; display: grid; align-content: center; justify-items: start; gap: clamp(14px, calc(2.4 * var(--vh)), 28px); } .painel__rotulo { font-family: var(--fonte-ui); font-weight: 500; font-size: clamp(1rem, 1.5vw, 1.4rem); text-shadow: 0 2px 20px rgba(0,0,0,.5); } .painel__titulo { font-family: var(--fonte-serifa); font-weight: 300; text-transform: none; letter-spacing: -.01em; font-size: clamp(2.6rem, min(8.4vw, calc(15 * var(--vh))), 7.6rem); line-height: .98; max-width: 13ch; text-shadow: 0 6px 40px rgba(0,0,0,.45); } .painel__meta { font-family: var(--fonte-ui); font-weight: 500; font-size: .9rem; letter-spacing: .04em; color: rgba(255,255,255,.85); text-shadow: 0 2px 16px rgba(0,0,0,.5); } .painel__rodape { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .painel__contador { font-family: var(--fonte-ui); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.4rem); text-shadow: 0 2px 16px rgba(0,0,0,.5); } .painel .pilula { pointer-events: auto; } @media (max-width: 500px) { .painel .pilula { min-height: 50px; padding: 0 22px 0 18px; font-size: .95rem; } } /* o texto entra quando o painel chega ao ecrã (classe posta pelo main.js) */ .js .painel__rotulo, .js .painel__titulo, .js .painel__meta { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); } .js .painel__titulo { transition-delay: .08s; } .js .painel__meta { transition-delay: .18s; } .js .painel.esta-ativo .painel__rotulo, .js .painel.esta-ativo .painel__titulo, .js .painel.esta-ativo .painel__meta { opacity: 1; transform: none; } /* cursor redondo com "+" que segue o rato por cima dos painéis (criado pelo main.js) */ .cursor-mais { position: fixed; left: 0; top: 0; z-index: 105; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: rgba(255,255,255,.55); color: #fff; display: grid; place-items: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; will-change: transform; } .cursor-mais.esta-visivel { opacity: 1; visibility: visible; } .cursor-mais svg { width: 36px; height: 36px; } /* ---------- serviços ---------- */ .servicos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: rgba(16,20,15,.12); border-radius: var(--raio); overflow: hidden; } @media (max-width: 900px) { .servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .servicos { grid-template-columns: minmax(0, 1fr); } } .servico { background: var(--papel); padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; min-height: 240px; position: relative; transition: background-color .4s; } .servico:hover { background: var(--areia); } .servico h3 { font-size: 1.45rem; } .servico p { color: var(--tinta-suave); font-size: .96rem; } /* ---------- blocos imagem + texto ---------- */ .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .dupla--inversa > :first-child { order: 2; } @media (max-width: 900px) { .dupla { grid-template-columns: 1fr; } .dupla--inversa > :first-child { order: 0; } } .dupla__texto { display: grid; gap: 22px; justify-items: start; } .moldura { position: relative; border-radius: var(--raio); overflow: hidden; background: var(--grafite); } .moldura img, .moldura video { width: 100%; height: 100%; object-fit: cover; } .moldura--alta { aspect-ratio: 4 / 5; } .moldura--retrato { aspect-ratio: 3 / 4; } .moldura--larga { aspect-ratio: 16 / 10; } .moldura__legenda { position: absolute; left: 16px; bottom: 16px; padding: 8px 12px; border-radius: 4px; background: rgba(6,9,7,.6); backdrop-filter: blur(8px); color: var(--areia); font-size: .8rem; letter-spacing: .06em; } .lista-marcas { display: grid; gap: 12px; } .lista-marcas li { display: flex; gap: 14px; align-items: flex-start; } .lista-marcas li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060907' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat; } /* ---------- parceiros ---------- */ .parceiros { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .parceiro { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: var(--raio); border: 1px solid rgba(255,255,255,.15); font-family: var(--fonte-titulo); letter-spacing: .1em; text-transform: uppercase; font-size: .95rem; transition: border-color .3s, background-color .3s; } .parceiro:hover { border-color: var(--verde); background: rgba(0,171,79,.08); } .parceiro small { font-family: var(--fonte-texto); text-transform: none; letter-spacing: 0; color: var(--cinza); font-size: .8rem; } .secao--clara .parceiro, .secao--papel .parceiro { border-color: rgba(16,20,15,.2); } .secao--clara .parceiro small, .secao--papel .parceiro small { color: var(--tinta-suave); } /* cartões da página das parcerias (secções claras) */ .patrocinadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); } @media (max-width: 900px) { .patrocinadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .patrocinadores { grid-template-columns: minmax(0, 1fr); } } .patrocinador { display: grid; gap: 12px; align-content: start; min-height: 220px; padding: clamp(24px, 3vw, 36px); background: var(--papel); border: 1px solid rgba(16,20,15,.12); border-radius: var(--raio); } .patrocinador__tipo { font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--verde-escuro); } .patrocinador h3 { font-size: 1.6rem; } .patrocinador p { color: var(--tinta-suave); font-size: .96rem; } .patrocinador .ligacao-seta { justify-self: start; margin-top: 6px; font-size: .92rem; } .patrocinador--vago { background: none; border-style: dashed; border-color: rgba(16,20,15,.3); } /* ---------- chamada final ---------- */ .chamada { position: relative; overflow: hidden; isolation: isolate; } .chamada__fundo { position: absolute; inset: 0; z-index: -1; } .chamada__fundo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.35) saturate(.9); } .chamada__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(6,9,7,.85), rgba(6,9,7,.35)); } .chamada__conteudo { display: grid; gap: 24px; justify-items: start; max-width: 720px; } /* ---------- rodapé ---------- */ .rodape { background: var(--preto); color: var(--cinza); padding: clamp(56px, 8vw, 96px) 0 32px; border-top: 1px solid rgba(255,255,255,.06); } .rodape__grelha { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); } @media (max-width: 900px) { .rodape__grelha { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .rodape__grelha { grid-template-columns: 1fr; } } .rodape__logo { width: min(260px, 70%); margin-bottom: 20px; } .rodape__titulo { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--areia); margin: 0 0 18px; font-family: var(--fonte-texto); font-weight: 600; line-height: 1.4; } .rodape ul { display: grid; gap: 10px; } .rodape a { color: var(--cinza); transition: color .25s; } .rodape a:hover { color: var(--verde-vivo); } .rodape__fim { margin-top: clamp(40px, 6vw, 64px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: .82rem; } .rodape__fim ul { display: flex; flex-wrap: wrap; gap: 6px 22px; } .rodape__impic { font-size: .8rem; color: var(--cinza); margin-top: 14px; line-height: 1.5; } .redes { display: flex; gap: 10px; margin-top: 18px; } .redes a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: inline-flex; align-items: center; justify-content: center; } .redes a:hover { border-color: var(--verde-vivo); } .redes svg { width: 18px; height: 18px; } /* ---------- páginas interiores ---------- */ .capa-pagina { /* o topo reserva o espaço do selo para o rótulo nunca ficar tapado por ele */ position: relative; min-height: calc(62 * var(--vh)); display: grid; align-items: end; padding: calc(var(--marca-altura) + 28px) 0 clamp(40px, 6vw, 80px); overflow: hidden; isolation: isolate; color: var(--areia); } .capa-pagina__fundo { position: absolute; inset: 0; z-index: -1; } .capa-pagina__fundo img, .capa-pagina__fundo video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); transform: scale(1.06); } /* capa com fotografias em rotação (página das parcerias): fundem-se umas nas outras com um zoom lento */ .capa-slides img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; } .capa-slides img.esta-ativo { opacity: 1; animation: capa-zoom 7s ease-out forwards; } .capa-slides.fora-de-vista img { animation-play-state: paused; } @keyframes capa-zoom { from { transform: scale(1.02); } to { transform: scale(1.1); } } @media (prefers-reduced-motion: reduce) { .capa-slides img.esta-ativo { animation: none; transform: scale(1.06); } } /* capa ainda a chegar na 1.ª visita: transparente sobre o fundo escuro, entra com um fade (main.js) */ .capa-pagina__fundo img.a-carregar { opacity: 0; } .pilula--site { margin-left: 4px; } .capa-pagina__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,9,7,.95), rgba(6,9,7,.25) 60%, rgba(6,9,7,.5)); } .capa-pagina__conteudo { display: grid; gap: 18px; max-width: 900px; } .capa-pagina--curta { min-height: calc(44 * var(--vh)); } /* página de projeto: a capa já tem a altura final e o texto só aparece depois de preenchido (sem saltos) */ .capa-pagina--projeto { min-height: calc(100 * var(--svh)); } .js .capa-pagina--projeto .capa-pagina__conteudo { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .js #projeto:not(.esta-pronto) .capa-pagina__conteudo { visibility: hidden; opacity: 0; transform: translateY(14px); } .js #projeto:not(.esta-pronto) [data-so-com-projeto] { visibility: hidden; } .meta-projeto { display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: .9rem; color: var(--cinza); } .meta-projeto strong { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-vivo); margin-bottom: 2px; } .galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 800px) { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .galeria__item { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raio); background: var(--areia-escura); display: block; cursor: zoom-in; } .galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .galeria__item:hover img { transform: scale(1.06); } .galeria__legenda { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 4px; background: rgba(6,9,7,.62); color: var(--areia); font-size: .76rem; letter-spacing: .06em; } .navegacao-projetos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .navegacao-projetos a { display: grid; gap: 6px; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--raio); transition: border-color .3s; } .navegacao-projetos a:hover { border-color: var(--verde); } .navegacao-projetos a:last-child { text-align: right; justify-items: end; } .navegacao-projetos small { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-vivo); } @media (max-width: 560px) { .navegacao-projetos { grid-template-columns: 1fr; } .navegacao-projetos a:last-child { text-align: left; justify-items: start; } } /* valores (sobre) */ .valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); } @media (max-width: 800px) { .valores { grid-template-columns: 1fr; } } .valor { display: grid; gap: 14px; padding-top: 22px; border-top: 2px solid var(--verde); } .valor__numero { font-family: var(--fonte-titulo); color: var(--verde-escuro); letter-spacing: .12em; } .valor h3 { font-size: 1.6rem; } .valor p { color: var(--tinta-suave); } .secao--escura .valor p { color: var(--cinza); } .zona { display: flex; flex-wrap: wrap; gap: 8px; } .zona li { padding: 8px 14px; border-radius: 999px; background: rgba(0,107,49,.1); color: var(--verde-escuro); font-size: .86rem; font-weight: 500; } /* ---------- contacto ---------- */ .contacto { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: start; } @media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } } .contacto__dados { display: grid; gap: 28px; } .contacto__intro { display: grid; gap: 14px; } .contacto__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: .98; text-transform: uppercase; } .contacto__intro p { color: var(--tinta-suave); max-width: 46ch; } /* canais: cartões inteiros clicáveis, com ícone, texto e seta; o WhatsApp vai em destaque */ .canais { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .contacto .canal { display: grid; grid-template-columns: 52px minmax(0, 1fr) 38px; align-items: center; gap: 18px; padding: 18px 20px 18px 18px; background: var(--papel); color: var(--tinta); border: 1px solid rgba(16,20,15,.08); border-radius: 16px; box-shadow: 0 1px 2px rgba(16,20,15,.04); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; } .contacto .canal:hover { transform: translateY(-3px); border-color: rgba(0,107,49,.3); box-shadow: 0 22px 44px -28px rgba(16,20,15,.45); } .canal__icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(0,107,49,.1); color: var(--verde-escuro); transition: background-color .35s, color .35s; } .canal__icone svg { width: 22px; height: 22px; } .contacto .canal:hover .canal__icone { background: var(--verde-escuro); color: #fff; } .canal__texto { display: grid; gap: 3px; min-width: 0; } .canal__texto strong { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--verde-escuro); } .canal__valor { font-family: var(--fonte-titulo); font-size: 1.4rem; line-height: 1.12; text-transform: uppercase; } .canal__valor--email { font-size: 1.12rem; text-transform: none; overflow-wrap: anywhere; } .canal__texto small { font-size: .88rem; line-height: 1.45; color: var(--tinta-suave); } .canal__seta { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(16,20,15,.14); transition: transform .45s var(--ease-out), background-color .3s, border-color .3s, color .3s; } .canal__seta svg { width: 16px; height: 16px; } .contacto .canal:hover .canal__seta { transform: translateX(4px); background: var(--verde); border-color: var(--verde); color: var(--preto); } .contacto .canal--destaque { background: linear-gradient(135deg, #0a2e1a 0%, #006b31 100%); color: #fff; border-color: transparent; box-shadow: 0 24px 48px -30px rgba(0,107,49,.9); } .contacto .canal--destaque .canal__icone { background: rgba(255,255,255,.14); color: #fff; } .contacto .canal--destaque:hover .canal__icone { background: var(--verde-vivo); color: var(--preto); } .contacto .canal--destaque .canal__texto strong { color: var(--verde-vivo); } .contacto .canal--destaque .canal__texto small { color: rgba(255,255,255,.82); } .contacto .canal--destaque .canal__seta { border-color: rgba(255,255,255,.35); } @media (max-width: 480px) { .contacto .canal { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; } .canal__icone { width: 44px; height: 44px; } .canal__seta { display: none; } } /* formulário: cartão com faixa verde, cabeçalho e serviços em "pílulas" de escolha */ .formulario { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 18px; padding: clamp(24px, 3vw, 44px); background: var(--papel); border-radius: 20px; box-shadow: 0 40px 80px -48px rgba(16,20,15,.45); } .formulario::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--verde-escuro), var(--verde), var(--verde-vivo)); } .formulario::after { content: ""; position: absolute; z-index: -1; right: -180px; top: -200px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(0,171,79,.12), transparent 70%); pointer-events: none; } .formulario__topo { display: grid; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid rgba(16,20,15,.08); } .formulario__selo { justify-self: start; display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 999px; background: rgba(0,171,79,.12); color: var(--verde-escuro); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .formulario__selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(0,171,79,.2); } .formulario__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; text-transform: uppercase; } .formulario__topo p { font-size: .9rem; color: var(--tinta-suave); } .formulario__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 560px) { .formulario__linha { grid-template-columns: 1fr; } } .campo { display: grid; gap: 8px; } .campo label, .escolhas-grupo legend { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--tinta); } .campo label span { color: var(--verde-escuro); } .campo input, .campo textarea, .campo select { font: inherit; color: var(--tinta); background: #f7f6f2; border: 1px solid rgba(16,20,15,.16); border-radius: 12px; padding: 14px 16px; width: 100%; transition: border-color .3s, box-shadow .3s, background-color .3s; } .campo input:hover, .campo textarea:hover { border-color: rgba(16,20,15,.32); } .campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; background: #fff; border-color: var(--verde-escuro); box-shadow: 0 0 0 4px rgba(0,171,79,.16); } .campo textarea { min-height: 150px; resize: vertical; } .campo--caixa { grid-template-columns: auto 1fr; align-items: start; gap: 12px; } .campo--caixa label { font-size: .88rem; font-weight: 400; color: var(--tinta-suave); } .campo--caixa input { width: 20px; height: 20px; margin-top: 2px; padding: 0; accent-color: var(--verde-escuro); } .campo--caixa input:focus { box-shadow: 0 0 0 4px rgba(0,171,79,.25); } .escolhas-grupo { border: 0; margin: 0; padding: 0; min-width: 0; } .escolhas-grupo legend { padding: 0; margin-bottom: 10px; } .escolhas { display: flex; flex-wrap: wrap; gap: 8px; } .escolha { position: relative; cursor: pointer; } .escolha input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .escolha span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(16,20,15,.16); background: #f7f6f2; font-size: .9rem; font-weight: 500; color: var(--tinta); user-select: none; transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s; } .escolha span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .45; transition: background-color .25s, border-color .25s, opacity .25s; } .escolha:hover span { border-color: var(--verde-escuro); } .escolha input:checked + span { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; } .escolha input:checked + span::before { background: var(--verde-vivo); border-color: var(--verde-vivo); opacity: 1; } .escolha input:focus-visible + span { box-shadow: 0 0 0 4px rgba(0,171,79,.25); } .formulario__fim { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; } .formulario__nota { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--tinta-suave); } .formulario__nota svg { flex: none; width: 16px; height: 16px; color: var(--verde-escuro); } .formulario__estado { font-size: .9rem; color: var(--verde-escuro); min-height: 1.4em; } .formulario__estado.erro { color: #b3261e; } .mapa { aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: var(--areia-escura); } .mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.2) contrast(1.05); } .mapa--por-carregar { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); text-align: center; } .mapa__aviso { display: grid; gap: 18px; justify-items: center; max-width: 520px; color: var(--tinta-suave); } /* onde estamos: cartão escuro com a morada + mapa. Antes de autorizar o Google Maps vê-se um desenho das ruas à volta da Rua dos Coelhos, com o pino no sítio e o aviso de cookies por cima */ /* segue a secção do formulário no mesmo tom de areia, sem corte de cor entre as duas */ .secao--local { padding-top: clamp(8px, 2vw, 24px); } .local { display: grid; grid-template-columns: minmax(300px, .85fr) 1.6fr; border-radius: 22px; overflow: hidden; background: var(--preto); box-shadow: 0 40px 80px -50px rgba(16,20,15,.6); } .local__cartao { display: grid; align-content: center; gap: 16px; padding: clamp(28px, 4vw, 56px); color: var(--areia); background: radial-gradient(ellipse 90% 70% at 0% 100%, rgba(0,171,79,.24), transparent 62%), var(--preto); } .local .local__cartao .rotulo { color: var(--verde-vivo); } .local__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1; text-transform: uppercase; color: #fff; } .local__cp { font-size: 1.05rem; font-weight: 500; letter-spacing: .02em; color: var(--verde-vivo); } .local__texto { max-width: 38ch; color: rgba(243,242,236,.75); } .local__horario { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; color: var(--areia); } .local__horario strong { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--verde-vivo); } .local__zonas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .local__zonas li { padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: .82rem; font-weight: 500; } .local__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; } .local .local__acoes .btn--primario { color: var(--preto); } .local .mapa { position: relative; aspect-ratio: auto; min-height: clamp(380px, calc(52 * var(--vh)), 540px); border-radius: 0; background: #eef1e8; } .mapa__desenho { position: absolute; inset: 0; width: 100%; height: 100%; } .mapa__pulso { transform-box: fill-box; transform-origin: center; animation: mapa-pulso 2.4s var(--ease-out) infinite; } /* fora do ecrã o pino não pulsa (o desenho SVG deixa de ser redesenhado a cada fotograma) */ .mapa.fora-de-vista .mapa__pulso { animation-play-state: paused; } @keyframes mapa-pulso { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(2.8); opacity: 0; } } .local .mapa--por-carregar { place-items: end center; padding: clamp(16px, 3vw, 28px); } .local .mapa__aviso { position: relative; z-index: 1; gap: 12px; max-width: 460px; padding: 20px 24px; border-radius: 16px; color: var(--tinta-suave); background: rgba(255,255,255,.96); box-shadow: 0 24px 48px -28px rgba(16,20,15,.5); } .local .mapa__aviso p { font-size: .9rem; line-height: 1.5; } .local .mapa__aviso small { font-size: .78rem; opacity: .85; } @media (max-width: 900px) { .local { grid-template-columns: 1fr; } .local .mapa { min-height: 360px; } } /* ---------- vitrines da página de projetos ---------- */ /* as quatro vitrines vivem embutidas em secções escuras com o brilho verde do menu, sem caixa à volta; cada uma tem um componente recriado do React Bits (js/vitrines.js): carrossel lenticular, livro de páginas, cartões-janela e mosaico inclinado. O brilho troca de canto de secção para secção. */ .secao--vitrine { background-color: var(--preto); background-image: radial-gradient(ellipse 60% 40% at 82% 76%, rgba(0,171,79,.18), transparent 50%); } .secao--vitrine:nth-of-type(odd) { background-image: radial-gradient(ellipse 60% 40% at 14% 22%, rgba(0,171,79,.16), transparent 50%); } /* nesta página o hero e a chamada final nascem do preto, para não haver arestas entre blocos escuros */ .capa-pagina--escura .capa-pagina__fundo::after { background: linear-gradient(to top, var(--preto), rgba(6,9,7,.3) 45%, rgba(6,9,7,.5)); } .secao--vitrine + .chamada .chamada__fundo::after { background: linear-gradient(to bottom, var(--preto), transparent 30%), linear-gradient(to right, rgba(6,9,7,.85), rgba(6,9,7,.35)); } .secao--vitrine .cabecalho-secao--linha p { max-width: 42ch; } .vitrine { position: relative; color: #fff; } /* 1) carrossel lenticular (projetos residenciais) */ /* cartões grandes: crescem com a largura do ecrã, mas limitados pela altura para caberem em portáteis baixos */ .lenticular { --lent-largura: clamp(260px, min(24vw, calc(50 * var(--vh))), 400px); --lent-espaco: clamp(26px, 2.2vw, 40px); padding: 0 0 8px; } @media (max-width: 600px) { .lenticular { --lent-largura: min(72vw, 300px); --lent-espaco: 20px; } } .lenticular__palco { position: relative; height: calc(var(--lent-largura) * 4 / 3 + 64px); perspective: 1200px; overflow: hidden; touch-action: pan-y; cursor: grab; outline-offset: -4px; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); } .lenticular__palco:active { cursor: grabbing; } .lenticular__faixa { position: absolute; left: 0; top: 32px; display: flex; gap: var(--lent-espaco); transition: transform .6s var(--ease-out); will-change: transform; } .lenticular__faixa.esta-a-arrastar { transition: none; } .lenticular__cartao { position: relative; flex: none; width: var(--lent-largura); aspect-ratio: 3 / 4; border-radius: 14px; transform-style: preserve-3d; transform: scale(.9); filter: brightness(.55); transition: transform .6s var(--ease-out), filter .6s; -webkit-user-drag: none; user-select: none; } /* o cartão focado inclina-se ligeiramente e aproxima-se conforme o rato o percorre (--vira 0 a 1) */ .lenticular__cartao.esta-focado { transform: scale(1) rotateY(calc(var(--vira, 0) * 8deg)) translateZ(calc(var(--vira, 0) * 30px)); filter: brightness(1); } .lenticular__frente { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--grafite); } .lenticular__cartao img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; } .lenticular__rotulo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 4px; padding: 64px 18px 18px; color: #fff; border-radius: 0 0 14px 14px; background: linear-gradient(to top, rgba(6,9,7,.85), transparent); opacity: clamp(0, calc(var(--vira, 0) * 2), 1); transition: opacity .25s; } @media (hover: none) { .lenticular__cartao.esta-focado .lenticular__rotulo { opacity: 1; } } .lenticular__cartao.esta-focado:focus-visible .lenticular__rotulo { opacity: 1; } .lenticular__rotulo strong { font-family: var(--fonte-ui); font-weight: 600; font-size: 1.1rem; line-height: 1.2; } .lenticular__rotulo small { font-size: .74rem; letter-spacing: .04em; color: rgba(255,255,255,.8); } .lenticular__controlos { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 6px 0 12px; } .lenticular__botao { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); transition: background-color .3s, color .3s; } .lenticular__botao:hover { background: rgba(255,255,255,.12); color: #fff; } .lenticular__botao[aria-disabled="true"] { opacity: .3; cursor: default; background: none; } .lenticular__botao svg { width: 18px; height: 18px; } .lenticular__pontos { display: flex; gap: 10px; } /* o traço é um pseudo-elemento; o botão em si tem 44 px de altura para se acertar com o dedo */ .lenticular__ponto { position: relative; width: 22px; height: 44px; padding: 0; background: none; transition: width .3s var(--ease-out); } .lenticular__ponto::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255,255,255,.45); transition: background-color .3s; } .lenticular__ponto:hover::before { background: rgba(255,255,255,.7); } .lenticular__ponto[aria-current="true"] { width: 34px; } .lenticular__ponto[aria-current="true"]::before { background: #fff; } /* 2) fila de obras (projetos B2B): cartões largos, todos seguidos, nome da empresa por baixo */ .obras { padding: 0 0 4px; } .obras__faixa { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 30vw, 380px); gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; -webkit-mask-image: linear-gradient(to right, #000 94%, transparent); mask-image: linear-gradient(to right, #000 94%, transparent); } .obras__faixa::-webkit-scrollbar { display: none; } .obras__faixa.esta-a-arrastar { cursor: grabbing; scroll-snap-type: none; user-select: none; } .obras__faixa > * { scroll-snap-align: start; } .obra { display: grid; gap: 10px; align-content: start; color: #fff; -webkit-user-drag: none; } .obra__imagem { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--grafite); transform: perspective(1200px) rotateY(0); transform-origin: left center; transition: transform .6s var(--ease-out), box-shadow .6s; box-shadow: 0 18px 40px -22px rgba(0,0,0,.8); } .obra__imagem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); pointer-events: none; } /* ao passar o rato a capa inclina-se um pouco, como uma página a abrir */ .obra:hover .obra__imagem { transform: perspective(1200px) rotateY(-9deg); box-shadow: 18px 26px 50px -20px rgba(0,0,0,.9); } .obra:hover .obra__imagem img { transform: scale(1.05); } .obra__numero { position: absolute; top: 14px; left: 14px; padding: 5px 9px; border-radius: 4px; font-family: var(--fonte-titulo); font-size: .85rem; letter-spacing: .12em; color: #fff; background: rgba(6,9,7,.55); backdrop-filter: blur(6px); } .obra__nome { font-family: var(--fonte-titulo); font-size: clamp(1.25rem, 1.8vw, 1.6rem); text-transform: uppercase; line-height: 1.05; letter-spacing: .01em; transition: color .3s; } .obra:hover .obra__nome { color: var(--verde-vivo); } .obra__meta { font-size: .82rem; letter-spacing: .04em; color: rgba(255,255,255,.7); } .obras__controlos { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 0 8px; } .obras__botao { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.22); transition: background-color .3s, color .3s, border-color .3s; } .obras__botao:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); } .obras__botao svg { width: 18px; height: 18px; } .obras__dica { font-family: var(--fonte-ui); font-size: .8rem; color: rgba(255,255,255,.55); } @media (max-width: 600px) { .obras__faixa { grid-auto-columns: 78vw; } .obras__dica { display: none; } } /* 3) cartões que abrem em janela (projetos 3D) */ .modais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } @media (max-width: 800px) { .modais { grid-template-columns: minmax(0, 1fr); } } .modal-cartao { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border-radius: 14px; overflow: hidden; text-align: left; background: var(--grafite); transition: transform .45s var(--ease-out), box-shadow .45s; } .modal-cartao:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 28px 48px -24px rgba(0,0,0,.9); } .modal-cartao__imagem { position: absolute; inset: 0; } .modal-cartao__imagem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); } .modal-cartao:hover .modal-cartao__imagem img { transform: scale(1.05); } .modal-cartao__imagem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,9,7,.8), rgba(6,9,7,.05) 50%); } .modal-cartao__titulo { position: absolute; left: 22px; right: 70px; bottom: 20px; font-family: var(--fonte-ui); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: #fff; } .modal-cartao__mais { position: absolute; right: 20px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); } .modal-cartao__mais svg { width: 16px; height: 16px; } .modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; } .modal.esta-aberta { opacity: 1; visibility: visible; } .modal__fundo { position: absolute; inset: 0; background: rgba(6,9,7,.94); } .modal__fundo::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(ellipse 70% 55% at 50% 10%, var(--cor, #00ab4f), transparent 70%); } .modal__caixa { position: relative; width: min(100%, 768px); max-height: calc(calc(100 * var(--vh)) - 40px); overflow: auto; border-radius: 16px; background: var(--carvao); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); } .modal__imagem { position: relative; aspect-ratio: 2 / 1; background: var(--grafite); } .modal__imagem img, .modal__imagem video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } /* com vídeo, o título fica por cima da imagem e os controlos do vídeo ficam livres */ .modal--video .modal__imagem { aspect-ratio: 16 / 9; } .modal--video .modal__imagem::after { display: none; } .modal--video .modal__titulo { top: 18px; bottom: auto; left: 22px; font-size: 1.1rem; padding: 6px 12px; border-radius: 6px; background: rgba(6,9,7,.65); } .modal--video .modal__fechar { top: 16px; bottom: auto; right: 16px; } .modal__imagem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,9,7,.75), transparent 45%); } .modal__titulo { position: absolute; left: 26px; right: 80px; bottom: 22px; z-index: 1; font-family: var(--fonte-ui); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.8rem); text-transform: none; color: #fff; } .modal__fechar { position: absolute; right: 22px; bottom: 22px; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.2); transition: background-color .25s; } .modal__fechar:hover { background: rgba(255,255,255,.35); } .modal__fechar svg { width: 18px; height: 18px; } .modal__texto { padding: 22px 28px 28px; display: grid; gap: 18px; color: var(--cinza); line-height: 1.6; } .modal__ligacao { justify-self: start; } /* 4) mosaico inclinado (galeria) */ .azulejos { position: relative; height: clamp(520px, 64vw, 860px); perspective: 1600px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 78%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 78%, transparent); mask-composite: intersect; } .azulejos__plano { position: absolute; left: 50%; top: 50%; width: 280%; height: 260%; display: grid; grid-template-columns: repeat(var(--colunas, 16), minmax(0, 1fr)); gap: 0 8px; align-items: start; transform: translate(-50%, -50%) translateX(-40px) rotateX(calc(40deg + var(--px, 0deg))) rotateY(calc(16deg + var(--py, 0deg))) rotateZ(-20deg); transform-style: preserve-3d; transition: transform .8s var(--ease-out); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); } /* o padding-bottom iguala o gap para metade da coluna coincidir com o período do ciclo (sem salto) */ .azulejos__coluna { display: grid; gap: 8px; padding-bottom: 8px; animation: azulejos-rolar linear infinite; will-change: transform; } .azulejos.esta-pausado .azulejos__coluna, .azulejos.fora-de-vista .azulejos__coluna { animation-play-state: paused; } .azulejos__pausa { display: block; margin: 10px auto 0; padding: 8px 14px; min-height: 44px; font-family: var(--fonte-ui); font-size: .8rem; color: rgba(255,255,255,.6); transition: color .25s; } .azulejos__pausa:hover { color: #fff; } .azulejos__coluna--inversa { animation-direction: reverse; } .azulejo { display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; background: var(--grafite); cursor: pointer; transition: transform .35s var(--ease-out), box-shadow .35s; } .azulejo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out), filter .35s; pointer-events: none; } /* ao passar o rato a fotografia levanta-se do plano */ .azulejo:hover, .azulejo:focus-visible { transform: translateZ(40px) scale(1.06); box-shadow: 0 20px 40px rgba(0,0,0,.6); z-index: 2; position: relative; outline: 2px solid rgba(255,255,255,.85); outline-offset: -2px; } .azulejo:hover img { filter: brightness(1.08); } /* fotografia ampliada em plano principal; o mosaico continua a rolar por trás */ .azulejos__destaque { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; } .azulejos__destaque.esta-aberto { opacity: 1; visibility: visible; } .azulejos__fundo { position: absolute; inset: 0; background: rgba(6,9,7,.55); } .azulejos__destaque img { position: relative; max-width: min(92vw, 1100px); max-height: calc(86 * var(--vh)); width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 40px 90px -20px rgba(0,0,0,.95); transform: scale(.92); transition: transform .45s var(--ease-out); } .azulejos__destaque.esta-aberto img { transform: none; } .azulejos__fechar { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); transition: background-color .25s; } .azulejos__fechar:hover { background: rgba(255,255,255,.35); } .azulejos__fechar svg { width: 20px; height: 20px; } @keyframes azulejos-rolar { from { transform: translateY(0); } to { transform: translateY(-50%); } } /* apoio ao desporto (fim da página de projetos) */ .apoio { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; } @media (max-width: 900px) { .apoio { grid-template-columns: 1fr; } } .apoio__texto { display: grid; gap: 22px; justify-items: start; } /* quadro do emblema: o fundo preto do PNG funde-se com o quadro; o emblema fica centrado */ .moldura--emblema { background: #000; display: grid; place-items: center; } .moldura--emblema img { width: 72%; height: auto; object-fit: contain; } .apoio__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* frota (página sobre nós): duas fotografias largas empilhadas ao lado do texto */ .frota__fotos { display: grid; gap: 14px; } .frota__fotos .moldura { aspect-ratio: 16 / 10; } .frota__fotos--larga { aspect-ratio: 16 / 9; } .apoio__fotos .moldura:first-child { grid-column: span 2; } .apoio__fotos .moldura { aspect-ratio: 16 / 10; } .apoio__fotos .moldura:not(:first-child) { aspect-ratio: 1; } @media (max-width: 500px) { .apoio__fotos { grid-template-columns: 1fr; } .apoio__fotos .moldura:first-child { grid-column: auto; } } /* ---------- lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(6,9,7,.94); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; } .lightbox.esta-aberta { opacity: 1; visibility: visible; } .lightbox img { max-width: min(92vw, 1400px); max-height: calc(86 * var(--vh)); width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); } .lightbox__botao { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; color: var(--areia); transition: background-color .3s; } .lightbox__botao:hover { background: var(--verde); color: var(--preto); border-color: var(--verde); } .lightbox__botao svg { width: 22px; height: 22px; } .lightbox__fechar { top: 20px; right: 20px; } .lightbox__anterior { left: 16px; top: 50%; transform: translateY(-50%); } .lightbox__seguinte { right: 16px; top: 50%; transform: translateY(-50%); } .lightbox__legenda { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--cinza); font-size: .85rem; letter-spacing: .06em; } @media (max-width: 700px) { .lightbox__anterior { left: 8px; top: auto; bottom: 56px; transform: none; } .lightbox__seguinte { right: 8px; top: auto; bottom: 56px; transform: none; } } /* ---------- revelação ao rolar ---------- */ /* só escondemos com JavaScript ativo (classe "js" no ); sem JS o conteúdo fica visível */ .revelar { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } .js .revelar { opacity: 0; transform: translateY(28px); } .js .revelar.esta-visivel { opacity: 1; transform: none; } .revelar--atraso-1 { transition-delay: .1s; } .revelar--atraso-2 { transition-delay: .2s; } .revelar--atraso-3 { transition-delay: .3s; } /* ---------- texto legal ---------- */ .prosa { display: grid; gap: 18px; } .prosa h2 { font-size: 1.6rem; margin-top: 18px; } .prosa ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; } .prosa a { text-decoration: underline; text-underline-offset: 3px; } /* ---------- texto "sobre nós" em vários parágrafos ---------- */ .prosa-sobre { display: grid; gap: 14px; } .prosa-sobre strong { font-weight: 600; color: var(--tinta); } .secao--escura .prosa-sobre strong { color: var(--areia); } /* ---------- logótipo IMPIC ---------- */ /* o PNG tem fundo transparente; nas secções escuras fica num selo branco para se ler bem */ .impic-logo { display: block; height: 40px; width: auto; } .impic-selo { display: inline-flex; align-items: center; padding: 7px 11px; background: #fff; border-radius: 4px; } .rodape__impic { display: flex; align-items: center; gap: 14px; } .rodape__impic .impic-selo { flex: none; } .rodape__impic .impic-logo { height: 32px; } .numero--impic strong { display: flex; align-items: center; height: clamp(2rem, 4vw, 3.2rem); } .numero--impic .impic-logo { height: 100%; } .parceiro--impic .impic-logo { height: 26px; } .valor__logo { display: inline-flex; align-items: center; padding: 9px 13px; background: #fff; border-radius: 4px; justify-self: start; } .valor__logo .impic-logo { height: 46px; } /* ---------- equipa ---------- */ .equipa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); } @media (max-width: 900px) { .equipa { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .equipa { grid-template-columns: minmax(0, 1fr); } } /* sem fotografia ainda: silhueta neutra */ .membro__funcao { font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--verde-escuro); } .processo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); counter-reset: passo; } @media (max-width: 800px) { .processo { grid-template-columns: 1fr; } } /* ---------- página de serviços ---------- */ /* capa: o título, o texto e o índice entram em cascata ao carregar; as fotografias rodam (.capa-slides) */ .capa-pagina--servicos { min-height: calc(70 * var(--vh)); } .capa-pagina--servicos .capa-pagina__conteudo { max-width: 1000px; } .capa-pagina--servicos .capa-pagina__conteudo > * { animation: capa-entra 1s var(--ease-out) both; } .capa-pagina--servicos .capa-pagina__conteudo > :nth-child(2) { animation-delay: .1s; } .capa-pagina--servicos .capa-pagina__conteudo > :nth-child(3) { animation-delay: .2s; } .capa-pagina--servicos .capa-pagina__conteudo > :nth-child(4) { animation-delay: .32s; } @keyframes capa-entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* índice na capa: pílulas que levam a cada serviço */ .indice-capa { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .indice-capa a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(6,9,7,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--fonte-ui); font-weight: 500; font-size: .9rem; color: #fff; transition: background-color .3s, border-color .3s, transform .35s var(--ease-out); } .indice-capa a small { font-size: .7rem; letter-spacing: .16em; color: var(--verde-vivo); } .indice-capa a:hover { border-color: #fff; background: rgba(255,255,255,.14); transform: translateY(-2px); } /* faixa em movimento com os nomes dos serviços */ .faixa { overflow: hidden; background: var(--preto); color: var(--areia); padding: 16px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); } .faixa__fita { display: flex; gap: 40px; width: max-content; animation: faixa-rolar 42s linear infinite; will-change: transform; } .faixa:hover .faixa__fita { animation-play-state: paused; } .faixa__fita span { display: inline-flex; align-items: center; gap: 40px; white-space: nowrap; font-family: var(--fonte-titulo); font-weight: 500; font-size: clamp(1.05rem, 1.7vw, 1.45rem); letter-spacing: .1em; text-transform: uppercase; } .faixa__fita span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); } @keyframes faixa-rolar { to { transform: translateX(-50%); } } /* índice interativo: fotografia fixa à esquerda, lista de serviços à direita */ .indice { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .indice__imagem { position: sticky; top: calc(var(--cabecalho) + 8px); display: grid; gap: 12px; } .indice__quadro { position: relative; aspect-ratio: 4 / 5; border-radius: var(--raio); overflow: hidden; background: var(--grafite); } .indice__quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease-out), transform 2.2s var(--ease-out); } .indice__quadro img.esta-ativo { opacity: 1; transform: none; } .indice__legenda { font-family: var(--fonte-ui); font-size: .82rem; letter-spacing: .04em; color: var(--tinta-suave); } .indice__lista { display: grid; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(16,20,15,.16); } .indice__item { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "numero texto seta"; align-items: center; gap: clamp(16px, 2.5vw, 32px); padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid rgba(16,20,15,.16); transition: padding-left .45s var(--ease-out); } .indice__item::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--verde); transition: width .55s var(--ease-out); } .indice__item.esta-ativo::before, .indice__item:hover::before { width: 100%; } .indice__item.esta-ativo { padding-left: 14px; } .indice__numero { grid-area: numero; font-family: var(--fonte-titulo); font-size: .95rem; letter-spacing: .1em; color: var(--verde-escuro); } .indice__texto { grid-area: texto; display: grid; gap: 5px; } .indice__texto strong { font-family: var(--fonte-titulo); font-weight: 600; text-transform: uppercase; line-height: 1; font-size: clamp(1.5rem, 2.6vw, 2.4rem); letter-spacing: .005em; transition: color .3s; } .indice__item.esta-ativo .indice__texto strong, .indice__item:hover .indice__texto strong { color: var(--verde-escuro); } .indice__texto small { font-size: .94rem; color: var(--tinta-suave); } .indice__seta { grid-area: seta; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(16,20,15,.25); display: grid; place-items: center; color: var(--tinta); transition: background-color .3s, border-color .3s, color .3s, transform .5s var(--ease-out); } .indice__seta svg { width: 18px; height: 18px; } .indice__item.esta-ativo .indice__seta, .indice__item:hover .indice__seta { background: var(--verde); border-color: var(--verde); color: var(--preto); transform: rotate(45deg); } /* variante das parcerias: itens sem ligação nem seta; o texto pode ter duas ou três linhas */ .indice--razoes .indice__item { grid-template-columns: auto 1fr; grid-template-areas: "numero texto"; cursor: default; } .indice--razoes .indice__texto small { max-width: 60ch; line-height: 1.5; } .indice--razoes .indice__item.esta-ativo .indice__texto small { color: var(--tinta); } @media (max-width: 900px) { .indice--razoes .indice__item { grid-template-areas: "mini mini" "numero texto"; } } /* palco: em ecrãs largos e altos o índice fica preso ao ecrã enquanto se rola (a altura do palco é o comprimento de rolar, --indice-itens vezes 45vh); a lista vive numa janela com máscara e roda para trazer o item ativo ao centro (transform posto pelo main.js). Em telemóvel e ecrãs baixos nada disto se aplica. */ .indice__janela { position: relative; } @media (min-width: 900px) and (min-height: 600px) { .indice-palco { height: calc(calc(100 * var(--vh)) + var(--indice-itens, 6) * calc(45 * var(--vh))); } .indice-palco .indice { position: sticky; top: 0; height: calc(100 * var(--vh)); align-items: center; } .indice-palco .indice__imagem { position: static; } .indice-palco .indice__quadro { height: min(calc(100 * var(--vh)) - 200px, 640px); width: auto; max-width: 100%; } .indice-palco .indice__janela { height: min(calc(100 * var(--vh)) - 200px, 640px); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); } .indice-palco .indice__lista { border-top: 0; transition: transform .8s var(--ease-out); will-change: transform; } .indice-palco .indice__item { opacity: .42; transition: padding-left .45s var(--ease-out), opacity .6s; } .indice-palco .indice__item.esta-ativo { opacity: 1; } } /* o índice sobre uma secção escura (parcerias): linhas, números e textos claros */ .secao--escura .indice__lista { border-top-color: rgba(255,255,255,.16); } .secao--escura .indice__item { border-bottom-color: rgba(255,255,255,.16); } .secao--escura .indice__item::before { background: var(--verde-vivo); } .secao--escura .indice__numero { color: var(--verde-vivo); } .secao--escura .indice__texto strong { color: var(--areia); } .secao--escura .indice__item.esta-ativo .indice__texto strong, .secao--escura .indice__item:hover .indice__texto strong { color: var(--verde-vivo); } .secao--escura .indice__texto small, .secao--escura .indice__item.esta-ativo .indice__texto small { color: var(--cinza); } .secao--escura .indice__legenda { color: var(--cinza); } /* a secção de cinema não tem espaço em baixo: a secção seguinte vem logo a seguir ao bloco */ .secao--cinema { padding-bottom: 0; } /* modo cinema (parcerias): o bloco preso ocupa a largura toda do ecrã, a fotografia ativa enche-o por trás com um véu escuro e a lista fica por cima, à esquerda; a legenda vai para o canto inferior direito. */ @media (min-width: 900px) and (min-height: 600px) { .indice-palco--cinema .indice { display: block; width: 100vw; margin-left: calc(50% - 50vw); background: var(--preto); color: #fff; overflow: hidden; } .indice-palco--cinema .indice__imagem { position: absolute; inset: 0; display: block; } .indice-palco--cinema .indice__quadro { position: absolute; inset: 0; width: auto; height: auto; max-width: none; aspect-ratio: auto; border-radius: 0; } .indice-palco--cinema .indice__quadro img { transform: scale(1.04); } .indice-palco--cinema .indice__quadro img.esta-ativo { transform: none; } /* a fotografia nasce do preto da secção: degradê no topo, para não haver aresta entre o título e a imagem */ .indice-palco--cinema .indice__quadro::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--preto), rgba(6,9,7,.55) 14%, rgba(6,9,7,0) 34%); } .indice-palco--cinema .indice__quadro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(6,9,7,.86), rgba(6,9,7,.5) 52%, rgba(6,9,7,.18)), linear-gradient(to top, rgba(6,9,7,.55), transparent 35%); } .indice-palco--cinema .indice__janela { position: absolute; left: max(var(--gutter), 6vw); top: 50%; transform: translateY(-50%); width: min(660px, calc(100vw - 2 * var(--gutter))); z-index: 2; } .indice-palco--cinema .indice__item { border-bottom-color: rgba(255,255,255,.2); opacity: .55; } .indice-palco--cinema .indice__item.esta-ativo { opacity: 1; } .indice-palco--cinema .indice__numero { color: var(--verde-vivo); } .indice-palco--cinema .indice__texto strong { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); } .indice-palco--cinema .indice__item.esta-ativo .indice__texto strong { color: var(--verde-vivo); } .indice-palco--cinema .indice__texto small, .indice-palco--cinema .indice__item.esta-ativo .indice__texto small { color: rgba(255,255,255,.86); text-shadow: 0 1px 12px rgba(0,0,0,.45); } .indice-palco--cinema .indice__legenda { position: absolute; right: var(--gutter); bottom: 28px; z-index: 2; color: rgba(255,255,255,.85); text-shadow: 0 1px 12px rgba(0,0,0,.5); } } /* miniatura só nos ecrãs pequenos, onde a fotografia fixa não existe */ .indice__miniatura { grid-area: mini; display: none; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: var(--grafite); } .indice__miniatura img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .indice { grid-template-columns: 1fr; } .indice__imagem { display: none; } .indice__item { grid-template-columns: auto 1fr auto; grid-template-areas: "mini mini mini" "numero texto seta"; } .indice__item.esta-ativo { padding-left: 0; } .indice__miniatura { display: block; } } /* secções de cada serviço: texto de um lado, duas fotografias do outro, número gigante por trás */ .servico-detalhe { overflow: hidden; } .servico-detalhe__fundo { position: absolute; top: 2%; right: -1%; z-index: 0; pointer-events: none; user-select: none; font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(9rem, 26vw, 26rem); line-height: 1; color: rgba(0,107,49,.07); } .servico-detalhe--inverso .servico-detalhe__fundo { right: auto; left: -1%; } .servico-detalhe__grelha { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .servico-detalhe--inverso .servico-detalhe__grelha > .servico-detalhe__texto { order: 2; } .servico-detalhe__texto { display: grid; gap: 22px; justify-items: start; } .servico-detalhe__texto .entrada__acoes { align-items: center; } .servico-detalhe__fotos { position: relative; padding-bottom: clamp(56px, 8vw, 110px); } .servico-detalhe__fotos .moldura--larga { aspect-ratio: 16 / 11; } /* a fotografia pequena sobrepõe-se ao canto inferior da grande, com uma margem da cor da secção */ .servico-detalhe__foto-pequena { position: absolute; left: -6%; bottom: 0; width: 44%; aspect-ratio: 3 / 4; z-index: 2; border: 6px solid var(--papel); box-shadow: 0 30px 60px -30px rgba(6,9,7,.55); } .secao--clara .servico-detalhe__foto-pequena { border-color: var(--areia); } /* legendas: a da fotografia grande fica no canto de cima (a pequena sobrepõe-se sempre ao canto de baixo); a da fotografia pequena ocupa a largura da própria moldura, em letra mais pequena */ .servico-detalhe__fotos > .moldura:first-child .moldura__legenda { top: 16px; bottom: auto; left: 16px; right: auto; max-width: calc(100% - 32px); } .servico-detalhe__foto-pequena .moldura__legenda { left: 10px; right: 10px; bottom: 10px; padding: 6px 8px; font-size: .7rem; line-height: 1.3; } .servico-detalhe--inverso .servico-detalhe__foto-pequena { left: auto; right: -6%; } /* variante com a fotografia grande ao alto (obras fotografadas ao alto) e a pequena ao baixo */ .servico-detalhe__fotos--retrato { width: min(100%, 440px); justify-self: center; padding-bottom: clamp(48px, 6vw, 80px); } .servico-detalhe__fotos--retrato .servico-detalhe__foto-pequena { width: 62%; aspect-ratio: 4 / 3; left: auto; right: -14%; } .servico-detalhe--inverso .servico-detalhe__fotos--retrato .servico-detalhe__foto-pequena { right: auto; left: -14%; } @media (max-width: 900px) { .servico-detalhe__grelha { grid-template-columns: 1fr; } .servico-detalhe__grelha > .servico-detalhe__fotos { order: -1; } .servico-detalhe__foto-pequena, .servico-detalhe--inverso .servico-detalhe__foto-pequena { left: 0; right: auto; } .servico-detalhe__fotos--retrato { width: min(100%, 420px); justify-self: start; } .servico-detalhe__fotos--retrato .servico-detalhe__foto-pequena, .servico-detalhe--inverso .servico-detalhe__fotos--retrato .servico-detalhe__foto-pequena { left: auto; right: -8%; } .servico-detalhe__fundo { font-size: clamp(8rem, 40vw, 16rem); top: 0; right: -4%; } .servico-detalhe--inverso .servico-detalhe__fundo { left: -4%; } } /* parallax: a fotografia é 18 % mais alta do que a moldura e desliza com o rolar (js/servicos.js) */ .moldura--parallax img, .moldura--parallax video { position: absolute; left: 0; right: 0; top: -9%; width: 100%; height: 118%; } /* revelação por cortina: uma tampa da cor da secção desliza e "abre" a moldura de baixo para cima (ou da esquerda para a direita). É um pseudo-elemento e não um clip-path, para o IntersectionObserver continuar a ver a moldura como visível e a disparar a revelação. */ .secao--papel { --cortina: var(--papel); } .secao--clara { --cortina: var(--areia); } .secao--escura { --cortina: var(--preto); } .js .revelar.revelar--mascara, .js .revelar.revelar--mascara-lado { opacity: 1; transform: none; } .js .revelar--mascara::after, .js .revelar--mascara-lado::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--cortina, var(--papel)); pointer-events: none; transition: transform 1.2s var(--ease-out); } .js .revelar--mascara::after { transform-origin: top; } .js .revelar--mascara-lado::after { transform-origin: right; } .js .revelar--mascara.esta-visivel::after { transform: scaleY(0); } .js .revelar--mascara-lado.esta-visivel::after { transform: scaleX(0); } .js .revelar--mascara.revelar--atraso-2::after, .js .revelar--mascara-lado.revelar--atraso-2::after { transition-delay: .25s; } /* ---------- equipa: pilha de cartões largos ---------- */ /* cada cartão é uma fotografia 16:9 com uma faixa de legenda por baixo. Em ecrãs largos e altos os cartões ficam presos ao topo (sticky) e o seguinte desliza por cima; --coberto (0 a 1, posto pelo main.js) encolhe e escurece o que já está tapado. A largura do cartão é limitada pela altura da janela, para caber inteiro sem cortar a fotografia (os textos vêm dentro da imagem). */ .pilha { display: grid; gap: clamp(20px, 3vw, 36px); } .pilha__cartao { position: relative; border-radius: 12px; overflow: hidden; background: var(--papel); box-shadow: 0 30px 60px -36px rgba(6,9,7,.55); } .pilha__imagem { position: relative; overflow: hidden; background: var(--grafite); } .pilha__imagem img { width: 100%; height: 100%; object-fit: cover; display: block; } .pilha__legenda { display: grid; grid-template-columns: auto auto 1fr; gap: 10px clamp(16px, 2.5vw, 32px); align-items: center; padding: 16px clamp(16px, 2.5vw, 28px); } .pilha__numero { font-family: var(--fonte-titulo); font-size: .95rem; letter-spacing: .1em; color: var(--verde-escuro); } .pilha__texto { display: grid; gap: 2px; } .pilha__texto h3 { font-size: 1.5rem; } .pilha__idade { margin-left: .15em; font-weight: 300; color: var(--cinza-escuro); white-space: nowrap; } .pilha__idade::before { content: "· "; } .pilha__legenda p { font-size: .94rem; color: var(--tinta-suave); } @media (min-width: 900px) { .pilha__imagem { aspect-ratio: 16 / 9; } } @media (min-width: 900px) and (min-height: 760px) { .pilha { gap: 0; } .pilha__cartao { position: sticky; top: calc(var(--cabecalho) + 8px); width: min(100%, calc((calc(100 * var(--vh)) - var(--cabecalho) - 170px) * 16 / 9)); margin: 0 auto clamp(28px, calc(6 * var(--vh)), 64px); transform-origin: 50% 0; transform: scale(calc(1 - var(--coberto, 0) * .06)); will-change: transform; } .pilha__cartao::after { content: ""; position: absolute; inset: 0; background: var(--preto); opacity: calc(var(--coberto, 0) * .55); pointer-events: none; } .pilha__cartao:last-child { margin-bottom: 0; } } @media (max-width: 899px) { .pilha__legenda { grid-template-columns: auto 1fr; } .pilha__legenda p { grid-column: 1 / -1; } } /* ---------- acordeão de serviços (página "sobre nós") ---------- */ /* seis painéis fotográficos lado a lado: o ativo cresce (flex-grow) e mostra o texto, os outros ficam em tira com o número e o nome na vertical. A classe esta-ativo é gerida pelo main.js (rato, foco, toque e rotação automática). */ /* Fluidez: enquanto um painel abre ou fecha só muda a largura da "janela" (overflow hidden). A fotografia e o texto já têm a largura do painel ABERTO (calculada com unidades de contentor: 6 painéis, 5 intervalos de 10 px, o aberto vale 4,2 e os outros 1, logo (100cqw - 50px) x 4,2 / 9,2), por isso não são redimensionados nem voltam a partir linhas a cada fotograma. O escurecer é uma camada com opacidade (::before) em vez de um filtro animado. */ .acordeao { display: flex; gap: 10px; height: clamp(400px, calc(58 * var(--vh)), 600px); container-type: inline-size; } .acordeao__painel { position: relative; flex: 1 1 0; min-width: 0; border-radius: 12px; overflow: hidden; background: var(--grafite); color: #fff; isolation: isolate; transition: flex-grow .8s var(--ease-out); --largura-aberta: calc((100cqw - 50px) * 4.2 / 9.2); } .acordeao__painel.esta-ativo { flex-grow: 4.2; } .acordeao__painel img { position: absolute; top: 0; left: 50%; z-index: -1; width: var(--largura-aberta); max-width: none; height: 100%; object-fit: cover; transform: translateX(-50%) scale(1.06); transition: transform 1.4s var(--ease-out); will-change: transform; backface-visibility: hidden; } .acordeao__painel.esta-ativo img { transform: translateX(-50%); } .acordeao__painel::before { content: ""; position: absolute; inset: 0; background: #060907; opacity: .45; transition: opacity .7s var(--ease-out); } .acordeao__painel.esta-ativo::before { opacity: .06; } .acordeao__painel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,9,7,.85), rgba(6,9,7,.1) 55%); opacity: .6; transition: opacity .6s; } .acordeao__painel.esta-ativo::after { opacity: 1; } .acordeao__numero { position: absolute; top: 18px; left: 18px; z-index: 1; font-family: var(--fonte-titulo); font-size: .9rem; letter-spacing: .12em; color: var(--verde-vivo); } /* nome na vertical, a ler-se de baixo para cima, só nas tiras fechadas */ .acordeao__rotulo { position: absolute; left: 50%; bottom: 22px; z-index: 1; transform: translateX(-50%); writing-mode: vertical-rl; rotate: 180deg; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,.9); transition: opacity .35s .3s; } /* o nome vertical some depressa ao abrir e só volta depois de o painel fechar, para não se cruzar com o texto */ .acordeao__painel.esta-ativo .acordeao__rotulo { opacity: 0; transition: opacity .15s; } .acordeao__conteudo { position: absolute; left: 22px; bottom: 22px; z-index: 1; width: calc(var(--largura-aberta) - 44px); display: grid; gap: 8px; justify-items: start; opacity: 0; transform: translateY(14px); transition: opacity .25s, transform .4s var(--ease-out); pointer-events: none; will-change: opacity, transform; } .acordeao__painel.esta-ativo .acordeao__conteudo { opacity: 1; transform: none; transition: opacity .5s .25s, transform .7s .25s var(--ease-out); } .acordeao__conteudo strong { font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.5); } .acordeao__conteudo small { font-size: .94rem; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 40ch; text-shadow: 0 1px 12px rgba(0,0,0,.5); } .acordeao__mais { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--fonte-titulo); font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-vivo); } .acordeao__mais svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); } .acordeao__painel:hover .acordeao__mais svg { transform: translateX(4px); } .acordeao__painel:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 3px; } @media (max-width: 800px) { .acordeao { flex-direction: column; height: auto; gap: 12px; } .acordeao__painel, .acordeao__painel.esta-ativo { flex: none; aspect-ratio: 16 / 10; } .acordeao__painel img, .acordeao__painel.esta-ativo img { left: 0; width: 100%; transform: none; } .acordeao__painel::before, .acordeao__painel.esta-ativo::before { opacity: .15; } .acordeao__painel::after { opacity: 1; } .acordeao__rotulo { display: none; } .acordeao__conteudo { right: 22px; width: auto; opacity: 1; transform: none; } } /* ---------- toque (telemóvel): resposta imediata ao dedo e menos efeitos caros ---------- */ a, button, label, summary { -webkit-tap-highlight-color: transparent; } @media (hover: none) { .btn, .pilula, .canal, .escolha span, .menu-botao, .idioma__botao, .ligacao-seta { transition-property: transform, background-color, border-color, color, box-shadow; } .btn:active, .pilula:active, .canal:active, .escolha:active span, .menu-botao:active, .idioma__botao:active, .ligacao-seta:active { transform: scale(.97); } /* o desfoque por trás da pílula do hero é recalculado a cada fotograma enquanto a fotografia se mexe */ .pilula { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6,9,7,.42); } } /* ---------- movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* a entrada da página inicial e a galeria dos projetos (azulejos) ficam de fora: correm igual para todos (decisão do dono do site, ver entrada.js e vitrines.js) */ :not(.entrada, .entrada *, .azulejos, .azulejos *, .azulejos__destaque, .azulejos__destaque *), :not(.entrada, .entrada *, .azulejos, .azulejos *, .azulejos__destaque, .azulejos__destaque *)::before, :not(.entrada, .entrada *, .azulejos, .azulejos *, .azulejos__destaque, .azulejos__destaque *)::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .revelar { opacity: 1; transform: none; } .painel__media { transform: none; } .faixa__fita { animation: none; } .js .revelar--mascara::after, .js .revelar--mascara-lado::after { display: none; } .moldura--parallax img, .moldura--parallax video { top: 0; height: 100%; } .capa-pagina--servicos .capa-pagina__conteudo > * { animation: none; } .acordeao__painel { transition: none; } }