/* ============================================================ Porto Metabolic Health — HOMEPAGE V3 ------------------------------------------------------------ Folha de estilos EXCLUSIVA da homepage (index.html). Todas as regras estao prefixadas com .hv3 (classe no ), por isso NAO afectam styles.css nem as restantes paginas. Cada seccao vive no seu proprio bloco, com o seu proprio prefixo de classe. Alterar uma seccao nunca mexe nas outras: .hv3-header -> 1. HEADER .hv3-hero -> 2. HERO (imagem: img1.png) .hv3-cols -> 3. TRES COLUNAS .hv3-aval -> 4. AVALIACAO INICIAL (imagem: img2.png) .hv3-quote -> 5. FAIXA ESCURA .hv3-footer -> 6. FOOTER As duas fotografias sao sempre lidas de: /frontend/img/homepagev3/img1.png /frontend/img/homepagev3/img2.png Substituir o ficheiro na pasta troca a foto na pagina. ============================================================ */ /* ============================================================ 0. TOKENS ============================================================ */ .hv3 { --hv3-bg: #F0ECE7; /* fundo principal */ --hv3-bg-footer: #EDE8E3; /* fundo do footer */ --hv3-navy: #07131F; /* seccoes escuras */ --hv3-ink: #14181C; /* titulos / texto forte */ --hv3-ink-soft: #4C5157; /* corpo de texto */ --hv3-on-dark: #F0ECE7; /* texto sobre escuro */ --hv3-on-dark-soft:#C3C8CE; /* corpo sobre escuro */ --hv3-sand: #D9A574; /* preenchimento dos botoes */ --hv3-gold: #C0884C; /* eyebrows, numeros, setas */ --hv3-gold-warm: #DFA76F; /* acentos sobre fundo escuro */ --hv3-rule: rgba(7, 19, 31, 0.10); --hv3-rule-dark: rgba(240, 236, 231, 0.14); --hv3-serif: 'Cormorant Garamond', Georgia, serif; --hv3-sans: 'Inter', -apple-system, sans-serif; --hv3-max: 1480px; /* largura editorial */ --hv3-pad: 64px; /* respiracao lateral */ background: var(--hv3-bg); color: var(--hv3-ink); font-family: var(--hv3-sans); font-size: 17px; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; } .hv3-wrap { max-width: var(--hv3-max); margin: 0 auto; padding: 0 var(--hv3-pad); } /* elementos partilhados ------------------------------------ */ .hv3-eyebrow { display: block; font-family: var(--hv3-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--hv3-gold); line-height: 1.4; } .hv3-btn { display: inline-block; background: var(--hv3-sand); color: #1E1408; font-family: var(--hv3-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 17px 32px; border: 0; border-radius: 0; transition: background 0.2s ease; } .hv3-btn:hover { background: #E3B183; } /* ============================================================ 1. HEADER (transparente, sobreposto ao hero) ============================================================ */ .hv3-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; height: 96px; display: flex; align-items: center; gap: 32px; max-width: var(--hv3-max); margin: 0 auto; padding: 0 var(--hv3-pad); } /* logo: monograma + wordmark em 3 linhas */ .hv3-logo { display: flex; align-items: center; gap: 18px; text-decoration: none; flex-shrink: 0; } .hv3-logo-mark { font-family: var(--hv3-serif); font-weight: 500; font-size: 46px; line-height: 1; letter-spacing: -0.10em; color: var(--hv3-gold); } .hv3-logo-word { font-family: var(--hv3-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; line-height: 1.75; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; } .hv3-nav { margin-left: auto; display: flex; align-items: center; gap: 42px; } /* NOTA: o :not(.hv3-nav-cta) e obrigatorio. Sem ele, este selector (0,1,1) vence o .hv3-nav-cta (0,1,0) e o "border-bottom: transparent" apaga o rebordo inferior do botao do CTA. */ .hv3-nav a:not(.hv3-nav-cta) { font-family: var(--hv3-sans); font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, 0.88); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .hv3-nav a:not(.hv3-nav-cta):hover, .hv3-nav a:not(.hv3-nav-cta)[aria-current="page"] { color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, 0.35); } /* CTA do header: rectangulo de contorno fino, dourado, nos 4 lados */ .hv3-nav a.hv3-nav-cta { font-family: var(--hv3-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hv3-gold-warm); text-decoration: none; border: 1px solid var(--hv3-gold); padding: 0 30px; height: 48px; display: inline-flex; align-items: center; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .hv3-nav a.hv3-nav-cta:hover, .hv3-nav a.hv3-nav-cta:focus-visible { background: var(--hv3-sand); border-color: var(--hv3-sand); color: #1E1408; } .hv3-nav a.hv3-nav-cta:focus-visible { outline: 1px solid var(--hv3-gold-warm); outline-offset: 2px; } .hv3-nav a.hv3-nav-cta:active { background: var(--hv3-gold); border-color: var(--hv3-gold); color: #1E1408; } /* selector de idioma (funcionalidade preservada) */ .hv3-header .lang-dropdown { flex-shrink: 0; } .hv3-header .lang-selected { background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 0; color: rgba(255, 255, 255, 0.9); padding: 6px 9px; height: 36px; } .hv3-header .lang-selected:hover { border-color: var(--hv3-gold); box-shadow: none; } .hv3-header .lang-list { border-radius: 0; border-color: #d9d0c1; } /* hamburger — so aparece em mobile */ .hv3-burger { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; } .hv3-burger span { display: block; width: 24px; height: 1px; background: #FFFFFF; margin: 6px 0; } /* nav mobile em overlay */ .hv3-mobile-nav { display: none; position: fixed; inset: 0; z-index: 60; background: var(--hv3-navy); padding: 120px var(--hv3-pad) 0; flex-direction: column; gap: 8px; } .hv3-mobile-nav.open { display: flex; } .hv3-mobile-nav a { font-family: var(--hv3-serif); font-size: 34px; line-height: 1.5; color: var(--hv3-on-dark); text-decoration: none; } .hv3-mobile-close { position: absolute; top: 34px; right: var(--hv3-pad); background: none; border: 0; color: var(--hv3-on-dark); font-size: 32px; line-height: 1; cursor: pointer; } /* ============================================================ 2. HERO — img1.png a sangrar, texto sobre veu escuro ============================================================ */ .hv3-hero { position: relative; min-height: 800px; height: 88vh; max-height: 900px; display: flex; align-items: center; overflow: hidden; background: var(--hv3-navy); } .hv3-hero-img { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 66%; height: 100%; object-fit: cover; object-position: 62% 50%; z-index: 0; } /* veu: escuro solido a esquerda, transparente sobre a foto */ .hv3-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #030A11 0%, #030A11 32%, rgba(3, 10, 17, 0.86) 40%, rgba(3, 10, 17, 0.40) 50%, rgba(3, 10, 17, 0.08) 60%, rgba(3, 10, 17, 0.00) 70%); } .hv3-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--hv3-max); margin: 0 auto; padding: 96px var(--hv3-pad) 0; } .hv3-hero-copy { max-width: 470px; } .hv3-hero h1 { font-family: var(--hv3-serif); font-weight: 400; font-size: 78px; line-height: 1.02; letter-spacing: -0.005em; color: #FFFFFF; margin: 22px 0 0; } .hv3-hero h1 em { display: block; font-style: normal; color: var(--hv3-gold-warm); } .hv3-hero p { font-size: 17px; line-height: 1.75; color: var(--hv3-on-dark-soft); max-width: 400px; } .hv3-hero .hv3-hero-p1 { margin-top: 40px; } .hv3-hero .hv3-hero-p2 { margin-top: 26px; } .hv3-hero p strong { color: #FFFFFF; font-weight: 500; } .hv3-hero .hv3-btn { margin-top: 44px; } /* ============================================================ 3. TRES COLUNAS (01 / 02 / 03) ============================================================ */ .hv3-cols { padding: 84px 0 92px; background: var(--hv3-bg); } .hv3-cols-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .hv3-col { display: flex; flex-direction: column; padding-right: 52px; } .hv3-col + .hv3-col { border-left: 1px solid var(--hv3-rule); padding-left: 52px; } .hv3-col h2 { font-family: var(--hv3-serif); font-weight: 400; font-size: 42px; line-height: 1.05; letter-spacing: -0.005em; color: var(--hv3-ink); margin: 0; /* 2 linhas reservadas: mantem os corpos de texto alinhados entre colunas mesmo quando o titulo so ocupa uma linha */ min-height: 88px; } .hv3-col-lead { font-size: 16px; font-weight: 600; line-height: 1.65; color: var(--hv3-ink); margin-top: 34px; } .hv3-col p { font-size: 16px; line-height: 1.8; color: var(--hv3-ink-soft); margin-top: 22px; } .hv3-col-lead + p { margin-top: 20px; } /* lista editorial (travessao), nunca checklist de app */ .hv3-col-list { list-style: none; margin: 26px 0 0; padding: 0; } .hv3-col-list li { display: flex; gap: 14px; font-size: 16px; line-height: 1.8; color: var(--hv3-ink-soft); } .hv3-col-list li::before { content: '—'; color: var(--hv3-gold); flex-shrink: 0; } .hv3-col-link { margin-top: 30px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font-family: var(--hv3-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hv3-ink); text-decoration: none; } .hv3-col-link::after { content: '→'; color: var(--hv3-gold); transition: transform 0.2s ease; } .hv3-col-link:hover::after { transform: translateX(4px); } /* ============================================================ 4. AVALIACAO INICIAL — painel claro + img2.png ============================================================ */ .hv3-aval { display: grid; grid-template-columns: 42% 58%; min-height: 560px; background: var(--hv3-bg); } .hv3-aval-copy { display: flex; flex-direction: column; justify-content: center; padding: 76px 64px 76px max(var(--hv3-pad), calc((100vw - var(--hv3-max)) / 2 + var(--hv3-pad))); } .hv3-aval-copy h2 { font-family: var(--hv3-serif); font-weight: 400; font-size: 40px; line-height: 1.12; letter-spacing: -0.005em; color: var(--hv3-ink); margin: 20px 0 0; } .hv3-aval-rule { width: 56px; height: 1px; background: var(--hv3-gold); margin: 30px 0 0; border: 0; } .hv3-aval-copy p { font-size: 16px; line-height: 1.8; color: var(--hv3-ink-soft); margin-top: 26px; max-width: 400px; } .hv3-aval-copy p em { font-style: italic; } .hv3-aval-nota { font-size: 14px !important; color: #6A6F75 !important; } .hv3-aval-copy .hv3-btn { margin-top: 40px; align-self: flex-start; } .hv3-aval-img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; object-position: center; display: block; } /* ============================================================ 5. FAIXA ESCURA (afirmacao editorial) ============================================================ */ .hv3-quote { position: relative; background: var(--hv3-navy); padding: 62px var(--hv3-pad) 68px; text-align: center; overflow: hidden; } /* textura botanica quase imperceptivel, como na referencia */ .hv3-quote::before { content: ''; position: absolute; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23F0ECE7'%3E%3Cpath d='M60 260 C60 190 90 140 140 110 L142 116 C96 145 68 192 66 260 Z'/%3E%3Cellipse cx='80' cy='214' rx='22' ry='9' transform='rotate(-38 80 214)'/%3E%3Cellipse cx='102' cy='180' rx='22' ry='9' transform='rotate(-38 102 180)'/%3E%3Cellipse cx='126' cy='148' rx='22' ry='9' transform='rotate(-38 126 148)'/%3E%3Cellipse cx='58' cy='232' rx='20' ry='8' transform='rotate(28 58 232)'/%3E%3Cpath d='M244 40 C244 110 214 160 164 190 L162 184 C208 155 236 108 238 40 Z'/%3E%3Cellipse cx='224' cy='86' rx='22' ry='9' transform='rotate(-38 224 86)'/%3E%3Cellipse cx='202' cy='120' rx='22' ry='9' transform='rotate(-38 202 120)'/%3E%3Cellipse cx='178' cy='152' rx='22' ry='9' transform='rotate(-38 178 152)'/%3E%3C/g%3E%3C/svg%3E"); background-size: 300px 300px; pointer-events: none; } .hv3-quote p { position: relative; z-index: 1; font-family: var(--hv3-serif); font-weight: 400; font-size: 44px; line-height: 1.22; color: #FFFFFF; margin: 0; } .hv3-quote p span { display: block; color: var(--hv3-gold-warm); } /* ============================================================ 6. FOOTER ============================================================ */ .hv3-footer { background: var(--hv3-bg-footer); padding: 66px 0 0; } .hv3-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; padding-bottom: 56px; } .hv3-footer-col { padding-right: 40px; } .hv3-footer-col + .hv3-footer-col { border-left: 1px solid var(--hv3-rule); padding-left: 48px; } .hv3-footer-col:last-child { border-left: 0; padding-left: 48px; } .hv3-footer-col a.hv3-footer-logo, .hv3-footer-logo { display: flex; align-items: center; gap: 18px; text-decoration: none; } .hv3-footer-logo .hv3-logo-mark { font-size: 44px; } .hv3-footer-logo .hv3-logo-word { color: var(--hv3-ink); } .hv3-footer-tagline { font-size: 15px; line-height: 1.7; color: var(--hv3-ink-soft); margin-top: 26px; max-width: 260px; } .hv3-footer-title { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--hv3-ink); margin-bottom: 22px; } .hv3-footer-col a, .hv3-footer-col p { display: block; font-size: 15px; line-height: 2; color: var(--hv3-ink-soft); text-decoration: none; } .hv3-footer-col a:hover { color: var(--hv3-gold); } .hv3-footer-sep { width: 42px; height: 1px; background: var(--hv3-gold); border: 0; margin: 14px 0; } .hv3-footer-social { display: flex; gap: 14px; margin-top: 24px; } .hv3-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--hv3-ink); color: var(--hv3-ink); } .hv3-footer-social a:hover { border-color: var(--hv3-gold); color: var(--hv3-gold); } .hv3-footer-bottom { border-top: 1px solid var(--hv3-rule); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0 34px; flex-wrap: wrap; } .hv3-footer-bottom p { font-size: 14px; color: var(--hv3-ink-soft); margin: 0; } .hv3-footer-legal { display: flex; align-items: center; gap: 26px; } .hv3-footer-legal a, .hv3-footer-legal button { font-family: var(--hv3-sans); font-size: 14px; color: var(--hv3-ink-soft); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; } .hv3-footer-legal a:hover, .hv3-footer-legal button:hover { color: var(--hv3-gold); } .hv3-footer-legal > * + *::before { content: '|'; color: rgba(7, 19, 31, 0.22); margin-right: 26px; } /* ============================================================ 7. RESPONSIVE O ritmo editorial mantem-se: alinhamento a esquerda, hierarquia tipografica forte, respiracao preservada. ============================================================ */ @media (max-width: 1280px) { .hv3 { --hv3-pad: 44px; } .hv3-hero h1 { font-size: 64px; } .hv3-header { gap: 20px; } .hv3-nav { gap: 26px; } /* O CTA do header e o item mais longo da barra: em alemao ("Erste Einschatzung starten") mede 345px contra 237px em portugues. Entre 1025px e 1139px isso fazia a barra transbordar ate 111px, criando scroll horizontal e empurrando o selector de idioma para fora do ecra. Abaixo de 1280px o CTA e dispensavel: o mesmo botao (mesma chave i18n, mesmo destino) aparece logo a seguir no hero, e "Contacto" continua no menu. */ .hv3-nav-cta { display: none; } } @media (max-width: 1024px) { .hv3-nav, .hv3-nav-cta { display: none; } .hv3-burger { display: block; } .hv3-header { gap: 20px; } .hv3-cols-grid { grid-template-columns: 1fr; } .hv3-col { padding-right: 0; padding-bottom: 56px; } .hv3-col + .hv3-col { border-left: 0; border-top: 1px solid var(--hv3-rule); padding-left: 0; padding-top: 56px; } .hv3-col:last-child { padding-bottom: 0; } .hv3-aval { grid-template-columns: 1fr; } .hv3-aval-copy { padding: 72px var(--hv3-pad); } .hv3-aval-img { min-height: 420px; } .hv3-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 48px; } .hv3-footer-col:nth-child(odd) { border-left: 0; padding-left: 0; } } @media (max-width: 720px) { .hv3 { --hv3-pad: 26px; font-size: 16px; } .hv3-logo-mark { font-size: 38px; } .hv3-logo-word { font-size: 10px; letter-spacing: 0.18em; } /* ORDEM EM MOBILE: header -> foto -> textos. O header deixa de flutuar sobre o hero e passa a ser uma faixa navy propria, para nao assentar por cima da fotografia. */ .hv3-header { position: static; height: 84px; background: var(--hv3-navy); } .hv3-hero { display: flex; flex-direction: column; align-items: stretch; height: auto; min-height: 0; max-height: none; } .hv3-hero::after { display: none; } .hv3-hero-img { order: -1; /* a foto vem antes do bloco de texto */ position: relative; width: 100%; height: 340px; object-position: 55% 50%; } .hv3-hero-inner { padding-top: 56px; padding-bottom: 60px; } .hv3-hero-copy { max-width: 100%; } .hv3-hero h1 { font-size: 46px; } .hv3-hero p { max-width: 100%; } .hv3-col h2 { font-size: 34px; } .hv3-aval-copy h2 { font-size: 34px; } .hv3-quote { padding: 48px var(--hv3-pad) 52px; text-align: left; } .hv3-quote p { font-size: 32px; } .hv3-footer-grid { grid-template-columns: 1fr; row-gap: 44px; } .hv3-footer-col { border-left: 0 !important; padding-left: 0 !important; } .hv3-footer-bottom { flex-direction: column; align-items: flex-start; } .hv3-footer-legal { flex-wrap: wrap; gap: 16px; } .hv3-footer-legal > * + *::before { margin-right: 16px; } }