/* ========================================================================== Tarot Alexandra Ramos Folha de estilo unica e partilhada Tema: amarracao amorosa de magia branca e leituras de tarot Acento: salmao. Tinta: azul escuro. Nenhum hexadecimal fora de :root ========================================================================== */ /* Tipos de letra, alojados no proprio site (assets/fontes/), nao na Google. Antes disto, o carregava fonts.googleapis.com antes de a pessoa responder ao aviso de cookies, o que envia o IP de quem visita para a Google sem consentimento. Ficheiros variaveis: um unico .woff2 por familia cobre os pesos 400 a 600 todos, sem repetir bytes por peso. So o subconjunto "latin" (U+0000-00FF, pontuacao, simbolo do euro): cobre por completo os acentos do portugues europeu e o €, o "latin-ext" nao acrescenta nenhum carater que o site use. */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fontes/cormorant-garamond-latin.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: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fontes/inter-tight-latin.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 { /* Tinta, azul escuro, texto e traco estrutural */ --azul-profundo: #1B2A47; --azul-carregado: #16233B; --azul-rotulo: #3F5F91; /* Salmao, cor de acento e de todas as ilustracoes */ --salmao-profundo: #8F4436; --salmao: #D97F69; --salmao-suave: #F4C9BC; --salmao-vapor: #FBEDE7; /* Neutros, com leve vies frio */ --branco: #FFFFFF; --branco-quebrado: #FDF9F7; --cinza-100: #F1EFF6; --cinza-200: #E4DEEE; --cinza-300: #C9C1DA; --cinza-500: #8A8399; --cinza-700: #55506A; /* Papeis semanticos */ --texto: #1B2A47; --texto-suave: #4A5168; --superficie: #FFFFFF; --superficie-alt: #FBEDE7; --linha: #F3DDD5; --fundo: #FDF9F7; --foco: #8F4436; /* ======================================================================== Sistema mobile: fronteiras, camadas, toque e zonas seguras Ver SISTEMA-MOBILE.md. Nenhum z-index fora desta lista de camadas. ======================================================================== */ /* ---- Fronteiras. Quatro, e mais nenhuma. -------------------------- */ /* telemovel-pequeno ate 479 (base, sem media query) telemovel-grande 480 telefones modernos ao alto tablet 768 tablets ao alto e telefones deitados secretaria 1024 portateis largo 1280 ecras grandes */ /* ---- Altura de toque -------------------------------------------- */ --toque-min: 48px; /* nada clicavel pode ser menor */ --toque-conforto: 56px; /* accoes principais */ --toque-folga: 8px; /* espaco livre minimo entre dois alvos */ /* ---- Margens laterais, seguem o tamanho do ecra ------------------ */ --margem-lateral: clamp(1rem, 5vw, 3rem); /* ---- Respiracao vertical entre seccoes -------------------------- */ --ar-seccao: clamp(3.5rem, 9vw, 9rem); --ar-bloco: clamp(1.75rem, 4.5vw, 3rem); /* ---- Camadas. Nunca escrever um z-index fora desta lista. -------- */ --z-fundo: 0; --z-conteudo: 1; --z-pegajoso: 10; /* indice lateral, cabecalhos de tabela */ --z-cabecalho: 100; --z-progresso: 105; --z-flutuante: 110; /* whatsapp e voltar ao topo */ --z-barra-movel: 120; --z-painel: 200; /* menu lateral */ --z-ampliacao: 300; /* sobreposicao de imagem */ --z-cookies: 400; /* tem de ficar acima de tudo */ /* ---- Zonas seguras do telemovel (notch e barra de gestos) -------- */ --seguro-cima: env(safe-area-inset-top, 0px); --seguro-baixo: env(safe-area-inset-bottom, 0px); --seguro-esq: env(safe-area-inset-left, 0px); --seguro-dir: env(safe-area-inset-right, 0px); /* ---- Alturas dos elementos fixos, para calcular folgas ----------- */ --alt-cabecalho: 64px; --alt-barra-movel: 60px; /* Padrao de fundo, sois, luas e cristais a salmao, tile SVG */ --padrao-fundo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23D97F69' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle class='orn' cx='70.0' cy='74.0' r='16.00' stroke-width='1.1'/%3E%3Cline class='orn' x1='88.0' y1='74.0' x2='94.0' y2='74.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='85.6' y1='83.0' x2='90.8' y2='86.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='79.0' y1='89.6' x2='82.0' y2='94.8' stroke-width='1.1'/%3E%3Cline class='orn' x1='70.0' y1='92.0' x2='70.0' y2='98.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='61.0' y1='89.6' x2='58.0' y2='94.8' stroke-width='1.1'/%3E%3Cline class='orn' x1='54.4' y1='83.0' x2='49.2' y2='86.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='52.0' y1='74.0' x2='46.0' y2='74.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='54.4' y1='65.0' x2='49.2' y2='62.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='61.0' y1='58.4' x2='58.0' y2='53.2' stroke-width='1.1'/%3E%3Cline class='orn' x1='70.0' y1='56.0' x2='70.0' y2='50.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='79.0' y1='58.4' x2='82.0' y2='53.2' stroke-width='1.1'/%3E%3Cline class='orn' x1='85.6' y1='65.0' x2='90.8' y2='62.0' stroke-width='1.1'/%3E%3Cpath class='orn' stroke-width='1.1' d='M300 45 a15 15 0 1 0 0 30 a10 10 0 1 1 0 -30 z'/%3E%3Cpath class='orn' stroke-width='1' d='M200 141 l6 8 l-5 12 l-1 0 l-4 -12 z M200 141 l0 20'/%3E%3Cpath class='orn' stroke-width='1' d='M360 193 l4 6 l-4 9 l-1 0 l-3 -9 z M360 193 l0 16'/%3E%3Ccircle class='orn' cx='330.0' cy='320.0' r='14.00' stroke-width='1.1'/%3E%3Cline class='orn' x1='346.0' y1='320.0' x2='352.0' y2='320.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='343.9' y1='328.0' x2='349.1' y2='331.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='338.0' y1='333.9' x2='341.0' y2='339.1' stroke-width='1.1'/%3E%3Cline class='orn' x1='330.0' y1='336.0' x2='330.0' y2='342.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='322.0' y1='333.9' x2='319.0' y2='339.1' stroke-width='1.1'/%3E%3Cline class='orn' x1='316.1' y1='328.0' x2='310.9' y2='331.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='314.0' y1='320.0' x2='308.0' y2='320.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='316.1' y1='312.0' x2='310.9' y2='309.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='322.0' y1='306.1' x2='319.0' y2='300.9' stroke-width='1.1'/%3E%3Cline class='orn' x1='330.0' y1='304.0' x2='330.0' y2='298.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='338.0' y1='306.1' x2='341.0' y2='300.9' stroke-width='1.1'/%3E%3Cline class='orn' x1='343.9' y1='312.0' x2='349.1' y2='309.0' stroke-width='1.1'/%3E%3Cpath class='orn' stroke-width='1.1' d='M90 287 a13 13 0 1 0 0 26 a9 9 0 1 1 0 -26 z'/%3E%3Cpath class='orn' stroke-width='1' d='M150 332 l5 7 l-4 11 l-1 0 l-4 -11 z M150 332 l0 18'/%3E%3Ccircle class='orn' cx='240.0' cy='240.0' r='11.00' stroke-width='1.1'/%3E%3Cline class='orn' x1='253.0' y1='240.0' x2='259.0' y2='240.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='251.3' y1='246.5' x2='256.5' y2='249.5' stroke-width='1.1'/%3E%3Cline class='orn' x1='246.5' y1='251.3' x2='249.5' y2='256.5' stroke-width='1.1'/%3E%3Cline class='orn' x1='240.0' y1='253.0' x2='240.0' y2='259.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='233.5' y1='251.3' x2='230.5' y2='256.5' stroke-width='1.1'/%3E%3Cline class='orn' x1='228.7' y1='246.5' x2='223.5' y2='249.5' stroke-width='1.1'/%3E%3Cline class='orn' x1='227.0' y1='240.0' x2='221.0' y2='240.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='228.7' y1='233.5' x2='223.5' y2='230.5' stroke-width='1.1'/%3E%3Cline class='orn' x1='233.5' y1='228.7' x2='230.5' y2='223.5' stroke-width='1.1'/%3E%3Cline class='orn' x1='240.0' y1='227.0' x2='240.0' y2='221.0' stroke-width='1.1'/%3E%3Cline class='orn' x1='246.5' y1='228.7' x2='249.5' y2='223.5' stroke-width='1.1'/%3E%3Cline class='orn' x1='251.3' y1='233.5' x2='256.5' y2='230.5' stroke-width='1.1'/%3E%3Cpath class='orn' stroke-width='1' d='M50 184 l4 5 l-3 8 l-1 0 l-3 -8 z M50 184 l0 13'/%3E%3Cpath class='orn' stroke-width='1.1' d='M390 369 a11 11 0 1 0 0 22 a7 7 0 1 1 0 -22 z'/%3E%3Cpath class='orn' stroke-width='1' d='M280 373 l4 6 l-4 9 l-1 0 l-3 -9 z M280 373 l0 16'/%3E%3Cpath class='orn' stroke-width='1' d='M120 94 l4 5 l-3 8 l-1 0 l-3 -8 z M120 94 l0 13'/%3E%3C/g%3E%3C/svg%3E"); /* Veu sobre o padrao de fundo, para nunca competir com o texto */ --veu: rgba(250, 248, 253, 0.72); /* Tipografia */ --fonte-titulo: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --fonte-corpo: "Inter Tight", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; --corpo-tamanho: 1.125rem; --corpo-entrelinha: 1.65; --medida: 68ch; /* Escala de espacamento, base 8 px */ --e-1: 0.5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem; --e-5: 3rem; --e-6: 4rem; --e-7: 6rem; --e-8: 8rem; /* Em telemovel a respiracao vertical de cada seccao fica no minimo da escala; a partir de 768px volta ao clamp largo de sempre. */ --seccao-y: var(--e-5); /* Raios e sombras */ --raio-s: 6px; --raio-m: 14px; --raio-l: 24px; --sombra-suave: 0 1px 2px rgba(27, 42, 71, 0.05), 0 12px 32px rgba(27, 42, 71, 0.07); --sombra-media: 0 2px 6px rgba(27, 42, 71, 0.07), 0 24px 60px rgba(27, 42, 71, 0.12); --sombra-salmao: 0 18px 50px rgba(143, 68, 54, 0.22); /* Movimento */ --curva: cubic-bezier(0.16, 1, 0.3, 1); --tempo-revelar: 700ms; --tempo-hover: 200ms; /* Larguras */ --largura-conteudo: 1200px; --largura-estreita: 760px; } @media (min-width: 768px) { :root { --alt-cabecalho: 76px; } } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; } body { margin: 0; background-color: var(--fundo); color: var(--texto); font-family: var(--fonte-corpo); font-size: var(--corpo-tamanho); line-height: var(--corpo-entrelinha); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } /* Bloqueio de scroll robusto (funciona no Safari de iPhone, ao contrario de overflow:hidden isolado). O JS grava o scrollY em body.style.top antes de fixar, e repoe a posicao exata ao libertar. Ver main.js: prenderScroll/libertarScroll. */ body[data-preso] { position: fixed; width: 100%; overflow: hidden; overscroll-behavior: none; } /* Camada de fundo fixa, sois, luas e cristais a salmao, muito discreta. Coberta por um veu. Nunca por tras de blocos de texto corrido. z-index -1 e intencional: fica atras do conteudo normal, que pinta a 0. Nao faz parte da escala --z-*, por isso mantem-se numerico. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--fundo); background-image: linear-gradient(var(--veu), var(--veu)), var(--padrao-fundo); background-repeat: no-repeat, repeat; background-position: center, 0 var(--paralaxe-fundo, 0px); background-size: 100% 100%, 420px 420px; } img, svg { max-width: 100%; display: block; } a { color: var(--salmao-profundo); text-decoration-color: var(--salmao); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--salmao-profundo); } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 2px; } /* Alcance de toque universal: nada clicavel abaixo de 48px. Excepcao (secao 7 do sistema mobile): ligacoes dentro de texto corrido, que nao ganham caixa de toque, mas sim folga vertical (ver .texto-corrido a). */ a, button, [role="button"], summary, label { min-height: var(--toque-min); min-width: var(--toque-min); } /* Ligacoes dentro de prosa: sem caixa de toque artificial, so folga */ .migalhas a, .rodape__fundo a, .cookies p a, .testemunho-cartao cite .ligacao-discreta, .citacao-destaque cite .ligacao-discreta, .ligacao-linha, p a { min-height: 0; min-width: 0; padding: 0.25em 0; line-height: 1.6; } .saltar-conteudo { position: absolute; left: -9999px; top: 0; background: var(--azul-profundo); color: var(--branco); padding: var(--e-2) var(--e-3); z-index: var(--z-cookies); border-radius: 0 0 var(--raio-s) 0; } .saltar-conteudo:focus { left: 0; } .visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== Tipografia ========================================================================== */ h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 500; color: var(--azul-profundo); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 var(--e-3); text-wrap: balance; hyphens: auto; } h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); letter-spacing: -0.03em; } h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); } h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing: -0.015em; } h4 { font-size: 1.2rem; letter-spacing: -0.01em; } p { margin: 0 0 var(--e-3); max-width: var(--medida); text-wrap: pretty; hyphens: auto; } .entrada { font-family: var(--fonte-titulo); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.45; font-weight: 400; color: var(--texto-suave); letter-spacing: -0.01em; max-width: 46ch; text-wrap: pretty; } .sobretitulo { font-family: var(--fonte-corpo); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.78rem; font-weight: 600; color: var(--salmao-profundo); margin: 0 0 var(--e-3); } .texto-suave { color: var(--texto-suave); } .destaque { color: var(--salmao-profundo); font-style: normal; } ul, ol { padding-left: 1.2em; max-width: var(--medida); margin: 0 0 var(--e-3); } li { margin-bottom: var(--e-2); } ul.marcada { list-style: none; padding-left: 0; } ul.marcada > li { position: relative; padding-left: 1.8rem; } ul.marcada > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--salmao); } .areas, .navegacao__lista, .rodape ul, .lista-contacto, .grelha, .indice__lista, .testemunhos { max-width: none; padding-left: 0; list-style: none; } .areas li, .navegacao__lista li, .rodape li, .lista-contacto li, .indice__lista li { margin-bottom: 0; } blockquote { margin: 0; font-family: var(--fonte-titulo); font-size: 1.4rem; line-height: 1.5; color: var(--texto); } hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e-6) 0; } /* ========================================================================== Layout e seccoes ========================================================================== */ .envolver { width: 100%; max-width: var(--largura-conteudo); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .envolver-estreito { max-width: var(--largura-estreita); } .seccao { position: relative; padding-block: var(--seccao-y); background-color: var(--superficie); } @media (min-width: 768px) { :root { --seccao-y: clamp(4.5rem, 10vw, 10rem); } } .seccao--alt { background-color: var(--superficie-alt); } /* Secoes que nao sao de leitura corrida (faixa de prova, grelha de areas, perguntas frequentes) nao precisam da mesma respiracao que as secoes de texto: em telemovel ficam com metade. */ .seccao--compacta { padding-block: calc(var(--seccao-y) / 2); } .seccao--salmao { background-color: var(--salmao-profundo); background-image: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 60%); color: var(--salmao-vapor); } .seccao--salmao h1, .seccao--salmao h2, .seccao--salmao h3 { color: var(--branco); } .seccao--salmao .sobretitulo { color: var(--salmao-suave); } .seccao--salmao a:not(.botao) { color: var(--branco); } .seccao--salmao .filete { background: var(--salmao-suave); } .seccao--salmao .botao--secundario { color: var(--branco); border-color: var(--salmao-suave); } .seccao--salmao .botao--secundario::before { background: rgba(255, 255, 255, 0.16); } .seccao--salmao .botao--secundario:hover { color: var(--branco); border-color: var(--branco); } .grelha { display: grid; gap: var(--e-4); } .grelha--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .grelha--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .grelha--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .cabecalho-seccao { max-width: 46ch; margin-bottom: var(--e-6); } .cabecalho-seccao--centro { margin-inline: auto; text-align: center; } .cabecalho-seccao--centro p { margin-inline: auto; } .filete { width: 64px; height: 2px; background: var(--salmao); border-radius: 2px; margin: var(--e-3) 0 var(--e-4); } .cabecalho-seccao--centro .filete { margin-inline: auto; } /* Seccoes largas com texto alinhado a esquerda: a 1024px+ o texto sozinho deixa metade do ecra vazia. Passa a duas colunas, com uma ilustracao grande e discreta a preencher o lado direito. */ .duas-colunas__figura { display: none; } @media (min-width: 1024px) { .duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--e-6); } .duas-colunas__conteudo { min-width: 0; } .duas-colunas__conteudo .cabecalho-seccao { margin-bottom: var(--e-4); } .duas-colunas__figura { display: flex; align-items: center; justify-content: center; height: 100%; } .duas-colunas__figura svg { width: 100%; max-width: 320px; height: auto; opacity: 0.12; } } /* Miolo com frestas para o padrao respirar */ main { display: flex; flex-direction: column; gap: clamp(10px, 2.4vw, 26px); padding-top: clamp(10px, 2.4vw, 26px); } main > * { min-width: 0; } .respiro { height: clamp(44px, 7vw, 84px); background: transparent; flex: none; } .respiro + .seccao { padding-top: clamp(1.5rem, 4vw, 3rem); } /* Cabecalho de pagina interior */ .intro-pagina { position: relative; background-color: var(--superficie); padding-block: clamp(2.25rem, 6vw, 4rem) 0; } .intro-pagina h1 { margin-bottom: var(--e-3); } .intro-pagina .entrada { margin-bottom: 0; } /* ========================================================================== Barra de progresso de leitura ========================================================================== */ .progresso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: var(--z-progresso); background: transparent; pointer-events: none; } .progresso__barra { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--salmao), var(--salmao-profundo)); } /* ========================================================================== Cabecalho fixo, encolhe ao descer ========================================================================== */ /* O painel do menu (.navegacao-camada) vive dentro do cabecalho, como qualquer nav normal. O problema real era o backdrop-filter: um elemento com backdrop-filter passa a ser o bloco de contencao de qualquer descendente com position:fixed, e o painel (fixed, inset:0) ficava a resolver contra a caixa do cabecalho (uns 78px) em vez de contra o ecra inteiro. A correcao nao e mudar o painel de sitio, e tirar o backdrop-filter do proprio .cabecalho: fica num ::before dele (fundo e desfoque incluidos), porque um pseudo-elemento nao tem descendentes e por isso nao cria bloco de contencao nenhum. isolation:isolate mantem o z-index:-1 do ::before preso dentro do cabecalho, sem afundar por baixo de outro conteudo da pagina. */ .cabecalho { position: sticky; top: 0; z-index: var(--z-cabecalho); isolation: isolate; padding-top: var(--seguro-cima); border-bottom: 1px solid transparent; transition: border-color var(--tempo-hover) ease; } /* isolation:isolate (acima) prende o painel do menu (.navegacao-camada, z-index:var(--z-painel)) dentro do contexto de empilhamento do proprio cabecalho: o seu z-index interno de 200 deixa de contar lá fora, e o que conta e o z-index do cabecalho como um todo (100), mais baixo do que o da .cortina (199). Resultado: com o menu aberto, a cortina pintava por cima do painel e tapava os links aos toques. Enquanto o menu esta mesmo aberto, o cabecalho sobe acima da cortina e do painel; fechado, volta ao nivel normal, so acima do conteudo da pagina que desliza por baixo dele. */ .cabecalho:has(.navegacao[data-aberta="sim"]) { z-index: calc(var(--z-painel) + 1); } .cabecalho::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--fundo) 82%, transparent); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); transition: background var(--tempo-hover) ease; } .cabecalho[data-deslocado="sim"] { border-bottom-color: var(--linha); } .cabecalho[data-deslocado="sim"]::before { background: color-mix(in srgb, var(--fundo) 95%, transparent); } .cabecalho__interior { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 78px; transition: min-height var(--tempo-hover) ease; } .cabecalho[data-deslocado="sim"] .cabecalho__interior { min-height: 62px; } .marca { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--azul-profundo); } .marca__simbolo { width: 34px; height: 34px; flex: none; color: var(--salmao-profundo); } .marca__nome { font-family: var(--fonte-titulo); font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.05; } /* ---------------------------------------------------------------- menu Mobile-first: por omissao (ecras estreitos) o menu e um painel lateral escondido. A partir de 1024px, torna-se a barra horizontal habitual. */ .navegacao-camada { display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: var(--z-painel); } .navegacao { position: absolute; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--e-2); background: var(--branco); border-left: 1px solid var(--linha); box-shadow: var(--sombra-media); padding: 5.5rem clamp(1.5rem, 6vw, 2.25rem) var(--e-4); transform: translateX(105%); transition: transform 320ms var(--curva), visibility 0s linear 320ms; overflow-y: auto; pointer-events: none; visibility: hidden; } .navegacao[data-aberta="sim"] { transform: translateX(0); pointer-events: auto; visibility: visible; transition: transform 320ms var(--curva), visibility 0s; } .navegacao__lista { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .navegacao__ligacao { display: flex; align-items: center; min-height: var(--toque-min); padding: 0.6rem 0; border-bottom: 1px solid var(--linha); font-size: 1.08rem; text-decoration: none; color: var(--texto-suave); position: relative; transition: color var(--tempo-hover) ease; } .navegacao__ligacao::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 2px; background: var(--salmao); transform: scaleX(0); transform-origin: left; transition: transform var(--tempo-hover) var(--curva); display: none; } .navegacao__ligacao:hover, .navegacao__ligacao[aria-current="page"] { color: var(--azul-profundo); } .alternar-menu { display: inline-flex; width: var(--toque-min); height: var(--toque-min); border: 1px solid var(--linha); background: var(--branco); border-radius: var(--raio-s); align-items: center; justify-content: center; cursor: pointer; } .alternar-menu svg { width: 20px; height: 20px; color: var(--azul-profundo); } /* Cortina do painel lateral. Fica UM nivel abaixo do painel (calc, nao um numero solto), e as duas ficam acima de var(--z-cabecalho): ver a nota em .cabecalho sobre o backdrop-filter e o painel ter sido movido para fora dele. */ .cortina { position: fixed; inset: 0; z-index: calc(var(--z-painel) - 1); background: rgba(27, 42, 71, 0.4); opacity: 0; pointer-events: none; transition: opacity var(--tempo-hover) ease; } .cortina[data-visivel="sim"] { opacity: 1; pointer-events: auto; } .navegacao__fechar { position: absolute; top: 1.1rem; right: 1.1rem; width: var(--toque-min); height: var(--toque-min); border: 1px solid var(--linha); background: var(--branco); border-radius: var(--raio-s); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .navegacao__fechar svg { width: 18px; height: 18px; color: var(--azul-profundo); } .cabecalho__interior > .botao--wpp { display: none; } .navegacao .botao--wpp { margin-top: var(--e-2); width: 100%; } @media (min-width: 1024px) { /* A .navegacao-camada volta a ser filha do cabecalho no HTML. Aqui desfaz-se so a parte fixa do menu-lateral-mobile: em ecra largo nao ha painel nenhum, e display:contents remove esta caixa do calculo de layout, deixando a .navegacao (que passa a position:static) ser apanhada como se fosse filha direta do flex de .cabecalho__interior. */ .navegacao-camada { display: contents; } .navegacao { position: static; width: auto; flex-direction: row; align-items: center; gap: clamp(0.35rem, 1vw, 1.1rem); background: none; border-left: 0; box-shadow: none; padding: 0; transform: none; transition: none; overflow: visible; pointer-events: auto; visibility: visible; } .navegacao__lista { flex-direction: row; align-items: center; gap: clamp(0.35rem, 1vw, 1.1rem); } .navegacao__ligacao { display: inline-flex; padding: 0.5rem 0.15rem; border-bottom: 0; font-size: 0.9rem; font-weight: 500; white-space: nowrap; } .navegacao__ligacao::after { display: block; } .navegacao__ligacao:hover::after, .navegacao__ligacao[aria-current="page"]::after { transform: scaleX(1); } .marca__nome { white-space: nowrap; } .alternar-menu { display: none; } .navegacao__fechar { display: none; } .cabecalho__interior > .botao--wpp { display: inline-flex; } .navegacao > .botao--wpp { display: none; } } /* ========================================================================== Botoes ========================================================================== */ .botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: var(--toque-min); font-family: var(--fonte-corpo); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.95rem 1.7rem; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform var(--tempo-hover) var(--curva), color var(--tempo-hover) ease, border-color var(--tempo-hover) ease, box-shadow var(--tempo-hover) ease; } .botao svg { width: 18px; height: 18px; flex: none; } /* Preenchimento que cresce de baixo para cima no hover. z-index -1 local, relativo so a este botao (isolation:isolate acima cria um novo contexto), nao faz parte da escala --z-* da pagina. */ .botao::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform 260ms var(--curva); } .botao--principal { background: var(--salmao-profundo); color: var(--branco); box-shadow: var(--sombra-suave); } .botao--principal::before { background: var(--azul-profundo); } .botao--principal:hover { transform: translateY(-2px); box-shadow: var(--sombra-salmao); } .botao--principal:hover::before { transform: scaleY(1); } .botao--secundario { background: transparent; color: var(--salmao-profundo); border-color: var(--salmao); } .botao--secundario::before { background: var(--salmao-vapor); } .botao--secundario:hover { transform: translateY(-2px); border-color: var(--salmao-profundo); } .botao--secundario:hover::before { transform: scaleY(1); } .botao--claro { background: var(--branco); color: var(--salmao-profundo); } .botao--claro::before { background: var(--salmao-vapor); } .botao--claro:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); } .botao--claro:hover::before { transform: scaleY(1); } .botao--wpp { background: var(--azul-profundo); color: var(--branco); } .botao--wpp::before { background: var(--salmao-profundo); } .botao--wpp:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); } .botao--wpp:hover::before { transform: scaleY(1); } .botao--mini { padding: 0.5rem 0.95rem; font-size: 0.82rem; border-color: var(--salmao-suave); color: var(--salmao-profundo); background: var(--branco); } .botao--mini::before { background: var(--salmao-vapor); } .botao--mini:hover { border-color: var(--salmao); transform: translateY(-1px); } .botao--mini:hover::before { transform: scaleY(1); } /* "Marcar" nas tabelas de precos: e a accao mais importante do site, tem de parecer isso. Mesmo tamanho compacto do botao--mini, mas cheio, igual ao botao--principal (o "Falar sobre a minha situacao" do herói). "Perguntar" nos cursos fica no botao--mini normal, contorno, secundario: a diferenca entre marcar uma consulta e perguntar por um curso ve-se. */ .botao--mini-principal { padding: 0.5rem 0.95rem; font-size: 0.82rem; background: var(--salmao-profundo); color: var(--branco); border-color: transparent; box-shadow: var(--sombra-suave); } .botao--mini-principal::before { background: var(--azul-profundo); } .botao--mini-principal:hover { transform: translateY(-1px); box-shadow: var(--sombra-salmao); } .botao--mini-principal:hover::before { transform: scaleY(1); } .cabecalho .botao--wpp { padding: 0.7rem 1.2rem; font-size: 0.9rem; } .grupo-botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); } /* ========================================================================== Cartoes e areas ========================================================================== */ .cartao { display: flex; flex-direction: column; align-items: flex-start; height: 100%; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: var(--e-4); overflow-wrap: break-word; transition: transform var(--tempo-hover) var(--curva), box-shadow var(--tempo-hover) ease, border-color var(--tempo-hover) ease; } .cartao--realce:hover { transform: translateY(-4px); box-shadow: var(--sombra-media); border-color: var(--salmao-suave); } .cartao h3 { margin-bottom: var(--e-2); text-wrap: pretty; font-size: 1.4rem; } .cartao p { margin-bottom: var(--e-2); color: var(--texto-suave); font-size: 1rem; } .cartao p:last-child { margin-bottom: 0; } .cartao__icone { display: flex; flex: none; width: 52px; height: 52px; color: var(--salmao-profundo); margin-bottom: var(--e-3); } .cartao__icone svg { width: 100%; height: 100%; display: block; } .areas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: stretch; } /* Passos numerados */ .passos { counter-reset: passo; display: grid; gap: var(--e-4); } .passo { position: relative; padding-left: 3.4rem; } .passo::before { counter-increment: passo; content: counter(passo); position: absolute; left: 0; top: -0.15em; font-family: var(--fonte-titulo); font-size: 2rem; line-height: 1; color: var(--salmao); } .passo h3 { font-size: 1.3rem; margin-bottom: var(--e-1); } .passo p { margin: 0; color: var(--texto-suave); } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem); overflow: hidden; } .hero__grelha { display: grid; gap: var(--e-5); align-items: center; } @media (min-width: 1024px) { .hero__grelha { grid-template-columns: 1.05fr 0.95fr; gap: var(--e-7); } } .hero__texto { background-color: color-mix(in srgb, var(--branco) 94%, transparent); border: 1px solid var(--linha); border-radius: var(--raio-l); padding: clamp(1.75rem, 4vw, 3rem); box-shadow: var(--sombra-suave); backdrop-filter: blur(2px); } .hero__texto h1 { margin-bottom: var(--e-4); } .hero__texto { position: relative; z-index: 1; } /* Em telemovel o Ganesha fica como fundo discreto atras do cartao do heroi, com altura limitada, em vez de ocupar um bloco proprio a seguir ao cartao (o que tornava a pagina inicial mais alta em telemovel do que em ecra largo). A partir de 1024px volta a ser a ilustracao normal, lado a lado com o texto. */ .hero__figura { position: relative; z-index: auto; display: flex; align-items: center; justify-content: center; overflow: visible; pointer-events: auto; } /* Em telemovel o Ganesha continua visivel, como ilustracao propria por baixo do cartao, mas com a altura limitada para nao alongar a pagina. */ .hero__figura .ganesha { width: auto; height: min(46vh, 380px); opacity: 1; } @media (min-width: 1024px) { .hero__figura .ganesha { width: min(86vw, 460px); height: auto; } } /* ========================================================================== Ilustracoes SVG, Ganesha, cristais, cartas ========================================================================== */ .ilustracao { color: var(--salmao-profundo); } .ilustracao .orn { stroke: var(--salmao); } .ilustracao .tex { stroke: var(--salmao-suave); } .ilustracao .contorno { stroke: currentColor; } .ilustracao [class] { fill: none; stroke-linecap: round; stroke-linejoin: round; } .ilustracao .cheio { fill: var(--salmao-suave); stroke: none; } .ganesha { width: min(86vw, 460px); height: auto; } .ganesha-mini { width: 30px; height: 30px; } /* Traco que se desenha na primeira entrada */ .anima-traco { stroke-dasharray: 1; stroke-dashoffset: 0; } [data-desenhar="ativo"] .anima-traco { animation: desenhar-traco 2600ms var(--curva) both; } @keyframes desenhar-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* Alvo de ampliacao */ .amp-alvo { cursor: zoom-in; transition: transform var(--tempo-hover) var(--curva); } .amp-alvo:hover { transform: scale(1.02); } .cristal { width: 100%; height: 100%; } .carta-svg { width: 100%; height: auto; } .leque { position: relative; width: min(58vw, 250px); margin-inline: auto; } .leque svg { position: absolute; inset: 0; width: 100%; height: auto; } .leque svg:nth-child(1) { transform: rotate(-8deg) translateY(6px); transform-origin: 50% 90%; } .leque svg:nth-child(2) { position: relative; } .leque svg:nth-child(3) { transform: rotate(8deg) translateY(6px); transform-origin: 50% 90%; } /* ========================================================================== Ampliacao de imagem, sobreposicao ========================================================================== */ .amp { position: fixed; inset: 0; z-index: var(--z-ampliacao); display: grid; place-items: center; padding: clamp(1rem, 5vw, 3rem); background: rgba(27, 42, 71, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .amp[hidden] { display: none; } .amp__figura { position: relative; max-width: min(92vw, 640px); max-height: 86vh; /* recuo para navegadores antigos */ max-height: 86dvh; /* altura real, segue a barra do navegador */ overflow: auto; background: var(--branco); border-radius: var(--raio-l); padding: clamp(1.5rem, 5vw, 3rem); box-shadow: var(--sombra-media); animation: amp-entra 300ms var(--curva) both; } @keyframes amp-entra { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .amp__figura svg, .amp__figura img { width: 100%; height: auto; } .amp__fechar { position: absolute; top: 0.6rem; right: 0.6rem; width: var(--toque-min); height: var(--toque-min); border: 1px solid var(--linha); background: var(--branco); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .amp__fechar svg { width: 18px; height: 18px; color: var(--azul-profundo); } /* ========================================================================== Indice lateral pegajoso ========================================================================== */ .com-indice { display: block; } @media (min-width: 1024px) { .com-indice { display: grid; grid-template-columns: 210px 1fr; gap: var(--e-6); align-items: start; } } .indice { display: none; } @media (min-width: 1024px) { .indice { display: block; position: sticky; top: 6.5rem; font-size: 0.9rem; z-index: var(--z-pegajoso); } } .indice__titulo { font-family: var(--fonte-corpo); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem; font-weight: 600; color: var(--salmao-profundo); margin: 0 0 var(--e-2); } .indice__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; } .indice__lista a { display: flex; align-items: center; min-height: var(--toque-min); padding: 0.4rem 0 0.4rem 0.85rem; border-left: 2px solid var(--linha); color: var(--texto-suave); text-decoration: none; transition: color var(--tempo-hover) ease, border-color var(--tempo-hover) ease; } .indice__lista a:hover { color: var(--salmao-profundo); } .indice__lista a[aria-current="true"] { color: var(--salmao-profundo); border-left-color: var(--salmao); font-weight: 600; } /* ========================================================================== Prosa ========================================================================== */ .prosa > * + * { margin-top: var(--e-3); } .prosa h2 { margin-top: var(--e-6); scroll-margin-top: 6.5rem; } .prosa h3 { margin-top: var(--e-4); } .prosa > :first-child { margin-top: 0; } .prosa ul.marcada { margin-top: var(--e-3); } /* ========================================================================== Tabelas de precos ========================================================================== */ .tabela-envolve { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--branco); } /* Numa coluna estreita, a tabela alarga para os lados para respirar */ @media (min-width: 1024px) { .envolver-estreito > .tabela-envolve, .prosa > .tabela-envolve { --larga: min(1040px, calc(100vw - 6rem)); width: var(--larga); margin-left: calc((100% - var(--larga)) / 2); margin-right: calc((100% - var(--larga)) / 2); } } table.precos { width: 100%; border-collapse: collapse; min-width: 620px; } table.precos caption { text-align: left; padding: var(--e-3) var(--e-4) 0; color: var(--texto-suave); font-size: 0.9rem; caption-side: top; } table.precos th, table.precos td { text-align: left; padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linha); vertical-align: middle; } table.precos thead th { border-top: 0; font-family: var(--fonte-corpo); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--salmao-profundo); font-weight: 600; } table.precos tbody th { font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 500; color: var(--azul-profundo); } table.precos td.valor { font-weight: 600; color: var(--salmao-profundo); white-space: nowrap; } table.precos td.accao { text-align: right; white-space: nowrap; } table.precos tbody tr:hover { background: var(--salmao-vapor); } /* Excecao mobile-first #1 (das duas permitidas): abaixo de 768px as tabelas de precos deixam de ser tabelas e passam a cartoes empilhados. E aqui, e so aqui e na orientacao horizontal mais abaixo, que faz sentido pensar "a partir de que largura o desenho de secretaria deixa de caber", por isso e max-width e nao min-width. */ @media (max-width: 767px) { .tabela-envolve { overflow-x: visible; border: 0; background: none; } .tabela-envolve table, .tabela-envolve tbody, .tabela-envolve tr, .tabela-envolve td, .tabela-envolve th { display: block; width: 100%; min-width: 0; } .tabela-envolve thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tabela-envolve tr { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 1rem 1.15rem; margin-bottom: 0.9rem; } .tabela-envolve th[scope="row"] { font-size: 1.15rem; font-weight: 600; color: var(--azul-profundo); margin-bottom: 0.6rem; padding: 0; border-top: 0; } .tabela-envolve td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-top: 1px solid var(--linha); } .tabela-envolve td::before { content: attr(data-rotulo); color: var(--texto-suave); font-size: 0.9rem; } .tabela-envolve td.valor { font-size: 1.3rem; font-weight: 600; } /* o botao de marcar ocupa a largura toda e e o ultimo elemento */ .tabela-envolve td.accao { display: block; border-top: 0; padding-top: 0.9rem; } .tabela-envolve td.accao::before { content: none; } .tabela-envolve td.accao .botao { display: flex; width: 100%; min-height: var(--toque-conforto); align-items: center; justify-content: center; } } /* ========================================================================== Perguntas frequentes ========================================================================== */ .faq { border-top: 1px solid var(--linha); } .faq details { border-bottom: 1px solid var(--linha); padding: var(--e-3) 0; } .faq summary { cursor: pointer; font-family: var(--fonte-titulo); font-size: 1.25rem; color: var(--azul-profundo); list-style: none; display: flex; justify-content: space-between; gap: var(--e-3); align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 13px; height: 13px; flex: none; border-right: 2px solid var(--salmao); border-bottom: 2px solid var(--salmao); transform: rotate(45deg); transition: transform var(--tempo-hover) var(--curva); } .faq details[open] summary::after { transform: rotate(225deg); } .faq details > p { margin: var(--e-3) 0 0; color: var(--texto-suave); } /* ========================================================================== Rodape ========================================================================== */ .rodape { background: var(--azul-profundo); color: var(--cinza-300); padding-block: var(--e-7) var(--e-4); font-size: 0.95rem; } .rodape a { display: inline-flex; align-items: center; min-height: var(--toque-min); color: var(--cinza-100); text-decoration: none; } .rodape a:hover { color: var(--branco); text-decoration: underline; text-decoration-color: var(--salmao); } .rodape__grelha { display: grid; gap: var(--e-5); } @media (min-width: 768px) { .rodape__grelha { grid-template-columns: 1.4fr 1fr 1fr; } } .rodape__marca { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--e-3); } .rodape__assinatura { width: 34px; height: 34px; color: var(--salmao-suave); flex: none; } .rodape__nome { font-family: var(--fonte-titulo); font-size: 1.25rem; color: var(--branco); } .rodape h3 { color: var(--branco); font-family: var(--fonte-corpo); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: var(--e-3); } .rodape ul { list-style: none; padding: 0; margin: 0; } .rodape li { margin-bottom: 0; } .rodape__fundo { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); justify-content: space-between; font-size: 0.85rem; color: var(--cinza-300); } .rodape__fundo a { color: var(--cinza-100); } /* ========================================================================== Contactos ========================================================================== */ /* Um so bloco de contactos (nao ha aqui um segundo bloco de botoes grandes a repetir a mesma informacao). Cada cartao com accao (Escreva-me, Telefone-me) e clicavel por inteiro: a ligacao real e um invisivel com position:absolute;inset:0 sobre o cartao (o "link esticado"), o valor grande e que se le, o rotulo pequeno so identifica o que e. */ .lista-contacto { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .lista-contacto { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lista-contacto__item { position: relative; display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: var(--e-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--branco); transition: transform var(--tempo-hover) var(--curva), box-shadow var(--tempo-hover) ease, border-color var(--tempo-hover) ease; } .lista-contacto__item--accao:hover { transform: translateY(-2px); box-shadow: var(--sombra-suave); border-color: var(--salmao-suave); } .lista-contacto__icone { width: 26px; height: 26px; color: var(--salmao-profundo); } .lista-contacto__icone svg { width: 100%; height: 100%; } .lista-contacto__rotulo { font-family: var(--fonte-corpo); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 600; color: var(--salmao-profundo); margin-top: 0.4rem; } /* Mobile-first: base pequena, para o email (o mais comprido dos tres valores) caber num telemovel pequeno mesmo sem quebrar. O no HTML ja marca onde pode quebrar sem partir a meio de uma palavra (antes do @ e do ponto do dominio); a partir de 480px ha espaco para a letra maior. */ .lista-contacto__valor { font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 500; color: var(--azul-profundo); overflow-wrap: anywhere; word-break: break-word; } @media (min-width: 480px) { .lista-contacto__valor { font-size: 1.35rem; } } .lista-contacto__nota { font-size: 0.88rem; color: var(--texto-suave); } .lista-contacto__ligacao { position: absolute; inset: 0; border-radius: inherit; } .lista-contacto__ligacao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--raio-m); } /* ========================================================================== Botao flutuante de WhatsApp e voltar ao topo ========================================================================== */ .wpp-flutuante { position: fixed; right: calc(clamp(0.9rem, 3vw, 1.6rem) + var(--seguro-dir)); bottom: calc(clamp(0.9rem, 3vw, 1.6rem) + var(--seguro-baixo)); z-index: var(--z-flutuante); width: 56px; height: 56px; border-radius: 50%; background: var(--azul-profundo); color: var(--branco); display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-media); transition: transform var(--tempo-hover) var(--curva), opacity var(--tempo-hover) var(--curva); } .wpp-flutuante svg { width: 26px; height: 26px; } .wpp-flutuante:hover { transform: translateY(-3px) scale(1.03); } .wpp-flutuante::after { content: attr(data-etiqueta); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); background: var(--azul-profundo); color: var(--branco); font-size: 0.82rem; font-weight: 500; white-space: nowrap; padding: 0.5rem 0.8rem; border-radius: var(--raio-s); opacity: 0; pointer-events: none; transition: opacity var(--tempo-hover) ease, transform var(--tempo-hover) var(--curva); display: none; } .wpp-flutuante:hover::after, .wpp-flutuante:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); } .voltar-topo { position: fixed; left: calc(clamp(0.9rem, 3vw, 1.6rem) + var(--seguro-esq)); bottom: calc(clamp(0.9rem, 3vw, 1.6rem) + var(--seguro-baixo)); z-index: var(--z-flutuante); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linha); background: var(--branco); color: var(--salmao-profundo); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sombra-suave); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--tempo-hover) ease, transform var(--tempo-hover) var(--curva), bottom var(--tempo-hover) ease; } .voltar-topo[data-visivel="sim"] { opacity: 1; transform: none; pointer-events: auto; } .voltar-topo svg { width: 20px; height: 20px; } .voltar-topo:hover { transform: translateY(-2px); border-color: var(--salmao); } @media (min-width: 768px) { .wpp-flutuante::after { display: block; } } /* ========================================================================== Banner de cookies ========================================================================== */ /* Barra colada ao fundo do ecra, largura toda, sombra por cima (Y negativo, projetada para cima, sobre o conteudo que fica por baixo dela). */ .cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cookies); max-width: none; width: 100%; display: flex; flex-direction: column; gap: 0.5rem; background: var(--branco); border: 0; border-top: 1px solid var(--cinza-300); border-radius: 0; box-shadow: 0 -14px 34px rgba(27, 42, 71, 0.16); padding: 0.6rem var(--margem-lateral); padding-bottom: calc(0.6rem + var(--seguro-baixo)); padding-left: calc(var(--margem-lateral) + var(--seguro-esq)); padding-right: calc(var(--margem-lateral) + var(--seguro-dir)); max-height: calc(140px + var(--seguro-baixo)); } @media (min-width: 768px) { .cookies { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e-4); padding-block: 0.6rem; max-height: 72px; } .cookies__texto { flex: 1 1 auto; } } .cookies[hidden] { display: none; } .cookies:focus, .cookies:focus-visible { outline: none; } .cookies:not([hidden]) { animation: cookies-entrada 320ms var(--curva) both; } @keyframes cookies-entrada { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } } /* Titulo e frase na mesma linha, para caber na altura reduzida do banner. */ .cookies__texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; } .cookies h2 { font-size: 0.95rem; margin-bottom: 0; color: var(--azul-profundo); } .cookies h2::after { content: ":"; } .cookies p { font-size: 0.85rem; line-height: 1.35; color: var(--texto-suave); margin-bottom: 0; } .cookies p a { color: var(--salmao-profundo); } .cookies__acoes { display: flex; gap: var(--e-2); flex: none; } .cookies__botao { flex: 1 1 0; min-height: var(--toque-min); padding: 0.6rem 1rem; font-size: 0.92rem; background: var(--branco); color: var(--azul-profundo); border: 1.5px solid var(--azul-profundo); } .cookies__botao::before { background: var(--azul-profundo); } .cookies__botao:hover { color: var(--branco); transform: translateY(-1px); } .cookies__botao:hover::before { transform: scaleY(1); } /* Enquanto o banner esta aberto: empurra o conteudo (o JS mede a altura real do banner e grava-a em --altura-cookies) e esconde a barra movel, para nunca terem os dois ao mesmo tempo. */ body:has(.cookies:not([hidden])) { padding-bottom: var(--altura-cookies, 0px) !important; } body:has(.cookies:not([hidden])) .barra-movel { transform: translateY(100%) !important; visibility: hidden !important; } /* ========================================================================== Revelacao ao scroll ========================================================================== */ .revelar { opacity: 0; transform: translateY(24px); transition: opacity var(--tempo-revelar) var(--curva), transform var(--tempo-revelar) var(--curva); transition-delay: var(--atraso, 0ms); } .revelar[data-visivel="sim"] { opacity: 1; transform: none; } /* Cristais e cartas entram com rotacao subtil */ .revelar--gira { transform: translateY(24px) rotate(-3deg); } .revelar--gira[data-visivel="sim"] { transform: none; } .revelar--gira-dir { transform: translateY(24px) rotate(3deg); } .revelar--gira-dir[data-visivel="sim"] { transform: none; } /* Listas revelam item a item */ .revela-itens > li, .revela-itens > .item { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--curva), transform 520ms var(--curva); } .revela-itens[data-visivel="sim"] > li, .revela-itens[data-visivel="sim"] > .item { opacity: 1; transform: none; } /* ========================================================================== Migalhas ========================================================================== */ .migalhas { font-size: 0.85rem; color: var(--texto-suave); padding-top: var(--e-3); } .migalhas a { color: var(--texto-suave); text-decoration: none; } .migalhas a:hover { text-decoration: underline; } /* ========================================================================== Faixa de prova ========================================================================== */ /* Colunas fixas por fronteira, nao auto-fit: com exatamente quatro itens, auto-fit pode resolver para 3 colunas nalgumas larguras, e o quarto item fica sozinho numa linha com dois tercos vazios. 1, 2 e 4 dividem sempre os quatro itens sem sobra nenhuma. */ .prova { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: 1fr; /* ul herda max-width: var(--medida) da regra de leitura corrida; esta faixa e uma grelha, nao e texto, por isso liberta a largura toda do envolver. */ max-width: none; } @media (min-width: 768px) { .prova { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .prova { grid-template-columns: repeat(4, 1fr); } } .prova__item { display: flex; gap: var(--e-2); align-items: flex-start; margin: 0; } .prova__icone { flex: none; width: 34px; height: 34px; color: var(--salmao-profundo); } .prova__icone svg { width: 100%; height: 100%; } .prova__item strong { display: block; color: var(--azul-profundo); font-weight: 600; font-size: 0.98rem; } .prova__item span { color: var(--texto-suave); font-size: 0.92rem; } /* ========================================================================== Testemunhos, texto literal em cartoes de altura livre ========================================================================== */ .testemunhos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: 1fr; align-items: stretch; } /* Sao sempre tres cartoes: 2 colunas deixaria sempre um orfao sozinho na segunda linha, por isso fica a 1 coluna ate haver largura para os tres cabidos com pelo menos 320px cada (a partir de 1280px). Entre 768 e 1280 uma coluna larga le-se melhor do que tres cartoes espremidos. */ @media (min-width: 1280px) { .testemunhos { grid-template-columns: repeat(3, 1fr); } } .testemunho-cartao { margin: 0; display: flex; flex-direction: column; gap: var(--e-3); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: var(--e-4); box-shadow: var(--sombra-suave); } .testemunho-cartao__icone { flex: none; width: 30px; height: 30px; color: var(--salmao-profundo); } .testemunho-cartao__icone svg { width: 100%; height: 100%; } .testemunho-cartao blockquote { margin: 0; max-width: none; font-family: var(--fonte-titulo); font-size: 1.08rem; line-height: 1.55; color: var(--texto); } .testemunho-cartao blockquote p { margin: 0; } .testemunho-cartao__rodape { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-top: auto; padding-top: var(--e-2); border-top: 1px solid var(--linha); } .testemunho-cartao cite { font-style: normal; font-weight: 600; font-size: 0.82rem; color: var(--texto-suave); } /* Testemunhos recolhidos, com "Ver mais". O texto completo fica sempre no HTML (o Google le-o, um leitor de ecra ouve-o todo); o recorte e so visual, e so acontece depois do JS medir que ha mesmo overflow. Sem JS, data-expandivel fica sem valor e mostra-se tudo. */ .testemunho__texto { position: relative; overflow: hidden; } /* O recorte e feito com -webkit-line-clamp no proprio
, que tem o tamanho de letra e a entrelinha declarados diretamente nele (ver acima). display:-webkit-box e obrigatorio: sem ele o line-clamp e ignorado e o corte acaba a acontecer por outra via, sem relacao com a grelha de linhas, partindo glifos a meio. */ .testemunho__texto[data-expandivel="recolhido"] blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } @media (max-width: 767px) { .testemunho__texto[data-expandivel="recolhido"] blockquote { -webkit-line-clamp: 5; } } /* Esbatimento no fim do texto recolhido, para se perceber que continua. A altura tem de ser a de UMA linha do blockquote, no tamanho de letra dele (1.08rem, entrelinha 1.55), nao no tamanho de letra herdado deste elemento (que e outro): senao a percentagem de "uma linha" nao bate certo com uma linha a serio, e o esbatimento cobre mais do que devia. */ .testemunho__texto[data-expandivel="recolhido"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(1.08rem * 1.55); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--branco) 75%); pointer-events: none; } .testemunho__mais { margin-top: 0.9rem; min-height: var(--toque-min); padding: 0 0.2rem; background: none; border: 0; color: var(--salmao-profundo); font: inherit; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: start; } .testemunho__mais:hover { color: var(--azul-profundo); } .testemunho__mais:focus-visible { outline: 2px solid var(--salmao); outline-offset: 2px; border-radius: 4px; } /* Botao sem aspeto de botao, so um sublinhado salmao discreto. Conta como ligacao de texto corrido (ver excecao no topo do ficheiro): sem caixa de toque de 48px, so folga vertical. */ .ligacao-discreta { display: inline; background: none; border: none; margin: 0; font: inherit; font-size: 0.85rem; color: var(--salmao-profundo); text-decoration: underline; text-decoration-color: var(--salmao); text-underline-offset: 3px; cursor: pointer; } .ligacao-discreta:hover { text-decoration-color: var(--salmao-profundo); } /* Citacao destacada: pausa na leitura, sem cartao nem caixa */ .citacao-destaque { border-left: 3px solid var(--salmao); padding-left: var(--e-4); } .citacao-destaque blockquote { margin: 0 0 var(--e-2); } .citacao-destaque blockquote p { margin: 0; max-width: none; font-family: var(--fonte-titulo); font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.5; color: var(--azul-profundo); } .citacao-destaque cite { display: block; font-style: normal; font-size: 0.85rem; color: var(--texto-suave); } .citacao-destaque cite .ligacao-discreta { margin-left: 0.35em; } /* ========================================================================== Petit Lenormand ========================================================================== */ .lenormand-figura { margin: var(--e-4) 0; } .lenormand-figura img { width: 100%; height: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--branco); cursor: zoom-in; transition: transform var(--tempo-hover) var(--curva); } .lenormand-figura img:hover { transform: scale(1.01); } .lenormand-destaque { margin: var(--e-5) 0; background: var(--superficie-alt); border: 1px solid var(--linha); border-radius: var(--raio-l); padding: var(--e-4); } .lenormand-destaque img { width: 100%; height: auto; border-radius: var(--raio-m); cursor: zoom-in; margin-bottom: var(--e-3); transition: transform var(--tempo-hover) var(--curva); } .lenormand-destaque img:hover { transform: scale(1.01); } .lenormand-destaque__texto h3 { margin-bottom: var(--e-2); } .lenormand-destaque__texto p:last-child { margin-bottom: 0; color: var(--texto-suave); } .lenormand-teaser { display: grid; gap: var(--e-4); align-items: center; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-l); padding: var(--e-4); } @media (min-width: 768px) { .lenormand-teaser { grid-template-columns: 0.9fr 1.1fr; } } .lenormand-teaser img { width: 100%; height: auto; border-radius: var(--raio-m); } .lenormand-teaser__texto p { color: var(--texto-suave); } .lenormand-teaser__texto p:last-of-type { margin-bottom: var(--e-3); } /* Ilustracoes dos outros oraculos (Belline, Runas): SVG em traco, mesma linguagem do Ganesha e das cartas Lenormand. */ .oraculo-figura { margin: var(--e-4) 0; padding: var(--e-4) var(--e-3); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-l); display: flex; justify-content: center; } .oraculo-figura svg { width: min(100%, 380px); height: auto; transition: transform var(--tempo-hover) var(--curva); } .oraculo-figura:hover svg { transform: scale(1.02); } @media (prefers-reduced-motion: reduce) { .oraculo-figura svg, .oraculo-figura:hover svg { transition: none; transform: none; } } .ligacao-linha { display: inline-block; margin-top: 0.3rem; font-size: 0.82rem; font-weight: 500; color: var(--salmao-profundo); text-decoration-color: var(--salmao); } /* ========================================================================== Cartao de remissao (pagina de precos, cursos) ========================================================================== */ .cartao-remissao { display: flex; gap: var(--e-3); align-items: flex-start; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: var(--e-4); } .cartao-remissao__icone { flex: none; width: 44px; height: 44px; color: var(--salmao-profundo); } .cartao-remissao__icone svg { width: 100%; height: 100%; } .cartao-remissao__texto h3 { margin-bottom: var(--e-2); font-size: 1.35rem; } .cartao-remissao__texto p { color: var(--texto-suave); margin-bottom: var(--e-3); } /* ========================================================================== Contactos, resumo de precos ========================================================================== */ .mini-precos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .mini-preco { margin: 0; padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--raio-s); background: var(--branco); display: flex; flex-direction: column; gap: 0.15rem; } .mini-preco strong { color: var(--azul-profundo); font-weight: 600; } .mini-preco span { color: var(--texto-suave); font-size: 0.9rem; } .mini-preco__valor { color: var(--salmao-profundo) !important; font-weight: 600; font-size: 1rem !important; } /* ========================================================================== Barra de accoes fixa em telemovel Mobile-first: por omissao (ecras estreitos) esta ativa; a partir de 768px desaparece e da lugar ao botao flutuante e ao voltar ao topo. ========================================================================== */ .barra-movel { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra-movel); display: flex; gap: 1px; background: var(--linha); border-top: 1px solid var(--linha); padding-bottom: var(--seguro-baixo); padding-left: var(--seguro-esq); padding-right: var(--seguro-dir); transform: translateY(100%); visibility: hidden; transition: transform 280ms var(--curva), visibility 0s linear 280ms; } .barra-movel[data-visivel="sim"] { transform: translateY(0); visibility: visible; transition: transform 280ms var(--curva), visibility 0s; } .barra-movel__accao { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--alt-barra-movel); font-family: var(--fonte-corpo); font-weight: 600; font-size: 0.95rem; text-decoration: none; } .barra-movel__accao svg { width: 20px; height: 20px; } .barra-movel__accao--wpp { background: var(--salmao-profundo); color: var(--branco); } .barra-movel__accao--tel { background: var(--azul-profundo); color: var(--branco); } /* Integra-se com o botao flutuante: quando a barra movel esta mesmo visivel no ecra, o flutuante fica mais pequeno (nunca abaixo do minimo de toque: encolhe o icone la dentro, nao o alvo de toque) e sobe para cima da barra, para nao se sobreporem. */ .barra-movel[data-visivel="sim"] ~ .wpp-flutuante { width: var(--toque-min); height: var(--toque-min); bottom: calc(var(--alt-barra-movel) + var(--seguro-baixo) + 0.75rem); opacity: 0.6; } .barra-movel[data-visivel="sim"] ~ .wpp-flutuante svg { width: 20px; height: 20px; } .barra-movel[data-visivel="sim"] ~ .voltar-topo[data-visivel="sim"] { bottom: calc(var(--alt-barra-movel) + var(--seguro-baixo) + 0.75rem); } body { padding-bottom: calc(var(--alt-barra-movel) + var(--seguro-baixo)); } @media (min-width: 768px) { .barra-movel { display: none; } body { padding-bottom: 0; } /* A barra fica display:none aqui, mas o JS continua a atualizar o seu data-visivel com base no scroll, independentemente da largura. Sem isto, o botao flutuante recolheria "por simpatia" com uma barra que nem sequer se ve, so porque o atributo diz "sim". Mesma especificidade do par acima, mas mais tarde no ficheiro: ganha o empate. */ .barra-movel[data-visivel="sim"] ~ .wpp-flutuante { width: 56px; height: 56px; opacity: 1; bottom: calc(clamp(0.9rem, 3vw, 1.6rem) + var(--seguro-baixo)); } .barra-movel[data-visivel="sim"] ~ .wpp-flutuante svg { width: 26px; height: 26px; } .barra-movel[data-visivel="sim"] ~ .voltar-topo[data-visivel="sim"] { bottom: calc(clamp(0.9rem, 3vw, 1.6rem) + var(--seguro-baixo)); } } /* A barra movel fica sempre escondida enquanto o banner de cookies esta aberto (ver regra mais abaixo), mas o JS nao sabe disso e continua a marcar data-visivel="sim" pelo scroll. Sem este par, o flutuante encolheria "por simpatia" com uma barra que o banner acabou de esconder, ficando pequeno e sem uma barra de acao alternativa visivel. Mesma especificidade do par de cima, mais tarde no ficheiro: ganha o empate. */ body:has(.cookies:not([hidden])) .barra-movel[data-visivel="sim"] ~ .wpp-flutuante { width: 56px; height: 56px; opacity: 1; bottom: calc(clamp(0.9rem, 3vw, 1.6rem) + var(--seguro-baixo)); } body:has(.cookies:not([hidden])) .barra-movel[data-visivel="sim"] ~ .wpp-flutuante svg { width: 26px; height: 26px; } /* ========================================================================== Orientacao horizontal Excecao mobile-first #2 (das duas permitidas): um telemovel deitado tem ~740px de largura e ~360px de altura. A barra movel, pensada para ecras altos e estreitos, ocuparia aqui uma fatia enorme do ecra. ========================================================================== */ @media (max-height: 480px) and (orientation: landscape) { .barra-movel { display: none; } .cabecalho { position: static; } :root { --ar-seccao: 2.5rem; } body { padding-bottom: 0; } } /* ========================================================================== Movimento reduzido ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .revelar, .revelar--gira, .revelar--gira-dir, .revela-itens > li, .revela-itens > .item { opacity: 1 !important; transform: none !important; } .progresso__barra { transform: scaleX(0) !important; } .amp__figura { animation: none !important; } }