/* Member 2026-08-28 (second sizing order, superseding the morning's three-across): "regroup the Signal page models so there are 5 rows of 2, make them a bit larger so more detail in the designs and use more width of screen, they look good in mobile mode as is." So: TWO across from 560px — ten products = five rows of two — inside a widened max-w-5xl band, with a larger gap to match the larger cards. Below 560px nothing changes: one per row, exactly the mobile view the Member approved. */ /* Sparks 2026-09-11 (Member: "errors per the screenshots" — the 12:24 phone screenshot showed this band clipped at both edges). Measured at a 240px layout viewport (a phone under page zoom): every .mp-card was 241px wide at left 27 — a `1fr` track is really minmax(auto,1fr), and `auto` is the card's MIN-CONTENT width, set by the nowrap .mp-title and the one-line .mp-actions row. minmax(0,1fr) lets the track be the column; the card wraps inside it. */ #merch-press-panel .mp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;} @media(min-width:560px){#merch-press-panel .mp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}} /* The Member 2026-10-09 ("there should only be 8 tiles plus members pick"): nine tiles stand three rows of three once the band is wide enough; one column under 560px, two from 560px as before. */ @media(min-width:900px){#merch-press-panel .mp-grid{grid-template-columns:repeat(3,minmax(0,1fr));}} #merch-press-panel .mp-card{min-width:0;} /* Member 2026-08-28: tapping a merch model pops THE DESIGN to a bare full-screen view — no text, no chrome, tap again to come back (the same viewing contract as the live painting's fullscreen). The overlay rides on body as its own last-sibling layer, so no page stacking context can paint anything over it. */ #merch-press-panel .mp-look{cursor:zoom-in;display:block;} /* Member 2026-08-29, across three readings. Q14 first had the rendered mockup STAND WHERE THE MODEL STOOD, which took the crew models off the wall and left the card's credit line saying "modeled by " over a picture with nobody in it. The model came back and the render moved to its own "as printed" row. Then the press files themselves were made to cover their whole print area, at which point the two pictures agreed and the second row was only a smaller copy of the first — so it is deleted, and the model is once again the only picture on the card. The mockup endpoint stays: the bundles and the press lane still use it. */ #mp-fullview{position:fixed;inset:0;z-index:100000;background:#000; display:none;align-items:center;justify-content:center;cursor:zoom-out;} #mp-fullview.on{display:flex;} #mp-fullview img{max-width:100vw;max-height:100vh;width:auto;height:auto; object-fit:contain;display:block;} body.mp-fullview-open{overflow:hidden !important;} #merch-press-panel .mp-card{border-radius:12px;padding:12px 10px 10px; background:radial-gradient(120% 100% at 50% 0%, rgba(28,66,98,0.55) 0%, rgba(10,37,64,0.60) 55%, rgba(6,22,39,0.75) 100%);} #merch-press-panel .mp-card svg{width:100%;height:auto;display:block;} #merch-press-panel .mp-type{display:block;text-align:center;margin-top:6px; font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.16em; text-transform:uppercase;color:var(--sun);font-weight:700;} #merch-press-panel .mp-name{display:block;text-align:center;margin-top:2px; font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.08em; text-transform:uppercase;color:rgba(248,243,231,0.55);} #merch-press-panel .mp-title{display:block;text-align:center;font-size:12px; color:var(--pearl);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #merch-press-panel .mp-serial{display:block;text-align:center; font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.06em; color:rgba(202,162,60,0.65);margin-top:2px;} /* The tile's link row. Sparks 2026-09-11: the row wraps rather than widening the card - with a phone's text scaling at 1.5x the widest admin button alone measured 1,158px and dragged the whole card to 1,385px wide. */ #merch-press-panel .mp-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;} #merch-press-panel .mp-actions button{min-width:0;flex:1 1 auto;} /* RECAST 2026-10-10: the Member, "make the shop links more balanced with the favicon and delete the status, link and favicons only ... opening and serial record buttons don't belong on the tiles just the shop links". WHAT WAS TRUE BEFORE: each tile carried a "Get it" buy button (.mp-buy), the platform chip with its 24px icon (.mp-listed and its logo chip), a line about posting or a sale (.mp-say), its platform's shop link (.shop-store) with a status pill (.shop-store-state), the serial-record link (.mp-meta) and a crew- pick badge (.shop-badge). Their rules left with them; the tile's one link is .shop-link below. */ /* THE SHOP tile (the Member, 2026-10-09; the six crew model tiles, 2026-10-10). The picture is a square stage holding two stacked layers; the next product fades in slowly on the back layer while the old one fades out. Reduced motion: no fade (and the script never moves the slideshow by itself). */ #merch-press-panel .shop-model{margin:0 0 6px;} /* RECAST 2026-10-11: the Member, "the crew merch model tiles need to be uniform" - one picture shape for every tile, the crew renders' own 4:5 canvas (every crew model and product is drawn at 720x900), and every row a fixed height so no tile is taller or shorter than another. WHAT WAS TRUE BEFORE: a square stage, rows that collapsed when empty. */ #merch-press-panel .shop-tile{display:flex;flex-direction:column;height:100%;box-sizing:border-box;} #merch-press-panel .shop-tile .shop-model{height:16px;overflow:hidden;white-space:nowrap;} #merch-press-panel .shop-tile .shop-nav{height:44px;} #merch-press-panel .shop-tile .shop-nav .mp-type{height:30px;display:flex;align-items:center; justify-content:center;overflow:hidden;line-height:1.25;} #merch-press-panel .shop-tile .shop-title{height:16px;} #merch-press-panel .shop-tile .shop-serial{height:12px;} #merch-press-panel .shop-tile .shop-one{height:13px;} #merch-press-panel .shop-tile .shop-links{height:78px;align-content:start;margin-top:auto;} #merch-press-panel .shop-tile .shop-title[hidden],#merch-press-panel .shop-tile .shop-serial[hidden], #merch-press-panel .shop-tile .shop-one[hidden],#merch-press-panel .shop-tile .shop-model[hidden]{ display:block !important;visibility:hidden;} #merch-press-panel .shop-tile .shop-links[hidden]{display:grid !important;visibility:hidden;} #merch-press-panel .shop-stage{position:relative;width:100%;aspect-ratio:4/5;min-height:200px; border-radius:10px;overflow:hidden;background:rgba(6,22,39,0.55);} #merch-press-panel .shop-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; opacity:0;transition:opacity 1.6s ease-in-out;} #merch-press-panel .shop-img.on{opacity:1;} #merch-press-panel .shop-blank{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;text-align:center;padding:16px;font-size:12px;color:rgba(255,245,220,0.6);} /* the tile's rows are display:block, which outranks the hidden attribute's own rule - so hidden is spelled out */ #merch-press-panel .shop-tile [hidden]{display:none !important;} #merch-press-panel .shop-nav{display:flex;align-items:center;gap:6px;margin-top:4px;} #merch-press-panel .shop-nav .mp-type{flex:1 1 auto;min-width:0;margin-top:0;} #merch-press-panel .shop-nav button{min-width:44px;min-height:44px;border-radius:8px; font-size:20px;line-height:1;color:var(--pearl);background:rgba(255,245,220,0.06); border:1px solid rgba(255,245,220,0.18);} #merch-press-panel .shop-nav button:disabled{opacity:.35;} #merch-press-panel .shop-nav button:focus-visible{outline:2px solid var(--sun);outline-offset:2px;} #merch-press-panel .shop-one{display:block;text-align:center;font-size:10px; letter-spacing:.08em;color:rgba(255,245,220,0.6);margin-top:2px;} /* The tile's ONE link (the Member, 2026-10-10: "make the shop links more balanced with the favicon"): the shop's favicon and " →" on one line, centred, the same size on every tile, opening the very item on show; 44px tall for the thumb (P9.1m). The icon rule OUTRANKS "#merch-press-panel .mp-card svg" (the model art's width:100%): a weaker selector once let every icon fill its tile (live 2026-10-07). */ #merch-press-panel .shop-links{justify-content:center;margin-top:10px;} #merch-press-panel .shop-link{flex:1 1 100%;min-width:0;max-width:100%;box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px; padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;line-height:1.2; text-decoration:none;color:var(--pearl);border:1px solid rgba(202,162,60,0.55); background:linear-gradient(180deg,rgba(241,217,120,0.12),rgba(200,153,47,0.08));} #merch-press-panel .shop-link:hover{border-color:var(--sun);} #merch-press-panel .shop-link:focus-visible{outline:2px solid var(--sun);outline-offset:2px;} #merch-press-panel .shop-link-ico{display:inline-flex;flex:0 0 20px;width:20px;height:20px;} #merch-press-panel .shop-link svg.mp-plat-ico{width:20px;height:20px;display:block;} #merch-press-panel .shop-link-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* the favicon row, balanced, the item's shop ringed gold - RECAST 2026-10-15 ("Add Walmart and print full favicons"): ten marks, two rows of five. WHAT WAS TRUE BEFORE: eight marks, two rows of four. */ #merch-press-panel .shop-links{display:grid;grid-template-columns:repeat(5,36px);gap:6px; justify-content:center;} #merch-press-panel .shop-fav{display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,245,220,0.18); background:rgba(255,245,220,0.05);} #merch-press-panel .shop-fav.is-item{border-color:var(--sun);box-shadow:0 0 0 1px var(--sun) inset;} #merch-press-panel .shop-fav:focus-visible{outline:2px solid var(--sun);outline-offset:2px;} #merch-press-panel .shop-fav img.shop-fav-ico{width:24px;height:24px;display:block;} @media (prefers-reduced-motion: reduce){#merch-press-panel .shop-img{transition:none;}} /* The phone floor every Octopus Suit Suite page keeps (the same 16px body copy, 12px labels and 44px touch targets the Signal Room's phone pass sets); one @media block, nothing outside it. */ @media (max-width: 639.98px) { header.oss-hero > p { font-size: 16px; line-height: 1.55; } .kicker, .char-counter, .oss-pill { font-size: 12px; } .oss-band { padding-top: 0.6rem; padding-bottom: 0.6rem; } .oss-window { padding: 0.9rem; } } @media (max-width: 639.98px) { /* CW-39, 2026-09-20: the press card's SERIAL is the same kind of label and was left off this list, so the one line that identifies a one-of-one printed at 9px on the device most people read this page on. */ #merch-press-panel .mp-serial { font-size: 12px; } }