/* Theme-owned shell. Block presentation remains in bioco-core. */ *, *::before, *::after { box-sizing: border-box; } body { --bioco-frame-max: 1400px; --bioco-frame-inline: clamp(16px, 6vw, 96px); margin: 0; /* `clip` contains horizontal overflow WITHOUT making a scroll container — `hidden` would do that and silently break the sticky navigation shell. `hidden` stays as the pre-`clip` fallback. */ overflow-x: hidden; overflow-x: clip; background: var(--wp--preset--color--bioco-bg); color: var(--wp--preset--color--bioco-text); } .bioco-hero-nav-overlay, .bioco-page-shell, .bioco-page-shell.wp-block-group { position: relative; z-index: 20; width: min(calc(100% - (2 * var(--bioco-frame-inline))), var(--bioco-frame-max)); max-width: none; margin: 0 auto; padding: 0; } /* Stickiness lives on the

element, NOT on .bioco-navigation-shell: a sticky box only travels inside its containing block, and the shell's parent (.bioco-page-shell) is exactly as tall as the navigation itself, so sticking it there would be a no-op. The header spans the full viewport width, which also gives the cream bar an edge-to-edge background while content scrolls underneath. The :has() selector is a fallback in case the template-part wrapper class is not emitted. */ .bioco-site-header, header:has(.bioco-navigation-shell) { position: sticky; top: 0; z-index: 100; background: var(--wp--preset--color--bioco-bg); } .bioco-navigation-shell { position: relative; } .bioco-utility-nav { height: 70px; display: flex; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--wp--preset--color--bioco-border); overflow: hidden; opacity: 1; visibility: visible; transition: height .22s ease, opacity .18s ease, visibility .22s; } .bioco-navigation-shell.is-utility-hidden .bioco-utility-nav { height: 0; opacity: 0; visibility: hidden; pointer-events: none; } .bioco-navigation-shell.is-utility-hidden .bioco-utility-nav:focus-within { height: 70px; opacity: 1; visibility: visible; pointer-events: auto; } .bioco-primary-nav .bioco-logo { display: flex; width: 112px; height: 58px; align-items: center; } .bioco-logo img { display: block; width: 100%; height: 100%; object-fit: contain; } .bioco-utility-nav ul, .bioco-primary-nav ul { display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); list-style: none; margin: 0; padding: 0; } .bioco-utility-nav a { color: var(--wp--preset--color--bioco-text); font-size: 0.875rem; text-decoration: none; } .bioco-primary-nav { min-height: 82px; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--wp--preset--color--bioco-border); } .bioco-primary-nav li a { color: var(--wp--preset--color--bioco-text); font-size: 1rem; font-weight: 500; white-space: nowrap; text-decoration: none; } .bioco-primary-nav li a:hover { color: var(--wp--preset--color--bioco-green); } .bioco-primary-nav li a[aria-current='page'] { color: var(--wp--preset--color--bioco-green-dark); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; } .bioco-primary-nav .bioco-primary-cta { --bioco-nav-cta-background: var(--wp--preset--color--bioco-green); position: relative; isolation: isolate; display: inline-flex; padding: 10px 20px; background: transparent; color: #fff; border-radius: 24px 20px 26px 18px; text-shadow: none; letter-spacing: .04em; transition: transform .2s ease, box-shadow .2s ease; } .bioco-primary-nav .bioco-primary-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bioco-nav-cta-background); clip-path: polygon(3% 10%,12% 3%,25% 7%,38% 3%,52% 7%,66% 3%,82% 7%,96% 3%,99% 24%,96% 46%,99% 68%,95% 92%,80% 96%,63% 93%,48% 97%,31% 93%,16% 97%,3% 90%,6% 68%,2% 48%,6% 29%); transition: background-color .2s ease; } .bioco-primary-nav .bioco-primary-cta:hover { --bioco-nav-cta-background: var(--wp--preset--color--bioco-green-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--wp--custom--shadow--md); } .bioco-primary-nav .bioco-primary-cta:focus-visible { --bioco-nav-cta-background: var(--wp--preset--color--bioco-green-dark); color: #fff; outline: 3px solid var(--wp--preset--color--bioco-carrot); outline-offset: 4px; } .bioco-menu-toggle { display: none; } .bioco-primary-nav li.bioco-mobile-utility { display: none; } main.wp-block-group { max-width: none; padding: 0 var(--bioco-frame-inline); } .bioco-site-footer { clear: both; margin-top: 48px; padding: 48px var(--bioco-frame-inline) 20px; border-top: 2px solid var(--wp--preset--color--bioco-text); background: var(--wp--preset--color--bioco-bg); color: var(--wp--preset--color--bioco-text); line-height: 1.4; } .bioco-site-footer-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 7vw, 112px); width: min(100%, 1227.2px); max-width: 100%; margin: 0 auto; } .bioco-site-footer h3 { margin: 0 0 16px; font-size: 1rem; line-height: 1.35; } .bioco-site-footer p { margin: 0 0 8px; } .bioco-site-footer ul { list-style: none; margin: 0; padding: 0; } .bioco-site-footer-inner .bioco-site-footer-column:first-child ul { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 24px; margin-top: 16px; } .bioco-site-footer li + li { margin-top: 0; } .bioco-site-footer a { color: inherit; text-underline-offset: 4px; } .bioco-site-footer-social, .bioco-site-footer-partner-links { display: flex; flex-wrap: wrap; gap: 16px; } .bioco-site-footer-social { flex-direction: column; align-items: flex-start; } .bioco-site-footer-partners { width: min(100%, 1227.2px); margin: 48px auto 0; padding-top: 32px; border-top: 1px solid var(--wp--preset--color--bioco-border); } main.wp-block-group > .wp-block-post-content { margin: 0; } @media (prefers-reduced-motion: reduce) { .bioco-utility-nav { transition: none; } } @media (max-width: 900px) { .bioco-utility-nav { display: none; } .bioco-page-shell, .bioco-page-shell.wp-block-group { width: 100%; padding: 0; } .bioco-primary-nav { position: relative; min-height: 76px; padding: 12px 20px; align-items: center; background: var(--wp--preset--color--bioco-bg); } .bioco-primary-nav .bioco-logo { width: 100px; height: 52px; } .bioco-primary-nav ul { display: none; } .bioco-primary-nav.is-open { align-items: flex-start; box-shadow: 0 10px 24px rgba(0,0,0,.14); } .bioco-primary-nav.is-open ul { position: absolute; top: 76px; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 24px; background: var(--wp--preset--color--bioco-bg); } .bioco-primary-nav.is-open li.bioco-mobile-utility { display: block; border-top: 1px solid var(--wp--preset--color--bioco-border); } .bioco-primary-nav.is-open li a { display: block; padding: 12px 4px; color: var(--wp--preset--color--bioco-text); text-shadow: none; } .bioco-primary-nav.is-open .bioco-primary-cta { display: inline-flex; color: #fff; background: transparent; padding: 12px 20px; } .bioco-menu-toggle { display: grid; width: 44px; height: 44px; padding: 9px; place-content: center; gap: 5px; border: 0; background: transparent; } .bioco-menu-toggle span { display: block; width: 24px; height: 2px; background: var(--wp--preset--color--bioco-text); } main.wp-block-group { padding: 0 5vw; } .bioco-site-footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .bioco-site-footer-inner { grid-template-columns: 1fr; } .bioco-site-footer { padding-bottom: 148px; } }