/* ============================================================================ DJ-CONTROLLERS SUB-HUB — identity overlay ---------------------------------------------------------------------------- DJ controllers sit under the Make Music pillar alongside MIDI controllers. This sub-hub is a canonical 7-chapter first-principles treatment of the DJ craft, routing readers from curiosity through gear selection to tier-card purchase. Palette: fuchsia/pink. Chosen because: - Carries club/creative-energy associations (synthwave, festival lighting, Pioneer XDJ LED glow, LED-ring jog wheels) without copying any single DJ manufacturer's brand territory. - Sits adjacent to the Make-Music pillar's indigo (~60deg shift on the colour wheel) so parent→child visual relationship reads immediately. - Completely unused across the site's existing hub palettes (cyan, zinc, terracotta, walnut, amber, navy, indigo) — zero hue collision. - Warmer than the planned MIDI hub blue, giving the two sub-hubs a visual warm/cool split that mirrors their craft split (DJ = live performance heat, MIDI = studio focus cool). Sibling hub palette relationship: `/make-music/` → indigo-700 (parent pillar) — make-music-hub.css `/dj-controllers/` → fuchsia-700 (this file) — dj-hub.css `/midi-controllers/` → blue-700 (reserved for future build) — midi-hub.css Load order: tokens.css base design tokens treatment-hub.css hub shell chrome (chips, rail, chapter heading) category-hub.css editorial content cards + .pick-tier tier cards (promoted from soundbar-hub.css; see note below) chapter-hub.css shared chapter mechanics (directive-path, reader-state reveal, rhythm utilities) dj-hub.css <- this file — DJ sub-hub identity + bespoke components (channel-fork, standalone-compare, platter-feel matrix) Scope: everything scoped to the `.dj-hub` class on so the fuchsia accent doesn't bleed into sibling hub pages. ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ 1. TOKENS — fuchsia/pink accent swap --------------------------------------------------------------------------- Tailwind fuchsia palette. Hue ~305deg. Far enough from Make Music's indigo (243deg) that parent and child read as related-but-distinct; far enough from every other existing hub (cyan 190, zinc 220, amber 30, walnut 25, navy 220) that there's no collision. Accent scale: --color-accent fuchsia-700 (#A21CAF) — the main brand moment --color-accent-hover fuchsia-800 (#86198F) — hover / focus darker --color-accent-soft fuchsia-100 (#FAE8FF) — soft surface tints --color-accent-subtle fuchsia-200 (#F5D0FE) — card-edge hover borders --color-accent-on-dark pink-300 (#F9A8D4) for the hero where fuchsia-700 would flatten against the near-black backdrop. Pink-300 keeps the family warmth but lifts the luminance enough for italics and step numbers to read crisply on hero dark surfaces. ═══════════════════════════════════════════════════════════════════════════ */ .dj-hub { --color-accent: #A21CAF; /* fuchsia-700 */ --color-accent-hover: #86198F; /* fuchsia-800 */ --color-accent-soft: #FAE8FF; /* fuchsia-100 */ --color-accent-subtle: #F5D0FE; /* fuchsia-200 */ --color-accent-on-dark: #F9A8D4; /* pink-300 */ } /* ── Hero readability fix ─────────────────────────────────────────────── */ .dj-hub .mission__statement em { color: var(--color-accent-on-dark); } .dj-hub .mission--hub .mission__statement { font-size: clamp(2.35rem, 2.8vw, 3rem); line-height: 1.08; max-width: min(100%, 48rem); } .dj-hero-ctas { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .dj-hero-cta { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .dj-hero-cta--primary { min-height: 44px; padding: 0 var(--space-5); border: 1px solid var(--color-accent-on-dark); border-radius: 999px; background: var(--color-accent-on-dark); color: #111827; font-family: var(--font-sans); font-size: var(--fs-sm, 14px); font-weight: var(--fw-semibold); } .dj-hero-cta--secondary { color: color-mix(in srgb, var(--color-accent-on-dark) 72%, white); font-family: var(--font-serif); font-size: var(--fs-sm, 14px); font-style: italic; border-bottom: 1px solid color-mix(in srgb, var(--color-accent-on-dark) 34%, transparent); } .dj-hero-cta__icon { flex: 0 0 auto; } @media (hover: hover) and (pointer: fine) { .dj-hero-cta--primary:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: #111827; transform: translateY(-1px); } .dj-hero-cta--secondary:hover { color: var(--color-accent-on-dark); border-bottom-color: currentColor; } } .dj-hero-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } @media (max-width: 899px) { .dj-hub .mission--hub .mission__statement { font-size: clamp(2rem, 4.2vw, 2.35rem); line-height: 1.1; } } @media (max-width: 640px) { .dj-hub .mission--hub .mission__statement { max-width: 100%; font-size: clamp(1.8rem, 6.4vw, 2.15rem); line-height: 1.12; } } .dj-hub .chapter-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-3); row-gap: var(--space-2); } .dj-hub .chapter-heading__num { grid-column: 1; grid-row: 1; margin-bottom: 0; } .dj-hub .chapter-heading__text { display: block; grid-column: 1 / -1; grid-row: 2; min-width: 0; max-width: 100%; font-family: var(--font-serif); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); overflow-wrap: break-word; } .dj-hub .chapter-heading__copy-link { grid-column: 2; grid-row: 1; justify-self: end; } .dj-hub .chapter-heading__text em { font-family: inherit; font-style: normal; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } .dj-hub .dj-anatomy__card-title, .dj-hub .channel-fork__title, .dj-hub .install-block__title { font-family: var(--font-serif); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); } /* ═══════════════════════════════════════════════════════════════════════════ 2. CHANNEL-FORK DIAGRAM — 2ch vs 4ch capability comparison (Ch 3) --------------------------------------------------------------------------- Two side-by-side columns: left = 2-channel, right = 4-channel. Each column lists what that tier unlocks (mix, layer, scratch, loop-tracks) and what it can't do. Criterion-first: capabilities come before products. Commercial framing: neither column is "bad" — they're different tools for different goals. 2-ch teaches mixing, 4-ch teaches layering. The reader picks based on their musical intent, not on "more is better." ═══════════════════════════════════════════════════════════════════════════ */ .channel-fork { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: var(--space-6) 0; } @media (min-width: 560px) { .channel-fork { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } } @media (min-width: 760px) { .channel-fork { gap: var(--space-5); } } .channel-fork__column { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: #FFFFFF; border: 1px solid var(--color-border, #E5E7EB); border-radius: 10px; overflow: hidden; } @media (min-width: 560px) and (max-width: 759px) { .channel-fork__column { gap: var(--space-2); padding: var(--space-4); } } .channel-fork__column::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--channel-tone, var(--color-accent)); } .channel-fork__column--2ch { --channel-tone: #6B7280; } /* zinc-500, neutral for entry */ .channel-fork__column--4ch { --channel-tone: var(--color-accent); } /* fuchsia, premium signal */ .channel-fork__label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--channel-tone); } .channel-fork__title { margin: 0; font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; color: var(--color-ink, #111827); } @media (min-width: 560px) and (max-width: 759px) { .channel-fork__title { font-size: var(--fs-lg); } } .channel-fork__capabilities, .channel-fork__limits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .channel-fork__section-label { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft, #6B7280); } @media (min-width: 560px) and (max-width: 759px) { .channel-fork__section-label { margin-top: var(--space-1); } } .channel-fork__capabilities li, .channel-fork__limits li { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-ink, #111827); padding-left: 20px; position: relative; } @media (min-width: 560px) and (max-width: 759px) { .channel-fork__capabilities li, .channel-fork__limits li { padding-left: 16px; font-size: 13px; line-height: 1.45; } } .channel-fork__capabilities li::before { content: "✓"; position: absolute; left: 0; color: var(--channel-tone); font-weight: 700; } .channel-fork__limits li::before { content: "×"; position: absolute; left: 0; color: var(--color-ink-muted, #9CA3AF); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ 3. STANDALONE COMPARISON — laptop-tethered vs laptop-free (Ch 5) --------------------------------------------------------------------------- Two-row table comparing what changes when you go laptop-free. Not a "which is better" — a "which is right for your gig context." Each row: dimension, laptop value, standalone value. Dimensions include reliability, portability, streaming integration, price, upgrade path. ═══════════════════════════════════════════════════════════════════════════ */ .standalone-compare { width: 100%; margin: var(--space-6) 0; border-collapse: collapse; font-size: var(--fs-sm); } .standalone-compare thead th { text-align: left; padding: var(--space-3); background: var(--color-surface-soft, #F9FAFB); border-bottom: 2px solid var(--color-border, #E5E7EB); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft, #374151); } .standalone-compare thead th:first-child { width: 160px; } .standalone-compare thead th.is-premium { background: var(--color-accent-soft); color: var(--color-accent); } .standalone-compare tbody td { padding: var(--space-3); border-bottom: 1px solid var(--color-border, #E5E7EB); line-height: 1.55; color: var(--color-ink, #111827); vertical-align: top; } .standalone-compare tbody td:first-child { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-soft, #6B7280); } .standalone-compare tbody td.is-premium { background: color-mix(in srgb, var(--color-accent-soft) 50%, transparent); } .standalone-compare tbody tr:last-child td { border-bottom: 0; } /* ═══════════════════════════════════════════════════════════════════════════ 4. PLATTER-FEEL MATRIX — jog wheel hierarchy (Ch 4) --------------------------------------------------------------------------- Four-row comparison: plastic / lightweight metal / weighted metal / motorised. Each row shows what feel each platter class gives, which controllers use it, and what the capability ceiling is (e.g., plastic platters can't do touch-sensitive vinyl-mode scratching). Rendered as a vertical card stack rather than a table so the "feel" column can carry longer descriptive copy without cramping. ═══════════════════════════════════════════════════════════════════════════ */ .platter-matrix { --platter-rail-x: var(--space-5); position: relative; display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--space-6) 0; padding-block: var(--space-2); border-top: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border, #E5E7EB)); border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border, #E5E7EB)); } .platter-matrix::before { content: ""; position: absolute; top: var(--space-6); bottom: var(--space-6); left: calc(var(--platter-rail-x) + 10px); width: 1px; background: linear-gradient( 180deg, color-mix(in srgb, #9CA3AF 52%, transparent), color-mix(in srgb, var(--color-accent) 52%, transparent) ); } .platter-matrix__row { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-2); min-width: 0; padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--platter-rail-x) + var(--space-8)); background: transparent; border: 0; border-radius: 0; } .platter-matrix__row + .platter-matrix__row { border-top: 1px solid color-mix(in srgb, var(--color-border, #E5E7EB) 72%, transparent); } .platter-matrix__row::before { content: ""; position: absolute; top: var(--space-5); left: var(--platter-rail-x); width: 21px; height: 21px; border: 1px solid color-mix(in srgb, var(--platter-tone, var(--color-accent)) 58%, #FFFFFF); border-radius: 50%; background: radial-gradient(circle at 50% 50%, #FFFFFF 0 23%, transparent 24%), conic-gradient( from -45deg, color-mix(in srgb, var(--platter-tone, var(--color-accent)) 72%, #FFFFFF), color-mix(in srgb, var(--platter-tone, var(--color-accent)) 16%, #FFFFFF), color-mix(in srgb, var(--platter-tone, var(--color-accent)) 72%, #FFFFFF) ); box-shadow: 0 0 0 5px var(--color-surface, #FFFFFF); } @media (min-width: 560px) { .platter-matrix__row { grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr); column-gap: var(--space-4); align-items: start; } } @media (min-width: 760px) { .platter-matrix__row { grid-template-columns: minmax(180px, 0.36fr) minmax(0, 1fr); column-gap: var(--space-5); padding-right: var(--space-6); } } .platter-matrix__row--plastic { --platter-tone: #9CA3AF; } /* zinc-400 */ .platter-matrix__row--lightweight { --platter-tone: #6B7280; } /* zinc-500 */ .platter-matrix__row--weighted { --platter-tone: #BE185D; } /* pink-700 */ .platter-matrix__row--motorised { --platter-tone: var(--color-accent); } /* fuchsia-700 */ .platter-matrix__class { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .platter-matrix__class-label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--platter-tone); } .platter-matrix__class-controllers { display: flex; flex-wrap: wrap; gap: 2px 6px; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--color-ink-soft, #6B7280); line-height: 1.4; } .platter-matrix__product-link { color: inherit; font-weight: 700; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 34%, transparent); text-underline-offset: 0.16em; transition: color 160ms ease, text-decoration-color 160ms ease; } .platter-matrix__product-link:hover, .platter-matrix__product-link:focus-visible { color: var(--platter-tone); text-decoration-color: currentColor; } .platter-matrix__feel { max-width: 68ch; margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--color-ink, #111827); } @media (min-width: 560px) and (max-width: 759px) { .platter-matrix { --platter-rail-x: var(--space-4); } .platter-matrix__row { padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--platter-rail-x) + var(--space-6)); } .platter-matrix__row::before { top: var(--space-4); width: 18px; height: 18px; } .platter-matrix__class-label { font-size: 11px; } .platter-matrix__class-controllers, .platter-matrix__feel { font-size: 13px; } } .platter-matrix__feel strong { color: var(--color-ink, #111827); } .platter-matrix__feel em { font-style: italic; color: var(--color-ink-muted, #6B7280); } /* ═══════════════════════════════════════════════════════════════════════════ 4B. DJ-ANATOMY — controller breakdown diagram (Ch 1) --------------------------------------------------------------------------- Left: sticky top-down SVG of a DJ controller (jog wheels, pads, mixer, crossfader). Right: three callout cards explaining each subsystem. Mirrors MIDI hub's signal-flow: diagram teaches, cards explain. Replaces the old 3-card stage-columns + decision-module sidebar for Ch 1. ═══════════════════════════════════════════════════════════════════════════ */ .dj-anatomy { margin: 0; } .dj-anatomy__visual { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; padding: 0 var(--space-6); background: linear-gradient(180deg, rgba(219, 39, 119, 0.035), rgba(219, 39, 119, 0.01)), var(--color-surface, #FFFFFF); border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border, #E5E7EB)); border-radius: 14px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04); } @media (min-width: 560px) { .dj-anatomy__visual { grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1fr); gap: var(--space-4); padding: 0 var(--space-4); } } @media (min-width: 760px) { .dj-anatomy__visual { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); padding: 0 var(--space-8); } } .dj-anatomy__svg { width: 100%; max-width: 220px; height: auto; color: var(--color-accent); justify-self: start; } @media (min-width: 560px) and (max-width: 759px) { .dj-anatomy__svg { max-width: 180px; justify-self: center; } } .dj-anatomy__badge { cursor: pointer; } .dj-anatomy__badge circle, .dj-anatomy__badge line { transition: opacity 200ms ease, stroke-width 200ms ease; } .dj-anatomy__callouts { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-6); } @media (min-width: 560px) and (max-width: 759px) { .dj-anatomy__callouts { gap: var(--space-3); padding-block: var(--space-4); } } .dj-anatomy__card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-5); background: transparent; border: 0; border-left: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent); border-radius: 0; text-decoration: none; color: inherit; transition: background 200ms ease, border-left-color 200ms ease, transform 200ms ease; } @media (min-width: 560px) and (max-width: 759px) { .dj-anatomy__card { gap: var(--space-3); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3); } } @media (hover: hover) and (pointer: fine) { .dj-anatomy__card:hover, .dj-anatomy__visual:has(.dj-anatomy__badge--a:hover) .dj-anatomy__card[data-anatomy-card="a"], .dj-anatomy__visual:has(.dj-anatomy__badge--b:hover) .dj-anatomy__card[data-anatomy-card="b"], .dj-anatomy__visual:has(.dj-anatomy__badge--c:hover) .dj-anatomy__card[data-anatomy-card="c"] { background: rgba(162, 28, 175, 0.04); border-left-color: var(--color-accent); transform: translateX(2px); } .dj-anatomy__badge:hover circle { opacity: 0.92; stroke-width: 2.6; } .dj-anatomy__badge:hover line { opacity: 0.9; stroke-width: 1.2; } .dj-anatomy__card:hover .dj-anatomy__card-num, .dj-anatomy__visual:has(.dj-anatomy__badge--a:hover) .dj-anatomy__card[data-anatomy-card="a"] .dj-anatomy__card-num, .dj-anatomy__visual:has(.dj-anatomy__badge--b:hover) .dj-anatomy__card[data-anatomy-card="b"] .dj-anatomy__card-num, .dj-anatomy__visual:has(.dj-anatomy__badge--c:hover) .dj-anatomy__card[data-anatomy-card="c"] .dj-anatomy__card-num { opacity: 0.9; } } .dj-anatomy__card-num { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 800; line-height: 1; color: var(--color-accent); opacity: 0.35; transition: opacity 200ms ease; } @media (min-width: 560px) and (max-width: 759px) { .dj-anatomy__card-num { font-size: var(--fs-xl); } } .dj-anatomy__card-body { display: flex; flex-direction: column; gap: var(--space-2); } .dj-anatomy__card-title { margin: 0; font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700; color: var(--color-ink, #111827); } .dj-anatomy__card-text { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-ink, #374151); } @media (min-width: 560px) and (max-width: 759px) { .dj-anatomy__card-text { font-size: 13px; line-height: 1.5; } } /* ═══════════════════════════════════════════════════════════════════════════ 4C. SOFTWARE-ROUTER — DJ ecosystem diagram (Ch 2) --------------------------------------------------------------------------- Left: sticky hub-spoke SVG with the four DJ software ecosystems as nodes. Right: stage-entry cards for each software option. Mirrors MIDI hub's daw-router. Replaces old 4-card stage-columns + decision-module sidebar. ═══════════════════════════════════════════════════════════════════════════ */ .software-router { margin: var(--space-6) 0; } .software-router__visual { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; padding: var(--space-5); background: linear-gradient(180deg, rgba(219, 39, 119, 0.04), rgba(219, 39, 119, 0.012)), var(--color-surface, #FFFFFF); border: 1px solid color-mix(in srgb, var(--color-accent) 16%, var(--color-border, #E5E7EB)); border-radius: 14px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035); overflow: hidden; } @media (min-width: 900px) { .software-router__visual { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); gap: var(--space-8); } } .software-router__svg { width: 100%; max-width: 620px; height: auto; } .software-router__entries { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } /* ═══════════════════════════════════════════════════════════════════════════ 5. HERO MEDIA — jog-wheel SVG tint --------------------------------------------------------------------------- The hero SVG uses `currentColor` on its key paths; we override to the on-dark accent so the jog-wheel motif picks up the pink-300 tone against the near-black backdrop. ═══════════════════════════════════════════════════════════════════════════ */ .dj-hub .mission--hub .mission__backdrop { justify-content: center; align-items: center; padding: 0; overflow: hidden; opacity: 1; } .dj-hero-scene { position: absolute; top: 50%; left: 50%; width: min(76vw, 920px); min-width: 640px; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); color: var(--color-accent-on-dark); opacity: 0.22; } .dj-hero-scene__screen { position: absolute; top: 12%; left: 32%; width: 36%; height: 24%; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 10px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 36%), linear-gradient(180deg, rgba(219, 39, 119, 0.12), rgba(15, 23, 42, 0.64)), #15101A; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34); } .dj-hero-scene__screen::before { content: ""; position: absolute; left: 15%; right: 15%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent); box-shadow: 0 -9px 0 rgba(255, 255, 255, 0.10), 0 9px 0 rgba(255, 255, 255, 0.10); } .dj-hero-scene__screen::after { content: ""; position: absolute; left: 46%; bottom: -22%; width: 8%; height: 22%; border-left: 1px solid rgba(255, 255, 255, 0.22); border-right: 1px solid rgba(255, 255, 255, 0.22); } .dj-hero-scene__controller { position: absolute; top: 52%; left: 24%; width: 52%; height: 20%; border: 1px solid rgba(244, 114, 182, 0.48); border-radius: 18px; background: linear-gradient(180deg, rgba(244, 114, 182, 0.18), rgba(244, 114, 182, 0.05)), rgba(15, 23, 42, 0.42); box-shadow: 0 20px 60px rgba(244, 114, 182, 0.12); } .dj-hero-scene__jog { position: absolute; top: 19%; width: 18%; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 12%, transparent 13% 42%, rgba(255, 255, 255, 0.08) 43% 48%, transparent 49%); } .dj-hero-scene__jog--left { left: 8%; } .dj-hero-scene__jog--right { right: 8%; } .dj-hero-scene__mixer { position: absolute; top: 18%; left: 43%; width: 14%; height: 56%; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.2) 47% 53%, transparent 54%), repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 9px); } .dj-hero-scene__pads { position: absolute; bottom: 12%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 12%; } .dj-hero-scene__pads--left { left: 29%; } .dj-hero-scene__pads--right { right: 29%; } .dj-hero-scene__pads i { display: block; aspect-ratio: 1.25; border-radius: 3px; background: rgba(255, 255, 255, 0.18); } .dj-hero-scene__crossfader { position: absolute; left: 36%; bottom: 10%; width: 28%; height: 5px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; } .dj-hero-scene__crossfader::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 999px; background: currentColor; transform: translate(-50%, -50%); opacity: 0.5; } .dj-hero-scene__speaker { position: absolute; top: 35%; width: 9%; aspect-ratio: 0.72; border: 1px solid rgba(244, 114, 182, 0.36); border-radius: 9px; background: linear-gradient(180deg, rgba(244, 114, 182, 0.12), rgba(15, 23, 42, 0.28)), #15101A; } .dj-hero-scene__speaker--left { left: 15%; } .dj-hero-scene__speaker--right { right: 15%; } .dj-hero-scene__speaker::after { content: ""; position: absolute; inset: 30% 24%; border: 1px solid rgba(244, 114, 182, 0.28); border-radius: 50%; } @media (max-width: 700px) { .dj-hub .mission--hub .mission__statement, .dj-hub .mission--hub .mission__body { max-width: calc(100vw - 32px); overflow-wrap: anywhere; } .dj-hub .mission--hub .mission__backdrop { justify-content: center; padding: var(--space-4); } .dj-hero-scene { width: 150vw; min-width: 0; opacity: 0.15; } } @media (max-width: 560px) { .dj-hero-scene { width: 172vw; opacity: 0.12; } } /* ═══════════════════════════════════════════════════════════════════════════ 6. TIER CARDS — conversion-optimised override --------------------------------------------------------------------------- Problem: shared pick-tier from category-hub.css uses a 220px sidebar grid per card, plus 120px|1fr row grids inside each card. That's grid-within- grid ×5 — reads like a spreadsheet, not a conversion page. Fix: single-column flowing cards. Meta is a horizontal strip, product is a callout box with CTA button, tradeoff + runner-up are flowing prose. Scoped to .dj-hub so other hubs still use the original layout. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Override: kill bordered card boxes ──────────────────────────────── Base category-hub.css wraps each tier in a grid card with border, border-radius, background, and an ::before accent stripe. That creates 5 stacked boxes = grid overload. We strip all of it and replace with a left accent bar + transparent background so tiers breathe with the page instead of boxing content. ──────────────────────────────────── */ .dj-hub .pick-tiers { gap: var(--space-10, 40px); } .dj-hub .pick-tier { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 0 var(--space-10, 40px) var(--space-6); background: transparent; border: 0; border-left: 3px solid var(--tier-accent, var(--color-accent)); border-radius: 0; border-bottom: 1px solid var(--color-border, #E5E7EB); } .dj-hub .pick-tier:last-child { border-bottom: 0; padding-bottom: 0; } @media (min-width: 800px) { .dj-hub .pick-tier { grid-template-columns: 1fr; padding: 0 0 var(--space-10, 40px) var(--space-8); } } /* Kill the top accent stripe from category-hub.css */ .dj-hub .pick-tier::before { display: none; } /* Kill hover shadow — no card to shadow */ .dj-hub .pick-tier:hover { border-color: transparent; box-shadow: none; border-left-color: var(--tier-accent, var(--color-accent)); } /* Escalating accent per tier — tinted fuchsia, light → bold signals progression without looking "grayed out / disabled". */ .dj-hub .pick-tier:nth-child(1) { --tier-accent: #F0ABFC; } /* fuchsia-300 — entry */ .dj-hub .pick-tier:nth-child(2) { --tier-accent: #E879F9; } /* fuchsia-400 — learner */ .dj-hub .pick-tier:nth-child(3) { --tier-accent: #D946EF; } /* fuchsia-500 — scratch */ .dj-hub .pick-tier:nth-child(4) { --tier-accent: #C026D3; } /* fuchsia-600 — mobile */ .dj-hub .pick-tier:nth-child(5) { --tier-accent: var(--color-accent); } /* full accent — pro */ /* ── Top strip: horizontal badges ─────────────────────────────────────── */ .pick-tier__strip { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; } .dj-hub .pick-tier__tier { color: var(--tier-accent, var(--color-accent)); } .dj-hub .pick-tier__channels { font-size: var(--fs-lg); } /* ── Reader fit paragraph ─────────────────────────────────────────────── */ .pick-tier__fit { margin: 0; font-family: var(--font-serif, 'Source Serif 4', serif); font-size: var(--fs-sm); line-height: 1.6; color: var(--color-ink, #374151); } /* ── Product callout box — the conversion element ─────────────────────── */ .pick-tier__product { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: linear-gradient( 180deg, color-mix(in srgb, var(--tier-accent, var(--color-accent)) 7%, #FFFFFF), color-mix(in srgb, var(--tier-accent, var(--color-accent)) 3%, #FFFFFF) ); border: 1px solid color-mix(in srgb, var(--tier-accent, var(--color-accent)) 16%, var(--color-border, #E5E7EB)); border-radius: 8px; } .pick-tier__product-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .pick-tier__product-name { font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: 800; color: var(--color-ink, #111827); letter-spacing: -0.01em; } .pick-tier__product-desc { margin: 0; font-family: var(--font-serif, 'Source Serif 4', serif); font-size: var(--fs-sm); line-height: 1.55; color: var(--color-ink, #374151); } .pick-tier__product-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); padding: var(--space-3) var(--space-5); font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700; color: white; background: var(--color-accent); border-radius: 8px; text-decoration: none; width: fit-content; transition: background 180ms ease, transform 180ms ease; } @media (hover: hover) and (pointer: fine) { .pick-tier__product-cta:hover { filter: brightness(1.1); transform: translateX(3px); } } /* ── Tradeoff note ────────────────────────────────────────────────────── */ .pick-tier__tradeoff { margin: 0; font-family: var(--font-serif, 'Source Serif 4', serif); font-size: var(--fs-sm); line-height: 1.55; color: var(--color-ink-muted, #6B7280); } .pick-tier__tradeoff em { font-style: italic; } /* ── Runner-up compact ────────────────────────────────────────────────── */ .pick-tier__alt { display: flex; flex-direction: column; gap: 2px; } .pick-tier__alt-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft, #6B7280); } .pick-tier__alt-text { margin: 0; font-family: var(--font-serif, 'Source Serif 4', serif); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-ink, #374151); } .pick-tier__alt-text strong { font-family: var(--font-sans); font-weight: 600; } /* ── Verified — inline, subtle ────────────────────────────────────────── */ .dj-hub .pick-tier__verified { margin-top: 0; padding-top: 0; border-top: 0; } @media (prefers-reduced-motion: reduce) { .pick-tier__product-cta:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 7. LIBRARY — enhanced article index --------------------------------------------------------------------------- Base category-hub.css library is a flat grid with minimal styling. Override here with stage-colored accents, featured hero cards, article descriptions, and filter dots — matching MIDI hub's richer library pattern. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Left accent border per item (base rule FIRST) ────────────────────── */ .dj-hub .library__item { border-top: 0; border-left: 3px solid var(--color-border, #E5E7EB); padding-left: var(--space-4); border-radius: 0 4px 4px 0; transition: border-color 200ms ease, background 200ms ease; } /* ── Stage color palette (AFTER base, higher specificity wins) ────────── */ .dj-hub .library__item[data-stage="orient"] { --stage-color: #6366F1; border-left-color: #6366F1; } .dj-hub .library__item[data-stage="software"] { --stage-color: #0EA5E9; border-left-color: #0EA5E9; } .dj-hub .library__item[data-stage="shopping"] { --stage-color: #A21CAF; border-left-color: #A21CAF; } .dj-hub .library__item[data-stage="skill"] { --stage-color: #059669; border-left-color: #059669; } .dj-hub .library__item[data-stage="gear"] { --stage-color: #D97706; border-left-color: #D97706; } .dj-hub .library__item:hover { background: rgba(0, 0, 0, 0.015); } /* ── Stage tag inherits stage color ───────────────────────────────────── */ .dj-hub .library__stage-tag { color: var(--stage-color, var(--color-accent)); } /* ── Shopping items get extra visual weight ────────────────────────────── */ .dj-hub .library__item[data-stage="shopping"] { border-left-width: 4px; } /* ── Filter dots ──────────────────────────────────────────────────────── */ .dj-hub .library__filter-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-muted); margin-right: 2px; flex-shrink: 0; } .dj-hub [data-filter="all"] .library__filter-dot { background: var(--color-accent); } .dj-hub [data-filter="orient"] .library__filter-dot { background: #6366F1; } .dj-hub [data-filter="software"] .library__filter-dot { background: #0EA5E9; } .dj-hub [data-filter="shopping"] .library__filter-dot { background: var(--color-accent); } .dj-hub [data-filter="skill"] .library__filter-dot { background: #059669; } .dj-hub [data-filter="gear"] .library__filter-dot { background: #D97706; } /* ── Article description line ─────────────────────────────────────────── */ .dj-hub .library__desc { display: block; grid-column: 1; grid-row: 3; font-family: var(--font-serif, 'Source Serif 4', serif); font-size: var(--fs-xs, 12px); line-height: 1.5; color: var(--color-ink-muted, #6B7280); margin-top: 2px; } /* Adjust link grid for 3-row layout when desc is present */ .dj-hub .library__link { grid-template-rows: auto auto auto; } .dj-hub .dj-myths { --myth-claim-color: #EF4444; display: flex; flex-direction: column; } .dj-hub .myth-row { display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr); column-gap: var(--space-8); align-items: start; padding: var(--space-8) 0 var(--space-6); border-top: 1px solid var(--color-line); } .dj-hub .myth-row:first-child { border-top: 2px solid var(--color-ink); padding-top: var(--space-8); } .dj-hub .myth-row:last-child { border-bottom: 1px solid var(--color-line); } .dj-hub .myth-row__myth { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .dj-hub .myth-row__tag { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; } .dj-hub .myth-row__tag--myth { color: color-mix(in srgb, var(--myth-claim-color) 68%, var(--color-ink-muted)); } .dj-hub .myth-row__tag--reality { color: var(--color-accent); } .dj-hub .myth-row__tag-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; font-size: 11px; line-height: 1; } .dj-hub .myth-row__tag--myth .myth-row__tag-icon { color: currentColor; background: transparent; border: 1px solid color-mix(in srgb, var(--myth-claim-color) 38%, var(--color-line)); } .dj-hub .myth-row__tag--reality .myth-row__tag-icon { background: var(--color-accent); color: var(--color-surface); } .dj-hub .myth-row__claim { font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: color-mix(in srgb, var(--color-ink) 78%, var(--myth-claim-color)); margin: 0; } .dj-hub .myth-row__divider { display: flex; align-items: center; justify-content: center; min-width: 2rem; color: var(--color-ink-subtle); font-family: var(--font-mono); } .dj-hub .myth-row__reality { display: flex; flex-direction: column; gap: var(--space-3); } .dj-hub .myth-row__truth { font-family: var(--font-serif); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--color-ink); margin: 0; } .dj-hub .myth-row__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .dj-hub .myth-row__link { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 10px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-ink); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-decoration: none; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .dj-hub .myth-row__link:hover, .dj-hub .myth-row__link:focus-visible { outline: none; color: var(--color-accent-hover); border-color: var(--color-accent); background: var(--color-accent-soft); } .dj-hub .myth-row__link::after { content: "→"; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1; transition: transform var(--duration-fast) var(--ease-out); } .dj-hub .myth-row__link:hover::after, .dj-hub .myth-row__link:focus-visible::after { transform: translateX(2px); } @media (max-width: 899px) and (min-width: 620px) { .dj-hub .myth-row { column-gap: var(--space-5); padding: var(--space-6) 0; } .dj-hub .myth-row__claim { font-size: var(--fs-lg); } } @media (max-width: 619px) { .dj-hub .myth-row { grid-template-columns: 1fr; row-gap: var(--space-4); padding: var(--space-6) 0; } .dj-hub .myth-row__divider { justify-content: flex-start; width: 24px; height: 24px; transform: rotate(90deg); } .dj-hub .myth-row__claim { font-size: var(--fs-lg); } } .dj-hub #misconceptions .myth-row { padding-top: var(--space-8); } /* ── Fast library routes ──────────────────────────────────────────────── */ .dj-hub .panel-library-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.75rem), 1fr)); gap: clamp(var(--space-4), 2.5vw, var(--space-6)); margin: 0 0 clamp(var(--space-8), 5vw, var(--space-10)); } .dj-hub .panel-library-route { position: relative; display: grid; align-content: start; gap: var(--space-3); min-width: 0; min-height: 11.5rem; padding: clamp(var(--space-5), 2.4vw, var(--space-6)); border: 1px solid var(--color-border, #E5E7EB); border-radius: 18px; background: linear-gradient( 135deg, color-mix(in srgb, var(--color-accent-soft, #FAE8FF) 22%, #FFFFFF 78%) 0%, color-mix(in srgb, var(--color-bg, #FFF7FC) 72%, #FFFFFF 28%) 100% ); box-shadow: 0 14px 36px -30px color-mix(in srgb, var(--color-accent, #A21CAF) 35%, transparent); color: inherit; text-decoration: none; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .dj-hub .panel-library-route__label { width: fit-content; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-accent-soft, #FAE8FF) 52%, #FFFFFF 48%); color: var(--color-accent-hover, #86198F); font-family: var(--font-mono); font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } .dj-hub .panel-library-route strong { color: var(--color-ink, #111827); font-family: var(--font-serif); font-size: clamp(20px, 2vw, 24px); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); } .dj-hub .panel-library-route span:not(.panel-library-route__label) { color: var(--color-ink-muted, #4B5563); font-family: var(--font-serif); font-size: clamp(var(--fs-sm), 1.1vw, var(--fs-base)); line-height: 1.5; } .dj-hub .panel-library-route:hover, .dj-hub .panel-library-route:focus-visible { outline: none; border-color: color-mix(in srgb, var(--color-accent, #A21CAF) 34%, var(--color-border, #E5E7EB) 66%); background: color-mix(in srgb, var(--color-accent-soft, #FAE8FF) 34%, #FFFFFF 66%); box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--color-accent, #A21CAF) 32%, transparent); transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════════════════════════ 8. ADJACENT READS — illustrated destination cards --------------------------------------------------------------------------- Replaces the plain text-only next-topic cards with adj-card components matching the MIDI hub pattern: SVG illustration + body text + hover lift. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hub accent tokens per destination ────────────────────────────────── */ .dj-hub .adj-card[data-hub="midi"] { --hub-accent: #1D4ED8; } /* blue-700 */ .dj-hub .adj-card[data-hub="music"] { --hub-accent: #4F46E5; } /* indigo-600 */ .dj-hub .adj-card[data-hub="acoustic"] { --hub-accent: #0891B2; } /* cyan-600 */ .dj-hub .adj-card[data-hub="bass-traps"] { --hub-accent: #0D9488; } /* teal-600 */ .dj-hub .adj-card[data-hub="panels"] { --hub-accent: #0284C7; } /* sky-600 */ .dj-hub .adj-card[data-hub="foam"] { --hub-accent: #06B6D4; } /* cyan-500 */ /* ── Horizontal scroller layout ─────────────────────────────────────────── Cards flow in a single horizontal row. Users can scroll/swipe to see additional adjacent content beyond the 3 that fit on screen. Scroll-snap makes touch-swipe feel deliberate; the right-edge mask hints that there's more content to scroll to. ────────────────────────────────────────────── */ .dj-hub .adj-reads { display: flex; flex-direction: row; gap: var(--space-5); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-left: var(--space-1); padding: var(--space-2) var(--space-1) var(--space-4); margin: 0 calc(var(--space-1) * -1); scrollbar-width: thin; scrollbar-color: rgba(162, 28, 175, 0.25) transparent; -webkit-overflow-scrolling: touch; /* Fade the right edge as a scroll-affordance cue. */ -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%); } .dj-hub .adj-reads::-webkit-scrollbar { height: 6px; } .dj-hub .adj-reads::-webkit-scrollbar-track { background: transparent; } .dj-hub .adj-reads::-webkit-scrollbar-thumb { background: rgba(162, 28, 175, 0.22); border-radius: 4px; } .dj-hub .adj-reads::-webkit-scrollbar-thumb:hover { background: rgba(162, 28, 175, 0.4); } /* Each card keeps a fixed width so many cards can live in the row. */ .dj-hub .adj-reads .adj-card { flex: 0 0 320px; scroll-snap-align: start; } @media (min-width: 780px) { .dj-hub .adj-reads .adj-card { flex-basis: 340px; } } /* When viewport is narrow, allow tighter cards so two peek on mobile. */ @media (max-width: 520px) { .dj-hub .adj-reads .adj-card { flex-basis: 280px; } } /* ── Card ──────────────────────────────────────────────────────────────── */ .dj-hub .adj-card { display: flex; flex-direction: column; border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease; position: relative; } .dj-hub .adj-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hub-accent, var(--color-accent)); opacity: 0.6; transition: opacity 200ms ease; } @media (hover: hover) and (pointer: fine) { .dj-hub .adj-card:hover { border-color: var(--hub-accent, var(--color-accent)); box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--hub-accent) 20%, transparent); transform: translateY(-3px); } .dj-hub .adj-card:hover::before { opacity: 1; } } /* ── Visual zone (SVG illustration) ───────────────────────────────────── */ .dj-hub .adj-card__visual { display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-5) var(--space-3); background: color-mix(in srgb, var(--hub-accent) 3%, transparent); } .dj-hub .adj-card__svg { display: block; width: 100%; max-width: 160px; height: auto; color: var(--hub-accent, var(--color-accent)); opacity: 0.7; transition: opacity 280ms ease; } .dj-hub .adj-card:hover .adj-card__svg { opacity: 0.85; } /* ── Body text ────────────────────────────────────────────────────────── */ .dj-hub .adj-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; } .dj-hub .adj-card__role { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-accent, var(--color-accent)); line-height: 1.3; } .dj-hub .adj-card__name { font-family: var(--font-sans); font-size: var(--fs-xl, 24px); font-weight: 800; color: var(--color-ink, #111827); line-height: 1.15; letter-spacing: -0.01em; margin: 0; transition: color 200ms ease; } .dj-hub .adj-card:hover .adj-card__name { color: var(--hub-accent, var(--color-accent)); } .dj-hub .adj-card__hook { font-family: var(--font-serif, 'Source Serif 4', serif); font-size: var(--fs-sm, 14px); line-height: 1.6; color: var(--color-ink-muted, #6B7280); margin: 0; flex: 1; } .dj-hub .adj-card__cta { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--hub-accent, var(--color-accent)); margin-top: var(--space-2); transition: letter-spacing 200ms ease; } .dj-hub .adj-card:hover .adj-card__cta { letter-spacing: 0.06em; } /* ── Mobile: reduce visual zone padding ───────────────────────────────── */ @media (max-width: 520px) { .dj-hub .adj-card__visual { padding: var(--space-4) var(--space-4) var(--space-2); } .dj-hub .adj-card__svg { max-width: 120px; } } /* ═══════════════════════════════════════════════════════════════════════════ 9.X SUPPLEMENTARY SECTIONS INSIDE SHELL --------------------------------------------------------------------------- Library, Misconceptions, and Adjacent Reads live INSIDE .treatment-shell so the sticky chapter rail has a containing block that spans all 10 sections (not just the 7 chapters). On desktop the shell is a 2-column grid (rail + content); these supplementary sections must span both columns to avoid being cramped in the content column. ═══════════════════════════════════════════════════════════════════════════ */ /* Restore the horizontal padding these sections lost when their inner .container wrappers were stripped. Matches .container's own padding so the content aligns with the rest of the page. */ .dj-hub .treatment-shell > .page-section { padding-inline: var(--space-4); } .dj-hub .treatment-shell > #library { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); padding-inline: clamp(var(--space-5), 5vw, var(--space-12)); border: 1px solid var(--color-line, var(--color-border, #E5E7EB)); border-radius: var(--radius-xl); } .dj-hub .treatment-shell > #next-topics { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); } @media (min-width: 720px) { .dj-hub .treatment-shell > .page-section { padding-inline: var(--container-pad); } .dj-hub .treatment-shell > #library { padding-inline: clamp(var(--space-8), 5vw, var(--space-14)); } } @media (min-width: 1100px) { .dj-hub .treatment-shell > #library, .dj-hub .treatment-shell > #misconceptions, .dj-hub .treatment-shell > #next-topics { grid-column: 2 / -1; } } /* Chapter-rail progress, visited state, and tablet overrides are now handled entirely by the shared treatment-hub.css. */