/* =========================================================================
Block styles — each shortcode here
========================================================================= */
/* ---------- Mini service-area strip (Hims / Ro style row) ---------- */
.alch-strip {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.25rem;
background: var(--alch-midnight-800);
padding: 0.85rem 1rem;
border-top: 1px solid var(--alch-border-dark);
border-bottom: 1px solid var(--alch-border-dark);
}
.alch-strip__item {
color: var(--alch-ivory);
text-decoration: none;
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 0.55rem 1.1rem;
border-radius: 999px;
transition: background var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease);
display: inline-flex; align-items: center; gap: 0.5rem;
}
.alch-strip__item svg,
.alch-strip__item img { width: 16px; height: 16px; }
.alch-strip__item:hover,
.alch-strip__item.is-active {
background: rgba(212, 175, 55, 0.14);
color: var(--alch-gold-200);
}
.alch-strip__item.is-active { color: var(--alch-gold-500); }
/* Light variant (over dark hero photos) */
.alch-strip--ghost {
background: rgba(10, 15, 31, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 0;
}
/* ---------- NABP compounded callout ---------- */
.alch-nabp {
display: inline-flex;
align-items: center;
gap: 0.9rem;
padding: 0.7rem 1rem;
border: 1px solid var(--alch-border-dark);
background: rgba(10, 15, 31, 0.04);
border-radius: var(--alch-radius-sm);
font-family: var(--alch-font-ui);
font-size: 0.8rem;
color: var(--alch-midnight-800);
letter-spacing: 0.02em;
}
.alch-nabp__logo {
width: 44px; height: 44px; flex-shrink: 0;
background-image: url('../img/nabp-seal.svg');
background-repeat: no-repeat; background-size: contain;
}
.alch-nabp__text strong {
font-family: var(--alch-font-head);
letter-spacing: 0.08em;
text-transform: uppercase;
display: block;
font-size: 0.72rem;
color: var(--alch-gold-700);
}
.alch-nabp--dark {
background: var(--alch-midnight-800);
color: var(--alch-ivory);
border-color: var(--alch-gold-700);
}
.alch-nabp--dark .alch-nabp__text strong { color: var(--alch-gold-400); }
/* ---------- Drug comparison chart (testosterone options, etc.) ---------- */
.alch-compare {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 2rem 0;
font-family: var(--alch-font-ui);
border-radius: var(--alch-radius);
overflow: hidden;
box-shadow: var(--alch-shadow-soft);
}
.alch-compare thead th {
background: var(--alch-grad-midnight);
color: var(--alch-ivory);
padding: 1rem 1.1rem;
font-family: var(--alch-font-head);
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: left;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.alch-compare thead th:first-child { border-top-left-radius: var(--alch-radius); }
.alch-compare thead th:last-child { border-top-right-radius: var(--alch-radius); }
.alch-compare tbody td {
padding: 0.95rem 1.1rem;
border-bottom: 1px solid var(--alch-border);
vertical-align: top;
font-size: 0.95rem;
color: var(--alch-midnight-800);
background: #fff;
}
.alch-compare tbody tr:nth-child(even) td { background: var(--alch-paper); }
.alch-compare th[scope="row"] {
text-align: left;
font-family: var(--alch-font-head);
font-size: 0.82rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--alch-slate);
width: 200px;
background: inherit;
}
.alch-compare td.is-yes::before {
content: "✓ "; color: var(--alch-gold-700); font-weight: 700;
}
.alch-compare td.is-no::before {
content: "— "; color: var(--alch-slate);
}
/* ---------- Feature trio (simplified feature panels, no popup) ---------- */
.alch-trio {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
max-width: var(--alch-container);
margin: 0 auto;
}
@media (max-width: 820px) { .alch-trio { grid-template-columns: 1fr; } }
.alch-trio__card {
position: relative;
overflow: hidden;
border-radius: var(--alch-radius-lg);
background: var(--alch-midnight-800);
color: var(--alch-ivory);
aspect-ratio: 3 / 4;
box-shadow: var(--alch-shadow-lift);
text-decoration: none;
}
.alch-trio__card img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
opacity: 0.78;
transition: transform var(--alch-dur) var(--alch-ease),
opacity var(--alch-dur) var(--alch-ease);
}
.alch-trio__card:hover img { transform: scale(1.04); opacity: 1; }
.alch-trio__card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(5,8,15,0.78) 100%);
pointer-events: none;
}
.alch-trio__body {
position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
z-index: 2;
}
.alch-trio__title {
font-family: var(--alch-font-head);
font-size: 1.3rem;
letter-spacing: 0.05em;
color: #fff;
margin-bottom: 0.35rem;
}
.alch-trio__sub {
font-family: var(--alch-font-ui);
font-size: 0.82rem;
color: var(--alch-gold-200);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ---------- Safety info block (FDA MedWatch, prescribing info link) ---------- */
.alch-safety {
border-left: 3px solid var(--alch-gold-500);
background: var(--alch-paper);
padding: 1.25rem 1.5rem;
border-radius: 0 var(--alch-radius-sm) var(--alch-radius-sm) 0;
font-family: var(--alch-font-ui);
font-size: 0.92rem;
color: var(--alch-midnight-800);
}
.alch-safety h4 {
font-family: var(--alch-font-head);
font-size: 0.88rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--alch-gold-900);
margin: 0 0 0.5rem;
}
.alch-safety a {
color: var(--alch-midnight-700);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------- Treatment card (product card with badge-at-top) ---------- */
.alch-treatment {
position: relative;
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1.25rem;
background: #fff;
border: 1px solid var(--alch-border);
border-radius: var(--alch-radius);
box-shadow: var(--alch-shadow-soft);
transition: transform var(--alch-dur) var(--alch-ease),
box-shadow var(--alch-dur) var(--alch-ease);
}
.alch-treatment:hover { transform: translateY(-3px); box-shadow: var(--alch-shadow-lift); }
.alch-treatment__badge {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
background: var(--alch-grad-gold);
color: var(--alch-midnight-900);
padding: 0.3rem 0.9rem;
font-family: var(--alch-font-head);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 999px;
box-shadow: var(--alch-shadow-gold);
z-index: 2;
white-space: nowrap;
}
.alch-treatment__media {
aspect-ratio: 1 / 1;
border-radius: var(--alch-radius-sm);
overflow: hidden;
background: linear-gradient(180deg, var(--alch-bone), #fff);
display: flex; align-items: center; justify-content: center;
}
.alch-treatment__media img { max-width: 78%; max-height: 78%; object-fit: contain; }
.alch-treatment__title {
font-family: var(--alch-font-head);
font-size: 1.15rem;
color: var(--alch-midnight-800);
letter-spacing: 0.03em;
}
.alch-treatment__tag {
font-family: var(--alch-font-ui);
font-size: 0.7rem;
color: var(--alch-gold-700);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.alch-treatment__cta {
align-self: flex-start;
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--alch-midnight-800);
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px solid var(--alch-gold-500);
}
/* Women's variant: soft gold gradient surface */
.alch-treatment--womens {
background: linear-gradient(170deg, #fff 0%, #fbf7ea 60%, #f3e2a3 100%);
border-color: rgba(173, 135, 38, 0.28);
}
.alch-treatment--womens .alch-treatment__title { color: var(--alch-gold-900); }
/* Men's dark variant (for alternating patterns) */
.alch-treatment--mens-dark {
background: var(--alch-grad-midnight);
border-color: rgba(212, 175, 55, 0.14);
}
.alch-treatment--mens-dark .alch-treatment__title,
.alch-treatment--mens-dark .alch-treatment__tag { color: var(--alch-gold-400); }
.alch-treatment--mens-dark .alch-treatment__cta {
color: var(--alch-ivory);
border-bottom-color: var(--alch-gold-500);
}
.alch-treatment--mens-dark .alch-treatment__media {
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
}
/* =========================================================================
#5 Site footer (shortcode-footer.php)
-------------------------------------------------------------------------
Editorial midnight footer with brand block + tagline (left), email signup
(right), three column link group below, hairline gold separators, and
bottom monogram with copyright.
========================================================================= */
.alch-footer {
position: relative;
background:
radial-gradient(1100px 500px at 12% -10%, rgba(212, 175, 55, 0.10), transparent 60%),
radial-gradient(1400px 700px at 95% 110%, rgba(82, 93, 141, 0.18), transparent 55%),
linear-gradient(180deg, #0a0f1f 0%, #05080f 100%);
color: #f4ead6;
font-family: var(--alch-font-body);
padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) 2rem;
margin: 0;
overflow: hidden;
}
.alch-footer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45), transparent);
}
.alch-footer__inner {
max-width: 1200px;
margin: 0 auto;
}
.alch-footer__top {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
}
.alch-footer__brand { max-width: 26rem; }
.alch-footer__logo {
display: block;
width: clamp(140px, 14vw, 180px);
height: auto;
margin-bottom: 1.25rem;
filter: brightness(0) invert(1);
opacity: 0.95;
}
.alch-footer__tagline {
font-family: var(--alch-font-body);
font-size: clamp(0.95rem, 1.05vw, 1.05rem);
line-height: 1.6;
color: rgba(244, 234, 214, 0.7);
margin: 0;
}
.alch-footer__newsletter-title {
font-family: var(--alch-font-head);
font-size: clamp(1.5rem, 2.4vw, 2rem);
letter-spacing: 0.02em;
color: #f4ead6;
margin: 0 0 0.4rem;
font-weight: 500;
line-height: 1.15;
}
.alch-footer__newsletter-title em {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
letter-spacing: -0.005em;
color: var(--alch-gold-200);
}
.alch-footer__newsletter-copy {
font-size: 0.9rem;
color: rgba(244, 234, 214, 0.65);
margin: 0 0 1.1rem;
}
/* Form chrome — applied whether the user supplied a WPForms form or not. */
.alch-footer-newsletter,
.alch-footer-newsletter form,
.alch-footer-newsletter .wpforms-form {
margin: 0 !important;
}
.alch-footer-newsletter form,
.alch-footer-newsletter .wpforms-field-container,
.alch-footer-newsletter__form {
display: flex !important;
align-items: stretch;
gap: 0;
background: rgba(244, 234, 214, 0.06);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 999px;
padding: 6px;
max-width: 30rem;
}
.alch-footer-newsletter input[type="email"],
.alch-footer-newsletter input[type="text"],
.alch-footer-newsletter__form input {
flex: 1;
min-width: 0;
background: transparent !important;
border: 0 !important;
color: #f4ead6 !important;
font-family: var(--alch-font-ui);
font-size: 0.92rem;
padding: 0.7rem 1rem !important;
outline: none;
}
.alch-footer-newsletter input::placeholder { color: rgba(244, 234, 214, 0.45); }
.alch-footer-newsletter button[type="submit"],
.alch-footer-newsletter .wpforms-submit,
.alch-footer-newsletter__btn {
flex: 0 0 auto;
background: #f4ead6 !important;
color: #0a0f1f !important;
font-family: var(--alch-font-head);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
border: 0 !important;
border-radius: 999px;
padding: 0.7rem 1.25rem !important;
cursor: pointer;
transition: background var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease);
}
.alch-footer-newsletter button[type="submit"]:hover,
.alch-footer-newsletter .wpforms-submit:hover,
.alch-footer-newsletter__btn:hover {
background: var(--alch-gold-500) !important;
color: #0a0f1f !important;
}
.alch-footer__divider {
height: 1px;
margin: clamp(2.25rem, 4vw, 3.5rem) 0;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.32), transparent);
}
.alch-footer__columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 4vw, 4rem);
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.alch-footer__col-title {
font-family: var(--alch-font-head) !important;
font-size: 0.78rem !important;
letter-spacing: 0.32em !important;
text-transform: uppercase;
color: rgba(244, 234, 214, 0.55) !important;
margin: 0 0 1.3rem !important;
font-weight: 500;
}
.alch-footer__list {
list-style: none;
margin: 0;
padding: 0;
}
.alch-footer__list li + li { margin-top: 0.55rem; }
.alch-footer__list a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
color: #f4ead6;
font-family: var(--alch-font-body);
font-size: 1rem;
letter-spacing: 0.01em;
text-decoration: none;
padding: 0.45rem 0.75rem 0.45rem 0;
border-radius: 6px;
transition: color var(--alch-dur) var(--alch-ease),
padding var(--alch-dur) var(--alch-ease);
}
.alch-footer__list a:hover { color: var(--alch-gold-400); padding-left: 0.4rem; }
.alch-footer__list a span[aria-hidden] {
font-family: var(--alch-font-ui);
font-size: 1rem;
color: rgba(244, 234, 214, 0.4);
transition: transform var(--alch-dur) var(--alch-ease);
}
.alch-footer__list a:hover span[aria-hidden] {
transform: translateX(3px);
color: var(--alch-gold-400);
}
.alch-footer__list--social a { gap: 0.7rem; justify-content: flex-start; }
.alch-footer__list--social .alch-footer__social-icon {
width: 18px; height: 18px;
flex: 0 0 18px;
color: var(--alch-gold-400);
}
.alch-footer__bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
padding-top: clamp(1.5rem, 3vw, 2.25rem);
border-top: 1px solid rgba(212, 175, 55, 0.18);
text-align: center;
}
.alch-footer__monogram {
font-family: var(--alch-font-head);
font-size: 1.6rem;
color: var(--alch-gold-400);
letter-spacing: 0.08em;
}
.alch-footer__copy {
font-size: 0.78rem;
letter-spacing: 0.06em;
color: rgba(244, 234, 214, 0.45);
}
/* Mobile — collapse the top split, full-width form, single-column columns. */
@media (max-width: 820px) {
.alch-footer__top { grid-template-columns: 1fr; gap: 2rem; }
.alch-footer__columns { grid-template-columns: 1fr; gap: 2rem; }
.alch-footer__col + .alch-footer__col { padding-top: 1.5rem; border-top: 1px solid rgba(212, 175, 55, 0.12); }
.alch-footer-newsletter form,
.alch-footer-newsletter__form { width: 100%; max-width: none; }
}
/* Outer wrapper: pixfort sets bg-white on #pix-page-footer; we override
so our footer can paint the entire bottom of the page. */
#pix-page-footer.site-footer2 { background: transparent !important; }
#pix-page-footer .container,
#pix-page-footer .container-fluid { padding: 0 !important; max-width: none !important; }
/* =========================================================================
#2 Us vs Them comparison ([alch_comparison])
========================================================================= */
.alch-cmp {
background: linear-gradient(180deg, #fbf9f4 0%, #ffffff 100%);
padding: clamp(3rem, 7vw, 6rem) 1rem;
font-family: var(--alch-font-body);
color: var(--alch-midnight-900);
}
.alch-cmp__inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(0, 2.5fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
.alch-cmp__intro { padding-top: 0.5rem; }
.alch-cmp__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--alch-midnight-700);
border: 1px solid rgba(10, 15, 31, 0.12);
padding: 0.4rem 0.85rem;
border-radius: 999px;
background: #fff;
margin-bottom: 1.5rem;
}
.alch-cmp__eyebrow-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--alch-midnight-700);
}
.alch-cmp__title {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.05;
margin: 0 0 0.6rem;
color: var(--alch-midnight-900);
font-weight: 500;
}
.alch-cmp__title::after {
content: "";
display: block;
width: 80px; height: 1px;
background: var(--alch-midnight-900);
margin-top: 0.65rem;
}
.alch-cmp__subtitle {
font-size: clamp(0.95rem, 1vw, 1.05rem);
color: var(--alch-slate);
max-width: 24rem;
margin: 0;
}
/* Table built as CSS grid so the highlighted "Us" column can have its own
surrounding card without breaking horizontal alignment. */
.alch-cmp__table {
position: relative;
display: grid;
grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(80px, 1fr));
background: #fff;
border: 1px solid rgba(10, 15, 31, 0.08);
border-radius: var(--alch-radius);
overflow: hidden;
}
.alch-cmp__row { display: contents; }
.alch-cmp__cell {
padding: 1.1rem 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
color: var(--alch-slate);
border-top: 1px solid rgba(10, 15, 31, 0.06);
}
.alch-cmp__cell--feature {
justify-content: flex-start;
gap: 0.7rem;
color: var(--alch-midnight-900);
background: #fafaf6;
font-family: var(--alch-font-ui);
font-size: 0.9rem;
letter-spacing: 0.005em;
}
.alch-cmp__feature-icon {
width: 32px; height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--alch-midnight-700);
border: 1px solid rgba(10, 15, 31, 0.08);
}
.alch-cmp__feature-icon svg { width: 14px; height: 14px; }
.alch-cmp__row--head .alch-cmp__cell {
border-top: 0;
font-family: var(--alch-font-head);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.04em;
background: #fafaf6;
color: var(--alch-midnight-900);
padding: 1.2rem 1rem;
}
.alch-cmp__row--head .alch-cmp__cell--feature { background: #fff; }
/* The highlighted "Us" column is implemented by giving each .--us cell a
midnight surface with rounded corners + extra padding ring; the head cell
pokes above the table. */
.alch-cmp__cell--us {
background: var(--alch-midnight-800);
color: var(--alch-ivory);
border-top-color: rgba(244, 234, 214, 0.06);
position: relative;
}
.alch-cmp__row--head .alch-cmp__cell--us {
background: var(--alch-midnight-900);
color: var(--alch-ivory);
font-family: var(--alch-font-head);
font-size: 1.1rem;
letter-spacing: 0.06em;
border-radius: var(--alch-radius) var(--alch-radius) 0 0;
margin-top: -10px;
padding-top: calc(1.2rem + 10px);
box-shadow: 0 -8px 22px rgba(10, 15, 31, 0.18);
}
.alch-cmp__row:last-child .alch-cmp__cell--us {
border-radius: 0 0 var(--alch-radius) var(--alch-radius);
padding-bottom: calc(1.1rem + 6px);
box-shadow: 0 8px 22px rgba(10, 15, 31, 0.18);
}
.alch-cmp__check {
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.alch-cmp__check svg { width: 14px; height: 14px; }
.alch-cmp__check--filled {
background: #f4ead6;
color: var(--alch-midnight-900);
}
.alch-cmp__check--quiet {
background: rgba(10, 15, 31, 0.05);
color: var(--alch-slate);
}
.alch-cmp__cell--us .alch-cmp__check--filled {
background: var(--alch-ivory);
color: var(--alch-midnight-900);
}
.alch-cmp__dash {
font-family: var(--alch-font-ui);
color: rgba(10, 15, 31, 0.32);
font-size: 1.1rem;
letter-spacing: 0.05em;
}
.alch-cmp__cell--us .alch-cmp__dash { color: rgba(244, 234, 214, 0.5); }
.alch-cmp__text {
font-family: var(--alch-font-ui);
font-size: 0.85rem;
color: var(--alch-slate);
letter-spacing: 0.01em;
}
.alch-cmp__cell--us .alch-cmp__text { color: rgba(244, 234, 214, 0.85); }
.alch-cmp__footnote {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1.25rem;
font-family: var(--alch-font-ui);
font-size: 0.78rem;
color: var(--alch-slate);
letter-spacing: 0.02em;
grid-column: 1 / -1;
}
.alch-cmp__footnote svg { width: 14px; height: 14px; color: var(--alch-midnight-700); }
/* Mobile: stack intro above table; convert table to a card list. */
@media (max-width: 880px) {
.alch-cmp__inner { grid-template-columns: 1fr; }
.alch-cmp__table {
grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
.alch-cmp__row--head .alch-cmp__cell {
font-size: 0.85rem; padding: 0.9rem 0.4rem;
}
.alch-cmp__cell { padding: 0.8rem 0.4rem; font-size: 0.82rem; }
.alch-cmp__feature-label { font-size: 0.78rem; }
.alch-cmp__feature-icon { display: none; }
.alch-cmp__cell--feature { padding-left: 0.75rem; }
}
/* =========================================================================
#3 Treatment Areas — left rail tabs + fading hero ([alch_treatment_areas])
-------------------------------------------------------------------------
Men: midnight accent (default)
Women: gold gradient accent (set on .alch-areas[data-gender="women"])
========================================================================= */
.alch-areas {
--alch-areas-accent: var(--alch-midnight-800);
--alch-areas-accent-soft: rgba(10, 15, 31, 0.06);
--alch-areas-accent-grad: var(--alch-grad-midnight);
background: var(--alch-paper);
padding: clamp(3rem, 6vw, 5.5rem) 1rem;
font-family: var(--alch-font-body);
transition: background var(--alch-dur) var(--alch-ease);
}
.alch-areas[data-gender="women"] {
--alch-areas-accent: var(--alch-gold-700);
--alch-areas-accent-soft: rgba(173, 135, 38, 0.08);
--alch-areas-accent-grad: var(--alch-grad-gold);
background:
radial-gradient(1100px 700px at 80% 0%, rgba(243, 226, 163, 0.35), transparent 60%),
var(--alch-paper);
}
.alch-areas__inner {
max-width: 1180px;
margin: 0 auto;
}
.alch-areas__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
margin-bottom: 2rem;
}
.alch-areas__eyebrow {
display: inline-block;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-areas-accent);
margin-bottom: 0.7rem;
}
.alch-areas__title {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 4vw, 3.4rem);
margin: 0 0 0.5rem;
letter-spacing: 0.005em;
font-weight: 500;
line-height: 1.05;
color: var(--alch-midnight-900);
}
.alch-areas__subtitle {
max-width: 36rem;
font-size: clamp(0.95rem, 1vw, 1.05rem);
color: var(--alch-slate);
margin: 0;
}
.alch-areas__gender {
display: inline-flex;
background: rgba(10, 15, 31, 0.05);
border-radius: 999px;
padding: 4px;
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.alch-areas__gender-btn {
background: transparent;
border: 0;
padding: 0.55rem 1.1rem;
border-radius: 999px;
cursor: pointer;
color: var(--alch-slate);
font: inherit;
transition: background var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease);
}
.alch-areas__gender-btn.is-active {
background: var(--alch-areas-accent);
color: var(--alch-ivory);
box-shadow: 0 6px 18px rgba(10, 15, 31, 0.2);
}
.alch-areas[data-gender="women"] .alch-areas__gender-btn.is-active {
background: var(--alch-grad-gold);
color: var(--alch-midnight-900);
box-shadow: var(--alch-shadow-gold);
}
.alch-areas__body {
display: grid;
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
gap: 1.5rem;
align-items: stretch;
}
.alch-areas__rail {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: #fff;
border: 1px solid rgba(10, 15, 31, 0.06);
border-radius: var(--alch-radius);
padding: 0.75rem;
align-self: stretch;
box-shadow: var(--alch-shadow-soft);
}
.alch-areas__rail[hidden] { display: none; }
.alch-areas__tab {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.95rem 1.1rem;
background: transparent;
border: 0;
border-radius: 10px;
font-family: var(--alch-font-ui);
font-size: 0.85rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--alch-slate);
cursor: pointer;
text-align: left;
position: relative;
transition: background var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease);
}
.alch-areas__tab-icon {
width: 22px; height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--alch-areas-accent);
}
.alch-areas__tab-icon svg { width: 18px; height: 18px; }
.alch-areas__tab-label { flex: 1; }
.alch-areas__tab-arrow {
font-family: var(--alch-font-body);
font-size: 1.1rem;
color: rgba(10, 15, 31, 0.25);
transition: color var(--alch-dur) var(--alch-ease),
transform var(--alch-dur) var(--alch-ease);
}
.alch-areas__tab:hover {
background: var(--alch-areas-accent-soft);
color: var(--alch-midnight-900);
}
.alch-areas__tab.is-active {
background: var(--alch-areas-accent);
color: var(--alch-ivory);
box-shadow: 0 8px 22px rgba(10, 15, 31, 0.18);
}
.alch-areas[data-gender="women"] .alch-areas__tab.is-active {
background: var(--alch-grad-gold);
color: var(--alch-midnight-900);
box-shadow: var(--alch-shadow-gold);
}
.alch-areas__tab.is-active .alch-areas__tab-icon,
.alch-areas__tab.is-active .alch-areas__tab-arrow { color: inherit; }
.alch-areas__tab.is-active .alch-areas__tab-arrow { transform: translateX(3px); }
.alch-areas__stage {
position: relative;
border-radius: var(--alch-radius);
overflow: hidden;
min-height: clamp(320px, 38vw, 460px);
background: var(--alch-midnight-800);
isolation: isolate;
}
.alch-areas__stage[hidden] { display: none; }
.alch-areas__panel {
position: absolute; inset: 0;
opacity: 0;
transition: opacity 540ms var(--alch-ease);
pointer-events: none;
}
.alch-areas__panel.is-active { opacity: 1; pointer-events: auto; }
.alch-areas__photo {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.04);
transition: transform 1.2s var(--alch-ease);
}
.alch-areas__panel.is-active .alch-areas__photo { transform: scale(1); }
.alch-areas__photo-fade {
position: absolute; inset: 0;
background:
linear-gradient(to right, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.85) 28%, rgba(255, 255, 255, 0) 60%),
linear-gradient(to top, rgba(10, 15, 31, 0.18), transparent 50%);
}
.alch-areas[data-gender="women"] .alch-areas__photo-fade {
background:
linear-gradient(to right, rgba(255, 251, 230, 0.95) 0%, rgba(255, 251, 230, 0.78) 30%, rgba(255, 251, 230, 0) 65%),
linear-gradient(to top, rgba(173, 135, 38, 0.18), transparent 50%);
}
.alch-areas__overlay {
position: absolute;
top: 50%;
left: clamp(1.25rem, 4vw, 3rem);
transform: translateY(-50%);
max-width: 24rem;
padding: clamp(1.25rem, 2vw, 1.75rem);
}
.alch-areas__overlay-title {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.5rem, 2.6vw, 2.4rem);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--alch-midnight-900);
margin: 0 0 0.7rem;
font-weight: 500;
line-height: 1.05;
}
.alch-areas[data-gender="women"] .alch-areas__overlay-title { color: var(--alch-gold-900); }
.alch-areas__overlay-copy {
font-size: 0.95rem;
color: var(--alch-slate);
line-height: 1.6;
margin: 0 0 1.25rem;
}
.alch-areas__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--alch-midnight-900);
color: var(--alch-ivory);
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.85rem 1.35rem;
border-radius: 999px;
text-decoration: none;
transition: background var(--alch-dur) var(--alch-ease),
transform var(--alch-dur) var(--alch-ease);
}
.alch-areas__cta:hover { background: var(--alch-midnight-700); transform: translateY(-1px); }
.alch-areas[data-gender="women"] .alch-areas__cta {
background: var(--alch-grad-gold);
color: var(--alch-midnight-900);
}
.alch-areas[data-gender="women"] .alch-areas__cta:hover { background: var(--alch-gold-500); }
.alch-areas__trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
background: #fff;
border: 1px solid rgba(10, 15, 31, 0.06);
border-radius: var(--alch-radius);
padding: 1.1rem 1.25rem;
margin-top: 1.5rem;
box-shadow: var(--alch-shadow-soft);
}
.alch-areas__trust-item {
display: flex;
align-items: center;
gap: 0.7rem;
font-family: var(--alch-font-ui);
font-size: 0.82rem;
color: var(--alch-slate);
}
.alch-areas__trust-item strong {
display: block;
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--alch-midnight-900);
}
.alch-areas__trust-icon {
width: 36px; height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--alch-areas-accent-soft);
color: var(--alch-areas-accent);
flex: 0 0 36px;
}
.alch-areas__trust-icon svg { width: 18px; height: 18px; }
@media (max-width: 880px) {
.alch-areas__header { flex-direction: column; align-items: flex-start; }
.alch-areas__body { grid-template-columns: 1fr; }
.alch-areas__rail {
flex-direction: row;
overflow-x: auto;
padding: 0.5rem;
gap: 0.4rem;
scroll-snap-type: x mandatory;
}
.alch-areas__tab {
flex: 0 0 auto;
scroll-snap-align: start;
padding: 0.7rem 0.95rem;
font-size: 0.74rem;
}
.alch-areas__tab-arrow { display: none; }
.alch-areas__stage { min-height: 360px; }
.alch-areas__overlay { max-width: none; right: clamp(1.25rem, 4vw, 3rem); }
.alch-areas__photo-fade {
background:
linear-gradient(to top, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.7) 35%, rgba(255, 255, 255, 0) 70%);
}
.alch-areas[data-gender="women"] .alch-areas__photo-fade {
background:
linear-gradient(to top, rgba(255, 251, 230, 0.94) 0%, rgba(255, 251, 230, 0.65) 35%, rgba(255, 251, 230, 0) 70%);
}
.alch-areas__overlay { top: auto; bottom: 1rem; transform: none; }
.alch-areas__trust { grid-template-columns: 1fr; }
}
/* =========================================================================
#4 Featured Treatments — tall variant ([alch_treatments_tall])
========================================================================= */
.alch-rxtall {
background: var(--alch-paper);
padding: clamp(3rem, 6vw, 5.5rem) 1rem;
}
.alch-rxtall__inner { max-width: 1180px; margin: 0 auto; }
.alch-rxtall__header { text-align: center; margin-bottom: 2.25rem; }
.alch-rxtall__eyebrow {
display: inline-block;
font-family: var(--alch-font-ui);
font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--alch-gold-700); margin-bottom: 0.6rem;
}
.alch-rxtall__title {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--alch-midnight-900);
margin: 0 0 0.8rem;
font-weight: 500;
}
.alch-rxtall__subtitle {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(0.95rem, 1.05vw, 1.1rem);
color: var(--alch-slate);
max-width: 38rem; margin: 0 auto;
}
.alch-rxtall__grid {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
.alch-rxtall__card {
position: relative;
background: #fff;
border: 1px solid rgba(212, 175, 55, 0.22);
border-radius: var(--alch-radius);
padding: 1.1rem 1rem 1.4rem;
display: flex; flex-direction: column; align-items: center;
text-align: center;
transition: transform var(--alch-dur) var(--alch-ease),
box-shadow var(--alch-dur) var(--alch-ease);
}
.alch-rxtall__card:hover {
transform: translateY(-4px);
box-shadow: var(--alch-shadow-lift);
border-color: rgba(212, 175, 55, 0.55);
}
.alch-rxtall__tag {
position: absolute; top: 1rem; left: 50%;
transform: translateX(-50%);
font-family: var(--alch-font-ui);
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-gold-900);
background: linear-gradient(135deg, #fff8e1 0%, #f3e2a3 100%);
border: 1px solid rgba(212, 175, 55, 0.45);
padding: 0.3rem 0.7rem;
border-radius: 999px;
z-index: 2;
}
.alch-rxtall__media {
display: block;
width: 100%;
aspect-ratio: 3 / 5; /* tall, vial-shaped frame */
margin: 1.5rem 0 1rem;
overflow: hidden;
border-radius: 12px;
position: relative;
background: linear-gradient(180deg, #f8f4ec 0%, #efe9dc 100%);
}
.alch-rxtall__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.8s var(--alch-ease);
}
/* Soft gold halo behind the image for depth */
.alch-rxtall__media::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 80%, rgba(212, 175, 55, 0.18), transparent 65%);
pointer-events: none;
z-index: 1;
}
.alch-rxtall__card:hover .alch-rxtall__media img { transform: scale(1.04); }
.alch-rxtall__name {
font-family: var(--alch-font-head) !important;
font-size: 1rem; line-height: 1.2;
letter-spacing: 0.04em;
color: var(--alch-midnight-900);
margin: 0.5rem 0 0.5rem;
min-height: 3.4em;
font-weight: 500;
}
.alch-rxtall__copy {
font-size: 0.86rem; line-height: 1.5;
color: var(--alch-slate);
margin: 0 0 1.1rem;
flex: 1;
}
.alch-rxtall__ctas {
display: flex; flex-direction: column; gap: 0.5rem;
width: 100%;
}
.alch-rxtall__btn-primary {
display: inline-flex; align-items: center; justify-content: center;
background: var(--alch-midnight-900);
color: var(--alch-ivory);
font-family: var(--alch-font-head);
font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
padding: 0.8rem 1rem;
border-radius: 999px;
text-decoration: none;
transition: background var(--alch-dur) var(--alch-ease);
}
.alch-rxtall__btn-primary:hover { background: var(--alch-gold-700); color: var(--alch-ivory); }
.alch-rxtall__btn-link {
font-family: var(--alch-font-ui);
font-size: 0.78rem; letter-spacing: 0.04em;
color: var(--alch-midnight-700);
text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
gap: 0.3rem;
}
.alch-rxtall__btn-link:hover { color: var(--alch-gold-700); }
.alch-rxtall__btn-link span { transition: transform var(--alch-dur) var(--alch-ease); }
.alch-rxtall__btn-link:hover span { transform: translateX(3px); }
@media (max-width: 1100px) {
.alch-rxtall__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.alch-rxtall__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
@media (max-width: 460px) {
.alch-rxtall__grid { grid-template-columns: 1fr; }
}
/* =========================================================================
#6 What's Included ([alch_whats_included])
========================================================================= */
.alch-incl {
background: var(--alch-paper);
padding: clamp(3rem, 6vw, 5.5rem) 1rem;
}
.alch-incl__inner {
max-width: 1180px; margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.alch-incl__title {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.1; letter-spacing: 0.005em;
color: var(--alch-midnight-900);
margin: 0 0 1rem;
font-weight: 500;
}
.alch-incl__lede {
font-size: clamp(0.95rem, 1vw, 1.1rem);
color: var(--alch-slate);
max-width: 30rem;
margin: 0 0 1.4rem;
line-height: 1.65;
}
.alch-incl__checks {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0.65rem;
}
.alch-incl__checks li {
display: flex; align-items: center; gap: 0.7rem;
font-family: var(--alch-font-ui);
font-size: 0.95rem;
color: var(--alch-midnight-900);
}
.alch-incl__check-icon {
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(46, 124, 90, 0.12);
color: #2e7c5a;
flex: 0 0 22px;
}
.alch-incl__check-icon svg { width: 12px; height: 12px; }
.alch-incl__media {
position: relative;
border-radius: var(--alch-radius);
overflow: hidden;
background:
radial-gradient(900px 500px at 50% 60%, rgba(212, 175, 55, 0.08), transparent 60%),
linear-gradient(180deg, #f4f0e6 0%, #e9e3d2 100%);
min-height: 360px;
}
.alch-incl__photo {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.alch-incl__photo img {
max-width: 70%; height: auto;
filter: drop-shadow(0 28px 40px rgba(10, 15, 31, 0.32));
}
.alch-incl__kit {
position: absolute;
right: clamp(1rem, 2vw, 1.6rem);
bottom: clamp(1rem, 2vw, 1.6rem);
background: #fff;
border: 1px solid rgba(10, 15, 31, 0.06);
border-radius: 14px;
padding: 1rem 1.1rem;
box-shadow: var(--alch-shadow-lift);
min-width: 200px;
max-width: 90%;
}
.alch-incl__kit-title {
font-family: var(--alch-font-head) !important;
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-midnight-900);
margin: 0 0 0.85rem;
font-weight: 500;
text-align: center;
}
.alch-incl__kit-list {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
}
.alch-incl__kit-list li {
display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
font-family: var(--alch-font-ui);
font-size: 0.66rem;
letter-spacing: 0.05em;
color: var(--alch-slate);
text-align: center;
line-height: 1.2;
}
.alch-incl__kit-icon {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--alch-midnight-700);
}
.alch-incl__kit-icon svg { width: 22px; height: 22px; }
@media (max-width: 880px) {
.alch-incl__inner { grid-template-columns: 1fr; }
.alch-incl__kit { position: static; margin-top: 1rem; max-width: none; }
.alch-incl__media { min-height: 280px; }
}
/* =========================================================================
#8 Blood Work Markers — chrome gradient panel ([alch_blood_markers])
========================================================================= */
.alch-markers {
background: var(--alch-paper);
padding: clamp(2.5rem, 5vw, 4rem) 1rem;
}
.alch-markers__inner { max-width: 1180px; margin: 0 auto; }
/* Panel header — chrome gradient surface */
.alch-markers__panel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)),
linear-gradient(135deg, #d8d4cb 0%, #f2eee5 25%, #ffffff 45%, #e5e0d3 70%, #c8c2b3 100%);
border: 1px solid rgba(10, 15, 31, 0.1);
border-radius: var(--alch-radius);
padding: 1.1rem 1.4rem;
box-shadow: var(--alch-shadow-soft);
}
.alch-markers__panel-l { display: flex; gap: 1rem; align-items: center; }
.alch-markers__icon {
width: 44px; height: 44px;
background:
linear-gradient(135deg, #2c3251 0%, #0a0f1f 100%);
color: var(--alch-gold-400);
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 44px;
}
.alch-markers__icon svg { width: 22px; height: 22px; }
.alch-markers__eyebrow {
display: inline-block;
font-family: var(--alch-font-ui);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-slate);
}
.alch-markers__name {
font-family: var(--alch-font-head) !important;
font-size: 1.25rem; margin: 0.15rem 0 0.2rem;
letter-spacing: 0.02em;
color: var(--alch-midnight-900);
font-weight: 500;
display: flex; align-items: baseline; gap: 0.6rem;
}
.alch-markers__count {
font-family: var(--alch-font-ui);
font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--alch-slate); font-style: normal;
}
.alch-markers__desc {
font-size: 0.88rem;
color: var(--alch-slate);
margin: 0;
}
.alch-markers__cta {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--alch-font-head);
font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--alch-midnight-900);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(10, 15, 31, 0.12);
padding: 0.7rem 1.1rem;
border-radius: 999px;
text-decoration: none;
flex: 0 0 auto;
transition: background var(--alch-dur) var(--alch-ease);
}
.alch-markers__cta:hover { background: #fff; color: var(--alch-midnight-900); }
/* Marker card grid */
.alch-markers__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.alch-markers__card {
position: relative;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)),
linear-gradient(160deg, #ece8de 0%, #f8f5ec 30%, #ffffff 50%, #e9e3d2 80%, #cbc5b6 100%);
border: 1px solid rgba(10, 15, 31, 0.08);
border-radius: var(--alch-radius);
padding: 1.1rem 1.2rem 1.25rem;
display: flex; flex-direction: column;
box-shadow: 0 4px 14px rgba(10, 15, 31, 0.06);
}
.alch-markers__card-pills {
display: flex; gap: 0.4rem;
margin-bottom: 1rem;
}
.alch-markers__pill {
font-family: var(--alch-font-ui);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 999px;
font-weight: 500;
}
.alch-markers__pill--status {
background: var(--alch-midnight-900);
color: var(--alch-ivory);
}
.alch-markers__pill--tier {
background: linear-gradient(135deg, #fff8e1 0%, #f3e2a3 100%);
color: var(--alch-gold-900);
border: 1px solid rgba(212, 175, 55, 0.4);
}
.alch-markers__card-ref {
position: absolute;
top: 1rem; right: 1.2rem;
text-align: right;
}
.alch-markers__ref-label {
display: block;
font-family: var(--alch-font-ui);
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--alch-slate);
}
.alch-markers__ref-value {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.85rem;
color: var(--alch-midnight-700);
}
.alch-markers__card-name {
font-family: var(--alch-font-head) !important;
font-size: 1.6rem;
letter-spacing: 0.005em;
color: var(--alch-midnight-900);
margin: 0 0 0.5rem;
font-weight: 500;
line-height: 1.05;
}
.alch-markers__card-lead {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
color: var(--alch-slate);
margin: 0 0 1.1rem;
line-height: 1.45;
}
.alch-markers__details {
margin: 0.5rem 0 0;
display: flex; flex-direction: column; gap: 0.85rem;
border-top: 1px solid rgba(10, 15, 31, 0.08);
padding-top: 0.95rem;
}
.alch-markers__details dt {
font-family: var(--alch-font-head);
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-midnight-900);
margin-bottom: 0.25rem;
position: relative;
padding-left: 1.2rem;
}
.alch-markers__details dt::before {
content: "";
position: absolute;
left: 0; top: 0.05em;
width: 14px; height: 14px;
border-radius: 4px;
background: linear-gradient(135deg, #fff7d6, #f3e2a3);
border: 1px solid rgba(212, 175, 55, 0.45);
}
.alch-markers__details dd {
margin: 0 0 0 1.2rem;
font-size: 0.82rem;
color: var(--alch-slate);
line-height: 1.55;
}
@media (max-width: 980px) {
.alch-markers__panel { flex-direction: column; align-items: flex-start; }
.alch-markers__cta { align-self: flex-end; }
.alch-markers__grid { grid-template-columns: 1fr; }
.alch-markers__card-ref { position: static; text-align: left; margin-bottom: 0.5rem; }
}
/* =========================================================================
#9 Health Portal — phone+EHR mockup ([alch_health_portal])
-------------------------------------------------------------------------
Cream/midnight palette with a single gold ring for the wellness meter.
The phone body, screen, and app UI are pure HTML/CSS so it scales without
external assets and stays sharp on retina.
========================================================================= */
.alch-portal {
background:
radial-gradient(900px 500px at 0% 0%, rgba(212, 175, 55, 0.06), transparent 65%),
var(--alch-paper);
padding: clamp(3rem, 6vw, 5.5rem) 1rem;
}
.alch-portal__inner {
max-width: 1180px; margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.05fr 1fr;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
}
.alch-portal__copy { padding-right: 1rem; }
.alch-portal__eyebrow {
display: inline-block;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-midnight-700);
margin-bottom: 1rem;
}
.alch-portal__title {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.8rem, 3.4vw, 2.8rem);
line-height: 1.05;
color: var(--alch-midnight-900);
margin: 0 0 0.85rem;
font-weight: 500;
}
.alch-portal__lede {
font-size: clamp(0.95rem, 1vw, 1.05rem);
color: var(--alch-slate);
margin: 0 0 1.4rem;
max-width: 22rem;
line-height: 1.65;
}
.alch-portal__badge {
display: flex; gap: 0.85rem;
background: #fff;
border: 1px solid rgba(10, 15, 31, 0.06);
border-radius: var(--alch-radius);
padding: 1rem 1.1rem;
box-shadow: var(--alch-shadow-soft);
}
.alch-portal__shield {
width: 38px; height: 38px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--alch-midnight-900);
color: var(--alch-ivory);
flex: 0 0 38px;
}
.alch-portal__shield svg { width: 20px; height: 20px; }
.alch-portal__badge strong {
display: block;
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--alch-midnight-900);
margin-bottom: 0.2rem;
}
.alch-portal__badge span {
display: block;
font-size: 0.85rem;
color: var(--alch-slate);
line-height: 1.5;
margin-bottom: 0.5rem;
}
.alch-portal__badge em {
display: inline-block;
font-style: normal;
font-family: var(--alch-font-ui);
font-size: 0.65rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--alch-midnight-700);
background: rgba(10, 15, 31, 0.06);
padding: 0.25rem 0.65rem;
border-radius: 999px;
}
/* Phone mockup */
.alch-portal__phone {
margin: 0;
display: flex;
justify-content: center;
}
.alch-portal__phone-frame {
width: 280px;
height: 580px;
background: linear-gradient(180deg, #1a1f33 0%, #0a0f1f 100%);
border-radius: 44px;
padding: 12px;
box-shadow:
0 36px 80px rgba(10, 15, 31, 0.35),
inset 0 0 0 2px rgba(255, 255, 255, 0.08);
position: relative;
}
.alch-portal__phone-notch {
position: absolute;
top: 18px; left: 50%;
transform: translateX(-50%);
width: 110px; height: 26px;
background: #0a0f1f;
border-radius: 18px;
z-index: 2;
}
.alch-portal__phone-screen {
width: 100%; height: 100%;
border-radius: 32px;
background: linear-gradient(180deg, #faf6ec 0%, #ffffff 60%);
overflow: hidden;
position: relative;
}
.alch-portal__app {
padding: 38px 18px 18px;
height: 100%;
display: flex; flex-direction: column;
font-family: var(--alch-font-ui);
}
.alch-portal__app-head { margin-bottom: 12px; }
.alch-portal__app-greet {
font-family: var(--alch-font-head);
font-size: 0.85rem;
color: var(--alch-midnight-900);
}
.alch-portal__app-card--score {
display: flex; align-items: center; gap: 0.85rem;
background: linear-gradient(135deg, #0a0f1f 0%, #16223f 100%);
color: var(--alch-ivory);
padding: 0.95rem 1rem;
border-radius: 14px;
margin-bottom: 0.85rem;
}
.alch-portal__ring {
position: relative;
width: 64px; height: 64px;
flex: 0 0 64px;
}
.alch-portal__ring svg { width: 100%; height: 100%; }
.alch-portal__ring-num {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--alch-font-head);
font-size: 1.05rem;
color: var(--alch-gold-400);
font-weight: 600;
}
.alch-portal__ring-label {
position: absolute;
bottom: -4px; left: 50%;
transform: translateX(-50%);
font-size: 0.55rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 234, 214, 0.55);
}
.alch-portal__app-eyebrow {
display: block;
font-size: 0.6rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(244, 234, 214, 0.6);
margin-bottom: 0.2rem;
}
.alch-portal__app-trend {
font-size: 0.78rem;
color: var(--alch-gold-400);
}
.alch-portal__app-section {
background: rgba(10, 15, 31, 0.04);
border-radius: 12px;
padding: 0.7rem 0.85rem;
flex: 1;
}
.alch-portal__app-section .alch-portal__app-eyebrow {
color: var(--alch-slate);
margin-bottom: 0.4rem;
}
.alch-portal__app-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0.4rem;
}
.alch-portal__app-list li {
display: flex; align-items: center; gap: 0.45rem;
background: #fff;
padding: 0.55rem 0.7rem;
border-radius: 9px;
font-size: 0.72rem;
color: var(--alch-midnight-900);
}
.alch-portal__app-meta {
margin-left: auto;
font-size: 0.6rem;
color: var(--alch-slate);
}
.alch-portal__app-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--alch-midnight-700);
}
.alch-portal__app-dot--alt { background: #4a5062; }
.alch-portal__app-dot--gold { background: var(--alch-gold-500); }
/* Right column features */
.alch-portal__features {
display: flex; flex-direction: column; gap: 0.85rem;
}
.alch-portal__feature {
display: flex; align-items: flex-start; gap: 0.85rem;
background: #fff;
border: 1px solid rgba(10, 15, 31, 0.06);
border-radius: var(--alch-radius);
padding: 0.95rem 1rem;
transition: transform var(--alch-dur) var(--alch-ease),
box-shadow var(--alch-dur) var(--alch-ease);
}
.alch-portal__feature:hover {
transform: translateX(-3px);
box-shadow: var(--alch-shadow-lift);
}
.alch-portal__feature-icon {
width: 38px; height: 38px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--alch-midnight-900);
color: var(--alch-ivory);
flex: 0 0 38px;
}
.alch-portal__feature-icon svg { width: 18px; height: 18px; }
.alch-portal__feature strong {
display: block;
font-family: var(--alch-font-head);
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--alch-midnight-900);
margin-bottom: 0.25rem;
}
.alch-portal__feature span {
display: block;
font-size: 0.85rem;
color: var(--alch-slate);
line-height: 1.5;
}
@media (max-width: 1100px) {
.alch-portal__inner { grid-template-columns: 1fr; }
.alch-portal__copy { padding-right: 0; }
.alch-portal__phone { order: -1; }
.alch-portal__features { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.alch-portal__features { grid-template-columns: 1fr; }
.alch-portal__phone-frame { width: 240px; height: 500px; }
}
/* =========================================================================
#11 Patient Testimonials ([alch_testimonials])
========================================================================= */
.alch-testi {
background: linear-gradient(180deg, #ffffff 0%, var(--alch-paper) 100%);
padding: clamp(3rem, 6vw, 5.5rem) 1rem;
}
.alch-testi__inner {
max-width: 1180px; margin: 0 auto;
display: grid;
grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.alch-testi__intro { padding-top: 0.5rem; }
.alch-testi__eyebrow {
display: inline-block;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-gold-700);
margin-bottom: 0.85rem;
}
.alch-testi__title {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 3.6vw, 3rem);
letter-spacing: 0.005em;
margin: 0 0 0.6rem;
color: var(--alch-midnight-900);
line-height: 1.05;
font-weight: 500;
}
.alch-testi__title::after {
content: "";
display: block;
width: 60px; height: 1px;
background: var(--alch-gold-500);
margin-top: 0.7rem;
}
.alch-testi__lede {
font-size: 0.95rem;
color: var(--alch-slate);
margin: 0 0 1.4rem;
line-height: 1.7;
}
.alch-testi__cta {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--alch-font-head);
font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--alch-midnight-900);
text-decoration: none;
border-bottom: 1px solid var(--alch-midnight-900);
padding-bottom: 4px;
transition: gap var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease);
}
.alch-testi__cta:hover { gap: 0.7rem; color: var(--alch-gold-700); border-bottom-color: var(--alch-gold-700); }
/* Card grid: alternating rows of 3 / 3, asymmetric vertical rhythm. */
.alch-testi__grid {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 1.25rem;
}
.alch-testi__card {
background: #fff;
border: 1px solid rgba(10, 15, 31, 0.06);
border-radius: var(--alch-radius);
padding: 1.25rem;
display: flex; flex-direction: column;
transition: transform var(--alch-dur) var(--alch-ease),
box-shadow var(--alch-dur) var(--alch-ease);
}
.alch-testi__card:hover {
transform: translateY(-3px);
box-shadow: var(--alch-shadow-lift);
}
.alch-testi__card:nth-child(odd) { transform: translateY(0.6rem); }
.alch-testi__card:nth-child(odd):hover { transform: translateY(calc(0.6rem - 3px)); }
.alch-testi__photo {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 10px;
overflow: hidden;
margin-bottom: 1rem;
background: linear-gradient(180deg, #faf6ec, #efe9dc);
position: relative;
}
.alch-testi__photo img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--alch-ease);
}
.alch-testi__card:hover .alch-testi__photo img { transform: scale(1.04); }
.alch-testi__quote { margin: 0; flex: 1; position: relative; padding-top: 1.6rem; }
/* Hide the SVG quote marks — replace with a typographic curly quote glyph */
.alch-testi__quote-mark {
display: none !important;
}
.alch-testi__quote::before {
content: "\201C"; /* U+201C left double-quotation-mark */
position: absolute;
top: -0.65rem;
left: 0;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 3.6rem;
font-weight: 600;
line-height: 1;
color: var(--alch-gold-500);
letter-spacing: 0;
pointer-events: none;
}
.alch-testi__quote p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.02rem;
line-height: 1.55;
color: var(--alch-midnight-900);
margin: 0 0 1rem;
}
.alch-testi__byline {
display: flex; flex-direction: column; gap: 0.15rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(10, 15, 31, 0.06);
}
.alch-testi__byline strong {
font-family: var(--alch-font-head);
font-size: 0.92rem;
letter-spacing: 0.04em;
color: var(--alch-midnight-900);
font-weight: 500;
}
.alch-testi__byline span {
display: inline-flex; align-items: center; gap: 0.35rem;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--alch-gold-700);
}
.alch-testi__byline span svg { width: 12px; height: 12px; }
@media (max-width: 1080px) {
.alch-testi__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.alch-testi__inner { grid-template-columns: 1fr; }
.alch-testi__grid { grid-template-columns: 1fr; }
.alch-testi__card:nth-child(odd) { transform: none; }
}
/* =========================================================================
#12 One Test Could Change Your Life ([alch_one_test])
========================================================================= */
.alch-onetest {
background: var(--alch-paper);
padding: clamp(3rem, 6vw, 5.5rem) 1rem;
}
.alch-onetest__inner { max-width: 1180px; margin: 0 auto; }
.alch-onetest__pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 2.5rem;
}
.alch-onetest__pillar {
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 1.2rem;
border: 1px solid rgba(10, 15, 31, 0.08);
border-radius: var(--alch-radius);
background: #fff;
}
.alch-onetest__pillar-icon {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--alch-midnight-900);
color: var(--alch-ivory);
border-radius: 50%;
margin-bottom: 0.7rem;
}
.alch-onetest__pillar-icon svg { width: 22px; height: 22px; }
.alch-onetest__pillar-label {
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--alch-midnight-900);
margin-bottom: 0.3rem;
}
.alch-onetest__pillar-sub {
font-size: 0.85rem;
color: var(--alch-slate);
line-height: 1.5;
}
.alch-onetest__header { text-align: center; margin-bottom: 2.5rem; }
.alch-onetest__eyebrow {
display: inline-block;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-gold-700);
margin-bottom: 0.85rem;
}
.alch-onetest__title {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 4vw, 3.4rem);
letter-spacing: 0.005em;
line-height: 1.05;
color: var(--alch-midnight-900);
margin: 0 0 0.7rem;
font-weight: 500;
}
.alch-onetest__subtitle {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1rem, 1.3vw, 1.25rem);
color: var(--alch-slate);
margin: 0;
max-width: 36rem;
margin-inline: auto;
}
.alch-onetest__rows {
display: flex; flex-direction: column;
gap: clamp(2rem, 4vw, 3.5rem);
margin-bottom: 3rem;
}
.alch-onetest__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
}
.alch-onetest__row--rev .alch-onetest__row-photo { order: 2; }
.alch-onetest__row-photo {
position: relative;
border-radius: var(--alch-radius);
overflow: hidden;
aspect-ratio: 4 / 3;
background: #efe9dc;
}
.alch-onetest__row-photo img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--alch-ease);
}
.alch-onetest__row:hover .alch-onetest__row-photo img { transform: scale(1.04); }
.alch-onetest__row-num {
position: absolute;
top: 1rem; left: 1rem;
font-family: var(--alch-font-head);
font-size: 0.68rem;
letter-spacing: 0.22em;
background: rgba(255, 255, 255, 0.92);
color: var(--alch-midnight-900);
padding: 0.4rem 0.7rem;
border-radius: 999px;
backdrop-filter: blur(4px);
}
.alch-onetest__row-kicker {
display: inline-block;
font-family: var(--alch-font-ui);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-gold-700);
margin-bottom: 0.6rem;
}
.alch-onetest__row-title {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.5rem, 2.2vw, 1.9rem);
letter-spacing: 0.005em;
line-height: 1.15;
color: var(--alch-midnight-900);
margin: 0 0 0.65rem;
font-weight: 500;
}
.alch-onetest__row-copy {
font-size: 1rem;
color: var(--alch-slate);
line-height: 1.65;
margin: 0;
}
.alch-onetest__cta {
display: block;
width: fit-content;
margin: 0 auto;
background: var(--alch-midnight-900);
color: var(--alch-ivory);
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 1rem 1.6rem;
border-radius: 999px;
text-decoration: none;
transition: background var(--alch-dur) var(--alch-ease),
transform var(--alch-dur) var(--alch-ease);
}
.alch-onetest__cta:hover { background: var(--alch-gold-700); color: var(--alch-ivory); transform: translateY(-1px); }
@media (max-width: 880px) {
.alch-onetest__pillars { grid-template-columns: 1fr; }
.alch-onetest__row { grid-template-columns: 1fr; }
.alch-onetest__row--rev .alch-onetest__row-photo { order: 0; }
}
/* =========================================================================
#13 Diagnostic Labs — Us vs Them card layout ([alch_vs_cards])
========================================================================= */
.alch-vs {
background: linear-gradient(180deg, #fff 0%, var(--alch-paper) 100%);
padding: clamp(3rem, 6vw, 5.5rem) 1rem;
}
.alch-vs__inner { max-width: 1180px; margin: 0 auto; }
.alch-vs__header { text-align: center; max-width: 36rem; margin: 0 auto 2.5rem; }
.alch-vs__eyebrow {
display: inline-block;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-midnight-700);
margin-bottom: 0.85rem;
}
.alch-vs__title {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 4vw, 3.4rem);
letter-spacing: 0.005em;
line-height: 1.05;
color: var(--alch-midnight-900);
margin: 0 0 0.7rem;
font-weight: 500;
}
.alch-vs__lede {
font-size: 0.95rem;
color: var(--alch-slate);
margin: 0;
line-height: 1.65;
}
.alch-vs__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-bottom: 2.5rem;
}
.alch-vs__card {
background: #fff;
border: 1px solid rgba(10, 15, 31, 0.08);
border-radius: var(--alch-radius);
padding: 1.25rem 1.4rem 1.5rem;
display: flex; flex-direction: column;
box-shadow: var(--alch-shadow-soft);
}
.alch-vs__card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.85rem;
}
.alch-vs__num {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.85rem;
color: var(--alch-gold-700);
letter-spacing: 0.1em;
}
.alch-vs__num::before {
content: ""; display: inline-block;
width: 18px; height: 1px;
background: var(--alch-gold-500);
vertical-align: middle;
margin-right: 0.4rem;
}
.alch-vs__card-icon {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--alch-midnight-700);
}
.alch-vs__card-icon svg { width: 18px; height: 18px; }
.alch-vs__card-title {
font-family: var(--alch-font-head) !important;
font-size: 1.4rem;
letter-spacing: 0.005em;
line-height: 1.1;
color: var(--alch-midnight-900);
margin: 0 0 1.25rem;
font-weight: 500;
}
.alch-vs__row + .alch-vs__row {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(10, 15, 31, 0.08);
}
.alch-vs__pill {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--alch-font-head);
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 999px;
margin-bottom: 0.5rem;
}
.alch-vs__pill--us {
background: var(--alch-midnight-900);
color: var(--alch-ivory);
}
.alch-vs__pill--them {
background: rgba(10, 15, 31, 0.06);
color: var(--alch-slate);
}
.alch-vs__pill--them svg { width: 11px; height: 11px; }
.alch-vs__monogram {
width: 14px; height: 14px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--alch-gold-400);
border-radius: 50%;
font-family: var(--alch-font-head);
font-size: 0.6rem;
color: var(--alch-gold-400);
font-weight: 600;
}
.alch-vs__row p {
font-size: 0.9rem;
color: var(--alch-slate);
line-height: 1.55;
margin: 0;
}
.alch-vs__row--us p { color: var(--alch-midnight-900); }
.alch-vs__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(10, 15, 31, 0.08);
}
.alch-vs__monogram--lg {
width: 38px; height: 38px;
font-size: 1.2rem;
border-width: 1px;
}
.alch-vs__tagline {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
letter-spacing: 0.04em;
color: var(--alch-midnight-900);
}
@media (max-width: 880px) {
.alch-vs__grid { grid-template-columns: 1fr; }
}
/* =========================================================================
#14 Better Decisions — reusable banner block ([alch_better_decisions])
========================================================================= */
.alch-bd {
background: #f0eee5;
padding: clamp(2rem, 4vw, 3.25rem) 1rem;
}
.alch-bd__inner {
max-width: 1280px; margin: 0 auto;
display: grid;
grid-template-columns: minmax(280px, 1.05fr) minmax(0, 1.3fr) minmax(220px, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
background:
linear-gradient(105deg, #1a1a1a 0%, #1a1a1a 36%, transparent 36%),
linear-gradient(105deg, transparent 36%, transparent 100%);
background-color: transparent;
}
/* Stats card (left) — sits over the dark slab created via the gradient above */
.alch-bd__stats {
background: #1a1a1a;
color: var(--alch-ivory);
padding: 1.5rem 1.6rem 1.4rem;
border-radius: var(--alch-radius);
position: relative;
}
.alch-bd__welcome {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
color: rgba(244, 234, 214, 0.7);
margin-bottom: 0.5rem;
}
.alch-bd__panel-title {
font-family: var(--alch-font-head) !important;
font-size: 1.45rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--alch-ivory);
margin: 0;
font-weight: 500;
line-height: 1.1;
}
.alch-bd__panel-rule {
width: 30px; height: 2px;
background: #c2412c;
margin: 0.7rem 0 1.1rem;
}
.alch-bd__panel-eyebrow {
display: block;
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--alch-ivory);
margin-bottom: 0.85rem;
}
.alch-bd__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.alch-bd__stat-value {
display: block;
font-family: var(--alch-font-head);
font-size: 1.6rem;
font-weight: 600;
color: var(--alch-ivory);
line-height: 1.05;
}
.alch-bd__stat-label {
display: block;
font-family: var(--alch-font-ui);
font-size: 0.66rem;
letter-spacing: 0.04em;
color: rgba(244, 234, 214, 0.55);
margin-top: 0.2rem;
}
.alch-bd__bar {
display: flex;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: rgba(244, 234, 214, 0.06);
}
.alch-bd__bar span { display: block; height: 100%; }
/* Main editorial block (center) */
.alch-bd__main {
padding: 1rem 0.5rem;
}
.alch-bd__kicker {
display: block;
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c2412c;
margin-bottom: 0.5rem;
}
.alch-bd__headline {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 3.6vw, 2.8rem);
letter-spacing: 0.005em;
line-height: 1;
color: var(--alch-midnight-900);
margin: 0 0 0.7rem;
font-weight: 500;
}
.alch-bd__copy {
font-size: 1rem;
color: var(--alch-slate);
margin: 0 0 1rem;
line-height: 1.55;
max-width: 28rem;
}
.alch-bd__price-rule {
width: 50px; height: 2px;
background: #c2412c;
margin: 0.5rem 0 0.85rem;
}
.alch-bd__price {
display: flex; align-items: baseline; gap: 0.5rem;
margin-bottom: 1rem;
}
.alch-bd__price-prefix {
font-family: var(--alch-font-head);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--alch-midnight-900);
}
.alch-bd__price strong {
font-family: var(--alch-font-head);
font-size: 1.35rem;
letter-spacing: 0.04em;
color: var(--alch-midnight-900);
}
.alch-bd__cta {
display: inline-flex;
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1.5px solid #c2412c;
color: #c2412c;
background: transparent;
padding: 0.85rem 1.5rem;
border-radius: 999px;
text-decoration: none;
transition: background var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease);
}
.alch-bd__cta:hover { background: #c2412c; color: #fff; }
/* Right column: 3 icon points */
.alch-bd__points {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.alch-bd__point {
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 0.5rem;
}
.alch-bd__point-icon {
width: 36px; height: 36px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid #c2412c;
color: #c2412c;
margin-bottom: 0.6rem;
}
.alch-bd__point-icon svg { width: 18px; height: 18px; }
.alch-bd__point strong {
display: block;
font-family: var(--alch-font-head);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--alch-midnight-900);
margin-bottom: 0.3rem;
font-weight: 600;
}
.alch-bd__point span {
display: block;
font-size: 0.78rem;
color: var(--alch-slate);
line-height: 1.45;
}
@media (max-width: 1080px) {
.alch-bd__inner {
background: none;
grid-template-columns: 1fr;
gap: 1.25rem;
}
.alch-bd__points { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
.alch-bd__points { grid-template-columns: 1fr; }
.alch-bd__grid { grid-template-columns: repeat(2, 1fr); }
}
/* =========================================================================
#10 Blog index + single article — editorial polish
-------------------------------------------------------------------------
We don't override the templates (single.php / archive.php remain pixfort);
we just re-skin the standard markup so articles read like a real magazine.
========================================================================= */
body.single-post #content,
body.blog #content,
body.archive #content {
background: var(--alch-paper);
}
/* --- Single article hero / title block --- */
body.single-post .pix-main-intro,
body.single-post .pix-blog-title {
background:
radial-gradient(900px 500px at 0% 0%, rgba(212, 175, 55, 0.06), transparent 60%),
var(--alch-paper) !important;
padding-top: clamp(3rem, 6vw, 5rem) !important;
padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}
body.single-post .pix-blog-title h1,
body.single-post h1.entry-title {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 4.4vw, 3.6rem) !important;
letter-spacing: 0.005em !important;
line-height: 1.05 !important;
color: var(--alch-midnight-900) !important;
max-width: 24em;
margin: 0 auto 0.85rem !important;
text-align: center;
font-weight: 500 !important;
}
/* Blog meta (date, author, category) */
body.single-post .pix-blog-meta,
body.single-post .post-meta,
body.single-post .entry-meta {
display: flex;
justify-content: center;
gap: 1.5rem;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--alch-slate);
}
body.single-post .pix-blog-meta a,
body.single-post .entry-meta a { color: var(--alch-gold-700); text-decoration: none; }
body.single-post .pix-blog-meta a:hover,
body.single-post .entry-meta a:hover { color: var(--alch-gold-500); }
/* Featured image: rounded, soft shadow */
body.single-post .post-thumbnail,
body.single-post .pix-post-thumbnail,
body.single-post .wp-post-image {
border-radius: var(--alch-radius);
overflow: hidden;
box-shadow: var(--alch-shadow-lift);
max-width: min(960px, 92vw);
margin: 1.5rem auto !important;
}
body.single-post .post-thumbnail img { display: block; width: 100%; height: auto; }
/* --- Article body typography --- */
body.single-post .entry-content,
body.single-post .post-content,
body.single-post article .pix-text {
max-width: 720px;
margin: 2rem auto;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.18rem;
line-height: 1.75;
color: var(--alch-midnight-900);
}
body.single-post .entry-content > p:first-of-type::first-letter {
float: left;
font-family: var(--alch-font-head);
font-size: 4.4em;
line-height: 0.9;
padding: 0.1em 0.18em 0 0;
color: var(--alch-gold-700);
}
body.single-post .entry-content h2 {
font-family: var(--alch-font-head) !important;
font-size: 1.85rem !important;
letter-spacing: 0.005em !important;
margin: 2.5rem 0 0.85rem !important;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
}
body.single-post .entry-content h2::after {
content: ""; display: block;
width: 36px; height: 1px;
background: var(--alch-gold-500);
margin-top: 0.4rem;
}
body.single-post .entry-content h3 {
font-family: var(--alch-font-head) !important;
font-size: 1.35rem !important;
margin: 2rem 0 0.7rem !important;
letter-spacing: 0.02em !important;
font-weight: 500 !important;
}
body.single-post .entry-content blockquote {
border-left: 3px solid var(--alch-gold-500);
background: rgba(212, 175, 55, 0.04);
padding: 1.2rem 1.4rem;
margin: 2rem 0;
border-radius: 0 var(--alch-radius) var(--alch-radius) 0;
font-style: italic;
font-size: 1.25rem;
color: var(--alch-midnight-900);
}
body.single-post .entry-content a {
color: var(--alch-midnight-700);
text-decoration: underline;
text-decoration-color: var(--alch-gold-500);
text-underline-offset: 4px;
text-decoration-thickness: 1px;
transition: color var(--alch-dur) var(--alch-ease);
}
body.single-post .entry-content a:hover { color: var(--alch-gold-700); }
body.single-post .entry-content figure {
margin: 2rem auto;
border-radius: var(--alch-radius);
overflow: hidden;
}
body.single-post .entry-content figure img { display: block; width: 100%; height: auto; }
body.single-post .entry-content figcaption {
font-family: var(--alch-font-ui);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--alch-slate);
text-align: center;
padding: 0.6rem 0;
}
body.single-post .entry-content ul,
body.single-post .entry-content ol { padding-left: 1.5rem; }
body.single-post .entry-content li { margin-bottom: 0.4rem; }
/* --- Blog index / archive cards --- */
body.blog .pix-blog-item,
body.archive .pix-blog-item,
body.blog article.post,
body.archive article.post {
background: #fff;
border: 1px solid rgba(10, 15, 31, 0.06);
border-radius: var(--alch-radius);
overflow: hidden;
margin-bottom: 1.5rem;
box-shadow: var(--alch-shadow-soft);
transition: transform var(--alch-dur) var(--alch-ease),
box-shadow var(--alch-dur) var(--alch-ease);
}
body.blog article.post:hover,
body.archive article.post:hover {
transform: translateY(-3px);
box-shadow: var(--alch-shadow-lift);
}
body.blog article.post .post-thumbnail,
body.archive article.post .post-thumbnail {
margin: 0 !important;
border-radius: 0;
}
body.blog article.post h2.entry-title,
body.archive article.post h2.entry-title {
font-family: var(--alch-font-head) !important;
font-size: 1.35rem !important;
letter-spacing: 0.005em !important;
margin: 1rem 1.25rem 0.5rem !important;
font-weight: 500 !important;
}
body.blog article.post h2.entry-title a,
body.archive article.post h2.entry-title a {
color: var(--alch-midnight-900);
text-decoration: none;
}
body.blog article.post h2.entry-title a:hover { color: var(--alch-gold-700); }
body.blog article.post .entry-summary,
body.archive article.post .entry-summary {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.05rem;
color: var(--alch-slate);
margin: 0 1.25rem 1rem;
line-height: 1.55;
}
body.blog article.post .entry-meta,
body.archive article.post .entry-meta {
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--alch-slate);
padding: 0.6rem 1.25rem 1rem;
border-top: 1px solid rgba(10, 15, 31, 0.06);
}
/* --- Blog index header --- */
body.blog .pix-main-intro,
body.archive .pix-main-intro {
text-align: center;
padding: clamp(3rem, 6vw, 5rem) 1rem 2rem;
}
body.blog .pix-main-intro h1,
body.archive .pix-main-intro h1 {
font-family: var(--alch-font-head) !important;
font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
letter-spacing: 0.005em !important;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
}
/* Pagination + comments fall back to defaults */
body.single-post .pix-blog-share,
body.single-post .post-pagination {
max-width: 720px;
margin: 2rem auto;
}
/* =========================================================================
Footer additions (sheet rows 65-76)
========================================================================= */
.alch-footer__contact {
margin-top: 1.4rem;
padding-top: 1.1rem;
border-top: 1px solid rgba(212, 175, 55, 0.18);
}
.alch-footer__contact-label {
display: block;
font-family: var(--alch-font-head);
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(244, 234, 214, 0.55);
margin-bottom: 0.35rem;
}
.alch-footer__contact-link {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
color: var(--alch-gold-200);
text-decoration: none;
border-bottom: 1px solid rgba(212, 175, 55, 0.4);
padding-bottom: 1px;
transition: color var(--alch-dur) var(--alch-ease),
border-color var(--alch-dur) var(--alch-ease);
}
.alch-footer__contact-link:hover {
color: var(--alch-gold-400);
border-color: var(--alch-gold-400);
}
/* Now that the legal column has more rows, ease the column gap on tablet */
@media (max-width: 980px) and (min-width: 821px) {
.alch-footer__columns { grid-template-columns: 1fr 1fr; }
.alch-footer__col:last-child { grid-column: 1 / -1; }
}
/* If pixfort renders a "Compounded in USA" badge in the legacy footer
markup, hide it (the new editorial footer handles compliance copy). */
.alch-footer .pix-compounded-usa,
.alch-footer .compounded-in-usa,
#pix-page-footer .pix-compounded-usa { display: none !important; }
/* =========================================================================
Sheet #61 + #62: Shadow on how-it-works photos and ATHS feature panels
========================================================================= */
.aths-how-it-works img,
.aths-how-it-works .aths-step-img,
.aths-how-it-works [class*="-step-img"],
.aths-how-it-works [class*="-image"],
.aths-how-it-works figure img,
.aths-feature-panel,
.aths-feature-panel-card,
[class*="aths-feature-panel"],
[class*="-feature-panel"] {
border-radius: var(--alch-radius);
box-shadow: var(--alch-shadow-soft) !important;
transition: box-shadow var(--alch-dur) var(--alch-ease),
transform var(--alch-dur) var(--alch-ease);
}
.aths-how-it-works img:hover,
.aths-feature-panel:hover,
[class*="aths-feature-panel"]:hover {
box-shadow: var(--alch-shadow-lift) !important;
transform: translateY(-2px);
}
/* =========================================================================
Sheet #59 + #60: Mini treatments — 5 in a row, blue (men) / gold (women)
========================================================================= */
.aths-mini-treatments,
[class*="mini-treatments"],
[class*="-mini-products"] {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 0.85rem !important;
}
@media (max-width: 1100px) {
.aths-mini-treatments,
[class*="mini-treatments"],
[class*="-mini-products"] {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 700px) {
.aths-mini-treatments,
[class*="mini-treatments"],
[class*="-mini-products"] {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Men's variant — midnight gradient surface */
body.page-mens-health .aths-mini-treatments .aths-mini-treatment-card,
body.page-mens-health [class*="mini-treatment"] .aths-card,
body[class*="mens"] .aths-mini-treatments [class*="-card"],
.alch-mini--men .aths-mini-treatment-card {
background: var(--alch-grad-midnight) !important;
color: var(--alch-ivory) !important;
border: 1px solid rgba(212, 175, 55, 0.18) !important;
}
body.page-mens-health .aths-mini-treatments [class*="-title"],
body[class*="mens"] .aths-mini-treatments [class*="-title"],
.alch-mini--men .aths-mini-treatment-card [class*="-title"] {
color: var(--alch-gold-400) !important;
}
/* Women's variant — gold gradient surface */
body.page-womens-health .aths-mini-treatments .aths-mini-treatment-card,
body[class*="womens"] .aths-mini-treatments [class*="-card"],
.alch-mini--women .aths-mini-treatment-card {
background: linear-gradient(150deg, #fff 0%, #fbf7ea 55%, #f3e2a3 100%) !important;
color: var(--alch-midnight-800) !important;
border: 1px solid rgba(173, 135, 38, 0.28) !important;
box-shadow: var(--alch-shadow-gold) !important;
}
body.page-womens-health .aths-mini-treatments [class*="-title"],
body[class*="womens"] .aths-mini-treatments [class*="-title"],
.alch-mini--women .aths-mini-treatment-card [class*="-title"] {
color: var(--alch-gold-900) !important;
}
/* =========================================================================
Sheet #23: ISI button — larger, bold, centered
========================================================================= */
.aths-isi-trigger,
[class*="isi-trigger"],
[class*="safety-info-trigger"],
button[data-target*="safety-info"],
a[href*="#safety-info"],
.pix-btn[data-popup*="safety"] {
display: block !important;
width: fit-content;
margin: 1.5rem auto !important;
font-family: var(--alch-font-head) !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
text-align: center !important;
padding: 0.95rem 1.75rem !important;
border: 1.5px solid var(--alch-midnight-900) !important;
border-radius: 999px !important;
color: var(--alch-midnight-900) !important;
background: transparent !important;
text-decoration: none !important;
transition: background var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease);
}
.aths-isi-trigger:hover,
[class*="isi-trigger"]:hover {
background: var(--alch-midnight-900) !important;
color: var(--alch-ivory) !important;
}
/* =========================================================================
Sheet #28 + #29: FDA disclaimer typography
"These statements have not been evaluated by the FDA" → smaller, faded.
"Report side effects to FDA MedWatch" → no bullet, centered.
========================================================================= */
.aths-fda-disclaimer,
[class*="fda-disclaimer"],
[class*="not-evaluated"],
.alch-fda-faint,
/* Live ATHS markup: a .disclaimer-box wrapping ...
on
product hero pages. Sheet row 29 wants this faded + smaller so it doesn't
compete with the safety-info link. */
.aths-product-hero .disclaimer-box,
.aths-product-hero .disclaimer-box p,
.aths-product-hero .disclaimer-box strong,
.disclaimer-box p,
.disclaimer-box strong {
font-size: 0.78rem !important;
color: rgba(74, 80, 98, 0.7) !important;
font-style: italic !important;
letter-spacing: 0.01em !important;
text-align: center !important;
margin: 0.5rem auto !important;
line-height: 1.5 !important;
font-weight: 400 !important;
}
.aths-product-hero .disclaimer-box,
.disclaimer-box {
background: transparent !important;
border: 0 !important;
padding: 0.85rem 1rem !important;
max-width: 38rem;
margin: 1rem auto !important;
}
.alch-safety ul,
.alch-safety ol,
[class*="side-effects"] ul,
[class*="side-effects"] ol {
list-style: none !important;
padding-left: 0 !important;
text-align: center;
}
.alch-safety .alch-medwatch,
.alch-safety p:last-of-type,
[class*="medwatch-line"] {
text-align: center;
list-style: none;
}
/* =========================================================================
Sheet #45 + #46 + #48: Brand page — switch to midnight blue,
space under quotes, .jorge stays white (existing rule already does this).
========================================================================= */
body.page-brand,
body.page-id-314 {
/* Already set to midnight in overrides.css; reinforce text contrast and
gold link tone for any nested editor markup. */
}
/* Add breathing room under blockquotes */
body.page-brand blockquote,
body.page-id-314 blockquote,
body.page-brand .vc_row blockquote {
margin-bottom: 2rem !important;
padding-bottom: 1rem;
}
body.page-brand blockquote + p,
body.page-id-314 blockquote + p,
body.page-brand .vc_row blockquote + .vc_column-inner {
margin-top: 1.25rem !important;
}
/* Optional painting/illustration row: client wants to upload a wide image
that closes the brand page. We add a class hook; the editor can apply
.alch-brand-painting on a row to get an edge-to-edge full-bleed image
with a subtle sepia frame above it. */
.alch-brand-painting {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 0 !important;
position: relative;
overflow: hidden;
}
.alch-brand-painting img {
display: block;
width: 100%;
height: auto;
filter: contrast(1.05);
}
.alch-brand-painting::before {
content: "";
display: block;
height: 1px;
background: linear-gradient(90deg, transparent, var(--alch-gold-500) 50%, transparent);
margin-bottom: 1.5rem;
}
/* =========================================================================
Sheet #5 + #6 + #7: Header banner — text smaller, "See All" stand-out
========================================================================= */
.aths-header-banner h1,
.aths-banner-title,
[class*="banner-title"],
[class*="-banner-heading"] {
font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
letter-spacing: 0.04em !important;
line-height: 1.1 !important;
}
.aths-header-banner [class*="see-all"],
.aths-header-banner a[href*="health"],
[class*="banner"] a[href*="see-all"],
.alch-see-all {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--alch-font-head);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--alch-gold-500);
text-decoration: none;
border-bottom: 2px solid var(--alch-gold-500);
padding-bottom: 4px;
transition: gap var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease);
}
.aths-header-banner [class*="see-all"]:hover,
.alch-see-all:hover {
gap: 0.7rem;
color: var(--alch-gold-400);
}
.alch-see-all::after { content: "→"; }
/* =========================================================================
Sheet #15: mini blood works — default label "Your Lab Results"
(rendered via JS replacement so it works on existing markup)
========================================================================= */
.aths-mini-blood-results [class*="-title"]:not([data-relabeled]),
.aths-mini-biomarker [class*="-title"]:not([data-relabeled]) {
/* No CSS-only solution for text replacement; handled in JS. The CSS only
preserves the layout while JS swaps the text. */
}
/* =========================================================================
Sheet #13: Uploaded icon images on aths_icon_callouts_section
The legacy renderer prints icon_svg raw; we inject ![]()
for uploaded images so they fit the existing icon-box circles.
========================================================================= */
.monitoring-icon-box .alch-icon-callout-img {
width: 60%;
height: 60%;
object-fit: contain;
display: block;
margin: 0 auto;
}
.monitoring-icon-box:has(.alch-icon-callout-img) {
background: transparent !important;
border: 1px solid rgba(212, 175, 55, 0.3);
}
/* =========================================================================
#26 Product photo gallery / carousel ([alch_product_gallery])
========================================================================= */
.alch-gallery {
margin: 0 auto;
max-width: 720px;
position: relative;
}
.alch-gallery__viewport {
position: relative;
border-radius: var(--alch-radius);
overflow: hidden;
background:
radial-gradient(ellipse at 50% 80%, rgba(212, 175, 55, 0.10), transparent 60%),
linear-gradient(180deg, #faf6ec 0%, #efe9dc 100%);
}
.alch-gallery__track {
display: flex;
scroll-snap-type: x mandatory;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.alch-gallery__track::-webkit-scrollbar { display: none; }
.alch-gallery__slide {
flex: 0 0 100%;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 4 / 3;
}
.alch-gallery__slide img {
max-width: 80%;
max-height: 88%;
object-fit: contain;
filter: drop-shadow(0 22px 32px rgba(10, 15, 31, 0.28));
transition: transform 0.6s var(--alch-ease);
}
.alch-gallery__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(10, 15, 31, 0.08);
color: var(--alch-midnight-900);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 2;
backdrop-filter: blur(6px);
transition: background var(--alch-dur) var(--alch-ease),
transform var(--alch-dur) var(--alch-ease);
}
.alch-gallery__arrow svg { width: 20px; height: 20px; }
.alch-gallery__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.alch-gallery__arrow--prev { left: 0.85rem; }
.alch-gallery__arrow--next { right: 0.85rem; }
.alch-gallery__dots {
display: flex; justify-content: center; gap: 0.45rem;
margin-top: 0.85rem;
}
.alch-gallery__dot {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(10, 15, 31, 0.18);
border: 0;
cursor: pointer;
padding: 0;
transition: background var(--alch-dur) var(--alch-ease),
transform var(--alch-dur) var(--alch-ease);
}
.alch-gallery__dot:hover { background: rgba(10, 15, 31, 0.32); }
.alch-gallery__dot.is-active {
background: var(--alch-gold-500);
transform: scale(1.18);
}
.alch-gallery__caption {
margin: 0.85rem auto 0;
text-align: center;
font-family: var(--alch-font-ui);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--alch-slate);
}
@media (max-width: 540px) {
.alch-gallery__arrow { width: 36px; height: 36px; }
}
/* =========================================================================
#27 Founder profile ([alch_founder])
========================================================================= */
.alch-founder {
padding: clamp(3rem, 6vw, 5.5rem) 1rem;
font-family: var(--alch-font-body);
}
.alch-founder--paper { background: var(--alch-paper); color: var(--alch-midnight-900); }
.alch-founder--midnight {
background:
radial-gradient(1200px 600px at 20% 0%, rgba(212, 175, 55, 0.08), transparent 65%),
var(--alch-midnight-900);
color: var(--alch-ivory);
}
.alch-founder__inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.alch-founder--reverse .alch-founder__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.alch-founder--reverse .alch-founder__media { order: 2; }
.alch-founder__media {
border-radius: var(--alch-radius);
overflow: hidden;
aspect-ratio: 4 / 5;
background: linear-gradient(180deg, #efe9dc, #d8d2c4);
box-shadow: var(--alch-shadow-lift);
}
.alch-founder__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.4s var(--alch-ease);
}
.alch-founder:hover .alch-founder__media img { transform: scale(1.03); }
.alch-founder__placeholder {
width: 100%; height: 100%;
background:
repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 14px, rgba(0,0,0,0.06) 14px 28px);
}
.alch-founder__role {
display: inline-block;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-gold-700);
margin-bottom: 0.85rem;
}
.alch-founder--midnight .alch-founder__role { color: var(--alch-gold-400); }
.alch-founder__name {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 3.6vw, 3rem);
letter-spacing: 0.005em;
line-height: 1.05;
margin: 0 0 1rem;
font-weight: 500;
color: inherit;
}
.alch-founder__bio p {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.1rem;
line-height: 1.65;
margin: 0 0 1rem;
color: inherit;
opacity: 0.92;
}
.alch-founder__quote {
margin: 1.6rem 0 0;
padding-left: 1.25rem;
border-left: 2px solid var(--alch-gold-500);
}
.alch-founder__quote-mark {
width: 22px; height: 16px;
color: var(--alch-gold-500);
margin-bottom: 0.4rem;
}
.alch-founder__quote p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.18rem;
line-height: 1.5;
color: inherit;
margin: 0;
}
@media (max-width: 880px) {
.alch-founder__inner,
.alch-founder--reverse .alch-founder__inner { grid-template-columns: 1fr; }
.alch-founder--reverse .alch-founder__media { order: 0; }
}
/* =========================================================================
Brand painting band — caption styling
(the .alch-brand-painting full-bleed CSS lives earlier in the sheet
row #47 block; this just adds the caption rule for the shortcode.)
========================================================================= */
.alch-brand-painting__caption {
display: block;
text-align: center;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.92rem;
color: rgba(244, 234, 214, 0.7);
padding: 0.85rem 1rem 1.5rem;
letter-spacing: 0.02em;
}
body.page-brand .alch-brand-painting__caption,
body.page-id-314 .alch-brand-painting__caption {
color: rgba(244, 234, 214, 0.7);
}
/* =========================================================================
ATHS COMPONENT RESTYLES (May 2026)
-------------------------------------------------------------------------
The user provided design templates for existing ATHS components. Instead
of building separate shortcodes, the right approach is to override the
existing component CSS to match each design template. This whole
section is CSS-only and touches the live aths-* classes — no markup
changes, no migrations needed; existing pages get the new look on
reload.
========================================================================= */
/* ---------- Sheet #14 / "Better Decisions" — restyle aths_blood_work_section
Source markup (Archive-1/blood-work-section.php):
.aths-blood-work-section
.aths-blood-work-inner
.aths-blood-work-bg ← absolutely positioned bg image
.aths-blood-work-grid
.aths-blood-work-left
.aths-blood-work-overlay-card ← dark stats card
.biomarkers-header > .biomarkers-welcome / .biomarkers-title
.biomarkers-dashboard
.dashboard-title → "Biomarkers" h1
.metrics-row > .metric ( .metric-number / .metric-label )
.progress-bar > .progress-segment.{out-of-range,normal,optimal}
.aths-blood-work-right
.aths-blood-work-title / -body / -price / -cta
Target look: dark stats card (left) + red kicker + headline + price +
bordered red CTA (matching reference image #3.jpeg). The background
image needs to be muted / scrimmed so the right column reads. */
.aths-blood-work-section {
background: #f0eee5 !important;
padding: clamp(2rem, 4vw, 3.25rem) 1rem !important;
position: relative;
overflow: hidden;
}
.aths-blood-work-inner {
max-width: 1280px; margin: 0 auto;
position: relative;
z-index: 1;
}
/* Dim the bleeding red bg image so the editorial right-column content
stays readable. Pixfort's inline `background-image` stays, but we
knock it back with opacity + a cream scrim. */
.aths-blood-work-bg {
opacity: 0.18 !important;
filter: saturate(0.7);
}
.aths-blood-work-section::before {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(240, 238, 229, 0.6) 0%, rgba(240, 238, 229, 0.85) 100%);
z-index: 0;
pointer-events: none;
}
.aths-blood-work-grid {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
}
.aths-blood-work-overlay-card {
background: #1a1a1a !important;
color: var(--alch-ivory) !important;
padding: 1.5rem 1.6rem 1.4rem !important;
border-radius: var(--alch-radius);
border: 0 !important;
position: relative;
z-index: 2;
}
.biomarkers-welcome {
font-family: 'Cormorant Garamond', serif !important;
font-style: italic;
font-size: 1rem;
color: rgba(244, 234, 214, 0.7) !important;
margin: 0 0 0.5rem !important;
}
.biomarkers-title {
font-family: var(--alch-font-head) !important;
font-size: 1.45rem !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
color: var(--alch-ivory) !important;
font-weight: 500 !important;
margin: 0 !important;
}
.biomarkers-title::after {
content: "";
display: block;
width: 30px; height: 2px;
background: #c2412c;
margin: 0.7rem 0 0;
}
.dashboard-title {
font-family: var(--alch-font-head) !important;
font-size: 0.78rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
color: var(--alch-ivory) !important;
margin: 1rem 0 0.85rem !important;
font-weight: 500 !important;
}
.metrics-row { display: grid; grid-template-columns: repeat(4, 1fr) !important; gap: 0.75rem !important; margin-bottom: 0.85rem; }
.metric-number {
font-family: var(--alch-font-head) !important;
font-size: 1.6rem !important;
font-weight: 600 !important;
color: var(--alch-ivory) !important;
line-height: 1.05;
}
.metric-label {
font-size: 0.66rem !important;
letter-spacing: 0.04em !important;
color: rgba(244, 234, 214, 0.55) !important;
margin-top: 0.2rem;
}
.progress-bar {
display: flex !important;
height: 6px !important;
border-radius: 999px !important;
overflow: hidden;
background: rgba(244, 234, 214, 0.06);
}
.progress-segment.progress-out-of-range { background: #c2412c !important; flex: 0 0 14%; }
.progress-segment.progress-normal { background: #d6a02b !important; flex: 0 0 33%; }
.progress-segment.progress-optimal { background: #5d9b6c !important; flex: 1; }
.aths-blood-work-right {
padding: clamp(1rem, 2vw, 1.5rem) 0;
position: relative;
z-index: 2;
}
.aths-blood-work-title {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 3.6vw, 2.8rem) !important;
letter-spacing: 0.005em !important;
line-height: 1.05 !important;
color: var(--alch-midnight-900) !important;
margin: 0 0 0.7rem !important;
font-weight: 500 !important;
text-shadow: 0 1px 0 rgba(255,255,255,0.4); /* hairline against bg */
}
/* DROPPED the ::before "REAL NUMBERS. REAL INSIGHT." injection — it
competed with the actual headline copy on existing pages. The real
site already has its own kickers / eyebrows in the WPBakery rows
above this component; doubling up looked broken. */
.aths-blood-work-body {
font-size: 1rem;
color: var(--alch-midnight-800) !important;
margin: 0 0 1rem;
line-height: 1.55;
max-width: 32rem;
}
.aths-blood-work-body p { color: inherit !important; }
.aths-blood-work-price {
font-family: var(--alch-font-head) !important;
font-size: 1.2rem !important;
letter-spacing: 0.04em !important;
color: var(--alch-midnight-900) !important;
margin: 0.5rem 0 1rem !important;
font-weight: 600 !important;
}
/* DROPPED the ::before "Starting at" injection — the existing markup
already prints its own "starting at $179" text via the
`price_text` shortcode attribute. We were rendering it twice. */
.aths-blood-work-cta {
display: inline-flex !important;
align-items: center;
font-family: var(--alch-font-head) !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
border: 1.5px solid #c2412c !important;
color: #c2412c !important;
background: rgba(255, 255, 255, 0.92) !important;
padding: 0.9rem 1.6rem !important;
border-radius: 999px !important;
text-decoration: none !important;
transition: background var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease),
transform var(--alch-dur) var(--alch-ease);
}
.aths-blood-work-cta:hover {
background: #c2412c !important;
color: #fff !important;
transform: translateY(-1px);
}
@media (max-width: 880px) {
.aths-blood-work-grid { grid-template-columns: 1fr; }
}
/* ---------- Sheet #7 / Markers chrome gradient — restyle aths_markers_section
Source: .aths-marker-section / .aths-markers-categories / .aths-markers-category
.aths-marker-section-header (icon + title)
.aths-marker-card (each marker)
.aths-marker-tier.tier-complete / tier-premium / tier-entry → status pills
.aths-marker-reference-ranges → reference values list
.aths-marker-reveals > .aths-marker-reveals-item → expandable details
Target: chrome/silver gradient cards with quiet checkmarks. */
.aths-marker-section {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)),
linear-gradient(135deg, #d8d4cb 0%, #f2eee5 25%, #ffffff 45%, #e5e0d3 70%, #c8c2b3 100%) !important;
border: 1px solid rgba(10, 15, 31, 0.1) !important;
border-radius: var(--alch-radius) !important;
box-shadow: var(--alch-shadow-soft);
}
.aths-marker-section-header {
background: transparent !important;
border-bottom: 0 !important;
}
.aths-marker-section-icon {
width: 44px !important; height: 44px !important;
background: linear-gradient(135deg, #2c3251 0%, #0a0f1f 100%) !important;
color: var(--alch-gold-400) !important;
border-radius: 12px !important;
}
.aths-marker-section-title {
font-family: var(--alch-font-head) !important;
font-size: 1.25rem !important;
letter-spacing: 0.02em !important;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
}
.aths-marker-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)),
linear-gradient(160deg, #ece8de 0%, #f8f5ec 30%, #ffffff 50%, #e9e3d2 80%, #cbc5b6 100%) !important;
border: 1px solid rgba(10, 15, 31, 0.08) !important;
border-radius: var(--alch-radius) !important;
box-shadow: 0 4px 14px rgba(10, 15, 31, 0.06) !important;
}
.aths-marker-tier.tier-complete,
.aths-marker-tier.tier-entry {
background: var(--alch-midnight-900) !important;
color: var(--alch-ivory) !important;
border: 0 !important;
font-family: var(--alch-font-ui) !important;
font-size: 0.62rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
}
.aths-marker-tier.tier-premium {
background: linear-gradient(135deg, #fff8e1 0%, #f3e2a3 100%) !important;
color: var(--alch-gold-900) !important;
border: 1px solid rgba(212, 175, 55, 0.4) !important;
}
.aths-marker-name {
font-family: var(--alch-font-head) !important;
font-size: 1.6rem !important;
letter-spacing: 0.005em !important;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
line-height: 1.05 !important;
}
.aths-marker-checkmark {
background: var(--alch-midnight-900) !important;
color: var(--alch-ivory) !important;
}
.aths-marker-reference-range-label {
font-family: var(--alch-font-ui) !important;
font-size: 0.6rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
color: var(--alch-slate) !important;
}
.aths-marker-reference-range-value {
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
font-size: 0.85rem !important;
color: var(--alch-midnight-700) !important;
}
/* Sheet #41: hide round photo avatars above the marker accordion.
Live ATHS markup wraps each in .aths-markers-circle inside
.aths-markers-circles. Hide the whole container outright. */
.aths-markers-circles,
.aths-markers-circle,
.aths-markers-circle-inner,
.aths-marker-section-header > img,
.aths-marker-section-header [class*="photo"] {
display: none !important;
}
/* ---------- Sheet #1 + #30 / Comparison chart — restyle aths_comparison_chart
Sheet #30 says highlight should be blueish (not orange). Source:
.aths-comparison-chart__header / __row / __cell / __header-cell.is-highlighted
.aths-comparison-chart__highlight-ribbon / __col-badge / __col-icon */
.aths-comparison-chart__header-cell.is-highlighted {
background: var(--alch-midnight-800) !important;
color: var(--alch-ivory) !important;
border-radius: var(--alch-radius) var(--alch-radius) 0 0 !important;
box-shadow: 0 -8px 22px rgba(10, 15, 31, 0.18);
}
.aths-comparison-chart__row .aths-comparison-chart__cell.is-highlighted,
.aths-comparison-chart__cell.is-highlighted {
background: var(--alch-midnight-800) !important;
color: var(--alch-ivory) !important;
}
.aths-comparison-chart__highlight-ribbon {
background: var(--alch-midnight-900) !important;
color: var(--alch-gold-400) !important;
}
.aths-comparison-chart__col-icon-fallback {
background: #f4ead6 !important;
color: var(--alch-midnight-900) !important;
}
/* ---------- Sheet #3 / Tall Featured Treatments — restyle popular-treatments
Source: .popular-treatments-section / .treatments-carousel / .treatment-card
.treatment-card-image / .treatment-card-title / .treatment-card-badges
.treatment-card-overlay / .treatment-card-arrow / .gender-toggle */
.popular-treatments-section { background: var(--alch-paper) !important; }
.treatments-title {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
font-weight: 500 !important;
}
.treatments-subtitle {
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
font-size: clamp(0.95rem, 1.05vw, 1.1rem) !important;
color: var(--alch-slate) !important;
}
.gender-toggle {
background: rgba(10, 15, 31, 0.05) !important;
border-radius: 999px !important;
padding: 4px !important;
}
.gender-btn {
font-family: var(--alch-font-head) !important;
font-size: 0.78rem !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
background: transparent !important;
border: 0 !important;
border-radius: 999px !important;
padding: 0.55rem 1.1rem !important;
color: var(--alch-slate) !important;
cursor: pointer;
}
.gender-btn.active {
background: var(--alch-midnight-800) !important;
color: var(--alch-ivory) !important;
box-shadow: 0 6px 18px rgba(10, 15, 31, 0.2);
}
/* Women's variant — gold gradient when women toggle is active. The
parent .popular-treatments-section gets no class change, so we hook
on .gender-btn[data-gender="women"].active and use general sibling
selectors to push gold styles. Cleanest is via [data-active-gender]
attribute the JS sets on the section, but since it likely sets a
class on body or the section we use both fallbacks. */
.popular-treatments-section[data-gender="women"] .gender-btn.active,
.popular-treatments-section.is-women .gender-btn.active {
background: var(--alch-grad-gold) !important;
color: var(--alch-midnight-900) !important;
box-shadow: var(--alch-shadow-gold) !important;
}
.treatment-card {
background: #fff !important;
border: 1px solid rgba(212, 175, 55, 0.22) !important;
border-radius: var(--alch-radius) !important;
transition: transform var(--alch-dur) var(--alch-ease),
box-shadow var(--alch-dur) var(--alch-ease) !important;
}
.treatment-card:hover {
transform: translateY(-4px) !important;
box-shadow: var(--alch-shadow-lift) !important;
border-color: rgba(212, 175, 55, 0.55) !important;
}
.treatment-card-image {
aspect-ratio: 3 / 5 !important; /* tall / vial-shaped */
overflow: hidden !important;
border-radius: 12px !important;
/* IMPORTANT: do NOT use `background:` shorthand here — the shortcode
sets inline `background-image: url(…)` per card, and shorthand
would clobber it. Only set the FALLBACK color + sizing, and use a
pseudo-element for the gold halo overlay. */
background-color: #efe9dc;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
position: relative;
}
.treatment-card-image::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 90%, rgba(212, 175, 55, 0.18), transparent 60%),
linear-gradient(180deg, transparent 60%, rgba(10, 15, 31, 0.35) 100%);
pointer-events: none;
z-index: 1;
}
.treatment-card-image img {
width: 100% !important; height: 100% !important;
object-fit: cover !important; object-position: center !important;
filter: drop-shadow(0 18px 22px rgba(10, 15, 31, 0.28));
}
/* Title sits above the halo overlay. */
.aths-popular-treatments .treatment-card-overlay,
.aths-popular-treatments .treatment-card-title {
position: relative;
z-index: 2;
}
.treatment-card-title {
font-family: var(--alch-font-head) !important;
font-size: 1rem !important;
letter-spacing: 0.04em !important;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
}
.treatment-card-badges,
.treatment-card-badges span {
font-family: var(--alch-font-ui) !important;
font-size: 0.62rem !important;
letter-spacing: 0.22em !important;
text-transform: uppercase;
color: var(--alch-gold-900) !important;
background: linear-gradient(135deg, #fff8e1 0%, #f3e2a3 100%) !important;
border: 1px solid rgba(212, 175, 55, 0.45) !important;
}
/* Sheet #59 force 5 in a row on home/men/women */
.treatments-carousel,
.treatment-group {
grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width: 1100px) {
.treatments-carousel,
.treatment-group { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
.treatments-carousel,
.treatment-group { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ---------- Sheet #49 / Founder profile — already has a nice base; tighten
typography to match the rest of the new editorial tone. */
.aths-founder-profile__eyebrow {
font-family: var(--alch-font-ui) !important;
font-size: 0.7rem !important;
letter-spacing: 0.22em !important;
text-transform: uppercase;
color: var(--alch-gold-700) !important;
}
.aths-founder-profile__name {
font-family: var(--alch-font-head) !important;
letter-spacing: 0.005em !important;
font-weight: 500 !important;
}
.aths-founder-profile__quote {
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
border-left: 2px solid var(--alch-gold-500) !important;
padding-left: 1.25rem !important;
}
.aths-founder-profile__pill {
font-family: var(--alch-font-ui) !important;
font-size: 0.65rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
background: rgba(10, 15, 31, 0.06) !important;
}
/* Sheet #46 — space under quotes before next paragraph */
.aths-founder-profile__quote { margin-bottom: 2rem !important; }
.aths-founder-profile__quote + .aths-founder-profile__bio,
.aths-founder-profile__quote + p { margin-top: 1.25rem !important; }
/* ---------- Sheet #11 / "One test could change your life" — diagnostic-testing-section
Source: .aths-diagnostic-testing-block / __number / __heading / __description */
.aths-diagnostic-testing-block {
border: 1px solid rgba(10, 15, 31, 0.08) !important;
border-radius: var(--alch-radius) !important;
background: #fff !important;
box-shadow: var(--alch-shadow-soft);
}
.aths-diagnostic-testing-block-heading {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.5rem, 2.2vw, 1.9rem) !important;
letter-spacing: 0.005em !important;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
}
.aths-diagnostic-testing-block-number {
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
color: var(--alch-gold-700) !important;
letter-spacing: 0.1em !important;
}
/* ---------- Sheet #8 / "Health Intelligence" — existing aths-mobile-section
Source: .aths-mobile-app-* and surrounding wrapper. Reduce gold heavily,
sharpen the mockup typography. */
.aths-mobile-section,
[class*="aths-mobile-section"] {
background:
radial-gradient(900px 500px at 0% 0%, rgba(212, 175, 55, 0.06), transparent 65%),
var(--alch-paper) !important;
}
.aths-mobile-app-card {
background: linear-gradient(135deg, #0a0f1f 0%, #16223f 100%) !important;
color: var(--alch-ivory) !important;
border-radius: 14px !important;
}
.aths-mobile-app-card-title,
.aths-mobile-app-stat-value {
color: var(--alch-gold-400) !important;
font-family: var(--alch-font-head) !important;
}
.aths-mobile-app-card-label,
.aths-mobile-app-card-subtitle,
.aths-mobile-app-stat-label {
font-family: var(--alch-font-ui) !important;
font-size: 0.66rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
color: rgba(244, 234, 214, 0.6) !important;
}
/* ---------- Sheet #5 + #6 + #7 / Header banner / mini-service-area
Source: .aths-mini-service-area-card / __icon / __text / __arrow */
.aths-mini-service-area-card {
background: var(--alch-grad-midnight) !important;
color: var(--alch-ivory) !important;
border: 1px solid rgba(212, 175, 55, 0.18) !important;
border-radius: var(--alch-radius) !important;
transition: transform var(--alch-dur) var(--alch-ease),
box-shadow var(--alch-dur) var(--alch-ease);
}
.aths-mini-service-area-card:hover {
transform: translateY(-3px);
box-shadow: var(--alch-shadow-lift);
border-color: rgba(212, 175, 55, 0.4) !important;
}
.aths-mini-service-area-text {
font-family: var(--alch-font-head) !important;
font-size: 0.85rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
color: var(--alch-gold-400) !important;
}
.aths-mini-service-area-icon { color: var(--alch-gold-400) !important; }
.aths-mini-service-area-arrow { color: var(--alch-gold-400) !important; }
/* ---------- Sheet #23 / ISI button — restyle .safety-info-link to be larger,
bold, and centered. The original lives at .safety-info-link-wrap > a. */
.aths-product-hero .safety-info-link-wrap,
.safety-info-link-wrap {
text-align: center !important;
margin: 1.5rem auto !important;
display: block !important;
}
.aths-product-hero .safety-info-link,
.safety-info-link {
display: inline-flex !important;
align-items: center;
justify-content: center;
font-family: var(--alch-font-head) !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
text-align: center !important;
padding: 0.95rem 1.75rem !important;
border: 1.5px solid var(--alch-midnight-900) !important;
border-radius: 999px !important;
color: var(--alch-midnight-900) !important;
background: transparent !important;
text-decoration: none !important;
transition: background var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease);
}
.safety-info-link:hover {
background: var(--alch-midnight-900) !important;
color: var(--alch-ivory) !important;
}
/* ---------- Sheet #24 / ISI modal reformat — restyle .safety-info-modal */
.safety-info-modal {
z-index: 99999 !important;
}
.safety-info-modal__overlay {
background: rgba(10, 15, 31, 0.55) !important;
backdrop-filter: blur(6px);
z-index: 99998 !important;
}
.safety-info-modal__dialog {
background: var(--alch-paper) !important;
border-radius: var(--alch-radius-lg) !important;
max-width: min(720px, 92vw) !important;
max-height: 90vh !important;
margin: auto !important;
box-shadow: 0 24px 70px rgba(10, 15, 31, 0.4);
overflow: hidden;
}
.safety-info-modal__title {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.4rem, 2.6vw, 1.85rem) !important;
letter-spacing: 0.04em !important;
line-height: 1.15 !important;
color: var(--alch-midnight-900) !important;
margin: 0 0 0.6rem !important;
font-weight: 500 !important;
}
.safety-info-modal__body {
font-family: var(--alch-font-body) !important;
font-size: 0.95rem !important;
line-height: 1.65 !important;
color: var(--alch-ink) !important;
padding: 1.75rem clamp(1rem, 4vw, 2.5rem) !important;
max-height: calc(90vh - 5rem);
overflow-y: auto;
}
.safety-info-modal__body h2,
.safety-info-modal__body h3 {
font-family: var(--alch-font-head) !important;
font-size: 1.15rem !important;
margin: 1.4rem 0 0.5rem !important;
letter-spacing: 0.02em !important;
}
.safety-info-modal__close {
background: transparent !important;
border: 1px solid rgba(10, 15, 31, 0.15) !important;
border-radius: 50% !important;
width: 36px !important; height: 36px !important;
}
/* ---------- Sheet #28 / Side effects FDA: remove bullet, center contact info ---------- */
.side-effects-medwatch__list {
list-style: none !important;
padding-left: 0 !important;
text-align: center;
}
.side-effects-medwatch,
.side-effects-medwatch__intro {
text-align: center;
font-size: 0.88rem !important;
}
/* ---------- Sheet #45 / Brand page midnight (already in overrides.css);
ensure the founder-profile.jorge row stays paper white. */
body.page-brand .aths-founder-profile.jorge,
body.page-id-314 .aths-founder-profile.jorge {
background: var(--alch-paper) !important;
color: var(--alch-midnight-900) !important;
}
body.page-brand .aths-founder-profile.jorge *,
body.page-id-314 .aths-founder-profile.jorge * {
color: var(--alch-midnight-900) !important;
}
/* =========================================================================
Marker card layout fixes (ATHS markers, expanded state)
-------------------------------------------------------------------------
Issues observed live:
1. .aths-marker-reveals-item inherits `list-style: disc` from a parent
rule, painting a phantom grey bullet behind the checkmark SVG.
2. .aths-marker-tiers had zero offsetWidth → its 3 tier pills were
overflowing the card on the right (PREMIUM cut off).
3. Section icons (WHAT IT MEASURES / WHAT IT REVEALS / REFERENCE
RANGES) felt oversized vs the chrome card surface, and the gold
ring competed visually with the chrome gradient.
========================================================================= */
/* 1. Kill the phantom bullet on reveal items (the SVG checkmark stays). */
.aths-marker-reveals,
.aths-marker-reveals-content,
.aths-marker-reveals-item,
.aths-marker-card .aths-marker-reveals * {
list-style: none !important;
}
.aths-marker-reveals-item::marker { content: none !important; }
.aths-marker-reveals-item {
display: flex !important;
align-items: flex-start;
gap: 0.7rem;
padding-left: 0 !important;
}
.aths-marker-reveals-item .aths-marker-checkmark {
flex: 0 0 auto;
margin-top: 0.25rem;
}
/* 2. Tier pills row: flex with wrap so PREMIUM never spills past the
card edge. Make pills compact. */
.aths-marker-tiers {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.4rem !important;
width: 100% !important;
max-width: 100% !important;
align-items: center;
margin: 0 0 0.85rem !important;
}
.aths-marker-tier {
flex: 0 0 auto;
padding: 0.32rem 0.8rem !important;
font-size: 0.6rem !important;
letter-spacing: 0.18em !important;
white-space: nowrap;
border-radius: 999px !important;
}
/* 3. Section header icons inside the marker card — chrome surface
already says "premium"; the icons should be quieter. Smaller box,
no double-ring of gold + bg, single gold accent on the glyph. */
.aths-marker-card .aths-marker-section-icon,
.aths-marker-content .aths-marker-section-icon,
[class*="aths-marker-section-icon"] {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
background: var(--alch-midnight-900) !important;
color: var(--alch-gold-400) !important;
border: 0 !important;
flex: 0 0 36px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.aths-marker-card .aths-marker-section-icon svg,
.aths-marker-content .aths-marker-section-icon svg {
width: 18px !important;
height: 18px !important;
}
.aths-marker-section-title,
.aths-marker-card .aths-marker-section-title {
font-family: var(--alch-font-head) !important;
font-size: 0.92rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
margin: 0 !important;
}
.aths-marker-section-header {
display: flex !important;
align-items: center;
gap: 0.7rem;
padding: 0.85rem 1rem !important;
background: rgba(255, 255, 255, 0.55) !important;
border-radius: 10px;
margin-bottom: 0.6rem;
}
.aths-marker-section-content {
padding: 0 1rem 1rem !important;
}
/* 4. The marker name itself (e.g., HEMOGLOBIN) — tighten and align
with tier pills on a single row when wide enough. */
.aths-marker-header {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.85rem !important;
margin-bottom: 0.6rem !important;
}
.aths-marker-name {
font-size: clamp(1.4rem, 2.2vw, 1.7rem) !important;
margin: 0 !important;
}
/* 5. Reference ranges row — quiet "STANDARD" label, italic value. */
.aths-marker-reference-range-row,
.aths-marker-reference-range-row.highlight {
display: flex !important;
align-items: center;
gap: 1rem;
padding: 0.6rem 0.8rem !important;
border-radius: 8px;
background: rgba(255, 255, 255, 0.4);
}
.aths-marker-reference-range-row.highlight {
background: rgba(212, 175, 55, 0.08);
border-left: 2px solid var(--alch-gold-500);
}
/* 6. Card breathing room — give the whole card more padding. */
.aths-marker-card {
padding: 1.2rem 1.3rem !important;
}
/* 7. Body text inside the marker card — readable on chrome surface. */
.aths-marker-content,
.aths-marker-card p,
.aths-marker-reveals-item {
color: var(--alch-midnight-800) !important;
font-size: 0.92rem !important;
line-height: 1.6 !important;
}
/* =========================================================================
Single blog post hero — title invisible.
Two issues:
1. h1 has class .pix-sliding-headline-2 which the theme paints white for
dark hero backgrounds, but our single-post intro uses a cream
bg-primary, so the title disappears. Force midnight + tighten size.
2. The Pixfort sliding-headline animation requires an IntersectionObserver
trigger to flip opacity 0 → 1 + transform translateY → 0. On
single-post the trigger isn't firing reliably, leaving the text
stuck at opacity ~0 and translated 78px below the mask. Force the
final state so the title is always visible.
========================================================================= */
body.single-post .pix-main-intro,
body.single-post .pix-main-intro h1,
body.single-post .pix-main-intro .pix-sliding-headline-2,
body.single-post .pix-main-intro [class*="pix-sliding"],
body.single-post .pix-main-intro [class*="pix-animated"] {
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
}
/* Skip the sliding-in animation — always show text in final state. */
body.single-post .pix-main-intro .pix-sliding-item,
body.single-post .pix-main-intro .slide-in-container,
body.single-post .pix-main-intro [class*="pix-sliding-item"] {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
animation: none !important;
}
body.single-post .pix-main-intro .slide-in-container {
overflow: visible !important;
}
/* Cinzel on the blog title to match site-wide editorial typography. */
body.single-post .pix-main-intro h1,
body.single-post .pix-main-intro h1 .pix-sliding-item,
body.single-post .pix-main-intro h1 [class*="sliding-item"] {
font-family: var(--alch-font-head) !important;
font-weight: 500 !important;
letter-spacing: 0.005em !important;
}
/* =========================================================================
Blog INDEX (body.blog) — same hero issues as single post.
The intro bg defaults to dark (#1f1f1f) and the sliding-headline
animation is stuck at opacity:0 / hidden, so the "Blog" title never
appears. Force the intro to cream paper, force the h1 to its final
animated state, midnight color, Cinzel.
========================================================================= */
body.blog .pix-main-intro,
body.archive .pix-main-intro,
body.search .pix-main-intro {
background: var(--alch-paper) !important;
background-color: var(--alch-paper) !important;
}
body.blog .pix-main-intro h1,
body.blog .pix-main-intro .pix-sliding-headline-2,
body.blog .pix-main-intro [class*="pix-sliding"],
body.archive .pix-main-intro h1,
body.archive .pix-main-intro [class*="pix-sliding"] {
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
visibility: visible !important;
opacity: 1 !important;
font-family: var(--alch-font-head) !important;
font-weight: 500 !important;
letter-spacing: 0.005em !important;
}
body.blog .pix-main-intro .pix-sliding-item,
body.blog .pix-main-intro .slide-in-container,
body.blog .pix-main-intro [class*="pix-sliding-item"],
body.archive .pix-main-intro .pix-sliding-item,
body.archive .pix-main-intro .slide-in-container {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
animation: none !important;
}
body.blog .pix-main-intro .slide-in-container,
body.archive .pix-main-intro .slide-in-container {
overflow: visible !important;
}
body.blog .pix-main-intro h1,
body.archive .pix-main-intro h1 {
font-size: clamp(2rem, 4.4vw, 3.6rem) !important;
text-align: center;
margin: 0 auto !important;
padding: clamp(2rem, 5vw, 4rem) 1rem clamp(1rem, 2vw, 1.5rem);
}
/* Body content area on blog index — keep cream so post excerpts read. */
body.blog #content,
body.archive #content {
background: var(--alch-paper) !important;
}
/* Defeat any leftover Pixfort `bg-primary` or `bg-dark` on the intro
that might keep painting it dark. */
body.blog .pix-main-intro.bg-primary,
body.blog .pix-main-intro.bg-dark,
body.archive .pix-main-intro.bg-primary,
body.archive .pix-main-intro.bg-dark {
background: var(--alch-paper) !important;
background-color: var(--alch-paper) !important;
color: var(--alch-midnight-900) !important;
}
/* =========================================================================
Blog/archive POST CARDS — title was rendering white-on-white via the
.text-heading-default link class (Pixfort utility). Force midnight on
list articles + author byline + meta. Cinzel typography. Cream card
surfaces with hover lift.
========================================================================= */
body.blog article.post,
body.archive article.post,
body.search article.post {
background: #fff !important;
border: 1px solid rgba(10, 15, 31, 0.06) !important;
border-radius: var(--alch-radius);
box-shadow: var(--alch-shadow-soft);
overflow: hidden;
margin-bottom: clamp(1rem, 2vw, 1.5rem);
transition: transform var(--alch-dur) var(--alch-ease),
box-shadow var(--alch-dur) var(--alch-ease);
}
body.blog article.post:hover,
body.archive article.post:hover {
transform: translateY(-3px);
box-shadow: var(--alch-shadow-lift);
}
/* Title — bigger, ADA-friendly. Set font-size on BOTH h4 AND inner
because Pixfort's .pix-blog-post-text utility forces tiny sizes. */
body.blog article.post .entry-title,
body.archive article.post .entry-title,
body.search article.post .entry-title {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.85rem, 3.4vw, 2.6rem) !important;
letter-spacing: 0.005em !important;
line-height: 1.15 !important;
margin: 0 0 1rem !important;
font-weight: 500 !important;
}
body.blog article.post .entry-title a,
body.blog article.post .entry-title a.text-heading-default,
body.blog article.post .entry-title a.pix-blog-post-text,
body.blog article.post a.text-heading-default,
body.archive article.post .entry-title a,
body.archive article.post a.text-heading-default,
body.search article.post .entry-title a {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.85rem, 3.4vw, 2.6rem) !important;
font-weight: 500 !important;
letter-spacing: 0.005em !important;
line-height: 1.15 !important;
text-transform: none !important;
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
text-decoration: none !important;
background: none !important;
}
/* Visible focus state — required for WCAG 2.4.7 keyboard accessibility. */
body.blog article.post .entry-title a:focus-visible,
body.archive article.post .entry-title a:focus-visible {
outline: 2px solid var(--alch-gold-500);
outline-offset: 4px;
border-radius: 4px;
}
body.blog article.post .entry-title a:hover,
body.archive article.post .entry-title a:hover {
color: var(--alch-gold-700) !important;
-webkit-text-fill-color: var(--alch-gold-700) !important;
}
/* Author byline (the avatar + name pill near the top of the card). */
body.blog article.post .pix-blog-author,
body.blog article.post .post-author,
body.blog article.post [class*="author"],
body.archive article.post .pix-blog-author,
body.archive article.post [class*="author"] {
color: var(--alch-midnight-900) !important;
}
body.blog article.post .pix-blog-author a,
body.blog article.post [class*="author"] a,
body.blog article.post [class*="byline"] a,
body.archive article.post [class*="author"] a {
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
text-decoration: none !important;
font-family: var(--alch-font-ui) !important;
font-size: 0.78rem !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
font-weight: 500 !important;
}
/* Excerpt body */
body.blog article.post .entry-summary,
body.blog article.post .pix-text,
body.blog article.post p,
body.archive article.post .entry-summary,
body.archive article.post p {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.05rem !important;
line-height: 1.55 !important;
color: var(--alch-slate) !important;
}
/* Meta row (date / category pill / comment count) */
body.blog article.post .entry-meta,
body.blog article.post .post-meta,
body.blog article.post [class*="entry-date"],
body.blog article.post time,
body.archive article.post .entry-meta,
body.archive article.post time {
font-family: var(--alch-font-ui) !important;
font-size: 0.7rem !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
color: var(--alch-slate) !important;
}
/* Category pill — scope ONLY to direct category link containers, not any
descendant of an article whose class happens to include "category". The
old selector was matching every inside ,
including the Read More button. Now restricted to actual cat link
wrappers shipped by Pixfort + WP. */
body.blog article.post .post-categories a,
body.blog article.post .pix-blog-categories a,
body.blog article.post .cat-links a,
body.blog article.post .entry-categories a,
body.blog article.post a[rel~="category"],
body.archive article.post .post-categories a,
body.archive article.post a[rel~="category"] {
color: var(--alch-gold-900) !important;
-webkit-text-fill-color: var(--alch-gold-900) !important;
font-family: var(--alch-font-head) !important;
font-size: 0.66rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
background: linear-gradient(135deg, #fff8e1 0%, #f3e2a3 100%) !important;
padding: 0.35rem 0.85rem !important;
border-radius: 999px !important;
text-decoration: none !important;
border: 1px solid rgba(212, 175, 55, 0.45) !important;
}
/* "Read more →" link — match the actual Pixfort class .pix-blog-post-text
(which is what the live theme uses) — but ONLY the read-more variant
inside the post body, NOT the title link (which also has this class). */
body.blog article.post .pix-blog-post-text:not(.entry-title a):not(.text-heading-default),
body.blog article.post a.btn-link.pix-blog-post-text,
body.blog article.post .more-link,
body.archive article.post .more-link {
font-family: var(--alch-font-head) !important;
font-size: 0.74rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
background: transparent !important;
text-decoration: none !important;
padding: 0 !important;
border: 0 !important;
}
body.blog article.post .pix-blog-post-text:hover,
body.blog article.post .more-link:hover {
color: var(--alch-gold-700) !important;
-webkit-text-fill-color: var(--alch-gold-700) !important;
}
/* Comment-count bubble in the corner */
body.blog article.post [class*="comment"],
body.archive article.post [class*="comment"] {
color: var(--alch-slate) !important;
}
/* Featured image: rounded, full-width */
body.blog article.post .post-thumbnail,
body.archive article.post .post-thumbnail {
margin: 0 !important;
border-radius: 0 !important;
}
body.blog article.post .post-thumbnail img {
width: 100%; height: auto; display: block;
}
/* Catch-all: any leftover .text-heading-default INSIDE article cards on
blog/archive should read as midnight, never white. */
body.blog .text-heading-default,
body.archive .text-heading-default,
body.search .text-heading-default {
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
}
/* Hide the author avatar + display name entirely on blog list cards.
Per client direction: don't show the author on archive/list views. */
body.blog article.post .avatar,
body.blog article.post .pix-avatar,
body.blog article.post .pix-blog-author,
body.blog article.post .post-author,
body.blog article.post .author,
body.blog article.post .vcard,
body.blog article.post .pix-blog-meta-author,
body.blog article.post [class*="post-author"],
body.blog article.post [class*="author-name"],
body.blog article.post [rel="author"],
body.archive article.post .avatar,
body.archive article.post .pix-blog-author,
body.archive article.post [class*="author"],
body.search article.post .avatar,
body.search article.post [class*="author"] {
display: none !important;
}
/* Comment count bubble — pin to top right with consistent styling. */
body.blog article.post a[href*="#comments"],
body.blog article.post .pix-comment-count,
body.archive article.post .pix-comment-count {
font-family: var(--alch-font-ui) !important;
font-size: 0.78rem !important;
color: var(--alch-slate) !important;
-webkit-text-fill-color: var(--alch-slate) !important;
}
body.single-post .pix-main-intro h1 {
font-family: var(--alch-font-head) !important;
font-size: clamp(2rem, 4.4vw, 3.6rem) !important;
letter-spacing: 0.005em !important;
line-height: 1.05 !important;
text-align: center;
max-width: min(960px, 92vw);
margin: 0 auto !important;
padding: clamp(2rem, 5vw, 4rem) 1rem clamp(1rem, 2vw, 1.5rem);
font-weight: 500 !important;
}
/* Meta row (date / author / category) on single post */
body.single-post .pix-main-intro .pix-blog-meta,
body.single-post .pix-main-intro .post-meta,
body.single-post .pix-main-intro .entry-meta,
body.single-post .pix-main-intro [class*="post-info"] {
color: var(--alch-slate) !important;
}
/* =========================================================================
"One test could change everything" — restyle aths_diagnostic_testing_block
The "01" / "02" numerals were rendered with negative margin so they sat
outside the white card on the left, creating an asymmetric, broken look
with no surrounding padding. Re-flow as a 2-column grid: number column
(cream) + content column (white card).
========================================================================= */
.aths-diagnostic-testing-blocks {
display: flex;
flex-direction: column;
gap: clamp(1.25rem, 2.5vw, 2rem) !important;
}
.aths-diagnostic-testing-block {
display: grid !important;
grid-template-columns: clamp(72px, 8vw, 110px) minmax(0, 1fr) !important;
align-items: stretch;
background: #fff !important;
border: 1px solid rgba(10, 15, 31, 0.08) !important;
border-radius: var(--alch-radius) !important;
overflow: hidden;
box-shadow: var(--alch-shadow-soft);
padding: 0 !important;
/* Original ATHS rule applied gap: 48px which created a white moat between
the cream number column and the white text column, making the cream
block look like it was floating inside the card with messy padding.
Force gap to zero so the cream block sits flush against the content. */
gap: 0 !important;
column-gap: 0 !important;
row-gap: 0 !important;
position: relative;
}
.aths-diagnostic-testing-block-number {
/* Fill the entire left grid track edge-to-edge — was inset before. */
display: flex !important;
align-items: center;
justify-content: center;
align-self: stretch !important;
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
letter-spacing: 0.08em !important;
color: var(--alch-gold-700) !important;
background:
linear-gradient(180deg, #faf6ec 0%, #efe9dc 100%) !important;
border-right: 1px solid rgba(212, 175, 55, 0.2);
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
box-sizing: border-box !important;
/* Flush with the card's rounded corners on the left side. */
border-top-left-radius: var(--alch-radius);
border-bottom-left-radius: var(--alch-radius);
}
.aths-diagnostic-testing-block-content {
padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 2.5vw, 2rem) !important;
}
.aths-diagnostic-testing-block-heading {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
letter-spacing: 0.005em !important;
color: var(--alch-midnight-900) !important;
margin: 0 0 0.6rem !important;
font-weight: 500 !important;
}
.aths-diagnostic-testing-block-description {
font-size: 0.95rem !important;
color: var(--alch-slate) !important;
line-height: 1.55 !important;
margin: 0 !important;
}
.aths-diagnostic-testing-divider {
display: none !important; /* the new card border is visual separation */
}
@media (max-width: 640px) {
.aths-diagnostic-testing-block {
grid-template-columns: clamp(60px, 14vw, 80px) 1fr !important;
}
}
/* =========================================================================
FINAL COHERENCE PASS (May 2026)
-------------------------------------------------------------------------
Catch-all polish: graceful broken-image fallback (the .heic uploads in
the how-it-works carousel), mobile responsiveness tightening across
ATHS components, scrollbar hygiene, and global page-bottom spacing
so the new footer never sits flush against the last content section.
========================================================================= */
/* 1. Graceful fallback for broken/HEIC images. Browsers can't render HEIC,
so the ![]()
ends up 0×0 with the alt text showing. We give the
PARENT a soft cream gradient so the slot still has a presence and
reads as "image pending" rather than "broken site". */
.aths-how-it-works-carousel-card-image {
position: relative;
background:
radial-gradient(ellipse at 50% 60%, rgba(212, 175, 55, 0.10), transparent 70%),
linear-gradient(180deg, #faf6ec 0%, #efe9dc 100%);
border-radius: var(--alch-radius);
overflow: hidden;
min-height: 220px;
}
.aths-how-it-works-carousel-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* If ![]()
is broken (0 size), the parent gradient is what's visible. */
.aths-how-it-works-carousel-card-image img:not([src*=".jpg"]):not([src*=".jpeg"]):not([src*=".png"]):not([src*=".webp"]):not([src*=".svg"]) { display: none; }
/* 2. Global no-horizontal-overflow guard. */
html, body { overflow-x: hidden !important; }
/* 3. Page bottom: every page should have at least 1 row of breathing room
before the footer starts so the editorial rhythm doesn't slam into it. */
#pix-page-footer { margin-top: 0; }
.alch-footer { margin-top: 0; }
/* 4. Mobile: tighten ATHS hero typography so titles don't word-by-word wrap. */
@media (max-width: 720px) {
.aths-product-hero .hero h1,
.aths-product-hero .hero-text h1,
[class*="hero-section"] h1,
.pix-hero-title {
font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
line-height: 1.1 !important;
}
.aths-blood-work-section .aths-blood-work-grid {
grid-template-columns: 1fr !important;
}
.aths-diagnostic-testing-block-heading {
font-size: 1.1rem !important;
}
/* Footer columns stack cleanly. */
.alch-footer__top { grid-template-columns: 1fr !important; }
.alch-footer__columns { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}
/* 5. Hide stock-photo watermarks that ship with placeholder uploads
(e.g. "shutterstock 3837360357" overlays on hero photos in dev
content). Editor will replace photos at launch; defensively
hide the orange-circle watermark labels. */
[class*="stock-photo-watermark"],
[class*="shutterstock-watermark"],
.pix-stock-watermark {
display: none !important;
}
/* 6. Footer: clamp the brand logo width so a 1911×425 source doesn't
stretch the whole left column. */
.alch-footer__logo {
max-width: 200px !important;
width: clamp(140px, 14vw, 200px) !important;
height: auto;
}
/* 7. Coherent scrollbar styling — quiet, never appears mid-content. */
.aths-therapy-carousel-content,
.alch-gallery__track,
.aths-marker-reveals-content {
scrollbar-width: thin;
scrollbar-color: rgba(10, 15, 31, 0.18) transparent;
}
.aths-therapy-carousel-content::-webkit-scrollbar,
.alch-gallery__track::-webkit-scrollbar { height: 4px; }
.aths-therapy-carousel-content::-webkit-scrollbar-thumb,
.alch-gallery__track::-webkit-scrollbar-thumb {
background: rgba(10, 15, 31, 0.18);
border-radius: 4px;
}
/* 8. Active "current page" indicator on header menu — gold underline. */
.pix-main-menu .current-menu-item > a,
.pix-main-menu .current_page_item > a,
.pix-header .current-menu-item > a,
.pix-header .current_page_item > a {
position: relative;
}
.pix-main-menu .current-menu-item > a::after,
.pix-main-menu .current_page_item > a::after {
content: "";
position: absolute;
left: 0.55rem; right: 0.55rem;
bottom: -0.4rem;
height: 1px;
background: var(--alch-gold-500);
}
/* 8a. DESKTOP header menu link color — restore white.
The mobile drawer overrides (in overrides.css, wrapped in
`@media (max-width: 1099px)`) recolor menu links cream for the
slide-out panel. On desktop (≥1100px) we want the menu links to be
white on the midnight header. Without this rule, links fall back to
the Pixfort/Bootstrap default body color and read as dark grey. */
@media (min-width: 1100px) {
.pix-header .pix-main-menu a,
.pix-header .pix-main-menu > li > a,
.pix-header .pix-nav-link,
.pix-header .menu-item > a,
.pix-header-row .pix-main-menu a,
.pix-header-row .menu-item > a,
header.pix-header .menu > li > a,
header.pix-header nav a {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* Hover / focus — keep white but slightly soften with opacity so the
gold underline is the primary affordance. */
.pix-header .pix-main-menu a:hover,
.pix-header .pix-main-menu > li > a:hover,
.pix-header .pix-nav-link:hover,
.pix-header .menu-item > a:hover,
header.pix-header .menu > li > a:hover {
color: var(--alch-gold-300) !important;
-webkit-text-fill-color: var(--alch-gold-300) !important;
}
}
/* 9. Treatment hero CTAs (Start Assessment / View Treatments) — keep the
focus ring but match site palette. */
.aths-product-hero .btn-primary,
.aths-product-hero .btn-secondary,
.aths-hero-cta a,
.aths-btn-primary,
.aths-btn-secondary {
font-family: var(--alch-font-head) !important;
font-size: 0.78rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
font-weight: 500 !important;
}
.aths-btn-primary {
background: var(--alch-midnight-900) !important;
color: var(--alch-ivory) !important;
border: 0 !important;
}
.aths-btn-primary:hover {
background: var(--alch-gold-700) !important;
color: var(--alch-ivory) !important;
}
/* 10. Last-of-section spacing so adjacent sections don't slam together. */
section + section,
.vc_row + .vc_row { margin-top: 0; }
.vc_row.vc_row-has-fill + .vc_row.vc_row-has-fill { /* keep tight when both filled */ }
/* 11. Blog index — when /blog/ resolves to the blog page, the WP archive
loop renders here. Style it like a magazine grid. */
body.blog,
body.blog #content {
background: var(--alch-paper);
}
body.blog .pix-main-intro,
body.blog .page-title {
text-align: center;
padding: clamp(3rem, 6vw, 5rem) 1rem 2rem;
}
/* 12. Consistent margin under the page header so first content section
doesn't run flush against the sticky pill nav. */
.pix-header + #content,
.pix-header-mobile + #content { padding-top: 0; }
/* =========================================================================
Blog ADA / WCAG 2.1 AA compliance pass
-------------------------------------------------------------------------
• All body text ≥ 16px (1rem).
• Line height ≥ 1.5 on body copy.
• Color contrast ≥ 4.5:1 normal / ≥ 3:1 large text.
• Visible focus indicators on every interactive element (outline-offset
so they don't merge with the element).
• Skip-links visible on focus.
• prefers-reduced-motion respected.
========================================================================= */
/* Larger, higher-contrast body copy on post cards. Cormorant Garamond at
1.05rem (16.8px) on midnight text passes 4.5:1 against #fff. */
body.blog article.post .entry-summary,
body.blog article.post .pix-text,
body.blog article.post p,
body.archive article.post .entry-summary,
body.archive article.post p,
body.single-post .entry-content p {
font-size: 1.05rem !important;
line-height: 1.6 !important;
color: var(--alch-midnight-900) !important; /* darker than slate, 4.5:1 vs #fff */
}
/* Meta row contrast — was --alch-slate at 0.78rem; bump to midnight-700
so the date / categories pass 4.5:1 against the cream card. */
body.blog article.post .entry-meta,
body.blog article.post time,
body.blog article.post [class*="entry-date"],
body.archive article.post time {
color: var(--alch-midnight-700) !important;
font-size: 0.78rem !important;
line-height: 1.5 !important;
}
/* Visible focus on every interactive element inside a blog post card. */
body.blog article.post a:focus-visible,
body.blog article.post button:focus-visible,
body.archive article.post a:focus-visible,
body.archive article.post button:focus-visible,
body.single-post a:focus-visible,
body.single-post button:focus-visible {
outline: 2px solid var(--alch-gold-500);
outline-offset: 3px;
border-radius: 4px;
text-decoration: underline;
}
/* Read more affordance: explicit underline so the affordance isn't
color-only (WCAG 1.4.1). The arrow is decorative, hidden from AT. */
body.blog article.post .pix-blog-post-text,
body.blog article.post .more-link {
text-decoration: underline !important;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
text-decoration-color: var(--alch-gold-500);
}
body.blog article.post .pix-blog-post-text:hover,
body.blog article.post .more-link:hover {
text-decoration-color: var(--alch-gold-700);
}
/* Skip link, when the theme renders one. */
.screen-reader-text:focus,
.skip-link:focus {
position: fixed !important;
top: 1rem !important;
left: 1rem !important;
background: var(--alch-midnight-900);
color: var(--alch-ivory);
padding: 0.85rem 1.25rem;
z-index: 100000;
text-decoration: underline;
border-radius: 4px;
width: auto !important;
height: auto !important;
clip: auto !important;
}
/* Link-only color contrast guarantee on cream card text. */
body.blog article.post a,
body.archive article.post a {
color: var(--alch-midnight-900);
}
/* Single article page — body copy ADA tuning. */
body.single-post .entry-content {
font-size: 1.18rem !important;
line-height: 1.75 !important;
color: var(--alch-midnight-900) !important;
}
/* Reduce motion respected. */
@media (prefers-reduced-motion: reduce) {
body.blog article.post,
body.archive article.post,
body.single-post * {
animation: none !important;
transition: none !important;
}
}
/* =========================================================================
Footer newsletter — WPForms submit button visibility fix.
The auto-detected WPForms form (#183) ships with a transparent submit
button that disappears against the midnight footer background. Higher-
specificity selectors so we beat WPForms' own enqueued CSS, regardless
of the wrap class (.wpforms-submit-container, .wpforms-field-container,
etc.). Also re-flow as a single pill containing input + button.
========================================================================= */
.alch-footer .alch-footer-newsletter .wpforms-form,
.alch-footer-newsletter .wpforms-form,
.alch-footer-newsletter form.wpforms-form {
display: flex !important;
align-items: stretch !important;
background: rgba(244, 234, 214, 0.06) !important;
border: 1px solid rgba(212, 175, 55, 0.3) !important;
border-radius: 999px !important;
padding: 6px !important;
max-width: 30rem !important;
margin: 0 !important;
gap: 0;
}
.alch-footer-newsletter .wpforms-field-container,
.alch-footer-newsletter .wpforms-field {
flex: 1 1 auto;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.alch-footer-newsletter .wpforms-field-label,
.alch-footer-newsletter label {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.alch-footer-newsletter input[type="email"],
.alch-footer-newsletter input[type="text"],
.alch-footer-newsletter .wpforms-field-email input {
flex: 1 1 auto !important;
background: transparent !important;
border: 0 !important;
color: #f4ead6 !important;
font-family: var(--alch-font-ui);
font-size: 0.95rem;
padding: 0.7rem 1rem !important;
outline: none !important;
width: 100% !important;
box-shadow: none !important;
height: auto !important;
}
.alch-footer-newsletter input::placeholder {
color: rgba(244, 234, 214, 0.45);
}
/* Submit button — high specificity to beat WPForms inline + enqueued CSS. */
.alch-footer .alch-footer-newsletter .wpforms-submit-container,
.alch-footer-newsletter .wpforms-submit-container {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
.alch-footer .alch-footer-newsletter button.wpforms-submit,
.alch-footer .alch-footer-newsletter input[type="submit"].wpforms-submit,
.alch-footer-newsletter .wpforms-form .wpforms-submit,
.alch-footer-newsletter button[type="submit"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center;
flex: 0 0 auto !important;
background: #f4ead6 !important;
background-color: #f4ead6 !important;
color: #0a0f1f !important;
-webkit-text-fill-color: #0a0f1f !important;
font-family: var(--alch-font-head) !important;
font-size: 0.74rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
font-weight: 600 !important;
border: 0 !important;
border-radius: 999px !important;
padding: 0.7rem 1.25rem !important;
cursor: pointer !important;
width: auto !important;
height: auto !important;
min-width: 110px !important;
white-space: nowrap;
box-shadow: none !important;
transition: background var(--alch-dur) var(--alch-ease),
color var(--alch-dur) var(--alch-ease);
}
.alch-footer .alch-footer-newsletter button.wpforms-submit:hover,
.alch-footer-newsletter button[type="submit"]:hover {
background: var(--alch-gold-500) !important;
color: #0a0f1f !important;
}
/* Hide WPForms description / processing spinner that breaks the pill layout. */
.alch-footer-newsletter .wpforms-field-description,
.alch-footer-newsletter .wpforms-required-label,
.alch-footer-newsletter .wpforms-form .wpforms-submit-spinner {
display: none !important;
}
/* =========================================================================
Legal / info pages ONLY — Accessibility, Terms, HIPAA, Telehealth,
Privacy, Return/Refund. Scoped to a `.alch-legal-page` body class
added via PHP body_class filter.
The Pixfort midnight hero already provides top breathing room, so we
only add a SMALL gap between the hero and the article body. No big
top-padding (was creating an empty white band).
========================================================================= */
body.alch-legal-page #content,
body.page-id-3 #content,
body.page-id-894 #content {
padding-top: 0 !important;
}
body.alch-legal-page .entry-content,
body.page-id-3 .entry-content,
body.page-id-894 .entry-content {
padding-top: clamp(1.5rem, 3vw, 2.5rem);
padding-bottom: 3rem;
max-width: min(720px, 92vw);
margin: 0 auto;
}
body.alch-legal-page .entry-content h1,
body.alch-legal-page .entry-content h2,
body.page-id-3 .entry-content h1,
body.page-id-3 .entry-content h2 {
margin-top: 2rem;
margin-bottom: 1rem;
}
body.alch-legal-page .entry-content p,
body.page-id-3 .entry-content p {
margin-bottom: 1rem;
font-size: 1.075rem;
line-height: 1.7;
}
/* Privacy policy hero — extend midnight bg edge-to-edge BEHIND the header
so the sticky pill nav sits on midnight, not white. Add generous
top padding so the eyebrow + title sit comfortably below the sticky
pill nav instead of crashing into it. */
body.alch-legal-page .pix-main-intro,
body.alch-legal-page .alch-legal-hero,
body.page-id-3 .pix-main-intro,
body.page-id-894 .pix-main-intro,
body.alch-legal-page .pix-main-intro.bg-primary,
body.page-id-3 .pix-main-intro.bg-primary {
background: var(--alch-midnight-800) !important;
background-color: var(--alch-midnight-800) !important;
color: var(--alch-ivory) !important;
padding-top: clamp(5rem, 10vw, 8rem) !important;
padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}
body.alch-legal-page .pix-main-intro h1,
body.page-id-3 .pix-main-intro h1,
body.page-id-894 .pix-main-intro h1,
body.alch-legal-page .pix-main-intro [class*="pix-sliding"],
body.page-id-3 .pix-main-intro [class*="pix-sliding"] {
color: var(--alch-ivory) !important;
-webkit-text-fill-color: var(--alch-ivory) !important;
}
/* Force the sliding-headline animation to its final state on legal pages
so the title is always visible against midnight. */
body.alch-legal-page .pix-main-intro .pix-sliding-item,
body.alch-legal-page .pix-main-intro .slide-in-container,
body.page-id-3 .pix-main-intro .pix-sliding-item,
body.page-id-3 .pix-main-intro .slide-in-container {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
animation: none !important;
}
body.alch-legal-page .pix-main-intro .slide-in-container,
body.page-id-3 .pix-main-intro .slide-in-container {
overflow: visible !important;
}
/* =========================================================================
WPForms newsletter button — override CSS-variable theming.
The "render-modern" mode uses --wpforms-button-* custom props that win
over plain background rules. We set the variables AND the property,
from the highest-specificity scope WPForms allows.
========================================================================= */
body .alch-footer-newsletter .wpforms-container,
body .alch-footer-newsletter .wpforms-container-full,
body .alch-footer-newsletter .wpforms-render-modern {
--wpforms-button-background-color: #f4ead6 !important;
--wpforms-button-text-color: #0a0f1f !important;
--wpforms-button-border-color: transparent !important;
--wpforms-button-border-radius: 999px !important;
--wpforms-button-size-padding-h: 1.25rem !important;
--wpforms-button-size-padding-v: 0.7rem !important;
}
body .alch-footer-newsletter .wpforms-container .wpforms-submit,
body .alch-footer-newsletter button.wpforms-submit,
body .alch-footer-newsletter input[type="submit"].wpforms-submit,
.alch-footer .alch-footer-newsletter .wpforms-form button[type="submit"] {
background: #f4ead6 !important;
background-color: #f4ead6 !important;
background-image: none !important;
color: #0a0f1f !important;
-webkit-text-fill-color: #0a0f1f !important;
border: 0 !important;
border-radius: 999px !important;
padding: 0.7rem 1.5rem !important;
font-family: var(--alch-font-head) !important;
font-size: 0.74rem !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
min-width: 120px !important;
height: auto !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
cursor: pointer !important;
}
body .alch-footer-newsletter .wpforms-container .wpforms-submit:hover {
background: var(--alch-gold-500) !important;
background-color: var(--alch-gold-500) !important;
color: #0a0f1f !important;
}
/* =========================================================================
Footer newsletter — vertical alignment of the submit button.
Issue: WPForms wraps submit in .wpforms-submit-container which has
margin/padding pushing it off-center inside the pill. Force every
layer (form → field-container → submit-container → button) to use
center alignment with no vertical offsets.
========================================================================= */
.alch-footer-newsletter form,
.alch-footer-newsletter .wpforms-form,
.alch-footer-newsletter form.wpforms-form {
align-items: center !important;
}
.alch-footer-newsletter .wpforms-field-container {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
}
.alch-footer-newsletter .wpforms-field-container > * { flex: 1 1 auto; }
.alch-footer-newsletter .wpforms-submit-container,
.alch-footer-newsletter .wpforms-form .wpforms-submit-container {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
}
.alch-footer-newsletter .wpforms-submit,
.alch-footer-newsletter button[type="submit"] {
margin: 0 !important;
vertical-align: middle !important;
align-self: center !important;
}
.alch-footer-newsletter input[type="email"],
.alch-footer-newsletter input[type="text"] {
margin: 0 !important;
vertical-align: middle !important;
align-self: center !important;
}
/* =========================================================================
How It Works (homepage) — kill the horizontal scroller on desktop.
The aths_how_it_works_carousel ships as a horizontal flex track that
spills past the viewport. Client wants the 4 cards laid out as a
fixed 4-column grid on desktop, no scroll. Keep the carousel
behavior on mobile / tablet for narrow viewports.
========================================================================= */
@media (min-width: 880px) {
/* OUTER carousel wrapper: don't grid it. Just a plain block container
so its inner -content child can be the grid. */
.aths-how-it-works-carousel-section .aths-how-it-works-carousel,
.aths-how-it-works-carousel {
display: block !important;
overflow: visible !important;
overflow-x: visible !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
}
/* INNER content wrapper: this is the direct parent of the cards.
Make IT the 4-col grid. */
.aths-how-it-works-carousel-section .aths-how-it-works-carousel-content,
.aths-how-it-works-carousel-content {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(1rem, 2vw, 1.5rem) !important;
overflow: visible !important;
overflow-x: visible !important;
scroll-snap-type: none !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
}
.aths-how-it-works-carousel-section .aths-how-it-works-carousel-card,
.aths-how-it-works-carousel-card {
flex: 0 0 auto !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
scroll-snap-align: none !important;
}
/* Hide carousel arrows that the JS may inject — not needed in grid mode. */
.aths-how-it-works-carousel-section .aths-carousel-arrow,
.aths-how-it-works-carousel-section [class*="carousel-arrow"] {
display: none !important;
}
/* The image slot inside each card scales naturally. */
.aths-how-it-works-carousel-card-image {
width: 100% !important;
aspect-ratio: 4 / 3;
}
}
/* Hide the scrollbar on smaller screens too — user shouldn't see one. */
.aths-how-it-works-carousel,
.aths-how-it-works-carousel-content {
scrollbar-width: none;
}
.aths-how-it-works-carousel::-webkit-scrollbar,
.aths-how-it-works-carousel-content::-webkit-scrollbar {
display: none;
}
/* =========================================================================
"Your Health, In Hand" — restyle aths_mobile_section to match the
editorial 3-column reference (eyebrow pill + title + HIPAA card | phone
| feature cards stacked).
========================================================================= */
.aths-mobile-section {
background:
radial-gradient(900px 500px at 0% 0%, rgba(212, 175, 55, 0.06), transparent 65%),
var(--alch-paper) !important;
padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3rem) !important;
position: relative;
}
/* Kill the decorative blobs + connector lines that don't belong in the
editorial layout. */
.aths-mobile-section .aths-mobile-decoration,
.aths-mobile-section .aths-mobile-decoration-1,
.aths-mobile-section .aths-mobile-decoration-2,
.aths-mobile-section .aths-mobile-connector-lines,
.aths-mobile-section .aths-mobile-connector-line,
.aths-mobile-section .aths-mobile-phone-glow {
display: none !important;
}
/* SECTION becomes the 3-column grid (copy / phone / features). The
.aths-mobile-phone-container child is set to `display: contents` so
ITS children (phone + bubbles) become direct grid children of the
section, alongside the .aths-mobile-section-header sibling. */
.aths-mobile-section {
display: grid !important;
grid-template-columns: minmax(260px, 1fr) minmax(280px, 360px) minmax(260px, 1fr) !important;
gap: clamp(1.5rem, 3vw, 3rem) !important;
align-items: center !important;
max-width: 1280px !important;
margin-inline: auto !important;
}
.aths-mobile-section .aths-mobile-phone-container {
display: contents !important;
}
/* HEADER — column 1 of the section grid. */
.aths-mobile-section-header {
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
text-align: left !important;
max-width: 28rem;
margin: 0 !important;
padding: 0 !important;
align-self: center;
}
/* Inject "PREMIUM HEALTH PORTAL" eyebrow pill before the title. */
.aths-mobile-section-header::before {
content: "● PREMIUM HEALTH PORTAL";
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-gold-700);
border: 1px solid rgba(212, 175, 55, 0.4);
padding: 0.4rem 0.95rem;
border-radius: 999px;
background: rgba(212, 175, 55, 0.06);
margin-bottom: 1.25rem;
}
.aths-mobile-section-title {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.85rem, 3.4vw, 2.8rem) !important;
letter-spacing: 0.005em !important;
line-height: 1.05 !important;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
margin: 0 0 1rem !important;
}
.aths-mobile-section-title::after {
content: "";
display: block;
width: 80px; height: 2px;
background: var(--alch-gold-500);
margin: 0.85rem 0 0;
}
.aths-mobile-section-title em {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
color: var(--alch-midnight-900);
font-weight: 400;
}
/* Inject lede paragraph + HIPAA card after the title via ::after on
the header. (Pure-CSS injection so we don't touch the markup.) */
.aths-mobile-section-header::after {
content: "Advanced insights. Personalized plans. Exceptional care—all in one place.";
display: block;
font-size: 1.05rem;
color: var(--alch-slate);
line-height: 1.65;
max-width: 24rem;
margin: 0 0 1.5rem;
}
/* Right-column feature bubbles — un-position them and stack vertically. */
.aths-mobile-feature-bubble,
.aths-mobile-feature-bubble-1,
.aths-mobile-feature-bubble-2,
.aths-mobile-feature-bubble-3,
.aths-mobile-feature-bubble-4 {
position: static !important;
top: auto !important; left: auto !important;
right: auto !important; bottom: auto !important;
transform: none !important;
animation: none !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
background: #fff !important;
border: 1px solid rgba(10, 15, 31, 0.08) !important;
border-radius: var(--alch-radius) !important;
padding: 1rem 1.1rem !important;
display: flex !important;
align-items: flex-start;
gap: 0.85rem;
box-shadow: 0 1px 2px rgba(10, 15, 31, 0.04);
transition: none !important;
}
.aths-mobile-feature-bubble:hover {
transform: none !important;
box-shadow: 0 1px 2px rgba(10, 15, 31, 0.04) !important;
}
/* All four bubbles sit in column 3. Each gets its OWN grid row so they
stack vertically. No catch-all grid-row to avoid !important wars. */
.aths-mobile-feature-bubble,
.aths-mobile-feature-bubble-1,
.aths-mobile-feature-bubble-2,
.aths-mobile-feature-bubble-3,
.aths-mobile-feature-bubble-4 {
grid-column: 3 / 4 !important;
align-self: stretch !important;
}
/* Each bubble in its own row, with !important so it wins. */
.aths-mobile-feature-bubble-1 { grid-row: 1 / 2 !important; }
.aths-mobile-feature-bubble-2 { grid-row: 2 / 3 !important; }
.aths-mobile-feature-bubble-3 { grid-row: 3 / 4 !important; }
.aths-mobile-feature-bubble-4 { grid-row: 4 / 5 !important; }
/* Header spans all 4 rows of column 1; phone spans all 4 rows of col 2. */
.aths-mobile-section-header { grid-row: 1 / 5 !important; }
.aths-mobile-section .aths-mobile-phone { grid-row: 1 / 5 !important; }
/* Explicit row sizing so each bubble has consistent height. */
.aths-mobile-section {
grid-template-rows: auto auto auto auto !important;
grid-auto-flow: row !important;
}
.aths-mobile-bubble-icon {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background: var(--alch-midnight-900) !important;
color: var(--alch-gold-400) !important;
flex: 0 0 38px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.aths-mobile-bubble-icon svg { width: 18px; height: 18px; color: inherit; }
.aths-mobile-bubble-content {
font-family: var(--alch-font-ui) !important;
}
.aths-mobile-bubble-content strong,
.aths-mobile-bubble-content [class*="title"] {
display: block !important;
font-family: var(--alch-font-head) !important;
font-size: 0.82rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
color: var(--alch-midnight-900) !important;
margin-bottom: 0.25rem !important;
font-weight: 500 !important;
}
.aths-mobile-bubble-content span,
.aths-mobile-bubble-content p {
display: block;
font-size: 0.85rem !important;
color: var(--alch-slate) !important;
line-height: 1.5;
}
/* Phone — center column of the section grid (rows controlled above). */
.aths-mobile-phone-container > .aths-mobile-phone,
.aths-mobile-phone {
grid-column: 2 / 3 !important;
position: static !important;
transform: none !important;
margin: 0 auto !important;
width: 100% !important;
max-width: 320px !important;
align-self: center;
}
.aths-mobile-phone-screen {
background: linear-gradient(180deg, #faf6ec 0%, #ffffff 60%) !important;
}
.aths-mobile-app-card {
background: linear-gradient(135deg, #0a0f1f 0%, #16223f 100%) !important;
color: var(--alch-ivory) !important;
border-radius: 14px !important;
}
.aths-mobile-app-card-title { color: var(--alch-gold-400) !important; }
/* Stack on narrow viewports. */
@media (max-width: 1100px) {
.aths-mobile-section .aths-mobile-phone-container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.aths-mobile-section-header { grid-column: 1 !important; max-width: none; text-align: center !important; }
.aths-mobile-section-header::before,
.aths-mobile-section-header::after { margin-left: auto; margin-right: auto; max-width: 32rem; }
.aths-mobile-section-title::after { margin-left: auto; margin-right: auto; }
.aths-mobile-phone { grid-column: 1 !important; grid-row: auto !important; }
.aths-mobile-feature-bubble,
.aths-mobile-feature-bubble-1,
.aths-mobile-feature-bubble-2,
.aths-mobile-feature-bubble-3,
.aths-mobile-feature-bubble-4 {
grid-column: 1 !important;
grid-row: auto !important;
margin-top: 0 !important;
}
}
/* =========================================================================
"Your Health, In Hand" — kill all motion + tighten the layout.
No transitions, no transforms, no hover lifts, no animations anywhere
in this section. Section padding clamped, phone height fixed, right
column cards equal-spaced via gap rather than fragile row sizing.
========================================================================= */
.aths-mobile-section,
.aths-mobile-section *,
.aths-mobile-section *::before,
.aths-mobile-section *::after {
transition: none !important;
animation: none !important;
transform: none !important;
}
.aths-mobile-section {
/* Reduce vertical air; tighter, calmer layout. */
padding-top: clamp(2.5rem, 5vw, 4rem) !important;
padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
/* Use gap on rows so the four bubbles + phone align by content height. */
row-gap: 0.85rem !important;
align-items: stretch !important;
}
/* Phone: fixed dimensions, sits in the center, never overflows. */
.aths-mobile-section .aths-mobile-phone {
max-width: 300px !important;
width: 100% !important;
align-self: center !important;
}
/* Header: vertically centered in column 1, no animation. */
.aths-mobile-section-header {
align-self: center !important;
text-align: left !important;
}
/* Force each bubble into its row WITHOUT any movement on hover. */
.aths-mobile-feature-bubble,
.aths-mobile-feature-bubble * {
transition: none !important;
animation: none !important;
transform: none !important;
}
/* Equalize bubble heights so the right column reads as a clean stack. */
.aths-mobile-feature-bubble {
min-height: 0 !important;
height: auto !important;
}
/* The connector SVG / decorations are hidden; ensure they don't reserve space. */
.aths-mobile-section .aths-mobile-connector-lines,
.aths-mobile-section .aths-mobile-decoration {
position: absolute !important;
width: 0 !important; height: 0 !important;
pointer-events: none;
}
/* Don't let the title wrap to two lines if the column is wide enough. */
.aths-mobile-section-title {
white-space: normal;
word-spacing: -0.05em;
}
/* =========================================================================
Phone notch + screen typography fixes for the Health In Hand section.
The dynamic-island notch was positioned at left:640px from the
original CSS (sized for a 1200px hero phone) and was floating ABOVE
the constrained phone. Solution: hide the original ::before notch
AND attach a NEW notch as ::before on the SCREEN element so it sits
precisely at the top of the cream phone screen rectangle.
========================================================================= */
.aths-mobile-section .aths-mobile-phone::before {
display: none !important; /* original mis-positioned notch off */
}
.aths-mobile-section .aths-mobile-phone {
background: #0d0d0d !important;
padding: 14px !important;
border-radius: 38px !important;
position: relative !important;
overflow: hidden !important; /* clip anything that escapes the bezel */
}
.aths-mobile-section .aths-mobile-phone-screen {
border-radius: 26px !important;
overflow: hidden !important;
position: relative !important;
}
/* New notch as ::before on the SCREEN, sitting at top center inside it. */
.aths-mobile-section .aths-mobile-phone-screen::before {
content: "" !important;
position: absolute !important;
top: 8px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 90px !important;
height: 22px !important;
border-radius: 12px !important;
background: #0d0d0d !important;
z-index: 3 !important;
}
/* Greeting + title contrast on the cream screen. */
.aths-mobile-section .aths-mobile-app-greeting {
color: var(--alch-slate) !important;
-webkit-text-fill-color: var(--alch-slate) !important;
font-family: var(--alch-font-ui) !important;
font-size: 0.7rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
opacity: 1 !important;
}
.aths-mobile-section .aths-mobile-app-title {
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
font-family: var(--alch-font-head) !important;
font-size: 1.1rem !important;
letter-spacing: 0.02em !important;
font-weight: 500 !important;
}
/* App header room for the new notch. */
.aths-mobile-section .aths-mobile-app-header {
padding-top: 1.5rem !important;
}
/* Avatar pill ("JD") — keep gold but smaller. */
.aths-mobile-section .aths-mobile-app-avatar {
width: 28px !important;
height: 28px !important;
font-size: 0.7rem !important;
}
/* =========================================================================
Wellness Score / New Messages stats inside the phone screen — were
styled as gold-on-dark, but the screen bg is cream so they were
washed out. Force midnight contrast + a midnight surface so they
read as a clear sub-card.
========================================================================= */
.aths-mobile-section .aths-mobile-app-stats {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.6rem;
margin: 0.7rem 0 !important;
background: linear-gradient(135deg, #0a0f1f 0%, #16223f 100%) !important;
border-radius: 12px;
padding: 0.85rem 1rem !important;
}
.aths-mobile-section .aths-mobile-app-stat {
text-align: center;
padding: 0 !important;
}
.aths-mobile-section .aths-mobile-app-stat-value {
display: block !important;
font-family: var(--alch-font-head) !important;
font-size: 1.45rem !important;
font-weight: 600 !important;
color: var(--alch-gold-400) !important;
-webkit-text-fill-color: var(--alch-gold-400) !important;
line-height: 1.1 !important;
font-style: normal !important;
}
.aths-mobile-section .aths-mobile-app-stat-label {
display: block !important;
font-family: var(--alch-font-ui) !important;
font-size: 0.6rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
color: rgba(244, 234, 214, 0.65) !important;
-webkit-text-fill-color: rgba(244, 234, 214, 0.65) !important;
margin-top: 0.2rem !important;
}
/* =========================================================================
Health In Hand — vertically center icon-box content.
Each .aths-mobile-feature-bubble is flex; default align-items was
flex-start so icon + title sat at the TOP of an unequal-height card.
Center vertically so the icon and 2-line text align cleanly.
========================================================================= */
.aths-mobile-section .aths-mobile-feature-bubble {
align-items: center !important;
}
.aths-mobile-section .aths-mobile-bubble-content {
display: flex !important;
flex-direction: column;
justify-content: center;
}
/* =========================================================================
Featured Treatments — restyle .treatment-card to feel like the rest
of the editorial site instead of a "vial shop" with heavy gold pills.
- Calmer card chrome (off-white surface, hairline border)
- Less extreme aspect ratio (4/5 vs 3/5)
- Single midnight accent line at the top of each card on hover
- Cinzel title with proper hierarchy
- Compounded / Brand Name pills smaller and quieter
========================================================================= */
.aths-popular-treatments .treatment-card {
background: #fff !important;
border: 1px solid rgba(10, 15, 31, 0.08) !important;
border-radius: var(--alch-radius) !important;
box-shadow: 0 1px 2px rgba(10, 15, 31, 0.04) !important;
padding: 0 !important;
overflow: hidden !important;
position: relative;
}
.aths-popular-treatments .treatment-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--alch-midnight-900);
transform: scaleX(0);
transform-origin: center;
transition: transform 360ms var(--alch-ease);
}
.aths-popular-treatments .treatment-card:hover::before {
transform: scaleX(1);
}
.aths-popular-treatments .treatment-card-image {
aspect-ratio: 4 / 5 !important;
border-radius: 0 !important; /* edge-to-edge inside the card */
margin: 0 !important;
}
.aths-popular-treatments .treatment-card-overlay {
padding: 1.25rem 1.4rem !important;
}
.aths-popular-treatments .treatment-card-title {
font-family: var(--alch-font-head) !important;
font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
letter-spacing: 0.005em !important;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-transform: none !important;
margin: 0 0 0.5rem !important;
}
.aths-popular-treatments .treatment-card-description {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1rem !important;
line-height: 1.5 !important;
color: var(--alch-slate) !important;
margin: 0 !important;
}
/* Quieter, smaller "COMPOUNDED" / "BRAND NAME" pill */
.aths-popular-treatments .treatment-card-badges {
position: absolute !important;
top: 1rem !important;
left: 1rem !important;
margin: 0 !important;
}
.aths-popular-treatments .treatment-card-badges span,
.aths-popular-treatments .treatment-card-badges {
font-family: var(--alch-font-ui) !important;
font-size: 0.58rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
color: var(--alch-midnight-900) !important;
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(10, 15, 31, 0.12) !important;
padding: 0.3rem 0.65rem !important;
border-radius: 999px !important;
backdrop-filter: blur(4px);
}
/* Subtle gradient overlay on photo so titles stay readable. */
.aths-popular-treatments .treatment-card-image::after {
background:
linear-gradient(180deg, transparent 50%, rgba(10, 15, 31, 0.4) 100%) !important;
}
/* Arrow CTA — smaller, midnight, no gold */
.aths-popular-treatments .treatment-card-arrow {
color: var(--alch-midnight-900) !important;
background: transparent !important;
border: 0 !important;
font-family: var(--alch-font-head);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* =========================================================================
Marker cards — final reference layout (Nov 2026 redesign).
- Tier pills stacked vertically in the top-left
- Reference label + italic value top-right
- Marker name (large serif) below the header row
- "What it measures" + "What it can reveal" side-by-side (2 cols)
- "Clinical note" full-width below them
- Section-icon marks: small midnight rounded square with gold glyph
========================================================================= */
/* Header row: tiers (left) + reference (right) on the same row */
.aths-marker-card .aths-marker-header {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: start !important;
gap: 1rem !important;
margin-bottom: 1rem !important;
}
/* Tiers stack vertically. */
.aths-marker-card .aths-marker-tiers {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.4rem !important;
width: auto !important;
margin: 0 !important;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.aths-marker-card .aths-marker-tier {
width: auto;
min-width: 90px;
text-align: center;
padding: 0.4rem 0.95rem !important;
font-size: 0.62rem !important;
letter-spacing: 0.18em !important;
}
/* Reference label + value pinned right. */
.aths-marker-card .aths-marker-reference-ranges {
grid-column: 3 / 4;
grid-row: 1 / 2;
text-align: right !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.aths-marker-card .aths-marker-reference-range-row,
.aths-marker-card .aths-marker-reference-range-row.highlight {
display: block !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.aths-marker-card .aths-marker-reference-range-label {
display: block !important;
font-family: var(--alch-font-head) !important;
font-size: 0.7rem !important;
letter-spacing: 0.22em !important;
text-transform: uppercase;
color: var(--alch-gold-700) !important;
margin-bottom: 0.45rem !important;
}
.aths-marker-card .aths-marker-reference-range-value {
display: block !important;
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
font-size: 0.95rem !important;
color: var(--alch-slate) !important;
}
/* Marker name + lead text — sit below the header row (full width). */
.aths-marker-card .aths-marker-name,
.aths-marker-card .aths-marker-card-name {
font-family: var(--alch-font-head) !important;
font-size: clamp(1.7rem, 2.2vw, 2.1rem) !important;
letter-spacing: 0.005em !important;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
margin: 0.4rem 0 0.5rem !important;
line-height: 1.05 !important;
text-transform: none !important;
}
.aths-marker-card .aths-marker-card-lead,
.aths-marker-card .aths-marker-content > p:first-of-type {
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
font-size: 1rem !important;
color: var(--alch-slate) !important;
margin: 0 0 1.25rem !important;
line-height: 1.5;
}
/* Reveals → 2-col grid, with the third (clinical note) spanning both. */
.aths-marker-card .aths-marker-reveals,
.aths-marker-card .aths-marker-reveals-content {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.85rem !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.aths-marker-card .aths-marker-reveals-item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.6rem !important;
background: rgba(255, 255, 255, 0.55) !important;
border: 1px solid rgba(10, 15, 31, 0.06) !important;
border-radius: 12px !important;
padding: 1rem 1.1rem !important;
list-style: none !important;
}
.aths-marker-card .aths-marker-reveals-item::before,
.aths-marker-card .aths-marker-reveals-item::marker {
content: none !important;
}
/* Hide the old SVG checkmarks — replace with section-icon marks. */
.aths-marker-card .aths-marker-reveals-item .aths-marker-checkmark {
width: 28px !important;
height: 28px !important;
border-radius: 8px !important;
background: rgba(212, 175, 55, 0.12) !important;
color: var(--alch-gold-700) !important;
border: 1px solid rgba(212, 175, 55, 0.4) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 28px;
margin: 0 !important;
}
.aths-marker-card .aths-marker-reveals-item .aths-marker-checkmark svg {
width: 14px; height: 14px;
}
/* The "What it measures / reveals / Clinical note" labels above body. */
.aths-marker-card .aths-marker-reveals-item dt,
.aths-marker-card .aths-marker-reveals-item strong,
.aths-marker-card .aths-marker-reveals-item [class*="-label"],
.aths-marker-card .aths-marker-reveals-item [class*="-title"] {
font-family: var(--alch-font-head) !important;
font-size: 0.7rem !important;
letter-spacing: 0.22em !important;
text-transform: uppercase;
color: var(--alch-gold-700) !important;
margin: 0 !important;
padding: 0 !important;
font-weight: 500 !important;
}
.aths-marker-card .aths-marker-reveals-item dt::before {
content: none !important;
display: none !important;
}
.aths-marker-card .aths-marker-reveals-item dd,
.aths-marker-card .aths-marker-reveals-item p,
.aths-marker-card .aths-marker-reveals-item span:not([class*="-label"]):not([class*="-title"]) {
font-family: var(--alch-font-body) !important;
font-size: 0.92rem !important;
line-height: 1.55 !important;
color: var(--alch-midnight-800) !important;
margin: 0 !important;
}
/* The 3rd item (clinical note) spans both columns. */
.aths-marker-card .aths-marker-reveals-item:nth-child(3) {
grid-column: 1 / -1 !important;
}
/* Mobile: collapse to single column. */
@media (max-width: 720px) {
.aths-marker-card .aths-marker-header {
grid-template-columns: 1fr;
}
.aths-marker-card .aths-marker-tiers,
.aths-marker-card .aths-marker-reference-ranges {
grid-column: 1 / 2;
}
.aths-marker-card .aths-marker-reference-ranges {
text-align: left !important;
}
.aths-marker-card .aths-marker-reveals,
.aths-marker-card .aths-marker-reveals-content {
grid-template-columns: 1fr !important;
}
}
/* =========================================================================
Marker category accordion header — white-card redesign
-------------------------------------------------------------------------
Replace the dark-midnight category rows with a clean white card:
- White surface, hairline border
- Midnight rounded-square icon mark with gold glyph
- Large midnight serif category title
- "X markers" pill next to the title
- Faint description body
- "Tap to explore markers" oval CTA + chevron on right
Kills the colored left border accent (red / gold / purple / green / blue)
and forces the same midnight icon treatment across every category for
visual coherence.
========================================================================= */
.aths-markers-categories .aths-markers-category {
background: #fff !important;
border: 1px solid rgba(10, 15, 31, 0.08) !important;
border-left: 1px solid rgba(10, 15, 31, 0.08) !important;
border-radius: var(--alch-radius) !important;
margin-bottom: 0.85rem !important;
box-shadow: 0 1px 2px rgba(10, 15, 31, 0.04);
overflow: hidden;
}
.aths-markers-categories .aths-marker-section-header {
display: grid !important;
grid-template-columns: auto 1fr auto auto !important;
align-items: center !important;
gap: 1.25rem !important;
background: #fff !important;
padding: 1.1rem 1.4rem !important;
border: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* Icon mark — midnight rounded square with gold glyph (no per-category color) */
.aths-markers-categories .aths-marker-section-icon {
width: 52px !important;
height: 52px !important;
border-radius: 12px !important;
background: var(--alch-midnight-900) !important;
color: var(--alch-gold-400) !important;
border: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 52px;
grid-column: 1;
}
.aths-markers-categories .aths-marker-section-icon svg {
width: 22px !important;
height: 22px !important;
color: var(--alch-gold-400) !important;
}
/* Title block — eyebrow injected via ::before on the title. */
.aths-markers-categories .aths-marker-section-title {
grid-column: 2;
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 0.7rem;
font-family: var(--alch-font-head) !important;
font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
letter-spacing: 0.005em !important;
color: var(--alch-midnight-900) !important;
font-weight: 500 !important;
margin: 0 !important;
text-transform: none !important;
position: relative;
padding-top: 1.2rem; /* room for the injected eyebrow */
}
.aths-markers-categories .aths-marker-section-title::before {
content: "Cardio-metabolic insight";
position: absolute;
top: 0; left: 0;
font-family: var(--alch-font-ui);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--alch-midnight-700);
font-weight: 500;
white-space: nowrap;
}
/* "X markers" count pill next to the title. */
.aths-markers-categories .aths-marker-section-count,
.aths-markers-categories .aths-marker-count,
.aths-markers-categories [class*="marker-count"],
.aths-markers-categories .aths-marker-section-title em {
font-family: var(--alch-font-ui) !important;
font-style: normal !important;
font-size: 0.74rem !important;
letter-spacing: 0.06em !important;
color: var(--alch-slate) !important;
background: rgba(10, 15, 31, 0.04) !important;
border: 1px solid rgba(10, 15, 31, 0.08) !important;
padding: 0.25rem 0.7rem !important;
border-radius: 999px !important;
font-weight: 400;
}
/* Optional description below the title row. If present in markup, style it. */
.aths-markers-categories .aths-marker-section-description,
.aths-markers-categories [class*="section-description"] {
grid-column: 1 / 3;
grid-row: 2;
margin: 0.4rem 0 0 !important;
font-size: 0.92rem !important;
color: var(--alch-slate) !important;
line-height: 1.5;
}
/* "Tap to explore markers" CTA on the right + chevron. */
.aths-markers-categories .aths-marker-section-cta,
.aths-markers-categories .aths-marker-section-explore,
.aths-markers-categories [class*="-explore"] {
grid-column: 3;
display: inline-flex !important;
align-items: center;
gap: 0.4rem;
font-family: var(--alch-font-ui) !important;
font-size: 0.78rem !important;
letter-spacing: 0.04em !important;
color: var(--alch-midnight-900) !important;
background: #fff !important;
border: 1px solid rgba(10, 15, 31, 0.12) !important;
padding: 0.55rem 1rem !important;
border-radius: 999px !important;
text-decoration: none;
}
/* Chevron toggle: round button with caret. */
.aths-markers-categories .aths-marker-section-toggle,
.aths-markers-categories [class*="-toggle"],
.aths-markers-categories [class*="-chevron"] {
grid-column: 4;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: #fff !important;
border: 1px solid rgba(10, 15, 31, 0.12) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 36px;
color: var(--alch-midnight-900);
}
/* Default category section background (the part containing marker cards
when expanded) — light cream so it differentiates from the white header. */
.aths-markers-categories .aths-marker-section,
.aths-markers-categories .aths-marker-section-content {
background: rgba(10, 15, 31, 0.02) !important;
border-radius: 0 0 var(--alch-radius) var(--alch-radius);
}
.aths-markers-categories .aths-marker-section-header {
border-radius: var(--alch-radius) var(--alch-radius) 0 0 !important;
}
/* =========================================================================
Comprehensive Diagnostic Testing — mobile layout fix
-------------------------------------------------------------------------
Desktop: floating photos arranged decoratively around the title.
Mobile (<880px): kill the absolute positioning so photos stack ABOVE
the title in a tidy 2x2 grid, then title + bullets below uniformly
aligned to the left edge of the readable column.
========================================================================= */
@media (max-width: 880px) {
.comprehensive-diagnostic-section,
[class*="comprehensive-diagnostic"],
.aths-comprehensive-diagnostic {
padding: clamp(2rem, 6vw, 3.5rem) 1rem !important;
}
/* Floating photos stack into a 2x2 grid above the content. */
.comprehensive-diagnostic-section .diagnostic-images,
.comprehensive-diagnostic-section [class*="-images"],
.comprehensive-diagnostic-section [class*="-photos"],
.aths-comprehensive-diagnostic [class*="-images"] {
position: relative !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem !important;
margin: 0 0 1.5rem !important;
width: 100%;
height: auto !important;
transform: none !important;
}
.comprehensive-diagnostic-section .diagnostic-image,
.comprehensive-diagnostic-section [class*="-image-1"],
.comprehensive-diagnostic-section [class*="-image-2"],
.comprehensive-diagnostic-section [class*="-image-3"],
.comprehensive-diagnostic-section [class*="-image-4"],
.comprehensive-diagnostic-section [class*="diagnostic-image"] {
position: static !important;
top: auto !important; left: auto !important;
right: auto !important; bottom: auto !important;
transform: none !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
border-radius: 14px !important;
overflow: hidden;
}
.comprehensive-diagnostic-section .diagnostic-image img,
.comprehensive-diagnostic-section [class*="diagnostic-image"] img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Title and bullets — uniform left alignment in a single readable column. */
.comprehensive-diagnostic-section h2,
.comprehensive-diagnostic-section h3,
.comprehensive-diagnostic-section .diagnostic-title,
[class*="comprehensive-diagnostic"] h2 {
text-align: left !important;
margin: 0 0 1rem !important;
font-size: clamp(1.5rem, 6vw, 2rem) !important;
line-height: 1.1 !important;
}
.comprehensive-diagnostic-section ul,
.comprehensive-diagnostic-section .diagnostic-list,
[class*="comprehensive-diagnostic"] ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.comprehensive-diagnostic-section li,
[class*="comprehensive-diagnostic"] li {
display: flex !important;
align-items: flex-start !important;
gap: 0.85rem !important;
margin: 0 0 0.85rem !important;
padding-left: 0 !important;
text-align: left !important;
/* All items share the SAME left edge — kill any per-item offsets. */
transform: none !important;
text-indent: 0 !important;
}
.comprehensive-diagnostic-section li img,
.comprehensive-diagnostic-section li svg,
.comprehensive-diagnostic-section li [class*="check"],
[class*="comprehensive-diagnostic"] li > [class*="icon"]:first-child {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
display: inline-flex !important;
}
}
/* =========================================================================
Popular treatments / service areas carousel — INFINITE LOOP on mobile
-------------------------------------------------------------------------
Source JS in popular-treatments.php uses currentIndex with hard
bounds (0..maxIndex). We wrap clicks with a delegated listener that
detects boundary state and overrides to wrap-around. JS lives in
pixfort-patches.js (see below).
========================================================================= */
/* =========================================================================
"Your Health, In Hand" — MOBILE stack (≤880px)
-------------------------------------------------------------------------
Earlier mobile rule targeted .aths-mobile-phone-container (which is
now display:contents, so it doesn't host any grid). Real grid lives
on .aths-mobile-section. Re-target it and force a single column:
- Title block (header) centered, full width
- Phone below the text, centered
- Feature bubbles below the phone, FULL WIDTH stacked
- All hardcoded grid-row spans cleared
========================================================================= */
@media (max-width: 880px) {
.aths-mobile-section {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
grid-auto-rows: auto !important;
gap: 1.25rem !important;
padding: clamp(2rem, 5vw, 3.5rem) 1rem !important;
text-align: center !important;
}
.aths-mobile-section .aths-mobile-phone-container {
display: contents !important;
}
/* Header (title + eyebrow + lede) — full width, centered. */
.aths-mobile-section .aths-mobile-section-header {
grid-column: 1 / -1 !important;
grid-row: auto !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 0.5rem !important;
text-align: center !important;
align-self: auto !important;
}
.aths-mobile-section .aths-mobile-section-header::before,
.aths-mobile-section .aths-mobile-section-header::after {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
max-width: 32rem;
}
.aths-mobile-section .aths-mobile-section-title {
text-align: center !important;
}
.aths-mobile-section .aths-mobile-section-title::after {
margin: 0.85rem auto 0 !important;
}
/* Phone — under the text, centered. */
.aths-mobile-section .aths-mobile-phone {
grid-column: 1 / -1 !important;
grid-row: auto !important;
margin: 0 auto !important;
align-self: center !important;
width: 100% !important;
max-width: 320px !important;
}
/* Each bubble: own row, FULL WIDTH (not constrained to col 3). */
.aths-mobile-section .aths-mobile-feature-bubble,
.aths-mobile-section .aths-mobile-feature-bubble-1,
.aths-mobile-section .aths-mobile-feature-bubble-2,
.aths-mobile-section .aths-mobile-feature-bubble-3,
.aths-mobile-section .aths-mobile-feature-bubble-4 {
grid-column: 1 / -1 !important;
grid-row: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
text-align: left;
}
}
/* =========================================================================
Unified "Get Started" CTA — closing-CTA + image-footer + hero buttons
-------------------------------------------------------------------------
Various templates render Get Started as different button shapes/sizes.
Force a single canonical pill style site-wide and make sure it scales
cleanly on mobile.
========================================================================= */
/* The closing-cta section button (most pages: Undergo an Alchemical
Transformation / Get Started). Section uses .closing-cta class. */
.closing-cta a:not(.cta-button),
.closing-cta .pix-btn,
.closing-cta .aths-btn-primary,
.closing-cta .btn-primary,
.closing-cta .aths-cta,
[class*="closing-cta"] a.pix-btn,
[class*="closing-cta"] .aths-btn-primary,
.aths-closing-cta a:not(.cta-button),
.aths-closing-cta .pix-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.55rem;
font-family: var(--alch-font-head) !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-decoration: none !important;
padding: 0.95rem 1.75rem !important;
border-radius: 999px !important;
background: var(--alch-ivory) !important;
background-color: var(--alch-ivory) !important;
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
border: 0 !important;
box-shadow: 0 6px 18px rgba(10, 15, 31, 0.18);
white-space: nowrap;
}
/* For Archive-1's native .cta-button.primary (dark midnight pill +
inline white icon-circle), don't clobber the design. Just make sure
the icon hugs the text and the button doesn't get inflated by
min-width inheritance. */
.closing-cta a.cta-button,
[class*="closing-cta"] a.cta-button,
.aths-closing-cta a.cta-button {
min-width: 0 !important;
width: auto !important;
gap: 0.6rem !important;
justify-content: center !important;
}
.closing-cta a.cta-button .button-icon,
[class*="closing-cta"] a.cta-button .button-icon,
.aths-closing-cta a.cta-button .button-icon {
margin-left: 0 !important;
}
.closing-cta a:hover,
.closing-cta .pix-btn:hover,
.closing-cta .aths-btn-primary:hover {
background: var(--alch-gold-500) !important;
background-color: var(--alch-gold-500) !important;
color: var(--alch-midnight-900) !important;
}
/* Mobile: make all "Get Started" CTAs scale + center cleanly. */
@media (max-width: 720px) {
.closing-cta,
[class*="closing-cta"] {
text-align: center !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.closing-cta a,
.closing-cta .pix-btn,
[class*="closing-cta"] a.pix-btn,
[class*="closing-cta"] .aths-btn-primary,
.closing-cta .aths-cta {
display: inline-flex !important;
width: auto !important;
max-width: 100%;
padding: 0.85rem 1.5rem !important;
font-size: 0.78rem !important;
letter-spacing: 0.16em !important;
margin: 1rem auto !important;
min-width: 0 !important;
}
/* Title in the closing CTA — keep readable on small screens. */
.closing-cta h2,
.closing-cta h3,
[class*="closing-cta"] h2 {
font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
line-height: 1.1 !important;
text-align: center !important;
padding: 0 0.5rem;
}
}
/* Hero "Get Started" buttons (treatment pages) — same canonical pill. */
.aths-hero-cta a,
.aths-hero-content .pix-btn,
.aths-hero-section .aths-btn-primary,
.aths-product-hero .btn-primary {
font-family: var(--alch-font-head) !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
border-radius: 999px !important;
padding: 0.85rem 1.5rem !important;
}
@media (max-width: 720px) {
.aths-hero-cta a,
.aths-hero-content .pix-btn,
.aths-product-hero .btn-primary,
.aths-product-hero .btn-secondary {
padding: 0.75rem 1.25rem !important;
font-size: 0.74rem !important;
letter-spacing: 0.14em !important;
}
}
/* =========================================================================
Single blog post comments — author name + URL were rendering white
on white because Pixfort's .text-heading-default util forces white in
contexts where the theme expected a dark hero bg. Force midnight on
every comment-author element + URL link site-wide on single-post.
========================================================================= */
body.single-post .comment-author,
body.single-post .comment-author cite,
body.single-post .comment-author cite.fn,
body.single-post .comment-author a,
body.single-post .comment-author .url,
body.single-post .comment-meta,
body.single-post .comment-meta a,
body.single-post .comment-metadata,
body.single-post .comment-metadata a,
body.single-post .comment-content,
body.single-post .comment-content p,
body.single-post .comment-body,
body.single-post .comment-body a,
body.single-post .comment .fn,
body.single-post .comments-area,
body.single-post .comments-area h1,
body.single-post .comments-area h2,
body.single-post .comments-area h3,
body.single-post #comments,
body.single-post #comments *,
body.single-post .comment .text-heading-default,
body.single-post .comments-area .text-heading-default {
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
}
/* Visible URL link (e.g. "alchemical.propellerdm.com") */
body.single-post .comment-author a,
body.single-post .comment-author .url,
body.single-post .comment-body a {
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
text-decoration: underline;
text-decoration-color: var(--alch-gold-500);
text-underline-offset: 3px;
}
body.single-post .comment-author a:hover,
body.single-post .comment-body a:hover {
color: var(--alch-gold-700) !important;
-webkit-text-fill-color: var(--alch-gold-700) !important;
}
/* Comment date / "Says:" / etc — slate not white. */
body.single-post .comment-meta,
body.single-post .comment-metadata,
body.single-post time.comment-time {
color: var(--alch-slate) !important;
-webkit-text-fill-color: var(--alch-slate) !important;
font-size: 0.85rem !important;
letter-spacing: 0.04em;
}
/* =========================================================================
Single blog post — Author byline visibility (WCAG AA)
-------------------------------------------------------------------------
"ADMIN" / author name was rendering white-on-near-white in the post
header. Pixfort's .text-heading-default + .text-white2 utilities are
the culprits. Force midnight contrast on every author-related element
on single-post pages.
========================================================================= */
body.single-post .pix-blog-author,
body.single-post .pix-blog-author *,
body.single-post .pix-post-author,
body.single-post .pix-post-author *,
body.single-post .post-author,
body.single-post .post-author *,
body.single-post .author,
body.single-post .author *,
body.single-post .author-name,
body.single-post .author-name *,
body.single-post .vcard,
body.single-post .vcard *,
body.single-post .pix-blog-meta-author,
body.single-post .pix-blog-meta-author *,
body.single-post [class*="post-meta-author"],
body.single-post [class*="post-meta-author"] *,
body.single-post [class*="author-info"],
body.single-post [class*="byline"],
body.single-post [class*="byline"] *,
body.single-post [rel="author"],
body.single-post .text-white2,
body.single-post .pix-blog-meta .text-white2,
body.single-post .pix-blog-meta .text-heading-default,
body.single-post .pix-blog-meta-element,
body.single-post .pix-blog-meta-element *,
body.single-post .pix-blog-meta a,
body.single-post .pix-blog-meta {
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
}
/* Author name typography — match the editorial tone, ADA legible. */
body.single-post .pix-blog-author .author-name,
body.single-post .pix-blog-author cite,
body.single-post [rel="author"],
body.single-post .vcard .fn,
body.single-post [class*="author-name"] {
font-family: var(--alch-font-head) !important;
font-size: 0.85rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
font-weight: 500 !important;
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
}
/* Author hyperlink hover */
body.single-post .pix-blog-author a,
body.single-post [rel="author"] a,
body.single-post .vcard a {
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
text-decoration: none !important;
}
body.single-post .pix-blog-author a:hover,
body.single-post [rel="author"] a:hover {
color: var(--alch-gold-700) !important;
-webkit-text-fill-color: var(--alch-gold-700) !important;
}
/* Catch-all on single-post: nothing should render as pure white text on
the cream/white article surface. Map any leftover .text-white /
.text-white2 utilities back to midnight. */
body.single-post .text-white,
body.single-post .text-white2,
body.single-post [class*="text-white"]:not(.aths-mobile-app-card *):not(.alch-footer *) {
color: var(--alch-midnight-900) !important;
-webkit-text-fill-color: var(--alch-midnight-900) !important;
}
/* =========================================================================
"Go Beyond What You Feel" / Better Decisions banner — gradient cleanup
-------------------------------------------------------------------------
Section had a dimmed red blood-cell bg image scrimmed behind cream.
Looked muddy at desktop and broken on mobile (image scaling badly,
readability tanked). Drop the bg image entirely; use a clean cream
surface with the dark stats card on the left providing the only
tonal weight. Mobile stacks stats / copy / CTA in a single column
with comfortable spacing.
========================================================================= */
.aths-blood-work-section {
background: var(--alch-paper) !important; /* solid cream, no image */
position: relative;
overflow: hidden;
}
/* Hide the original red bg image entirely; we don't want it. */
.aths-blood-work-section .aths-blood-work-bg {
display: none !important;
}
/* Remove the cream scrim ::before from earlier — no longer needed. */
.aths-blood-work-section::before {
content: none !important;
display: none !important;
}
.aths-blood-work-section .aths-blood-work-inner {
position: static;
}
/* Cleaner kicker/title typography */
.aths-blood-work-section .aths-blood-work-title {
text-shadow: none !important; /* drop the hairline shadow we used against the image */
}
/* Mobile stack: dark stats card on top, copy + price + CTA below. */
@media (max-width: 880px) {
.aths-blood-work-section {
padding: clamp(2rem, 5vw, 3rem) 1rem !important;
}
.aths-blood-work-section .aths-blood-work-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
}
.aths-blood-work-section .aths-blood-work-overlay-card {
padding: 1.25rem 1.4rem !important;
margin: 0 auto;
width: 100%;
max-width: 100%;
border-radius: 12px;
}
.aths-blood-work-section .aths-blood-work-right {
padding: 0 !important;
text-align: left;
}
.aths-blood-work-section .aths-blood-work-title {
font-size: clamp(1.6rem, 6.5vw, 2.1rem) !important;
line-height: 1.1 !important;
margin-bottom: 0.6rem !important;
}
.aths-blood-work-section .aths-blood-work-body {
font-size: 0.95rem !important;
margin-bottom: 1rem !important;
color: var(--alch-midnight-800) !important;
}
.aths-blood-work-section .aths-blood-work-price {
font-size: 1.05rem !important;
margin-bottom: 0.85rem !important;
}
.aths-blood-work-section .aths-blood-work-cta {
width: auto;
align-self: flex-start;
padding: 0.85rem 1.4rem !important;
font-size: 0.78rem !important;
}
/* Metrics row: 2 cols instead of 4 on narrow phones to keep digits readable. */
.aths-blood-work-section .metrics-row {
grid-template-columns: 1fr 1fr !important;
gap: 0.5rem !important;
}
.aths-blood-work-section .metric-number {
font-size: 1.4rem !important;
}
.aths-blood-work-section .metric-label {
font-size: 0.6rem !important;
}
}
/* =========================================================================
Coming Soon layout — partner-with-us + for-businesses
-------------------------------------------------------------------------
Full-viewport hero, midnight bg, Cinzel "Coming Soon" centered, eyebrow
above (page title), contact line below. Mobile + desktop alike.
========================================================================= */
/* When a Coming Soon page is open, suppress the legal-page hero treatment
AND the legal-page article padding so the section fills the viewport. */
body.page-template-default:has(.alch-coming-soon) .pix-main-intro,
body.alch-legal-page:has(.alch-coming-soon) .pix-main-intro,
body:has(.alch-coming-soon) .pix-main-intro,
body:has(.alch-coming-soon) .pix-main-intro-placeholder {
display: none !important;
}
body:has(.alch-coming-soon) #content,
body:has(.alch-coming-soon) .entry-content,
body:has(.alch-coming-soon) .container,
body:has(.alch-coming-soon) #primary {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
background: transparent !important;
}
body:has(.alch-coming-soon) #pix-page-footer {
margin-top: 0 !important;
}
/* The Coming Soon section itself */
.alch-coming-soon {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: clamp(2rem, 6vw, 4rem) 1.25rem;
background:
radial-gradient(900px 500px at 12% 0%, rgba(212, 175, 55, 0.10), transparent 60%),
radial-gradient(1200px 700px at 90% 110%, rgba(82, 93, 141, 0.20), transparent 55%),
linear-gradient(180deg, var(--alch-midnight-900) 0%, #05080f 100%);
color: var(--alch-ivory);
text-align: center;
position: relative;
}
.alch-coming-soon::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
}
.alch-coming-soon__inner {
max-width: 38rem;
margin: 0 auto;
}
.alch-coming-soon__eyebrow {
display: inline-block;
font-family: var(--alch-font-ui);
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--alch-gold-400);
border: 1px solid rgba(212, 175, 55, 0.45);
padding: 0.5rem 1.1rem;
border-radius: 999px;
margin-bottom: 1.75rem;
}
.alch-coming-soon__title {
font-family: var(--alch-font-head) !important;
font-size: clamp(2.4rem, 7vw, 4.5rem) !important;
letter-spacing: 0.02em;
line-height: 1;
color: var(--alch-ivory) !important;
margin: 0 0 1.5rem !important;
font-weight: 500 !important;
}
.alch-coming-soon__title::after {
content: "";
display: block;
width: 80px;
height: 1px;
background: var(--alch-gold-500);
margin: 1.25rem auto 0;
}
.alch-coming-soon__copy {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1rem, 1.4vw, 1.25rem);
line-height: 1.55;
color: rgba(244, 234, 214, 0.75);
margin: 0;
}
.alch-coming-soon__email {
color: var(--alch-gold-400);
text-decoration: none;
border-bottom: 1px solid rgba(212, 175, 55, 0.4);
padding-bottom: 1px;
font-style: normal;
font-family: var(--alch-font-ui);
letter-spacing: 0.01em;
transition: color 200ms ease, border-color 200ms ease;
}
.alch-coming-soon__email:hover {
color: var(--alch-gold-200);
border-color: var(--alch-gold-200);
}
@media (max-width: 600px) {
.alch-coming-soon { padding: clamp(2rem, 8vw, 3rem) 1rem; }
.alch-coming-soon__eyebrow { font-size: 0.7rem; letter-spacing: 0.26em; padding: 0.4rem 0.85rem; margin-bottom: 1.25rem; }
.alch-coming-soon__title { font-size: clamp(2rem, 11vw, 3rem) !important; }
.alch-coming-soon__title::after { width: 60px; margin-top: 1rem; }
.alch-coming-soon__copy { font-size: 1rem; }
.alch-coming-soon__email { display: inline-block; word-break: break-all; margin-top: 0.5rem; }
}
/* =========================================================================
Custom mobile nav overlay (.alch-mnav) — replaces Pixfort's broken
Bootstrap collapse with a self-contained full-viewport menu.
========================================================================= */
.alch-mnav {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: 100000;
background:
radial-gradient(900px 600px at 18% -10%, rgba(212, 175, 55, 0.10) 0%, transparent 60%),
radial-gradient(1200px 800px at 85% 110%, rgba(82, 93, 141, 0.18) 0%, transparent 55%),
linear-gradient(180deg, #0a0f1f 0%, #05080f 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow-y: auto;
padding: 5rem 1.5rem 3rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 240ms ease, transform 240ms ease, visibility 0s linear 240ms;
}
.alch-mnav.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity 240ms ease, transform 240ms ease, visibility 0s;
}
.alch-mnav__close {
position: fixed;
top: 1.25rem;
right: 1.25rem;
width: 44px;
height: 44px;
background: transparent;
border: 0;
color: var(--alch-ivory);
cursor: pointer;
z-index: 100001;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.alch-mnav__close svg { width: 28px; height: 28px; }
.alch-mnav__close:hover { color: var(--alch-gold-400); }
.alch-mnav__nav {
width: 100%;
max-width: 32rem;
margin: 0 auto;
}
.alch-mnav__list {
list-style: none;
margin: 0;
padding: 0;
}
.alch-mnav__item {
border-top: 1px solid rgba(212, 175, 55, 0.18);
padding: 0.5rem 0;
}
.alch-mnav__item:first-child { border-top: 0; }
.alch-mnav__link {
display: block;
font-family: var(--alch-font-head);
font-size: clamp(1.4rem, 5vw, 1.85rem);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--alch-ivory);
text-align: center;
text-decoration: none;
padding: 1rem 0.5rem;
transition: color 200ms ease;
}
.alch-mnav__link:hover,
.alch-mnav__link:focus,
.alch-mnav__item.is-current > .alch-mnav__link {
color: var(--alch-gold-400);
}
.alch-mnav__sublist {
list-style: none;
margin: 0 0 0.5rem;
padding: 0;
}
.alch-mnav__subitem {
text-align: center;
}
.alch-mnav__sublink {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.05rem;
letter-spacing: 0.02em;
color: rgba(244, 234, 214, 0.75);
text-decoration: none;
padding: 0.55rem 1rem;
transition: color 200ms ease;
}
.alch-mnav__sublink:hover,
.alch-mnav__sublink:focus { color: var(--alch-gold-400); }
/* Body lock when overlay open. */
html.alch-mnav-open,
html.alch-mnav-open body { overflow: hidden !important; }
/* Hide Pixfort's native mobile-collapse overlay so they don't double-render. */
@media (max-width: 1099px) {
html body .pix-header-mobile .navbar-collapse.show,
html body .pix-header-mobile .navbar-collapse.collapsing {
display: none !important;
}
}
/* =========================================================================
FORCED OVERRIDES — marker categories + cards (ATHS inline