/* rip/reveal-panel.css — THE REVEAL'S STYLES, for every universe and Pokémon. * ───────────────────────────────────────────────────────────────────────────── * Extracted from fun-pack.css on 2026-09-26, when Pokémon moved onto the same * reveal as every universe (Aaron: "Pokémon is just another universe, like the * rest"). packs.htm loads THIS sheet and not fun-pack.css (which also styles the * pack pages' own furniture); every page that loads fun-pack.css loads this * right after it. Rules moved verbatim, in their original order. * Pairs with rip/reveal-panel.js, which builds the panel these rules style. */ /* fun-pack.css — the shared rip experience for every fun pack. * =========================================================================== * Aaron, 2026-09-04: "all of the best bits of pack dojo in terms of features, * UI and UX must be applied when the user is ripping the marvel cards and any * other sets we add." * * ⚠ IT REUSES `body.sim-pulling`, IT DOES NOT INVENT A SECOND CLASS. * rip-header.css already fades and disables the header, the tab bar and the * sticky open bar under that exact class, and rip/admin/cli/tabbar-check.js * already sweeps every `position:fixed; bottom:0` element in the repo against * its offset block. A parallel `fp-pulling` would be a second list nobody * remembers to extend — the failure this repo has paid for twice in one day * (the trades SEND button, then the brand link killing a pull). One class, * inherited by everything, is the rule. * * What this file adds is only what is specific to a fun pack: the overlay that * has to opt back INTO pointer events while the page is inert, the pack and * card choreography, and the burst video's own layer. */ /* ⚠ THE PAGE IS INERT DURING A PULL AND THE REVEAL IS THE ONE EXCEPTION. body.sim-pulling{pointer-events:none} is inherited by everything — that is the point, and it is why the brand link can no longer kill a pull. The overlay opts back in the same way #card-overlay does on the pack page. */ /* ⚠ ONLY THE RESULT PANEL OPTS BACK IN. During the card-only phase the page is still inert and the card is a moment to watch, not a control — making it tappable there would let a stray touch dismiss the reveal mid-explosion. */ body.sim-pulling .fp-reveal.is-on { pointer-events: auto; } /* ── the reveal ─────────────────────────────────────────────────────────── ⚠ IT IS AN OVERLAY, NOT A BLOCK IN THE PAGE, AND THE FIRST VERSION GOT THIS WRONG. Aaron: "animation loads but card doesn't reveal properly, overlay doesn't show." He was exactly right — the reveal was an inline element in normal flow, so it appeared 237px down a scrolled page, behind a full-screen clip, and then JUMPED to 521px when the pack came back underneath it. Measured on the real page before the fix: revealTop 237 -> 521. The pack page's reveal has always been a centred modal (#card-overlay) and that is the thing being copied. Fixed, full-screen, above the clip at 9998, with its own scrim so the card reads against the page behind it. */ /* ⚠ TWO PHASES, AND THE FIRST ONE HAS NO SCRIM. Aaron: "the card is supposed to appear from the explosion and then the overlay appears. it's not doing that." It was not: the full overlay opened AT the explosion, and a 97.5% scrim over the clip means you never see the card emerge from anything. `.is-card` — the card alone, transparent background, in front of the clip at the explosion frame. This is the pack page's own behaviour: the slab reveals ON the bursts, in front of the video. `.is-on` — the result panel: the scrim fades in and the details arrive, after the clip has finished. */ /* ⚠ THE PANEL IS `art | identity`, WITH THE ACTIONS FULL WIDTH BENEATH BOTH — AT EVERY WIDTH, THE PHONE INCLUDED. Aaron, 2026-09-04: "doesn't look anywhere near as good as the Pokémon reveal." Measured side by side at 390px, that was not taste: the Pokémon overlay is a two-column grid with a hero line, a bordered collection box and a primary/secondary button pair, and this was a centred stack — 78vw of card art with a 19px name, a tiny chip and two grey chips under it. The card filled the screen and nothing else had any weight. The proportions here are #card-overlay's own, and every one of them is a measurement that page already paid for, so they are copied rather than re-derived: 46% to the art on a phone (40% "finished 135px short of the window with the card at 156x220 — small art and empty space"), and min(280px,25vh) above 560 because a card is 5:7 and a 280px column is 392px tall, which overflowed an 808x787 window. ⚠ GRID, NOT FLEX-WRAP. That page fixed the same bug three times: flex clamps an item by max-width BEFORE deciding where the line breaks, so the actions row sat BESIDE the card at 1920 and under it at 1280. Two columns and an explicit full-width row behave identically at every width. ⚠ `safe center`. Plain centring pushes a panel taller than the window ABOVE the scroll origin, i.e. unreachable even with overflow-y:auto — measured on that page at -110px on a landscape phone. */ .fp-reveal { position: fixed; inset: 0; z-index: 9999; display: none; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 13px 15px; justify-content: safe center; align-content: safe center; align-items: start; text-align: left; padding: 18px 14px; transition: background .38s ease; /* ⚠ NEARLY OPAQUE, NOT MERELY DARK. At .88 the page behind read straight through it — the red OPEN button and the header sat visibly across the card in a 390px screenshot. A reveal is a modal moment; the page behind it is not part of the composition, and backdrop-filter is not supported everywhere so the scrim cannot rely on the blur to do this job. */ background: transparent; overflow-y: auto; overscroll-behavior: contain; } .fp-reveal.is-on { display: grid; } .fp-reveal.is-on { background: rgba(4, 6, 10, .975); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ⚠ PHASE 1 IS A CENTRED FLEX BOX, NOT THE GRID WITH ITS TEXT HIDDEN. The card comes out of the explosion ALONE, so it has to be centred in the viewport — and `opacity:0` siblings still occupy their tracks, which is what used to push it off centre before the panel had even opened. They are display:none here and the layout mode itself changes at .is-on. */ /* ⚠ `:not(.is-on)` ON EVERY PHASE-1 RULE, INCLUDING `display`. Both classes are on the element at once — revealCard() adds .is-card and show() adds .is-on to the same node — so a bare `.fp-reveal.is-card` is an equal-specificity tie that source order decides, and it silently kept the panel in the phase-1 flex box: measured, the grid never applied and the identity column overlapped the card. The phase is "card, and not yet the panel", so say that. */ .fp-reveal.is-card:not(.is-on) { display: flex; align-items: center; justify-content: center; } /* ⚠ THE CARD IS `.fp-cardwrap` NOW, NOT `.fp-art` — this selector names the REVEAL'S DIRECT CHILD, and wrapping the image moved that. Left as `:not(.fp-art)` it hid the card in the one phase the card is the only thing on screen: measured, the art came back 0×0 at top 0. */ .fp-reveal.is-card:not(.is-on) > *:not(.fp-cardwrap) { display: none; } /* ⚠ `align-self` IS SCOPED TO THE PANEL, BECAUSE AN ITEM'S OWN ALIGNMENT BEATS ITS CONTAINER'S. This is the second half of "card loads at top", and the one that was actually on screen: the grid rule pinning the art to the top of its column applied in PHASE 1 as well, where the container is a centred flex box — and `align-self:start` on the item overrides `align-items:center` on the parent every time. Measured before the fix: the card sat 202px above centre, i.e. hard against the top padding, with the page heading showing behind it. The container's rule was right and the item silently opted out of it. */ .fp-cardwrap { grid-column: 1; position: relative; display: block; width: 100%; } .fp-reveal.is-on .fp-cardwrap { align-self: start; } /* ⚠ `overflow-wrap` HERE, BECAUSE IT INHERITS. Clamping the BOXES is only half the job: a single word longer than the column still paints straight out of a correctly-sized box, and `getBoundingClientRect()` on that element reports no overflow at all — only the container's scrollWidth sees it. That is what "Counterintelligence" did after the pill was fixed. One declaration on the column covers the name, the meta line and anything added here later. */ .fp-info { grid-column: 2; align-self: center; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; overflow-wrap: break-word; } /* ⚠ `.fp-tray`, NOT `.fp-foot` — that name is already the pack back's foot credit, twenty lines up. Reusing it would have given a one-line inside the pack a full-width grid-column flex column. Grep before naming. */ .fp-tray { grid-column: 1 / -1; width: 100%; max-width: 380px; justify-self: center; display: flex; flex-direction: column; gap: 9px; } /* ⚠ THE CARD IS THE HERO AND IT GETS A REAL EDGE. A bare rounded rectangle with a drop shadow is what "not anywhere near as good" looked like: the pack page frames its card in a slab that glows the tier's own colour. This is the same idea at a fun pack's weight — a hairline, the pack's accent bloomed behind the art, and the depth shadow the overlay already had. */ .fp-art { display: block; width: 100%; height: auto; border-radius: 11px; background: var(--rip-panel-2); box-shadow: 0 16px 42px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.10), 0 0 38px -8px var(--fp-accent, var(--rip-act)); } /* ⚠⚠ THE REVEALED CARD IS A CONTROL ONCE THE PANEL IS OPEN, AND IT HAS TO LOOK LIKE ONE. Aaron: "I want to be able to open and explore the card more." A picture that does something with no affordance is a feature nobody finds, so it takes the zoom cursor on a pointer and the shared focus ring on a keyboard — and ONLY while `.is-on`, because during the explosion and the teases the page is pointer-events:none and the card is not tappable yet. */ .fp-reveal.is-on .fp-art[data-cardopen] { cursor: zoom-in; } .fp-reveal.is-on .fp-art[data-cardopen]:focus-visible { outline: 3px solid var(--fp-accent, var(--rip-act)); outline-offset: 3px; } /* Phase 1: big and centred, before the panel takes a column off it. */ .fp-reveal.is-card:not(.is-on) .fp-cardwrap { width: min(320px, 74vw); } /* ⚠ THE WHITE FLASH IS THE ONE REVEAL EFFECT THAT FIRES ON EVERY PATH ON THE PACK PAGE (`.reveal-flash`, packs.htm:742) and it was missing here entirely. It is what sells the card as having been struck out of the burst rather than faded in — half a second, over the art, gone. */ @keyframes fpCardFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } .fp-cardflash { position: absolute; inset: 0; border-radius: 11px; background: #fff; opacity: 0; pointer-events: none; z-index: 2; } .fp-reveal.is-pop .fp-cardflash { animation: fpCardFlash .5s ease-out forwards; } /* ⚠ THE STATIC SHEEN — packs.htm's `.holo-sheen`, always on, never animated. A flat scan on a black scrim reads as a picture of a card; one diagonal highlight reads as a card under a light. `mix-blend-mode: overlay` so it brightens the art rather than greying it, and it must not eat the tap that dismisses the panel. */ .fp-sheen { position: absolute; inset: 0; border-radius: 11px; pointer-events: none; z-index: 1; mix-blend-mode: overlay; background: linear-gradient(135deg, transparent 28%, rgba(255,255,255,.30) 44%, rgba(255,255,255,.06) 54%, transparent 66%); } /* ── the identity column ───────────────────────────────────────────────── */ /* ⚠⚠ A FLEX ITEM'S `min-width` IS `auto`, WHICH MEANS MIN-CONTENT — AND THAT IS WHY THE PANEL SCROLLED SIDEWAYS (Aaron, 2026-09-07: "fix overflow", with a screenshot of the reveal scrolled right and the card half off the left edge). The pill is `white-space:nowrap`, so `.fp-idrow`'s min-content width is the WHOLE set name; as a flex item of `.fp-info` it was free to grow to it. Measured at 390px with the real font: .fp-info 180.5 (correct) but .fp-idrow and .fp-pill both 244.6 — the overlay's scrollWidth 440 against a 390 client, i.e. 50px of horizontal scroll. ⚠ AND IT MADE THE PILL'S OWN `max-width:100%` MEANINGLESS — the 100% was of a parent that had already grown to fit it, so the ellipsis it asks for could never fire. A clamp measured against a box the clamped thing is sizing is not a clamp. Whenever `max-width:100%` "does nothing", check what the 100% is OF. ⚠ `> *`, NOT A LIST OF THE ROWS THAT EXIST TODAY. A block added to this column next month inherits the clamp instead of being remembered. */ .fp-info > * { max-width: 100%; min-width: 0; } /* ⚠ DESCENDANTS, NOT `> *`. `.fp-flag` is `display:contents`, so the chip that actually becomes a flex item of this row is its CHILD — a `> *` rule lands on the box that was taken out of the layout and reaches nothing. */ .fp-idrow * { min-width: 0; } .fp-idrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; max-width: 100%; } .fp-pill { font-family: 'Press Start 2P', var(--rip-display), sans-serif; font-size: 9px; letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; /* ⚠ THE ACCENT IS A FILL COLOUR, NOT A TEXT COLOUR, ON A NEAR-BLACK SCRIM. Marvel red straight onto rgba(4,6,10,.975) measured 3.1:1 — the pill read as dark-on-dark in the 390px screenshot. Every accent this product will ever take is a saturated brand colour, so the label is mixed toward white rather than each page being asked to supply a second, lighter one. */ color: #fff; border: 0; background: var(--fp-accent, var(--rip-act)); box-shadow: 0 0 20px -4px var(--fp-accent, var(--rip-act)); /* ⚠ IT WRAPS, IT DOES NOT ELLIPSIS — THE SET NAME IS DATA, NOT COPY. "The Galaxy's Most Wanted" is 245px of Press Start 2P at 9px against a 180px column on a 390px phone, and no font size that fits it on one line is readable (it would need ~6.6px). Truncating is the wrong trade here because nothing else on the reveal says which set the card came from, and the next universe's names are not ours to shorten either. Two short lines show the whole name; `break-word` only splits a word that cannot fit on its own, so it breaks at the spaces. */ max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: break-word; line-height: 1.5; } /* ⚠ THE CARD'S NAME IS THE HERO LINE, BECAUSE A FUN PACK HAS NO PRICE TO PRINT. The Pokémon panel's weight comes from one huge gradient-clipped number; strip the value out of that layout and the hole is exactly what this page looked like. A fun pack's payoff is WHICH card it is, so the name takes that slot. ⚠ padding + box-decoration-break:clone are NOT optional on a background-clip:text run (Aaron, 2026-07-12: italic glyph overhang was being cut off on his phone). Padding alone does not fix a wrapped span — clone is what gives every line fragment its own padding. */ .fp-hero { font-family: var(--rip-display); font-weight: 800; margin: 0; font-size: clamp(23px, 6.4vw, 30px); line-height: 1.1; letter-spacing: -.02em; /* ⚠ HYPHENATE THE HERO LINE, DON'T JUST SNAP IT. Card names are data and some are one long word — "Counterintelligence" is 19 characters against a 180px column on a 390px phone, so it cannot fit at any size this clamp reaches. `break-word` alone gives "Counterintellige / nce"; with hyphens the break lands at a syllable and reads as typography rather than damage. It is only ever a hint — a browser with no dictionary for the page's lang falls back to the inherited break-word, which is why both are set and neither is load-bearing on its own. NOT on .fp-sub or .fp-pill: a hyphen in a metadata run or a pixel-font eyebrow reads as a glyph, not a break. */ -webkit-hyphens: auto; hyphens: auto; padding: 0 .14em; margin-left: -.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; /* ⚠ THE TAIL OF THE GRADIENT IS A LIGHTENED ACCENT, NOT THE ACCENT. Ending on the raw brand colour put the last word of the name at Marvel red on a near-black scrim — the exact "cramped and dark" reading this rebuild is fixing. Mixed 55% toward white it still says which pack this is and stays legible on any accent the product takes later. */ background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 42%, color-mix(in srgb, var(--fp-accent, var(--rip-act)) 55%, #ffffff) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-wrap: balance; } .fp-sub { font-family: var(--rip-data); font-weight: 600; font-size: 12.5px; color: var(--rip-fg-3); margin: 0; line-height: 1.4; font-variant-numeric: tabular-nums; } @media (min-width: 560px) { /* 280 + 15 + 380 = 675 — one readable column pair however wide the screen gets, capped on the TRACK because the overlay itself must stay full-screen. */ .fp-reveal { grid-template-columns: min(280px, 25vh) minmax(0, 380px); gap: 15px 16px; } .fp-hero { font-size: 34px; } .fp-info { gap: 9px; } } .fp-hint { font-size: 11.5px; color: var(--rip-fg-3); opacity: .75; margin: 2px 0 0; text-align: center; } /* ⚠ THE CARD EXPLODES OUT OF NOTHING, AND IT IS THE **ART** THAT DOES IT, NOT THE OVERLAY. `card-explode-out` (packs.htm:1706) starts at scale 0 at five times brightness and overshoots to 1.18 before settling — 900ms of it. The old fpPop started at scale .55 and took 520ms, which reads as a panel opening rather than a card being thrown out of an explosion, and animating the OVERLAY meant the scrim and the buttons scaled with it. */ @keyframes fpExplode { 0% { transform: scale(0) rotate(-8deg); opacity: 0; filter: brightness(5); } 55% { transform: scale(1.18) rotate(2deg); opacity: 1; filter: brightness(1.8); } 78% { transform: scale(.95) rotate(-1deg); filter: brightness(1.1); } 100% { transform: scale(1) rotate(0deg); filter: brightness(1); } } /* ⚠ THE WRAPPER, SO THE FLASH AND THE SHEEN TRAVEL WITH THE CARD. Animating the alone left both layers sitting still at full size while the art scaled up through them. */ .fp-reveal.is-pop .fp-cardwrap { animation: fpExplode .9s cubic-bezier(.175,.885,.32,1.275) forwards; } /* ⚠⚠ THE TWO TEASES — packs.htm's `card-tease-1` / `card-tease-2`, keyframe for keyframe. The card is thrown part-way out of the clip's earlier explosions and sucked back, so a chase reads as three beats rather than one late arrival. They are the pack page's exact curves on purpose: the same two clips play on both sides, and a hand-tuned variant here would drift from the file it is supposed to be synchronised to. ⚠ BOTH END AT scale(0) AND ARE `forwards` — the card must be invisible again before the next beat, and revealCard() strips both classes before the real explosion or the fill would hold it there. */ @keyframes fpTease1 { 0% { transform: scale(0) rotate(8deg); opacity: 0; filter: brightness(5); } 40% { transform: scale(.65) rotate(2deg); opacity: .9; filter: brightness(3); } 100% { transform: scale(0) rotate(-3deg); opacity: 0; filter: brightness(1); } } @keyframes fpTease2 { 0% { transform: scale(0) rotate(-5deg); opacity: 0; filter: brightness(4); } 40% { transform: scale(.6) rotate(1deg); opacity: 1; filter: brightness(2.5); } 100% { transform: scale(0) rotate(3deg); opacity: 0; filter: brightness(1); } } .fp-reveal.is-tease1 .fp-cardwrap { animation: fpTease1 .6s ease-out forwards; } .fp-reveal.is-tease2 .fp-cardwrap { animation: fpTease2 .75s ease-out forwards; } @media (prefers-reduced-motion: reduce) { .fp-pack.is-beat, .fp-pack.is-charge, .fp-pack.is-suck, .fp-pack.is-awaiting::after, .fp-reveal.is-pop .fp-cardwrap, .fp-reveal.is-pop .fp-cardflash, /* ⚠ THE TEASES TOO, AND NOT ONLY BECAUSE THEY MOVE: both keyframes END at scale(0)/opacity(0) with a `forwards` fill, so leaving them live here would hide the card outright from anybody who asked for less motion. */ .fp-reveal.is-tease1 .fp-cardwrap, .fp-reveal.is-tease2 .fp-cardwrap { animation: none; } .fp-vig, .fp-cardflash { display: none; } /* `both` fill means removing the animation must not leave these at opacity 0. */ .fp-reveal.is-on .fp-info, .fp-reveal.is-on .fp-tray { animation: none; } } /* ── the post-pull strip ──────────────────────────────────────────────── */ /* ⚠ NEW SITS BESIDE THE PACK PILL, NOT ON A LINE OF ITS OWN. That is the pack page's `.ov-idrow` decision, and the reason is width: on a ~200px identity column a chip with a whole row to itself buys nothing and costs ~26px of the panel's height. */ .fp-flag { margin: 0; display: contents; } .fp-new { font-family: 'Press Start 2P', var(--rip-display), sans-serif; font-size: 9px; color: #06240f; background: var(--rip-up); border-radius: 999px; padding: 6px 10px; display: inline-block; letter-spacing: .04em; box-shadow: 0 0 18px -4px var(--rip-up); } .fp-dupe { font-family: var(--rip-data); font-weight: 700; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; display: inline-block; color: var(--rip-fg-3); border: 1px solid var(--rip-line); } /* ⚠ THE COLLECTION FIGURE IS A BORDERED BOX, NOT A LOOSE LINE. On the pack page it is a panel with the count, the bar and the way to go and look at it — one control. Loose on a scrim it read as a caption nobody had placed. */ .fp-box { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 9px 11px 9px 13px; } .fp-colbar { flex: 1 1 auto; min-width: 0; font-family: var(--rip-data); font-weight: 800; font-size: 12.5px; color: var(--rip-fg); font-variant-numeric: tabular-nums; } /* ⚠ The count must not wrap. "1 / 1779" broke across two lines beside the bar because the was allowed to shrink — a four-digit total is the normal case here, not the edge one. ⚠⚠ AND IT MUST STATE ITS WEIGHT. A bare carries the UA's `font-weight: bolder`, which against this bar's own 800 computes to 900 — outside Bricolage Grotesque's 200..800 axis, so the browser SYNTHESISES a fake bold. Measured at 390px: every universe page rendered "0 / 1,779" at weight 900 and packs.htm rendered none, i.e. the one figure a member reads most on those pages was the one word on them in a different typeface. Chrome desktop hides it by smearing the real 800; Android and Safari do not, and Aaron reviews on a phone. This repo's own rule, earned twice before: audit the COMPUTED weight, never the declaration. */ .fp-colbar b { white-space: nowrap; font-weight: 800; } .fp-colbar u { display: block; text-decoration: none; color: var(--rip-fg-3); font-weight: 700; font-size: 11px; } /* ⚠ rgba on white, NOT --rip-panel-2. The track was panel-2 on a .975 black scrim, i.e. invisible — measured in a 390px screenshot, the bar read as a gap between two words. A progress bar nobody can see is not a progress bar. */ .fp-colbar span { display: block; margin-top: 6px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; } .fp-colbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--fp-accent, var(--rip-act)) 55%, #ffffff), var(--fp-accent, var(--rip-act))); transition: width .6s ease; } /* ⚠ ONE PRIMARY, ONE SECONDARY — NOT TWO GREY CHIPS. The pack page pairs a filled OPEN ANOTHER at flex:1.6 with an outlined SHARE at flex:1, because a straight 50/50 split demotes the primary action to "one of two buttons". ⚠ (0,2,0)+ on every anchor: rip-ui.css repaints anchors at (0,2,1), which is how a CTA ends up cyan on its own accent fill. */ .fp-acts { display: flex; gap: 8px; } .fp-acts button, .fp-acts a { flex: 1 1 0; min-width: 0; min-height: 46px; font-family: var(--rip-display); font-weight: 800; font-size: 14px; border-radius: 11px; padding: 12px 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10); color: var(--rip-fg); text-decoration: none; } .fp-acts button.is-primary, .fp-reveal a.fp-primary:not(.rip-btn) { flex: 1.6 1 0; border: none; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--fp-accent, var(--rip-act)) 78%, #ffffff), var(--fp-accent, var(--rip-act)) 62%, color-mix(in srgb, var(--fp-accent, var(--rip-act)) 72%, #000000)); box-shadow: 0 6px 18px -4px var(--fp-accent, var(--rip-act)), inset 0 1px 0 rgba(255,255,255,.18); } .fp-acts button[disabled] { opacity: .5; cursor: default; } /* ⚠ THE PANEL ARRIVES, IT DOES NOT APPEAR. Two beats, 90ms apart — identity first, then the controls — so the eye lands on the card and the name before the buttons. A single opacity flip is what made this read as a modal rather than a reveal. */ @keyframes fpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fp-reveal.is-on .fp-info { animation: fpIn .34s ease-out both; } .fp-reveal.is-on .fp-tray { animation: fpIn .34s ease-out .09s both; } /* The card's own aspect, as a hairline down the pocket. Painted only when the pack HAS such an idea — `--pk-c` is unset otherwise and nothing shows, rather than a default colour inventing a fact about the card. */ /* ⚠ SUPERSEDED BY THE SLEEVE. `--pk-c` is now the sleeve's border, exactly as `--tc` is on the Pokémon pocket, so a second stripe down the art box would be the pack's colour drawn twice in one pocket. */ /* ⚠ THE UNIQUE STAR SITS WITH THE NEW BADGE, NOT NEAR THE NAME — and it is gold-on-dark rather than a fill, so it reads as a mark printed on the card rather than as a grade or a score. Marvel Champions has no rarity; this is the ★ the card itself carries. */ .fp-uniq { font-family: var(--rip-data); font-weight: 800; font-size: 9px; letter-spacing: .04em; padding: 6px 9px; border-radius: 999px; color: #ffd45e; border: 1px solid rgba(255,212,94,.45); background: rgba(255,212,94,.10); white-space: nowrap; } /* ⚠⚠ THE RARITY CHIP. Added 2026-09-09 — Aaron: "on the power rangers and disney page, the user has no idea if they're pulling a common card, uncommon, rare etc." It sits in .fp-idrow beside the set pill, which already wraps, so it costs no horizontal budget: that row is `flex-wrap:wrap` with `min-width:0` on its descendants precisely because the pill overflowed once. ⚠ THE LADDER IS WEIGHT AND BRIGHTNESS, NOT A NEW HUE, AND THAT IS FORCED. rip/CLAUDE.md's colour language already spends every signal colour this site has: cyan means "do this", amber means money, gold means prize, and the pack accent means "which universe". A rarity scale in gold would read as a prize on the one screen where a real prize can appear. So a common card is quiet grey, and rarer grades get border, glow and letter-spacing — the same information, carried by emphasis rather than by a colour that already means something else here. */ /* ⚠⚠ THE RARITY LADDER IS EIGHT TREATMENTS, AND EACH ONE SWITCHES ON A MECHANISM THE STEP BELOW DOES NOT HAVE (2026-09-09, third attempt). Attempt one was three classes: on Lorcana's eight grades four pills were byte-identical. Attempt two interpolated every property linearly off the rank — every rung then had its own numbers, and Aaron said, correctly, "there's not much difference between one and the next." One eighth of one range per step is a change nobody sees. A ladder is read by things APPEARING, not by a value creeping. So: t0 flat grey — no colour anywhere t1 + the pip takes the pack accent (colour enters) t2 + the border takes it (the outline joins in) t3 + the WORD goes white and the border full accent t4 + an accent wash behind it (the pill itself is tinted) t5 + an outer glow (it lights what is around it) t6 + a metallic two-tone sweep and a 2px edge t7 + the foil sheen travels across it (motion, and only here) ⚠ EIGHT IS THE VOCABULARY'S, NOT ANY PACK'S. rarityChip() quantises a pack's rank onto it, so 6 rungs land on 0,1,3,4,6,7 and 5 on 0,2,4,5,7 — the ends are always the first and last treatment. A ninth grade in some future pack changes nothing here, and no pack has a class of its own. ⚠ THE BLOCKS ARE COMPLETE, NOT CUMULATIVE. Each level restates what it paints. It is more lines than chaining `.fp-t5, .fp-t6, .fp-t7`, and it is the version somebody can audit: what a rung looks like is one block, not a set of selector lists to intersect in your head. */ .fp-rar { --fp-r: 0; /* the slope, still used by the two things that genuinely read better as one */ --fp-rc: var(--fp-accent, var(--rip-act)); /* ⚠ inline-flex + a gap, because the pip is a real box in the line box rather than a decoration painted over the text. `isolation` is what keeps the foil sweep's `z-index:-1` INSIDE the chip: without a stacking context a negative child paints behind the chip's own background and disappears. */ display: inline-flex; align-items: center; gap: 6px; position: relative; isolation: isolate; overflow: hidden; font-family: var(--rip-data); font-weight: 800; font-size: 9.5px; /* Tracking opens as the grade climbs — the rarest word is the most spaced, which is how a foil stamp is set on the real thing. */ letter-spacing: calc(.05em + var(--fp-r) * .05em); text-transform: uppercase; padding: 6px 10px 6px 8px; border-radius: 999px; white-space: nowrap; color: #93a3b8; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); } .fp-rar::before { content: ''; flex: 0 0 auto; width: calc(4px + var(--fp-r) * 2px); height: calc(4px + var(--fp-r) * 2px); border-radius: 50%; background: #7c8a9c; } /* t0 — flat. The commonest grade must look like nothing has happened, or every step above it has less room to mean something. */ /* t1 — colour enters, and only in the pip. */ .fp-rar.fp-t1::before { background: var(--fp-rc); } /* t2 — the outline joins in. */ .fp-rar.fp-t2::before { background: var(--fp-rc); } .fp-rar.fp-t2 { border-color: color-mix(in srgb, var(--fp-rc) 55%, rgba(255,255,255,.14)); } /* t3 — the word itself takes the light, and the edge goes full accent. */ .fp-rar.fp-t3::before { background: var(--fp-rc); box-shadow: 0 0 6px var(--fp-rc); } .fp-rar.fp-t3 { color: #eef4fb; border-color: var(--fp-rc); } /* t4 — the pill is tinted, not just outlined. */ .fp-rar.fp-t4::before { background: var(--fp-rc); box-shadow: 0 0 6px var(--fp-rc); } .fp-rar.fp-t4 { color: #fff; border-color: var(--fp-rc); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)), color-mix(in srgb, var(--fp-rc) 22%, transparent); } /* t5 — it starts lighting what is around it. */ .fp-rar.fp-t5::before { background: #fff; box-shadow: 0 0 8px var(--fp-rc); } .fp-rar.fp-t5 { color: #fff; border-color: var(--fp-rc); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)), color-mix(in srgb, var(--fp-rc) 30%, transparent); box-shadow: 0 0 16px -4px var(--fp-rc); text-shadow: 0 0 10px var(--fp-rc); } /* t6 — metallic: a two-tone diagonal through the accent, and a real edge. ⚠ The extra border pixel comes out of the padding so the pill keeps height. */ .fp-rar.fp-t6::before { background: #fff; box-shadow: 0 0 10px var(--fp-rc); } .fp-rar.fp-t6 { color: #fff; border: 2px solid var(--fp-rc); padding: 5px 9px 5px 7px; background: linear-gradient(115deg, color-mix(in srgb, var(--fp-rc) 46%, transparent) 0%, rgba(255,255,255,.20) 42%, color-mix(in srgb, var(--fp-rc) 46%, transparent) 78%); box-shadow: 0 0 22px -4px var(--fp-rc), inset 0 0 14px -8px #fff; text-shadow: 0 0 12px var(--fp-rc); } /* t7 — the top of any ladder: everything t6 has, brighter, and the only moving thing on the panel. Motion is the last mechanism precisely because it cannot be out-done by another step. */ .fp-rar.fp-t7::before { background: #fff; box-shadow: 0 0 12px var(--fp-rc), 0 0 3px #fff; } .fp-rar.fp-t7 { color: #fff; border: 2px solid var(--fp-rc); padding: 5px 9px 5px 7px; background: linear-gradient(115deg, color-mix(in srgb, var(--fp-rc) 62%, transparent) 0%, rgba(255,255,255,.30) 42%, color-mix(in srgb, var(--fp-rc) 62%, transparent) 78%); box-shadow: 0 0 30px -3px var(--fp-rc), inset 0 0 16px -7px #fff; text-shadow: 0 0 14px var(--fp-rc), 0 0 4px rgba(255,255,255,.7); } /* ⚠⚠ NO STEP IS A SOLID ACCENT FILL, AND THAT RULE HAS NOT MOVED — A SCREENSHOT IS THE ONLY THING THAT FOUND IT. An early version filled the top rung with the pack accent, which measured perfectly (visible, contrast fine, zero overflow at 320/390/1280) and was still wrong: on Power Rangers the accent is #00b14f and the NEW badge is `--rip-up`, so a Holographic pull put two solid green pills side by side and the rarest card on the page read as a second NEW. The set pill is a third solid accent fill in the same row. t4-t7 wash and sweep the accent at 22-62% over the panel's dark ground, which is a tint rather than a fill: still unmistakable, still not a duplicate of either pill beside it, on ANY pack — the collision is structural, not a fact about green. */ /* ⚠ THE FOIL SWEEP. A holographic card is recognised by the light MOVING across it, so the rarest grade gets exactly that and nothing below it does. */ .fp-rar.fp-t7::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.18) 44%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.18) 56%, transparent 66%); transform: translateX(-130%); } @media (prefers-reduced-motion: no-preference) { .fp-reveal.is-on .fp-rar.fp-t7 { animation: fpIn .34s ease-out both; } /* Starts after the panel has assembled, then rests for most of the cycle — a sheen that never stops reads as a loading shimmer, not as foil. */ .fp-reveal.is-on .fp-rar.fp-t7::after { animation: fpRarFoil 3.2s ease-in-out .5s infinite; } } @keyframes fpRarFoil { 0% { transform: translateX(-130%); } 38%, 100% { transform: translateX(130%); } } /* ⚠ ART + TEXT, NEVER ONE BOX — the same rule the binder pocket already states (rip/CLAUDE.md): a caption absolutely positioned over art is how "$10,660" became "$10,6(" once already. This is a plain flex row instead, so the value line always has the row's full width to print in. */ .op-result{display:flex;gap:14px;align-items:center;width:100%;text-align:left; background:var(--rip-panel);border:1px solid var(--rip-line); border-radius:var(--rip-r);padding:14px} .op-result[hidden]{display:none} .op-result__art{flex:0 0 auto;width:72px;aspect-ratio:5/7;border-radius:8px; overflow:hidden;background:var(--rip-panel-2)} .op-result__art img{width:100%;height:100%;object-fit:cover;display:block} .op-result__body{flex:1 1 auto;min-width:0} .op-result__name{margin:0;font-family:var(--rip-display);font-weight:800; font-size:16px;line-height:1.3;color:var(--rip-fg); overflow-wrap:break-word} .op-result__set{margin:4px 0 0;font-size:12.5px;color:var(--rip-fg-3); overflow-wrap:break-word} /* Money in --rip-val everywhere else on the site; a grade chip is the same PSA vocabulary the slab label and the binder pocket already use, coloured by gradeColor() (rip-fmt.js) rather than a second colour table here. */ .op-result__val{margin:8px 0 0;display:flex;align-items:center;gap:8px; font-family:var(--rip-data);font-weight:800;font-size:17px; color:var(--rip-val);font-variant-numeric:tabular-nums} .op-result__grade{display:inline-block;padding:2px 7px;border-radius:6px; font-family:var(--rip-data);font-weight:800;font-size:11px;color:#111} /* ══════════════════════════════════════════════════════════════════════════ ⚠⚠ THE REVEAL IS packs.htm's `#card-overlay`, VALUE FOR VALUE (2026-09-26). Aaron, with Pokémon, Marvel and One Piece reveals side by side: "Three overlays, all different. After I asked you to copy Pokémon. Fix it now." Every figure below was MEASURED off packs.htm's rendered overlay with getComputedStyle at 390px and 1440px — not read from its source, which spreads the same element across inline styles, !important overrides and four media blocks. It sits LAST in this sheet and every selector is scoped under `.fp-reveal`, so it outranks the per-rule history above without a single !important, and a page's own later