/* ========================================================================== BioraX 2026 pages — shared stylesheet -------------------------------------------------------------------------- Every page in the redesign: homepage, Programs landing, Program detail, Store and Product. Consumes bx-tokens.css only. Scoped to `.bx-page`, a CLASS rather than an id, so more than one page can wear it. `.bx-page h2` is (0,1,1) against biorax.css's bare `h2` at (0,0,1), which is enough to win without a single !important — and enough to matter, because biorax.css sets colour and font-family directly on h1-h4 and the store runs in dark mode. Anything left to inherit renders white on the light bands. biofit-home.css is now DEAD: no template links it any more. It stopped being loaded the moment home.twig was rewritten, and this comment previously said science and calculator still needed it — they only mention it in their own comments. Left on disk rather than deleted here, so removing it is its own reviewable change. Homepage section order and backgrounds, measured off the mockup: hero #0b0b0b y 0- 879 pillars #074a77 y 879-1058 programs #e8e8e8 y 1061-2665 journey #000000 y 2668-3713 standards #e8e8e8 y 3717-4509 (split, image bleeds right) metrics #074a77 y 4512-4691 faq #e8e8e8 y 4694-5695 cta #010101 y 5798-6062 footer #032338 y 6073-6572 ========================================================================== */ .bx-page { background: var(--bx-dark); color: var(--bx-on-dark); font-family: var(--bx-font-sans); font-size: var(--bx-text-body); line-height: var(--bx-leading-body); -webkit-font-smoothing: antialiased; } .bx-page *, .bx-page *::before, .bx-page *::after { box-sizing: border-box; } .bx-page .wrap { width: 100%; max-width: var(--bx-max); margin-inline: auto; padding-inline: var(--bx-gutter); } .bx-page img { max-width: 100%; display: block; } .bx-page a { color: inherit; text-decoration: none; } .bx-page p { margin: 0; } /* This design has no display serif. biorax.css sets font-family directly on h1-h4, which beats inheritance, so every heading must declare its own or the page silently borrows Fraunces from another stylesheet. */ .bx-page h1, .bx-page h2, .bx-page h3, .bx-page h4 { margin: 0; font-family: var(--bx-font-sans); font-weight: 400; letter-spacing: var(--bx-tracking-tight); line-height: var(--bx-leading-tight); } /* ------------------------------------------------------------- eyebrow -- */ /* A short rule, then letterspaced caps — the mockup uses this on every band. */ /* Colour is declared per band, on the headings themselves. biorax.css sets `color` directly on h1-h4 and the store is in dark mode, so without this every heading on a light band renders white-on-#e8e8e8 — effectively invisible. Inheriting from the band wrapper is not enough because a direct rule beats an inherited value. */ .bx-page .band-light, .bx-page .band-light h1, .bx-page .band-light h2, .bx-page .band-light h3, .bx-page .band-light h4, .bx-page .standards-copy, .bx-page .standards-copy h1, .bx-page .standards-copy h2, .bx-page .standards-copy h3, .bx-page .standards-copy h4 { color: var(--bx-on-light); } .bx-page .hero h1, .bx-page .band-dark h1, .bx-page .band-dark h2, .bx-page .band-dark h3, .bx-page .band-dark h4, .bx-page .band-blue h1, .bx-page .band-blue h2, .bx-page .band-blue h3, .bx-page .band-blue h4, .bx-page .cta-band h2, .bx-page .program h3, .bx-page .site-footer h4 { color: #ffffff; } .bx-page .eyebrow { display: flex; align-items: center; gap: var(--bx-space-3); font-family: var(--bx-font-mono); font-size: var(--bx-text-eyebrow); font-weight: 500; letter-spacing: var(--bx-tracking-eyebrow); text-transform: uppercase; color: var(--bx-accent); margin-bottom: var(--bx-space-4); } .bx-page .eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; flex: none; } .bx-page .eyebrow.center { justify-content: center; } /* --bx-accent is a light blue built for dark bands. On the #e8e8e8 light band it measured 1.92:1 — the worst contrast on the site, and wrong against the design as well: sampling the Programs mockup's eyebrow where it sits on the light band gives #074A77, the deep brand blue, not the accent. Same colour, and 8.0:1 instead of 1.92:1. */ .bx-page .band-light .eyebrow, .bx-page .standards-copy .eyebrow { color: var(--bx-blue); } /* ------------------------------------------------------------- buttons -- */ /* .bx-btn, never .btn — Bootstrap is loaded site-wide and owns that name. Both fills are the same #074a77 in the mockup; there is no second blue. */ .bx-page .bx-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border: 1px solid transparent; border-radius: var(--bx-radius-btn); font-size: var(--bx-text-sm); font-weight: 500; cursor: pointer; transition: background .25s var(--bx-expo), border-color .25s var(--bx-expo); } .bx-page .bx-btn-primary { background: var(--bx-blue); color: #fff; } .bx-page .bx-btn-primary:hover { background: var(--bx-blue-hover); color: #fff; } .bx-page .bx-btn-outline { background: transparent; border-color: #FFFFFF59; /* supplied value; 0x59 is .349, not the .34 this guessed */ color: var(--bx-on-dark); } .bx-page .bx-btn-outline:hover { border-color: #fff; } .bx-page .bx-btn-outline-dark { background: transparent; border-color: rgba(11, 11, 11, 0.34); color: var(--bx-on-light); } .bx-page .bx-btn-outline-dark:hover { border-color: var(--bx-on-light); } /* Figma puts the hero's two CTAs 20.46 apart (217:29743 ends at 329, 217:29745 starts at 349.46) and the closing band's 19 apart. 12 was neither. */ .bx-page .btn-row { display: flex; flex-wrap: wrap; gap: 20.46px; } /* Supplied spec: 229x47, radius 15. Scoped to .btn-row — the CTA pair in the hero, the CTA band, the category pages and the wishlist — so it does not resize block-width form submits or the product card's Add to Cart, which were not part of that spec. max-width keeps 229px from overflowing a narrow phone; .btn-row already wraps. */ .bx-page .btn-row .bx-btn { width: 229px; max-width: 100%; height: 47px; padding: 0 20px; border-radius: var(--bx-radius-btn); } .bx-page .btn-row.center { justify-content: center; } /* ----------------------------------------------------------------- nav -- */ /* Transparent, sitting over the hero rather than above it — and sticky. `fixed`, not `sticky`, because this nav lives INSIDE .hero: a sticky element only pins within its own containing block, so it would come unstuck the moment the hero scrolled past. It costs no layout shift, since the nav was already out of flow as `absolute`. */ .bx-page .site-nav { /* A1. 77 in every frame — 111:1483, 79:305, 85:862. It was drawing 76. */ min-height: 77px; position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .25s var(--bx-expo), box-shadow .25s var(--bx-expo); } /* Off the top the nav sits over page content rather than the hero photograph, so it needs a ground of its own — the links and logo are drawn white and would otherwise land unreadable on the light band. */ .bx-page .site-nav.is-stuck { background: rgba(11, 11, 11, 0.92); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.28); } @media (prefers-reduced-motion: reduce) { .bx-page .site-nav { transition: none; } } /* Pages with no hero behind the nav — the assessment and the prescription step — need a ground of their own. The nav is drawn in white for a dark photograph; over a light band the links and the logo are all but invisible. */ /* This one IS in flow at the top of the page, so sticky is correct here: it holds its own space and then pins, with no compensating padding needed. */ .bx-page .site-nav--solid { position: sticky; top: 0; background: var(--bx-dark); } .bx-page .site-nav--solid.is-stuck { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); } .bx-page .nav-bar { display: flex; align-items: center; gap: var(--bx-space-6); min-height: 76px; } .bx-page .brand { flex: none; } .bx-page .brand img { width: 141px; height: auto; display: block; } /* mockup: 141x23 at a 1521 page */ .bx-page .nav-links { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.6rem); margin-inline: auto; font-size: var(--bx-text-sm); color: var(--bx-on-dark-muted); } .bx-page .nav-links a { transition: color .2s var(--bx-expo); } .bx-page .nav-links a:hover, .bx-page .nav-links a.is-active { color: #fff; font-weight: 500; } /* Search / wishlist / cart. Store and Product pages only — the approved design puts these where someone is shopping and nowhere else. */ .bx-page .nav-tools { display: flex; align-items: center; gap: 10px; /* + 6px hit-area padding either side = 22px between bounds */ /* Full white, not the muted nav-link colour: at 66% these read as absent rather than as quiet. The design draws them at full contrast. */ color: #fff; } /* Measured off the Store landing mockup at its 1521px width: search 18x18, heart 22x18 (WIDER than tall — the design heart is plump, not the narrow pointed one I had drawn), cart pill 30x20, and 22px between the icons' visual bounds. The 6px padding is hit area only; it is subtracted from the flex gap so the bounds still land 22px apart. Stroke measured at 1.5px; mine was 2 on a 24 viewBox drawn at 23px, noticeably heavier. */ .bx-page .nav-tool { display: grid; place-items: center; padding: 6px; opacity: 0.92; transition: opacity .2s var(--bx-expo); } .bx-page .nav-tool:hover { opacity: 1; } .bx-page .nav-tool svg { height: 18px; width: auto; } .bx-page .nav-cart__count { min-width: 30px; height: 20px; padding-inline: 7px; display: grid; place-items: center; border-radius: var(--bx-pill); background: #fff; /* Sampled #074A77 out of the mockup's pill — the count is blue, not the near-black this was using. */ color: var(--bx-blue); font-size: 0.75rem; font-weight: 600; line-height: 1; } .bx-page .nav-account { flex: none; /* F1. Figma 217:29900 / 85:868 / 79:305 all give this 229x47 at radius 15, signed in or out — the box is specified regardless of whether the label reads "My Account" or "Login". It was drawing 98x42 as a pill. No x is set: the button's right edge already sits on the 1420 gutter, and the frame's 1192 + 229 = 1421, so correcting the width moves it into position on its own. */ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 229px; height: 47px; padding: 0 30px; border-radius: var(--bx-radius-btn); background: rgba(11, 30, 43, 0.86); border: 1px solid rgba(255, 255, 255, 0.16); font-size: var(--bx-text-sm); font-weight: 500; color: #fff; transition: background .25s var(--bx-expo); } .bx-page .nav-account:hover { background: var(--bx-blue); color: #fff; } /* Signed-out login control. Opens on hover AND on focus, so it is reachable from the keyboard — a menu that only exists under a pointer is not a menu. The padding-top on the panel keeps the pointer inside the hover area while travelling from the trigger down to the items. */ .bx-page .nav-login { position: relative; flex: none; } .bx-page .nav-login__menu { position: absolute; top: 100%; right: 0; z-index: 60; min-width: 190px; margin-top: 8px; padding: 8px; border-radius: var(--bx-radius); background: var(--bx-blue-deep); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--bx-expo), transform .2s var(--bx-expo), visibility .2s; } .bx-page .nav-login:hover .nav-login__menu, .bx-page .nav-login:focus-within .nav-login__menu { opacity: 1; visibility: visible; transform: translateY(0); } /* Bridges the gap between trigger and panel so the menu does not close as the pointer crosses it. */ .bx-page .nav-login__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .bx-page .nav-login__menu a { display: block; padding: 10px 14px; border-radius: var(--bx-radius); font-size: var(--bx-text-sm); color: rgba(255, 255, 255, 0.86); } .bx-page .nav-login__menu a:hover, .bx-page .nav-login__menu a:focus-visible { background: var(--bx-blue); color: #fff; } .bx-page .nav-toggle { display: none; background: none; border: 0; padding: 6px; color: #fff; cursor: pointer; } .bx-page .nav-toggle svg { width: 24px; height: 24px; } .bx-page .mobile-menu { display: none; } /* ---------------------------------------------------------------- hero -- */ .bx-page .hero { position: relative; min-height: clamp(560px, 57.8vw, 878px); /* supplied: 1519 x 878 */ display: flex; align-items: center; overflow: hidden; background: var(--bx-dark); } .bx-page .hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; } /* No scrim on desktop, because the approved design has none. Measured: the mockup's hero is pixel-identical to the raw banner across the full width (deltas of +0.1 to +0.5 luminance, i.e. encoding noise). The artwork is already dark enough — 6 to 16 luminance — for white type to sit on it directly. An earlier left-to-right gradient here put ~70% black over the brand chevron and effectively erased it. The mobile rule below still adds one, because the crop changes at that aspect and the type can land on the lit part of the photograph. */ .bx-page .hero::after { content: none; } /* The copy width is capped on the CHILDREN, not on .hero-content itself. .hero-content is also the .wrap, which carries margin-inline:auto and 100px of padding — a max-width here would centre the block AND have the padding eaten out of it, leaving 500px of text width sitting at x=511 instead of a left-aligned column starting at x=100. */ .bx-page .hero-content { position: relative; z-index: 1; padding-block: var(--bx-space-8); } .bx-page .hero-content > * { /* Geist sets a little wider than the mockup's face, so line one needs ~700px to stay on one line at this size. Revisit once the Figma face is known. */ max-width: 700px; } .bx-page .hero h1 { font-size: var(--bx-text-hero); font-weight: 300; margin-bottom: var(--bx-space-5); } .bx-page .hero .lede { color: var(--bx-on-dark-muted); max-width: 48ch; margin-bottom: var(--bx-space-7); font-size: var(--bx-text-sm); } /* A small "Overview" label between the h1 and the lede on the inner pages. */ .bx-page .hero-overline { font-size: var(--bx-text-sm); color: var(--bx-on-dark-muted); margin-bottom: var(--bx-space-3); } /* ------------------------------------------------- programmes carousel -- */ /* Full-bleed on purpose: the row runs off both edges so it reads as scrollable without needing arrows drawn on top of it. */ /* Two class names, not one: `.section-head { max-width: 62ch }` is declared further down this file, so at equal specificity it would win and cap the whole header at ~465px — which is what wrapped the heading and dragged the counter in beside the paragraph. */ .bx-page .section-head.programs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bx-space-6); max-width: none; /* Figma measures the heading block at ~186 against the 144 it renders at, and the section at 1117. Scoped here and on .programs-band below rather than on --bx-section-y, which every section on every page reads. */ margin-bottom: 15px; } /* .section.programs-band, not .programs-band: `.section` sets padding-block from --bx-section-y and is declared further down, so at equal specificity it wins. Same trap as .section-head's max-width above. */ /* Supplied, band-relative: rail at 283, buttons at 969, band 1117 tall. 124 + head + 15 = 283, rail 567 ends at 850, then 119 to the buttons. */ .bx-page .section.programs-band { padding-block: 124px 0; } /* A px width, not ch. `ch` resolves against THIS element's font-size (0.95rem), so 62ch came out ~465px and wrapped the 41px heading onto two lines. */ .bx-page .section-head.programs-head > div:first-child { flex: 1 1 auto; max-width: 660px; } .bx-page .programs-counter { flex: none; display: flex; align-items: center; gap: var(--bx-space-5); padding: 11px 18px; border-radius: var(--bx-pill); background: var(--bx-black); color: #fff; font-size: var(--bx-text-xs); } .bx-page .programs-counter b { font-weight: 500; color: var(--bx-on-dark-muted); } .bx-page .programs-rail { display: flex; gap: 40px; /* measured off the Figma frame between 368px tiles */ overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--bx-gutter); scrollbar-width: none; /* The hover panel hangs below its tile and was being cut off mid-sentence. `overflow-x: auto` is the cause: CSS resolves `visible` on the other axis to `auto` whenever one axis scrolls, so declaring only overflow-x still made this a vertical scroller, and an absolutely positioned panel does not contribute to the height it would need. overflow-y: clip + overflow-clip-margin does not help — a scroll container ignores the clip margin, and the declaration computes to `hidden` (measured, not assumed). So the panel's overhang is reserved as real bottom padding, which puts it inside the scrollport, and then taken back with an equal negative margin so the page rhythm is unchanged. The reclaimed strip does not swallow clicks: a closed panel is `visibility: hidden` and untestable, and the following in-flow content hit-tests above the rail's padding. */ /* 177 is the panel's actual overhang (183 tall, offset -6). 200 with 64px of section padding under it made the rail 646 against the supplied 567, and that surplus is the empty band that showed between the cards and the buttons. 8 + 373.7 + 8 + 177 = 567. */ padding-block: var(--bx-space-2) calc(var(--bx-space-2) + var(--bx-rail-overhang)); /* The reservation is NOT taken back with a negative margin. The Figma frame puts the section's buttons roughly 287px below the resting cards, i.e. the design reserves the expanded panel's space rather than overlaying it, and the section measures 1117 tall with that space present. The padding alone is what stops the clipping; the negative margin only hid it. */ } .bx-page .programs-rail::-webkit-scrollbar { display: none; } .bx-page .program-tile { position: relative; flex: 0 0 auto; width: 368px; /* Figma: tile 368 wide */ scroll-snap-align: start; color: var(--bx-on-light); /* A white card with the image inset, matching the design — not a bare photograph butted against its neighbours. */ background: #fff; border-radius: var(--bx-radius); padding: var(--bx-space-3) var(--bx-space-3) var(--bx-space-4); transition: box-shadow .3s var(--bx-expo), transform .3s var(--bx-expo); } .bx-page .program-tile:hover, .bx-page .program-tile:focus-visible { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13); transform: translateY(-2px); } .bx-page .program-tile__media { display: block; overflow: hidden; border-radius: 3px; background: #ddd; } .bx-page .program-tile__media img { width: 100%; /* height:auto is load-bearing. maps to CSS presentational hints; this rule overrode `width` but not `height`, so height stayed 360px, which made the box non-auto and disabled aspect-ratio outright — the tiles rendered tall portrait instead of the near-square the design shows. */ height: auto; /* 344x311 is the media box inside a 368px tile that lands the tile at the Figma height of 512 with its overview panel open. object-fit crops rather than distorting — the source is 260x213. */ aspect-ratio: 344 / 311; object-fit: cover; /* Resting tiles sit back: desaturated and knocked back against the white card, the way the mockup shows them. The one being pointed at comes forward to full contrast. */ filter: grayscale(1); opacity: 0.55; transition: filter .4s var(--bx-expo), opacity .4s var(--bx-expo), transform .5s var(--bx-expo); } .bx-page .program-tile:hover .program-tile__media img, .bx-page .program-tile:focus-visible .program-tile__media img { filter: none; opacity: 1; transform: scale(1.03); } .bx-page .program-tile__name { display: block; margin-top: var(--bx-space-3); padding-inline: 2px; font-size: var(--bx-text-sm); color: var(--bx-on-light-muted); transition: color .25s var(--bx-expo); } .bx-page .program-tile:hover .program-tile__name, .bx-page .program-tile:focus-visible .program-tile__name { color: var(--bx-on-light); font-weight: 500; } /* The overview panel. In the mockup exactly one tile shows it, sitting over the tiles beside it — that tile is hovered, not specially authored. */ .bx-page .program-tile__panel { position: absolute; top: 100%; left: 0; width: 100%; z-index: 3; display: flex; flex-direction: column; gap: var(--bx-space-2); margin-top: -6px; padding: var(--bx-space-4); background: #fff; border-radius: var(--bx-radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--bx-expo), transform .25s var(--bx-expo), visibility .25s; } .bx-page .program-tile:hover .program-tile__panel, .bx-page .program-tile:focus-visible .program-tile__panel { opacity: 1; visibility: visible; transform: translateY(0); } .bx-page .program-tile__label { font-family: var(--bx-font-mono); font-size: var(--bx-text-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bx-on-light-muted); } .bx-page .program-tile__blurb { font-size: var(--bx-text-xs); line-height: 1.5; } .bx-page .program-tile__more { font-size: var(--bx-text-xs); font-weight: 500; color: var(--bx-blue); } /* No hover pointer means the panel can never be opened, so show it inline. */ @media (hover: none) { /* The panel is in flow here, so it sizes the rail itself and the overhang reservation must be given back — otherwise the negative margin drags the next section up over the tiles. */ .bx-page, .bx-page .programs-rail { --bx-rail-overhang: 0px; } .bx-page .program-tile__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding-inline: 0; background: transparent; } } /* ------------------------------------------------------------- pillars -- */ .bx-page .band-blue { background: var(--bx-blue); color: var(--bx-on-blue); } .bx-page .pillars { display: grid; grid-template-columns: repeat(3, 1fr); } .bx-page .pillar { padding: var(--bx-space-7) clamp(1.25rem, 3vw, 2.75rem); border-left: 1px solid var(--bx-line-blue); } .bx-page .pillar:first-child { border-left: 0; padding-left: 0; } .bx-page .pillar h3 { font-size: 1.15rem; font-weight: 400; margin-bottom: var(--bx-space-3); } .bx-page .pillar p { font-size: var(--bx-text-xs); color: var(--bx-on-blue-muted); line-height: 1.55; } /* --------------------------------------------------------------- light -- */ .bx-page .band-light { background: var(--bx-light); color: var(--bx-on-light); } .bx-page .band-dark { background: var(--bx-black); color: var(--bx-on-dark); } .bx-page .section { padding-block: var(--bx-section-y); } .bx-page .section-head { max-width: 62ch; margin-bottom: var(--bx-space-7); } .bx-page .section-head.center { margin-inline: auto; text-align: center; } .bx-page .section-head h2 { font-size: var(--bx-text-h2); font-weight: 400; margin-bottom: var(--bx-space-4); } .bx-page .band-light .section-head p { color: var(--bx-on-light-muted); font-size: var(--bx-text-sm); } .bx-page .band-dark .section-head p { color: var(--bx-on-dark-faint); font-size: var(--bx-text-sm); } /* ------------------------------------------------------------ programs -- */ /* Image tiles with the label and title laid over the photograph — there is no separate body panel under the image in this design. */ .bx-page .program-grid { display: grid; /* Figma 79:36/79:43/79:49 are 440, 440 and 439 wide in a 1320 wrap: three 440s with no gutter at all. The 4px gap here made each card 437.33. The card art butts edge to edge in the frame, so the gap goes rather than the wrap widening. */ grid-template-columns: repeat(3, 1fr); gap: 0; } .bx-page .program { position: relative; display: block; /* Figma 79:36 is 440x360, not 438. At 440 wide the old ratio drew 362. */ aspect-ratio: 440 / 360; overflow: hidden; background: #111; } .bx-page .program img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--bx-expo); } .bx-page .program:hover img { transform: scale(1.04); } .bx-page .program::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.10) 34%, rgba(0,0,0,0.72) 100%); } .bx-page .program-body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: var(--bx-space-5); color: #fff; } .bx-page .program-label { font-family: var(--bx-font-mono); font-size: var(--bx-text-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bx-accent); } .bx-page .program h3 { font-size: var(--bx-text-h3); font-weight: 500; } /* The blurb is a hover reveal. In the mockup exactly one card shows its description and its title sits correspondingly higher — that card is hovered, not specially authored. Anything without a hover pointer gets it permanently, or the copy would be unreachable on a phone. */ .bx-page .program-text { display: block; } .bx-page .program-text p { font-size: var(--bx-text-xs); color: rgba(255, 255, 255, 0.74); line-height: 1.5; max-width: 34ch; max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height .35s var(--bx-expo), opacity .25s var(--bx-expo), margin-top .35s var(--bx-expo); } .bx-page .program:hover .program-text p, .bx-page .program:focus-visible .program-text p { max-height: 7em; margin-top: 8px; opacity: 1; } @media (hover: none) { .bx-page .program-text p { max-height: 7em; margin-top: 8px; opacity: 1; } } /* ------------------------------------------------------------- journey -- */ .bx-page .journey { border-top: 1px solid var(--bx-line-dark); } .bx-page .step { display: grid; grid-template-columns: 90px 1fr; gap: var(--bx-space-4); padding-block: var(--bx-space-6); border-bottom: 1px solid var(--bx-line-dark); } .bx-page .step-num { font-family: var(--bx-font-mono); font-size: var(--bx-text-xs); color: var(--bx-accent); padding-top: 3px; } .bx-page .step h3 { font-size: var(--bx-text-h3); font-weight: 500; margin-bottom: var(--bx-space-3); } .bx-page .step p { font-size: var(--bx-text-xs); color: var(--bx-on-dark-faint); max-width: 76ch; } /* ----------------------------------------------------------- standards -- */ /* Copy left on the light ground, photograph bleeding off the right edge. */ .bx-page .standards { display: grid; /* Figma: the photograph starts at X 753 and is 767 wide in a 1520 frame, so the split is not even — the image takes slightly more than half. */ grid-template-columns: 753fr 767fr; align-items: stretch; background: var(--bx-light); } .bx-page .standards-copy { display: flex; flex-direction: column; justify-content: center; /* The copy starts at x=100 in every frame that carries this section — 217:36241/36242 and 150:133/134 on the programme pages, 79:115/116 on the homepage — which is also the gutter every other section on the page uses. The old symmetric clamp resolved to 68.4 at 1520 and put this band 32px left of everything above and below it. 6.25rem is 100px; 6.58vw lands on the same 100 at 1520 so it stays fluid below that. */ padding-block: var(--bx-section-y); padding-inline: clamp(1.25rem, 6.58vw, 6.25rem) clamp(1.25rem, 4.5vw, 4.5rem); margin-left: auto; max-width: calc(var(--bx-max) / 2); width: 100%; } .bx-page .standards-copy h2 { font-size: var(--bx-text-h2); font-weight: 400; margin-bottom: var(--bx-space-4); } /* 16/25.6 in the frames, not the 14/22.68 body default; the measure runs to 594 (programme) / 585 (homepage) rather than the 46ch that clipped it to 427. */ .bx-page .standards-copy p { color: var(--bx-on-light-muted); font-size: 16px; line-height: 25.6px; margin-bottom: var(--bx-space-7); max-width: 594px; } .bx-page .standards-copy .bx-btn { align-self: flex-start; } /* Programme pages pair the blue primary with a DARK-FILLED secondary (217:36256 / 150:138: #051824 ground, white label, translucent white hairline) — not the light-ground outline button this shares elsewhere. The homepage's version of this section carries a single primary, so it is left out of the selector rather than overridden back. */ .bx-page--program .standards .bx-btn-outline-dark { background: #051824; border-color: rgba(255, 255, 255, 0.35); color: #fff; } .bx-page--program .standards .bx-btn-outline-dark:hover { background: #0a2a3d; border-color: rgba(255, 255, 255, 0.55); } /* 796px is the section height in the design, and it is also the natural height of outcomes-767.webp (767x796) — the design column is half of a 1534px frame, so the photograph sits at 1:1 there. The visual drives the row and .standards-copy centres itself in it. 460px was my own placeholder and made the band 336px short. */ .bx-page .standards-visual { position: relative; min-height: 796px; } .bx-page .standards-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------- metrics -- */ .bx-page .metrics { display: grid; grid-template-columns: repeat(3, 1fr); } /* The two bands that use this component are DIFFERENT designs, and #112 flattened both into the homepage's. Restored here. Programme pages (150:57, 217:36196) are a stat block: the figure at 40px on its own line, the caption at ~13px underneath, both centred. That is the default below. The homepage (79:117) is not that. 79:120 is a SINGLE text node reading "98% Purity" at 21px, sitting on one line beside two 13.5px claims with no figure at all — so it is scoped to .bx-page--home rather than applied to everything. Applying the homepage treatment everywhere pushed every programme caption to 21px, which is what made "Average Body Weight Reduction" wrap: it needed 388 of a 352 content box. At 13.1px it needs 224. */ .bx-page .metric { padding: var(--bx-space-7) clamp(1.25rem, 3vw, 2.75rem); border-left: 1px solid var(--bx-line-blue); text-align: center; } .bx-page .metric:first-child { border-left: 0; } .bx-page .metric .num { display: block; font-size: 40px; font-weight: 300; line-height: 1.1; color: #fff; /* A figure is one token: "12-15%" and the en-dash ranges on five other programmes must never break at their hyphen. */ white-space: nowrap; } .bx-page .metric .lbl { display: block; font-size: 13.1px; line-height: 18.37px; color: var(--bx-on-blue-muted); margin-top: var(--bx-space-3); } /* Homepage only — one centred phrase per cell, no stacked figure. */ .bx-page--home .metric { display: flex; align-items: center; justify-content: center; gap: 0.32em; } .bx-page--home .metric .num { display: inline; font-size: 21px; font-weight: 500; line-height: 20.25px; flex: 0 0 auto; } /* All three cells share one treatment by request. The frame sets 79:120 at 21px and 79:122 / 79:125 at 13.5px, so this is a deliberate deviation: the band reads as one row rather than a figure with two footnotes beside it. Colour was already white on all three in the frame. */ .bx-page--home .metric .lbl { display: inline; font-size: 21px; font-weight: 500; line-height: 20.25px; margin-top: 0; color: #fff; } /* ----------------------------------------------------------------- faq -- */ .bx-page .faq-list { border-top: 1px solid var(--bx-line-light); } .bx-page .faq-item { border-bottom: 1px solid var(--bx-line-light); } .bx-page .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--bx-space-4); background: none; border: 0; color: var(--bx-on-light); font-family: inherit; font-size: var(--bx-text-sm); font-weight: 500; text-align: left; padding: var(--bx-space-5) 0; cursor: pointer; } .bx-page .faq-q .icon { flex: none; font-size: 1.2rem; line-height: 1; color: var(--bx-on-light-muted); transition: transform .25s var(--bx-expo); } .bx-page .faq-item.open .faq-q .icon { transform: rotate(45deg); } .bx-page .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--bx-expo); } .bx-page .faq-item.open .faq-a { grid-template-rows: 1fr; } .bx-page .faq-a > div { overflow: hidden; } .bx-page .faq-a p { font-size: var(--bx-text-xs); color: var(--bx-on-light-muted); line-height: 1.7; padding-bottom: var(--bx-space-5); max-width: 82ch; } /* ------------------------------------------------------------ cta band -- */ .bx-page .cta-band { position: relative; overflow: hidden; text-align: center; padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--bx-cta); } .bx-page .cta-band .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; } .bx-page .cta-band::after { content: ''; position: absolute; inset: 0; background: rgba(1,1,1,0.5); } .bx-page .cta-band .wrap { position: relative; z-index: 1; } .bx-page .cta-band h2 { font-size: var(--bx-text-h2); font-weight: 300; margin-bottom: var(--bx-space-6); } /* -------------------------------------------------------------- footer -- */ .bx-page .site-footer { margin-top: 0; /* biorax.css puts 80px on every