@scope (.gl-skincare-reference) {/**
* The approved design's stylesheet, ported verbatim from
* design/bao-laboratory-ai_10.html so the rendering is identical.
*
* Two deliberate substitutions:
* - `.brand .logo` masked the platform-stack illustration (a 396 KB PNG
* embedded twice); it now masks the real BAO wordmark.
* - Google Fonts is replaced by self-hosted faces in fonts.css.
*
* Edit the design file and re-port rather than diverging here.
*/
/* ============================================================
BAO LABORATORY — PHYSICAL AI
Design system: "Porcelain & Instrument"
Ink machine-bay bands bookend a cleanroom-porcelain body.
One accent: serum amber, used as instrument light.
============================================================ */
:scope {
--ink: #0c0d10;
--ink-2: #13151b;
--ink-3: #1b1e26;
--porcelain: #f1efea;
--porcelain-2: #e7e4dc;
--paper: #faf9f6;
--steel: #6e747e;
--steel-2: #9ba0a8;
--amber: #e8a03c;
--amber-hi: #f2b961;
--amber-deep: #8a5d14;
--t-dark: #16171b;
--t-dark-2: #4b4f57;
--t-light: #edeae2;
--t-light-2: #a9adb4;
--line-d: rgba(13, 14, 17, 0.16);
--line-d-soft: rgba(13, 14, 17, 0.09);
--line-l: rgba(237, 234, 226, 0.17);
--line-l-soft: rgba(237, 234, 226, 0.09);
--disp: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'Fragment Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
--nav-h: 76px;
--gutter: clamp(20px, 4.5vw, 72px);
--max: 1520px;
--ease: cubic-bezier(0.65, 0.05, 0.18, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--disp);
font-size: 16.5px;
line-height: 1.6;
background: var(--ink);
color: var(--t-light);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
::selection {
background: var(--amber);
color: var(--ink);
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--amber);
outline-offset: 3px;
border-radius: 2px;
}
.skip-link {
position: fixed;
top: -60px;
left: 16px;
z-index: 400;
background: var(--amber);
color: var(--ink);
padding: 0.7rem 1.2rem;
border-radius: 4px;
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: top 0.25s;
}
.skip-link:focus {
top: 14px;
}
/* ---------- type utilities ---------- */
.disp {
font-family: var(--disp);
font-stretch: 116%;
font-weight: 590;
letter-spacing: -0.015em;
line-height: 1.02;
}
.mono {
font-family: var(--mono);
font-weight: 400;
}
.eyebrow {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--steel);
white-space: nowrap;
}
.eyebrow::before {
content: '';
width: 26px;
height: 1px;
background: var(--amber);
flex: none;
}
.dark .eyebrow {
color: var(--steel-2);
}
.h-xl {
font-size: clamp(2.7rem, 6.6vw, 6.4rem);
}
.h-lg {
font-size: clamp(2.1rem, 4.4vw, 3.9rem);
}
.h-md {
font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.lede {
font-size: clamp(1.02rem, 1.35vw, 1.22rem);
line-height: 1.66;
font-weight: 420;
max-width: 56ch;
}
.dark .lede {
color: var(--t-light-2);
}
.light .lede {
color: var(--t-dark-2);
}
.line {
display: block;
overflow: hidden;
}
.line-in {
display: block;
will-change: transform;
}
/* ---------- layout ---------- */
.wrap {
max-width: var(--max);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
section {
position: relative;
z-index: 2;
}
.light {
background: var(--porcelain);
color: var(--t-dark);
}
.dark {
background: transparent;
color: var(--t-light);
}
.dark.solid {
background: var(--ink);
}
.sec-head {
display: grid;
gap: 26px;
margin-bottom: clamp(44px, 6vw, 84px);
}
.sec-head .h-lg {
max-width: 22ch;
}
/* ---------- grain + fixed stage ---------- */
#stage {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.9s ease;
}
#stage.on {
opacity: 1;
}
#stage video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% 50%;
display: block;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%);
mask-image: linear-gradient(90deg, transparent 0, #000 32%);
}
@media (max-width: 980px) {
#stage video {
height: 58svh;
object-fit: contain;
object-position: 50% 38%;
opacity: 0.95;
-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
}
}
.grain {
position: fixed;
inset: -40px;
z-index: 60;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url('data:image/svg+xml, directly after an , skipping a
level. They are now ; this keeps their original appearance. */
.tb-cell h3 {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--steel);
margin-bottom: 18px;
font-weight: 400;
}
/* ------------------------------------------------------------------
4. Headline amplifier typography.
The reference splits the h1 into per-character spans styled
`display: inline-block`. Inline-blocks suppress kerning, render word
spaces ambiguously, and are legal line-break points — so the headline
rendered "Althatma / kes things." at rest, with a break inside "makes".
`display: inline` restores native shaping: kerning applies, spaces are
real spaces, and breaks can only happen at them. `font-variation-settings`
(the amplifier's actual effect) works on inline boxes; only the 7% scale
pop is lost, since transforms don't apply to inline — an accepted trade.
Pairs with [patch:headline-split-on-intent] in design-motion.js.
------------------------------------------------------------------ */
.kch {
display: inline;
}
/* ------------------------------------------------------------------
6. Mobile hero — the formula tray buried the chips.
The reference absolute-positions the tray full-width at bottom: 76px on
small screens, directly over the chips row ("<5 MIN PER BATCH" was
completely hidden behind it). The hero already grows with its content, so
reserving real vertical space for the tray and dropping it into that
reserve keeps every element visible. The scroll cue would now sit inside
the tray's band (it only rendered between 560–760px anyway), and the tray
itself invites the same gesture — so it is retired on those widths.
------------------------------------------------------------------ */
@media (max-width: 760px) {
#hero {
padding-bottom: 250px;
}
#lensTray {
bottom: 18px;
}
.scroll-cue {
display: none;
}
}
/* ------------------------------------------------------------------
7. Ghost type contrast.
The press names and the footer CTA rest at rgba alpha .08/.05 — measured
1.17:1 and 1.09:1, effectively invisible without their outline stroke,
which contrast tooling cannot evaluate. Both are large text, so AA asks
3:1. Resting fills rise to computed-passing values (3.09:1+); the
pointer-proximity swell to full strength is unchanged, and the JS that
drives it per-frame is patched to the same floor ([patch:ghost-contrast]).
The outline stroke stays for crispness.
------------------------------------------------------------------ */
html.js .press.ghost .pname {
color: rgb(23 24 28 / 52%);
}
html.js .fc-link.ghost .fcg {
color: rgb(237 234 226 / 42%);
}
/* ------------------------------------------------------------------
8. Manufacturing-cell fallback poster.
The reference styles a `.no-webgl` state but never sets the class and
ships no fallback element — a failed WebGL context meant an empty stage
and a stranded "INITIALIZING CELL" label. main.ts now detects context
failure, and this poster (17 KB, captured from the real scene at its
settled loop pose) stands in behind the loop text. It appears ONLY under
.no-webgl: with WebGL running, the hero deliberately shows no robot until
the loop begins, and a permanent background would contradict that.
------------------------------------------------------------------ */
/* `cell-poster` is a deliberate substitution rather than a capability
failure: reduced-motion, Save-Data and low-memory visitors are shown the
same still of the machine instead of paying a ~1s main-thread stall to
render it at rest. It shares this fallback with the genuine no-WebGL case;
only the reason differs. See main.ts. */
html.cell-poster #heroRobot,
html.no-webgl #heroRobot {
background: url('/poster/robot-poster.webp') 62% 50% / cover no-repeat;
}
html.cell-poster .hr-load,
html.no-webgl .hr-load {
display: none;
}
/* ------------------------------------------------------------------
9. Press wall logos (staging only — see PROVENANCE.md).
When a logo replaces its wordmark, the row's typographic sizing no longer
applies: heights are set per logo in press-logos.ts, because the four have
different cap-height-to-box ratios and equal box heights read as unequal
type. The proximity fill that animates the wordmarks has nothing to grab on
an SVG, so the logo gets the equivalent treatment via opacity instead.
------------------------------------------------------------------ */
/* Visually hidden but exposed to assistive technology. The reference had no
such utility; the press swap needs one to keep the wordmark as the
accessible name once the logo replaces it visually. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* No opacity of its own: the design's proximity tick writes an rgba `color`
on .pname every frame, and the logo inherits it through `currentColor` —
so the fill-on-approach interaction carries over to the artwork intact. */
.pname-logo {
display: inline-flex;
align-items: center;
}
/* Resting state before the proximity tick has run (out of view, no pointer
yet, or reduced motion). Logo artwork has thinner strokes than the wordmark
type it replaces, so it needs a higher floor than the text does to read as
equally present — matched to the JS floor in [patch:ghost-contrast]. */
html.js .press.ghost .pname-logo {
color: rgb(23 24 28 / 74%);
}
.pname-logo svg {
height: var(--logo-h, 30px);
width: auto;
display: block;
}
@media (max-width: 760px) {
.pname-logo svg {
height: calc(var(--logo-h, 30px) * 0.8);
}
}
/* ============================================================================
§13 Footer CTA overflows the document below ~350px
============================================================================
`.fc-link` is `display: inline-flex` and `.fcg` is a flex item, so it
inherits `min-width: auto` and refuses to shrink below its content width —
`white-space` already computes to `normal`, but the text still cannot wrap.
Meanwhile `font-size: clamp(2.4rem, 7vw, 5.4rem)` stops responding below
~343px, where the 7vw term falls under the 2.4rem floor, so the type holds at
38.4px while the viewport keeps narrowing.
Measured at 320px: the CTA is 325px wide at x=20, taking the document to
345px against a 320px viewport — a 25px horizontal scroll. It overflows at
320px and 340px, and is clear from 360px up.
This is the same defect class as §1: a `nowrap`-style constraint widening the
whole document. It only surfaced now because the old partner CTA label is two
characters longer than the "Partner with BAO" it replaced, which means the
reference was one short word away from the same bug.
Releasing the flex minimum lets the label wrap to two lines when it must, and
changes nothing at any width where it already fits.
The container itself deliberately does NOT get `flex-wrap: wrap`: that let
the arrow break onto a third line on its own, stranded under the text. Only
`.fcg` wraps, so the arrow stays beside the label and `align-items: center`
keeps it centred against the two lines. */
.fc-link {
max-width: 100%;
}
.fcg {
min-width: 0;
}
/* ============================================================================
§14 Reveal elements should not hold compositor layers for the page's life
============================================================================
design.css sets `will-change: transform, opacity` on every `[data-reveal]`
element — 31 of them on the homepage. `will-change` is a promise the browser
keeps: each one is promoted to its own compositor layer immediately and holds
that memory until the declaration goes away, which here is never.
The property exists to be applied just before an animation and removed after,
and GSAP already does exactly that for the tweens it runs. A permanent
blanket declaration is the documented misuse, and on a page that also runs a
WebGL scene the memory is not free.
Not a design change: nothing about how the reveals look or move is affected. */
[data-reveal] {
will-change: auto;
}
/* Same misuse on the split headline: design.css declares `will-change:
font-variation-settings, transform` on every character span — one pinned
compositor layer per letter, ~40 on this headline, held for the page's
life. The variation-settings writes are style/layout work that a compositor
layer cannot help with anyway. */
.kch {
will-change: auto;
}
/* ============================================================================
§15 Loop phases must stay readable to assistive technology
============================================================================
The reference animates the four phase articles with GSAP's `autoAlpha`,
which is opacity plus `visibility`. `visibility: hidden` removes an element
from the accessibility tree, so a screen reader found at most one of the
four — and the four carry the product's central claims. They are animated
with plain `opacity` now (see [patch:phases-stay-in-the-tree]).
The phases are stacked in one grid cell, so a faded-out one would otherwise
intercept clicks and text selection meant for the visible one. `visibility`
used to do that job as a side effect; this does it deliberately, without
taking the content out of the tree. */
.loop-phase[data-phase-hidden] {
pointer-events: none;
}
/* ============================================================================
§16 Focus and control boundaries below the contrast minimum
============================================================================
Measured against the actual token values:
- The single `:focus-visible` outline is --amber (#E8A03C). On --ink that is
8.81:1, but on the porcelain sections (#F1EFEA) it is 1.92:1 against a 3:1
minimum for non-text — so on the platform pillars and the nav over light
sections, the focus ring was effectively invisible. WCAG 2.2 SC 1.4.11.
- Form inputs and radio chips draw their only boundary with --line-l
composited on ink: #323334, which is 1.53:1. The native radio is hidden,
so the chip border is the only thing marking an option as an option.
- Amber hover on light grounds is 1.92:1 as text (needs 4.5:1).
--amber-deep (#8A5D14) measures 5.00:1 on porcelain and is already in the
palette, so the light-ground states use it rather than introducing a colour.
The dark-ground states are untouched: they already pass comfortably. */
:focus-visible {
outline-color: var(--amber);
}
.light :focus-visible,
#nav.on-light :focus-visible {
outline-color: #8a5d14;
/* A second ring in the opposite tone keeps the indicator visible over the
mixed grounds inside a section (cards, images, the press wall). */
box-shadow: 0 0 0 4px rgb(255 255 255 / 72%);
}
.field input,
.field textarea {
border-bottom-color: rgb(237 234 226 / 42%);
}
/* The native radio is `position: absolute; opacity: 0`, so `.c` is the only
thing that marks an option as an option. */
.chiprow .c {
border-color: rgb(237 234 226 / 42%);
}
.light .nav-links a:not(.btn):hover,
#nav.on-light .nav-links a:not(.btn):hover {
color: #8a5d14;
}
.press-index li i.lit {
color: #8a5d14;
}
/* ------------------------------------------------------------------
The loop's closing line sat underneath the WebGL stage.
`#heroRobot` is `position: fixed; z-index: 0`. A positioned element paints
above in-flow content regardless of document order, so every unpositioned
block in the loop section rendered beneath the cell. The pinned columns were
already handled — `.js-pin .loop-left` and `.loop-right` both take
`z-index: 3` — but `.loop-outro`, which sits outside `.loop-grid`, was
missed: the cobot's arm crossed the sentence mid-word.
Same treatment as the left column: lift it over the stage, and carry a soft
ground so the line stays readable whatever the cell is doing behind it.
------------------------------------------------------------------ */
.loop-outro {
position: relative;
z-index: 3;
}
/* The ground bleeds vertically but never horizontally: an earlier version put
this on the with a -64px horizontal inset, which at 320-412px pushed the
document wider than the viewport — the whole page then scrolled sideways and
the nav burger went off-screen with it. Nothing here may exceed the wrap's
content box. */
.loop-outro::before {
content: '';
position: absolute;
z-index: -1;
inset: -44px 0 auto;
height: 260px;
background: radial-gradient(
ellipse 42% 58% at 50% 42%,
rgb(12 13 16 / 92%) 0%,
rgb(12 13 16 / 80%) 45%,
rgb(12 13 16 / 0%) 78%
);
pointer-events: none;
}
/* The lens reading's fallback ground. design-motion.js adds `.shielded` only
when no placement around the lens clears both the tray and the copy column —
which happens when the lens is deep inside the headline, exactly where the
tray invites you to move it. White analysis text over white display type is
unreadable; this gives it something to sit on without moving it. */
#lensFinding.shielded {
padding: 9px 12px;
margin: -9px -12px;
border-radius: 10px;
background: rgb(12 13 16 / 82%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* ------------------------------------------------------------------
The footer's utility row could not wrap, so a fifth item broke phones.
`.foot-bottom` wraps, but the `.fb-links` group inside it is an
`inline-flex` row with no wrapping of its own: the clock, the separators and
every link are locked onto one line. The design shipped four items, which
just fit. Adding "Investor portal" (2026-08-23) made five, and the group
measured 394px against a 320px viewport — 74px of horizontal overflow on the
whole document, which also pushes the nav burger off-screen.
Measured before/after at 320px: overflow 74px → 0px. The separators are
hidden once the row wraps, because a leading "·" on a new line reads as a
bullet rather than a divider.
------------------------------------------------------------------ */
.fb-links {
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 8px;
}
@media (max-width: 560px) {
.foot-bottom {
justify-content: flex-start;
}
.fb-links {
justify-content: flex-start;
gap: 12px;
}
.fb-links i {
display: none;
}
}
}