/* ===== CSS CUSTOM PROPERTIES — PREMIUM ===== */ :root { --acc: #2088ca; --acc2: #1668a0; --acc3: #3aabf0; --accent: var(--acc); --acc-gold: #2088ca; --acc-orange: #F28000; --acc-gold2: #5bb0e6; --bg: #060a0f; --bg2: #0b1017; --bg3: #101820; --bgcard: #0d141d; --text: #edf2f7; --text2: #8fa3b8; --text3: #6b8299; /* contraste 4.99:1 sobre --bg (WCAG AA texto normal) */ --border: rgba(255,255,255,.06); --border-premium: rgba(32,136,202,.12); --shadow: rgba(0,0,0,.6); --glass: rgba(11,16,23,.72); --r14: 16px; --r22: 24px; --r50: 50px; --transition: all .35s cubic-bezier(.4,0,.2,1); --transition-slow: all .6s cubic-bezier(.4,0,.2,1); /* Tipografia (Fase 2 v2 — Geist substitui Montserrat) */ --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-display: 'Geist', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; } /* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } /* As âncoras (ex.: #contacto) não devem ficar tapadas pelo cabeçalho fixo. */ section[id], [id="contacto"] { scroll-margin-top: 92px; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.75; /* overflow-x: clip (nao hidden) contem o overflow horizontal SEM tornar o num contentor de scroll — 'hidden' forcava overflow-y a computar 'auto' e quebrava o position:sticky das secções (a timeline do Percurso deixava de prender). 'clip' nao cria contexto de scroll. */ overflow-x: clip; transition: background .4s ease, color .4s ease; font-weight: 400; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: default; } h1,h2,h3,h4,h5 { font-family: var(--font-display); letter-spacing: -.02em; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ===== SCROLLBAR ===== */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: var(--text3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--acc); } ::selection { background: rgba(32,136,202,.3); color: var(--text); } /* ===== UTILITY ===== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .grad { background: linear-gradient(135deg, var(--acc), var(--acc3)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-label { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--acc); background: rgba(32,136,202,.12); padding: 6px 16px; border-radius: var(--r50); margin-bottom: 16px; border: 1px solid rgba(32,136,202,.2); } .section-header { text-align: center; margin-bottom: 40px; } .section-header h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 12px; line-height: 1.08; } .section-header p { font-size: 1.02rem; color: var(--text2); max-width: 560px; margin: 0 auto; line-height: 1.6; } /* Section padding */ section { padding: 92px 0; } @media(max-width:768px) { section { padding: 60px 0; } } /* Homepage: a hairline alinha à fronteira (início) de cada secção e só depois há 100px de respiro, igual às restantes páginas (padding-top: 0 vem de .section-divider; o respiro faz-se com margin da linha + padding-bottom). */ body.home-page section:not(#hero):not(.sobre-hero) { padding: 0 0 100px; } body.home-page .section-divider::before { margin-bottom: 100px; } @media(max-width:768px) { body.home-page section:not(#hero):not(.sobre-hero) { padding: 0 0 64px; } body.home-page .section-divider::before { margin-bottom: 64px; } } /* Section divider line — line sits on the section boundary, not inside a dead band */ .section-divider { position: relative; padding-top: 0; } .section-divider::before { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(32,136,202,.34), transparent); margin-bottom: clamp(38px, 4.2vw, 58px); } @media(max-width:768px) { .section-divider::before { margin-bottom: 34px; } } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; } .reveal.visible { opacity: 1; transform: none; } /* ===== Skip-link (WCAG 2.4.1 Bypass Blocks) ===== */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 10px 18px; background: var(--acc); color: #fff; font-weight: 700; border-radius: 8px; transform: translateY(-160%); transition: transform .2s ease; } .skip-link:focus-visible { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; } /* ===== Movimento reduzido: garante conteúdo visível e corta animações ===== */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: var(--r50); font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: .95rem; transition: var(--transition); position: relative; overflow: hidden; z-index: 0; } .btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transition: left .5s ease; z-index: -1; } .btn:hover::after { left: 150%; } .btn-primary { background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; box-shadow: 0 4px 20px rgba(32,136,202,.35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(32,136,202,.5); } .btn-outline { border: 1.5px solid rgba(32,136,202,.5); color: var(--acc); background: transparent; } .btn-outline:hover { background: rgba(32,136,202,.1); border-color: var(--acc); transform: translateY(-2px); } .btn-sm { padding: 10px 20px; font-size: .85rem; } /* ===== COOKIE BANNER ===== */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--bg2); border-top: 1px solid var(--border); padding: 20px 24px; box-shadow: 0 -8px 30px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } #cookie-banner p { font-size: .88rem; color: var(--text2); max-width: 700px; line-height: 1.6; } #cookie-banner p a { color: var(--acc); text-decoration: underline; } #cookie-banner .ck-btns { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } #cookie-banner .btn { padding: 10px 22px; font-size: .88rem; display: inline-flex; align-items: center; justify-content: center; text-align: center; } /* ===== NAV ===== */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 0; transition: all .3s ease; } #nav.sc { padding: 12px 0; } #nav.sc::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(8,12,16,.88); /* Raio reduzido (era 20px): elemento fixo com blur re-amostra a página a cada frame de scroll — custo alto de paint, sobretudo em Firefox. Como o fundo já é 88% opaco, 12px mantém o aspeto de vidro com muito menos repaint. */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.07); } .ni { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 1; } .nav-logo { flex-shrink: 0; } .nav-logo img { height: 38px; width: auto; transition: var(--transition); } .logo-dark-v { display: block; } /* Nav sobre hero escuro: no topo (sem scroll), reforça o tratamento claro-sobre-escuro, porque o hero tem fundo próprio. */ #nav.nav-over-dark:not(.sc) .nav-links a { color: rgba(255,255,255,.82); } #nav.nav-over-dark:not(.sc) .nav-links a:hover, #nav.nav-over-dark:not(.sc) .nav-links a:focus-visible { color: #fff; } #nav.nav-over-dark:not(.sc) .nav-pill { background: rgba(255,255,255,.14); } #nav.nav-over-dark:not(.sc) .lang-btn { color: rgba(255,255,255,.62); } #nav.nav-over-dark:not(.sc) .lang-btn:hover, #nav.nav-over-dark:not(.sc) .lang-btn.lang-active { color: #fff; } #nav.nav-over-dark:not(.sc) .lang-sep { background: rgba(255,255,255,.3); } #nav.nav-over-dark:not(.sc) .hamburger span { background: #fff; } .nav-links { display: flex; align-items: center; gap: 6px; position: relative; } .nav-links a { font-size: .9rem; font-weight: 500; color: var(--text2); padding: 8px 14px; border-radius: var(--r50); transition: color .25s ease; position: relative; z-index: 1; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--text); } /* Motion Nav — highlight pill que segue o hover (port Unlumen) */ .nav-pill { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: var(--r50); background: rgba(255,255,255,.08); transform: translateX(0) scaleX(0); transform-origin: left center; transition: transform .42s cubic-bezier(.22,.61,.36,1), width .42s cubic-bezier(.22,.61,.36,1), opacity .22s ease; pointer-events: none; z-index: 0; } /* ===== Mega-menu de Serviços (desktop) ===== */ .nav-svc-trigger { cursor: pointer; } .svc-megamenu { position: absolute; top: 100%; left: 0; right: 0; visibility: hidden; transition: visibility 0s linear .34s; z-index: 60; /* IMPORTANTE: nada de transform/filter/will-change AQUI — num ancestral do backdrop-filter isso recorta o backdrop e o blur deixa de apanhar a página. A animação de entrada é feita no conteúdo (.container), não no painel. */ } /* Vidro fosco: o ::before desfoca o que está por trás do painel (backdrop-filter) com um nível FIXO (só depende do menu estar aberto). Sem opacity aqui — o backdrop-filter nunca é desligado; o blur entra em fade animando o próprio blur() (não por "pop"). */ .svc-megamenu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,19,27,0), rgba(9,12,18,0)); backdrop-filter: blur(0px) brightness(1) saturate(1); -webkit-backdrop-filter: blur(0px) brightness(1) saturate(1); transition: background .34s ease, backdrop-filter .34s ease, -webkit-backdrop-filter .34s ease; } /* UNIVERSAL — uma só regra para todas as páginas (atuais e futuras). blur = fosco; brightness(<1) ESCURECE o que está por trás, por isso títulos/imagens claros dos heros ficam sempre reduzidos a escuro (não transparecem legíveis) → o mesmo fosco escuro da homepage em qualquer página, seja qual for o conteúdo por baixo. */ .svc-megamenu.is-open::before { background: linear-gradient(180deg, rgba(14,19,27,.5), rgba(9,12,18,.58)); /* Raio reduzido (era 30px) pela mesma razão do cabeçalho: menos custo de paint no Firefox. O brightness(.5) já garante o fosco escuro, o raio pesa pouco. */ backdrop-filter: blur(18px) brightness(.5) saturate(1.25); -webkit-backdrop-filter: blur(18px) brightness(.5) saturate(1.25); } /* Sombra de elevação + linha de luz no topo numa camada separada, que faz fade por opacity (não tem backdrop-filter, por isso pode usar opacity) — desaparece COM o menu, sem fantasma. */ .svc-megamenu::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; border-top: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 90px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); opacity: 0; transition: opacity .34s ease; } .svc-megamenu.is-open { visibility: visible; transition: visibility 0s; } .svc-megamenu.is-open::after { opacity: 1; } /* A animação de entrada (fade + slide) vive no conteúdo, não no painel — para não recortar o backdrop-filter. */ .svc-megamenu .container { position: relative; padding-top: 30px; padding-bottom: 26px; opacity: 0; transform: translateY(-8px); transition: opacity .34s ease .04s, transform .34s cubic-bezier(.22,1,.36,1) .04s; } .svc-megamenu.is-open .container { opacity: 1; transform: translateY(0); } .svc-mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } /* Cabeçalho de categoria — azul (como o logótipo) com linha branca por baixo; hover a branco. */ .svc-mega-head { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--acc); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.38); } a.svc-mega-head { display: block; text-decoration: none; transition: color .2s ease, border-color .2s ease; } a.svc-mega-head:hover { color: #fff; border-bottom-color: #fff; } /* Serviços — sub-itens (só dentro do