/* ========================================================================== Tema "vidro líquido" — aplicado ao site inteiro. Princípio central: um cartão translúcido só lê como vidro se houver algo visualmente rico por trás dele. Por isso o vídeo do hero deixou de viver dentro do hero e passou a ser o fundo FIXO de toda a página (.site-bg): header, secções, cartões e rodapé flutuam todos por cima do mesmo plano. Consequência prática: nenhuma secção pode ter fundo opaco próprio. Tudo o que antes era `bg-white` / `bg-beige` passa a .glass-panel, senão tapa o vídeo e o efeito desaparece. ========================================================================== */ /* --- Fundo global fixo --------------------------------------------------- z-index -1 coloca-o atrás do fundo do , por isso o body TEM de ser transparente; a cor de recurso vive no , para haver algo pintado enquanto o vídeo não carrega. */ html { background: #c2ccd3; } body { background: transparent; } .site-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #c2ccd3; } /* 130% de altura com -15% de topo dá folga para o fundo derivar no scroll (parallax.js) sem nunca revelar as arestas. */ .site-bg__video, .site-bg__fallback { position: absolute; left: 0; top: -15%; display: block; width: 100%; height: 130%; object-fit: cover; } /* A imagem de recurso só se vê se o vídeo falhar; fica clara de propósito para o texto escuro do site continuar legível nesse cenário. */ .site-bg__fallback { opacity: 0.2; } /* --- Cartão de vidro ------------------------------------------------------- O painel translúcido que substitui todos os `bg-white ... rounded-2xl` do site. Não usa o filtro SVG de refracção do cartão do hero — repetir esse custo em dezenas de cartões seria insustentável; aqui o vidro vem de backdrop-filter sobre o vídeo de fundo, que é barato e lê igual. */ /* DOIS NÍVEIS, e a ordem importa: .glass-panel = casca EXTERIOR, sem preenchimento nenhum — igual ao cartão do hero. O vídeo atravessa-a intacta; só a borda e o brilho interior desenham o objecto. .glass-frost = cartão INTERIOR, leitoso. É ele que segura o texto e os dados. O contraste entre os dois é que cria a profundidade; invertê-los faz o exterior parecer um bloco e o interior desaparecer. */ .glass-panel { position: relative; border-radius: 48px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(11, 11, 11, 0.12), 0 8px 32px rgba(11, 11, 11, 0.07); } /* Fosco leitoso: o vídeo por trás vira mancha de cor difusa, sem detalhe. Usado nos cartões dentro de cartões e em tudo o que tem dados para ler (tabelas do admin, formulários, o dashboard interativo). */ .glass-frost, .glass-panel--dense { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(28px) saturate(125%); -webkit-backdrop-filter: blur(28px) saturate(125%); border-color: rgba(255, 255, 255, 0.7); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(11, 11, 11, 0.05), 0 6px 24px rgba(11, 11, 11, 0.06); } /* Vidro escuro, para as secções de CTA que antes eram `bg-ink` / `bg-brand`. Mantém a inversão de contraste da hierarquia sem voltar a um bloco opaco. */ .glass-panel--dark { background: rgba(11, 11, 11, 0.62); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.14), 0 8px 32px rgba(11, 11, 11, 0.18); } .glass-panel--brand { background: rgba(24, 79, 149, 0.62); border-color: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.2), 0 8px 32px rgba(24, 79, 149, 0.2); } /* Tinta de marca subtil, para os painéis que antes eram `bg-brand-light` */ .glass-panel--tint { background: rgba(230, 241, 251, 0.18); border-color: rgba(24, 79, 149, 0.3); } /* Frost à escala de um chip: mesmo fundo e desfoque, sem a sombra projectada — num elemento de ~26px de altura essa sombra lê-se como sujidade. */ .glass-frost--chip { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(20px) saturate(125%); -webkit-backdrop-filter: blur(20px) saturate(125%); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6); } /* Passos do pipeline (/sobre): os quatro são frost. O passo activo distingue-se pela cor da borda e do texto, não por um preenchimento sólido — assim nenhum dos quatro quebra a regra de vidro. */ .pipe-step { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(20px) saturate(125%); -webkit-backdrop-filter: blur(20px) saturate(125%); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6); color: #5f5e5a; } .pipe-step:hover { border-color: rgba(24, 79, 149, 0.4); } .pipe-step.is-active { border-color: #184f95; color: #184f95; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 4px 14px rgba(24, 79, 149, 0.18); } .pipe-step .h-4 { color: #184f95; } /* Raios menores para cartões pequenos, onde 48px ficaria quase oval */ .glass-panel--md { border-radius: 32px; } .glass-panel--sm { border-radius: 24px; } /* --- Cartão de vidro líquido (reutilizável) -------------------------------- O tratamento completo do cartão do hero, extraído para poder ser aplicado a qualquer cartão. Três camadas empilhadas: z-0 .glass-refract duplicado do fundo, refractado pelo filtro SVG z-1 .liquid-card__frost brilho fosco z-2 o conteúdo As duas primeiras são criadas por glass-card.js — no markup basta a classe .liquid-card e o atributo data-glass-card. */ .liquid-card { position: relative; overflow: hidden; /* recorta o duplicado ao cartão */ background: transparent; /* a refracção É o preenchimento */ border: 1px solid rgba(47, 47, 47, 0.15); border-radius: 48px; animation: fade-slide-up-card 900ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes fade-slide-up-card { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* Duplicado do fundo, alinhado ao plano de fundo e não ao cartão: left/top/width/height são escritos por glass-card.js. Dimensioná-lo ao fundo inteiro é deliberado — o filtro desloca cada canal de cor por uma quantidade diferente, e às arestas do próprio elemento filtrado isso aparece como bandas duras de separação de canal. Ao tamanho do fundo essas bandas caem fora do cartão e só se vê refracção limpa. */ .glass-refract { position: absolute; left: 0; top: 0; z-index: 0; overflow: hidden; pointer-events: none; } .glass-refract__canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: url(#liquid-glass-refraction); } .liquid-card__frost { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.15); transition: background 400ms; } .liquid-card:hover .liquid-card__frost { background: rgba(255, 255, 255, 0.1); } /* Cartões que também são alvo do scroll-reveal do site: a entrada fica a cargo do reveal (que dispara ao entrar no ecrã) e não da animação de carregamento. Sem isto as duas competiam pelo mesmo transform e o reveal deixava de funcionar — animações ganham sempre a declarações normais. */ .liquid-card[data-reveal] { animation: none; } /* Sem fundo desenhável não há refracção: o cartão passa a vidro fosco simples para não ficar um rectângulo vazio. */ .liquid-card.is-refract-failed .liquid-card__frost { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* O conteúdo tem de subir acima das duas camadas de vidro. */ .liquid-card > *:not(.glass-refract):not(.liquid-card__frost):not(.card-art) { position: relative; z-index: 2; } /* --- Marca de água do cartão --------------------------------------------- Ícone grande no canto inferior direito, inclinado a 45°, muito esbatido. É o mesmo tratamento dos cartões de indicador do Cockpit Executivo, e por isso o site e o produto lêem-se como a mesma família. Fica em z-1: acima do brilho fosco, abaixo do conteúdo. */ .card-art { position: absolute; z-index: 1; right: -16px; bottom: -20px; width: 118px; height: 118px; color: #184f95; opacity: 0.07; transform: rotate(45deg); pointer-events: none; } /* Variante para faixas: numa barra de ~70px de altura o ícone de 118px seria maior do que a própria faixa. */ .card-art--sm { width: 74px; height: 74px; right: -12px; bottom: -16px; } /* Em cartões sem as camadas de vidro (glass-panel--dense e afins) a marca de água precisa que o cartão a recorte. */ .has-card-art { position: relative; overflow: hidden; } /* Faixa: o mesmo vidro do cartão, mas baixa. O raio de 48px do .liquid-card transformaria uma barra desta altura numa cápsula. */ .liquid-card--strip { border-radius: 24px; } /* Numeração de passo tratada como marca de água, para os cartões numerados lerem-se igual aos que têm ícone: mesmo canto, mesma inclinação, mesma opacidade. Aqui a caixa é o próprio glifo, por isso dispensa width/height. */ .card-art--num { width: auto; height: auto; right: 6px; bottom: -18px; font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -0.045em; } /* --- Botão chanfrado ----------------------------------------------------- Substitui os botões "pílula" (rounded-full) do site pelo desenho angular do hero: rectângulo com os cantos superior-esquerdo e inferior-direito cortados. Feito com clip-path (e não com o SVG de contorno do hero) para funcionar em qualquer botão sem markup extra. Efeito secundário aceite: na variante de contorno o traço não desenha as duas arestas diagonais. */ .btn-chamfer { --chamfer: 12px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 0; clip-path: polygon( var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer) ); transition: opacity 250ms, background-color 250ms, color 250ms, transform 250ms; } .btn-chamfer:active { transform: translateY(1px); } .btn-chamfer--lg { --chamfer: 16px; } .btn-chamfer--sm { --chamfer: 9px; } .btn-chamfer--solid { background: #184f95; color: #ffffff; } .btn-chamfer--solid:hover { background: #185fa5; } .btn-chamfer--dark { background: #0b0b0b; color: #ffffff; } .btn-chamfer--dark:hover { background: #262625; } .btn-chamfer--outline { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(11, 11, 11, 0.25); color: #0b0b0b; } .btn-chamfer--outline:hover { border-color: rgba(24, 79, 149, 0.6); color: #184f95; } .btn-chamfer--outline-light { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(255, 255, 255, 0.35); color: #ffffff; } .btn-chamfer--outline-light:hover { border-color: rgba(255, 255, 255, 0.7); } /* --- Cabeçalho de página --------------------------------------------------- Versão do hero para páginas interiores. Já não traz vídeo próprio: o vídeo é agora o fundo global, e este painel apenas flutua por cima dele. */ .page-hero { position: relative; display: flex; align-items: center; min-height: 300px; padding: 2.5rem 0; } /* Ocupa as 12 colunas: o cartão estende-se a toda a largura do contentor. O texto lá dentro continua limitado a uma medida legível — uma linha de corpo a 1100px de largura seria impossível de acompanhar. */ .page-hero__panel { position: relative; z-index: 2; width: 100%; padding: 2rem; } /* O eyebrow é um inline: a regra genérica de .liquid-card não lhe aplica z-index sem position, por isso fica explícito aqui. */ .page-hero__eyebrow, .page-hero__title, .page-hero__body { position: relative; z-index: 2; } .page-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #184f95; } .page-hero__eyebrowDot { width: 6px; height: 6px; border-radius: 9999px; background: #184f95; } .page-hero__title { max-width: 20ch; font-size: 1.875rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: #0b0b0b; } .page-hero__body { margin-top: 0.75rem; max-width: 62ch; font-size: 0.875rem; line-height: 1.65; color: rgba(11, 11, 11, 0.68); } @media (min-width: 640px) { .page-hero { min-height: 340px; } .page-hero__panel { padding: 2.5rem; } .page-hero__title { font-size: 2.25rem; } .page-hero__body { font-size: 0.9375rem; } } @media (min-width: 768px) { .page-hero { min-height: 380px; } .page-hero__title { font-size: 2.75rem; } } /* --- Ajustes de legibilidade sobre o vídeo --------------------------------- Texto solto (títulos de secção, parágrafos introdutórios) não tem painel de vidro por baixo, por isso ganha uma sombra muito ligeira para se destacar das zonas mais claras e mais saturadas do vídeo. */ .on-glass-text { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65); } /* Campos de formulário sobre vidro: fundo próprio para o texto introduzido ser sempre legível, independentemente do frame do vídeo por trás. */ .glass-panel input[type="text"], .glass-panel input[type="email"], .glass-panel input[type="tel"], .glass-panel input[type="password"], .glass-panel select, .glass-panel textarea { background: rgba(255, 255, 255, 0.88); } @media (prefers-reduced-motion: reduce) { .btn-chamfer { transition: none; } }