/* ============================================================================
Phenome — shared design system
Every value here comes from the brand's own sources. Nothing is invented:
tokens.json the measured token set (docs/brief/tokens.json)
prototype/system.css the same system expressed as CSS — README calls it
"the design system as CSS variables", and it is the
authority on how the breakpoint cascade resolves
BRAND-CONTEXT.md §7 the formal identity
Type is Outfit 400/600 only. tokens.json marks the system display family as
unusable in production. The earlier build of this site was shipping it.
SETTLED 2026-08-17 — black is a site colour, not only the footer's ground. Bugra:
"siyah renk kullanabiliriz websitemizde gayet iyi". The dark section ground stays
#000000 and the wireframe's #0A1E57 band is a recorded deviation, not a defect —
see design_language.json › black-is-a-site-colour. The blues below are UNCHANGED
and still open; that question is about the accent, not about this ground.
OPEN — Appendix B #1, site colour direction. Three blues are in play:
#0071E3 / #0066CC tokens.json color.accent — the measured WEB scale, used here
#203A85 Phenome Blue, the brand guideline's primary, and the colour
inside assets/brand/phenome-logo.svg
#0a1e57 what this site used before — from a design mock, in neither
the tokens nor the guideline. Removed.
BRAND-CONTEXT §7 records that the guideline "defines a separate web colour scale …
and states explicitly that web is its own case", which is why the tokens' accent is
used rather than the guideline's primary. The two sit side by side wherever the logo
appears, so they must be reviewed together once the direction is settled.
========================================================================== */
@import url('/site/assets/fonts/outfit.css');
:root {
/* ---- colour · tokens.json color.neutral -------------------------------- */
--ph-white: #FFFFFF; /* page and section ground */
--ph-surface-alt: #FAFAFC; /* alternate surface */
--ph-surface: #F5F5F7; /* section ground */
--ph-pill: #E8E8ED; /* tab / pill ground */
--ph-line: #D2D2D7; /* rule · divider · arrow ground */
--ph-text-2: #6E6E73; /* secondary text */
--ph-text-1: #1D1D1F; /* headings and body */
--ph-black: #000000; /* FOOTER GROUND ONLY — tokens: "YALNIZ footer zemini" */
--ph-tertiary: #86868B;
/* tokens.json color.$gapRule — do not fill this in:
"Five tones are packed between 83–100% lightness, then a 39-POINT GAP, then three
dark tones. THERE IS NO MID GREY. This is the technical reason the system reads
'plain and expensive' — add mid greys and it disappears."
Nothing may introduce a grey between L44 (#6E6E73) and L83 (#D2D2D7), including
via opacity or filter: brightness(), which compose into that band. */
--ph-accent: #0071E3; /* color.accent.buttonFill */
--ph-accent-link: #0066CC; /* color.accent.link */
--ph-focus: #0071E3; /* color.semantic.$focus */
/* A button's hover and press fills. These are NOT the link colour, and the
difference is the whole reason they exist: --ph-accent-link is DARKER than the
resting fill, so using it as a hover made every button on the site recede when
you pointed at it — the opposite of what a hover is for. Bugra, 2026-08-20: a
filled button should take a very small tone change on hover, so you feel it.
Resting fill #0071E3, hover #0076DF, press #006EDB.
Hover is +5 green / -4 blue — a small tone change — and press goes one step
under the resting fill. Do not swap these for the link colour again. */
--ph-accent-hover: #0076DF; /* button hover fill */
--ph-accent-active: #006EDB; /* button press fill */
/* The accent inside a dark section — links, eyebrows, step numbers, tick marks,
bullet marks, the figure's rule. #0066CC is 2.4:1 on black and unreadable, so the
dark ground has always needed its own lighter blue; this is the value those eight
rules were written against, named rather than repeated eight times.
It is declared here because a var() that resolves to nothing does not fall back —
the property is simply dropped and the element inherits whatever is above it. That
is invisible to every gate on this project: none of the eight reads colour. */
--ph-on-brand: #6fa8ff;
/* ---- semantic · the client's design system defines these and the site had never
used one, so the only place that needed a warning colour invented three oranges of
its own instead. Values are that file's, not new ones. Each has a ground and an ink
because colour never carries information alone — §6. */
--ph-warn: #B64400; /* warning text on its own ground */
--ph-warn-bg: #FFF9F4;
--ph-warn-ink: #F56300;
--ph-success: #008009;
--ph-success-bg: #F5FFF6;
--ph-success-ink: #03A10E;
--ph-error: #E30000;
--ph-error-bg: #FFF2F4;
/* ---- type · Outfit only, weights 400 and 600 ---------------------------- */
--ph-font: 'Outfit', system-ui, -apple-system, sans-serif;
--ph-w-400: 400;
--ph-w-600: 600;
/* size / line-height ladder. tokens type.lineHeightRule: line-height is
size + 4 up to 21, size + 8 above. */
/* THE FLOOR IS 15px, 2026-09-17, by request, and the two rungs below it are
RAISED TO MEET IT rather than deleted.
The complaint was site wide type "the size of ants", and measuring it found
the cause was not one page: it was these two tokens, which 76 rules across
seven stylesheets read. The main navigation was 12px. So were the store
menu's eyebrows and its "Not sure where to start" links. The footer, the
promo bar, the ISO line, every product card's name and price, every catalogue
card's description and its Buy pill, and the homepage tiles' own buttons
were all 14. Raising the two tokens fixes all of it in one place; raising
the 76 rules would have left the next one to be written wrong again.
The NAMES are deliberately not changed, because they are the ladder's rungs
and every one of those 76 call sites names its rung. Read them as "the
smallest rung" and "the rung below body" — the number in the name is what
the rung used to measure, not what it measures now.
15 and 16, not 17 and 17: the point of a rung below body is that it is
below body. 17 everywhere would flatten a label, a price and a paragraph
into one voice, and the smallest of the three would stop reading as the
smallest. The line heights follow the same size + 4 and size + 6 rule the
rungs above them use. */
--ph-fs-12: 15px; --ph-lh-12: 20px;
--ph-fs-14: 16px; --ph-lh-14: 22px;
--ph-fs-17: 17px; --ph-lh-17: 21px; --ph-lh-17-loose: 25px;
--ph-fs-19: 19px; --ph-lh-19: 23px; --ph-lh-19-loose: 27px;
--ph-fs-21: 21px; --ph-lh-21: 25px; --ph-lh-21-loose: 29px;
--ph-fs-24: 24px; --ph-lh-24: 32px;
--ph-fs-28: 28px; --ph-lh-28: 36px;
--ph-fs-32: 32px; --ph-lh-32: 40px;
--ph-fs-40: 40px; --ph-lh-40: 48px;
--ph-fs-48: 48px; --ph-lh-48: 56px;
--ph-fs-64: 64px; --ph-lh-64: 72px;
--ph-fs-80: 80px; --ph-lh-80: 88px;
/* tracking · tokens type.tracking.outfit */
--ph-tr-80-600: -1.664px;
--ph-tr-64-600: -1.014px;
--ph-tr-48-600: -0.528px;
--ph-tr-40-600: -0.32px;
--ph-tr-32-600: -0.128px;
--ph-tr-28-600: -0.028px;
--ph-tr-24-600: 0.072px;
--ph-tr-21-600: 0.126px;
--ph-tr-12-600: -0.202px;
/* Uppercase micro-type is the one place tracking goes POSITIVE. Capitals have no
ascenders or descenders to separate them, so 12px caps at the ladder's own
-0.202px jam together; the rule is +5-8% of size. Measured 2026-08-13: 439 of the
441 uppercase labels on the site were tracked -1.68%, while the same label inside
the mega-menu was already +8% (shared.css:1330 hand-types .08em) — the two were
never the same label. 0.96px is 8% of 12. */
--ph-tr-12-600-caps: 0.96px;
/* The global nav only, at 1440: 12px links, letter-spacing -0.12px, 8px of
horizontal padding, 44px tall, 46px between labels, colour rgba(0,0,0,.8).
⚠️ An earlier spec said 12/16 and #6E6E73 with -0.40 tracking. #6E6E73 in a
translucent bar dropped the label to 3.16:1 over a dark section, while
rgba(0,0,0,.8) clears the rule with the bar still translucent.
Our ladder carries no 12/400 tracking pair, and writing --ph-tr-12-400 would have
been a var that resolves to nothing — which has silently deleted its own declaration
three times on this project. Named for its scope so it cannot be mistaken for a rung
of the type ladder. */
--ph-tr-nav: -0.12px;
--ph-tr-21-400: 0.252px;
--ph-tr-19-400: 0.228px;
--ph-tr-17-400: 0.204px;
/* ---- responsive type · the h1/h2 step at each band comes from system.css,
which puts h1 at 64 between 1024 and 1439. The tokens list 64 as a measured
size without assigning it to a design screen; system.css is where it lands. */
--ph-h1-size: var(--ph-fs-80); --ph-h1-lh: var(--ph-lh-80); --ph-h1-tr: var(--ph-tr-80-600);
--ph-h2-size: var(--ph-fs-48); --ph-h2-lh: var(--ph-lh-48); --ph-h2-tr: var(--ph-tr-48-600);
--ph-h3-size: var(--ph-fs-28); --ph-h3-lh: var(--ph-lh-28); --ph-h3-tr: var(--ph-tr-28-600);
--ph-lead-size: var(--ph-fs-21); --ph-lead-lh: var(--ph-lh-21-loose);
/* ---- layout · system.css "kenar boşluğu merdiveni" --------------------- */
--ph-content-max: 1260px;
--ph-read-max: 980px;
/* ---- the MEASURE, in characters ----------------------------------------
--ph-read-max is a CONTAINER width and it is right as one. It is not a reading
measure: 980px of 17px Outfit is 119 characters per line, and text is read between
45 and 75. That is the same box at 28px, which is what 980 was sized for.
Measured at 1920 before this existed: 11 paragraphs over 90 characters, the longest
185 — every FAQ answer on the site (`.acc-body`, 980px at 17px) and every 14px
paragraph in a wide box. At 390 the same pages were clean, so it was invisible on a
phone and worst on the screen the client actually looks at.
`ch` because it is the only unit that keeps the measure right at every font size AND
every viewport at once — a px cap has to be re-tuned for both.
CALIBRATED, not guessed: 1ch is the width of the "0" GLYPH, not of an average
character, and in Outfit zero is about 35% wider than the mean lowercase letter.
Measured: a 68ch cap produced 92 characters per line, so the ratio is 1.353 and the
cap is set from the character count wanted rather than from it directly. */
--ph-measure: 52ch; /* ≈70 characters */
--ph-measure-lead: 46ch; /* ≈62 — larger type reads better shorter */
--ph-gutter: 20px; /* grid column gap — NOT the page edge */
--ph-margin: 90px;
/* ---- section rhythm · system.css ---------------------------------------- */
--ph-sec-top: 144px;
--ph-sec-bottom: 116px;
--ph-hero-bottom: 52px;
/* ---- radius · tokens radius.scale --------------------------------------- */
--ph-r5: 5px; --ph-r6: 6px; --ph-r8: 8px; --ph-r12: 12px; --ph-r14: 14px;
--ph-r18: 18px; --ph-r21: 21px; --ph-r27: 27px; --ph-r36: 36px; --ph-r56: 56px;
/* ---- control geometry · tokens control ---------------------------------- */
--ph-btn-h: 44px;
--ph-btn-px: 22px;
--ph-btn-sm-h: 38px;
--ph-btn-sm-px: 16px;
--ph-nav-h: 44px;
/* ---- a11y · tokens a11y ------------------------------------------------- */
--ph-focus-w: 3px;
--ph-focus-offset: 3px;
--ph-touch-min: 44px;
/* ---- motion · tokens motion --------------------------------------------- */
--ph-dur-fast: 160ms;
--ph-dur-base: 240ms;
/* Longer than any interaction token on purpose: this one is not feedback to a
click, it is a band settling into place while the reader is still moving. At
240ms it snaps and reads as a glitch; at 620 it reads as weight. */
--ph-dur-reveal: 620ms;
--ph-ease: cubic-bezier(.4, 0, .2, 1);
}
/* The cascade below is system.css's, verbatim in structure.
≥1440 uses the :root values above. */
@media (max-width: 1439px) {
:root {
--ph-margin: 64px;
--ph-sec-top: 120px; --ph-sec-bottom: 92px; --ph-hero-bottom: 36px;
--ph-h1-size: var(--ph-fs-64); --ph-h1-lh: var(--ph-lh-64); --ph-h1-tr: var(--ph-tr-64-600);
--ph-h2-size: var(--ph-fs-40); --ph-h2-lh: var(--ph-lh-40); --ph-h2-tr: var(--ph-tr-40-600);
}
}
@media (max-width: 1023px) {
:root {
--ph-margin: 48px;
--ph-h1-size: var(--ph-fs-48); --ph-h1-lh: var(--ph-lh-48); --ph-h1-tr: var(--ph-tr-48-600);
--ph-h2-size: var(--ph-fs-32); --ph-h2-lh: var(--ph-lh-32); --ph-h2-tr: var(--ph-tr-32-600);
--ph-h3-size: var(--ph-fs-24); --ph-h3-lh: var(--ph-lh-24); --ph-h3-tr: var(--ph-tr-24-600);
--ph-lead-size: var(--ph-fs-19); --ph-lead-lh: var(--ph-lh-19-loose);
}
}
@media (max-width: 799px) {
:root {
--ph-margin: 24px;
--ph-sec-top: 140px; --ph-sec-bottom: 112px; --ph-hero-bottom: 28px;
}
}
/* legacy aliases — the 58 built pages reference these names */
:root {
--navy: var(--ph-accent); --navy-hover: var(--ph-accent-link);
--blue: var(--ph-accent); --peri: var(--ph-tertiary);
--violet: #4b3f9e; --rose: #8e3b56; --teal: #2b6d6a; --amber: #a8641f; /* test-kit coding only */
--ink: var(--ph-text-1); --gray: var(--ph-text-2); --gray-2: var(--ph-tertiary);
--bg: var(--ph-surface); --border: var(--ph-line); --hair: #E5E5EA;
--accent: var(--ph-accent);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; background: var(--ph-white); color: var(--ph-text-1);
font-family: var(--ph-font);
font-size: var(--ph-fs-17); line-height: var(--ph-lh-17);
letter-spacing: var(--ph-tr-17-400);
-webkit-font-smoothing: antialiased; text-wrap: pretty;
}
a { color: var(--ph-accent-link); text-decoration: none; }
/* 🔴 THE COLOUR CHANGE THAT USED TO BE HERE ERASED BUTTON LABELS, and it did it in
silence for as long as the tile homepage existed. This rule is (0,1,1); a control
class that sets its own colour is (0,1,0), so on hover THIS won — and the colour it
set was --ph-accent, which is the exact fill of every blue pill on the site. The
result, measured in the browser 2026-08-20 on /store/supplements/ and on the
homepage: `.atile-link` went from white text on #0071E3 to #0071E3 text on #0071E3.
Contrast 1:1. The label did not fade — it vanished, and the pill kept its underline
floating in the middle of nothing. Bugra caught it in a screenshot; no gate on this
project reads colour, so nothing else could have.
The rule is now exactly one declaration — `a:hover { text-decoration: underline; }` —
and the link colour (#0066CC) does not move on hover. Every control that fills or
inverts still has to say `text-decoration: none` for itself; underline is the
default for a link and a button is not a link. */
a:hover { text-decoration: underline; }
/* Buttons, pills, cards and tiles are not underlined on hover. */
a[class*="btn"]:hover, a[class*="pill"]:hover, a[class*="cta"]:hover,
a[class*="card"]:hover, a[class*="tile"]:hover { text-decoration: none; }
/* height:auto is load-bearing, not tidiness. Every carries width/height
attributes for CLS reservation, and those map to CSS at hint specificity — so an
image sized `width:100%` keeps the attribute's pixel height and stretches. */
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: var(--ph-font); }
/* tokens a11y.focusRing — 3px ring, 3px offset. outline:none is forbidden. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
textarea:focus-visible, details:focus-visible {
outline: var(--ph-focus-w) solid var(--ph-focus);
outline-offset: var(--ph-focus-offset);
}
/* ---- Nav ---- */
.ph-nav {
position: sticky; top: 0; z-index: 100; height: var(--ph-nav-h);
display: flex; align-items: center; justify-content: center;
/* NO border — an invented one was recorded as a mistake.
Separation comes from the tone of the page: the hero's top is #F5F5F7 and the bar
is white, which measures 10/255 on every page.
80% white with the blur. It was briefly opaque here: with the label at #6E6E73
a dark section scrolling under a translucent bar dropped it to 3.16:1 against a
rule of 4.5, and no opacity fixed it (86% → 3.66, 90% → 4.06, 94% → 4.45). The
cause was the colour, not the glass: with the link at rgba(0,0,0,.8) the same
translucent bar measures well clear of the rule. */
background: rgba(255,255,255,.8); backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
/* The placeholder shared.js replaces has to hold the nav's space before the nav
exists. It reserved 0px for a 44/48px bar, so every page dropped by that much the
moment the script landed — measured on 120 of 120 pages, and on /quiz/ it was a
real CLS rather than a paint-time shift. It is a bare
in
before , nothing else selects it, and shared.js swaps it by outerHTML, so
this rule cannot survive injection and cannot double-count. */
[data-ph-nav] { display: block; height: var(--ph-nav-h); }
/* The SAME container formula as .wrap / .wrap-wide below — deliberately, not by
coincidence. This was `width: min(1180px, 92vw)`, a width that appears in no token
file, and it put the wordmark off the headline's left line by +40px at 2560/1920/1440,
−13 at 1280, −23 at 1024, −16 at 800, +8 at 799, −8 at 390 and −11 at 320 — the sign
flipping as the window resized, which is what made it read as two designs stacked.
The footer has always been 0px off at every width because it uses .wrap-wide; this
rule is that same arithmetic, so nav and page cannot drift apart again. Measured after:
0.0px at all of 2560/1920/1440/1280/1024/935/931/901/900/800/799/390/320. */
.ph-nav-inner { width: 100%; max-width: calc(var(--ph-content-max) + var(--ph-margin) * 2);
margin-inline: auto; padding-inline: var(--ph-margin);
display: flex; align-items: center; justify-content: space-between; }
.ph-nav a { text-decoration: none; }
.ph-brand { display: flex; align-items: center; color: var(--ph-text-1); }
.ph-brand img { height: 18px; width: auto; }
/* At 1440: 46px between labels, the same for all twelve pairs, built as an 8px link
padding either side plus a 30px gap. We take 8 + 32 = 48, two pixels wider, because
30 is not on tokens' spacing scale and 32 is — and because Outfit sets wide at 12px,
so the row wants the extra rather than less. Two pixels at this size is invisible;
an off-scale number is not. */
.ph-links { display: flex; align-items: center; gap: 32px; font-size: var(--ph-fs-12); }
/* The nav link: rgba(0,0,0,.8), 8px of padding
either side, and the full 44px bar height as the hit area — which is also the touch
minimum, so the row's targets stop being 17px tall.
⚠️ DIRECT CHILDREN ONLY, and this is not a nicety. The mega-menu panel lives INSIDE
`.ph-links` — that one arrangement is what gives both the desktop card and the mobile
accordion from CSS alone — so a plain `.ph-links a` also matches every link inside
every panel. Written that way for ten minutes on 2026-08-13 it gave all eight panels'
product cards a 44px height and 8px of padding, and the cards collapsed into each
other: images over titles, prices over names. Bugra caught it in a screenshot. Any
rule meant for the top row has to say `>`. */
.ph-links > a, .ph-links > .ph-item > .ph-trigger {
color: rgba(0,0,0,.8); letter-spacing: var(--ph-tr-nav);
display: inline-flex; align-items: center;
height: var(--ph-nav-h); padding: 0 8px; }
.ph-links a:hover { color: var(--ph-black); text-decoration: none; }
.ph-links a.active { color: var(--ph-accent-link); font-weight: var(--ph-w-600); }
.ph-nav-cta {
display: inline-flex; align-items: center; height: 28px; padding: 0 14px;
border-radius: var(--ph-r14); background: var(--ph-accent); color: var(--ph-white) !important;
font-size: var(--ph-fs-12); font-weight: var(--ph-w-400);
}
.ph-nav-cta:hover { background: var(--ph-accent-hover); text-decoration: none; }
.ph-nav-cta:active { background: var(--ph-accent-active); }
/* The design's right-hand cluster: Clinic as an outlined pill, then two icon
links. Measured off docs/design-frames/phenome-navigation.png at 1440. The pill
is the same 36px control height as .ph-nav-cta so the two sit on one baseline;
the icons are 44px targets with an 18px glyph, which is the touch minimum and
the same size the rail arrows use. No shadow anywhere — elevation YOK. */
.ph-nav-end { display: flex; align-items: center; gap: 10px; }
/* The Clinic trigger, moved out of the row and drawn as the design's outlined pill.
It is still a .ph-trigger inside a .ph-item, so it keeps hover-intent, the
chevron, Escape and the active state; only its skin changes. */
.ph-nav-end .ph-item > .ph-trigger {
/* inline-flex + centring, because .ph-trigger is display:block and a fixed
height on a block just leaves the line box at the top: an 18px line in a
36px pill sat 18px above the bottom edge, which is what Can was seeing when
he said the font looked wrong. It was never the font — Outfit 14/400 was
correct throughout. */
display: inline-flex; align-items: center; justify-content: center;
/* A nav item, not a pill: height 44 (the row's own height, so the target is
full-bar), 8px of horizontal padding, no ground, no radius, no border.
It was an outlined 36px pill in a 44px bar, which left 4px of air above and below
and read as oversized; the client's own frame gives the same pill 14px of air by
drawing a 61px bar. Two coherent designs, and we had half of each. */
height: var(--ph-nav-h); padding: 0 8px;
color: rgba(0,0,0,.8); white-space: nowrap;
font-size: var(--ph-fs-12); line-height: var(--ph-lh-12);
font-weight: var(--ph-w-400);
/* `normal`, not a token: the scale has no 14/400 tracking, and --ph-tr-14-400
resolved to nothing, so the declaration was DROPPED and the pill inherited
body's 0.204px — which is the SEVENTEEN-pixel tracking, spread across 14px
text. Can saw it as the letters flying apart. The rest of this bar is already
pinned to normal (see .ph-trigger), so this matches it rather than inventing
a number. Third time today a var() that does not exist has silently deleted
its own line; grep the token before you write it. */
letter-spacing: normal;
}
.ph-nav-end .ph-item > .ph-trigger:hover { color: var(--ph-black); }
.ph-nav-end .ph-item > .ph-trigger.active {
color: var(--ph-accent-link); font-weight: var(--ph-w-600);
}
.ph-nav-end .ph-item > .ph-toggle { display: none; }
.ph-nav-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; color: var(--ph-text-1); text-decoration: none;
}
.ph-nav-icon:hover { color: var(--ph-accent-link); }
/* ---- the profile icon, 2026-09-22 by request, cost the bar 54px it did not
have below 1180 (the logo was squeezed). Between 901 and 1179 the row gaps
close up; on phones the icons keep a 36px target around their 18px glyph. */
@media (min-width: 901px) and (max-width: 1179px) {
.ph-nav .ph-links { gap: 12px; }
.ph-nav .ph-nav-end { gap: 2px; }
.ph-nav .ph-brand { flex-shrink: 0; }
}
@media (min-width: 901px) and (max-width: 979px) {
.ph-nav .ph-links { gap: 4px; }
.ph-nav .ph-nav-inner { padding-inline: 24px; }
}
@media (max-width: 480px) {
.ph-nav .ph-brand { flex-shrink: 0; }
.ph-nav .ph-nav-end { gap: 2px; }
.ph-nav .ph-nav-icon { width: 36px; }
.ph-nav .ph-burger { padding: 8px 4px 8px 8px; }
}
/* Below 901 the drawer owns the links and the row must not grow: the bar already
has only 0px of slack at 901 (see .ph-toggle's note), so the pill and the CTA
step out and the two icons stay — they are the only things a phone can use
without opening the drawer. */
@media (max-width: 900px) {
.ph-nav-end .ph-item, .ph-nav-cta { display: none; }
}
.ph-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.ph-burger span { display: block; width: 18px; height: 1.6px; background: var(--ph-text-1); margin: 4px 0; }
@media (max-width: 900px) {
.ph-nav, [data-ph-nav] { height: 48px; }
/* The drawer covers the screen under the bar and slides in from the right.
It stays laid out and is only moved and hidden, so opening and closing
both animate. */
.ph-links {
/* The bar's backdrop filter makes the bar, not the window, the box a fixed
child is placed in: so the drawer starts at the bar's foot and states its
own height instead of stretching to a bottom edge it cannot see. */
display: flex; position: fixed; inset: 48px 0 auto 0;
height: calc(100vh - 48px); height: calc(100dvh - 48px);
/* Opaque, not translucent: the drawer holds expanded menu panels, and page
copy showing through behind two columns of links is unreadable. */
background: var(--ph-white);
/* And scrollable: an open Supplements panel is taller than a phone. */
overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
flex-direction: column; align-items: stretch; gap: 0;
padding: 12px var(--ph-margin) calc(40px + env(safe-area-inset-bottom));
transform: translateX(100%); visibility: hidden;
transition: transform .46s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .46s;
}
.ph-links.open {
transform: none; visibility: visible;
transition: transform .46s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}
.ph-links a { font-size: var(--ph-fs-17); padding: 12px 0; width: 100%; border-bottom: 1px solid var(--hair); }
/* The lines sit at the left of a 44px tap target; the target reaches into the
gutter so the lines end on the same 24px margin as the logo. */
.ph-burger { display: block; margin-right: -18px; }
}
/* ---- Layout primitives ---- */
/* system.css: the content box is content-max PLUS two margins; above that the
margin absorbs the extra width, so content stays locked at 1260. */
.wrap { width: 100%; max-width: calc(var(--ph-content-max) + var(--ph-margin) * 2);
margin-inline: auto; padding-inline: var(--ph-margin); }
.wrap-wide { width: 100%; max-width: calc(var(--ph-content-max) + var(--ph-margin) * 2);
margin-inline: auto; padding-inline: var(--ph-margin); }
/* ---- The reading measure ----
.wrap and .wrap-wide are byte-identical — both resolve to 1260px — so 725 of the
site's 747 sections are the same width, and no amount of motion composes a rhythm
out of a page that has exactly one column. This is the third container, and its
width is not invented: --ph-read-max is already the measure the .lede and the
.acc-body are set to, so a prose slab moved into it is being put in the box the
design system had all along and nothing was using.
The visible change is the heading. A 48-point h2 spanning 1260px above a paragraph
that stops at 820 reads as a poster; the same h2 stopping at 980 with the paragraph
under it reads as an article, which is what those sections are.
Below 1024 the page margin has already closed the gap and this computes identical
to .wrap-wide — correctly. There is no room for two measures on a phone, and
pretending otherwise is how a narrow column becomes a narrow column with no
margin. */
.wrap-read { width: 100%; max-width: calc(var(--ph-read-max) + var(--ph-margin) * 2);
margin-inline: auto; padding-inline: var(--ph-margin); }
.section { padding: var(--ph-sec-top) 0 var(--ph-sec-bottom); }
.section-tight { padding: calc(var(--ph-sec-top) / 2) 0 calc(var(--ph-sec-bottom) / 2); }
.section-gray { background: var(--ph-surface); }
.section-black { background: var(--ph-black); color: var(--ph-surface); }
/* Two components read a light-ground token and have no dark-ground rule of their own.
The figcaption measures 4.1:1 on the ORIGINAL black too, so this is a pre-existing
failure being closed rather than one the brand colour introduced — which is why it
is not scoped to the modifier. */
.section-black .quote figcaption,
.section-black table th { color: var(--ph-tertiary); }
.section-black h2, .section-black h3 { color: var(--ph-white); }
/* The dark band keeps the two voices it already had — Bugra chose it over the frame's
centred column on 2026-08-17, having seen both. Only its label row changed. */
/* ============================================================= LABEL PILLS
THE SITE-WIDE SHAPE FOR A NAMED SET. Wherever a section lists short labels — the
five signals the ring streams, the areas a report covers, the goals a quiz maps to —
they ship as this row and nothing else. Bugra, 2026-08-17: "bu tarz etiketli
bölümlerde tasarımı bu şekilde yapalım site genelinde, sistem kural olarak göm."
They were middot-joined running text before, then a smaller 36px chip. Both read as
an aside. A set of things the product measures is not an aside — it is the evidence
under the claim above it, and it is sized to be read rather than skimmed past.
Every value is on the system: 48 and 24 are tokens.space.scale, 17/24 is the type
ladder's body rung, r27 is tokens.radius.scale and exceeds half the height so the
end caps are true semicircles. No shadow and no border — elevation YOK; the pill is
legible because its ground differs from the page's, which is the surface ladder
doing its job. */
.pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pill-lab {
display: inline-flex; align-items: center; height: 48px; padding: 0 24px;
border-radius: var(--ph-r27); background: var(--ph-surface);
font-size: var(--ph-fs-17); line-height: var(--ph-lh-17);
letter-spacing: var(--ph-tr-17-400); color: var(--ph-text-1);
}
/* On the dark band the pill lifts off the ground rather than sitting on a light chip:
a white chip there would punch holes in the one moment the page goes quiet. */
.section-black .pill-lab { background: rgba(255,255,255,.12); color: var(--ph-white); }
.section-black p { color: var(--ph-tertiary); }
/* ---- Type ---- */
/* THE OVERLINE IS A PROMISE LINE NOW, 2026-09-16, by request.
It was 12px at +0.96px of tracking, which is the setting a caps overline
takes — the letters were sentence case but the TYPESETTING was the all caps
device, and the page read that way. The Band has no overline at all; it has
one line under the name, at 600 in the brand blue, saying what the thing is
for, and that is the shape the whole store takes now: a size up, tracking
back to normal, the same blue. See the text ladder in phenome-glass.css § 3
for the four inks and the four sizes this belongs to. */
.eyebrow {
font-size: 15px; line-height: 20px; font-weight: var(--ph-w-600);
letter-spacing: -0.005em; color: var(--ph-tone-promise, var(--ph-accent-link));
}
h1.hero-title {
margin: 14px 0 0; font-size: var(--ph-h1-size); line-height: var(--ph-h1-lh);
font-weight: var(--ph-w-600); letter-spacing: var(--ph-h1-tr); text-wrap: balance;
}
h2.sec-title {
margin: 16px 0 0; font-size: var(--ph-h2-size); line-height: var(--ph-h2-lh);
font-weight: var(--ph-w-600); letter-spacing: var(--ph-h2-tr); text-wrap: balance;
}
h2.card-title, h3.card-title {
margin: 0; font-size: var(--ph-h3-size); line-height: var(--ph-h3-lh);
font-weight: var(--ph-w-600); letter-spacing: var(--ph-h3-tr); text-wrap: balance;
}
/* The rule above is right for the 33 card titles that take their size from the class
(28/36 at ≥1024, 24/32 below — both size + 8, both on the ladder) and wrong for the
722 that do not. Measured 2026-08-13: of 796 .card-title on 72 pages, 722 carry
style="font-size:21px" written by build_pages/build_pages2/build_pages3/build_all, and
an inline font-size overrides ONLY the size. So the 28 rung's leading and tracking kept
applying to 21px text: 21/36 at ≥1024 and 21/32 below, at -0.028px and +0.072px of
tracking. tokens type.lineHeightRule is a FIXED OFFSET — size + 4 tight, size + 8 loose
— so 36 is size + 15 and 32 is size + 11, and neither is on any rung. That is 11px of
surplus leading on every one of those 722 titles, which is most of what "boş" meant.
This is the same failure fix_type_scale.py was written for ("an inline font-size
overrides only the first … keeps tracking calibrated for a 17px glyph") and it is
deliberately outside that pass's scope: it leaves inline sizes that are ALREADY on the
ladder alone, and 21 is on the ladder. So the class has to answer for it, and the only
place the size is written is the style attribute — hence the attribute selector.
It cannot false-match: "font-size:121px" does not contain the substring
"font-size:21px" and neither does any other rung. The titles that already carry an
inline line-height:25px keep it — inline wins, and it is the same value.
Both spacings are listed, and that is not belt-and-braces. All four generators and
fix_type_scale write "font-size:21px" closed up today; the day one of them writes a
space instead, a one-form selector stops matching and 761 titles go quietly back to
21/36 with nothing on this project able to see it — no gate reads leading, the markup
stays valid, and the page just gets airy again.
The durable fix is for the four generators to write the rung's leading beside the size
they hard-code; until they do, this keeps every built page on the ladder. */
/* Tag-agnostic since 2026-08-13. It read h2 and h3 only, and /store/checkout/ writes
`` — same class, same size, a
different tag, so the leading never reached it and the line sat at 21/21. Found by
check_design_language on its second run. A selector that names the tag is a selector
that is one generator away from being wrong. */
.card-title[style*="font-size:21px"],
.card-title[style*="font-size: 21px"] {
line-height: var(--ph-lh-21); letter-spacing: var(--ph-tr-21-600);
}
.lede {
margin: 20px auto 0; max-width: min(var(--ph-read-max), var(--ph-measure-lead));
font-size: var(--ph-lead-size); line-height: var(--ph-lead-lh);
letter-spacing: var(--ph-tr-21-400); color: var(--ph-text-2);
}
/* Body copy takes the LOOSE offset. tokens type.lineHeightRule is "size + 4 (tight,
heading) or + 8 (loose, body)" and this paragraph had been taking the tight one:
17px in a 21px box is 1.235, which is inside the booklet's HEADING band (1.05-1.25)
and nowhere near its body band (1.5-1.6). Measured 2026-08-13 on 2,272 elements
across all 120 pages. Only .body-text moves: re-pointing --ph-lh-17 itself, or body,
would drag 1,823 elements that inherit that box at other sizes with it. */
.body-text {
max-width: var(--ph-measure);
font-size: var(--ph-fs-17); line-height: var(--ph-lh-17-loose);
letter-spacing: var(--ph-tr-17-400); color: var(--ph-text-2);
}
.center { text-align: center; }
/* ---- Opener ----
163 sections open with an eyebrow, a 48-point heading and a 21-point lede stacked
in one column, and every one of them is the same three lines at the same three
sizes in the same box. The copy is signed off and cannot be rewritten, so the only
thing left to change is where it sits and how big it is — which turns out to be
enough, because the lede was never a subtitle. It is the second half of the
argument, and stacking it under the heading at body weight is what made it read as
a caption.
28, not 48. A lede promoted to its heading's own size stops being a lede and
becomes a second headline, and on a health brand a sentence that gains rhetorical
weight has gained a claim nobody signed off. 28 is the h3 token: out of body
register, still subordinate, still the same words.
1.05fr / 1fr with a 64px gap is not a new geometry — it is exactly the split
.hero-split already uses, so the page's second-level head reads as the hero's echo
rather than as a fourth arrangement.
minmax(0, …) on both tracks is not decoration. 1fr carries an automatic min-content
minimum, and one long unbroken string would push the grid wider than the page —
which un-gates audit_layout's ENTIRE overflow sweep for that page and surfaces
every unrelated pre-existing near-miss on it. Both tracks are floored at zero.
row-gap is zero and stays zero: every component that follows a head on this site
carries its own inline margin-top, and a grid gap on top of it would silently add
20px to 163 sections. And nothing here gets a negative margin for optical
alignment — grid children are exactly what the overlap check walks, and two of them
sharing two pixels on both axes is the one thing that turns the whole gate red. */
.opener { display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
column-gap: 64px; row-gap: 0; align-items: start; }
.opener > .opener-t { grid-column: 1; }
/* Both columns top-align: with an eyebrow present the h2 keeps its 16px; without one
the h2 is first and that 16px would drop column 1 below column 2. */
.opener > .opener-t > :first-child { margin-top: 0; }
.opener > .lede { grid-column: 2; margin-top: 0; max-width: none;
font-size: var(--ph-fs-28); line-height: var(--ph-lh-28); }
/* No letter-spacing here on purpose. The tracking ladder has no 28/400 value — the 28
token is a 600-weight figure — so rather than invent one the lede keeps the 0.252px
it already carries, which at this size is a hair loose and true. */
.opener > :nth-child(n+3) { grid-column: 1 / -1; }
/* ---- Showcase ----
The opener gives a section two voices. This gives it a picture, and it is the one
arrangement the site did not have: below the hero, every photograph on this site is
either a full-bleed band or a thumbnail inside a card. There was nothing in between,
which is why the Ceramic and Titanium sections shipped as a price, a colour list and
a button in the left 760px of a 1440px screen, with the other 40% white.
The proportions are the hero's, mirrored: the picture takes the larger track,
because the point of this arrangement is the picture. Copy stays in the smaller one
and keeps its own measure, so a paragraph never runs past 60 characters.
Alternating the side is the whole rhythm. Two of these stacked with the photograph
on the same side is a template; swapped, it is a page turning. .showcase-alt only
moves grid-column — the DOM order never changes, so at one column the copy is always
above its picture and a screen reader gets the same page a sighted reader does.
No shadow, at any size: tokens.json records `elevation YOK`. The radius and the
clipped box are the whole treatment, and the clipping is also what lets the picture
settle on arrival without a single layout box moving. */
.showcase { display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
column-gap: clamp(48px, 6vw, 96px); align-items: center; }
/* grid-row: 1 on both, and it is not belt-and-braces. Auto-placement walks the DOM in
order and never moves backwards across a row: on the alternating instance the copy
is placed in column 2, and the picture — asked for column 1, which the cursor has
already passed — is pushed to row 2. Measured before this line: the photograph sat
437px BELOW the paragraph it belongs to, inside a section that still passed every
gate, because a gap is not an overlap. */
.showcase > .showcase-t { grid-column: 1; grid-row: 1; }
.showcase > .showcase-img { grid-column: 2; grid-row: 1; }
/* The track sizes swap with the columns, not just the content. Moving the picture
into column 1 without this put it in the 1fr track and shrank it by 8% on every
alternate row — the alternation stopped reading as a rhythm and started reading as
a mistake. The picture is always in the larger track, whichever side it is on. */
.showcase.showcase-alt { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.showcase.showcase-alt > .showcase-t { grid-column: 2; }
.showcase.showcase-alt > .showcase-img { grid-column: 1; }
.showcase > .showcase-t > :first-child { margin-top: 0; }
.showcase-img { border-radius: var(--ph-r27); overflow: hidden; }
.showcase-img img { width: 100%; height: clamp(360px, 33vw, 540px);
object-fit: cover; display: block; }
@media (max-width: 1023px) {
.showcase { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
.showcase, .showcase.showcase-alt { grid-template-columns: minmax(0, 1fr); }
/* One column, and the row pin comes off with it — otherwise both children are
asked for row 1 and the picture lands on top of the paragraph. */
.showcase > .showcase-t, .showcase > .showcase-img,
.showcase.showcase-alt > .showcase-t, .showcase.showcase-alt > .showcase-img {
grid-column: 1; grid-row: auto;
}
.showcase-img img { height: clamp(300px, 52vw, 420px); }
}
/* ---- Product card ----
The store category pages shipped their products as three grey boxes holding a name,
a price, and one paragraph with the feature list typed into it separated by pipes:
"✓ Digestion, bloating & IBS drivers | ✓ Mood, sleep & energy links | ✓ Immunity &
inflammation markers | At-home stool sample". Four facts, one sentence, no picture,
and nothing clickable — under a single "Explore" button that went to the first
product only. That is a catalogue rendered as prose.
The photograph is the real kit, never a generated stand-in: BRIEF §8.3, and it has
cost a rework twice. 3:2 because that is what every kit was shot at, so the crop is
the frame rather than a decision.
.ticks is .assure at card scale — same meaning, a mark that belongs to the
component rather than being typed into the sentence, so the day someone edits the
line the tick goes with it. 14px rather than 20px because three of these stacked in
a 347px column at the assurance size is a wall of blue. */
/* The ground is --ph-pill, not --ph-surface, and that is the surfaceLadder rule rather
than a preference. tokens color.surfaceLadder: L1 card and L2 in-card media MUST
differ, and its $why is this exact bug reported once already — "Ürün Kartı'nın medyası
#F5F5F7 kuruldu, sayfa zemini de #F5F5F7'ydi → kartlar zemine karıştı". Here the media
well was #F5F5F7 and .card-gray is #F5F5F7, so on a white section the well and its own
card were one colour. The photograph hides it once loaded; before that, and on a slow
connection, the card is a seamless grey slab with no picture in it. #E8E8ED is the
ladder's own L2 and is one ramp step from both grounds this card takes (#F5F5F7 on a
white section, #FFFFFF on a grey one), so $minDelta holds either way round. */
.card-img.kit { aspect-ratio: 3 / 2; margin-bottom: 22px; background: var(--ph-pill); }
.card-img.kit img { width: 100%; height: 100%; object-fit: cover; }
/* The picture runs the card's full width. Measured 2026-08-13: all 15 kit photographs on
the site are the first child of a .card-gray (12 anchors, 3 divs, on /store/genetic/,
/store/microbiome/, /store/devices/ and /testing/genetic/), and every one sat 30px in
from the card's sides and 32px down from its top — 90.3% of its card's width at 1440
and 82.5% at 390, which is 49.7% and 31.7% of the card's area. .tile-media, which is
the client's own Store Card, is 100% of its tile's width and 63.9–68.8% of its area.
tokens image.cardImage locks the WIDTH and lists 372 and 620; 620 is exactly this
card's own width at 1440, i.e. the picture is specified to run the card edge to edge.
Negative margins, never overflow:hidden on the card. audit_layout's clipped check
reports any text leaf whose box escapes an ancestor with computed overflow hidden, and
.card-gray has 776 instances with three text leaves in each — the same trap .ctable-box
documents. The three values here are .card-gray's own padding (32px 30px) negated
exactly, so the picture reaches the card's border box and stops: the card's own box
does not move and no sibling's does either. If that padding ever changes, these change
with it.
Square bottom corners, because the photograph now meets the card's flat ground there
and rounded ones would leave a grey wedge under each bottom corner. The top two match
the card's own 18. Scoped to .card-gray rather than .card because that is the only
shape that exists; a kit dropped into a white .card keeps its inset rather than
bleeding by the wrong 4px and 2px. */
.card-gray > .card-img.kit:first-child {
margin: -32px -30px 22px;
border-radius: var(--ph-r18) var(--ph-r18) 0 0;
}
.ticks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li { display: grid; grid-template-columns: 15px 1fr; gap: 10px; align-items: start;
font-size: var(--ph-fs-17); line-height: var(--ph-lh-17); color: var(--ph-text-2); }
.ticks svg { width: 14px; height: 14px; margin-top: 4px; color: var(--ph-accent); }
.section-black .ticks li { color: var(--ph-tertiary); }
.section-black .ticks svg { color: var(--ph-on-brand); }
/* The sample type is not a claim, it is a specification, so it sits below the ticks in
the secondary tone with a rule above it rather than taking a mark it has not earned. */
.card-spec { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hair);
font-size: var(--ph-fs-14); line-height: var(--ph-lh-14); color: var(--ph-text-2); }
.card-price { margin: 12px 0 0; font-size: var(--ph-fs-21); line-height: var(--ph-lh-21);
font-weight: var(--ph-w-600); letter-spacing: var(--ph-tr-21-600);
color: var(--ph-text-1); }
.section-black .card-price { color: var(--ph-white); }
/* ---- Spec rows ----
"Price / From £199" and "Colours / Pink · Black · White" shipped as two flex divs
with five inline styles between them, the value set at body size in the same colour
as the label beside it. On a product page the specification is the argument, and a
figure that looks exactly like the word next to it is not being read as a figure.
A definition list, because that is what it is: dt is the question, dd is the answer.
The answer goes up one step to 19/600 — enough to be the thing your eye lands on,
not so much that it competes with the section's own heading. */
.spec { margin: 30px 0 0; max-width: 620px; }
.spec > div { display: grid; grid-template-columns: minmax(0, 1fr) auto;
column-gap: 24px; align-items: baseline;
padding: 15px 0; border-top: 1px solid var(--hair); }
.spec dt { margin: 0; font-size: var(--ph-fs-17); line-height: var(--ph-lh-17);
color: var(--ph-text-2); }
.spec dd { margin: 0; font-size: var(--ph-fs-19); line-height: var(--ph-lh-19);
font-weight: var(--ph-w-600); letter-spacing: var(--ph-tr-19-400);
text-align: right; }
.section-black .spec > div { border-color: rgba(255,255,255,.18); }
.section-black .spec dt { color: var(--ph-tertiary); }
.section-black .spec dd { color: var(--ph-white); }
/* A ≥1024 gesture, and it says so. At 800 two columns are 320 and 300px, and a
32-point heading beside a 24-point paragraph in 300px is not a composition, it is a
squeeze. Below this the section is byte-for-byte what it is today. */
@media (max-width: 1023px) {
.opener { grid-template-columns: minmax(0, 1fr); }
.opener > .opener-t, .opener > .lede { grid-column: 1; }
.opener > .lede { margin-top: 20px;
font-size: var(--ph-fs-24); line-height: var(--ph-lh-24); }
}
@media (max-width: 799px) {
.opener > .lede { font-size: var(--ph-lead-size); line-height: var(--ph-lead-lh); }
}
/* ---- Buttons & links ---- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
height: var(--ph-btn-h); padding-inline: var(--ph-btn-px);
border-radius: var(--ph-r56); background: var(--ph-accent); color: var(--ph-white) !important;
font-family: var(--ph-font); font-size: var(--ph-fs-17); font-weight: var(--ph-w-400);
text-decoration: none !important; border: 0; cursor: pointer;
}
.btn:hover { background: var(--ph-accent-hover); }
.btn:active { background: var(--ph-accent-active); }
.btn.small { height: var(--ph-btn-sm-h); padding-inline: var(--ph-btn-sm-px); font-size: var(--ph-fs-14); }
.btn.ghost { background: var(--ph-white); color: var(--ph-text-1) !important; border: 1px solid var(--ph-line); }
/* Outlined controls fill with the brand blue on hover, not grey and not black.
Can, 2026-08-13: "üstüne imleç geldiğinde siyah değil mavi olsun bu tarz
butonların içi". The !important on .btn.ghost's colour is why the hover needs
one too.
The fill is --ph-accent-HOVER, not the resting --ph-accent: it is the difference
between "this button filled in" and "this button became a different button" —
resting { background: transparent; color: #0066CC; border-color: #0066CC }, hover
{ background: #0076DF; color: #fff; border-color: transparent }. Bugra sent the
before/after of exactly this control on 2026-08-20 and asked for it by name. The border goes transparent rather than blue so nothing draws a second edge
a shade off the fill; the 1px is still there, so no measurement moves. */
.btn.ghost:hover {
background: var(--ph-accent-hover); border-color: transparent;
color: var(--ph-white) !important;
}
.btn.ghost:active { background: var(--ph-accent-active); border-color: transparent; }
.btn.disabled { background: var(--ph-surface); color: var(--ph-tertiary) !important;
border: 1px solid var(--ph-line); pointer-events: none; }
.link-more { font-size: var(--ph-fs-17); }
/* The chevron was `content: " ›"` — a plain space, which renders at the element's
own tracking and reads as if the glyph is stuck to the last letter. Can: "neden bi
aşırı bitişik". It also inherited a 21px/600 card title, so it came out heavier than
the word it follows. Both fixed here and on the three other selectors that carry it:
a real gap, and the glyph one weight down at the size it sits beside. */
.link-more:after,
a.card-gray .card-title:after, a.card .card-title:after,
a.compare-side .k:after {
content: "›"; margin-inline-start: .3em;
font-weight: var(--ph-w-400); font-size: .92em; line-height: 1;
display: inline-block; vertical-align: baseline;
}
/* ---- Cards & grids ---- */
.grid { display: grid; gap: var(--ph-gutter); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card { background: var(--ph-white); border-radius: var(--ph-r18); padding: 36px 32px 30px; }
.card-gray { background: var(--ph-surface); border-radius: var(--ph-r18); padding: 32px 30px; }
/* A surface has to differ from the surface it sits on — in colour, or by a border, or by
a shadow. With none of the three the card disappears, and that is exactly what was
shipping: `.card-gray` is #F5F5F7 and `section-gray` is #F5F5F7, so on a grey section
the card had no edge at all. Measured before this rule: 418 such cards site-wide, and
on 23 of 28 pages probed — 22 on /store/, 18 on /testing/carrier-screening/, 15 on
/testing/comprehensive-genomic/. Those pages read as undifferentiated slabs of grey
text, which is what the client meant by "cansız": the page was not short of colour,
its cards had dissolved into the section.
Fixed in COLOUR, not with a border or a shadow. A shadow is out — tokens.json records
`elevation YOK`, and the design system's one exception is a card you can buy from. A
border would add a hairline to 418 cards and make the page busier, not clearer. White
on #F5F5F7 is 3.4 L* of separation using two tokens the system already has, and it
inverts the relationship correctly: on a white section the card is grey, on a grey
section the card is white. Same idea either way round — the card always sits on top.
Not extended to .section-black: a grey card on black already separates by 96 L*, and a
white card there is the "eleven products with no name on them" bug, because
.section-black paints its headings white. */
.section-gray .card-gray { background: var(--ph-white); }
.card-img { border-radius: var(--ph-r18); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
/* A card that is a destination. The "Related tests & services" blocks shipped as
plain divs — three product names, three prices, nothing clickable — so the one
section on the page whose job was to send you onward did not. Same card, made an
anchor: the whole surface is the target, the chevron says so, and the ground
steps one tone on hover rather than lifting, because the token set has no
elevation scale to lift into. */
a.card-gray, a.card { display: block; color: inherit; text-decoration: none;
transition: background var(--ph-dur-fast) var(--ph-ease); }
a.card-gray:hover, a.card:hover { text-decoration: none; background: var(--ph-pill); }
a.card-gray:hover .card-title, a.card:hover .card-title { color: var(--ph-accent-link); }
a.card-gray .card-title:after, a.card .card-title:after { color: var(--ph-accent-link); }
.section-black a.card-gray:hover, .section-black a.card:hover { background: #27272a; }
.dot { width: 64px; height: 64px; border-radius: 50%; }
.pill {
display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
border-radius: var(--ph-r14); background: var(--ph-pill); color: var(--ph-accent-link);
font-size: var(--ph-fs-14); font-weight: var(--ph-w-600);
}
.tag {
display: inline-flex; align-items: center; gap: 9px; height: var(--ph-btn-h);
padding: 0 20px; border-radius: var(--ph-r21); border: 1px solid var(--ph-line);
font-size: var(--ph-fs-14);
}
/* A .tag had a transition and a press state and NO hover, for as long as it has
existed — so 154 of them ("Read →", "Explore →", "Retake quiz", the app's four
nav labels) answered the cursor with nothing but the global underline. It is the
site's outlined pill, so it fills the same way
.btn.ghost does.
⚠️ THE ELEMENT IN THE SELECTOR IS LOAD-BEARING, against this project's own rule
that naming a tag is one generator away from being wrong. Measured 2026-08-20:
.tag is on 154 AND 58 . The spans are captions and spec chips — nothing
you can click. A bare `.tag:hover` would light all 58 of them blue under the
cursor, which is a fake control, exactly what the pro-guard exists to catch. If a
generator ever emits a clickable .tag on some third element, add that element
here; do not widen this to `.tag:hover`. */
a.tag:hover, button.tag:hover {
background: var(--ph-accent-hover); border-color: transparent;
color: var(--ph-white); text-decoration: none;
}
a.tag:active, button.tag:active {
background: var(--ph-accent-active); border-color: transparent;
}
/* ---- Hero split ---- */
/* The BOTTOM is --ph-hero-bottom, not --ph-sec-bottom. tokens.json ›
rhythm.byBreakpoint.*.heroBottom is 52/52/36/28; the property was declared with
exactly those three values at the top of this file and referenced NOWHERE, so every
hero shipped the full section bottom instead — 116/116/92/112, two to four times the
rule, on 119 pages. Corroborated in the client's own frames, measured 2026-08-13 as
the gap from the hero's last element to the bottom edge of the hero's own band:
Find Your Size 47 · Longevity Hub Gut Microbiome 52 · Gut Guide 56 (desktop 1440),
and 27/27/28/30 on the four mobile product frames (390). The frames and the token
agree; the stylesheet was the only thing that did not.
The TOP stays 84px and is NOT var(--ph-hero-bottom)'s partner. tokens.json says the
hero's top padding is 0 and every frame contradicts it: measured from the bottom of
the nav to the first hero line, 55–103px at 1440 (Hub 55/59 · Category Supplements 56
· Shop all 70 · Oral Microbiome 73 · Explore 80 · Homepage 85 · Find Your Size
and How It Works 99 · Ring — Explore 103) and 30–60px at 390. 84 sits inside the
desktop range; at 390 it is above ALL of it, and the frames cluster at three different
values there (30 · 44 · 60) rather than one. Choosing between them is Phenome's, not
this file's — see the session report. Do not "finish the job" by writing 0 here. */
.hero { padding: 84px 0 var(--ph-hero-bottom);
/* Grey at the TOP, white at the bottom — the gradient used to run the other way.
The nav is 80% white with no border, so what makes its edge visible is the
tone of the page behind it, which is why the page ground is #F5F5F7. Against a
white hero the bar's bottom edge measured 6/255 — invisible. Bugra asked for
this on 2026-08-13. It still lands on white where the copy continues, so the
section after it keeps the alternation fix_section_rhythm owns. */
background: linear-gradient(180deg, var(--ph-surface) 0%, var(--ph-white) 100%); }
.hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: 36px; } }
.hero-facts { margin-top: 34px; display: flex; gap: 36px; flex-wrap: wrap; }
.hero-fact .k { font-size: var(--ph-fs-12); font-weight: var(--ph-w-600);
letter-spacing: var(--ph-tr-12-600-caps); color: var(--ph-text-2); }
.hero-fact .v { margin-top: 4px; font-size: var(--ph-fs-17); font-weight: var(--ph-w-600); }
/* No shadow. tokens.json records `elevation YOK` — the measured system has no
elevation scale, so nothing on this site may lift, glow or drop a shadow, and that
constraint is why the motion layer reads as restraint rather than as a theme. This
rule carried `box-shadow: 0 24px 70px rgba(0,0,0,.12)` on 87 pages' heroes, and
.hero-figure below carried the same declaration on two more. NO GATE ON THIS
PROJECT READS COLOUR OR SHADOW, which is the only reason it survived this long;
the client's own frames draw these heroes flat. */
.hero-img { border-radius: var(--ph-r27); overflow: hidden; }
.hero-img img { width: 100%; display: block; }
/* ---- Steps ----
One component for every "how it works" sequence on the site. There used to be
two: .step here, and a .card-gray whose