/*
Theme Name: Optimus Health
Theme URI: https://optimushealth.local
Description: Hello Elementor Child, exact Celia-Health.com layout. Only change: OH logo + #1d3766 accent.
Author: Optimus Health
Template: hello-elementor
Version: 1.0.0
*/
/* ============================================================
FULL-WIDTH OVERRIDES, ensure nothing constrains body/page
============================================================ */
html,
body,
.site,
.site-content,
#page,
#content,
.wp-site-blocks,
.entry-content,
.page-content {
max-width: 100% !important;
width: 100% !important;
}
html, body { overflow-x: hidden; }
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
color: #111111;
background: #ffffff;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; }
/* ============================================================
INNER CONTAINER, max-width 1400px, centered, padded
============================================================ */
.oh-container {
max-width: none;
padding-left: 3.5%;
padding-right: 3.5%;
width: 100%;
}
/* ============================================================
TYPOGRAPHY
============================================================ */
h1 { font-size: 60px; font-weight: 400; line-height: 1; }
h2 { font-size: 50px; font-weight: 400; line-height: 1; letter-spacing: -1px; }
h3 { font-size: 36px; font-weight: 400; line-height: 1.2; }
h4 { font-size: 22px; font-weight: 500; line-height: 1.3; }
h5 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
p { font-size: 17px; line-height: 1.65; color: #555555; }
/* ============================================================
BUTTONS
============================================================ */
.oh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 25px;
padding: 12px 32px;
font-size: 15px;
font-weight: 500;
font-family: 'Inter', sans-serif;
border: 0;
cursor: pointer;
text-decoration: none;
transition: opacity 0.2s ease;
white-space: nowrap;
line-height: 1;
}
.oh-btn { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.oh-btn-primary { background: #1d3766; color: #ffffff; }
.oh-btn-primary:hover,
.oh-btn-primary:focus-visible {
background: #142648;
color: #ffffff;
box-shadow: 0 6px 18px rgba(29, 55, 102, 0.28);
transform: translateY(-1px);
}
.oh-btn-white { background: #ffffff; color: #111111; }
.oh-btn-white:hover,
.oh-btn-white:focus-visible {
background: #f1f4f9;
color: #111111;
box-shadow: 0 6px 18px rgba(17, 17, 17, 0.12);
transform: translateY(-1px);
}
.oh-btn-outline { background: transparent; border: 1.5px solid #1d3766; color: #1d3766; }
.oh-btn-outline:hover,
.oh-btn-outline:focus-visible {
background: #1d3766;
color: #ffffff;
border-color: #1d3766;
}
.oh-btn-lg { font-size: 16px; padding: 14px 40px; }
.oh-btn-sm { font-size: 13px; padding: 9px 22px; }
.oh-link-arrow {
font-size: 15px;
font-weight: 500;
color: #111111;
text-decoration: none;
white-space: nowrap;
}
.oh-link-arrow:hover { color: #1d3766; }
.oh-link-more {
font-size: 14px;
color: #6f6f6f;
text-decoration: underline;
}
.oh-link-more:hover { color: #111111; }
/* ============================================================
HEADER, absolute overlay on full-screen hero
============================================================ */
.oh-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 200;
width: 100%;
max-width: none !important;
background: transparent;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
height: 96px;
}
.oh-header.menu-open {
background: rgba(15, 25, 45, 0.96);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
transition: background 0.25s ease;
}
body.admin-bar .oh-header { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .oh-header { top: 46px; }
}
/* Black header on every page except the homepage */
body:not(.home) .oh-header {
background: #ffffff;
border-bottom: 1px solid #e8ecf0;
}
body:not(.home) .oh-logo img { filter: none; }
body:not(.home) .oh-nav-links a,
body:not(.home) .oh-nav-utility a,
body:not(.home) .oh-nav-icon { color: #1a1a2e; }
body:not(.home) .oh-nav-links a::after,
body:not(.home) .oh-nav-utility a::after { background: #1a1a2e; }
body:not(.home) .oh-nav-links a:hover,
body:not(.home) .oh-nav-utility a:hover { color: #1d3766; }
body:not(.home) .oh-hamburger { color: #1a1a2e; }
/* Inner pages: hero becomes a clean white banner with black text */
body:not(.home) .oh-page-hero {
background: #ffffff;
color: #1a1a2e;
padding: 160px 5% 56px;
}
body:not(.home) .oh-page-hero::before { display: none; }
body:not(.home) .oh-page-hero__title { color: #1a1a2e; }
body:not(.home) .oh-page-hero__subtitle { color: #555555; }
body:not(.home) .oh-page-hero__eyebrow { color: #1d3766; }
body:not(.home).admin-bar .oh-page-hero { padding-top: 192px; }
@media (max-width: 860px) {
body:not(.home) .oh-page-hero { padding: 124px 5% 40px; }
body:not(.home).admin-bar .oh-page-hero { padding-top: 152px; }
}
/* WooCommerce cart / checkout / account / order pages, push content below the absolute header. */
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main,
body.woocommerce-order-received .site-main,
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-account main,
body.woocommerce-order-received main,
body.woocommerce-cart .page-content,
body.woocommerce-checkout .page-content,
body.woocommerce-account .page-content,
body.woocommerce-order-received .page-content {
padding-top: 132px !important;
padding-bottom: 60px !important;
}
body.woocommerce-cart .site-main,
body.woocommerce-cart main,
body.woocommerce-cart .page-content {
padding-top: 116px !important;
padding-bottom: 60px !important;
}
body.woocommerce-cart.admin-bar .site-main,
body.woocommerce-cart.admin-bar main,
body.woocommerce-cart.admin-bar .page-content {
padding-top: 148px !important;
}
body.woocommerce-cart.admin-bar .site-main,
body.woocommerce-checkout.admin-bar .site-main,
body.woocommerce-account.admin-bar .site-main,
body.woocommerce-order-received.admin-bar .site-main,
body.woocommerce-cart.admin-bar main,
body.woocommerce-checkout.admin-bar main,
body.woocommerce-account.admin-bar main,
body.woocommerce-order-received.admin-bar main {
padding-top: 180px !important;
}
@media (max-width: 860px) {
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main,
body.woocommerce-order-received .site-main,
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-account main,
body.woocommerce-order-received main {
padding-top: 116px !important;
}
body.woocommerce-cart.admin-bar .site-main,
body.woocommerce-checkout.admin-bar .site-main,
body.woocommerce-account.admin-bar .site-main,
body.woocommerce-order-received.admin-bar .site-main,
body.woocommerce-cart.admin-bar main,
body.woocommerce-checkout.admin-bar main,
body.woocommerce-account.admin-bar main,
body.woocommerce-order-received.admin-bar main {
padding-top: 160px !important;
}
}
.oh-logo img {
height: 68px;
width: auto;
min-width: 170px;
display: block;
filter: brightness(0) invert(1);
transition: opacity 0.25s ease;
}
.oh-logo:hover img { opacity: 0.85; }
.oh-nav-links {
display: flex;
align-items: center;
gap: clamp(16px, 2.2vw, 28px);
flex-wrap: nowrap;
}
.oh-nav-links a {
font-size: 13px;
font-weight: 400;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.92);
text-decoration: none;
position: relative;
padding: 6px 2px;
white-space: nowrap;
transition: color 0.25s ease;
}
.oh-nav-links a.oh-nav-soon {
opacity: 0.55;
pointer-events: none;
cursor: default;
position: relative;
}
.oh-nav-links a.oh-nav-soon::before {
content: 'Soon';
position: absolute;
top: -8px;
right: -22px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
padding: 2px 6px;
border-radius: 999px;
background: #1d3766;
color: #ffffff;
text-transform: uppercase;
}
.oh-nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: #ffffff;
transition: width 0.3s ease, left 0.3s ease;
}
.oh-nav-links a:hover { color: #ffffff; }
.oh-nav-links a:hover::after { width: 100%; left: 0; }
.oh-nav-utility {
display: flex;
align-items: center;
gap: 22px;
}
.oh-nav-utility a {
font-size: 13px;
color: rgba(255,255,255,0.75);
text-decoration: none;
font-weight: 400;
letter-spacing: 0.04em;
position: relative;
padding: 4px 2px;
transition: color 0.25s ease;
}
.oh-nav-utility a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: #ffffff;
transition: width 0.3s ease, left 0.3s ease;
}
.oh-nav-utility a:hover { color: #ffffff; }
.oh-nav-utility a:hover::after { width: 100%; left: 0; }
.oh-nav-icon {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.85);
width: 38px;
height: 38px;
border-radius: 50%;
transition: background 0.25s ease, color 0.25s ease;
}
.oh-nav-icon:hover { color: #ffffff; background: rgba(255,255,255,0.12); }
.oh-nav-icon::after { display: none; }
.oh-hamburger {
display: none;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 8px;
cursor: pointer;
color: #ffffff;
padding: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.25s ease;
}
.oh-hamburger:hover { background: rgba(255,255,255,0.2); }
.oh-mobile-nav {
display: none;
flex-direction: column;
position: absolute;
top: 96px;
left: 0;
right: 0;
background: rgba(15, 25, 45, 0.96);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
z-index: 198;
padding: 12px 6% 32px;
transform: translateY(-110%);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
opacity: 0;
pointer-events: none;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.oh-mobile-nav.open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.oh-mobile-nav a {
font-size: 17px;
font-weight: 400;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.88);
padding: 18px 6px;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
text-decoration: none;
transition: color 0.2s ease, padding-left 0.25s ease, background 0.2s ease;
position: relative;
}
.oh-mobile-nav a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 1px;
background: #ffffff;
transform: translateY(-50%);
transition: width 0.25s ease;
}
.oh-mobile-nav a:hover {
color: #ffffff;
padding-left: 22px;
}
.oh-mobile-nav a:hover::before { width: 14px; }
.oh-mobile-nav a:last-child { border-bottom: 0; }
/* ============================================================
HERO, full width, inset via padding
============================================================ */
.oh-hero {
width: 100%;
max-width: none !important;
padding: 0;
}
.oh-hero-inner {
position: relative;
height: 100vh;
border-radius: 0;
overflow: hidden;
background: #000000;
display: flex;
align-items: center;
justify-content: center;
}
.oh-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.oh-hero-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
}
.oh-hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 40px;
max-width: 720px;
}
.oh-hero-eyebrow {
font-size: 13px;
font-weight: 300;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
margin-bottom: 28px;
}
.oh-hero-content h1 { color: #ffffff; margin-bottom: 32px; font-size: 58px; line-height: 1.05; }
.oh-hero-body {
color: rgba(255,255,255,0.9);
font-size: 18px;
line-height: 1.65;
margin-bottom: 36px;
max-width: 480px;
}
/* ============================================================
INTRO, full-width section
============================================================ */
.oh-intro {
width: 100%;
max-width: none !important;
margin: 80px 0 60px;
}
.oh-intro .oh-container { text-align: center; }
.oh-intro h2 { margin-bottom: 20px; color: #111111; max-width: 800px; margin-left: auto; margin-right: auto; }
.oh-intro p { font-size: 17px; color: #555555; line-height: 1.7; max-width: 680px; margin-left: auto; margin-right: auto; }
/* ============================================================
STATS, heading on top, 3 tall cards below
============================================================ */
.oh-stats {
width: 100%;
max-width: none !important;
margin: 100px 0;
}
.oh-stats-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
max-width: 720px;
margin-bottom: 56px;
}
/* legacy left column (unused after redesign) */
.oh-stats-inner { display: block; }
.oh-stats-left { display: none; }
.oh-physician-label {
font-size: 13px;
font-weight: 300;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #888888;
margin-bottom: 20px;
}
.oh-stats-header h2 {
font-size: clamp(36px, 4.4vw, 60px);
line-height: 1.05;
color: #111111;
letter-spacing: -0.025em;
margin: 0;
}
.oh-stats-header p {
color: #555555;
font-size: 19px;
line-height: 1.6;
max-width: 720px;
margin: 0;
}
.oh-stats-header .oh-btn {
margin-top: 18px;
align-self: flex-start;
padding: 18px 32px;
font-size: 15px;
letter-spacing: 0.04em;
}
/* Split layout: lead text on left, Dr. Bidgoli card on right */
.oh-stats-header--split {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.7fr);
align-items: center;
gap: clamp(40px, 5vw, 72px);
max-width: none;
}
.oh-stats-header--split .oh-stats-header__lead {
display: flex;
flex-direction: column;
gap: 26px;
max-width: 820px;
}
.oh-stats-header--split .oh-stats-header__lead p { max-width: 700px; }
.oh-doctor-card {
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 18px;
padding: 28px 28px 26px;
box-shadow: 0 14px 38px rgba(20, 30, 50, 0.06);
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
overflow: hidden;
}
.oh-doctor-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: #1d3766;
}
.oh-doctor-card__head {
display: flex;
align-items: center;
gap: 14px;
}
.oh-doctor-card__avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: #f1f4f9;
color: #1d3766;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.oh-doctor-card__id { display: flex; flex-direction: column; gap: 4px; }
.oh-doctor-card__eyebrow {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1d3766;
}
.oh-doctor-card__name {
font-size: 22px;
font-weight: 600;
color: #111111;
margin: 0;
letter-spacing: -0.01em;
}
.oh-doctor-card__bio {
color: #555555;
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.oh-doctor-card__cta {
align-self: flex-start;
margin-top: 4px;
}
.oh-doctor-card__credit {
margin: 14px 0 0;
font-size: 13.5px;
line-height: 1.45;
color: #1d3766;
text-align: center;
font-style: italic;
letter-spacing: 0.005em;
}
.oh-doctor-card__cta--block {
align-self: stretch;
width: 100%;
text-align: center;
padding: 20px 32px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.01em;
margin-top: 14px;
}
.oh-doctor-card__creds {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.oh-doctor-card__creds li {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #1d3766;
background: #f1f4f9;
padding: 6px 10px;
border-radius: 999px;
}
/* ============================================================
Premium concierge physician section (front-page redesign)
============================================================ */
/* Trust bullets under the lead text. */
.oh-trust-bullets {
list-style: none;
margin: 8px 0 4px;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.oh-trust-bullets li {
position: relative;
padding-left: 30px;
font-size: 15.5px;
line-height: 1.5;
color: #2c3346;
letter-spacing: 0.005em;
}
.oh-trust-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 0.32em;
width: 18px;
height: 18px;
border-radius: 50%;
background: #1d3766;
}
.oh-trust-bullets li::after {
content: '';
position: absolute;
left: 5px;
top: 0.78em;
width: 8px;
height: 4px;
border-left: 1.5px solid #ffffff;
border-bottom: 1.5px solid #ffffff;
transform: rotate(-45deg);
transform-origin: 0 0;
}
/* Lead-side CTA gets a slightly taller, more substantial feel. */
.oh-stats-header__cta {
margin-top: 22px;
padding: 18px 30px !important;
font-size: 15px;
letter-spacing: 0.02em;
align-self: flex-start;
}
/* Pull-quote from the doctor below the CTA. Fills the column visually
so the lead doesn't feel empty next to the taller doctor card. */
.oh-stats-header__quote {
margin: 44px 0 0;
padding: 28px 32px;
background: #f6f8fb;
border-left: 3px solid #1d3766;
border-radius: 0 18px 18px 0;
max-width: 540px;
position: relative;
}
.oh-stats-header__quote blockquote {
margin: 0 0 14px;
border: 0;
padding: 0;
font-family: 'Inter', sans-serif;
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.55;
color: #1a1a2e;
font-style: italic;
font-weight: 400;
letter-spacing: -0.005em;
quotes: none;
}
.oh-stats-header__quote figcaption {
font-size: 13px;
color: #6b7280;
letter-spacing: 0.04em;
font-weight: 500;
text-transform: uppercase;
}
/* Larger doctor card, photo on top, more breathing room, softer corners. */
.oh-doctor-card--lg {
border-radius: 28px !important;
padding: 0 !important;
border: 1px solid #ecf0f5 !important;
box-shadow:
0 32px 80px rgba(20, 30, 50, 0.10),
0 8px 24px rgba(20, 30, 50, 0.05) !important;
overflow: hidden;
gap: 0 !important;
background: #ffffff;
}
.oh-doctor-card--lg::before { display: none; } /* drop the legacy navy top stripe */
.oh-doctor-card__photo {
width: 100%;
aspect-ratio: 7 / 5;
background: #f1f4f9;
overflow: hidden;
}
.oh-doctor-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.oh-doctor-card--lg .oh-doctor-card__body {
padding: 28px 32px 28px;
display: flex;
flex-direction: column;
gap: 14px;
}
.oh-doctor-card--lg .oh-doctor-card__eyebrow {
font-size: 11.5px;
letter-spacing: 0.22em;
color: #1d3766;
font-weight: 600;
}
.oh-doctor-card--lg .oh-doctor-card__name {
font-size: 26px;
font-weight: 600;
line-height: 1.15;
color: #111111;
letter-spacing: -0.018em;
margin: 0;
}
/* Override the legacy chip-style creds with stacked editorial lines. */
.oh-doctor-card--lg .oh-doctor-card__creds {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 4px;
margin: 4px 0 0;
padding: 10px 0 0;
border-top: 1px solid #ecf0f5;
}
.oh-doctor-card--lg .oh-doctor-card__creds li {
background: transparent;
padding: 0;
border-radius: 0;
text-transform: none;
letter-spacing: 0;
color: #4b5260;
font-size: 13.5px;
font-weight: 400;
line-height: 1.5;
}
.oh-doctor-card--lg .oh-doctor-card__bio {
font-size: 14.5px;
line-height: 1.55;
color: #4b5260;
margin: 2px 0 0;
}
.oh-doctor-card--lg .oh-doctor-card__cta--block {
padding: 16px 28px !important;
font-size: 15px;
letter-spacing: 0.02em;
margin-top: 10px;
border-radius: 999px;
}
.oh-doctor-card--lg .oh-doctor-card__credit {
margin-top: 10px;
font-size: 12.5px;
}
/* Slightly bigger column for the larger card on desktop. */
@media (min-width: 901px) {
.oh-stats-header--split:has(.oh-doctor-card--lg) {
grid-template-columns: minmax(0, 1fr) minmax(420px, 1.05fr);
gap: 72px;
}
}
/* ============================================================
Wide doctor card: full-width centered, no photo, big $50 perk
============================================================ */
.oh-doctor-card--wide {
display: block;
max-width: 980px;
margin: clamp(40px, 6vw, 88px) auto clamp(40px, 5vw, 64px);
padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 64px);
text-align: center;
border-radius: 32px;
background: #ffffff;
border: 1px solid #ecf0f5;
box-shadow:
0 32px 80px rgba(20, 30, 50, 0.10),
0 8px 24px rgba(20, 30, 50, 0.05);
overflow: hidden;
}
.oh-doctor-card--wide::before { display: none; }
.oh-doctor-card--wide .oh-doctor-card__eyebrow {
display: inline-block;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #1d3766;
font-weight: 600;
margin-bottom: 14px;
}
.oh-doctor-card--wide .oh-doctor-card__name {
font-size: clamp(30px, 4vw, 46px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 22px;
color: #111111;
}
.oh-doctor-card--wide .oh-doctor-card__creds {
list-style: none;
margin: 0 auto 24px;
padding: 18px 0;
max-width: 760px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 28px;
border-top: 1px solid #ecf0f5;
border-bottom: 1px solid #ecf0f5;
}
.oh-doctor-card--wide .oh-doctor-card__creds li {
background: transparent;
padding: 0;
color: #4b5260;
font-size: 14.5px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.005em;
text-transform: none;
border-radius: 0;
position: relative;
}
.oh-doctor-card--wide .oh-doctor-card__creds li:not(:last-child)::after {
content: '·';
position: absolute;
right: -16px;
top: 50%;
transform: translateY(-50%);
color: #c5cdd9;
font-weight: 700;
}
.oh-doctor-card--wide .oh-doctor-card__bio {
max-width: 720px;
margin: 0 auto 28px;
font-size: 16px;
line-height: 1.65;
color: #4b5260;
}
.oh-doctor-card--wide .oh-doctor-card__cta {
display: inline-block;
align-self: auto;
padding: 22px 56px !important;
font-size: 17px;
letter-spacing: 0.04em;
font-weight: 600;
border-radius: 999px;
margin: 0 0 32px;
}
/* Big marketable $50 perk panel */
.oh-doctor-card__perk {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(16px, 3vw, 28px);
margin: 8px auto 0;
padding: clamp(20px, 3vw, 28px) clamp(20px, 4vw, 36px);
max-width: 720px;
background: linear-gradient(135deg, #f6f8fb 0%, #eef2f9 100%);
border: 1px solid #d8e0ec;
border-radius: 22px;
text-align: left;
}
.oh-doctor-card__perk-amount {
font-size: clamp(48px, 6.4vw, 80px);
font-weight: 700;
letter-spacing: -0.035em;
color: #1d3766;
line-height: 0.9;
flex-shrink: 0;
font-family: 'Inter', sans-serif;
}
.oh-doctor-card__perk-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.oh-doctor-card__perk-text strong {
font-size: clamp(15px, 1.4vw, 18px);
font-weight: 700;
color: #111111;
letter-spacing: -0.01em;
}
.oh-doctor-card__perk-text span {
font-size: clamp(13.5px, 1.15vw, 15px);
line-height: 1.5;
color: #4b5260;
font-style: normal;
}
@media (max-width: 640px) {
.oh-doctor-card__perk {
flex-direction: column;
text-align: center;
gap: 8px;
padding: 22px 20px;
}
.oh-doctor-card__perk-amount { line-height: 1; }
}
/* ============================================================
Private Wellness Guidance, standalone band
============================================================ */
.oh-pwg {
background: #ffffff;
padding: clamp(64px, 7vw, 96px) 0;
text-align: center;
}
.oh-pwg .oh-container {
max-width: 920px;
margin: 0 auto;
padding: 0 clamp(24px, 6vw, 80px);
}
.oh-pwg__eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #888888;
margin-bottom: 22px;
}
.oh-pwg__title {
font-size: clamp(32px, 4.4vw, 56px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.025em;
color: #111111;
margin: 0 0 22px;
}
.oh-pwg__subhead {
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.55;
color: #555555;
max-width: 720px;
margin: 0 auto 28px;
}
.oh-pwg__bullets {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 28px;
}
.oh-pwg__bullets li {
font-size: 14.5px;
color: #1d3766;
letter-spacing: 0.01em;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
}
.oh-pwg__bullets li::before {
content: '';
width: 16px;
height: 16px;
border-radius: 50%;
background: #1d3766
url("data:image/svg+xml;utf8,") center / 12px no-repeat;
flex-shrink: 0;
}
.oh-pwg__cta {
padding: 22px 56px !important;
font-size: 17px;
letter-spacing: 0.04em;
font-weight: 600;
border-radius: 999px;
}
/* ============================================================
Our Philosophy, full-width band under physician section
============================================================ */
.oh-philosophy {
background: #f6f8fb;
padding: clamp(64px, 7vw, 96px) 0;
margin: 0;
text-align: center;
}
.oh-philosophy .oh-container {
max-width: 1480px;
margin: 0 auto;
padding: 0 clamp(24px, 6vw, 80px);
text-align: center;
}
.oh-philosophy__label {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #1d3766;
margin-bottom: 26px;
}
.oh-philosophy__quote {
margin: 0;
padding: 0;
border: 0;
quotes: none;
font-family: 'Inter', sans-serif;
font-size: clamp(19px, 1.85vw, 26px);
line-height: 1.5;
letter-spacing: -0.012em;
font-weight: 500;
color: #1a1a2e;
}
/* Mobile stack: card collapses below lead. */
@media (max-width: 900px) {
.oh-doctor-card--lg .oh-doctor-card__body { padding: 28px 26px 28px; }
.oh-doctor-card--lg .oh-doctor-card__name { font-size: 24px; }
.oh-doctor-card__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 900px) {
.oh-stats-header--split {
grid-template-columns: 1fr;
gap: 32px;
}
.oh-doctor-card { padding: 24px; }
}
.oh-stats-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
}
.oh-stat-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 18px;
padding: 36px 32px;
min-height: 480px;
overflow: hidden;
color: #ffffff;
isolation: isolate;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.oh-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(20, 30, 50, 0.18);
}
.oh-stat-card--image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.oh-stat-card--image .oh-stat-pct,
.oh-stat-card--image .oh-stat-label,
.oh-stat-card--image p {
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.oh-stat-graph {
position: absolute;
inset: 28% 8% auto 8%;
height: 44%;
z-index: 0;
pointer-events: none;
}
.oh-stat-graph svg { width: 100%; height: 100%; display: block; }
.oh-stat-pct {
font-size: 88px;
font-weight: 300;
color: #ffffff;
line-height: 1;
letter-spacing: -2px;
position: relative;
z-index: 1;
}
.oh-stat-label {
font-size: 24px;
font-weight: 600;
color: #ffffff;
line-height: 1.2;
letter-spacing: -0.01em;
margin-top: auto;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.oh-stat-card p {
font-size: 15px;
color: rgba(255,255,255,0.88);
line-height: 1.5;
margin: 0;
max-width: 32ch;
position: relative;
z-index: 1;
}
/* ============================================================
PROGRAMS, full width, 3×2 CSS grid
============================================================ */
.oh-programs {
width: 100%;
max-width: none !important;
margin: 56px 0;
}
.oh-programs-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 22px;
}
.oh-programs-header-text h3 {
font-size: 38px;
line-height: 1.1;
letter-spacing: -0.02em;
color: #111111;
margin: 0;
max-width: 640px;
}
.oh-programs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
width: 100%;
}
.oh-program-tile {
display: block;
text-decoration: none;
color: inherit;
}
.oh-img-box {
position: relative;
width: 100%;
padding-bottom: 58%;
height: 0;
overflow: hidden;
border-radius: 16px;
background: #e0e4ea;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.oh-img-box img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
transition: transform 0.6s ease;
}
.oh-program-tile:hover .oh-img-box {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(20, 30, 50, 0.18);
}
.oh-program-tile:hover .oh-img-box img { transform: scale(1.06); }
.oh-tile-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,30,50,0.05) 0%, rgba(20,30,50,0.65) 100%);
border-radius: 16px;
}
.oh-tile-text {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 24px 28px;
max-width: 78%;
}
.oh-tile-name { font-size: 25px; font-weight: 600; color: #ffffff; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 6px; }
.oh-tile-tagline { font-size: 14.5px; color: rgba(255,255,255,0.88); line-height: 1.45; }
.oh-tile-arrow {
position: absolute;
bottom: 20px;
right: 20px;
width: 42px;
height: 42px;
border-radius: 999px;
background: #ffffff;
color: #1d3766;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.4s ease, background 0.4s ease;
}
.oh-tile-arrow svg { width: 18px; height: 18px; }
.oh-program-tile:hover .oh-tile-arrow {
background: #1d3766;
color: #ffffff;
transform: translateX(4px);
}
/* ============================================================
WHY, full width
============================================================ */
.oh-why { width: 100%; margin: 96px 0; padding: 0 24px; }
.oh-why .oh-container { max-width: 1280px; margin: 0 auto; padding: 0; }
.oh-why-grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 80px;
align-items: start;
}
/* Left aside (navy panel) */
.oh-why-aside {
position: sticky;
top: 120px;
background: #1d3766;
color: #fff;
padding: 64px 52px;
border-radius: 24px;
box-shadow: 0 18px 44px rgba(20, 30, 50, 0.18);
overflow: hidden;
align-self: stretch;
min-height: 560px;
display: flex;
flex-direction: column;
gap: 28px;
}
.oh-why-aside .oh-why-eyebrow { margin-bottom: 0; }
.oh-why-aside .oh-why-title { margin: 0; }
.oh-why-aside .oh-why-lede { margin: 0; }
.oh-why-aside::before {
content: "";
position: absolute;
inset: auto -40% -40% auto;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
pointer-events: none;
}
.oh-why-eyebrow {
display: inline-block;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
font-weight: 600;
margin-bottom: 22px;
}
.oh-why-title {
font-size: clamp(30px, 3vw, 38px);
line-height: 1.12;
color: #fff;
letter-spacing: -0.02em;
margin: 0 0 18px;
font-weight: 600;
}
.oh-why-lede {
font-size: 16.5px;
line-height: 1.65;
color: rgba(255,255,255,0.8);
margin: 0 0 28px;
}
.oh-why-aside .oh-btn-primary {
display: inline-block;
align-self: flex-start;
background: #fff;
color: #1d3766;
padding: 20px 42px;
border-radius: 999px;
font-weight: 600;
font-size: 17px;
margin-top: auto;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-why-aside .oh-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.oh-why-meta {
list-style: none;
margin: 8px 0 0;
padding: 24px 0 0;
border-top: 1px solid rgba(255,255,255,0.18);
display: flex;
flex-direction: column;
gap: 18px;
}
.oh-why-meta li {
display: flex;
align-items: flex-start;
gap: 14px;
color: rgba(255,255,255,0.92);
}
.oh-why-meta__icon {
flex-shrink: 0;
width: 38px;
height: 38px;
padding: 8px;
border-radius: 10px;
background: rgba(255,255,255,0.1);
color: #fff;
}
.oh-why-meta li > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.oh-why-meta strong {
font-size: 14.5px;
font-weight: 600;
color: #fff;
letter-spacing: 0.01em;
}
.oh-why-meta span {
font-size: 13.5px;
line-height: 1.5;
color: rgba(255,255,255,0.7);
}
/* Right pillars list */
.oh-why-pillars {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.oh-why-pillar {
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
padding: 36px 0;
border-bottom: 1px solid #e8ecf0;
align-items: start;
}
.oh-why-pillar:first-child { padding-top: 8px; }
.oh-why-pillar:last-child { border-bottom: none; }
.oh-why-pillar__num {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
color: #1d3766;
padding-top: 6px;
position: relative;
}
.oh-why-pillar__num::after {
content: "";
position: absolute;
left: 0;
top: 30px;
width: 28px;
height: 2px;
background: #1d3766;
opacity: 0.3;
}
.oh-why-pillar__body h3 {
font-size: clamp(20px, 2vw, 24px);
line-height: 1.25;
color: #1a1a2e;
letter-spacing: -0.015em;
margin: 0 0 10px;
font-weight: 600;
}
.oh-why-pillar__body p {
font-size: 16px;
line-height: 1.65;
color: #555;
margin: 0;
}
/* ============================================================
PRODUCTS, full width, grey bg
============================================================ */
.oh-products {
width: 100%;
max-width: none !important;
background: #f5f7fa;
padding: 80px 0;
margin: 80px 0;
}
.oh-products-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: 36px;
}
.oh-products-header h2 { font-size: 42px; color: #111111; letter-spacing: -0.5px; }
.oh-products-header p { color: #555555; font-size: 16px; max-width: 520px; }
.oh-product-cards {
display: flex;
gap: 20px;
overflow-x: auto;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.oh-product-cards::-webkit-scrollbar { display: none; }
.oh-product-card {
flex: 0 0 220px;
background: #ffffff;
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.oh-product-badge {
position: absolute;
top: 10px; left: 10px;
background: #1d3766; color: #ffffff;
font-size: 11px; font-weight: 600;
padding: 4px 10px; border-radius: 20px;
z-index: 2; letter-spacing: 0.03em;
}
.oh-product-img { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #e8ecf0; }
.oh-product-img img { width: 100%; height: 100%; object-fit: cover; }
.oh-product-img-placeholder { width: 100%; height: 100%; background: linear-gradient(160deg,#d0d8e8,#b0bcd4); }
.oh-product-info { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.oh-product-info h4 { font-size: 15px; font-weight: 600; color: #111111; line-height: 1.3; }
.oh-product-info p { font-size: 13px; color: #777777; line-height: 1.5; }
.oh-product-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
/* ============================================================
PRESS, full width
============================================================ */
.oh-press { width: 100%; max-width: none !important; margin: 60px 0; }
.oh-press-logos {
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
flex-wrap: wrap;
}
.oh-press-logos img { height: 28px; width: auto; opacity: 0.45; filter: grayscale(1); }
.oh-press-logos img:hover { opacity: 0.75; }
/* ============================================================
FAQ, full width
============================================================ */
.oh-faq { width: 100%; max-width: none !important; margin: 80px 0; }
.oh-faq h2 { font-size: 42px; color: #111111; letter-spacing: -0.5px; margin-bottom: 32px; }
.oh-accordion { display: flex; flex-direction: column; gap: 12px; }
.oh-accordion-item {
border: 1px solid rgba(0,0,0,0.12);
border-radius: 16px;
overflow: hidden;
transition: background 0.2s ease;
}
.oh-accordion-item.active { background: #edf0f5; }
.oh-accordion-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 22px 24px;
font-size: 17px;
font-weight: 500;
color: #111111;
line-height: 1.4;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
transition: color 0.2s ease;
}
.oh-accordion-label:hover,
.oh-accordion-label:focus,
.oh-accordion-label:active,
.oh-accordion-label:focus-visible {
background: transparent;
color: #1d3766;
outline: none;
box-shadow: none;
}
.oh-accordion-item.active .oh-accordion-label,
.oh-accordion-item.active .oh-accordion-label:hover,
.oh-accordion-item.active .oh-accordion-label:focus {
background: transparent;
color: #111111;
}
.oh-accordion-icon {
flex-shrink: 0;
font-size: 24px; font-weight: 300;
color: #888888; line-height: 1;
transition: transform 0.25s ease;
user-select: none;
}
.oh-accordion-item.active .oh-accordion-icon { color: #1d3766; }
.oh-accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
padding: 0 24px;
font-size: 15px;
color: #666666;
line-height: 1.7;
}
.oh-accordion-item.active .oh-accordion-body { max-height: 600px; padding-bottom: 24px; }
/* ============================================================
FLOATING CONSULT CTA, bottom-right popup card
============================================================ */
.oh-sticky-cta {
display: none;
position: fixed;
bottom: 24px;
right: 24px;
width: 320px;
max-width: calc(100vw - 32px);
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 14px;
box-shadow: 0 16px 40px rgba(20, 30, 50, 0.14), 0 4px 12px rgba(20, 30, 50, 0.06);
z-index: 500;
padding: 20px 22px 20px 22px;
animation: oh-cta-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes oh-cta-slide-in {
0% { opacity: 0; transform: translateY(16px); }
100% { opacity: 1; transform: translateY(0); }
}
.oh-sticky-cta-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.oh-sticky-cta-text { display: flex; flex-direction: column; gap: 6px; color: #1a1a2e; padding-right: 20px; }
.oh-sticky-cta-text strong { font-size: 15px; font-weight: 600; color: #1a1a2e; line-height: 1.3; }
.oh-sticky-cta-text span { font-size: 13px; color: #555555; line-height: 1.5; font-weight: 400; }
.oh-sticky-cta-close {
position: absolute;
top: 10px; right: 10px;
background: none; border: 0;
color: #999999;
font-size: 14px; cursor: pointer;
line-height: 1; padding: 6px 8px;
border-radius: 6px;
transition: color 0.2s ease, background 0.2s ease;
}
.oh-sticky-cta-close:hover { color: #1d3766; background: #f5f7fa; }
.oh-sticky-cta .oh-btn { width: 100%; text-align: center; justify-content: center; }
/* ============================================================
FOOTER, full width
============================================================ */
.oh-footer {
width: 100%;
max-width: none !important;
background: #ffffff;
border-top: 1px solid #e8ecf0;
padding: 80px 0 40px;
margin-top: 60px;
}
.oh-footer-grid {
display: grid;
grid-template-columns: 1.8fr 1fr 1.2fr 1fr;
gap: 40px;
margin-bottom: 60px;
}
.oh-footer-logo { display: block; margin-bottom: 14px; }
.oh-footer-logo img { height: 32px; width: auto; }
.oh-footer-tagline { font-size: 14px; color: #888888; margin-bottom: 24px; line-height: 1.5; }
.oh-footer-col h5 {
font-size: 12px; font-weight: 600;
color: #111111; text-transform: uppercase;
letter-spacing: 0.1em; margin-bottom: 16px;
}
.oh-footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.oh-footer-col ul li a { font-size: 14px; color: #666666; text-decoration: none; }
.oh-footer-col ul li a:hover { color: #111111; }
.oh-footer-lower {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 28px;
border-top: 1px solid #e8ecf0;
flex-wrap: wrap;
gap: 12px;
font-size: 13px; color: #888888;
}
.oh-footer-lower a { color: #888888; text-decoration: none; }
.oh-footer-lower a:hover { color: #111111; }
.oh-sep { color: #cccccc; margin: 0 4px; }
.oh-footer-disclaimer {
margin-top: 32px;
padding-top: 24px;
padding-bottom: 32px;
border-top: 1px solid #e8ecf0;
text-align: center;
}
.oh-footer-disclaimer p {
font-size: 12px;
line-height: 1.65;
color: #888888;
max-width: 980px;
margin: 0 auto;
}
.oh-footer-disclaimer a {
color: #1d3766;
text-decoration: underline;
text-underline-offset: 2px;
}
.oh-footer-disclaimer a:hover { color: #111111; }
/* ============================================================
RESPONSIVE, 1024px
============================================================ */
@media (max-width: 1024px) {
.oh-nav-links { gap: 28px; }
.oh-stat-card { padding: 28px 24px; min-height: 420px; }
.oh-stat-pct { font-size: 72px; }
.oh-stat-label { font-size: 18px; }
.oh-stats-header h2 { font-size: 38px; }
}
/* ============================================================
RESPONSIVE, collapse nav to hamburger earlier (6 nav items)
============================================================ */
/* Stage 1: shrink nav by hiding "Coming Soon" items and tightening gaps. */
@media (max-width: 1340px) {
.oh-nav-links a.oh-nav-soon { display: none; }
.oh-nav-links { gap: 22px; }
}
/* Stage 2: real hamburger collapse only once 4 items + utility no longer fit. */
@media (max-width: 980px) {
.oh-nav-links,
.oh-nav-utility { display: none; }
.oh-hamburger { display: flex; }
.oh-mobile-nav { display: flex; }
}
@media (max-width: 860px) {
.oh-stats-cards { grid-template-columns: 1fr; gap: 18px; }
.oh-stat-card { min-height: 380px; }
.oh-why-grid { grid-template-columns: 1fr; gap: 40px; }
.oh-why-aside { position: static; padding: 40px 28px; border-radius: 20px; }
.oh-why-pillar { grid-template-columns: 56px 1fr; gap: 16px; padding: 28px 0; }
.oh-why-pillar__num::after { top: 26px; width: 20px; }
.oh-footer-grid { grid-template-columns: 1fr 1fr; }
.oh-programs-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
RESPONSIVE, 640px
============================================================ */
@media (max-width: 640px) {
h1 { font-size: 38px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
.oh-header { height: 72px; padding: 0 5%; }
.oh-logo img { height: 40px; min-width: 100px; }
.oh-mobile-nav { top: 72px; }
.oh-hero { padding: 0; }
.oh-hero-inner { height: 100vh; }
.oh-hero-content h1 { font-size: 34px; }
.oh-hero-body { font-size: 15px; }
.oh-intro { margin: 48px 0 40px; }
.oh-stats { margin: 48px 0; }
.oh-why { margin: 48px 0; }
.oh-programs { margin: 48px 0; }
.oh-products { margin: 48px 0; padding: 48px 0; }
.oh-faq { margin: 48px 0; }
.oh-press { margin: 40px 0; }
.oh-stat-card { padding: 24px 22px; min-height: 360px; }
.oh-stat-pct { font-size: 64px; }
.oh-stat-label { font-size: 17px; }
.oh-stats-header { margin-bottom: 36px; }
.oh-stats-header h2 { font-size: 32px; }
.oh-programs-grid { grid-template-columns: 1fr; gap: 14px; }
.oh-img-box { padding-bottom: 80%; }
.oh-tile-text { padding: 20px 22px; max-width: 78%; }
.oh-tile-name { font-size: 24px; }
.oh-tile-tagline { font-size: 14px; }
.oh-tile-arrow { width: 42px; height: 42px; bottom: 18px; right: 18px; }
.oh-programs-header-text h3 { font-size: 32px; }
.oh-product-card { flex: 0 0 180px; }
.oh-press-logos { gap: 20px; }
.oh-press-logos img { height: 22px; }
.oh-footer-grid { grid-template-columns: 1fr; gap: 28px; }
.oh-footer-lower { flex-direction: column; align-items: flex-start; gap: 8px; }
.oh-sticky-cta { bottom: 16px; right: 16px; left: 16px; width: auto; }
.oh-programs-header { flex-direction: column; align-items: flex-start; }
.oh-why { margin: 64px 0; padding: 0 16px; }
.oh-why-aside { padding: 32px 22px; }
.oh-why-meta { gap: 8px 16px; }
.oh-products-header h2 { font-size: 28px; }
.oh-faq h2 { font-size: 28px; }
}
/* ============================================================
SHOP ARCHIVE, toolbar, heading, filter pills, product cards
============================================================ */
.oh-shop { padding: 148px 3.5% 100px; }
body.admin-bar .oh-shop { padding-top: 180px; }
.oh-shop__inner { max-width: none; width: 100%; margin: 0; }
.oh-shop__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 36px;
}
.oh-shop__filter-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
background: #ffffff;
border: 1.5px solid #e1e6ed;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
color: #1a1a2e;
font-family: inherit;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.oh-shop__filter-chip:hover { border-color: #1d3766; color: #1d3766; }
.oh-shop__filter-chip svg { color: #1d3766; }
.oh-shop__sort select {
padding: 10px 44px 10px 22px;
background-color: #ffffff;
border: 1.5px solid #e1e6ed;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
color: #1a1a2e;
font-family: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d3766' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 12px;
transition: border-color 0.2s ease;
}
.oh-shop__sort select:hover { border-color: #1d3766; }
.oh-shop__sort select:focus { outline: none; border-color: #1d3766; box-shadow: 0 0 0 3px rgba(29,55,102,0.12); }
.oh-shop__heading {
font-size: 56px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -1.5px;
color: #1a1a2e;
margin: 0 0 36px;
}
.oh-shop-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 44px;
}
.oh-filter-pill {
display: inline-flex;
align-items: center;
padding: 10px 22px;
background: #ffffff;
border: 1.5px solid #e1e6ed;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
color: #1a1a2e;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.oh-filter-pill:hover { border-color: #1d3766; color: #1d3766; }
.oh-filter-pill.is-active {
background: #1d3766;
border-color: #1d3766;
color: #ffffff;
}
.oh-shop__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 28px;
}
.oh-shop__card {
display: flex;
flex-direction: column;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
box-shadow: 0 1px 2px rgba(15, 25, 45, 0.04), 0 4px 14px rgba(15, 25, 45, 0.04);
transition: transform 0.3s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
}
.oh-shop__card:hover { transform: translateY(-6px); box-shadow: 0 6px 16px rgba(15, 25, 45, 0.06), 0 22px 44px rgba(15, 25, 45, 0.10); }
.oh-shop__card-img {
position: relative;
display: block;
background: transparent;
aspect-ratio: 1 / 1;
overflow: hidden;
padding: 0;
border-radius: 20px 20px 0 0;
}
.oh-shop__card-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.oh-shop__card:hover .oh-shop__card-img img { transform: scale(1.04); }
.oh-shop__badge {
position: absolute;
top: 16px;
right: 16px;
padding: 6px 16px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: #ffffff;
background: #1d3766;
z-index: 2;
}
.oh-shop__badge--sale { background: #1d3766; }
.oh-shop__badge--bestseller { background: #16294e; }
.oh-shop__badge--new { background: #2a4a85; }
.oh-shop__card-body {
background: transparent;
padding: 24px 26px 26px;
display: flex;
flex-direction: column;
flex: 1;
gap: 0;
}
.oh-shop__card-name {
font-size: 21px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.oh-shop__card-name a { color: #1a1a2e; text-decoration: none; }
.oh-shop__card-name a:hover { color: #1d3766; }
.oh-shop__card-desc {
font-size: 14px;
line-height: 1.5;
color: #6b7280;
margin: 0 0 20px;
}
.oh-shop__card-price {
font-size: 17px;
font-weight: 600;
color: #1d3766;
margin: auto 0 12px;
letter-spacing: -0.01em;
}
.oh-shop__card-btns {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 0;
padding-top: 0;
flex-wrap: nowrap;
}
.oh-btn--atc {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 22px;
background: #1d3766;
color: #ffffff;
border: 1.5px solid #1d3766;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(29, 55, 102, 0.18);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.oh-btn--atc:hover { background: #16294e; border-color: #16294e; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(29, 55, 102, 0.28); }
.oh-btn--more {
font-size: 12px;
font-weight: 500;
color: #1a1a2e;
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: #c7ccd6;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.oh-btn--more:hover { color: #1d3766; text-decoration-color: #1d3766; }
@media (max-width: 1024px) {
.oh-shop__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.oh-shop__heading { font-size: 44px; }
}
@media (max-width: 640px) {
.oh-shop__grid { grid-template-columns: 1fr; }
.oh-shop__heading { font-size: 34px; }
.oh-shop__toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
.oh-shop { padding-top: 116px; }
body.admin-bar .oh-shop { padding-top: 160px; }
}
/* ============================================================
PAGE HERO, shared banner for shop / programs / science / etc.
Sits behind the absolute transparent header so the header keeps
its homepage look (white logo + nav over dark background).
============================================================ */
.oh-page-hero {
position: relative;
margin: 0;
padding: 180px 5% 96px;
background:
radial-gradient(120% 90% at 70% 20%, rgba(60, 90, 140, 0.55) 0%, rgba(15, 25, 45, 0) 60%),
linear-gradient(160deg, #0f192d 0%, #1d3766 55%, #2a4a85 100%);
color: #ffffff;
overflow: hidden;
isolation: isolate;
}
.oh-page-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(closest-side at 18% 80%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%),
radial-gradient(closest-side at 88% 30%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
pointer-events: none;
z-index: 0;
}
.oh-page-hero__inner {
position: relative;
z-index: 1;
max-width: 1240px;
margin: 0 auto;
text-align: center;
}
.oh-page-hero__title {
font-size: 56px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -1px;
color: #ffffff;
margin: 0 0 18px;
}
.oh-page-hero__subtitle {
font-size: 17px;
line-height: 1.65;
font-weight: 300;
color: rgba(255, 255, 255, 0.82);
max-width: 720px;
margin: 0 auto;
}
.oh-page-hero__eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 300;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 22px;
}
body.admin-bar .oh-page-hero { padding-top: 212px; }
@media (max-width: 860px) {
.oh-page-hero { padding: 140px 5% 72px; }
.oh-page-hero__title { font-size: 38px; }
.oh-page-hero__subtitle { font-size: 15px; }
body.admin-bar .oh-page-hero { padding-top: 168px; }
}
/* ============================================================
SINGLE PRODUCT, clean Optimus styling
============================================================ */
.oh-breadcrumb {
padding: 120px 5% 0;
font-size: 13px;
color: #6b7280;
}
.oh-breadcrumb__inner { max-width: 1240px; margin: 0 auto; }
.oh-breadcrumb a { color: #6b7280; text-decoration: none; transition: color 0.2s ease; }
.oh-breadcrumb a:hover { color: #1d3766; }
.oh-breadcrumb__sep { margin: 0 8px; color: #c7ccd6; }
.oh-breadcrumb__current { color: #1a1a2e; }
.oh-product-single { padding: 148px clamp(20px, 5%, 60px) 80px; overflow-x: hidden; }
.oh-product-single, .oh-product-single * { box-sizing: border-box; }
body.admin-bar .oh-product-single { padding-top: 180px; }
@media (max-width: 860px) {
.oh-product-single { padding-top: 116px; }
body.admin-bar .oh-product-single { padding-top: 160px; }
}
/* Global: every page goes edge-to-edge. Inner sections handle their own padding. */
body main.site-main,
body .site-main,
body main.site-main > .page-content,
body main.site-main > article,
body main.site-main > article > .entry-content,
body .page-content,
body article.page,
body article.post,
body .entry-content {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.oh-crumb {
font-family: 'Inter', sans-serif;
font-size: 12.5px;
color: #999;
letter-spacing: 0.01em;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 7px;
}
.oh-crumb a {
color: #888;
text-decoration: none;
transition: color 0.2s ease;
}
.oh-crumb a:hover { color: #1d3766; }
.oh-crumb span[aria-hidden="true"] { color: #cdd2da; }
.oh-crumb span[aria-current="page"] { color: #555; }
.oh-product-single__inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
.oh-product-gallery__main {
background: #f5f7fa;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.oh-product-gallery__main img { width: 100%; height: 100%; object-fit: cover; padding: 0; display: block; }
.oh-product-gallery__thumbs { display: flex; gap: 12px; margin-top: 14px; }
.oh-product-gallery__thumb {
width: 72px; height: 72px;
border-radius: 10px;
overflow: hidden;
border: 1.5px solid #e8ecf0;
display: block;
transition: border-color 0.2s ease;
}
.oh-product-gallery__thumb.is-active,
.oh-product-gallery__thumb:hover { border-color: #1d3766; }
.oh-product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.oh-product-gallery__disclaimer { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: #888; text-align: center; font-style: italic; letter-spacing: 0.01em; }
@media (max-width: 760px) { .oh-product-gallery__disclaimer { font-size: 11.5px; margin-top: 12px; } }
.oh-product-info__name {
font-size: 36px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.5px;
color: #1a1a2e;
margin: 0 0 12px;
}
.oh-product-info__price {
font-size: 26px;
font-weight: 500;
color: #1d3766;
margin: 0 0 18px;
}
.oh-product-info__price .woocommerce-Price-amount { font-weight: 500; }
.oh-product-info__price del { color: #999; opacity: 0.7; margin-right: 8px; font-size: 18px; }
.oh-product-info__price ins { text-decoration: none; }
.oh-product-info__short-desc {
font-size: 15px;
line-height: 1.65;
color: #555;
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid #e8ecf0;
}
.oh-product-info__atc { margin-bottom: 28px; }
/* Duration picker, replaces the WC dropdown with two side-by-side buttons */
.oh-product-info__atc--consult table.variations { display: none !important; }
.oh-product-info__atc--consult .reset_variations { display: none !important; }
/* Consult: price + Add to Cart on the same row, always side-by-side */
.oh-product-info__atc--consult .single_variation_wrap {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
gap: clamp(10px, 2vw, 16px);
margin-top: 4px;
width: 100%;
}
.oh-product-info__atc--consult .single_variation {
flex: 0 1 auto;
min-width: 0;
}
.oh-product-info__atc--consult .woocommerce-variation-price {
margin: 0 !important;
font-size: clamp(18px, 4vw, 26px) !important;
font-weight: 600 !important;
white-space: nowrap;
}
.oh-product-info__atc--consult .woocommerce-variation-availability,
.oh-product-info__atc--consult .woocommerce-variation-description { display: none !important; }
.oh-product-info__atc--consult .woocommerce-variation-add-to-cart {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: 0;
}
.oh-product-info__atc--consult .quantity { display: none !important; }
.oh-product-info__atc--consult button.single_add_to_cart_button {
margin: 0 !important;
min-width: 0 !important;
padding: 14px clamp(14px, 3vw, 36px) !important;
font-size: clamp(11px, 2.4vw, 14px) !important;
white-space: nowrap;
}
.oh-duration-picker {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 0 0 24px;
}
.oh-duration-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 4px;
padding: 18px 22px;
background: #ffffff;
border: 1.5px solid #e1e6ed;
border-radius: 14px;
cursor: pointer;
font-family: inherit;
color: #1a1a2e;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.oh-duration-btn:hover {
border-color: #1d3766;
background: #fafbfd;
}
.oh-duration-btn.is-selected {
border-color: #1d3766;
background: #f5f7fa;
box-shadow: 0 0 0 3px rgba(29, 55, 102, 0.12), 0 6px 16px rgba(29, 55, 102, 0.08);
}
.oh-duration-title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6b7280;
}
.oh-duration-btn.is-selected .oh-duration-title { color: #1d3766; }
.oh-duration-price {
font-size: 26px;
font-weight: 500;
color: #1a1a2e;
letter-spacing: -0.5px;
line-height: 1.1;
margin-top: 2px;
}
.oh-duration-sub {
font-size: 12px;
color: #6b7280;
font-weight: 400;
margin-top: 4px;
}
@media (max-width: 540px) {
.oh-duration-picker { grid-template-columns: 1fr; }
}
/* Feature blocks (icon + headline + body) */
.oh-product-features {
list-style: none;
margin: 0 0 32px;
padding: 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.oh-product-features li { display: flex; gap: 16px; align-items: flex-start; }
.oh-feat-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: #eef2f7;
color: #1d3766;
}
.oh-product-features h4 { font-size: 16px; font-weight: 600; color: #1a1a2e; margin: 2px 0 4px; line-height: 1.3; }
.oh-product-features p { font-size: 14px; color: #555555; line-height: 1.6; margin: 0; }
/* Benefits info-box (light navy panel with checkmarks) */
.oh-product-benefits {
background: #f5f7fa;
border-radius: 14px;
padding: 20px 24px;
margin-bottom: 28px;
}
.oh-product-benefits ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 18px;
}
.oh-product-benefits li {
font-size: 14px;
font-weight: 500;
color: #1a1a2e;
display: flex;
align-items: center;
gap: 10px;
line-height: 1.4;
}
.oh-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 50%;
background: #1d3766;
color: #ffffff;
}
/* Two-column big-price block */
.oh-product-pricing {
display: flex;
align-items: stretch;
gap: 28px;
margin-bottom: 14px;
}
.oh-product-pricing__col { display: flex; flex-direction: column; align-items: flex-start; }
.oh-product-pricing__amount {
font-size: 56px;
font-weight: 400;
line-height: 1;
letter-spacing: -1.5px;
color: #1a1a2e;
}
.oh-product-pricing__label {
font-size: 13px;
font-weight: 500;
color: #6b7280;
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.oh-product-pricing__divider {
width: 1px;
background: #e8ecf0;
align-self: stretch;
}
.oh-product-finep {
font-size: 13px;
color: #6b7280;
font-style: normal;
line-height: 1.6;
margin: 0 0 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e8ecf0;
}
@media (max-width: 540px) {
.oh-product-benefits ul { grid-template-columns: 1fr; }
.oh-product-pricing__amount { font-size: 44px; }
}
/* WooCommerce variations table, Optimus style */
.oh-product-info__atc form.variations_form { margin: 0; }
.oh-product-info__atc table.variations {
width: 100%;
margin: 0 0 22px;
border-collapse: collapse;
border: 0;
}
.oh-product-info__atc table.variations tr { display: flex; flex-direction: column; gap: 8px; }
.oh-product-info__atc table.variations td {
padding: 0;
border: 0;
background: transparent;
}
.oh-product-info__atc table.variations td.label label {
font-size: 13px;
font-weight: 600;
color: #1a1a2e;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 4px;
}
.oh-product-info__atc table.variations td.value { position: relative; }
.oh-product-info__atc table.variations select {
width: 100%;
padding: 16px 48px 16px 22px;
border: 1.5px solid #e1e6ed;
border-radius: 999px;
font-size: 15px;
font-weight: 500;
color: #1a1a2e;
font-family: inherit;
background-color: #ffffff;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231d3766' d='M1 1l5 5 5-5' stroke='%231d3766' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 22px center;
background-size: 12px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04);
}
.oh-product-info__atc table.variations select:hover { border-color: #c7ccd6; }
.oh-product-info__atc table.variations select:focus {
outline: none;
border-color: #1d3766;
box-shadow: 0 0 0 3px rgba(29, 55, 102, 0.12);
}
.oh-product-info__atc .reset_variations {
display: inline-block;
margin-top: 6px;
font-size: 12px;
color: #888;
text-decoration: none;
transition: color 0.2s ease;
}
.oh-product-info__atc .reset_variations:hover { color: #1d3766; }
.oh-product-info__atc .single_variation_wrap { margin-top: 4px; }
.oh-product-info__atc .woocommerce-variation-price {
font-size: 22px;
font-weight: 500;
color: #1d3766;
margin: 6px 0 18px;
}
.oh-product-info__atc .woocommerce-variation-availability { font-size: 13px; color: #6b7280; margin-bottom: 14px; }
.oh-product-info__atc .woocommerce-variation-description { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 16px; }
.oh-product-info__atc .quantity {
display: inline-flex;
align-items: center;
margin-right: 12px;
border: 1.5px solid #e8ecf0;
border-radius: 10px;
overflow: hidden;
}
.oh-product-info__atc .quantity input.qty {
width: 64px;
padding: 13px 8px;
border: 0;
background: transparent;
font-size: 15px;
font-weight: 500;
text-align: center;
color: #1a1a2e;
}
.oh-product-info__atc .quantity input.qty:focus { outline: none; }
.oh-product-info__atc button.single_add_to_cart_button,
.oh-product-info__atc .single_add_to_cart_button,
.oh-product-info__atc button[name="add-to-cart"],
.oh-product-info__atc form.cart button[type="submit"],
.oh-product-info__atc input.single_add_to_cart_button {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 14px 36px !important;
background: #1d3766 !important;
background-color: #1d3766 !important;
background-image: none !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
border: 0 !important;
border-radius: 999px !important;
cursor: pointer;
transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
min-width: 220px;
text-shadow: none !important;
box-shadow: none;
font-family: inherit !important;
}
.oh-product-info__atc button.single_add_to_cart_button:hover,
.oh-product-info__atc .single_add_to_cart_button:hover,
.oh-product-info__atc button[name="add-to-cart"]:hover,
.oh-product-info__atc form.cart button[type="submit"]:hover {
background: #16294e !important;
background-color: #16294e !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(29, 55, 102, 0.18);
}
.oh-product-info__atc button.single_add_to_cart_button:disabled,
.oh-product-info__atc button.single_add_to_cart_button.disabled,
.oh-product-info__atc form.cart button[type="submit"]:disabled {
background: #c7ccd6 !important;
background-color: #c7ccd6 !important;
color: #ffffff !important;
cursor: not-allowed;
transform: none;
box-shadow: none;
opacity: 1;
}
.oh-product-info__meta { font-size: 13px; color: #6b7280; }
.oh-product-info__meta-row { margin: 4px 0; }
.oh-product-info__meta-row span { color: #1a1a2e; font-weight: 500; margin-right: 6px; }
.oh-product-info__meta a { color: #1d3766; text-decoration: none; }
.oh-product-info__meta a:hover { text-decoration: underline; }
/* Product tabs */
.oh-product-tabs { padding: 0 clamp(20px, 5%, 60px) 80px; }
.oh-product-tabs__inner { max-width: 1240px; margin: 0 auto; }
.oh-product-tabs__nav {
display: flex;
gap: 4px;
border-bottom: 1px solid #e8ecf0;
margin-bottom: 32px;
overflow-x: auto;
}
.oh-product-tab-btn {
background: transparent;
border: 0;
padding: 14px 20px;
font-size: 14px;
font-weight: 500;
color: #6b7280;
cursor: pointer;
position: relative;
white-space: nowrap;
transition: color 0.2s ease;
}
.oh-product-tab-btn::after {
content: '';
position: absolute;
bottom: -1px; left: 20px; right: 20px;
height: 2px;
background: #1d3766;
transform: scaleX(0);
transition: transform 0.25s ease;
}
.oh-product-tab-btn:hover { color: #1d3766; }
.oh-product-tab-btn.is-active { color: #1d3766; }
.oh-product-tab-btn.is-active::after { transform: scaleX(1); }
.oh-product-tab-panel {
font-size: 15px;
line-height: 1.7;
color: #555;
max-width: 760px;
}
.oh-product-tab-panel[hidden] { display: none; }
.oh-product-tab-panel .oh-accordion__item {
border-bottom: 1px solid #e8ecf0;
padding: 16px 0;
}
.oh-product-tab-panel .oh-accordion__item summary {
font-size: 16px;
font-weight: 500;
color: #1a1a2e;
cursor: pointer;
list-style: none;
position: relative;
padding-right: 24px;
}
.oh-product-tab-panel .oh-accordion__item summary::-webkit-details-marker { display: none; }
.oh-product-tab-panel .oh-accordion__item summary::after {
content: '+';
position: absolute;
right: 0; top: -2px;
font-size: 22px;
font-weight: 300;
color: #1d3766;
}
.oh-product-tab-panel .oh-accordion__item[open] summary::after { content: '×'; }
.oh-product-tab-panel .oh-accordion__item p { margin: 10px 0 0; }
.oh-related-posts { padding: 0 5% 100px; }
.oh-related-posts__inner { max-width: 1240px; margin: 0 auto; }
/* Related products on single-product page */
.oh-related { padding: 24px clamp(20px, 5%, 60px) 100px; background: #fff; }
.oh-related__inner { max-width: 1240px; margin: 0 auto; }
.oh-related__heading { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: #1a1a2e; margin: 0 0 28px; }
.oh-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.oh-related__card { background: #fff; border: 1px solid #e8ecf0; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.oh-related__card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(29, 55, 102, 0.12); border-color: #d6dde6; }
.oh-related__img { display: block; background: transparent; aspect-ratio: 1 / 1; overflow: hidden; }
.oh-related__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.4s ease; }
.oh-related__card:hover .oh-related__img img { transform: scale(1.04); }
.oh-related__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.oh-related__name { font-size: 17px; font-weight: 600; color: #1a1a2e; margin: 0; line-height: 1.3; }
.oh-related__name a { color: inherit; text-decoration: none; }
.oh-related__name a:hover { color: #1d3766; }
.oh-related__price { font-size: 18px; font-weight: 600; color: #1d3766; margin: 2px 0 14px; }
.oh-related__price del { color: #999; font-weight: 400; margin-right: 6px; }
.oh-related__card .oh-btn--atc { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: auto; padding: 12px 18px; background: #1d3766; color: #fff; border-radius: 999px; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; text-decoration: none; border: 0; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; }
.oh-related__card .oh-btn--atc:hover { background: #15294d; transform: translateY(-1px); }
@media (max-width: 1024px) { .oh-related__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 560px) { .oh-related__grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
.oh-product-single__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.oh-product-single__inner > * { min-width: 0; max-width: 100%; }
.oh-product-gallery,
.oh-product-info { min-width: 0; max-width: 100%; }
.oh-product-gallery__main img { max-width: 100%; height: auto; }
.oh-product-gallery__disclaimer { max-width: 100%; word-break: break-word; }
.oh-breadcrumb { padding-top: 90px; }
.oh-product-info__name { font-size: 30px; }
.oh-product-info__price { font-size: 22px; }
}
/* ============================================================
WOOCOMMERCE CART, responsive two-column layout, card style
============================================================ */
/* Defeat Hello Elementor parent's narrow .site-main max-width (500/600/800/1140px). */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-order-received { overflow-x: hidden; }
/* Custom cart template wrapper (page-cart.php), full control, ignores parent caps */
body.woocommerce-cart main.oh-cart-main {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 116px clamp(20px, 5vw, 60px) 60px !important;
box-sizing: border-box;
}
body.woocommerce-cart.admin-bar main.oh-cart-main { padding-top: 148px !important; }
body.woocommerce-cart .oh-cart-wrap {
max-width: 1240px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
body.woocommerce-cart .oh-cart-title {
font-size: clamp(26px, 3vw, 32px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.5px;
margin: 0 0 24px;
color: #1a1a2e;
}
/* Neutralize WooCommerce Cart Block alignwide negative margins (was -80px each side) */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
body.woocommerce-cart .wp-block-woocommerce-cart.alignfull,
body.woocommerce-cart .wc-block-cart,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block,
body.woocommerce-cart .wp-block-woocommerce-filled-cart-block {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box;
}
body.woocommerce-cart .wc-block-components-sidebar-layout {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
box-sizing: border-box;
}
body.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main,
body.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
min-width: 0;
}
/* Cart Block, clean card aesthetic */
body.woocommerce-cart .wc-block-components-sidebar-layout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 380px) !important;
gap: clamp(20px, 3vw, 36px) !important;
align-items: start;
}
body.woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-cart__main,
body.woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-components-main {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: none !important;
}
body.woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-cart__sidebar,
body.woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: none !important;
}
body.woocommerce-cart .wc-block-cart__main {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
body.woocommerce-cart .wc-block-cart-items {
border: none !important;
margin: 0 !important;
}
body.woocommerce-cart .wc-block-cart-items__header {
font-size: 11px !important;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6b7280;
font-weight: 600;
border-bottom: 1px solid #e8ecf0 !important;
padding-bottom: 12px !important;
}
body.woocommerce-cart .wc-block-cart-items__header-image,
body.woocommerce-cart .wc-block-cart-items__header-product { text-align: left; }
body.woocommerce-cart .wc-block-cart-items__row {
border-bottom: 1px solid #f0f3f7 !important;
padding: 20px 0 !important;
gap: 18px !important;
}
body.woocommerce-cart .wc-block-cart-items__row:last-child { border-bottom: none !important; }
body.woocommerce-cart .wc-block-cart-item__image img,
body.woocommerce-cart .wc-block-cart-item__image a {
width: 88px !important;
height: 88px !important;
border-radius: 12px;
object-fit: cover;
background: #f5f7fa;
display: block;
}
body.woocommerce-cart .wc-block-components-product-name {
font-size: 15px !important;
font-weight: 500 !important;
color: #1a1a2e !important;
text-decoration: none !important;
line-height: 1.35;
}
body.woocommerce-cart .wc-block-components-product-name:hover { color: #1d3766 !important; }
body.woocommerce-cart .wc-block-components-product-metadata {
font-size: 13px !important;
color: #6b7280 !important;
line-height: 1.5;
margin-top: 4px;
}
body.woocommerce-cart .wc-block-cart-item__prices,
body.woocommerce-cart .wc-block-components-product-price {
font-size: 15px !important;
font-weight: 600 !important;
color: #1a1a2e !important;
}
body.woocommerce-cart .wc-block-cart-item__remove-link {
font-size: 12px !important;
color: #6b7280 !important;
text-decoration: underline;
margin-top: 8px;
}
body.woocommerce-cart .wc-block-cart-item__remove-link:hover { color: #1d3766 !important; }
body.woocommerce-cart .wc-block-components-quantity-selector {
border: 1px solid #e1e6ed !important;
border-radius: 999px !important;
background: #ffffff;
height: 34px;
min-width: 96px;
}
body.woocommerce-cart .wc-block-components-quantity-selector__input {
font-size: 14px !important;
color: #1a1a2e !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button { color: #6b7280 !important; }
/* RIGHT: Totals card */
body.woocommerce-cart .wc-block-cart__sidebar {
position: sticky;
top: 116px;
background: transparent;
border: none;
border-radius: 0;
padding: 0 !important;
}
body.woocommerce-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block,
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-heading-block {
margin: 0 0 8px;
}
body.woocommerce-cart .wc-block-cart__sidebar h2,
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-title {
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1a1a2e !important;
margin: 0 0 14px !important;
padding-bottom: 14px;
border-bottom: 1px solid #e8ecf0;
}
body.woocommerce-cart .wc-block-components-totals-item {
font-size: 14px !important;
color: #1a1a2e !important;
padding: 10px 0 !important;
border-bottom: 1px solid #f0f3f7;
}
body.woocommerce-cart .wc-block-components-totals-item:last-of-type { border-bottom: none; }
body.woocommerce-cart .wc-block-components-totals-footer-item {
font-size: 16px !important;
font-weight: 600 !important;
border-top: 1px solid #e8ecf0;
padding-top: 14px !important;
margin-top: 6px;
}
body.woocommerce-cart .wc-block-cart__submit-container,
body.woocommerce-cart .wc-block-cart__submit { margin-top: 18px !important; padding: 0 !important; background: transparent !important; }
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart a.wc-block-cart__submit-button {
display: block !important;
width: 100% !important;
background: #1d3766 !important;
color: #ffffff !important;
text-align: center;
padding: 14px 20px !important;
border-radius: 12px !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
text-decoration: none !important;
border: none !important;
height: auto !important;
transition: background 0.2s ease;
}
body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-cart a.wc-block-cart__submit-button:hover { background: #16294e !important; }
/* Tablet, totals slides under products */
@media (max-width: 1100px) {
body.woocommerce-cart .wc-block-components-sidebar-layout {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
body.woocommerce-cart .wc-block-cart__sidebar { position: static; }
}
/* Mobile, tighten */
@media (max-width: 600px) {
body.woocommerce-cart .wc-block-cart__main { padding: 4px 14px; }
body.woocommerce-cart .wc-block-cart-item__image img,
body.woocommerce-cart .wc-block-cart-item__image a { width: 72px !important; height: 72px !important; }
body.woocommerce-cart .wc-block-cart-items__row { padding: 16px 0 !important; gap: 12px !important; }
body.woocommerce-cart .wc-block-cart__sidebar { padding: 20px !important; border-radius: 14px; }
}
body.woocommerce-cart main.site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout main.site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account main.site-main,
body.woocommerce-account .site-main,
body.woocommerce-order-received main.site-main,
body.woocommerce-order-received .site-main {
max-width: 1240px !important;
width: auto !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(16px, 5%, 60px) !important;
padding-right: clamp(16px, 5%, 60px) !important;
box-sizing: border-box;
}
body.woocommerce-cart .page-content,
body.woocommerce-cart .page-header,
body.woocommerce-cart article,
body.woocommerce-cart .entry-content {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
body.woocommerce-cart .entry-header,
body.woocommerce-cart header.page-header,
body.woocommerce-cart header.entry-header { margin: 0 !important; padding: 0 !important; }
body.woocommerce-cart .entry-title,
body.woocommerce-cart .page-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart h1.page-title {
font-size: clamp(26px, 3vw, 32px) !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: -0.5px;
margin: 0 0 24px !important;
padding: 0 !important;
color: #1a1a2e;
}
body.woocommerce-cart article,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .page-content { margin-top: 0 !important; padding-top: 0 !important; }
body.woocommerce-cart article { padding-top: 116px !important; }
body.woocommerce-cart.admin-bar article { padding-top: 148px !important; }
body.woocommerce-cart .woocommerce {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 380px);
gap: clamp(20px, 3vw, 40px);
align-items: start;
margin: 0 !important;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* LEFT: line items as a card */
.woocommerce-cart-form {
margin: 0;
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 16px;
overflow: hidden;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.woocommerce-cart-form * { box-sizing: border-box; }
.woocommerce-cart-form table.shop_table {
width: 100%;
border: none;
border-collapse: collapse;
background: transparent;
margin: 0;
}
.woocommerce-cart-form table.shop_table thead { display: none; }
.woocommerce-cart-form table.shop_table tbody tr.cart_item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto auto;
align-items: center;
gap: 16px;
padding: 20px;
border-bottom: 1px solid #e8ecf0;
}
.woocommerce-cart-form table.shop_table tbody tr.cart_item:last-of-type { border-bottom: none; }
.woocommerce-cart-form table.shop_table tbody td {
display: block;
padding: 0;
border: none;
vertical-align: middle;
background: transparent;
}
.woocommerce-cart-form td.product-thumbnail { grid-column: 1; }
.woocommerce-cart-form td.product-thumbnail img {
width: clamp(72px, 9vw, 96px);
height: clamp(72px, 9vw, 96px);
border-radius: 12px;
object-fit: cover;
background: #f5f7fa;
display: block;
}
.woocommerce-cart-form td.product-name { grid-column: 2; min-width: 0; }
.woocommerce-cart-form td.product-name a {
display: block;
font-size: 15px;
font-weight: 500;
color: #1a1a2e;
text-decoration: none;
line-height: 1.35;
margin: 0 0 4px;
}
.woocommerce-cart-form td.product-name a:hover { color: #1d3766; }
.woocommerce-cart-form td.product-name .variation,
.woocommerce-cart-form td.product-name dl.variation {
margin: 4px 0 0;
font-size: 12.5px;
color: #6b7280;
}
.woocommerce-cart-form td.product-name .variation dt,
.woocommerce-cart-form td.product-name .variation dd {
display: inline; margin: 0; padding: 0; font-weight: 400;
}
.woocommerce-cart-form td.product-name .variation dt::after { content: ' '; }
.woocommerce-cart-form td.product-name .product-cart-price { font-size: 13px; color: #6b7280; font-weight: 400; }
.woocommerce-cart-form td.product-quantity { grid-column: 3; }
.woocommerce-cart-form td.product-quantity .quantity {
display: inline-flex;
align-items: center;
border: 1px solid #e1e6ed;
border-radius: 999px;
overflow: hidden;
background: #ffffff;
}
.woocommerce-cart-form td.product-quantity .quantity input.qty {
width: 48px; height: 34px; border: none; background: transparent;
text-align: center; font-size: 14px; color: #1a1a2e;
appearance: textfield; -moz-appearance: textfield;
}
.woocommerce-cart-form td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart-form td.product-quantity .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce-cart-form td.product-subtotal {
grid-column: 4;
font-size: 15px; font-weight: 600; color: #1a1a2e;
text-align: right; white-space: nowrap; min-width: 70px;
}
.woocommerce-cart-form td.product-price { display: none; }
.woocommerce-cart-form td.product-remove { grid-column: 5; text-align: right; }
.woocommerce-cart-form td.product-remove a.remove {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 999px;
font-size: 0; color: transparent !important;
background: transparent; position: relative; text-decoration: none;
transition: background 0.2s ease;
}
.woocommerce-cart-form td.product-remove a.remove::after {
content: ''; position: absolute; inset: 0;
background: no-repeat center / 16px url("data:image/svg+xml;utf8,");
}
.woocommerce-cart-form td.product-remove a.remove:hover { background: #f5f7fa; }
.woocommerce-cart-form .actions {
padding: 16px 20px;
border-top: 1px solid #e8ecf0;
background: #fafbfc;
}
.woocommerce-cart-form .actions .coupon { display: none; }
.woocommerce-cart-form .actions button[name="update_cart"] {
background: #ffffff !important; color: #1a1a2e !important;
border: 1.5px solid #e1e6ed !important;
padding: 9px 20px !important; border-radius: 999px !important;
font-size: 13px !important; font-weight: 500 !important; cursor: pointer;
}
.woocommerce-cart-form .actions button[name="update_cart"]:hover {
background: #1d3766 !important; color: #ffffff !important; border-color: #1d3766 !important;
}
/* RIGHT: totals card (sticky on desktop) */
.cart-collaterals { width: 100%; position: sticky; top: 116px; }
.cart-collaterals .cart_totals {
width: 100%;
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 16px;
padding: 24px;
margin: 0;
}
.cart-collaterals .cart_totals > h2 {
font-size: 12px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: #1a1a2e;
margin: 0 0 16px; padding-bottom: 14px;
border-bottom: 1px solid #e8ecf0;
}
.cart-collaterals .cart_totals table {
width: 100%; border: none; border-collapse: collapse;
background: transparent; margin: 0 0 18px;
}
.cart-collaterals .cart_totals table th,
.cart-collaterals .cart_totals table td {
padding: 12px 0; border: none;
border-bottom: 1px solid #f0f3f7;
background: transparent;
font-size: 14px; color: #1a1a2e;
vertical-align: middle;
}
.cart-collaterals .cart_totals table th { font-weight: 500; text-align: left; }
.cart-collaterals .cart_totals table td { text-align: right; }
.cart-collaterals .cart_totals table tr:last-child th,
.cart-collaterals .cart_totals table tr:last-child td { border-bottom: none; }
.cart-collaterals .cart_totals table tr.order-total th,
.cart-collaterals .cart_totals table tr.order-total td {
font-size: 17px; font-weight: 600;
padding-top: 16px;
border-top: 1px solid #e8ecf0;
}
.cart-collaterals .cart_totals .shipping-calculator-button {
font-size: 13px; color: #1d3766; text-decoration: underline;
}
.cart-collaterals .wc-proceed-to-checkout { padding: 0; margin: 0; }
.cart-collaterals .wc-proceed-to-checkout a.checkout-button {
display: block; width: 100%;
background: #1d3766 !important; color: #ffffff !important;
text-align: center;
padding: 14px 20px !important; border-radius: 12px !important;
font-size: 15px !important; font-weight: 600 !important;
letter-spacing: 0.02em; text-decoration: none;
border: none !important;
transition: background 0.2s ease;
}
.cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover { background: #16294e !important; }
.woocommerce-cart .return-to-shop { margin-top: 20px; }
.woocommerce-cart .return-to-shop .button {
background: #1d3766 !important; color: #ffffff !important;
padding: 12px 24px !important; border-radius: 999px !important;
text-decoration: none; font-weight: 500;
}
.woocommerce-cart .cart-empty { font-size: 18px; color: #1a1a2e; margin: 0 0 12px; }
/* Tablet, totals card slides under products */
@media (max-width: 1100px) {
body.woocommerce-cart .woocommerce {
grid-template-columns: 1fr;
gap: 24px;
}
.cart-collaterals { position: static; max-width: 100%; margin: 0; }
}
/* Mobile, compact stacked rows */
@media (max-width: 600px) {
body.woocommerce-cart article { padding-top: 100px !important; }
body.woocommerce-cart.admin-bar article { padding-top: 132px !important; }
body.woocommerce-cart .entry-title,
body.woocommerce-cart h1.entry-title { margin-bottom: 18px !important; }
.woocommerce-cart-form table.shop_table tbody tr.cart_item {
grid-template-columns: 72px minmax(0, 1fr) auto;
grid-template-areas:
"img name remove"
"img qty subtotal";
gap: 8px 14px;
padding: 16px;
align-items: center;
}
.woocommerce-cart-form td.product-thumbnail { grid-area: img; align-self: center; }
.woocommerce-cart-form td.product-thumbnail img { width: 72px; height: 72px; }
.woocommerce-cart-form td.product-name { grid-area: name; }
.woocommerce-cart-form td.product-quantity { grid-area: qty; }
.woocommerce-cart-form td.product-subtotal { grid-area: subtotal; font-size: 14px; }
.woocommerce-cart-form td.product-remove { grid-area: remove; }
.woocommerce-cart-form td.product-quantity .quantity input.qty { width: 42px; height: 30px; font-size: 13px; }
.cart-collaterals .cart_totals { padding: 20px; border-radius: 14px; }
.cart-collaterals .wc-proceed-to-checkout a.checkout-button { padding: 13px 18px !important; font-size: 14px !important; }
}
/* ============================================================
Strip pink/red default accents inherited from Hello Elementor /
Elementor / WordPress / WooCommerce defaults on interactive
elements. Only navy and neutrals are allowed in the system.
============================================================ */
.oh-hamburger,
.oh-hamburger:hover,
.oh-hamburger:focus,
.oh-hamburger:focus-visible,
.oh-hamburger:active {
background: transparent !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
}
body.home .oh-hamburger,
body.home .oh-hamburger:hover,
body.home .oh-hamburger:focus,
body.home .oh-hamburger:focus-visible,
body.home .oh-hamburger:active { color: #ffffff !important; }
body:not(.home) .oh-hamburger,
body:not(.home) .oh-hamburger:hover,
body:not(.home) .oh-hamburger:focus,
body:not(.home) .oh-hamburger:focus-visible,
body:not(.home) .oh-hamburger:active { color: #1a1a2e !important; }
.oh-hamburger:focus-visible { box-shadow: 0 0 0 2px rgba(29,55,102,0.35) !important; border-radius: 8px !important; }
/* Wipe any inherited Elementor/WordPress pink/red accent defaults */
:root {
--e-global-color-accent: #1d3766 !important;
--e-global-color-primary: #1d3766 !important;
--wp--preset--color--vivid-red: #1d3766 !important;
--wp--preset--color--luminous-vivid-orange: #1d3766 !important;
--wp--preset--color--vivid-cyan-blue: #1d3766 !important;
--wp-admin-theme-color: #1d3766 !important;
}
/* Kill the iOS/Android tap-highlight rectangle (renders as pink/red on most devices). */
html, body, a, button, input, select, textarea, label, [role="button"] {
-webkit-tap-highlight-color: transparent !important;
}
/* Extra defense for the quiz popup: nothing inside it can flash pink/red on tap. */
.oh-quiz, .oh-quiz *, .oh-quiz *:hover, .oh-quiz *:focus, .oh-quiz *:active {
-webkit-tap-highlight-color: transparent !important;
}
.oh-quiz button:focus, .oh-quiz a:focus { outline: none !important; }
/* Shop archive, active-goal banner. */
.oh-shop-goal-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
background: #f5f7fa;
border: 1px solid #e8ecf0;
border-radius: 14px;
margin: 0 0 20px;
font-family: 'Inter', sans-serif;
font-size: 14.5px;
color: #1a1a2e;
}
.oh-shop-goal-banner__label strong { font-weight: 600; color: #1d3766; }
.oh-shop-goal-banner__clear {
font-size: 13px;
color: #1d3766;
text-decoration: none;
font-weight: 500;
white-space: nowrap;
}
.oh-shop-goal-banner__clear:hover { text-decoration: underline; }
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
a:focus,
a:focus-visible {
outline-color: #1d3766 !important;
}
/* ============================================================
Toast, brief AJAX add-to-cart confirmation
============================================================ */
.oh-toast {
position: fixed;
bottom: 28px;
right: 28px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: #1a1a2e;
color: #ffffff;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
box-shadow: 0 10px 30px rgba(15, 25, 45, 0.18), 0 2px 6px rgba(15, 25, 45, 0.10);
opacity: 0;
transform: translateY(12px);
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.2,1);
z-index: 9999;
pointer-events: none;
}
.oh-toast.is-visible { opacity: 1; transform: translateY(0); }
.oh-toast svg {
flex-shrink: 0;
color: #6ee7a7;
}
.oh-toast.is-error svg { color: #f87171; }
.oh-ajax-atc.is-loading { opacity: 0.75; pointer-events: none; }
@media (max-width: 540px) {
.oh-toast { bottom: 18px; right: 18px; left: 18px; justify-content: center; }
}
/* ============================================================
Price-split block, single-variation alternative to the picker
============================================================ */
.oh-price-split {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: 12px;
margin: 4px 0 16px;
}
.oh-price-split__col {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 4px;
padding: 14px 16px;
border: 1.5px solid #e1e6ed;
border-radius: 14px;
background: #ffffff;
}
.oh-price-split__col:last-of-type,
.oh-price-split__col.is-active {
border-color: #1d3766;
background: #f7f9fc;
box-shadow: 0 0 0 3px rgba(29, 55, 102, 0.08);
}
.oh-price-split__col.is-disabled {
background: #ffffff;
border-color: #e1e6ed;
cursor: default;
box-shadow: none;
}
.oh-price-split__price {
font-size: 26px;
font-weight: 500;
line-height: 1.1;
color: #1a1a2e;
letter-spacing: -0.5px;
}
.oh-price-split__sub {
font-size: 12px;
color: #6b7280;
font-weight: 400;
}
.oh-price-split__rule { display: none; }
@media (max-width: 540px) {
.oh-price-split { gap: 10px; }
.oh-price-split__col { padding: 12px 14px; }
}
/* Flat variant, no card frames, just two prices with a vertical divider (Celia-style) */
.oh-price-split--flat {
display: grid;
grid-template-columns: auto auto auto;
justify-content: start;
align-items: center;
gap: 28px;
margin: 8px 0 22px;
}
.oh-price-split--flat .oh-price-split__col,
.oh-price-split--flat .oh-price-split__col.is-active,
.oh-price-split--flat .oh-price-split__col.is-disabled {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
gap: 4px;
}
.oh-price-split--flat .oh-price-split__price {
font-size: 30px;
font-weight: 500;
color: #1a1a2e;
letter-spacing: -0.6px;
line-height: 1.05;
}
.oh-price-split--flat .oh-price-split__sub {
font-size: 13px;
color: #6b7280;
font-weight: 400;
}
.oh-price-split--flat .oh-price-split__rule {
display: block;
width: 1px;
height: 46px;
background: #d8dde5;
}
@media (max-width: 540px) {
.oh-price-split--flat { gap: 18px; }
.oh-price-split--flat .oh-price-split__price { font-size: 26px; }
.oh-price-split--flat .oh-price-split__rule { height: 38px; }
}
/* ============================================================
Plan picker (NAD+ nasal: One-Time vs Subscribe & Save)
============================================================ */
.oh-plan-picker {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 8px 0 22px;
}
.oh-plan-btn {
appearance: none;
background: #ffffff;
border: 1.5px solid #e8ecf0;
border-radius: 16px;
padding: 22px 22px 20px;
text-align: left;
text-decoration: none;
cursor: pointer;
font: inherit;
color: #1a1a2e;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
display: flex;
flex-direction: column;
gap: 14px;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
.oh-plan-btn:hover {
border-color: #1d3766;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(20, 30, 50, 0.08);
}
.oh-plan-btn:hover .oh-plan-cta {
color: #1d3766;
}
}
.oh-plan-btn.is-selected {
border-color: #1d3766;
box-shadow: 0 0 0 1px #1d3766 inset;
}
.oh-plan-btn--dual.is-disabled {
cursor: not-allowed;
background: #ffffff !important;
border-color: #e8ecf0 !important;
box-shadow: none !important;
}
.oh-plan-btn--dual.is-disabled:hover,
.oh-plan-btn--dual.is-disabled:focus,
.oh-plan-btn--dual.is-disabled:active {
background: #ffffff !important;
border-color: #e8ecf0 !important;
box-shadow: none !important;
transform: none !important;
}
.oh-plan-btn--dual.is-disabled .oh-plan-note { font-style: italic; }
/* Static single-supply card (nasal sprays, single-tier vials). Selection-only, the
actual Add-to-Cart button is rendered separately below the picker. */
.oh-plan-btn--static {
cursor: default;
}
.oh-plan-btn--static:hover,
.oh-plan-btn--static:focus,
.oh-plan-btn--static:active {
transform: none !important;
box-shadow: 0 0 0 1px #1d3766 inset !important;
}
/* Responsive plan picker (NAD+/Glutathione).
Uses auto-fit/minmax so cards reflow based on the container's width,
not the viewport. 3 → 2 → 1 columns automatically. */
.oh-product-info__atc--consult .oh-plan-picker {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin: 4px 0 0;
width: 100%;
}
.oh-product-info__atc--consult .oh-plan-picker .oh-plan-btn {
width: 100%;
min-width: 0;
text-align: left;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 14px 14px;
box-sizing: border-box;
overflow: hidden;
}
.oh-product-info__atc--consult .oh-plan-picker .oh-plan-eyebrow {
display: block;
font-size: clamp(10px, 0.95vw, 11.5px);
letter-spacing: 0.12em;
line-height: 1.25;
white-space: normal;
overflow-wrap: normal;
word-break: keep-all;
hyphens: none;
margin-bottom: 2px;
max-width: 100%;
}
.oh-product-info__atc--consult .oh-plan-picker .oh-plan-headline {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 4px;
line-height: 1;
max-width: 100%;
}
.oh-product-info__atc--consult .oh-plan-picker .oh-plan-headline__price {
font-size: clamp(24px, 3vw, 36px);
letter-spacing: -0.02em;
white-space: nowrap;
}
.oh-product-info__atc--consult .oh-plan-picker .oh-plan-headline__period {
font-size: 13px;
color: #555;
white-space: nowrap;
}
.oh-product-info__atc--consult .oh-plan-picker .oh-plan-notes {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 14px;
max-width: 100%;
}
.oh-product-info__atc--consult .oh-plan-picker .oh-plan-note {
font-size: 13px;
line-height: 1.4;
color: #666;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
max-width: 100%;
}
/* Separate Add-to-Cart button rendered below the plan-picker cards (NAD+/Glutathione). */
.oh-plan-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 16px;
padding: 14px 22px;
background: #1d3766;
color: #ffffff;
border: 0;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 15px;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease;
}
.oh-plan-cta-btn:hover { background: #15294d; transform: translateY(-1px); }
.oh-plan-cta-btn:focus-visible { outline: 2px solid #1d3766; outline-offset: 3px; }
/* Lock interactive states against inherited Hello Elementor / WooCommerce pink defaults. */
.oh-plan-btn,
.oh-plan-btn:hover,
.oh-plan-btn:focus,
.oh-plan-btn:focus-visible,
.oh-plan-btn:active,
.oh-plan-btn.is-selected {
background: #ffffff !important;
color: #1a1a2e !important;
outline: none !important;
}
.oh-plan-btn:focus-visible {
box-shadow: 0 0 0 2px rgba(29, 55, 102, 0.35) !important;
}
.oh-plan-btn.is-selected,
.oh-plan-btn.is-selected:focus-visible {
box-shadow: 0 0 0 1px #1d3766 inset !important;
}
.oh-plan-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 22px;
}
.oh-plan-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #1d3766;
}
.oh-plan-badge {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #ffffff;
background: #1d3766;
border-radius: 999px;
padding: 4px 10px;
}
.oh-plan-headline {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.05;
}
.oh-plan-headline__prefix {
font-size: 14px;
font-weight: 500;
color: #555;
letter-spacing: 0;
margin-right: 2px;
}
.oh-plan-headline__price {
font-size: 36px;
font-weight: 600;
color: #1a1a2e;
letter-spacing: -0.03em;
}
.oh-plan-headline__period {
font-size: 16px;
font-weight: 500;
color: #555;
}
.oh-plan-notes {
display: flex;
flex-direction: column;
gap: 4px;
}
.oh-plan-note {
font-size: 15px;
line-height: 1.45;
color: #6b7280;
}
.oh-plan-cta {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid #eef0f4;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: #1a1a2e;
transition: color 0.2s ease;
}
@media (max-width: 760px) {
.oh-plan-picker { grid-template-columns: 1fr; gap: 14px; }
.oh-plan-btn { padding: 20px 18px 18px; }
.oh-plan-headline__price { font-size: 32px; }
}
/* Single-card variant for stack products (One-Time only). */
.oh-plan-picker--single {
grid-template-columns: minmax(0, 360px);
}
.oh-plan-picker--single .oh-plan-headline__price {
font-size: 40px;
}
@media (max-width: 760px) {
.oh-plan-picker--single { grid-template-columns: 1fr; }
}
/* Dual-card variant: 2 supply tiers + separate Add to Cart button below. */
.oh-plan-picker--dual {
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 8px 0 18px;
}
.oh-plan-btn--dual {
width: 100%;
}
.oh-plan-btn--dual .oh-plan-headline__price {
font-size: 34px;
}
.oh-pep-atc {
display: block;
width: 100%;
background: #1d3766;
color: #ffffff;
font-weight: 600;
font-size: 15px;
letter-spacing: 0.02em;
text-align: center;
text-decoration: none;
padding: 16px 28px;
border: none;
border-radius: 999px;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
margin: 0 0 22px;
}
.oh-pep-atc:hover,
.oh-pep-atc:focus-visible {
background: #16294e;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(20, 30, 50, 0.18);
color: #ffffff;
}
@media (max-width: 760px) {
.oh-plan-picker--dual { grid-template-columns: 1fr 1fr; gap: 12px; }
.oh-plan-btn--dual .oh-plan-headline__price { font-size: 28px; }
.oh-pep-atc { padding: 15px 24px; font-size: 14.5px; }
}
/* ============================================================
Product accordions, MOA + More Information (BPC-157, Celia-style)
============================================================ */
.oh-product-acc {
background: #ffffff;
padding: 12px clamp(20px, 5%, 60px) 80px;
}
.oh-product-acc__inner {
max-width: 1180px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.oh-prod-acc {
border-top: 1px solid #e8ecf0;
padding: 4px 0;
}
.oh-prod-acc:last-of-type { border-bottom: 1px solid #e8ecf0; }
.oh-prod-acc summary {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
cursor: pointer;
padding: 22px 4px;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 500;
color: #1a1a2e;
letter-spacing: -0.01em;
-webkit-tap-highlight-color: transparent;
}
.oh-prod-acc summary::-webkit-details-marker { display: none; }
.oh-prod-acc__label { flex: 1 1 auto; }
.oh-prod-acc__icon {
flex: 0 0 auto;
width: 14px;
height: 14px;
position: relative;
transition: transform 0.3s ease;
}
.oh-prod-acc__icon::before,
.oh-prod-acc__icon::after {
content: '';
position: absolute;
background: #1d3766;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.oh-prod-acc__icon::before {
top: 50%; left: 0;
width: 14px; height: 1.5px;
transform: translateY(-50%);
}
.oh-prod-acc__icon::after {
top: 0; left: 50%;
width: 1.5px; height: 14px;
transform: translateX(-50%);
}
.oh-prod-acc[open] .oh-prod-acc__icon::after { opacity: 0; }
.oh-prod-acc[open] summary { color: #1d3766; }
@media (hover: hover) {
.oh-prod-acc summary:hover { color: #1d3766; }
}
.oh-prod-acc__body {
padding: 0 4px 24px;
font-size: 15.5px;
line-height: 1.65;
color: #555;
}
.oh-prod-acc__body ul {
list-style: disc;
margin: 4px 0 0;
padding-left: 22px;
}
.oh-prod-acc__body li { margin-bottom: 8px; }
.oh-prod-acc__body li:last-child { margin-bottom: 0; }
.oh-prod-acc__body strong { color: #1a1a2e; font-weight: 600; }
@media (max-width: 760px) {
.oh-product-acc { padding: 8px clamp(20px, 5%, 60px) 64px; }
.oh-prod-acc summary { font-size: 16.5px; padding: 18px 4px; }
.oh-prod-acc__body { font-size: 15px; }
}
/* Product-page disclaimer band, small gray text, structured legal block */
.oh-product-disclaimer {
max-width: 1180px;
margin: 0 auto;
padding: 32px 4% 48px;
text-align: center;
text-align: left;
border-top: 1px solid #eef1f6;
margin-top: 16px;
}
.oh-product-disclaimer p {
font-family: 'Inter', sans-serif;
font-size: 12.5px;
line-height: 1.7;
text-align: center;
color: #6b7280;
letter-spacing: 0;
max-width: 1080px;
margin: 0 auto 14px;
}
.oh-product-disclaimer p:last-child { margin-bottom: 0; }
.oh-product-disclaimer p strong {
color: #1a1a2e;
font-weight: 600;
letter-spacing: 0.01em;
}
@media (max-width: 760px) {
.oh-product-disclaimer { padding: 24px 5% 36px; }
.oh-product-disclaimer p { font-size: 12px; line-height: 1.65; margin-bottom: 12px; }
}
/* Hide WC's auto-appended "View cart" link and any "added" checkmark on the button. */
a.added_to_cart,
a.added_to_cart.wc-forward { display: none !important; }
.add_to_cart_button.added,
.single_add_to_cart_button.added,
.oh-ajax-atc.added,
.oh-ajax-atc.is-added { background-color: var(--oh-navy, #1d3766) !important; }
.add_to_cart_button.added::after,
.single_add_to_cart_button.added::after,
.oh-ajax-atc.added::after,
.oh-ajax-atc.is-added::after { content: none !important; display: none !important; }
/* ===========================================================
PROGRAM PAGE, YOUR PERSONALIZED STACK
=========================================================== */
.oh-program-stack {
background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
padding: 96px 24px;
}
.oh-program-stack__inner {
max-width: 1180px;
margin: 0 auto;
}
.oh-program-stack__head {
max-width: 760px;
margin: 0 auto 56px;
text-align: center;
}
.oh-program-stack__head h2 {
font-size: clamp(28px, 3.6vw, 40px);
font-weight: 600;
letter-spacing: -0.02em;
color: #1a1a2e;
margin: 12px 0 18px;
line-height: 1.15;
}
.oh-program-stack__head p {
font-size: 16px;
line-height: 1.65;
color: #555;
margin: 0;
}
.oh-program-stack__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.oh-stack-card {
background: #fff;
border: 1px solid #e8ecf0;
border-radius: 18px;
padding: 32px 28px 30px;
position: relative;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.oh-stack-card:hover {
transform: translateY(-3px);
border-color: #1d3766;
box-shadow: 0 14px 40px rgba(29, 55, 102, 0.08);
}
a.oh-stack-card,
.oh-stack-card--link {
color: inherit;
text-decoration: none;
display: block;
}
.oh-stack-card__cta {
display: inline-block;
margin-top: 14px;
font-size: 13px;
font-weight: 600;
color: #1d3766;
letter-spacing: 0.01em;
}
.oh-stack-card--link:hover .oh-stack-card__cta { text-decoration: underline; }
.oh-stack-card__num {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
color: #1d3766;
opacity: 0.6;
margin-bottom: 14px;
}
.oh-stack-card__name {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
color: #1a1a2e;
margin: 0 0 6px;
line-height: 1.25;
}
.oh-stack-card__role {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #1d3766;
margin: 0 0 14px;
}
.oh-stack-card__why {
font-size: 15px;
line-height: 1.6;
color: #555;
margin: 0;
}
.oh-program-stack__cta {
margin-top: 56px;
text-align: center;
}
.oh-program-stack__cta p {
font-size: 16px;
color: #555;
margin: 0 0 18px;
}
.oh-program-stack__cta p em {
font-style: italic;
color: #1a1a2e;
}
@media (max-width: 900px) {
.oh-program-stack { padding: 64px 20px; }
.oh-program-stack__grid { grid-template-columns: 1fr; gap: 16px; }
.oh-program-stack__head { margin-bottom: 40px; }
.oh-program-stack__cta a.oh-link-arrow { display: block; margin: 18px 0 0 !important; }
}
/* ============================================================
Calendly popup, nudge the close X below the site header
============================================================ */
.calendly-overlay .calendly-popup-close {
top: 72px !important;
right: 32px !important;
background-size: 24px 24px !important;
width: 36px !important;
height: 36px !important;
}
/* ============================================================
Programs Index Page (page-programs.php)
============================================================ */
.oh-programs-page .oh-page-hero {
background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
padding: 120px 24px 72px;
text-align: center;
}
.oh-programs-page .oh-page-hero__inner { max-width: 820px; margin: 0 auto; }
.oh-programs-page .oh-eyebrow {
display: inline-block;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1d3766;
font-weight: 600;
margin-bottom: 18px;
}
.oh-programs-page .oh-page-hero__title {
font-size: clamp(34px, 4.4vw, 52px);
line-height: 1.08;
color: #1a1a2e;
margin: 0 0 18px;
letter-spacing: -0.02em;
}
.oh-programs-page .oh-page-hero__subtitle {
font-size: 18px;
line-height: 1.65;
color: #555;
margin: 0;
}
.oh-programs-panels { padding: 56px 0 88px; background: #fff; }
#programs-top { scroll-margin-top: -80px; }
html { scroll-padding-top: 0; }
.oh-programs-panels .oh-container { max-width: none; width: 100%; margin: 0; padding: 0 3.5%; }
.oh-programs-panels__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.oh-programs-panels__grid--split {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
aspect-ratio: 16 / 9;
}
.oh-programs-panels__grid--split .oh-panel { aspect-ratio: auto; }
.oh-programs-panels__grid--split .oh-panel--hero {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.oh-programs-panels__grid--split .oh-panel--hero .oh-panel__body {
padding: 38px 36px 36px;
}
.oh-programs-panels__grid--split .oh-panel--hero .oh-panel__title {
font-size: clamp(28px, 2.6vw, 38px);
line-height: 1.1;
margin-bottom: 10px;
}
.oh-programs-panels__grid--split .oh-panel--hero .oh-panel__tagline {
font-size: 16px;
max-width: 520px;
margin-bottom: 18px;
}
.oh-programs-panels__grid--split .oh-panel--hero .oh-panel__cta {
font-size: 13.5px;
}
.oh-panel {
position: relative;
display: block;
text-decoration: none;
border-radius: 18px;
overflow: hidden;
background: #0f1a30;
aspect-ratio: 3 / 4;
transition: transform 0.4s ease, box-shadow 0.4s ease;
box-shadow: 0 6px 24px rgba(20, 30, 50, 0.08);
}
.oh-panel:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(20, 30, 50, 0.18); }
.oh-panel__media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.6s ease;
}
.oh-panel:hover .oh-panel__media { transform: scale(1.06); }
.oh-panel__body {
position: absolute;
inset: auto 0 0 0;
padding: 26px 24px 28px;
color: #fff;
z-index: 2;
}
.oh-panel__title {
font-size: 22px;
line-height: 1.2;
margin: 0 0 6px;
font-weight: 600;
letter-spacing: -0.01em;
}
.oh-panel__tagline {
font-size: 14px;
line-height: 1.5;
margin: 0 0 14px;
color: rgba(255, 255, 255, 0.85);
}
.oh-panel__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
padding-bottom: 4px;
transition: border-color 0.3s ease, gap 0.3s ease;
}
.oh-panel:hover .oh-panel__cta { border-color: #fff; gap: 10px; }
.oh-programs-how {
background: #f5f7fa;
padding: 96px 0;
max-width: none;
margin: 64px 3.5%;
border-radius: 24px;
}
.oh-programs-how .oh-container { max-width: none; width: 100%; margin: 0; padding: 0 3.5%; }
.oh-programs-how__intro { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.oh-programs-how__intro h2 {
font-size: clamp(28px, 3.4vw, 40px);
color: #1a1a2e;
margin: 0 0 14px;
letter-spacing: -0.02em;
}
.oh-programs-how__intro p { color: #555; font-size: 17px; margin: 0; }
.oh-steps {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 0;
margin: 0 0 48px;
}
.oh-steps li {
background: #fff;
border: 1px solid #e8ecf0;
border-radius: 18px;
padding: 44px 32px 36px;
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-steps li:hover {
border-color: #1d3766;
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(20, 30, 50, 0.08);
}
.oh-steps__icon {
width: 140px;
height: 140px;
border-radius: 50%;
background: #f5f7fa;
border: 1px solid #e8ecf0;
overflow: hidden;
margin: 0 auto 28px;
color: #1d3766;
}
.oh-steps__icon img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.oh-steps__eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1d3766;
margin-bottom: 12px;
}
.oh-steps li h4 {
font-size: 22px;
color: #1a1a2e;
margin: 0 0 12px;
font-weight: 600;
letter-spacing: -0.01em;
}
.oh-steps li p {
font-size: 15px;
line-height: 1.6;
color: #555;
margin: 0;
max-width: 30ch;
}
.oh-programs-how__cta { display: flex; justify-content: center; }
.oh-programs-stacks { background: #fff; padding: 96px 0; }
.oh-programs-stacks .oh-container { max-width: none; width: 100%; margin: 0; padding: 0 3.5%; }
.oh-programs-stacks__intro { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.oh-programs-stacks__intro h2 {
font-size: clamp(28px, 3.4vw, 40px);
color: #1a1a2e;
margin: 0 0 14px;
letter-spacing: -0.02em;
}
.oh-programs-stacks__intro p { color: #555; font-size: 17px; margin: 0; }
.oh-stack-block { border-top: 1px solid #e8ecf0; padding: 56px 0; }
.oh-stack-block:first-of-type { border-top: none; padding-top: 0; }
.oh-stack-block__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
margin-bottom: 32px;
}
.oh-stack-block__head > div { max-width: 720px; }
.oh-stack-block__head h3 {
font-size: clamp(24px, 2.8vw, 32px);
color: #1a1a2e;
margin: 0 0 12px;
letter-spacing: -0.015em;
line-height: 1.2;
}
.oh-stack-block__head p { font-size: 16px; line-height: 1.65; color: #555; margin: 0; }
.oh-stack-block__head .oh-link-arrow {
flex-shrink: 0;
color: #1d3766;
font-weight: 600;
text-decoration: none;
font-size: 14.5px;
white-space: nowrap;
}
.oh-stack-block__head .oh-link-arrow:hover { text-decoration: underline; }
.oh-stack-block__body {
display: block;
}
.oh-stack-block__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
/* Longevity stack block, image + product card on the left, peptide cards on the right */
.oh-stack-block--with-product .oh-stack-block__body {
display: grid;
grid-template-columns: 320px 1fr;
gap: 28px;
align-items: stretch;
}
.oh-stack-block--with-product .oh-stack-block__cards {
grid-template-columns: 1fr;
gap: 14px;
}
.oh-stack-block__product {
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
border: 1px solid #e8ecf0;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-stack-block__product:hover {
border-color: #1d3766;
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(20, 30, 50, 0.08);
}
.oh-stack-block__product-media {
background: #fff;
aspect-ratio: 1 / 1;
overflow: hidden;
border-bottom: 1px solid #e8ecf0;
}
.oh-stack-block__product-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.oh-stack-block__product:hover .oh-stack-block__product-media img {
transform: scale(1.04);
}
.oh-stack-block__product-body {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
.oh-stack-block__product-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1d3766;
}
.oh-stack-block__product-name {
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.01em;
}
.oh-stack-block__product-cta {
margin-top: 6px;
font-size: 13px;
font-weight: 600;
color: #1d3766;
}
@media (max-width: 880px) {
.oh-stack-block--with-product .oh-stack-block__body {
grid-template-columns: 1fr;
gap: 22px;
}
.oh-stack-block__product-media { aspect-ratio: 16 / 10; }
}
.oh-stack-card {
background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
border: 1px solid #e8ecf0;
border-radius: 14px;
padding: 28px 24px;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-stack-card:hover {
border-color: #1d3766;
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(20, 30, 50, 0.08);
}
.oh-stack-card__num {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
color: #1d3766;
margin-bottom: 12px;
}
.oh-stack-card h4 { font-size: 18px; color: #1a1a2e; margin: 0 0 8px; font-weight: 600; }
.oh-stack-card p { font-size: 14.5px; line-height: 1.6; color: #555; margin: 0; }
.oh-programs-cta {
background: #1d3766;
padding: 88px 3.5%;
color: #fff;
max-width: none;
margin: 64px 3.5% 96px;
border-radius: 24px;
}
.oh-programs-cta .oh-container { max-width: 820px; margin: 0 auto; }
.oh-programs-cta__inner { text-align: center; }
.oh-programs-cta h2 {
font-size: clamp(28px, 3.4vw, 40px);
color: #fff;
margin: 0 0 16px;
letter-spacing: -0.02em;
}
.oh-programs-cta p {
font-size: 17px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.8);
margin: 0 0 28px;
}
.oh-programs-cta .oh-btn-white {
background: #fff;
color: #1d3766;
padding: 16px 36px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-programs-cta .oh-btn-white:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
@media (max-width: 1024px) {
.oh-programs-panels__grid { grid-template-columns: repeat(2, 1fr); }
.oh-programs-panels__grid--split {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
aspect-ratio: auto;
}
.oh-programs-panels__grid--split .oh-panel--hero {
grid-column: 1 / -1;
grid-row: auto;
aspect-ratio: 16 / 9;
}
.oh-programs-panels__grid--split .oh-panel--mini { aspect-ratio: 4 / 5; }
.oh-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.oh-programs-page .oh-page-hero { padding: 88px 20px 56px; }
.oh-programs-panels { padding: 40px 0 64px; }
.oh-programs-panels__grid { grid-template-columns: 1fr; gap: 18px; }
.oh-programs-panels__grid--split {
grid-template-columns: 1fr;
gap: 18px;
}
.oh-programs-panels__grid--split .oh-panel--hero,
.oh-programs-panels__grid--split .oh-panel--mini { aspect-ratio: 4 / 3; }
.oh-programs-panels__grid--split .oh-panel--hero .oh-panel__body { padding: 26px 24px 28px; }
.oh-programs-panels__grid--split .oh-panel--hero .oh-panel__title { font-size: 24px; }
.oh-programs-panels__grid--split .oh-panel--hero .oh-panel__tagline { font-size: 14px; }
.oh-panel { aspect-ratio: 4 / 3; }
.oh-programs-how, .oh-programs-stacks { padding: 64px 0; }
.oh-programs-how { margin: 32px 16px; border-radius: 18px; }
.oh-steps { grid-template-columns: 1fr; }
.oh-stack-block__head { flex-direction: column; align-items: flex-start; gap: 14px; }
.oh-stack-block__cards { grid-template-columns: 1fr; }
.oh-programs-cta { padding: 64px 20px; margin: 32px 16px 64px; border-radius: 18px; }
}
/* ========== WEIGHT LOSS PROGRAM PAGE ========== */
.oh-wl-hero {
background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
padding: 144px 0 80px;
margin-top: 24px;
}
.oh-wl-hero__inner {
max-width: none;
width: 100%;
margin: 0;
padding: 0 3.5%;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 80px;
align-items: center;
}
.oh-wl-hero__copy h1 {
font-size: 56px;
line-height: 1.05;
letter-spacing: -0.02em;
color: #1a1a2e;
margin: 18px 0 20px;
font-weight: 600;
}
.oh-wl-hero__copy > p {
font-size: 18px;
line-height: 1.6;
color: #555;
max-width: 560px;
margin: 0 0 32px;
}
.oh-wl-hero__ctas {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.oh-wl-trust {
list-style: none;
margin: 0;
padding: 24px 0 0;
border-top: 1px solid #e8ecf0;
display: flex;
flex-wrap: wrap;
gap: 28px;
}
.oh-wl-trust li {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #1d3766;
position: relative;
padding-left: 18px;
}
.oh-wl-trust li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #1d3766;
}
.oh-wl-hero__media {
aspect-ratio: 4 / 5;
border-radius: 24px;
overflow: hidden;
background: #1d3766;
background-size: cover;
background-position: center;
position: relative;
}
/* ============================================================
Named photo placeholder slots — user fills these with real
lifestyle photos. The label tells them what to upload.
============================================================ */
.oh-photo-slot {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 4px;
padding: 22px 22px 20px;
border-radius: 22px;
overflow: hidden;
background:
linear-gradient(135deg, #f4f1ed 0%, #ece6df 50%, #e3dccf 100%);
color: #5a4a36;
border: 1px dashed rgba(120, 100, 70, 0.25);
min-height: 220px;
text-align: left;
isolation: isolate;
}
.oh-photo-slot::before {
content: 'PHOTO';
position: absolute;
top: 14px;
left: 22px;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.24em;
color: rgba(90, 74, 54, 0.55);
}
.oh-photo-slot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 56px;
height: 56px;
margin: -36px 0 0 -28px;
border-radius: 50%;
border: 1.5px solid rgba(120, 100, 70, 0.32);
background:
linear-gradient(rgba(120, 100, 70, 0.42), rgba(120, 100, 70, 0.42)) center/22px 1.5px no-repeat,
linear-gradient(rgba(120, 100, 70, 0.42), rgba(120, 100, 70, 0.42)) center/1.5px 22px no-repeat;
z-index: 0;
opacity: 0.7;
}
.oh-photo-slot__label {
font-family: 'Inter', sans-serif;
font-size: clamp(15px, 1.3vw, 17px);
font-weight: 600;
letter-spacing: -0.005em;
color: #1a1a2e;
line-height: 1.3;
z-index: 1;
}
.oh-photo-slot__hint {
font-size: 12px;
letter-spacing: 0.04em;
text-transform: lowercase;
color: rgba(90, 74, 54, 0.7);
z-index: 1;
}
.oh-photo-slot--tall { aspect-ratio: 4 / 5; min-height: 360px; }
.oh-photo-slot--short { aspect-ratio: 4 / 3; min-height: 220px; }
.oh-photo-slot--landscape { aspect-ratio: 5 / 4; min-height: 220px; }
.oh-photo-slot--portrait { aspect-ratio: 3 / 4; min-height: 320px; }
/* Filled state — real photo, hide all placeholder UI, soft bottom-gradient
for caption legibility. */
.oh-photo-slot--filled {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 0;
color: #ffffff;
}
.oh-photo-slot--filled::before,
.oh-photo-slot--filled::after { display: none; }
.oh-photo-slot--filled .oh-photo-slot__label,
.oh-photo-slot--filled .oh-photo-slot__hint { display: none; }
/* Hero collage — asymmetric 2-photo side-by-side, magazine offset */
.oh-wl-hero__collage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
width: 100%;
align-items: start;
}
.oh-wl-hero__collage > .oh-photo-slot--tall {
aspect-ratio: 3 / 4;
min-height: 0;
}
.oh-wl-hero__collage > .oh-photo-slot--short {
aspect-ratio: 3 / 4;
min-height: 0;
margin-top: clamp(40px, 6vw, 80px);
}
@media (max-width: 720px) {
.oh-wl-hero__collage > .oh-photo-slot--short { margin-top: 0; }
}
/* ============================================================
Weight Loss — A Day That Feels Like Yours, 3-moment editorial
============================================================ */
.oh-wl-day {
background: #ffffff;
padding: clamp(64px, 8vw, 110px) 0;
}
.oh-wl-day__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(24px, 6vw, 80px);
}
.oh-wl-day__head {
max-width: 720px;
margin: 0 auto clamp(32px, 4vw, 56px);
text-align: center;
}
.oh-wl-day__head .oh-label {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #1d3766;
margin-bottom: 18px;
}
.oh-wl-day__head h2 {
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.15;
letter-spacing: -0.02em;
color: #1a1a2e;
font-weight: 500;
margin: 0;
}
.oh-wl-day__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 3vw, 36px);
}
.oh-wl-day__moment {
display: flex;
flex-direction: column;
gap: 14px;
}
.oh-wl-day__moment .oh-photo-slot { width: 100%; }
.oh-wl-day__moment h3 {
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.25;
letter-spacing: -0.012em;
color: #1a1a2e;
font-weight: 600;
margin: 4px 0 0;
}
.oh-wl-day__moment p {
font-size: 15px;
line-height: 1.55;
color: #555555;
margin: 0;
}
@media (max-width: 880px) {
.oh-wl-day__grid { grid-template-columns: 1fr; gap: 32px; }
}
/* ============================================================
Weight Loss — Member testimonial (portrait + quote)
============================================================ */
.oh-wl-quote {
background: #f7f5f0;
padding: clamp(64px, 8vw, 110px) 0;
}
.oh-wl-quote__inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 clamp(24px, 6vw, 80px);
display: grid;
grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr);
gap: clamp(36px, 5vw, 72px);
align-items: center;
}
.oh-wl-quote__portrait {
width: 100%;
aspect-ratio: 3 / 4;
min-height: 0;
}
.oh-wl-quote__copy .oh-label {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #1d3766;
margin-bottom: 20px;
}
.oh-wl-quote__copy blockquote {
font-size: clamp(22px, 2.6vw, 34px);
line-height: 1.3;
letter-spacing: -0.018em;
color: #1a1a2e;
font-weight: 500;
font-family: 'Inter', sans-serif;
margin: 0 0 20px;
padding: 0;
border: 0;
quotes: none;
}
.oh-wl-quote__attr {
font-size: 14px;
color: #777777;
margin: 0;
letter-spacing: 0.01em;
}
.oh-wl-quote__cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: clamp(28px, 3.5vw, 40px);
padding: 18px 36px;
background: #1d3766;
color: #ffffff;
border: 0;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
cursor: pointer;
transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
box-shadow: 0 6px 20px rgba(20, 30, 50, 0.10);
}
.oh-wl-quote__cta:hover {
background: #15294d;
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(20, 30, 50, 0.14);
color: #ffffff;
}
.oh-wl-quote__cta:focus-visible {
outline: 2px solid #1d3766;
outline-offset: 3px;
}
@media (max-width: 760px) {
.oh-wl-quote__inner {
grid-template-columns: 1fr;
gap: 28px;
}
.oh-wl-quote__portrait { max-width: 320px; }
}
.oh-wl-hero__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.7);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.oh-wl-included {
padding: 96px 0;
background: #ffffff;
}
.oh-wl-included__inner {
max-width: none;
width: 100%;
margin: 0;
padding: 0 3.5%;
}
.oh-wl-included__head {
max-width: 720px;
margin: 0 auto 56px;
text-align: center;
}
.oh-wl-included__head h2 {
font-size: 40px;
line-height: 1.15;
letter-spacing: -0.015em;
color: #1a1a2e;
margin: 14px 0 16px;
font-weight: 600;
}
.oh-wl-included__head p {
color: #555;
font-size: 17px;
line-height: 1.6;
}
.oh-wl-included__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.oh-wl-feature {
background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
border: 1px solid #e8ecf0;
border-radius: 18px;
padding: 32px 28px;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.oh-wl-feature:hover {
transform: translateY(-3px);
border-color: #1d3766;
box-shadow: 0 14px 32px rgba(29,55,102,0.08);
}
.oh-wl-feature__num {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
color: #1d3766;
margin-bottom: 16px;
}
.oh-wl-feature h3 {
font-size: 19px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 10px;
}
.oh-wl-feature p {
color: #555;
font-size: 14.5px;
line-height: 1.6;
margin: 0;
}
.oh-wl-plans {
background: #f5f7fa;
padding: 96px 0;
border-radius: 24px;
max-width: none;
margin: 0 3.5%;
}
.oh-wl-plans__inner {
max-width: none;
width: 100%;
margin: 0;
padding: 0 3.5%;
}
.oh-wl-plans__head {
max-width: 760px;
margin: 0 auto 56px;
text-align: center;
}
.oh-wl-plans__head h2 {
font-size: 40px;
line-height: 1.15;
letter-spacing: -0.015em;
color: #1a1a2e;
margin: 14px 0 16px;
font-weight: 600;
}
.oh-wl-plans__head p {
color: #555;
font-size: 17px;
line-height: 1.6;
}
.oh-wl-plans__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.oh-wl-plans .oh-wl-plan {
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 20px;
padding: 56px 52px !important;
display: flex;
flex-direction: column;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.oh-wl-plan:hover {
transform: translateY(-3px);
border-color: #1d3766;
box-shadow: 0 18px 40px rgba(29,55,102,0.10);
}
.oh-wl-plan__badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1d3766;
background: rgba(29,55,102,0.08);
padding: 6px 12px;
border-radius: 999px;
margin-bottom: 18px;
}
.oh-wl-plan__tier {
font-size: 24px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 12px;
line-height: 1.2;
}
.oh-wl-plan__intro {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #555;
margin: 0 0 4px;
}
.oh-wl-plan__price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 8px;
margin: 0 0 6px;
}
.oh-wl-plan__amt {
font-size: 36px;
font-weight: 600;
color: #1d3766;
letter-spacing: -0.02em;
line-height: 1.1;
}
.oh-wl-plan__cadence {
font-size: 15px;
color: #555;
}
.oh-wl-plan__billed {
font-size: 13px;
color: #555;
margin: 4px 0 12px;
letter-spacing: 0.01em;
}
.oh-wl-plan__sub {
font-size: 13px;
font-weight: 500;
color: #555;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 18px;
}
.oh-wl-plan__note {
font-size: 12.5px;
font-style: italic;
color: #777;
line-height: 1.55;
margin: 0 0 20px;
padding: 12px 14px;
background: #f5f7fa;
border-radius: 10px;
}
.oh-wl-plan__desc {
color: #555;
font-size: 15px;
line-height: 1.6;
margin: 0 0 24px;
}
.oh-wl-plan__list {
list-style: none;
margin: 0 0 28px;
padding: 24px 0 0;
border-top: 1px solid #e8ecf0;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.oh-wl-plan__list li {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 14.5px;
color: #1a1a2e;
line-height: 1.5;
}
.oh-wl-plan__list svg {
width: 20px;
height: 20px;
color: #1d3766;
flex-shrink: 0;
margin-top: 1px;
}
.oh-wl-plan__cta {
align-self: flex-start;
}
.oh-wl-plans__foot {
text-align: center;
margin: 40px 0 0;
color: #555;
font-size: 15px;
}
.oh-wl-how {
padding: 96px 0;
background: #ffffff;
}
.oh-wl-how__inner {
max-width: none;
width: 100%;
margin: 0;
padding: 0 3.5%;
}
.oh-wl-how__head {
max-width: 720px;
margin: 0 auto 56px;
text-align: center;
}
.oh-wl-how__head h2 {
font-size: 40px;
line-height: 1.15;
letter-spacing: -0.015em;
color: #1a1a2e;
margin: 14px 0 0;
font-weight: 600;
}
.oh-wl-how__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.oh-wl-step {
border-top: 2px solid #1d3766;
padding: 24px 0 0;
}
.oh-wl-step__num {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #1d3766;
margin-bottom: 14px;
}
.oh-wl-step h3 {
font-size: 19px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 10px;
}
.oh-wl-step p {
color: #555;
font-size: 14.5px;
line-height: 1.6;
margin: 0;
}
.oh-wl-guide {
padding: 96px 0;
background: #f5f7fa;
max-width: none;
margin: 0 3.5%;
border-radius: 24px;
}
.oh-wl-guide__inner {
max-width: none;
width: 100%;
margin: 0;
padding: 0 3.5%;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: center;
}
.oh-wl-guide__media {
aspect-ratio: 4 / 5;
border-radius: 20px;
overflow: hidden;
background: #1d3766;
background-size: cover;
background-position: center;
position: relative;
}
.oh-wl-guide__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.7);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.oh-wl-guide__copy h2 {
font-size: 40px;
line-height: 1.15;
letter-spacing: -0.015em;
color: #1a1a2e;
margin: 14px 0 16px;
font-weight: 600;
}
.oh-wl-guide__copy > p {
color: #555;
font-size: 17px;
line-height: 1.6;
margin: 0 0 24px;
}
.oh-wl-guide__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.oh-wl-guide__list li {
font-size: 15px;
line-height: 1.6;
color: #1a1a2e;
padding-left: 22px;
position: relative;
}
.oh-wl-guide__list li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #1d3766;
}
.oh-wl-guide__list strong {
color: #1d3766;
font-weight: 600;
}
.oh-wl-faq {
padding: 96px 0;
background: #ffffff;
}
.oh-wl-faq__inner {
max-width: none;
width: 100%;
margin: 0;
padding: 0 3.5%;
}
.oh-wl-faq__head {
text-align: center;
margin-bottom: 48px;
}
.oh-wl-faq__head h2 {
font-size: 40px;
line-height: 1.15;
letter-spacing: -0.015em;
color: #1a1a2e;
margin: 14px 0 0;
font-weight: 600;
}
.oh-wl-cta {
max-width: none;
margin: 64px 3.5% 96px;
border-radius: 24px;
background: linear-gradient(135deg, #1d3766 0%, #2a4a82 100%);
padding: 80px 3.5%;
text-align: center;
color: #ffffff;
}
.oh-wl-cta__inner {
max-width: 720px;
margin: 0 auto;
}
.oh-wl-cta h2 {
font-size: 40px;
line-height: 1.15;
letter-spacing: -0.015em;
color: #ffffff;
margin: 0 0 16px;
font-weight: 600;
}
.oh-wl-cta p {
font-size: 17px;
line-height: 1.6;
color: rgba(255,255,255,0.85);
margin: 0 0 32px;
}
/* FAQ label safety, prevent question overflow at any width */
.oh-wl-faq .oh-accordion-label {
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
text-align: left;
word-break: break-word;
overflow-wrap: anywhere;
}
.oh-wl-faq .oh-accordion-label > span:first-child {
flex: 1 1 auto;
min-width: 0;
}
.oh-wl-faq .oh-accordion-label .oh-accordion-icon {
flex: 0 0 auto;
}
/* ---- Responsive ---- */
@media (max-width: 1180px) {
.oh-wl-plans, .oh-wl-guide, .oh-wl-cta { margin-left: 24px; margin-right: 24px; }
.oh-wl-hero__copy h1 { font-size: 50px; }
.oh-wl-included__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
.oh-wl-hero { padding: 112px 0 64px; margin-top: 16px; }
.oh-wl-hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
.oh-wl-hero__copy h1 { font-size: 44px; }
.oh-wl-hero__media { max-width: 520px; }
.oh-wl-included__inner,
.oh-wl-plans__inner,
.oh-wl-how__inner,
.oh-wl-guide__inner,
.oh-wl-faq__inner { padding-left: 24px; padding-right: 24px; }
.oh-wl-how__steps { grid-template-columns: repeat(2, 1fr); }
.oh-wl-guide__inner { grid-template-columns: 1fr; gap: 40px; }
.oh-wl-guide__media { max-width: 520px; }
.oh-wl-plans, .oh-wl-guide, .oh-wl-cta { margin-left: 16px; margin-right: 16px; }
.oh-wl-plans__grid { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 760px) {
.oh-wl-hero { padding: 96px 0 56px; }
.oh-wl-hero__copy h1 { font-size: 36px; }
.oh-wl-hero__copy > p { font-size: 16px; }
.oh-wl-hero__ctas { gap: 16px; margin-bottom: 32px; }
.oh-wl-trust { gap: 16px 22px; }
.oh-wl-included, .oh-wl-how, .oh-wl-faq { padding: 64px 0; }
.oh-wl-plans, .oh-wl-guide { padding: 64px 0; border-radius: 18px; }
.oh-wl-included__grid { grid-template-columns: 1fr; }
.oh-wl-plans__grid { grid-template-columns: 1fr; max-width: none; }
.oh-wl-how__steps { grid-template-columns: 1fr; }
.oh-wl-included__head h2,
.oh-wl-plans__head h2,
.oh-wl-how__head h2,
.oh-wl-guide__copy h2,
.oh-wl-faq__head h2,
.oh-wl-cta h2 { font-size: 30px; }
.oh-wl-included__head p,
.oh-wl-plans__head p,
.oh-wl-guide__copy > p { font-size: 16px; }
.oh-wl-cta { padding: 56px 24px; border-radius: 18px; margin: 32px 16px 64px; }
.oh-wl-plan { padding: 28px; }
.oh-wl-plan__amt { font-size: 32px; }
.oh-wl-plan__tier { font-size: 22px; }
.oh-wl-faq .oh-accordion-label { font-size: 15px; gap: 12px; }
}
@media (max-width: 480px) {
.oh-wl-hero { padding: 80px 0 48px; margin-top: 8px; }
.oh-wl-hero__inner,
.oh-wl-included__inner,
.oh-wl-plans__inner,
.oh-wl-how__inner,
.oh-wl-guide__inner,
.oh-wl-faq__inner { padding-left: 16px; padding-right: 16px; }
.oh-wl-hero__copy h1 { font-size: 30px; line-height: 1.1; }
.oh-wl-hero__copy > p { font-size: 15px; }
.oh-wl-hero__ctas { flex-direction: column; align-items: stretch; gap: 12px; }
.oh-wl-hero__ctas .oh-btn { width: 100%; text-align: center; }
.oh-wl-hero__ctas .oh-link-arrow { text-align: center; }
.oh-wl-trust { flex-direction: column; gap: 12px; }
.oh-wl-included, .oh-wl-how, .oh-wl-faq { padding: 56px 0; }
.oh-wl-plans, .oh-wl-guide { padding: 56px 0; }
.oh-wl-plans, .oh-wl-guide, .oh-wl-cta { margin-left: 8px; margin-right: 8px; border-radius: 16px; }
.oh-wl-plan { padding: 24px; border-radius: 16px; }
.oh-wl-plan__amt { font-size: 28px; }
.oh-wl-plan__cta { width: 100%; text-align: center; }
.oh-wl-feature { padding: 24px 22px; }
.oh-wl-included__head h2,
.oh-wl-plans__head h2,
.oh-wl-how__head h2,
.oh-wl-guide__copy h2,
.oh-wl-faq__head h2,
.oh-wl-cta h2 { font-size: 26px; }
.oh-wl-cta { padding: 48px 20px; }
.oh-wl-cta p { font-size: 15px; }
.oh-wl-faq .oh-accordion-label { font-size: 14.5px; }
}
/* Universal safety: no horizontal scroll on the page */
.oh-wl-hero,
.oh-wl-included,
.oh-wl-plans,
.oh-wl-how,
.oh-wl-guide,
.oh-wl-faq,
.oh-wl-cta { overflow-x: clip; }
/* ==========================================================================
Search overlay + results page
========================================================================== */
/* Trigger button reset (the icon already inherits .oh-nav-icon styles) */
.oh-search-trigger {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: rgba(255,255,255,0.85);
display: inline-flex;
align-items: center;
justify-content: center;
}
.oh-search-trigger:hover { color: #ffffff; }
body:not(.home) .oh-search-trigger { color: #1a1a2e; }
body:not(.home) .oh-search-trigger:hover { color: #1d3766; }
/* Lock body scroll while overlay is open */
body.oh-search-open { overflow: hidden; }
.oh-search-overlay {
position: fixed;
inset: 0;
z-index: 9000;
display: none;
}
.oh-search-overlay.is-open { display: block; }
.oh-search-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 25, 45, 0.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
animation: oh-search-fade 0.25s ease;
}
.oh-search-overlay__panel {
position: absolute;
top: 0; left: 0; right: 0;
background: #fff;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
box-shadow: 0 24px 60px rgba(15, 25, 45, 0.18);
padding: 40px clamp(20px, 5vw, 64px) 44px;
animation: oh-search-slide 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes oh-search-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes oh-search-slide {
from { transform: translateY(-12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.oh-search-overlay__close {
position: absolute;
top: 22px;
right: 22px;
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid #e8ecf0;
background: #fff;
cursor: pointer;
color: #1a1a2e;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.oh-search-overlay__close:hover { background: #1d3766; color: #fff; border-color: #1d3766; }
.oh-search-overlay__inner {
max-width: 880px;
margin: 0 auto;
}
.oh-search-overlay__eyebrow {
display: block;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1d3766;
font-weight: 600;
margin-bottom: 18px;
}
.oh-search-form {
position: relative;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #d6dde6;
padding: 8px 0 12px;
transition: border-color 0.2s ease;
}
.oh-search-form:focus-within { border-color: #1a1a2e; }
.oh-search-form__icon {
color: #1a1a2e;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.oh-search-form__icon svg { width: 20px; height: 20px; }
.oh-search-form__input {
flex: 1;
width: 100%;
min-width: 0;
font-size: clamp(18px, 2.2vw, 24px);
font-weight: 500;
color: #1a1a2e;
background: transparent;
border: 0;
outline: 0;
padding: 6px 4px;
letter-spacing: -0.005em;
font-family: inherit;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
}
.oh-search-form__input::-webkit-search-decoration,
.oh-search-form__input::-webkit-search-cancel-button,
.oh-search-form__input::-webkit-search-results-button,
.oh-search-form__input::-webkit-search-results-decoration { -webkit-appearance: none; }
.oh-search-form__input::placeholder { color: #b6bcc6; font-weight: 400; }
.oh-search-form__submit {
background: #1d3766;
color: #fff;
border: 0;
border-radius: 999px;
padding: 9px 20px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
letter-spacing: 0.01em;
flex-shrink: 0;
transition: background 0.15s ease, transform 0.15s ease;
}
.oh-search-form__submit:hover { background: #15294d; transform: translateY(-1px); }
.oh-search-overlay__suggest { margin-top: 36px; }
.oh-search-overlay__suggest-label {
display: block;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #888;
font-weight: 600;
margin-bottom: 14px;
}
.oh-search-overlay__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px;
}
.oh-search-overlay__chips a {
font-size: 14px;
font-weight: 500;
color: #1a1a2e;
background: #f5f7fa;
border: 1px solid #e8ecf0;
padding: 9px 16px;
border-radius: 999px;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.oh-search-overlay__chips a:hover {
background: #1d3766;
border-color: #1d3766;
color: #fff;
}
.oh-search-overlay__quicklinks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
border-top: 1px solid #e8ecf0;
padding-top: 24px;
}
.oh-search-overlay__quicklinks a {
font-size: 15px;
font-weight: 500;
color: #1a1a2e;
text-decoration: none;
padding: 14px 18px;
border-radius: 14px;
background: #f5f7fa;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.15s ease, color 0.15s ease;
}
.oh-search-overlay__quicklinks a:hover { background: #1d3766; color: #fff; }
.oh-search-overlay__quicklinks a span { transition: transform 0.2s ease; }
.oh-search-overlay__quicklinks a:hover span { transform: translateX(4px); }
@media (max-width: 720px) {
.oh-search-overlay__panel { padding: 48px 22px 36px; border-radius: 0; }
.oh-search-overlay__quicklinks { grid-template-columns: 1fr; }
.oh-search-form__submit { padding: 10px 18px; font-size: 13px; }
}
/* Search results page */
body.search-results main.site-main,
body.search-results .site-main,
body.search-no-results main.site-main,
body.search-no-results .site-main {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.oh-search-results { padding: 80px 5% 120px; background: #fff; }
.oh-search-results__inner { max-width: 1240px; margin: 0 auto; }
.oh-search-results__header {
border-bottom: 1px solid #e8ecf0;
padding-bottom: 36px;
margin-bottom: 48px;
}
.oh-search-results__eyebrow {
display: block;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1d3766;
font-weight: 600;
margin-bottom: 14px;
}
.oh-search-results__title {
font-size: clamp(32px, 4.4vw, 52px);
font-weight: 600;
color: #1a1a2e;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 28px;
}
.oh-search-results__q { color: #1d3766; font-style: italic; font-weight: 500; }
.oh-search-results__form {
position: relative;
display: flex;
align-items: center;
gap: 12px;
background: #f5f7fa;
border: 1px solid #e8ecf0;
border-radius: 999px;
padding: 8px 8px 8px 22px;
max-width: 640px;
}
.oh-search-results__form-icon {
color: #555;
display: inline-flex;
align-items: center;
}
.oh-search-results__form input[type="search"] {
flex: 1;
border: 0;
background: transparent;
outline: 0;
font-size: 16px;
color: #1a1a2e;
padding: 8px 4px;
font-family: inherit;
}
.oh-search-results__form input::placeholder { color: #99a0ab; }
.oh-search-results__form button {
background: #1d3766;
color: #fff;
border: 0;
border-radius: 999px;
padding: 10px 22px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 0.15s ease;
}
.oh-search-results__form button:hover { background: #15294d; }
.oh-search-results__count {
color: #555;
font-size: 14px;
margin: 0 0 18px;
}
.oh-search-results__group {
font-size: 22px;
font-weight: 600;
color: #1a1a2e;
margin: 36px 0 20px;
letter-spacing: -0.01em;
}
.oh-search-results__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1024px) { .oh-search-results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .oh-search-results__grid { grid-template-columns: 1fr; } }
.oh-search-results__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.oh-search-result a {
display: block;
padding: 22px 26px;
background: #f5f7fa;
border: 1px solid #e8ecf0;
border-radius: 18px;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.oh-search-result a:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(29, 55, 102, 0.10);
border-color: #d6dde6;
background: #fff;
}
.oh-search-result__type {
display: inline-block;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #1d3766;
font-weight: 600;
margin-bottom: 8px;
}
.oh-search-result__title {
font-size: 19px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 6px;
letter-spacing: -0.005em;
}
.oh-search-result__excerpt {
font-size: 14px;
color: #555;
margin: 0 0 10px;
line-height: 1.55;
}
.oh-search-result__cta {
font-size: 13px;
font-weight: 600;
color: #1d3766;
letter-spacing: 0.02em;
}
.oh-search-empty {
text-align: center;
padding: 72px 20px 48px;
background: #f5f7fa;
border: 1px solid #e8ecf0;
border-radius: 22px;
}
.oh-search-empty h2 {
font-size: 28px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 10px;
}
.oh-search-empty p {
color: #555;
font-size: 16px;
margin: 0 0 24px;
}
.oh-search-empty__links {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.oh-btn-ghost {
display: inline-flex;
align-items: center;
padding: 12px 22px;
border-radius: 999px;
background: #fff;
color: #1a1a2e;
border: 1px solid #d6dde6;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.oh-btn-ghost:hover { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.oh-search-results__pager {
margin-top: 48px;
display: flex;
justify-content: center;
}
.oh-search-results__pager .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.oh-search-results__pager a,
.oh-search-results__pager span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 14px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
color: #1a1a2e;
background: #f5f7fa;
border: 1px solid #e8ecf0;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.oh-search-results__pager a:hover,
.oh-search-results__pager .current { background: #1d3766; color: #fff; border-color: #1d3766; }
/* ============================================================
SCIENCE PAGE, Peptide encyclopedia (SEO/AEO/GEO optimized)
============================================================ */
.oh-science-page { background: #ffffff; }
.oh-science-hero {
position: relative;
padding: 120px 24px 80px;
background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
text-align: center;
}
.oh-science-hero .oh-page-hero__inner {
max-width: 880px;
margin: 0 auto;
}
.oh-science-hero .oh-page-hero__eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1d3766;
margin-bottom: 18px;
}
.oh-science-hero .oh-page-hero__title {
font-size: clamp(38px, 5.5vw, 64px);
line-height: 1.05;
letter-spacing: -0.02em;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 22px;
}
.oh-science-hero .oh-page-hero__subtitle {
font-size: 18px;
line-height: 1.65;
color: #555555;
max-width: 720px;
margin: 0 auto;
}
.oh-science-hero__meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 28px;
margin-top: 32px;
font-size: 14px;
color: #555555;
}
.oh-science-hero__meta strong { color: #1d3766; font-weight: 700; margin-right: 6px; }
/* Sticky TOC */
.oh-science-toc {
position: sticky;
top: 76px;
z-index: 30;
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid #e8ecf0;
}
.oh-science-toc__inner {
max-width: 1200px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
gap: 8px 22px;
flex-wrap: wrap;
font-size: 14px;
}
.oh-science-toc__label {
color: #6b7280;
font-weight: 600;
letter-spacing: 0.02em;
}
.oh-science-toc a {
color: #1a1a2e;
text-decoration: none;
padding: 6px 10px;
border-radius: 999px;
transition: background .2s ease, color .2s ease;
}
.oh-science-toc a:hover { background: #1d3766; color: #ffffff; }
/* Section frame */
.oh-science-article { display: block; }
.oh-sci-section {
padding: 96px 24px;
background: #ffffff;
}
.oh-sci-section--alt { background: #f7f9fc; }
.oh-sci-section__inner {
max-width: 1200px;
margin: 0 auto;
}
.oh-sci-section__head {
max-width: 820px;
margin: 0 0 48px;
}
.oh-sci-section__num {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
color: #1d3766;
margin-bottom: 14px;
}
.oh-sci-section__head h2 {
font-size: clamp(30px, 3.5vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
color: #1a1a2e;
margin: 0 0 16px;
font-weight: 600;
}
.oh-sci-section__sub {
font-size: 17px;
line-height: 1.65;
color: #555555;
margin: 0;
max-width: 720px;
}
/* Prose blocks */
.oh-sci-prose { max-width: 760px; }
.oh-sci-prose p {
font-size: 17px;
line-height: 1.75;
color: #2c3340;
margin: 0 0 20px;
}
.oh-sci-lead {
font-size: 20px !important;
line-height: 1.65 !important;
color: #1a1a2e !important;
font-weight: 500;
}
/* Mechanism cards */
.oh-sci-mech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.oh-sci-mech {
padding: 32px 28px;
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 18px;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.oh-sci-mech:hover {
transform: translateY(-3px);
border-color: #1d3766;
box-shadow: 0 12px 30px rgba(29,55,102,0.08);
}
.oh-sci-mech h3 {
font-size: 20px;
font-weight: 600;
color: #1d3766;
margin: 0 0 14px;
letter-spacing: -0.01em;
}
.oh-sci-mech p {
font-size: 15px;
line-height: 1.65;
color: #555555;
margin: 0;
}
/* Prose with editorial image */
.oh-sci-prose--with-image {
max-width: 1180px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
}
.oh-sci-prose--with-image .oh-sci-prose__text { max-width: 620px; }
.oh-sci-prose__image {
margin: 0;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 4 / 5;
background: #f5f7fa;
box-shadow: 0 18px 44px rgba(20,30,50,0.08);
}
.oh-sci-prose__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .8s ease;
}
.oh-sci-prose__image:hover img { transform: scale(1.04); }
/* Trust / how-it-works steps */
.oh-sci-trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 48px;
}
.oh-sci-trust {
position: relative;
padding: 32px 26px;
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 18px;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.oh-sci-trust:hover {
transform: translateY(-3px);
border-color: #1d3766;
box-shadow: 0 12px 30px rgba(29,55,102,0.08);
}
.oh-sci-trust__num {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
color: #1d3766;
background: #eef2f8;
padding: 6px 12px;
border-radius: 999px;
margin-bottom: 18px;
}
.oh-sci-trust h3 {
font-size: 20px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.oh-sci-trust p {
font-size: 15px;
line-height: 1.65;
color: #555555;
margin: 0;
}
.oh-sci-trust-image {
margin: 0;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 16 / 7;
background: #f5f7fa;
box-shadow: 0 18px 44px rgba(20,30,50,0.10);
}
.oh-sci-trust-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Peptide library */
.oh-sci-cat { margin-bottom: 56px; }
.oh-sci-cat:last-child { margin-bottom: 0; }
.oh-sci-cat__title {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
color: #1d3766;
margin: 0 0 22px;
padding-bottom: 12px;
border-bottom: 2px solid #e8ecf0;
}
.oh-sci-cat__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 22px;
}
.oh-pep-card {
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 20px;
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
scroll-margin-top: 140px;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.oh-pep-card:target,
.oh-pep-card:hover {
border-color: #1d3766;
box-shadow: 0 16px 36px rgba(29,55,102,0.08);
}
.oh-pep-card__head { margin-bottom: 18px; }
.oh-pep-card__name {
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.oh-pep-card__aka {
font-size: 13px;
color: #6b7280;
margin: 0;
font-style: italic;
}
.oh-pep-card__rows {
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.oh-pep-card__rows > div {
display: grid;
grid-template-columns: 130px 1fr;
gap: 12px;
align-items: baseline;
}
.oh-pep-card__rows dt {
font-size: 12px;
font-weight: 600;
color: #1d3766;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
}
.oh-pep-card__rows dd {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: #2c3340;
}
.oh-pep-card__cta {
align-self: flex-start;
margin-top: 20px;
font-size: 14px;
font-weight: 600;
color: #1d3766;
text-decoration: none;
padding: 10px 0;
border-bottom: 2px solid transparent;
transition: border-color .2s ease;
}
.oh-pep-card__cta:hover { border-bottom-color: #1d3766; }
/* Stats */
.oh-sci-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.oh-sci-stat {
padding: 32px 28px;
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.oh-sci-stat__num {
font-size: 44px;
font-weight: 700;
color: #1d3766;
line-height: 1;
letter-spacing: -0.02em;
}
.oh-sci-stat__label {
font-size: 14.5px;
line-height: 1.6;
color: #555555;
}
/* FAQ accordion */
.oh-sci-faq {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 880px;
}
.oh-sci-faq__item {
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 14px;
padding: 18px 24px;
transition: border-color .2s ease;
}
.oh-sci-faq__item[open] { border-color: #1d3766; }
.oh-sci-faq__item summary {
font-size: 16.5px;
font-weight: 600;
color: #1a1a2e;
cursor: pointer;
list-style: none;
position: relative;
padding-right: 32px;
outline: none;
}
.oh-sci-faq__item summary::-webkit-details-marker { display: none; }
.oh-sci-faq__item summary::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
font-weight: 300;
color: #1d3766;
transition: transform .2s ease;
}
.oh-sci-faq__item[open] summary::after { content: '×'; }
.oh-sci-faq__item p {
margin: 14px 0 0;
font-size: 15.5px;
line-height: 1.7;
color: #2c3340;
}
/* Glossary */
.oh-sci-glossary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px 28px;
margin: 0;
}
.oh-sci-glossary > div {
padding: 18px 0;
border-top: 1px solid #e8ecf0;
}
.oh-sci-glossary dt {
font-size: 15px;
font-weight: 700;
color: #1d3766;
margin: 0 0 6px;
letter-spacing: -0.005em;
}
.oh-sci-glossary dd {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: #555555;
}
/* CTA */
.oh-sci-cta {
padding: 96px 24px;
background: #1d3766;
color: #ffffff;
text-align: center;
}
.oh-sci-cta__inner {
max-width: 720px;
margin: 0 auto;
}
.oh-sci-cta h2 {
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 600;
color: #ffffff;
margin: 0 0 16px;
letter-spacing: -0.02em;
line-height: 1.15;
}
.oh-sci-cta p {
font-size: 17px;
line-height: 1.65;
color: rgba(255,255,255,0.88);
margin: 0 0 28px;
}
.oh-sci-cta__btns {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.oh-sci-cta .oh-btn-primary {
background: #ffffff;
color: #1d3766;
border-color: #ffffff;
}
.oh-sci-cta .oh-btn-primary:hover {
background: transparent;
color: #ffffff;
}
.oh-sci-cta .oh-btn-ghost {
background: transparent;
color: #ffffff;
border: 1.5px solid rgba(255,255,255,0.5);
}
.oh-sci-cta .oh-btn-ghost:hover {
border-color: #ffffff;
background: rgba(255,255,255,0.08);
}
/* Responsive */
@media (max-width: 1024px) {
.oh-sci-prose--with-image { grid-template-columns: 1fr; gap: 36px; }
.oh-sci-prose__image { aspect-ratio: 16 / 10; max-width: 720px; margin: 0 auto; }
.oh-sci-trust-grid { grid-template-columns: 1fr; gap: 18px; }
.oh-sci-trust-image { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
.oh-sci-section { padding: 64px 20px; }
.oh-science-hero { padding: 84px 20px 56px; }
.oh-pep-card__rows > div { grid-template-columns: 1fr; gap: 4px; }
.oh-pep-card__rows dt { letter-spacing: 0.06em; }
.oh-science-toc { top: 60px; }
.oh-sci-prose--with-image { gap: 28px; }
.oh-sci-prose__image { aspect-ratio: 4 / 3; }
.oh-sci-trust { padding: 26px 22px; }
.oh-sci-trust-image { border-radius: 18px; aspect-ratio: 4 / 3; }
}
/* Dual price label: $200 1-month (reference) + $400 2-month (purchasable) */
.oh-price-dual {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
line-height: 1.2;
}
.oh-price-ref {
display: inline-flex;
align-items: baseline;
gap: 4px;
color: #8a93a3;
font-weight: 500;
font-size: 14px;
text-decoration: line-through;
text-decoration-color: #b9c1ce;
}
.oh-price-ref .woocommerce-Price-amount { color: inherit; }
.oh-price-ref__label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #8a93a3;
text-decoration: none;
}
.oh-price-now {
display: inline-flex;
align-items: baseline;
gap: 4px;
color: #1d3766;
font-weight: 600;
}
.oh-price-now__label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6b7280;
}
/* ==========================================================================
Scroll reveal utilities (paired with assets/js/oh-reveal.js)
========================================================================== */
[data-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="fade"] { transform: none; }
[data-reveal].is-revealed {
opacity: 1;
transform: none;
}
/* Header shrink-on-scroll (toggled by oh-reveal.js) */
.oh-header {
transition: padding 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.oh-header.is-shrunk {
box-shadow: 0 1px 12px rgba(20, 30, 50, 0.08);
}
.oh-header.is-shrunk .oh-header__inner {
padding-top: 10px;
padding-bottom: 10px;
}
.oh-header.is-shrunk .oh-logo img,
.oh-header.is-shrunk .oh-header__logo img {
max-height: 36px;
transition: max-height 0.25s ease;
}
/* Pictogram chip used by feature/step cards */
.oh-wl-feature__icon,
.oh-wl-step__icon,
.oh-step__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
border: 1px solid #e8ecf0;
color: #1d3766;
margin-bottom: 16px;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
background 0.3s ease,
color 0.3s ease;
}
.oh-wl-feature:hover .oh-wl-feature__icon,
.oh-wl-step:hover .oh-wl-step__icon,
.oh-step:hover .oh-step__icon {
background: #1d3766;
color: #ffffff;
transform: translateY(-2px);
}
.oh-icon {
display: block;
}
/* Weight-loss feature card with optional thumbnail (oh-wl-feature--with-image) */
.oh-wl-feature--with-image {
position: relative;
}
.oh-wl-feature__thumb {
width: 100%;
height: 140px;
background-size: cover;
background-position: center;
border-radius: 10px;
margin-bottom: 16px;
}
/* Programs page CTA with photo background */
.oh-programs-cta--image {
background-size: cover;
background-position: center;
color: #ffffff;
}
.oh-programs-cta--image .oh-programs-cta__inner h2,
.oh-programs-cta--image .oh-programs-cta__inner p {
color: #ffffff;
}
.oh-programs-cta--image .oh-programs-cta__inner p {
color: rgba(255, 255, 255, 0.88);
}
/* Vial PNG inside stack cards (oh-stack-card--with-vial) */
.oh-stack-card--with-vial {
position: relative;
padding-top: 110px;
}
.oh-stack-card__vial {
position: absolute;
top: 18px;
right: 18px;
width: 88px;
height: 88px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
border: 1px solid #e8ecf0;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.oh-stack-card__vial img {
max-width: 70%;
max-height: 70%;
object-fit: contain;
display: block;
}
.oh-stack-card--with-vial:hover .oh-stack-card__vial {
transform: translateY(-3px) rotate(-2deg);
}
@media (max-width: 540px) {
.oh-stack-card--with-vial {
padding-top: 18px;
}
.oh-stack-card__vial {
position: static;
width: 64px;
height: 64px;
margin-bottom: 12px;
}
}
/* Ken-Burns slow zoom for hero media */
@keyframes oh-kenburns {
0% { transform: scale(1.08); }
100% { transform: scale(1); }
}
.oh-kenburns {
animation: oh-kenburns 14s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: center;
}
/* Parallax wrapper, JS shifts background-position-y on scroll */
.oh-parallax {
background-attachment: scroll;
will-change: background-position;
}
/* Staggered product card reveal on shop archive (initial load) */
.oh-shop__card {
opacity: 0;
transform: translateY(16px);
animation: oh-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.oh-shop__card:nth-child(1) { animation-delay: 0.00s; }
.oh-shop__card:nth-child(2) { animation-delay: 0.06s; }
.oh-shop__card:nth-child(3) { animation-delay: 0.12s; }
.oh-shop__card:nth-child(4) { animation-delay: 0.18s; }
.oh-shop__card:nth-child(5) { animation-delay: 0.24s; }
.oh-shop__card:nth-child(6) { animation-delay: 0.30s; }
.oh-shop__card:nth-child(7) { animation-delay: 0.36s; }
.oh-shop__card:nth-child(8) { animation-delay: 0.42s; }
.oh-shop__card:nth-child(n+9) { animation-delay: 0.48s; }
@keyframes oh-card-in {
to { opacity: 1; transform: none; }
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-reveal],
[data-reveal].is-revealed {
opacity: 1;
transform: none;
transition: none;
}
.oh-header,
.oh-header.is-shrunk,
.oh-header.is-shrunk .oh-logo img,
.oh-header.is-shrunk .oh-header__logo img {
transition: none;
}
.oh-kenburns { animation: none; transform: none; }
.oh-shop__card {
opacity: 1;
transform: none;
animation: none;
}
}
/* ============================================================
Bucket B image wiring, Why pillars media, doctor headshot,
programs hero photo backdrop
============================================================ */
.oh-doctor-card__avatar--photo {
width: 64px;
height: 64px;
padding: 0;
overflow: hidden;
background: #f1f4f9;
}
.oh-doctor-card__avatar--photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.oh-why-pillar--with-media {
grid-template-columns: 80px 1fr 200px;
align-items: center;
}
.oh-why-pillar__media {
width: 200px;
height: 140px;
border-radius: 12px;
overflow: hidden;
background: #f1f4f9;
border: 1px solid #e8ecf0;
}
.oh-why-pillar__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.oh-why-pillar:hover .oh-why-pillar__media img { transform: scale(1.05); }
@media (max-width: 1180px) {
.oh-why-grid { grid-template-columns: 1fr; gap: 48px; }
.oh-why-aside {
position: static;
padding: 40px 32px;
border-radius: 20px;
}
}
@media (max-width: 880px) {
.oh-why-pillar--with-media {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"num num"
"body media";
gap: 14px 16px;
align-items: center;
}
.oh-why-pillar--with-media:nth-child(even) {
grid-template-areas:
"num num"
"media body";
}
.oh-why-pillar--with-media .oh-why-pillar__num { grid-area: num; }
.oh-why-pillar--with-media .oh-why-pillar__body { grid-area: body; }
.oh-why-pillar--with-media .oh-why-pillar__media {
grid-area: media;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
margin-top: 0;
}
.oh-why-pillar--with-media .oh-why-pillar__body h3 { font-size: 18px; }
.oh-why-pillar--with-media .oh-why-pillar__body p { font-size: 14.5px; line-height: 1.55; }
}
.oh-page-hero--image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.oh-programs-page .oh-page-hero.oh-page-hero--image {
background-size: cover;
background-position: center;
}
.oh-sci-cta--image,
.oh-wl-cta--image,
.oh-prog-cta--image,
.oh-why-aside--image,
.oh-programs-how--image {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
color: #ffffff;
}
.oh-sci-cta--image h2,
.oh-sci-cta--image p,
.oh-prog-cta--image h2,
.oh-prog-cta--image p {
color: #ffffff;
}
.oh-programs-how--image .oh-programs-how__intro h2,
.oh-programs-how--image .oh-programs-how__intro p,
.oh-programs-how--image .oh-eyebrow {
color: #ffffff !important;
}
.oh-programs-how--image .oh-programs-how__intro p { color: rgba(255,255,255,0.82) !important; }
/* =============================================================
INDIVIDUAL PROGRAM PAGE (oh-prog-*)
============================================================= */
/* Hero */
.oh-prog-hero {
position: relative;
min-height: 580px;
display: flex;
align-items: flex-end;
padding: 0 0 72px;
background-color: #1a2540;
background-size: cover;
background-position: center;
}
.oh-prog-hero__inner {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 140px 48px 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.oh-prog-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.6);
margin-bottom: 24px;
}
.oh-prog-breadcrumb a {
color: rgba(255,255,255,0.6);
text-decoration: none;
transition: color 0.2s ease;
}
.oh-prog-breadcrumb a:hover { color: #fff; }
.oh-prog-breadcrumb span:last-child { color: rgba(255,255,255,0.9); }
.oh-prog-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.7);
margin-bottom: 16px;
text-transform: uppercase;
}
.oh-prog-hero__title {
font-size: clamp(34px, 5vw, 58px);
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
line-height: 1.08;
margin: 0 0 16px;
max-width: 720px;
}
.oh-prog-hero__tagline {
font-size: clamp(16px, 1.8vw, 20px);
color: rgba(255,255,255,0.82);
line-height: 1.5;
margin: 0 0 32px;
max-width: 600px;
}
.oh-prog-hero__stats {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 36px;
}
.oh-prog-stat {
display: inline-flex;
align-items: center;
padding: 7px 16px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.9);
background: rgba(255,255,255,0.08);
}
.oh-prog-hero__cta {
display: inline-block;
background: #fff;
color: #1d3766;
padding: 15px 36px;
border-radius: 999px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-prog-hero__cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}
/* Shared label */
.oh-prog-label {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
color: #1d3766;
text-transform: uppercase;
margin-bottom: 14px;
}
.oh-prog-label--light { color: rgba(255,255,255,0.7); }
/* Overview */
.oh-prog-overview {
background: #fff;
padding: 96px 0;
}
.oh-prog-overview__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 72px;
align-items: start;
}
.oh-prog-overview__text h2 {
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 20px;
}
.oh-prog-overview__intro {
font-size: 17px;
line-height: 1.7;
color: #555;
margin: 0 0 32px;
}
.oh-prog-benefits {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.oh-prog-benefits li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15.5px;
line-height: 1.55;
color: #333;
}
.oh-prog-check {
flex-shrink: 0;
width: 20px;
height: 20px;
color: #1d3766;
margin-top: 2px;
}
/* Snapshot card */
.oh-prog-snapshot {
background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
border: 1px solid #e8ecf0;
border-radius: 20px;
padding: 32px 28px;
position: sticky;
top: 100px;
}
.oh-prog-snapshot__head {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
color: #1a1a2e;
text-transform: uppercase;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #e8ecf0;
}
.oh-prog-snapshot__list {
display: flex;
flex-direction: column;
gap: 18px;
margin: 0 0 28px;
}
.oh-prog-snapshot__row { display: flex; flex-direction: column; gap: 3px; }
.oh-prog-snapshot__row dt {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
color: #1d3766;
text-transform: uppercase;
}
.oh-prog-snapshot__row dd {
font-size: 14px;
line-height: 1.5;
color: #333;
margin: 0;
}
.oh-prog-snapshot__cta {
display: block;
text-align: center;
background: #1d3766;
color: #fff;
padding: 14px 24px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-prog-snapshot__cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
/* Mechanism */
.oh-prog-mechanism {
background: #f5f7fa;
padding: 80px 0;
margin: 0 48px 0;
border-radius: 24px;
}
.oh-prog-mechanism__inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 56px;
}
.oh-prog-mechanism__intro {
max-width: 780px;
margin: 0 auto 52px;
text-align: center;
}
.oh-prog-mechanism__intro h2 {
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 18px;
}
.oh-prog-mechanism__intro p {
font-size: 16px;
line-height: 1.7;
color: #555;
margin: 0;
}
.oh-prog-mechanism__points {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 1000px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.oh-prog-mechanism__points li {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fff;
border: 1px solid #e8ecf0;
border-radius: 14px;
padding: 18px 20px;
font-size: 15px;
line-height: 1.55;
color: #333;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.oh-prog-mechanism__points li:hover {
border-color: #1d3766;
box-shadow: 0 8px 24px rgba(29,55,102,0.07);
}
.oh-prog-mechanism__points li svg {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 1px;
}
/* Stack */
.oh-prog-stack {
background: #fff;
padding: 96px 0;
}
.oh-prog-stack__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 48px;
}
.oh-prog-stack__intro {
max-width: 720px;
margin: 0 auto 56px;
text-align: center;
}
.oh-prog-stack__intro h2 {
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.12;
margin: 0 0 14px;
}
.oh-prog-stack__intro p {
font-size: 16px;
line-height: 1.65;
color: #555;
margin: 0;
}
.oh-prog-stack__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
align-items: stretch;
}
/* Stack card */
.oh-pstack-card {
background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
border: 1px solid #e8ecf0;
border-radius: 18px;
padding: 28px 26px;
display: flex;
flex-direction: column;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-pstack-card:hover {
border-color: #1d3766;
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(29,55,102,0.09);
}
.oh-pstack-card__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.oh-pstack-card__num {
font-size: 13px;
font-weight: 700;
color: #1d3766;
letter-spacing: 0.05em;
}
.oh-pstack-card__class {
display: inline-block;
background: rgba(29,55,102,0.08);
color: #1d3766;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
.oh-pstack-card__name {
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0 0 14px;
}
.oh-pstack-card__mech {
font-size: 14.5px;
line-height: 1.65;
color: #555;
margin: 0 0 22px;
flex: 1;
}
.oh-pstack-card__footer {
display: flex;
flex-direction: column;
gap: 16px;
border-top: 1px solid #e8ecf0;
padding-top: 20px;
}
.oh-pstack-card__form {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
color: #555;
letter-spacing: 0.02em;
}
.oh-pstack-card__form svg {
width: 14px;
height: 14px;
color: #1d3766;
flex-shrink: 0;
}
.oh-pstack-card__why {
background: rgba(29,55,102,0.04);
border-left: 3px solid #1d3766;
border-radius: 0 8px 8px 0;
padding: 12px 14px;
}
.oh-pstack-card__why-label {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1d3766;
margin-bottom: 6px;
}
.oh-pstack-card__why p {
font-size: 13.5px;
line-height: 1.6;
color: #333;
margin: 0;
}
.oh-prog-stack__cta {
margin-top: 56px;
text-align: center;
}
.oh-prog-stack__cta p {
font-size: 16px;
color: #555;
margin: 0 0 18px;
}
.oh-prog-stack__cta p em { font-style: italic; color: #1a1a2e; }
/* Timeline */
.oh-prog-timeline {
background: #fff;
padding: 0 0 96px;
}
.oh-prog-timeline__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 48px;
}
.oh-prog-timeline__intro {
max-width: 680px;
margin: 0 auto 64px;
text-align: center;
}
.oh-prog-timeline__intro h2 {
font-size: clamp(24px, 3vw, 38px);
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 14px;
}
.oh-prog-timeline__intro p { font-size: 16px; line-height: 1.65; color: #555; margin: 0; }
.oh-timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.oh-timeline__item {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-right: 28px;
}
.oh-timeline__item:last-child { padding-right: 0; }
.oh-timeline__marker {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 20px;
}
.oh-timeline__dot {
flex-shrink: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background: #1d3766;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #1d3766;
z-index: 1;
}
.oh-timeline__line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, #1d3766 0%, #c8d3e8 100%);
margin-left: 4px;
}
.oh-timeline__content { padding-right: 12px; }
.oh-timeline__label {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1d3766;
background: rgba(29,55,102,0.08);
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.oh-timeline__content h3 {
font-size: 17px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px;
line-height: 1.3;
}
.oh-timeline__content p { font-size: 14px; line-height: 1.65; color: #555; margin: 0; }
/* Steps */
.oh-prog-steps {
padding: 96px 0;
}
.oh-prog-steps__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 48px;
}
.oh-prog-steps__intro {
max-width: 640px;
margin: 0 auto 52px;
text-align: center;
}
.oh-prog-steps__intro h2 {
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 12px;
}
.oh-prog-steps__intro p { font-size: 16px; line-height: 1.65; color: #555; margin: 0; }
.oh-prog-steps__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.oh-prog-step {
background: #fff;
border: 1px solid #e8ecf0;
border-radius: 16px;
padding: 28px 22px;
display: flex;
flex-direction: column;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-prog-step:hover {
border-color: #1d3766;
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(29,55,102,0.08);
}
.oh-prog-step__icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: #1d3766;
border-radius: 14px;
color: #fff;
margin-bottom: 18px;
flex-shrink: 0;
}
.oh-prog-step__icon svg {
width: 24px;
height: 24px;
}
.oh-prog-step__num {
display: inline-block;
font-size: 32px;
font-weight: 800;
color: rgba(29,55,102,0.12);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 14px;
}
.oh-prog-step__title {
font-size: 17px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 10px;
line-height: 1.25;
}
.oh-prog-step__desc {
font-size: 14px;
line-height: 1.65;
color: #555;
margin: 0;
}
/* Related Programs */
.oh-prog-related {
background: #fff;
padding: 0 0 96px;
}
.oh-prog-related__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 48px;
}
.oh-prog-related__intro {
max-width: 560px;
margin: 0 0 40px;
}
.oh-prog-related__intro h2 {
font-size: clamp(24px, 2.8vw, 34px);
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
}
.oh-prog-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.oh-prog-related__tile {
position: relative;
display: block;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 4 / 3;
text-decoration: none;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.oh-prog-related__tile:hover {
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(20,30,50,0.18);
}
.oh-prog-related__tile-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.6s ease;
}
.oh-prog-related__tile:hover .oh-prog-related__tile-bg { transform: scale(1.05); }
.oh-prog-related__tile-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 28px 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.oh-prog-related__eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.oh-prog-related__tile-body h3 {
font-size: 20px;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.2;
}
.oh-prog-related__arrow {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.75);
transition: color 0.2s ease;
}
.oh-prog-related__tile:hover .oh-prog-related__arrow { color: #fff; }
/* CTA */
.oh-prog-cta {
margin: 0 48px 96px;
border-radius: 24px;
background: #1d3766;
padding: 80px 64px;
text-align: center;
}
.oh-prog-cta__inner { max-width: 640px; margin: 0 auto; }
.oh-prog-cta__inner h2 {
font-size: clamp(26px, 3.2vw, 38px);
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
line-height: 1.12;
margin: 0 0 14px;
}
.oh-prog-cta__inner p {
font-size: 17px;
line-height: 1.65;
color: rgba(255,255,255,0.8);
margin: 0 0 36px;
}
.oh-prog-cta__btn {
display: inline-block;
background: #fff;
color: #1d3766;
padding: 16px 40px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-prog-cta__btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}
/* Responsive */
@media (max-width: 1024px) {
.oh-prog-hero { min-height: 480px; }
.oh-prog-hero__inner { padding: 120px 32px 0; }
.oh-prog-overview__inner { grid-template-columns: 1fr; gap: 48px; padding: 0 32px; }
.oh-prog-snapshot { position: static; }
.oh-prog-mechanism { margin: 0 32px; }
.oh-prog-mechanism__inner { padding: 0 32px; }
.oh-prog-mechanism__points { grid-template-columns: 1fr; }
.oh-prog-stack__inner { padding: 0 32px; }
.oh-prog-stack__grid { grid-template-columns: 1fr 1fr; }
.oh-prog-timeline__inner { padding: 0 32px; }
.oh-timeline { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.oh-timeline__item { padding-right: 0; }
.oh-timeline__line { display: none; }
.oh-prog-steps__inner { padding: 0 32px; }
.oh-prog-steps__grid { grid-template-columns: 1fr 1fr; }
.oh-prog-related__inner { padding: 0 32px; }
.oh-prog-related__grid { grid-template-columns: 1fr 1fr; }
.oh-prog-cta { margin: 0 32px 72px; padding: 64px 40px; }
}
@media (max-width: 760px) {
.oh-prog-hero { min-height: 460px; padding-bottom: 56px; }
.oh-prog-hero__inner { padding: 110px 20px 0; }
.oh-prog-overview { padding: 64px 0; }
.oh-prog-overview__inner { padding: 0 20px; gap: 36px; }
.oh-prog-mechanism { margin: 0 16px; padding: 56px 0; }
.oh-prog-mechanism__inner { padding: 0 24px; }
.oh-prog-mechanism__intro { margin-bottom: 36px; }
.oh-prog-stack { padding: 64px 0; }
.oh-prog-stack__inner { padding: 0 20px; }
.oh-prog-stack__grid { grid-template-columns: 1fr; }
.oh-prog-timeline { padding-bottom: 64px; }
.oh-prog-timeline__inner { padding: 0 20px; }
.oh-prog-timeline__intro { margin-bottom: 40px; }
.oh-timeline { grid-template-columns: 1fr; gap: 32px; }
.oh-prog-steps { padding: 64px 0; }
.oh-prog-steps__inner { padding: 0 20px; }
.oh-prog-steps__grid { grid-template-columns: 1fr; }
.oh-prog-related { padding-bottom: 64px; }
.oh-prog-related__inner { padding: 0 20px; }
.oh-prog-related__grid { grid-template-columns: 1fr; }
.oh-prog-cta { margin: 0 16px 64px; padding: 56px 24px; border-radius: 18px; }
}
/* ============================================================
FEATURED PRODUCT CALLOUT, Longevity Stack on program page
============================================================ */
.oh-prog-featured {
background: #fff;
padding: 0 0 96px;
}
.oh-prog-featured__inner {
max-width: 1180px;
margin: 0 auto;
padding: 56px;
background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
border: 1px solid #e8ecf0;
border-radius: 24px;
display: grid;
grid-template-columns: 0.85fr 1fr;
gap: 56px;
align-items: center;
}
.oh-prog-featured__media {
display: block;
border-radius: 18px;
overflow: hidden;
background: #fff;
border: 1px solid #e8ecf0;
aspect-ratio: 1 / 1;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.oh-prog-featured__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.oh-prog-featured__media:hover {
transform: translateY(-4px);
border-color: #1d3766;
box-shadow: 0 18px 44px rgba(20, 30, 50, 0.12);
}
.oh-prog-featured__media:hover img {
transform: scale(1.04);
}
.oh-prog-featured__body h3 {
font-size: clamp(24px, 3vw, 34px);
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 12px 0 16px;
}
.oh-prog-featured__body p {
font-size: 17px;
line-height: 1.65;
color: #555;
margin: 0 0 22px;
}
.oh-prog-featured__bullets {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 10px;
}
.oh-prog-featured__bullets li {
font-size: 14.5px;
color: #1a1a2e;
font-weight: 500;
padding-left: 22px;
position: relative;
}
.oh-prog-featured__bullets li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 999px;
background: #1d3766;
}
.oh-prog-featured__cta .oh-btn-primary {
display: inline-block;
background: #1d3766;
color: #fff;
padding: 14px 32px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-prog-featured__cta .oh-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
@media (max-width: 1024px) {
.oh-prog-featured__inner {
grid-template-columns: 1fr;
gap: 36px;
padding: 40px;
}
.oh-prog-featured__media {
max-width: 420px;
margin: 0 auto;
}
}
@media (max-width: 760px) {
.oh-prog-featured { padding: 0 16px 64px; }
.oh-prog-featured__inner {
padding: 28px 22px;
border-radius: 18px;
gap: 28px;
}
}
/* ============================================================
SHOP ARCHIVE, sidebar filter layout
============================================================ */
.oh-shop--with-sidebar .oh-shop__inner {
display: grid;
grid-template-columns: 240px 1fr;
gap: 48px;
align-items: start;
}
.oh-shop__sidebar {
position: sticky;
top: 120px;
background: #ffffff;
border: 1px solid #e8ecf0;
border-radius: 16px;
padding: 22px 20px;
}
/* Shop sidebar — peptide-shop search field. */
.oh-shop__search {
position: relative;
display: flex;
align-items: center;
margin-bottom: 18px;
}
.oh-shop__search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #98a2b3;
pointer-events: none;
z-index: 1;
}
.oh-shop__search-input {
width: 100%;
padding: 10px 12px 10px 52px !important;
text-indent: 0 !important;
border: 1px solid #e8ecf0;
border-radius: 10px;
background: #ffffff;
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #1a1a2e;
letter-spacing: 0.01em;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
-webkit-appearance: none;
appearance: none;
}
.oh-shop__search-input::placeholder { color: #98a2b3; }
.oh-shop__search-input:focus {
outline: none;
border-color: #1d3766;
box-shadow: 0 0 0 3px rgba(29, 55, 102, 0.12);
}
.oh-shop__sidebar-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1d3766;
padding-bottom: 14px;
margin-bottom: 12px;
border-bottom: 1px solid #e8ecf0;
}
.oh-shop__sidebar-groups {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.oh-shop__sidebar-item { margin: 0; }
.oh-shop__sidebar-toggle {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 6px;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease;
position: relative;
}
.oh-shop__sidebar-toggle:hover { background: #f5f7fa; }
.oh-shop__sidebar-check {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.oh-shop__sidebar-box {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1.5px solid #c9d2dd;
background: #ffffff;
flex-shrink: 0;
position: relative;
transition: background 0.2s ease, border-color 0.2s ease;
}
.oh-shop__sidebar-check:checked + .oh-shop__sidebar-box {
background: #1d3766;
border-color: #1d3766;
}
.oh-shop__sidebar-check:checked + .oh-shop__sidebar-box::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.oh-shop__sidebar-label {
font-size: 14.5px;
font-weight: 500;
color: #1a1a2e;
line-height: 1.3;
}
.oh-shop__sidebar-check:focus-visible + .oh-shop__sidebar-box {
outline: 2px solid #1d3766;
outline-offset: 2px;
}
button.oh-shop__sidebar-clear,
.oh-shop__sidebar-clear {
display: inline-flex;
align-items: center;
margin-top: 18px;
background: #ffffff;
border: 1.5px solid #e1e6ed;
border-radius: 999px;
padding: 8px 18px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: #1d3766;
text-decoration: none;
cursor: pointer;
letter-spacing: 0.02em;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
text-shadow: none;
}
button.oh-shop__sidebar-clear:hover,
.oh-shop__sidebar-clear:hover,
button.oh-shop__sidebar-clear:focus,
.oh-shop__sidebar-clear:focus {
background: #1d3766;
border-color: #1d3766;
color: #ffffff;
text-decoration: none;
outline: none;
}
.oh-shop__main { min-width: 0; }
.oh-shop__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin: 0 0 28px;
}
.oh-shop__header .oh-shop__heading { margin: 0; }
.oh-shop__header .oh-shop__sort { flex-shrink: 0; }
@media (max-width: 760px) {
.oh-shop__header {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.oh-shop__header .oh-shop__sort select { width: 100%; }
}
@media (max-width: 1024px) {
.oh-shop--with-sidebar .oh-shop__inner {
grid-template-columns: 220px 1fr;
gap: 32px;
}
}
@media (max-width: 880px) {
.oh-shop--with-sidebar .oh-shop__inner {
grid-template-columns: 1fr;
gap: 24px;
}
.oh-shop__sidebar {
position: static;
padding: 18px 18px;
}
.oh-shop__sidebar-groups {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px 12px;
}
}
@media (max-width: 760px) {
.oh-shop__sidebar-groups { grid-template-columns: 1fr; }
}
/* ============================================================
HOMEPAGE MANIFESTO BAND
============================================================ */
.oh-manifesto {
background: #ffffff;
padding: clamp(64px, 7vw, 96px) 24px;
text-align: center;
border-top: 1px solid #eef1f6;
border-bottom: 1px solid #eef1f6;
}
.oh-manifesto .oh-container {
max-width: 980px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.oh-manifesto__title { text-align: center; margin-left: auto; margin-right: auto; }
.oh-manifesto__eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #1d3766;
margin-bottom: 28px;
}
.oh-manifesto__title {
font-size: 44px;
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: 600;
color: #1a1a2e;
margin: 0;
}
.oh-manifesto__line {
display: block;
margin-top: 18px;
color: #555555;
font-weight: 400;
font-size: 26px;
line-height: 1.45;
letter-spacing: -0.01em;
}
@media (max-width: 1024px) {
.oh-manifesto { padding: 96px 24px; }
.oh-manifesto__title { font-size: 36px; }
.oh-manifesto__line { font-size: 22px; }
}
@media (max-width: 760px) {
.oh-manifesto { padding: 72px 20px; }
.oh-manifesto__title { font-size: 28px; line-height: 1.25; }
.oh-manifesto__line { font-size: 18px; line-height: 1.5; margin-top: 14px; }
.oh-manifesto__eyebrow { margin-bottom: 20px; }
}
/* ============================================================
PERSONALIZED QUIZ POPUP
============================================================ */
.oh-quiz {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
}
.oh-quiz.is-open { opacity: 1; pointer-events: auto; }
.oh-quiz[hidden] { display: none; }
.oh-quiz__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 30, 50, 0.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.oh-quiz__panel {
position: relative;
width: min(560px, 92vw);
max-height: 88vh;
overflow-y: auto;
background: #ffffff;
border-radius: 24px;
padding: 44px 40px 36px;
box-shadow: 0 30px 80px rgba(20, 30, 50, 0.28);
transform: translateY(14px) scale(0.985);
transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.oh-quiz.is-open .oh-quiz__panel { transform: none; }
.oh-quiz__close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: transparent !important;
border: 0 !important;
border-radius: 999px;
padding: 0 !important;
color: #555 !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
appearance: none;
-webkit-appearance: none;
box-shadow: none !important;
transform: none !important;
transition: background 0.2s ease, color 0.2s ease;
}
.oh-quiz__close svg { display: block; pointer-events: none; }
.oh-quiz__close:hover,
.oh-quiz__close:focus,
.oh-quiz__close:focus-visible,
.oh-quiz__close:active {
background: #f5f7fa !important;
color: #1d3766 !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
transform: none !important;
}
.oh-quiz__close:focus-visible { box-shadow: 0 0 0 2px rgba(29, 55, 102, 0.35) !important; }
.oh-quiz__inner > .oh-eyebrow { display: block; margin-bottom: 8px; }
.oh-quiz__inner h2 {
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 8px;
color: #1a1a2e;
}
.oh-quiz__lede { color: #555; margin: 0 0 22px; font-size: 15px; line-height: 1.55; }
.oh-quiz__progress {
height: 4px;
background: #e8ecf0;
border-radius: 999px;
margin-bottom: 26px;
overflow: hidden;
}
.oh-quiz__progress-bar {
height: 100%;
width: 0%;
background: #1d3766;
border-radius: 999px;
transition: width 0.32s ease;
}
.oh-quiz__step h3 {
font-size: 19px;
line-height: 1.3;
margin: 0 0 18px;
color: #1a1a2e;
font-weight: 600;
letter-spacing: -0.01em;
}
.oh-quiz__options {
display: grid;
gap: 10px;
}
.oh-quiz__options button {
width: 100%;
padding: 14px 18px;
background: #f7f9fc;
border: 1.5px solid #e8ecf0;
border-radius: 14px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
color: #1a1a2e;
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.oh-quiz__options button,
.oh-quiz__options button:hover,
.oh-quiz__options button:focus,
.oh-quiz__options button:focus-visible,
.oh-quiz__options button:active {
color: #1a1a2e !important;
outline: none !important;
}
@media (hover: hover) {
.oh-quiz__options button:hover {
border-color: #1d3766 !important;
background: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(20, 30, 50, 0.06) !important;
}
}
.oh-quiz__options button:focus-visible {
border-color: #1d3766 !important;
box-shadow: 0 0 0 2px rgba(29, 55, 102, 0.35) !important;
}
.oh-quiz__options button:active {
background: #ffffff !important;
border-color: #1d3766 !important;
transform: none;
}
.oh-quiz__result h3 {
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0 0 12px;
color: #1a1a2e;
}
.oh-quiz__result p {
color: #555;
margin: 0 0 22px;
line-height: 1.6;
font-size: 15px;
}
.oh-quiz__cta {
display: inline-block;
background: #1d3766;
color: #ffffff;
padding: 14px 28px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
.oh-quiz__cta:hover {
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
}
.oh-quiz__cta:focus-visible { outline: 2px solid #1d3766; outline-offset: 3px; }
.oh-quiz__cta:active { color: #ffffff; transform: none; }
.oh-quiz__restart {
display: inline-block;
margin-left: 14px;
background: transparent;
border: 0;
padding: 12px 4px;
font-family: inherit;
font-size: 13.5px;
font-weight: 500;
color: #555;
cursor: pointer;
letter-spacing: 0.01em;
-webkit-tap-highlight-color: transparent;
appearance: none;
-webkit-appearance: none;
outline: none;
}
@media (hover: hover) {
.oh-quiz__restart:hover { color: #1d3766; text-decoration: underline; }
}
.oh-quiz__restart:focus { outline: none; background: transparent; }
.oh-quiz__restart:focus-visible { outline: 2px solid #1d3766; outline-offset: 3px; border-radius: 4px; }
.oh-quiz__restart:active,
.oh-quiz__restart:focus:active {
background: transparent;
color: #1d3766;
outline: none;
}
@media (max-width: 760px) {
.oh-quiz__panel {
padding: 36px 22px 26px;
border-radius: 20px;
max-height: 92vh;
width: calc(100vw - 24px);
}
.oh-quiz__inner h2 { font-size: 22px; }
.oh-quiz__lede { font-size: 14.5px; }
.oh-quiz__step h3 { font-size: 17px; }
.oh-quiz__options button { padding: 13px 16px; font-size: 14.5px; }
.oh-quiz__cta { width: 100%; text-align: center; }
.oh-quiz__restart { display: block; margin: 12px 0 0; text-align: center; }
}
/* ============================================================
WEIGHT LOSS, EVERYDAY WINS lifestyle band
============================================================ */
.oh-wl-wins {
padding: 96px 0;
background: #ffffff;
}
.oh-wl-wins__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.oh-wl-wins__head {
max-width: 760px;
margin: 0 auto 56px;
text-align: center;
}
.oh-wl-wins__head .oh-label {
display: inline-block;
margin-bottom: 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1d3766;
}
.oh-wl-wins__head h2 {
font-size: 44px;
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 14px;
color: #1a1a2e;
}
.oh-wl-wins__head p {
font-size: 17px;
line-height: 1.65;
color: #555;
margin: 0;
}
.oh-wl-wins__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.oh-wl-win {
background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
border: 1px solid #e8ecf0;
border-radius: 18px;
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.oh-wl-win:hover {
border-color: #1d3766;
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(20, 30, 50, 0.08);
}
.oh-wl-win__media {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.6s ease;
}
.oh-wl-win:hover .oh-wl-win__media {
transform: scale(1.04);
}
.oh-wl-win h3 {
font-size: 20px;
line-height: 1.25;
letter-spacing: -0.01em;
margin: 22px 22px 10px;
color: #1a1a2e;
font-weight: 600;
}
.oh-wl-win p {
font-size: 15px;
line-height: 1.6;
color: #555;
margin: 0 22px 24px;
}
@media (max-width: 1024px) {
.oh-wl-wins__grid { grid-template-columns: repeat(2, 1fr); }
.oh-wl-wins__head h2 { font-size: 36px; }
}
@media (max-width: 760px) {
.oh-wl-wins { padding: 64px 0; }
.oh-wl-wins__inner { padding: 0 16px; }
.oh-wl-wins__grid { grid-template-columns: 1fr; gap: 16px; }
.oh-wl-wins__head { margin-bottom: 36px; }
.oh-wl-wins__head h2 { font-size: 28px; }
.oh-wl-wins__head p { font-size: 15.5px; }
.oh-wl-win__media { aspect-ratio: 16 / 10; }
}
/* Checkout, affiliated-partner-branding notice */
.oh-checkout-notice {
display: flex;
align-items: flex-start;
gap: 14px;
background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
border: 1px solid #e8ecf0;
border-left: 3px solid #1d3766;
border-radius: 14px;
padding: 16px 20px;
margin: 0 0 28px;
font-family: 'Inter', system-ui, sans-serif;
}
.oh-checkout-notice__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
background: #ffffff;
border: 1px solid #e8ecf0;
color: #1d3766;
flex-shrink: 0;
}
.oh-checkout-notice__body { flex: 1; min-width: 0; }
.oh-checkout-notice__body strong {
display: block;
font-size: 14.5px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.oh-checkout-notice__body p {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: #555;
}
@media (max-width: 760px) {
.oh-checkout-notice { padding: 14px 16px; gap: 12px; border-radius: 12px; }
.oh-checkout-notice__icon { width: 32px; height: 32px; }
.oh-checkout-notice__body strong { font-size: 14px; }
.oh-checkout-notice__body p { font-size: 13px; }
}
/* Cart, free-shipping progress bar */
.oh-cart-ship {
background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
border: 1px solid #e8ecf0;
border-radius: 14px;
padding: 18px 22px;
margin: 0 0 28px;
font-family: 'Inter', system-ui, sans-serif;
transition: border-color 0.3s ease, background 0.3s ease;
}
.oh-cart-ship.is-unlocked {
border-color: #1d3766;
background: linear-gradient(180deg, #f4f7fc 0%, #e8eef8 100%);
}
.oh-cart-ship__head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.oh-cart-ship__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: #ffffff;
border: 1px solid #e8ecf0;
color: #1d3766;
flex-shrink: 0;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.oh-cart-ship.is-unlocked .oh-cart-ship__icon {
background: #1d3766;
border-color: #1d3766;
color: #ffffff;
}
.oh-cart-ship__msg {
margin: 0;
font-size: 14.5px;
line-height: 1.5;
color: #1a1a2e;
letter-spacing: -0.005em;
}
.oh-cart-ship__msg strong { color: #1d3766; font-weight: 600; }
.oh-cart-ship__bar {
position: relative;
height: 6px;
background: #e8ecf0;
border-radius: 999px;
overflow: hidden;
}
.oh-cart-ship__fill {
position: absolute;
inset: 0 auto 0 0;
height: 100%;
background: linear-gradient(90deg, #1d3766 0%, #2a4d8c 100%);
border-radius: 999px;
transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.oh-cart-ship.is-unlocked .oh-cart-ship__fill {
background: linear-gradient(90deg, #1d3766 0%, #1d3766 100%);
}
@media (max-width: 760px) {
.oh-cart-ship { padding: 16px 18px; border-radius: 12px; margin-bottom: 22px; }
.oh-cart-ship__msg { font-size: 14px; }
.oh-cart-ship__icon { width: 28px; height: 28px; }
}
/* ============================================================
SCIENCE / PEPTIDES, lifestyle-led layout (May 2026 redesign)
Editorial, image-led, outcome-first. No scientific cards.
============================================================ */
.oh-sci {
background: #ffffff;
font-family: 'Inter', sans-serif;
color: #1a1a2e;
overflow-x: hidden;
}
.oh-sci .oh-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
color: #1d3766;
margin: 0;
}
/* --- Empty image placeholder (used everywhere on this page) --- */
.oh-img-ph {
background: linear-gradient(135deg, #f5f7fa 0%, #eaeef4 100%);
border-radius: 22px;
position: relative;
overflow: hidden;
}
.oh-img-ph::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 42px;
height: 42px;
margin: -21px 0 0 -21px;
border-radius: 50%;
border: 1.5px solid #cdd5e0;
background:
linear-gradient(#cdd5e0, #cdd5e0) center/2px 16px no-repeat,
linear-gradient(#cdd5e0, #cdd5e0) center/16px 2px no-repeat;
opacity: 0.6;
}
.oh-img-ph--full { width: 100%; }
.oh-img-ph--portrait { aspect-ratio: 4 / 5; }
/* When a real image is set inline (background-image), drop the placeholder
gradient + "+" icon and let the image render edge-to-edge. */
.oh-img-ph--filled {
background-color: #f5f7fa;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.oh-img-ph--filled::after { display: none; }
/* --- Hero --- */
.oh-sci-hero {
max-width: 1380px;
margin: 0 auto;
padding: 156px clamp(24px, 6vw, 80px) 60px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.oh-sci-hero__text { max-width: 560px; }
.oh-sci-hero__title {
font-size: clamp(40px, 5.4vw, 68px);
line-height: 1.04;
letter-spacing: -0.03em;
font-weight: 600;
margin: 14px 0 18px;
color: #1a1a2e;
}
.oh-sci-hero__lede {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.6;
color: #555;
margin: 0;
}
.oh-sci-hero__media { width: 100%; }
@media (max-width: 880px) {
.oh-sci-hero {
grid-template-columns: 1fr;
padding: 130px clamp(20px, 5vw, 40px) 40px;
gap: 32px;
}
.oh-sci-hero__media { aspect-ratio: 4 / 3; }
}
/* --- Alternating story blocks --- */
.oh-sci-block {
max-width: 1320px;
margin: clamp(60px, 9vw, 110px) auto;
padding: 0 clamp(24px, 6vw, 80px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: center;
}
.oh-sci-block__body { max-width: 540px; }
.oh-sci-block__body h2 {
font-size: clamp(32px, 3.8vw, 50px);
line-height: 1.06;
letter-spacing: -0.025em;
font-weight: 600;
margin: 14px 0 18px;
color: #1a1a2e;
}
.oh-sci-block__body p {
font-size: 17px;
line-height: 1.65;
color: #444;
margin: 0 0 24px;
}
.oh-sci-block__media {
aspect-ratio: 1 / 1;
width: 100%;
}
.oh-sci-block--rtl .oh-sci-block__body { order: 1; }
.oh-sci-block--rtl .oh-sci-block__media { order: 2; }
@media (max-width: 880px) {
.oh-sci-block {
grid-template-columns: 1fr;
margin: 60px auto;
gap: 28px;
}
.oh-sci-block__body,
.oh-sci-block__media,
.oh-sci-block--rtl .oh-sci-block__body,
.oh-sci-block--rtl .oh-sci-block__media {
order: 0 !important;
}
.oh-sci-block__media { aspect-ratio: 4 / 3; }
}
/* --- Outcome bullets (2-col grid) --- */
.oh-sci-outs {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 28px;
}
.oh-sci-outs li {
position: relative;
padding-left: 28px;
font-size: 15.5px;
line-height: 1.45;
color: #1a1a2e;
font-weight: 500;
}
.oh-sci-outs li::before {
content: '';
position: absolute;
left: 0;
top: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #1d3766 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
@media (max-width: 540px) {
.oh-sci-outs { grid-template-columns: 1fr; gap: 10px; }
}
/* --- Section link (no button look) --- */
.oh-sci-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 15px;
font-weight: 600;
color: #1d3766;
text-decoration: none;
letter-spacing: 0.01em;
border-bottom: 1.5px solid #1d3766;
padding-bottom: 3px;
transition: gap 0.2s ease, opacity 0.2s ease;
}
.oh-sci-link:hover { gap: 10px; opacity: 0.85; }
/* --- Full-bleed band image (visual breather) --- */
.oh-sci-band {
height: clamp(220px, 26vw, 360px);
margin: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
border-radius: 24px;
}
/* --- Brand mantra (between stacks and single peptides) --- */
.oh-sci-mantra {
padding: clamp(60px, 9vw, 120px) clamp(24px, 6vw, 80px);
background: #f7f9fc;
margin: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
border-radius: 28px;
text-align: center;
}
.oh-sci-mantra__inner {
max-width: 880px;
margin: 0 auto;
}
.oh-sci-mantra blockquote {
margin: 0;
padding: 0;
border: 0;
quotes: none;
font-size: clamp(28px, 4vw, 52px);
line-height: 1.15;
letter-spacing: -0.025em;
font-weight: 500;
color: #1d3766;
font-family: 'Inter', sans-serif;
}
/* --- "Single Peptides" divider --- */
.oh-sci-divider {
display: flex;
align-items: center;
gap: 24px;
max-width: 1100px;
margin: clamp(40px, 6vw, 80px) auto clamp(20px, 4vw, 40px);
padding: 0 clamp(24px, 6vw, 80px);
}
.oh-sci-divider__line { flex: 1; height: 1px; background: #e8ecf0; }
.oh-sci-divider__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.24em;
color: #1d3766;
}
/* --- Closing CTA band --- */
.oh-sci-cta {
background: #1d3766;
margin: clamp(60px, 8vw, 110px) clamp(24px, 6vw, 80px) clamp(60px, 8vw, 100px);
border-radius: 28px;
padding: clamp(56px, 7vw, 96px) clamp(24px, 6vw, 80px);
color: #ffffff;
text-align: center;
position: relative;
overflow: hidden;
}
.oh-sci-cta__inner { max-width: 620px; margin: 0 auto; position: relative; z-index: 1; }
.oh-sci-cta h2 {
font-size: clamp(28px, 3vw, 42px);
letter-spacing: -0.02em;
margin: 0 0 14px;
color: #ffffff;
line-height: 1.1;
}
.oh-sci-cta p {
font-size: 16.5px;
line-height: 1.6;
color: rgba(255,255,255,0.82);
margin: 0 auto 30px;
}
.oh-sci-cta__actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.oh-sci-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
letter-spacing: 0.01em;
text-decoration: none;
background: #ffffff !important;
color: #1d3766 !important;
border: 1.5px solid #ffffff;
transition: transform 0.2s ease, background 0.2s ease;
}
.oh-sci-cta__btn:hover { transform: translateY(-1px); background: #f5f7fa !important; }
.oh-sci-cta__btn--ghost {
background: transparent !important;
color: #ffffff !important;
border-color: rgba(255,255,255,0.5);
}
.oh-sci-cta__btn--ghost:hover {
background: rgba(255,255,255,0.06) !important;
border-color: #ffffff;
}
/* Generic page-level image band placeholder. Reuse on any page that needs
visual breathing room between sections. Soft gray-blue gradient + centered
"+" icon, instantly reads as "image goes here". */
.oh-page-band {
display: block;
height: clamp(220px, 26vw, 360px);
margin: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
border-radius: 24px;
background: linear-gradient(135deg, #f5f7fa 0%, #eaeef4 100%);
position: relative;
overflow: hidden;
}
.oh-page-band::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 42px;
height: 42px;
margin: -21px 0 0 -21px;
border-radius: 50%;
border: 1.5px solid #cdd5e0;
background:
linear-gradient(#cdd5e0, #cdd5e0) center/2px 16px no-repeat,
linear-gradient(#cdd5e0, #cdd5e0) center/16px 2px no-repeat;
opacity: 0.55;
}
/* ============================================================
Weight Loss, "Real Life" editorial moment
Asymmetric magazine-style layout: tall portrait, large pull-quote,
small square detail. Three image sizes in one composition.
============================================================ */
.oh-wl-moment {
background: #ffffff;
padding: clamp(60px, 9vw, 110px) 0;
}
.oh-wl-moment__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(24px, 6vw, 80px);
display: grid;
grid-template-columns: 5fr 6fr 3fr;
grid-template-rows: auto auto;
column-gap: clamp(28px, 4vw, 56px);
row-gap: clamp(20px, 3vw, 40px);
align-items: center;
}
.oh-wl-moment__portrait {
aspect-ratio: 4 / 5;
width: 100%;
grid-column: 1;
grid-row: 1 / 3;
border-radius: 22px;
}
.oh-wl-moment__copy {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
max-width: 520px;
}
.oh-wl-moment__copy .oh-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
color: #1d3766;
display: inline-block;
margin-bottom: 18px;
}
.oh-wl-moment__copy blockquote {
font-size: clamp(26px, 3.2vw, 40px);
line-height: 1.18;
letter-spacing: -0.02em;
font-weight: 500;
margin: 0 0 18px;
color: #1a1a2e;
font-family: 'Inter', sans-serif;
border: 0;
padding: 0;
quotes: none;
}
.oh-wl-moment__attr {
font-size: 14px;
color: #777;
margin: 0;
letter-spacing: 0.01em;
}
.oh-wl-moment__detail {
aspect-ratio: 1 / 1;
width: 100%;
grid-column: 3;
grid-row: 2;
align-self: end;
border-radius: 18px;
margin-bottom: clamp(8px, 2vw, 28px);
}
@media (max-width: 980px) {
.oh-wl-moment__inner {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
.oh-wl-moment__portrait {
grid-column: 1;
grid-row: 1 / 3;
aspect-ratio: 3 / 4;
}
.oh-wl-moment__copy { grid-column: 2; grid-row: 1; }
.oh-wl-moment__detail { grid-column: 2; grid-row: 2; aspect-ratio: 1 / 1; max-width: 240px; }
}
@media (max-width: 640px) {
.oh-wl-moment__inner { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
.oh-wl-moment__portrait { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
.oh-wl-moment__copy { grid-column: 1; grid-row: 2; max-width: 100%; }
.oh-wl-moment__detail { display: none; }
}
/* ============================================================
PROGRAMS INDEX, WARM SECTIONS BELOW HOW-IT-WORKS
life (lifestyle gallery) -> real (reassurance grid)
-> voice (member quote) -> warmclose (final CTA)
============================================================ */
/* A DAY ON PROTOCOL, lifestyle gallery -------------------------------- */
.oh-programs-life {
background: #fff;
padding: 96px 0 80px;
}
.oh-programs-life__intro {
max-width: 740px;
margin: 0 auto 56px;
text-align: center;
}
.oh-programs-life__intro h2 {
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.12;
margin: 14px 0 18px;
}
.oh-programs-life__intro p {
font-size: 17px;
line-height: 1.7;
color: #555;
margin: 0;
}
.oh-programs-life__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.oh-life-tile {
position: relative;
margin: 0;
border-radius: 18px;
overflow: hidden;
background: #f5f7fa;
aspect-ratio: 4 / 3;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.oh-life-tile:hover {
transform: translateY(-4px);
box-shadow: 0 18px 44px rgba(20,30,50,0.18);
}
.oh-life-tile__media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.7s ease;
}
.oh-life-tile:hover .oh-life-tile__media { transform: scale(1.05); }
.oh-life-tile__body {
position: absolute;
left: 24px;
right: 24px;
bottom: 22px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
}
.oh-life-tile__eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.78);
text-transform: uppercase;
}
.oh-life-tile__caption {
font-size: clamp(16px, 1.4vw, 19px);
font-weight: 600;
color: #fff;
line-height: 1.3;
margin: 0;
letter-spacing: -0.01em;
text-shadow: 0 2px 12px rgba(12,22,40,0.35);
}
/* Uniform 3-col grid, every tile a 4:3 rectangle. */
.oh-life-tile--big,
.oh-life-tile--portrait,
.oh-life-tile--square { grid-column: span 1; }
/* BUILT FOR REAL LIFE ------------------------------------------------- */
.oh-programs-real {
background: #fff;
padding: 24px 0 96px;
}
.oh-programs-real__inner {
background: #f5f7fa;
border-radius: 24px;
padding: 64px 56px;
}
.oh-programs-real__intro {
max-width: 720px;
margin: 0 auto 48px;
text-align: center;
}
.oh-programs-real__intro h2 {
font-size: clamp(26px, 3vw, 36px);
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 14px 0 14px;
}
.oh-programs-real__intro p {
font-size: 17px;
line-height: 1.7;
color: #555;
margin: 0;
}
.oh-programs-real__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.oh-programs-real__card {
background: #fff;
border: 1px solid #e8ecf0;
border-radius: 18px;
padding: 30px 26px 28px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-programs-real__card:hover {
border-color: #1d3766;
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(20,30,50,0.08);
}
.oh-programs-real__icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(29,55,102,0.08);
color: #1d3766;
display: flex;
align-items: center;
justify-content: center;
}
.oh-programs-real__icon svg { width: 24px; height: 24px; }
.oh-programs-real__card h3 {
font-size: 17px;
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.01em;
line-height: 1.3;
margin: 0;
}
.oh-programs-real__card p {
font-size: 14.5px;
line-height: 1.65;
color: #555;
margin: 0;
}
/* MEMBER VOICE -------------------------------------------------------- */
.oh-programs-voice {
background: #fff;
padding: 32px 0 96px;
}
.oh-programs-voice__inner {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.oh-programs-voice__rule {
width: 48px;
height: 2px;
background: #1d3766;
opacity: 0.4;
margin: 0 auto 28px;
border-radius: 2px;
}
.oh-programs-voice__quote {
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 500;
color: #1a1a2e;
letter-spacing: -0.01em;
line-height: 1.45;
margin: 0 0 22px;
}
.oh-programs-voice__attr {
font-size: 13.5px;
letter-spacing: 0.04em;
color: #777;
margin: 0;
text-transform: uppercase;
font-weight: 600;
}
/* WARM CLOSE ---------------------------------------------------------- */
.oh-programs-warmclose {
background: #fff;
padding: 0 0 120px;
}
.oh-programs-warmclose__inner {
background: linear-gradient(180deg, #fafbfd 0%, #f0f3f8 100%);
border: 1px solid #e8ecf0;
border-radius: 24px;
padding: 64px 56px;
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 56px;
align-items: center;
}
.oh-programs-warmclose__copy h2 {
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.02em;
line-height: 1.12;
margin: 14px 0 16px;
}
.oh-programs-warmclose__copy p {
font-size: 17px;
line-height: 1.7;
color: #555;
margin: 0 0 28px;
max-width: 520px;
}
.oh-programs-warmclose__ctas {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.oh-programs-warmclose__btn {
display: inline-block;
background: #1d3766;
color: #fff;
padding: 14px 32px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-programs-warmclose__btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.oh-programs-warmclose__panel {
background: #fff;
border: 1px solid #e8ecf0;
border-radius: 18px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.oh-programs-warmclose__photo {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
}
.oh-programs-warmclose__list {
list-style: none;
margin: 0;
padding: 24px 26px 22px;
display: flex;
flex-direction: column;
gap: 12px;
}
.oh-programs-warmclose__list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14.5px;
line-height: 1.5;
color: #555;
}
.oh-programs-warmclose__list li svg {
width: 20px;
height: 20px;
flex: 0 0 20px;
margin-top: 1px;
}
.oh-programs-warmclose__list li strong {
color: #1a1a2e;
font-weight: 700;
margin-right: 4px;
}
/* RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 1024px) {
.oh-programs-life { padding: 72px 0 64px; }
.oh-programs-life__grid {
grid-template-columns: repeat(2, 1fr);
}
.oh-life-tile--big,
.oh-life-tile--portrait,
.oh-life-tile--square { grid-column: span 1; }
.oh-programs-real__inner { padding: 56px 40px; }
.oh-programs-real__grid { grid-template-columns: 1fr 1fr; }
.oh-programs-warmclose__inner {
grid-template-columns: 1fr;
padding: 56px 40px;
gap: 36px;
}
.oh-programs-warmclose__copy p { max-width: 100%; }
.oh-programs-warmclose__panel { max-width: 480px; }
}
@media (max-width: 760px) {
.oh-programs-life { padding: 56px 0 48px; }
.oh-programs-life__intro { margin-bottom: 36px; }
.oh-programs-life__grid {
grid-template-columns: 1fr;
gap: 14px;
}
.oh-life-tile--big,
.oh-life-tile--portrait,
.oh-life-tile--square { grid-column: span 1; }
.oh-programs-real { padding: 16px 0 64px; }
.oh-programs-real__inner { padding: 48px 24px; border-radius: 18px; }
.oh-programs-real__grid { grid-template-columns: 1fr; }
.oh-programs-voice { padding: 16px 0 56px; }
.oh-programs-warmclose { padding: 0 0 64px; }
.oh-programs-warmclose__inner { padding: 44px 24px; border-radius: 18px; }
.oh-programs-warmclose__ctas { flex-direction: column; align-items: flex-start; gap: 16px; }
.oh-programs-warmclose__btn { width: 100%; text-align: center; }
}
/* Hero video smooth fade in - no flash */
.oh-hero-video { opacity: 0; transition: opacity 0.6s ease-in-out; }
.oh-hero-video.is-ready { opacity: 1; }
/* Show poster image instantly before video loads */
.oh-hero-inner {
background-image: url('/wp-content/uploads/oh-hero-poster.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-color: #000000 !important;
}
/* Show poster image instantly before video loads */
.oh-hero-inner {
background-image: url('/wp-content/uploads/oh-hero-poster.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-color: #000000 !important;
}
/* Override all video fade nonsense - show immediately */
.oh-hero-video,
.oh-hero-video.is-ready,
.oh-hero-video.loaded {
opacity: 1 !important;
transition: none !important;
animation: none !important;
}