@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* ============================================================ b.human — style.css (mapa do ficheiro) ------------------------------------------------------------ 1. :root — variáveis de cor (mudar cores AQUI) 2. Base — reset, tipografia, .section / .section-split 3. Navbar + troca de idioma 4. Hero (partículas, sinapses, seta) 5. Componentes — cards, modais, cookie banner, newsletter, footer 6. TEXTURAS POR SECÇÃO — fundo de cada secção (mudar aqui) 7. Páginas — Mães & Medos, Aldeia, Recursos, Privacidade 8. AJUSTES POR SECÇÃO (fim do ficheiro) — cada secção do index (#oque, #missao, #servicos, #neuronature, #citacao, #mms, #quem, #recursos) num bloco único: cores + tipografia + layout. ============================================================ */ html{ overflow-x:hidden; } /* offset para as âncoras não ficarem por baixo da navbar */ section[id]{ scroll-margin-top:68px; } :root{ --beige:#f3efe6; --soft-green:#8fae8e; --deep-green:#4f6f52; --brown:#6b4f3a; --golden:#EFBF04; /* cores das secções (refactor: 1 sítio para mudar) */ --verde-seccao:#667d63; /* verde médio — títulos pequenos, texto, links */ --verde-titulo:#40503e; /* verde escuro — títulos/frases principais */ --dourado:#c8b46a; /* dourado — CTAs e links dourados */ --castanho-dourado:#97825e; /* castanho-dourado — Serviços/Fundadora */ --creme-card:#fbf9f8; /* creme — fundo de cartões */ --clinical-bg:#ffffff; --clinical-text:#2e2e2e; } /* GLOBAL */ body{ margin:0; overflow-x:hidden; font-family: 'Red Hat Display', sans-serif; background: url("assets/images/text_sections.png"), var(--beige); background-repeat:repeat; color:var(--deep-green); } body::before{ content:""; position:fixed; top:0; left:0; width:100%; height:100%; background:url("assets/images/text_sections.png"); opacity:0.025; pointer-events:none; z-index:-1; } /* LANGUAGE SWITCH */ .language-switch{ position:fixed; top: 11px; right:20px; z-index:1000; display:flex; gap:8px; align-items:center; } .language-switch button{ padding:0; background:none; border:none; font-family:'Red Hat Display', sans-serif; font-size:13px; font-weight:600; letter-spacing:1px; color:var(--deep-green); cursor:pointer; opacity:0.5; transition:all 0.25s ease; } .language-switch button:hover{ opacity:1; } .language-switch button.active{ opacity:1; } .lang-separator{ color:var(--deep-green); opacity:0.4; font-size:13px; font-weight:300; } /* NAVBAR */ .navbar{ position:fixed; top:0; left:0; width:100%; background:rgba(243,239,230,0.95); backdrop-filter:blur(6px); box-shadow:0 4px 12px rgba(120,120,120,0.2); transform:translateY(-100%); transition:transform 0.5s ease; z-index:1000; } .navbar-visible{ transform:translateY(0); } .nav-container{ display:flex; justify-content:space-between; align-items:center; padding:15px 10%; position:relative; } .nav-logo{ font-weight:bold; font-size:18px; color:var(--deep-green); } .nav-links a{ margin-left:25px; text-decoration:none; color:var(--deep-green); font-size:14px; transition:0.3s; } .nav-links a:hover, .nav-links a.nav-active{ opacity:1; /* faux-bold via text-shadow: mantém a largura igual, por isso o layout nunca salta */ text-shadow:0.3px 0 0 currentColor, -0.3px 0 0 currentColor; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1.5px; } /* AGENDAR SESSÃO — CTA da navbar */ .nav-right{ display:flex; align-items:center; } .nav-cta{ font-family:'Red Hat Display', sans-serif; font-size:14px; font-weight:600; color:#fff; background:var(--dourado); /* dourado suave a condizer com o mockup */ border:none; border-radius:30px; padding:10px 22px; margin-left:25px; cursor:pointer; white-space:nowrap; transition:background .25s ease, transform .15s ease, box-shadow .25s ease; } .nav-cta:hover{ background:#b8a356; transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,0.12); } /* HERO */ .hero{ height:100vh; background-image:url('assets/images/hero.jpg'); background-size:cover; background-position:center top; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; } /* HERO GRADIENT */ .hero-gradient{ position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient( 180deg, rgba(243,239,230,0.7) 0%, rgba(243,239,230,0.5) 40%, rgba(243,239,230,0.8) 100% ); z-index:1; } /* SUNLIGHT DUST */ .particles{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:2; } .particles span{ position:absolute; background:rgba(255,255,255,0.7); border-radius:50%; filter:blur(1px); animation:dustFloat linear infinite; } /* tamanhos variados */ .particles span:nth-child(odd){ width:3px; height:3px; } .particles span:nth-child(even){ width:5px; height:5px; opacity:0.6; } /* posições aleatórias */ .particles span:nth-child(1){top:10%; left:20%; animation-duration:18s;} .particles span:nth-child(2){top:30%; left:70%; animation-duration:22s;} .particles span:nth-child(3){top:50%; left:40%; animation-duration:20s;} .particles span:nth-child(4){top:80%; left:60%; animation-duration:25s;} .particles span:nth-child(5){top:60%; left:10%; animation-duration:19s;} .particles span:nth-child(6){top:25%; left:50%; animation-duration:23s;} .particles span:nth-child(7){top:75%; left:80%; animation-duration:21s;} .particles span:nth-child(8){top:40%; left:30%; animation-duration:24s;} .particles span:nth-child(9){top:15%; left:85%; animation-duration:18s;} .particles span:nth-child(10){top:65%; left:45%; animation-duration:22s;} .particles span:nth-child(11){top:20%; left:5%; animation-duration:19s;} .particles span:nth-child(12){top:55%; left:75%; animation-duration:23s;} .particles span:nth-child(13){top:70%; left:25%; animation-duration:20s;} .particles span:nth-child(14){top:35%; left:60%; animation-duration:24s;} .particles span:nth-child(15){top:90%; left:50%; animation-duration:26s;} .particles span:nth-child(16){top:45%; left:15%; animation-duration:21s;} .particles span:nth-child(17){top:10%; left:65%; animation-duration:22s;} .particles span:nth-child(18){top:85%; left:35%; animation-duration:19s;} .particles span:nth-child(19){top:60%; left:90%; animation-duration:23s;} .particles span:nth-child(20){top:40%; left:55%; animation-duration:20s;} /* movimento natural */ @keyframes dustFloat{ 0%{ transform:translate(0px,0px); } 25%{ transform:translate(10px,-15px); } 50%{ transform:translate(-8px,10px); } 75%{ transform:translate(12px,-5px); } 100%{ transform:translate(0px,0px); } } /* BREATHING ANIMATION */ @keyframes breathing{ 0%{ transform:scale(1); } 50%{ transform:scale(1.07); } 100%{ transform:scale(1); } } .brand{ font-size:56px; margin-bottom:40px; color:var(--deep-green); letter-spacing:2px; } /* HERO CONTENT */ .hero-content{ position:relative; z-index:3; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; } /* BUTTONS */ .hero-buttons{ position:absolute; bottom:-25px; left:0; right:0; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; z-index:4; } .hero-buttons button{ padding:20px 40px; font-size:18px; font-family: 'Red Hat Display', sans-serif; border:none; background:var(--soft-green); color:white; cursor:pointer; border-radius:8px; transition:0.3s; min-width:220px; box-shadow:0 0 12px rgba(120,120,120,0.25); } .hero-buttons button:hover{ background:var(--deep-green); transform:translateY(-3px); box-shadow:0 6px 18px rgba(120,120,120,0.35); } /* HERO INTRO (frase) */ .hero-intro{ position:relative; z-index:4; max-width:760px; margin:24px auto 0; padding:0 24px; font-size:22px; line-height:1.6; color:var(--deep-green); } /* HERO SCROLL ARROW (chevron) */ .hero-scroll{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); background:none; border:none; cursor:pointer; padding:14px; z-index:5; animation:heroChevronBounce 2s ease-in-out infinite; } .hero-scroll .chevron{ display:block; width:24px; height:24px; border-right:2.5px solid var(--deep-green); border-bottom:2.5px solid var(--deep-green); transform:rotate(45deg); opacity:0.7; transition:opacity .25s ease; } .hero-scroll:hover .chevron{ opacity:1; } @keyframes heroChevronBounce{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(8px); } } @media (prefers-reduced-motion: reduce){ .hero-scroll{ animation:none; } } .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* SCROLL REVEAL */ .section, .newsletter{ opacity:1; transform:none; } .show{ opacity:1; transform:none; } /* SECTIONS */ .section{ padding:33px 0; text-align:center; max-width:none; margin:0 100px; position:relative; } /* gradientes laterais removidos */ .section h2{ font-size:34px; margin-bottom:40px; } .section h3{ margin-top:10px; margin-bottom:40px; } .section h4{ margin-top:0; margin-bottom:25px; font-weight:normal; } .section p{ line-height:1; font-size:18px; text-align:justify; } /* CLINICAL .clinical{ background:var(--clinical-bg); color:var(--clinical-text); } */ /* NEWSLETTER */ .newsletter{ padding:96px 24px; /* textura → ver bloco "TEXTURAS POR SECÇÃO" no fim do ficheiro */ color:#fff; text-align:center; } .newsletter h2{ font-size:38px; font-weight:400; color:#fff; text-align:center; margin:0 0 16px 0; } .newsletter-subtitle{ max-width:680px; margin:0 auto 34px; font-size:17px; line-height:1.55; color:#f3efe6; text-align:center; } /* ---- override do form MailerLite para o visual do print ---- */ #mlb2-38222843 .ml-form-embedWrapper.embedForm{ background:transparent !important; border:none !important; border-radius:0 !important; max-width:520px !important; width:100% !important; margin:0 auto !important; } #mlb2-38222843 .ml-form-embedContent{ display:none !important; } #mlb2-38222843 .ml-form-embedBody{ padding:0 !important; } #mlb2-38222843 .ml-form-fieldRow{ margin:0 !important; } #mlb2-38222843 .ml-form-formContent{ margin:0 0 14px 0 !important; } #mlb2-38222843 input[type="email"]{ background:#f6f4ed !important; color:#4f6f52 !important; border:none !important; border-radius:32px !important; padding:17px 24px !important; font-size:16px !important; text-align:center !important; box-shadow:none !important; } #mlb2-38222843 input[type="email"]::placeholder{ color:#8a8a7a !important; } #mlb2-38222843 .ml-form-embedSubmit{ margin:0 !important; } #mlb2-38222843 .ml-form-embedSubmit button{ background:var(--verde-titulo) !important; border:none !important; border-radius:32px !important; padding:16px !important; font-size:16px !important; font-weight:600 !important; font-family:inherit !important; box-shadow:none !important; } #mlb2-38222843 .ml-form-embedSubmit button:hover{ background:#36452f !important; } .newsletter-consent{ max-width:520px; margin:20px auto 0; font-size:13px; line-height:1.5; color:#eef0e6; text-align:center; } .newsletter-consent a{ color:#fff; text-decoration:underline; } /* ORGANIC DIVIDER */ .wave-divider{ width:100%; overflow:hidden; line-height:0; } .wave-divider svg{ display:block; width:100%; height:80px; } .wave-divider path{ fill:var(--beige); } /* STAGGERED CONTENT ANIMATION */ .section h2, .section p, .newsletter h2, .newsletter input, .newsletter button{ opacity:1; transform:none; } /* WHEN SECTION BECOMES VISIBLE */ .show h2{ opacity:1; transform:translateY(0); transition-delay:0.2s; } .show p{ opacity:1; transform:translateY(0); transition-delay:0.5s; } /* NEWSLETTER STAGGER */ .show input{ opacity:1; transform:translateY(0); transition-delay:0.4s; } .show button{ opacity:1; transform:translateY(0); transition-delay:0.6s; } .newsletter-consent{ font-size:12px; opacity:0.8; margin-top:10px; } /* FOOTER */ .footer{ background:#e3ded2; color:var(--deep-green); padding:0; margin-top:0; } .footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:48px; max-width:none; margin:0; padding:64px 100px 48px; box-sizing:border-box; } .footer-brand{ flex:1 1 280px; max-width:340px; } .footer-brand .footer-logo img{ height:64px; margin-bottom:14px; } .footer-tagline1{ font-size:14px; line-height:0.6; color:var(--deep-green); opacity:0.9; margin:0 0 12px; } .footer-tagline2{ font-size:14px; line-height:0.6; color:var(--deep-green); opacity:0.9; margin:0 0 12px; } .footer-author{ font-size:14px; color:var(--deep-green); opacity:0.75; margin:0 0 22px; } .footer-social{ display:flex; align-items:center; gap:12px; } .footer-social-icon{ width:38px; height:38px; border-radius:50%; background:var(--deep-green); color:#e3ded2; display:inline-flex; align-items:center; justify-content:center; font-size:16px; text-decoration:none; transition:transform .2s ease, background .2s ease; } .footer-social-icon:hover{ transform:translateY(-2px); background:#3f5942; } .footer-social-linkedin{ display:inline-flex; align-items:center; gap:8px; color:var(--deep-green); text-decoration:none; font-size:13px; letter-spacing:1px; font-weight:600; text-transform:uppercase; } .footer-social-linkedin i{ width:38px; height:38px; border-radius:50%; background:var(--deep-green); color:#e3ded2; display:inline-flex; align-items:center; justify-content:center; font-size:16px; transition:transform .2s ease, background .2s ease; } .footer-social-linkedin:hover i{ transform:translateY(-2px); background:#3f5942; } .footer .footer-social-icon i, .footer .footer-social-linkedin i{ margin:0; opacity:1; } .footer-cols{ display:grid; grid-template-columns:repeat(4, auto); gap:48px; } .footer-col h4{ font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--deep-green); margin:0 0 16px; } .footer-col a, .footer-col .footer-soon{ display:block; font-size:14px; color:var(--deep-green); text-decoration:none; opacity:0.85; margin-bottom:10px; transition:opacity .2s ease, transform .2s ease; } .footer-col a:hover{ opacity:1; transform:translateX(2px); } .footer-col .footer-soon{ opacity:0.45; cursor:default; } .footer-col .footer-strong{ font-weight:700; opacity:1; } .footer-bottom{ background:var(--verde-seccao); color:#eef0e6; margin-top:0; padding:16px 100px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; border-top:none; opacity:1; text-align:left; } .footer-bottom p{ margin:0; } .footer-credit a{ color:#fff; text-decoration:underline; } @media (max-width:900px){ .footer-cols{ grid-template-columns:repeat(2, 1fr); gap:32px; } } @media (max-width:600px){ .footer-top{ flex-direction:column; padding:48px 24px 36px; gap:32px; } .footer-cols{ grid-template-columns:1fr 1fr; gap:24px; } .footer-bottom{ flex-direction:column; text-align:center; padding:16px 24px; } } /* LOGO */ .logo img{ width:1000px; margin-bottom: 0px; filter:drop-shadow(0px 8px 18px rgba(0,0,0,0.25)); animation:breathing 10s ease-in-out infinite; } /* NAVBAR LOGO */ .nav-logo img{ height:40px; } /* FOOTER LOGO */ .footer-logo img{ height:50px; margin-bottom:10px; } /* FOOTER ICONS */ .footer i{ margin-right:8px; opacity:0.85; } /* SOCIAL ICONS (VERTICAL STYLE) */ .social-icons{ display:flex; flex-direction:column; gap:10px; margin-top:8px; } .social-icon{ display:flex; align-items:center; gap:10px; text-decoration:none; color:white; font-size:14px; opacity:0.85; transition:all 0.25s ease; } .social-icon i{ font-size:16px; } .social-icon:hover{ opacity:1; transform:translateX(3px); } /* FOOTER TRANSITION */ .footer-transition{ display:none; } @media (max-width:768px){ .logo img{ width:260px; } } /* CURSOS */ .cursos-lista{ max-width:700px; margin:auto; } .curso{ margin-bottom:60px; } .curso h3{ font-size:26px; margin-bottom:10px; } .curso p{ font-size:16px; line-height:1.7; margin-bottom:15px; } .curso-botao{ display:inline-block; padding:10px 18px; background:var(--soft-green); color:white; text-decoration:none; border-radius:6px; transition:0.3s; } .curso-botao:hover{ background:var(--deep-green); } /* ACTIVE NAV LINK (used only for JS detection) */ .nav-links a.nav-active{ outline:none; } /* NAV LINKS CONTAINER */ .nav-links{ position:relative; display:flex; align-items:center; gap:25px; } /* NAV HIGHLIGHT */ .nav-highlight{ position:absolute; top:-33%; transform:translateY(-50%); width:29px; height:30px; background-image:url("assets/images/bhuman-logobar.png"); background-size:contain; background-repeat:no-repeat; background-position:center; opacity:0.33; filter:blur(0.3px); pointer-events:none; z-index:0; } /* NAV LINKS ABOVE HIGHLIGHT */ .nav-links a{ position:relative; z-index:2; } /* CONSULTA MODAL */ .consulta-modal{ display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.45); align-items:center; justify-content:center; } .consulta-content{ background:var(--beige); padding:40px; border-radius:10px; width:90%; max-width:520px; box-shadow:0 15px 40px rgba(0,0,0,0.25); text-align:center; } .consulta-content h2{ color:var(--deep-green); margin-bottom:10px; } .consulta-content p{ font-size:16px; margin-bottom:25px; } .consulta-close{ position:absolute; top:20px; right:30px; font-size:28px; cursor:pointer; color:var(--deep-green); } .consulta-content .ml-form-embedContainer{ width:100% !important; max-width:100% !important; } .consulta-content{ position:relative; max-width:400px; } /* BOTÃO FECHAR MODAL */ .consulta-close{ position:absolute; top:15px; right:18px; font-size:26px; background:none; border:none; cursor:pointer; color:var(--deep-green); transition:0.2s; } .consulta-close:hover{ transform:scale(1.15); opacity:0.7; } /* Servicos CARDS */ .servicos-grid-wrapper{ position:relative; width:100%; max-width:1100px; margin:40px auto 0; padding:0 24px; box-sizing:border-box; } .servicos-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; position:relative; z-index:2; } @media (max-width:900px){ .servicos-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:480px){ .servicos-grid{ grid-template-columns:1fr; } } .servico-card{ background:white; padding:23px; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,0.06); display:flex; flex-direction:column; height:100%; min-height:210px; transition:transform .3s ease, box-shadow .3s ease; } .servico-card h3{ margin-bottom:8px; text-align:center; margin-bottom: 11px; font-variant:small-caps; font-weight:600; letter-spacing:.3px; color:var(--deep-green); text-shadow:0 1px 2px rgba(0,0,0,.33); font-size:17px; } .servico-card p{ text-align:left; margin-top:3px; line-height:1.3; flex-grow:1; font-size: 14px; font-weight:400; } .servico-card:hover{ transform:translateY(-10px); box-shadow:0 16px 35px rgba(0,0,0,0.12); } .servico-botao{ display:inline-block; margin-top:auto; align-self:center; margin-bottom:15px; padding:12px 26px; border-radius:25px; background:var(--golden); color:white; text-decoration:none; font-size:18px; font-family: 'Red Hat Display', sans-serif; font-weight:bold; transition:0.25s; min-width:130px; text-align:center; } .servico-botao:hover{ background:var(--deep-green); } .servico-icon{ font-size:26px; color:var(--soft-green); margin-bottom:10px; opacity:0.9; } /* QUEM SOU */ .quem-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:60px; max-width:1100px; margin:40px auto; align-items:center; } .quem-foto img{ width:100%; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,0.12); } .quem-texto{ text-align:left; } .quem-texto h3{ font-size: 21px; font-variant:small-caps; font-weight:600; letter-spacing:.3px; color:var(--deep-green); text-shadow:0 1px 2px rgba(0,0,0,.33); } .quem-texto p{ margin-bottom:14px; line-height:1.6; } @media (max-width:900px){ .quem-grid{ grid-template-columns:1fr; gap:30px; } .quem-foto{ max-width:380px; margin:auto; } } /* ACTUALIDADES */ .recursos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; max-width:1100px; margin:40px auto; } .recursos-card{ background:white; border-radius:18px; box-shadow:0 10px 25px rgba(0,0,0,0.06); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease; } .recursos-card:hover{ transform:translateY(-10px); box-shadow:0 16px 35px rgba(0,0,0,0.12); } .recursos-card img{ width:100%; height:180px; object-fit:cover; transition:transform .4s ease; aspect-ratio:4/5; border-top-left-radius:16px; border-top-right-radius:16px; } .recursos-card:hover img{ transform:scale(1.04); } .recursos-card h4{ margin:18px 20px 6px 20px; text-align:center; margin-bottom: 5px; font-variant:small-caps; font-weight:600; letter-spacing:.3px; color:var(--deep-green); text-shadow:0 1px 2px rgba(0,0,0,.33); line-height:1.3; min-height:48px; font-size:17px; } .recursos-card p{ text-align:left; margin:5px 20px 30px 20px; line-height:1.3; flex-grow:1; font-size: 14px; font-weight:400; } .recursos-meta{ margin-right:20px; margin-bottom:25px; margin-top:-42px; margin-left:auto; font-size:13px; color:#7a7a7a; font-style:italic; } .recursos-botao{ margin:0 20px 20px 20px; padding:10px 20px; background:var(--golden); color:white; border-radius:20px; text-align:center; text-decoration:none; font-size:14px; align-self:flex-start; transition:.25s; } .recursos-botao:hover{ background:var(--deep-green); } /* SPLIT SECTIONS (O QUE FAZEMOS / MISSÃO) */ .section-split { display:flex; flex-direction:row; align-items:stretch; max-width:100vw; width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; min-height:100vh; padding:0; text-align:left; } .split-text { flex:1; display:flex; flex-direction:column; justify-content:center; padding:80px 80px; box-sizing:border-box; } .split-text h2 { font-size:42px; margin-bottom:20px; color:var(--deep-green); } .split-text h3 { font-size:22px; font-weight:500; margin-bottom:28px; line-height:1.6; color:var(--brown); } .split-text p { font-size:19px; line-height:1.8; margin-bottom:16px; text-align:left; } .split-photo { flex:1; position:relative; min-height:100vh; } .split-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--soft-green); opacity:0.35; gap:16px; color:var(--deep-green); } .split-placeholder i { font-size:48px; } .split-placeholder span { font-size:16px; font-weight:500; letter-spacing:1px; } /* foto real nas secções split */ .split-photo img { width:100%; height:100%; object-fit:cover; display:block; } @media (max-width:768px) { .section-split { flex-direction:column; min-height:auto; } .split-photo { min-height:280px; } .split-text { padding:50px 30px; } } /* INSTAGRAM SECTION */ .instagram-section{ padding:84px 24px 96px; text-align:center; /* textura → ver bloco "TEXTURAS POR SECÇÃO" no fim do ficheiro */ } .instagram-handle{ font-size:34px; font-weight:400; color:var(--deep-green); margin:0 0 8px; } .instagram-subtitle{ font-size:17px; color:#5f6e54; margin:0 0 42px; } .instagram-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 280px)); gap:24px; justify-content:center; max-width:900px; margin:0 auto; } .instagram-post{ display:block; text-decoration:none; aspect-ratio:1/1; background:#e4e0d3; border-radius:10px; overflow:hidden; transition:transform 0.3s ease, box-shadow 0.3s ease; } .instagram-post:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(0,0,0,0.10); } /* quando tiveres imagens/posts reais, é só meter dentro de cada .instagram-post */ .instagram-post img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width:640px){ .instagram-section{ padding:60px 16px 70px; } .instagram-grid{ grid-template-columns:repeat(3, 1fr); gap:10px; } .instagram-handle{ font-size:26px; } .instagram-subtitle{ font-size:15px; margin-bottom:28px; } } @media(max-width:600px){ .instagram-grid{ grid-template-columns:1fr; max-width:300px; } } /* COOKIE BANNER */ .cookie-banner{ position:fixed; bottom:0; left:0; right:0; z-index:9999; background:var(--deep-green); color:white; padding:20px 40px; display:flex; justify-content:center; box-shadow:0 -4px 20px rgba(0,0,0,0.15); transform:translateY(100%); transition:transform 0.4s ease; } .cookie-banner.visible{ transform:translateY(0); } .cookie-banner-content{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; max-width:1200px; width:100%; } .cookie-banner-content h3{ font-size:15px; font-weight:700; margin:0 0 4px 0; color:white; } .cookie-banner-content p{ font-size:13px; margin:0; opacity:0.85; line-height:1.5; flex:1; min-width:200px; } .cookie-banner-buttons{ display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; } .cookie-btn{ padding:10px 20px; border-radius:25px; font-size:13px; font-weight:600; font-family:'Red Hat Display', sans-serif; cursor:pointer; border:none; text-decoration:none; transition:0.25s; white-space:nowrap; } .cookie-btn-accept{ background:var(--golden); color:white; } .cookie-btn-accept:hover{ background:#d4a800; } .cookie-btn-essential{ background:transparent; color:white; border:1px solid rgba(255,255,255,0.5); } .cookie-btn-essential:hover{ border-color:white; background:rgba(255,255,255,0.1); } .cookie-btn-more{ background:transparent; color:white; opacity:0.7; font-weight:400; padding:10px 10px; } .cookie-btn-more:hover{ opacity:1; } @media(max-width:768px){ .cookie-banner{ padding:20px; } .cookie-banner-content{ flex-direction:column; gap:15px; } .cookie-banner-buttons{ width:100%; justify-content:center; } } /* COOKIE BANNER */ .cookie-banner{ position:fixed; bottom:0; left:0; right:0; background:var(--deep-green); color:white; padding:20px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; z-index:9999; box-shadow:0 -4px 20px rgba(0,0,0,0.2); } .cookie-banner p{ margin:0; font-size:14px; line-height:1.6; opacity:0.9; flex:1; min-width:200px; text-align:left; } .cookie-banner-buttons{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .cookie-btn{ padding:10px 20px; border-radius:25px; font-family:'Red Hat Display', sans-serif; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; transition:0.25s; border:none; } .cookie-btn-accept{ background:var(--golden); color:white; } .cookie-btn-accept:hover{ background:#d4a800; } .cookie-btn-essential{ background:transparent; color:white; border:1px solid rgba(255,255,255,0.5); } .cookie-btn-essential:hover{ background:rgba(255,255,255,0.1); } .cookie-btn-more{ background:transparent; color:white; opacity:0.7; font-weight:400; text-decoration:underline; } .cookie-btn-more:hover{ opacity:1; } @media(max-width:600px){ .cookie-banner{ flex-direction:column; align-items:flex-start; padding:20px 24px; } .cookie-banner-buttons{ width:100%; } .cookie-btn{ flex:1; text-align:center; } } /* PÁGINA DE PRIVACIDADE */ .privacidade-container{ max-width:800px; margin:120px auto 80px; padding:0 40px; color:var(--deep-green); line-height:1.8; } .privacidade-container h1{ font-size:36px; margin-bottom:30px; } .privacidade-container h2{ font-size:22px; margin-top:40px; margin-bottom:16px; } .privacidade-container p{ font-size:16px; margin-bottom:16px; text-align:left; } @media(max-width:600px){ .privacidade-container{ padding:0 24px; margin-top:100px; } } /* NEURONATURE FAIXA */ .neuronature-faixa{ position:absolute; /* 20px acima do topo das cards */ top:-20px; /* extensão à esquerda: 200px de aba visível */ left:-220px; /* largura = 2 colunas + gap + 220px de extensão à esquerda */ width:calc(51% - 8px + 220px); /* altura total das cards + 40px (20px em cima + 20px em baixo) */ height:calc(100% + 0px); z-index:1; display:flex; } .neuronature-faixa-inner{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; background:#cbe6ca; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,0.06); width:100%; height:100%; box-sizing:border-box; border-left:4px solid var(--soft-green); /* texto e botão ficam nos primeiros 180px (zona visível à esquerda) */ padding:20px calc(100% - 200px) 20px 20px; transition:box-shadow 0.3s ease; } .neuronature-faixa-inner:hover{ transform:translateY(-4px); box-shadow:0 16px 35px rgba(0,0,0,0.1); } .neuronature-faixa-icon{ font-size:28px; color:var(--soft-green); opacity:0.9; flex-shrink:0; } .neuronature-faixa-texto{ flex:1; text-align:left; } .neuronature-faixa-texto h4{ margin:0 0 2px 0; font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--soft-green); opacity:0.8; } .neuronature-faixa-texto h3{ margin:0 0 6px 0; font-size:16px; font-weight:700; font-variant:small-caps; color:var(--deep-green); } .neuronature-faixa-texto p{ margin:0; font-size:13px; line-height:1.5; color:var(--deep-green); opacity:0.8; text-align:left; } .neuronature-faixa-botao{ flex-shrink:0; } .neuronature-faixa-botao .servico-botao{ padding:10px 20px; font-size:14px; min-width:auto; } /* NEURONATURE MODAL */ .neuronature-modal-content{ text-align:center; } .neuronature-modal-icon{ font-size:40px; color:var(--soft-green); margin-bottom:16px; } .neuronature-modal-content h2{ font-size:24px; margin-bottom:20px; color:var(--deep-green); } .neuronature-modal-content p{ font-size:16px; line-height:1.8; text-align:left; color:var(--deep-green); } @media(max-width:1100px){ .neuronature-faixa-inner{ width:90%; } } @media(max-width:600px){ .neuronature-faixa-inner{ flex-direction:column; text-align:center; width:100%; } .neuronature-faixa-texto{ text-align:center; } .neuronature-faixa-texto p{ text-align:center; } } /* WRAPPER padding para a faixa NeuroNature sobressair por baixo */ .servicos-grid-wrapper{ padding-bottom:80px; } /* MARCA b.human */ .bhuman-brand{ font-weight:700; letter-spacing:0.10em; } /* ============================================================ COMO PODEMOS AJUDAR (secção 2) ============================================================ */ .section-ajudar h2{ color:var(--verde-titulo); } .section-ajudar .ajudar-subtitle{ color:var(--verde-seccao); text-align:center; line-height:1.6; font-size:18px; max-width:780px; margin:0 auto 8px; } .ajudar-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 350px)); justify-content:center; gap:24px; max-width:1500px; margin:40px auto 0; padding:0 24px; box-sizing:border-box; } .ajudar-card{ width:100%; max-width:350px; height:400px; box-sizing:border-box; background:rgba(208,210,183,0.75); /* #d0d2b7 a 75% */ border-radius:18px; padding:44px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; color:var(--deep-green); box-shadow:0 16px 32px rgba(0,0,0,0.16); /* drop shadow */ transition:transform .3s ease, box-shadow .3s ease; } .ajudar-card:hover{ transform:translateY(-5px); box-shadow:0 22px 42px rgba(0,0,0,0.22); } .ajudar-medal{ width:110px; height:110px; border-radius:50%; background:var(--soft-green); /* placeholder até teres as imagens */ background-size:cover; background-position:center; margin-bottom:22px; flex-shrink:0; } .ajudar-card h3{ font-size:20px; font-weight:600; margin:0 0 12px; color:var(--verde-titulo); } .ajudar-card p{ font-size:16px; line-height:1.55; text-align:center; /* anula o justify de .section p */ color:var(--verde-seccao); margin:0; } @media (max-width:820px){ .ajudar-grid{ grid-template-columns:repeat(2, minmax(0,350px)); } } @media (max-width:480px){ .ajudar-grid{ grid-template-columns:1fr; } .ajudar-card{ height:auto; min-height:340px; max-width:none; } } /* ============================================================ NAVBAR MOBILE / HAMBÚRGUER ============================================================ */ .nav-toggle{ display:none; } .language-switch-mobile{ display:none; } @media (max-width:860px){ /* barra sempre visível no topo (para o hambúrguer ser sempre alcançável) */ .navbar{ transform:translateY(0) !important; } .nav-container{ padding:12px 20px; } /* hambúrguer visível */ .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:6px; width:32px; height:32px; padding:0; background:none; border:none; cursor:pointer; z-index:2; } .nav-toggle span{ display:block; width:26px; height:2.5px; background:var(--deep-green); border-radius:2px; transition:transform .3s ease, opacity .2s ease; } .navbar.menu-open .nav-toggle span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); } .navbar.menu-open .nav-toggle span:nth-child(2){ opacity:0; } .navbar.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); } /* painel deslizante (a partir do .nav-right) */ .nav-right{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:center; gap:20px; background:rgba(243,239,230,0.98); backdrop-filter:blur(6px); padding:26px 20px; box-shadow:0 8px 16px rgba(120,120,120,0.18); transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; } .navbar.menu-open .nav-right{ transform:translateY(0); opacity:1; pointer-events:auto; } /* links empilhados */ .nav-links{ flex-direction:column; align-items:center; gap:18px; width:100%; } .nav-links a{ margin-left:0; font-size:17px; } .nav-highlight{ display:none; } /* o slide é interação de rato */ .nav-cta{ margin-left:0; } /* PT|EN: esconder o fixo do canto, mostrar o do painel */ .language-switch-desktop{ display:none; } .language-switch-mobile{ display:flex; position:static; top:auto; right:auto; margin-top:4px; } } /* ===== HERO (mobile) ===== */ @media (max-width:768px){ .hero-intro{ font-size:16px; line-height:1.55; margin-top:16px; padding:0 22px; } .hero-scroll{ bottom:20px; padding:10px; } .hero-scroll .chevron{ width:20px; height:20px; } } /* ===== SECÇÃO 2 "Como podemos ajudar?" (mobile) ===== */ @media (max-width:600px){ .section-ajudar .ajudar-subtitle{ font-size:16px; padding:0 18px; } .ajudar-card h3{ font-size:18px; } .ajudar-card p{ font-size:15px; } } /* ============================================================ SECÇÃO 3 "O que fazemos" (#oque) — só esta secção ============================================================ */ #oque .split-eyebrow, #missao .split-eyebrow, #neuronature .split-eyebrow, #mms .split-eyebrow{ display:block; font-size:14px; letter-spacing:2px; text-transform:uppercase; font-weight:600; color:var(--soft-green); margin-bottom:18px; } #oque .split-heading, #missao .split-heading, #neuronature .split-heading, #mms .split-heading{ font-size:27px; font-weight:400; line-height:1.3; color:var(--deep-green); margin:0 0 26px; } #oque .split-text p, #missao .split-text p, #neuronature .split-text p, #mms .split-text p{ font-size:15px; line-height:1.7; margin-bottom:14px; } #oque .split-cta, #neuronature .split-cta{ display:inline-block; width:fit-content; margin-top:14px; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; color:var(--deep-green); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1.5px; transition:opacity .2s ease; } #oque .split-cta:hover, #neuronature .split-cta:hover{ opacity:0.7; } @media (max-width:768px){ #oque .split-heading, #missao .split-heading, #neuronature .split-heading, #mms .split-heading{ font-size:26px; } #oque .split-text p, #missao .split-text p, #neuronature .split-text p, #mms .split-text p{ font-size:17px; } } /* SECÇÃO 4 "Missão e Visão" (#missao) — em mobile texto em cima, foto por baixo */ @media (max-width:768px){ #missao.section-split{ flex-direction:column-reverse; } } /* ============================================================ SECÇÃO 5 "Serviços Clínicos Integrativos" (#servicos) ============================================================ */ .serv-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,350px)); justify-content:center; gap:24px; max-width:1500px; margin:40px auto 0; padding:0 24px; box-sizing:border-box; } .serv-card{ background:rgba(208,210,183,0.75); border-radius:18px; padding:34px 26px; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:0 16px 32px rgba(0,0,0,0.16); transition:transform .3s ease, box-shadow .3s ease; } .serv-card:hover{ transform:translateY(-5px); box-shadow:0 22px 42px rgba(0,0,0,0.22); } .serv-medal{ width:100px; height:100px; border-radius:50%; background:var(--soft-green); /* placeholder até teres as imagens */ background-size:cover; background-position:center; margin-bottom:20px; flex-shrink:0; } .serv-card h3{ font-size:19px; font-weight:600; color:var(--deep-green); margin:0 0 12px; } .serv-card p{ font-size:15px; line-height:1.55; text-align:center; margin:0 0 20px; color:var(--deep-green); } .serv-link{ margin-top:auto; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; color:var(--deep-green); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; transition:opacity .2s ease; } .serv-link:hover{ opacity:0.7; } /* CTA "Agendar 1ª Conversa" */ .serv-cta{ max-width:760px; margin:48px auto 0; display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; padding:0 24px; } .serv-cta p{ flex:1; min-width:240px; text-align:left; font-size:17px; line-height:1.5; margin:0; color:var(--deep-green); } .serv-cta-btn{ font-family:'Red Hat Display', sans-serif; font-size:15px; font-weight:600; color:#fff; background:var(--deep-green); border:none; border-radius:30px; padding:14px 26px; cursor:pointer; white-space:nowrap; transition:background .25s ease, transform .15s ease; } .serv-cta-btn:hover{ background:#3e5a40; transform:translateY(-1px); } @media (max-width:820px){ .serv-grid{ grid-template-columns:repeat(2, minmax(0,350px)); } } @media (max-width:480px){ .serv-grid{ grid-template-columns:1fr; } } @media (max-width:600px){ .serv-cta{ flex-direction:column; gap:18px; } .serv-cta p{ text-align:center; } } /* ============================================================ NAVBAR — cor da fonte (var(--verde-titulo)) + dropdown "Recursos" ============================================================ */ .nav-links a, .nav-dropdown-toggle, .nav-dropdown-menu a, .language-switch button, .lang-separator{ color:var(--verde-titulo); } .nav-toggle span{ background:var(--verde-titulo); } /* DROPDOWN (desktop) */ .nav-dropdown{ position:relative; display:inline-flex; align-items:center; margin-left:25px; } .nav-dropdown-toggle{ background:none; border:none; cursor:pointer; font-family:'Red Hat Display', sans-serif; font-size:14px; display:inline-flex; align-items:center; gap:6px; padding:0; position:relative; z-index:2; } .nav-dropdown-toggle::after{ content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .25s ease; margin-top:-3px; } .nav-dropdown:hover .nav-dropdown-toggle::after, .nav-dropdown.open .nav-dropdown-toggle::after{ transform:rotate(-135deg); margin-top:2px; } .nav-dropdown-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); background:rgba(243,239,230,0.98); backdrop-filter:blur(6px); border-radius:12px; box-shadow:0 8px 20px rgba(120,120,120,0.18); padding:8px 0; min-width:160px; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:10; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(4px); } .nav-dropdown-menu a{ margin-left:0; padding:8px 22px; font-size:14px; white-space:nowrap; } /* DROPDOWN (mobile — expande dentro do painel) */ @media (max-width:860px){ .nav-dropdown{ flex-direction:column; align-items:center; width:100%; margin-left:0; } .nav-dropdown-toggle{ font-size:17px; } .nav-dropdown-menu{ position:static; transform:none; opacity:1; pointer-events:auto; background:none; backdrop-filter:none; box-shadow:none; padding:0; min-width:0; margin-top:12px; gap:14px; display:none; } .nav-dropdown.open .nav-dropdown-menu{ display:flex; } .nav-dropdown-menu a{ padding:0; font-size:16px; } } /* MARGEM LATERAL DAS SECÇÕES — responsiva */ @media (max-width:1024px){ .section{ margin:0 48px; } } @media (max-width:640px){ .section{ margin:0 20px; } } /* SECÇÕES SPLIT (texto + foto) — fundo branco, como no print (O que fazemos, Missão, NeuroNature). As restantes secções mantêm a textura text_sections.png definida em .section */ .section-split{ background:#ffffff; } /* ============================================================ SECÇÃO 7 — CITAÇÃO (faixa full-bleed) ============================================================ */ .quote-band{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:#d0d2b7; padding:90px 24px; text-align:center; } .quote-text{ max-width:900px; margin:0 auto; font-size:23px; line-height:1.5; font-weight:400; color:var(--deep-green); } .quote-author{ margin:24px 0 0; font-size:16px; color:var(--deep-green); opacity:0.7; } @media (max-width:768px){ .quote-band{ padding:60px 22px; } .quote-text{ font-size:21px; } } /* SECÇÃO 8 "Mães & Medos" (#mms) */ /* fundo creme (mostra a textura do body, como no print — não branco) */ #mms{ background:transparent; } /* botão verde cheio "Conhecer o Programa" */ .split-cta-btn{ display:inline-block; width:fit-content; margin-top:18px; border:none; cursor:pointer; font-family:'Red Hat Display', sans-serif; font-size:15px; font-weight:600; color:#fff; background:var(--deep-green); border-radius:30px; padding:14px 28px; text-decoration:none; transition:background .25s ease, transform .15s ease; } .split-cta-btn:hover{ background:#3e5a40; transform:translateY(-1px); } /* mobile: texto em cima, foto por baixo */ @media (max-width:768px){ #mms.section-split{ flex-direction:column-reverse; } } /* ============================================================ SECÇÃO 9 — FUNDADORA (#quem) ============================================================ */ /* fundo branco full-width (como no print) */ #quem{ background:#ffffff; max-width:100vw; width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; } .quem-eyebrow{ display:block; font-size:15px; font-weight:500; color:var(--soft-green); margin-bottom:10px; } /* nome em caso normal (anula small-caps/shadow herdados) */ .quem-texto h3{ font-size:30px; font-weight:400; font-variant:normal; text-shadow:none; color:var(--deep-green); margin:0 0 8px; } .quem-texto h4{ font-size:16px; font-weight:400; line-height:1.5; color:var(--deep-green); margin:0 0 22px; } .quem-pubmed{ display:inline-block; margin-top:18px; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; color:#a98c54; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; transition:opacity .2s ease; } .quem-pubmed:hover{ opacity:0.7; } /* ============================================================ SECÇÃO 10 — REFLEXÕES (#recursos) ============================================================ */ .recursos-eyebrow{ display:block; text-align:center; font-size:14px; letter-spacing:2px; text-transform:uppercase; font-weight:600; color:var(--soft-green); margin-bottom:14px; } .recursos-heading{ text-align:center; font-size:30px; font-weight:400; line-height:1.3; color:var(--deep-green); max-width:760px; margin:0 auto 10px; } /* cartão */ .recursos-card img{ width:100%; height:200px; object-fit:cover; aspect-ratio:auto; display:block; border-top-left-radius:16px; border-top-right-radius:16px; } .recursos-card-body{ display:flex; flex-direction:column; flex:1; padding:20px 22px 22px; } /* título em caso normal, à esquerda (anula small-caps/shadow) */ .recursos-card-body h4{ margin:0 0 8px; text-align:left; font-variant:normal; text-shadow:none; font-weight:600; font-size:18px; line-height:1.3; min-height:0; color:var(--deep-green); } .recursos-card-body p{ margin:0 0 18px; text-align:left; line-height:1.45; font-size:14px; color:var(--deep-green); opacity:0.85; } .recursos-card-footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; } .recursos-ler{ font-size:13px; letter-spacing:1.2px; text-transform:uppercase; font-weight:600; color:var(--deep-green); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; transition:opacity .2s ease; } .recursos-ler:hover{ opacity:0.7; } .recursos-card-footer .recursos-meta{ margin:0; font-size:12px; font-style:italic; color:#7a7a7a; text-transform:uppercase; letter-spacing:0.5px; } /* Reflexões — link "Ver todos os artigos" */ .recursos-ver-todos{ text-align:center; margin-top:36px; } .recursos-ver-todos-link{ font-size:13px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; color:var(--deep-green); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1.5px; transition:opacity .2s ease; } .recursos-ver-todos-link:hover{ opacity:0.7; } /* ===== página recursos.html ===== */ .recursos-page-intro-sec{ padding-top:120px; } .recursos-lead{ text-align:center; max-width:720px; margin:18px auto 0; font-size:17px; line-height:1.6; color:var(--deep-green); } #ebooks{ padding-bottom:80px; } /* páginas de conteúdo sem hero (cursos, mms): folga para a navbar fixa */ .page-content{ padding-top:96px; padding-bottom:40px; } /* ===== Mães & Medos: Secção A — "Um programa para Mães" ===== */ #mm-programa{ background:#ffffff; } #mm-programa .split-eyebrow{ display:block; font-size:14px; letter-spacing:2px; text-transform:uppercase; font-weight:600; color:#b89a55; margin-bottom:4px; } #mm-programa .split-heading{ font-size:34px; font-weight:400; line-height:1.3; color:#b89a55; margin:0 0 26px; } #mm-programa .split-text p{ font-size:17px; } .mm-cta-gold{ background:var(--dourado); } .mm-cta-gold:hover{ background:#b8a258; } /* ===== Mães & Medos: Secção B — 3 cartões (Quando / Para quem é / O que esperar) ===== */ #mm-info{ padding:54px 0 34px; } #mm-info .mm-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; max-width:1120px; margin:0 auto; align-items:stretch; } .mm-info-card{ background:var(--creme-card); border-radius:18px; padding:46px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:0 16px 34px rgba(0,0,0,0.10); } .mm-info-medal{ width:72px; height:72px; border-radius:50%; background:#dcd6ad; margin-bottom:24px; flex-shrink:0; } .mm-info-card h3{ font-size:22px; font-weight:700; color:#9a7b45; margin:0 0 16px; } .mm-info-card p{ font-size:16px; line-height:1.65; color:var(--deep-green); margin:0; } @media (max-width:860px){ #mm-info .mm-info-grid{ grid-template-columns:1fr; gap:22px; max-width:460px; } } /* ===== Mães & Medos: Secção C — Citação ===== */ #mm-cita{ padding:26px 0 64px; text-align:center; } .mm-cita-texto{ max-width:920px; margin:0 auto 28px; font-size:30px; font-weight:300; line-height:1.45; color:#7d8a6b; } .mm-cita-autor{ font-size:17px; font-weight:600; color:#5c7359; margin:0; } .mm-cita-role{ font-size:15px; font-weight:400; color:#8fae8e; margin:5px 0 0; } @media (max-width:680px){ .mm-cita-texto{ font-size:23px; } } /* ============================================================ TEXTURAS POR SECÇÃO ←←← MUDA AQUI o ficheiro de cada secção -------------------------------------------------------------- Para trocar a textura de uma secção, muda só o nome do ficheiro dentro de url("assets/images/____.png"). Todos os ficheiros de textura ficam na pasta: assets/images/ Nota: se a textura for um padrão que "ladrilha" (tile) em vez de uma imagem única, troca center/cover no-repeat por repeat. ============================================================ */ /* ---------- HOME (index.html) ---------- */ #ajudar { background:#f0ebe3;} /* "Como posso ajudar" */ #oque { background:var(--creme-card); } /* "O que fazemos" (split) — cor do lado do texto */ #missao { background:#f0ebe3; } /* "Missão e visão" (split) — cor do lado do texto */ #servicos { background:url("assets/images/text_servicos.png") center/cover no-repeat; } /* "Serviços" */ #neuronature { background:var(--creme-card); } /* "NeuroNature" (split) — cor do lado do texto */ #citacao { background:url("assets/images/text_frase.png") center/cover no-repeat; } /* citação / frase */ #mms { background:#f0ebe3; } /* "Mães & Medos" (split) — cor do lado do texto */ #quem { background:var(--creme-card); } /* "Quem sou" — cor do lado do texto */ #recursos { background:url("assets/images/text_reflexoes.png") center/cover no-repeat; } /* "Reflexões" (home) */ .instagram-section { background:#cdccb4 url("assets/images/text_instagram.png") center/cover no-repeat; } /* Instagram */ .newsletter { background:url("assets/images/text_newsletter_sign_up.png") center/cover no-repeat; } /* Newsletter */ /* ---------- MÃES & MEDOS (mmspage.html) ---------- */ #mm-programa { background:var(--creme-card); } /* "Um programa para Mães" (split) — cor do lado do texto */ #mm-info { background:url("assets/images/text_mm_info.png") center/cover no-repeat; } /* 3 cartões */ #mm-cita { background:url("assets/images/text_frase.png") center/cover no-repeat; } /* citação */ /* ---------- RECURSOS (recursos.html) ---------- */ .recursos-page-intro-sec { background:url("assets/images/text_reflexoes.png") center/cover no-repeat; } /* intro */ #reflexoes { background:url("assets/images/text_reflexoes.png") center/cover no-repeat; } /* Reflexões */ #ebooks { background:url("assets/images/text_reflexoes.png") center/cover no-repeat; } /* Ebooks */ /* ---------- CURSOS (cursos.html) ---------- */ #cursos-conteudo { background:url("assets/images/text_cursos.png") center/cover no-repeat; } /* conteúdo */ /* ---------- ALDEIA (aldeia.html) ---------- */ #al-programa { background:var(--creme-card); } /* split — cor do lado do texto */ #al-temas { background:url("assets/images/text_aldeia_temas.png") center/cover no-repeat; } /* Temas */ #al-cita { background:#dce3cd; } /* citação — faixa sálvia */ /* ---------- PARTILHADO (todas as páginas) ---------- */ .footer { background:url("assets/images/text_footer.png") center/cover no-repeat; } /* rodapé */ /* ============================================================ SECÇÕES COM TEXTURA À LARGURA TOTAL (full-bleed) A textura cobre toda a largura (deixa de aparecer a textura do body nas margens). O conteúdo continua recolhido por padding. ============================================================ */ #ajudar, #servicos, #recursos, #mm-info, #mm-cita, .recursos-page-intro-sec, #reflexoes, #ebooks, #cursos-conteudo{ width:100vw; max-width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; padding-left:100px; padding-right:100px; box-sizing:border-box; } @media (max-width:1024px){ #ajudar, #servicos, #recursos, #mm-info, #mm-cita, .recursos-page-intro-sec, #reflexoes, #ebooks, #cursos-conteudo{ padding-left:48px; padding-right:48px; } } @media (max-width:640px){ #ajudar, #servicos, #recursos, #mm-info, #mm-cita, .recursos-page-intro-sec, #reflexoes, #ebooks, #cursos-conteudo{ padding-left:20px; padding-right:20px; } } /* ===== Aldeia: Secção A — split "Aldeia da Família" ===== */ #al-programa .split-heading{ font-size:34px; font-weight:400; line-height:1.3; color:#8a9474; margin:0 0 26px; } #al-programa .split-text p{ font-size:17px; } /* ===== Aldeia: Secção B — "Temas que podem ser explorados" ===== */ #al-temas{ padding:56px 0; text-align:center; } #al-temas .al-temas-titulo{ font-size:30px; font-weight:400; color:var(--deep-green); margin:0 0 42px; } #al-temas .al-temas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; max-width:1120px; margin:0 auto; } .al-tema-card{ background:#dde2cd; border-radius:18px; padding:48px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:0 16px 34px rgba(0,0,0,0.08); } .al-tema-medal{ width:96px; height:96px; border-radius:50%; background:var(--verde-seccao); margin-bottom:26px; flex-shrink:0; } .al-tema-card p{ font-size:17px; line-height:1.55; color:var(--deep-green); margin:0; } @media (max-width:860px){ #al-temas .al-temas-grid{ grid-template-columns:1fr; gap:22px; max-width:460px; } } /* ===== Aldeia: Secção C — Citação ===== */ #al-cita{ padding:60px 0 70px; text-align:center; } #al-cita .al-cita-texto{ max-width:900px; margin:0 auto 12px; font-size:30px; font-weight:300; line-height:1.4; color:var(--deep-green); } @media (max-width:680px){ #al-cita .al-cita-texto{ font-size:23px; } } /* Aldeia: secções B e C à largura total (fundo de ponta a ponta) */ #al-temas, #al-cita{ width:100vw; max-width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; box-sizing:border-box; } #al-temas{ padding-left:100px; padding-right:100px; } @media (max-width:1024px){ #al-temas{ padding-left:48px; padding-right:48px; } } @media (max-width:640px){ #al-temas{ padding-left:20px; padding-right:20px; } } /* ============================================================ HERO SINAPSES — camada de pulsos (atrás do logótipo) ============================================================ */ #synapse-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; /* acima do véu (.hero-gradient=1), abaixo do logótipo (.hero-content=3) */ pointer-events:none; } /* ============================================================ SOM AMBIENTE — botão mute/unmute (ao lado do PT|EN) ============================================================ */ .sound-toggle{ background:none; border:none; cursor:pointer; padding:0 6px; margin-left:4px; font-size:0.95rem; line-height:1; color:inherit; /* acompanha a cor do PT|EN */ opacity:0.7; transition:opacity .2s ease; } .sound-toggle:hover{ opacity:1; } /* ============================================================ SECÇÕES DE ECRÃ INTEIRO — altura = ecrã menos a navbar (só a altura; alinhamento do conteúdo fica para depois, secção a secção) ============================================================ */ :root{ --nav-h:70px; } /* altura da navbar (desktop) */ #oque, #missao, #neuronature, #mms, #quem{ min-height: calc(100vh - var(--nav-h)); /* fallback */ min-height: calc(100dvh - var(--nav-h)); /* mobile: conta com a barra do browser */ } /* a foto dos split tem min-height:100vh, que puxava a secção de volta para 100vh; alinhar à mesma altura útil (só nas secções do index) */ #oque .split-photo, #missao .split-photo, #neuronature .split-photo, #mms .split-photo{ min-height: calc(100vh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h)); } /* ============================================================ #oque "O que fazemos" — cores ============================================================ */ #oque .split-eyebrow{ color:var(--verde-seccao); } /* título */ #oque .split-heading{ color:var(--verde-titulo); } /* frase a seguir ao título */ #oque .split-text p{ color:var(--verde-seccao); } /* texto a seguir */ #oque .split-cta{ color:var(--dourado); } /* link "Conheça os nossos serviços" */ /* ============================================================ #oque — tipografia e posição do texto (ajuste fino) ============================================================ */ #oque .split-text p{ font-size:19px; } /* texto maior + mais ar entre parágrafos */ #oque .split-text{ padding-left:127px; } /* empurra o bloco mais para a direita */ #oque .split-photo{ flex:1.15; } /* foto mais larga → vem mais para o centro */ #oque .split-text{ flex:0.85; } /* texto mais estreito, à esquerda */ /* ============================================================ #missao "Missão Visão" — cores ============================================================ */ #missao .split-eyebrow{ color:var(--verde-seccao); } /* título */ #missao .split-heading{ color:var(--verde-titulo); } /* frase a seguir ao título */ #missao .split-text p{ color:var(--verde-seccao); } /* texto a seguir */ /* ============================================================ #missao — tipografia e posição do texto (ajuste fino) ============================================================ */ #missao .split-text p{ font-size:19px; margin-bottom:18px; } /* texto maior + mais ar entre parágrafos */ #missao .split-text{ padding-right:127px; } /* empurra o bloco mais para a direita */ /* ============================================================ #servicos "Serviços Clínicos" — cores ============================================================ */ #servicos .serv-card{ background:var(--creme-card); opacity: 100%; } /* cor de cada card (sólido) */ #servicos h2{ color:var(--castanho-dourado); } /* título */ #servicos > p{ color:var(--castanho-dourado); max-width:820px; margin:0 auto; text-align:center; line-height:1.6; } /* frase de intro — centrada e estreita (como o print) */ #servicos .serv-card h3{ color:var(--castanho-dourado); } /* título de cada card */ #servicos .serv-card p{ color:var(--castanho-dourado); } /* texto de cada card */ #servicos .serv-link{ color:var(--dourado); } /* link "Saber mais" */ /* ============================================================ #servicos — texto final + botão "Agendar primeira consulta" ============================================================ */ #servicos .serv-cta p{ color:var(--castanho-dourado); } /* texto depois dos serviços */ #servicos .serv-cta-btn{ background:var(--dourado); color:#fff; } /* dourado, letras brancas */ #servicos .serv-cta-btn:hover{ background:#b8a356; } /* dourado mais escuro no hover */ /* ============================================================ #neuronature "NeuroNature" — cores ============================================================ */ #neuronature .split-eyebrow{ color:var(--verde-seccao); } /* título */ #neuronature .split-heading{ color:var(--verde-titulo); } /* frase a seguir ao título */ #neuronature .split-text p{ color:var(--verde-seccao); } /* texto */ #neuronature .split-cta{ color:var(--dourado); } /* link "Saber mais" */ /* ============================================================ #neuronature — tipografia e posição do texto (ajuste fino) ============================================================ */ #neuronature .split-text p{ font-size:19px; } /* texto maior + mais ar entre parágrafos */ #neuronature .split-text{ padding-left:127px; } /* empurra o bloco mais para a direita */ #neuronature .split-photo{ flex:1.15; } /* foto mais larga → vem mais para o centro */ #neuronature .split-text{ flex:0.85; } /* texto mais estreito, à esquerda */ /* ============================================================ #citacao — frase (citação a seguir ao NeuroNature) ============================================================ */ #citacao .quote-text{ color:var(--verde-seccao); } /* ============================================================ #mms "Mães & Medos" — cores ============================================================ */ #mms .split-eyebrow{ color:var(--verde-seccao); } /* título */ #mms .split-heading{ color:var(--verde-titulo); } /* frase a seguir ao título */ #mms .split-text p{ color:var(--verde-seccao); } /* texto */ #mms .split-cta-btn{ background:var(--verde-titulo); color:#fff; } /* botão "Conheça o programa" */ #mms .split-cta-btn:hover{ background:#334032; } /* um pouco mais escuro no hover */ /* ============================================================ #maesemedos — tipografia e posição do texto (ajuste fino) ============================================================ */ #mms .split-text p{ font-size:19px; margin-bottom:18px; } /* texto maior + mais ar entre parágrafos */ #mms .split-text{ padding-right:200px; } /* empurra o bloco mais para a direita */ /* ============================================================ #quem "Fundadora" — cores ============================================================ */ #quem .quem-eyebrow{ color:var(--verde-seccao); } /* título "Fundadora" */ #quem .quem-texto h3{ color:var(--dourado); } /* subtítulo "Dra. Ana Sofia Duarte, PhD" */ #quem .quem-texto h4{ color:var(--castanho-dourado); } /* "Neurologista pediátrica…" (por baixo do nome) */ #quem .quem-texto p{ color:var(--castanho-dourado); } /* texto */ #quem .quem-pubmed{ color:var(--dourado); } /* link PubMed */ /* ============================================================ #quem "Fundadora" — layout como o print (foto quadrada 630px) ============================================================ */ #quem{ display:flex; align-items:center; } /* centra o conteúdo na secção */ #quem .quem-grid{ width:100%; grid-template-columns: 1fr 630px; /* texto flexível + foto quadrada 630px */ gap: 25px; max-width: none; margin: 0; padding: 0px 127px; /* margem esquerda/direita (ajustável) */ align-items: center; } #quem .quem-foto img{ width: 630px; height: 630px; object-fit: cover; /* quadrada, sem distorcer */ padding: 0px 0px; border-radius: 0; /* cantos retos, como o print */ box-shadow: none; } #quem .quem-texto p{ font-size: 19px; } /* tamanho do texto como o print */ /* mobile: empilhar e foto responsiva */ @media (max-width:900px){ #quem{ display:block; } #quem .quem-grid{ grid-template-columns:1fr; gap:300px; padding:60px 24px; } #quem .quem-foto img{ width:100%; height:auto; max-width:420px; aspect-ratio:1/1; margin:0 auto; } }/* ============================================================ #recursos "Reflexões" — cores ============================================================ */ #recursos .recursos-eyebrow{ color:var(--verde-seccao); } /* título */ #recursos .recursos-heading{ color:var(--verde-titulo); } /* subtítulo */ #recursos .recursos-card-body h4{ color:var(--verde-seccao); } /* título de cada card */ #recursos .recursos-card-body p{ color:var(--verde-seccao); } /* texto de cada card */ #recursos .recursos-ler{ color:var(--verde-seccao); } /* link de cada card */ #recursos .recursos-meta{ color:var(--verde-seccao); } /* data */ #recursos .recursos-ver-todos-link{ color:var(--verde-seccao); } /* link "todos os artigos" */ /* ============================================================ recursos.html — Reflexões (mesma formatação da homepage) ============================================================ */ .recursos-page-intro-sec .recursos-eyebrow{ color:var(--verde-seccao); } /* título da página */ .recursos-page-intro-sec .recursos-heading{ color:var(--verde-titulo); } /* subtítulo da página */ #reflexoes .recursos-heading, #ebooks .recursos-heading{ color:var(--verde-seccao); } /* título de cada secção */ #reflexoes .recursos-card-body h4{ color:var(--verde-seccao); } /* título de cada card */ #reflexoes .recursos-card-body p{ color:var(--verde-seccao); } /* texto de cada card */ #reflexoes .recursos-ler{ color:var(--verde-seccao); } /* link de cada card */ #reflexoes .recursos-meta{ color:var(--verde-seccao); } /* data */ /* ============================================================ NEWSLETTER — cores, caixa de email, botão e altura ============================================================ */ .newsletter{ min-height:50vh; /* metade da página visível */ min-height:50dvh; display:flex; flex-direction:column; justify-content:center; /* centra o conteúdo verticalmente */ } .newsletter h2{ color:#f6f4ed; } /* título */ .newsletter-subtitle{ color:#f6f4ed; } /* subtítulo */ /* caixa de email + botão — mesmo arredondamento suave (como na foto) */ #mlb2-38222843 input[type="email"]{ border-radius:10px !important; } /* botão de subscrever */ #mlb2-38222843 .ml-form-embedSubmit button{ background:var(--verde-seccao) !important; border-radius:10px !important; } #mlb2-38222843 .ml-form-embedSubmit button:hover{ background:#566b53 !important; } /* ============================================================ FOOTER — margem lateral responsiva (100px no desktop largo) ============================================================ */ @media (min-width:601px) and (max-width:1024px){ .footer-top{ padding-left:48px; padding-right:48px; } .footer-bottom{ padding-left:48px; padding-right:48px; } } /* ============================================================ CORREÇÕES MOBILE — COLAR NO FIM DO style.css ------------------------------------------------------------ Tem de ficar NO FIM do ficheiro: estas regras têm a mesma especificidade das que corrigem (também usam ID + classe), por isso é a ordem que decide qual vence. Nada aqui afeta o desktop: está tudo dentro de media queries. ============================================================ */ /* ------------------------------------------------------------ 1. SECÇÕES SPLIT — padding lateral em mobile As regras de ajuste fino (#oque .split-text{padding-left:127px}, #mms .split-text{padding-right:200px}, etc.) não estão dentro de media query e, por serem ID+classe, vencem o .split-text{padding:50px 30px} do bloco responsivo. Em ecrã pequeno o texto ficava esmagado. ------------------------------------------------------------ */ @media (max-width:768px){ #oque .split-text, #missao .split-text, #neuronature .split-text, #mms .split-text{ padding:50px 26px; } } /* ------------------------------------------------------------ 2. SECÇÕES SPLIT — altura da fotografia em mobile #oque .split-photo{min-height:calc(100dvh - --nav-h)} vencia o .split-photo{min-height:280px} responsivo, e cada secção passava a ocupar dois ecrãs (um de texto + um só de foto). ------------------------------------------------------------ */ @media (max-width:768px){ #oque .split-photo, #missao .split-photo, #neuronature .split-photo, #mms .split-photo{ min-height:300px; max-height:45vh; } } /* ------------------------------------------------------------ 3. FUNDADORA — espaço entre texto e foto Estava gap:300px (provável gralha de 30px). ------------------------------------------------------------ */ @media (max-width:900px){ #quem .quem-grid{ gap:34px; } } /* ------------------------------------------------------------ 4. LOGÓTIPO DO HERO — tablets e paisagem .logo img{width:1000px} só era reduzido abaixo de 768px; entre 769px e 1000px o logótipo era mais largo que o ecrã. (Só acima de 768px, para não tocar no width:260px do mobile.) ------------------------------------------------------------ */ @media (min-width:769px){ .logo img{ width:min(1000px, 88vw); } } /* ------------------------------------------------------------ 5. HERO — altura real do ecrã em mobile Com height:100vh o hero fica mais alto do que a área visível (a barra de endereço conta), e a seta de scroll nasce escondida. svh = altura com a barra visível: não há reflow durante o scroll, ao contrário de dvh. ------------------------------------------------------------ */ @media (max-width:768px){ .hero{ height:100vh; /* fallback para browsers sem svh */ height:100svh; } } /* ------------------------------------------------------------ 6. MENU HAMBÚRGUER — scroll interno Em telemóveis baixos (iPhone SE) o fundo do painel podia ficar inacessível. ------------------------------------------------------------ */ @media (max-width:860px){ .nav-right{ max-height:80vh; max-height:80svh; overflow-y:auto; -webkit-overflow-scrolling:touch; } } /* ============================================================ SECÇÕES DE ECRÃ INTEIRO — alargado a TODAS as secções ------------------------------------------------------------ Já existia para #oque, #missao, #neuronature, #mms e #quem. Aqui estende-se às restantes. Dois grupos, porque o tratamento tem de ser diferente: A) Secções normais -> altura + centragem vertical do conteúdo (sem a centragem, o conteúdo colava-se ao topo e ficava um vazio enorme por baixo) B) Secções split (texto | foto) -> SÓ altura São display:flex em linha; mudar a direção partia o layout. A altura é 100dvh menos a navbar, igual ao que já lá estava, para o fundo da secção coincidir com o fundo do ecrã depois do scroll (o smoothScroll alinha o topo em navbar.offsetHeight - 2). ============================================================ */ /* ---- A) secções normais ---- */ #ajudar, #servicos, #citacao, #recursos, #al-temas, #al-cita, #mm-info, #mm-cita, #cursos-conteudo{ min-height: calc(100vh - var(--nav-h)); /* fallback */ min-height: calc(100dvh - var(--nav-h)); display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; } /* ---- B) secções split que ainda não tinham altura de ecrã ---- */ #al-programa, #mm-programa{ min-height: calc(100vh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h)); } #al-programa .split-photo, #mm-programa .split-photo{ min-height: calc(100vh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h)); } /* ---- mobile: as fotos destas duas secções seguem a mesma regra das outras split (senão ocupavam um ecrã inteiro sozinhas) ---- */ @media (max-width:768px){ #al-programa .split-photo, #mm-programa .split-photo{ min-height:300px; max-height:45vh; } } /* ============================================================ #ajudar — botão "Agendar" no fim da secção ------------------------------------------------------------ Visualmente IGUAL ao botão da navbar (.nav-cta): mesmos valores de cor, tamanho, padding, raio e hover. A única diferença é a margem — o da navbar tem margin-left:25px para se afastar dos links; aqui é centrado com margem por cima. Se um dia mudares o aspeto do .nav-cta, muda também aqui. ============================================================ */ .ajudar-cta{ margin:44px auto 0; text-align:center; } .ajudar-cta-btn{ font-family:'Red Hat Display', sans-serif; font-size:14px; font-weight:600; color:#fff; background:var(--dourado); border:none; border-radius:30px; padding:10px 22px; cursor:pointer; white-space:nowrap; transition:background .25s ease, transform .15s ease, box-shadow .25s ease; } .ajudar-cta-btn:hover{ background:#b8a356; transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,0.12); } @media (max-width:600px){ .ajudar-cta{ margin-top:32px; } } /* ============================================================ #oque + #neuronature + #missao + #mms — linha de corte partilhada ------------------------------------------------------------ Os flex 0.85 / 1.15 não davam o mesmo resultado nas duas secções: numa a coluna esquerda é TEXTO (tem padding e conteúdo próprio, que impõem uma largura mínima) e na outra é uma FOTO (sem conteúdo). O flex-basis acabava resolvido de forma diferente e as margens não coincidiam. Aqui a largura da coluna esquerda passa a ser fixa e IGUAL nas duas secções, definida por --split-col: #oque -> texto à esquerda (a foto começa em --split-col) #missao -> foto à esquerda (a foto acaba em --split-col) Como é o mesmo valor, as duas margens interiores caem sempre na mesma linha vertical. PARA AJUSTAR: muda só o --split-col. Aumentar move a linha para a direita; diminuir move para a esquerda. As duas secções acompanham em conjunto. ============================================================ */ :root{ --split-col:48.5vw; } /* = 48.5% de uma secção com width:100vw */ @media (min-width:769px){ /* coluna da esquerda — largura fixa e idêntica em todas as secções */ #oque .split-text, #neuronature .split-text, #al-programa .split-text, #missao .split-photo, #mms .split-photo{ flex:0 0 var(--split-col); max-width:var(--split-col); } /* coluna da direita — ocupa o resto */ #oque .split-photo, #neuronature .split-photo, #al-programa .split-photo, #missao .split-text, #mms .split-text{ flex:1 1 auto; min-width:0; } /* o #mms tinha padding-right:200px; passa aos 127px da #missao, para as duas colunas de texto terminarem na mesma linha */ #mms .split-text{ padding-right:127px; } /* #al-programa: mesmo recuo do texto que a #neuronature */ #al-programa .split-text{ padding-left:127px; } } /* ============================================================ #quem "Fundadora" — foto alinhada com a linha de corte ------------------------------------------------------------ Três requisitos: . margem DIREITA da foto a --quem-margem (127px) . margem ESQUERDA da foto na mesma linha vertical que a #oque / #missao -> --split-col . espaço entre o texto e a foto -> --quem-gap A largura da coluna da foto sai da conta: 100vw - --split-col - --quem-margem A coluna do texto fica com "1fr" (o resto), e o gap encaixa entre as duas — por isso a foto começa SEMPRE exactamente em --split-col, independentemente do gap que escolheres. Num ecrã de 1920px isto dá uma foto com ~860px de largura, mais larga do que os 630px que tinha. Por isso a altura passou a ser fixa (--quem-alt), tornando-a panorâmica em vez de quadrada. O object-fit:cover recorta sem distorcer. AJUSTES: --quem-alt (altura) e --quem-gap (espaço). Só acima de 900px; abaixo disso as colunas empilham. ============================================================ */ :root{ --quem-margem:127px; /* margem direita da foto */ --quem-gap:56px; /* espaço entre o texto e a foto */ --quem-alt:520px; /* altura da foto (era 630px, quadrada) */ } @media (min-width:901px){ #quem .quem-grid{ grid-template-columns: 1fr calc(100vw - var(--split-col) - var(--quem-margem)); gap: var(--quem-gap); padding: 0 var(--quem-margem); } #quem .quem-foto img{ width:100%; height:var(--quem-alt); object-fit:cover; /* recorta, não distorce */ } } /* ============================================================ #al-programa "Aldeia da Família" — tipografia igual à #neuronature (tem a mesma disposição: texto | foto) ------------------------------------------------------------ Antes: título 34px e parágrafos 17px. Agora: os mesmos valores das restantes secções split. As CORES ficam como estavam (#8a9474 no título) — é a identidade da Aldeia. Só a métrica é que passa a coincidir. ============================================================ */ #al-programa .split-heading{ font-size:27px; font-weight:400; line-height:1.3; margin:0 0 26px; } #al-programa .split-text p{ font-size:19px; line-height:1.7; margin-bottom:14px; } @media (max-width:768px){ #al-programa .split-heading{ font-size:26px; } #al-programa .split-text p{ font-size:17px; } } /* ============================================================ CORREÇÃO A — Secções split desalinhadas em mobile/tablet ------------------------------------------------------------ .section-split fica full-bleed com left:50% + margin-left:-50vw. Mas .section{ margin:0 48px } (<=1024px) e { margin:0 20px } (<=640px) vêm DEPOIS no ficheiro e têm a MESMA especificidade (ambas 0,0,1,0), por isso anulam as margens negativas. Sobra o left:50% sozinho -> a secção é empurrada meio ecrã para a direita e o texto sai fora do ecrã. Acima de 1024px nada muda. ============================================================ */ @media (max-width:1024px){ .section-split{ margin-left:-50vw; margin-right:-50vw; } } /* ============================================================ CORREÇÃO B — Texto da Fundadora cortado no telemóvel (#quem) ------------------------------------------------------------ #quem .quem-grid tem width:100% e, abaixo de 900px, padding:60px 24px. Como não há reset global de box-sizing, o padding SOMA-SE à largura (content-box): 100% + 48px, ou seja a grelha fica 48px mais larga que o ecrã. No desktop não se nota porque #quem é display:flex e a grelha, sendo flex item, encolhe. Abaixo de 900px passa a display:block e deixa de encolher. O min-width:0 no texto evita o caso clássico de um item de grelha não encolher abaixo da largura do seu conteúdo. ============================================================ */ @media (max-width:900px){ #quem .quem-grid{ box-sizing:border-box; } #quem .quem-texto{ min-width:0; } } /* ============================================================ CORREÇÃO C — Tamanho do logótipo do hero (desktop + mobile) ------------------------------------------------------------ O logótipo passou de PNG para SVG. O PNG era uma tela de 1920x1080 com a marca a ocupar só 669x809 no meio (35% da largura); o SVG vem recortado à justa. Por isso o mesmo valor de width passou a desenhar quase o triplo do logótipo. Equivalências (largura da marca de facto visível): PNG width:1000px -> ~348px de marca [desktop, antes] PNG width:260px -> ~91px de marca [mobile, antes] SVG width:360px -> 360px de marca [desktop, agora] SVG width:180px -> 180px de marca [mobile, agora] Existem três regras .logo img espalhadas pelo ficheiro (a base com 1000px e duas em media queries). Este bloco está no fim e cobre as duas gamas, por isso é sempre o que vence. PARA AFINAR: muda só os dois valores abaixo. ============================================================ */ :root{ --logo-hero:360px; /* desktop — equivale ao tamanho antigo */ --logo-hero-mobile:180px; /* telemóvel */ } @media (min-width:769px){ .logo img{ width:min(var(--logo-hero), 88vw); } } @media (max-width:768px){ .logo img{ width:min(var(--logo-hero-mobile), 70vw); } } /* ============================================================ CORREÇÃO D — Ícones dos cards de "Serviços Clínicos" ------------------------------------------------------------ Os SVG são a variante "_claro": preenchimento creme (#f0ebe3), desenhada para assentar sobre fundo escuro. Por isso o círculo verde do .serv-medal NÃO é um placeholder — é o fundo previsto. Mantém-se, e o ícone entra por cima a 60%. Ordem dos cards no HTML: 1 crianças | 2 adolescentes | 3 mães & medos | 4 aldeia PARA AFINAR: --serv-icone tamanho do ícone dentro do círculo --serv-circulo cor do círculo ============================================================ */ :root{ --serv-icone:93%; --serv-circulo:var(--soft-green); --serv-medalha:120px; /* era 100px */ } #servicos .serv-medal{ width:var(--serv-medalha); height:var(--serv-medalha); background-color:var(--serv-circulo); background-size:var(--serv-icone); background-repeat:no-repeat; background-position:center; border-radius:50%; } #servicos .serv-card:nth-child(1) .serv-medal{ background-image:url("assets/images/criancas_home_icon_claro.svg"); } #servicos .serv-card:nth-child(2) .serv-medal{ background-image:url("assets/images/teens_home_icon_claro.svg"); } #servicos .serv-card:nth-child(3) .serv-medal{ background-image:url("assets/images/maes_medos_home_icon_claro.svg"); } #servicos .serv-card:nth-child(4) .serv-medal{ background-image:url("assets/images/aldeia_home_icon_claro.svg"); } /* ============================================================ CORREÇÃO E — Ícones dos cards de "Como podemos ajudar?" ------------------------------------------------------------ Os quatro cards, pela ordem do HTML: 1 Serviços Clínicos | 2 Mães & Medos 3 Aldeia da Família | 4 Academia Mesmo princípio da CORREÇÃO D: os SVG são a variante "_claro" (creme), desenhada para fundo escuro, por isso o círculo verde do .ajudar-medal mantém-se e o ícone entra por cima. PARA AFINAR: --ajudar-icone tamanho do ícone dentro do círculo --ajudar-circulo cor do círculo ============================================================ */ :root{ --ajudar-icone:93%; --ajudar-circulo:var(--soft-green); --ajudar-medalha:132px; /* era 110px */ } #ajudar .ajudar-medal{ width:var(--ajudar-medalha); height:var(--ajudar-medalha); background-color:var(--ajudar-circulo); background-size:var(--ajudar-icone); background-repeat:no-repeat; background-position:center; border-radius:50%; } #ajudar .ajudar-card:nth-child(1) .ajudar-medal{ background-image:url("assets/images/servicos_home_icon_claro.svg"); } #ajudar .ajudar-card:nth-child(2) .ajudar-medal{ background-image:url("assets/images/maes_medos_home_icon_claro.svg"); } #ajudar .ajudar-card:nth-child(3) .ajudar-medal{ background-image:url("assets/images/aldeia_home_icon_claro.svg"); } #ajudar .ajudar-card:nth-child(4) .ajudar-medal{ background-image:url("assets/images/academia_home_icon_claro.svg"); } /* ============================================================ CORREÇÃO F — Cards de "Serviços Clínicos": título, cor, escala ------------------------------------------------------------ 1. TÍTULO EM CIMA O HTML tem a ordem: medalha, h3, p, link. Em vez de mexer no HTML, usa-se order:-1 no h3 — o .serv-card já é flex column, por isso o título salta para primeiro lugar sem tocar na estrutura. As outras páginas ficam intactas. 2. CÍRCULO DOURADO Passa de --soft-green (#8fae8e) para #c8b46a, que é exatamente a variável --dourado já existente no :root. 3. TIPOGRAFIA +25% h3 19px -> 24px (19 x 1.25 = 23.75) p 15px -> 19px (15 x 1.25 = 18.75) ============================================================ */ /* 1 — título acima da medalha */ #servicos .serv-card h3{ order:-1; margin:0 0 18px; } /* 2 — círculo dourado */ :root{ --serv-circulo:var(--dourado); } /* 3 — texto 25% maior */ #servicos .serv-card h3{ font-size:24px; } #servicos .serv-card p{ font-size:19px; } /* ============================================================ CORREÇÃO G — Páginas legais (termos / privacidade / cookies) ------------------------------------------------------------ As três páginas partilham o contentor .privacidade-container, que já estilava h1/h2/p. Faltavam as listas (