/* ========================================================================== zenda-orbit.css — the chips-around-a-phone section, By The Owl skin. Rebuilt from zenda.com "You juggle life—we handle fees" (ANALYSIS.md). Every geometry number below is the reference's own CSS, converted from its rem into --zo-u (one reference rem). Every colour is SPEC.md §5. 1. TOKENS — the only block you edit to re-skin. `mono` is the default and applies with no attribute at all. `data-zo-theme="reference"` is Zenda's cream and pastel, for side-by-side comparison only. 2. Section + header 3. Chips 4. The phone (device, screen, the seven shapes, the three footage cards) 5. Placeholder flags, utilities 6. Breakpoints — the reference's layout steps (991 / 767 / 479) and the site's type ladder (768 / 640 / 420). Nothing between 992 and 1439. ========================================================================== */ /* ══ 1 · TOKENS ════════════════════════════════════════════════════════════ */ :root { /* ── palette: mono, By The Owl (SPEC §5). Sources in brackets. ────────── */ --zo-ground: #F2F4F7; /* --accent-color-3 — section band */ --zo-chip: #FFFFFF; /* --secondary — chip fill, 1.102:1 */ --zo-chip-ghost: rgba(255,255,255,.6); /* #6 Subtitles, #8 Treatment */ --zo-chip-edge: none; /* no border, no shadow — ever */ --zo-ink: #030303; /* --primary — headline, labels */ --zo-ink-sub: #404040; /* --text-color — subhead */ --zo-ic-ink: #1A1A1A; /* --accent-color-2 — icon mass */ --zo-ic-tone: #B8BABD; /* SKIN.md §2 d1 — icon accent */ --zo-ic-paper: #FFFFFF; /* highlights + knock-outs = chip */ --zo-screen: #F2F4F7; /* phone screen ground */ /* the four flat shapes, named by the reference hook that moves them (SPEC §5): r1 = blob 1, r2 = blob 2, l2 = blob 6, l3 = blob 7 */ --zo-blob-r1: #CDCFD2; --zo-blob-r2: #C3C5C8; --zo-blob-l2: #DDDFE2; --zo-blob-l3: #B2B4B7; --zo-blob-l3-glow: none; /* mono drops the reference's glow */ --zo-card-base: #6B6D70; /* a11y mobile audit 4 (2026-10-28): white labels 3.96:1 on #7E8083, 5.19:1 here */ /* SKIN.md §2 d2 — A/B/C before a */ /* poster paints */ --zo-card-label: #FFFFFF; --zo-card-scrim: rgba(3,3,3,.46); /* SKIN.md §2 — 3.46:1 on a blown frame */ --zo-device-bezel: #030303; --zo-device-rim: #D8DADD; --zo-flag-ink: var(--zo-ink); /* ── type: Inter only, on the site's tokens (SPEC §6) ───────────────────── Each value reads the page's own token first. The fallback after the comma is only for a page WITHOUT bto-type.css (this standalone lab), and §6 below steps the fallbacks down at the site's own breakpoints, so the section sets the same sizes here as it will on the homepage. */ --zo-font: var(--font-family-1, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); --zo-title-size: var(--type-display, 49px); --zo-title-lh: var(--type-lh-display, 1); --zo-title-track: var(--type-track-display, -0.028em); --zo-sub-size: var(--type-statement, 25px); --zo-sub-lh: var(--type-lh-statement, 1.4); --zo-label: var(--type-heading-sm, 25px); /* the chip label */ --zo-label-track: var(--type-track-display, -0.028em); /* ── geometry. ONE unit: --zo-u = one reference rem. ─────────────────── The reference is laid out in rem (16px at >=1440, ANALYSIS §3) and its chip label is 1.75rem. Ours is DERIVED FROM THE LABEL TOKEN: u = label / 1.75 = 25/1.75 = 14.2857px, so the label is the --type-heading-sm token exactly and everything else scales to it — SPEC §6, "scale the composition, never push type off-token". The field is the reference at 0.893x and the 2:1 headline:label ratio survives (56:28 there, 49:25 here). Chip height, gaps, travel, the phone: all multiples of u, and the engine reads u back in px. Overriding it on one section (style="--zo-u: 12px") rescales that section and its motion — and takes its labels off-token, which is a decision, not a fix (README). */ --zo-u: calc(var(--zo-label) / 1.75); --zo-chip-units: 9; /* chip height: 144px there, 128.6 here */ --zo-icon-pill: 0.48; /* icon height / chip height [R] */ --zo-icon-solo: 0.60; /* icon height in an icon-only circle [R] */ --zo-phone-w: 30%; /* of the wrap, max 26u */ --zo-phone-drop: -24%; /* phone hangs below the wrap */ --zo-pad-top-units: 7; --zo-pad-bottom-units: 12; } /* ── the reference skin: Zenda's measured values (ANALYSIS §3–4, SPEC §5) ── */ [data-zo-theme="reference"] { --zo-ground: #F5F4EE; --zo-chip: #FFFFFF; --zo-chip-ghost: rgba(255,255,255,.6); --zo-ink: #000000; --zo-ink-sub: #000000; --zo-ic-ink: #26282A; --zo-ic-tone: #CDABFD; --zo-ic-paper: #FFFFFF; --zo-screen: #F4F2EC; --zo-blob-r1: rgba(237, 82,255,.34); --zo-blob-r2: rgba(155,183,246,.8); --zo-blob-l2: #EEDBB6; --zo-blob-l3: rgba(172,108,244,.6); --zo-blob-l3-glow: inset 0 2px 6.99rem #881bc8, 1.125rem 1.125rem 2rem #fff; /* SPEC §5: --zo-card-base is "the reference's own fills (blobs 3/4/5)" — three different fills, so this theme sets one per card. The per-card names exist only here; mono sets the single --zo-card-base above. */ --zo-card-a: radial-gradient(circle at 0 0, #a768f1 30%, #0c209c); --zo-card-b: linear-gradient(170deg, #879cd7cc, #703ccccc); --zo-card-c: #f7ccd8; --zo-card-a-glow: inset 18.62px 18.62px 33.1px #ffffff94; /* blob 3 only */ --zo-device-bezel: #000000; --zo-device-rim: #DBDAD5; } /* ══ 2 · SECTION + HEADER ══════════════════════════════════════════════════ */ .zo { position: relative; display: block; box-sizing: border-box; padding: calc(var(--zo-pad-top-units) * var(--zo-u)) 0 calc(var(--zo-pad-bottom-units) * var(--zo-u)); background: var(--zo-ground); color: var(--zo-ink); font-family: var(--zo-font); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* The field is wider than the window on purpose (the reference bleeds at 1440 too) — clip it here so the PAGE never scrolls sideways. `clip` rather than `hidden`: it does not make the section a scroll container. */ overflow: hidden; overflow: clip; } .zo *, .zo *::before, .zo *::after { box-sizing: border-box; } /* = the reference's .container-large (80rem). At >=992 the reference's rem is either 16px or fluid, so its wrap is ALWAYS 80rem and the whole composition only ever scales, never reflows. Ours cannot scale without taking the labels off-token (SPEC §6), so it HOLDS: the wrap stays 80u and centred even when the window is narrower (negative margins), and the section clips what does not fit. Letting it shrink to 90% instead would reflow the rows and pull the spacer chips (#4, #9) out from behind the phone (SPEC §7.6). <=991 goes back to the reference's 5% gutters (§6). */ .zo__wrap { position: relative; width: calc(80 * var(--zo-u)); margin: 0 calc(50% - 40 * var(--zo-u)); } .zo__head { display: flex; flex-direction: column; align-items: center; gap: calc(0.75 * var(--zo-u)); text-align: center; padding: 0 16px; } /* .zo prefix: outranks bto-type.css's `h2:not(.service-content-banner *)`, which would otherwise set the same values anyway on a real page. */ .zo .zo__title { margin: 0; font-family: var(--zo-font); font-size: var(--zo-title-size); font-weight: 400; /* 2026-09-23 display-weight ruling */ line-height: var(--zo-title-lh); letter-spacing: var(--zo-title-track); color: var(--zo-ink); text-wrap: balance; } .zo .zo__sub { margin: 0; max-width: 19em; /* two lines at 25px, the reference's 32rem */ font-size: var(--zo-sub-size); font-weight: 400; line-height: var(--zo-sub-lh); letter-spacing: normal; color: var(--zo-ink-sub); text-wrap: balance; } /* ══ 3 · CHIPS — the reference's .features_grid / _row / _item, in u ═══════ */ .zo__grid { display: flex; flex-direction: column; gap: calc(1.5 * var(--zo-u)); margin: 0; padding: 0; } .zo__row { display: flex; gap: calc(1.5 * var(--zo-u)); } .zo__row--1 { justify-content: space-between; } .zo__row--4 { justify-content: flex-end; } .zo__chip { flex: none; display: flex; align-items: center; justify-content: center; gap: calc(0.5 * var(--zo-u)); height: calc(var(--zo-chip-units) * var(--zo-u)); padding: 0 calc(4 * var(--zo-u)) 0 calc(2 * var(--zo-u)); border-radius: 9999px; /* --type-btn-radius */ background: var(--zo-chip); box-shadow: var(--zo-chip-edge); color: var(--zo-ink); transform-origin: 50% 50%; backface-visibility: hidden; } .zo__chip--inset { padding-left: calc(2.8 * var(--zo-u)); } .zo__chip--solo { width: calc(var(--zo-chip-units) * var(--zo-u)); padding: 0; } .zo__chip--text { padding: 0 calc(4 * var(--zo-u)); } .zo__chip--ghost { background: var(--zo-chip-ghost); } .zo__chip-label { font-size: var(--zo-label); /* = 1.75u, the token itself */ font-weight: 400; line-height: 1.3; letter-spacing: var(--zo-label-track); white-space: nowrap; } /* Icons: one shared HEIGHT, width from each drawing's own viewBox (SPEC §2: viewBox 0 0 W 48, W 36-64). Three tones by class, so the theme recolours every icon. Strokes scale with the icon (no vector-effect). */ .zo__icon { display: block; flex: none; height: calc(var(--zo-chip-units) * var(--zo-u) * var(--zo-icon-pill)); width: auto; overflow: visible; fill-rule: nonzero; } .zo__chip--solo .zo__icon { height: calc(var(--zo-chip-units) * var(--zo-u) * var(--zo-icon-solo)); } .zo__icon .ic-ink { fill: var(--zo-ic-ink); stroke: var(--zo-ic-ink); } .zo__icon .ic-tone { fill: var(--zo-ic-tone); stroke: var(--zo-ic-ink); } .zo__icon .ic-paper { fill: var(--zo-ic-paper); stroke: var(--zo-ic-ink); } .zo__icon .ic-line { fill: none; } .zo__icon .ic-flat { stroke: none; } /* ══ 4 · THE PHONE ═════════════════════════════════════════════════════════ The reference's phone is one raster mockup over seven
shapes. Ours draws the device in CSS (no artwork copied, nothing fetched) and keeps the seven shapes at the reference's own percentages. Inside the device every length is in cqw — 1% of the phone's width — so it scales as one object. */ .zo__phone { position: absolute; left: 0; right: 0; bottom: var(--zo-phone-drop); z-index: 2; /* painted over the field — the depth cue */ width: var(--zo-phone-w); max-width: calc(26 * var(--zo-u)); margin: 0 auto; aspect-ratio: 384 / 781; /* the reference mockup's own box */ transform-origin: 50% 50%; pointer-events: none; container-type: inline-size; } .zo__device { position: absolute; inset: 0; border-radius: calc(4.4 * var(--zo-u)); border-radius: 16.7cqw; background: var(--zo-device-bezel); box-shadow: 0 0 0 1.1cqw var(--zo-device-rim); } /* side keys: one on the right, two volume + one action on the left */ .zo__device::before, .zo__device::after { content: ""; position: absolute; width: 1.1cqw; border-radius: 0.6cqw; background: var(--zo-device-rim); } .zo__device::before { left: -2cqw; top: 18%; height: 4%; box-shadow: 0 6.5cqw 0 0 var(--zo-device-rim), 0 13cqw 0 0 var(--zo-device-rim); } .zo__device::after { right: -2cqw; top: 25%; height: 10%; } .zo__screen { position: absolute; inset: 3.4cqw; overflow: hidden; border-radius: calc(3.6 * var(--zo-u)); border-radius: 13.4cqw; clip-path: inset(0 round 13.4cqw); /* clips composited children in Safari */ background: var(--zo-screen); isolation: isolate; } .zo__notch { position: absolute; top: 3cqw; left: 50%; width: 31cqw; height: 7.2cqw; margin-left: -15.5cqw; border-radius: 0 0 4.6cqw 4.6cqw; background: var(--zo-device-bezel); } .zo__notch::after { /* the camera */ content: ""; position: absolute; top: 2.2cqw; left: 7cqw; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #1d1f24; } /* The seven shapes, in the reference's DOM (= paint) order and its own percentages of the screen. 5.3rem radius = 22.1cqw of a 384px phone. */ .zo__blob { position: absolute; transform-origin: 50% 50%; border-radius: 9999px; } .zo__blob--1 { width: 79.89%; height: 25.13%; top: -12%; right: -14%; border-radius: 22.1cqw; background: var(--zo-blob-r1); } .zo__blob--2 { width: 40%; height: 16%; top: 14%; right: -16%; border-radius: 22.1cqw; background: var(--zo-blob-r2); } .zo__blob--3 { width: 86%; height: 25.13%; top: 4%; left: -18%; } .zo__blob--4 { width: 103.28%; height: 28%; top: 30%; left: 18%; } .zo__blob--5 { width: 79.89%; height: 20.94%; top: 57.8%; right: -16%; } .zo__blob--6 { width: 79.89%; height: 25.13%; bottom: 23%; left: -48%; background: var(--zo-blob-l2); } .zo__blob--7 { width: 79.89%; height: 25.13%; bottom: -4%; left: -10%; border-radius: 21.4cqw; background: var(--zo-blob-l3); box-shadow: var(--zo-blob-l3-glow); } /* The three footage cards (SPEC §3). The footage replaces both the reference's gradient and its object; the label is the post's job string. Fill before a poster paints: --zo-card-base (mono), or the reference's own per-card fill (reference theme only). */ .zo__card { display: flex; align-items: center; overflow: hidden; isolation: isolate; } .zo__card--a { background: var(--zo-card-a, var(--zo-card-base)); box-shadow: var(--zo-card-a-glow, none); justify-content: center; padding-left: 21%; } .zo__card--b { background: var(--zo-card-b, var(--zo-card-base)); padding-left: 18%; } .zo__card--c { background: var(--zo-card-c, var(--zo-card-base)); padding-left: 11%; } .zo__card-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; /* a fade-in on load, not scroll motion */ } .zo__card-media.is-ready { opacity: 1; } .zo__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--zo-card-scrim); } .zo__card-label { font-size: max(14px, 7.3cqw); /* 28px on the reference's 384px phone */ font-weight: 400; line-height: 1.2; letter-spacing: -0.002em; white-space: nowrap; color: var(--zo-card-label); } /* ══ 5 · PLACEHOLDER FLAGS, UTILITIES ═══════════════════════════════════════ Same pattern as _lab/blob-chapters (.btoch__flag). Rendered only while data.js says `placeholder`; delete the line and the flag is not emitted. */ .zo__flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto calc(2.5 * var(--zo-u)); padding: 0 16px; } .zo__flag { margin: 0; max-width: 100%; padding: 0.4em 0.9em calc(0.4em + 1px); border: 1px solid color-mix(in srgb, var(--zo-flag-ink) 32%, transparent); border-radius: 9999px; font-size: 14px; /* --type-small */ line-height: 1.43; /* --type-lh-small */ text-align: center; color: color-mix(in srgb, var(--zo-flag-ink) 78%, transparent); } @supports not (color: color-mix(in srgb, #fff, #000)) { .zo__flag { border-color: var(--zo-flag-ink); opacity: 0.78; } } .zo__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .zo__probe { /* the engine reads --zo-u in px off this */ position: absolute; top: 0; left: 0; width: calc(100 * var(--zo-u)); height: 0; visibility: hidden; pointer-events: none; } /* ══ 6 · BREAKPOINTS ════════════════════════════════════════════════════════ Two sets, doing two different jobs: · THE REFERENCE'S LAYOUT STEPS (991 / 767 / 479, ANALYSIS §5). · THE SITE'S TYPE LADDER (768 / 640 / 420, bto-type.css), mirrored in the token fallbacks so this standalone lab sets the sizes the homepage will. On a real page the site's own tokens win and these fallbacks are inert. 992–1439 has NO rule, on purpose. There the reference's rem is fluid and its whole composition shrinks with the window. Ours holds the 1440 composition instead (see .zo__wrap): shrinking it shrinks the labels, and SPEC §6 keeps type on-token. (The first build did shrink it — labels at 17.8px at 1024 under a 25px subhead. Removed 2026-10-02; README §Widths.) */ /* <=991: the reference's 5% gutters come back, the phone widens to half the wrap and row 1 is pulled outboard, so the chips become fragments peeking in at both edges. The spacers (#4, #9) show beside the phone here — so do the reference's own; SPEC §1 gave them real labels for exactly this. */ @media (max-width: 991.98px) { :root { --zo-phone-w: 50%; } .zo__wrap { width: 90%; margin: 0 auto; } .zo__row--1 > .zo__chip:first-child { margin-left: calc(-8.75 * var(--zo-u)); } .zo__row--1 > .zo__chip:last-child { margin-right: calc(-11.25 * var(--zo-u)); } } @media (max-width: 768px) { :root { --zo-title-size: var(--type-display, 44px); } } /* <=767: smaller pills, the phone hangs less (reference: padding 1.5rem, bottom -10%). The label stays the heading-sm token. */ @media (max-width: 767.98px) { :root { --zo-chip-units: 6.5; /* 93px — the reference's 82-93 */ --zo-phone-drop: -10%; --zo-pad-top-units: 4; --zo-pad-bottom-units: 4.5; } .zo__chip { padding: 0 calc(1.5 * var(--zo-u)); } .zo__chip--inset { padding: 0 calc(2 * var(--zo-u)); } .zo__chip--solo { padding: 0; } .zo__chip-label { line-height: 1.4; } } /* <=640: the site steps heading-sm and statement to 23px. u follows the label, so the whole composition steps with it (85px pills). */ @media (max-width: 640px) { :root { --zo-title-size: var(--type-display, 41px); --zo-sub-size: var(--type-statement, 23px); --zo-label: var(--type-heading-sm, 23px); } } @media (max-width: 479.98px) { :root { --zo-phone-w: 60%; --zo-label: 18px; } /* CD mobile QA 7: labels cut by the screen and the phone; u follows, the whole orbit ~22% smaller */ } @media (max-width: 420px) { :root { --zo-title-size: var(--type-display, 36px); } } /* ══ 7 · HOMEPAGE INTEGRATION (appended 2026-10-04) ════════════════════════ The only rule this copy adds to the lab's zenda-orbit.css. Everything above is byte-identical to the lab file, so the README's line numbers still hold. MEASURED (_lab/zenda-orbit/_verify/stylediff_home.py: every computed property of all 215 elements in the section, lab page vs homepage, settled, at 390, 768, 1024, 1440 and 2560): the placeholder flag was the one thing that changed. Lab 14px, line-height 20.02px, max-width 100%; homepage 16px, 24px and a 62ch cap, so the flag pill grew 5.6px and pushed the composition down by that much (two lines at 390: 9.6px). Every chip, icon, label, the headline, the subhead, the phone and the cards measured identical. CAUSE: the flag is a p. bto-type.css styles running text with the guarded selector p:not(.service-content-banner *), which is (0,1,1) and outranks .zo__flag at (0,1,0). The same leak, on the same kind of element, is fixed for the chapters flag in bto-home-sections.css section 2. FIX: the flag back on the site's own small token, at (0,2,0), the mount attribute plus the class. --type-small is the token bto-type.css names for captions, meta, chips and buttons, which is what this pill is. The values are the lab's own (14px, 1.43, 100%), so the lab page, which has no bto-type.css, renders exactly as before through the fallbacks. */ [data-zenda-orbit] .zo__flag { font-size: var(--type-small, 14px); line-height: var(--type-lh-small, 1.43); max-width: 100%; } /* ══ 8 · PHONE PALETTES (appended 2026-10-04) ═══════════════════════════════ Founder, 2026-10-04: the four empty capsules in the phone are grey, Zenda's are colourful and poppy; add the colour and the design language, make it better. An exception to the monochrome UI, scoped to the phone interior. `data-zo-palette` on the section colours the phone's inside: the four empty capsules (blobs 1 2 6 7) and the card bases under the footage. Token overrides only: no layout, no request, no JS. No attribute = the mono greys of section 1. Everything above this block is unchanged, so the README's line numbers for this file still hold. ONE RULE ALL THREE KEEP. The mono greys already sit at Zenda's own lightness, slot by slot (r1 L*83, r2 79, l2 88, l3 73), so each palette holds that lightness map and changes hue and chroma only. THE FOOTAGE IS NEVER TINTED. Nothing here paints over a card. The card bases are each film's own mean colour, so the 0.6s poster fade-in and the anti-aliased card edge never show a foreign colour against a film. zenda Zenda's own values (the reference theme above) on our grey screen. films Each capsule takes the colour of the film beside it, measured from the stills (k-means in CIELAB) and lifted to Zenda's lightness: b1 + b2 = Films (the brass bucket, the grass), b6 = Social (the tee), b7 = AI Videos (the stage light). It is a snapshot: change a card's film and re-derive that capsule (_verify/palette_derive.py). gels Real Lee filters, converted from their published daylight chromaticity: 002 Rose Pink, 201 Full CTB, 204 Full CTO, 137 Special Lavender lit by 181 Congo Blue. Drawn as light (a hot core falling off to the saturated rim), not paint. Never goes stale. THE GLOW on the bottom capsule is Zenda's look (a deep core seeping in from the rim, plus a white lift outside), but drawn as a GRADIENT, not Zenda's 6.99rem inset box-shadow. Measured: that ~100px inset blur paints a hard horizontal step across the capsule under software raster while the engine holds the phone on its own layer (GPU raster is clean). A gradient cannot seam on any raster path and costs no blur. Its stops are the inset shadow's own falloff (sigma 14.55cqw on this pill: 0.10 at the centre, 0.50 at the rim, 0.75 into the corners); against the GPU-drawn shadow it measures mean dE 0.9-1.4 at 1440 and 390, i.e. the same look. The white lift stays a box-shadow (outer, small blur: clean everywhere). Measured sheet + method: _lab/zenda-orbit/COLOUR.md. */ .zo[data-zo-palette="zenda"], .zo[data-zo-palette="films"], .zo[data-zo-palette="gels"] { --zo-card-a: #89917D; /* Films surf-excel-f000, mean in linear light */ --zo-card-b: #B8AAAA; /* Social noob-clothing poster */ --zo-card-c: #9671A3; /* AI Videos senses-ai-event-motion-poster-video3 */ --zo-card-a-glow: none; } .zo[data-zo-palette="zenda"] { --zo-blob-r1: rgba(237, 82, 255, .34); --zo-blob-r2: rgba(155, 183, 246, .8); --zo-blob-l2: #EEDBB6; --zo-blob-l3: radial-gradient(farthest-corner at 50% 50%, rgba(136, 27, 200, .10) 0%, rgba(136, 27, 200, .20) 35.4%, rgba(136, 27, 200, .34) 53%, rgba(136, 27, 200, .50) 70.7%, rgba(136, 27, 200, .75) 100%), /* core #881BC8 */ rgba(172, 108, 244, .6); --zo-blob-l3-glow: 4.69cqw 4.69cqw 8.33cqw #FFFFFF; } .zo[data-zo-palette="films"] { --zo-blob-r1: linear-gradient(170deg, #FCDA78, #F8BC50); /* Films: brass, h84 */ --zo-blob-r2: linear-gradient(170deg, #C6DA8A, #93C468); /* Films: grass, h122 */ --zo-blob-l2: linear-gradient(170deg, #FFCDC3, #FFAEA6); /* Social: tee, h30-34 */ --zo-blob-l3: radial-gradient(farthest-corner at 50% 50%, rgba(104, 15, 172, .10) 0%, rgba(104, 15, 172, .20) 35.4%, rgba(104, 15, 172, .34) 53%, rgba(104, 15, 172, .50) 70.7%, rgba(104, 15, 172, .75) 100%), /* core #680FAC */ linear-gradient(170deg, #F3A4E9, #BF8AEE); /* AI Videos: stage light */ --zo-blob-l3-glow: 4.69cqw 4.69cqw 8.33cqw #FFFFFF; } .zo[data-zo-palette="gels"] { --zo-blob-r1: radial-gradient(120% 140% at 32% 30%, #FFDFF9 0%, #FFB5F8 48%, #FB91EC 100%); /* 002 Rose Pink */ --zo-blob-r2: radial-gradient(120% 140% at 32% 30%, #D3E4FD 0%, #9AC7FF 48%, #6BB0F7 100%); /* 201 Full CTB */ --zo-blob-l2: radial-gradient(120% 140% at 32% 30%, #FFE6C4 0%, #FFC581 48%, #FFAF5D 100%); /* 204 Full CTO */ --zo-blob-l3: radial-gradient(farthest-corner at 50% 50%, rgba(75, 0, 147, .10) 0%, rgba(75, 0, 147, .20) 35.4%, rgba(75, 0, 147, .34) 53%, rgba(75, 0, 147, .50) 70.7%, rgba(75, 0, 147, .75) 100%), /* 181 Congo Blue #4B0093 */ radial-gradient(120% 140% at 30% 26%, #D7CAFF 0%, #B6A4FF 48%, #9886F5 100%); /* 137 Special Lavender */ --zo-blob-l3-glow: 4.69cqw 4.69cqw 8.33cqw #FFFFFF; } /* ══ 9 · HOMEPAGE SEAM ABOVE THE BAND (appended 2026-10-04) ═════════════════ On the homepage this section follows the contact CTA: a black 16px-radius card (.contact-cta-banner) whose own section carries no padding. Before this section was inserted, the card lay on the footer's 120px of white. Since then the band began at the card's bottom edge, so its two rounded corners showed white slivers between the black and the grey. The site's seam language (assets/css/bto-seams.css, bto-seams.js): a card lies ON a ground, and a seam is never a border or a fade. So the card gets its ground back: the site's own section rhythm, main.css .section 120px (the same at every width), which is exactly the white the footer gave it. This is a margin OUTSIDE the band: nothing inside the band moves or changes, and the space below the wrap (what lets the chips settle) is untouched. `main >` keeps it to a page where the section sits in
(the homepage); the lab page has no card above it and gets nothing. The OTHER seam, band into footer, is NOT touched: every fix for it changes the band itself (its height or its shape). The options are written up for Ash in _lab/zenda-orbit/COLOUR.md. */ main > .zo[data-zenda-orbit] { margin-top: 120px; }