/* assets/bg-bends.css ------------------------------------------------------------------------------------------ The Color Bends layer, and the one thing that makes it visible: two translucent grounds. Loaded after assets/suite.css and after the page's own world block, so nothing in the shared stylesheet has to change for this draft to exist. Every rule here is gated on html.bg-bends-on, a class assets/bg-bends.js adds only once the canvas has drawn a frame. No JavaScript, no WebGL, or a context that dies mid-session, and the class is absent or removed and the page is back to the opaque grounds it ships with. ------------------------------------------------------------------------------------------ */ /* ---------- the layer ---------- */ /* Fixed to the viewport and behind everything: z-index -1 puts it under the whole document flow, which is why html and body have to stop painting a ground of their own below. It can never take a click, a drag, a caret or a scroll. */ .bg-bends { position: fixed; inset: 0; z-index: -1; pointer-events: none; -webkit-user-select: none; user-select: none; contain: paint; /* the ground under the canvas, and the ground on its own if the canvas never arrives. The shader runs transparent, so this colour is what shows wherever no band covers. Onkar moved it from cream to sage on the ?bg panel: sage is the cooler of the two and it sits under a ramp that is now all green, where cream was pulling it warm. */ background: var(--sage); } .bg-bends canvas { display: block; width: 100%; height: 100%; } html.bg-bends-on, html.bg-bends-on body { background: transparent; } /* ---------- the grounds ----------------------------------------------------------------- */ /* The field shows through the page, and two bands hide it. Onkar picked those two by screenshot: the trust row and the agents block sit ON TOP of the layer, fully opaque, so the effect passes behind them rather than through them. Everywhere else it reads through. None of the alphas below is a guess. The field was read back out of the framebuffer at four viewport sizes, twenty million pixels and a full sweep of its animation, and the darkest pixel it ever produces is rgb(69, 135, 96). Each opacity is the number at which that section's worst piece of type still clears 4.5:1 against that pixel, with a little over the top. Nothing here invents a colour: 255 255 255 is --white, 252 245 235 is --cream and 231 240 228 is --sage. --bgp-t is the one number every alpha is multiplied by, and it is 1 unless something sets it. The dev panel in bg-bends.js writes it on so a single slider scales them all together. The two opaque bands do not read it at all, so no position of that slider can make them see through. */ html.bg-bends-on body.world-a { /* the hero, the most visible of them and the reason to have a background at all */ --hero-bg: rgba(255, 255, 255, calc(.79 * var(--bgp-t, 1))); /* the white run */ --desk-bg: rgba(255, 255, 255, calc(.82 * var(--bgp-t, 1))); --answers-bg:rgba(255, 255, 255, calc(.82 * var(--bgp-t, 1))); --costs-bg: rgba(255, 255, 255, calc(.82 * var(--bgp-t, 1))); --more-bg: rgba(255, 255, 255, calc(.82 * var(--bgp-t, 1))); --quote-bg: rgba(255, 255, 255, calc(.82 * var(--bgp-t, 1))); --nav-bg: rgba(255, 255, 255, calc(.82 * var(--bgp-t, 1))); /* cream */ --rings-bg: rgba(252, 245, 235, calc(.84 * var(--bgp-t, 1))); /* sage, the most forgiving of the three because it is already the field's own family */ --journey-bg: rgba(231, 240, 228, calc(.89 * var(--bgp-t, 1))); --proof-bg: rgba(231, 240, 228, calc(.89 * var(--bgp-t, 1))); /* THE TWO THAT STAY SOLID. The layer runs behind these, never through them. Written as the flat token rather than an alpha so nothing downstream can thin them by accident. */ --strip-bg: var(--cream); --feat-bg: var(--dg); } /* The logo strip has no ground of its own, it sits on the body, and the body is transparent here so the layer can be seen at all. It takes the hero's alpha rather than the white run's, and loses its top border. Both for the same reason: site.css rules this strip off top and bottom, which is right on a page of flat white where the rule is the only thing marking the join. With the field showing through, that hairline plus a step from .79 to .82 read as a hard grey line across the page. Matching the hero and dropping the top rule makes the hero and the strip one continuous surface. The bottom rule is gone too, removed in suite.css for all three pages: Onkar read it as a grey line across the page rather than as a join. */ html.bg-bends-on .world-a .logos { background: rgba(255, 255, 255, calc(.79 * var(--bgp-t, 1))); border-top: 0; } /* The mega menu, the mobile menu and the footer are left alone: they take the opaque tokens the page already sets, so an open menu has nothing to ghost through and the footer closes the page on something solid. Reduced motion keeps the layer and every translucent ground: bg-bends.js holds one still frame and never starts the loop, so the page looks the same and nothing moves. */ /* ---------- the tuning panel, dev only --------------------------------------------------- */ /* Exists only when bg-bends.js finds ?bg on the URL and builds it. Without that nothing in the page matches any of these rules, which costs nothing. Styled on purpose like the focus tuner in suite.css and on purpose not like the site: monospace, square, black, high contrast. Amber rather than that panel's mint so the two are never confused when both are open. It docks bottom right, the focus tuner docks bottom left, and neither of them is ever wider than the viewport, so ?tune&bg puts one in each corner instead of one on top of the other. It is capped in height and scrolls its own body, so it can hold twenty controls without becoming the page. */ .bgp, .bgp * { box-sizing: border-box; } .bgp { position: fixed; right: 10px; bottom: 10px; z-index: 999999; width: 320px; max-width: calc(100vw - 20px); background: #111; color: #ffd98a; border: 2px solid #ffd98a; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.45; display: grid; gap: 0; } .bgp-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #4a3c17; } /* Folded shut it is a chip and nothing else: no title, no body, about 47 by 38, tucked six pixels into the corner. That size is the reason it can arrive folded on a 390 screen and still sit in the empty margin beside the hero's buttons rather than on top of one. */ .bgp.is-shut { width: auto; right: 6px; bottom: 6px; } .bgp.is-shut .bgp-bar { border-bottom: 0; } .bgp.is-shut .bgp-title { display: none; } .bgp.is-shut .bgp-body { display: none; } .bgp-toggle { font: inherit; font-weight: 700; background: #ffd98a; color: #111; border: 0; border-radius: 3px; padding: 3px 7px; cursor: pointer; flex: none; } .bgp-toggle:hover { background: #fff; } .bgp-title { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The one piece of scrolling in here. overscroll-behavior stops a flick inside the panel from carrying on into the page, and the page behind it scrolls normally everywhere else. */ .bgp-body { max-height: min(58vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; display: grid; gap: 7px; } .bgp-h { margin: 4px 0 0; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; border-top: 1px dashed #4a3c17; padding-top: 6px; } .bgp-h:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .bgp-row { display: grid; gap: 2px; } .bgp-row > span { display: flex; justify-content: space-between; gap: 8px; } .bgp-row b { color: #fff; font-weight: 700; } .bgp-row input[type="range"] { display: block; width: 100%; height: 14px; margin: 0; accent-color: #ffd98a; } .bgp-note { margin: 0; color: #c9a95f; } .bgp-check { display: flex; align-items: center; gap: 6px; } .bgp-check input { accent-color: #ffd98a; margin: 0; } .bgp-col { display: flex; align-items: center; gap: 6px; } .bgp-col span { flex: 1 1 auto; } .bgp-col input[type="color"] { width: 34px; height: 20px; padding: 0; border: 1px solid #4a3c17; background: #111; cursor: pointer; flex: none; } .bgp-sw { display: flex; flex-wrap: wrap; gap: 4px; } .bgp-sw button { width: 22px; height: 16px; border: 1px solid #4a3c17; border-radius: 2px; padding: 0; cursor: pointer; font-size: 0; } /* Readable or too light, and nothing in between. Green and red rather than a bar, because the only question it answers is whether the body copy still clears 4.5:1. */ .bgp-read { margin: 0; padding: 5px 6px; border-radius: 3px; font-weight: 700; color: #111; background: #7fd18f; } .bgp-read.is-bad { background: #ff8a7a; } .bgp-read small { display: block; font-weight: 400; } .bgp-out { width: 100%; height: 132px; resize: vertical; background: #000; color: #ffd98a; border: 1px solid #4a3c17; border-radius: 3px; padding: 5px 6px; font-family: inherit; font-size: 10px; line-height: 1.4; white-space: pre; } .bgp-btns { display: flex; gap: 6px; } .bgp-btns button { font: inherit; font-weight: 700; background: #ffd98a; color: #111; border: 0; border-radius: 3px; padding: 6px 9px; cursor: pointer; flex: 1 1 auto; } .bgp-btns button:hover { background: #fff; } @media (max-width: 420px) { .bgp-body { max-height: 46vh; } }