/* Subconjunto de style.css só com o que index.html usa (tokens, navbar, eyebrow, hero, botões, service-intro, "Áreas de Atuação", steps, footer, back-to-top, reveal, ícones/spinner). Gerado a partir de style.css em 01/09/2026 para tirar do caminho crítico da home o CSS de outras páginas (playbooks/insights, artigos, aboutUs, contact/terms, 404 -- ~26 KB que a home nunca usa). style.css continua a ser o arquivo-fonte e continua a servir todas as outras páginas sem alteração -- qualquer ajuste de token, navbar, botão, footer etc. tem de ser replicado aqui manualmente. Os @font-face ficaram de fora: agora vão inline no de index.html (preload + descoberta imediata da fonte, sem depender deste arquivo). */ html { scroll-padding-top: 100px; overflow-x: hidden; } :root { /* ---- Marca ---- */ --color-navy: #0c2840; --color-red: #e63946; --color-navy-hover: #16364f; --color-navy-active: #081c2e; --color-red-hover: #c92e3a; --color-red-active: #ac2531; --color-red-tint: #fbe3e5; /* Vermelho para TEXTO PEQUENO sobre fundo claro (.eyebrow, .card-tag). O --color-red da marca (#e63946) sobre o paper dá só ~4,1:1 e reprova no WCAG AA para texto normal; este tom dá ~5,9:1. Manter em sincronia com css/style.css. */ --color-red-ink: #c0202e; /* cor do ponto da marca*/ --color-uniana-dot: var(--color-red); /* Cor do CTA (.btn-secondary) -- escolhida por Caroline em 2026-09-01 (ver artefacto "Cores do botão Agendar"): - #e63946 cor ANTERIOR do botão (= --color-red da marca). Reprovava no WCAG AA: ~4,1:1 de contraste com o texto branco. - #4d5d66 slate testado; não ficou bom -- descartado. - #0c2840 o navy da marca (= --color-navy) também ficou interessante. Atual: #d92d3c -- vermelho próximo do anterior, passa no AA (~4,7:1). Manter em sincronia com css/style.css. */ --color-cta: #d92d3c; --color-cta-hover: #c0202e; /* ---- Superfícies ---- */ /* "paper" - antes #f2f2f0. */ --color-bg: #fdfcfb; --color-surface: #ffffff; --color-surface-sunk: #e9e9e6; /* fallback sólido equivalente, para browsers sem suporte a color-mix(); recalculado para o novo --color-bg (antes #f9f9f8) */ --color-surface-card: #fefdfd; --color-surface-card: color-mix( in srgb, var(--color-surface) 50%, var(--color-bg) 50% ); --color-overlay: rgba(12, 40, 64, 0.55); /* ---- Neutros ---- */ --gray-900: #0c2840; --gray-700: #2e3f4c; --gray-500: #74818c; --gray-400: #909aa3; --gray-300: #aab7bf; --gray-200: #d2d8dc; --gray-100: #e6e9eb; --gray-050: #f2f2f0; /* ---- Texto ---- */ --text-primary: #0c2840; --text-secondary: #43525e; --text-muted: #74818c; --text-on-navy: #f2f2f0; --text-on-red: #ffffff; --text-link: #0c2840; --text-link-hover: #e63946; /* ---- Estados ---- */ --color-success: #52b788; --color-success-tint: #e4f4ec; --color-error: #c1121f; --color-error-tint: #fbe0e1; --color-warning: #e29a2e; --color-warning-tint: #fbefd9; --color-info: #2a6f97; --color-info-tint: #e1eef4; /* Bricolage Grotesque priorizada (mesma fonte de título da uniana-imersiva.html); Playfair Display/Georgia continuam como fallback caso não carregue. */ --font-display: "Bricolage Grotesque", "Playfair Display", Georgia, "Times New Roman", serif; /* Instrument Sans priorizada (mesma fonte de corpo da uniana-imersiva.html); Inter/system fonts continuam como fallback caso não carregue. */ --font-body: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-weight-light: 300; --font-weight-body: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --text-4xl: 4rem; --text-5xl: 5.5rem; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --measure: 68ch; /* ---- Espaçamento ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ---- Raio / sombra / bordas ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(12, 40, 64, 0.06); --shadow-md: 0 4px 12px rgba(12, 40, 64, 0.08); --shadow-lg: 0 12px 32px rgba(12, 40, 64, 0.12); --border-color: var(--gray-200); --focus-ring: 0 0 0 3px rgba(230, 57, 70, 0.45); --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 400ms cubic-bezier(0.22, 1, 0.36, 1); --transition-very-slow: 1000ms cubic-bezier(0.22, 1, 0.36, 1); } body { position: relative; font-family: var(--font-body); font-weight: 400; line-height: 28px; color: var(--color-navy); font-size: 14px; background-color: var(--color-bg); padding-top: 88px; } h1, h2, h3, h4, h5, h6, .section-title { font-family: var(--font-display); } a { -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; transition: 0.3s all ease; color: var(--text-primary); text-decoration: underline; } a:hover { color: var(--text-primary); text-decoration: none; } /* ************************************** navbar ************************************** */ .custom-navbar { background: var(--color-navy) !important; /*antes:#3b5d50 depois:#0C2840*/ padding-top: 20px; padding-bottom: 20px; position: fixed; top: 0; left: 0; right: 0; z-index: 1030; } .custom-navbar .navbar-brand { font-size: var(--text-2xl); font-weight: 600; } .custom-navbar .navbar-brand-logo { display: inline-block; width: 30px; height: 30px; /*inclusão do logo no navbar com o fundo branco galeria*/ background-color: var(--color-bg); /* logo.svg (traçado, ~4 KB) em vez do logoUniana.png (25 KB). O PNG continua a servir para og:image/twitter:image. */ -webkit-mask-image: url("../images/logo.svg"); mask-image: url("../images/logo.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .custom-navbar .navbar-brand > span { /*ícone uniana e ponto*/ opacity: 1; /*antes 0.4*/ } /* Uniana-dot ponto*/ .uniana-dot { color: var(--color-uniana-dot); } .custom-navbar .navbar-toggler { border-color: transparent; } .custom-navbar .navbar-toggler:active, .custom-navbar .navbar-toggler:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; } @media (min-width: 992px) { .custom-navbar .custom-navbar-nav li { margin-left: 15px; margin-right: 15px; } } .custom-navbar .custom-navbar-nav li a { font-weight: 500; color: var(--color-bg) !important; opacity: 1; /* antes:0.5 */ -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; transition: 0.3s all ease; position: relative; } @media (min-width: 768px) { .custom-navbar .custom-navbar-nav li a:before { content: ""; position: absolute; bottom: 0; left: 8px; right: 8px; background: var( --color-red ); /* sublinhado do menu que mostra a página que está ativa.*/ height: 5px; opacity: 1; visibility: visible; width: 0; -webkit-transition: 0.15s all ease-out; -o-transition: 0.15s all ease-out; transition: 0.15s all ease-out; } } .custom-navbar .custom-navbar-nav li a:hover { opacity: 1; } .custom-navbar .custom-navbar-nav li a:hover:before { width: calc(100% - 16px); } .custom-navbar .custom-navbar-nav li.active a { opacity: 1; } .custom-navbar .custom-navbar-nav li.active a:before { width: calc(100% - 16px); } .custom-navbar .custom-navbar-cta { margin-left: 0 !important; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } @media (min-width: 768px) { .custom-navbar .custom-navbar-cta { margin-left: 40px !important; } } .custom-navbar .custom-navbar-cta li { margin-left: 0px; margin-right: 0px; } .custom-navbar .custom-navbar-cta li:first-child { margin-right: 20px; } /* Eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-red-ink); /* contraste AA: ver --color-red-ink */ margin-bottom: 22px; } /* efeito de "traço" colocado em torno do eyebrow */ .eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--color-red-ink); /* mesma cor do texto do eyebrow */ border-radius: 2px; } .eyebrow::after { content: ""; width: 34px; height: 2px; background: var(--color-red-ink); /* mesma cor do texto do eyebrow */ border-radius: 2px; } @media (max-width: 576px) { /* inativação eyebrow pequenas telas. */ .eyebrow::before, .eyebrow::after { display: none; } } /* ************************************** hero ************************************** */ .hero { background: var(--color-bg); padding: calc(4rem - 30px) 0 0rem 0; /*Topo (Cima): calc(4rem - 30px)*/ min-height: 76dvh; /* trocado de vh para dvh (dynamic viewport hight)*/ display: flex; align-items: center; position: relative; z-index: 0; } .hero .hero-net { position: absolute; inset: 0; width: 100%; height: 100%; /* fica entre o fundo navy (z-index:0 implícito) e o .intro-excerpt (z-index:4) -- por isso a rede desenha-se atrás do texto e do botão. */ z-index: 1; pointer-events: none; } .hero .intro-excerpt { position: relative; z-index: 4; max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; } .hero h1 { font-weight: 700; color: var(--color-navy); /* var(--color-bg);*/ /* fluido com clamp()*/ font-size: clamp(2.25rem, 4.8vw, 3.75rem); } .hero h1 .hero-highlight { /* a barra é um background-image com box-decoration-break:clone, que desenha a barra separadamente em cada linha quando o texto quebra. */ color: var(--color-red); background-image: linear-gradient( var(--color-red-tint), var(--color-red-tint) ); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 0.16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hero p { color: var(--color-navy); /* var(--color-info-tint);*/ margin-bottom: 30px; } /* ************************************** Botões ************************************** */ .btn { font-weight: 600; padding: 12px 30px; border-radius: 30px; color: #ffffff; background: var(--color-navy); border-color: var(--color-navy); } .btn:hover { color: #ffffff; background: var(--color-navy-hover); border-color: var(--color-navy-hover); } .btn:active, .btn:focus { outline: none !important; -webkit-box-shadow: none; box-shadow: none; } .btn.btn-primary { background: var(--color-navy); border-color: var(--color-bg); } .btn.btn-primary:hover { background: var(--color-navy-hover); border-color: var(--color-navy-hover); } .btn.btn-secondary { color: var(--color-bg); background: var(--color-cta); border-color: var(--color-cta); } .btn.btn-secondary:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); } /* botão sólido branco/navy -- #serviceIntro */ .btn.btn-white { background: var(--color-surface); border-color: var(--color-surface); color: var(--color-navy); } .btn.btn-white:hover { background: var(--color-surface-sunk); border-color: var(--color-surface-sunk); color: var(--color-navy); } .btn.btn-navy-outline { background: transparent; border-width: 2px; border-color: rgba(12, 40, 64, 0.3); color: var(--color-navy); } .btn.btn-navy-outline:hover { border-color: var(--color-navy); background: var(--color-navy); color: #ffffff; } /* ************************************** título de seção ************************************** */ .section-title { padding: 10px 0px 0px 0px; color: var(--text-primary); } /* ************************************** Service Intro (sentence takeover) *** Fun ;) *** Block Scrollytelling & "Ritmo Vertical" (Dynamic Viewport Sizing) A secção fica "pinada" (position:sticky em .service-intro-pin) a preencher o ecrã enquanto se percorre a altura de .service-intro-track, e cada .sentence (sobrepostas via position:absolute) aparece/desaparece conforme scroll -- ver serviceIntroFx(). service-intro-track > service-intro-pin > sentence (4) 320 100 260 100 ************************************** */ .service-intro-track { height: 320dvh; position: relative; background: var(--color-navy-active); } @media (max-width: 576px) { .service-intro-track { height: 260dvh; } } .service-intro-pin { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .service-intro-track .sentence { position: absolute; max-width: 820px; padding: 0 32px; text-align: center; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; font-size: clamp(1.5rem, 3.6vw, 2.7rem); /*minimo, ideal, maximo*/ line-height: 1.35; color: var(--color-bg); opacity: 0; transform: translateY(46px) scale(0.97); transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .service-intro-track .sentence.active { opacity: 1; transform: none; } .service-intro-track .sentence.passed { opacity: 0; transform: translateY(-46px) scale(0.97); } .service-intro-track .sentence em { font-style: normal; color: var(--color-red); } .service-intro-track .sentence strong { color: #ffffff; } .service-intro-track .sentence .small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; /* (antes: color-mix com --color-bg a 65%) */ color: rgba(230, 57, 70, 0.65); color: color-mix(in srgb, var(--color-red) 65%, transparent); margin-top: 22px; letter-spacing: 0; } @media (prefers-reduced-motion: reduce) { .service-intro-track .sentence { transition: none; } } /* ************************************** Service / Áreas de Atuação ************************************** */ .service-section { /*Cima -> Direita -> Baixo -> Esquerda.*/ padding: var(--space-7) 0px 0px 0px; } @media (max-width: 576px) { .hero.hero-compact + .service-section { padding-top: var(--space-5); } } .service-list { display: flex; flex-direction: column; } .service-block { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-7) 0; border-bottom: 1px solid var(--border-color); } .service-list .service-block:last-child { border-bottom: none; } .service-block .svc-icon { width: 76px; height: 76px; border-radius: 50%; background: var(--color-red-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .service-block .svc-icon img { width: 36px; height: 36px; } .service-block-body { text-align: left; } .card-tag { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-red-ink); /* contraste AA: ver --color-red-ink */ margin-bottom: 10px; } .service-title { font-weight: 600; font-size: var(--text-base); } @media (max-width: 575.98px) { .service-block { flex-direction: column; align-items: center; gap: var(--space-4); } .service-block .svc-icon { display: none; } .service-block-body { text-align: center; } } /* ************************************** Do desafio a implementacao - antes do "steps" ************************************** */ .challenge-to-implementation-section { /*Cima -> Direita -> Baixo -> Esquerda.*/ padding: 20px 0px 0px 0px; } /* ************************************** Steps (scrollytelling da secção #how) (.steps/.step/.step-dot + buildPath()/pathFx() em custom.js): Desenho dos passos em SVG. ************************************** */ .steps { position: relative; max-width: 900px; margin: 0 auto; } .steps svg { position: absolute; left: 0; top: 0; height: 100%; width: 44px; overflow: visible; } .steps path { stroke: var(--border-color); stroke-width: 2.5; fill: none; } .steps path.draw { stroke: var(--color-red); stroke-dasharray: 1; stroke-dashoffset: 1; } .step { position: relative; padding: 0 0 78px 82px; } .step:last-child { padding-bottom: 0; } .step-dot { position: absolute; left: 10px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--color-bg); border: 2.5px solid var(--border-color); z-index: 2; transition: border-color 0.4s, background 0.4s, transform 0.4s; display: flex; align-items: center; justify-content: center; } .step-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background 0.4s; } .step.is-visible .step-dot { border-color: var(--color-red); transform: scale(1.2); } .step.is-visible .step-dot::after { background: var(--color-red); } .step h3 { font-size: 1.3rem; margin-bottom: 10px; } /* ************************************** how_start / Como Trabalhamos última chamada pré rodapé ************************************** */ #how_start { padding: 100px 0; } /* ************************************** Footer (formulário de newsletter - ajaxForms() no custom.js) ************************************** */ .footer-section { padding: 80px 0 40px; background: var(--color-navy); color: var(--color-bg); } .footer-section a { text-decoration: none; color: var(--color-bg); -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; transition: 0.3s all ease; } .footer-section a:hover { color: rgba(253, 252, 251, 0.55); } .footer-section .subscription-form { margin-bottom: 16px; position: relative; z-index: 2; } @media (min-width: 992px) { .footer-section .subscription-form { margin-bottom: 24px; } } .footer-section .subscription-form h3 { font-size: var(--text-lg); font-weight: 500; color: var(--color-bg); } .footer-section .subscription-form .newsletter-note { font-size: var(--text-sm); color: var(--color-bg); } .footer-section .subscription-form .newsletter-disclaimer { font-size: var(--text-sm); color: rgba(253, 252, 251, 0.55); } .footer-section .subscription-form .form-control { height: 50px; border-radius: 10px; font-family: var(--font-body); } .footer-section .subscription-form .form-control:active, .footer-section .subscription-form .form-control:focus { outline: none; border-color: var(--color-navy); -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); } .footer-section .subscription-form .form-control::placeholder { font-size: var(--text-sm); } .footer-section .subscription-form .form-control::-webkit-input-placeholder { font-size: var(--text-sm); } .footer-section .subscription-form .form-control::-moz-placeholder { font-size: var(--text-sm); } .footer-section .subscription-form .form-control:-ms-input-placeholder { font-size: var(--text-sm); } .footer-section .subscription-form .form-control:-moz-placeholder { font-size: var(--text-sm); } /*borda arredondada do botão de subscription da newsletter */ .footer-section .subscription-form .btn { border-radius: 10px !important; } /* feedback visual e textual do formulário de newsletter (sucesso/erro) */ .form-feedback:empty { display: none; } .form-feedback.is-success, .form-feedback.is-error { display: flex; align-items: center; gap: var(--space-2); max-width: 420px; padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 500; line-height: 1.4; } .form-feedback.is-success::before, .form-feedback.is-error::before { flex-shrink: 0; font-weight: 700; } .form-feedback.is-success { color: var(--color-success); background-color: var(--color-success-tint); border: 1px solid var(--color-success); } .form-feedback.is-success::before { content: "\2713"; } .form-feedback.is-error { color: var(--color-error); background-color: var(--color-error-tint); border: 1px solid var(--color-error); } .form-feedback.is-error::before { content: "\2715"; } /* botão flutuante "voltar ao topo" */ .back-to-top { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--color-bg); display: flex; align-items: center; justify-content: center; background-color: var(--color-navy); color: #fff; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, visibility 0.25s ease; z-index: 1000; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover, .back-to-top:focus-visible { background-color: var(--color-navy-hover); color: #fff; } .footer-section .links-wrap { margin-top: 0px; } @media (min-width: 992px) { .footer-section .links-wrap { margin-top: 54px; } } .footer-section .links-wrap ul li { margin-bottom: 10px; } /* área de toque dos links do rodapé (texto sozinho tinha só ~18px de altura, abaixo do mínimo de 24px recomendado); a margem negativa cancela o padding para não alterar o espaçamento visual entre os itens */ .footer-section .links-wrap ul li a { display: inline-block; padding: 6px 0; margin: -6px 0; } .footer-section .footer-logo-wrap .footer-logo { font-size: var(--text-2xl); font-weight: 500; text-decoration: none; color: var(--color-bg); } .footer-section .border-top { border-color: #dce5e4; } .footer-section .border-top.copyright { font-size: var(--text-sm) !important; } /* campo obrigatório do form de newsletter (extraído do bloco "Contact/Terms" de style.css -- essa regra é global, não só de contact.html/terms.html, e o input de email do newsletter do rodapé também tem `required`) */ input:required { border-left: 3px solid var(--color-red); } /* ************************************** scrollytelling: reveal on scroll (.reveal-stagger fica em style.css -- só usado em aboutUs.html) ************************************** */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--transition-very-slow), transform var(--transition-very-slow); } .reveal.is-visible { opacity: 1; transform: translateY(0); } } /* ************************************** ícones SVG inline (substituem o Font Awesome nas páginas sem FA) ************************************** */ .i { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex-shrink: 0; } .back-to-top .i { width: 1.1em; height: 1.1em; vertical-align: middle; } /* estado "a enviar" dos formulários AJAX (substitui fa-spinner/fa-spin) */ @keyframes uni-btn-spin { to { transform: rotate(360deg); } } .js-ajax-form button.is-sending { position: relative; color: transparent; pointer-events: none; } .js-ajax-form button.is-sending > * { visibility: hidden; } .js-ajax-form button.is-sending::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; visibility: visible; animation: uni-btn-spin 0.6s linear infinite; } @media (prefers-reduced-motion: reduce) { .js-ajax-form button.is-sending::after { animation-duration: 1.6s; } }