/* ========================================================================== Hipertrofia.org — health-publisher theme Sections: 1 base · 2 layout · 3 header · 4 cards · 5 home · 6 hub archive 7 article · 8 sidebar · 9 forms · 10 footer · 11 utilities ========================================================================== */ /* -------------------------------------------------------------------------- 1. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hp-header-h) + 1rem); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--hp-bg); color: var(--hp-fg); font-family: var(--hp-font-ui); font-size: var(--hp-fs-base); line-height: var(--hp-lh-normal); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--hp-navy-600); text-decoration: none; } a:hover { color: var(--hp-red-ink); text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--hp-font-display); color: var(--hp-navy-900); line-height: var(--hp-lh-snug); font-weight: 700; letter-spacing: -0.018em; margin: 0 0 var(--hp-space-4); text-wrap: balance; } h1 { font-size: var(--hp-fs-4xl); line-height: var(--hp-lh-tight); font-weight: 800; letter-spacing: -0.03em; } h2 { font-size: var(--hp-fs-2xl); letter-spacing: -0.022em; } h3 { font-size: var(--hp-fs-xl); } h4 { font-size: var(--hp-fs-lg); } p { margin: 0 0 var(--hp-space-4); } ul, ol { margin: 0 0 var(--hp-space-4); padding-left: 1.35em; } hr { border: 0; border-top: 1px solid var(--hp-line); margin: var(--hp-space-6) 0; } /* Visible focus for every interactive element — never removed. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--hp-ring); outline-offset: 2px; border-radius: var(--hp-radius-sm); } .hp-skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--hp-navy-900); color: var(--hp-white); padding: var(--hp-space-3) var(--hp-space-4); font-weight: 700; } .hp-skip-link:focus { left: var(--hp-space-4); top: var(--hp-space-4); color: var(--hp-white); } .hp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 2. Layout primitives -------------------------------------------------------------------------- */ .hp-shell { width: 100%; max-width: var(--hp-shell); margin-inline: auto; padding-inline: var(--hp-gutter); } .hp-shell--narrow { max-width: var(--hp-shell-narrow); } .hp-section { padding-block: var(--hp-space-7); } @media (min-width: 1024px) { .hp-section { padding-block: var(--hp-space-8); } } .hp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hp-space-4); flex-wrap: wrap; margin-bottom: var(--hp-space-5); padding-bottom: var(--hp-space-3); border-bottom: 3px solid var(--hp-hub); } .hp-section-head h2 { margin: 0; font-size: var(--hp-fs-xl); } .hp-section-head .hp-more { font-family: var(--hp-font-ui); font-size: var(--hp-fs-sm); font-weight: 700; color: var(--hp-red-ink); white-space: nowrap; } .hp-section-head .hp-more::after { content: " →"; } /* Per-hub accent scoping. Set on and on section wrappers. */ .hub--treino { --hp-hub: var(--hp-red-ink); --hp-hub-soft: var(--hp-red-050); } .hub--dieta { --hp-hub: var(--hp-navy); --hp-hub-soft: var(--hp-navy-050); } .hub--suplementacao { --hp-hub: var(--hp-navy-500); --hp-hub-soft: var(--hp-navy-050); } .hub--receitas-fitness { --hp-hub: var(--hp-red-deep); --hp-hub-soft: var(--hp-red-050); } .hub--fisiculturismo { --hp-hub: var(--hp-navy-900); --hp-hub-soft: var(--hp-surface-2); } /* -------------------------------------------------------------------------- 3. Header + navigation -------------------------------------------------------------------------- */ .hp-header { position: sticky; top: 0; z-index: 100; background: var(--hp-white); border-bottom: 1px solid var(--hp-line); transition: box-shadow var(--hp-dur) var(--hp-ease); } .hp-header.is-stuck { box-shadow: var(--hp-shadow); } .hp-masthead { display: flex; align-items: center; gap: var(--hp-space-4); min-height: var(--hp-header-h); } .hp-brand { display: flex; align-items: center; flex: none; margin-right: auto; } /* Below 1024px the hub nav lives in the drawer, so the brand keeps pushing the actions right on its own. */ @media (min-width: 1024px) { .hp-brand { margin-right: 0; } } /* Wordmark only. Its viewBox is the type's own bounding box, so the logo has no internal padding to sit on and cannot drift off the header's baseline. */ .hp-brand img { height: 22px; width: auto; } @media (min-width: 768px) { .hp-brand img { height: 26px; } } .hp-masthead__actions { display: flex; align-items: center; gap: var(--hp-space-2); } /* Icon buttons — 44x44 touch target, always paired with a label. */ .hp-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; /* browser default