/* card-bond.css — the BLOCKS on the token cards (card-bond.js names the pick on ; no attribute = the old line). Founder 10 Oct: the blocks of the token page's bonding slot (token-bond.css, "bonding C") instead of the line on the cards. One trick, CSS only: the track is cut into blocks by a mask (a repeating "block, gap" tile, --cb-n tiles across the track). The mask clips the track AND its fill, so the card's own markup (.prog-track > .prog-fill style="width:38%") draws blocks unchanged: the fill covers whole blocks and the block filling now in part. No per-card DOM, no script. --cb-n blocks across --cb-g the gap between two blocks The empty blocks are --cb-off; the filled ones the card's own mode colour (--ca: Edge green, Tek blue, EDGEstocks pink, gold in the gold hour). Heights are set so no card, row or tile is taller or shorter than with the line. */ [data-cardbond] .prog-track, [data-cardbond] .ht-track, [data-cardbond] .lc-prog-track, [data-cardbond] .ch-dk-bar, [data-cardbond] .dbond-track{ --cb-off:rgba(255,255,255,.1); -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--cb-g,2px)),transparent calc(100% - var(--cb-g,2px))); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--cb-g,2px)),transparent calc(100% - var(--cb-g,2px))); -webkit-mask-size:calc(100% / var(--cb-n,20)) 100%; mask-size:calc(100% / var(--cb-n,20)) 100%; -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x; border-radius:0; } /* ── the explore / boosts card (.card-prog: .prog-head + .prog-track > .prog-fill) ───────────────────────────────── */ [data-cardbond] .token-card .prog-track{background:var(--cb-off)} [data-cardbond] .token-card.is-bonded .prog-track{background:rgba(245,197,66,.14)} [data-cardbond] .prog-fill{background:var(--ca,var(--green));box-shadow:none} [data-cardbond] .prog-fill::after{display:none} [data-cardbond] .prog-fill.full{background:#c8960c} /* 90% and up: the empty blocks blink in the card's own colour, so the eye lands on what is left. Not gold: on a card, gold is the hour after graduation and nothing else (HOMEFIX, founder 01 Oct; homefix.render.test.mjs scans for it). */ [data-cardbond] .prog-track.near{animation:cbNear 1.1s ease-in-out infinite} @keyframes cbNear{0%,100%{background-color:color-mix(in srgb,var(--ca,var(--green)) 14%,transparent)}50%{background-color:color-mix(in srgb,var(--ca,var(--green)) 42%,transparent)}} /* Heights: the card's bonding block is .prog-head (margin 4 px; 3 px on desktop rows) + a 2 px line. Each option gives the line's extra height back from that margin, so the card is the same height to the pixel. */ /* A — STRIP: 20 blocks, 4 px, under the label line */ html[data-cardbond="A"] .card-prog > .prog-head{margin-bottom:2px} html[data-cardbond="A"] .card-prog > .prog-track{--cb-n:20;--cb-g:2px;height:4px} /* B — ON THE LINE: label, marks, ten blocks, figure — one row. The row that held the line goes to the padding. */ html[data-cardbond="B"] .card-prog{display:flex;align-items:center;gap:6px;padding-bottom:15px} html[data-cardbond="B"] .card-prog > .prog-head{display:contents} html[data-cardbond="B"] .card-prog .prog-lbl{order:0;flex:none} html[data-cardbond="B"] .card-prog .cm-row{order:1;margin:0!important} html[data-cardbond="B"] .card-prog > .prog-track{order:2;flex:1 1 auto;min-width:40px;--cb-n:10;--cb-g:2px;height:6px} html[data-cardbond="B"] .card-prog .prog-pct{order:3;flex:none} /* C — TEN: the label line stays, ten chunky blocks under it (6 px) */ html[data-cardbond="C"] .card-prog > .prog-head{margin-bottom:0} html[data-cardbond="C"] .card-prog > .prog-track{--cb-n:10;--cb-g:3px;height:6px} /* desktop rows (compact density, wider than a phone): label 3 px + line 2 px */ html[data-cardbond="A"] body[data-density="compact"] .card-prog > .prog-head{margin-bottom:1px} html[data-cardbond="B"] body[data-density="compact"] .card-prog{padding-bottom:5px} html[data-cardbond="C"] body[data-density="compact"] .card-prog > .prog-head{margin-bottom:0} html[data-cardbond="C"] body[data-density="compact"] .card-prog > .prog-track{height:5px} /* phone rows (compact, 640 px and under): the label is hidden and the hairline under the row becomes a run of blocks, 3 px, pulled up 3 px as the line was pulled up 2. Inset like the cards (founder 10 Oct, "make it shorter like the other cards so it's not under the icon"): it starts at the name column (the header's 9 px padding + the 24 px icon + the 9 px gap = 42 px past the row's content edge) and ends at the age column's right edge (index.html gives the row 56 px right padding, the age sits 10 px in from the border: -46 px), never under the rank / icon, never on the border. */ @media (max-width:640px){ html[data-cardbond] body[data-density="compact"] .card-prog{display:block;padding:0;margin-top:-3px;margin-left:42px;margin-right:-46px} html[data-cardbond] body[data-density="compact"] .card-prog > .prog-head{display:none} html[data-cardbond] body[data-density="compact"] .card-prog > .prog-track{height:3px;--cb-n:20;--cb-g:3px} html[data-cardbond="C"] body[data-density="compact"] .card-prog > .prog-track{--cb-n:10;--cb-g:4px} } /* ── the heat tile's foot bar (index-s1.js .ht-track > .ht-bond) ───────────────────────────────────────────────── */ [data-cardbond] .ht-track{--cb-n:20;--cb-g:2px;background:rgba(255,255,255,.13)} /* on a phone the tile is small and the foot bar ran border to border under everything; inset it like the rows: inside the tile's own padding (8 px, 6 px on the small tile), lifted 3 px off the border, still under the spark (bottom 8 px) */ @media (max-width:640px){ [data-cardbond] .ht-track{left:8px;right:8px;bottom:3px} [data-cardbond] .heat-tile.s .ht-track{left:6px;right:6px} } /* ── the dashboard's launch rows (.lc-prog-track > .lc-prog-fill) ──────────────────────────────────────────────── */ [data-cardbond] .lc-prog-track{--cb-n:20;--cb-g:2px;height:4px;background:var(--cb-off)} /* ── the community dock (.ch-dk-bar > i) ───────────────────────────────────────────────────────────────────────── */ [data-cardbond] .ch-dk-bar{--cb-n:20;--cb-g:2px} [data-cardbond] .ch-dk-bar i{border-radius:0} /* ── the token page's DEV TOKENS rows (.dbond-track > i, 44 px): ten blocks ────────────────────────────────────── */ [data-cardbond] .dbond-track{--cb-n:10;--cb-g:1px;height:4px;background:var(--cb-off)} [data-cardbond] .dbond-track i{border-radius:0} @media (prefers-reduced-motion:reduce){ [data-cardbond] .prog-track.near{animation:none;background-color:color-mix(in srgb,var(--ca,var(--green)) 30%,transparent)} } /* ── BOOSTROW (founder 11 Oct): a boosted card's frame vs the blocks — card-bond.js names the pick on The frame is boost-cards.js's layer (.bc-fx, behind the content): the 1 px edge light (::before's first inset shadow) and the 2 px energy rim (.bc-rim, .r2 at MAX). Only the phone rows put the blocks on it (they sit on the row's inner bottom edge); cards and desktop rows keep 16 px+ between the two, so A moves nothing there. No option changes a row's or a card's height, the glow, the drifting rockets, the count / MAX after the ticker, or the gold hour. */ /* A — INSET STRIP: the blocks lift 5 px (2 px rim + a 3 px gap); what they take from the top margin they give back below */ @media (max-width:640px){ html[data-boostrow="A"][data-cardbond] body[data-density="compact"] .token-card.bc-on .card-prog{margin-top:-8px;margin-bottom:5px} } /* B — OPEN BOTTOM: the edge light and the rim draw top + sides; nothing gold under the blocks */ html[data-boostrow="B"] .bc-on > .bc-fx::before{box-shadow:inset 1px 0 0 rgba(var(--bcg),.32),inset -1px 0 0 rgba(var(--bcg),.32),inset 0 1px 0 rgba(var(--bcg),.32),inset 0 0 26px rgba(var(--bcg),.12)} html[data-boostrow="B"] .bc-on > .bc-fx.is-max::before{box-shadow:inset 1px 0 0 rgba(var(--bcg),.5),inset -1px 0 0 rgba(var(--bcg),.5),inset 0 1px 0 rgba(var(--bcg),.5),inset 0 0 30px rgba(var(--bcg),.18)} html[data-boostrow="B"] .bc-on > .bc-fx > .bc-rim{padding:2px 2px 0!important} /* C — QUIET BOOST: no edge light, no rim; the tier glow + wash stay, and a block corner (five 3 px blocks on a 4 px pitch, an L in the top right) marks the boost in the tier colour (gold at MAX) */ html[data-boostrow="C"] .bc-on > .bc-fx::before{box-shadow:inset 0 0 26px rgba(var(--bcg),.12)} html[data-boostrow="C"] .bc-on > .bc-fx.is-max::before{box-shadow:inset 0 0 30px rgba(var(--bcg),.18)} html[data-boostrow="C"] .bc-on > .bc-fx > .bc-rim{display:none!important} html[data-boostrow="C"] .bc-on > .bc-fx::after{content:"";position:absolute;top:3px;right:11px;width:3px;height:3px;background:var(--bct); box-shadow:4px 0 0 var(--bct),8px 0 0 var(--bct),8px 4px 0 var(--bct),8px 8px 0 var(--bct)}