on purpose — see bbxGateTravel's comment: a sibling in the
regular document would render behind the open dialog's top-layer box for the first leg of the
trip. position:fixed still resolves against the viewport from inside a dialog, so it can travel
anywhere on screen, including past the dialog's own edge. */
.bbx-gate-traveller {
position: fixed; inset-block-start: 0; inset-inline-start: 0;
inline-size: 13px; block-size: 13px; border-radius: 50%;
background: var(--figma-primary-gold);
box-shadow: 0 0 14px 4px rgba(219, 189, 133, .65);
pointer-events: none; opacity: 0;
}
/* The landing pulse on the real link row — confirms "this is where it arrived" a beat before
the button itself flips, echoing the spotlight ring's pill shape rather than introducing a
new one. */
.bbx-linkbox.bbx-gate-ring { outline: 3px solid rgba(219, 189, 133, .6); outline-offset: 3px; border-radius: var(--radius-full); transition: outline-color .25s ease; }
.bbx-gate-x {
position: absolute; inset-block-start: 8px; inset-inline-end: 12px;
background: none; border: none; color: var(--color-text-light);
font-size: 26px; line-height: 1; padding: 4px 8px; cursor: pointer;
}
.bbx-gate-x:hover { color: var(--color-white); }
.bbx-gate-img { display: block; inline-size: 100%; max-inline-size: 110px; block-size: auto; margin-inline: auto; }
.bbx-gate-math { color: var(--figma-primary-gold); font-weight: var(--fw-bold); }
/* The clock is shown before anything has started, so it must look unmistakably stopped: muted
grey, no motion, and a pause glyph. Gold is this site's colour for money and for live things,
so a gold clock holding still would read as already counting down. It turns gold on approval,
and that switch is the reward beat. */
.bbx-gate-clockwrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bbx-gate-clock {
font-size: clamp(26px, 3.4vw, 32px);
font-weight: var(--fw-bold);
color: var(--color-text-light);
font-variant-numeric: tabular-nums;
line-height: 1;
opacity: .55;
transition: color .35s ease, opacity .35s ease;
}
.bbx-gate-clock.is-live { color: var(--figma-primary-gold); opacity: 1; }
/* "3:00:00" alone reads ambiguous at a glance — could be minutes:seconds — so the unit is
spelled out rather than left implicit (Eitan 2026-08-20). Sized off the clock's own font-size
rather than a fixed px value, so it scales down together with the clock on small screens
instead of the two drifting out of proportion. */
.bbx-gate-clock-unit {
font-size: 0.32em;
font-weight: var(--fw-medium);
text-transform: uppercase;
letter-spacing: .04em;
color: inherit;
opacity: .8;
margin-inline-start: 6px;
vertical-align: 0.5em;
}
.bbx-gate-clocklbl {
display: inline-flex; align-items: center; gap: 5px;
font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .09em;
color: var(--color-text-light);
}
/* Play, not pause (Eitan 2026-08-20): pause claims the clock was running and got stopped, but
it never ran yet — it's standing by. A right-pointing triangle says "press to start" instead,
which is what's actually true. Built as a CSS border-triangle, no icon file. */
.bbx-gate-clocklbl::before {
content: ""; flex: none; inline-size: 0; block-size: 0;
border-block: 5px solid transparent;
border-inline-start: 7px solid currentColor;
}
.bbx-gate-clock.is-live + .bbx-gate-clocklbl { color: var(--figma-primary-gold); }
.bbx-gate-clock.is-live + .bbx-gate-clocklbl::before { display: none; }
/* Single column below 824px: there is no middle cube to sit on, so the panel becomes a sheet
rising from the bottom edge, landing the confirm button roughly where her thumb already was. */
@media (max-width: 824px) {
.bbx-gate-img { max-inline-size: 150px; }
}
/* Copy confirmed. Green reads as "done" next to the WhatsApp button's own green. */
.bbx-copy.is-copied { background: #5ba324; color: var(--color-white); }
.bbx-copy.is-copied svg { stroke: currentColor; }
/* Backing out of the gate flashes the line that answers why, so the exit is not a dead press.
The rest colour is a custom property, not hard-coded to the muted grey it was written for:
this now flashes bbxBonusLine (Eitan 2026-08-20), which is white/bold (.bbx-h), and without
this override the 0%/100% keyframe would yank it to grey for an instant at both ends of the
pulse instead of holding its real resting colour. */
@keyframes bbxFlash {
0%, 100% { color: var(--bbx-flash-rest, var(--color-text-light)); }
25%, 60% { color: var(--figma-primary-gold); }
}
.bbx-flash { animation: bbxFlash 1.4s ease-in-out 1; }
#bbxBonusLine.bbx-flash { --bbx-flash-rest: var(--color-white); }
@media (prefers-reduced-motion: reduce) {
.bbx-flash { animation: none; color: var(--figma-primary-gold); }
}
/* Col A - price */
.bbx-col-price { display: flex; flex-direction: column; gap: 14px; background: #343434; border-radius: var(--radius-lg); padding: 32px; }
/* "Your price right now:" + price row + Order button + win caption, centered on the card
(Eitan 2026-09-13) — targeted rather than align-items:center on the whole column, since
#bbxKeepPrice below (phone input row, channel pills) relies on full column width and its
own internal flex rows, not on shrink-wrapped centering. */
.bbx-col-price > .bbx-h { text-align: start; } /* (Barak 2026-10-08: restored from 28-07); was center */
.bbx-col-price .bbx-order-btn { margin-bottom: 18px; } /* extra breathing below Order Now, before "Want an Even Lower Price?" (~32px total w/ gap) (Barak 2026-07-19) */
.bbx-price-row { position: relative; display: flex; align-items: center; gap: 14px; align-self: flex-start; /* (Barak 2026-10-08: restored from 28-07); was center */ width: max-content; max-width: 100%; } /* shrink to price content so centered sparkle sits ON the price at all widths; align-self centered on the card, was flex-start/left (Eitan 2026-09-13) */
.bbx-new-wrap { position: relative; display: inline-flex; align-items: center; }
.bbx-sparkle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 280px; height: 170px; pointer-events: none; z-index: 5; opacity: 0; } /* sparkle burst over price on each drop (Barak 2026-07-19) */
.bbx-sparkle.play { opacity: 1; }
.bbx-price-old { color: var(--color-text-light); font-size: clamp(40px, 5vw, 52px); font-weight: var(--fw-extrabold); text-decoration: line-through; line-height: 1; }
.bbx-price-arrow { color: var(--color-text-light); font-size: var(--fs-card); line-height: 1; }
.bbx-price-new { color: var(--figma-primary-gold); font-size: clamp(40px, 5vw, 52px); font-weight: var(--fw-extrabold); line-height: 1; }
.bbx-inline-money { color: var(--figma-primary-gold); font-weight: var(--fw-bold); } /* same gold-for-money cue as .bbx-price-new, sized inline for use inside a (Eitan 2026-08-19) */
.bbx-order-btn {
align-self: flex-start; /* (Barak 2026-10-08: restored from 28-07); Eitan 2026-09-13 had centered it */
border: 2px solid var(--figma-primary-gold);
color: var(--figma-primary-gold);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
text-align: center;
text-decoration: none;
padding: 16px 32px;
border-radius: var(--radius-full);
min-width: 290px;
max-width: 400px;
transition: background 0.2s ease, color 0.2s ease;
}
/* Order Now — phone-scoped: allow shrink so it fills the card and never exceeds the screen (Barak 2026-07-19b; re-adds full-width at <=480px only, removed 07-19; desktop/tablet 290px floor untouched) */
@media (max-width: 480px){
.bbx-order-btn { min-width: 0; width: 100%; max-width: 100%; }
}
.bbx-order-btn:hover { background: var(--figma-primary-gold); color: var(--color-text-dark); }
/* At $19, .btn-gold (home.html) is added alongside this class for the inverted solid-gold +
orbiting-glow look. Same specificity as the plain rules above (0,1,0,0 each), loaded later
in the cascade — this pair (0,2,0,0) beats both so the win look always shows, hover included
(Eitan 2026-09-13). */
.bbx-order-btn.btn-gold, .bbx-order-btn.btn-gold:hover { border-color: transparent; color: var(--color-text-dark); }
.bbx-muted-stack { display: flex; flex-direction: column; gap: 10px; }
.bbx-muted-stack p { color: var(--color-text-light); font-size: var(--fs-body); margin: 0; line-height: 1.4; }
/* 28-07 spacing between the subheading and its lines (Barak 2026-10-08): they used to be direct
children of .bbx-col-price and took its 14px flex gap; #bbxIntroCopy now wraps them, so the gap
is restored here as a margin. */
#bbxIntroCopy > .bbx-h--down { margin-bottom: 14px; }
/* Influencer-only line inside the intro block (Eitan 2026-09-15). White and bold against the
two muted grey lines above it, which is the whole point — it is the one line in this block
addressed to HER rather than to every visitor. No gold: gold is money in play on this site,
and this line promises a preview, not a payout.
Detached from the two lines above (Eitan 2026-09-15): they explain the shared mechanic, this
one is an instruction aimed at her, so it gets real space plus a hairline rule rather than
sitting in the stack's uniform 10px rhythm and reading as a third bullet of the same thought.
The arrow points RIGHT, at the middle column — the ladder her preview click animates. */
/* Flex row, not inline text (Eitan 2026-09-15): the sentence alone fills ~366px of the column's
373px usable width, so ANY inline arrow was pushed to a line of its own — a sizing tweak could
never fix that. The arrow is now a sibling beside the text, free to grow without competing
with the sentence for the same line box. */
.bbx-muted-stack p.bbx-intro-inf {
/* Literal #fff, not the token (Eitan 2026-09-15): burstbox.css is injected into pages that
may not all define --color-white, and a missing token would silently fall back to the
muted parent colour. This line must be full white wherever the bar loads. */
color: #fff; font-weight: var(--fw-bold);
margin-block-start: 14px; padding-block-start: 12px;
border-block-start: 1px solid rgba(255, 255, 255, .14);
display: flex; align-items: center; gap: 10px;
}
/* MUST come after the display:flex above (Eitan 2026-09-15, live bug): the `hidden` attribute is
only a UA display:none, so declaring display:flex on the same element silently defeated it and
the influencer line stayed on screen for a regular visitor no matter what the JS set. Same
guard already used for #bbxDevBar and .bbx-dev-menu in this file. */
.bbx-muted-stack p.bbx-intro-inf[hidden] { display: none; }
.bbx-intro-inf-text { flex: 1 1 auto; min-inline-size: 0; }
.bbx-intro-inf-arrow {
flex: 0 0 auto;
color: var(--figma-primary-gold, #dbbd85); font-weight: var(--fw-bold);
/* As large as the row allows, tilted 45deg counter-clockwise so it points up-and-right at the
middle column (Eitan 2026-09-15). 2.6em is the practical ceiling: the sentence wraps to two
lines here (~45px tall), and a rotated glyph occupies ~1.41x its own box, so a larger arrow
would be the tallest thing in the row and start driving the block's height — which is capped
(see .bbx-win / bbxPinKeepHeight). line-height:0 keeps the glyph from adding rows of its own. */
font-size: 2.6em; line-height: 0;
animation: bbx-intro-inf-nudge 1.6s ease-in-out infinite;
}
/* Small nudge along the arrow's own diagonal, transform-only so it never reflows the block.
The rotation lives INSIDE the keyframes: animating transform would otherwise overwrite a
rotate declared on the rule itself, and the arrow would snap back to horizontal. */
@keyframes bbx-intro-inf-nudge {
0%, 100% { transform: rotate(-45deg) translateX(0); }
50% { transform: rotate(-45deg) translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
/* The rotation lives in the keyframes, so killing the animation alone would leave the arrow
horizontal. Re-declare the tilt statically: motion is what we drop here, not direction. */
.bbx-intro-inf-arrow { animation: none; transform: rotate(-45deg); }
}
/* Col B - discount ladder */
.bbx-col-ladder { display: flex; flex-direction: column; gap: 16px; background: #343434; border-radius: var(--radius-lg); padding: 32px; }
/* Ladder column, Eitan 2026-08-19: the sub-line was removed (the table already states every
price, and the guilt-free reassurance lives in the price column), the heading steps up in
size, and heading + rows are centred on one shared axis. The rows carry width:max-content,
so centring the column's cross axis is what puts the heading exactly over them.
Sizes here are a starting point for Barak, not a locked design. */
.bbx-col-ladder { align-items: stretch; } /* (Barak 2026-10-08: restored from 28-07): heading + rows start-aligned; was center */
.bbx-col-ladder > .bbx-h { text-align: start; } /* (Barak 2026-10-08: restored from 28-07); was center */ /* size now comes from --bbx-card-title, shared with the other two columns */
/* MODE 2 (flat): add class "bbx-flat" to .bbx-inner -> no bg, zero side padding. Default (no class) = MODE 1 (bg + padding). (Barak 2026-07-19) */
.bbx-inner.bbx-flat .bbx-col-price,
.bbx-inner.bbx-flat .bbx-col-ladder,
.bbx-inner.bbx-flat .bbx-card,
/* Whole column centered (Eitan 2026-09-13): text-align here cascades to every text
descendant that doesn't set its own alignment. align-items stays at its default (stretch)
so #bbxActiveCard keeps filling the column width (its bg/border need the full card, not a
shrink-wrapped one) — .bbx-wa/.bbx-linkbox, the two capped-width children, get their own
margin-inline:auto fix below instead, same technique .bbx-bonus-wrap already used. */
.bbx-col-timer { display: flex; flex-direction: column; text-align: center; }
.bbx-col-timer > #bbxActiveCard > .bbx-fine { text-align: center; }
.bbx-col-timer .bbx-h { text-align: start; } /* heading only, to line up with the two other card titles (Barak 2026-10-08: restored from 28-07); rest of the column stays centered */
/* The sentence moved BELOW the linkbox (Barak 2026-08-25): it belongs to both actions —
WhatsApp and Copy — so it must not sit under the WhatsApp button alone, and the OR divider
is gone with it ("Or paste it anywhere:" now chains the two actions instead). */
.bbx-col-timer > #bbxActiveCard > .bbx-fine { margin-top: 10px; }
.bbx-col-timer > #bbxActiveCard { flex: 1 1 auto; } /* fill to match tallest card (Barak 2026-07-19) */
.bbx-steps { display: grid; width: max-content; grid-template-columns: auto auto auto auto auto; align-items: center; column-gap: 8px; row-gap: 12px; padding: 8px 0 8px 0; font-variant-numeric: tabular-nums; white-space: nowrap; /* all-auto so min-content of the card = exact row width; no collapse/overlap (Barak 2026-07-19) */ }
/* enlarge whole ladder row ~12%, local only (Barak 2026-07-21) */
.bbx-steps { --fs-lead: clamp(20px, 1.8vw, 25px); --fs-card: clamp(22px, 2.25vw, 27px); --fs-micro: 13px; --fs-body: 18px; }
.bbx-step { display: contents; color: var(--color-text-light); }
.bbx-step-ico { font-size: var(--fs-lead); line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; position: relative; top: -3px; margin-inline-end: 6px; /* extra gap avatar->× only (Barak 2026-07-21) */ }
/* start, not center (Eitan 2026-09-07): centring each cell in the column pushed the short
"1 Click" row inward relative to the longer "2 Clicks" rows, so neither the × glyph nor the
word itself lined up down the ladder. Aligning to the start puts the × at one x-position on
every row, and since the count is always a single digit the word starts at one x-position
too. Supersedes the 2026-08-19 centring note, which fixed the opposite complaint. */
/* explicit line-height (Eitan 2026-09-07): without it the anonymous box around the text node
inherits a relative value, so its height — and therefore the centre the × is aligned to —
shifts with rounding at different viewport widths. Pinning it to 1 makes the centre the
same on every row. */
.bbx-step-n { font-weight: var(--fw-bold); font-size: var(--fs-lead); line-height: 1; min-width: 24px; display: inline-flex; align-items: center; justify-content: flex-start; }
/* block, not inline-block (Eitan 2026-09-07): as an inline-block the glyph sat on the text
baseline, so its vertical position came from the FONT's metrics rather than from the row.
The parent is already inline-flex with align-items:center, and a block-level flex child is
centred geometrically instead — which is what puts the × at the same height on every row.
As an inline it was landing ~2px off between rows. */
.bbx-mult { display: block; flex: none; width: 0.625em; height: 0.5em; margin-inline-end: 3px; background-color: currentColor; -webkit-mask: url("../images/mult.svg") center / contain no-repeat; mask: url("../images/mult.svg") center / contain no-repeat; }
.bbx-step-n small { font-size: var(--fs-small); }
.bbx-eq { font-size: var(--fs-body); }
#bbx-overlay button, #pb-bar button, #bbx-reopen { font-family: inherit; } /* buttons do not inherit font-family; align to site Hero_New (Barak 2026-07-19) */
.bbx-off { font-weight: var(--fw-bold); font-size: var(--fs-card); min-width: 56px; display: flex; align-items: flex-end; justify-content: flex-start; gap: 2px; color: #7d7d7d; justify-self: start; /* (Barak 2026-10-08: restored from 28-07); was center/center */ /* centred with the rest of the column (Eitan 2026-08-19) */ }
/* .bbx-stepprice stays justify-self:start ON PURPOSE: only the current row renders its
"Your Price" label, so that cell is wider than the others. Centring would push every other
row's price sideways and break the vertical alignment of the price digits. */
.bbx-off small, .bbx-stepprice small { font-size: var(--fs-micro); font-weight: var(--fw-regular); padding-bottom: 5px; text-transform: capitalize; line-height: 1.15; }
/* "Your Price" only when a friend has clicked (Barak 2026-07-21). visibility, not display: the
label carries a tags must stay inline or each
becomes its own item and the sentence stacks one fragment per line. */
min-block-size: calc(1.35em + 18px); /* 1 line + 8px padding x2 + 1px border x2 */
}
.bbx-explainer-note b { color: var(--color-primary); }
.bbx-explainer-note b.bbx-white { color: #fff; }
.bbx-active-banner {
font-size: 12px;
font-weight: 700;
color: #fff;
background: #252525;
border: 1px solid rgba(219, 189, 133, 0.4);
line-height: 1.35;
opacity: 0;
visibility: hidden;
}
.bbx-active-banner b { color: var(--color-primary); display: block; font-size: 11px; text-transform: uppercase; margin-bottom: 2px; }
.timer-zone.is-active .bbx-explainer-note {
opacity: 0;
visibility: hidden;
}
.timer-zone.is-active .bbx-active-banner {
opacity: 1;
visibility: visible;
}
/* Quick in-place pulse on the "clock is running" note (Barak 2026-08-25): transform-only
scale — grabs the eye without moving anything in the layout. Plays while the 2s first-send
delay runs, then the note rests. */
.bbx-explainer-note.is-pulsing { animation: bbx-note-pulse .5s ease-in-out 4; }
@keyframes bbx-note-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
.bbx-explainer-note.is-pulsing { animation: none; }
}
/* Recurring nudge on the explainer note across every stage (Eitan 2026-09-14): JS re-adds
.is-recur-pulsing every 5s (bbxNotePulseStart), stopping once she reaches 5 clicks. Scale
only, NO rotation (Eitan 2026-09-14b): unlike the order button's own recurring pulse below,
this note should just enlarge and settle back, nothing more. Reuses bbx-note-pulse, the same
keyframe as .is-pulsing's one-shot version, but as its own class and its own repeat count so
the two never collide on the same element (.is-pulsing fires ONCE on the transition to
running, from bbxSyncExplainerNote). */
.bbx-explainer-note.is-recur-pulsing { animation: bbx-note-pulse .5s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
.bbx-explainer-note.is-recur-pulsing { animation: none; }
}
/* Own keyframe, not a reuse of bbx-note-pulse (Eitan 2026-09-14): the recurring $19 nudge
(JS re-adds .is-pulsing every 5s, bbxOrderPulseStart() in burstbox.js) now rotates through
the scale-up instead of just growing in place, left-right-left back to centre, settled by
the time it shrinks back to scale(1). One repeat per beat, not 4, so it reads as a recurring
nudge rather than one long flurry (Eitan 2026-09-13). Order button ONLY (Eitan 2026-09-14b):
the explainer note's own recurring pulse above stays scale-only, no rotation. */
@keyframes bbx-order-pulse {
0% { transform: scale(1) rotate(0deg); }
35% { transform: scale(1.07) rotate(-2deg); }
60% { transform: scale(1.07) rotate(4deg); }
80% { transform: scale(1.07) rotate(-2deg); }
100% { transform: scale(1) rotate(0deg); }
}
.bbx-order-btn.is-pulsing { animation: bbx-order-pulse .5s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
.bbx-order-btn.is-pulsing { animation: none; }
}
.bbx-clock {
font-size: 30px;
font-weight: 700;
/* Dormant = dimmed (Barak 2026-08-25, after design+CTA consult): same treatment as the
gate's dormant clock — gold on this site means money and things in motion, so a gold
clock at rest read as "already running" against the "Click to start" promise. It ignites
to gold the moment the clock actually starts (.is-live) — the reward beat. */
color: var(--color-text-light);
opacity: .55;
transition: color .35s ease, opacity .35s ease;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
line-height: 1;
text-align: center;
margin-top: -40px;
}
.bbx-clock.is-live { color: var(--color-primary); opacity: 1; }
.bbx-progress { background: #414141; border-radius: 4px; padding: 2px; width: 100%; }
.bbx-progress-fill { background: #51bc9c; height: 4px; border-radius: 2px; width: 100%; transition: width 1s linear; }
/* Live dot (Barak 2026-08-25): after the 1s ignition drain the bar stays empty except this
glowing dot on its left edge — the "recording" marker that says the clock is live. */
.bbx-progress { position: relative; }
.bbx-live-dot {
position: absolute;
inset-inline-start: 3px;
top: 50%;
transform: translateY(-50%);
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: var(--color-primary);
animation: bbx-live-dot-glow 1.6s ease-in-out infinite;
}
@keyframes bbx-live-dot-glow {
0%, 100% { box-shadow: 0 0 4px 1px rgba(219, 189, 133, .65); }
50% { box-shadow: 0 0 9px 2px rgba(219, 189, 133, 1); }
}
@media (prefers-reduced-motion: reduce) {
.bbx-live-dot { animation: none; box-shadow: 0 0 6px 1px rgba(219, 189, 133, .8); }
}
/* Warning phase (Barak 2026-08-26): from 1.5h remaining the bar system shifts to yellow —
the middle step between green (plenty of time) and red (last half hour). Declared BEFORE
the danger rules so red wins when both classes are present. */
.bbx-progress.bbx-phase-warn .bbx-progress-fill { background: #f5c518; }
.bbx-progress.bbx-phase-warn .bbx-live-dot {
background: #f5c518;
animation-name: bbx-live-dot-warn;
}
@keyframes bbx-live-dot-warn {
0%, 100% { box-shadow: 0 0 4px 1px rgba(245, 197, 24, .6); }
50% { box-shadow: 0 0 9px 2px rgba(245, 197, 24, .95); }
}
@media (prefers-reduced-motion: reduce) {
.bbx-progress.bbx-phase-warn .bbx-live-dot { box-shadow: 0 0 6px 1px rgba(245, 197, 24, .8); }
}
/* Urgency phase (Barak 2026-08-25): the last half hour turns the bar system red — the live
dot shifts from gold to the danger colour, glow included, and the advancing fill with it. */
.bbx-progress.bbx-phase-danger .bbx-live-dot {
background: #e00000;
animation-name: bbx-live-dot-danger;
}
.bbx-progress.bbx-phase-danger .bbx-progress-fill { background: #e00000; }
/* Expired (Barak 2026-08-26): the bar stays at its full red 100% — the visible end of the
story — with a steady dot (nothing is live any more) and a one-session red flash at the
moment the deadline lands. */
/* Class-name fix (2026-08-27): the JS adds .bbx-expired, so the old .is-expired rule never
matched and the dot kept pulsing after expiry. */
.bbx-progress.bbx-expired .bbx-live-dot { animation: none; }
/* Out of the red at expiry (design panel, 2026-08-27): a full red bar left standing on a sales
page is a continuous danger signal, and it contradicts the calm the marker now carries.
Wins over .bbx-phase-danger by being declared after it. */
.bbx-progress.bbx-expired .bbx-progress-fill { background: rgba(219, 189, 133, .28); }
.bbx-progress.bbx-expired .bbx-live-dot { background: rgba(219, 189, 133, .55); box-shadow: none; }
.bbx-progress.bbx-expire-flash { animation: bbx-expire-flash .45s ease-in-out 4; }
@keyframes bbx-expire-flash {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.55); }
}
@media (prefers-reduced-motion: reduce) {
.bbx-progress.bbx-expire-flash { animation: none; }
}
/* Expiry pill (Barak 2026-08-26): "Time's up" sits ON the timer — the clock's exact spot
(same -40px pull-up), same height, no extra line. Shown instead of the digits at expiry;
the explainer note above is hidden, so the card never grows. */
/* Marker, not a rubber stamp (full panel, 2026-08-27). Four rulings are load-bearing here:
ZERO rotation — a tilted stamp is the visual archetype of REJECTED/VOID/DENIED, which is
bureaucratic-judgemental language this brand does not speak. The panel was unanimous.
NOT red — red is the error colour, and nothing failed: a bonus window closed while her
price stayed. Muted gold says "something valuable was here", and keeps the door warm.
TRANSLUCENT + blur — Eitan asked to still see the promise behind it, and that is also the
psychology: transparency reads "still there", opacity reads "taken from you".
LOW THIRD — the bands themselves stay unmarked; only dead space carries the marker.
Text opacity stays full: dim the backdrop to earn contrast, never the words. */
.bbx-expired-pill {
position: absolute;
top: 76%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
font: 600 13px/1.2 var(--font-primary, sans-serif);
letter-spacing: .2px;
color: rgba(255, 255, 255, .92);
background: rgba(52, 52, 52, .72);
backdrop-filter: blur(2px) saturate(1.1);
-webkit-backdrop-filter: blur(2px) saturate(1.1);
border: 1px solid rgba(219, 189, 133, .45);
border-radius: 999px;
padding: 7px 16px;
text-align: center;
width: max-content;
max-width: 100%;
white-space: nowrap;
box-shadow: 0 2px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* The digits keep their own dimming — the clock is spent, but still readable. */
.bbx-clock.is-expired-dim { opacity: .45; }
@keyframes bbx-live-dot-danger {
0%, 100% { box-shadow: 0 0 4px 1px rgba(224, 0, 0, .6); }
50% { box-shadow: 0 0 9px 2px rgba(224, 0, 0, .95); }
}
@media (prefers-reduced-motion: reduce) {
.bbx-progress.bbx-phase-danger .bbx-live-dot { box-shadow: 0 0 6px 1px rgba(224, 0, 0, .8); }
}
/* .bbx-safe-footer and .bbx-win-line share this grid cell (Eitan 2026-09-08c, live bug fixed
from his own console measurement): as plain [hidden]-toggled siblings, swapping the 28px
safe-footer for the 72px win-line grew #bbxActiveCard — and therefore the whole bar, via
align-items:stretch across all three columns — by the difference between them every time
she won. Same grid-stack technique as .bbx-keep-outer-stack/.bbx-keep-stack elsewhere in
this file: both members sit in grid-area:1/1, so the cell is always sized to whichever one
is taller, whether or not it is the one currently showing. */
.bbx-timer-footer-stack { display: grid; }
.bbx-timer-footer-stack > * { grid-area: 1 / 1; visibility: hidden; }
.bbx-timer-footer-stack > .is-shown { visibility: visible; }
.bbx-safe-footer { font-size: 10.5px; color: #fff; line-height: 1.3; }
/* Sized to match the clock's own 30px/700-weight digits (.bbx-clock's base rule) — this is
the size "Won" used to render at before the shrink-to-fit and freeze-the-clock attempts
replaced it. No min-height of its own any more: the shared stack above already reserves
whichever of the two states is taller, so this element does not need to guess its own
floor — it just renders at its natural 2-line height and the stack's cell matches it. */
.bbx-win-line {
font-size: 30px;
font-weight: 700;
color: var(--figma-primary-gold, #dbbd85);
line-height: 1.2;
text-align: center;
}
/* The ladder column centers its children, but .bbx-fine carries the left-column
text alignment with it, so the copy Eitan moved here 2026-08-31 needs the
centering made explicit. Styling otherwise inherited as-is. */
/* Always visible, from the first load on (Eitan 2026-09-05): no toggle at all, so there is
nothing here that could change the column's height mid-session. */
.bbx-fine--mid { text-align: start; } /* follows the start-aligned ladder column (Barak 2026-10-08: restored from 28-07); was center */
/* Same size as the identical sentence in the price column, .bbx-muted-stack p: 16px / 1.4, full
opacity (Barak 2026-10-11f; was .bbx-fine 14px at .8). The white second line stays white. */
.bbx-fine--mid { font-size: var(--fs-body); line-height: 1.4; opacity: 1; }
/* Only "No purchase, no card, just a click." goes white (Eitan 2026-09-08) — the sentence
before it, "Your friends get the same $10 you got.", stays the ordinary .bbx-fine grey.
Both sentences share one
with a
around just the second sentence, not on the paragraph itself.
opacity:1 is required alongside color: .bbx-fine sets opacity:.8 on the whole paragraph,
which mixes ANY color with the dark background behind it — color:white alone still read as
grey until this override. */
.bbx-fine-white { color: var(--color-white); opacity: 1; }
/* "Next price" offer — replaces the how-to under Order Now once a friend
has clicked (Eitan 2026-08-31). Deliberately a text link, not a gold button:
the column already has one primary CTA and a second gold control would
compete with the thing she should actually be doing, which is sending. Quiet
enough to ignore, clear enough to tap. */
/* "Next price" offer — replaces the how-to under Order Now once a friend has
clicked (Eitan 2026-08-31 .. 2026-09-02). Deliberately quiet: the column
already has one primary CTA, and a second gold control would compete with
the thing she should actually be doing, which is sending. Three council
rounds established that any visual weight here reads as a rival offer and
invites her to defer the purchase instead of making it. */
/* The how-to intro and the whole offer block share ONE grid cell, sized to the taller of the
two (Eitan 2026-09-04) — same technique as .bbx-keep-stack below, one level up. This is what
stops Reset (or any zero-click load) from visibly shrinking the bar: before, #bbxIntroCopy
(short: heading + 2 lines) and #bbxKeepPrice (tall once its panel is open) were plain
siblings, each sized only by its own content. */
/* WIN FIGURE + CONFETTI (Eitan 2026-09-04). Lives under the price, in the slot that is empty
at 5 clicks. Gold/cream palette, matching the bar's own dark theme — the Figma reference
used saturated red/blue/yellow on a mockup, which reads as a toy here.
Pure CSS: ten positioned spans and two @keyframes, no canvas and no confetti library. */
/* min-block-size raised from 132 to 220, and moved INTO .bbx-keep-outer-stack as a third
stacked member (Eitan 2026-09-08, live bug — "the whole bar grows to an insane height"):
#bbxWin used to sit as a plain sibling ABOVE that stack, so at click 5 its own height added
to intro/keep's reserved 240px instead of replacing it. Now grid-area:1/1 and the
.is-shown/visibility rules below apply to it exactly like they already did to intro and
keep, and bbxSyncLeftCol() (not [hidden] any more) decides which ONE of the three paints. */
/* min-block-size checked against the SIBLINGS it shares .bbx-keep-outer-stack's grid cell
with, not chosen freestanding (Eitan 2026-09-08, adding the caption below): #bbxIntroCopy
and #bbxKeepPrice are pinned to ~240px by bbxPinKeepHeight(). If this block's real content
(image + caption) ever exceeds that, the shared cell grows past what its siblings reserve
and the click-5 transition jumps again — the exact bug fixed 2026-09-08. 236px leaves the
figure (210px - 14px negative margin = 196px) plus the caption (~1 line, ~24px with its own
margin) just under that ceiling, with a few px to spare. */
.bbx-win { position: relative; min-block-size: 236px; margin-block-start: 4px; }
/* Real image landed 2026-09-08 (Eitan's export, replacing the placeholder box this was sized
for): 310x326 source, scaled up to fill the space the offer panel leaves empty at click 5.
Re-centred 2026-09-08b: was absolute + pinned to the left edge of the whole column, which
put it under the column's own centre, not under #bbxOrderBtn — the button is narrower than
the column (align-self:flex-start, 290-400px) and sits at its left edge, so the two centres
are not the same point.
The wrapper below gets the button's own min/max-width and is centred with margin-inline:
auto, giving an invisible box exactly as wide as the button at any viewport — one centre
sits directly under the other. The image itself keeps NO width constraint of its own: at
210px tall its natural width is ~200px (310x326 source), and forcing it to the button's
290-400px would stretch it out of proportion. It centres a second time inside that wrapper
via its own margin-inline:auto, at its true aspect ratio. */
.bbx-win-figure-wrap { min-width: 290px; max-width: 400px; margin-inline: auto; }
/* Tight margin, not the usual card spacing (Eitan 2026-09-08, restored 2026-09-08c): this
line has to fit inside the same 236px this whole block is capped at (see .bbx-win's
comment) alongside the image above it, so it borrows .bbx-h-sm's white/bold/body-size
styling but keeps its own margin small on purpose. */
.bbx-win-caption { text-align: center; margin-block-start: 6px; }
/* Influencer payment line under the caption (Eitan 2026-09-15). Deliberately echoes the welcome
popup's grant tile — gold amount, small muted label — so the two screens state the same fact
the same way. Sized small and tight because it has to fit the ~10px this block had spare plus
the 24px freed by the figure shrink below; see .bbx-win's 236px cap. */
.bbx-win-pay { text-align: center; margin-block-start: 2px; font-size: var(--fs-small, 13px);
line-height: 1.2; color: var(--color-text-light); }
.bbx-win-pay-amt { color: var(--figma-primary-gold, #dbbd85); font-weight: var(--fw-bold); }
/* margin-block-start negative, not a shift on .bbx-win itself (2026-09-08b): .bbx-win is a
member of .bbx-keep-outer-stack's shared grid cell, so moving THAT element would move the
cell's own position and could overlap whatever the stack sits next to. Moving only the
image inside it nudges the figure closer to the button above without touching the layout
around it. -14px keeps comfortable clearance above .bbx-win's own 220px reserved floor
(210px image - 14px = 196px effective, still under 220px, so no new height is claimed). */
/* 210px -> 186px (Eitan 2026-09-15): pays for the influencer payment line added under the
caption. Budget against .bbx-win's 236px cap: figure 186 - 14 negative margin = 172, caption
~24, pay line ~18 => ~214, still inside the ceiling with room to spare. Restore 210px if the
pay line is ever removed. */
.bbx-win-figure { display: block; margin-inline: auto; margin-block-start: -14px; block-size: 186px; inline-size: auto; }
/* Phone-only copy of the bands row inside #bbxWin (Barak 2026-10-18); shown in the 824px block. */
.bbx-win-bands { display: none; }
.bbx-win-confetti { position: absolute; inset-inline-start: 50%; inset-block-start: 40px; inline-size: 0; block-size: 0; pointer-events: none; transform: translateX(-50%); }
/* Desktop only (Eitan 2026-09-08): below 824px the three columns stack into one (see the
824px breakpoint on .bbx-inner elsewhere in this file), so "left column" stops meaning
anything distinct — the figure would just sit above the ladder in a single narrow strip. */
@media (max-width: 824px) {
.bbx-win { display: none; }
}
.bbx-win-confetti i {
position: absolute; inline-size: 7px; block-size: 12px; border-radius: 2px; opacity: 0;
}
/* Only the .is-burst state animates, so the burst can be replayed by toggling one class. */
.bbx-win.is-burst .bbx-win-confetti i { animation: bbxWinConfetti 1100ms cubic-bezier(.16,.84,.44,1) both; }
.bbx-win-confetti i:nth-child(1) { background: var(--figma-primary-gold, #dbbd85); --tx: -52px; --ty: -58px; --rot: -38deg; animation-delay: 0ms; }
.bbx-win-confetti i:nth-child(2) { background: #fff; --tx: -26px; --ty: -76px; --rot: 22deg; animation-delay: 60ms; }
.bbx-win-confetti i:nth-child(3) { background: #b98b3e; --tx: 4px; --ty: -84px; --rot: -14deg; animation-delay: 120ms; }
.bbx-win-confetti i:nth-child(4) { background: var(--figma-primary-gold, #dbbd85); --tx: 34px; --ty: -74px; --rot: 33deg; animation-delay: 40ms; }
.bbx-win-confetti i:nth-child(5) { background: #fff; --tx: 58px; --ty: -52px; --rot: -26deg; animation-delay: 150ms; }
.bbx-win-confetti i:nth-child(6) { background: #b98b3e; --tx: 70px; --ty: -18px; --rot: 12deg; animation-delay: 90ms; }
.bbx-win-confetti i:nth-child(7) { background: var(--figma-primary-gold, #dbbd85); --tx: -64px; --ty: -20px; --rot: 28deg; animation-delay: 30ms; }
.bbx-win-confetti i:nth-child(8) { background: #fff; --tx: -44px; --ty: 22px; --rot: -18deg; animation-delay: 180ms; }
.bbx-win-confetti i:nth-child(9) { background: var(--figma-primary-gold, #dbbd85); --tx: 48px; --ty: 26px; --rot: 40deg; animation-delay: 110ms; }
.bbx-win-confetti i:nth-child(10) { background: #b98b3e; --tx: 10px; --ty: 40px; --rot: -30deg; animation-delay: 210ms; }
@keyframes bbxWinConfetti {
0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.55); }
}
/* .bbx-clock.is-won removed (Eitan 2026-09-08): the frozen win clock now shows a plain time
string via bbxFmt(), same styling as every other clock state — no win-specific color or
font-size block needed any more. The class is still stripped defensively in bbxPaintClock
in case an earlier run left it in localStorage/DOM, but nothing sets it any more. */
/* Not applied anywhere right now (Eitan 2026-09-08): the win state uses the bar's own default
#51bc9c green/teal, unchanged, so this gold override is dormant — kept in case a future
design wants a distinct "won" colour again, rather than re-deriving it from scratch. */
.bbx-phase-won .bbx-progress-fill { background: var(--figma-primary-gold, #dbbd85) !important; }
/* MANDATORY (modern-web-guidance): the burst is decorative — the copy carries the win alone. */
@media (prefers-reduced-motion: reduce) {
.bbx-win.is-burst .bbx-win-confetti i { animation: none; opacity: 0; }
}
.bbx-keep-outer-stack { display: grid; }
.bbx-keep-outer-stack > * { grid-area: 1 / 1; visibility: hidden; }
.bbx-keep-outer-stack > .is-shown { visibility: visible; }
/* Structural guarantee, not a per-callsite patch (Eitan 2026-09-04 — found live via Playwright:
Reset showed the offer panel's text bleeding through the intro text at narrow widths).
visibility is inherited, but ANY descendant with its own explicit visibility:visible (every
.is-shown rule below — the panel/line/sending/done stack, the WA/SMS consent stack, the
error line) overrides that inheritance locally, no matter how many levels up the hidden
came from. bbxKeepShow('') clears the immediate inner stack, but a still-.is-shown grandchild
(say, the WhatsApp consent line, left over from before Reset) would still punch through on
its own. This rule out-specifies every .is-shown rule in the file (0,2,0 beats 0,1,0) so
#bbxKeepPrice going invisible always wins, at any depth, regardless of what JS forgot to
clear. Belt-and-suspenders with the JS fix in bbxSyncLeftCol() — keep both. */
#bbxKeepPrice:not(.is-shown) .is-shown { visibility: hidden !important; }
.bbx-keep { display: flex; flex-direction: column; gap: 10px; }
/* All four top-level states — resting line, open panel, sending, sent — occupy the SAME
grid cell at once (Eitan 2026-09-03). Grid sizes the cell to its tallest child no matter
which one is showing, so the bar's height stops changing as she moves through the offer.
Only the active state is visible: opacity/visibility, never [hidden] or display:none,
because either of those would let the browser stop counting that child's height. */
.bbx-keep-stack { display: grid; }
.bbx-keep-stack > * { grid-area: 1 / 1; visibility: hidden; opacity: 0; pointer-events: none; }
.bbx-keep-stack > .is-shown { visibility: visible; opacity: 1; pointer-events: auto; }
.bbx-keep-line { margin: 0; color: var(--color-text-light); font-size: var(--fs-small); line-height: 1.5; align-self: start; }
/* first person on purpose: she is the one asking, we are not the ones offering,
which is what removes the "someone is pitching me" reading */
.bbx-keep-go {
background: none; border: none; padding: 0; cursor: pointer;
color: var(--figma-primary-gold); font-size: var(--fs-small);
font-weight: var(--fw-bold); text-decoration: underline; white-space: nowrap;
}
.bbx-keep-panel { display: flex; flex-direction: column; gap: 9px; }
.bbx-keep-h { margin: 0; color: var(--color-white); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.35; } /* 16px, same as the How It Works subheading (.bbx-h--down): both are subheadings under "Your Price Right Now" on desktop (Barak 2026-10-18). Phones override to the heading size (#bbxKeepH[data-acc]). Was var(--fs-small) 14px */
.bbx-keep-gains { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bbx-keep-gains li { position: relative; padding-inline-start: 16px; color: var(--color-text-light); font-size: 12px; line-height: 1.4; }
/* a tick each: this is a list of things she GAINS, never a warning */
.bbx-keep-gains li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: #51bc9c; font-weight: var(--fw-bold); }
/* visibility, not display: the row must keep its height and stay in flow so nothing below it
moves when she switches to SMS — only display:none would collapse it (Eitan 2026-09-03). */
.bbx-keep-gains li.is-empty { visibility: hidden; }
/* field and button share a row; the label wraps to two lines so the number
keeps the width, since the number is the part that has to stay readable */
.bbx-keep-row { display: flex; gap: 8px; align-items: stretch; }
.bbx-keep-tel {
flex: 1; min-inline-size: 0; background: #232323; border: 1px solid #454545;
color: var(--color-white); border-radius: 8px; padding: 11px 12px;
font-size: 14px; font-family: inherit; letter-spacing: .4px;
}
.bbx-keep-tel:focus { outline: none; border-color: var(--figma-primary-gold); }
.bbx-keep-tel.bbx-bad { border-color: #e07070; }
.bbx-keep-send {
flex: 0 0 auto; background: var(--figma-primary-gold); color: #1a1a1a; border: none;
border-radius: 12px; font-size: 12px; font-weight: var(--fw-bold); line-height: 1.25; /* 12px: Barak 2026-10-18, whole-number steps; was 11.5px */
cursor: pointer; font-family: inherit; padding: 8px 12px; text-align: center; white-space: nowrap;
}
/* Reserves its line ALWAYS — worst-case text present in the markup — so an error appearing
never changes the panel's total height (Eitan 2026-09-03): the bar must stay one fixed
height at every step. The slot itself never collapses, only the TEXT inside it fades in,
so the reserved space sits as blank room above "Sending to" until an error uses it, then
the same room shows the message and visibly pushes the pill row down — never the fine
print above, which now sits directly under the phone row with no gap of its own
(Eitan 2026-09-04). visibility, not opacity: opacity:0 text is still selectable/read by
screen readers; visibility:hidden is not. */
.bbx-keep-err { margin: 0; color: #e69090; font-size: 11px; line-height: 1.3; visibility: hidden; }
.bbx-keep-err.is-shown { visibility: visible; }
/* Both channel variants of the consent text sit in the SAME grid cell, same technique as
.bbx-keep-stack (Eitan 2026-09-04): WhatsApp's line is two lines via its own = a card
title (24px/700), the rest on the next line as .bbx-h-sm (16px/700). White, no frame, no motion.
3. The 1+1 image sits start-aligned under it. Clock, progress and footer stay centred. */
/* 1 — link unit */
.bbx-col-timer .bbx-linkbox {
--bbx-copy-w: 100px;
flex-wrap: wrap;
justify-content: center;
row-gap: 8px; /* OR line -> field (Barak 2026-10-11d: 8 above and 8 below) */
max-width: 420px;
}
.bbx-col-timer .bbx-linkbox > .bbx-or { margin-inline-end: 6px; }
.bbx-col-timer .bbx-paste-label,
.bbx-col-timer .bbx-paste-label.is-copied {
flex: 0 1 auto; /* content width: the row is its own line now, nothing to pin against */
padding-inline-end: 0;
}
/* No jump on Copy (Barak 2026-10-11e). On copy the OR collapses (display:none) and the label swaps
to its copied message at line-height 1.2, so the row fell from 22.4px to 16.8px; the card, and
with it the whole bottom-docked bar, shrank 5.6px and the bar top moved down, then back up when
the message reverted ~3s later. The row is now pinned to the OR's own line box (16px x 1.4), and
the copied message stays on one line. */
.bbx-col-timer .bbx-paste-label,
.bbx-col-timer .bbx-paste-label.is-copied {
min-block-size: calc(var(--fs-body, 16px) * 1.4);
white-space: nowrap;
}
.bbx-col-timer .bbx-link {
flex: 1 1 calc(100% - var(--bbx-copy-w)); /* forces the wrap: field + Copy fill line two */
font-size: var(--fs-body);
padding: 16px 24px;
}
.bbx-col-timer .bbx-copy {
font-size: var(--fs-body);
padding: 16px 12px;
gap: 8px;
align-self: stretch;
}
.bbx-col-timer .bbx-copy svg { width: 16px; height: 16px; }
/* WhatsApp -> OR line = 8px too: the card's flex gap is 16px, so the slot pulls up by 8 (Barak 2026-10-11d) */
.bbx-col-timer #bbxLinkboxSlot { margin-top: -8px; }
/* 2 — the note as a heading, above the image */
.bbx-col-timer .timer-zone > .msg-overlay-container {
order: -1;
min-height: 0; /* the real reserve is set inline by bbxSizeNoteReserve() (burstbox.js) */
position: relative; /* anchors the invisible measuring clone */
align-items: end; /* note sits on the bottom edge: constant gap to the 1+1 row (Barak 2026-10-11) */
}
.bbx-col-timer .bbx-note-probe { position: absolute; inset-inline: 0; top: 0; visibility: hidden; pointer-events: none; animation: none; }
.bbx-col-timer .bbx-explainer-note {
margin-top: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
text-align: start;
color: #fff;
/* tail line = the bar's regular body text, .bbx-muted-stack p: 16px / 400 / light grey / 1.4
(Barak 2026-10-11f; was 16px/700 white like .bbx-h-sm, before that 18px italic) */
font-size: var(--fs-body);
font-weight: var(--fw-regular, 400);
font-style: normal;
line-height: 1.4;
color: var(--color-text-light);
/* min-height moved to the container, measured in JS (Barak 2026-10-11): see bbxSizeNoteReserve.
0 here also cancels the base rule's one-line pin (1.35em + 18px), which otherwise left ~11px
of empty space under a one-line heading. */
min-block-size: 0;
}
/* No motion on the heading or the line under it (Barak 2026-10-11b): the one-shot pulse on
start and Eitan's recurring 5s nudge (bbxNotePulseStart) are both switched off here. The JS
still toggles the classes; they simply have no animation in this column. */
.bbx-col-timer .bbx-explainer-note.is-pulsing,
.bbx-col-timer .bbx-explainer-note.is-recur-pulsing { animation: none; }
/* Tail s read as body text (Barak 2026-10-11f): is font-weight:bolder in the UA sheet, so
both weight and colour are set explicitly rather than inherited. */
.bbx-col-timer .bbx-explainer-note b,
.bbx-col-timer .bbx-explainer-note b.bbx-white { color: var(--color-text-light); font-weight: var(--fw-regular, 400); }
.bbx-col-timer .bbx-explainer-note > b:first-child {
display: block;
color: #fff;
font-weight: var(--fw-bold);
/* head = card title, 24px/700 white (Barak 2026-10-11b). Tried 16px like "One click = instant
$10" on 2026-10-12 and reverted the same day at Barak's call. */
font-size: var(--bbx-card-title);
font-style: normal;
line-height: 1.2;
margin-bottom: 4px;
}
.bbx-col-timer .bbx-explainer-note .bbx-inline-money { color: var(--figma-primary-gold); }
/* A heading with no line under it ("Hit 5 clicks in 3 hours...") keeps the same 16px to the 1+1 row */
.bbx-col-timer .bbx-explainer-note > b:first-child:last-child { margin-bottom: 0; }
/* 3 — image start-aligned; 16px from the text above and from the clock below: the zone's 8px
gap + 8px margin each side (Barak 2026-10-11) */
.bbx-col-timer .bbx-bonus-wrap { margin: 12px 0; } /* 2026-10-15 (Barak, variant B): 20px above and below the bands with the 8px gap, so heading / bands / clock read as three groups. Was: margin: 8px 0. */
/* 2026-10-15 (Barak, variant B): clock, time bar and footer as one tight unit, 6px apart (zone gap 8 - 2). Was: 8px. */
.bbx-col-timer #bbxTimerZone > .bbx-timer-footer-stack { margin-top: -2px; } /* 2026-10-15: the bar moved into .bbx-clockrow; was also > .bbx-progress */
/* The clock's margin-top:-40px tucked it under the old 68px note frame; with the note moved
above the image there is nothing to tuck under, and the clock rode up onto the image. */
.bbx-col-timer .bbx-clock { margin-top: 0; }
/* ==================== 1+1 promise as parts — Barak 2026-10-11 ====================
Replaces the flat media/1+1_Free.png in the timer card. Proportions taken from that image at
its 260px display width: each band ~76px wide, "+" and "FREE!" in light grey. Delete this block
and restore the s): a wrapped line hangs under its text, aligned
after the number, not back under the number. Numbers are drawn by ::before in a fixed 1.3em
gutter (not ::marker, which the brand font spaced oddly and pushed past the column edge).
Same type as .bbx-muted-stack p. */
.bbx-howto {
display: flex; flex-direction: column; gap: 8px; /* PROTO 2026-10-21 (Barak): between items, every width; was 6px. Wrapped lines inside an item unchanged */
margin: 0; padding: 0; list-style: none; counter-reset: bbx-howto;
}
.bbx-howto > li {
position: relative; counter-increment: bbx-howto;
padding-inline-start: 1.3em;
color: var(--color-text-light); font-size: var(--fs-body); line-height: 1.4; margin: 0;
text-wrap: balance; /* a wrapped line splits evenly, no lone last word */
}
.bbx-howto > li::before {
content: counter(bbx-howto) ".";
position: absolute; inset-inline-start: 0; top: 0;
color: var(--color-white); font-weight: var(--fw-bold, 700);
}
/* Background freeze while the bar is open (Barak 2026-10-14): every CSS animation on the page
OUTSIDE the overlay pauses in place, and resumes from the same frame on close. Set and
cleared by bbxPauseBackground() / bbxResumeBackground() in burstbox.js. */
html.bbx-bg-paused body *:not(#bbx-overlay):not(#bbx-overlay *),
html.bbx-bg-paused body *:not(#bbx-overlay):not(#bbx-overlay *)::before,
html.bbx-bg-paused body *:not(#bbx-overlay):not(#bbx-overlay *)::after {
animation-play-state: paused !important;
}
/* Win block in the price column (Barak 2026-10-14): the figure slot is taken out of layout, so
"2 Enerbands instead of 1" and the win lines sit right under the Order button. The slot held
186px for images/jackpot-figure.png, which is still missing (404), so the text opened far down
for no visible reason. Temporary until Barak lays this block out; restore = delete this rule. */
.bbx-win-figure-wrap { display: none; }
/* ==================== Clock row (Barak 2026-10-15) ====================
Clock and time bar side by side in one dark track, 420px start-aligned like the link unit.
Supersedes "Clock at card-title size, centred over the time bar" (Barak 2026-10-14): the
digits drop to body size so the heading above stays the only large text in the block.
Colours unchanged: dormant grey, gold once live, dimmed at expiry. */
.bbx-col-timer { --bbx-clockrow-h: 40px; }
.bbx-col-timer .bbx-clockrow {
display: flex; align-items: center; gap: 12px;
height: var(--bbx-clockrow-h); padding: 0 18px; box-sizing: border-box; /* 18px so the digits clear the pill's round end (2026-10-15b; was 14px) */
width: 100%; max-width: 420px; margin-inline: 0 auto;
background: rgba(0, 0, 0, .1); border-radius: 999px; /* lighter track, full pill (Barak 2026-10-15b; was rgba(0,0,0,.22) / 10px) */
}
.bbx-col-timer .bbx-clockrow > #bbxClock {
flex: none; width: auto; max-width: none; margin: 0;
min-width: 4.65em; /* = the width of "2:59:59" (64.7px at 14px), so "3 Hours" before the start holds the same slot and the bar never moves (Barak 2026-10-15) */
font-size: 14px; letter-spacing: -.06em; text-align: start; /* a touch smaller and tighter (Barak 2026-10-15c; -.06em, was var(--fs-body) 16px / 0, before that the base .04em) */
}
.bbx-col-timer .bbx-clockrow > #bbxProgressWrapper { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; }
/* Before the start the clock is plain white, full strength (Barak 2026-10-15c); gold once live,
dimmed grey at expiry, as before. Was dormant grey at .55 opacity. */
.bbx-col-timer .bbx-clockrow > #bbxClock:not(.is-live):not(.is-expired-dim) { color: var(--color-white, #fff); opacity: 1;
letter-spacing: 0; font-variant-numeric: normal; } /* "3 Hours" is a word, not digits: natural spacing, no wide tabular "3" (2026-10-15) */
/* Time bar fill in brand gold while there is time to spare (Barak 2026-10-15c; was green #51bc9c).
Yellow under 1:30 and red under 0:30 stay as they were; repeated here only because this rule's
ID selector would otherwise outrank them. The edge dot follows via currentColor. */
.bbx-col-timer #bbxProgressWrapper .bbx-progress-fill { background: var(--figma-primary-gold, #dbbd85); color: var(--figma-primary-gold, #dbbd85); }
.bbx-col-timer #bbxProgressWrapper.bbx-phase-warn .bbx-progress-fill { background: #f5c518; color: #f5c518; }
.bbx-col-timer #bbxProgressWrapper.bbx-phase-danger .bbx-progress-fill { background: #e00000; color: #e00000; }
.bbx-col-timer #bbxProgressWrapper.bbx-expired .bbx-progress-fill { background: rgba(219, 189, 133, .28); color: rgba(219, 189, 133, .55); }
/* Middle column under the ladder: the click as a gift to both sides (Barak 2026-10-15).
Bold line + fine line read as one unit (4px apart). Hidden while How It Works is on screen in
the left column (it says the same thing there); visibility, so the column never changes height. */
.bbx-gift { display: flex; flex-direction: column; gap: 4px; }
.bbx-gift > .bbx-h-sm { text-wrap: balance; }
/* Was hidden while How It Works showed (2026-10-15a); now always visible, How It Works item 3 removed instead (2026-10-15b).
.bbx-bar:has(#bbxIntroCopy.is-shown) #bbxFineMid { visibility: hidden; } */
/* "No purchase" / "No card", one per line with a circle-slash mark in front (Barak 2026-10-15).
Same type as the fine line it replaces (16px / 1.4, light grey); the mark is drawn in the text colour. */
.bbx-nope { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bbx-nope > li { display: flex; align-items: center; gap: 8px; color: var(--color-text-light); font-size: var(--fs-body); line-height: 1.4; }
.bbx-nope-ico { flex: none; width: 1em; height: 1em; fill: none; stroke: var(--figma-primary-gold, #dbbd85); stroke-width: 1.5; stroke-linecap: round; } /* gold (Barak 2026-10-15; was currentColor at .9) */
.bbx-yes-ico { stroke-linejoin: round; } /* check inside the same 12.5px circle as the circle-slash, same 1.5 stroke (Barak 2026-10-15b; was a bare check at 1.8) */
/* Keep panel as plain text (Barak 2026-10-15): one body sentence + small reassurance lines, no ticks.
Body 14px light grey; notes 12px at .8, same as the fine print under the field. */
.bbx-keep-gains li.bbx-keep-body,
.bbx-keep-gains li.bbx-keep-note { padding-inline-start: 0; }
.bbx-keep-gains li.bbx-keep-body::before,
.bbx-keep-gains li.bbx-keep-note::before { content: none; }
.bbx-keep-gains li.bbx-keep-body { font-size: 13px; line-height: 1.45; text-wrap: pretty; } /* 13px so the heading stays clearly on top (2026-10-15b; was 14px) */
.bbx-keep-gains li.bbx-keep-note { font-size: 12px; opacity: .8; }
/* ==================== Expiry hero (Barak 2026-10-15) ====================
Timer zone and the hero block share one grid cell; at expiry (the "Bonus window closed" pill is
un-hidden by bbxSyncExplainerNote) the zone hides and the hero shows. Visibility only, so the cell,
and the bar, keep one height in every state. Type follows the home hero, scaled to the card. */
.bbx-col-timer .bbx-tz-stack { display: grid; }
.bbx-col-timer .bbx-tz-stack > * { grid-area: 1 / 1; min-width: 0; }
.bbx-col-timer .bbx-afterglow { visibility: hidden; align-self: start; display: flex; flex-direction: column; gap: 6px; text-align: start; }
.bbx-col-timer .bbx-tz-stack:has(#bbxExpiredPill:not([hidden])) > .timer-zone,
.bbx-col-timer .bbx-tz-stack:has(#bbxExpiredPill:not([hidden])) > .timer-zone * { visibility: hidden !important; }
.bbx-col-timer .bbx-tz-stack:has(#bbxExpiredPill:not([hidden])) > .bbx-afterglow { visibility: visible; }
.bbx-ag-h {
position: relative; margin: 0; color: var(--color-white);
font-size: clamp(16px, 7.4cqi, 28px); font-weight: 800; line-height: 1.08;
text-transform: uppercase; letter-spacing: .04em;
}
.bbx-col-timer .bbx-tz-stack { container-type: inline-size; }
.bbx-ag-accent {
display: inline-block; margin-inline-start: .3em; vertical-align: -.1em;
font-family: 'Caveat', cursive; font-weight: 700; font-size: .62em; letter-spacing: normal;
text-transform: none; color: var(--figma-primary-gold, #dbbd85); transform: rotate(-12deg); transform-origin: left bottom; white-space: nowrap; pointer-events: none;
}
.bbx-ag-body { margin: 0; color: var(--color-text-light); font-size: clamp(13px, 4.6cqi, 14px); line-height: 1.4; }
.bbx-ag-guar { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.bbx-ag-guar img { flex: none; width: 40px; height: auto; }
.bbx-ag-guar b { display: block; font-weight: 800; letter-spacing: .1em; color: var(--figma-primary-gold, #dbbd85); font-size: 15px; }
.bbx-ag-guar span > span { display: block; color: #d3d3d3; font-size: 13px; }
/* DEV strip folded into a button on phones (Barak 2026-10-15). Same look and column as the S button
(#dz-fab: 44px round, left 14px), one step below it. Tap opens the strip as a panel beside it. */
.bbx-dev-fab { display: none; }
html:not([data-build="designer"]) .bbx-dev-fab { display: none !important; }
@media (max-width: 824px) {
.bbx-dev-fab:not([hidden]) {
display: flex; align-items: center; justify-content: center;
position: fixed; left: 14px; top: calc(50% + 112px); transform: translateY(-50%); z-index: 10600;
width: 44px; height: 44px; border-radius: 50%; padding: 0;
background: rgba(17,17,17,.85); color: var(--figma-primary-gold, #dbbd85); border: 1px solid rgba(219,189,133,.5);
font: 700 10px/1 var(--font-primary, sans-serif); letter-spacing: .08em; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.bbx-dev-fab.is-open { background: var(--figma-primary-gold, #dbbd85); color: #141414; }
#bbxDevBar:not(.is-open) { display: none !important; }
#bbxDevBar.is-open {
top: auto; bottom: 16px; left: 66px; right: 12px; inset-inline: auto; inset-inline-start: 66px; inset-inline-end: 12px;
max-width: none; max-height: 60vh; overflow-y: auto; border-radius: 10px; justify-content: flex-start;
box-shadow: 0 4px 24px rgba(0,0,0,.5);
}
}
/* Internal buttons on phones (Barak 2026-10-15): ☰, S and DEV shrink to 36px and tuck 10px past the
left edge, so they stop covering the start of the text. Same column, same order. Designer/full
tiers only, as before (these buttons do not exist in lean). Was 44px at left: 14px. */
@media (max-width: 824px) {
html #pv-fab, html #dz-fab, html .bbx-dev-fab:not([hidden]) { width: 36px; height: 36px; left: -10px; opacity: .8; }
html #pv-fab { font-size: 15px; } html #dz-fab { font-size: 13px; }
html #dz-fab { top: calc(50% + 46px); }
html .bbx-dev-fab:not([hidden]) { top: calc(50% + 92px); font-size: 9px; padding-inline-start: 8px; }
html #pv-fab { padding-inline-start: 8px; } html #dz-fab { padding-inline-start: 8px; }
html #bbxDevBar.is-open { inset-inline-start: 34px; }
}
/* ==================== Phone accordions (Barak 2026-10-15) ====================
<=824px: How It Works, the price ladder and the phone panel fold to their heading, with a gold
chevron; a tap opens one (class .is-acc-open on the heading's parent). The left column's height
floor (bbxPinKeepHeight) is released here: with both left blocks folded they are about the same
height, so the first friend click no longer needs a reserved 236px. */
@media (max-width: 824px) {
[data-acc] { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-acc]::after {
content: ""; flex: none; width: 9px; height: 9px; margin-inline-end: 4px;
border-right: 2px solid var(--figma-primary-gold, #dbbd85); border-bottom: 2px solid var(--figma-primary-gold, #dbbd85);
transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
.is-acc-open > [data-acc]::after { transform: translateY(2px) rotate(-135deg); }
/* How It Works heading at card-title size on phones, same level as "Your Price, Click By Click." (was 16px) */
#bbxIntroCopy > .bbx-h.bbx-h--down { font-size: var(--bbx-card-title); }
#bbxIntroCopy:not(.is-acc-open) > .bbx-h--down { margin-bottom: 0; }
#bbxIntroCopy:not(.is-acc-open) > :not([data-acc]) { display: none; }
.bbx-col-ladder:not(.is-acc-open) > :not([data-acc]) { display: none; }
#bbxKeepPanel:not(.is-acc-open) > :not([data-acc]) { display: none; }
#bbxKeepPrice { min-height: 0 !important; }
/* Folded headings read as one list: the column paddings between them drop from 32+24+32 = 88px to
12+24+12 = 48px, and the phone-panel heading takes the same card-title size as the other two. */
.bbx-inner > .bbx-col-price { padding-bottom: 12px; }
.bbx-inner > .bbx-col-ladder { padding-top: 12px; padding-bottom: 12px; }
#bbxKeepH[data-acc] { font-size: var(--bbx-card-title); line-height: 1.2; }
/* Both left blocks on phones (Barak 2026-10-15): How It Works stays available (folded) at every
click count; the phone panel joins it below from the first friend click instead of replacing it.
Desktop keeps the one-slot swap. The win block is already display:none below 824px. */
.bbx-keep-outer-stack { display: flex; flex-direction: column; gap: 20px; }
.bbx-keep-outer-stack > #bbxIntroCopy:not(.is-shown) { display: none; } /* Barak 2026-10-19: How It Works leaves at the first friend click, like desktop. Was: visibility:visible at every click count (2026-10-15) */
.bbx-keep-outer-stack > #bbxKeepPrice:not(.is-shown) { display: none; }
/* Inside the panel too: only the active state (panel / sending / sent) takes room on phones. */
.bbx-keep-stack > :not(.is-shown) { display: none; }
/* One accordion list (Barak 2026-10-15): the three folded headings get the same row (14px above
and below, same type), a hairline between rows and around the list, and no other gaps between
them, even though they live in two different columns. Open content sits under its own row. */
[data-acc] { padding-block: 14px; margin: 0 !important; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 20px !important; line-height: 1.2 !important; white-space: normal; } /* one size for all three rows: 20px, 16px at <=360 with the other headings (Barak 2026-10-18, whole-number steps; was min(20px, 5.2vw), 16.6px at 320) */
.bbx-keep-outer-stack { gap: 0; margin-top: 10px; }
.bbx-inner > .bbx-col-price { padding-bottom: 0; }
.bbx-inner > .bbx-col-ladder { padding-top: 0; padding-bottom: 0; margin-top: -24px; border-bottom: 1px solid rgba(255, 255, 255, .12); border-radius: 0; }
#bbxIntroCopy.is-acc-open > .bbx-muted-stack,
#bbxKeepPanel.is-acc-open { padding-bottom: 16px; }
.bbx-col-ladder.is-acc-open { padding-bottom: 16px; }
#bbxKeepPanel { gap: 9px; }
/* 2026-10-18 (Barak, mobile pass): at 320 the panel measured 334px inside a 280px column: the
input's intrinsic width (~206px) + gap 8 + button 120 set the row's min-content, and the
shared grid cell grew to it. inline-size:0 drops the field's min-content to 0; flex:1 still
fills the row, so 375+ is unchanged. Was: no inline-size on .bbx-keep-tel. */
.bbx-keep-tel { inline-size: 0; }
/* One running-text size on phones (Barak 2026-10-18): 14px for every body line in the bar, so the
phone view has one text size under the 20px headings. Desktop untouched (16 / panel 13).
Was on phones: panel body 13; How It Works items, gift line, No purchase list, WhatsApp
button, link field and Copy 16. Kept at 16 bold: the "Every click: $10 for you…" line (.bbx-h-sm),
OR, the Order button. */
#bbxKeepGains li,
.bbx-howto li,
.bbx-nope > li,
.bbx-col-timer .bbx-wa,
#bbxLinkField, #bbxLinkField .bbx-link-text, #bbxLinkField .bbx-link-text > span,
#bbxCopyBtn { font-size: 14px; }
/* One note size on phones (Barak 2026-10-18): every small line in the bar at 12px, so the phone
scale is 20 headings / 14 text / 12 notes. Was: start hint + "no deadline" footer 11, "Sending
to" 11, WhatsApp/SMS pills + "Send me the link" 11.5, consent 10.5. */
#bbxStartHint, #bbxSafeFooter,
.bbx-keep-chanlbl, #bbxChanWa, #bbxChanSms, .bbx-keep-send,
#bbxKeepFineWa, #bbxKeepFineSms { font-size: 12px; }
/* At 12px the start hint wraps to 2 lines; its hidden slot after the first send/copy would then
leave ~16px of empty space above the bonus block, so on phones it leaves the flow once off.
Was: visibility:hidden only (keeps its height, desktop still does). */
#bbxStartHint.is-off { display: none; }
/* WIN ON PHONES (Barak 2026-10-18): one column, so the win screen is cut down to price + Order
button + confetti. Gone at the win: How It Works, "Your Price, Click By Click." (whole ladder
column), and the timer card's repeat "Your price: $19." + second Order button. The 1+1 FREE!
bands stay. #bbxWin comes back on phones as a zero-height confetti anchor only (figure,
caption, lines stay hidden), so the burst fires right under the top Order button; the timer
card's own burst is off on phones since its button is gone. FLAG-EITAN: partly reverses
2026-09-08 (".bbx-win { display: none } below 824px"). Was: all of the above shown at the win. */
.bbx-bar:has(#bbxWin.is-shown) #bbxIntroCopy,
.bbx-bar:has(#bbxWin.is-shown) .bbx-inner > .bbx-col-ladder,
.bbx-bar:has(#bbxWin.is-shown) #bbxExplainerNote,
.bbx-bar:has(#bbxWin.is-shown) .bbx-col-timer .bbx-timer-order,
.bbx-bar:has(#bbxWin.is-shown) .bbx-timer-confetti,
/* their reserved slots too, or the card keeps ~110px of empty rows around the bands: the note's
24px overlay cell, the hidden clock row (40), the hidden footer line (29), the start-hint slot,
and #bbxAfterglow (142px, shares .bbx-tz-stack's cell, expiry only) */
.bbx-bar:has(#bbxWin.is-shown) .bbx-col-timer .msg-overlay-container,
.bbx-bar:has(#bbxWin.is-shown) .bbx-col-timer .bbx-clockrow,
.bbx-bar:has(#bbxWin.is-shown) .bbx-col-timer .bbx-timer-footer-stack,
.bbx-bar:has(#bbxWin.is-shown) #bbxStartHint,
.bbx-bar:has(#bbxWin.is-shown) #bbxAfterglow { display: none !important; }
.bbx-bar:has(#bbxWin.is-shown) #bbxOrderBtn { margin-bottom: 0; }
.bbx-bar:has(#bbxWin.is-shown) .bbx-keep-outer-stack { margin-top: 0; }
/* Win line under the Order button (Barak 2026-10-18, same day): Eitan's locked win lines
(#bbxWinLine regular / #bbxWinLineInf influencer) + the influencer-only pay line, which hides
itself via [hidden]. Figure and "2 Enerbands instead of 1" caption stay off.
Was: block-size: 0 and every child but the confetti hidden. */
.bbx-keep-outer-stack > #bbxWin.is-shown { display: block; visibility: visible; min-block-size: 0; margin: 0; }
#bbxWin > :not(.bbx-win-confetti):not(.bbx-win-line-stack):not(.bbx-win-pay):not(.bbx-win-bands) { display: none; }
/* Bands under the win line (Barak 2026-10-18, same day): the copy in #bbxWin shows, the timer
card's own row goes at the win. Centred like the line above; sized by its own width (cqi). */
#bbxWin .bbx-win-bands { display: block; container-type: inline-size; margin-block-start: 14px; }
#bbxWin .bbx-win-bands .bbx-bonus-combo { justify-content: center; }
.bbx-bar:has(#bbxWin.is-shown) .bbx-col-timer .bbx-bonus-wrap { display: none !important; }
#bbxWin .bbx-win-line-stack { margin-block-start: 18px; }
#bbxWin .bbx-win-line { font-size: 28px; } /* Barak 2026-10-18, whole-number steps; was min(30px, 7.5vw) */
.bbx-bonus-plus, .bbx-bonus-free { font-size: 20px; } /* Barak 2026-10-18, whole-number steps (phones) */
#bbxWin .bbx-win-confetti { inset-block-start: 0; }
}
/* Narrowest phones (Barak 2026-10-18, whole-number steps): every heading 16px, win line 24px. */
@media (max-width: 360px) {
[data-acc] { font-size: 16px !important; }
#bbxWin .bbx-win-line { font-size: 24px; }
}
/* ==== PROTO 2026-10-18 (Barak): messages in the bar body, strip = tagline only ==== */
.bbx-top .bbx-notif-msg { display: none !important; }
.bbx-top .bbx-tagline { display: block !important; }
.bbx-top--live::before { display: none !important; }
.bbx-evt[hidden] { display: none !important; }
.bbx-evt { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--color-white); text-align: center;
border-radius: 10px; padding: 8px 12px; margin: 0; background: rgba(219,189,133,.10);
border: 1px solid rgba(219,189,133,.35); box-sizing: border-box; }
.bbx-evt b { color: var(--figma-primary-gold, #dbbd85); }
.bbx-evt.is-new { animation: bbxEvtFlash 1.4s ease-out 1; }
@keyframes bbxEvtFlash { 0% { background: rgba(219,189,133,.45); } 100% { background: rgba(219,189,133,.10); } }
@media (prefers-reduced-motion: reduce) { .bbx-evt.is-new { animation: none; } }
@media (min-width: 825px) {
#bbxEvtTop { display: none !important; }
.bbx-col-timer #bbxEvtTimer { width: 100%; max-width: 420px; margin: -6px 0 10px; justify-self: start; }
.bbx-col-timer:has(#bbxEvtTimer:not([hidden])) #bbxStartHint { display: none; }
}
@media (max-width: 824px) {
.bbx-top { display: none !important; }
#bbxEvtTimer { display: none !important; }
#bbxEvtTop { margin-top: 0; }
.bbx-close { width: 36px; height: 36px; top: max(4px, calc(8vh - 42px)); }
.bbx-close svg { width: 17px; height: 17px; }
}
/* ==== PROTO 2026-10-18 (Barak): win + lowest-price screens ==== */
/* 1. At 5 clicks (win or lowest) the send block goes: heading, WhatsApp, link box, start hint, event line. */
.bbx-bar:has(#bbxWin.is-shown) #bbxSendHeadline,
.bbx-bar:has(#bbxWin.is-shown) #bbxWaSlot,
.bbx-bar:has(#bbxWin.is-shown) #bbxLinkboxSlot,
.bbx-bar:has(#bbxWin.is-shown) #bbxStartHint,
.bbx-bar:has(#bbxWin.is-shown) #bbxEvtTimer { display: none !important; }
/* 2. Lowest price: its own line; no free-band figure, caption, bands or pay line. */
#bbxWin.is-lowest .bbx-win-line-stack > * { visibility: hidden; }
#bbxWin.is-lowest .bbx-win-line-stack > #bbxWinLineLow { visibility: visible; }
#bbxWin.is-lowest .bbx-win-figure-wrap,
#bbxWin.is-lowest .bbx-win-caption,
#bbxWin.is-lowest .bbx-win-bands,
#bbxWin.is-lowest .bbx-win-pay { display: none !important; }
@media (max-width: 824px) {
/* phones: nothing is left in the timer card at 5 clicks, so the card itself goes */
.bbx-bar:has(#bbxWin.is-shown) .bbx-inner > .bbx-col-timer { display: none !important; }
}
/* ==== PROTO2 2026-10-19 (Barak): celebration layout at 5 clicks ==== */
.bbx-celeb, .bbx-celeb-left { display: none; }
.bbx-bar.is-celebrate .bbx-col-ladder,
.bbx-bar.is-celebrate .bbx-col-timer,
.bbx-bar.is-celebrate #bbxWin,
.bbx-bar.is-celebrate #bbxEvtTop,
.bbx-bar.is-celebrate .bbx-col-price > #bbxOrderBtn { display: none !important; }
.bbx-bar.is-celebrate .bbx-celeb-left { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.bbx-bar.is-celebrate .bbx-celeb { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px;
background: #343434; border-radius: var(--radius-lg); padding: 32px 32px 32px 40px; position: relative; overflow: hidden; }
@media (min-width: 1000px) { .bbx-bar.is-celebrate .bbx-inner { grid-template-columns: minmax(0,1fr) minmax(0,2fr); } } /* PROTO 2026-10-21: 3-col from 1000, was min-width:1251px */
@media (max-width: 999px) and (min-width: 825px) { .bbx-bar.is-celebrate .bbx-celeb { grid-column: 1 / -1; } } /* PROTO 2026-10-21: was max-width:1250px */
.bbx-celeb-left-h { margin: 0; color: var(--color-white); font-size: var(--bbx-card-title); font-weight: var(--fw-bold); line-height: 1.25; }
.bbx-celeb-avs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bbx-celeb-avs > span { position: relative; width: 30px; height: 30px; background: url("../images/ShareMan.svg") no-repeat center / contain; }
.bbx-celeb-avs > span::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 15px; height: 15px; background: url("../images/V.svg") no-repeat center / contain; }
.bbx-celeb-sum { color: var(--color-white); font-size: 20px; margin-inline-start: 6px; font-weight: var(--fw-bold); }
.bbx-celeb-sum em, .bbx-celeb-left-b em { font-style: normal; color: var(--figma-primary-gold, #dbbd85); }
.bbx-celeb-sum em { font-size: 32px; }
.bbx-celeb-left-b { margin: 0; color: var(--color-text-light); font-size: var(--fs-body); }
.bbx-celeb-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; text-align: start; min-width: 0; }
.bbx-celeb-h { margin: 0; color: var(--figma-primary-gold, #dbbd85); font-size: 36px; font-weight: var(--fw-bold); line-height: 1.2; }
.bbx-celeb-sub { margin: 0; color: var(--color-text-light); font-size: var(--fs-body); line-height: 1.4; }
.bbx-celeb-sub .bbx-gold { color: var(--figma-primary-gold, #dbbd85); }
.bbx-celeb-bands { display: flex; align-items: center; gap: 14px; }
.bbx-celeb-bands img { width: 120px; height: auto; display: block; }
.bbx-celeb-bands .bbx-bonus-plus { font-size: 28px; color: var(--color-text-light); opacity: .8; }
.bbx-celeb-bands .bbx-bonus-free { font-size: 36px; color: var(--color-text-light); font-weight: 200; }
.bbx-celeb-btn { min-width: 290px; max-width: 400px; margin: 4px 0 0 !important; }
.bbx-celeb-fig { position: relative; height: 452px; margin-block: -8px; } /* sized so the bar keeps its 671px at 1440 through the win */
.bbx-celeb-fig img { height: 100%; width: auto; display: block; }
.bbx-celeb-fig .bbx-win-confetti { inset-block-start: 40%; transform: translateX(-50%) scale(2.4); z-index: 2; }
.bbx-celeb.is-burst .bbx-win-confetti i { animation: bbxWinConfetti 1300ms cubic-bezier(.16,.84,.44,1) both; }
.bbx-celeb.is-burst .bbx-celeb-fig img { animation: bbxCelebPop 700ms cubic-bezier(.2,1.4,.4,1) both; }
.bbx-celeb.is-burst .bbx-celeb-h { animation: bbxCelebIn 600ms ease-out 150ms both; }
@keyframes bbxCelebPop { from { transform: scale(.6) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bbxCelebIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bbx-celeb.is-burst .bbx-celeb-fig img, .bbx-celeb.is-burst .bbx-celeb-h { animation: none; } }
@media (max-width: 824px) {
.bbx-bar.is-celebrate .bbx-celeb { grid-template-columns: 1fr; padding: 24px 20px 28px; gap: 16px; justify-items: center; }
.bbx-celeb-fig { order: -1; height: 220px; }
.bbx-celeb-text { align-items: center; text-align: center; gap: 14px; }
.bbx-celeb-h { font-size: 26px; }
.bbx-celeb-sub { font-size: 14px; }
.bbx-celeb-bands img { width: 72px; }
.bbx-celeb-bands .bbx-bonus-free { font-size: 24px; }
.bbx-celeb-btn { min-width: 0; width: 100%; }
.bbx-celeb-left-h { font-size: 20px; }
.bbx-celeb-left-b { font-size: 14px; }
.bbx-celeb-sum em { font-size: 26px; }
}
@media (max-width: 360px) { .bbx-celeb-h { font-size: 22px; } .bbx-celeb-left-h { font-size: 16px; } }
/* ==== PROTO2 rev 2026-10-19b (Barak) ==== */
/* heading = same size, style and place as every card title (top-left, white, --bbx-card-title) */
.bbx-bar.is-celebrate .bbx-celeb { align-items: start; min-height: 503px; box-sizing: border-box; padding: 32px; }
.bbx-celeb-text { gap: 14px; }
.bbx-celeb-h { color: var(--color-white) !important; font-size: var(--bbx-card-title) !important; line-height: 1.2 !important; animation: none !important; }
.bbx-celeb-sub { color: var(--color-white); font-size: var(--fs-body); font-weight: var(--fw-regular, 400); } /* running-text size + weight (Barak 2026-10-19): 16 desktop / 14 phones */
.bbx-celeb-fig { height: 380px !important; margin-block: 0 !important; align-self: center; }
/* the moved Order button + its own confetti burst from the top edge */
.bbx-celeb-btnslot { position: relative; width: 100%; max-width: 400px; margin-top: 12px; }
.bbx-celeb-btnslot > #bbxOrderBtn { display: block; text-align: center; margin: 0 !important; width: 100%; min-width: 290px; box-sizing: border-box; }
.bbx-celeb-btnconf { inset-block-start: 0; z-index: 2; }
.bbx-celeb .bbx-celeb-fig .bbx-win-confetti { transform: translateX(-50%) scale(2.4); }
@media (max-width: 824px) {
.bbx-bar.is-celebrate .bbx-celeb { min-height: 0; padding: 24px 20px 28px; justify-items: stretch; }
.bbx-celeb-fig { height: 190px !important; justify-self: center; }
.bbx-celeb-text { align-items: flex-start; text-align: start; }
.bbx-celeb-btnslot { max-width: none; }
.bbx-celeb-btnslot > #bbxOrderBtn { min-width: 0; }
}
.bbx-celeb-h .bbx-nowrap { white-space: nowrap; } /* keeps "3-hour" from splitting at the hyphen on phones */
@media (max-width: 824px) { .bbx-celeb-sub { font-size: 14px !important; } }
/* ==== PROTO2 rev 2026-10-19c: Lottie confetti over the figure, CSS confetti on the button ==== */
.bbx-celeb-lottie { position: absolute; left: 50%; top: 42%; width: 220%; aspect-ratio: 940 / 752; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; transition: opacity .4s ease; }
.bbx-celeb-lottie.is-done { opacity: 0; }
.bbx-celeb-fig { overflow: visible; }
/* PROTO2 rev d: button confetti re-fires with every shake (own class on the slot), not with the card */
.bbx-celeb.is-burst .bbx-celeb-btnconf i { animation: none; }
.bbx-celeb-btnslot.is-burst .bbx-celeb-btnconf i { animation: bbxWinConfetti 1100ms cubic-bezier(.16,.84,.44,1) both; }
@media (prefers-reduced-motion: reduce) { .bbx-celeb-btnslot.is-burst .bbx-celeb-btnconf i { animation: none; opacity: 0; } }
/* ==== PROTO2 rev e 2026-10-19 (Barak) ==== */
/* 1. "2 Enerbands instead of 1" = exactly the "Every click: $10 for you…" line: it now carries the same
class (.bbx-h-sm); the celebration-only size/weight/colour overrides are dropped. */
/* = the "Every click: $10 for you, $10 for your friend." line in the left column of THIS screen (.bbx-celeb-left-b): 16 regular, light grey; 14 on phones (Barak 2026-10-19) */
.bbx-celeb .bbx-celeb-sub.bbx-h-sm { color: var(--color-text-light) !important; font-size: var(--fs-body) !important; font-weight: var(--fw-regular, 400) !important; line-height: normal; }
@media (max-width: 824px) { .bbx-celeb .bbx-celeb-sub.bbx-h-sm { font-size: 14px !important; } }
/* 2. bands larger; "+" at least twice its size */
.bbx-celeb-bands img { width: 168px !important; }
.bbx-celeb-bands .bbx-bonus-plus { font-size: 56px !important; line-height: 1; }
.bbx-celeb-bands { gap: 18px; }
/* 4. more air above and below the bands row */
.bbx-celeb-bands { margin-block: 14px; }
/* 3. figure (and its Lottie, which lives inside it) moves left: more space on its right */
.bbx-celeb-fig { margin-inline-end: 64px; }
@media (max-width: 824px) {
.bbx-celeb-bands img { width: 84px !important; }
.bbx-celeb-bands .bbx-bonus-plus { font-size: 40px !important; }
.bbx-celeb-bands .bbx-bonus-free { font-size: 24px !important; }
.bbx-celeb-bands { flex-wrap: nowrap; }
.bbx-celeb-bands { gap: 12px; margin-block: 10px; }
.bbx-celeb-fig { margin-inline-end: 0; }
}
@media (max-width: 360px) { .bbx-celeb-bands img { width: 64px !important; } .bbx-celeb-bands .bbx-bonus-plus { font-size: 32px !important; } .bbx-celeb-bands .bbx-bonus-free { font-size: 20px !important; } .bbx-celeb-bands { gap: 8px; } }
/* ==== PROTO2 rev f 2026-10-19 (Barak): left column keeps the phone panel; summary moves into the card ==== */
.bbx-bar.is-celebrate .bbx-celeb-left { display: none !important; }
.bbx-bar.is-celebrate .bbx-keep-outer-stack > #bbxIntroCopy { display: none !important; }
.bbx-celeb .bbx-celeb-avs { margin-top: 6px; }
@media (max-width: 824px) {
.bbx-celeb .bbx-celeb-avs { gap: 6px; flex-wrap: nowrap; }
.bbx-celeb .bbx-celeb-avs > span { width: 24px; height: 24px; }
.bbx-celeb .bbx-celeb-avs > span::after { width: 12px; height: 12px; right: -5px; bottom: -5px; }
.bbx-celeb .bbx-celeb-sum { font-size: 16px; margin-inline-start: 4px; white-space: nowrap; }
.bbx-celeb .bbx-celeb-sum em { font-size: 24px; }
}
/* ==== PROTO2 rev g: influencer note under the phone panel (same look as .bbx-intro-inf) ==== */
.bbx-keep-panel p.bbx-keep-inf {
color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-body);
margin: 6px 0 0; padding-block-start: 12px; border-block-start: 1px solid rgba(255, 255, 255, .14);
display: flex; align-items: center; gap: 10px;
}
.bbx-keep-panel p.bbx-keep-inf[hidden] { display: none; }
.bbx-keep-inf-arrow { animation-name: bbx-keep-inf-nudge !important; }
@keyframes bbx-keep-inf-nudge {
0%, 100% { transform: rotate(-90deg) translateX(0); }
50% { transform: rotate(-90deg) translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .bbx-keep-inf-arrow { animation: none !important; transform: rotate(-90deg); } }
@media (max-width: 824px) { .bbx-keep-panel p.bbx-keep-inf { font-size: 14px; } }
/* ==== PROTO2 rev h 2026-10-19 (Barak): "5 Clicks In 3 Hours" = How It Works size on desktop (16 bold);
the timer card keeps ONE main heading ("N Clicks To $19"), the bonus line is its subheading.
Phones unchanged (all section rows 20 / 16). Was: card-title size 24 / 20. */
@media (min-width: 825px) { #bbxExplainerNote, #bbxExplainerNote * { font-size: var(--fs-body) !important; } }
@media (min-width: 825px) { .bbx-col-timer #bbxExplainerNote { padding-top: 0 !important; padding-bottom: 0 !important; } } /* tighter gap around the 16px bonus heading (was the note box 8px padding) */
@media (min-width: 825px) { .bbx-col-timer .msg-overlay-container { min-height: 0 !important; height: auto !important; align-items: start !important; } }
/* ==========================================================================
PROTO 2026-10-19 (Barak): closed bar = corner card, bottom-right.
Overrides the full-width #pb-bar strip above (kept for the diff until merge).
========================================================================== */
#pb-bar.pb-card {
left: auto; right: 20px; bottom: 20px; top: auto;
width: min(496px, calc(100vw - 40px));
background: transparent; border: 0; box-shadow: none; cursor: default;
flex-direction: column; align-items: flex-end;
font-family: var(--font-primary, 'Inter', sans-serif);
-webkit-font-smoothing: antialiased;
}
#pb-bar.pb-card:hover { background: transparent; }
.pb-card-box {
position: relative; width: 100%; box-sizing: border-box;
display: grid; grid-template-columns: 122px 1fr; align-items: center; /* Barak 2026-10-19: image-to-line gap = line-to-text gap (18); was 100px, bands touched the line */
background: #fff; color: #141414;
border-radius: 10px; border: 1px solid rgba(219,189,133,.55);
box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
padding: 16px 20px 16px 12px; cursor: pointer;
animation: pbCardIn .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pbCardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.pb-card-box:hover { box-shadow: 0 22px 56px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.25); }
.pb-card-fig {
position: relative; align-self: stretch; min-height: 76px;
border-inline-end: 1px solid #e6e6e6; margin-inline-end: 18px;
}
.pb-card-fig img { position: absolute; left: 0; width: 84px; height: auto; }
.pb-card-fig .pb-b2 { top: calc(50% - 30px); transform: rotate(-6deg); z-index: 2; filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
.pb-card-fig .pb-b1 { top: calc(50% - 6px); transform: rotate(4deg); }
.pb-card-main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pb-card-h { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; color: #141414; }
.pb-card-p { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 400; color: #2b2b2b; }
.pb-card-p b { font-weight: 700; color: #141414; }
.pb-card-p--sm { font-size: 14px; margin-top: 2px; }
.pb-card-p--sm b { color: #b8954f; }
.pb-card-btn {
margin-top: 12px; display: inline-flex; align-items: center; justify-content: center;
min-height: 50px; padding: 0 34px; border-radius: 999px;
background: var(--figma-primary-gold, #dbbd85); color: #141414;
font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap;
transition: transform .15s, filter .15s;
}
.pb-card-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
/* avatars: same ShareMan / V art as the bar's celebration card */
.pb-card-avs { display: flex; align-items: center; gap: 12px; margin-top: 10px; width: 100%; } /* +2px (Barak 2026-10-19; was 10px) */
.pb-card-avs > span { position: relative; width: 30px; height: 30px; background: url("../images/ShareMan-off.svg") no-repeat center / contain; opacity: .55; }
.pb-card-avs > span.is-on { background-image: url("../images/ShareMan.svg"); opacity: 1; }
.pb-card-avs > span.is-on::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 15px; height: 15px; background: url("../images/V.svg") no-repeat center / contain; }
.pb-card-clock {
margin-inline-start: auto; font-size: 15px; font-weight: 700; color: #141414;
font-variant-numeric: tabular-nums; letter-spacing: 0;
padding: 4px 10px; border-radius: 999px; background: #f4efe4;
}
#pb-bar.is-warn .pb-card-clock { background: #fff3cc; }
#pb-bar.is-danger .pb-card-clock { background: #ffe0e3; color: #b3122a; }
.pb-card-foot { margin: 8px 0 0; font-size: 12px; color: #6b6b6b; display: flex; align-items: center; gap: 8px; }
.pb-live-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #dbbd85; position: relative; flex-shrink: 0; }
.pb-live-dot::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: #dbbd85; animation: pbLive 1.6s ease-in-out infinite; }
@keyframes pbLive { 50% { opacity: .25; } }
/* win bands row */
.pb-card-bands { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pb-card-bands img { width: 66px; height: auto; }
.pb-card-bands .pb-plus { font-size: 24px; color: #8a8a8a; line-height: 1; }
.pb-card-bands .pb-free { font-size: 24px; font-weight: 400; color: #7a7a7a; letter-spacing: .02em; margin-inline-start: 6px; }
/* a new friend click: pink flash (SSOT: pink flash on every click) + last avatar pops */
#pb-bar.is-flash .pb-card-box { animation: pbCardIn .45s cubic-bezier(.2,.8,.2,1) both, pbFlash 1.6s ease-out .1s 1; }
/* Glow in brand gold #dbbd85 (Barak 2026-10-19). Was pink: rgba(236,112,160,.55) ring + #fff0f6 tint. */
@keyframes pbFlash {
0% { box-shadow: 0 0 0 0 rgba(219,189,133,0), 0 0 0 0 rgba(219,189,133,0), 0 18px 50px rgba(0,0,0,.45); background: #fff; }
18% { box-shadow: 0 0 0 6px rgba(219,189,133,.75), 0 0 34px 10px rgba(219,189,133,.45), 0 18px 50px rgba(0,0,0,.45); background: #fdf6e8; }
100% { box-shadow: 0 0 0 18px rgba(219,189,133,0), 0 0 40px 16px rgba(219,189,133,0), 0 18px 50px rgba(0,0,0,.45); background: #fff; }
}
#pb-bar.is-flash .pb-card-avs > span.is-last { animation: pbPop .6s cubic-bezier(.3,1.6,.5,1) .2s both; }
@keyframes pbPop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
/* minimize */
.pb-card-min {
position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.pb-card-min:hover { background: #f1f1f1; }
.pb-card-min span { width: 8px; height: 8px; border-right: 2px solid #8a8a8a; border-bottom: 2px solid #8a8a8a; transform: translateY(-2px) rotate(45deg); } /* chevron DOWN, twin of the pill's chevron UP (Barak 2026-10-19); was an 11x2 minus */
.pb-card-pill {
display: none; align-items: center; gap: 10px; cursor: pointer;
background: #fff; color: #141414; border: 1px solid rgba(219,189,133,.55); border-radius: 999px;
padding: 6px 16px 6px 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
font: 400 15px/1 var(--font-primary, sans-serif); white-space: nowrap;
animation: pbCardIn .35s cubic-bezier(.2,.8,.2,1) both;
}
.pb-card-pill img { width: 46px; height: auto; }
.pb-card-pill b { font-weight: 700; }
.pb-card-pill em { font-style: normal; font-variant-numeric: tabular-nums; color: #555; margin-inline-start: 8px; }
.pb-card-pill em:empty { display: none; }
.pb-pill-chev { width: 8px; height: 8px; border-left: 2px solid #8a8a8a; border-top: 2px solid #8a8a8a; transform: translateY(2px) rotate(45deg); margin-inline-start: 4px; }
#pb-bar.is-min .pb-card-box { display: none; }
#pb-bar.is-min .pb-card-pill { display: inline-flex; }
#pb-bar.is-min.is-flash .pb-card-pill { animation: pbFlash 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
.pb-card-box, .pb-card-pill, .pb-live-dot::after, #pb-bar.is-flash .pb-card-box, #pb-bar.is-flash .pb-card-avs > span.is-last { animation: none !important; }
}
/* phones: full width minus the 16px gutter, compact */
@media (max-width: 700px) {
#pb-bar.pb-card { right: 16px; left: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
.pb-card-box { grid-template-columns: 80px 1fr; padding: 12px 14px 12px 8px; } /* gap 12 both sides of the line; was 64px */
.pb-card-fig { min-height: 56px; margin-inline-end: 12px; }
.pb-card-fig img { width: 54px; }
.pb-card-fig .pb-b2 { top: calc(50% - 20px); }
.pb-card-fig .pb-b1 { top: calc(50% - 4px); }
.pb-card-h, .pb-card-p { font-size: 14px; }
.pb-card-p--sm { font-size: 12px; }
.pb-card-main { padding-inline-end: 22px; }
.pb-card-btn { margin-top: 8px; min-height: 40px; padding: 0 20px; font-size: 14px; }
.pb-card-avs { gap: 9px; margin-top: 6px; } /* +2px (Barak 2026-10-19; was 7px) */
.pb-card-avs > span { width: 22px; height: 22px; }
.pb-card-avs > span.is-on::after { width: 11px; height: 11px; right: -4px; bottom: -4px; }
.pb-card-clock { font-size: 13px; padding: 3px 8px; }
.pb-card-foot { font-size: 11px; margin-top: 6px; }
.pb-card-bands { gap: 6px; margin-top: 4px; }
.pb-card-bands img { width: 44px; }
.pb-card-bands .pb-plus { font-size: 18px; }
.pb-card-bands .pb-free { font-size: 18px; }
.pb-card-min { top: 4px; right: 4px; }
#pb-bar.is-min.pb-card { left: auto; }
}
.pb-nowrap { white-space: nowrap; }
/* Barak 2026-10-19: $19 button in the corner card shakes + bursts like the open bar's Order button */
.pb-card-btnslot { position: relative; display: inline-block; margin-top: 12px; }
.pb-card-btnslot .pb-card-btn { margin-top: 0; }
.pb-card-btn.is-pulsing { animation: bbx-order-pulse .5s ease-in-out 1; }
.pb-card-btnconf { inset-block-start: 0; z-index: 2; }
.pb-card-btnslot.is-burst .pb-card-btnconf i { animation: bbxWinConfetti 1100ms cubic-bezier(.16,.84,.44,1) both; }
@media (max-width: 700px) { .pb-card-btnslot { margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .pb-card-btn.is-pulsing { animation: none; } .pb-card-btnslot.is-burst .pb-card-btnconf i { animation: none; opacity: 0; } }
/* the open bar's white confetti pieces vanish on the white card: pink here, burst x1.4 (Barak 2026-10-19) */
.pb-card-btnconf { transform: translateX(-50%) scale(1.4); }
.pb-card-btnconf i:nth-child(2), .pb-card-btnconf i:nth-child(5), .pb-card-btnconf i:nth-child(8) { background: #ec70a0; }
.pb-card-min:hover span, .pb-card-pill:hover .pb-pill-chev { border-color: #141414; }
/* clock under the avatars (Barak 2026-10-19): plain text line, no pill; was .pb-card-clock pill at the row end */
.pb-card-timer { margin: 12px 0 0; font-size: 16px; line-height: 1.3; color: #141414; }
.pb-card .pb-card-clock { margin: 0; padding: 0; background: none; font-size: inherit; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
#pb-bar.is-warn .pb-card-clock { background: none; color: #a87a00; }
#pb-bar.is-danger .pb-card-clock { background: none; color: #b3122a; }
@media (max-width: 700px) { .pb-card-timer { font-size: 14px; margin-top: 8px; } }
.pb-card-timer { white-space: nowrap; }
@media (max-width: 360px) { .pb-card-timer { font-size: 13px; } }
/* ==== no line breaks in the closed card (Barak 2026-10-19) ==== */
.pb-card-main { padding-inline-end: 0; }
.pb-card-main p { white-space: nowrap; max-width: 100%; box-sizing: border-box; }
.pb-card-main .pb-card-h { padding-inline-end: 28px; } /* room for the chevron, heading line only */
.pb-card-foot { white-space: nowrap; }
@media (max-width: 700px) {
.pb-card-main { padding-inline-end: 0; }
.pb-card-main .pb-card-h { padding-inline-end: 24px; }
.pb-card-box { grid-template-columns: 61px 1fr; padding: 12px 12px 12px 10px; } /* gap 10 each side of the line; was 64 (13/10) */
.pb-card-fig { margin-inline-end: 10px; }
.pb-card-fig img { width: 40px; }
.pb-card-fig .pb-b2 { top: calc(50% - 16px); }
.pb-card-fig .pb-b1 { top: calc(50% - 3px); }
}
/* <=360: the band image steps aside so every line keeps 14px on one line */
@media (max-width: 360px) {
.pb-card-box { grid-template-columns: 1fr; padding: 12px 12px 12px 14px; }
.pb-card-fig { display: none; }
.pb-card-timer { font-size: 14px; }
}
/* ==== Barak 2026-10-19: desktop open bar, no height jump at the first friend click ====
The start hint and the event line share ONE slot under the link box with the same footprint,
so the bar keeps its height from idle through clicks 1-4. The event line also sits 16px under
the link box (was 10px: margin -6px + the card's 16px gap). */
@media (min-width: 825px) {
.bbx-col-timer #bbxEvtTimer { margin: 0 0 10px; min-height: 57px; display: flex; align-items: center; justify-content: center; } /* was margin -6px 0 10px */
.bbx-col-timer #bbxEvtTimer[hidden] { display: none !important; }
.bbx-col-timer #bbxStartHint { min-height: var(--bbx-evt-slot, 64px); }
}
/* Copy button (Barak 2026-10-19): icon 5px left, label 7px left, button size unchanged */
.bbx-copy svg { position: relative; left: -5px; }
.bbx-copy .bbx-copy-t { position: relative; left: -7px; }
/* Copied: deep blue instead of green, so the bar doesn't carry a third green next to WhatsApp.
The "Now paste it…" line beside it stays green. Was #1dae83. */
.bbx-copy.is-copied { background: #1a59b5; }
/* 5-click screens follow the new bar height (Barak 2026-10-19): 503 + the 21px the shared
hint/event slot added, so the 5th click does not shrink the bar. Was min-height 503px. */
@media (min-width: 1000px) { .bbx-bar.is-celebrate .bbx-celeb { min-height: 524px; } } /* PROTO 2026-10-21: was min-width:1251px */
/* Footer line = the open bar's footer exactly (Barak 2026-10-19): same text size + colour
(.bbx-foot-right span), same 12px gap, same .bbx-foot-live-dot. Was 12px #6b6b6b, gap 8,
and a separate outlined blinking dot (.pb-live-dot). */
.pb-card-foot { font-size: var(--fs-small); color: #929292; gap: 12px; }
@media (max-width: 700px) { .pb-card-foot { font-size: var(--fs-small); margin-top: 6px; } }
/* Barak 2026-10-19: ring room after the footer dot (its 2.6x ring overflowed the line box) */
.pb-card-foot { padding-inline-end: 8px; }
/* Desktop slot: start hint centred in the shared slot before the clock starts; the ambient line
(clock running, 0 clicks) reads quieter than a click message: no gold box. */
@media (min-width: 825px) {
.bbx-col-timer #bbxStartHint { display: flex; align-items: flex-start; justify-content: center; } /* PROTO 2026-10-21 (Barak): hint sits 8px under the link box like phones; slot keeps its 64px. Was align-items:center (~24-32px down) */
.bbx-col-timer #bbxEvtTimer.is-ambient { background: transparent; border-color: transparent; color: var(--color-text-light, #b5b5b5); }
}
/* ==== PROTO 2026-10-20 (Barak): phones, the send card joins the accordion list ====
Single column only (<=824px); tablet 2+1 (825-1250) and desktop keep the gray card.
The card drops its box and its heading takes the accordion row: no gap after the ladder's hairline,
14px above and below, same 20px type (16px at <=360, unchanged). No chevron: it does not fold.
Was on phones: background #343434, border-radius 16px, padding 20px, 24px grid gap above. */
@media (max-width: 824px) {
#bbx-overlay #bbxActiveCard { background: transparent; border-radius: 0; padding: 0 0 20px; }
.bbx-bar:not(:has(#bbxWin.is-shown)) .bbx-inner > .bbx-col-timer { margin-top: -24px; }
#bbx-overlay #bbxSendHeadline { padding-block: 14px; margin: 0; line-height: 1.2; }
}
/* ==== PROTO 2026-10-20 (Barak): phones, the win/celebration card drops its box too ====
Same rule as the send card above: single column only (<=824px). It sits right under the last
accordion row, closed by the same hairline, 14px to its first line, no side padding.
Was on phones: background #343434, border-radius 16px, padding 24px 20px 28px, 24px grid gap above. */
@media (max-width: 824px) {
#bbx-overlay .bbx-bar.is-celebrate #bbxCeleb { background: transparent; border-radius: 0; padding: 14px 0 20px;
margin-top: -24px; border-top: 1px solid rgba(255, 255, 255, .12); }
}
/* ==== PROTO 2026-10-20 (Barak): win screen ====
1. The sub line is empty on the regular win (JS) and leaves the flow, at every width.
2. Phones (<=824px): no figure, so the whole win screen with its Order button fits one screen.
Was: figure 190px above the text. Tablet and desktop keep it. */
.bbx-celeb-sub:empty { display: none; }
@media (max-width: 824px) {
#bbxCeleb .bbx-celeb-fig { display: none !important; }
}
/* ==== PROTO 2026-10-20 (Barak): phones, the click message leads the price column ====
#bbxEvtTop (phones only) moves above "Your Price Right Now:": the news first, then the price it made.
Its "Your price now: $X." sentence is hidden there, since the price follows right under it.
Desktop/tablet (#bbxEvtTimer) keep the full sentence. Was on phones: under the Order button, full text. */
@media (max-width: 824px) {
.bbx-col-price > #bbxEvtTop { order: -1; margin-bottom: 10px; } /* 10 + the column's 14px gap = 24px to the heading */
#bbxEvtTop .bbx-evt-price { display: none; }
}
/* ==== PROTO 2026-10-20 (Barak): phone field + "Send me the link" = one pill, every width ====
Built like the link field + Copy: no gap, field rounded on the left, button on the right, the
field's border stops where the button starts. Was: gap 8px, field radius 8px, button radius 12px. */
.bbx-keep-row { gap: 0; }
.bbx-keep-tel { border-radius: 999px 0 0 999px; border-inline-end: none; padding-inline-start: 18px; }
.bbx-keep-send { border-radius: 0 999px 999px 0; padding-inline: 14px 18px; }
/* Barak, same day: the field's 1px border made the gold button read 1px taller on each side. The button
gets its own 1px border on top, right and bottom (#433e37), so both halves share one outline. Was: border: none. */
.bbx-keep-send { border: 1px solid #433e37; border-inline-start: none; }
/* Barak, same day: while she types (field focused) the button's border turns gold with the field's, so the
whole pill is outlined. Was: the gold stopped at the joint. */
.bbx-keep-row:has(.bbx-keep-tel:focus) .bbx-keep-send { border-color: var(--figma-primary-gold); }
/* ==== PROTO 2026-10-20 (Barak): expiry leaves the timer cell empty ====
The expiry hero (#bbxAfterglow: H1 + "immediately", mechanism line, 45-day guarantee) no longer shows
at any width: it added load and mixed product copy into the bonus card. Desktop/tablet: the cell stays
(empty), so the bar keeps its fixed height. Phones (<=824px): the whole cell leaves the flow, so the
card ends at the link box. Was: the hero shown in the timer's place at expiry (Barak 2026-10-15). */
.bbx-col-timer .bbx-tz-stack:has(#bbxExpiredPill:not([hidden])) > .bbx-afterglow { visibility: hidden; }
@media (max-width: 824px) {
.bbx-col-timer .bbx-tz-stack:has(#bbxExpiredPill:not([hidden])) { display: none; }
}
/* ==== PROTO 2026-10-20 (Barak): expiry, link box -> click message 48px (3 x 16) ====
Desktop/tablet only (the message is #bbxEvtTimer; phones show #bbxEvtTop elsewhere). The empty timer
cell below takes the same 32px back, so the card and the bar keep their height. Was: 16px at expiry too. */
@media (min-width: 825px) {
.bbx-col-timer:has(#bbxExpiredPill:not([hidden])) #bbxEvtTimer { margin-top: 32px; }
.bbx-col-timer:has(#bbxExpiredPill:not([hidden])) .bbx-tz-stack { margin-top: -32px; }
}
/* ==== PROTO 2026-10-21 (Barak): tablet landscape ====
1) 3 columns from 1000px (was from 1251px). The 2+1 layout (price on its own row) now runs 825-999 only.
Landscape tablets 1024-1194 x 744-834: the bar was 1179px tall in ~700px of screen and the send card
started below the fold. 3-col: 670-700px, no scroll. Other <=1250 rules (38px price, 20px paddings) stay.
2) Phone field + Send pill was locked to 344px by the keep-stack's auto grid track; in a ~240-310px
column it ran out of the card. minmax(0,1fr) lets it follow the column. (No effect >=1251: col = 344.)
3) Top strip "Enerband. Your Skin Coach for Face & Neck." removed at every width (phones already hid it,
10-18). Markup kept in BBX_HTML. Was: .bbx-top shown >=825px, 66/76px tall. */
@media (min-width: 1000px) and (max-width: 1250px) {
.bbx-inner { grid-template-columns: 1fr 1fr 1fr; } /* was 1fr 1fr */
.bbx-col-price { grid-column: auto; background: #343434; padding-inline: 32px; } /* was 1 / -1, transparent, 0 */
.bbx-keep-outer-stack, .bbx-keep-stack { grid-template-columns: minmax(0, 1fr); } /* was auto (344px) */
.bbx-col-price .bbx-order-btn { min-width: 0; max-width: 100%; } /* was min-width 290px: the 290px button ran 32-60px out of a 230-274px column at 1000-1133 */
}
.bbx-top { display: none !important; }
/* ==== PROTO 2026-10-21 (Barak): dynamic right column (see bbxReserveCard in burstbox.js) ==== */
@media (min-width: 825px) {
.bbx-col-timer #bbxStartHint { min-height: 0; } /* was var(--bbx-evt-slot, 64px): the hint keeps only its own lines */
.bbx-col-timer #bbxEvtTimer { min-height: 0; } /* was 57px: the message is as tall as its text */
}
/* ==== PROTO 2026-10-21 (Barak): win screen without the figure where it does not fit ====
The figure overlaps "FREE!" below 1420px (measured: -80px at 1280, -23 at 1366, +13 at 1420). There:
no figure, no confetti Lottie; the win card takes its content width and the left column gets the rest
(equal halves once both fit). Was: figure at every width >=825, grid 1fr 2fr, card min-height 524px. */
@media (min-width: 1000px) and (max-width: 1419px) {
#bbxCeleb .bbx-celeb-fig, #bbxCeleb .bbx-celeb-lottie { display: none !important; }
.bbx-bar.is-celebrate .bbx-inner { grid-template-columns: minmax(0, 1fr) minmax(max-content, 1fr); }
.bbx-bar.is-celebrate .bbx-celeb { min-height: 0; }
}
/* ==== PROTO 2026-10-21 (Barak): phone pill, channel row, footer ==== */
/* Phone field stops at 220px; the Send button follows it, the row does not stretch. Every width.
Was: flex 1 1 0, the field filled the column (265 at 393, 691 at 834, 280 at 1440). */
#bbx-overlay .bbx-keep-tel { max-width: 220px; }
/* "Sending to | WhatsApp | SMS": 20px under the text above (was 14px). Every width. */
#bbx-overlay .bbx-keep-chanwrap { margin-top: 6px; }
/* Footer <=1250: one row, wraps only when the two parts no longer fit with 24px between them;
66px tall like desktop. Was: always stacked (flex-direction:column, Barak 2026-07-19), 80px. */
@media (max-width: 1250px) {
.bbx-footer { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;
column-gap: 24px; row-gap: 8px; min-height: 66px; }
}