/* Estados de hover que o export estatico do Framer nao trouxe. O Framer aplicava-os por JS ao trocar de variante; aqui vivem em CSS. `--ec-mola` e' a mola medida no original (amortecimento 0.80, omega 22.8 rad/s): pico de +1.5% aos ~225ms e assente aos 450ms. O cubic-bezier vem antes como recurso para browsers sem linear(). Medido no original, propriedade a propriedade: o que anima e' a opacidade, o transform, a cor de fundo e o raio dos cantos. A cor do texto, o `left` da etiqueta e a largura do sublinhado mudam de um frame para o outro -- e' assim no original e e' assim que fica aqui. */ :root{ --ec-mola:cubic-bezier(.2,.9,.25,1); --ec-mola:linear(0.0000, 0.0487, 0.1617, 0.3019, 0.4453, 0.5777, 0.6920, 0.7856, 0.8589, 0.9139, 0.9534, 0.9804, 0.9978, 1.0080, 1.0132, 1.0151, 1.0148, 1.0133, 1.0113, 1.0091, 1.0070, 1.0052, 1.0037, 1.0025, 1.0015, 1.0009, 1.0004, 1.0001, 0.9999, 0.9998, 1.0000); } @media (hover:hover){ /* Cartoes de servico: o fundo passa a azul 10% e os cantos a 24px. O !important e' preciso porque o Framer deixou estes valores em style inline. */ a[data-ec-hov] .framer-taooI{ transition:background-color .45s var(--ec-mola), border-top-left-radius .45s var(--ec-mola), border-top-right-radius .45s var(--ec-mola), border-bottom-left-radius .45s var(--ec-mola), border-bottom-right-radius .45s var(--ec-mola); } a[data-ec-hov]:hover .framer-taooI{ background-color:rgba(1,102,204,.1)!important; border-top-left-radius:24px!important; border-top-right-radius:24px!important; border-bottom-left-radius:24px!important; border-bottom-right-radius:24px!important; } /* Seta em circulo ("Ver detalhes", "Conheca a nossa equipa"): em repouso aponta para baixo-direita (45deg) e no hover endireita-se. */ [data-ec-hov] .framer-1dfghne-container, [data-ec-hov] .framer-bhxf0x-container{ transition:transform .45s var(--ec-mola); } [data-ec-hov]:hover .framer-1dfghne-container, [data-ec-hov]:hover .framer-bhxf0x-container{ transform:none!important; } /* Botoes: a etiqueta desliza 12px para a esquerda (salto, nao transicao) e a seta entra da esquerda a crescer e a aparecer. Em repouso a seta tem left:-largura, por isso translateX(100%) poe-na exactamente no lugar -- serve para as duas medidas (19 e 14px) sem numeros fixos. */ [data-ec-btn]:hover .framer-8h9rss, [data-ec-btn]:hover .framer-at41v6{left:-12px} [data-ec-btn] .framer-182ngj5-container, [data-ec-btn] .framer-1mwtrrb-container{ transition:opacity .45s var(--ec-mola),transform .45s var(--ec-mola); } [data-ec-btn]:hover .framer-182ngj5-container, [data-ec-btn]:hover .framer-1mwtrrb-container{ opacity:1!important; transform:translateX(100%) scale(1)!important; } /* O botao "Subscrever" escurece o azul. */ button[data-ec-btn]{transition:background-color .45s var(--ec-mola)} button[data-ec-btn]:hover{background-color:rgb(0,70,140)!important} /* Links de texto (menu e rodape): o texto escurece de #666 para #333 e, no rodape, o sublinhado aparece -- ja' com a largura toda, so' a opacidade e' que sobe. */ [data-ec-link]:hover p{color:rgb(51,51,51)!important} [data-ec-link] .framer-vwfopp, [data-ec-link] .framer-wo2z3y{ transition:opacity .45s var(--ec-mola); } [data-ec-link]:hover .framer-vwfopp, [data-ec-link]:hover .framer-wo2z3y{ width:100%!important; opacity:1!important; } } /* ---------------------------------------------------------------- toque --- Medido num telemovel emulado a 390px: todos os elementos interativos estavam com `touch-action: auto`, o que mantem o duplo-toque para ampliar e faz o browser adiar o clique cerca de 300ms. Num telefone parece que o botao nao respondeu, a pessoa toca outra vez, e o segundo toque cai ja na pagina seguinte -- era o "os botoes do menu nem sempre funcionam" e o "abre a pagina por baixo mas o menu continua em primeiro plano". `manipulation` mantem o scroll e o pinch-to-zoom; tira so' o duplo-toque. */ a, button, [role="button"], summary, label, input, select, textarea { touch-action: manipulation; } /* Alvos de toque no rodape: os links tinham 22px de altura, abaixo do minimo de 24px, com 12px de folga entre si. A area sensivel cresce para 44px com um pseudo-elemento centrado -- o desenho nao muda, o texto fica onde estava, e a area de cada link ainda nao toca na do vizinho. */ footer a.framer-bQ3qc{ position: relative; } footer a.framer-bQ3qc::after{ content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* ------------------------------------ descricoes dos servicos ------------- Medido antes: os 66 paragrafos da descricao partilhavam um unico estilo -- 20px, peso 400, entrelinha 24px (1.2) e margem inferior 0. Titulo de seccao, lista e prosa eram indistinguiveis e sem respiracao entre si, o que dava um muro cinzento que ninguem apetece ler. O papel de cada linha e' deduzido no build (data-ec-txt) sem alterar uma unica palavra. Aqui da-se-lhe forma, com os pesos de Kumbh Sans que a pagina ja' carrega (400/500/700) -- nenhum ficheiro novo. A entrelinha da prosa passa de 1.2 para 1.6: a medida ronda os 58 caracteres e a 1.2 as linhas colavam-se umas as outras. */ p[data-ec-txt]{ margin: 0; } p[data-ec-txt="prosa"]{ line-height: 1.6; margin-bottom: 1.05em; } /* Mais espaco por cima do que por baixo: o titulo pertence ao que vem a seguir, nao ao que ficou para tras. */ /* Sem font-size: uma primeira versao punha 1.15em e o titulo saia a 13.8px, MAIS PEQUENO que os 20px do corpo -- o em resolve contra o tamanho herdado do contentor (12px) e ao mesmo tempo substitui a regra do Framer. A hierarquia faz-se com o peso e com o espaco, que nao tem esse risco. */ p[data-ec-txt="titulo"]{ font-weight: 700; line-height: 1.35; letter-spacing: -.01em; margin: 2.1em 0 .55em; } p[data-ec-txt="titulo"]:first-child{ margin-top: 0; } p[data-ec-txt="lead"]{ font-weight: 500; line-height: 1.55; margin-bottom: .65em; } /* Itens juntos entre si e afastados do resto, com a marca em pendura para o texto alinhar na mesma vertical mesmo quando passa de uma linha. */ p[data-ec-txt="item"], p[data-ec-txt="item-marcado"]{ position: relative; line-height: 1.5; margin-bottom: .34em; padding-left: 1.4em; } /* Quem ja' traz marcador no texto (✔️, ✨) nao leva o nosso por cima. */ p[data-ec-txt="item-marcado"]{ padding-left: 0; } p[data-ec-txt="item"]::before{ content: ""; position: absolute; left: .35em; top: .62em; width: .38em; height: .38em; border-radius: 50%; background: var(--token-1244831b-1466-4997-9660-9d134d4b6c18, rgb(1, 102, 204)); opacity: .5; } p[data-ec-txt="item"] + p[data-ec-txt="prosa"], p[data-ec-txt="item"] + p[data-ec-txt="lead"], p[data-ec-txt="item-marcado"] + p[data-ec-txt="prosa"], p[data-ec-txt="item-marcado"] + p[data-ec-txt="lead"]{ margin-top: 1.15em; } /* ------------------------------------------------------------- fontes ----- O site carregava 6 ficheiros de fonte (115KB) em cada pagina. Dois deles nao serviam o desenho: - Inter, so' por causa do banner de cookies (ja' corrigido no site.js); - DM Sans, so' para esta linha de 10px do aviso de financiamento. Passam ambos a Kumbh Sans, que a pagina ja' carrega de qualquer maneira. */ a.framer-styles-preset-1lt162r, .framer-styles-preset-1lt162r, .framer-eh6lqc, .framer-eh6lqc p, .framer-eh6lqc a{ font-family: "Kumbh Sans", system-ui, sans-serif!important; } /* O botao de envio do formulario: preso na variante "Disabled" do Framer, a 50% de opacidade, ficava assim mesmo com tudo preenchido. O site.js passa a marca-lo quando o formulario fica valido. */ button[data-ec-form-ok]{ opacity: 1!important; cursor: pointer; } /* -------------------------- /about/: compromissos da Politica ------------- Este bloco (o paragrafo de introducao e os 3 compromissos) usa o preset 10cxxxz: 16px, peso 300, entrelinha 1.2. E' o texto mais fino e mais apertado da pagina toda -- as descricoes dos servicos, ao lado, vao a 20px/400/1.6. Aqui alinha-se aos mesmos numeros, para nao ler como um texto esquecido no meio do resto. */ .framer-17orqg1 .framer-styles-preset-10cxxxz{ /* 24px e nao 20: e' o tamanho do corpo de texto desta mesma pagina -- o bloco "Tratamentos de Estetica Avancada" da Brand Story vai a Kumbh Sans 24px/400. A 20px os compromissos continuavam a ler-se como um bloco a' parte, mais pequeno que o resto do /about/. */ font-size: 24px!important; font-weight: 400!important; line-height: 1.55!important; } .framer-17orqg1 p[data-ec-lista]{ margin-top: .5em!important; } /* O contentor vinha com `height:283px` e `overflow:clip`, o que chegava para o texto a 20px. A 24px o conteudo precisa de 345 e o terceiro compromisso ficava cortado a meio. Cresce com o conteudo, como os cartoes de servico. O !important e' preciso pela mesma razao de sempre: o Framer prefixa a regra da altura com a classe da pagina. */ .framer-17orqg1[class]{ height: auto!important; min-height: 283px!important; overflow: visible!important; } /* Fora do desktop os compromissos ficam nos 24px de um bloco largo, mas a coluna tem 343px: uma linha leva 4 ou 5 palavras e o terceiro compromisso ocupa um ecra inteiro. A Andreia apanhou-o: "letras muito grandes, deviam ser mais de acordo com o resto da pagina". O resto do /about/ em telemovel le'-se a 16px, por isso e' o valor de referencia; aqui fica 17px, meio ponto acima, que e' o que separa um texto corrido de uma lista de compromissos sem o fazer gritar. A entrelinha sobe de 1.55 para 1.6 porque a medida encurtou. */ @media (max-width: 1199.98px){ .framer-17orqg1 .framer-styles-preset-10cxxxz{ font-size: 17px!important; line-height: 1.6!important; } } /* ------------------------- /about/: Missao, Visao e Politica no telemovel -- Os tres paineis sao um acordeao de hover: o aberto mostra a foto e o texto, os fechados tapam o texto com a foto em `position:absolute`. Em desktop o rato abre-os; num telemovel nao ha rato, e o site.js desliga-se de proposito abaixo dos 1200px -- ficavam dois paineis com foto e sem forma de chegar ao texto. A Andreia deu por isso: "as fotos da Visao e Politica nao expandem o texto referente". Sem rato nao ha' acordeao que se justifique: em coluna cabem os tres abertos. Cada painel fechado passa a ter a mesma forma do aberto (a variante "Selected Mobile" do Framer) -- foto em fluxo com 200px, cartao de texto por baixo, altura pelo conteudo. O !important e' preciso porque as regras do Framer vem com tres classes e estas so' tem o seletor de atributo. */ @media (max-width: 1199.98px){ [data-ec-acc][class]{ height: auto!important; } [data-ec-acc] .framer-si3PJ.framer-5utoqj{ flex-direction: column!important; height: min-content!important; } [data-ec-acc] .framer-si3PJ .framer-sr574z{ position: relative!important; inset: auto!important; flex: none!important; width: 100%!important; height: 200px!important; } [data-ec-acc] .framer-si3PJ .framer-1lebud0{ flex: none!important; justify-content: flex-start!important; gap: 24px!important; width: 100%!important; height: min-content!important; padding: 0 24px 24px!important; } } /* ------------------------------ /contact/: titulos de seccao -------------- "Contacte-nos", "Envie-nos uma mensagem" e "Redes sociais" usam o preset tmz1d2: Kumbh Sans peso 400 -- o mesmo peso do corpo de texto, por isso nao se destacam como titulo nenhum. Os titulos de cartao no resto do site (p.ex. "Consulta de avaliacao facial") usam Poppins a peso 500; aqui sobe-se a 600 para compensar o facto de nao mudarem de cor nem de fundo como os cartoes. So' estes 3 -- o preset tmz1d2 tambem veste um paragrafo de prosa no /space/, que nao pode ganhar peso de titulo. */ .framer-gekr7s .framer-styles-preset-tmz1d2, .framer-1ym3n95 .framer-styles-preset-tmz1d2, .framer-va092r .framer-styles-preset-tmz1d2{ font-family: "Poppins", "Poppins Placeholder", sans-serif!important; font-weight: 600!important; } /* Listas escritas com travessao dentro de um so' paragrafo (as duas do /about/). Cada linha passa a bloco com o travessao pendurado: quando o texto passa de uma linha, a continuacao alinha com o texto e nao com o travessao. O texto nao muda -- so' se ve a estrutura que ja' la' estava. */ [data-ec-lista]{ display: block; position: relative; padding-left: 1.35em; margin-top: .42em; } /* A marca usa currentColor: esta lista vive num painel azul com texto branco, e um ponto da cor da marca desapareceria la'. Assim serve qualquer fundo. */ [data-ec-lista]::before{ content: ""; position: absolute; left: .12em; top: .58em; width: .34em; height: .34em; border-radius: 50%; background: currentColor; opacity: .45; } /* A linha que anuncia o grupo ("Tratamentos de Estetica Avancada:") ganha ar por cima, para os grupos se lerem como grupos. */ [data-ec-lista] + span:not([data-ec-lista]){ display: block; margin-top: 1.25em; } p:has([data-ec-lista]){ line-height: 1.55; } /* Quando o item e' o proprio

(a politica da qualidade do /about/ tem os compromissos em paragrafos separados, nao em spans dentro de um), o paragrafo traz uma classe do Framer e as regras do Framer vem prefixadas com a classe da pagina: (0,2,0) contra os (0,1,0) do seletor de atributo. Sem isto o recuo nao pegava e a marca ficava por baixo do texto. */ p[data-ec-lista][class]{ display: block; position: relative; padding-left: 1.35em; margin-top: .42em; margin-bottom: 0; } /* ------------------------------------- /space/: paragrafos que se veem ----- Os dois textos da pagina vinham numa caixa unica, a entrelinha 1.2 e sem quebras: varias ideias coladas. O split_paragraphs declara onde comeca cada uma; aqui elas ganham a mancha de um paragrafo. A entrelinha sobe de 1.2 para 1.5 -- a 1.2 as linhas de 24px tocam-se e o olho nao encontra o inicio da linha seguinte -- e entre paragrafos fica uma linha inteira de espaco, que e' o que faz um bloco ler como bloco. */ [data-ec-par]{ display: block; } p:has([data-ec-par]){ line-height: 1.5; } [data-ec-par] + [data-ec-par], [data-ec-lista] + [data-ec-par]{ margin-top: 1em; } [data-ec-par] + [data-ec-lista]{ margin-top: .6em; } /* Na coluna do telemovel os 24px desta pagina dao 4 palavras por linha. O corpo de texto do site em telemovel e' 16px; aqui fica 17px, como nos compromissos do /about/, para os dois blocos longos lerem ao mesmo ritmo que o resto. */ @media (max-width: 1199.98px){ p:has([data-ec-par]){ font-size: 17px!important; line-height: 1.6!important; } } /* ------------------------------------ /services/: servicos por categoria --- A pagina tinha os servicos todos numa grelha unica -- "muito extensa com os servicos todos listados", nas palavras da cliente -- e passa a seis blocos. O titulo de cada bloco e' o unico elemento novo desenhado nesta pagina, por isso pega na tipografia que a pagina ja' usa: Poppins 500, a mesma dos titulos de seccao, e o azul da marca. Por baixo fica um fio, que e' o que faz a seccao ler como seccao sem precisar de mais peso. O `scroll-margin-top` sao os 104px da barra fixa mais folga: sem ele, ao saltar pelo indice o titulo ficava debaixo da barra. */ .ec-cat{ width: 100%; scroll-margin-top: 136px; } .ec-cat + .ec-cat{ margin-top: 88px; } .ec-cat-titulo{ font-family: "Poppins", "Poppins Placeholder", sans-serif; font-size: 32px; font-weight: 500; line-height: 1.2; color: var(--token-1244831b-1466-4997-9660-9d134d4b6c18, #0166cc); margin: 0 0 28px; padding-bottom: 16px; border-bottom: 1px solid rgba(1,102,204,.18); } /* O indice das categorias, por baixo do texto do cabecalho. Sao seis atalhos para uma pagina que agora tem 34 servicos: sem eles, chegar ao ultimo bloco sao seis ecras de scroll. Desenham-se como etiquetas, que e' a forma que a pagina ja' usa para as categorias nos cartoes. */ .ec-cat-indice{ width: 100%; max-width: 1528px; margin: 8px auto 0; } .ec-cat-indice ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .ec-cat-indice a{ display: block; padding: 8px 16px; border: 1px solid rgba(1,102,204,.28); border-radius: 999px; font-family: "Kumbh Sans", system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--token-1244831b-1466-4997-9660-9d134d4b6c18, #0166cc); text-decoration: none; transition: background-color .2s ease, border-color .2s ease; } @media (hover:hover){ .ec-cat-indice a:hover{ background-color: rgba(1,102,204,.08); border-color: rgba(1,102,204,.5); } } @media (max-width: 809.98px){ .ec-cat + .ec-cat{ margin-top: 56px; } .ec-cat-titulo{ font-size: 24px; margin-bottom: 20px; } .ec-cat-indice a{ font-size: 13px; padding: 7px 13px; } } /* --------------------------------------------- botoes empilhados ---------- Na home, em telemovel, os dois botoes de accao liam-se como um par mas nao eram irmaos: vivem em blocos diferentes, com pais diferentes -- um centra os filhos, o outro alinha-os a' esquerda dentro de um contentor com 24px de margem -- e cada botao dimensionava-se ao seu proprio texto. Medido a 390px: 269px e 259px de largura, a comecar em x=61 e x=24. Daí parecerem desalinhados, porque estavam. Passam ambos a' largura maxima do bloco de texto que esta' por cima (320px, o valor que o Framer ja' usa em .framer-pmghs4 neste breakpoint) e centram-se no proprio contentor. Ficam com a mesma caixa e a mesma margem dos dois lados. Fora do telemovel nada muda. */ @media (max-width: 809.98px){ /* O [class] nao seleciona nada de novo: serve so' para igualar a especificidade do Framer, que prefixa tudo com a classe da pagina (.framer-MAwSV .framer-1588kso) ou junta duas classes no mesmo elemento (.framer-nhtTX.framer-8m8acm). Sao (0,2,0); um seletor de uma so' classe perde, venha depois ou nao. Assim empata-se e ganha-se pela ordem, sem !important e sem fixar a classe da pagina, que muda a cada reexportacao. */ .framer-1l3eg4c-container[class], .framer-uy6l8l-container[class]{ width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; } .framer-1l3eg4c-container > a[class], .framer-uy6l8l-container > a[class]{ width: 100%; } } /* ------------------------------------------- avaliacao dos depoimentos ---- A seccao dos depoimentos abria com 128px de vazio antes das estrelas (o padding-top do proprio

) e as estrelas mediam 12px: liam-se como um detalhe perdido, nao como uma avaliacao. O vazio passa a 72px -- o mesmo que a seccao ja' tem em baixo, o que fecha a seccao de forma simetrica -- e as estrelas crescem para 18px com um intervalo proprio. Usam-se os nomes do Framer e nao as classes com hash: cada estrela tem a sua propria classe gerada, o nome "Rating" e' o unico ponto estavel. */ @media (max-width: 809.98px){ section[data-framer-name="Client Testimonials"][class]{ padding-top: 72px; } } [data-framer-name="Rating"]{ display: flex; align-items: center; gap: 6px; } /* Ha' dois niveis de contentor por estrela (o do componente e o do icone); ambos tem de crescer, senao o de dentro corta o desenho. */ [data-framer-name="Rating"] [class*="container"]{ width: 18px; height: 18px; } [data-framer-name="Rating"] svg{ width: 100%; height: 100%; } /* --------------------------------------------------- mapa no telemovel ---- O contentor do mapa e' `position:absolute` com `inset:-520px -320px -1px -320px`: um sangramento desenhado para o desktop, onde a caixa maior do que o ecra da' respiro a' mascara. No telemovel isso torna a caixa 1030x1483 dentro de um pai de 390x962. A mascara e' um gradiente radial centrado na CAIXA, por isso o centro nitido cai fora do que se ve e o que sobra no ecra e' a franja ja' esbatida -- lia-se como um vazio branco por baixo da newsletter. Aqui a caixa passa a coincidir com o que se ve, e a mascara abre para o esbatimento voltar a ser uma moldura suave em vez de engolir o mapa. */ @media (max-width: 809.98px){ .framer-1l4pcit-container[class]{ /* o !important e' preciso: o inset e a mascara vem no style inline do elemento, e nenhum seletor ganha a isso */ inset: 0!important; -webkit-mask: radial-gradient(78% 62% at 50% 50%, #000 0%, rgba(0,0,0,.72) 62%, transparent 100%)!important; mask: radial-gradient(78% 62% at 50% 50%, #000 0%, rgba(0,0,0,.72) 62%, transparent 100%)!important; } } /* ------------------------------------------------- heroi do /about/ ------- O heroi do /about/ e' uma fotografia da fachada, clara e cheia de detalhe (bandeiras, montras, texto impresso), com o titulo e o subtitulo em branco por cima. O texto perdia-se contra as zonas claras. A imagem escurece 30%. Aplica-se a' propria e nao a um ascendente: um filtro cria um novo contexto de empilhamento e afetaria o parallax do heroi, que vive num elemento acima. A classe da seccao existe so' no /about/ -- a home tem o seu heroi com outra fotografia e outro contraste, e nao se mexe nela. */ .framer-1dfpfek[class] img{ filter: brightness(.7); } /* ----------------------------------------------- depoimentos (reviews) ---- Ver rebuild_testimonials(): o markup desta seccao passou a ser nosso. Aqui trata-se so' do aspecto. Antes: um depoimento em destaque com o texto todo (629 caracteres, mais de um ecra no telemovel) e um carrossel automatico por baixo. Agora: cartoes iguais, cortados a quatro linhas, com "Ler mais" a abrir. Tres colunas no desktop, duas em tablet, carrossel com encaixe no telemovel. */ section[data-framer-name="Client Testimonials"][class]{ overflow: hidden; } [data-ec-reviews-cabecalho]{ display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 24px; text-align: center; } [data-ec-reviews-estrelas]{ display: flex; gap: 4px; } [data-ec-reviews-estrelas] svg{ width: 20px; height: 20px; /* a estrela usa a cor da marca: liga a avaliacao a' identidade em vez de ficar um cinzento generico */ fill: #0166CC; } [data-ec-reviews-titulo]{ margin: 0; font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: #333; text-wrap: balance; } /* Flex com quebra, e nao grelha de 3 colunas: sao cinco depoimentos, e numa grelha de tres a segunda linha ficava com dois cartoes encostados a' esquerda e um buraco a' direita -- lia-se como inacabado. Com flex a ultima linha centra-se sozinha, seja qual for o numero de depoimentos. */ [data-ec-reviews-lista]{ list-style: none; margin: 0; padding: 0 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; max-width: 1180px; } [data-ec-review]{ flex: 0 1 364px; } /* No telemovel a grelha passa a carrossel com encaixe: cabe um cartao e adivinha-se o seguinte, que e' o que convida a arrastar. */ @media (max-width: 809.98px){ [data-ec-reviews-lista]{ display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 24px 8px; } [data-ec-reviews-lista]::-webkit-scrollbar{ display: none; } [data-ec-review]{ flex: 0 0 78vw; max-width: 320px; scroll-snap-align: center; } } [data-ec-review]{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: #fff; border-radius: 16px; padding: 24px; box-shadow: inset 0 0 0 1px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -20px rgba(16,24,40,.28); } [data-ec-review-texto]{ margin: 0; color: #555; font-size: 15px; line-height: 1.62; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } [data-ec-review][data-aberto] [data-ec-review-texto]{ -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } /* O botao e' texto, mas continua a precisar de alvo de toque: 44px de altura com a caixa recuada para a esquerda, para o rotulo alinhar com o texto. */ [data-ec-review-mais]{ appearance: none; border: 0; background: none; padding: 0; min-height: 44px; display: inline-flex; align-items: center; font: inherit; font-size: 14px; font-weight: 600; color: #0166CC; cursor: pointer; text-underline-offset: 3px; } [data-ec-review-mais]:hover{ text-decoration: underline; } [data-ec-review-mais]:focus-visible{ outline: 2px solid #0166CC; outline-offset: 3px; border-radius: 4px; } /* O nome fecha o cartao: separa-se do texto por um fio, nao por mais espaco */ [data-ec-review-autor]{ margin: 0; margin-top: auto; padding-top: 14px; width: 100%; border-top: 1px solid rgba(16,24,40,.08); font-size: 14px; font-weight: 600; color: #333; } /* --------------------------------------------- heroi da home (telemovel) -- O heroi tem `height:94vh`. No telemovel o vh refere-se ao ecra SEM as barras do browser, por isso a seccao fica mais alta do que a area que se ve e o segundo botao ("Saber sobre nos") desaparece por baixo da barra inferior. O svh e' a mesma medida contando com as barras visiveis, que e' exactamente o que aqui e' preciso. Fica a regra em vh logo acima: quem nao souber svh ignora a segunda e mantem o comportamento antigo, em vez de ficar sem altura nenhuma. */ @media (max-width: 809.98px){ .framer-1j3ibry[class]{ height: auto; min-height: 94vh; min-height: 94svh; } /* A altura era fixa (94svh) com o conteudo encostado ao fundo e o excesso a sair por cima. Em ecras baixos (375x667, 360x640) o titulo nao cabia: subia por baixo do logotipo e ficava cortado no limite superior da imagem -- a queixa da cliente. Passa a minimo: o heroi cresce com o conteudo, e o padding-top reserva o espaco do logotipo e do botao do menu (fixos por cima, ate' ~96px); o padding-bottom baixa de 100px para 40px, que so' servia para compensar o bloco absoluto. */ .framer-1j3ibry[class] .framer-102cx6g[class]{ height: auto; align-self: stretch; min-height: calc(94vh - 32px); min-height: calc(94svh - 32px); padding-top: 96px; padding-bottom: 40px; box-sizing: border-box; } /* O bloco de texto era absoluto (top:96px; bottom:24px), logo nao contava para a altura do heroi e, sem espaco, sobrepunha-se ao logotipo. Em fluxo normal empurra a altura e fica sempre por baixo do padding-top. O margin-top:auto mantem-o encostado ao fundo quando ha folga. */ .framer-1j3ibry[class] .framer-1ieo3zd[class]{ position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; margin-top: auto; box-sizing: border-box; } } /* Ecras baixos (375x667, 360x640): com o titulo a 40px o heroi precisa de ~730px e o segundo botao ficava por baixo do dobra. O titulo desce para 32px e o espaco por cima e por baixo aperta um pouco, so' nesta altura -- ecras de 800px+ ficam exactamente como estavam. */ @media (max-width: 809.98px) and (max-height: 720px){ .framer-1j3ibry[class] .framer-102cx6g[class]{ padding-top: 88px; padding-bottom: 24px; } .framer-1j3ibry[class] h1{ font-size: 32px!important; line-height: 1.15!important; } } /* ------------------------------------------- cartoes de servico ----------- O cartao tem 218px fixos e o "Ver detalhes" esta' sempre no mesmo sitio (y=182..206). A descricao ocupa duas linhas -- excepto nos servicos cujo texto vem inteiro do editor: o "Excellence Fitness" traz dezoito paragrafos e o bloco crescia ate' 609px, passando 423px por cima do "Ver detalhes" e tornando os dois ilegiveis. A descricao passa a ficar contida nas duas linhas que o cartao lhe da'. O texto completo continua na pagina do servico, que e' onde o "Ver detalhes" leva. O em (e nao px) mantem o corte certo se o tamanho de letra mudar. */ /* O corte e' feito no "Header", que e' o contentor que define o espaco disponivel: vai ate' y=172 e o "Ver detalhes" comeca em y=182. Assim o limite nao depende de eu adivinhar uma altura -- funciona tambem nos tres cartoes cujo titulo ocupa duas linhas e empurra a descricao 29px para baixo, que eram os que continuavam a colidir. Uma versao anterior minha punha `max-height:2.7em` na descricao. Estava errada: assumi letra de ~15px e e' de 12px com entrelinha de 19,5px, o que dava 32,4px = 1,66 linhas. Cortava a meio de uma linha nos 28 cartoes -- foi o que a Andreia viu. O line-clamp e' o que faz o corte cair no fim de uma linha e acrescenta as reticencias, para se perceber que ha mais texto. Sozinho nao chega: a descricao do "Excellence Fitness" tem 18

, e o line-clamp nao atravessa blocos -- daí o recorte no Header ficar como limite de verdade. */ /* O Header vinha com `height:160px` fixo, mas o seu conteudo precisa de 165: a descricao passava 5px para fora e via-se a base das letras cortada em todos os cartoes. Com `auto` mais um minimo, o bloco cresce o que precisar -- e o cartao acompanha, por isso nada fica cortado nem sobreposto. Nao se fixa uma altura maior: os tres cartoes com titulo de duas linhas precisam de mais 14px do que os outros, e um valor unico ou os cortava a eles ou deixava buraco nos restantes. As alturas passam a variar (218, 223 e 237), o que no telemovel nao se nota -- estao empilhados -- e no desktop nao desalinha nada, porque a grelha estica cada linha por igual. */ .framer-1wrwdxc[class]{ /* o !important e' preciso: o Framer fixa a altura em `.framer-taooI.framer-v-1i8nd1z .framer-1wrwdxc` -- tres classes, (0,3,0). O [class] so' chega a (0,2,0) e perdia. */ height: auto!important; min-height: 165px!important; } .framer-1u75446[class]{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* O cartao cresce com o Header. O overflow fica como rede de seguranca para conteudo que eu nao tenha visto, mas em condicoes normais nunca corta: a descricao ja' esta' limitada a duas linhas pelo line-clamp. */ .framer-kqzbq7[class]{ height: auto!important; min-height: 218px!important; overflow: visible!important; } /* --------------------------- servicos relacionados (paginas de detalhe) --- A lista de servicos relacionados no fundo das paginas de servico e' uma coluna com `gap:220px`. Nos cartoes de 459px isso da' meio ecra de branco entre cada um: no telemovel via-se um cartao, depois um vazio, e so' depois o seguinte -- parecia que a pagina tinha acabado. Passa a 32px, o mesmo intervalo que a listagem /services/ ja' usa entre cartoes. So' no telemovel: no desktop os cartoes tem outra medida e o espaco generoso ali nao atrapalha. */ @media (max-width: 809.98px){ .framer-93pmxx[class]{ gap: 32px; } } /* ------------------------------- mapa: espaco da newsletter (telemovel) ---- A seccao do mapa tem `padding-top:400px` no telemovel. Nao era respiro: era o espaco onde o cartao da newsletter assentava por cima. Com a newsletter fora, ficavam 400px de branco entre os depoimentos e o mapa. Passa a 72px, o mesmo valor que as variantes de tablet e desktop desta mesma seccao ja' usam. (No desktop o espaco vinha de outro lado -- um contentor vazio de 500px -- e sai no build, ver _limpa_contentores_vazios.) */ @media (max-width: 809.98px){ section[data-framer-name="Mobile"].framer-7sD3B[class]{ padding-top: 72px; } } /* --------------------------------- titulo da /team/ colado (telemovel) ---- O bloco "Header Main" da pagina da equipa e' `position:sticky; top:24px`. No desktop isso e' intencional e funciona: o titulo fica parado enquanto a coluna dos cartoes passa ao lado, e larga quando o contentor sai do ecra. No telemovel nao ha duas colunas -- e' tudo uma so' -- e o mesmo sticky deixa o titulo permanentemente por cima do conteudo que passa por baixo. Medido a 390px: ao rolar 600px o titulo deslocava-se 0px. So' no telemovel, e so' nesta pagina: a classe existe apenas no team/index.html. */ @media (max-width: 809.98px){ .framer-s2jr4l[class]{ position: static!important; } } /* ------------------- home: botao colado a imagem do 1o servico (telemovel) - A seccao "Signature Spa Services" empilha o cabecalho (titulo + botoes) e a lista de cartoes numa unica coluna flex com `gap:12px` -- o mesmo espaco usado entre um cartao e o seguinte. Entre o botao "Lista completa de servicos" e a foto do primeiro cartao isso lia-se colado, sem respiro. So' este espaco cresce, para 40px; o gap entre cartoes fica como estava. */ @media (max-width: 809.98px){ .framer-ox7i3q[class]{ margin-bottom: 40px; } } /* ------------------------------------------ espaco antes do mapa ---------- A seccao do mapa abre com `padding-top:72px`. Na home a seccao anterior fecha com 72px de fundo, o que da 144 no total e chega. No /about/ e no /team/ a anterior fecha com 0, e ficavam so' os 72 -- o texto quase a encostar a um mapa que ocupa a largura toda. Sobe para 144px, que e' um valor da propria escala do site (o mesmo padding-top de "Our Philosophy" e da seccao de contacto). No telemovel mantem-se em 72: la' a largura e' menor e o mapa nao pesa da mesma forma. */ @media (min-width: 810px){ section.framer-7sD3B[class]{ padding-top: 144px; } } /* ------------------------------ home: cabecalho dos servicos (telemovel) -- O conteudo deste cabecalho (a etiqueta, o h2 "Excelencia e' alcancar resultados" e o paragrafo) vive dentro de um wrapper com altura 0, por isso o bloco nao o contabiliza: o texto desenha-se para fora da propria caixa. Ja' antes de eu lhe tocar o paragrafo passava 11px por cima do primeiro cartao. Com o botao "Lista completa de servicos" a sair daqui (ver setupBotaoServicos no site.js) o bloco encolheu de 164 para 104px e a sobreposicao passou a 71px. O minimo repoe o espaco que o conteudo ocupa mesmo -- medido: precisa de 227px, ficam 240 para dar folga -- e o paragrafo passa a acabar 65px antes do primeiro cartao. So' no telemovel: no desktop este bloco e' a coluna sticky ao lado dos cartoes e tem outra medida por completo. */ @media (max-width: 809.98px){ .framer-ox7i3q[class]{ min-height: 240px; /* E' `position:sticky` -- no desktop e' a coluna que fica parada enquanto os cartoes passam ao lado, e la' faz sentido. No telemovel nao ha duas colunas, e o titulo ficava preso por cima dos cartoes que passavam por baixo. Ja' era sticky antes; so' nao se notava porque o bloco tinha 104px e o conteudo desenhava-se para fora. Ao dar-lhe os 240px que o conteudo precisa, o sticky passou a ver-se. Mesmo caso do cabecalho da /team/. */ position: static; } } /* ------------------------------------------------------- barra fixa ------- A barra e' fixa e, fora do heroi, passa por cima de conteudo claro. O logotipo e os rotulos vem brancos (desenhados para a foto do heroi), e antes a barra so' ganhava fundo a partir de 1200px -- e mesmo la' 40% de branco com 2px de desfoque nao separava nada: os rotulos cruzavam-se com o texto da pagina e o logotipo branco desaparecia. Fora do heroi passa a ser uma superficie clara, em todos os tamanhos: 94% de branco com desfoque (a 88% ainda se lia o texto dos botoes por tras do logotipo), um fio de 1px em baixo e uma sombra com deslocamento e desfoque, para a barra ler como um plano acima da pagina. A tinta dos rotulos passa a #333 -- 12.6:1 sobre branco. */ nav{ transition: background-color .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease, box-shadow .22s ease; } nav[data-ec-nav-solid]{ /* o !important e' preciso nos tres: o