/* ========================================================================== RG Prime — folha de estilos única Linha VÉRTICE (Jost, neutro quente escuro) com um acento laranja. ========================================================================== */ :root { --bg: #080706; --bg-card: #100E0C; --bg-tile: #0F0D0B; --ink: #EFECE8; --ink-strong:#ffffff; --brand: #E0781F; --brand-dark:#8A3F0C; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18); --muted: rgba(255,255,255,.68); --muted-2: rgba(255,255,255,.45); --faint: rgba(255,255,255,.34); --sans: 'Jost', 'Helvetica Neue', Helvetica, system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --header-h: 76px; --gutter: clamp(22px, 3vw, 60px); --maxw: 1360px; /* Uma curva por família de movimento — entrada, crescimento, zoom. */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-grow: cubic-bezier(.65, 0, .35, 1); --ease-zoom: cubic-bezier(.16, .84, .28, 1); } /* --- base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-weight: 300; color: var(--ink); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* O `display: none` do atributo `hidden` vem da folha do browser, e QUALQUER regra nossa com `display:` ganha-lhe por especificidade — foi assim que a confirmação do formulário (`.sent { display: flex }`) apareceu ao mesmo tempo que o próprio formulário. Esta linha devolve o `hidden` ao que ele promete. */ [hidden] { display: none !important; } h1, h2, p, ul { margin: 0; overflow-wrap: break-word; } ul { padding: 0; list-style: none; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } a:hover { color: var(--brand); } button { font: inherit; } ::selection { background: var(--brand); color: var(--bg); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; } section, main { scroll-margin-top: var(--header-h); } /* liberta a barra fixa nos saltos de âncora */ .hl { font-weight: 500; color: var(--ink-strong); } /* --- Lenis -------------------------------------------------------------- */ /* Equivalente ao lenis.css oficial, inline para poupar um pedido. Só aplica quando o Lenis arranca e marca o . */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } /* --- utilitários --------------------------------------------------------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* fotos de secção — preenchem o container pai (position: relative) */ .slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Primeiro elemento focável: quem navega por teclado salta a barra inteira. */ .skip { position: absolute; left: -9999px; z-index: 100; padding: 14px 22px; background: var(--ink-strong); color: var(--bg); font-size: 14px; } .skip:focus { left: var(--gutter); top: 12px; } /* Honeypot. Fora do ecrã em vez de display:none: um bot que leia o CSS salta o que está escondido, mas preenche um campo que "existe". */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .eyebrow, .linkmono, .field__label, .form-note, .tile__meta { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; line-height: 1.5; } .eyebrow { display: inline-block; color: var(--muted-2); } /* O ponto laranja é a única marca de cor no sobretítulo — chama o olho sem pintar o texto. */ .eyebrow--dot { position: relative; padding-left: 18px; } .eyebrow--dot::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 999px; background: var(--brand); } .linkmono { display: inline-block; color: rgba(255,255,255,.62); } .linkmono--faint { color: var(--faint); } /* Sublinhado que cresce da esquerda — o gesto de hover do sistema. */ .linkmono--under { position: relative; padding-bottom: 6px; } .linkmono--under::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--ease-out); } .linkmono--under:hover::after, .linkmono--under:focus-visible::after, .linkmono--under:active::after { transform: scaleX(1); } /* --- botões pill --------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; /* alvo de toque nunca abaixo de 44px */ padding: 12px 22px; border: 0; border-radius: 999px; background: var(--ink-strong); color: #1c1b1a; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 14px rgba(0,0,0,.16); transition: transform 240ms ease, box-shadow 240ms ease; } .pill--lg { min-height: 52px; padding: 16px 32px; font-size: 15px; gap: 12px; } .pill span { transition: transform 240ms var(--ease-out); } .pill:hover, .pill:active { color: #1c1b1a; transform: translateY(-1px); } .pill:hover span { transform: translateX(3px); } .pill--lg:hover, .pill--lg:active { transform: translateY(-2px); box-shadow: 0 14px 34px -18px rgba(224,120,31,.55); } /* --- cabeçalho ----------------------------------------------------------- */ /* Transparente sobre o hero, sólido depois de sair dele — o vidro só aparece quando há conteúdo por baixo para ele velar. */ .site-header { position: fixed; inset: 0 0 auto; z-index: 40; border-bottom: 1px solid transparent; transition: background 400ms ease, border-color 400ms ease, backdrop-filter 400ms ease; } .site-header[data-scrolled] { background: rgba(12,10,8,.72); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom-color: var(--line); } .header-bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Logótipo composto em tipo — não há ficheiro de marca. */ .logo { display: flex; align-items: center; gap: 12px; } .logo:hover { color: inherit; } .logo__mono { font-size: 20px; font-weight: 400; letter-spacing: -.06em; color: var(--ink-strong); } .logo__rule { width: 1px; height: 26px; background: rgba(255,255,255,.28); } .logo__stack { display: flex; flex-direction: column; gap: 3px; } .logo__name { font-size: 9.5px; letter-spacing: .28em; color: var(--ink-strong); } .logo__sub { font-size: 6.5px; letter-spacing: .52em; color: rgba(255,255,255,.75); } .nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); } /* Três traços que viram X. Arranca `hidden` no HTML e é o JS que o revela — sem script a navegação fica na barra em vez de presa atrás de um botão morto. */ .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 9px; border: 0; background: transparent; cursor: pointer; } .menu-toggle__bar { height: 1px; background: var(--ink-strong); transition: transform 300ms var(--ease-out), opacity 200ms ease; } [data-menu="aberto"] .menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } [data-menu="aberto"] .menu-toggle__bar:nth-child(2) { opacity: 0; } [data-menu="aberto"] .menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Link do menu: linha que cresce da esquerda. :active cobre o toque. */ .navlink { position: relative; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.62); padding: 15px 0; transition: color 240ms ease; } .navlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--ease-out); } .navlink:hover, .navlink:focus-visible, .navlink:active { color: var(--ink-strong); } .navlink:hover::after, .navlink:focus-visible::after, .navlink:active::after { transform: scaleX(1); } /* --- hero ---------------------------------------------------------------- */ /* O hero é mais baixo do que a fotografia (44vw contra os 56.25vw que a proporção 16:9 lhe dá), e sem `overflow: hidden`. O último contentor passa assim para dentro da secção seguinte, em vez de deixar ali um vazio. É `min-height` e não `height` porque em ecrãs estreitos o texto precisa de mais altura — aí o hero cresce e o transbordo fecha-se sozinho. */ .hero { position: relative; min-height: 44vw; display: flex; align-items: center; /* o bloco assenta na linha média do hero */ overflow: visible; padding: calc(var(--header-h) + clamp(26px, 3.5vh, 52px)) 0 clamp(40px, 6vh, 72px); } /* A fotografia ocupa a largura toda e a altura sai da proporção, encostada ao topo — entra sempre inteira, e o que passa do fim do hero invade a secção seguinte. Não leva máscara em baixo: os últimos 4% do ficheiro são preto puro (0,0,0) contra um fundo #080706, portanto a aresta não se vê. O motivo vive à direita; o véu diagonal abre espaço ao texto. */ .hero__art { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 16 / 9; pointer-events: none; } .hero__art img { width: 100%; height: 100%; object-fit: cover; } /* O fundo da fotografia é preto puro (0,0,0) e o da página é #080706: oito valores de diferença, que numa área tão escura ainda se lêem como aresta. Este degradê curto leva os últimos 9% exatamente até --bg, e aí a caixa da imagem deixa de ter limite visível — é o que faz o contentor parecer recortado em vez de colado sobre um retângulo. */ .hero__art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(180deg, rgba(8,7,6,0) 0%, var(--bg) 100%); } /* A queda do véu vive entre o fim do título (~51% da largura) e o começo dos contentores (~59%): antes disso vela a fotografia para o texto se ler, depois disso desaparece para não sujar o motivo. */ .hero__scrim { position: absolute; /* MESMA caixa da arte, não a do hero. Com `inset: 0` o véu parava no fim do hero e a fotografia continuava por baixo sem ele: dava um degrau de tom (7,6,5) para (0,0,0) à largura toda, e era isso que se via como uma faixa a separar as secções — não o recorte do contentor. */ top: 0; left: 0; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(100deg, rgba(8,7,6,.96) 0%, rgba(8,7,6,.93) 30%, rgba(8,7,6,.80) 46%, rgba(8,7,6,.30) 54%, rgba(8,7,6,0) 60%); } .hero__inner { position: relative; z-index: 2; width: 100%; } .hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 2.6vw, 34px); } .hero h1 { max-width: 15ch; font-size: clamp(40px, 5.4vw, 78px); font-weight: 200; line-height: 1.03; letter-spacing: -.025em; color: var(--ink-strong); text-wrap: balance; } .hero__lede { max-width: 46ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.75; color: var(--muted); text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; } /* Deixa cair a vista para a secção seguinte sem pesar no ecrã. */ /* --- secções ------------------------------------------------------------- */ /* z-index sobre a fotografia do hero, que entra por aqui adentro: o texto da secção passa-lhe à frente em vez de se misturar com ela. */ .section { position: relative; z-index: 1; padding: clamp(88px, 13vh, 168px) 0; } .section + .section { border-top: 1px solid var(--line); } .section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(48px, 6vw, 88px); } .section-head h2 { max-width: 18ch; font-size: clamp(30px, 3.4vw, 54px); font-weight: 200; line-height: 1.08; letter-spacing: -.025em; color: var(--ink-strong); text-wrap: balance; } /* Título à esquerda, dica de arrastar à direita, alinhados pela base. */ .section-head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; } .section-lede { max-width: 52ch; font-size: 16px; line-height: 1.8; color: var(--muted); text-wrap: pretty; } /* --- portfólio ----------------------------------------------------------- */ /* No desktop as três estão à vista, iguais e alinhadas com o texto da secção. O carrossel só entra no telemóvel, onde três colunas não cabem — ver a media query dos 900px. Nada se mexe ao passar o rato: muda o filete e o sublinhado, mais nada. */ .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 26px); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .tiles:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; } .tiles__dica { color: var(--muted-2); white-space: nowrap; } .tile { position: relative; aspect-ratio: 4 / 5; min-width: 0; overflow: hidden; background: var(--bg-tile); border: 1px solid var(--line); transition: border-color 400ms ease; } .tile:hover { color: inherit; border-color: var(--line-2); } .tile:focus-visible { outline-offset: -4px; } /* Véu por cima da imagem, nunca caixa opaca. */ .tile__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.1) 28%, rgba(10,10,10,.72) 72%, rgba(10,10,10,.94) 100%); } .tile__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2vw, 32px); } .tile__meta { color: rgba(255,255,255,.55); } .tile__name { margin: 0; font-size: clamp(19px, 1.5vw, 25px); font-weight: 300; letter-spacing: -.015em; color: var(--ink-strong); } /* A tile inteira é o link; isto é só a marca de que o é. O filete cresce da esquerda, como nos outros links do sistema. */ .tile__cta { position: relative; align-self: flex-start; margin-top: 8px; padding-bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-strong); } .tile__cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--ease-out); } .tile:hover .tile__cta::after, .tile:focus-visible .tile__cta::after { transform: scaleX(1); } /* --- formulário ---------------------------------------------------------- */ /* Duas colunas: o cabeçalho fica à esquerda, como o do portfólio, e o cartão ao lado em vez de por baixo — é o que corta a altura a meio. */ .pedido { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(36px, 5vw, 76px); align-items: center; } .pedido .section-head { margin-bottom: 0; } .card { position: relative; background: var(--bg-card); border: 1px solid var(--line); box-shadow: 0 44px 90px -44px rgba(0,0,0,.92); } .card__body { padding: clamp(26px, 2.6vw, 40px); } .progress { height: 2px; background: rgba(255,255,255,.07); } .progress__bar { width: 0; height: 100%; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); transition: width 500ms var(--ease-out); } .fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.2vw, 30px); } .field { display: flex; flex-direction: column; gap: 7px; } .field--full { grid-column: 1 / -1; } .field__label { color: var(--muted-2); transition: color 300ms ease; } .field__req { color: var(--brand); } .field:focus-within .field__label { color: rgba(255,255,255,.8); } .field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 10px 0; font-family: var(--sans); font-weight: 300; font-size: 16px; /* abaixo de 16px o iOS dá zoom ao focar o campo */ line-height: 1.6; color: var(--ink-strong); outline: none; transition: border-color 300ms ease; } .field textarea { resize: vertical; min-height: 62px; } .field input:focus, .field textarea:focus { border-bottom-color: var(--brand); } .field ::placeholder { color: rgba(255,255,255,.22); } /* O outline global desenharia à volta do campo inteiro; aqui o foco já se lê no filete que passa a laranja. */ .field input:focus-visible, .field textarea:focus-visible { outline: none; } /* Com `interaction-only` o widget fica sem conteúdo na esmagadora maioria das visitas. Sem isto sobrava um espaço em branco a meio do formulário. */ .cf-turnstile:empty { display: none; } .form-actions { margin-top: clamp(24px, 2.6vw, 32px); padding-top: clamp(20px, 2.2vw, 26px); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 22px; } .form-note { color: var(--faint); transition: color 300ms ease; } .form-note.is-erro { color: var(--brand); } /* Vive agora dentro do cabeçalho, por baixo do lede. */ .card__alt { margin-top: 4px; font-size: 15px; color: var(--muted-2); } .card__alt a { color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; } .card__alt a:hover { color: var(--brand); border-bottom-color: var(--brand); } .sent { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(6px, 1.4vw, 18px) 0; } .sent__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--brand); } .sent__title { max-width: 20ch; font-size: clamp(23px, 2.2vw, 32px); font-weight: 200; line-height: 1.28; letter-spacing: -.02em; color: var(--ink-strong); } .sent__body { max-width: 46ch; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.55); } /* --- página 404 ----------------------------------------------------------- */ .erro { position: relative; display: flex; align-items: center; min-height: 86svh; overflow: hidden; padding: calc(var(--header-h) + clamp(40px, 7vh, 88px)) 0 clamp(56px, 8vh, 96px); } .erro__art { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 16 / 9; } .erro__art img { width: 100%; height: 100%; object-fit: cover; opacity: .5; } .erro__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,7,6,.97) 0%, rgba(8,7,6,.92) 34%, rgba(8,7,6,.72) 54%, rgba(8,7,6,.55) 100%); } .erro__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vw, 24px); } /* O número é ornamento, não informação — daí o aria-hidden e o peso 200. */ .erro__n { font-size: clamp(88px, 15vw, 210px); font-weight: 200; line-height: .8; letter-spacing: -.06em; color: rgba(255,255,255,.08); } .erro h1 { max-width: 17ch; font-size: clamp(30px, 3.8vw, 58px); font-weight: 200; line-height: 1.06; letter-spacing: -.025em; color: var(--ink-strong); text-wrap: balance; } .erro__lede { max-width: 50ch; font-size: 16px; line-height: 1.8; color: var(--muted); } .erro__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 10px; } /* --- páginas de texto ----------------------------------------------------- */ /* Prosa limitada a 68ch: acima disso o olho perde a linha ao voltar à esquerda. */ /* `padding` em vez de `padding-top`: .section usa a forma curta e zera a goteira lateral que o .wrap tinha posto. No desktop não se via, porque a margem vinha do max-width centrado — em ecrã estreito o texto encostava às duas bordas. */ /* Não leva `.section`: a forma curta `padding` dessa classe — e sobretudo a da media query dos 640px, que vem depois neste ficheiro — zerava a goteira lateral e o texto encostava às duas bordas do telemóvel. Aqui o espaçamento é todo próprio. */ .prosa { max-width: 1120px; margin: 0 auto; padding: calc(var(--header-h) + clamp(48px, 8vh, 96px)) var(--gutter) clamp(64px, 9vh, 120px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .prosa h1 { max-width: 20ch; margin-bottom: 8px; font-size: clamp(30px, 3.4vw, 52px); font-weight: 200; line-height: 1.08; letter-spacing: -.025em; color: var(--ink-strong); } .prosa h2 { max-width: 30ch; margin-top: clamp(26px, 3vw, 40px); font-size: clamp(19px, 1.6vw, 24px); font-weight: 400; letter-spacing: -.01em; color: var(--ink-strong); } .prosa p, .prosa li { max-width: 68ch; font-size: 16px; line-height: 1.85; color: var(--muted); } .prosa ul { display: flex; flex-direction: column; gap: 10px; padding-left: 18px; list-style: disc; } .prosa li::marker { color: var(--brand); } .prosa a { color: var(--ink-strong); border-bottom: 1px solid var(--line-2); padding-bottom: 1px; } .prosa a:hover { color: var(--brand); border-bottom-color: var(--brand); } .prosa strong { font-weight: 500; color: var(--ink); } .prosa__data { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--faint); overflow-wrap: anywhere; /* mono + letter-spacing transborda em ecrã estreito */ } .prosa .pill, .prosa .linkmono--under { margin-top: clamp(24px, 3vw, 40px); } .prosa .pill { border-bottom: 0; } /* --- rodapé -------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); padding: clamp(48px, 7vh, 84px) 0 32px; } .footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(32px, 4vw, 72px); padding-bottom: clamp(36px, 5vh, 60px); } .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .footer-col--marca { gap: 20px; max-width: 34ch; } .footer-tit { margin-bottom: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted-2); } .footer-col a { font-size: 15px; color: rgba(255,255,255,.72); transition: color 240ms ease; } .footer-col a:hover { color: var(--brand); } .footer-nota { font-size: 14px; line-height: 1.7; color: var(--faint); } .logo--footer { cursor: default; } .footer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 28px; padding-top: 26px; border-top: 1px solid var(--line); } /* --- responsivo ---------------------------------------------------------- */ @media (max-width: 1024px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-col--marca { grid-column: 1 / -1; } } /* --- menu de telemóvel --------------------------------------------------- */ /* Painel pendurado na barra, não camada por cima da página: não precisa de prender o foco nem de tapar o site inteiro para três linhas de menu. */ @media (max-width: 900px) { .site-header[data-menu] .menu-toggle { display: flex; } .site-header[data-menu] .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100svh - var(--header-h)); overflow-y: auto; padding: 8px var(--gutter) 24px; background: rgba(8,7,6,.97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); } .site-header[data-menu="aberto"] .nav { display: flex; } .site-header[data-menu] .navlink { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 12px; } .site-header[data-menu] .navlink::after { display: none; } .site-header[data-menu] .pill { margin-top: 22px; align-self: flex-start; } /* Aqui sim: três colunas não cabem, e empilhá-las dava uma coluna de fotos sem fim. `overflow-x` + `scroll-snap` nativos — sem biblioteca e sem arrastar por JS. Sangra na margem direita, que é o que diz "há mais". */ .tiles { display: flex; max-width: none; margin: 0; padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; -ms-overflow-style: none; } .tiles::-webkit-scrollbar { display: none; } .tile { flex: 0 0 min(72vw, 360px); scroll-snap-align: start; aspect-ratio: 3 / 4; } .pedido { grid-template-columns: 1fr; } .pedido .section-head { margin-bottom: 4px; } /* Alto o suficiente para o título respirar por cima da zona escura da fotografia, sem chegar ao ecrã inteiro. */ /* Altura pelo conteúdo, não por svh: com uma altura fixa sobrava um vão de preto entre o botão e a fotografia — 220px de nada, que era o que fazia o hero parecer partido em dois. `overflow: visible` para a fotografia poder continuar para a secção seguinte, como no desktop, em vez de acabar a meio do ecrã. */ .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; overflow: visible; padding: calc(var(--header-h) + clamp(30px, 5vh, 52px)) 0 0; } .hero__inner { order: 1; position: relative; z-index: 2; } /* Em fluxo, logo a seguir ao texto — nem sobreposta nem a flutuar. Emerge do preto por máscara em cima e dissolve-se no fundo da página em baixo, por isso não tem aresta de nenhum lado: não se vê onde a fotografia começa nem onde acaba. É isso que a faz parecer parte do hero e não um retângulo colado lá dentro. */ .hero__art { position: relative; inset: auto; order: 2; width: 100%; margin: clamp(26px, 4.5vh, 44px) 0 0; aspect-ratio: 4 / 3; opacity: 1; transform: none; overflow: visible; border: 0; box-shadow: none; -webkit-mask-image: none; mask-image: none; } /* `lighten` em vez de máscaras: por cada pixel fica o mais claro entre a fotografia e o fundo. O preto do ficheiro (0,0,0) é mais escuro que o #080706 da página, logo desaparece por completo — não fica esbatido, fica exatamente igual ao resto do site. Só os contentores e o brilho, que são mais claros, é que sobram. É por isto que não há aresta nenhuma: não há retângulo, há só o que está aceso. Uma máscara aproximava; isto é exato. */ .hero__art img { mix-blend-mode: lighten; } /* Encostado à direita: o recorte 4:3 sobre um 16:9 corta um quarto da largura, e o que se perde à esquerda é vazio — nenhuma das palavras. */ .hero__art img { object-position: right center; } /* O degradê de baixo deixou de fazer falta: com `lighten` já não há fundo de imagem para esconder. */ .hero__art::after { display: none; } /* Sem véu: o texto já não está por cima da fotografia. */ .hero__scrim { display: none; } .section-head--row { flex-direction: column; align-items: flex-start; } .tiles__dica { display: none; } .footer-cols { grid-template-columns: 1fr; gap: 34px; } .footer-col--marca { grid-column: auto; } } @media (max-width: 720px) { .form-actions { justify-content: flex-start; } .form-actions .pill { width: 100%; } } @media (max-width: 640px) { .section { padding: 72px 0; } .tile__more { max-width: none; } .fields { grid-template-columns: 1fr; } /* NÃO pôr `min-height: auto` aqui: este bloco vem depois do dos 900px e anulava-lhe a altura. O hero encolhia ao texto e a fotografia, que é absoluta e ancorada ao fundo, caía-lhe por cima. */ .hero { min-height: 88svh; } .card__body { padding: 30px 22px 34px; } .footer-bar { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }