/* Theme Name: Ana Elisa Brito Vilibor Theme URI: https://anaelisabritovilibor.com.br Author: Migração Builderall -> WordPress Description: Tema leve e semântico para o site da Dra. Ana Elisa Brito Vilibor. Reproduz a identidade original (Muli/Montserrat, bronze, hexágonos) em HTML responsivo, sem jQuery e com fontes self-hosted. Version: 1.2.0 Requires at least: 6.5 Requires PHP: 8.1 License: GPLv2 or later Text Domain: anaelisa */ /* --------------------------------------------------------------- 1. Fontes — as mesmas do site original, self-hosted (fontConfig do Builderall: h1/h2 Muli Black, h3-h6 Muli, p Muli Light, menu Montserrat Light) --------------------------------------------------------------- */ @font-face { font-family:'Muli'; src:url('assets/fonts/Muli-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'Muli'; src:url('assets/fonts/Muli.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Muli'; src:url('assets/fonts/Muli-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; } /* --------------------------------------------------------------- 2. Tokens — hex exatos extraídos do config do site original --------------------------------------------------------------- */ :root { --bronze: #d69a5b; /* bordas, foco, detalhes — nunca sob texto branco */ /* Mesmo tom, escuro o bastante para texto branco: #d69a5b dava 2,43:1 com #fff (WCAG AA pede 4,5:1 em texto corrido). Este dá 4,63:1 e fica entre os dois bronzes que o site já usava. */ --bronze-acc: #9c6a3a; /* cartão do hero, caixa do rodapé, botões */ /* 3,86:1 com branco — NÃO usar como cor de texto sobre branco nem como fundo sob texto branco. Para texto use --bronze-text (definido na §18, 5,05:1); para superfície use --bronze-acc ou --bronze-deep. */ --bronze-dark: #b47334; /* faixa do rodapé (sobre textura), contornos de foco */ --bronze-deep: #865e3c; /* cartão de especialidade escuro */ --peach-soft: #fdf5ef; --heading: #7f8c8d; /* títulos de seção e legendas */ --ink: #4a4a4a; /* menu */ --btn-ink: #595555; /* texto do botão "Saiba Mais" */ --line: #ece7e1; --white: #fff; --font: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-nav: 'Montserrat', var(--font); /* Medido no original: a área de conteúdo tem ~1018px (em 1366 o conteúdo começa em x=176). Com 1200px tudo ficava ~100px à esquerda do original. */ --wrap: 1020px; --gap: clamp(1.5rem, 4vw, 3rem); /* Painéis do original medem 605-775px de altura; respiro menor que o meu primeiro palpite, senão a página fica ~17% mais alta que a referência. */ --section-y: clamp(2.5rem, 5vw, 4rem); --radius: 12px; --shadow: 0 4px 18px rgba(0,0,0,.10); --shadow-card: 4px 4px 13px 3px rgba(128,128,130,.45); --shadow-lg: 0 10px 34px rgba(0,0,0,.14); } /* --------------------------------------------------------------- 3. Reset + tipografia base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } } body { margin:0; font-family:var(--font); font-weight:300; font-size:17px; line-height:1.55; color:#000; background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img, picture, video, iframe { max-width:100%; height:auto; display:block; } /* Link padrão: --bronze-dark dá 3,86:1 sobre branco e reprova AA em texto pequeno. --bronze-text é o mesmo bronze escurecido (5,05:1). No hover a cor ESCURECE (--bronze-deep, 5,71:1); antes clareava para --bronze, que sozinho dá 2,43:1 — o estado de hover ficava menos legível que o normal. */ a { color:var(--bronze-text); text-underline-offset:.18em; } a:hover { color:var(--bronze-deep); } /* Escala do fontConfig original */ h1 { font-family:var(--font); font-weight:900; font-size:clamp(40px,6vw,60px); line-height:1.1; margin:0 0 .4em; color:var(--heading); } h2 { font-family:var(--font); font-weight:900; font-size:clamp(28px,4.2vw,40px); line-height:1.1; margin:0 0 .5em; color:var(--heading); } /* h3 usa --heading-text, e não --heading, porque é o único título que cai abaixo da régua de "texto grande": no celular o clamp resolve para 20px com peso 400 (grande = 24px, ou 18,66px se negrito), então precisa de 4,5:1 — #7f8c8d dá 3,48. h1 e h2 seguem com --heading: nunca descem de 28px. */ h3 { font-family:var(--font); font-weight:400; font-size:clamp(20px,2.4vw,25px); line-height:1.2; margin:0 0 .5em; color:var(--heading-text); } p { margin:0 0 1.1em; } ul, ol { margin:0 0 1.1em; padding-left:1.3em; } li { margin-bottom:.4em; } :focus-visible { outline:3px solid var(--bronze-dark); outline-offset:3px; border-radius:3px; } /* Primeiro elemento que um usuário de teclado alcança — precisa passar de verdade: #b47334 sob texto branco dava 3,86:1. */ .skip-link { position:absolute; left:-9999px; top:0; z-index:999; background:var(--bronze-deep); color:#fff; padding:.8rem 1.4rem; } .skip-link:focus { left:0; } /* --------------------------------------------------------------- 4. Layout --------------------------------------------------------------- */ .wrap { width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; } .wrap--narrow { width:min(100% - 2.5rem, 800px); margin-inline:auto; } /* overflow:hidden segura os hexágonos, que avançam para fora da coluna */ .section { padding-block:var(--section-y); position:relative; overflow:hidden; } .text-center { text-align:center; } .section-title--center { text-align:center; } /* Texto de seção: 26px no desktop, como no original */ .lead { color:var(--heading); font-size:clamp(17px,2vw,26px); line-height:1.45; } /* Campo de hexágonos — assets originais. São o elemento dominante do layout: no site de origem medem 593-715px e avançam bastante para fora da coluna. */ .hexes { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; } .hexes img { position:absolute; height:auto; } .section > .wrap, .hero > .wrap { position:relative; z-index:1; } @media (max-width:760px) { .hexes { display:none; } } /* no original, showMobile:false */ /* --------------------------------------------------------------- 5. Botões --------------------------------------------------------------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--font); font-weight:700; font-size:16px; text-decoration:none; border:0; cursor:pointer; transition:background-color .18s, color .18s, transform .18s; } .btn:hover { transform:translateY(-2px); } /* "Saiba Mais" — branco, pílula, 203x52 no original */ .btn--white { background:#fff; color:var(--btn-ink); border-radius:900px; padding:.9rem 2.5rem; min-width:203px; } .btn--white:hover { background:#fff; color:#000; } .btn--bronze { background:var(--bronze-acc); color:#fff; border-radius:60px; padding:.9rem 2rem; } .btn--bronze:hover { background:#835733; color:#fff; } .btn--outline { border:2px solid var(--bronze); color:var(--bronze-text); background:transparent; border-radius:900px; padding:.8rem 2rem; } .btn--outline:hover { background:var(--bronze-acc); color:#fff; } /* Verde oficial do WhatsApp preservado; o que muda é a TINTA do texto. Branco sobre #25d366 dá 1,98:1 — reprova WCAG AA com folga, e este botão agora se repete no hero, no cabeçalho, nas seções e no contato. Tinta verde-escura no lugar do branco: 6,17:1, sem trocar a cor da marca. */ .btn--wa { background:#25d366; color:#0b3d2c; border-radius:900px; padding:.9rem 2rem; } .btn--wa:hover { background:#1fbe5b; color:#062018; } /* --------------------------------------------------------------- 6. Cabeçalho — menu Montserrat Light 17px --------------------------------------------------------------- */ .site-header { position:sticky; top:0; z-index:100; background:#fff; } .site-header__inner { display:flex; align-items:center; gap:2rem; min-height:86px; } .site-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; } .site-logo img { width:115px; height:auto; } .site-logo__text { font-size:.82rem; color:var(--ink); line-height:1.35; text-align:center; } .site-logo__text span { display:block; font-size:.68rem; color:var(--heading); } .nav-toggle { display:none; background:none; border:0; padding:.5rem; font-size:1.7rem; color:var(--ink); cursor:pointer; line-height:1; margin-left:auto; } .nav { margin-left:auto; } .nav ul { list-style:none; margin:0; padding:0; display:flex; gap:0; align-items:center; } .nav li { margin:0; position:relative; } .nav > ul > li > a { display:block; padding:.7rem 1.05rem; font-family:var(--font-nav); font-weight:300; font-size:17px; color:var(--ink); text-decoration:none; white-space:nowrap; } .nav > ul > li > a:hover, .nav .current-menu-item > a, .nav .current-page-ancestor > a { color:#000; } .nav .menu-item-has-children > a::after { content:''; display:inline-block; margin-left:.45em; vertical-align:middle; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.65; } /* Submenu: Muli Light 15px, fundo branco, centralizado */ .nav .sub-menu { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:240px; background:#fff; box-shadow:var(--shadow-lg); padding:.5rem 0; flex-direction:column; max-height:74vh; overflow-y:auto; } .nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { display:flex; } .nav .sub-menu a { display:block; font-family:var(--font); font-weight:300; font-size:15px; padding:.5rem 1.4rem; color:#000; text-decoration:none; text-align:center; white-space:nowrap; } .nav .sub-menu a:hover { background:rgba(255,255,255,.15); color:var(--bronze-dark); } @media (max-width:1100px) { .nav-toggle { display:block; } .nav { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; box-shadow:var(--shadow-lg); max-height:80vh; overflow-y:auto; padding:.75rem 1.25rem 2rem; } .nav.is-open { display:block; } .nav ul { flex-direction:column; align-items:stretch; } .nav .sub-menu { display:block; position:static; transform:none; box-shadow:none; padding:0 0 .5rem 1rem; max-height:none; } .nav > ul > li > a { padding:.75rem .25rem; border-bottom:1px solid var(--line); } .nav .sub-menu a { text-align:left; padding:.45rem .25rem; } } /* --------------------------------------------------------------- 7. Hero — cartão bronze #D69A5B, raio 20px, foto sobreposta --------------------------------------------------------------- */ /* O respiro de cima era clamp(2rem,5vw,3.5rem) — 56px no desktop, que empurrava o cartão e os botões para fora da primeira dobra. Reduzido quase à metade; o de baixo continua, porque é ele que separa o hero da próxima seção. */ .hero { position:relative; padding-block:clamp(1rem,2.5vw,2rem) clamp(3rem,7vw,5rem); overflow:hidden; } .hero__hexes { position:absolute; top:0; right:0; width:62%; height:100%; background-repeat:no-repeat; background-position:right center; background-size:contain; pointer-events:none; } .hero__grid { display:grid; grid-template-columns:minmax(0,392px) minmax(0,1fr); align-items:center; position:relative; z-index:1; } .hero__card { background:var(--bronze-acc); color:#fff; border-radius:20px; padding:2.25rem 1.75rem; text-align:center; position:relative; z-index:2; } .hero__card h1 { color:#fff; font-family:var(--font); font-weight:700; font-size:20px; line-height:1.4; margin:0 0 .5rem; } .hero__role { font-size:18px; font-weight:300; margin:0 0 1.5rem; } /* Sem opacity: a 85% o CRM caía para 3,84:1 sobre o bronze — abaixo do mínimo de texto pequeno, justamente na linha que o CFM exige que seja legível. */ .hero__crm { display:block; font-size:13px; margin-top:.35rem; letter-spacing:.03em; } /* Sem margem embaixo: depois que os botões subiram para antes das credenciais, esta lista virou o último elemento do cartão — os 2rem antigos somavam com o padding de 2.25rem e deixavam um vão morto no rodapé do cartão. */ .hero__creds { list-style:none; padding:0; margin:0; font-size:18px; font-weight:300; } .hero__creds li { margin-bottom:.6rem; line-height:1.4; } .hero__creds li:last-child { margin-bottom:0; } /* No original a foto mede 601x591 — sem teto ela estoura para 856px. */ .hero__figure { margin:0 0 0 -3rem; max-width:601px; justify-self:center; } .hero__figure img { border-radius:10px; width:100%; } @media (max-width:900px) { .hero__grid { grid-template-columns:1fr; } .hero__figure { margin:0 auto -2rem; order:-1; max-width:520px; } .hero__card { max-width:520px; margin-inline:auto; } .hero__hexes { display:none; } } /* --------------------------------------------------------------- 8. Blocos texto + colagem --------------------------------------------------------------- */ .split { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center; } @media (max-width:880px) { .split { grid-template-columns:1fr; } } .collage { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:center; } .collage img { border-radius:10px; width:100%; object-fit:cover; box-shadow:var(--shadow); } .collage img:nth-child(1) { aspect-ratio:3/4; } .collage img:nth-child(2) { aspect-ratio:3/4; transform:translateY(-1.5rem); } .collage img:nth-child(3) { aspect-ratio:4/3; } .collage img:nth-child(4) { aspect-ratio:4/3; transform:translateY(-1.5rem); } @media (max-width:520px) { .collage img { transform:none !important; } } /* --------------------------------------------------------------- 9. Vitrine de vídeos da home — cartões 9:16, título em caixa branca com raio 0 0 30px 30px (o mesmo da grade antiga) O formato mudou em 06/09/2026 junto com o conteúdo: eram 3 embeds do YouTube em 322×231 (deitados); passaram a ser 3 vídeos do acervo, gravados na vertical. Pôster 9:16 dentro de moldura deitada, com object-fit:cover, corta o rosto dela — a moldura é que tinha de virar. Largura contida em 46rem: 9:16 é ALTO. Numa coluna de 380px o cartão passaria de 670px de altura e a seção sozinha ocuparia mais de uma tela. --------------------------------------------------------------- */ .vshelf { list-style:none; margin:0 auto; padding:0; max-width:46rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; } .vshelf__link { display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; } .vshelf__thumb { position:relative; display:block; aspect-ratio:9/16; background:#000; border-radius:30px 30px 0 0; overflow:hidden; } .vshelf__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s; } .vshelf__link:hover img { opacity:.82; } .vshelf__link:hover .video-play__bg { fill:#f00; fill-opacity:1; } .vshelf__link:focus-visible .vshelf__thumb { outline:3px solid var(--bronze); outline-offset:-3px; } /* O glifo padrão (68×48) domina um cartão estreito. */ .vshelf__thumb .video-play svg { width:54px; height:38px; } /* Etiqueta de duração, como no YouTube e como no hub /videos/. */ .vshelf__dur { position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.8); color:#fff; font-size:12px; font-weight:500; line-height:1; padding:3px 5px; border-radius:4px; } .vshelf__titulo { flex:1; display:grid; place-items:center; background:#fff; border-radius:0 0 30px 30px; box-shadow:0 4px 8px 1px rgba(194,194,194,.75); padding:1.2rem 1rem; text-align:center; color:var(--heading); font-size:17px; line-height:1.35; } /* * No telefone, três colunas dariam cartões de ~105px e o título quebraria em * cinco linhas. Vira prateleira horizontal com encaixe — o gesto que o * visitante já usa em Reels e Shorts. Dois cartões e meio à vista: a metade é * o que avisa que há mais. * * O overflow fica NA LISTA, não no corpo — página com rolagem horizontal é * defeito, prateleira com rolagem horizontal é componente. */ @media (max-width:640px) { .vshelf { display:flex; max-width:none; gap:1rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:.75rem; } .vshelf__item { flex:0 0 46%; scroll-snap-align:start; } .vshelf__titulo { font-size:15px; padding:1rem .75rem; } } /* Facade do YouTube: miniatura local + botão. O player só entra ao clicar. Continua em uso na watch page de vídeo do YouTube (page-video.php). */ .video-facade { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:#000; cursor:pointer; display:block; } .video-facade img { width:100%; height:100%; object-fit:cover; transition:opacity .2s; } .video-facade:hover img { opacity:.82; } .video-play { position:absolute; inset:0; display:grid; place-items:center; } .video-play svg { width:68px; height:48px; } .video-play__bg { fill:#212121; fill-opacity:.8; transition:fill-opacity .2s; } .video-facade:hover .video-play__bg { fill:#f00; fill-opacity:1; } .video-facade:focus-visible { outline:3px solid var(--bronze); outline-offset:-3px; } /* --------------------------------------------------------------- 9b. Fotos de congresso — dispersas e em tamanhos diferentes, como no original (201/190/226/346px), não em grade uniforme --------------------------------------------------------------- */ /* Posições absolutas medidas no original (x relativo ao início do conteúdo, que fica em 176): as fotos se SOBREPÕEM — 3781851 e 10966575 cruzam 62px. */ .fotos-congresso { position:relative; min-height:694px; } .fotos-congresso img { position:absolute; border-radius:8px; box-shadow:var(--shadow); object-fit:cover; } .fotos-congresso img:nth-child(1) { left:9px; top:39px; width:201px; height:255px; z-index:7; } .fotos-congresso img:nth-child(2) { left:253px; top:96px; width:190px; height:271px; z-index:9; } .fotos-congresso img:nth-child(3) { left:0; top:293px; width:226px; height:287px; z-index:7; } .fotos-congresso img:nth-child(4) { left:153px; top:348px; width:346px; height:346px; z-index:6; } @media (max-width:980px) { .fotos-congresso { position:static; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .fotos-congresso img { position:static; width:100%; height:auto; aspect-ratio:4/5; } } /* --------------------------------------------------------------- 10. Especialidades da clínica — cartões bronze em escada, raio 20px --------------------------------------------------------------- */ .esp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,190px)); gap:1.25rem; justify-content:start; } .esp-card { background:var(--bronze-acc); border-radius:20px; padding:1.5rem 1rem; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; gap:.9rem; aspect-ratio:211/239; justify-content:center; } /* Dermatologia é o cartão escuro e sobe; cardiologia desce — escada do original. */ .esp-card:nth-child(1) { background:var(--bronze-deep); } .esp-card:nth-child(2) { transform:translateY(64px); } .esp-card:nth-child(3) { transform:translateY(-32px); } .esp-card img { width:100px; height:100px; border-radius:50%; object-fit:cover; } .esp-card span { font-size:16px; font-weight:700; } @media (max-width:880px) { .esp-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } .esp-card { transform:none !important; } } /* --------------------------------------------------------------- 11. Fotos da clínica — legenda branca, raio 0 0 20px 20px --------------------------------------------------------------- */ /* Cartões de 285px no original — sem teto esticam para 381px. */ .clinic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,285px)); gap:1.75rem; align-items:start; justify-content:center; } .clinic-card { margin:0; } .clinic-card img { width:100%; aspect-ratio:285/201; object-fit:cover; } .clinic-card figcaption { background:#fff; border-radius:0 0 20px 20px; box-shadow:var(--shadow-card); padding:1.15rem .75rem; text-align:center; color:var(--heading); font-size:22px; } @media (min-width:780px) { .clinic-card:nth-child(1) { transform:translateY(3rem); } .clinic-card:nth-child(2) { transform:translateY(1.5rem); } } /* --------------------------------------------------------------- 12. Cartões de navegação (páginas de seção) --------------------------------------------------------------- */ .grid { display:grid; gap:var(--gap); } .grid--3 { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); } .card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.6rem; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s; } a.card { text-decoration:none; color:inherit; } a.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--bronze); } .card h3 { font-size:20px; margin-bottom:.45rem; } /* Cinza mais claro: sobre branco o #7f8c8d puro pesa demais no corpo do cartão. */ .card p { color:#9aa3a4; font-size:15px; margin:0; line-height:1.5; } /* Páginas de seção (/procedimentos, /diagnosticos…): intro em cinza, não preto. O preto vale só para o corpo das páginas de tratamento. */ .page-secao .entry__content, .page-secao .entry__content p { color:var(--heading-text); } .secao__titulo { font-size:20px; color:var(--heading); margin:0 0 1.5rem; padding-bottom:.75rem; border-bottom:1px solid var(--line); } .card__more { margin-top:auto; padding-top:1rem; color:var(--bronze-dark); font-size:14px; } /* --------------------------------------------------------------- 13. Páginas internas — imagem à esquerda, texto à direita --------------------------------------------------------------- */ .tratamento { position:relative; padding-block:clamp(2.5rem,6vw,4.5rem); overflow:hidden; } .tratamento__hexes { position:absolute; top:0; right:0; width:55%; height:100%; background-repeat:no-repeat; background-position:right top; background-size:contain; opacity:.5; pointer-events:none; z-index:0; } /* Tratamentos: imagem ~353px; /perfil usa 376px (foto retrato). */ .tratamento__inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,353px) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:start; } .page-sobre .tratamento__inner { grid-template-columns:minmax(0,376px) minmax(0,1fr); } /* /perfil não usa título em itálico no original */ .page-sobre .tratamento__texto h1 { font-style:normal; font-size:clamp(30px,3.4vw,40px); color:var(--heading); } /* Sem imagem: texto na largura toda, como no original (/acne: x=199, 950px). */ .tratamento__inner--solo { grid-template-columns:minmax(0,1fr); } .tratamento__figura { margin:0; } .tratamento__figura img { width:100%; height:auto; border-radius:4px; } /* Medido no original: título 25px, preto, itálico+negrito (h5 com ); corpo 17px Muli Light PRETO — o cinza #7f8c8d é só dos títulos de seção da home. */ .tratamento__texto h1 { font-family:var(--font); font-weight:700; font-style:italic; font-size:25px; line-height:1.3; color:#000; margin:0 0 1.4rem; } .tratamento__texto .entry__content { color:#000; font-size:17px; line-height:1.55; } .tratamento__texto .entry__content p { margin-bottom:1.5em; } .tratamento__texto .entry__content li { color:#000; } /* Linha de autoria/revisão médica — sinal de E-E-A-T visível ao paciente */ .revisao { font-size:14px; color:var(--heading); margin:0 0 1.6rem; padding-bottom:1rem; border-bottom:1px solid var(--line); line-height:1.5; } .revisao a { color:var(--bronze-dark); } /* Sem opacity (mesmo erro do .hero__crm e do .hero__local): a 85% este cinza caía para 3,46:1 em 13px — e é a data de revisão médica, sinal de confiança que precisa ser legível. Sem o véu, 4,58:1. */ .revisao__data { display:block; font-size:13px; margin-top:.15rem; } .tratamento__cta { margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; } .tratamento__contato { font-size:15px; color:var(--heading); } .tratamento__contato:hover { color:var(--bronze-dark); } .tratamento__relacionados { position:relative; z-index:1; margin-top:clamp(2.5rem,6vw,4rem); padding-top:2rem; border-top:1px solid var(--line); } .tratamento__relacionados h2 { font-size:20px; margin-bottom:1rem; } .tratamento__relacionados ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; } .tratamento__relacionados li { margin:0; } .tratamento__relacionados a { font-size:15px; color:var(--heading); text-decoration:none; } .tratamento__relacionados a:hover { color:var(--bronze-dark); text-decoration:underline; } @media (max-width:820px) { .tratamento__inner { grid-template-columns:1fr; } .tratamento__figura { max-width:340px; } .tratamento__hexes { display:none; } } .page-hero { background:var(--peach-soft); padding-block:clamp(2.25rem,4.5vw,3.25rem); } .page-hero h1 { font-size:clamp(28px,4.2vw,40px); margin-bottom:.2em; } .eyebrow { font-family:var(--font-nav); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-dark); margin-bottom:.7rem; } .breadcrumb { font-size:14px; color:var(--heading); margin-bottom:.9rem; } .breadcrumb a { color:var(--heading); text-decoration:none; } .breadcrumb a:hover { color:var(--bronze-dark); text-decoration:underline; } .breadcrumb span[aria-current] { color:var(--bronze-dark); } .entry { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--gap); align-items:start; } @media (max-width:900px) { .entry { grid-template-columns:1fr; } } .entry__content { font-size:17px; line-height:1.7; } .entry__content > :first-child { margin-top:0; } .entry__content h2 { font-size:25px; margin-top:2rem; } .entry__content img { border-radius:10px; margin-block:1.5rem; } /* * Vídeo hospedado no próprio site (não é o embed do YouTube, que usa .video-facade). * * O arquivo é VERTICAL — 720x1280, formato de Reels. Sem o teto de largura ele * ocuparia 1280px de altura e empurraria o texto todo para fora da tela. 340px * é a largura em que um 9:16 cabe na coluna de leitura sem dominar a página. * * `aspect-ratio` reserva o espaço antes de o vídeo carregar: sem isso, o poster * chegando depois empurraria o conteúdo abaixo (CLS). */ .video-local { float:right; width:300px; margin:.25rem 0 1.25rem 2rem; } .video-local video { width:100%; height:auto; aspect-ratio:9 / 16; display:block; border-radius:12px; background:#000; box-shadow:var(--shadow); } .video-local figcaption { margin-top:.6rem; font-size:14px; font-weight:300; color:var(--bronze-text); line-height:1.4; } /* NÃO usar `clear:right` nos títulos. Tentei, e o efeito foi o oposto do pretendido: com o parágrafo de abertura curto, o H2 era empurrado para baixo do vídeo INTEIRO e abria um vazio de ~400px no meio da página. Texto contornando um float é o comportamento correto. */ /* Abaixo de 780px a coluna não comporta texto ao lado de 300px de vídeo: ele volta a ser bloco, centralizado. */ @media (max-width:780px) { .video-local { float:none; width:auto; max-width:320px; margin:1.5rem auto; } .video-local figcaption { text-align:center; } } /* * Grade dos vídeos além do primeiro. * * `clear:both` aqui é legítimo — diferente do que tentei nos

: esta seção * DEVE começar abaixo do vídeo flutuante, senão as duas peças de vídeo se * encavalariam. * * auto-fit + minmax deixa a contagem variar sem media query: 3 vídeos viram * 3 colunas no desktop e 1 no celular, sem eu prever a quantidade. */ .videos-grade { clear:both; margin:2.5rem 0 0; } .videos-grade h2 { margin-bottom:1.2rem; } .videos-grade__lista { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); } .videos-grade__item { margin:0; } .videos-grade__item video { width:100%; height:auto; aspect-ratio:9 / 16; display:block; border-radius:12px; background:#000; box-shadow:var(--shadow); } .videos-grade__item figcaption { margin-top:.55rem; font-size:14px; font-weight:300; color:var(--bronze-text); line-height:1.4; } /* --------------------------------------------------------------- Área /videos/ — cartão horizontal, no espírito da busca do YouTube --------------------------------------------------------------- */ /* Sem `max-width`: o texto acompanha a largura da coluna. A versão anterior tinha 70ch e parava no meio da linha, deixando um vazio à direita. */ .videos-hub__intro { margin:0 0 2rem; font-size:17px; line-height:1.65; } /* ---------- filtros por assunto ---------- */ .vfiltros { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; } .vfiltro { display:inline-flex; align-items:center; gap:.4rem; min-height:40px; padding:.4rem .95rem; border:1px solid var(--line); border-radius:900px; background:#fff; color:var(--ink); font-family:inherit; font-size:15px; line-height:1; cursor:pointer; transition:background .15s, border-color .15s, color .15s; } .vfiltro:hover { border-color:var(--bronze); } .vfiltro.is-ativo { background:var(--ink); border-color:var(--ink); color:#fff; } .vfiltro__n { font-size:12px; opacity:.65; } .vfiltro:focus-visible { outline:3px solid var(--bronze); outline-offset:2px; } .vsem { font-size:16px; color:var(--bronze-text); } .vcards { list-style:none; margin:0; padding:0; display:grid; gap:1.75rem 2.5rem; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); } /* * Miniatura estreita à esquerda, texto à direita. * * Com vídeo vertical (9:16) uma grade de cartões empilhados criaria peças de * 400px de altura. Assim a miniatura fica em 116px de largura — pequena — e a * largura que sobra vai para título e descrição, que é o que o buscador lê e o * leitor usa para escolher. */ .vcard { display:grid; grid-template-columns:116px 1fr; gap:1rem; align-items:start; } /* * OBRIGATÓRIO. `[hidden] { display:none }` é regra de USER-AGENT, e qualquer * regra de AUTOR com `display` a vence — inclusive a linha acima. Sem isto o JS * marca `hidden`, o atributo aparece no DOM e o cartão continua na tela. * * Foi exatamente o bug: o filtro pintava de ativo e não filtrava nada. E o meu * teste dizia "ok" porque media `!c.hidden` (a propriedade) em vez do * `computedStyle.display` (o que o usuário vê). */ .vcard[hidden] { display:none; } .vcard--largo { grid-template-columns:168px 1fr; } .vcard__thumb { position:relative; aspect-ratio:9 / 16; background:#000; border-radius:10px; overflow:hidden; } .vcard--largo .vcard__thumb { aspect-ratio:16 / 9; } /* `a` junto do `button`: o cartão com watch page é link, o sem é botão. */ .vcard__thumb > button, .vcard__thumb > a { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; display:block; text-decoration:none; } .vcard__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s; } .vcard__thumb button:hover img, .vcard__thumb a:hover img { opacity:.82; } .vcard__thumb .video-play svg { width:44px; height:31px; } .vcard__thumb button:focus-visible, .vcard__thumb a:focus-visible { outline:3px solid var(--bronze); outline-offset:-3px; } /* Etiqueta de duração, como no YouTube: canto inferior direito da miniatura. */ .vcard__dur { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.8); color:#fff; font-size:12px; font-weight:500; line-height:1; padding:3px 5px; border-radius:4px; } .vcard__corpo { min-width:0; } .vcard__titulo { font-size:16px; font-weight:700; line-height:1.3; margin:0 0 .35rem; color:var(--ink); } .vcard__titulo a { color:inherit; text-decoration:none; } .vcard__titulo a:hover { text-decoration:underline; } .vcard__desc { font-size:14px; font-weight:300; line-height:1.5; color:var(--ink); margin:0 0 .5rem; } .vcard__link { font-size:14px; color:var(--bronze-deep); text-decoration:none; } .vcard__link:hover { text-decoration:underline; } /* Numa coluna só, a miniatura pode crescer um pouco sem dominar. */ @media (max-width:520px) { .vcards { grid-template-columns:1fr; } .vcard { grid-template-columns:104px 1fr; gap:.85rem; } .vcard--largo { grid-template-columns:140px 1fr; } } /* ---------- watch page: /videos// ---------- */ /* * O vídeo é o conteúdo principal, não ilustração — é isso que separa uma watch * page de uma página que por acaso tem vídeo. Daí a coluna dele vir primeiro e * dimensionada por ALTURA. * * Duas variantes porque os vídeos têm duas orientações: os do consultório são * 9:16 (gravados no celular) e os do canal são deitados. Uma grade só serviria * mal aos dois — vertical numa coluna larga vira uma tira gigante, e deitado * numa coluna estreita fica minúsculo. */ .watch__grade { display:grid; gap:2rem clamp(1.5rem, 3vw, 2.5rem); align-items:start; margin-block:1rem 2.5rem; } /* * Duas colunas SÓ no vídeo vertical. O texto inteiro da página mora na coluna * da direita — h1, descrição, corpo, FAQ, CTA —, e não abaixo da grade: com o * cabeçalho sozinho ali sobravam ~450px de branco ao lado de um vídeo de 666px. */ .watch--vertical .watch__grade { grid-template-columns:minmax(0, 360px) minmax(0, 1fr); } /* Deitado ocupa a largura inteira e o texto vem abaixo — coluna estreita ao * lado de um 16:9 deixaria os dois pequenos. */ .watch--largo .watch__grade { grid-template-columns:minmax(0, 820px); justify-content:center; } .watch__palco { background:#000; border-radius:12px; overflow:hidden; } /* * Sticky: o vídeo acompanha a leitura em vez de sumir no primeiro rolar. `top` * desconta o cabeçalho, que é `position:sticky` com 86px. */ .watch--vertical .watch__palco { position:sticky; top:6.5rem; } /* * `height` + `aspect-ratio`, mesma razão do diálogo: com `width:auto` sozinho o *