@import url('tokens.css');
/* Fonts are loaded via non-blocking in the HTML head to avoid render-blocking. */
/* =============================================================
SCROLL PROGRESS BAR — W2-1
Single fixed purple ribbon driven by --scroll-progress (0→1).
The wrapper is a non-painted container kept for semantics; the
bar itself owns position:fixed with viewport units so layout
never depends on ancestor sizing.
============================================================= */
.scroll-progress { pointer-events: none; }
.scroll-progress__bar {
position: fixed;
top: 0; left: 0;
height: 2px;
width: calc(var(--scroll-progress, 0) * 100vw);
background: linear-gradient(90deg,
var(--ghm-purple-400) 0%,
var(--ghm-purple-600) 50%,
var(--ghm-purple-800) 100%);
box-shadow: 0 0 8px rgba(94, 57, 144, 0.35);
transition: width 0.08s linear;
will-change: width;
z-index: 9999;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.scroll-progress__bar { transition: none; }
}
/* =============================================================
ACCESSIBILITY BASELINE
Skip link, global focus-visible ring, hit-area enlargement.
Kept at the top so component styles can't accidentally shadow it
without an explicit override.
============================================================= */
/* Skip link — hidden until keyboard-focused */
.skip-link {
position: fixed;
top: 10px;
left: 10px;
z-index: 10000;
padding: 12px 18px;
background: var(--ghm-ink);
color: var(--ghm-paper);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.02em;
border-radius: var(--r-md);
box-shadow: var(--sh-md);
text-decoration: none;
transform: translateY(-150%);
transition: transform var(--t-med);
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
outline: 2px solid var(--ghm-purple-300);
outline-offset: 2px;
}
/* Global focus-visible ring — applies to any focusable element.
Per-component rules below can tighten colour but must keep the ring. */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--ghm-purple-500);
outline-offset: 2px;
border-radius: var(--r-xs);
}
/* Dark-surface variant (top-bar, footer, dark hero) */
.top-bar :focus-visible,
.foot :focus-visible,
.hero__slide--film :focus-visible {
outline-color: var(--ghm-purple-300);
}
/* Remove double-ring on buttons that already render a visible border */
.btn:focus-visible { outline-offset: 3px; }
/* =============================================================
RESET
============================================================= */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--f-sans);
font-weight: 400;
font-size: var(--fs-body);
line-height: 1.6;
color: var(--ghm-text-body);
background: var(--ghm-paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
figure { margin: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--f-sans);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ghm-text-dark);
}
.container {
width: 100%;
max-width: var(--grid-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* -------------------------------------------------------------
Type primitives
------------------------------------------------------------- */
.display {
font-family: var(--f-display);
font-weight: 400;
line-height: 0.96;
letter-spacing: -0.028em;
color: var(--ghm-text-dark);
}
.display em {
font-style: italic;
font-weight: 400;
color: var(--ghm-purple-700);
}
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--ghm-text-muted);
max-width: 56ch;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: var(--fs-label);
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ghm-purple-700);
}
.eyebrow::before {
content: "";
width: 28px; height: 2px;
background: var(--ghm-purple-700);
border-radius: 2px;
}
.eyebrow--invert { color: var(--ghm-purple-300); }
.eyebrow--invert::before { background: var(--ghm-purple-300); }
.eyebrow--center { justify-content: center; }
.section-title {
text-align: center;
margin-top: 12px;
margin-bottom: 14px;
font-family: var(--f-display);
font-weight: 400;
font-size: var(--fs-display);
line-height: 1.02;
letter-spacing: -0.022em;
color: var(--ghm-text-dark);
}
.section-title em { font-style: italic; color: var(--ghm-purple-700); }
.section-sub {
text-align: center;
color: var(--ghm-text-muted);
max-width: 62ch;
margin: 0 auto;
font-size: var(--fs-lead);
}
/* -------------------------------------------------------------
Buttons
------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 14px 26px;
font-family: var(--f-sans);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.01em;
border-radius: var(--r-pill);
border: 1.5px solid transparent;
transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
white-space: nowrap;
cursor: pointer;
}
.btn .chev {
width: 16px; height: 16px;
display: inline-block;
transition: transform var(--t-med);
}
.btn:hover .chev { transform: translateX(3px); }
.btn-primary {
background: var(--ghm-purple-700);
color: var(--ghm-paper);
box-shadow: 0 10px 26px rgba(94,57,144,0.30);
}
.btn-primary:hover {
background: var(--ghm-purple-600);
box-shadow: 0 16px 40px rgba(138,63,252,0.40);
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
color: var(--ghm-text-dark);
border-color: var(--ghm-rule-light);
}
.btn-outline:hover {
background: var(--ghm-text-dark);
color: var(--ghm-paper);
border-color: var(--ghm-text-dark);
}
.btn-ghost-light {
background: rgba(255,255,255,0.10);
color: var(--ghm-paper);
border-color: rgba(255,255,255,0.22);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.btn-ghost-light:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.40);
}
.btn-text {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 0;
font-family: var(--f-sans);
font-size: var(--fs-small);
font-weight: 600;
color: var(--ghm-text-dark);
border-bottom: 1px solid transparent;
}
.btn-text:hover { border-bottom-color: var(--ghm-purple-700); color: var(--ghm-purple-700); }
/* -------------------------------------------------------------
Top utility bar + navbar
------------------------------------------------------------- */
.top-bar {
background: var(--ghm-ink);
color: rgba(247,244,251,0.72);
}
.top-bar__row {
display: flex; align-items: center; justify-content: flex-end;
gap: 28px;
padding-block: 9px;
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.top-bar a {
/* Expand hit area to meet WCAG 2.5.5 (minimum 44×44 on touch) */
display: inline-flex;
align-items: center;
min-height: 44px;
padding-block: 6px;
}
.top-bar a:hover { color: var(--ghm-paper); }
.top-bar__lang {
display: inline-flex; align-items: center; gap: 8px;
padding-left: 22px; margin-left: 4px;
border-left: 1px solid rgba(255,255,255,0.12);
}
.top-bar__lang::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--ghm-purple-400);
}
@media (max-width: 720px) {
.top-bar__row { justify-content: center; flex-wrap: wrap; gap: 14px; }
}
.nav {
position: sticky; top: 0; z-index: 40;
background: rgba(255,255,255,0.78);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid transparent;
transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.nav.is-scrolled {
background: rgba(255,255,255,0.94);
border-bottom-color: var(--ghm-rule-soft);
box-shadow: 0 2px 24px rgba(27,20,40,0.04);
}
.nav__row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 28px;
padding-block: 14px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__brand svg { width: 46px; height: auto; }
.nav__brand .name-block .name {
display: block;
font-family: var(--f-display);
font-size: 1.12rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ghm-text-dark);
line-height: 1.05;
}
.nav__brand .name-block .tag {
display: block;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ghm-text-meta);
margin-top: 2px;
}
.nav__links {
display: flex; gap: 26px; justify-content: center;
font-size: 0.92rem;
font-weight: 500;
}
.nav__links a {
color: var(--ghm-text-dark);
display: inline-flex;
align-items: center;
min-height: 44px;
padding-block: 8px;
position: relative;
}
.nav__links a::after {
content: ""; position: absolute;
left: 12px; right: calc(100% - 12px); bottom: 0;
height: 2px;
background: var(--ghm-purple-700);
border-radius: 2px;
transition: right var(--t-med);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { right: 12px; }
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__cta .btn { padding: 11px 20px; font-size: 0.85rem; min-height: 44px; }
.nav__toggle {
display: none;
width: 44px; height: 44px;
border: 1px solid var(--ghm-rule-light);
background: var(--ghm-paper);
border-radius: var(--r-pill);
align-items: center; justify-content: center;
cursor: pointer;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
content: ""; display: block;
width: 16px; height: 1.5px;
background: var(--ghm-text-dark);
border-radius: 2px;
position: relative;
}
.nav__toggle span::before { position: absolute; top: -5px; width: 16px; }
.nav__toggle span::after { position: absolute; top: 5px; width: 16px; }
@media (max-width: 1000px) {
.nav__links { display: none; }
.nav__toggle { display: inline-flex; }
.nav__cta .btn-outline { display: none; }
.nav.is-open .nav__links {
display: flex; flex-direction: column;
position: absolute; top: 100%; left: 0; right: 0;
background: var(--ghm-paper);
padding: 24px var(--gutter) 32px;
gap: 16px; align-items: flex-start;
border-bottom: 1px solid var(--ghm-rule-soft);
box-shadow: 0 20px 40px rgba(27,20,40,0.06);
}
}
/* =============================================================
HERO — Apple-style product float
============================================================= */
.hero {
position: relative;
padding-top: clamp(24px, 4vw, 48px);
padding-bottom: clamp(36px, 5vw, 72px);
background: var(--g-hero);
overflow: hidden;
isolation: isolate;
}
.hero::before,
.hero::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(110px);
opacity: 0.38;
pointer-events: none;
z-index: 0;
}
.hero::before { width: 620px; height: 620px; background: var(--ghm-lavender-2); top: -200px; right: -160px; }
.hero::after { width: 520px; height: 520px; background: var(--ghm-purple-300); bottom: -240px; left: -180px; }
.hero__ticker {
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
padding: 14px 22px;
margin-bottom: clamp(40px, 6vw, 70px);
background: rgba(255,255,255,0.55);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.7);
border-radius: var(--r-pill);
font-size: 0.84rem;
color: var(--ghm-text-dark);
position: relative; z-index: 2;
box-shadow: var(--sh-sm);
}
.hero__ticker .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ghm-purple-500);
box-shadow: 0 0 0 4px rgba(138,63,252,0.18);
margin-right: 10px;
animation: pulse 2.4s ease-in-out infinite;
}
.hero__ticker .chip {
display: inline-flex; align-items: center;
font-weight: 600;
}
.hero__ticker .right {
display: flex; gap: 20px; align-items: center;
color: var(--ghm-text-muted);
font-weight: 500;
}
.hero__ticker .right span::before {
content: "·"; margin-right: 18px; color: var(--ghm-rule-light);
}
.hero__ticker .right span:first-child::before { display: none; }
@media (max-width: 720px) {
.hero__ticker { display: none; }
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(138,63,252,0.18); }
50% { box-shadow: 0 0 0 8px rgba(138,63,252,0.04); }
}
/* --- Apple-style composition: headline behind product --- */
.hero__stage {
position: relative;
z-index: 1;
text-align: center;
padding-top: clamp(20px, 4vw, 40px);
}
/* ---- 2-slide carousel ---- */
.hero__stage[data-slides] {
min-height: clamp(600px, 72vw, 880px);
}
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.9s ease;
display: flex;
flex-direction: column;
}
.hero__slide.is-active {
opacity: 1;
pointer-events: auto;
}
.hero__slide[data-slide="0"] {
/* original content keeps its flow */
position: absolute;
}
/* --- Slide 2: cinematic film --- */
.hero__slide--film {
padding-top: clamp(6px, 1vw, 18px);
}
.hero__film {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: clamp(520px, 64vw, 780px);
margin: 0 auto;
border-radius: var(--r-2xl);
overflow: hidden;
background: #0b0710;
box-shadow:
0 40px 90px rgba(27,20,40,0.28),
0 14px 32px rgba(94,57,144,0.22);
isolation: isolate;
}
.hero__film-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
filter: saturate(0.92) contrast(1.02);
}
.hero__film-vignette {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(11,7,16,0.05) 0%, rgba(11,7,16,0.25) 55%, rgba(11,7,16,0.78) 100%),
radial-gradient(ellipse at 30% 30%, rgba(94,57,144,0.12) 0%, transparent 60%);
}
.hero__film-copy {
position: absolute;
left: clamp(24px, 5vw, 72px);
right: clamp(24px, 5vw, 72px);
bottom: clamp(28px, 5vw, 68px);
z-index: 2;
max-width: 640px;
text-align: left;
color: var(--ghm-cream, #faf7f1);
}
.hero__film-title {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(2rem, 4.6vw, 3.6rem);
line-height: 1.02;
letter-spacing: -0.025em;
margin: 14px 0 16px;
color: #fdfbf6;
}
.hero__film-title em {
font-style: italic;
font-weight: 400;
background: linear-gradient(90deg, #f4d7ff 0%, #c7a9ff 55%, #f7e9ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero__film-lead {
font-size: clamp(0.96rem, 1.2vw, 1.08rem);
line-height: 1.55;
color: rgba(253,251,246,0.82);
margin: 0 0 22px;
max-width: 520px;
}
.hero__film-ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.eyebrow--on-dark {
color: rgba(247,244,251,0.72);
}
/* Light / ghost buttons used on film slide */
.btn-light {
background: #fdfbf6;
color: var(--ghm-text-dark);
border: 1px solid rgba(255,255,255,0.9);
}
.btn-light:hover { background: #ffffff; }
.btn-ghost {
background: transparent;
color: rgba(253,251,246,0.92);
border: 1px solid rgba(253,251,246,0.38);
}
.btn-ghost:hover {
background: rgba(253,251,246,0.08);
border-color: rgba(253,251,246,0.65);
}
/* --- Dot indicators --- */
.hero__dots {
display: flex;
justify-content: center;
gap: 12px;
margin-top: clamp(18px, 3vw, 34px);
position: relative;
z-index: 3;
}
/* Carousel dots: visible indicator stays 42×3, but the hit area is 44×44.
Uses a transparent outer button that contains the visible indicator. */
.hero__dots button {
position: relative;
width: 44px; height: 44px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero__dots button::before {
content: "";
display: block;
width: 42px; height: 3px;
background: rgba(27,20,40,0.14);
border-radius: 2px;
transition: background 0.4s ease, width 0.4s ease;
}
.hero__dots button:hover::before { background: rgba(94,57,144,0.40); }
.hero__dots button.is-active::before {
background: linear-gradient(90deg, #5e3990, #8a3ffc);
width: 64px;
}
.hero__dots button:focus-visible {
outline: 2px solid var(--ghm-purple-500);
outline-offset: 2px;
border-radius: var(--r-sm);
}
@media (max-width: 720px) {
.hero__stage[data-slides] { min-height: clamp(720px, 175vw, 920px); }
.hero__film { aspect-ratio: 4 / 5; }
.hero__film-title { font-size: clamp(1.7rem, 6.6vw, 2.4rem); }
/* Stronger vignette on mobile so copy stays readable over the video */
.hero__film-vignette {
background:
linear-gradient(180deg,
rgba(11,7,16,0.22) 0%,
rgba(11,7,16,0.55) 48%,
rgba(11,7,16,0.92) 100%),
radial-gradient(ellipse at 30% 30%, rgba(94,57,144,0.12) 0%, transparent 60%);
}
.hero__film-copy {
left: 18px;
right: 18px;
bottom: 22px;
}
.hero__film-lead {
font-size: 0.92rem;
line-height: 1.5;
}
.hero__film-ctas { gap: 10px; }
.hero__film-ctas .btn { padding: 12px 18px; font-size: 0.86rem; }
}
.hero__headline {
font-family: var(--f-display);
font-weight: 400;
font-size: var(--fs-hero);
line-height: 0.92;
letter-spacing: -0.035em;
color: var(--ghm-text-dark);
max-width: 14ch;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero__headline .line { display: block; }
.hero__headline em {
font-style: italic;
font-weight: 400;
background: linear-gradient(90deg, #5e3990 0%, #8a3ffc 60%, #a673ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero__product {
position: relative;
margin-top: clamp(-40px, -4vw, -18px);
margin-bottom: clamp(-90px, -8vw, -48px);
height: clamp(300px, 38vw, 520px);
z-index: 0;
}
.hero__product::before {
content: "";
position: absolute;
left: 50%; top: 46%;
width: clamp(380px, 50vw, 720px);
height: clamp(160px, 22vw, 280px);
background: radial-gradient(ellipse at center, rgba(138,63,252,0.30) 0%, rgba(167,115,255,0.14) 40%, transparent 72%);
transform: translate(-50%, -50%);
filter: blur(30px);
z-index: 0;
}
.hero__product img {
position: absolute;
left: 50%; top: 50%;
width: clamp(320px, 46vw, 680px);
height: auto;
transform: translate(-50%, -50%);
filter: drop-shadow(0 40px 60px rgba(27,20,40,0.18)) drop-shadow(0 10px 20px rgba(94,57,144,0.16));
z-index: 1;
will-change: transform;
transition: transform var(--t-slow);
}
.hero__product .specsheet {
position: absolute;
z-index: 2;
background: rgba(255,255,255,0.72);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.9);
border-radius: var(--r-md);
padding: 14px 18px;
box-shadow: var(--sh-md);
font-size: 0.82rem;
line-height: 1.3;
color: var(--ghm-text-dark);
min-width: 190px;
}
.hero__product .specsheet .lbl {
display: block;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ghm-purple-700);
margin-bottom: 4px;
}
.hero__product .specsheet .val {
font-family: var(--f-display);
font-size: 1.35rem;
font-weight: 400;
line-height: 1;
color: var(--ghm-text-dark);
}
.hero__product .specsheet--a { top: 18%; left: 4%; }
.hero__product .specsheet--b { bottom: 18%; right: 4%; }
@media (max-width: 720px) {
.hero__product .specsheet { display: none; }
.hero__product {
margin-top: 18px;
margin-bottom: 8px;
height: clamp(220px, 64vw, 320px);
}
.hero__product img { width: clamp(240px, 76vw, 360px); }
.hero__headline { max-width: 100%; padding: 0 8px; }
}
.hero__lead-row {
position: relative;
z-index: 2;
max-width: 760px;
margin: clamp(24px, 4vw, 48px) auto 0;
text-align: center;
}
.hero__lead-row .lead { margin: 0 auto 26px; }
.hero__ctas {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.hero__scroll {
display: flex; justify-content: center;
margin-top: clamp(28px, 5vw, 56px);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ghm-text-meta);
gap: 10px; align-items: center;
}
.hero__scroll::after {
content: ""; width: 1px; height: 36px;
background: linear-gradient(to bottom, var(--ghm-text-meta), transparent);
}
/* =============================================================
TRUST STRIP (social proof, certifications)
============================================================= */
.trust {
background: var(--ghm-paper);
border-block: 1px solid var(--ghm-rule-soft);
padding: 24px 0;
}
.trust-row {
display: flex; flex-wrap: wrap;
gap: 18px 48px;
align-items: center; justify-content: center;
}
.trust-row span {
font-size: var(--fs-label);
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ghm-text-meta);
}
.trust-row .pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 16px;
border: 1px solid var(--ghm-rule-soft);
border-radius: var(--r-pill);
color: var(--ghm-text-dark);
font-weight: 600;
}
.trust-row .pill::before {
content: ""; width: 6px; height: 6px;
border-radius: 50%;
background: var(--ghm-clinical-500);
box-shadow: 0 0 0 3px rgba(30,138,155,0.12);
}
/* =============================================================
Section scaffold
============================================================= */
section.pad { padding: var(--section-y) 0; }
.section-head { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head .eyebrow { margin-bottom: 4px; }
.section-head .section-title { margin-top: 14px; }
/* =============================================================
Conditions cards (3-up educational)
============================================================= */
.conditions {
background: var(--ghm-paper);
}
.conditions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 900px) { .conditions-grid { grid-template-columns: 1fr; } }
.cond-card {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--ghm-ink);
isolation: isolate;
transition: transform var(--t-med);
display: block;
}
.cond-card:hover { transform: translateY(-3px); }
.cond-card .scene {
position: absolute; inset: 0;
transition: transform var(--t-slow);
}
.cond-card:hover .scene { transform: scale(1.05); }
/* Scene A — SLEEP (purple-navy, soft curves) */
.cond-card .scene.sleep {
background:
radial-gradient(100% 70% at 30% 30%, rgba(167,115,255,0.5), transparent 70%),
radial-gradient(80% 60% at 80% 90%, rgba(30,138,155,0.22), transparent 70%),
linear-gradient(160deg, #2b1a4d 0%, #0e0820 100%);
}
.cond-card .scene.copd {
background:
radial-gradient(90% 70% at 60% 30%, rgba(138,63,252,0.48), transparent 70%),
radial-gradient(70% 60% at 20% 90%, rgba(30,138,155,0.24), transparent 70%),
linear-gradient(155deg, #3d2870 0%, #1e0e39 100%);
}
.cond-card .scene.snoring {
background:
radial-gradient(100% 80% at 70% 40%, rgba(199,164,255,0.5), transparent 70%),
radial-gradient(80% 50% at 20% 80%, rgba(123,195,207,0.24), transparent 70%),
linear-gradient(160deg, #5e3990 0%, #2b1a4d 100%);
}
.cond-card .glyph {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -52%);
width: 58%; height: auto;
opacity: 0.92;
color: rgba(255,255,255,0.88);
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
}
.cond-card .overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 35%, rgba(14,8,32,0.86) 100%);
}
.cond-card .meta {
position: absolute;
top: 22px; left: 22px; right: 22px;
display: flex; justify-content: space-between;
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.cond-card .meta strong { color: var(--ghm-paper); }
.cond-card .body {
position: absolute;
left: 26px; right: 26px; bottom: 26px;
color: var(--ghm-paper);
}
.cond-card .body h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 2rem);
color: var(--ghm-paper);
margin-bottom: 10px;
letter-spacing: -0.015em;
}
.cond-card .body p {
font-size: 0.92rem;
color: rgba(255,255,255,0.76);
max-width: 30ch;
margin: 0 0 14px;
}
.cond-card .body .go {
display: inline-flex; align-items: center; gap: 10px;
font-size: var(--fs-label);
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
}
.cond-card .body .go::after {
content: ""; width: 18px; height: 1px; background: currentColor;
transition: width var(--t-med);
}
.cond-card:hover .body .go::after { width: 32px; }
/* =============================================================
Flagship banners (intelligent device / connected care)
============================================================= */
.flagship { background: var(--ghm-paper); }
.flagship + .flagship { padding-top: 0; }
.fbanner {
position: relative;
border-radius: var(--r-2xl);
padding: clamp(40px, 6vw, 80px);
overflow: hidden;
isolation: isolate;
display: grid;
gap: clamp(24px, 4vw, 56px);
align-items: center;
min-height: clamp(480px, 55vw, 620px);
box-shadow: var(--sh-sm);
}
.fbanner--light {
background: var(--g-soft-band);
color: var(--ghm-text-dark);
grid-template-columns: 0.42fr 0.58fr;
}
.fbanner--dark {
background: var(--g-hero-dark);
color: var(--ghm-text-invert);
grid-template-columns: 0.58fr 0.42fr;
}
@media (max-width: 900px) {
.fbanner { grid-template-columns: 1fr !important; padding: clamp(32px, 6vw, 48px); }
}
.fbanner__text { max-width: 46ch; }
.fbanner__text .eyebrow { margin-bottom: 18px; }
.fbanner--dark .fbanner__text .eyebrow { color: var(--ghm-purple-300); }
.fbanner--dark .fbanner__text .eyebrow::before { background: var(--ghm-purple-300); }
.fbanner__text h2 {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(2rem, 3.6vw, 3.2rem);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--ghm-text-dark);
margin-bottom: 22px;
}
.fbanner__text h2 em { font-style: italic; color: var(--ghm-purple-700); }
.fbanner--dark .fbanner__text h2 { color: var(--ghm-paper); }
.fbanner--dark .fbanner__text h2 em {
font-style: italic;
background: linear-gradient(90deg, #c7a4ff 0%, #a673ff 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.fbanner__text p {
color: var(--ghm-text-muted);
font-size: var(--fs-lead);
margin: 0 0 28px;
}
.fbanner--dark .fbanner__text p { color: rgba(247,244,251,0.78); }
.fbanner__text .bullets {
display: grid; gap: 10px;
margin-bottom: 30px;
padding-top: 20px;
border-top: 1px solid rgba(27,20,40,0.08);
}
.fbanner--dark .fbanner__text .bullets { border-top-color: rgba(255,255,255,0.12); }
.fbanner__text .bullets li {
display: grid; grid-template-columns: 20px 1fr; gap: 12px;
font-size: 0.95rem;
color: var(--ghm-text-body);
}
.fbanner--dark .fbanner__text .bullets li { color: rgba(247,244,251,0.82); }
.fbanner__text .bullets li::before {
content: "";
width: 14px; height: 14px; margin-top: 3px;
border-radius: 50%;
background: var(--ghm-purple-100);
border: 2px solid var(--ghm-purple-700);
}
.fbanner--dark .fbanner__text .bullets li::before {
background: rgba(255,255,255,0.06);
border-color: var(--ghm-purple-400);
}
/* Product figure for fbanner--light */
.fbanner__figure {
position: relative;
aspect-ratio: 1/1;
display: grid; place-items: center;
}
.fbanner__figure .glow {
position: absolute;
left: 50%; top: 50%;
width: 90%; height: 70%;
transform: translate(-50%, -50%);
background: radial-gradient(50% 50% at 50% 50%, rgba(138,63,252,0.35) 0%, transparent 72%);
filter: blur(30px);
z-index: 0;
}
.fbanner__figure img {
position: relative;
z-index: 1;
max-width: 84%;
max-height: 86%;
filter: drop-shadow(0 30px 50px rgba(27,20,40,0.18));
transition: transform var(--t-slow);
}
.fbanner:hover .fbanner__figure img { transform: translateY(-6px); }
.fbanner__figure .micro-card {
position: absolute;
z-index: 2;
background: rgba(255,255,255,0.88);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.9);
border-radius: var(--r-md);
padding: 12px 16px;
box-shadow: var(--sh-md);
font-size: 0.82rem;
min-width: 170px;
}
.fbanner__figure .micro-card .lbl {
display: block; font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--ghm-purple-700); margin-bottom: 4px;
}
.fbanner__figure .micro-card .val {
font-family: var(--f-display); font-weight: 400;
font-size: 1.15rem; color: var(--ghm-text-dark);
}
.fbanner__figure .micro-card.top { top: 8%; right: 2%; }
.fbanner__figure .micro-card.bot { bottom: 8%; left: 2%; }
/* Abstract 3D connected-care scene for fbanner--dark */
.scene-cubes {
position: relative;
aspect-ratio: 1/1;
width: 100%;
}
.scene-cubes .orb {
position: absolute;
border-radius: 50%;
filter: blur(40px);
}
.scene-cubes .orb-a { top: 10%; left: 10%; width: 40%; height: 40%; background: rgba(138,63,252,0.55); }
.scene-cubes .orb-b { bottom: 8%; right: 8%; width: 52%; height: 52%; background: rgba(30,138,155,0.32); }
.scene-cubes .orb-c { top: 55%; left: 40%; width: 28%; height: 28%; background: rgba(199,164,255,0.5); }
.scene-cubes .cube {
position: absolute;
width: 22%; aspect-ratio: 1/1;
border-radius: var(--r-lg);
background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%);
border: 1px solid rgba(255,255,255,0.22);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
display: grid; place-items: center;
color: var(--ghm-paper);
font-family: var(--f-mono);
font-size: 0.8rem;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.scene-cubes .cube svg { width: 40%; height: 40%; stroke: currentColor; stroke-width: 1.5; fill: none; }
.scene-cubes .cube.c1 { top: 22%; left: 18%; transform: rotate(-6deg); }
.scene-cubes .cube.c2 { top: 30%; right: 20%; transform: rotate(7deg); }
.scene-cubes .cube.c3 { bottom: 20%; left: 28%; transform: rotate(3deg); }
.scene-cubes .cube.c4 { bottom: 12%; right: 12%; transform: rotate(-10deg); }
.scene-cubes .line {
position: absolute; height: 1px;
background: linear-gradient(90deg, transparent, rgba(199,164,255,0.6), transparent);
transform-origin: left;
}
.scene-cubes .line.l1 { top: 32%; left: 40%; width: 24%; transform: rotate(12deg); }
.scene-cubes .line.l2 { top: 58%; left: 30%; width: 40%; transform: rotate(-8deg); }
/* =============================================================
Benefit grid (How to choose)
============================================================= */
.benefits { background: var(--ghm-cream); }
.benefits-rows {
display: grid;
gap: clamp(14px, 2vw, 24px);
}
.bf-row { display: grid; gap: clamp(14px, 2vw, 24px); }
.bf-row--2 { grid-template-columns: 1fr 1fr; }
.bf-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 800px) {
.bf-row--2, .bf-row--3 { grid-template-columns: 1fr; }
}
.bf-card {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--ghm-paper);
box-shadow: var(--sh-sm);
transition: transform var(--t-med), box-shadow var(--t-med);
display: block;
aspect-ratio: 4/3;
}
.bf-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.bf-card .scene {
position: absolute; inset: 0;
transition: transform var(--t-slow);
}
.bf-card:hover .scene { transform: scale(1.04); }
/* Scenes for benefit cards */
.bf-scene-effective {
background:
radial-gradient(90% 70% at 30% 30%, rgba(199,164,255,0.55), transparent 70%),
radial-gradient(60% 50% at 85% 80%, rgba(123,195,207,0.25), transparent 70%),
linear-gradient(160deg, #f6f0ff 0%, #faf7f1 100%);
}
.bf-scene-comfortable {
background:
radial-gradient(80% 60% at 70% 40%, rgba(167,115,255,0.35), transparent 70%),
radial-gradient(60% 50% at 20% 80%, rgba(167,115,255,0.45), transparent 70%),
linear-gradient(155deg, #faf7f1 0%, #f6f0ff 100%);
}
.bf-scene-lownoise {
background:
radial-gradient(70% 70% at 50% 50%, rgba(138,63,252,0.35), transparent 70%),
linear-gradient(160deg, #1e0e39 0%, #0e0820 100%);
color: var(--ghm-paper);
}
.bf-scene-easy {
background:
radial-gradient(80% 60% at 30% 70%, rgba(123,195,207,0.22), transparent 70%),
linear-gradient(160deg, #f6f0ff 0%, #faf7f1 100%);
}
.bf-scene-smart {
background:
radial-gradient(70% 60% at 60% 50%, rgba(199,164,255,0.5), transparent 70%),
linear-gradient(160deg, #2b1a4d 0%, #1e0e39 100%);
color: var(--ghm-paper);
}
.bf-card .glyph {
position: absolute;
right: 8%;
bottom: 50%;
transform: translateY(50%);
width: 42%;
opacity: 0.95;
filter: drop-shadow(0 18px 30px rgba(27,20,40,0.12));
}
.bf-card--dark .glyph { color: rgba(255,255,255,0.88); filter: drop-shadow(0 18px 30px rgba(0,0,0,0.3)); }
.bf-card .label {
position: absolute;
top: 20px; left: 22px;
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ghm-text-meta);
}
.bf-card--dark .label { color: rgba(255,255,255,0.6); }
.bf-card h3 {
position: absolute;
left: 22px; bottom: 22px;
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(1.4rem, 2.1vw, 1.9rem);
color: var(--ghm-text-dark);
letter-spacing: -0.015em;
}
.bf-card--dark h3 { color: var(--ghm-paper); }
.bf-card .sub {
position: absolute;
left: 22px; bottom: 22px;
transform: translateY(100%); opacity: 0;
transition: transform var(--t-med), opacity var(--t-med);
color: var(--ghm-text-muted);
font-size: 0.88rem;
max-width: 30ch;
}
/* kept simple — only show sub on hover if designer wants */
/* =============================================================
Product grid with GHM watermark
============================================================= */
.catalog { background: var(--ghm-paper); }
.catalog-head { text-align: center; margin-bottom: clamp(40px, 5vw, 70px); }
.catalog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 760px) { .catalog-grid { grid-template-columns: 1fr; } }
.cat-card {
position: relative;
border-radius: var(--r-xl);
padding: clamp(28px, 3.4vw, 44px);
background: var(--ghm-lavender);
overflow: hidden;
isolation: isolate;
min-height: 320px;
transition: transform var(--t-med), box-shadow var(--t-med);
display: grid;
grid-template-columns: 1fr 0.9fr;
gap: 20px;
align-items: center;
cursor: pointer;
color: var(--ghm-text-dark);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.cat-card.c2 { background: linear-gradient(135deg, #f6f0ff 0%, #faf7f1 100%); }
.cat-card.c3 { background: linear-gradient(135deg, #eee1ff 0%, #f6f0ff 100%); }
.cat-card.c4 { background: linear-gradient(135deg, #faf7f1 0%, #f6f0ff 100%); }
.cat-card::before {
content: "GHM";
position: absolute;
left: -6%; bottom: -38%;
font-family: var(--f-display);
font-weight: 400;
font-style: italic;
font-size: clamp(12rem, 22vw, 22rem);
line-height: 0.8;
letter-spacing: -0.04em;
color: rgba(94,57,144,0.06);
pointer-events: none;
user-select: none;
z-index: 0;
}
.cat-card .text {
position: relative; z-index: 2;
}
.cat-card .tag {
display: inline-block;
padding: 4px 12px;
border-radius: var(--r-pill);
background: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.9);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ghm-purple-700);
margin-bottom: 14px;
}
.cat-card h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(1.45rem, 2.3vw, 2rem);
letter-spacing: -0.015em;
color: var(--ghm-text-dark);
margin-bottom: 10px;
max-width: 16ch;
}
.cat-card p {
color: var(--ghm-text-muted);
font-size: 0.95rem;
margin: 0 0 18px;
max-width: 36ch;
}
.cat-card .cta {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.86rem;
font-weight: 600;
color: var(--ghm-purple-700);
}
.cat-card .cta::after {
content: ""; width: 16px; height: 1px;
background: currentColor;
transition: width var(--t-med);
}
.cat-card:hover .cta::after { width: 28px; }
.cat-card .fig {
position: relative; z-index: 1;
aspect-ratio: 1/1;
display: grid; place-items: center;
}
.cat-card .fig img {
max-width: 84%; max-height: 86%;
filter: drop-shadow(0 20px 30px rgba(27,20,40,0.18));
transition: transform var(--t-slow);
}
.cat-card:hover .fig img { transform: translateY(-5px); }
/* =============================================================
Category tabs + carousel
============================================================= */
.bycat { background: var(--ghm-cream); }
.tabs {
display: flex; gap: 8px; flex-wrap: wrap;
justify-content: center;
margin-bottom: clamp(30px, 4vw, 48px);
}
.tab {
padding: 11px 22px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: var(--fs-small);
font-weight: 600;
color: var(--ghm-text-body);
background: var(--ghm-paper);
border: 1px solid var(--ghm-rule-soft);
transition: all var(--t-fast);
}
.tab:hover { color: var(--ghm-purple-700); border-color: var(--ghm-purple-200); }
.tab[aria-selected="true"] {
color: var(--ghm-paper);
background: var(--ghm-text-dark);
border-color: var(--ghm-text-dark);
}
.carousel__track {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(12px, 1.6vw, 20px);
transition: opacity var(--t-med);
}
@media (max-width: 1000px) { .carousel__track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .carousel__track { grid-template-columns: 1fr; } }
.prod-card {
position: relative;
background: var(--ghm-paper);
border: 1px solid var(--ghm-rule-soft);
border-radius: var(--r-lg);
padding: 18px 18px 20px;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 12px;
transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-fast);
min-height: 340px;
}
.prod-card:hover {
transform: translateY(-4px);
box-shadow: var(--sh-md);
border-color: transparent;
}
.prod-card .top {
display: flex; justify-content: space-between; align-items: center;
font-size: var(--fs-micro);
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ghm-text-meta);
font-weight: 600;
}
.prod-card .top .cat { color: var(--ghm-purple-700); }
.prod-card .fig {
position: relative;
aspect-ratio: 4/3;
border-radius: var(--r-md);
background: var(--g-product-lav);
overflow: hidden;
display: grid; place-items: center;
}
.prod-card .fig img {
max-width: 78%; max-height: 82%;
filter: drop-shadow(0 14px 24px rgba(27,20,40,0.15));
transition: transform var(--t-slow);
}
.prod-card:hover .fig img { transform: scale(1.04); }
.prod-card h3 {
font-family: var(--f-sans);
font-weight: 700;
font-size: 1rem;
line-height: 1.25;
color: var(--ghm-text-dark);
letter-spacing: -0.005em;
}
.prod-card .card-end {
display: flex; justify-content: space-between; align-items: center;
font-size: 0.82rem;
color: var(--ghm-text-muted);
padding-top: 10px;
border-top: 1px solid var(--ghm-rule-soft);
}
.prod-card .card-end .link { color: var(--ghm-purple-700); font-weight: 600; }
/* =============================================================
CASE STUDY — Apple-style proof moment
One scene, one quote, documented numbers. No decoration.
============================================================= */
.case-study {
background: var(--ghm-bone);
}
.case-study__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
@media (max-width: 960px) {
.case-study__grid { grid-template-columns: 1fr; gap: 40px; }
}
.case-study__media {
position: relative;
}
.case-study__frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-xl);
overflow: hidden;
background:
linear-gradient(160deg, var(--ghm-bone-lift) 0%, var(--ghm-lavender) 100%);
box-shadow: 0 30px 70px rgba(27,20,40,0.10);
}
.case-study__frame img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.case-study__frame--fallback::after {
content: "Clinician × Patient portrait";
position: absolute; inset: 0;
display: grid; place-items: center;
color: var(--ghm-text-meta);
font-family: var(--f-mono);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
padding: 24px;
}
.case-study__frame--fallback::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 45% at 50% 40%, rgba(138,63,252,0.16), transparent 60%),
radial-gradient(40% 30% at 80% 80%, rgba(30,138,155,0.14), transparent 60%);
}
.case-study__badge {
position: absolute;
right: clamp(-8px, -1vw, 18px);
bottom: clamp(-8px, -1vw, 24px);
background: var(--ghm-paper);
padding: 14px 20px;
border-radius: var(--r-md);
box-shadow: var(--sh-md);
display: grid; gap: 2px;
min-width: 180px;
}
.case-study__badge .k {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ghm-clinical-700);
}
.case-study__badge .v {
font-family: var(--f-display);
font-size: 1.6rem;
line-height: 1;
color: var(--ghm-text-dark);
}
.case-study__copy .eyebrow {
color: var(--ghm-clinical-700);
}
.case-study__copy .eyebrow::before {
background: var(--ghm-clinical-500);
}
.case-study__copy .section-title {
margin: 14px 0 18px;
font-size: clamp(2rem, 3.6vw, 3.2rem);
}
.case-study__copy .lead {
color: var(--ghm-text-body);
max-width: 58ch;
margin-bottom: 36px;
}
.case-study__metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px 36px;
margin: 0 0 36px;
padding: 28px 0;
border-top: 1px solid var(--ghm-rule-soft);
border-bottom: 1px solid var(--ghm-rule-soft);
}
.case-study__metrics dt {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ghm-text-meta);
margin-bottom: 8px;
}
.case-study__metrics dd {
margin: 0;
display: flex; align-items: baseline; gap: 4px;
color: var(--ghm-text-dark);
}
.case-study__metrics .n {
font-family: var(--f-display);
font-size: clamp(2.2rem, 3vw, 2.8rem);
line-height: 1;
letter-spacing: -0.02em;
}
.case-study__metrics .u {
font-family: var(--f-mono);
font-size: 0.9rem;
color: var(--ghm-clinical-700);
}
.case-study__quote {
margin: 0 0 28px;
padding: 24px 28px;
background: var(--ghm-paper);
border-left: 3px solid var(--ghm-clinical-500);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.case-study__quote p {
font-family: var(--f-display);
font-size: clamp(1.15rem, 1.4vw, 1.35rem);
font-style: italic;
line-height: 1.45;
color: var(--ghm-text-dark);
margin: 0 0 14px;
}
.case-study__quote footer {
display: flex; flex-direction: column; gap: 2px;
font-size: var(--fs-small);
}
.case-study__quote footer strong {
color: var(--ghm-text-dark);
font-weight: 700;
}
.case-study__quote footer span {
color: var(--ghm-text-muted);
}
.case-study__actions {
display: flex; flex-wrap: wrap; gap: 28px;
}
/* =============================================================
LIFESTYLE — the quiet at-home editorial band
Sits between the clinical proof (case study) and the product
catalog. One real photo, one short promise. Falls back to a
warm gradient placeholder if the image file is missing.
============================================================= */
.lifestyle { background: var(--ghm-paper); }
.lifestyle__grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
@media (max-width: 960px) {
.lifestyle__grid { grid-template-columns: 1fr; gap: 32px; }
}
.lifestyle__frame {
position: relative;
aspect-ratio: 16 / 10;
border-radius: var(--r-2xl);
overflow: hidden;
margin: 0;
background: var(--g-soft-band);
box-shadow: 0 30px 70px rgba(27,20,40,0.10);
}
.lifestyle__frame img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Product composition on warm paper (when no lifestyle photo available) */
.lifestyle__frame--product {
background:
radial-gradient(60% 55% at 50% 54%, rgba(255,236,212,0.55) 0%, transparent 72%),
linear-gradient(160deg, #f8efe0 0%, #ece4dc 48%, #e4d9cf 100%);
display: grid;
place-items: center;
}
.lifestyle__frame--product img {
position: relative;
width: 62%;
height: auto;
max-height: 72%;
object-fit: contain;
filter: drop-shadow(0 30px 44px rgba(46,34,18,0.16)) drop-shadow(0 10px 18px rgba(94,57,144,0.10));
z-index: 2;
}
.lifestyle__glow {
position: absolute;
left: 52%; top: 56%;
width: 58%;
height: 44%;
background:
radial-gradient(ellipse at center, rgba(244,169,21,0.26) 0%, rgba(244,169,21,0.08) 40%, transparent 72%);
transform: translate(-50%, -50%);
filter: blur(26px);
z-index: 1;
}
.lifestyle__caption {
position: absolute;
left: clamp(18px, 3vw, 28px);
bottom: clamp(18px, 3vw, 28px);
z-index: 3;
display: flex;
flex-direction: column;
gap: 4px;
color: var(--ghm-text-dark);
font-family: var(--f-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.lifestyle__tag {
color: var(--ghm-clinical-700);
font-weight: 700;
}
.lifestyle__meta {
color: var(--ghm-text-meta);
letter-spacing: 0.10em;
text-transform: none;
}
.lifestyle__frame--fallback::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(50% 45% at 28% 42%, rgba(138,63,252,0.18), transparent 62%),
radial-gradient(48% 40% at 78% 82%, rgba(30,138,155,0.14), transparent 62%);
}
.lifestyle__frame--fallback::after {
content: "Home · at rest";
position: absolute; inset: 0;
display: grid; place-items: center;
color: var(--ghm-text-meta);
font-family: var(--f-mono);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.lifestyle__copy .eyebrow { color: var(--ghm-clinical-700); }
.lifestyle__copy .eyebrow::before { background: var(--ghm-clinical-500); }
.lifestyle__copy .section-title {
margin: 14px 0 18px;
font-size: clamp(2rem, 3.4vw, 3rem);
}
.lifestyle__copy .section-title em {
font-style: italic;
color: var(--ghm-purple-700);
}
.lifestyle__copy .lead {
color: var(--ghm-text-body);
max-width: 54ch;
margin-bottom: 28px;
}
.lifestyle__bullets {
list-style: none;
padding: 20px 0 0;
margin: 0;
display: grid;
gap: 10px;
border-top: 1px solid var(--ghm-rule-soft);
}
.lifestyle__bullets li {
display: flex;
gap: 12px;
color: var(--ghm-text-body);
font-size: var(--fs-body);
}
.lifestyle__bullets li span {
color: var(--ghm-clinical-500);
font-family: var(--f-mono);
font-weight: 600;
min-width: 1.2em;
}
/* Signal gradient strip */
.signal-strip {
margin-top: clamp(36px, 4vw, 56px);
background: var(--g-strip);
color: var(--ghm-paper);
border-radius: var(--r-xl);
padding: clamp(26px, 3vw, 40px) clamp(28px, 3.4vw, 48px);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 32px;
box-shadow: var(--sh-md);
}
.signal-strip .lbl {
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.28em; text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.signal-strip .msg {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
line-height: 1.3;
}
.signal-strip .go {
display: inline-flex; align-items: center; gap: 12px;
padding: 12px 22px;
border-radius: var(--r-pill);
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
font-size: 0.85rem; font-weight: 600;
color: var(--ghm-paper);
transition: background var(--t-fast);
}
.signal-strip .go:hover { background: rgba(255,255,255,0.32); }
@media (max-width: 800px) {
.signal-strip { grid-template-columns: 1fr; gap: 16px; }
}
/* =============================================================
Partnership CTA banner (full-bleed cinematic)
============================================================= */
.partner { background: var(--ghm-paper); }
.partner-card {
position: relative;
border-radius: var(--r-2xl);
padding: clamp(48px, 6vw, 88px);
background: var(--g-hero-dark);
color: var(--ghm-paper);
overflow: hidden;
isolation: isolate;
min-height: clamp(460px, 52vw, 580px);
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
box-shadow: var(--sh-lg);
}
.partner-card::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(45% 40% at 90% 10%, rgba(30,138,155,0.32), transparent 60%),
radial-gradient(40% 40% at 8% 100%, rgba(138,63,252,0.45), transparent 60%);
pointer-events: none; z-index: 0;
}
.partner-card > * { position: relative; z-index: 1; }
.partner-card .eyebrow { color: var(--ghm-purple-300); }
.partner-card .eyebrow::before { background: var(--ghm-purple-300); }
.partner-card h2 {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(2rem, 3.6vw, 3.2rem);
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--ghm-paper);
margin: 18px 0 18px;
}
.partner-card h2 em {
font-style: italic;
background: linear-gradient(90deg, #c7a4ff 0%, #7bc3cf 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.partner-card p {
color: rgba(247,244,251,0.82);
font-size: var(--fs-lead);
max-width: 52ch;
margin: 0 0 30px;
}
.partner-card .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.partner-card .pstats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
padding: 24px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-radius: var(--r-xl);
}
.partner-card .pstats .cell {
padding: 18px 16px;
border-radius: var(--r-md);
}
.partner-card .pstats .num {
display: block;
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(1.8rem, 3vw, 2.4rem);
color: var(--ghm-paper);
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.partner-card .pstats .num em {
font-style: italic;
font-size: 0.6em;
color: var(--ghm-purple-300);
margin-left: 3px;
}
.partner-card .pstats .lbl {
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(247,244,251,0.7);
}
@media (max-width: 900px) {
.partner-card { grid-template-columns: 1fr; padding: clamp(32px, 6vw, 52px); }
}
/* =============================================================
News & events
============================================================= */
.news { background: var(--ghm-paper); }
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.4vw, 30px);
}
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } }
.news-card {
background: var(--ghm-paper);
border: 1px solid var(--ghm-rule-soft);
border-radius: var(--r-lg);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
transition: transform var(--t-med), box-shadow var(--t-med);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.news-card .fig {
position: relative;
aspect-ratio: 16/10;
background: var(--g-product-lav);
overflow: hidden;
}
.news-card .fig img {
width: 100%; height: 100%;
object-fit: contain;
padding: 16%;
filter: drop-shadow(0 12px 22px rgba(27,20,40,0.12));
transition: transform var(--t-slow);
}
.news-card:hover .fig img { transform: scale(1.04); }
.news-card .fig .tag {
position: absolute; top: 16px; left: 16px;
padding: 5px 12px;
background: rgba(255,255,255,0.88);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: var(--r-pill);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ghm-purple-700);
}
.news-card .body {
padding: 22px 24px 24px;
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 10px;
}
.news-card .date {
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ghm-text-meta);
}
.news-card h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: 1.28rem;
line-height: 1.2;
color: var(--ghm-text-dark);
letter-spacing: -0.01em;
}
.news-card p {
font-size: 0.9rem;
color: var(--ghm-text-muted);
margin: 0;
}
.news-card .go {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 6px;
padding: 12px 0;
min-height: 44px;
font-size: var(--fs-small);
font-weight: 600;
color: var(--ghm-purple-700);
}
.news-card .go::after {
content: ""; width: 16px; height: 1px; background: currentColor;
transition: width var(--t-med);
}
.news-card:hover .go::after { width: 28px; }
/* =============================================================
Footer
============================================================= */
.foot {
background: var(--ghm-ink);
color: var(--ghm-text-invert-muted);
padding-top: clamp(72px, 9vw, 120px);
padding-bottom: 28px;
border-top: 1px solid var(--ghm-rule-dark);
}
.foot__top {
display: grid;
grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 0.8fr;
gap: 44px;
padding-bottom: 48px;
border-bottom: 1px solid var(--ghm-rule-dark);
}
@media (max-width: 1000px) { .foot__top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 600px) { .foot__top { grid-template-columns: 1fr 1fr; } }
.foot__brand svg { width: 64px; margin-bottom: 18px; color: var(--ghm-paper); }
.foot__brand .name {
display: block;
font-family: var(--f-display); font-weight: 500;
font-size: 1.4rem; color: var(--ghm-paper);
margin-bottom: 14px; letter-spacing: -0.01em;
}
.foot__brand p {
color: var(--ghm-text-invert-muted);
font-size: 0.94rem;
max-width: 34ch;
margin: 0 0 20px;
line-height: 1.6;
}
.foot__brand .contact {
display: grid; gap: 6px;
font-size: 0.88rem;
color: var(--ghm-text-invert-muted);
font-style: normal;
}
.foot__brand .contact a { color: var(--ghm-purple-300); }
.foot__brand .contact a:hover { color: var(--ghm-paper); }
.foot__col h4 {
color: var(--ghm-paper);
font-size: var(--fs-label);
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
margin-bottom: 20px;
}
.foot__col ul { display: grid; gap: 12px; }
.foot__col a {
font-size: 0.92rem;
color: var(--ghm-text-invert-muted);
}
.foot__col a:hover { color: var(--ghm-paper); }
.foot__sub {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid var(--ghm-rule-dark);
display: grid;
grid-template-columns: 1fr auto;
gap: 18px; align-items: center;
font-size: var(--fs-micro);
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ghm-text-invert-meta);
}
.foot__sub .right { display: flex; gap: 22px; flex-wrap: wrap; }
.foot__sub .right a,
.foot__col a,
.foot .contact a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-block: 4px;
}
.foot .contact a { display: flex; }
@media (max-width: 700px) { .foot__sub { grid-template-columns: 1fr; } }
/* =============================================================
CASE STUDY — editorial SVG illustration
(Replaces the absent clinician-patient.jpg with a brand-aligned SVG.
Preserves the frame's soft gradient as a fallback background.)
============================================================= */
.case-study__frame--editorial {
padding: 0;
background: none; /* let the SVG own the background */
overflow: hidden;
}
.case-study__art {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: inherit;
}
/* =============================================================
LEGAL / PRIVACY / COOKIES PAGES
============================================================= */
.page--legal {
background: var(--ghm-bone);
}
.legal-shell {
padding-block: clamp(48px, 8vw, 96px) clamp(64px, 10vw, 128px);
}
.legal-body {
max-width: 760px;
margin-inline: auto;
}
.legal-body .eyebrow {
display: inline-block;
margin-bottom: 14px;
padding: 6px 12px;
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ghm-purple-700);
background: var(--ghm-purple-100);
border-radius: var(--r-pill);
}
.legal-body h1 {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(2rem, 4.5vw, 3.2rem);
line-height: 1.06;
letter-spacing: -0.028em;
margin-bottom: 20px;
color: var(--ghm-text-dark);
}
.legal-body .lead {
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--ghm-text-body);
margin-bottom: 40px;
}
.legal-body h2 {
font-family: var(--f-sans);
font-weight: 700;
font-size: 1.25rem;
margin-top: 36px;
margin-bottom: 10px;
color: var(--ghm-text-dark);
letter-spacing: -0.015em;
}
.legal-body p,
.legal-body ul,
.legal-body ol {
font-size: 1rem;
line-height: 1.7;
color: var(--ghm-text-body);
margin: 0 0 14px 0;
}
.legal-body ul {
padding-left: 20px;
list-style: disc;
}
.legal-body ul li { margin-bottom: 6px; }
.legal-body a {
color: var(--ghm-purple-700);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(94,57,144,0.35);
transition: text-decoration-color var(--t-fast), color var(--t-fast);
}
.legal-body a:hover {
text-decoration-color: var(--ghm-purple-700);
}
.legal-body .legal-meta {
margin-top: 48px;
padding-top: 20px;
border-top: 1px solid var(--ghm-rule-soft);
font-size: var(--fs-small);
color: var(--ghm-text-meta);
letter-spacing: 0.05em;
}
/* Legal-page footer uses the grid/card styles already defined below */
.page--legal .footer {
background: var(--ghm-ink);
color: var(--ghm-text-invert-muted);
padding: clamp(48px, 7vw, 80px) 0 32px;
}
.page--legal .footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 32px;
}
.page--legal .footer__brand .name {
display: block;
font-family: var(--f-display);
font-size: 1.6rem;
color: var(--ghm-paper);
margin-bottom: 8px;
}
.page--legal .footer__brand p {
color: var(--ghm-text-invert-muted);
max-width: 320px;
}
.page--legal .footer__col h4 {
color: var(--ghm-paper);
font-size: 0.92rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 14px;
}
.page--legal .footer__col a {
display: block;
color: var(--ghm-text-invert-muted);
font-size: 0.95rem;
padding-block: 6px;
min-height: 36px;
}
.page--legal .footer__col a:hover { color: var(--ghm-paper); }
.page--legal .footer__base {
padding-top: 24px;
border-top: 1px solid var(--ghm-rule-dark);
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
font-size: var(--fs-micro);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ghm-text-invert-meta);
}
@media (max-width: 900px) {
.page--legal .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.page--legal .footer__grid { grid-template-columns: 1fr; }
}
/* =============================================================
Reveal animation
GSAP owns all the motion — the CSS opacity:0 provides the hidden
initial state so content doesn't flash before GSAP binds. Do NOT
add a `transition` here: it competes with GSAP's per-frame updates
and leaves elements stuck mid-fade.
============================================================= */
[data-reveal] {
opacity: 0;
transform: translateY(22px);
}
[data-reveal].is-in { opacity: 1; transform: none; }
/* Product pages intentionally don't use [data-reveal] — product.js owns
all entrance animations via gsap.from() on explicit selectors. */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
[data-reveal] { opacity: 1; transform: none; }
}
/* =============================================================
Utilities
============================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* =============================================================
PRODUCT DETAIL PAGE — G3 template
============================================================= */
/* ---- Breadcrumb ---- */
.crumbs {
background: var(--ghm-paper);
border-bottom: 1px solid var(--ghm-rule-hair);
}
.crumbs__row {
display: flex;
gap: 10px;
padding: 16px 0;
font-size: var(--fs-small);
color: var(--ghm-text-meta);
align-items: center;
}
.crumbs a {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 4px 0;
color: var(--ghm-text-muted);
}
.crumbs a:hover { color: var(--ghm-purple-700); }
.crumbs .current {
color: var(--ghm-text-dark);
font-weight: 600;
}
/* ---- Product Hero ---- */
.p-hero {
background: var(--g-hero);
padding: clamp(40px, 7vw, 90px) 0 clamp(40px, 7vw, 110px);
position: relative;
overflow: hidden;
}
.p-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 80% at 85% 30%, rgba(30,138,155,0.07) 0%, transparent 60%),
radial-gradient(50% 70% at 15% 80%, rgba(138,63,252,0.10) 0%, transparent 70%);
pointer-events: none;
}
.p-hero__grid {
position: relative;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
@media (max-width: 900px) {
.p-hero__grid { grid-template-columns: 1fr; }
}
.p-hero__copy .eyebrow {
margin-bottom: 28px;
}
.p-hero__copy .dot-sku {
font-family: var(--f-mono);
font-size: var(--fs-label);
letter-spacing: 0.14em;
}
.p-hero__title {
font-size: clamp(3rem, 6vw, 5.4rem);
margin-bottom: 28px;
}
.p-hero__lead {
font-size: var(--fs-lead);
color: var(--ghm-text-body);
line-height: 1.55;
max-width: 54ch;
margin: 0 0 36px;
}
.p-hero__specs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--ghm-rule-light);
border: 1px solid var(--ghm-rule-light);
border-radius: var(--r-lg);
overflow: hidden;
margin-bottom: 32px;
}
.p-hero__specs li {
background: rgba(255,255,255,0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
.p-hero__specs .k {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ghm-text-meta);
}
.p-hero__specs .v {
font-family: var(--f-display);
font-size: 1.5rem;
color: var(--ghm-text-dark);
letter-spacing: -0.02em;
}
.p-hero__ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.p-hero__compliance {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.p-hero__compliance .pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: var(--r-pill);
background: var(--ghm-clinical-100);
color: var(--ghm-clinical-900);
font-family: var(--f-mono);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.04em;
border: 1px solid rgba(15,92,104,0.18);
}
.p-hero__compliance .pill::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ghm-clinical-500);
box-shadow: 0 0 0 3px rgba(30,138,155,0.14);
}
/* Hero product stage */
.p-hero__stage {
position: relative;
aspect-ratio: 1 / 1.05;
display: flex;
align-items: center;
justify-content: center;
}
.p-hero__halo {
position: absolute;
inset: 8% 8% 12% 8%;
background: radial-gradient(60% 55% at 50% 45%, rgba(138,63,252,0.24) 0%, rgba(167,115,255,0.08) 45%, transparent 75%);
filter: blur(30px);
z-index: 0;
}
.p-hero__plate {
position: absolute;
inset: 14% 10% 10% 10%;
background: var(--g-product-lav);
border-radius: 50%;
z-index: 0;
box-shadow: 0 40px 90px rgba(94,57,144,0.15);
}
.p-hero__img {
position: relative;
z-index: 2;
width: 78%;
max-height: 84%;
object-fit: contain;
filter: drop-shadow(0 30px 45px rgba(27,20,40,0.22));
}
.p-float {
position: absolute;
background: rgba(255,255,255,0.78);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.6);
border-radius: var(--r-lg);
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 2px;
box-shadow: var(--sh-md);
z-index: 3;
}
.p-float .k {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ghm-purple-700);
}
.p-float .v {
font-family: var(--f-display);
font-size: 1.15rem;
color: var(--ghm-text-dark);
}
.p-float--tl { top: 8%; left: -6%; }
.p-float--br { bottom: 6%; right: -4%; }
@media (max-width: 900px) {
.p-float--tl { top: 2%; left: 2%; }
.p-float--br { bottom: 2%; right: 2%; }
}
/* ---- Figures bar ---- */
.p-figs {
background: var(--ghm-ink);
color: var(--ghm-text-invert);
padding: clamp(40px, 5vw, 64px) 0;
}
.p-figs__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 900px) {
.p-figs__row { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
.fig-cell {
padding-right: 22px;
border-right: 1px solid var(--ghm-rule-dark);
}
.fig-cell:last-child { border-right: none; }
@media (max-width: 900px) {
.fig-cell { border-right: none; border-bottom: 1px solid var(--ghm-rule-dark); padding-bottom: 22px; padding-right: 0; }
.fig-cell:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
}
.fig-cell .n {
display: inline-block;
font-family: var(--f-display);
font-size: clamp(3rem, 5vw, 4.5rem);
letter-spacing: -0.02em;
color: var(--ghm-text-invert);
line-height: 1;
vertical-align: baseline;
}
.fig-cell .u {
display: inline-block;
font-family: var(--f-mono);
font-size: 0.95rem;
color: var(--ghm-purple-300);
margin-left: 6px;
vertical-align: baseline;
}
.fig-cell .l {
display: block;
font-size: var(--fs-small);
color: var(--ghm-text-invert-muted);
line-height: 1.5;
margin-top: 10px;
}
/* ---- Feature sections ---- */
.p-feature {
padding: clamp(70px, 9vw, 130px) 0;
}
.p-feature--flip { background: var(--ghm-cream); }
.p-feature--light { background: var(--ghm-lavender); }
.p-feature--dark {
background: var(--g-hero-dark);
color: var(--ghm-text-invert);
position: relative;
overflow: hidden;
}
.p-feature--dark::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(50% 60% at 20% 30%, rgba(30,138,155,0.18) 0%, transparent 60%),
radial-gradient(40% 50% at 85% 70%, rgba(138,63,252,0.25) 0%, transparent 65%);
pointer-events: none;
}
.p-feature__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
position: relative;
z-index: 1;
}
.p-feature--flip .p-feature__grid {
grid-template-columns: 1fr 1.1fr;
}
@media (max-width: 900px) {
.p-feature__grid { grid-template-columns: 1fr !important; gap: 40px; }
.p-feature--flip .p-feature__scene { order: 2; }
.p-feature--flip .p-feature__copy { order: 1; }
}
.p-feature__copy .eyebrow {
margin-bottom: 18px;
}
.p-feature__copy .section-title {
font-family: var(--f-display);
font-weight: 400;
line-height: 1;
font-size: clamp(2.2rem, 4vw, 3.6rem);
letter-spacing: -0.025em;
margin-bottom: 22px;
}
.p-feature__copy .lead {
margin-bottom: 28px;
}
.eyebrow--invert { color: var(--ghm-purple-300) !important; }
.eyebrow--invert::before { background: var(--ghm-purple-300) !important; }
.section-title--invert { color: var(--ghm-text-invert); }
.section-title--invert em { color: var(--ghm-purple-300); }
.lead--invert { color: var(--ghm-text-invert-muted) !important; }
.feature-list {
display: grid;
gap: 12px;
}
.feature-list li {
position: relative;
padding: 14px 0 14px 58px;
border-top: 1px solid var(--ghm-rule-hair);
font-size: 0.98rem;
line-height: 1.55;
color: var(--ghm-text-body);
min-height: 44px;
}
.feature-list li > span {
position: absolute;
left: 0;
top: 14px;
width: 44px;
font-family: var(--f-mono);
font-size: var(--fs-label);
color: var(--ghm-purple-700);
letter-spacing: 0.18em;
}
.feature-list li > strong {
font-weight: 700;
color: var(--ghm-text-strong, var(--ghm-text-body));
}
.feature-list--invert li {
border-top-color: var(--ghm-rule-dark);
color: var(--ghm-text-invert-muted);
}
.feature-list--invert li span {
color: var(--ghm-purple-300);
}
/* Feature scenes */
.scene-wrap {
position: relative;
aspect-ratio: 5 / 4;
background: rgba(255,255,255,0.55);
border: 1px solid var(--ghm-rule-light);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--sh-md);
}
.p-feature--dark .scene-wrap {
background: rgba(14,8,32,0.35);
border: 1px solid rgba(255,255,255,0.08);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.scene-glow {
position: absolute;
inset: -15%;
background: radial-gradient(50% 50% at 50% 50%, rgba(138,63,252,0.18) 0%, transparent 70%);
z-index: 0;
}
.scene-wave {
position: absolute;
inset: 0;
width: 100%; height: 100%;
z-index: 1;
}
.scene-label {
position: absolute;
bottom: 18px;
left: 18px;
background: var(--ghm-paper);
border-radius: var(--r-md);
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 2px;
box-shadow: var(--sh-sm);
z-index: 2;
}
.scene-label .k {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ghm-text-meta);
}
.scene-label .v {
font-family: var(--f-display);
font-size: 1.3rem;
color: var(--ghm-text-dark);
}
/* Dark readout */
.scene-rings {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
}
.scene-rings span {
position: absolute;
border: 1px solid rgba(199,164,255,0.22);
border-radius: 50%;
animation: pulse-ring 4s ease-out infinite;
}
.scene-rings span:nth-child(1) { width: 40%; height: 60%; animation-delay: 0s; }
.scene-rings span:nth-child(2) { width: 60%; height: 80%; animation-delay: 1.2s; }
.scene-rings span:nth-child(3) { width: 80%; height: 100%; animation-delay: 2.4s; }
@keyframes pulse-ring {
0% { opacity: 0.5; transform: scale(0.9); }
50% { opacity: 0.18; }
100% { opacity: 0; transform: scale(1.05); }
}
.scene-readout {
position: relative;
z-index: 1;
margin: 40px;
padding: 22px;
background: rgba(14,8,32,0.6);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(199,164,255,0.15);
border-radius: var(--r-lg);
color: var(--ghm-text-invert);
display: flex;
flex-direction: column;
gap: 12px;
}
.readout-head {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ghm-purple-300);
padding-bottom: 10px;
border-bottom: 1px solid rgba(199,164,255,0.12);
}
.readout-head .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ghm-clinical-300);
box-shadow: 0 0 14px var(--ghm-clinical-500);
}
.readout-row {
display: grid;
grid-template-columns: 80px 1fr 60px;
gap: 14px;
align-items: center;
font-size: var(--fs-small);
}
.readout-row .k {
font-family: var(--f-mono);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: var(--fs-micro);
color: var(--ghm-text-invert-muted);
}
.readout-row .bar {
height: 6px;
border-radius: 999px;
background: rgba(199,164,255,0.15);
overflow: hidden;
}
.readout-row .bar .fill {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--ghm-purple-400), var(--ghm-clinical-500));
border-radius: 999px;
}
.readout-row .v {
font-family: var(--f-display);
font-size: 1.1rem;
color: var(--ghm-text-invert);
text-align: right;
}
/* Humidifier scene */
.scene-humid {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 30px;
}
.humid-core svg { width: min(260px, 70%); height: auto; }
.humid-chips {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.humid-chips span {
display: flex;
flex-direction: column;
gap: 2px;
background: var(--ghm-paper);
border: 1px solid var(--ghm-rule-light);
padding: 10px 14px;
border-radius: var(--r-md);
}
.humid-chips .k {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ghm-text-meta);
}
.humid-chips .v {
font-family: var(--f-display);
font-size: 1.1rem;
color: var(--ghm-text-dark);
}
/* OS scene */
.scene-os {
padding: 26px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 14px;
}
.os-card {
background: var(--ghm-paper);
border: 1px solid var(--ghm-rule-light);
border-radius: var(--r-md);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: var(--sh-sm);
}
.os-card--a { grid-column: 1 / -1; }
.os-head {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ghm-text-meta);
}
.os-head .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ghm-purple-500);
}
.os-chart {
display: flex;
align-items: flex-end;
gap: 8px;
height: 80px;
}
.os-chart span {
flex: 1;
background: linear-gradient(180deg, var(--ghm-purple-500), var(--ghm-purple-300));
border-radius: 4px 4px 0 0;
min-height: 6px;
}
.os-foot {
display: flex;
justify-content: space-between;
font-family: var(--f-mono);
font-size: var(--fs-micro);
color: var(--ghm-text-meta);
letter-spacing: 0.1em;
}
.os-foot span:first-child {
font-family: var(--f-display);
font-size: 1.3rem;
color: var(--ghm-text-dark);
letter-spacing: -0.02em;
}
.os-kpi {
display: flex;
flex-direction: column;
gap: 2px;
}
.os-kpi .big {
font-family: var(--f-display);
font-size: 2.4rem;
color: var(--ghm-text-dark);
letter-spacing: -0.02em;
line-height: 1;
}
.os-kpi .sub {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ghm-text-meta);
}
/* ---- Specs table ---- */
.p-specs {
background: var(--ghm-paper);
padding: clamp(70px, 9vw, 130px) 0;
}
.p-specs .section-head {
margin-bottom: 50px;
max-width: 720px;
}
.section-head--left {
text-align: left;
}
.section-head--left .eyebrow::before { display: inline-block; }
.p-specs__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background: var(--ghm-rule-light);
border: 1px solid var(--ghm-rule-light);
border-radius: var(--r-lg);
overflow: hidden;
}
@media (max-width: 900px) {
.p-specs__grid { grid-template-columns: 1fr; }
}
.spec-group {
background: var(--ghm-paper);
padding: 28px;
display: flex;
flex-direction: column;
gap: 14px;
}
.spec-group h4 {
font-family: var(--f-display);
font-weight: 400;
font-size: 1.4rem;
letter-spacing: -0.02em;
padding-bottom: 14px;
border-bottom: 1px solid var(--ghm-rule-soft);
color: var(--ghm-purple-700);
}
.spec-group dl {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
}
.spec-group dl div {
display: grid;
grid-template-columns: 120px 1fr;
gap: 14px;
align-items: start;
}
.spec-group dt {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ghm-text-meta);
line-height: 1.5;
}
.spec-group dd {
font-size: 0.95rem;
color: var(--ghm-text-dark);
margin: 0;
line-height: 1.5;
}
/* ---- In the box ---- */
.p-box {
background: var(--ghm-cream);
padding: clamp(70px, 9vw, 130px) 0;
}
.p-box .section-head {
margin-bottom: 50px;
max-width: 640px;
}
.p-box__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) { .p-box__grid { grid-template-columns: 1fr; } }
@media (min-width: 540px) and (max-width: 900px) { .p-box__grid { grid-template-columns: repeat(2, 1fr); } }
.box-item {
background: var(--ghm-paper);
border: 1px solid var(--ghm-rule-soft);
border-radius: var(--r-lg);
padding: 28px;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform var(--t-med), box-shadow var(--t-med);
}
.box-item:hover {
transform: translateY(-4px);
box-shadow: var(--sh-md);
}
.box-n {
font-family: var(--f-mono);
font-size: var(--fs-label);
letter-spacing: 0.2em;
color: var(--ghm-purple-700);
margin-bottom: 6px;
}
.box-item h4 {
font-family: var(--f-sans);
font-weight: 700;
font-size: 1.08rem;
color: var(--ghm-text-dark);
line-height: 1.3;
}
.box-item p {
margin: 0;
font-size: 0.92rem;
color: var(--ghm-text-muted);
line-height: 1.55;
}
/* ---- Product bedside lifestyle band ----
Real photography moment between "In the box" and the clinical
quote. Dark bone backdrop so the photo (expected to be a night
scene) sits cleanly against the lighter sections around it. */
.p-lifestyle {
background: var(--ghm-bone);
padding: clamp(70px, 9vw, 120px) 0;
}
.p-lifestyle__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
@media (max-width: 960px) {
.p-lifestyle__grid { grid-template-columns: 1fr; gap: 32px; }
}
.p-lifestyle__frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-2xl);
overflow: hidden;
margin: 0;
background: linear-gradient(160deg, var(--ghm-ink-lift) 0%, var(--ghm-ink) 100%);
box-shadow: 0 30px 70px rgba(27,20,40,0.14);
}
.p-lifestyle__frame img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Product-in-ambient-light composition (when no lifestyle photo available) */
.p-lifestyle__frame--product {
background:
radial-gradient(60% 40% at 50% 55%, rgba(94,57,144,0.28) 0%, transparent 70%),
linear-gradient(160deg, #2a1a4a 0%, #150c24 55%, #0b0710 100%);
display: grid;
place-items: center;
}
.p-lifestyle__frame--product img {
position: relative;
width: 72%;
height: auto;
max-height: 56%;
object-fit: contain;
filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)) drop-shadow(0 8px 16px rgba(138,63,252,0.20));
z-index: 2;
}
.p-lifestyle__glow {
position: absolute;
left: 50%; top: 52%;
width: 64%;
height: 42%;
background:
radial-gradient(ellipse at center, rgba(167,115,255,0.30) 0%, rgba(94,57,144,0.12) 38%, transparent 72%);
transform: translate(-50%, -50%);
filter: blur(28px);
z-index: 1;
}
.p-lifestyle__caption {
position: absolute;
left: clamp(18px, 3vw, 28px);
bottom: clamp(18px, 3vw, 28px);
z-index: 3;
display: flex;
flex-direction: column;
gap: 4px;
color: rgba(247,244,251,0.82);
font-family: var(--f-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.p-lifestyle__tag {
color: var(--ghm-cream, #faf7f1);
font-weight: 700;
}
.p-lifestyle__meta {
color: rgba(247,244,251,0.55);
letter-spacing: 0.10em;
text-transform: none;
}
.p-lifestyle__frame--fallback::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 40% 55%, rgba(138,63,252,0.22), transparent 65%),
radial-gradient(50% 40% at 70% 85%, rgba(30,138,155,0.16), transparent 60%);
}
.p-lifestyle__frame--fallback::after {
content: "Night · bedside";
position: absolute; inset: 0;
display: grid; place-items: center;
color: rgba(247,244,251,0.6);
font-family: var(--f-mono);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.p-lifestyle__copy .eyebrow { color: var(--ghm-clinical-700); margin-bottom: 14px; }
.p-lifestyle__copy .eyebrow::before { background: var(--ghm-clinical-500); }
.p-lifestyle__copy .section-title {
margin: 0 0 18px;
font-family: var(--f-display);
font-weight: 400;
letter-spacing: -0.02em;
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1.05;
color: var(--ghm-text-dark);
}
.p-lifestyle__copy .section-title em {
font-style: italic;
color: var(--ghm-purple-700);
}
.p-lifestyle__copy .lead {
color: var(--ghm-text-body);
max-width: 52ch;
margin: 0;
font-size: var(--fs-lead);
line-height: 1.55;
}
/* ---- Clinical quote ---- */
.p-quote {
background: var(--ghm-lavender);
padding: clamp(70px, 9vw, 120px) 0;
}
.p-quote figure {
max-width: 880px;
margin: 0 auto;
text-align: center;
position: relative;
}
.p-quote blockquote {
font-family: var(--f-display);
font-size: clamp(1.6rem, 2.6vw, 2.3rem);
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--ghm-text-dark);
margin: 0 0 32px;
position: relative;
padding: 0 20px;
}
.p-quote blockquote .mark {
font-family: var(--f-display);
font-size: 5rem;
color: var(--ghm-purple-300);
position: absolute;
top: -40px;
left: -10px;
line-height: 1;
}
.p-quote figcaption {
display: flex;
flex-direction: column;
gap: 2px;
}
.p-quote figcaption strong {
font-size: 1rem;
color: var(--ghm-text-dark);
font-weight: 700;
}
.p-quote figcaption span {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ghm-text-meta);
}
/* ---- Related products ---- */
.p-related {
background: var(--ghm-paper);
padding: clamp(70px, 9vw, 130px) 0;
}
.p-related .section-head { margin-bottom: 50px; max-width: 640px; }
.p-related__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1100px) { .p-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .p-related__grid { grid-template-columns: 1fr; } }
/* ---- Product CTA ---- */
.p-cta {
background: var(--g-hero-dark);
color: var(--ghm-text-invert);
padding: clamp(70px, 9vw, 130px) 0;
position: relative;
overflow: hidden;
}
.p-cta::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(45% 60% at 20% 30%, rgba(30,138,155,0.14) 0%, transparent 60%),
radial-gradient(50% 60% at 85% 75%, rgba(138,63,252,0.22) 0%, transparent 65%);
pointer-events: none;
}
.p-cta__grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(40px, 6vw, 90px);
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 900px) { .p-cta__grid { grid-template-columns: 1fr; } }
.p-cta .eyebrow { margin-bottom: 22px; }
.p-cta .section-title { margin-bottom: 22px; font-family: var(--f-display); font-weight: 400; letter-spacing: -0.02em; font-size: clamp(1.9rem, 7vw, 3.4rem); line-height: 1.04; word-wrap: break-word; overflow-wrap: break-word; }
.p-cta .lead { margin: 0; }
.p-cta__panel {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(199,164,255,0.18);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: var(--r-xl);
padding: 32px;
display: flex;
flex-direction: column;
gap: 18px;
}
.cta-line {
display: grid;
grid-template-columns: 140px 1fr;
gap: 14px;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid var(--ghm-rule-dark);
}
.cta-line:nth-last-of-type(1) { border-bottom: none; }
.cta-line .k {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ghm-purple-300);
}
.cta-line a {
color: var(--ghm-text-invert);
font-size: 1rem;
font-weight: 600;
border-bottom: 1px solid rgba(199,164,255,0.4);
padding-bottom: 2px;
width: fit-content;
transition: border-color var(--t-fast), color var(--t-fast);
}
.cta-line a:hover {
color: var(--ghm-clinical-300);
border-color: var(--ghm-clinical-300);
}
@media (max-width: 720px) {
.p-cta__panel { padding: 22px; }
.cta-line {
grid-template-columns: 1fr;
gap: 4px;
padding: 12px 0;
align-items: start;
}
.cta-line a { font-size: 0.95rem; word-break: break-all; }
}
.btn--block { width: 100%; justify-content: center; margin-top: 10px; }
/* -------------------------------------------------------------
W2-3 · PREMIUM HOVER STATES
Subtle, cinematic polish layer on top of base hover rules.
All interactions respect prefers-reduced-motion.
------------------------------------------------------------- */
/* Buttons — tighter chevron glide + barely-there scale punctuation */
.btn-primary { transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-med), border-color var(--t-fast); }
.btn-primary:hover .chev { transform: translateX(4px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 8px 18px rgba(94,57,144,0.28); }
.btn-outline { transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med); }
.btn-outline:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(30,34,47,0.18); }
.btn-outline:active { transform: translateY(0); }
.btn-ghost-light { transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med); }
.btn-ghost-light:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
/* Product cards — refined elevation with purple-tinted aura */
.prod-card { transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); }
.prod-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 48px rgba(94,57,144,0.18), 0 4px 12px rgba(30,34,47,0.08);
border-color: rgba(199,164,255,0.38);
}
.prod-card:hover .fig img { transform: scale(1.06); }
.prod-card .fig img { transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
/* Category & benefit cards — matching elevation vocabulary */
.cat-card, .bf-card, .news-card { transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); }
.cat-card:hover { border-color: rgba(199,164,255,0.32); box-shadow: 0 20px 44px rgba(94,57,144,0.14), 0 4px 10px rgba(30,34,47,0.06); }
.bf-card:hover { border-color: rgba(199,164,255,0.28); box-shadow: 0 20px 44px rgba(94,57,144,0.14), 0 4px 10px rgba(30,34,47,0.06); }
.news-card:hover { border-color: rgba(199,164,255,0.32); box-shadow: 0 20px 44px rgba(94,57,144,0.14), 0 4px 10px rgba(30,34,47,0.06); }
/* Condition cards — maintain purple hover accent on scene zoom */
.cond-card { transition: transform var(--t-med), box-shadow var(--t-med); }
.cond-card:hover { box-shadow: 0 18px 40px rgba(94,57,144,0.14); }
/* Top-bar utility links — underline sweep reveal */
.top-bar a {
position: relative;
padding-bottom: 2px;
transition: color var(--t-fast);
}
.top-bar a::after {
content: ""; position: absolute;
left: 0; right: 100%; bottom: 0;
height: 1px;
background: var(--ghm-paper);
transition: right var(--t-med);
}
.top-bar a:hover::after { right: 0; }
/* Footer links — underline sweep reveal from left */
.foot__col a, .foot__brand .contact a {
position: relative;
padding-bottom: 1px;
transition: color var(--t-fast);
}
.foot__col a::after, .foot__brand .contact a::after {
content: ""; position: absolute;
left: 0; right: 100%; bottom: -1px;
height: 1px;
background: var(--ghm-paper);
transition: right var(--t-med);
}
.foot__col a:hover::after, .foot__brand .contact a:hover::after { right: 0; }
/* Legal / privacy body links — subtle underline polish */
.legal-body a {
transition: color var(--t-fast), border-color var(--t-fast);
}
/* Breadcrumb links — chevron slide */
.crumbs a {
position: relative;
transition: color var(--t-fast), transform var(--t-fast);
}
/* Box / info items — subtle lift */
.box-item { transition: transform var(--t-fast), box-shadow var(--t-med), border-color var(--t-fast); }
.box-item:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(30,34,47,0.08);
}
/* Hero dots — scale punctuation */
.hero__dots button { transition: transform var(--t-fast); }
.hero__dots button:hover { transform: scale(1.12); }
/* Skip-link — strong focus state */
.skip-link:focus-visible {
box-shadow: 0 0 0 3px var(--ghm-purple-300), 0 12px 28px rgba(94,57,144,0.32);
}
/* Global focus polish — unified purple ring on all focusable */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--ghm-purple-600);
outline-offset: 3px;
border-radius: 4px;
}
/* Reduce motion — kill the extra movement, keep the color */
@media (prefers-reduced-motion: reduce) {
.prod-card:hover,
.cat-card:hover,
.bf-card:hover,
.news-card:hover,
.cond-card:hover,
.box-item:hover,
.btn-primary:hover,
.btn-outline:hover,
.hero__dots button:hover {
transform: none;
}
.prod-card:hover .fig img,
.news-card:hover .fig img,
.cond-card:hover .scene,
.bf-card:hover .scene {
transform: none;
}
}
/* -------------------------------------------------------------
W2-4 · TYPOGRAPHY REFINEMENT
Vertical rhythm, optical sizing, serif italic voice, numerals.
------------------------------------------------------------- */
/* Body — better measure + subtle kerning */
body {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
text-rendering: optimizeLegibility;
}
/* Headings — balanced wrap + optical sizing for variable fonts */
h1, h2, h3, h4,
.display, .section-title {
text-wrap: balance;
font-optical-sizing: auto;
}
/* Paragraphs — prevent orphans on the final line */
p, .lead { text-wrap: pretty; }
/* Lead copy — restrained measure for readability */
.lead { max-width: 62ch; }
/* Italic voice — Instrument Serif italics get extra air */
.display em,
.section-title em,
.section-title-left em {
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
padding-inline-end: 0.02em;
}
/* Drop-cap flourish on editorial lead — optional luxury detail */
.lead--dropcap::first-letter {
font-family: var(--f-display);
font-weight: 400;
font-size: 3.2em;
line-height: 0.85;
float: left;
margin: 0.06em 0.12em 0 -0.04em;
color: var(--ghm-purple-700);
}
/* Numerals — lining + tabular for specs, stats, prices, dates */
.spec, .spec-row, .stat, .stats,
.foot__brand .contact,
.cta-line .k,
.nav__cta,
time, .time, .date,
[data-numeric] {
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Product specs + pricing — strict tabular rhythm */
.prod-card .meta,
.prod-card .price,
.spec-grid,
.cat-card .meta {
font-variant-numeric: tabular-nums;
}
/* Small caps for eyebrows — OpenType variant if available */
.eyebrow {
font-variant-caps: normal;
font-feature-settings: "kern" 1, "ss01" 1;
}
/* Mono family — disable ligatures for spec clarity */
.cta-line .k,
[class*="mono"],
pre, code, kbd, samp {
font-family: var(--f-mono);
font-feature-settings: "liga" 0, "calt" 0;
font-variant-ligatures: none;
}
/* Arabic / Latin mixing — improve line-height when any RTL glyph appears */
:lang(ar), [dir="rtl"] {
line-height: 1.75;
letter-spacing: 0;
}
/* Section-level vertical rhythm — baseline spacing tokens */
section > .container > .eyebrow,
section > .container > .eyebrow--center {
margin-bottom: 14px;
}
section > .container > .section-title + .section-sub,
section > .container > .section-title + .lead {
margin-top: 14px;
}
/* Hero display — tighten tracking at large sizes (optical compensation) */
@media (min-width: 900px) {
.display { letter-spacing: -0.032em; }
.section-title { letter-spacing: -0.026em; }
}
/* Prevent hyphen-break on luxury headlines */
.display, .section-title, .hero__title, h1, h2 {
hyphens: manual;
-webkit-hyphens: manual;
}
/* Body copy — prevent widow/orphan awkwardness on marketing prose */
.prose p,
.legal-body p,
.section-sub {
text-wrap: pretty;
hyphens: auto;
}
/* -------------------------------------------------------------
W2-5 · MESH GRADIENT + FRACTAL NOISE
Subtle textured depth on key surfaces. Noise is SVG data-URI so
it inlines without a network request. Opacity kept very low —
you should feel it, not see it.
------------------------------------------------------------- */
/* Reusable fractal-noise class — apply to any element as an overlay */
:root {
/* Single inline SVG noise tile. feTurbulence fractal noise, stitched. */
--noise: url("data:image/svg+xml;utf8,");
}
/* Utility overlay — place after a background to add texture */
.has-noise { position: relative; isolation: isolate; }
.has-noise::before {
content: "";
position: absolute; inset: 0;
background-image: var(--noise);
background-size: 240px 240px;
opacity: 0.06;
mix-blend-mode: soft-light;
pointer-events: none;
z-index: 1;
}
.has-noise > * { position: relative; z-index: 2; }
/* Hero — upgrade to multi-point mesh + noise */
.hero::after {
/* Replace the single bottom-left blob with a richer mesh gradient.
Original was a solid circle; this adds depth across the surface. */
background:
radial-gradient(40% 50% at 18% 82%, rgba(199,164,255,0.55) 0%, rgba(199,164,255,0) 70%),
radial-gradient(30% 40% at 82% 68%, rgba(247,233,255,0.45) 0%, rgba(247,233,255,0) 70%),
radial-gradient(35% 45% at 55% 92%, rgba(166,115,255,0.30) 0%, rgba(166,115,255,0) 70%);
width: 100%;
height: 100%;
left: 0;
bottom: 0;
top: auto;
filter: blur(60px);
opacity: 0.9;
}
.hero {
background:
var(--noise),
var(--g-hero);
background-size: 240px 240px, auto;
background-blend-mode: soft-light, normal;
}
/* Film hero (dark) — darker noise feel for cinema depth */
.hero__slide--film::after {
content: "";
position: absolute; inset: 0;
background-image: var(--noise);
background-size: 200px 200px;
opacity: 0.14;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
}
/* Dark sections — signal strip, footer, dark CTA — subtle grain */
.foot,
.signal-strip,
.cta-band,
[class*="--dark"] {
position: relative;
}
.foot::before,
.signal-strip::before,
.cta-band::before {
content: "";
position: absolute; inset: 0;
background-image: var(--noise);
background-size: 220px 220px;
opacity: 0.08;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 0;
}
.foot > *,
.signal-strip > *,
.cta-band > * { position: relative; z-index: 1; }
/* Reduce on low-power / reduced-motion — drop noise to avoid repaint cost */
@media (prefers-reduced-motion: reduce) {
.hero,
.hero__slide--film::after,
.foot::before,
.signal-strip::before,
.cta-band::before,
.has-noise::before {
background-image: none;
}
}
/* -------------------------------------------------------------
W2-6 · CUSTOM CURSOR (desktop + fine pointer only)
Two-part cursor: 6px dot (exact position) + 40px ring (lerp-lag).
Activated only when JS adds .has-custom-cursor to .
Skipped entirely on touch / coarse pointers.
------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor [role="button"] {
cursor: none;
}
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select,
html.has-custom-cursor [contenteditable="true"] {
cursor: text;
}
.cursor {
pointer-events: none;
position: fixed;
left: 0; top: 0;
z-index: 10000;
will-change: transform;
mix-blend-mode: difference;
}
.cursor__dot {
width: 6px; height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: #ffffff;
}
.cursor__ring {
width: 40px; height: 40px;
margin: -20px 0 0 -20px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.8);
transition:
width 220ms cubic-bezier(0.22, 1, 0.36, 1),
height 220ms cubic-bezier(0.22, 1, 0.36, 1),
margin 220ms cubic-bezier(0.22, 1, 0.36, 1),
background 220ms ease,
border-color 220ms ease;
}
/* Grow ring on interactive hover */
.cursor.is-link .cursor__ring {
width: 60px; height: 60px;
margin: -30px 0 0 -30px;
border-color: rgba(199,164,255,1);
background: rgba(199,164,255,0.12);
}
/* Click pulse */
.cursor.is-pressed .cursor__ring {
width: 30px; height: 30px;
margin: -15px 0 0 -15px;
}
/* Hide until JS positions it */
.cursor { opacity: 0; transition: opacity 240ms ease; }
.cursor.is-ready { opacity: 1; }
}
/* Coarse pointer / touch / reduced motion — do nothing, keep native cursor */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button { cursor: auto; }
.cursor { display: none !important; }
}
/* -------------------------------------------------------------
W2-7 · ERROR PAGES (404 / 500)
Cinematic, calm, on-brand. Big serif italic figure, clean CTA row.
------------------------------------------------------------- */
.page--error { background: var(--ghm-paper); }
.error-shell {
min-height: calc(100vh - 220px);
display: flex;
align-items: center;
padding-block: clamp(80px, 14vw, 160px);
position: relative;
background:
radial-gradient(60% 80% at 15% 15%, rgba(199,164,255,0.18) 0%, rgba(199,164,255,0) 60%),
radial-gradient(50% 70% at 85% 85%, rgba(247,233,255,0.35) 0%, rgba(247,233,255,0) 60%),
var(--ghm-paper);
}
.error-shell::before {
content: "";
position: absolute; inset: 0;
background-image: var(--noise);
background-size: 240px 240px;
opacity: 0.04;
mix-blend-mode: soft-light;
pointer-events: none;
z-index: 0;
}
.error-hero {
position: relative;
z-index: 1;
text-align: center;
max-width: 800px;
}
.error-figure {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
}
.error-code {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(8rem, 22vw, 16rem);
line-height: 0.86;
letter-spacing: -0.05em;
color: var(--ghm-text-dark);
background: linear-gradient(180deg, var(--ghm-purple-700) 0%, var(--ghm-text-dark) 70%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 20px 40px rgba(94,57,144,0.16);
}
.error-flatline {
position: absolute;
left: 50%;
bottom: 8%;
width: 70%;
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent 0%, var(--ghm-purple-300) 30%, var(--ghm-purple-600) 50%, var(--ghm-purple-300) 70%, transparent 100%);
opacity: 0.6;
}
.error-title {
font-size: clamp(2rem, 4.4vw, 3.4rem);
margin: 8px auto 16px;
max-width: 22ch;
}
.error-lead {
margin: 0 auto 36px;
max-width: 56ch;
color: var(--ghm-text-muted);
}
.error-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 56px;
}
.error-sub {
border-top: 1px solid var(--ghm-rule-light);
padding-top: 24px;
display: grid;
gap: 14px;
}
.error-kicker {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ghm-text-muted);
}
.error-links {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.error-links a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--ghm-rule-light);
border-radius: var(--r-pill);
font-size: 0.9rem;
font-weight: 500;
color: var(--ghm-text-dark);
transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.error-links a:hover {
border-color: var(--ghm-purple-400);
background: rgba(199,164,255,0.12);
color: var(--ghm-purple-700);
}
@media (max-width: 640px) {
.error-actions { flex-direction: column; gap: 10px; }
.error-actions .btn { width: 100%; justify-content: center; }
}
/* -------------------------------------------------------------
W2-8 · FOOTER NEWSLETTER + SOCIAL BAND
Sits between .foot__top and .foot__sub. Three-column on desktop.
------------------------------------------------------------- */
.foot__band {
margin-top: 40px;
padding: 32px 0;
border-top: 1px solid var(--ghm-rule-dark);
border-bottom: 1px solid var(--ghm-rule-dark);
display: grid;
grid-template-columns: 1.2fr 1.4fr auto;
gap: 32px 40px;
align-items: center;
}
.foot__band-copy .eyebrow { margin-bottom: 10px; }
.foot__band-title {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(1.3rem, 2vw, 1.7rem);
line-height: 1.12;
letter-spacing: -0.018em;
color: var(--ghm-paper);
margin: 0 0 6px;
}
.foot__band-title em {
font-style: italic;
color: var(--ghm-purple-300);
}
.foot__band-sub {
color: var(--ghm-text-invert-muted);
font-size: 0.92rem;
line-height: 1.55;
margin: 0;
max-width: 42ch;
}
.foot__form {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.foot__form input[type="email"] {
width: 100%;
min-height: 48px;
padding: 12px 16px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.16);
border-radius: var(--r-pill);
color: var(--ghm-paper);
font-family: inherit;
font-size: 0.95rem;
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.foot__form input[type="email"]::placeholder { color: rgba(255,255,255,0.42); }
.foot__form input[type="email"]:focus-visible {
outline: none;
border-color: var(--ghm-purple-300);
background: rgba(255,255,255,0.10);
box-shadow: 0 0 0 3px rgba(199,164,255,0.18);
}
.foot__form .btn { min-height: 48px; padding: 12px 22px; }
.foot__form-status {
grid-column: 1 / -1;
margin: 4px 0 0;
font-size: 0.85rem;
color: var(--ghm-purple-300);
min-height: 1em;
}
.foot__form-status.is-error { color: #ff9aa2; }
.foot__form-status.is-success { color: var(--ghm-purple-300); }
.foot__form-note {
grid-column: 1 / -1;
margin: 2px 0 0;
font-size: 0.78rem;
color: var(--ghm-text-invert-muted);
}
.foot__form-note a {
color: var(--ghm-text-invert-muted);
text-decoration: underline;
text-decoration-color: rgba(255,255,255,0.25);
text-underline-offset: 3px;
}
.foot__form-note a:hover { color: var(--ghm-paper); }
.foot__social {
display: flex;
align-items: center;
gap: 14px;
justify-self: end;
}
.foot__social-label {
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ghm-text-invert-muted);
}
.foot__social-list {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.foot__social-list a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.04);
color: var(--ghm-paper);
transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.foot__social-list a:hover {
transform: translateY(-2px);
border-color: var(--ghm-purple-300);
background: rgba(199,164,255,0.14);
color: var(--ghm-purple-200);
}
.foot__social-list a:focus-visible {
outline: 2px solid var(--ghm-purple-300);
outline-offset: 3px;
}
@media (max-width: 1024px) {
.foot__band {
grid-template-columns: 1fr;
gap: 22px;
padding: 28px 0;
}
.foot__social { justify-self: start; }
}
@media (max-width: 560px) {
.foot__form { grid-template-columns: 1fr; }
.foot__form .btn { width: 100%; justify-content: center; }
}
/* -------------------------------------------------------------
W2-9 · LOADING SKELETONS (product images)
Shimmer placeholder on .fig containers until ![]()
loads.
JS adds .is-loaded class; CSS fades skeleton.
------------------------------------------------------------- */
.fig {
position: relative;
overflow: hidden;
}
.fig::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
100deg,
rgba(246, 240, 255, 0) 20%,
rgba(246, 240, 255, 0.55) 48%,
rgba(246, 240, 255, 0) 76%
),
linear-gradient(
180deg,
rgba(94, 57, 144, 0.04) 0%,
rgba(94, 57, 144, 0.10) 100%
);
background-size: 200% 100%, 100% 100%;
background-position: 150% 0, 0 0;
animation: skeleton-shimmer 1.6s linear infinite;
opacity: 1;
transition: opacity 420ms ease;
pointer-events: none;
z-index: 1;
}
.fig.is-loaded::before {
opacity: 0;
animation: none;
}
/* When skeleton is done — remove from paint cost entirely */
.fig.is-loaded-final::before {
display: none;
}
.fig > picture,
.fig > img {
position: relative;
z-index: 2;
opacity: 0;
transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fig.is-loaded > picture,
.fig.is-loaded > img {
opacity: 1;
}
@keyframes skeleton-shimmer {
0% { background-position: 150% 0, 0 0; }
100% { background-position: -50% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.fig::before {
animation: none;
background:
linear-gradient(180deg, rgba(94,57,144,0.04) 0%, rgba(94,57,144,0.08) 100%);
}
.fig > picture,
.fig > img { transition: none; }
}
/* -------------------------------------------------------------
W2-10 · DARK MODE — DISABLED (brand identity = cream/bone)
The GHM identity is warm cream/bone. We do NOT auto-flip based
on the visitor's OS preference — that would break brand
consistency for every user in dark mode.
Left in place (dormant) for future opt-in toggle only.
------------------------------------------------------------- */
/* Force light color-scheme — native form controls + scrollbars stay warm */
:root { color-scheme: light; }
/* -------------------------------------------------------------
W2-11 · VIEW TRANSITIONS API
Cross-document (MPA) view transitions on same-origin navigation.
Named transitions morph shared elements (nav, hero product).
Falls back silently in unsupported browsers.
------------------------------------------------------------- */
/* Opt the whole site into cross-document view transitions */
@view-transition { navigation: auto; }
/* Base — a gentle cross-fade for everything else */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 420ms;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) {
animation-name: ghm-fade-out;
}
::view-transition-new(root) {
animation-name: ghm-fade-in;
}
@keyframes ghm-fade-out {
to { opacity: 0; transform: scale(0.995); }
}
@keyframes ghm-fade-in {
from { opacity: 0; transform: scale(1.005); }
}
/* Named shared-element transitions — the nav brand and the hero
product stay anchored between pages, everything else fades. */
.nav__brand { view-transition-name: ghm-brand; }
.hero__media--still img,
.prod__hero img { view-transition-name: ghm-hero-product; }
.scroll-progress { view-transition-name: ghm-progress; }
.foot { view-transition-name: ghm-foot; }
/* Tailor the named transitions */
::view-transition-old(ghm-brand),
::view-transition-new(ghm-brand),
::view-transition-old(ghm-hero-product),
::view-transition-new(ghm-hero-product),
::view-transition-old(ghm-foot),
::view-transition-new(ghm-foot) {
animation-duration: 520ms;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
mix-blend-mode: normal;
}
/* Disable completely on reduced motion or unsupported browsers */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(ghm-brand),
::view-transition-new(ghm-brand),
::view-transition-old(ghm-hero-product),
::view-transition-new(ghm-hero-product) {
animation-duration: 1ms !important;
animation-name: none !important;
}
}
/* -------------------------------------------------------------
W2-12 · SCROLL-STITCHED HERO ROTATION
The hero product subtly rotates + scales + parallax-drifts as you
scroll through the hero section — a cinematic "turn in the studio".
Primary path: CSS scroll-driven animation (animation-timeline).
Fallback: JS sets --hero-progress on the hero element (0 → 1).
------------------------------------------------------------- */
.hero { view-timeline-name: --hero; view-timeline-axis: block; }
.hero__product picture,
.hero__product > img {
will-change: transform;
transform-style: preserve-3d;
/* Fallback uses --hero-progress (0 → 1 across hero scroll) */
transform:
perspective(1200px)
rotateY(calc((var(--hero-progress, 0) - 0.5) * 14deg))
rotateX(calc((var(--hero-progress, 0) - 0.5) * -4deg))
translateY(calc((var(--hero-progress, 0) - 0.5) * -28px))
scale(calc(1 + (var(--hero-progress, 0) - 0.5) * 0.04));
transform-origin: 50% 55%;
transition: transform 120ms linear;
}
/* Modern browsers — drive it from scroll-timeline for buttery 60fps */
@supports (animation-timeline: scroll()) {
.hero__product picture,
.hero__product > img {
animation: ghm-hero-spin linear both;
animation-timeline: --hero;
animation-range: entry 0% exit 100%;
transition: none;
}
@keyframes ghm-hero-spin {
0% {
transform:
perspective(1200px)
rotateY(-7deg)
rotateX(2deg)
translateY(14px)
scale(0.98);
}
50% {
transform:
perspective(1200px)
rotateY(0deg)
rotateX(0deg)
translateY(0)
scale(1);
}
100% {
transform:
perspective(1200px)
rotateY(7deg)
rotateX(-2deg)
translateY(-14px)
scale(1.02);
}
}
}
/* Specsheets drift on scroll — opposite direction for parallax depth */
.specsheet {
transform: translateY(calc((var(--hero-progress, 0) - 0.5) * 18px));
transition: transform 120ms linear;
}
.specsheet--a {
transform:
translateY(calc((var(--hero-progress, 0) - 0.5) * 22px))
translateX(calc((var(--hero-progress, 0) - 0.5) * -8px));
}
.specsheet--b {
transform:
translateY(calc((var(--hero-progress, 0) - 0.5) * -22px))
translateX(calc((var(--hero-progress, 0) - 0.5) * 8px));
}
@supports (animation-timeline: scroll()) {
.specsheet--a {
animation: ghm-spec-a linear both;
animation-timeline: --hero;
animation-range: entry 0% exit 100%;
transition: none;
}
.specsheet--b {
animation: ghm-spec-b linear both;
animation-timeline: --hero;
animation-range: entry 0% exit 100%;
transition: none;
}
@keyframes ghm-spec-a {
0% { transform: translateY(-8px) translateX(4px); }
100% { transform: translateY(14px) translateX(-4px); }
}
@keyframes ghm-spec-b {
0% { transform: translateY(14px) translateX(-4px); }
100% { transform: translateY(-14px) translateX(4px); }
}
}
/* Reduced motion — kill all hero rotation */
@media (prefers-reduced-motion: reduce) {
.hero__product picture,
.hero__product > img,
.specsheet,
.specsheet--a,
.specsheet--b {
animation: none !important;
transform: none !important;
transition: none !important;
}
}
/* ==================================================================== */
/* TIER MATRIX — PSG Pro 4-tier comparison table */
/* ==================================================================== */
.tier-matrix {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-family: 'Manrope', sans-serif;
background: var(--ghm-paper);
border: 1px solid var(--ghm-rule-light);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 1px 0 rgba(27,20,40,0.02),
0 20px 60px -30px rgba(94,57,144,0.18);
}
.tier-matrix thead th {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ghm-text-muted);
padding: 1rem 1.1rem;
text-align: center;
background: var(--ghm-bone);
border-bottom: 1px solid var(--ghm-rule-light);
}
.tier-matrix thead th:first-child {
text-align: left;
color: var(--ghm-text-dark);
}
.tier-matrix tbody td {
font-size: 0.9rem;
font-weight: 500;
color: var(--ghm-text-dark);
padding: 0.85rem 1.1rem;
text-align: center;
border-bottom: 1px solid var(--ghm-rule-hair);
font-variant-numeric: tabular-nums;
}
.tier-matrix tbody td:first-child {
text-align: left;
font-weight: 600;
color: var(--ghm-text-body);
letter-spacing: -0.005em;
}
.tier-matrix tbody tr:last-child td {
border-bottom: 0;
}
.tier-matrix tbody tr:nth-child(even) td {
background: linear-gradient(180deg, rgba(246,240,255,0) 0%, rgba(246,240,255,0.5) 100%);
}
.tier-matrix tbody td:nth-child(5) {
background: linear-gradient(180deg, rgba(94,57,144,0.04) 0%, rgba(94,57,144,0.08) 100%);
color: var(--ghm-purple-700);
font-weight: 700;
}
@media (max-width: 780px) {
.tier-matrix {
font-size: 0.82rem;
}
.tier-matrix thead th,
.tier-matrix tbody td {
padding: 0.7rem 0.55rem;
}
}
/* ==================================================================== */
/* MASKS COLLECTION PAGE */
/* ==================================================================== */
/* Collection hero — same DNA as p-hero but without spec list */
.collection-hero {
padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
background:
radial-gradient(60% 60% at 80% 20%, rgba(199,164,255,0.22), transparent 70%),
radial-gradient(50% 50% at 10% 80%, rgba(123,195,207,0.18), transparent 75%),
var(--ghm-bone);
position: relative;
overflow: hidden;
}
.collection-hero::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--ghm-rule-light), transparent);
}
.collection-hero__grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.collection-hero__copy .p-hero__lead {
max-width: 48ch;
}
.collection-hero__meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 2rem;
padding-top: 1.75rem;
border-top: 1px solid var(--ghm-rule-soft);
}
.collection-hero__meta > div {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.collection-hero__meta .k {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ghm-text-muted);
}
.collection-hero__meta .v {
font-family: 'Instrument Serif', serif;
font-size: 1.35rem;
font-weight: 400;
color: var(--ghm-text-dark);
letter-spacing: -0.015em;
}
.collection-hero__stage {
position: relative;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.collection-hero__stage .p-hero__img,
.collection-hero__stage img {
position: relative;
z-index: 2;
width: 80%;
max-width: 440px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 30px 60px rgba(94,57,144,0.28));
}
@media (max-width: 900px) {
.collection-hero__grid {
grid-template-columns: 1fr;
}
.collection-hero__meta {
grid-template-columns: repeat(2, 1fr);
}
}
/* Masks grid section */
.masks-grid-section {
padding: clamp(3rem, 6vw, 5rem) 0;
background: var(--ghm-paper);
}
.masks-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1.25rem, 2.5vw, 2rem);
margin-top: 2rem;
}
@media (max-width: 820px) {
.masks-grid {
grid-template-columns: 1fr;
}
}
.mask-card {
display: grid;
grid-template-columns: 38% 1fr;
background: var(--ghm-paper);
border: 1px solid var(--ghm-rule-light);
border-radius: 22px;
overflow: hidden;
transition:
transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 300ms ease;
}
.mask-card:hover {
transform: translateY(-6px);
border-color: var(--ghm-purple-200);
box-shadow:
0 1px 0 rgba(27,20,40,0.02),
0 30px 70px -25px rgba(94,57,144,0.28);
}
.mask-card__fig {
position: relative;
background:
radial-gradient(80% 60% at 50% 40%, rgba(246,240,255,0.8), transparent 70%),
linear-gradient(180deg, var(--ghm-cream) 0%, var(--ghm-bone) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
min-height: 280px;
border-right: 1px solid var(--ghm-rule-soft);
}
.mask-card__fig picture,
.mask-card__fig img {
width: 100%;
height: 100%;
max-height: 240px;
object-fit: contain;
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mask-card:hover .mask-card__fig img {
transform: scale(1.04);
}
.mask-card__tag {
position: absolute;
top: 0.9rem;
left: 0.9rem;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgba(255,255,255,0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--ghm-purple-700);
border: 1px solid var(--ghm-rule-light);
}
.mask-card__body {
padding: 1.5rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.mask-card__sku {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--ghm-purple-700);
padding: 0.25rem 0.6rem;
border: 1px solid var(--ghm-purple-200);
border-radius: 999px;
background: var(--ghm-purple-50);
align-self: flex-start;
}
.mask-card__body h3 {
font-family: 'Instrument Serif', serif;
font-size: clamp(1.4rem, 2vw, 1.75rem);
font-weight: 400;
letter-spacing: -0.015em;
color: var(--ghm-text-dark);
margin: 0;
line-height: 1.1;
}
.mask-card__body > p {
font-size: 0.92rem;
line-height: 1.55;
color: var(--ghm-text-body);
margin: 0;
text-wrap: pretty;
}
.mask-card__specs {
list-style: none;
padding: 0;
margin: 0.25rem 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 1rem;
}
.mask-card__specs li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.82rem;
color: var(--ghm-text-body);
line-height: 1.4;
}
.mask-card__specs li > span {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
color: var(--ghm-text-meta);
flex-shrink: 0;
padding-top: 0.08rem;
}
.mask-card__foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0.9rem;
margin-top: auto;
border-top: 1px solid var(--ghm-rule-soft);
}
.mask-card__sizes {
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
font-weight: 500;
color: var(--ghm-text-muted);
letter-spacing: 0.04em;
}
.mask-card__foot .link {
font-size: 0.88rem;
font-weight: 600;
color: var(--ghm-purple-700);
text-decoration: none;
transition: color 200ms ease, transform 200ms ease;
}
.mask-card__foot .link:hover {
color: var(--ghm-purple-500);
transform: translateX(2px);
}
@media (max-width: 640px) {
.mask-card {
grid-template-columns: 1fr;
}
.mask-card__fig {
border-right: 0;
border-bottom: 1px solid var(--ghm-rule-soft);
min-height: 220px;
}
.mask-card__specs {
grid-template-columns: 1fr;
}
}