/* products-bands-v1 — section bands (orchestrator decision 2026-09-28, review round 2). Loaded after brand-unify-v1.css. Base: SEAM-FIRST (black LIVE, warm-ink STUDIO, cool HUB). Grafts: CALM (the HUB article carries its own band and the section's end; neutral ticket), IDENTITY-FIRST (HUB grid as a masked layer, right-gutter columns). Owner 2026-09-28: (a)「HUBとSTUDIOでそれぞれ区切りがなかったりコンセプトカラーベースになってないのが気になる」 (b)「LIVEはヒーローと違うセクションってことがちゃんとわかるようにしたい。今同じ背景色で同じセクションみたいになってる」 Grounds, top → bottom. Every band is ONE flat ground and every seam is ONE move: a straight, full-bleed change of ground at a real layout edge. No line, box, mask, gradient or scallop is drawn on any seam. HERO #0d0724 night → violet sea → #170d3a front tier unchanged; ends on the poster's straight lower edge LIVE #08090e 黒の帯 was #170d3a (the hero's own front tier) STUDIO #09090f + #d4b355 at 10% (= #1d1a16) vapor-studio values HUB #1b1e27 + 64px blueprint grid (white 1.8%, 0 by 78%) vapor-hub values NEWS → #08090e 黒の帯 unchanged Seams (ΔE2000): hero|LIVE 18.7 · LIVE|STUDIO 6.7 · STUDIO|HUB 9.0 · HUB|NEWS 6.6. The two product bands sit at one value and differ in temperature (warm / cool). Band rhythm (docs/DESIGN-DETAIL-STANDARD.md §2): band edge → first text box 96, last visible content → band edge 96 (≤767: 64 / 64). All text stays on the page gutters. Faces, sizes and the underlined action forms stay site-wide; inside the two product bands only colours change (RENEWAL-BRAND-SYSTEM.md §2, PRODUCTS の例外). Product marks untouched. Round 2 (independent review): LIVE live-state cards lose their fills and frames (they became violet boxes on black); idle LIVE ends 96 / 64 under its lowest ink; STUDIO halo removed (flat band like every other); HUB plane lifted from #111318 to vapor-hub's #1b1e27 so its lower seam reads. */ /* ================= 1. HERO → LIVE: LIVE is its own black band ================= */ /* Same selectors as rising-v8-title.css / live-idle-archives.css; equal specificity, later in the cascade. */ body.ik-plane:has(.ensemble-stage.ik) #main > .edition-live-wrap::before, body:has(.ensemble-stage) #main > .edition-live-wrap::before { background: #08090e; /* contract 黒の帯; ΔE2000 18.7 from the hero's #170d3a (was 0) */ } body.ik-plane:has(.ensemble-stage.ik) #main > .edition-live-wrap, body:has(.ensemble-stage) #main > .edition-live-wrap { padding-top: 96px; /* hero lower edge (= LIVE band edge) → LIVE heading box, as PRODUCTS */ } /* LIVE band end, live state: last stream group (its box = its ink, see the meta line below) → band end 96 / 64 */ body.s55 #main > .edition-live-wrap > #on-air[data-state="live"] { padding-bottom: 96px; } /* LIVE band end, idle / unknown / stale: optical — the MEMBER CHANNELS underline ink → band edge = 96 / 64 (DETAIL-STANDARD §3, align to the visible edge). The link keeps its 44px tap box, which runs 5px below its underline (brand-unify-v1: padding-bottom 12, line at bottom 5), so the box → edge value is 96 − 5 = 91 (phone 64 − 5 = 59). This replaces brand-unify-v1 §6 (78 / 46), whose comment "96 / 64 from text" measured 89 / 57 from the text box and 83 / 51 from the underline. */ body.s55 #main > .edition-live-wrap > #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-root.lia-root { padding-bottom: 91px; } @media (max-width: 767px) { body.ik-plane:has(.ensemble-stage.ik) #main > .edition-live-wrap, body:has(.ensemble-stage) #main > .edition-live-wrap { padding-top: 64px; } body.s55 #main > .edition-live-wrap > #on-air[data-state="live"] { padding-bottom: 64px; } body.s55 #main > .edition-live-wrap > #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-root.lia-root { padding-bottom: 59px; } } /* ---- LIVE stream cards on the black band: no cards, no frames (DETAIL-STANDARD §1, contract §4) ---- On the old #170d3a ground the #1d1142 group fills (rising-v6) read as tone; on black they became violet boxes, each holding a 1px-framed watch box and a filled picture box. Surfaces only: the grid, the DOM, copy and data are the LIVE team's and stay as built. Every state that renders stream groups (live, and last-known cards when unknown). */ body.s55 #main > .edition-live-wrap > #on-air .v8-live-group { padding: 0; /* the content sits on the page gutters */ border: 0; background: transparent; box-shadow: none; } /* the same #1d1142 fill on the un-enhanced idle fallback and its foot (rising-v6) */ body.s55 #main > .edition-live-wrap > #on-air > #v8-live-content > .v8-live-empty, body.s55 #main > .edition-live-wrap > #on-air:has(> #v8-live-content > .v8-live-empty) > .v8-live-foot { background: transparent; } /* groups separated by whitespace only: 48 (phone 32), both axes; no divider */ body.s55 #main > .edition-live-wrap > #on-air > #v8-live-content:has(> .v8-live-group) { gap: 48px; } /* the picture is a real thumbnail or nothing: no fill, no frame of its own */ body.s55 #main > .edition-live-wrap > #on-air a.v8-live-picture { border: 0; background: transparent; } /* no thumbnail (none sent, or it failed to load): the empty 16:9 frame would only repeat the watch link below (same URL), so it goes, and the name, title and watch link take the whole width — as live55.js already does for unconfirmed cards (qualifyLastKnown) and study55-live-idle.css lays them out. (:has() cannot nest, hence the :not(:has(… img)) form.) */ body.s55 #main > .edition-live-wrap > #on-air .v8-live-group > a.v8-live-picture:not(:has(img)) { display: none; } body.s55 #main > .edition-live-wrap > #on-air .v8-live-group:has(> a.v8-live-picture):not(:has(> a.v8-live-picture img)) { grid-template-columns: minmax(0, 1fr); } body.s55 #main > .edition-live-wrap > #on-air .v8-live-group:has(> a.v8-live-picture):not(:has(> a.v8-live-picture img)) > :is(.v8-live-person, .v8-live-title, .v8-live-destinations) { grid-column: 1 / -1; } /* title → watch links 16 (8u scale; was 14 / 12); two destinations side by side 32 apart (the column gap of the page) */ body.s55 #main > .edition-live-wrap > #on-air .v8-live-destinations { padding-top: 16px; gap: 16px 32px; } /* the watch link in the contract's Japanese action form (§4, as the CONTACT action): Zen Kaku Gothic New 700 13px, 0.08em, quiet paper, 1px line 8px under the label's line box (8.5 under the ink, as every action), 12px arrow; platform icon at the label's size so the line keeps that distance (measured 8.5 at 1440 / 1024 / 390, as EXPLORE, ALL NEWS and CONTACT). The check time stays under the line as meta. */ body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch, body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch.youtube { display: flex; flex-direction: column; align-items: flex-start; justify-self: start; gap: 12px; /* line → meta ink 12, as before the change (8 + the meta's old leading) */ width: auto; max-width: 100%; min-height: 44px; /* tap area (DETAIL-STANDARD §4) */ padding: 0; border: 0; background: transparent; color: rgba(243, 236, 220, 0.78); text-decoration: none; } body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch:hover, body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch.youtube:hover { border: 0; background: transparent; color: #f3ecdc; /* as .u:hover (paper); the gold hover of study19 left the gold zones */ } body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch-main { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; /* .u gap */ width: auto; padding-bottom: 9px; /* line top 8 under the label box, as the CONTACT action (12 − 3 − 1) */ font: 700 13px/1 "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.08em; } body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch-main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; } body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch-label { gap: 8px; } body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch-label strong { font-weight: 700; } body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch-label > .ui-icon { width: 13px; height: 13px; } body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch-main > .ui-icon { width: 12px; height: 12px; } body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch-detail, body.s55 #main > .edition-live-wrap > #on-air .v8-live-watch.youtube .v8-live-watch-detail { color: rgba(243, 236, 220, 0.78); /* contract 控えめな文字 (was the off-contract #d6cbdc) */ line-height: 1; /* its box = its ink, so the group's box ends on the visible edge and the 96 / 64 band end is measured to ink in every layout */ } @media (max-width: 767px) { body.s55 #main > .edition-live-wrap > #on-air > #v8-live-content:has(> .v8-live-group) { gap: 32px; } } /* ================= 2. PRODUCTS = two product bands ================= */ /* The section's own ground is the STUDIO band (the PRODUCTS heading opens it). The HUB article paints its own band over the lower part and carries the section's end, so the section's bottom padding moves into the HUB band. */ body.study16 #main > #products.s48-products { position: relative; isolation: isolate; overflow-x: clip; /* the 100vw layers never widen the page */ padding-bottom: 0; /* → .s55-hub-banner padding-bottom (§3) */ background: transparent; } body.study16 #main > #products.s48-products::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); /* vapor-studio: the CTA's gold wash (bg-accent-gold/[0.10], LandingPage.tsx:622) over the LP canvas (surface #09090f, tailwind.config.ts:26) → flat #1d1a16. The literal canvas alone is ΔE2000 0.7 from LIVE's black: no band. Flat: the LP's champagne halo was removed in review round 2 (it lit no object, read as a smudge on phones and was the only gradient field below the hero). */ background: linear-gradient(rgba(212, 179, 85, 0.1), rgba(212, 179, 85, 0.1)), #09090f; pointer-events: none; } /* STUDIO inks (vapor-studio LandingPage.tsx). The PRODUCTS section heading keeps the site form (paper + #d8b66a icon). */ #products .s55-studio .s55-kicker { color: rgba(232, 207, 122, 0.7); } /* KickerRow: gold-light /70 (:56) */ #products #s37-studio-title { color: #ffffff; } /* headings text-white (:575) */ #products .s55-studio-description { color: rgba(255, 255, 255, 0.55); } /* leads white/55 (:178) */ #products .s55-studio .s55-studio-link { color: #e8cf7a; } /* CTA label gold-light (:622) */ #products .s55-studio .s55-studio-link:hover { color: #f7ebd0; } /* champagne (globals.css:30) */ /* ================= 3. HUB band: the article is the band ================= */ /* last print → seam 96 (margin, on STUDIO ground); seam → eyebrow 96; last content (ticket / brand column) → band end 96 */ #products .s55-hub-banner.s55-hub-banner { isolation: isolate; /* already position: relative (products-v9) */ margin-top: 96px; padding-top: 96px; padding-bottom: 96px; color: #f8fafc; /* the SVG icon templates inherit it (was paper) */ } /* the old ticket-silhouette pseudo-elements (products-v9, disabled by hub-ticket-v2): every property they set is reset */ #products#products .s55-hub-banner.s55-hub-banner::before, #products#products .s55-hub-banner.s55-hub-banner::after { content: ""; display: block; position: absolute; z-index: -1; inset: auto; top: 0; bottom: 0; left: 50%; width: 100vw; height: auto; box-sizing: border-box; transform: translateX(-50%); border: 0; border-radius: 0; pointer-events: none; } /* vapor-hub: its lightest surface, --surface-hover #1b1e27 (globals.css:46). The raised plane #111318 (HomeLanding.module.css:89 / :291) sat ΔE2000 2.35 from the NEWS black, so the band had no visible lower edge on ordinary panels; #1b1e27 is 6.55 from it (as LIVE|STUDIO 6.66) and 8.98 from STUDIO. */ #products#products .s55-hub-banner.s55-hub-banner::before { background: #1b1e27; } /* vapor-hub: the page's blueprint grid (HomeLanding.module.css:8-18) — 1px white 1.8% every 64px, masked out by 78% of the band exactly as vapor-hub masks it. First row 32 under the seam (never a line on a seam); on desktop the next row is the content top (seam + 96). Columns: from the right gutter ≥1024, so the ticket (768 / 640 wide at 1440·1280 / 1024 = 12 / 10 cells) spans whole cells; from the left gutter below 1024, where the text and the full-width ticket start. */ #products#products .s55-hub-banner.s55-hub-banner::after { background: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); background-size: 64px 64px; background-position: left max(var(--page-pad, 24px), calc((100vw - 1168px) / 2)) top 32px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%); mask-image: linear-gradient(to bottom, #000, transparent 78%); } @media (min-width: 1024px) { #products#products .s55-hub-banner.s55-hub-banner::after { background-position: right max(var(--page-pad, 24px), calc((100vw - 1168px) / 2)) top 32px; } } @media (max-width: 767px) { #products .s55-hub-banner.s55-hub-banner { margin-top: 64px; padding-top: 64px; padding-bottom: 64px; } } /* HUB inks (vapor-hub HomeLanding.module.css) */ #products .s55-hub-banner .eyebrow { color: #a8afbd; } /* eyebrow (:207) */ #products #s37-hub-title { color: #f8fafc; } /* ink (:222) */ #products .s55-hub-banner .desc { color: #aeb6c5; } /* hero lead (:237) */ #products .s55-hub-banner .action { color: #e8cf7a; } /* the one primary action (:263) */ #products .s55-hub-banner .action:hover { color: #f3dfa3; } /* its hover (:275) */ /* The ticket figure in HUB's own line language: every line in HUB's strong hairline (--hairline-strong, globals.css:227) instead of the site's violet signal colours; nodes filled with the plane so they still occlude the line; the four status nodes stay identical (the figure implies no ticket state). Gold stays on the one action; violet stays inside the untouched HUB mark. 1px everywhere (hub-ticket-v2 keeps vector-effect: non-scaling-stroke). */ #products .ticket-art.tk2 .tk-outline, #products .ticket-art.tk2 .tk-rail, #products .ticket-art.tk2 .tk-field, #products .ticket-art.tk2 .tk-status-line, #products .ticket-art.tk2 .tk-obj, #products .ticket-art.tk2 .tk-obj path { stroke: rgba(255, 255, 255, 0.12); } #products .ticket-art.tk2 .tk-rail-nodes circle { fill: rgba(255, 255, 255, 0.12); } #products .ticket-art.tk2 .tk-node { fill: #1b1e27; stroke: rgba(255, 255, 255, 0.12); } /* = the plane */ #products .ticket-art.tk2 .t-word { fill: #f8fafc; } /* ink (:222) */ #products .ticket-art.tk2 .f-label { fill: #e8edf5; } /* secondary ink (:101) */ #products .ticket-art.tk2 .motif { color: #9fa8b8; } /* body muted (:65) */ #products .ticket-art.tk2 .tk-status-t { fill: #94a3b8; } /* mono meta (:251) */ /* ================= 4. HUB → NEWS: back on the black band ================= */ /* band end → NEWS heading box 96 / 64. The 44px ALL NEWS box sets the heading row's baseline and puts the h2 box 6px (phone 9px) under the section top (brand-unify-v1), so the section starts 90 / 55 under the band end. */ #news.edition-news { margin-top: 90px; } @media (max-width: 767px) { #news.edition-news { margin-top: 55px; } }