/* =========================================================
ATTUNE — Site-wide shared styles + non-homepage pages.
Tokens come from colors_and_type.css (loaded first).
========================================================= */
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100vh; }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
/* ---------- Dark-section heading overrides ----------
The base h1/h2/h3 rule in colors_and_type.css forces var(--fg-1) (near-black).
Inside any dark-bg section, headings must explicitly use --fg-on-dark or they
render invisible against obsidian. */
.page-hero--dark h1,
.page-hero--dark h2,
.page-hero--dark h3,
.page-hero--dark .page-hero-h1,
.panel-dark h1,
.panel-dark h2,
.panel-dark h3,
.page-cta h1,
.page-cta h2,
.privacy-card h1,
.privacy-card h2,
.privacy-card h3,
.lab-card h1,
.lab-card h2,
.lab-card h3,
.practice-side h1,
.practice-side h2,
.practice-side h3 {
color: var(--fg-on-dark);
}
/* ---------- Global focus-visible ring ---------- */
:focus { outline: 0; }
a:focus-visible,
button:focus-visible,
[role="radio"]:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.pdp-cadence-pill:focus-visible,
.intent-chip:focus-visible,
.nav-toggle:focus-visible,
.reviews-chev:focus-visible {
outline: 2px solid var(--attune-magenta);
outline-offset: 2px;
border-radius: 4px;
}
/* On dark surfaces, use a softer outline */
.nav a:focus-visible,
.site-footer a:focus-visible,
.bundle a:focus-visible,
.final a:focus-visible,
.page-cta a:focus-visible,
.page-hero--dark a:focus-visible,
.panel-dark a:focus-visible,
.founder a:focus-visible {
outline-color: #ffc85c;
}
main:focus { outline: 0; }
/* ---------- Skip link (a11y) ---------- */
.skip-link {
position: absolute; left: -9999px; top: -9999px;
background: var(--obsidian); color: var(--fg-on-dark);
padding: 10px 16px; border-radius: var(--radius-pill);
z-index: 100; font-size: 0.875rem;
}
.skip-link:focus { left: 16px; top: 16px; }
/* ---------- Visually hidden ---------- */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ---------- Container ---------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 1320px; }
@media (min-width: 880px) { .container { padding: 0 var(--space-7); } }
/* ---------- Section base ---------- */
.section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.section-head { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; max-width: 720px; margin: 0 auto var(--space-7); }
.section-head .h2 { margin: 0; }
.eyebrow {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-3);
margin: 0;
}
.h1, .h2, .h3, .h4 { margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; letter-spacing: 0; text-transform: uppercase; color: var(--fg-1); text-wrap: pretty; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: 0; text-transform: uppercase; color: var(--fg-1); text-wrap: pretty; }
/* Word highlights. Defined here and nowhere else — front-page.css used to
redefine .word-grad three more times, each layered over the last.
.word-grad flat brand magenta, the default emphasis
.word-grad-multi the animated rainbow, reserved for "Three" / "One" */
.word-grad {
color: var(--attune-magenta);
-webkit-text-fill-color: var(--attune-magenta);
}
.word-grad-multi {
background: linear-gradient(95deg,
var(--attune-terracotta) 0%,
var(--ascend-gold) 22%,
var(--attune-magenta) 55%,
var(--uplift-violet) 80%,
var(--attune-terracotta) 100%);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: wordGradShift 16s ease-in-out infinite alternate;
}
@keyframes wordGradShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.sub { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.6; color: var(--fg-2); margin: 0; }
.pipe { color: var(--fg-muted); margin: 0 0.4em; }
.dot { color: var(--fg-muted); margin: 0 0.5em; }
/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-calm), transform 700ms var(--ease-calm); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* ---------- Buttons ---------- */
.cta {
display: inline-flex; align-items: center; gap: var(--space-3);
padding: 14px 28px; min-height: 44px;
background: var(--obsidian); color: var(--fg-on-dark);
border-radius: var(--radius-pill); border: 0;
font-family: var(--font-body); font-weight: 500; font-size: 1rem;
text-decoration: none; cursor: pointer;
transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.cta:hover { transform: translateY(-2px); background: #1a1a1c; color: var(--fg-on-dark); }
.cta svg { transition: transform var(--dur-base) var(--ease-standard); }
.cta:hover svg { transform: translateX(2px); }
.cta-light {
display: inline-flex; align-items: center; gap: var(--space-3);
padding: 14px 28px; min-height: 44px;
background: var(--canvas); color: var(--ink);
border-radius: var(--radius-pill); border: 0;
font-family: var(--font-body); font-weight: 500; font-size: 1rem;
text-decoration: none; cursor: pointer;
box-shadow: 0 6px 20px rgba(15,15,16,0.18);
transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.cta-light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,15,16,0.28); color: var(--ink); }
.cta-light svg { transition: transform var(--dur-base) var(--ease-standard); }
.cta-light:hover svg { transform: translateX(2px); }
.cta-ghost {
display: inline-flex; align-items: center; gap: var(--space-3);
padding: 13px 26px; min-height: 44px;
background: transparent; color: var(--fg-1);
border: 1px solid var(--border-2); border-radius: var(--radius-pill);
font-family: var(--font-body); font-weight: 500; font-size: 1rem;
text-decoration: none; cursor: pointer;
transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.cta-ghost:hover { border-color: var(--attune-terracotta); color: var(--attune-terracotta); }
.text-link {
display: inline-flex; align-items: center; gap: var(--space-2);
font-weight: 500; color: var(--fg-1); text-decoration: none;
}
.text-link svg { transition: transform var(--dur-base) var(--ease-standard); }
.text-link:hover { color: var(--attune-terracotta); }
.text-link:hover svg { transform: translateX(3px); }
/* =========================================================
NAV (shared)
========================================================= */
.nav {
position: fixed; top: 0; left: 0; right: 0;
height: 72px; z-index: 50;
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--space-5);
background: var(--obsidian);
border-bottom: 1px solid rgba(250,249,246,0.06);
color: var(--fg-on-dark);
}
.nav-brand { display: inline-flex; align-items: center; text-decoration: none; }
.nav .nav-brand .nav-logo {
height: 30px; width: auto;
display: block;
filter: brightness(1.05);
}
@media (min-width: 880px) {
.nav .nav-brand .nav-logo { height: 34px; }
}
.nav-links {
display: none;
gap: var(--space-6);
font-size: 0.9375rem; /* +2px from 0.8125rem */
letter-spacing: 0.08em;
text-transform: uppercase;
}
.nav-links a {
color: rgba(250,249,246,0.7); /* one consistent subtext shade */
text-decoration: none;
font-weight: 500;
transition: color var(--dur-base) var(--ease-standard);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ascend-gold); }
.nav-cart {
display: inline-flex; align-items: center; gap: 4px;
font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(250,249,246,0.7);
font-weight: 500; text-decoration: none;
padding: 8px 14px;
border: 1px solid rgba(250,249,246,0.22);
border-radius: var(--radius-pill);
white-space: nowrap;
transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.nav-cart:hover { color: var(--ascend-gold); border-color: rgba(250,249,246,0.38); }
.nav-cart-count { color: rgba(250,249,246,0.7); }
/* Mobile nav toggle (hamburger) */
.nav-toggle {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
width: 38px; height: 38px;
background: transparent; border: 0; cursor: pointer; padding: 0;
}
.nav-toggle-bar {
display: block;
width: 22px; height: 1.5px;
background: var(--fg-on-dark);
margin-left: auto; margin-right: auto;
transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
@media (min-width: 880px) {
.nav { padding: 0 var(--space-7); }
.nav-links { display: flex; }
.nav-toggle { display: none; }
}
/* Mobile drawer */
@media (max-width: 879px) {
.nav-links {
position: fixed; top: 72px; left: 0; right: 0;
background: var(--obsidian);
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--space-3) var(--space-5) var(--space-6);
border-bottom: 1px solid rgba(250,249,246,0.08);
transform: translateY(-12px);
opacity: 0; pointer-events: none;
transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.nav-links.is-open {
display: flex;
transform: translateY(0);
opacity: 1; pointer-events: auto;
}
.nav-links a {
display: block;
padding: 14px 0;
font-size: 0.875rem;
letter-spacing: 0.16em;
color: rgba(250,249,246,0.85);
border-bottom: 1px solid rgba(250,249,246,0.06);
}
.nav-links a:last-child { border-bottom: 0; }
}
.site-main { display: block; padding-top: 72px; padding-bottom: 0; }
body.attune-home .site-main { padding-top: 0; }
/* =========================================================
FOOTER (shared)
========================================================= */
.site-footer {
background: var(--obsidian);
color: var(--fg-on-dark);
padding: var(--space-8) var(--space-5) var(--space-6);
border-top: 1px solid rgba(250,249,246,0.08);
}
.footer-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 880px) {
.footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-7); }
}
.footer-brand-col { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-footer .footer-brand .footer-logo {
height: 38px; width: auto;
display: block;
filter: brightness(1.05);
}
.footer-tagline {
font-size: 0.875rem; /* reverted to original */
color: rgba(250,249,246,0.7); /* one subtext shade */
line-height: 1.55; max-width: 38ch; margin: 0;
}
.footer-links-col {
display: flex; flex-direction: column;
gap: var(--space-3);
font-size: 0.875rem; /* reverted */
}
.footer-links-col a {
color: rgba(250,249,246,0.7); /* one subtext shade */
text-decoration: none;
transition: color var(--dur-base) var(--ease-standard);
}
.footer-links-col a:hover { color: var(--ascend-gold); }
.footer-heading {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem; /* reverted */
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--fg-on-dark); /* heading bold = full white */
margin: 0 0 var(--space-2);
}
.footer-disclaimer {
margin-top: var(--space-7);
font-size: 0.8125rem; /* one step down — owner note, Aug 30 */
color: rgba(250,249,246,0.7);
line-height: 1.55; max-width: 72ch;
}
/* Footer gutters come from .site-footer alone, so every page matches the
homepage (front-page.css zeroes .container padding at <=600px). */
@media (max-width: 879px) {
.site-footer .container { padding-left: 0; padding-right: 0; }
/* Owner note, Aug 30: centre the logo, and sit Learn beside Shop rather
than stacking all four blocks. Brand and newsletter span both columns. */
.footer-cols { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
.footer-brand-col { grid-column: 1 / -1; align-items: center; }
.footer-brand-col .footer-brand { justify-content: center; }
.newsletter { grid-column: 1 / -1; }
}
.footer-bottom {
display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
padding-top: var(--space-5); margin-top: var(--space-5);
border-top: 1px solid rgba(250,249,246,0.16);
font-size: 0.75rem; /* reverted */
color: rgba(250,249,246,0.7);
}
.footer-bottom > div:last-child { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-legal-links a {
color: rgba(250,249,246,0.7);
text-decoration: none;
transition: color var(--dur-base) var(--ease-standard);
}
.footer-legal-links a:hover { color: var(--ascend-gold); }
/* Newsletter "By subscribing" stays at current size — explicit override */
.newsletter-micro { font-size: 0.75rem; color: rgba(250,249,246,0.7); margin: 0; line-height: 1.5; }
/* Newsletter */
.newsletter { display: flex; flex-direction: column; gap: var(--space-3); max-width: 360px; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-input {
flex: 1; padding: 10px 14px;
background: rgba(250,249,246,0.06);
border: 1px solid rgba(250,249,246,0.18);
border-radius: var(--radius-pill);
color: var(--fg-on-dark);
font: inherit; font-size: 0.875rem;
}
.newsletter-input::placeholder { color: rgba(250,249,246,0.4); }
.newsletter-input:focus {
outline: 0;
border-color: color-mix(in oklab, var(--attune-magenta) 60%, transparent);
}
.newsletter-submit {
padding: 10px 18px;
background: var(--canvas); color: var(--ink);
border: 0; border-radius: var(--radius-pill);
font-weight: 600; font-size: 0.875rem; cursor: pointer; letter-spacing: 0.04em;
transition: transform var(--dur-base) var(--ease-standard);
}
.newsletter-submit:hover { transform: translateY(-1px); }
.newsletter-micro { font-size: 0.7rem; color: rgba(250,249,246,0.45); margin: 0; line-height: 1.5; }
/* WooCommerce's block-theme stylesheet pads , which paints a cream band
below the dark footer on every .woocommerce-page. */
body.woocommerce-page { padding-bottom: 0; }
/* The trust marquee ran hard against both viewport edges, so the first and last
items were sliced mid-word. A fade mask makes the loop read as motion. */
.trust { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
/* WooCommerce's account nav was raw unstyled links beside a fully art-directed
page. Same card language as the rest of the site. */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border-1); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation a {
display: block; padding: 14px 16px; text-decoration: none;
color: var(--fg-1); font-weight: 500;
transition: background var(--dur-base) var(--ease-standard);
}
.woocommerce-MyAccount-navigation a:hover { background: var(--bg-2); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--bg-2); font-weight: 700; }
.woocommerce-MyAccount-navigation {
border: 1px solid var(--border-1); border-radius: var(--radius-md, 12px);
overflow: hidden; background: var(--canvas);
margin-bottom: var(--space-5);
}
/* The cart block ships an empty-cart panel that renders for ~200ms before React
hydrates — a full cart briefly reads "YOUR CART IS CURRENTLY EMPTY". */
.wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-empty-cart-block { display: none !important; }
.wp-block-woocommerce-cart.is-loading { min-height: 420px; }
/* ---------- Commerce pages (cart / checkout / my-account) ----------
These render WooCommerce blocks inside the classic Attune chrome. The blocks
bring their own typography; these rules only handle the wrapper. */
.page-hero--compact { padding: clamp(96px, 9vw, 108px) 0 clamp(16px, 2vw, 24px); }
.page-hero--compact .page-hero-h1 { font-size: clamp(2rem, 5vw, 3rem); }
.commerce-section { padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 96px); }
.commerce-content .wp-block-woocommerce-cart,
.commerce-content .wp-block-woocommerce-checkout { max-width: 100%; margin-left: 0; margin-right: 0; }
.commerce-content .wc-block-components-button:not(.is-link) {
background: var(--obsidian); color: var(--fg-on-dark); border-radius: 999px;
}
/* =========================================================
PAGE HERO — used across most non-homepage pages
========================================================= */
.page-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(96px, 14vw, 180px) 0 clamp(64px, 8vw, 100px);
background: var(--bg-1);
text-align: left;
}
.page-hero--dark { background: var(--obsidian); color: var(--fg-on-dark); }
.page-hero--center { text-align: center; }
.page-hero--center .page-hero-inner { align-items: center; }
.page-hero-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero-aurora .ph1, .page-hero-aurora .ph2, .page-hero-aurora .ph3 {
position: absolute; border-radius: 50%; filter: blur(110px);
}
.page-hero-aurora .ph1 {
width: 50%; aspect-ratio: 1; top: -10%; left: -10%;
background: radial-gradient(circle, color-mix(in oklab, var(--attune-terracotta) 55%, transparent), transparent 70%);
opacity: 0.32;
}
.page-hero-aurora .ph2 {
width: 45%; aspect-ratio: 1; bottom: -20%; right: -15%;
background: radial-gradient(circle, color-mix(in oklab, var(--attune-magenta) 50%, transparent), transparent 72%);
opacity: 0.26;
}
.page-hero-aurora .ph3 {
width: 35%; aspect-ratio: 1; top: 15%; right: 25%;
background: radial-gradient(circle, color-mix(in oklab, var(--uplift-violet) 45%, transparent), transparent 72%);
opacity: 0.18;
}
.page-hero-inner {
position: relative; z-index: 2;
max-width: 880px; margin: 0 auto;
display: flex; flex-direction: column; gap: var(--space-5);
}
.page-hero-eyebrow {
font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3);
}
.page-hero--dark .page-hero-eyebrow { color: rgba(250,249,246,0.55); }
.page-hero-h1 {
margin: 0;
font-family: var(--font-display); font-weight: 800;
font-size: clamp(2.5rem, 6vw, 5rem);
line-height: 0.98; letter-spacing: -0.025em;
text-transform: uppercase; text-wrap: balance;
}
.page-hero-h1.h1-display-light { font-weight: 700; text-transform: none; letter-spacing: -0.015em; line-height: 1.1; }
.page-hero-lead {
margin: 0; max-width: 60ch;
font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
line-height: 1.55; color: var(--fg-2);
}
.page-hero--dark .page-hero-lead { color: rgba(250,249,246,0.8); }
.page-hero-meta {
display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
font-size: 0.8125rem; color: var(--fg-3);
letter-spacing: 0.04em;
}
.page-hero--dark .page-hero-meta { color: rgba(250,249,246,0.6); }
/* =========================================================
ARTICLE / PROSE — for Privacy, Terms, Shipping, etc.
========================================================= */
.prose {
max-width: 70ch;
margin: 0 auto;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.75;
color: var(--fg-1);
}
.prose h2, .prose h3 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: -0.005em;
color: var(--fg-1);
margin: var(--space-7) 0 var(--space-4);
}
.prose h2 { font-size: 1.75rem; line-height: 1.1; font-weight: 700; }
.prose h3 { font-size: 1.25rem; line-height: 1.2; font-weight: 600; }
.prose p, .prose li { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose a {
color: var(--fg-1);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.prose a:hover { color: var(--attune-terracotta); }
.prose strong { color: var(--fg-1); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--space-7) 0; }
.prose code {
background: var(--bg-2);
padding: 2px 6px;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 0.9em;
}
.prose-meta {
font-size: 0.8125rem; color: var(--fg-3);
margin-bottom: var(--space-6);
letter-spacing: 0.02em;
}
/* =========================================================
SHOP PAGE
========================================================= */
.shop-grid {
display: grid; grid-template-columns: 1fr; gap: var(--space-5);
margin-top: var(--space-7);
}
@media (min-width: 720px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .shop-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
@media (min-width: 1080px) { .shop-card.is-bundle { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .shop-card.is-bundle .shop-card-photo img { aspect-ratio: 21 / 9; max-height: 320px; } }
/* The shop listing sits straight under the page hero. Its own top padding and
the grid's margin-top used to stack on top of the hero's padding-bottom —
160px of dead space on mobile, 228px on desktop. Owner note, Aug 30. */
.shop-listing .shop-grid { margin-top: 0; }
.shop-listing { padding-top: 0; }
.page-hero:has(+ .shop-listing) { padding-bottom: clamp(32px, 4vw, 56px); }
.shop-card {
position: relative;
display: flex; flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.shop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.shop-card.is-bundle {
background: var(--obsidian); color: var(--fg-on-dark); border-color: rgba(250,249,246,0.08);
}
.shop-card-photo {
position: relative;
display: grid; place-items: center;
background: transparent;
overflow: hidden;
/* Top padding clears the absolutely-positioned tag pill so the jar never
sits under it. Owner note, Aug 30: the pill was touching the photo. */
padding: 56px var(--space-5) var(--space-5);
}
.shop-card.is-bundle .shop-card-photo { background: transparent; }
/* Sizing the image against an aspect-ratio BOX is unreliable: the derived
height is not a definite containing block, so a percentage max-height on the
image does not bind and the square jar overflowed and got clipped. Absolute
insets do not help either — insets never stretch a replaced element, so the
img fell back to its intrinsic 1080px. Carrying the ratio on the IMG removes
the cycle: the img box is (content width x ratio) and object-fit:contain
letterboxes the jar inside it, centred on both axes, never cropped. Aug 30. */
.shop-card-photo picture { display: contents; }
.shop-card-photo img {
display: block;
width: 100%; height: auto;
aspect-ratio: 4 / 3;
max-width: none; max-height: none;
object-fit: contain;
filter: drop-shadow(0 24px 34px rgba(0,0,0,0.28));
}
.shop-card-tag {
position: absolute; top: 16px; left: 16px;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--fg-2);
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-pill);
padding: 4px 10px;
}
.shop-card.is-bundle .shop-card-tag { color: var(--ascend-gold); background: rgba(255,200,92,0.12); border-color: rgba(255,200,92,0.32); }
.shop-card-body { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; text-align: center; align-items: center; }
/* Reserve two lines of meta and three of description so the three formula
cards come out the same height even when they stack on mobile. The bundle
card is deliberately allowed to be shorter. Owner note, Aug 30. */
.shop-card-meta { line-height: 1.5; min-height: 3em; }
.shop-card-desc { min-height: calc(1.55em * 3); }
.shop-card.is-bundle .shop-card-meta,
.shop-card.is-bundle .shop-card-desc { min-height: 0; }
.shop-card-name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1.1; text-transform: uppercase; letter-spacing: -0.005em; }
.shop-card.is-bundle .shop-card-name { color: var(--fg-on-dark); }
.shop-card-meta { font-size: 0.8125rem; color: var(--fg-3); letter-spacing: 0.04em; }
.shop-card.is-bundle .shop-card-meta { color: rgba(250,249,246,0.65); }
.shop-card-desc { font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); margin: 0; }
.shop-card.is-bundle .shop-card-desc { color: rgba(250,249,246,0.78); }
.shop-card-foot {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
padding-top: var(--space-4); margin-top: auto;
border-top: 1px solid var(--border-1);
width: 100%;
}
.shop-card.is-bundle .shop-card-foot { border-color: rgba(250,249,246,0.12); }
.shop-card-price { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.shop-card-price-note { font-size: 0.75rem; color: var(--fg-3); letter-spacing: 0.04em; text-transform: uppercase; margin-left: 0.4em; }
.shop-card.is-bundle .shop-card-price-note { color: rgba(250,249,246,0.55); }
.shop-card-price-note--pre { margin-left: 0; margin-right: 0.4em; }
.shop-card-cta {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-body); font-weight: 500; font-size: 0.875rem;
text-decoration: none; color: var(--fg-1);
}
.shop-card-cta svg { transition: transform var(--dur-base) var(--ease-standard); }
.shop-card-cta:hover svg { transform: translateX(3px); }
.shop-card.is-bundle .shop-card-cta { color: var(--fg-on-dark); }
/* Shop intent chips (non-functional visual marker for now) */
.intent-chips {
display: flex; flex-wrap: wrap; gap: 8px;
margin: var(--space-6) 0 0;
}
.intent-chip {
display: inline-flex; align-items: center;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--fg-2);
background: var(--bg-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-pill);
padding: 6px 14px;
text-decoration: none;
transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.intent-chip:hover { color: var(--attune-terracotta); border-color: var(--attune-terracotta); }
/* =========================================================
PDP — product detail page
========================================================= */
.pdp {
position: relative;
padding: clamp(56px, 9vw, 110px) 0 clamp(48px, 7vw, 90px);
background: var(--bg-1);
}
.pdp-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 880px) {
.pdp-grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); }
}
.pdp-photo-wrap {
position: relative;
display: grid; place-items: center;
background: var(--bg-2);
border-radius: var(--radius-lg);
overflow: hidden;
padding: clamp(28px, 5%, 56px);
}
.pdp-photo-wrap.is-dark { background: var(--obsidian); }
/* Sizing the image against an aspect-ratio BOX is unreliable: the derived
height is not a definite containing block, so a percentage max-height on the
image does not bind and the square jar overflowed and got clipped. Absolute
insets do not help either — insets never stretch a replaced element, so the
img fell back to its intrinsic 1080px. Carrying the ratio on the IMG removes
the cycle: the img box is (content width x ratio) and object-fit:contain
letterboxes the jar inside it, centred on both axes, never cropped. Aug 30. */
.pdp-photo-wrap picture { display: contents; }
.pdp-photo-wrap img {
display: block;
width: 100%; height: auto;
aspect-ratio: 1;
max-width: none; max-height: none;
object-fit: contain;
filter: drop-shadow(0 28px 42px rgba(0,0,0,0.34));
}
.pdp-info { display: flex; flex-direction: column; gap: var(--space-4); }
.pdp-tag { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.pdp-name {
margin: 0; font-family: var(--font-display); font-weight: 800;
font-size: clamp(2.25rem, 4.5vw, 3.5rem);
line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase;
}
.pdp-summary { margin: 0; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55; color: var(--fg-2); }
.pdp-stars-row { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 0.875rem; color: var(--fg-2); }
.pdp-stars-row .stars { color: var(--attune-terracotta); letter-spacing: 0.08em; }
.pdp-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pdp-bullets li {
display: flex; align-items: flex-start; gap: var(--space-3);
font-size: 0.9375rem; line-height: 1.5; color: var(--fg-2);
}
.pdp-bullets li::before {
content: ""; flex: 0 0 18px; height: 18px;
margin-top: 2px;
border-radius: 50%;
background: linear-gradient(135deg, var(--attune-terracotta), var(--attune-magenta));
opacity: 0.85;
}
/* PDP price block */
.pdp-options {
display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-5);
background: var(--bg-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
}
.pdp-option {
position: relative;
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-4);
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color var(--dur-base) var(--ease-standard);
}
.pdp-option.is-selected {
border-color: var(--attune-magenta);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--attune-magenta) 25%, transparent);
}
.pdp-option-radio {
width: 18px; height: 18px; flex: 0 0 18px;
border-radius: 50%;
border: 1.5px solid var(--border-2);
display: grid; place-items: center;
}
.pdp-option.is-selected .pdp-option-radio { border-color: var(--attune-magenta); }
.pdp-option.is-selected .pdp-option-radio::after {
content: ""; width: 9px; height: 9px; border-radius: 50%;
background: var(--attune-magenta);
}
.pdp-option-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pdp-option-label { font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); }
.pdp-option-meta { font-size: 0.8125rem; color: var(--fg-3); }
.pdp-option-price { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--fg-1); }
.pdp-option-price-cadence { font-size: 0.7rem; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-top: 4px; }
.pdp-option-best {
position: absolute; top: -10px; right: 12px;
font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--canvas);
background: linear-gradient(90deg, var(--attune-terracotta), var(--attune-magenta));
padding: 4px 8px;
border-radius: var(--radius-pill);
}
.pdp-cadence {
display: none;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--border-1);
margin-top: var(--space-3);
}
.pdp-option.is-selected .pdp-cadence { display: flex; }
.pdp-cadence-label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.pdp-cadence-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pdp-cadence-pill {
background: var(--bg-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-pill);
padding: 6px 12px;
font-size: 0.8125rem;
cursor: pointer;
transition: border-color var(--dur-base) var(--ease-standard);
}
.pdp-cadence-pill.is-selected { border-color: var(--attune-magenta); color: var(--attune-magenta); }
.pdp-add {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-3);
padding: 16px 28px; min-height: 52px; width: 100%;
background: var(--obsidian); color: var(--fg-on-dark);
border-radius: var(--radius-pill); border: 0;
font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0.04em;
cursor: pointer; text-decoration: none;
transition: transform var(--dur-base) var(--ease-standard);
}
.pdp-add:hover { transform: translateY(-2px); color: var(--fg-on-dark); }
.pdp-trust {
display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
margin-top: var(--space-3);
font-size: 0.8125rem; color: var(--fg-3); letter-spacing: 0.02em;
}
.pdp-trust span { display: inline-flex; align-items: center; gap: 6px; }
/* PDP detail accordions: How to Use, Ingredients, Lab Reports */
.pdp-accordions { margin-top: var(--space-5); border-top: 1px solid var(--border-1); }
.pdp-acc { border-bottom: 1px solid var(--border-1); }
.pdp-acc summary {
list-style: none; cursor: pointer;
padding: var(--space-4) 0;
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-display); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.02em;
font-size: 0.9375rem;
}
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc[open] summary svg { transform: rotate(45deg); }
.pdp-acc summary svg { transition: transform var(--dur-base) var(--ease-standard); }
.pdp-acc-body { padding: 0 0 var(--space-5); font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
.pdp-acc-body p { margin: 0 0 var(--space-3); }
.pdp-acc-body ul { padding-left: 1.4em; margin: 0 0 var(--space-3); }
/* PDP related products strip */
.pdp-related-grid {
display: grid; grid-template-columns: 1fr; gap: var(--space-5);
margin-top: var(--space-5);
}
@media (min-width: 720px) { .pdp-related-grid { grid-template-columns: repeat(3, 1fr); } }
.pdp-related-card {
display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-5);
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
text-decoration: none;
color: inherit;
transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.pdp-related-card:hover { transform: translateY(-2px); border-color: var(--border-2); }
.pdp-related-photo {
position: relative;
display: grid; place-items: center;
background: var(--bg-2);
border-radius: var(--radius-md);
overflow: hidden;
padding: var(--space-5);
}
/* Sizing the image against an aspect-ratio BOX is unreliable: the derived
height is not a definite containing block, so a percentage max-height on the
image does not bind and the square jar overflowed and got clipped. Absolute
insets do not help either — insets never stretch a replaced element, so the
img fell back to its intrinsic 1080px. Carrying the ratio on the IMG removes
the cycle: the img box is (content width x ratio) and object-fit:contain
letterboxes the jar inside it, centred on both axes, never cropped. Aug 30. */
.pdp-related-photo picture { display: contents; }
.pdp-related-photo img {
display: block;
width: 100%; height: auto;
aspect-ratio: 1;
max-width: none; max-height: none;
object-fit: contain;
filter: drop-shadow(0 16px 24px rgba(0,0,0,0.26));
}
.pdp-related-name { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: -0.005em; margin: 0; }
.pdp-related-meta { font-size: 0.8125rem; color: var(--fg-3); margin: 0; }
/* =========================================================
ABOUT page
========================================================= */
.about-pillars {
display: grid; grid-template-columns: 1fr; gap: var(--space-5);
margin-top: var(--space-7);
}
@media (min-width: 720px) { .about-pillars { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.about-pillar {
padding: var(--space-6);
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
display: flex; flex-direction: column; gap: var(--space-3);
}
.about-pillar-num {
font-family: var(--font-mono); font-size: 0.78rem;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--attune-terracotta);
}
.about-pillar h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.15; }
.about-pillar p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
.about-quote {
margin: 0; padding: clamp(48px, 7vw, 80px) 0;
font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.5rem, 3vw, 2.5rem);
line-height: 1.15; letter-spacing: -0.01em;
text-transform: none; color: var(--fg-1);
text-wrap: balance;
}
.about-quote-attr { display: block; margin-top: var(--space-4); font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
/* About story timeline */
.about-story {
display: grid; grid-template-columns: 1fr; gap: var(--space-6);
margin-top: var(--space-6);
}
@media (min-width: 720px) { .about-story { grid-template-columns: 200px 1fr; gap: var(--space-7); } }
.about-story-when {
font-family: var(--font-display); font-weight: 700;
font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--attune-terracotta);
}
.about-story-body { font-size: 1rem; line-height: 1.65; color: var(--fg-1); }
.about-story-body p { margin: 0 0 var(--space-4); }
.about-story-body p:last-child { margin-bottom: 0; }
/* =========================================================
PRACTICE page (additional to homepage practice section)
========================================================= */
.practice-detail {
display: grid; grid-template-columns: 1fr; gap: var(--space-6);
margin-top: var(--space-7);
}
@media (min-width: 880px) { .practice-detail { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: start; } }
.practice-protocol {
display: flex; flex-direction: column; gap: var(--space-5);
}
.practice-protocol-step {
display: flex; gap: var(--space-5);
padding: var(--space-5);
background: var(--bg-2);
border-radius: var(--radius-md);
border: 1px solid var(--border-1);
}
.practice-protocol-num {
font-family: var(--font-display); font-weight: 800;
font-size: 2.5rem; line-height: 1;
color: var(--attune-terracotta); flex: 0 0 auto;
}
.practice-protocol-text { display: flex; flex-direction: column; gap: var(--space-2); }
.practice-protocol-text h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: -0.005em; }
.practice-protocol-text p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
.practice-side {
position: sticky; top: 96px;
padding: var(--space-6);
background: var(--obsidian); color: var(--fg-on-dark);
border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: var(--space-4);
}
.practice-side h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; color: var(--fg-on-dark); }
.practice-side p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(250,249,246,0.78); }
/* Microdosing primer cards */
.primer-grid {
display: grid; grid-template-columns: 1fr; gap: var(--space-5);
margin-top: var(--space-7);
}
@media (min-width: 720px) { .primer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.primer-card {
padding: var(--space-6);
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
display: flex; flex-direction: column; gap: var(--space-3);
text-align: center; align-items: center;
}
.primer-card h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: -0.005em; }
.primer-card p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
/* The first three cards reserve two lines of heading and three of copy so they
come out identical however they wrap; the bundle card is deliberately shorter
and is let off both reservations. Owner note, Aug 30. */
.primer-card h3 { min-height: calc(1.2em * 2); display: flex; align-items: center; }
.primer-card p { min-height: calc(1.6em * 3); }
.primer-card--last h3,
.primer-card--last p { min-height: 0; }
.primer-card--last { align-self: start; }
/* =========================================================
INGREDIENTS page — per-product stacks
========================================================= */
.ing-stack-grid {
display: grid; grid-template-columns: 1fr; gap: var(--space-6);
margin-top: var(--space-7);
}
@media (min-width: 880px) { .ing-stack-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.ing-stack {
display: flex; flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
overflow: hidden;
}
.ing-stack-photo {
position: relative;
display: grid; place-items: center;
background: var(--bg-2);
overflow: hidden;
padding: var(--space-5);
}
/* Sizing the image against an aspect-ratio BOX is unreliable: the derived
height is not a definite containing block, so a percentage max-height on the
image does not bind and the square jar overflowed and got clipped. Absolute
insets do not help either — insets never stretch a replaced element, so the
img fell back to its intrinsic 1080px. Carrying the ratio on the IMG removes
the cycle: the img box is (content width x ratio) and object-fit:contain
letterboxes the jar inside it, centred on both axes, never cropped. Aug 30. */
.ing-stack-photo picture { display: contents; }
.ing-stack-photo img {
display: block;
width: 100%; height: auto;
aspect-ratio: 4 / 3;
max-width: none; max-height: none;
object-fit: contain;
filter: drop-shadow(0 22px 30px rgba(0,0,0,0.28));
}
.ing-stack-body {
padding: var(--space-5) var(--space-6) var(--space-6);
display: flex; flex-direction: column; gap: var(--space-3); flex: 1;
}
.ing-stack-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.ing-stack-name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.005em; }
.ing-stack-lead { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.ing-stack-list {
list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-4);
display: flex; flex-direction: column; gap: var(--space-3);
font-size: 0.875rem;
}
.ing-stack-list li {
display: grid; grid-template-columns: 1fr;
gap: 2px;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border-1);
line-height: 1.4;
}
.ing-stack-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ing-stack-list strong { font-weight: 600; color: var(--fg-1); }
.ing-stack-list span { color: var(--fg-3); font-size: 0.8125rem; }
.ing-stack .text-link { margin-top: auto; }
.lab-card {
margin-top: var(--space-7);
padding: var(--space-6);
background: var(--obsidian); color: var(--fg-on-dark);
border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: var(--space-3);
}
.lab-card h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; color: var(--fg-on-dark); }
.lab-card p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(250,249,246,0.78); }
.lab-card .text-link { color: var(--fg-on-dark); }
/* =========================================================
COMPANION page
========================================================= */
.comp-feature-grid {
display: grid; grid-template-columns: 1fr; gap: var(--space-5);
margin-top: var(--space-7);
}
@media (min-width: 720px) { .comp-feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.comp-feature {
padding: var(--space-6);
background: var(--bg-2);
border-radius: var(--radius-md);
display: flex; flex-direction: column; gap: var(--space-3);
}
.comp-feature-icon {
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--attune-terracotta), var(--attune-magenta));
color: var(--canvas);
}
.comp-feature h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: -0.005em; }
.comp-feature p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.comp-flow {
display: grid; grid-template-columns: 1fr; gap: var(--space-4);
margin-top: var(--space-7);
}
@media (min-width: 880px) { .comp-flow { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.comp-flow-step {
position: relative;
padding: var(--space-6);
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
display: flex; flex-direction: column; gap: var(--space-3);
}
.comp-flow-when {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--attune-terracotta);
}
.comp-flow-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: -0.005em; }
.comp-flow-body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
/* Privacy block — single column stack */
.privacy-card {
display: flex; flex-direction: column; gap: var(--space-5);
padding: clamp(48px, 7vw, 80px);
background: var(--obsidian);
color: var(--fg-on-dark);
border-radius: var(--radius-lg);
margin-top: var(--space-7);
}
.privacy-card h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; color: var(--fg-on-dark); text-wrap: balance; max-width: 22ch; }
.privacy-card p { margin: 0; font-size: 1rem; line-height: 1.65; color: rgba(250,249,246,0.78); }
.privacy-card ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); color: rgba(250,249,246,0.82); font-size: 0.9375rem; line-height: 1.6; }
.privacy-card ul li { padding-left: 1.5em; position: relative; }
.privacy-card ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: rgba(250,249,246,0.4); }
/* =========================================================
FAQ standalone page (grouped accordions)
========================================================= */
.faq-group { margin-top: var(--space-7); }
.faq-group-heading {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--attune-terracotta);
margin: 0 0 var(--space-4);
}
.faq-list-detailed { display: flex; flex-direction: column; border-top: 1px solid var(--border-1); }
.faq-list-detailed details { border-bottom: 1px solid var(--border-1); }
.faq-list-detailed summary {
list-style: none; cursor: pointer;
padding: var(--space-5) 0;
display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
font-family: var(--font-display); font-weight: 600;
text-transform: uppercase; letter-spacing: -0.005em;
font-size: 1rem;
}
.faq-list-detailed summary::-webkit-details-marker { display: none; }
.faq-list-detailed details[open] summary svg { transform: rotate(45deg); }
.faq-list-detailed summary svg { flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-standard); }
.faq-list-detailed .faq-answer { padding: 0 0 var(--space-5); font-size: 0.9375rem; line-height: 1.65; color: var(--fg-2); }
.faq-list-detailed .faq-answer p { margin: 0 0 var(--space-3); }
.faq-list-detailed .faq-answer p:last-child { margin-bottom: 0; }
/* =========================================================
CONTACT page
========================================================= */
.contact-grid {
display: grid; grid-template-columns: 1fr; gap: var(--space-7);
margin-top: var(--space-7);
}
@media (min-width: 880px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; } }
.contact-info { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-block { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--bg-2); border-radius: var(--radius-md); }
.contact-block-label { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--attune-terracotta); margin: 0; }
.contact-block-value { font-size: 1rem; line-height: 1.55; color: var(--fg-1); margin: 0; }
.contact-block-value a { color: var(--fg-1); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); }
.form-field input, .form-field textarea, .form-field select {
font: inherit; font-size: 1rem;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--border-2);
border-radius: var(--radius-sm);
color: var(--fg-1);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
outline: 0;
border-color: var(--attune-magenta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--attune-magenta) 22%, transparent);
}
.form-submit {
margin-top: var(--space-3);
align-self: flex-start;
}
/* =========================================================
REVIEWS page
========================================================= */
.reviews-stats {
display: grid; grid-template-columns: 1fr; gap: var(--space-5);
padding: var(--space-7) var(--space-6);
background: var(--obsidian); color: var(--fg-on-dark);
border-radius: var(--radius-lg);
text-align: center;
margin-top: var(--space-6);
}
@media (min-width: 720px) { .reviews-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } }
.reviews-stat { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.reviews-stat-num {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(2rem, 4vw, 3rem); line-height: 1;
background: linear-gradient(90deg, var(--attune-terracotta), var(--attune-magenta));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.reviews-stat-label { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250,249,246,0.6); }
.reviews-collection {
margin-top: var(--space-7);
display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 720px) { .reviews-collection { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .reviews-collection { grid-template-columns: repeat(3, 1fr); } }
.reviews-card {
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
padding: var(--space-6);
display: flex; flex-direction: column; gap: var(--space-4);
}
.reviews-card-stars { color: var(--attune-terracotta); letter-spacing: 0.08em; font-size: 0.95rem; }
.reviews-card-quote { font-size: 1rem; line-height: 1.55; color: var(--fg-1); margin: 0; }
.reviews-card-meta { padding-top: var(--space-3); border-top: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; }
.reviews-card-name { font-weight: 600; color: var(--fg-1); }
.reviews-card-product { color: var(--fg-3); }
/* =========================================================
SHIPPING / RETURNS panel
========================================================= */
.policy-blocks {
display: grid; grid-template-columns: 1fr; gap: var(--space-5);
margin-top: var(--space-6);
}
@media (min-width: 720px) { .policy-blocks { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.policy-block {
padding: var(--space-6);
background: var(--bg-2);
border-radius: var(--radius-md);
display: flex; flex-direction: column; gap: var(--space-3);
}
.policy-block h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: -0.005em; }
.policy-block p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
/* =========================================================
404 page
========================================================= */
.error-page {
min-height: 80vh;
display: flex; align-items: center; justify-content: center;
padding: var(--space-8) var(--space-5);
position: relative; isolation: isolate; overflow: hidden;
}
.error-page-inner {
text-align: center;
max-width: 520px;
display: flex; flex-direction: column; gap: var(--space-5); align-items: center;
}
.error-code {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(5rem, 14vw, 9rem); line-height: 0.9;
background: linear-gradient(90deg, var(--attune-terracotta), var(--attune-magenta) 60%, var(--uplift-violet));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
letter-spacing: -0.02em;
}
.error-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); text-transform: uppercase; letter-spacing: -0.01em; }
.error-body { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fg-2); }
.error-cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
/* =========================================================
AUTH (Register / Login / Activate via attune-core)
========================================================= */
.auth-shell {
position: relative;
/* The decorative .ph2 aurora sits at right:-15%; without clipping it
pushes the document ~216px wider than the viewport on desktop. */
overflow: hidden;
min-height: 80vh;
display: flex; align-items: center; justify-content: center;
padding: clamp(48px, 7vw, 96px) var(--space-5);
}
.auth-card {
width: 100%; max-width: 460px;
padding: clamp(32px, 4vw, 48px);
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
display: flex; flex-direction: column; gap: var(--space-5);
}
/* Rendered as for document outline; these keep the original eyebrow look. */
.auth-card-eyebrow { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin: 0; }
.auth-card-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
.auth-card-lead { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.auth-card form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-card form input[type="text"],
.auth-card form input[type="email"],
.auth-card form input[type="password"] {
font: inherit; font-size: 1rem;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--border-2);
border-radius: var(--radius-sm);
color: var(--fg-1);
width: 100%;
}
.auth-card form input:focus { outline: 0; border-color: var(--attune-magenta); box-shadow: 0 0 0 3px color-mix(in oklab, var(--attune-magenta) 22%, transparent); }
.auth-card form button[type="submit"], .auth-card form input[type="submit"] {
margin-top: var(--space-3);
padding: 14px 28px;
background: var(--obsidian); color: var(--fg-on-dark);
border: 0; border-radius: var(--radius-pill);
font-weight: 600; font-size: 1rem; letter-spacing: 0.04em;
cursor: pointer; min-height: 44px;
}
.auth-card form label { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 6px; }
.auth-card-foot { font-size: 0.875rem; color: var(--fg-3); text-align: center; }
.auth-card-foot a { color: var(--fg-1); }
/* =========================================================
WC overrides — cart, checkout, my-account
========================================================= */
.woocommerce {
font-family: var(--font-body);
}
.woocommerce h1, .woocommerce h2, .woocommerce h3 {
font-family: var(--font-display);
text-transform: uppercase; letter-spacing: -0.01em;
}
.woocommerce-page .site-main { padding-top: 96px; }
.woocommerce-cart, .woocommerce-checkout, .woocommerce-account {
padding-bottom: clamp(64px, 8vw, 96px);
}
.woocommerce-cart .container, .woocommerce-checkout .container, .woocommerce-account .container { max-width: 1100px; }
.woocommerce table.shop_table {
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
border-collapse: separate;
background: var(--bg-1);
}
.woocommerce table.shop_table th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8125rem; }
.woocommerce-info, .woocommerce-message, .woocommerce-error {
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
background: var(--bg-2);
padding: var(--space-4) var(--space-5);
border-left: 3px solid var(--attune-terracotta);
font-size: 0.9375rem;
}
.woocommerce a.button, .woocommerce button.button {
background: var(--obsidian); color: var(--fg-on-dark);
font-family: var(--font-body); font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.875rem;
padding: 12px 24px; border-radius: var(--radius-pill);
border: 0;
}
.woocommerce a.button.alt, .woocommerce button.button.alt {
background: linear-gradient(90deg, var(--attune-terracotta), var(--attune-magenta));
color: var(--canvas);
}
.woocommerce a.button:hover, .woocommerce button.button:hover {
background: #1a1a1c; transform: translateY(-1px); color: var(--fg-on-dark);
}
/* =========================================================
HOMEPAGE-CARRIED tokens used here too (sticky CTA already above).
The homepage layer (front-page.css) overrides these for hero/sections.
========================================================= */
/* Section panel — generic dark callout used across content pages */
.panel-dark {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(56px, 8vw, 96px) clamp(32px, 5vw, 64px);
background: var(--obsidian);
color: var(--fg-on-dark);
border-radius: var(--radius-lg);
margin: var(--space-7) 0;
}
.panel-dark h2, .panel-dark h3 { color: var(--fg-on-dark); }
.panel-dark p { color: rgba(250,249,246,0.8); }
.panel-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.panel-aurora .pa1, .panel-aurora .pa2 { position: absolute; border-radius: 50%; filter: blur(110px); }
.panel-aurora .pa1 { width: 50%; aspect-ratio: 1; top: -10%; left: -10%; background: radial-gradient(circle, color-mix(in oklab, var(--attune-terracotta) 50%, transparent), transparent 70%); opacity: 0.32; }
.panel-aurora .pa2 { width: 45%; aspect-ratio: 1; bottom: -15%; right: -10%; background: radial-gradient(circle, color-mix(in oklab, var(--attune-magenta) 50%, transparent), transparent 72%); opacity: 0.24; }
.panel-dark > * { position: relative; z-index: 2; }
/* Final CTA used on non-homepage pages */
.page-cta {
text-align: center;
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(72px, 10vw, 140px) var(--space-5);
background: var(--obsidian); color: var(--fg-on-dark);
}
.page-cta-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-cta-aurora .pc1, .page-cta-aurora .pc2 { position: absolute; border-radius: 50%; filter: blur(110px); }
.page-cta-aurora .pc1 { width: 60%; aspect-ratio: 1; top: -20%; left: -10%; background: radial-gradient(circle, color-mix(in oklab, var(--attune-terracotta) 60%, transparent), transparent 70%); opacity: 0.4; }
.page-cta-aurora .pc2 { width: 50%; aspect-ratio: 1; bottom: -20%; right: -10%; background: radial-gradient(circle, color-mix(in oklab, var(--attune-magenta) 55%, transparent), transparent 72%); opacity: 0.32; }
.page-cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); align-items: center; }
.page-cta-inner h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; color: var(--fg-on-dark); margin: 0; }
.page-cta-inner p { margin: 0; font-size: 1rem; line-height: 1.55; color: rgba(250,249,246,0.78); max-width: 56ch; }
.page-cta-inner .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
/* ---------- PDP buy form (Aug 19 2026) ---------- */
/* The purchase options are now a real