/* ===================================================================== stock-brighter-rev12-02-page-styles.css — Stock Brighter (rev12) Target: child theme stylesheet. NOT tokens.css. Depends on: tokens.css -> bnl-components.css -> this file. ⚠️ BRACE DISCIPLINE (HANDOFF-STANDARD §4 / BRI-324). Run the depth walk, not a bare count, after any edit. ===================================================================== */ /* --------------------------------------------------------------- HERO --------------------------------------------------------------- */ .bnl-page--stock-brighter .bnl-hero { padding: var(--space-2xl) var(--space-md); background: radial-gradient(75% 60% at 78% 22%, color-mix(in srgb, var(--color-pink) 14%, transparent), transparent 62%), radial-gradient(70% 55% at 18% 82%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 62%); } .bnl-page--stock-brighter .bnl-hero__inner { max-width: var(--width-content); margin: 0 auto; } .bnl-page--stock-brighter .bnl-hero .bnl-heading--xl { max-width: 20ch; } .bnl-page--stock-brighter .bnl-hero .bnl-lede { max-width: 64ch; } /* --------------------------------------------------------------- THE CHANNEL CHAIN — the page's structural argument. An
    because the order is the meaning: product moves along it and never skips the second link. --------------------------------------------------------------- */ .bnl-page--stock-brighter .bnl-chain { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); } .bnl-page--stock-brighter .bnl-chain__node { position: relative; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent); padding: var(--space-ml); } .bnl-page--stock-brighter .bnl-chain__node--you { border-color: color-mix(in srgb, var(--color-pink) 55%, var(--color-border)); box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink); } .bnl-page--stock-brighter .bnl-chain__who { font-family: var(--font-heading-proposed); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-xs); } .bnl-page--stock-brighter .bnl-chain__node--you .bnl-chain__who { color: var(--color-primary); } .bnl-page--stock-brighter .bnl-chain__title { font-family: var(--font-heading-proposed); font-size: var(--text-h3); font-weight: 700; letter-spacing: -.015em; margin: 0 0 var(--space-xs); } .bnl-page--stock-brighter .bnl-chain__rule { margin: var(--space-lg) 0 0; padding: var(--space-ml); border-radius: var(--radius-md); border: 1px dashed color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); text-align: center; font-family: var(--font-heading-proposed); font-weight: 700; font-size: var(--text-h3); letter-spacing: -.015em; } /* --------------------------------------------------------------- TODO MARKERS — visually loud on purpose. These must not survive to publish. Making a placeholder look like finished copy is how a placeholder ships. --------------------------------------------------------------- */ /* --------------------------------------------------------------- PHOTO CARD — the carousel card for #proof. Named .bnl-pcard, not .bnl-ncard: the Live Brighter card carries an occasion label and a CTA. This one is a captioned photograph and nothing else, so the two will diverge. --------------------------------------------------------------- */ #proof .bnl-pcard { margin: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-md); background: #101214; border: 1px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); transform-style: preserve-3d; } #proof .bnl-pcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; background: linear-gradient(158deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 34%, transparent 58%); } #proof .bnl-pcard__media { position: relative; flex: 1; min-height: 0; } #proof .bnl-pcard__vid { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; aspect-ratio: auto; display: block; background: #0b0d0e; } #proof .bnl-pcard__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 46%; pointer-events: none; background: linear-gradient(180deg, transparent, #101214 94%); } #proof .bnl-pcard__body { position: relative; z-index: 1; flex: none; padding: 14px 16px 16px; transform-style: preserve-3d; } #proof .bnl-pcard__when { margin: 0 0 5px; font-family: var(--font-heading-proposed); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary); } #proof .bnl-pcard__cap { margin: 0; font-family: var(--font-heading-proposed); font-weight: 700; font-size: 13.2px; line-height: 1.26; letter-spacing: -.015em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.55); } /* --------------------------------------------------------------- ROTATOR — homepage rev34/35 #doors mechanics. Identical geometry to the Live Brighter occasion carousel so the two feel like one component. Only the card inside differs. --------------------------------------------------------------- */ #proof .bnl-rot { margin: var(--space-ml) 0 0; } #proof .bnl-rot__stage { position: relative; height: 560px; perspective: 1100px; perspective-origin: 50% 46%; transform-style: preserve-3d; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } #proof .bnl-rot__stage.is-drag { cursor: grabbing; } #proof .bnl-rot__stage:focus-visible { outline: var(--focus-ring); outline-offset: 6px; border-radius: var(--radius-md); } #proof .bnl-rot__glow { position: absolute; left: 50%; top: 8px; width: min(760px, 94vw); height: 420px; margin-left: max(-380px, -47vw); pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-primary) 13%, transparent) 0%, transparent 68%); } #proof .bnl-rot__item { --w: 58vw; position: absolute; left: 50%; top: 0; width: var(--w); height: 538px; margin-left: calc(var(--w) / -2); transform-style: preserve-3d; transition: transform .66s cubic-bezier(.22,.61,.36,1), opacity .66s ease, filter .66s ease; will-change: transform; } #proof .bnl-rot__stage.is-drag .bnl-rot__item { transition: none; } #proof .bnl-rot__item.is-tracking { transition: transform .12s linear; } #proof .bnl-rot__item[data-pos="0"] { transform: translateX(0) translateZ(0) rotateY(calc(-9deg + var(--bnl-ry, 0deg))) rotateX(calc(3.5deg + var(--bnl-rx, 0deg))) scale(1); opacity: 1; filter: none; z-index: 5; } #proof .bnl-rot__item[data-pos="1"] { transform: translateX(70%) translateZ(-140px) rotateY(-46deg) rotateX(5deg) scale(.9); opacity: .6; filter: blur(.8px); z-index: 3; } #proof .bnl-rot__item[data-pos="-1"] { transform: translateX(-70%) translateZ(-140px) rotateY(32deg) rotateX(5deg) scale(.9); opacity: .6; filter: blur(.8px); z-index: 3; } #proof .bnl-rot__item[data-pos="2"], #proof .bnl-rot__item[data-pos="-2"], #proof .bnl-rot__item[data-pos="3"], #proof .bnl-rot__item[data-pos="-3"] { transform: translateX(0) translateZ(-360px) rotateY(-9deg) rotateX(3.5deg) scale(.82); opacity: .14; filter: blur(2.5px); z-index: 1; } #proof .bnl-rot__item[data-pos="0"] .bnl-pcard { box-shadow: -16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-teal); } #proof .bnl-rot__item[data-pos="0"] .bnl-pcard__when { transform: translateZ(26px); } #proof .bnl-rot__item[data-pos="0"] .bnl-pcard__cap { transform: translateZ(16px); } #proof .bnl-rot__item[data-pos="0"] .bnl-pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: radial-gradient(240px circle at var(--bnl-mx, 50%) var(--bnl-my, 26%), rgba(255,255,255,.16), rgba(255,255,255,.05) 38%, transparent 64%); opacity: 0; transition: opacity .32s ease; mix-blend-mode: screen; } #proof .bnl-rot__item[data-pos="0"].is-tracking .bnl-pcard::after { opacity: 1; } #proof .bnl-rot__shadow { position: absolute; left: 50%; top: 538px; width: min(340px, 50vw); height: 24px; margin-left: max(-178px, -26vw); border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,.82) 0%, rgba(0,0,0,.34) 46%, transparent 74%); filter: blur(9px); transition: transform .66s cubic-bezier(.22,.61,.36,1), opacity .66s ease; } #proof .bnl-rot__stage.is-drag .bnl-rot__shadow { transition: none; } #proof .bnl-rot__nav { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: var(--space-md); } #proof .bnl-rot__arrows { display: flex; align-items: center; justify-content: center; gap: 10px; } #proof .bnl-rot__arrow { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #EDEFEF; font-size: 16px; line-height: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } #proof .bnl-rot__arrow--prev { border-color: color-mix(in srgb, var(--color-pink) 70%, transparent); color: #fff; box-shadow: var(--glow-ambient-pink); } #proof .bnl-rot__arrow--prev:hover { box-shadow: var(--hglow-pink-hi); background: color-mix(in srgb, var(--color-pink) 14%, transparent); } #proof .bnl-rot__arrow--next { border-color: color-mix(in srgb, var(--color-primary) 70%, transparent); color: #fff; box-shadow: var(--glow-ambient-teal); } #proof .bnl-rot__arrow--next:hover { box-shadow: var(--hglow-teal-hi); background: color-mix(in srgb, var(--color-primary) 14%, transparent); } #proof .bnl-rot__dots { display: flex; align-items: center; gap: 0; } #proof .bnl-rot__dot { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } #proof .bnl-rot__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.26); transition: background .25s ease, box-shadow .25s ease, transform .25s ease; } #proof .bnl-rot__dot[aria-selected="true"]::before { background: var(--color-primary); box-shadow: var(--hglow-teal); transform: scale(1.35); } #proof .bnl-rot__hint { margin: 0; font-size: 11.5px; color: var(--color-text-muted); font-family: var(--font-heading-proposed); letter-spacing: .06em; } #proof .bnl-rot.is-manual .bnl-rot__hint { opacity: 0; transition: opacity .4s ease; } /* --------------------------------------------------------------- BREAKPOINTS --------------------------------------------------------------- */ @media (min-width: 700px) { } @media (min-width: 860px) { .bnl-page--stock-brighter .bnl-chain { grid-template-columns: repeat(4, 1fr); align-items: stretch; } } @media (min-width: 900px) { .bnl-page--stock-brighter .bnl-hero { padding: var(--space-2xl) var(--space-lg); } } @media (min-width: 560px) { #proof .bnl-rot__item { --w: 46vw; height: 566px; } #proof .bnl-rot__stage { height: 588px; } #proof .bnl-rot__shadow { top: 566px; } #proof .bnl-pcard__body { padding: 18px 20px 20px; } #proof .bnl-pcard__cap { font-size: 14px; } } @media (min-width: 900px) { #proof .bnl-rot__item { --w: 340px; height: 604px; margin-left: -170px; } #proof .bnl-rot__stage { height: 628px; } #proof .bnl-rot__shadow { top: 604px; } #proof .bnl-pcard__body { padding: 20px 22px 20px; } #proof .bnl-pcard__cap { font-size: 15px; } } /* --------------------------------------------------------------- MOTION — gated ON, matching rev34/35 policy. The rotator's autoplay is disabled in JS when reduce is set; CSS cannot stop a setInterval. --------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { #proof .bnl-rot__item[data-pos="0"] { animation: bnl-card-float 7s ease-in-out infinite; } #proof .bnl-rot__shadow { animation: bnl-card-shadow 9s ease-in-out infinite; } } @keyframes bnl-card-float { 0%, 100% { --bnl-ry: -3.5deg; --bnl-rx: 2.2deg; } 50% { --bnl-ry: 3.5deg; --bnl-rx: 4.8deg; } } @keyframes bnl-card-shadow { 0%, 100% { transform: scaleX(.96) scaleY(.9); opacity: .78; } 58% { transform: scaleX(1.06) scaleY(1.1); opacity: .62; } } /* --------------------------------------------------------------- VIDEO — portrait clips, front card only --------------------------------------------------------------- */ #proof .bnl-pcard__vid { width: 100%; height: 100%; object-fit: cover; } /* Off-centre cards show their poster frame, not a running video. The script pauses them; this makes the still state look deliberate. */ #proof .bnl-rot__item:not([data-pos="0"]) .bnl-pcard__vid { filter: saturate(.85); } /* A small "playing" tick so the front card reads as live rather than as a photograph that happens to be sharper than its neighbours. */ #proof .bnl-rot__item[data-pos="0"] .bnl-pcard__media::before { content: ""; position: absolute; top: 12px; right: 12px; z-index: 3; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); box-shadow: var(--hglow-teal); } @media (prefers-reduced-motion: reduce) { /* Clips do not autoplay at all — the script never calls play(). The poster frame is what a reduced-motion visitor sees. */ #proof .bnl-rot__item[data-pos="0"] .bnl-pcard__media::before { display: none; } } /* --------------------------------------------------------------- CHANNEL CHAIN AS A ROTATOR Same engine as #proof, different card. Geometry is flatter and shallower than the video rotator: these are text panels, not portrait clips, so a hard 46deg rotation would make the back cards unreadable rather than merely secondary. --------------------------------------------------------------- */ #channel .bnl-rot { margin: var(--space-ml) 0 0; } #channel .bnl-rot__stage { position: relative; height: 430px; margin: 0; padding: 0; list-style: none; perspective: 1400px; perspective-origin: 50% 50%; transform-style: preserve-3d; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } #channel .bnl-rot__stage.is-drag { cursor: grabbing; } #channel .bnl-rot__stage:focus-visible { outline: var(--focus-ring); outline-offset: 8px; border-radius: var(--radius-md); } /* --------------------------------------------------------------- CHAIN CARDS — dressed. Five layers, all cheap to composite: 1. base — deep gradient body 2. ::before— gradient hairline edge via mask, not a border 3. ghost — huge translucent numeral bled off the corner 4. ::after — top-left gloss sweep, the glass read 5. shadow — long throw + coloured ambient on the front card Nothing here animates layout; only transform, opacity and filter, so the coverflow stays on the compositor. --------------------------------------------------------------- */ #channel .bnl-rot__item { --w: 80vw; --edge: color-mix(in srgb, var(--color-primary) 62%, transparent); /* Stays within the card's own accent. An earlier version crossed to the opposite colour at 100%, which landed on the densest part of the glyph and neutralised it — measured, not guessed. */ --ghost-grad: linear-gradient(155deg, color-mix(in srgb, var(--color-primary) 30%, transparent) 0%, color-mix(in srgb, var(--color-primary) 19%, transparent) 52%, color-mix(in srgb, var(--color-primary) 9%, transparent) 100%); position: absolute; left: 50%; top: 0; width: var(--w); min-height: 410px; margin-left: calc(var(--w) / -2); padding: calc(var(--space-md) + 2px); border-radius: 20px; border: 0; isolation: isolate; overflow: hidden; /* clip-path, not overflow alone: a preserve-3d ancestor makes some engines ignore overflow on a transformed child, which let the ghost numeral bleed outside the card corner. clip-path is honoured either way. */ clip-path: inset(0 round 20px); background: radial-gradient(120% 90% at 8% 0%, rgba(0,169,181,.14) 0%, transparent 58%), radial-gradient(90% 70% at 100% 100%, rgba(227,5,107,.10) 0%, transparent 62%), linear-gradient(168deg, #171c1f 0%, #0d1012 62%, #0a0d0e 100%); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease, filter .6s ease; will-change: transform; } /* 2 — gradient hairline. A masked pseudo-element rather than a border, because border-image cannot do rounded corners cleanly. */ #channel .bnl-rot__item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(150deg, var(--edge) 0%, color-mix(in srgb, var(--color-primary) 18%, transparent) 32%, transparent 54%, color-mix(in srgb, var(--color-pink) 26%, transparent) 88%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; z-index: 2; } /* 4 — gloss sweep */ #channel .bnl-rot__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: linear-gradient(158deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.022) 30%, transparent 52%); } /* 3 — the ghost numeral. Bleeds off the bottom-right corner so the card reads as a plate cut from something larger. */ #channel .bnl-chain__ghost { position: absolute; /* Positive offsets on both axes: the glyph must sit WHOLLY inside the card. clip-path was already stopping it painting outside, but a numeral sliced by the card edge reads as a rendering fault rather than as a design choice. Measured — zero overhang at 360/390/430. */ right: 18px; bottom: 16px; margin: 0; font-family: var(--font-display); font-size: 156px; font-weight: 800; line-height: .78; letter-spacing: -.07em; pointer-events: none; user-select: none; z-index: 0; /* Gradient, tinted to the card's own accent — teal on the standard cards, pink on the Distributor card — so the numeral belongs to the card it sits on rather than being a generic grey. Kept low-alpha: it is a watermark, not a headline. */ background: var(--ghost-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } #channel .bnl-chain__node--you { --edge: color-mix(in srgb, var(--color-pink) 66%, transparent); --ghost-grad: linear-gradient(155deg, color-mix(in srgb, var(--color-pink) 34%, transparent) 0%, color-mix(in srgb, var(--color-pink) 22%, transparent) 52%, color-mix(in srgb, var(--color-pink) 11%, transparent) 100%); background: radial-gradient(120% 90% at 8% 0%, rgba(227,5,107,.16) 0%, transparent 58%), radial-gradient(90% 70% at 100% 100%, rgba(0,169,181,.09) 0%, transparent 62%), linear-gradient(168deg, #1c161a 0%, #110d10 62%, #0b090a 100%); } #channel .bnl-chain__node--you::before { background: linear-gradient(150deg, var(--edge) 0%, color-mix(in srgb, var(--color-pink) 22%, transparent) 34%, transparent 56%, color-mix(in srgb, var(--color-primary) 24%, transparent) 90%); } /* content sits above ghost and gloss */ #channel .bnl-chain__who, #channel .bnl-chain__title, #channel .bnl-chain__body, #channel .bnl-chain__points { position: relative; z-index: 3; } #channel .bnl-chain__who { margin: 0 0 10px; font-family: var(--font-heading-proposed); font-size: 15px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--color-primary); display: flex; align-items: center; gap: 9px; } /* hairline rule trailing the eyebrow — matches .bnl-kicker on the homepage */ #channel .bnl-chain__who::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 46%, transparent), transparent); } #channel .bnl-chain__node--you .bnl-chain__who { color: var(--color-pink); } #channel .bnl-chain__node--you .bnl-chain__who::after { background: linear-gradient(90deg, color-mix(in srgb, var(--color-pink) 52%, transparent), transparent); } #channel .bnl-chain__title { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(32px, 8.4vw, 40px); font-weight: 800; line-height: .98; letter-spacing: -.05em; color: #fff; text-wrap: balance; } #channel .bnl-chain__body { margin: 0 0 13px; padding-bottom: 13px; color: #E8ECEE; font-weight: 600; font-size: 15px; line-height: 1.34; border-bottom: 1px solid rgba(255,255,255,.07); } #channel .bnl-chain__points { margin: 0; padding: 0; list-style: none; } #channel .bnl-chain__points li { position: relative; padding-left: 19px; margin-bottom: 8px; font-size: 13.6px; line-height: 1.44; color: var(--color-text-muted); } #channel .bnl-chain__points li:last-child { margin-bottom: 0; } /* chevron tick rather than a dot — reads as a spec sheet, not a bullet list */ #channel .bnl-chain__points li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 5px; height: 5px; border-right: 1.5px solid var(--color-primary); border-bottom: 1.5px solid var(--color-primary); transform: rotate(-45deg); } #channel .bnl-chain__node--you .bnl-chain__points li::before { border-color: var(--color-pink); } /* 5 — depth. Only the front card pays for the big shadow. */ #channel .bnl-rot__item[data-pos="0"] { box-shadow: 0 34px 60px -28px rgba(0,0,0,.95), 0 2px 0 0 rgba(255,255,255,.05) inset, var(--glow-ambient-teal); } #channel .bnl-rot__item[data-pos="0"].bnl-chain__node--you { box-shadow: 0 34px 60px -28px rgba(0,0,0,.95), 0 2px 0 0 rgba(255,255,255,.05) inset, var(--glow-ambient-pink); } #channel .bnl-rot__stage.is-drag .bnl-rot__item { transition: none; } #channel .bnl-rot__item[data-pos="0"] { transform: translateX(0) translateZ(0) rotateY(0deg) scale(1); opacity: 1; filter: none; z-index: 5; } #channel .bnl-rot__item[data-pos="1"] { transform: translateX(64%) translateZ(-170px) rotateY(-26deg) scale(.92); opacity: .42; filter: blur(1px); z-index: 3; } #channel .bnl-rot__item[data-pos="-1"] { transform: translateX(-64%) translateZ(-170px) rotateY(26deg) scale(.92); opacity: .42; filter: blur(1px); z-index: 3; } #channel .bnl-rot__item[data-pos="2"], #channel .bnl-rot__item[data-pos="-2"] { transform: translateX(0) translateZ(-380px) scale(.84); opacity: .1; filter: blur(2.5px); z-index: 1; } /* The "you" card keeps its pink edge — it is the whole argument. */ /* (stale rev6 chain typography removed — superseded by the dressed card block below) */ #channel .bnl-rot__nav { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: var(--space-md); } #channel .bnl-rot__arrows { display: flex; align-items: center; justify-content: center; gap: 10px; } #channel .bnl-rot__arrow { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #EDEFEF; font-size: 16px; line-height: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } #channel .bnl-rot__arrow--prev { border-color: color-mix(in srgb, var(--color-pink) 70%, transparent); box-shadow: var(--glow-ambient-pink); } #channel .bnl-rot__arrow--prev:hover { box-shadow: var(--hglow-pink-hi); background: color-mix(in srgb, var(--color-pink) 14%, transparent); } #channel .bnl-rot__arrow--next { border-color: color-mix(in srgb, var(--color-primary) 70%, transparent); box-shadow: var(--glow-ambient-teal); } #channel .bnl-rot__arrow--next:hover { box-shadow: var(--hglow-teal-hi); background: color-mix(in srgb, var(--color-primary) 14%, transparent); } #channel .bnl-rot__dots { display: flex; align-items: center; gap: 0; } #channel .bnl-rot__dot { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } #channel .bnl-rot__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.26); transition: background .25s ease, box-shadow .25s ease, transform .25s ease; } #channel .bnl-rot__dot[aria-selected="true"]::before { background: var(--color-primary); box-shadow: var(--hglow-teal); transform: scale(1.35); } #channel .bnl-rot__hint { margin: 0; font-size: 11.5px; color: var(--color-text-muted); font-family: var(--font-heading-proposed); letter-spacing: .06em; } #channel .bnl-rot.is-manual .bnl-rot__hint { opacity: 0; transition: opacity .4s ease; } @media (min-width: 700px) { #channel .bnl-rot__item { --w: 460px; margin-left: -230px; min-height: 392px; } #channel .bnl-rot__stage { height: 412px; } #channel .bnl-chain__title { font-size: 40px; } } /* --------------------------------------------------------------- THE RULE — the most important sentence on the page. It was body-sized inside a dashed box, which read as a footnote. --------------------------------------------------------------- */ /* BRI-449 defect 1 fix. The 22ch cap sat on the BOX, which has no font-size of its own and so measured against the inherited --text-h3 (19px) while its children render at up to 46px and 64px -- a 3.4x mismatch. The white lead line overflowed visibly; the gradient hero line overflowed INVISIBLY, because -webkit-text-fill-color: transparent has no fallback paint past the box edge, which is how "Not to homeowne" / "Not to contractor" shipped. Same ch unit, same narrow-and-punchy intent -- the cap now sits on the elements that carry the display font, so it measures at the size the text is actually rendered at. The type is NOT shrunk. */ #channel .bnl-chain__rule { margin: var(--space-lg) auto 0; max-width: none; text-align: center; border: 0; padding: 0; } #channel .bnl-chain__rule-lead, #channel .bnl-chain__rule-hero { max-width: 20ch; margin-inline: auto; } #channel .bnl-chain__rule-lead { display: block; font-family: var(--font-display); font-size: clamp(30px, 8.8vw, 46px); font-weight: 800; line-height: 1.04; letter-spacing: -.05em; color: #fff; margin-bottom: 8px; } /* Each word is its own so they can arrive one at a time. Weight is already 800 on the parent — is here for the hook, not the bold. */ #channel .bnl-chain__rule-lead b { display: inline-block; font-weight: inherit; } #channel .bnl-chain__rule-hero { display: block; font-family: var(--font-display); font-size: clamp(34px, 10.8vw, 64px); font-weight: 800; line-height: 1.0; letter-spacing: -.052em; text-wrap: balance; } /* --------------------------------------------------------------- DEAD SPACE — the chain section carried a full --space-xl above the heading on top of the previous section's bottom padding, which read as a hole on a phone. Halved at the top only. --------------------------------------------------------------- */ #channel.bnl-section--tight { padding-top: calc(var(--space-xl) * .42); } /* Chain card bullets — the cards used to be one abstract sentence each. These carry the actual mechanics. */ #channel .bnl-chain__body { margin: 0 0 10px; color: #fff; font-weight: 600; } #channel .bnl-chain__points { margin: 0; padding: 0; list-style: none; } #channel .bnl-chain__points li { position: relative; padding-left: 16px; margin-bottom: 6px; font-size: 13.6px; line-height: 1.42; color: var(--color-text-muted); } #channel .bnl-chain__points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); } #channel .bnl-chain__node--you .bnl-chain__points li::before { background: var(--color-pink); } /* --------------------------------------------------------------- DISTRIBUTOR SUPPORT — film beside the list --------------------------------------------------------------- */ #support .bnl-support { margin-top: var(--space-ml); display: grid; gap: var(--space-md); } #support .bnl-support__media { position: relative; border-radius: var(--radius-md); overflow: hidden; background: #0b0d0e; border: 1px solid color-mix(in srgb, var(--color-primary) 34%, var(--color-border)); box-shadow: var(--glow-ambient-teal); max-width: 340px; margin-inline: auto; aspect-ratio: 9 / 16; } #support .bnl-support__vid { width: 100%; height: 100%; object-fit: cover; display: block; } #support .bnl-support__toggle { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(8,10,11,.62); cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); } /* pause glyph when playing, play glyph when not */ #support .bnl-support__toggle::before { content: ""; width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; } #support .bnl-support__toggle[data-playing="false"]::before { width: 0; height: 0; border: 0; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; } /* --------------------------------------------------------------- SUPPORT LIST — was four undifferentiated paragraphs separated by hairlines, which read as a wall. Now numbered plates: the numeral gives the eye somewhere to land, and each claim is a card rather than a run of text. --------------------------------------------------------------- */ #support .bnl-support__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: sup; } #support .bnl-support__item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px 16px 16px 14px; border-radius: 16px; background: linear-gradient(158deg, #14181a 0%, #0d1012 100%); border: 1px solid var(--color-border); overflow: hidden; } /* teal spine on the left edge — cheap, and it groups the four visually */ #support .bnl-support__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-pink) 70%, transparent)); opacity: .8; } #support .bnl-support__n { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.04em; padding-top: 2px; background: var(--gradient-lux); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; } #support .bnl-support__txt h3 { margin: 0 0 5px; font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.035em; line-height: 1.08; color: #fff; text-wrap: balance; } #support .bnl-support__txt p { margin: 0; font-size: 14.4px; line-height: 1.5; color: var(--color-text-muted); } @media (min-width: 900px) { #support .bnl-support { grid-template-columns: 340px 1fr; gap: var(--space-lg); align-items: start; } #support .bnl-support__media { margin-inline: 0; } } /* --------------------------------------------------------------- PARTNER PROMOTIONS — crossfade slideshow. Not the 3D rotator: these are landscape stills and the point is the photograph, not the mechanic. A stack with opacity keeps layout height fixed and avoids the reflow a scroller causes. --------------------------------------------------------------- */ #promotions .bnl-slideshow { margin-top: var(--space-ml); } #promotions .bnl-slideshow__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: #0b0d0e; border: 1px solid var(--color-border); touch-action: pan-y; cursor: grab; } #promotions .bnl-slideshow__frame.is-drag { cursor: grabbing; } #promotions .bnl-slideshow__frame:focus-visible { outline: var(--focus-ring); outline-offset: 5px; } #promotions .bnl-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .62s ease; pointer-events: none; } #promotions .bnl-slide.is-active { opacity: 1; pointer-events: auto; } #promotions .bnl-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } #promotions .bnl-slide__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px; font-family: var(--font-heading-proposed); font-weight: 700; font-size: 13.4px; line-height: 1.32; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); background: linear-gradient(180deg, transparent, rgba(6,8,9,.88)); } #promotions .bnl-slideshow__nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--space-md); } #promotions .bnl-slideshow__arrow { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #EDEFEF; font-size: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); transition: background .2s ease, box-shadow .2s ease; } #promotions .bnl-slideshow__arrow:hover { background: color-mix(in srgb, var(--color-primary) 14%, transparent); box-shadow: var(--hglow-teal-hi); } #promotions .bnl-slideshow__dots { display: flex; align-items: center; gap: 0; } #promotions .bnl-slideshow__dot { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } #promotions .bnl-slideshow__dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.26); transition: background .25s ease, transform .25s ease, box-shadow .25s ease; } #promotions .bnl-slideshow__dot[aria-selected="true"]::before { background: var(--color-primary); box-shadow: var(--hglow-teal); transform: scale(1.4); } /* --------------------------------------------------------------- ACCORDION — native
    , so it works with JS off --------------------------------------------------------------- */ #branch .bnl-acc { margin-top: var(--space-ml); display: grid; gap: 8px; } #branch .bnl-acc__item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(168deg, #14181a 0%, #0e1113 100%); overflow: hidden; } #branch .bnl-acc__item[open] { border-color: color-mix(in srgb, var(--color-primary) 46%, var(--color-border)); } #branch .bnl-acc__q { list-style: none; cursor: pointer; padding: 15px 46px 15px 16px; position: relative; display: grid; gap: 3px; } #branch .bnl-acc__q::-webkit-details-marker { display: none; } #branch .bnl-acc__q:focus-visible { outline: var(--focus-ring); outline-offset: -3px; } #branch .bnl-acc__t { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.032em; line-height: 1.12; color: #fff; } #branch .bnl-acc__sub { font-size: 13.4px; line-height: 1.4; color: var(--color-text-muted); } #branch .bnl-acc__q::after { content: ""; position: absolute; right: 18px; top: 22px; width: 9px; height: 9px; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(45deg); transition: transform .25s ease; } #branch .bnl-acc__item[open] .bnl-acc__q::after { transform: rotate(-135deg); top: 26px; } #branch .bnl-acc__body { margin: 0; padding: 0 16px 16px; list-style: none; } #branch .bnl-acc__body li { position: relative; padding-left: 16px; margin-bottom: 7px; font-size: 14.4px; line-height: 1.48; color: var(--color-text-muted); } #branch .bnl-acc__body li:last-child { margin-bottom: 0; } #branch .bnl-acc__body li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); } @media (prefers-reduced-motion: reduce) { #promotions .bnl-slide { transition: none; } #branch .bnl-acc__q::after { transition: none; } } /* --------------------------------------------------------------- TAP TARGETS — every control is 44x44 minimum. The visible dot stays 7px; the button around it grew and the row gap went to 0 so the row occupies the same width it did before. Apple HIG 44pt, and WCAG 2.5.8 comfortably cleared. --------------------------------------------------------------- */ /* --------------------------------------------------------------- CONTACT — phone and email, verified against the live /contact/ page 2026-08-01. The number is a tel: link because 70% of this traffic is on a phone, and a distributor who wants to talk should not have to copy digits out of a page. --------------------------------------------------------------- */ .bnl-contact { margin: var(--space-md) 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; text-align: center; } .bnl-contact__lbl { font-family: var(--font-heading-proposed); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-text-muted); } .bnl-contact__tel { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; /* tap target */ padding: 4px 2px; text-decoration: none; } .bnl-contact__num { font-family: var(--font-display); font-size: clamp(21px, 5.6vw, 27px); font-weight: 800; letter-spacing: -.03em; background: var(--gradient-lux); -webkit-background-clip: text; background-clip: text; color: transparent; transition: filter .2s ease; } .bnl-contact__tel:hover .bnl-contact__num { filter: brightness(1.18); } .bnl-contact__tel:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: 8px; } .bnl-contact__mail { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 2px; font-size: 14.5px; color: var(--color-primary); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent); } .bnl-contact__mail:hover { color: #fff; border-bottom-color: #fff; } .bnl-contact__mail:focus-visible { outline: var(--focus-ring); outline-offset: 3px; } /* hero variant sits tight under the buttons */ .bnl-contact--hero { margin-top: var(--space-sm); justify-content: flex-start; } .bnl-contact--hero .bnl-contact__num { font-size: clamp(19px, 4.8vw, 23px); } @media (min-width: 700px) { .bnl-contact { gap: 8px 26px; } } /* --------------------------------------------------------------- HERO-WEIGHT SECTION HEADINGS Two headings carry the page's argument rather than just labelling a section. They get a size step above the rest so the hierarchy is visible rather than implied. --------------------------------------------------------------- */ .bnl-heading--hero { font-size: clamp(38px, 11.6vw, 62px) !important; line-height: .98 !important; letter-spacing: -.052em !important; text-wrap: balance; } /* --------------------------------------------------------------- NOTE ON "UNUSED" SELECTORS An audit will report these as matching nothing. They are runtime state and must stay: .is-drag set while a pointer is down on a carousel .is-manual set once autoplay has been surrendered .is-tracking set while a pointer tilts the front card [data-pos="-2"] etc. — written by the rotator as cards move [data-playing="false"] — the film toggle after a pause What WAS removed in rev8: .bnl-manifest (replaced by the accordion), .bnl-todo and .bnl-faq__a--todo (no program placeholders remain), the stale .bnl-chain__node paragraph rule, and the .bnl-slot / img fallbacks in the clip card (those wells hold