/*
* Fontinha — secção Destaques da homepage.
*
* Figma: cartões 4002:54, 4002:32, 4002:33, 4002:66 e 4002:77, sobre a parede
* texturada do nó 4001:196. Medidas do frame de 1440:
*
* moldura 283 x 345, com a fotografia 233 x 295 lá dentro -> borda 25px
* título 28px de altura, creme, por cima da moldura
* texto Gill Sans itálico, creme, centrado
* botão 139 x 27.5 — é o botão primário do design-tokens.md
* entre cartões ~90px de moldura a moldura
*
* Mobile first. O carrossel em si está em base.css; aqui só o que é desta secção.
*/
/* O fundo é a camada do Figma exportada tal e qual: nó 4001:196, PNG a 2x,
com a máscara já aplicada e sem cartões nem textos. 2879x1804, que é 2x dos
1439.5x902 do frame. A cor lisa fica por baixo, para o caso de a imagem não
carregar e para as bordas quando a secção fica mais alta do que 902.
Se o campo ACF "Fundo da secção" estiver preenchido, o style inline do
template ganha a esta regra. */
/* Folga no fundo, para o conteúdo ficar acima da faixa onde os perks se
sobrepõem. No Figma a linha horizontal acaba em y=1329.9 e a banda dos perks
começa em 1342.5 — 12.6px de folga, e do fim da linha ao fim da banda vão
188.7px. Com os 96px do --section-y o texto caía 80px dentro da sobreposição
e via-se através da diagonal transparente do fundo dos perks.
Em percentagem, e não em px, pela mesma razão que a margem negativa dos
perks: a sobreposição é 12.23% da largura, e a folga tem de a acompanhar em
qualquer ecrã. 13.1% dá 188.7px a 1440, e deixa sempre 0.87% de margem. */
.destaques.section {
/* 194.3 a 1440: do fim da linha (707.7) ao fim da banda, para a banda fechar
nos 902 do desenho. Em percentagem, como a margem negativa dos perks, para
acompanhar a sobreposição quando o ecrã cresce. */
padding-bottom: 13.25%; /* 194.3 / 1440 */
}
.destaques {
background-color: var(--s-bg-wall);
background-image: url("../../img/destaques-fundo.jpg");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
color: var(--s-text-on-dark);
overflow: hidden;
}
/* O carrossel sangra até à margem para o cartão seguinte se ver cortado, que é
o que diz que há mais. O padding recria a margem lateral do container. */
.destaques .carousel__viewport {
padding-inline: var(--gutter);
/* Sem isto o snap alinha o cartão à borda da janela e não ao início do
conteúdo, e o scrollLeft ficava preso no valor do padding.
O início leva mais uma "gap" do que o padding: assim, quando o carrossel
encaixa no segundo cartão, o primeiro fica a espreitar ~100px à esquerda,
que é o corte que o frame mostra. Sem isto o encaixe deixava 4px.
Tem de ser o scroll-padding e não um scrollLeft à mão: com o snap activo,
qualquer posição fora do encaixe é puxada de volta. */
scroll-padding-inline-start: calc(var(--gutter) + var(--sp-24));
scroll-padding-inline-end: var(--gutter);
}
.destaques .carousel__track {
gap: var(--sp-8);
}
/* ---------- Cartão ---------- */
.destaque {
display: flex;
width: 283px;
max-width: calc(100vw - var(--gutter) * 2);
flex-direction: column;
align-items: center;
text-align: center;
}
/* H2 no design: 39.9px medidos no frame. Os títulos longos passam a largura do
cartão e não partem — "EVENTS & MORE" mede 313px contra 283 de cartão — e
cabem porque o gap é de 96px.
O tracking foi removido do tema inteiro — ver tokens.css. */
.destaque__titulo {
/* A caixa de linha do título bate com a tinta do nó, e não com as métricas
da fonte. O `normal` da Baro LineTwo dá 48px a 40 de corpo e 34 a 28,
contra os 28 do nó 4001:1090 e os 20 do nó 4002:180 do frame mobile —
ou seja, 20px e 14px de folga que o desenho não tem, e que empurravam o
bloco do cartão para baixo até as setas e o texto de apoio se
amontoarem.
0.7 sem unidade serve as duas larguras: 40 x 0.7 = 28 e 28 x 0.7 = 19.6.
A tinta mede 29 a 31, por isso transborda a caixa ~1.5px de cada lado —
não corta nada, porque nada aqui tem `overflow` a recortar o título. */
line-height: 0.7;
/* 32.02 do fim da tinta do título ao topo da moldura (nós 4001:1090 e
4001:1047). Estava em --sp-6, 24, e o --sp-8 da escala é 32. */
margin-bottom: var(--sp-8);
color: var(--s-text-on-dark);
white-space: nowrap;
}
/* A moldura é a imagem do Figma, não uma borda de CSS: é uma moldura
fotografada, com bisel e passe-partout, que nenhum `border` reproduz.
Exportada do preenchimento do nó 4001:1047, recortada à região que o Figma
mostra e redimensionada para 2x dos 283x345 do desenho.
A ordem é a mesma do ficheiro: moldura por baixo, fotografia por cima a
tapar o passe-partout. Por isso não é preciso transparência — o PNG é uma
moldura sobre branco, e o branco fica escondido.
Cada quadro tem a sua inclinação, como no Figma. Só a moldura roda — o
título, o texto e o botão ficam a direito. */
.destaque__moldura {
position: relative;
width: 100%;
aspect-ratio: 283 / 345;
background-color: var(--s-frame);
background-image: url("../../img/molduras/moldura.png");
background-repeat: no-repeat;
background-size: 100% 100%;
transform: rotate(-2deg);
}
/* A janela da moldura: 233x295 dentro de 283x345, encostada a 23px do topo e
da esquerda — as medidas do nó 4001:1052. A moldura do Figma não é simétrica
(23px em cima e à esquerda, 27px em baixo e à direita), e é por isso que os
valores não são iguais nos quatro lados.
O overflow vive aqui e não na moldura: é esta a caixa que corta a fotografia
quando o .media-zoom a mexe no hover. */
.destaque__janela {
position: absolute;
/* Mesmo token da moldura: quando o hover encolhe a fotografia, a folga que
fica à volta aparece escura em vez de mostrar o passe-partout branco do
PNG da moldura. */
background-color: var(--s-frame);
top: 6.667%; /* 23 / 345 */
left: 8.127%; /* 23 / 283 */
width: 82.332%; /* 233 / 283 */
height: 85.507%; /* 295 / 345 */
overflow: hidden;
}
.destaque:nth-child(5n + 2) .destaque__moldura {
transform: rotate(1.5deg);
}
.destaque:nth-child(5n + 3) .destaque__moldura {
transform: rotate(-1deg);
}
.destaque:nth-child(5n + 4) .destaque__moldura {
transform: rotate(2deg);
}
.destaque:nth-child(5n) .destaque__moldura {
transform: rotate(-1.5deg);
}
.destaque__imagem {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.destaque__texto {
margin-top: var(--sp-6);
color: var(--s-text-on-dark);
font-size: var(--fs-body);
font-style: italic;
font-weight: var(--fw-body-strong);
}
.destaque__cta {
margin-top: var(--sp-4);
}
/* ---------- Controlos ----------
O Figma não tem setas nesta secção: os cortes nas pontas é que dizem que há
mais cartões. Estas são desenho nosso — sem controlo visível não há navegação
por rato. Ficam por baixo do carrossel e centradas, igual em todas as
larguras. Cheguei a pô-las nas pontas, à altura das molduras, mas aí caíam
por cima das fotografias dos cartões cortados e liam-se mal.
Aqui assentam na textura da parede, que é fundo uniforme, e a cor de texto
sobre escuro chega para as destacar. */
/* As setas desta banda foram removidas. Eram desenho nosso — o Figma não as tem
aqui — e ocupavam o vazio de 45.49px que o desenho deixa entre os cartões e o
texto de apoio: mesmo com 20px de folga de cada lado a zona lia-se cheia,
porque o vazio é que é o desenho. A navegação por rato passou a ser o
arrastar-para-rolar, que vive no componente e serve os seis carrosséis —
ver ligarArrasto() em assets/js/carousel.js. */
/* A janela do carrossel recorta o topo do título, e é preciso dar-lhe folga.
O `.carousel__viewport` declara só `overflow-x: auto`, mas a especificação
promove o outro eixo: o computado é `overflow-y: auto`, que recorta. E o topo
da janela coincide com o topo do `` — 713.00 nos dois —, por isso a tinta
do título, que sobe acima da caixa, era decepada nos traços de cima.
O padding dá a folga e a margem negativa devolve a posição, para nada se
mexer. Fica na secção e não no componente: os outros carrosséis não têm texto
a transbordar a caixa logo no topo do item.
NÃO APAGAR ao mexer nas regras vizinhas — esta regra já foi apagada uma vez,
por ter ficado no meio do bloco das setas quando elas saíram. */
.destaques .carousel__viewport {
padding-top: 8px;
margin-top: -8px;
}
/* ---------- Texto de apoio ---------- */
.destaques__apoio {
position: relative;
margin-top: var(--sp-8);
text-align: center;
}
/* O botão da banda só existe em telemóvel — em desktop o botão é o do cartão.
Ver o bloco de mobile e o comentário no template. */
.destaques__cta {
display: none;
}
/* O carrossel passa a ser o bloco de contenção das setas. */
.destaques .carousel {
position: relative;
}
/* O triângulo por baixo da linha — nó 4001:1135. **Não é "continua a rolar":
é o "ler mais" do parágrafo**, que o desenho mostra cortado a duas linhas.
20.4x17.7, a 10px do fim da linha. SVG exportado do Figma; é um triângulo
cheio em #FDE2BD e não um contorno, por isso vai como imagem e não como
borda de CSS.
No frame está em x=687.4, com o centro em 697.6 — praticamente o centro da
própria linha (699.5), que por sua vez está 20px à esquerda do centro do
frame por colocação manual. Aqui fica centrado na linha, que é o que a
colocação do desenho quer dizer. */
.destaques__ler-mais {
position: absolute;
/* O botão cai DENTRO da faixa em que os perks se sobrepõem — 176.1px em
desktop — e o palco deles, sendo secção seguinte, apanhava o clique. O
triângulo via-se na mesma, porque a diagonal do fundo é transparente ali;
o que não chegava lá era o ponteiro. Apanhado com `elementFromPoint`. */
z-index: 1;
top: calc(100% + 10px);
left: 50%;
width: 20.4px;
height: 17.7px;
color: var(--s-text-on-dark);
transform: translateX(-50%);
}
.destaques__ler-mais .ler-mais__glifo {
mask-image: url("../../img/icons/seta-scroll.svg");
}
.destaques__apoio p {
margin: 0 auto;
max-width: var(--container-text);
color: var(--s-text-on-dark);
font-size: var(--fs-small);
}
/* A linha por baixo do texto de apoio — vector 4001:1134 no Figma. */
.destaques__apoio::after {
display: block;
width: 100%;
height: 1px;
/* 7.1px do fim do texto ao início da linha, medido entre os nós 4001:806
(667.6..701.6) e 4001:1134 (708.7). Estavam 24 do --sp-6. */
margin-top: 7.1px;
background: var(--s-text-on-dark);
content: "";
}
@media (min-width: 1200px) {
.destaques .carousel__track {
/* 96px: os ~90px de moldura a moldura do frame. Dá três cartões inteiros
e dois cortados nas pontas, que é o que o Figma mostra, e é o gap que
deixa os títulos longos caberem numa linha sem baterem no vizinho. */
gap: var(--sp-24);
}
.destaque__texto {
margin-top: var(--sp-6);
}
/* 667.6 é onde o nó 4001:806 começa dentro da banda. Os cartões acabavam em
638 e o intervalo era 29.6; com a caixa do título encolhida à tinta do nó
passam a acabar em 626, e o intervalo sobe para 41.6 para o texto de apoio
ficar no mesmo sítio.
São estes 41.6 que dão respiração às setas: elas ocupam 24 e ficam
centradas, com ~8.8 de cada lado. Antes tinham 0 em cima e 5.6 em baixo. */
/* 45.49 é o vazio do desenho entre o fundo do botão DETAILS (1238.70, nó
4001:1093) e o topo do texto de apoio (1284.19, nó 4001:806). Sem setas
pelo meio, é o intervalo tal como está no Figma. */
.destaques__apoio {
margin-top: 45.49px;
}
}
/* ============================================================
Mobile — até 1199px. Frame Home - mob (4002:171), banda 405..884.
============================================================
Continua a ser um carrossel com moldura — **um cartão ao centro e dois a
espreitar nas pontas** —, mas tudo centrado e mais pequeno. Era o cartão de
desktop empilhado, e dava 739.38 contra os 479 do desenho.
Coordenadas relativas à banda (topo 405):
título "our rooms" 4002:180 ( 99.31, 20.44) 173 x 20
fila de cartões 4002:1198 ( 0.01, 50.82) 376.48 x 292.35
moldura central ~228 x 254 em x ~74 (medida no export)
texto do cartão 4002:191 ( 36.23, 339.21) 298 x 27.06
régua 4002:1272 ( 34.99, 370.96) 292.86 x 0.35
triângulo 4002:1273 (175.15, 375.04) 17.24 x 14.93
DETAILS 4002:285 ( 36.38, 386.35) 85.20 x 28
O botão fica à ESQUERDA e o triângulo ao centro — lado a lado, não empilhados.
**Não há texto de apoio em mobile.** O nó 4002:191 é o texto do próprio
cartão; o parágrafo de apoio da banda não existe aqui. Fica escondido, e com
ele o `
`; a régua e o triângulo, que vivem no mesmo bloco, ficam. */
@media (max-width: 1199px) {
.destaques.section {
padding-block: 20.44px 0;
}
.destaque__titulo {
text-align: center;
}
.destaque {
width: 228px;
max-width: calc(100vw - var(--gutter) * 2);
}
/* Um ao centro, dois a espreitar: o padding da janela é o que sobra de cada
lado. (375 - 228) / 2 = 73.5 */
.destaques .carousel__viewport {
padding-inline: 73.5px;
scroll-padding-inline: 73.5px;
}
.destaques .carousel__track {
gap: var(--card-gap);
}
.destaque__texto,
.destaque__cta {
text-align: center;
}
/*
* Só o cartão do meio mostra o título, a descrição e o botão.
*
* No frame mobile (4002:171) estes três não são um por cartão: são nós
* únicos da banda — "our rooms" (4002:180), o texto em itálico (4002:191) e
* "details" (4002:286) —, e os dois cartões das pontas mostram só a moldura.
* Os grupos deles, 4002:1164 e 4002:1180, não têm mais nada lá dentro.
*
* `visibility` e não `display`: as três molduras do desenho arrancam todas
* ao mesmo y (417.67, 417.67 e 419.97) e o título fica por cima delas. A
* tirá-los do fluxo, as dos lados subiam o que o título ocupava, e a altura
* da banda passava a saltar consoante o cartão em que se estivesse — os
* títulos e as descrições não têm todos o mesmo número de linhas.
*
* A marca `is-ligado` é do componente e só entra quando o JS pega. Sem ela,
* sem JavaScript nenhum item era o actual e escondia-se o conteúdo de todos.
*/
.carousel.is-ligado .destaque:not(.is-atual) .destaque__titulo,
.carousel.is-ligado .destaque:not(.is-atual) .destaque__texto {
visibility: hidden;
}
/* O botão do cartão sai de cena: em mobile o do desenho é da banda, e está
impresso a seguir ao apoio. Sai por completo e não só nos cartões
inactivos — sem JavaScript o da banda fica com o primeiro cartão, que é
o que se vê. */
.destaque__cta {
display: none;
}
/*
* O fundo da banda. No frame mobile é tudo de nível de BANDA e não de
* cartão, alinhado à margem esquerda e não ao cartão:
*
* parágrafo 4002:191 x 36.23 y 338.91 298.00 x 27.06 (2 linhas)
* régua 4002:1272 x 34.99 y 370.66 292.86 x 0.35
* triângulo 4002:1273 x 175.15 y 374.74 17.24 x 14.93
* botão 4002:285 x 36.38 y 386.05 85.20 x 28.00
* fim da banda y 478.65
*
* (y em relação ao topo da banda, que no frame é 405.30.)
*
* Duas consequências:
*
* 1. O parágrafo é o texto de apoio da SECÇÃO e não a descrição do cartão.
* Mede 298 e o cartão tem 228; e arranca em x=36.23, à esquerda do
* cartão, que começa em 73.5. Estava ao contrário — o apoio escondido e
* a descrição do cartão à vista, que a 228 partia em três linhas em vez
* de duas e empurrava o botão 61px para baixo, para dentro da faixa de
* sobreposição dos perks, onde ficava tapado.
*
* Custo: em telemóvel a descrição por cartão não aparece. É o que o
* desenho faz — os dois cartões das pontas (nós 4002:1164 e 4002:1180)
* não têm nada além da moldura, e o texto é um nó só.
*
* 2. O botão do desenho também é de banda, encostado a x=36.38. O nosso
* fica no cartão, porque cada cartão tem o seu destino, e por isso fica
* centrado com ele. Tirá-lo de lá obrigava a espelhar em JavaScript o
* link do cartão activo para fora do carrossel. Fica a divergência: o
* botão está ~104px à direita do desenho.
*/
/*
* A descrição é do CARTÃO e muda com ele, como o título. Esteve escondida
* em mobile por eu ter lido o parágrafo em itálico do frame como sendo ela;
* é o texto de apoio da SECÇÃO (nó 4002:191, 298 de largura contra os 228
* do cartão), e esse fica onde está. São duas coisas diferentes e o desenho
* mostra as duas.
*/
/* Os 46.67 são o que vai do fim da moldura ao topo do botão no desenho
(339.38 -> 386.05). */
.destaque__cta {
margin-top: 46.67px;
}
/*
* O apoio fica em fluxo, logo a seguir ao carrossel, e não nas coordenadas
* do frame. No desenho ele vem ANTES do botão, mas o botão vive dentro do
* cartão — cada cartão tem o seu destino — e um irmão do carrossel não se
* consegue intercalar no fluxo de um filho dele. Trocar isso obrigava a
* espelhar em JavaScript o link do cartão activo para fora do carrossel.
*
* Fica a divergência: régua e triângulo por baixo do botão em vez de por
* cima. As medidas internas do bloco são as do frame.
*/
/*
* 24 entre a descrição do cartão e o parágrafo de apoio, contra os 8 que
* aqui estavam.
*
* Não há nó que meça este intervalo: no frame mobile o cartão não tem
* descrição — o único parágrafo é o de apoio, e encosta ao fim da moldura
* (338.91 contra 339.38). O par descrição/apoio é nosso, por o Ricardo ter
* mandado repor a descrição, e por isso o valor é escolhido: --sp-6, que é
* o mesmo ritmo interno do cartão em desktop (24.00 do texto ao que vem a
* seguir, medido).
*/
.destaques__apoio {
margin-top: var(--sp-6);
padding-inline: 0;
margin-left: 36.23px;
width: 298px;
max-width: calc(100% - 36.23px);
}
.destaques__apoio p {
display: block;
max-width: none;
}
/* A régua: 292.86 contra os 298 do parágrafo, e 1.24 mais à esquerda. */
.destaques__apoio::after {
width: 292.86px;
max-width: 100%;
margin-top: 4.69px;
margin-left: -1.24px;
}
/* O triângulo. O centro do nó cai em x=183.77, que sobre a caixa do apoio
(a começar em 36.23) dá 147.54 — não é o centro dela. */
.destaques__ler-mais {
top: calc(100% + 4.08px);
left: 147.54px;
width: 17.24px;
height: 14.93px;
/* O `translateX(-50%)` da regra de cima FICA: o 147.54 é o centro do nó
sobre a caixa do apoio, não a aresta esquerda. */
}
/*
* O botão da banda — nó 4002:285, 85.2x28 em x=36.38, y=386.05 (banda-rel).
* Vem a seguir ao apoio, por isso fica por baixo da régua e do triângulo,
* como no desenho. Os 15.04 são o que vai do fim da régua (371.01) ao topo
* do botão.
*
* Sobrepõe-se ao triângulo na vertical (374.74..389.67 contra 386.05..414.05)
* mas não na horizontal — o triângulo está em 175.15..192.39 e o botão em
* 36.38..121.58. É o que o desenho faz.
*/
.destaques__cta {
display: inline-flex;
margin-top: 15.04px;
margin-left: 36.38px;
width: 85.2px;
min-width: 0;
height: 28px;
min-height: 0;
padding-inline: 0;
justify-content: center;
align-items: center;
}
/* Os 64.6 que no desenho vão do fim do botão (414.05) ao fim da banda
(478.65). O triângulo é absoluto e já não é o elemento mais baixo. */
.destaques.section {
padding-bottom: 64.6px;
}
}