/* ==========================================================================
Gen Art Health — stylesheet
Design tokens, layout, components, motion, responsive rules and RTL.
========================================================================== */
/* ---------- Tokens ---------- */
:root{
/* Brand palette — lightened/cleaned so the page reads as soft ivory rather
than a dense beige; accent hues (sage/sand/gold) are unchanged, just used
more sparingly against the lighter neutrals. */
--bone:#FAF9F5;
--cream:#F3EFE7;
--ink:#101C24;
--sage:#9DB6A7;
--sage-light:#E4EDE8;
--sand:#D9C3A5;
--gold:#B9986C;
--ink-soft: rgba(16,28,36,.68);
--ink-faint: rgba(16,28,36,.48);
--hairline: rgba(16,28,36,.09);
--hairline-light: rgba(247,245,240,.22);
--font-display:'DM Serif Display', 'Georgia', serif;
--font-body:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
--font-ar:'IBM Plex Sans Arabic', 'Manrope', sans-serif;
--fs-h1: clamp(2.5rem, 5.4vw, 4.4rem);
--fs-h2: clamp(1.9rem, 3.6vw, 2.9rem);
--fs-h3: clamp(1.15rem, 1.6vw, 1.4rem);
--fs-lead: clamp(1.05rem, 1.4vw, 1.2rem);
--fs-body: 1rem;
--fs-small: .875rem;
--fs-eyebrow: .78rem;
--sp-1:.5rem; --sp-2:.75rem; --sp-3:1.25rem; --sp-4:1.75rem;
--sp-5:2.5rem; --sp-6:3.5rem; --sp-7:5rem; --sp-8:7rem; --sp-9:9rem;
/* Tightened ~22% from the original clamp(4.5rem, 9vw, 8.5rem) — same section
rhythm, less dead air between sections at every viewport. */
--section-pad: clamp(3.75rem, 7.5vw, 6.5rem);
--container: 1240px;
--container-narrow: 800px;
--radius-s: 10px;
--radius-m: 18px;
--radius-l: 28px;
--radius-full: 999px;
--ease: cubic-bezier(.22,.61,.36,1);
--dur-fast: .35s;
--dur-med: .6s;
--shadow-soft: 0 20px 45px -24px rgba(16,28,36,.32), 0 10px 24px -14px rgba(185,152,108,.28);
--shadow-card: 0 1px 0 rgba(16,28,36,.05), 0 16px 40px -28px rgba(16,28,36,.35);
--header-h: 88px;
/* Shared fine-grain noise texture, reused across the body overlay and the
hero/about reference art layers so the SVG data URI isn't duplicated. */
--noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 640px){
:root{ --header-h: 68px; }
}
/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
font-family:var(--font-body);
background:var(--bone);
color:var(--ink);
font-size:var(--fs-body);
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
html[lang="ar"] body{ font-family:var(--font-ar); }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
input,textarea,select{ font:inherit; color:inherit; }
svg{ display:block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.12; letter-spacing:-.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{ font-family:var(--font-ar); font-weight:700; letter-spacing:0; }
/* Focus visibility */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
/* Skip link */
.skip-link{
position:fixed; top:-60px; left:1rem; z-index:1000;
background:var(--ink); color:var(--bone); padding:.8rem 1.4rem;
border-radius:var(--radius-s); transition:top .25s var(--ease);
}
.skip-link:focus{ top:1rem; }
/* Grain overlay */
body::before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:2;
opacity:.03; mix-blend-mode:overlay;
background-image:var(--noise-svg);
}
/* ---------- Layout helpers ---------- */
.section{ padding-block:var(--section-pad); position:relative; }
.section__inner{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 3rem); }
.section__inner--narrow{ max-width:var(--container-narrow); }
.eyebrow{
display:inline-block; font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-3);
}
.section__title{ font-size:var(--fs-h2); max-width:26ch; margin-bottom:var(--sp-4); }
.section__title--center{ max-width:34ch; margin-inline:auto; text-align:center; }
.section__desc{ max-width:52ch; color:var(--ink-soft); font-size:var(--fs-lead); margin-bottom:var(--sp-5); }
.section__note{
margin-top:var(--sp-5); max-width:60ch; margin-inline:auto; text-align:center;
font-size:var(--fs-small); color:var(--ink-faint); line-height:1.7;
}
/* Buttons */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:.95rem 1.9rem; border-radius:var(--radius-full);
font-size:var(--fs-small); font-weight:600; letter-spacing:.01em;
transition:transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
white-space:nowrap;
}
.btn--primary{ background:var(--ink); color:var(--bone); box-shadow:var(--shadow-soft); }
.btn--primary:hover{ background:#1c2e39; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--hairline); }
.btn--ghost:hover{ background:var(--cream); transform:translateY(-2px); }
.btn--small{ padding:.7rem 1.5rem; }
.link-arrow{
display:inline-flex; align-items:center; gap:.6rem; font-size:var(--fs-small); font-weight:600;
border-bottom:1px solid transparent; padding-block:.2rem;
}
.link-arrow svg{ transition:transform var(--dur-fast) var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }
html[dir="rtl"] .link-arrow:hover svg{ transform:translateX(-4px) scaleX(-1); }
html[dir="rtl"] .link-arrow svg{ transform:scaleX(-1); }
/* ==========================================================================
Media / reference art system
.media → universal skeleton (gradient wash) shown behind any photo
slot while no ![]()
is set, or while a real photo
is loading. Safe to keep forever — a loaded photo fully
covers it.
.media--reference → the richer, art-directed placeholder composition used
until real photography is supplied (hero + about have
their own variants below). Remove this ONE class — and
delete the if present —
once assets/images/.webp exists and the ![]()
's
data-src has been changed to src. See README.md.
========================================================================== */
.media{
position:relative; overflow:hidden; border-radius:var(--radius-l);
background:
radial-gradient(120% 140% at 20% 15%, rgba(217,195,165,.9), transparent 60%),
radial-gradient(130% 130% at 85% 90%, rgba(157,182,167,.75), transparent 55%),
linear-gradient(150deg, var(--cream), var(--sage-light));
}
.media::before{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, transparent 60%, rgba(16,28,36,.08));
}
.media__img{
width:100%; height:100%; object-fit:cover; opacity:0;
transition:opacity .7s var(--ease);
}
.media__img.is-loaded{ opacity:1; }
/* Reveal-up animation (scroll & load) */
.reveal-up{ opacity:0; transform:translateY(18px); }
[data-observe]{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-observe].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
.hero__title .reveal-up,
.hero__desc.reveal-up,
.hero__ctas.reveal-up,
.hero__meta.reveal-up,
.hero__content .eyebrow.reveal-up{
animation:revealUp .9s var(--ease) forwards;
animation-delay:calc(var(--d, 0) * .12s);
}
}
@keyframes revealUp{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
.reveal-up,[data-observe]{ opacity:1; transform:none; animation:none; transition:none; }
*{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
/* ==========================================================================
Header
========================================================================== */
.header{
position:fixed; inset-inline:0; top:0; z-index:200;
height:var(--header-h);
display:flex; align-items:center;
background:transparent;
border-bottom:1px solid transparent;
transition:background-color .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.header.is-scrolled{
background:rgba(247,245,240,.78);
backdrop-filter:blur(16px) saturate(160%);
-webkit-backdrop-filter:blur(16px) saturate(160%);
border-bottom:1px solid var(--hairline);
box-shadow:0 10px 30px -25px rgba(16,28,36,.4);
}
.header__inner{
width:100%; max-width:var(--container); margin-inline:auto;
padding-inline:clamp(1.25rem, 4vw, 3rem);
display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.logo{ display:flex; align-items:center; gap:.6rem; }
.logo__mark{ color:var(--gold); display:flex; }
.logo__text{ font-family:var(--font-display); font-size:1.25rem; letter-spacing:.01em; color:var(--ink); }
html[lang="ar"] .logo__text{ font-family:var(--font-ar); font-weight:700; }
.logo__text--light{ color:var(--bone); font-size:1.4rem; }
.nav__list{ display:flex; align-items:center; gap:clamp(1.1rem,2vw,2.1rem); }
.nav__link{
position:relative; font-size:var(--fs-small); font-weight:600; color:var(--ink-soft);
padding-block:.4rem; transition:color .25s var(--ease);
}
.nav__link::after{
content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
background:var(--gold); transform:scaleX(0); transform-origin:center;
transition:transform .3s var(--ease);
}
.nav__link:hover, .nav__link.is-active{ color:var(--ink); }
.nav__link.is-active::after{ transform:scaleX(1); }
.header__actions{ display:flex; align-items:center; gap:1.1rem; }
.lang-switch{ display:flex; align-items:center; border:1px solid var(--hairline); border-radius:var(--radius-full); padding:3px; }
.lang-switch__btn{
padding:.32rem .75rem; font-size:.72rem; font-weight:700; letter-spacing:.04em;
border-radius:var(--radius-full); color:var(--ink-faint); transition:all .25s var(--ease);
}
.lang-switch__btn.is-active{ background:var(--ink); color:var(--bone); }
/* Hamburger */
.hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; align-items:flex-end; }
.hamburger__bar{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:width .3s var(--ease), background-color .3s var(--ease); }
.hamburger__bar:nth-child(1){ width:26px; }
.hamburger__bar:nth-child(2){ width:26px; }
.hamburger__bar:nth-child(3){ width:16px; }
.hamburger:hover .hamburger__bar,
.hamburger:focus-visible .hamburger__bar{ width:26px; }
@media (max-width:1180px){
/* The full nav + lang switch + CTA button don't fit comfortably between ~901–1180px
(long labels like "How It Works" wrap to two lines) — switch to the hamburger earlier. */
.nav{ display:none; }
.header__cta{ display:none; }
.hamburger{ display:flex; }
}
@media (max-width:640px){
.header__inner{ padding-inline:1.1rem; gap:.6rem; }
.header__actions{ gap:.6rem; }
.logo__text{ font-size:1.05rem; }
.lang-switch__btn{ padding:.28rem .55rem; font-size:.68rem; }
.hamburger{ width:34px; }
}
@media (max-width:340px){
.logo__text{ font-size:.92rem; }
}
/* ---------- Mobile overlay menu ---------- */
.mobile-menu{
position:fixed; inset:0; z-index:400;
background:rgba(247,245,240,.9);
backdrop-filter:blur(22px) saturate(160%);
-webkit-backdrop-filter:blur(22px) saturate(160%);
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:var(--sp-5);
opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.mobile-menu[hidden]{ display:flex; }
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.mobile-menu__close{
position:absolute; top:1.4rem; inset-inline-end:1.4rem; width:44px; height:44px;
display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.mobile-menu__nav ul{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.mobile-menu__nav a{ font-family:var(--font-display); font-size:clamp(1.8rem,7vw,2.6rem); color:var(--ink); }
html[lang="ar"] .mobile-menu__nav a{ font-family:var(--font-ar); font-weight:700; }
.mobile-menu__cta{ margin-top:.5rem; }
.mobile-menu__social{ display:flex; gap:1.4rem; margin-top:var(--sp-4); }
.mobile-menu__social a{ color:var(--ink-soft); }
body.menu-open{ overflow:hidden; }
@media (min-width:901px){ .mobile-menu{ display:none !important; } }
/* ==========================================================================
Hero
========================================================================== */
.hero{
position:relative; min-height:100svh; display:flex; align-items:center;
padding-top:var(--header-h); overflow:hidden;
isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__blob{
position:absolute; border-radius:50%; filter:blur(70px);
}
.hero__blob--a{
width:52vw; height:52vw; top:-14vw; inset-inline-end:-14vw;
background:radial-gradient(circle, rgba(217,195,165,.55), transparent 70%);
}
.hero__blob--b{
width:44vw; height:44vw; bottom:-18vw; inset-inline-start:-12vw;
background:radial-gradient(circle, rgba(157,182,167,.45), transparent 70%);
}
@media (prefers-reduced-motion:no-preference){
.hero__blob--a{ animation:driftA 26s ease-in-out infinite alternate; }
.hero__blob--b{ animation:driftB 30s ease-in-out infinite alternate; }
}
@keyframes driftA{ to{ transform:translate(-3%, 4%) scale(1.06); } }
@keyframes driftB{ to{ transform:translate(4%, -3%) scale(1.08); } }
.hero__grid{
position:absolute; width:280px; height:280px; inset-inline-start:-40px; bottom:-40px;
background-image:radial-gradient(circle, rgba(16,28,36,.14) 1px, transparent 1px);
background-size:26px 26px; opacity:.5;
}
.hero__inner{
max-width:var(--container); margin-inline:auto; width:100%;
padding-inline:clamp(1.25rem, 4vw, 3rem);
display:grid; grid-template-columns:1fr; gap:var(--sp-7);
padding-block:var(--sp-6);
}
@media (min-width:1000px){
.hero__inner{ grid-template-columns:.92fr 1fr; align-items:center; gap:var(--sp-6); }
}
.hero__title{ font-size:var(--fs-h1); margin-block:var(--sp-3); }
.hero__title span{ display:block; }
.hero__desc{ font-size:var(--fs-lead); color:var(--ink-soft); max-width:46ch; margin-bottom:var(--sp-5); }
.hero__ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.hero__meta{
display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--hairline);
}
.hero__meta li{
font-size:.82rem; color:var(--ink-faint); font-weight:600;
padding:.9rem 1.4rem .9rem 0; border-inline-end:1px solid var(--hairline); padding-inline-end:1.4rem;
}
.hero__meta li:first-child{ padding-inline-start:0; }
.hero__meta li:last-child{ border-inline-end:0; }
.hero__visual{ position:relative; min-height:340px; }
.hero__photo{
position:relative; aspect-ratio:4/5; width:min(100%, 460px); margin-inline:auto;
border-radius:38% 62% 63% 37% / 56% 38% 62% 44%;
isolation:isolate;
}
@media (min-width:1000px){
.hero__photo{ margin-inline-end:calc(-1 * clamp(0px, 4vw, 60px)); margin-inline-start:auto; }
}
/* Mobile crop: shorter/wider frame reads better under the stacked text column
than the tall desktop editorial crop. */
@media (max-width:640px){
.hero__photo{
aspect-ratio:4/3;
border-radius:46% 54% 50% 50% / 48% 44% 56% 52%;
}
}
/* Fine dot-grid + grain, so the fallback placeholder reads as a considered
specimen/sample mark rather than a plain decorative gradient. Sits above the
.media gradient but below the real ![]()
once a photo is supplied — kept
permanently (not reference-only): a faint texture over a real photo is a
deliberate, restrained brand touch, not just a loading-state artefact. */
.hero__photo::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
border-radius:inherit;
background-image:
radial-gradient(circle, rgba(16,28,36,.16) 1px, transparent 1px),
var(--noise-svg);
background-size:16px 16px, 140px 140px;
background-position:center, center;
-webkit-mask-image:radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 78%);
mask-image:radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 78%);
opacity:.5;
mix-blend-mode:overlay;
}
.hero__photo .media__img{
position:relative; z-index:2;
/* Tuned for hero-mother-baby.webp: both faces sit centred, mother's higher
and baby's lower — 40% keeps both in frame at the 4/5 and 4/3 crops below. */
object-position:50% 40%;
}
@media (max-width:640px){
.hero__photo .media__img{ object-position:50% 40%; }
}
/* Placeholder-only composition: soft abstract forms suggesting where the
mother's and baby's faces will sit, a warm skin-adjacent blush and the
editorial wash — replaced entirely once a real ![]()
covers it.
Remove the "media--reference" class (see README) once the real photo ships. */
.hero__photo.media--reference{
background:
radial-gradient(34% 26% at 60% 80%, rgba(185,152,108,.34), transparent 70%),
radial-gradient(44% 52% at 66% 36%, rgba(16,28,36,.13), transparent 72%),
radial-gradient(58% 42% at 54% 28%, rgba(224,178,150,.38), transparent 70%),
radial-gradient(120% 140% at 20% 15%, rgba(217,195,165,.9), transparent 60%),
radial-gradient(130% 130% at 85% 90%, rgba(157,182,167,.75), transparent 55%),
linear-gradient(150deg, var(--cream), var(--sage-light));
}
.hero__thread{ position:absolute; width:250px; height:auto; color:var(--gold); opacity:.6; pointer-events:none; z-index:3; }
.hero__thread--1{ top:6%; inset-inline-start:-13%; transform:rotate(-18deg); }
.hero__thread--2{ bottom:9%; inset-inline-end:-15%; transform:rotate(10deg) scaleX(-1); color:var(--sage); }
.hero__dot{ position:absolute; border-radius:50%; background:var(--sage); opacity:.5; }
.hero__dot--1{ width:10px; height:10px; top:10%; inset-inline-end:6%; }
.hero__dot--2{ width:6px; height:6px; bottom:16%; inset-inline-start:2%; background:var(--gold); }
.hero__dot--3{ width:14px; height:14px; top:44%; inset-inline-end:-2%; background:var(--sand); opacity:.6; }
@media (prefers-reduced-motion:no-preference){
.hero__dot{ animation:floatDot 7s ease-in-out infinite; }
.hero__dot--2{ animation-duration:9s; animation-delay:.6s; }
.hero__dot--3{ animation-duration:8s; animation-delay:1.2s; }
}
@keyframes floatDot{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.hero__scroll{
position:absolute; bottom:clamp(1rem,3vh,2rem); inset-inline-start:50%; transform:translateX(-50%);
width:1px; height:52px; display:flex; justify-content:center;
}
.hero__scroll-line{ width:1px; height:100%; background:linear-gradient(var(--ink-faint), transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{
content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--gold);
}
@media (prefers-reduced-motion:no-preference){
.hero__scroll-line::after{ animation:scrollDrip 2.2s ease-in-out infinite; }
}
@keyframes scrollDrip{ 0%{ top:-40%; } 60%,100%{ top:100%; } }
/* ==========================================================================
Trust strip
========================================================================== */
.trust-strip{ border-block:1px solid var(--hairline); background:var(--cream); }
.trust-strip__list{
max-width:var(--container); margin-inline:auto; padding:var(--sp-4) clamp(1.25rem,4vw,3rem);
display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-4);
}
.trust-strip__list li{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.trust-strip__list svg{ color:var(--gold); flex-shrink:0; }
/* ==========================================================================
NIPT Plus
========================================================================== */
.nipt__grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-7); }
@media (min-width:960px){ .nipt__grid{ grid-template-columns:1fr .85fr; align-items:start; } }
.check-list{ display:flex; flex-direction:column; gap:1rem; margin-bottom:var(--sp-5); }
.check-list li{ display:flex; align-items:flex-start; gap:.8rem; font-size:.95rem; color:var(--ink); }
.check-list li::before{
content:""; flex-shrink:0; width:6px; height:6px; margin-top:.55em; border-radius:50%;
background:var(--sage); box-shadow:0 0 0 4px var(--sage-light);
transition:box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.check-list li:hover::before{ background:var(--gold); box-shadow:0 0 0 5px var(--sage-light); }
/* Sits as a centred info band under the two-column grid, not tucked into the
left column — see .nipt__noterow below. */
.medical-note{
display:flex; gap:.7rem; align-items:flex-start; padding:1rem 1.4rem;
background:var(--sage-light); border-radius:var(--radius-full); font-size:.85rem; color:#33453d; line-height:1.65;
text-align:start;
}
.medical-note svg{ flex-shrink:0; margin-top:.15em; color:#5c7a6a; }
.nipt__noterow{ display:flex; justify-content:center; margin-top:var(--sp-6); }
.nipt__noterow .medical-note{ max-width:62ch; }
.nipt__infographic{
background:linear-gradient(165deg, var(--cream), var(--bone));
border:1px solid var(--hairline); border-radius:var(--radius-l);
padding:var(--sp-6) var(--sp-5);
}
.infographic__track{ position:relative; display:flex; flex-direction:column; gap:var(--sp-6); padding-inline-start:2.6rem; }
/* height:100% is required: an