/* tipos de letra alojados no próprio site (subconjunto latino) */ @font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontes/jost-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("fontes/jost-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontes/figtree-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("fontes/figtree-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("fontes/figtree-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --cor-realce: #2C2E32; --cor-fundo: #F4F2EE; --cor-superficie: #EAE8E5; --cor-texto: #2C2E32; --cor-texto-suave: #606163; --cor-primaria: #2C2E32; --cor-primaria-texto: #F4F2EE; --cor-acento: #623D22; --cor-borda: #D4D3D0; --cor-escuro: #2C2E32; --cor-escuro-texto: #F4F2EE; --cor-foco: #2C2E32; --fonte-titulos: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fonte-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --peso-titulos: 400; --estilo-titulos: normal; --largura-titulos: 100%; --tracking-titulos: -0.008em; --caixa-titulos: none; --altura-linha: 1.62; --altura-linha-titulos: 1.04; --peso-titulos-2: 500; --tracking-titulos-em: -0.008em; --escala-titulos: 0.9; --peso-marca: 500; --tracking-marca: -0.008em; --caixa-marca: none; --cor-veu: #0D0E0F; --cor-veu-rgb: 13 14 15; --cor-veu-forte-rgb: 11 12 13; --t-pequeno: 0.875rem; --t-texto: 1.062rem; --t-grande: clamp(1.126rem, 1.056rem + 0.2974vw, 1.294rem); --t-h4: clamp(1.147rem, 1.049rem + 0.4156vw, 1.381rem); --t-h3: clamp(1.381rem, 1.206rem + 0.7367vw, 1.796rem); --t-h2: clamp(1.796rem, 1.4rem + 1.665vw, 2.732rem); --t-h1: clamp(2.102rem, 1.323rem + 3.277vw, 3.945rem); --t-display: clamp(2.46rem, 0.9642rem + 6.298vw, 6.003rem); --raio: 0px; --raio-botao: 999px; --raio-imagem: 0px; --sombra: none; --borda: 1px; --espaco-seccao: clamp(86px, 10vw, 144px); --largura-max: 1320px; --gap: 32px; } /* Fábrica de Websites — base comum a todos os sites. As variáveis --cor-*, --fonte-*, --t-*, --raio-*, --espaco-* vêm de design/tokens.json (gerar_site.py escreve o bloco :root antes deste ficheiro). */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-texto); font-size: var(--t-texto); line-height: var(--altura-linha); font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } :where(ul, ol)[role="list"], .lista-limpa { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4 { font-family: var(--fonte-titulos); font-weight: var(--peso-titulos); font-style: var(--estilo-titulos); font-stretch: var(--largura-titulos); letter-spacing: var(--tracking-titulos); text-transform: var(--caixa-titulos); line-height: var(--altura-linha-titulos); margin: 0 0 .45em; text-wrap: balance; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); line-height: 1.2; } h4 { font-size: var(--t-h4); line-height: 1.25; } p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: .18em; } strong { font-weight: 600; } small, .pequeno { font-size: var(--t-pequeno); } :focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; border-radius: 2px; } .seccao--escura :focus-visible, .cabecalho--transparente:not(.rolado) :focus-visible { outline-color: currentColor; } .saltar { position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--cor-escuro); color: var(--cor-escuro-texto); padding: 12px 16px; border-radius: var(--raio); text-decoration: none; } .saltar:focus { top: 12px; } .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; } /* ---------- Layout ---------- */ :root { --margem: clamp(16px, 4.5vw, 44px); } .contentor { width: min(100% - 2 * var(--margem), var(--largura-max)); margin-inline: auto; } .contentor--estreito { width: min(100% - 2 * var(--margem), 760px); margin-inline: auto; } .seccao { padding-block: var(--espaco-seccao); position: relative; } .seccao--superficie { background: var(--cor-superficie); } .seccao--escura { background: var(--cor-escuro); color: var(--cor-escuro-texto); } .seccao--escura .texto-suave { color: color-mix(in srgb, var(--cor-escuro-texto) 72%, var(--cor-escuro)); } .seccao + .seccao:not(.seccao--superficie):not(.seccao--escura):not(.s-hero) { padding-top: calc(var(--espaco-seccao) * .55); } .texto-suave { color: var(--cor-texto-suave); } .texto-grande { font-size: var(--t-grande); line-height: 1.5; } .cabeca-seccao { margin-bottom: clamp(28px, 4vw, 52px); max-width: 720px; } .cabeca-seccao--centro { margin-inline: auto; text-align: center; } .cabeca-seccao--centro p { margin-inline: auto; } .cabeca-seccao__pre { margin: 0 0 .6em; font-size: var(--t-pequeno); font-weight: 600; color: var(--cor-texto-suave); } .seccao--escura .cabeca-seccao__pre { color: inherit; opacity: .75; } .cabeca-seccao h2 { margin-bottom: .3em; } .cabeca-seccao p { color: var(--cor-texto-suave); } .seccao--escura .cabeca-seccao p { color: inherit; opacity: .82; } /* ---------- Botões ---------- */ .acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .botao { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .78em 1.35em; border-radius: var(--raio-botao); border: var(--borda) solid transparent; font-family: var(--fonte-texto); font-size: var(--t-texto); font-weight: 600; line-height: 1.1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .botao svg { width: 1.15em; height: 1.15em; flex: none; } /* um botão com texto comprido nunca alarga a página: em ecrãs estreitos o texto parte em duas linhas */ .botao { max-width: 100%; } @media (max-width: 480px) { .botao { white-space: normal; text-align: center; } } .botao--principal { background: var(--cor-primaria); color: var(--cor-primaria-texto); border-color: var(--cor-primaria); } .botao--principal:hover { background: color-mix(in srgb, var(--cor-primaria) 85%, #000); border-color: color-mix(in srgb, var(--cor-primaria) 85%, #000); } .botao--secundario { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 55%, transparent); } .botao--secundario:hover { border-color: currentColor; } .botao:active { transform: translateY(1px); } .botoes-contorno .botao--principal { background: transparent; color: var(--cor-realce); border-color: var(--cor-realce); } .botoes-contorno .botao--principal:hover { background: var(--cor-primaria); color: var(--cor-primaria-texto); } .botoes-sublinhado .botao { min-height: 44px; padding-inline: 0; border-radius: 0; border-width: 0 0 2px; background: transparent; color: inherit; } .botoes-sublinhado .botao--principal { border-color: var(--cor-primaria); } .seccao--escura .botao--principal, .s-hero--letreiro .botao--principal { box-shadow: none; } .ligacao-seta { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .ligacao-seta svg { width: 1em; height: 1em; } /* ---------- Cabeçalho ---------- */ .cabecalho { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--cor-fundo) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--cor-borda); color: var(--cor-texto); transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .cabecalho__barra { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; } .marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; } .marca img { height: 44px; width: auto; max-width: 180px; object-fit: contain; } .marca__nome { font-family: var(--fonte-titulos); font-weight: var(--peso-titulos); font-stretch: var(--largura-titulos); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.05; letter-spacing: var(--tracking-titulos); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); } .nav a:not(.botao) { text-decoration: none; font-weight: 500; font-size: .98rem; padding-block: 8px; border-bottom: 2px solid transparent; } .nav a:not(.botao):hover { border-bottom-color: currentColor; } .nav .botao { min-height: 42px; padding: .6em 1.1em; font-size: .95rem; } .menu-botao { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; border-radius: var(--raio); } .menu-botao svg { width: 26px; height: 26px; } .menu-botao .icone-fechar { display: none; } .menu-aberto .menu-botao .icone-menu { display: none; } .menu-aberto .menu-botao .icone-fechar { display: block; } .cabecalho--transparente { position: fixed; inset: 0 0 auto 0; background: transparent; border-bottom-color: transparent; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } .cabecalho--transparente.rolado, .menu-aberto .cabecalho--transparente { background: color-mix(in srgb, var(--cor-fundo) 96%, transparent); color: var(--cor-texto); border-bottom-color: var(--cor-borda); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); } .cabecalho--transparente:not(.rolado) .botao--principal { background: #fff; color: #111; border-color: #fff; } /* com o menu aberto, nada de backdrop-filter: o filtro prendia o painel fixo do menu à altura da barra e o menu saía cortado */ .menu-aberto .cabecalho, .menu-aberto .cabecalho--transparente, .menu-aberto .cabecalho--transparente.rolado { -webkit-backdrop-filter: none; backdrop-filter: none; } .cabecalho--centrado .cabecalho__barra { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 76px; } .cabecalho--centrado .marca { grid-column: 2; justify-self: center; } .cabecalho--centrado .marca__nome { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); } .cabecalho--centrado .cabecalho__cta { grid-column: 3; justify-self: end; } .cabecalho--centrado .cabecalho__cta .botao { min-height: 42px; padding: .6em 1.1em; font-size: .95rem; } .cabecalho--centrado .cabecalho__contacto { grid-column: 1; grid-row: 1; justify-self: start; font-size: .95rem; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; } .cabecalho--centrado .nav--linha { justify-content: center; padding-block: 0 14px; } @media (min-width: 881px) { .nav--linha .botao { display: none; } } .cabecalho__contacto svg { width: 1.1em; height: 1.1em; } .cabecalho__telefone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; white-space: nowrap; } .cabecalho__telefone svg { width: 1.1em; height: 1.1em; } .cabecalho__telefone span { display: flex; flex-direction: column; line-height: 1.1; } .cabecalho__telefone small { font-size: 11px; font-weight: 400; opacity: .75; } @media (max-width: 880px) { .menu-botao { display: inline-flex; } .nav { display: none; position: fixed; inset: 72px 0 0 0; z-index: 59; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--margem) 32px; overflow-y: auto; background: var(--cor-fundo); color: var(--cor-texto); } .menu-aberto .nav { display: flex; } .nav a:not(.botao) { font-size: 1.3rem; padding: 16px 0; border-bottom: 1px solid var(--cor-borda); } .nav .botao { margin-top: 20px; min-height: 52px; font-size: 1.05rem; } .cabecalho--centrado .cabecalho__barra { grid-template-columns: minmax(0, 1fr) auto; min-height: 72px; } .cabecalho--centrado .marca { grid-column: 1; justify-self: start; } .cabecalho--centrado .cabecalho__contacto, .cabecalho--centrado .cabecalho__cta { display: none; } .cabecalho--centrado .menu-botao { grid-column: 2; } .cabecalho--centrado .nav--linha { padding-block: 12px 32px; justify-content: flex-start; } .cabecalho__telefone span { display: none; } .menu-aberto { overflow: hidden; } .menu-aberto .cabecalho .nav .botao--principal, .menu-aberto .cabecalho--transparente:not(.rolado) .nav .botao--principal { background: var(--cor-primaria); color: var(--cor-primaria-texto); border-color: var(--cor-primaria); } } /* ---------- Imagens ---------- */ .media { position: relative; overflow: hidden; border-radius: var(--raio-imagem); background: var(--cor-superficie); } .media img { width: 100%; height: 100%; object-fit: cover; } .media--paisagem { aspect-ratio: 4 / 3; } .media--retrato { aspect-ratio: 4 / 5; } .media--quadrado { aspect-ratio: 1; } .media--largo { aspect-ratio: 16 / 9; } .media figcaption, .legenda { font-size: var(--t-pequeno); color: var(--cor-texto-suave); margin-top: 10px; } /* ---------- Horário ---------- */ .horario { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .horario th, .horario td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--cor-borda); vertical-align: top; font-weight: 400; } .horario td { text-align: right; padding-left: 16px; } .horario tr.hoje th, .horario tr.hoje td { font-weight: 700; } .seccao--escura .horario th, .seccao--escura .horario td { border-color: color-mix(in srgb, currentColor 20%, transparent); } .estado-horario { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; } .estado-horario::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; opacity: .35; } .estado-horario[data-aberto="sim"]::before { background: #2E9D5B; opacity: 1; } .estado-horario[data-aberto="nao"]::before { background: #C2452D; opacity: 1; } /* ---------- Rodapé ---------- */ .rodape { background: var(--cor-escuro); color: var(--cor-escuro-texto); padding-block: clamp(48px, 7vw, 88px) 28px; } .rodape a { text-decoration: none; } .rodape a:hover { text-decoration: underline; } .rodape__grelha { display: grid; gap: 36px 56px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } .rodape__marca { font-family: var(--fonte-titulos); font-weight: var(--peso-titulos); font-stretch: var(--largura-titulos); font-size: var(--t-h3); line-height: 1.05; margin-bottom: .4em; } .rodape h2 { font-family: var(--fonte-texto); font-size: var(--t-pequeno); font-weight: 600; letter-spacing: 0; text-transform: none; font-stretch: 100%; margin-bottom: 14px; opacity: .7; } .rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rodape__grelha > *, .rodape li { min-width: 0; } a[href^="mailto:"] { overflow-wrap: anywhere; } .rodape .horario th, .rodape .horario td { padding: 4px 0; border: 0; } .rodape__base { margin-top: clamp(36px, 5vw, 64px); padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: var(--t-pequeno); opacity: .82; } .rodape__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; } .rodape__registo { font-size: var(--t-pequeno); opacity: .8; margin-top: 12px; } .rodape--simples .rodape__grelha { grid-template-columns: 1fr; } @media (max-width: 720px) { .rodape__grelha { grid-template-columns: 1fr; } } /* ---------- Páginas simples (404, informação legal, privacidade) ---------- */ .pagina-simples { padding-top: clamp(48px, 8vw, 112px); } .pagina-simples h1 { font-size: var(--t-h1); } .prosa-legal h2 { font-size: var(--t-h4); margin-top: 2.2em; } .prosa-legal ul { padding-left: 1.2em; } .prosa-legal li + li { margin-top: 6px; } /* ---------- Faixa de pré-visualização (modo demo) ---------- */ .faixa-demo { position: fixed; right: 16px; bottom: 16px; z-index: 90; width: min(100% - 32px, 420px); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 12px; background: #1D1B1A; color: #F5F2EE; font: 500 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 10px 30px rgb(0 0 0 / .28); } @media (max-width: 640px) { .faixa-demo { right: 10px; bottom: 10px; width: calc(100% - 20px); font-size: 12.5px; } } .faixa-demo p { margin: 0; max-width: none; } .faixa-demo strong { color: #fff; } .faixa-demo button { flex: none; margin-left: auto; background: transparent; color: inherit; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; } .faixa-demo.recolhida { width: auto; padding: 8px 14px; } .faixa-demo.recolhida p span { display: none; } body.modo-demo { padding-bottom: 0; } body.modo-demo .rodape { padding-bottom: calc(28px + 84px); } /* ---------- Movimento ---------- */ @keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .anim-suaves .s-hero__conteudo > *, .anim-marcadas .s-hero__conteudo > * { animation: surgir .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); } .anim-marcadas .revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .anim-marcadas .revelar.visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .anim-marcadas .revelar { opacity: 1; transform: none; } } /* ---------- Impressão ---------- */ @media print { .cabecalho, .faixa-demo, .menu-botao, .mapa__fachada button { display: none !important; } .seccao { padding-block: 24px; } body { background: #fff; color: #000; } } /* textura do fundo (tokens.estilo.textura): grão fino ou fibra de papel, muito discretos */ body.textura-grao { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E"); } body.textura-papel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .12' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.06'/%3E%3C/svg%3E"); } @media print { body.textura-grao, body.textura-papel { background-image: none; } } /* redes sociais: ícone (máscara pintada na cor do texto) + nome */ .redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; } .redes a { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; text-decoration: none; color: inherit; } .redes a:hover .redes__nome, .redes a:focus-visible .redes__nome { text-decoration: underline; text-underline-offset: 3px; } .redes__icone { width: 1.15em; height: 1.15em; flex: none; background-color: currentColor; -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; } .redes .icone { width: 1.1em; height: 1.1em; flex: none; } .rodape__redes { margin-top: 18px; flex-direction: column; gap: 2px; } /* várias páginas: a página atual no menu e o título das páginas interiores */ .nav a[aria-current="page"]:not(.botao) { border-bottom-color: currentColor; } .s-topo-pagina { padding: clamp(44px, 6.5vw, 96px) 0 clamp(8px, 2vw, 20px); } .s-topo-pagina h1 { font-size: var(--t-h1); margin: 0; } .s-topo-pagina__pre { font-size: var(--t-pequeno); color: var(--cor-texto-suave); margin: 0 0 .6em; } .s-topo-pagina__pre a { color: inherit; text-decoration: none; } .s-topo-pagina__pre a:hover { text-decoration: underline; } .pagina-interior .s-topo-pagina + .seccao { padding-top: clamp(20px, 3.5vw, 44px); } .pagina-interior .cabeca-seccao:has(> h2.visualmente-oculto:only-child) { margin: 0; } /* seletor de língua (1.34.0), só nos sites com traduções */ .nav__linguas { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; font-size: .85rem; font-weight: 600; letter-spacing: .12em; } .nav__linguas a { text-decoration: none; color: var(--cor-texto-suave); padding: 6px 0; } .nav__linguas a[aria-current="true"] { color: var(--cor-texto); text-decoration: underline; text-underline-offset: .35em; } /* Fábrica de Websites — secções e variantes (catálogo em fw-construcao/referencias/seccoes.md). */ /* ========================================================= HERO ========================================================= */ .s-hero { padding-block: clamp(40px, 7vw, 96px) var(--espaco-seccao); } .s-hero__pre { font-size: var(--t-texto); font-weight: 500; margin: 0 0 1rem; color: var(--cor-texto-suave); } .s-hero__titulo { font-size: var(--t-display); margin: 0 0 .32em; max-width: 15ch; } .s-hero__sub { font-size: var(--t-grande); line-height: 1.5; max-width: 40ch; margin-bottom: 1.6em; color: var(--cor-texto-suave); } .s-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; } .selo-avaliacao { display: inline-flex; align-items: center; gap: .45em; font-size: var(--t-pequeno); font-weight: 600; margin-top: 1.6rem; text-decoration: none; } .selo-avaliacao svg { width: 1.05em; height: 1.05em; color: var(--cor-acento); } .selo-avaliacao span { font-weight: 400; opacity: .85; } /* --- letreiro: fotografia a toda a largura, nome em grande como um letreiro --- */ .s-hero--letreiro { padding: 0; color: #fff; display: grid; grid-template-rows: 1fr auto; min-height: min(100svh, 940px); isolation: isolate; position: relative; overflow: hidden; background: var(--cor-escuro); } .s-hero--letreiro .s-hero__media { position: absolute; inset: 0; z-index: -1; } .s-hero--letreiro .s-hero__media img { width: 100%; height: 100%; object-fit: cover; } .s-hero--letreiro .s-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .08) 22%, rgb(0 0 0 / .18) 42%, rgb(0 0 0 / .62) 72%, rgb(0 0 0 / .8) 100%); } @media (max-width: 760px) { .s-hero--letreiro .s-hero__media::after { background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .3) 30%, rgb(0 0 0 / .66) 62%, rgb(0 0 0 / .82) 100%); } } .s-hero--letreiro .s-hero__conteudo { align-self: end; padding-block: 140px clamp(32px, 5vw, 64px); } .s-hero--letreiro .s-hero__pre, .s-hero--letreiro .s-hero__sub { color: rgb(255 255 255 / .92); text-shadow: 0 1px 14px rgb(0 0 0 / .45); } .s-hero--letreiro .s-hero__titulo { max-width: 12ch; text-shadow: 0 2px 30px rgb(0 0 0 / .25); } .s-hero--letreiro .botao--principal { background: #fff; color: #161412; border-color: #fff; } .s-hero--letreiro .botao--principal:hover { background: rgb(255 255 255 / .86); } .s-hero--letreiro .botao--secundario { color: #fff; } .s-hero__faixa { background: var(--cor-escuro); color: var(--cor-escuro-texto); } .s-hero__faixa .contentor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .s-hero__faixa .info { display: flex; gap: 12px; align-items: flex-start; padding: 20px 20px 20px 0; min-width: 0; } .s-hero__faixa .info + .info { padding-left: 20px; border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent); } .s-hero__faixa svg { width: 22px; height: 22px; flex: none; margin-top: 2px; opacity: .8; } .s-hero__faixa .info p { margin: 0; font-size: var(--t-pequeno); } .s-hero__faixa .info strong { display: block; font-size: var(--t-texto); } .s-hero__faixa a { text-decoration: none; } @media (max-width: 760px) { .s-hero__faixa .contentor { grid-template-columns: 1fr; } .s-hero__faixa .info { padding: 14px 0; } .s-hero__faixa .info + .info { padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); } } /* --- dividido: texto e imagem lado a lado --- */ .s-hero--dividido .s-hero__grelha { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .s-hero--dividido.imagem-esquerda .s-hero__media { order: -1; } .s-hero--dividido .s-hero__media { aspect-ratio: 4 / 5; } @media (max-width: 860px) { .s-hero--dividido .s-hero__grelha { grid-template-columns: 1fr; } .s-hero--dividido .s-hero__media { order: -1; aspect-ratio: 4 / 3; } } /* --- centrado: texto ao centro, imagem larga por baixo --- */ .s-hero--centrado { text-align: center; } .s-hero--centrado .s-hero__titulo, .s-hero--centrado .s-hero__sub { margin-inline: auto; } .s-hero--centrado .s-hero__acoes { justify-content: center; } .s-hero--centrado .s-hero__media { margin-top: clamp(36px, 5vw, 64px); aspect-ratio: 21 / 9; } @media (max-width: 720px) { .s-hero--centrado .s-hero__media { aspect-ratio: 4 / 3; } } /* --- mosaico: texto e três imagens --- */ .s-hero--mosaico .s-hero__grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .mosaico3 { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1 / 1.02; } .mosaico3 .media { height: 100%; width: 100%; min-width: 0; aspect-ratio: auto; } /* a grelha dá a forma: com a proporção da fotografia, a primeira saía da coluna e ficava por baixo das outras */ .mosaico3 .media:first-child { grid-row: 1 / 3; } @media (max-width: 860px) { .s-hero--mosaico .s-hero__grelha { grid-template-columns: 1fr; } .mosaico3 { aspect-ratio: 4 / 3; } } /* --- sem imagem --- */ .s-hero--sem-imagem { background: var(--cor-superficie); } .s-hero--sem-imagem .s-hero__titulo { max-width: 18ch; } /* ========================================================= DESTAQUES ========================================================= */ .destaques-colunas { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .destaque h3 { font-size: var(--t-h4); margin-bottom: .35em; } .destaque p { color: var(--cor-texto-suave); margin: 0; } .seccao--escura .destaque p { color: inherit; opacity: .8; } .destaque__icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--cor-primaria) 16%, transparent); color: var(--cor-realce); margin-bottom: 16px; } .destaque__icone svg { width: 22px; height: 22px; } .destaques-faixa { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; text-align: center; } .destaques-faixa li { flex: 1 1 200px; padding: 8px 24px; font-family: var(--fonte-titulos); font-stretch: var(--largura-titulos); font-size: var(--t-h4); line-height: 1.25; } .destaques-faixa li + li { border-left: 1px solid var(--cor-borda); } @media (max-width: 640px) { .destaques-faixa li + li { border-left: 0; border-top: 1px solid var(--cor-borda); } .destaques-faixa li { padding: 16px 0; } } /* ========================================================= SOBRE ========================================================= */ .s-sobre--imagem-lado .sobre__grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .s-sobre--imagem-lado.imagem-esquerda .sobre__media { order: -1; } .sobre__media { aspect-ratio: 4 / 5; } .sobre__texto p { font-size: var(--t-grande); line-height: 1.6; } .factos { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 2rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--cor-borda); } .facto dt { font-size: var(--t-pequeno); color: var(--cor-texto-suave); order: 2; } .facto { display: flex; flex-direction: column; } .facto dd { margin: 0; font-family: var(--fonte-titulos); font-stretch: var(--largura-titulos); font-size: var(--t-h3); line-height: 1.1; } @media (max-width: 860px) { .s-sobre--imagem-lado .sobre__grelha { grid-template-columns: 1fr; } .sobre__media { aspect-ratio: 4 / 3; } } .s-sobre--citacao { text-align: center; } .s-sobre--citacao blockquote { margin: 0 auto; max-width: 26ch; font-family: var(--fonte-titulos); font-stretch: var(--largura-titulos); font-size: var(--t-h2); line-height: 1.18; letter-spacing: var(--tracking-titulos); text-wrap: balance; } .s-sobre--citacao .citacao__autor { margin-top: 1.4rem; font-size: var(--t-pequeno); color: var(--cor-texto-suave); } .s-sobre--citacao .sobre__texto { margin: 2rem auto 0; max-width: 60ch; } .s-sobre--citacao .sobre__texto p { margin-inline: auto; font-size: var(--t-texto); } .s-sobre--texto .sobre__texto { columns: 2 320px; column-gap: clamp(28px, 4vw, 64px); } .s-sobre--texto .sobre__texto p { font-size: var(--t-texto); break-inside: avoid; } /* ========================================================= OFERTA (produtos, serviços, ementa) ========================================================= */ .oferta__nota { margin-top: 2rem; font-size: var(--t-pequeno); color: var(--cor-texto-suave); } .oferta__categoria h3 { font-size: var(--t-h4); margin-bottom: .2em; } .oferta__categoria > p { color: var(--cor-texto-suave); font-size: var(--t-pequeno); margin-bottom: .9rem; } /* lista de preços com guias de pontos */ .lista-precos { columns: 2 340px; column-gap: clamp(32px, 5vw, 80px); } .lista-precos .oferta__categoria { break-inside: avoid; margin-bottom: 2.4rem; } .lista-precos ul { list-style: none; margin: 0; padding: 0; } .lista-precos li { padding: .5rem 0; break-inside: avoid; } .lista-precos .item__linha { display: flex; align-items: baseline; gap: .7rem; } .lista-precos .item__nome { font-weight: 600; } .lista-precos .item__guia { flex: 1; min-width: 24px; border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent); transform: translateY(-.28em); } .lista-precos .item__preco { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .lista-precos .item__desc { margin: .15rem 0 0; font-size: var(--t-pequeno); color: var(--cor-texto-suave); max-width: 52ch; } .seccao--escura .lista-precos .item__desc { color: inherit; opacity: .75; } /* lista em linhas */ .lista-linhas ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cor-borda); } .lista-linhas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--cor-borda); } .lista-linhas .item__nome { font-family: var(--fonte-titulos); font-stretch: var(--largura-titulos); font-size: var(--t-h4); line-height: 1.25; margin: 0; } .lista-linhas .item__desc { grid-column: 1; margin: 0; color: var(--cor-texto-suave); max-width: 62ch; } .lista-linhas .item__preco { grid-column: 2; grid-row: 1; align-self: start; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .lista-linhas .oferta__categoria + .oferta__categoria { margin-top: 2.6rem; } /* cartões com imagem (montra de produtos) */ .cartoes { display: grid; gap: clamp(20px, 2.6vw, 36px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } .cartao { display: flex; flex-direction: column; gap: 12px; } .cartao .media { aspect-ratio: 4 / 5; } .cartao h3 { font-size: var(--t-h4); margin: 4px 0 0; } .cartao p { margin: 0; color: var(--cor-texto-suave); font-size: var(--t-pequeno); } .cartao .item__preco { font-weight: 600; font-variant-numeric: tabular-nums; } .cartao--sem-imagem { padding: 24px; border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); align-self: start; } /* acordeão por categoria */ .acordeao { border-top: 1px solid var(--cor-borda); } .acordeao details { border-bottom: 1px solid var(--cor-borda); } .acordeao summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-family: var(--fonte-titulos); font-stretch: var(--largura-titulos); font-size: var(--t-h4); line-height: 1.25; } .acordeao summary::-webkit-details-marker { display: none; } .acordeao summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease; } .acordeao details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); } .acordeao .acordeao__corpo { padding: 0 0 24px; } .acordeao .acordeao__corpo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .acordeao .acordeao__corpo li { display: flex; justify-content: space-between; gap: 16px; } .acordeao .acordeao__corpo li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } /* ========================================================= GALERIA ========================================================= */ .galeria-grelha { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .galeria-grelha.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .galeria-grelha.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 720px) { .galeria-grelha, .galeria-grelha.c3, .galeria-grelha.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .galeria-grelha .media:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 2 / 1; } } .galeria-grelha .media { aspect-ratio: 1; } .galeria-mosaico { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 17vw, 240px); grid-auto-flow: dense; } .galeria-mosaico .media { height: 100%; } .galeria-mosaico .media:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; } .galeria-mosaico .media:nth-child(6n + 4) { grid-row: span 2; } .galeria-mosaico .media:nth-child(6n + 5) { grid-column: span 2; } @media (max-width: 720px) { .galeria-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; } .galeria-mosaico .media:nth-child(6n + 5) { grid-column: span 1; } } .galeria-faixa { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 28vw, 360px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--cor-borda) transparent; overscroll-behavior-x: contain; } .galeria-faixa .media { aspect-ratio: 3 / 4; scroll-snap-align: start; } .galeria-faixa-contentor { padding-left: max(var(--margem), calc((100vw - var(--largura-max)) / 2)); } /* galeria justificada: filas com a mesma altura, cada fotografia na sua proporção (o site.js arruma as filas; sem JS, o flex faz um arranjo parecido) */ .galeria-just { --alt: clamp(160px, 19vw, 280px); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .galeria-just::after { content: ""; flex: 999999 1 0; } .galeria-just--js::after { display: none; } .galeria-just__item { flex: calc(var(--r) * 1000) 1 calc(var(--r) * var(--alt)); min-width: 0; } .galeria-just .media { aspect-ratio: var(--r); } @media (max-width: 720px) { .galeria-just { --alt: 30vw; gap: 8px; } } .galeria__rodape { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; } .media--ampliavel { cursor: zoom-in; padding: 0; border: 0; width: 100%; display: block; } .media--ampliavel img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .media--ampliavel:hover img { transform: scale(1.03); } dialog.ampliacao { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 92vh; } dialog.ampliacao::backdrop { background: rgb(10 10 10 / .86); } dialog.ampliacao img { max-height: 88vh; width: auto; margin-inline: auto; border-radius: 6px; } dialog.ampliacao p { color: #eee; text-align: center; margin: 10px auto 0; font-size: 14px; } dialog.ampliacao button { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .14); color: #fff; cursor: pointer; display: grid; place-items: center; } dialog.ampliacao button svg { width: 22px; height: 22px; } /* fotografia ampliada com setas e contador (feita no Solar da Salvadoura, para todos os sectores) */ /* O diálogo ocupa o ecrã todo, com faixas reservadas. Em cima ficam o contador e o fechar. Em baixo ficam a legenda e as setas (telemóvel, tablet e ecrãs sem rato), ou as setas vão para os lados (computador largo). A fotografia só usa o espaço que sobra, por isso nada a tapa, nada sai do ecrã e as setas ficam sempre no mesmo sítio, seja qual for a forma da fotografia. */ .ampliacao[open] { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 72px 10px calc(122px + env(safe-area-inset-bottom)); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .ampliacao img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; margin: 0; border-radius: 6px; } .ampliacao p { position: fixed; left: 78px; right: 78px; bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 88px; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; line-height: 1.4; color: #eee; } .ampliacao .ampliacao__seta { position: fixed; top: auto; right: auto; bottom: calc(36px + env(safe-area-inset-bottom)); transform: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .16); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease; } .ampliacao .ampliacao__seta:hover { background: rgb(255 255 255 / .28); } .ampliacao .ampliacao__seta svg { width: 26px; height: 26px; } .ampliacao .ampliacao__seta--ant { left: 16px; } .ampliacao .ampliacao__seta--seg { right: 16px; } .ampliacao__conta { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); color: rgb(255 255 255 / .82); font-size: 14px; letter-spacing: .08em; white-space: nowrap; } .ampliacao > button:first-child:focus-visible, .ampliacao .ampliacao__seta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* com a fotografia aberta, a faixa da pré-visualização esconde-se, para não aparecer por baixo da legenda e das setas */ body:has(.ampliacao[open]) .faixa-demo { visibility: hidden; } /* computador largo com rato: setas a meio, dos lados, fora da fotografia, e a legenda logo por baixo dela */ @media (hover: hover) and (min-width: 1100px) { .ampliacao[open] { padding: 78px 124px 40px; } .ampliacao img { max-height: calc(100% - 58px); } .ampliacao p { position: static; min-height: 0; max-width: 70ch; margin: 16px auto 0; flex: none; } .ampliacao .ampliacao__seta { top: 50%; bottom: auto; transform: translateY(-50%); width: 56px; height: 56px; } .ampliacao .ampliacao__seta svg { width: 28px; height: 28px; } .ampliacao .ampliacao__seta--ant { left: 32px; } .ampliacao .ampliacao__seta--seg { right: 32px; } } /* ecrãs baixos e deitados, como o telemóvel deitado: setas dos lados e legenda numa linha, para a fotografia ficar com quase toda a altura (só deitado, porque num telemóvel pequeno ao alto as fotografias ficavam estreitas) */ @media (max-height: 500px) and (orientation: landscape) { .ampliacao[open] { padding: 46px calc(74px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(74px + env(safe-area-inset-left)); } .ampliacao img { max-height: calc(100% - 30px); } .ampliacao p { position: static; min-height: 0; max-width: 100%; margin: 8px auto 0; flex: none; display: block; font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ampliacao .ampliacao__seta { top: 50%; bottom: auto; transform: translateY(-50%); width: 46px; height: 46px; } .ampliacao .ampliacao__seta--ant { left: calc(14px + env(safe-area-inset-left)); } .ampliacao .ampliacao__seta--seg { right: calc(14px + env(safe-area-inset-right)); } .ampliacao__conta { top: 16px; } } /* ========================================================= AVALIAÇÕES ========================================================= */ .resumo-avaliacoes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 28px; } .resumo-avaliacoes__nota { font-family: var(--fonte-titulos); font-stretch: var(--largura-titulos); font-size: var(--t-h1); line-height: 1; } .estrelas { display: inline-flex; gap: 2px; color: var(--cor-acento); } .estrelas svg { width: 18px; height: 18px; } .avaliacoes-cartoes { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .avaliacao { margin: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 2px solid var(--cor-primaria); } .seccao--escura .avaliacao { border-top-color: var(--cor-acento); } .avaliacao blockquote { margin: 0; font-size: var(--t-grande); line-height: 1.5; } .avaliacao figcaption { font-size: var(--t-pequeno); color: var(--cor-texto-suave); } .seccao--escura .avaliacao figcaption { color: inherit; opacity: .75; } .avaliacao-destaque { max-width: 900px; } .avaliacao-destaque blockquote { margin: 0 0 1.2rem; font-family: var(--fonte-titulos); font-stretch: var(--largura-titulos); font-size: var(--t-h2); line-height: 1.2; letter-spacing: var(--tracking-titulos); text-wrap: balance; } .avaliacao-destaque figcaption { font-size: var(--t-pequeno); opacity: .8; } .avaliacoes__mais { margin-top: 32px; } /* ========================================================= NÚMEROS ========================================================= */ .numeros { display: grid; gap: 28px clamp(32px, 6vw, 96px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), max-content)); justify-content: start; } .numero dd { margin: 0; font-family: var(--fonte-titulos); font-stretch: var(--largura-titulos); font-size: var(--t-h1); line-height: 1; letter-spacing: var(--tracking-titulos); } .numero dt { margin-top: 8px; color: var(--cor-texto-suave); font-size: var(--t-pequeno); } .numero { display: flex; flex-direction: column-reverse; } .seccao--escura .numero dt { color: inherit; opacity: .75; } /* ========================================================= PROCESSO (só para sequências reais) ========================================================= */ .passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: grid; gap: clamp(20px, 3vw, 36px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .passos li { counter-increment: passo; position: relative; padding-top: 64px; } .passos li::before { content: counter(passo); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-primaria); color: var(--cor-primaria-texto); font-weight: 700; font-variant-numeric: tabular-nums; } .passos h3 { font-size: var(--t-h4); margin-bottom: .35em; } .passos p { margin: 0; color: var(--cor-texto-suave); } /* ========================================================= PERGUNTAS FREQUENTES ========================================================= */ .faq { max-width: 820px; } .faq details { border-bottom: 1px solid var(--cor-borda); } .faq details:first-of-type { border-top: 1px solid var(--cor-borda); } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 600; font-size: var(--t-grande); line-height: 1.35; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: 1.4em; line-height: .9; transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq .faq__resposta { padding: 0 0 22px; color: var(--cor-texto-suave); } /* ========================================================= CHAMADA À ACÇÃO ========================================================= */ .s-cta--faixa .cta__caixa { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; } .s-cta--faixa h2 { margin: 0; max-width: 22ch; } .s-cta--faixa p { margin: .5rem 0 0; opacity: .85; } .s-cta--imagem { color: #fff; text-align: center; isolation: isolate; overflow: hidden; } .s-cta--imagem .cta__media { position: absolute; inset: 0; z-index: -1; } .s-cta--imagem .cta__media img { width: 100%; height: 100%; object-fit: cover; } .s-cta--imagem .cta__media::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .55); } .s-cta--imagem h2 { max-width: 20ch; margin-inline: auto; } .s-cta--imagem p { margin-inline: auto; opacity: .9; } .s-cta--imagem .acoes { justify-content: center; margin-top: 1.6rem; } .s-cta--imagem .botao--principal { background: #fff; color: #161412; border-color: #fff; } .s-cta--imagem .botao--secundario { color: #fff; } /* ========================================================= CONTACTOS ========================================================= */ .contactos__grelha { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } @media (max-width: 860px) { .contactos__grelha { grid-template-columns: 1fr; } } .contactos__lista { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 16px; } .contactos__lista li { display: flex; gap: 14px; align-items: flex-start; } .contactos__lista svg { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--cor-realce); } .seccao--escura .contactos__lista svg { color: var(--cor-acento); } .contactos__lista a { text-decoration: none; font-weight: 600; } .contactos__lista a:hover { text-decoration: underline; } .contactos__bloco + .contactos__bloco { margin-top: 32px; } .contactos__bloco h3 { font-size: var(--t-h4); margin-bottom: .6em; } .contactos-cartoes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .contacto-cartao { padding: clamp(22px, 3vw, 32px); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); } .seccao--escura .contacto-cartao { background: color-mix(in srgb, var(--cor-escuro-texto) 6%, transparent); border-color: color-mix(in srgb, var(--cor-escuro-texto) 16%, transparent); } .contacto-cartao h3 { font-size: var(--t-h4); display: flex; gap: 10px; align-items: center; } .contacto-cartao h3 svg { width: 22px; height: 22px; color: var(--cor-realce); } .seccao--escura .contacto-cartao h3 svg { color: var(--cor-acento); } .contacto-cartao a { font-weight: 600; text-decoration: none; } .mapa { position: relative; border-radius: var(--raio-imagem); overflow: hidden; background: var(--cor-superficie); border: 1px solid var(--cor-borda); aspect-ratio: 4 / 3; } .mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .seccao--escura .mapa { color: var(--cor-texto); border-color: transparent; } .mapa__fachada { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--cor-texto) 14%, transparent) 1px, transparent 0); background-size: 22px 22px; } .mapa__fachada svg { width: 40px; height: 40px; color: var(--cor-realce); } .mapa__fachada p { margin: 0; max-width: 34ch; } .mapa__fachada .pequeno { color: var(--cor-texto-suave); } .mapa__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* ========================================================= TEXTO ========================================================= */ .s-texto .prosa p { font-size: var(--t-grande); } /* forma da fotografia do topo vinda de uma referência (modo URL) */ .hero-arco .s-hero--dividido .s-hero__media { border-radius: 999px 999px 0 0; aspect-ratio: 3 / 4; } .hero-redonda .s-hero--dividido .s-hero__media { border-radius: 50%; aspect-ratio: 1; } /* maiúsculas acentuadas numa segunda linha (Óptica, Évora) não podem tocar na linha de cima */ .s-hero__titulo.titulo--acentos { line-height: max(var(--altura-linha-titulos), 1.1); } /* modelo alojamento da biblioteca */ /* Modelo de alojamento da Fábrica de Websites (feito a partir do Solar da Salvadoura, 22 e 23 Out 2026, com o ADN de tetoncabins.com). CSS próprio, escrito de raiz. Cores, letras, pesos, espaçamento e tamanho dos títulos vêm de design/tokens.json: --cor-*, --fonte-*, --peso-titulos, --peso-titulos-2, --tracking-titulos-em, --escala-titulos, --peso-marca, --tracking-marca, --caixa-marca, --cor-veu, --cor-veu-rgb e --cor-veu-forte-rgb (gerar_site.css_tokens). Os valores por omissão do modelo são os do Solar. */ :root { --cor-area-acento: var(--cor-acento); --papel: var(--cor-fundo); --sec: calc(var(--espaco-seccao) * .62); --t-display: calc(clamp(2.7rem, 1.2rem + 4.4vw, 5.9rem) * var(--escala-titulos)); --t-titulo: calc(clamp(2.3rem, 1.45rem + 2.9vw, 4.15rem) * var(--escala-titulos)); --t-titulo-m: calc(clamp(2rem, 1.35rem + 2.2vw, 3.3rem) * var(--escala-titulos)); --t-sans: clamp(1.6rem, 1.15rem + 1.5vw, 2.55rem); --suave: cubic-bezier(.2, .7, .1, 1); } body { font-size: 1.0625rem; } h1, h2, h3 { font-weight: var(--peso-titulos); } h2 { font-size: var(--t-titulo); line-height: 1.02; letter-spacing: calc(var(--tracking-titulos-em) * 1.5); margin-bottom: .5em; } h3 { font-weight: var(--peso-titulos-2); } p { text-wrap: pretty; } .contentor--largo { width: min(100% - 2 * var(--margem), 1520px); margin-inline: auto; } .contentor--estreito { width: min(100% - 2 * var(--margem), 720px); margin-inline: auto; } .rotulo { max-width: none; font-family: var(--fonte-texto); font-size: .78rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; margin: 0 0 1.6em; } .titulo-sans { font-family: var(--fonte-texto); font-weight: 500; font-size: var(--t-sans); letter-spacing: -.02em; line-height: 1.1; } .ic { display: block; flex: none; } .ligacao { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; } .ligacao:hover { text-decoration-thickness: 2px; } /* botões em pílula, contorno de 1 px */ .botao { min-height: 50px; padding: .85em 1.95em; font-size: .94rem; font-weight: 500; letter-spacing: .01em; } /* botões principais cheios (regra do Ricardo: chamadas para ação em botões cheios, nunca só de contorno) */ .botoes-contorno .botao--principal { background: var(--cor-texto); color: var(--papel); border-color: var(--cor-texto); } .botoes-contorno .botao--principal:hover { background: transparent; color: var(--cor-texto); border-color: var(--cor-texto); } .botao--secundario { border-color: color-mix(in srgb, currentColor 40%, transparent); } .dividido__painel .botao--principal, .acento .botao--principal, .rodape .botao--principal { background: var(--papel); color: var(--cor-texto); border-color: var(--papel); } .dividido__painel .botao--principal:hover, .acento .botao--principal:hover { background: transparent; color: var(--cor-escuro-texto); border-color: var(--cor-escuro-texto); } .acoes { margin-top: 2.1em; gap: 14px 22px; } /* ---------- cabeçalho e menu de ecrã inteiro ---------- */ .cab { position: sticky; top: 0; z-index: 60; background: var(--papel); color: var(--cor-texto); border-bottom: 1px solid transparent; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; /* um filtro aqui prenderia o menu fixo à caixa do cabeçalho */ transition: background-color .35s ease, color .35s ease, border-color .35s ease; } .cab.cabecalho--transparente { position: fixed; inset: 0 0 auto 0; background: transparent; color: #fff; } .cab.cabecalho--transparente.rolado { background: var(--papel); color: var(--cor-texto); border-bottom-color: var(--cor-borda); } .menu-aberto .cab, .menu-aberto .cab.cabecalho--transparente { background: transparent; color: var(--cor-texto); border-bottom-color: transparent; } .cab__barra { position: relative; z-index: 62; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 84px; padding-inline: var(--margem); } .cab .menu-botao { display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; align-items: center; gap: 14px; width: auto; height: 48px; padding: 0 6px 0 0; border-radius: 0; } .menu-botao__linhas { position: relative; width: 26px; height: 10px; display: block; } .menu-botao__linhas i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--suave), top .45s var(--suave); } .menu-botao__linhas i:first-child { top: 0; } .menu-botao__linhas i:last-child { top: 8px; } .menu-aberto .menu-botao__linhas i:first-child { top: 4px; transform: rotate(45deg); } .menu-aberto .menu-botao__linhas i:last-child { top: 4px; transform: rotate(-45deg); } .menu-botao__txt { font-size: .8rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; } .cab .marca { grid-column: 2; grid-row: 1; justify-self: center; } .cab .marca--logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .marca__logo { display: block; flex: none; width: 44px; height: 44px; } .marca__logo img { display: block; width: 100%; height: 100%; object-fit: contain; } /* só o logótipo, quando já traz o nome: horizontal, com a altura do cabeçalho e a largura que a proporção pedir */ .marca--so-logo .marca__logo { width: auto; max-width: 220px; } .marca--so-logo .marca__logo img { width: auto; max-width: 100%; } .marca--circulo .marca__logo img { border-radius: 50%; } .cabecalho--transparente .marca--circulo .marca__logo img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); } .cab .marca__nome { font-family: var(--fonte-titulos); font-weight: var(--peso-marca); font-size: calc(clamp(1.3rem, 1.05rem + .75vw, 1.75rem) * var(--escala-titulos)); letter-spacing: var(--tracking-marca); text-transform: var(--caixa-marca); } /* 1.29.1: um nome comprido no cabeçalho não alarga a página («The Shore @ Surf Paradise e Atlantic Beach», Espinho, partia a galeria a 320 px): no computador tem uma largura máxima e reticências, no telemóvel quebra em duas linhas e o resto fica com reticências. O nome inteiro continua no aria-label da ligação. */ .cab .marca { min-width: 0; max-width: min(46vw, 640px); } .cab .marca__nome { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cab .marca--logo .marca__nome { flex: 1 1 auto; } .cab__cta { grid-column: 3; grid-row: 1; justify-self: end; font-size: .95rem; font-weight: 500; text-decoration: none; padding: 10px 0; border-radius: 999px; transition: background-color .3s ease, color .3s ease, padding .3s ease; } .cab__cta:hover { text-decoration: underline; text-underline-offset: .3em; } .menu-aberto .cab__cta { background: var(--cor-texto); color: var(--papel); padding: 12px 24px; text-decoration: none; } body.menu-aberto { overflow: hidden; } .cab .nav { position: fixed; inset: 0; z-index: 59; display: block; overflow-y: auto; visibility: hidden; opacity: 0; padding: 110px var(--margem) 48px; background: var(--papel); color: var(--cor-texto); transition: opacity .5s ease, visibility 0s linear .5s; } .menu-aberto .cab .nav { visibility: visible; opacity: 1; transition: opacity .5s ease; } .nav__grelha { width: min(100%, 1320px); min-height: calc(100vh - 170px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .nav__lista { list-style: none; margin: 0; padding: 0; } .nav__lista li { overflow: hidden; } .cab .nav__lista a { display: inline-block; padding: .06em 0; border: 0; font-family: var(--fonte-titulos); font-weight: var(--peso-titulos); font-size: calc(clamp(2.3rem, 1.3rem + 2.7vw, 3.9rem) * var(--escala-titulos)); line-height: 1.12; letter-spacing: calc(var(--tracking-titulos-em) * 1.25); text-decoration: none; transform: translateY(105%); transition: transform .8s var(--suave), color .25s ease; transition-delay: calc(var(--k, 0) * 55ms + 120ms); } .menu-aberto .cab .nav__lista a { transform: none; } .cab .nav__lista a:hover { color: var(--cor-texto-suave); } .cab .nav__lista a[aria-current="page"] { color: var(--cor-texto-suave); } .nav__foto { aspect-ratio: 4 / 5; overflow: hidden; } .nav__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.4s var(--suave); } .menu-aberto .nav__foto img { transform: scale(1); } .nav__lado { font-size: .92rem; align-self: center; } .nav__lado p { margin: 0 0 .8em; } .cab .nav__lado a { display: inline; padding: 0; border: 0; font-size: inherit; text-decoration: none; } .cab .nav__lado a:hover { text-decoration: underline; } .nav__rotulo { font-weight: 600; font-size: .78rem !important; letter-spacing: .3em; text-transform: uppercase; color: var(--cor-texto-suave); margin-bottom: 1.4em !important; } .nav__reserva { display: none !important; } /* ---------- topo da página inicial ---------- */ .capa { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; color: #fff; overflow: hidden; background: var(--cor-veu); isolation: isolate; } .capa__media { position: absolute; inset: 0; z-index: -2; } .capa__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.09); animation: capa-zoom 2.6s var(--suave) .1s forwards; } @keyframes capa-zoom { to { transform: scale(1); } } .capa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 42% at 50% 54%, rgb(var(--cor-veu-rgb) / .32), transparent 70%), linear-gradient(180deg, rgb(var(--cor-veu-rgb) / .42) 0%, rgb(var(--cor-veu-rgb) / .1) 30%, rgb(var(--cor-veu-rgb) / .18) 58%, rgb(var(--cor-veu-rgb) / .55) 100%); } .capa__texto { text-align: center; padding: 130px var(--margem) 90px; } .capa__titulo { font-size: var(--t-display); font-weight: var(--peso-titulos); line-height: .98; letter-spacing: calc(var(--tracking-titulos-em) * 11 / 6); margin: 0; text-shadow: 0 2px 30px rgb(0 0 0 / .18); } .capa__titulo span:not(.visualmente-oculto) { display: block; animation: surgir 1.1s var(--suave) both; } .capa__titulo span:not(.visualmente-oculto) + span { animation-delay: .14s; } .capa__sub { margin: 26px auto 0; font-size: 1rem; font-weight: 500; letter-spacing: .02em; max-width: 34ch; text-shadow: 0 1px 14px rgb(0 0 0 / .45), 0 0 2px rgb(0 0 0 / .3); animation: surgir 1.1s var(--suave) .3s both; } .capa__acoes { display: none; justify-content: center; margin-top: 30px; animation: surgir 1.1s var(--suave) .45s both; } .capa .botao--principal { color: var(--cor-texto); border-color: #fff; background: #fff; } .capa .botao--principal:hover { background: transparent; color: #fff; border-color: #fff; } .capa__selos { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; } /* ---------- fotografia e texto lado a lado ---------- */ .lado { padding-block: var(--sec); } .lado__grelha { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: clamp(40px, 7.5vw, 128px); align-items: center; } .lado--img-direita .lado__grelha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); } .lado--img-direita .lado__media { order: 2; } .lado--retrato .lado__grelha { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); } .lado--retrato.lado--img-direita .lado__grelha { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); } .lado__media { overflow: hidden; } .lado__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .lado--retrato .lado__img { aspect-ratio: 4 / 5; } .lado__texto { max-width: 33rem; } .lado--img-direita .lado__texto { justify-self: end; } .lado__texto h2 { margin-bottom: .6em; } /* ---------- metade de cor e metade de fotografias ---------- */ .dividido { padding-block: calc(var(--sec) * .6); } .dividido__grelha { display: grid; grid-template-columns: 1fr 1fr; min-height: min(76vh, 680px); } .dividido__painel { background: var(--cor-escuro); color: var(--cor-escuro-texto); display: flex; align-items: center; padding: clamp(44px, 7vw, 120px); } .dividido--acento .dividido__painel { background: var(--cor-area-acento); } .dividido--inverso .dividido__painel { order: 2; } .dividido__texto { max-width: 31rem; } .dividido__texto p { opacity: .92; } .dividido__fotos { position: relative; overflow: hidden; min-height: 420px; background: var(--cor-superficie); } .dividido__fotos .slider, .dividido__foto { position: absolute; inset: 0; } .dividido__foto img { width: 100%; height: 100%; object-fit: cover; } /* sliders */ .slider { position: relative; } .slider__pista { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .slider__pista::-webkit-scrollbar { display: none; } .slider__item { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; } .dividido .slider__item img, .slider--foto .slider__item img { width: 100%; height: 100%; object-fit: cover; } .slider__setas { position: absolute; right: 26px; bottom: 26px; display: flex; gap: 12px; } .seta { width: 58px; height: 58px; border-radius: 999px; border: 0; background: #fff; color: var(--cor-texto); display: grid; place-items: center; cursor: pointer; transition: opacity .25s ease, transform .25s ease; box-shadow: 0 1px 0 rgb(0 0 0 / .04); } .seta .ic { width: 22px; height: 22px; } .seta:hover { transform: scale(1.05); } .seta:disabled { opacity: .45; cursor: default; transform: none; } .slider__setas--fora { position: static; justify-content: center; margin-top: clamp(28px, 4vw, 48px); } .slider__setas--fora .seta { border: 1px solid var(--cor-texto); background: transparent; } .slider__setas--sobre { inset: 50% 16px auto 16px; transform: translateY(-50%); justify-content: space-between; pointer-events: none; } .slider__setas--sobre .seta { pointer-events: auto; width: 50px; height: 50px; } /* ---------- colunas com ícones ---------- */ .icones { padding-block: var(--sec); text-align: center; } .icones__titulo { margin-bottom: clamp(44px, 6vw, 92px); } .icones__intro { margin: -2em auto 3em; max-width: 48ch; } .icones__lista { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; max-width: 1120px; } .icones__lista .ic { width: 54px; height: 54px; margin: 0 auto 24px; stroke-width: 1.05; } .icones__lista h3 { font-family: var(--fonte-texto); font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .8em; } .icones__lista p { font-size: .94rem; max-width: 23ch; margin-inline: auto; } .icones--caixa .icones__corpo { background: var(--cor-escuro); color: var(--cor-escuro-texto); padding: clamp(60px, 8vw, 128px) clamp(24px, 5vw, 80px); } .icones--caixa .icones__titulo { font-size: var(--t-titulo-m); } /* ---------- unidades ---------- */ .unidades { padding-block: var(--sec); } .unidades__cabeca { text-align: center; margin: 0 auto clamp(40px, 5.5vw, 84px); max-width: 46rem; } .unidade__info h3 { font-size: var(--t-titulo-m); line-height: 1.04; margin-bottom: .3em; letter-spacing: calc(var(--tracking-titulos-em) * 1.25); font-weight: var(--peso-titulos); } .unidade__tipo { font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.6em; } .unidade__info p { font-size: .98rem; } .unidade__ficha { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; } .unidade__ficha li { display: flex; align-items: center; gap: 14px; font-size: .94rem; } .unidade__ficha .ic { width: 26px; height: 26px; stroke-width: 1.25; } .unidade__desde { font-family: var(--fonte-titulos); font-size: calc(1.55rem * var(--escala-titulos)); font-weight: var(--peso-titulos); margin: 1.3em 0 0; } .unidade__num { font-size: .78rem; letter-spacing: .2em; color: var(--cor-texto-suave); margin-bottom: 1.4em; } .unidade__nota { font-size: .9rem; color: var(--cor-texto-suave); } .slider--unidades .slider__pista { gap: 0; } .slider--unidades .unidade { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: clamp(32px, 6.5vw, 112px); align-items: center; padding-inline: 2px; } .slider--unidades .unidade__media img, .unidade__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .unidades--lista .unidade { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 120px); align-items: start; padding-block: clamp(48px, 6vw, 100px); scroll-margin-top: 100px; } .unidades--lista .unidade + .unidade { border-top: 1px solid var(--cor-borda); } .slider--foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cor-superficie); } .unidades--lista .unidade__info { max-width: 32rem; padding-top: 8px; } .unidades--lista .unidade--sem-foto { grid-template-columns: minmax(0, 1fr); } .unidades--lista .unidade--sem-foto .unidade__info { max-width: 46rem; } .slider--unidades .unidade--sem-foto { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .slider--unidades .unidade--sem-foto .unidade__info { max-width: 36rem; } .slider--unidades .unidade--sem-foto .unidade__ficha, .slider--unidades .unidade--sem-foto .acoes { justify-content: center; } .precos-mini { width: 100%; border-collapse: collapse; margin: 26px 0 0; font-size: .94rem; font-variant-numeric: tabular-nums; } .precos-mini caption { text-align: left; font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; } .precos-mini td { white-space: nowrap; } .precos-mini th, .precos-mini td { padding: 11px 6px; border-bottom: 1px solid var(--cor-borda); text-align: right; font-weight: 400; } .precos-mini th[scope="row"] { text-align: left; font-weight: 500; padding-left: 0; } .precos-mini thead th { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-suave); } /* ---------- secção na cor de acento, a mais emocional da página ---------- */ .acento { background: var(--cor-area-acento); color: var(--cor-escuro-texto); padding-block: clamp(96px, 12vw, 190px); text-align: center; overflow: hidden; margin-block: calc(var(--sec) * .6); } .acento__emblema { width: 82px; height: 82px; border-radius: 50%; background: var(--papel); display: grid; place-items: center; margin: 0 auto 30px; } .acento__emblema img { width: 46px; height: auto; } .acento__titulo { font-size: calc(clamp(3rem, 1.4rem + 6vw, 8.4rem) * var(--escala-titulos)); line-height: .97; letter-spacing: calc(var(--tracking-titulos-em) * 25 / 12); max-width: 13ch; margin: 0 auto; } .acento__linha { font-size: .76rem; margin-inline: auto; letter-spacing: .34em; line-height: 2; text-transform: uppercase; max-width: 48ch; margin: 32px auto 0; opacity: .92; } .acento__fotos { display: flex; justify-content: center; align-items: flex-start; margin-top: clamp(60px, 8vw, 116px); } .acento__foto { width: clamp(170px, 21vw, 320px); aspect-ratio: 4 / 5; overflow: hidden; flex: none; } .acento__foto img { width: 100%; height: 100%; object-fit: cover; } .acento__foto:nth-child(1) { rotate: -6deg; translate: 0 34px; } .acento__foto:nth-child(2) { rotate: 2.5deg; z-index: 1; } .acento__foto:nth-child(3) { rotate: 7deg; translate: 0 46px; } .acento__foto + .acento__foto { margin-left: calc(-1 * clamp(10px, 1.6vw, 26px)); } .acento__itens { list-style: none; padding: 0; margin: clamp(80px, 10vw, 140px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; max-width: 1040px; } .acento__itens .ic { width: 46px; height: 46px; margin: 0 auto 18px; stroke-width: 1.1; } .acento__itens h3 { font-family: var(--fonte-texto); font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .7em; } .acento__itens p { font-size: .94rem; max-width: 26ch; margin-inline: auto; opacity: .9; } .acento .rotulo { opacity: .85; } /* ---------- região ---------- */ .regiao { padding-block: var(--sec); } .regiao__grelha { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 7vw, 120px); align-items: center; } .regiao__texto { max-width: 34rem; } .regiao__dist { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 28px clamp(16px, 2.4vw, 32px); margin: 2.4em 0 0; } .regiao__dist dt { font-family: var(--fonte-titulos); font-weight: var(--peso-titulos); font-size: calc(clamp(2rem, 1.4rem + 2.2vw, 3.6rem) * var(--escala-titulos)); white-space: nowrap; line-height: 1; letter-spacing: calc(var(--tracking-titulos-em) * 5 / 3); } .regiao__dist dd { margin: 8px 0 0; font-size: .9rem; max-width: 22ch; } .regiao__mapa { margin: 0; color: var(--cor-texto); } .regiao__mapa svg { width: 100%; height: auto; overflow: visible; } .regiao__mapa text { font-family: var(--fonte-titulos); font-size: calc(19px * var(--escala-titulos)); font-weight: var(--peso-titulos-2); } .regiao__mapa .mapa__km { font-family: var(--fonte-texto); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .mapa__rosa text { font-family: var(--fonte-texto); font-size: 13px; font-weight: 600; } .mapa__serra { opacity: .8; } .regiao__mapa figcaption { font-size: .82rem; color: var(--cor-texto-suave); text-align: right; margin-top: 8px; } .js .regiao__mapa .mapa__rota { stroke-dashoffset: 400; transition: stroke-dashoffset 2.4s var(--suave) .3s; } .js .regiao__mapa.rv--in .mapa__rota { stroke-dashoffset: 0; } /* ---------- cartões altos ---------- */ .altos { padding-block: var(--sec); } .altos__cabeca { text-align: center; margin-bottom: clamp(40px, 5vw, 76px); } .altos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); } .alto { position: relative; aspect-ratio: 3 / 4.3; overflow: hidden; background: var(--cor-superficie); } .alto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); } .alto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 34%, rgb(var(--cor-veu-forte-rgb) / .5) 70%, rgb(var(--cor-veu-forte-rgb) / .78)); pointer-events: none; } .alto__ligacao { position: absolute; inset: 0; z-index: 2; color: #fff; text-decoration: none; } .alto__texto { position: absolute; left: 30px; right: 30px; bottom: 28px; z-index: 2; color: #fff; } .alto__texto h3 { font-size: calc(clamp(1.9rem, 1.2rem + 1.7vw, 2.9rem) * var(--escala-titulos)); font-weight: var(--peso-titulos); margin: 0; letter-spacing: calc(var(--tracking-titulos-em) * 1.25); text-shadow: 0 1px 18px rgb(0 0 0 / .45), 0 0 2px rgb(0 0 0 / .35); } .js .alto.rv--in:hover .alto__img { transform: scale(1.045); transition-duration: 1.2s; } .altos__pe { text-align: center; max-width: 40rem; margin: clamp(36px, 5vw, 64px) auto 0; } .altos__pe .acoes { justify-content: center; } /* ---------- faixa com palavra ---------- */ .faixa { position: relative; height: clamp(300px, 42vw, 620px); overflow: hidden; display: grid; place-items: center; color: #fff; margin-block: var(--sec); isolation: isolate; } .faixa__media { position: absolute; inset: -8% 0; z-index: -2; will-change: transform; } .faixa__img { width: 100%; height: 100%; object-fit: cover; } .faixa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(var(--cor-veu-rgb) / .2); } .faixa__palavra { font-family: var(--fonte-texto); font-weight: 500; font-size: clamp(1.9rem, .9rem + 5vw, 6.6rem); letter-spacing: .52em; padding-left: .52em; text-transform: uppercase; margin: 0; max-width: none; text-align: center; line-height: 1; text-shadow: 0 2px 30px rgb(0 0 0 / .2); } /* ---------- fecho das páginas, como no modelo: título grande, fotografia de postal por baixo e o botão a fechar ---------- */ .reservar { padding-block: var(--sec); text-align: center; } .reservar__caixa { display: flex; flex-direction: column; align-items: center; } .reservar .rotulo { margin-bottom: 1.2em; } .reservar__titulo { font-size: calc(clamp(2.9rem, 1.5rem + 4.6vw, 6.4rem) * var(--escala-titulos)); line-height: 1; letter-spacing: calc(var(--tracking-titulos-em) * 5 / 3); margin: 0; } .reservar__foto { width: clamp(280px, 38vw, 680px); aspect-ratio: 3 / 2; overflow: hidden; margin-top: clamp(28px, 3.4vw, 52px); } .reservar__foto img { width: 100%; height: 100%; object-fit: cover; } .reservar__texto { max-width: 40ch; margin: clamp(28px, 3.2vw, 44px) auto 0; color: var(--cor-texto-suave); } .reservar__acao { margin-top: clamp(24px, 2.8vw, 36px); } .botao--grande { min-height: 72px; padding: 0 3.1em 0 3.6em; gap: 18px; font-size: 1.12rem; letter-spacing: .02em; } .botoes-contorno .botao--grande, .botao--grande { background: var(--cor-texto); color: var(--papel); border-color: var(--cor-texto); } .botoes-contorno .botao--grande:hover, .botao--grande:hover { background: transparent; color: var(--cor-texto); border-color: var(--cor-texto); } .botao--grande .ic { width: 22px; height: 22px; transition: transform .35s var(--suave); } .botao--grande:hover .ic { transform: translateX(5px); } .reservar__tel { margin: 22px auto 0; font-size: .92rem; } /* ---------- faixa da rede social ---------- */ .redes-faixa { padding-block: var(--sec) 0; } .redes-faixa__fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .redes-faixa__fotos li { overflow: hidden; aspect-ratio: 1; } .redes-faixa__fotos img { width: 100%; height: 100%; object-fit: cover; } .redes-faixa__pe { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); } .redes-faixa__pe h2 { margin: 0; } .redes-faixa__pe .botao .ic { width: 18px; height: 18px; } /* ---------- serra desenhada e rodapé ---------- */ .serra { position: relative; height: clamp(130px, 17vw, 250px); overflow: hidden; color: var(--cor-texto); margin-top: clamp(48px, 7vw, 96px); } .serra__desenho { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 112%; } .serra__l1 { stroke-width: 1.1; opacity: .45; } .serra__l2 { stroke-width: 1.2; opacity: .72; } .serra__l3, .serra__chao { stroke-width: 1.3; } .serra__arvores { stroke-width: 1.15; } .serra__h { stroke-width: 1; opacity: .45; } .rodape--casa { position: relative; background: var(--cor-escuro); color: var(--cor-escuro-texto); padding-block: clamp(70px, 8vw, 112px) 28px; } /* na pré-visualização, o espaço para a faixa fica dentro do rodapé (sem a tira clara por baixo dele) */ body.modo-demo { padding-bottom: 0; } body.modo-demo .rodape--casa { padding-bottom: calc(28px + 84px); } .rodape__topo { position: absolute; top: 0; right: var(--margem); transform: translateY(-50%); width: 62px; height: 62px; border-radius: 50%; background: var(--cor-escuro); color: var(--cor-escuro-texto); display: grid; place-items: center; text-decoration: none; transition: transform .3s ease; } .rodape__topo:hover { transform: translateY(calc(-50% - 4px)); text-decoration: none; } .rodape__topo .ic { width: 22px; height: 22px; } .rodape--casa .rodape__grelha { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px clamp(32px, 5vw, 88px); } .rodape--casa h2 { font-family: var(--fonte-texto); font-size: .76rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .72; margin: 0 0 24px; } .rodape__nav ul { gap: 4px; } .rodape__nav a { font-family: var(--fonte-titulos); font-weight: var(--peso-titulos); font-size: calc(clamp(1.4rem, 1.1rem + .8vw, 1.85rem) * var(--escala-titulos)); line-height: 1.25; } .rodape__nav a[aria-current="page"] { opacity: .65; } .rodape__casa p { font-size: .95rem; max-width: 36ch; } .rodape__registo { font-size: .82rem !important; opacity: .75; margin-top: 1.6em; } .rodape__contactos li { font-size: .95rem; } .rodape__contactos .texto-suave { color: inherit; opacity: .7; } .rodape__medalhao { margin-top: 30px; width: 76px; height: 76px; border-radius: 50%; background: var(--papel); display: grid; place-items: center; } .rodape__medalhao img { width: 44px; height: auto; } .rodape__medalhao--logo { width: auto; height: auto; background: none; border-radius: 0; display: flex; justify-content: flex-start; } .rodape__medalhao--logo img { width: 88px; height: auto; display: block; margin: 0; } .acento__emblema--logo { width: auto; height: auto; background: none; border-radius: 0; display: flex; justify-content: center; } .acento__emblema--logo img { width: 104px; height: auto; display: block; } .medalhao--circulo img { border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); } .rodape--casa .rodape__base { opacity: .75; } /* ---------- páginas interiores ---------- */ .pagina-interior .s-topo-pagina { padding: clamp(30px, 4.5vw, 64px) 0 0; } .s-topo-pagina__pre { display: none; } .pagina-interior .s-topo-pagina h1 { font-size: calc(clamp(3.4rem, 1.5rem + 6.8vw, 9.2rem) * var(--escala-titulos)); font-weight: var(--peso-titulos); line-height: .94; letter-spacing: calc(var(--tracking-titulos-em) * 7 / 3); } .topo-int { padding-block: clamp(26px, 3.5vw, 52px) var(--sec); } .pagina-interior .s-topo-pagina + .topo-int { padding-top: clamp(26px, 3.5vw, 52px); } .topo-int__ancoras { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px clamp(22px, 3vw, 44px); margin-bottom: clamp(30px, 4vw, 56px); padding-bottom: 18px; border-bottom: 1px solid var(--cor-borda); } .topo-int__ancoras a { font-size: .98rem; font-weight: 500; color: var(--cor-texto-suave); text-decoration: none; padding-block: 6px; } .topo-int__ancoras a:hover { color: var(--cor-texto); } .topo-int__grelha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: end; } .topo-int__texto { justify-self: start; max-width: 29rem; margin: 0; font-family: var(--fonte-titulos); font-weight: var(--peso-titulos); font-size: calc(clamp(1.22rem, 1.02rem + .55vw, 1.6rem) * var(--escala-titulos)); line-height: 1.3; color: var(--cor-texto); text-wrap: pretty; } .topo-int__texto::before { content: ""; display: block; width: 44px; height: 1px; margin-bottom: 20px; background: currentColor; opacity: .55; } .topo-int__media { grid-column: 2; overflow: hidden; } .topo-int__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--pos, 50% 50%); } /* título e texto ao centro */ .centro { padding-block: var(--sec); text-align: center; } .centro__titulo { font-size: var(--t-titulo-m); } .centro p { margin-inline: auto; max-width: 46ch; font-size: .96rem; } .centro__desenho { width: 220px; height: auto; margin: 38px auto 0; color: var(--cor-texto); opacity: .78; } /* linhas de duas colunas */ .colunas { padding-block: var(--sec); } .colunas__cabeca { margin-bottom: clamp(32px, 4.5vw, 64px); } .colunas__cabeca h2 { font-size: var(--t-titulo-m); } .colunas__cabeca p { color: var(--cor-texto-suave); } .colunas__linha { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px clamp(32px, 6vw, 96px); padding-block: clamp(26px, 3.5vw, 48px); border-top: 1px solid var(--cor-borda); scroll-margin-top: 100px; } .colunas__linha h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 2rem); margin: 0; } .colunas__corpo p { font-size: 1rem; } .colunas__corpo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .colunas__corpo li { font-size: 1rem; } .colunas__foto { margin: 0 0 18px; overflow: hidden; background: var(--cor-superficie); } .colunas__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .colunas__creditos { margin-top: clamp(28px, 4vw, 48px); padding-top: 18px; border-top: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-size: .8rem; } .colunas__creditos p { font-size: .8rem; margin: 0 0 6px; } .colunas__creditos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .colunas__creditos a { color: inherit; } /* história */ .historia { padding-block: clamp(32px, 5vw, 80px) var(--sec); } .hb { margin-block: clamp(80px, 11vw, 170px); } .hb:first-of-type { margin-top: 0; } .hb__frase { font-family: var(--fonte-titulos); font-weight: var(--peso-titulos); font-size: calc(clamp(1.95rem, 1.2rem + 2.1vw, 3.15rem) * var(--escala-titulos)); line-height: 1.07; letter-spacing: calc(var(--tracking-titulos-em) * 1.25); margin: 0 0 .75em; text-wrap: balance; } .hb p { font-size: .98rem; max-width: 46ch; } .hb--frase { text-align: center; max-width: 56rem; margin-inline: auto; } .hb--frase .hb__frase { font-size: var(--t-titulo); } .hb--frase p { margin-inline: auto; max-width: 54ch; } .hb--par, .hb--colagem { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 7vw, 120px); align-items: center; } .hb--img-direita { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .hb--img-direita .hb__media { order: 2; } .hb__media { overflow: hidden; } .hb__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .hb__colagem { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; padding-bottom: clamp(36px, 5vw, 72px); } .hb__c1, .hb__c2 { overflow: hidden; grid-row: 1; } .hb__c1 { grid-column: 1 / span 9; aspect-ratio: 4 / 3; } .hb__c2 { grid-column: 8 / span 5; aspect-ratio: 2 / 3; z-index: 1; border: clamp(5px, .6vw, 9px) solid var(--papel); translate: 0 clamp(36px, 5vw, 72px); } .hb__c1 img, .hb__c2 img { width: 100%; height: 100%; object-fit: cover; } .hb--citacao { text-align: center; max-width: 54rem; margin-inline: auto; } .hb--citacao blockquote { margin: 0; } .hb--citacao blockquote p { font-family: var(--fonte-titulos); font-weight: var(--peso-titulos); font-size: calc(clamp(1.55rem, 1.05rem + 1.7vw, 2.6rem) * var(--escala-titulos)); line-height: 1.24; max-width: none; margin: 0; } .hb--citacao blockquote p::before { content: "«"; } .hb--citacao blockquote p::after { content: "»"; } .hb--citacao figcaption { margin-top: 26px; font-size: .76rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; } /* galeria editorial */ .galeria-ed { padding-block: clamp(20px, 3vw, 48px) var(--sec); } .galeria-ed__lista { --alt: clamp(170px, 19vw, 290px); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(26px, 3vw, 44px) clamp(12px, 1.5vw, 22px); } .galeria-ed__lista::after { content: ""; flex: 999999 1 0; } .galeria-ed__lista--js::after { display: none; } .galeria-ed__item { flex: calc(var(--r) * 1000) 1 calc(var(--r) * var(--alt)); min-width: 0; } .galeria-ed__item figure { margin: 0; } .galeria-ed__botao { display: block; width: 100%; padding: 0; border: 0; background: var(--cor-superficie); cursor: zoom-in; overflow: hidden; } .galeria-ed__botao img { width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; transition: transform 1.2s var(--suave); } .galeria-ed__botao:hover img { transform: scale(1.03); } .galeria-ed figcaption { font-family: var(--fonte-titulos); font-size: .98rem; line-height: 1.32; margin-top: 12px; max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* pedido de reserva */ .reserva { padding-block: clamp(36px, 5vw, 80px) var(--sec); scroll-margin-top: 90px; } .reserva__grelha { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 6vw, 104px); align-items: start; } .reserva__intro p { max-width: 38ch; } .reserva__tel { margin-top: 1.6em; } .reserva__cartao { background: var(--cor-superficie); padding: clamp(24px, 4vw, 52px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; } .campo { display: flex; flex-direction: column; gap: 9px; min-width: 0; margin: 0; } .campo--largo { grid-column: 1 / -1; } .campo > label, .campo legend { font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .campo input:not([type="checkbox"]), .campo select, .campo textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--cor-texto) 38%, transparent); border-radius: 0; background: var(--papel); color: var(--cor-texto); font-size: 1rem; line-height: 1.3; } .campo textarea { resize: vertical; min-height: 96px; } .campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--cor-texto); outline-offset: 2px; } .campo--extras { border: 0; padding: 0; flex-direction: row; flex-wrap: wrap; gap: 12px 32px; } .campo--extras legend { width: 100%; padding: 0; margin-bottom: 4px; float: left; } .opcao { display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; min-height: 44px; cursor: pointer; clear: left; } .opcao input { width: 20px; height: 20px; accent-color: var(--cor-texto); margin: 0; } .opcional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cor-texto-suave); } .reserva__resumo { border-top: 1px solid var(--cor-borda); padding-top: 20px; } .reserva__frase { font-family: var(--fonte-titulos); font-size: 1.4rem; line-height: 1.3; margin: 0; max-width: none; } .reserva__avisos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; } .reserva__avisos li { font-size: .92rem; padding-left: 22px; position: relative; } .reserva__avisos li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; } .reserva__cartao .acoes { margin-top: 4px; } .reserva__nota { font-size: .85rem; color: var(--cor-texto-suave); margin: 0; max-width: 58ch; } /* datas ocupadas no pedido de reserva (só nas casas com calendários ligados) */ .disponibilidade { border-top: 1px solid var(--cor-borda); padding-top: 18px; } .disponibilidade[hidden], .disponibilidade__aviso[hidden] { display: none; } .disponibilidade__cabeca { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .disponibilidade__seta { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--cor-borda); border-radius: 0; background: var(--papel); color: var(--cor-texto); cursor: pointer; } .disponibilidade__seta svg { width: 18px; height: 18px; } .disponibilidade__seta:disabled { opacity: .35; cursor: default; } .disponibilidade__seta:focus-visible { outline: 2px solid var(--cor-texto); outline-offset: 2px; } .disponibilidade__meses { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 36px; } .disponibilidade__nome { font-family: var(--fonte-titulos); font-size: 1.12rem; margin: 0 0 10px; max-width: none; } .disponibilidade__grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; } .disponibilidade__semana { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--cor-texto-suave); padding-bottom: 4px; } .disponibilidade__dia { min-height: 40px; padding: 0; border: 0; border-radius: 0; background: var(--papel); color: var(--cor-texto); font: inherit; font-size: .95rem; font-variant-numeric: tabular-nums; cursor: pointer; } .disponibilidade__dia:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--cor-texto); } .disponibilidade__dia:focus-visible { outline: 2px solid var(--cor-texto); outline-offset: -2px; } .disponibilidade__dia:disabled { background: transparent; color: color-mix(in srgb, var(--cor-texto) 32%, transparent); cursor: default; } /* ocupado: riscado e às riscas, e não se escolhe (o botão vem desligado) */ .disponibilidade__dia--ocupado, .disponibilidade__dia--ocupado:disabled, .disponibilidade__marca { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cor-texto) 16%, var(--papel)) 0 3px, var(--papel) 3px 7px); } .disponibilidade__dia--ocupado, .disponibilidade__dia--ocupado:disabled { color: var(--cor-texto-suave); text-decoration: line-through; cursor: not-allowed; } /* a primeira noite ocupada depois da entrada serve de dia de saída: meio às riscas, sem risco, e escolhe-se */ .disponibilidade__dia--so-saida, .disponibilidade__dia--so-saida:disabled { background: linear-gradient(135deg, var(--papel) 50%, transparent 50%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--cor-texto) 16%, var(--papel)) 0 3px, var(--papel) 3px 7px); color: var(--cor-texto); text-decoration: none; cursor: pointer; } .disponibilidade__dia--entre { background: color-mix(in srgb, var(--cor-texto) 14%, var(--papel)); } .disponibilidade__dia--entre.disponibilidade__dia--ocupado { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cor-texto) 34%, var(--papel)) 0 3px, color-mix(in srgb, var(--cor-texto) 14%, var(--papel)) 3px 7px); } .disponibilidade__dia--escolhido, .disponibilidade__dia--escolhido:disabled { background: var(--cor-texto); color: var(--papel); text-decoration: none; } /* com noites ocupadas no pedido, os botões de enviar e copiar ficam desligados */ .reserva__cartao .botao--desligado, .reserva__cartao .botao:disabled { opacity: .4; pointer-events: none; cursor: default; } .disponibilidade__legenda { display: flex; align-items: center; gap: 10px; font-size: .85rem; margin: 16px 0 0; max-width: none; } .disponibilidade__marca { width: 18px; height: 18px; flex: none; border: 1px solid var(--cor-borda); } .disponibilidade__nota { font-size: .85rem; color: var(--cor-texto-suave); margin: 6px 0 0; max-width: 58ch; } .disponibilidade__aviso { font-size: .92rem; margin: 0; } /* as definições da folha de preços (1.26): o aviso em cima do pedido, e o pedido fechado, só com o aviso dele */ .reserva__aviso-folha, .reserva__fechado { margin: 0; padding: 14px 18px; border-left: 3px solid var(--cor-texto); background: var(--papel); font-size: 1rem; line-height: 1.5; } .reserva__aviso-folha[hidden], .reserva__fechado[hidden] { display: none; } .reserva__cartao--fechado > :not([data-aviso-folha]):not([data-sem-pedidos]) { display: none; } /* preços */ /* folha de preços da casa (opcional, 1.22): enquanto a folha não chega (até 2,5 s), os preços esperam escondidos, sem mexer no lugar; a animação mostra-os aos 3 s mesmo que o código da folha falhe */ .precos-folha [data-preco], .precos-folha [data-desde], .precos-folha [data-epoca-datas] { visibility: hidden; animation: precos-folha-mostrar 0s 3s forwards; } @keyframes precos-folha-mostrar { to { visibility: visible; } } /* com mais épocas (as que o dono acrescenta na folha), as tabelas deslizam para o lado em vez de saírem da página */ .precos__grupo, .precos-rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; } .precos__minimo { display: block; margin-top: 4px; font-size: .86rem; color: var(--cor-texto-suave); } .precos { padding-block: var(--sec); scroll-margin-top: 90px; } .precos__cabeca { margin-bottom: clamp(30px, 4vw, 56px); } .precos__cabeca p { color: var(--cor-texto-suave); } .precos__grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); } .tabela-precos { width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; } .tabela-precos caption { text-align: left; margin-bottom: 14px; } .tabela-precos__titulo { display: block; font-family: var(--fonte-titulos); font-size: calc(clamp(1.6rem, 1.2rem + 1vw, 2.2rem) * var(--escala-titulos)); font-weight: var(--peso-titulos); } .tabela-precos__nota { display: block; font-size: .9rem; color: var(--cor-texto-suave); margin-top: 4px; } .tabela-precos td { white-space: nowrap; } .tabela-precos th, .tabela-precos td { padding: 14px 6px; border-bottom: 1px solid var(--cor-borda); text-align: right; font-weight: 400; } .tabela-precos th[scope="row"] { text-align: left; font-weight: 500; padding-left: 0; } .tabela-precos thead th { font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cor-texto-suave); } .precos__epocas { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 24px 40px; margin: clamp(40px, 5vw, 64px) 0 28px; } .precos__epocas dt { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .precos__epocas dd { margin: 8px 0 0; font-size: .96rem; } .precos__nota { font-size: .92rem; color: var(--cor-texto-suave); max-width: 60ch; margin-bottom: .6em; } /* contactos */ .contactos-casa { padding-block: clamp(36px, 5vw, 80px) var(--sec); } .contactos-casa__grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: start; } .contactos-casa__lista { display: grid; gap: 0; margin: 28px 0 0; } .contactos-casa__lista div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; border-top: 1px solid var(--cor-borda); padding-block: 16px; } .contactos-casa__lista dt { font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding-top: .2em; } .contactos-casa__lista dd { margin: 0; overflow-wrap: anywhere; } .contactos-casa__mapa .mapa { border-radius: 0; aspect-ratio: 1 / 1; } .mapa__fachada .botao svg { width: 1.1em; height: 1.1em; } /* casos que o Solar não tinha: um só grupo de preços, região sem esquema, emails compridos no menu e no rodapé */ .precos__grupos--um { grid-template-columns: minmax(0, 1fr); max-width: 46rem; } .regiao--sem-mapa .regiao__grelha { grid-template-columns: minmax(0, 1fr); } .regiao--sem-mapa .regiao__texto { max-width: 44rem; } .regiao__legenda { font-size: .82rem; color: var(--cor-texto-suave); margin-top: 1.6em; } .nav__lado, .rodape__contactos, .rodape__contactos li { min-width: 0; overflow-wrap: anywhere; } /* ---------- entrada das fotografias e dos blocos ---------- */ .js .rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--suave), transform 1s var(--suave); transition-delay: calc(var(--k, 0) * 90ms); } .js .rv.rv--in { opacity: 1; transform: none; } .js .rv--img { transform: none; } .js .rv--img img { transform: scale(1.12); transition: transform 1.8s var(--suave); } .js .rv--img.rv--in img { transform: none; } .js .acento__foto.rv { transform: translateY(60px); } .js .acento__foto.rv.rv--in { transform: none; } /* ---------- telemóvel e tablet ---------- */ @media (max-width: 1100px) { .nav__grelha { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .nav__foto { display: none; } .icones__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } } @media (max-width: 860px) { :root { --sec: clamp(56px, 13vw, 88px); } .cab__barra { grid-template-columns: minmax(0, 1fr) auto; min-height: 68px; } .cab .marca { grid-column: 1; justify-self: start; min-width: 0; } .cab .marca { max-width: 100%; } .cab .marca__nome { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; line-height: 1.08; } .marca__logo { width: 38px; height: 38px; } .marca--so-logo .marca__logo { width: auto; max-width: 180px; } .cab .marca--logo { gap: 10px; } .cab .menu-botao { grid-column: 2; justify-self: end; padding: 0; } .cab__cta { display: none; } .menu-botao__txt { display: none; } .cab .nav { padding-top: 92px; } .nav__grelha { grid-template-columns: 1fr; align-items: start; min-height: 0; gap: 36px; } .cab .nav__lista a { font-size: calc(clamp(2rem, 1.4rem + 3vw, 2.6rem) * var(--escala-titulos)); } .cab .nav__lado .nav__reserva { display: inline-flex !important; margin-bottom: 28px; padding: 14px 28px; border-radius: 999px; background: var(--cor-texto); color: var(--papel) !important; font-weight: 500; text-decoration: none; } .capa__texto { padding-top: 110px; } .capa__acoes { display: flex; } .lado__grelha, .lado--img-direita .lado__grelha, .lado--retrato .lado__grelha, .lado--retrato.lado--img-direita .lado__grelha { grid-template-columns: 1fr; gap: 36px; } .lado__media { order: 2; } .lado--img-direita .lado__texto { justify-self: start; } .lado--retrato .lado__media { max-width: 520px; } .dividido__grelha { grid-template-columns: 1fr; min-height: 0; } .dividido--inverso .dividido__painel { order: 0; } .dividido__fotos { min-height: 0; aspect-ratio: 4 / 3; } .dividido .contentor--largo { width: 100%; } .icones--caixa .contentor--largo { width: 100%; } .slider__setas { right: 16px; bottom: 16px; } .seta { width: 50px; height: 50px; } .slider--unidades .unidade, .unidades--lista .unidade { grid-template-columns: 1fr; gap: 28px; } .acento__fotos { margin-top: 56px; } .acento__foto { width: 31vw; } .acento__foto + .acento__foto { margin-left: -4vw; } .acento__foto:nth-child(1) { translate: 0 18px; } .acento__foto:nth-child(3) { translate: 0 24px; } .acento__itens { gap: 28px; margin-top: 96px; } .regiao__grelha { grid-template-columns: 1fr; } .regiao__mapa text { font-size: calc(23px * var(--escala-titulos)); } .regiao__mapa .mapa__km { display: none; } .mapa__rosa text { font-size: 18px; } .reservar__foto { width: min(84vw, 520px); } .redes-faixa__fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .redes-faixa__fotos li:nth-child(n+4) { display: none; } .rodape--casa .rodape__grelha { grid-template-columns: 1fr; gap: 40px; } .topo-int__grelha { grid-template-columns: 1fr; gap: 24px; } .topo-int__media { grid-column: auto; grid-row: 1; } .topo-int__texto { justify-self: start; max-width: 32ch; } .topo-int__ancoras { gap: 4px 22px; padding-bottom: 14px; } .colunas__linha { grid-template-columns: 1fr; gap: 12px; } .hb--par, .hb--colagem, .hb--img-direita { grid-template-columns: 1fr; gap: 28px; } .hb--img-direita .hb__media { order: 0; } .galeria-ed__lista { --alt: 30vw; row-gap: 26px; column-gap: 10px; } .galeria-ed figcaption { font-size: .86rem; margin-top: 8px; } .reserva__grelha { grid-template-columns: 1fr; } .precos__grupos, .precos__epocas { grid-template-columns: 1fr; } .contactos-casa__grelha { grid-template-columns: 1fr; } .contactos-casa__lista div { grid-template-columns: 96px minmax(0, 1fr); } } /* cartões altos em três colunas até aos 700 px (no tablet ao alto ficavam empilhados, com 860 px cada) */ @media (max-width: 860px) and (min-width: 700px) { .altos__lista { gap: 12px; } .alto__texto { left: 18px; right: 18px; bottom: 20px; } } @media (max-width: 699px) { .altos__lista { grid-template-columns: 1fr; } .alto { aspect-ratio: 4 / 4.6; } .acento__itens { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 520px) { .icones__lista { grid-template-columns: 1fr; gap: 48px; } .icones--caixa .icones__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; } .faixa__palavra { letter-spacing: .3em; padding-left: .3em; font-size: 8.6vw; } .reserva__cartao { grid-template-columns: 1fr 1fr; gap: 18px 14px; padding: 22px 18px; } .reservar__acao, .botao--grande { width: 100%; } .botao--grande { padding: 0 1.6em; } .slider__setas--sobre { inset: auto 12px 12px auto; transform: none; justify-content: flex-end; gap: 10px; } } @media (prefers-reduced-motion: reduce) { .capa__img { animation: none; transform: none; } .js .rv, .js .acento__foto.rv { opacity: 1 !important; transform: none !important; } .js .rv--img img { transform: none !important; } .cab .nav__lista a, .nav__foto img { transform: none !important; } [data-parallax] { transform: none !important; } } /* ---------- seletor de língua (1.34.0): no menu, por cima do nome da casa, só nos sites com traduções ---------- */ .nav__linguas { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 0 2.2em; padding: 0; } .cab .nav__lado .nav__linguas a { display: inline-block; padding: 8px 0; font-size: .8rem; font-weight: 600; letter-spacing: .28em; color: var(--cor-texto-suave); text-decoration: none; } .cab .nav__lado .nav__linguas a:hover { color: var(--cor-texto); text-decoration: none; } .cab .nav__lado .nav__linguas a[aria-current="true"] { color: var(--cor-texto); text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 1px; } /* design/extra.css do negócio */ /* Casa dos Amigos: a capa é uma sala de paredes brancas; véu mais forte no topo e ao centro para o título, o subtítulo e o cabeçalho lerem bem */ .capa::after { background: radial-gradient(ellipse 70% 42% at 50% 54%, rgb(var(--cor-veu-rgb) / .5), transparent 72%), linear-gradient(180deg, rgb(var(--cor-veu-rgb) / .6) 0%, rgb(var(--cor-veu-rgb) / .24) 26%, rgb(var(--cor-veu-rgb) / .3) 58%, rgb(var(--cor-veu-rgb) / .6) 100%); }