/* ========================================================================== CLÍNICA MÉDICA VITA — kit do tema Base: reset, grelha, cabeçalho/navegação e rodapé. As secções da homepage (herói, pilares, galeria, notícias…) entram aqui à medida que forem implementadas a partir do Figma. As variáveis de cor vêm de themes/clinicamedicavita/partials/design-tokens.blade.php (injectado no ), para poderem ser lidas/alteradas por Blade. ========================================================================== */ /* ── Fontes do tema ────────────────────────────────────────────────────── Todas servidas do PRÓPRIO domínio — nada de fonts.googleapis.com: esse pedido entrega o IP do visitante a um terceiro e já rendeu coimas de RGPD. Ficheiros e instruções em fonts/LEIA-ME.md. TÍTULOS: a Canela manda, a Playfair Display é a segunda escolha. A pilha é `'Canela','Playfair Display','Georgia',serif` (ver design-tokens.blade.php). ⚠️ A CANELA NÃO SE DECLARA AQUI. O `@font-face` dela é emitido pelo design-tokens.blade.php e SÓ SE OS FICHEIROS EXISTIREM. Um `@font-face` fixo a apontar para ficheiros em falta fazia o browser pedir dois ficheiros e receber dois 404 em cada página carregada — pedidos desperdiçados e dois erros permanentes na consola, que alguém acabaria por vir investigar. Sendo Blade, dá para perguntar se o ficheiro lá está; num .css estático não dá. Consequência prática: assim que a Canela for licenciada e os dois .woff2 forem colocados na pasta, ela entra sozinha. Não há uma linha de código a mudar. */ /* Playfair Display — a alternativa livre (SIL Open Font License 1.1, ver PLAYFAIRDISPLAY-LICENSE.txt na pasta das fontes). Fica sempre declarada: é o que se vê enquanto não houver Canela, e é a rede se um dia a licença dela caducar. ⚠️ UM SÓ FICHEIRO, E O INTERVALO É 200–450 DE PROPÓSITO. A Playfair Display começa no peso 400 — não tem 250 nem 300, que é o que o desenho pede em 19 das 20 regras de título. Foi escolhida assim, com essa consequência conhecida: os títulos saem mais pesados do que no Figma. Declarar o ficheiro de 400 a cobrir 200–450 faz o browser usá-lo tal e qual para os três pesos. SEM esse intervalo, um pedido de peso 250 contra uma face declarada só a 400 leva alguns browsers a SINTETIZAR — a desenhar um traço mais fino por conta própria —, e o resultado é irregular de browser para browser. É o mesmo motivo por que a Canela está declarada a 200–350. Se um dia for preciso um título mais forte, a Medium (500) é uma linha a mais; os ficheiros que não são pedidos não chegam a ser descarregados. */ @font-face{font-family:'Playfair Display';font-weight:200 450;font-style:normal;font-display:swap; src:url('/themes/clinicamedicavita/fonts/PlayfairDisplay-Regular.woff2') format('woff2')} @font-face{font-family:'Poppins';font-weight:300;font-style:normal;font-display:swap; src:url('/themes/clinicamedicavita/fonts/Poppins-Light.woff2') format('woff2')} @font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap; src:url('/themes/clinicamedicavita/fonts/Poppins-Regular.woff2') format('woff2')} @font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap; src:url('/themes/clinicamedicavita/fonts/Poppins-Medium.woff2') format('woff2')} @font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap; src:url('/themes/clinicamedicavita/fonts/Poppins-Bold.woff2') format('woff2')} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--branco);color:var(--tinta); font-family:var(--f-corpo);font-size:1rem;line-height:1.6; -webkit-font-smoothing:antialiased} img,svg{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3{font-family:var(--f-titulo);font-weight:400;line-height:1.15;letter-spacing:-.01em;margin:0} p{margin:0 0 1rem} ul{margin:0;padding:0;list-style:none} /* A goteira vive numa VARIÁVEL e não escrita à mão no `min()`: o `.wrap` é a coluna de todo o site, e o valor tem agora dois estados. Uma variável deixa a media query trocar só o número, sem repetir a fórmula — e sem correr o risco de as duas cópias divergirem. O valor é o TOTAL das duas goteiras: 3rem = 1.5rem de cada lado. */ .wrap{--goteira:3rem;width:min(100% - var(--goteira),var(--wrap));margin-inline:auto} /* Entre os 640px e os 1360px a goteira DUPLICA (3rem de cada lado). É a faixa onde a janela já não tem largura para as margens generosas do desenho mas ainda é larga de mais para o conteúdo colar às bordas. Abaixo dos 640px volta ao valor pequeno: num telemóvel, 3rem de cada lado comiam quase um quinto do ecrã. `1359.98px` e não `1359px` para apanhar as janelas de largura fraccionária (ecrãs com zoom do browser) sem deixar um vão entre as duas regras. */ @media (min-width:640px) and (max-width:1359.98px){ .wrap{--goteira:6rem} } .sec{padding:clamp(3.5rem,8vw,6.5rem) 0} .sec--alt{background:var(--areia)} /* Acessibilidade: saltar para o conteúdo (visível só com teclado) */ .skip{position:absolute;left:-9999px;top:0;z-index:100; background:var(--branco);color:var(--verde);padding:.75rem 1.25rem} .skip:focus{left:1rem;top:1rem} :focus-visible{outline:2px solid var(--verde-claro);outline-offset:3px} /* ── Botões ─────────────────────────────────────────────────────────────── */ /* Medidas do Figma (node 1032:539): 243×38, fundo #5E7975, Canela 300 16px/30px em branco, espaçamento interno 4px 16px. A altura de 38px sai das contas — 4 + 30 + 4 — por isso não é preciso fixá-la. Duas diferenças propositadas em relação ao que o Figma exporta: · `inline-flex` e não `flex`: em bloco, o botão ocupava a linha toda e deixava de acompanhar o alinhamento à direita das etapas pares da cronologia. · `min-width` e não `width`: 243px é a largura do botão «ver mais». Fixa, um rótulo mais comprido (ou traduzido) transbordava a caixa. Assim o desenho mantém-se e o texto maior empurra. */ .btn{display:inline-flex;flex-direction:row;justify-content:center;align-items:center; gap:10px;min-width:243px;padding:4px 16px; /* Sem borda: no desenho o botão é só fundo. Com 1px, os 4+30+4 = 38px passavam a 40 — a borda soma-se por fora quando a altura é automática. */ /* CANTOS VIVOS. Era `var(--raio)` (4px), e todas as secções que foram sendo desenhadas pediram 0 uma a uma — cronologia, especialidades, pilares. Ao terceiro pedido a excepção passou a ser a regra: quem quer cantos redondos é só o `.btn--pilula`, e esse traz o seu próprio raio. */ background:var(--verde);border:0;border-radius:0; /* POPPINS, não a fonte de título. O rótulo de um botão é interface, não título: lê-se de relance e a serifada da Playfair fica arrastada nos 16px. Medido: a caixa não muda — o `min-width:243px` continua a mandar mesmo no rótulo mais comprido do site, e a altura mantém-se nos 38px. Herda para o `.btn--pilula`; o peso 250 dele cai nos 300 da Poppins, que é o único peso leve declarado. */ font-family:var(--f-corpo);font-weight:300;font-size:16px;line-height:30px; color:var(--branco);text-decoration:none; transition:background .2s,border-color .2s,color .2s} .btn:hover{background:var(--verde-escuro);color:var(--branco)} /* Alias retido: as views já criadas usam-no e agora é o mesmo que `.btn`. */ .btn--cheio{background:var(--verde);color:var(--branco)} /* Pílula — o botão do formulário de contacto (Figma node 177:39). Difere do botão base em tudo menos na cor: 290×52 em vez de 243×38, cantos completamente redondos, e o rótulo a 22px em vez de 16px. É maior de propósito: é o único botão da página que submete dados, e o alvo tem de o dizer. */ .btn--pilula{min-width:290px;min-height:52px;padding:10px;gap:15px; border-radius:100px;font-weight:250;font-size:22px;line-height:22px} /* Contorno, para fundos onde o verde cheio não se distingue. */ .btn--linha{background:transparent;border:1px solid currentColor;color:var(--verde);padding:3px 15px} .btn--linha:hover{background:var(--verde);border-color:var(--verde);color:var(--branco)} /* ── Cabeçalho ────────────────────────────────────────────────────────────── Duas versões, como no desenho: .cab--sobre HOME — dentro do herói, transparente, texto branco .cab--branca RESTANTES — barra branca, logótipo a cores, menu verde (Figma node 1046:732) .cab--solida (verde compacto) fica como recurso para páginas sem nenhuma das duas. Medidas do desenho: barra de 140px, logótipo de 296×90, menu em Canela 20px. ------------------------------------------------------------------------- */ .cab{z-index:50} .cab-in{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem} .marca{display:inline-block;text-decoration:none} .marca img{width:auto;max-height:80px} .marca-txt{display:block;font-family:var(--f-titulo);color:currentColor;line-height:1.1} .marca-txt strong{display:block;font-weight:300;font-size:1.9rem;letter-spacing:.3em} .marca-txt em{display:block;font-style:normal;font-size:.6rem;letter-spacing:.34em; text-transform:uppercase;opacity:.85;margin-top:.35rem;padding-left:.3em} /* HOME — sobre o herói */ .cab--sobre{position:absolute;inset:0 0 auto;color:var(--branco);pointer-events:none} /* A MESMA medida do slider — é ela que pousa a navegação no fundo do herói. */ .cab--sobre .cab-in{min-height:var(--heroi-altura);padding:1.5rem 0 0;align-items:flex-start} .cab--sobre .marca,.cab--sobre .cab-nav,.cab--sobre .cab-abrir{pointer-events:auto} .cab--sobre .cab-nav{align-self:flex-end;padding-bottom:0} /* Recurso: barra verde compacta */ .cab--solida{position:sticky;top:0;background:var(--verde);color:var(--branco)} .cab--solida .cab-in{align-items:center;min-height:96px;padding-block:.75rem} .cab--solida .marca img{max-height:56px} /* RESTANTES PÁGINAS — barra branca */ .cab--branca{position:sticky;top:0;background:var(--branco);color:var(--verde); box-shadow:0 4px 10px 0 rgba(0,0,0,.10)} .cab--branca .cab-in{align-items:center;min-height:140px;padding-block:1rem} .cab--branca .marca img{max-height:80px} /* Só a cor e a opacidade: a Canela a 20px já vem da regra base. O VERDE tem de ficar — a barra desta variante é branca, e o #FFF do Figma (que é a cor do menu sobre o herói) daria texto branco sobre fundo branco. */ .cab--branca .cab-nav a{opacity:1;color:var(--verde)} /* Fundos (hover e item activo) desenhados no
  • e não no : sem padding no , o fundo ficava colado às letras. O
  • é que tem os 10px à volta. SEM raio: no Figma (node 104:263) o item activo é um rectângulo de cantos vivos, e não a pílula que o resto do tema usa nos botões. Confirmado no desenho — não é esquecimento. */ /* ── Rectângulo do item: desce até ao fundo da barra ───────────────────────── Figma node 1046:719. O item destacado (activo OU apontado) mede 90px contra os 40px dos restantes: mesmo topo, a 50,45px, e limite inferior coincidente com o do cabeçalho. Desenhado num ::before e NÃO no fundo do
  • : o
  • continua a medir os 40px do token. Dar-lhe 90px de altura fazia-o re-centrar no flex do