/* ============================================================================ MIDI-CONTROLLERS SUB-HUB — identity overlay + bespoke section components ---------------------------------------------------------------------------- MIDI controllers sit under the Make Music pillar alongside DJ controllers. This sub-hub teaches the production craft from first principles: what a MIDI controller actually is (a dumb remote), which software decides which hardware, how many keys you need, what action type matches your craft, and criterion-first tier picks. Palette: blue-700. Chosen because: - Studio-focus cool vs DJ hub's performance-heat fuchsia — mirrors the craft split (producing = deliberate, composed; DJing = live, reactive). - Sits adjacent to Make-Music pillar's indigo (~20deg hue shift) so parent→child visual relationship reads immediately. - Completely unused across the site's existing hub palettes (cyan, zinc, terracotta, walnut, amber, navy, fuchsia) — zero hue collision. Sibling hub palette relationship: `/make-music/` → indigo-700 (parent pillar) — make-music-hub.css `/dj-controllers/` → fuchsia-700 (live performance heat) — dj-hub.css `/midi-controllers/` → blue-700 (this file, studio cool) — 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 chapter-hub.css shared chapter mechanics (directive-path, reader-state reveal, rhythm utilities) midi-hub.css <- this file — MIDI sub-hub identity + bespoke components (signal-flow, form-factor-fork, daw-router, key-scale, action-section) Scope: everything scoped to the `.midi-hub` class on . ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ 1. TOKENS — blue accent swap --------------------------------------------------------------------------- Tailwind blue palette. Hue ~217deg. Cool complement to DJ fuchsia (~305deg). Close enough to parent indigo (243deg) to read as family, far enough to distinguish. Accent scale: --color-accent blue-700 (#1D4ED8) — the main brand moment --color-accent-hover blue-800 (#1E40AF) — hover / focus darker --color-accent-soft blue-100 (#DBEAFE) — soft surface tints --color-accent-subtle blue-200 (#BFDBFE) — card-edge hover borders --color-accent-on-dark blue-300 (#93C5FD) for the hero where blue-700 would flatten against the near-black backdrop. ═══════════════════════════════════════════════════════════════════════════ */ .midi-hub { --color-accent: #1D4ED8; /* blue-700 */ --color-accent-hover: #1E40AF; /* blue-800 */ --color-accent-soft: #DBEAFE; /* blue-100 */ --color-accent-subtle: #BFDBFE; /* blue-200 */ --color-accent-on-dark: #93C5FD; /* blue-300 */ } /* ── Hero readability fix ─────────────────────────────────────────────── */ .midi-hub .mission__statement em { color: var(--color-accent-on-dark); } .midi-hub .mission--hub .mission__statement { font-size: clamp(2.35rem, 2.8vw, 3rem); line-height: 1.08; max-width: min(100%, 48rem); } .midi-hero-ctas { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .midi-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; } .midi-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); } .midi-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); } .midi-hero-cta__icon { flex: 0 0 auto; } @media (hover: hover) and (pointer: fine) { .midi-hero-cta--primary:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: #111827; transform: translateY(-1px); } .midi-hero-cta--secondary:hover { color: var(--color-accent-on-dark); border-bottom-color: currentColor; } } .midi-hero-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } @media (max-width: 899px) { .midi-hub .mission--hub .mission__statement { font-size: clamp(2rem, 4.2vw, 2.35rem); line-height: 1.1; } } @media (max-width: 640px) { .midi-hub .mission--hub .mission__statement { max-width: 100%; font-size: clamp(1.8rem, 6.4vw, 2.15rem); line-height: 1.12; } } .midi-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); } .midi-hub .chapter-heading__num { grid-column: 1; grid-row: 1; margin-bottom: 0; } .midi-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; } .midi-hub .chapter-heading__copy-link { grid-column: 2; grid-row: 1; justify-self: end; } /* Lede paragraph that sits under each chapter heading. The shared .chapter-heading is margin: 0, so without this the lede defaults to
's ~16px top margin, which reads tight against the heading. */ .midi-hub .chapter__lede { margin-top: var(--space-5); } /* ═══════════════════════════════════════════════════════════════════════════ 2. HERO MOTIF — keyboard-to-DAW SVG tint ═══════════════════════════════════════════════════════════════════════════ */ .midi-hub .mission--hub .mission__backdrop { justify-content: center; align-items: center; padding: 0; overflow: hidden; opacity: 1; } .midi-hub .hero-motif { color: var(--color-accent-on-dark); width: min(78vw, 640px); opacity: 0.2; transform: none; } @media (max-width: 700px) { .midi-hub .mission--hub .mission__statement, .midi-hub .mission--hub .mission__body { max-width: calc(100vw - 32px); overflow-wrap: anywhere; } .midi-hub .mission--hub .mission__backdrop { justify-content: center; align-items: center; padding: 0; } .midi-hub .hero-motif { width: min(100%, 360px); max-width: 100%; opacity: 0.17; transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 3. SIGNAL-FLOW DIAGRAM — what a MIDI controller actually is (Section 1) --------------------------------------------------------------------------- Three-stage horizontal diagram: hand → MIDI data → DAW/sound. Sticky SVG on the left, callout cards on the right. Stacks vertically on mobile. ═══════════════════════════════════════════════════════════════════════════ */ .signal-flow { margin: var(--space-8) 0; } .signal-flow__visual { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; padding: var(--space-5); background: linear-gradient(180deg, rgba(29, 78, 216, 0.045), rgba(29, 78, 216, 0.012)), 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); overflow: hidden; } @media (min-width: 720px) { .signal-flow__visual { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: var(--space-8); } } .signal-flow__svg { width: 100%; max-width: 320px; height: auto; } .signal-flow__card, .signal-flow__card-num { animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .signal-flow__card[data-signal-step="b"], .signal-flow__card[data-signal-step="b"] .signal-flow__card-num { animation-delay: 2s; } .signal-flow__card[data-signal-step="c"], .signal-flow__card[data-signal-step="c"] .signal-flow__card-num { animation-delay: 4s; } .signal-flow__callouts { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; } .signal-flow__card { display: flex; gap: var(--space-4); padding: var(--space-4) 0 var(--space-4) var(--space-5); background: transparent; border: 0; border-left: 3px solid var(--color-accent); border-radius: 0; animation-name: signal-flow-stage-card; transition: background 200ms ease, border-left-width 200ms ease, transform 200ms ease; } @media (hover: hover) and (pointer: fine) { .signal-flow__card:hover { background: rgba(29, 78, 216, 0.035); border-left-width: 4px; transform: translateX(2px); } } .signal-flow__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; animation-name: signal-flow-stage-num; } .signal-flow__card-body { display: flex; flex-direction: column; gap: var(--space-2); } .signal-flow__card-title { margin: 0; font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700; color: var(--color-ink, #111827); } .signal-flow__card-text { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-ink, #374151); } @keyframes signal-flow-stage-card { 0%, 24%, 100% { background: transparent; box-shadow: none; } 7%, 17% { background: rgba(29, 78, 216, 0.045); box-shadow: inset 3px 0 0 var(--color-accent); } } @keyframes signal-flow-stage-num { 0%, 24%, 100% { opacity: 0.35; } 7%, 17% { opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { .signal-flow__card, .signal-flow__card-num { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 4. FORM-FACTOR FORK — keys vs pads vs hybrid (Section 2) --------------------------------------------------------------------------- Three cards, each topped by a silhouette SVG. Grid: 3-col on desktop, stacks on mobile. Each card answers "what is this for?" ═══════════════════════════════════════════════════════════════════════════ */ .form-factor-fork { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin: var(--space-8) 0; } @media (min-width: 640px) { .form-factor-fork { grid-template-columns: 1fr 1fr 1fr; } } .form-factor-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-4); background: linear-gradient(180deg, rgba(29, 78, 216, 0.035), rgba(29, 78, 216, 0.01)), var(--color-surface, #FFFFFF); border: 1px solid color-mix(in srgb, var(--color-accent) 15%, var(--color-border, #E5E7EB)); border-radius: 14px; text-align: left; color: inherit; text-decoration: none; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035); transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, color 200ms ease; } @media (min-width: 640px) { .form-factor-card { border-right: 1px solid color-mix(in srgb, var(--color-accent) 15%, var(--color-border, #E5E7EB)); } } .form-factor-card:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 15%, var(--color-border, #E5E7EB)); } @media (hover: hover) and (pointer: fine) { .form-factor-card:hover { background: rgba(29, 78, 216, 0.03); border-color: var(--color-accent-subtle); box-shadow: 0 14px 30px rgba(29, 78, 216, 0.08); transform: translateY(-2px); } .form-factor-card:hover .form-factor-card__svg { transform: scale(1.05); opacity: 1; } .form-factor-card:hover .form-factor-card__title { color: var(--color-accent); } } .form-factor-card__svg { width: 100%; max-width: 200px; height: auto; margin: 0 auto; color: var(--color-accent); opacity: 0.8; transition: transform 220ms ease, opacity 220ms ease; } .form-factor-card__label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .form-factor-card__title { margin: 0; font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 700; color: var(--color-ink, #111827); transition: color 200ms ease; } .form-factor-card__spec { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--color-ink-soft, #6B7280); } .form-factor-card__body { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-ink, #374151); } .form-factor-card__best-for { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); text-align: left; } .form-factor-card__best-for li { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-ink, #374151); padding-left: 20px; position: relative; } .form-factor-card__best-for li::before { content: "→"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ 5. DAW ROUTER — pick your software first (Section 3) --------------------------------------------------------------------------- One integrated match map: DAW, native controller pairing, workflow fit, and why it matters are all readable in the same clickable element. ═══════════════════════════════════════════════════════════════════════════ */ .daw-router { margin: var(--space-8) 0; } .daw-router__map { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(29, 78, 216, 0.045), rgba(29, 78, 216, 0.012)), 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); overflow: hidden; } .daw-match { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-5); color: inherit; text-decoration: none; border-top: 1px solid color-mix(in srgb, var(--color-accent) 14%, var(--color-border, #E5E7EB)); transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .daw-match:first-child { border-top: 0; } .daw-match:hover, .daw-match:focus-visible { background: rgba(29, 78, 216, 0.04); } .daw-match__num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: var(--color-accent); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-bold); border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent); border-radius: 999px; background: rgba(29, 78, 216, 0.06); } .daw-match__body { display: grid; gap: var(--space-3); } .daw-match__topline { display: grid; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent); } .daw-match__daw { color: var(--color-ink); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 800; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); } .daw-match__arrow { color: var(--color-accent); font-family: var(--font-mono); font-weight: var(--fw-bold); } .daw-match__controllers, .daw-match__workflow, .daw-match__why { line-height: var(--lh-normal); } .daw-match__controllers { color: var(--color-ink-muted); font-size: var(--fs-base); font-weight: 500; } .daw-match__controllers strong { color: var(--color-ink); font-weight: 700; } .daw-match__label { color: var(--color-ink-muted); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .daw-match__workflow { margin-top: var(--space-1); padding: var(--space-3) var(--space-4); color: var(--color-ink); font-size: var(--fs-base); font-weight: 600; background: rgba(29, 78, 216, 0.035); border-left: 3px solid color-mix(in srgb, var(--color-accent) 42%, transparent); border-radius: 0 10px 10px 0; } .daw-match__why { max-width: 68ch; color: var(--color-ink-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); } @media (min-width: 720px) { .daw-match { grid-template-columns: 2.75rem minmax(0, 1fr); padding: var(--space-6); } .daw-match__topline { grid-template-columns: minmax(110px, 150px) 1.5rem minmax(0, 1fr); align-items: baseline; } .daw-match__arrow { text-align: center; } } /* ═══════════════════════════════════════════════════════════════════════════ 6. KEY-SCALE DIAGRAM — 25/49/61/88 against full range (Section 4) --------------------------------------------------------------------------- Four horizontal bars stacked vertically, each showing a key-count span against the greyed-out full 88-key range. Visual immediately answers "how many keys do I need?" ═══════════════════════════════════════════════════════════════════════════ */ .key-scale { display: flex; flex-direction: column; gap: var(--space-6); margin: var(--space-8) 0; } .key-scale__visual { display: flex; justify-content: center; padding: var(--space-5); background: linear-gradient(180deg, rgba(29, 78, 216, 0.04), rgba(29, 78, 216, 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; } .key-scale__svg { width: 100%; max-width: 680px; height: auto; } .key-scale__entries { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 769px) { .key-scale__entries { grid-template-columns: 1fr 1fr; } } .key-scale__entry { display: flex; gap: var(--space-4); padding: var(--space-4) 0 var(--space-4) var(--space-5); background: transparent; border: 0; border-left: 3px solid var(--key-scale-tone, var(--color-accent)); border-radius: 0; text-decoration: none; color: inherit; cursor: pointer; transition: background 200ms ease, border-left-width 200ms ease, transform 200ms ease; } @media (hover: hover) and (pointer: fine) { .key-scale__entry:hover { background: rgba(29, 78, 216, 0.03); border-left-width: 4px; transform: translateX(3px); } } .key-scale__entry--25 { --key-scale-tone: #9CA3AF; } /* zinc-400 — entry */ .key-scale__entry--49 { --key-scale-tone: #6B7280; } /* zinc-500 */ .key-scale__entry--61 { --key-scale-tone: #3B82F6; } /* blue-500 */ .key-scale__entry--88 { --key-scale-tone: var(--color-accent); } /* blue-700 */ .key-scale__entry-count { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 800; line-height: 1; color: var(--key-scale-tone); } .key-scale__entry-body { display: flex; flex-direction: column; gap: var(--space-1); } .key-scale__entry-label { margin: 0; font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700; color: var(--color-ink, #111827); } .key-scale__entry-text { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--color-ink, #374151); } .key-scale__entry-footprint { margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-ink-soft, #6B7280); } /* ═══════════════════════════════════════════════════════════════════════════ 7. ACTION-SECTION — key mechanism comparison (Section 5) --------------------------------------------------------------------------- Three-row card stack (like platter-matrix in dj-hub.css). Each row: left = mechanism name + SVG cross-section, right = description text. ═══════════════════════════════════════════════════════════════════════════ */ .action-section { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-8) 0; } .action-card { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4) 0 var(--space-4) var(--space-5); background: transparent; border: 0; border-left: 3px solid var(--action-tone, var(--color-accent)); border-radius: 0; transition: background 200ms ease, border-left-width 200ms ease, transform 200ms ease; } @media (hover: hover) and (pointer: fine) { .action-card:hover { background: rgba(29, 78, 216, 0.03); border-left-width: 4px; transform: translateX(2px); } } @media (min-width: 641px) { .action-card { grid-template-columns: 200px 1fr; gap: var(--space-5); } } .action-card--synth { --action-tone: #60A5FA; } /* blue-400 — lightest */ .action-card--semi { --action-tone: #2563EB; } /* blue-600 */ .action-card--hammer { --action-tone: #3B82F6; } /* blue-500 */ .action-card--pad { --action-tone: var(--color-accent); } /* blue-700 */ .action-card__header { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; } .action-card__svg { width: 100%; max-width: 180px; height: auto; color: var(--action-tone); } .action-card__key, .action-card__spring, .action-card__press-cue, .action-card__weight, .action-card__hammer-mech, .action-card__pad { transform-box: fill-box; transform-origin: center; } .action-card__key { animation: action-key-press 3s ease-in-out infinite; } .action-card__spring { transform-origin: center bottom; animation: action-spring-compress 3s ease-in-out infinite; } .action-card__press-cue { animation: action-press-cue 3s ease-in-out infinite; } .action-card--semi .action-card__weight { animation: action-weight-resist 3s ease-in-out infinite; } .action-card--hammer .action-card__key { animation-name: action-hammer-key-press; } .action-card__hammer-mech { transform-origin: left bottom; animation: action-hammer-swing 3s ease-in-out infinite; } .action-card__pad { opacity: 0.16; transform-origin: center; animation: action-pad-hit 3.6s ease-in-out infinite; } .action-card__pad--2 { animation-delay: 0.3s; } .action-card__pad--5 { animation-delay: 0.6s; } .action-card__pad--4 { animation-delay: 0.9s; } .action-card__pad--7 { animation-delay: 1.2s; } .action-card__pad--1 { animation-delay: 1.5s; } .action-card__pad--6 { animation-delay: 1.8s; } .action-card__pad--3 { animation-delay: 2.1s; } .action-card__pad--8 { animation-delay: 2.4s; } @keyframes action-key-press { 0%, 100% { transform: translateY(0); opacity: 1; } 34% { transform: translateY(6px); opacity: 0.82; } 54% { transform: translateY(1px); opacity: 1; } } @keyframes action-hammer-key-press { 0%, 100% { transform: translateY(0); opacity: 1; } 38% { transform: translateY(3px); opacity: 0.88; } 62% { transform: translateY(1px); opacity: 1; } } @keyframes action-spring-compress { 0%, 100% { transform: scaleY(1); opacity: 0.4; } 34% { transform: scaleY(0.58); opacity: 0.72; } 54% { transform: scaleY(0.9); opacity: 0.46; } } @keyframes action-press-cue { 0%, 100% { transform: translateY(0); opacity: 0.45; } 34% { transform: translateY(7px); opacity: 0.8; } 58% { transform: translateY(2px); opacity: 0.38; } } @keyframes action-weight-resist { 0%, 100% { transform: translateY(0); opacity: 1; } 34% { transform: translateY(3px); opacity: 0.9; } 58% { transform: translateY(1px); opacity: 1; } } @keyframes action-hammer-swing { 0%, 100% { transform: rotate(0deg) translateY(0); opacity: 1; } 38% { transform: rotate(-8deg) translateY(2px); opacity: 0.92; } 62% { transform: rotate(2deg) translateY(0); opacity: 1; } } @keyframes action-pad-hit { 0%, 100% { transform: scale(1); opacity: 0.16; } 12% { transform: scale(0.94); opacity: 0.68; } 24% { transform: scale(1); opacity: 0.22; } } .action-card__label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--action-tone); } .action-card__controllers { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--color-ink-soft, #6B7280); line-height: 1.4; } .action-card__body { display: flex; flex-direction: column; gap: var(--space-2); } .action-card__title { margin: 0; font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700; color: var(--color-ink, #111827); } .action-card__text { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-ink, #374151); } .action-card__picks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid rgba(0, 0, 0, 0.06); } .action-card__picks-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-ink-soft, #6B7280); } .action-card__pick { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; color: var(--action-tone, var(--color-accent)); background: rgba(29, 78, 216, 0.04); border: 1px solid rgba(29, 78, 216, 0.12); border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background 180ms ease, border-color 180ms ease; } @media (hover: hover) and (pointer: fine) { .action-card__pick:hover { background: rgba(29, 78, 216, 0.10); border-color: rgba(29, 78, 216, 0.25); } } .action-card__pick-price { font-family: var(--font-mono); font-size: 10px; font-weight: 700; opacity: 0.7; } .action-card__text strong { color: var(--color-ink, #111827); } .action-card__text em { font-style: italic; color: var(--color-ink-muted, #6B7280); } /* ═══════════════════════════════════════════════════════════════════════════ 7B. CONNECTION SECTION — overview diagram + connection cards ═══════════════════════════════════════════════════════════════════════════ */ /* --- Overview signal-path SVG --- */ .conn-overview { margin: 0 0 var(--space-8); overflow-x: auto; -webkit-overflow-scrolling: touch; } .conn-overview__svg { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; color: #2563EB; } .conn-overview__route, .conn-overview__packet, .conn-overview__node, .conn-overview__key, .conn-overview__driver, .conn-overview__arrow, .conn-overview__latency { transform-box: fill-box; transform-origin: center; } .conn-overview__route { stroke-linecap: round; } .conn-overview__route--usb, .conn-overview__route--daw { stroke-dasharray: 10 8; animation: conn-route-flow 2.8s linear infinite; } .conn-overview__route--bt, .conn-overview__route--ipad { animation: conn-route-flow 4.2s linear infinite; } .conn-overview__route--driver { stroke-dasharray: 6 5; animation: conn-route-flow 2.8s linear infinite; } .conn-overview__packet--usb { animation: conn-packet-usb 2.8s ease-in-out infinite; } .conn-overview__packet--bt { animation: conn-packet-bt 4.2s ease-in-out infinite; } .conn-overview__packet--daw { animation: conn-packet-daw 2.8s ease-in-out infinite; } .conn-overview__packet--ipad { animation: conn-packet-ipad 4.2s ease-in-out infinite; } .conn-overview__node--controller { animation: conn-node-send 2.8s ease-in-out infinite; } .conn-overview__key { animation: conn-key-play 2.8s ease-in-out infinite; } .conn-overview__key--2 { animation-delay: 0.18s; } .conn-overview__key--3 { animation-delay: 0.36s; } .conn-overview__key--4 { animation-delay: 0.54s; } .conn-overview__key--5 { animation-delay: 0.72s; } .conn-overview__node--computer, .conn-overview__driver { animation: conn-node-process 2.8s ease-in-out infinite; } .conn-overview__node--daw, .conn-overview__arrow--daw { animation: conn-node-receive 2.8s ease-in-out infinite; } .conn-overview__node--ipad { animation: conn-ipad-receive 4.2s ease-in-out infinite; } .conn-overview__latency { animation: conn-latency-pulse 2.8s ease-in-out infinite; } @keyframes conn-route-flow { to { stroke-dashoffset: -36; } } @keyframes conn-packet-usb { 0%, 12% { opacity: 0; transform: translateX(0); } 24%, 62% { opacity: 0.85; } 82%, 100% { opacity: 0; transform: translateX(84px); } } @keyframes conn-packet-bt { 0%, 52% { opacity: 0; transform: translateX(0); } 62%, 76% { opacity: 0.75; } 90%, 100% { opacity: 0; transform: translateX(84px); } } @keyframes conn-packet-daw { 0%, 40% { opacity: 0; transform: translateX(0); } 52%, 76% { opacity: 0.8; } 92%, 100% { opacity: 0; transform: translateX(52px); } } @keyframes conn-packet-ipad { 0%, 42% { opacity: 0; transform: translate(0, 0); } 54%, 76% { opacity: 0.72; } 94%, 100% { opacity: 0; transform: translate(16px, 34px); } } @keyframes conn-node-send { 0%, 100% { opacity: 1; } 16% { opacity: 0.72; } } @keyframes conn-key-play { 0%, 100% { transform: translateY(0); opacity: 0.22; } 12% { transform: translateY(4px); opacity: 0.78; } 24% { transform: translateY(0); opacity: 0.26; } } @keyframes conn-node-process { 0%, 28%, 100% { opacity: 1; } 48% { opacity: 0.65; } } @keyframes conn-node-receive { 0%, 54%, 100% { opacity: 1; } 78% { opacity: 0.62; } } @keyframes conn-ipad-receive { 0%, 70%, 100% { opacity: 1; } 88% { opacity: 0.62; } } @keyframes conn-latency-pulse { 0%, 100% { opacity: 0.35; } 46%, 64% { opacity: 0.8; } } /* --- Card stack --- */ .conn-cards { display: flex; flex-direction: column; gap: 0; } /* --- Individual connection card --- */ .conn-card { --conn-tone: var(--color-accent, #1D4ED8); display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--color-line, #E7E2DC); } .conn-card:first-child { border-top: none; padding-top: 0; } .conn-card:last-child { padding-bottom: 0; } /* --- Icon --- */ .conn-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--color-accent-tint, rgba(29, 78, 216, 0.06)); color: var(--color-accent, #1D4ED8); flex-shrink: 0; } .conn-card__icon svg { width: 24px; height: 24px; } /* Tone per connection type */ .conn-card[data-conn="bluetooth"] { --conn-tone: #D97706; } .conn-card[data-conn="ios"] { --conn-tone: #7C3AED; } .conn-card[data-conn="latency"] { --conn-tone: #DC2626; } .conn-card[data-conn="troubleshoot"] { --conn-tone: #0891B2; } .conn-card[data-conn="bluetooth"] .conn-card__icon { background: rgba(245, 158, 11, 0.08); color: #D97706; } .conn-card[data-conn="ios"] .conn-card__icon { background: rgba(139, 92, 246, 0.08); color: #7C3AED; } .conn-card[data-conn="latency"] .conn-card__icon { background: rgba(239, 68, 68, 0.06); color: #DC2626; } .conn-card[data-conn="troubleshoot"] .conn-card__icon { background: rgba(8, 145, 178, 0.08); color: #0891B2; } .conn-card[data-conn="troubleshoot"] .conn-card__badge--diag { background: rgba(8, 145, 178, 0.10); color: #0E7490; } .conn-card[data-conn="troubleshoot"] .conn-card__checklist li::marker { color: #0891B2; } /* --- Body --- */ .conn-card__body { min-width: 0; } .conn-card__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); } .conn-card__title { font-family: var(--font-sans, Inter, sans-serif); font-size: var(--fs-base, 16px); font-weight: 700; color: var(--color-ink, #111827); margin: 0; line-height: 1.3; } /* --- Badges --- */ .conn-card__badge { display: inline-block; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; white-space: nowrap; line-height: 1.4; } .conn-card__badge--go { background: rgba(34, 197, 94, 0.12); color: #15803D; } .conn-card__badge--caution { background: rgba(245, 158, 11, 0.12); color: #B45309; } .conn-card__badge--info { background: rgba(139, 92, 246, 0.10); color: #6D28D9; } .conn-card__badge--diag { background: rgba(239, 68, 68, 0.08); color: #B91C1C; } /* --- Text --- */ .conn-card__text { font-family: var(--font-serif, 'Source Serif 4', serif); font-size: var(--fs-sm, 14px); line-height: 1.65; color: var(--color-ink, #374151); margin: 0 0 var(--space-3); } /* --- Meta stats row --- */ .conn-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); } .conn-card__stat { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; color: var(--color-ink-muted, #6B7280); line-height: 1.3; } .conn-card__stat strong { display: block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink, #374151); opacity: 0.6; margin-bottom: 2px; } .conn-card__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); } .conn-card__link { display: inline-flex; align-items: center; gap: 0.35em; color: var(--conn-tone, var(--color-accent)); font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-decoration: none; text-transform: uppercase; } .conn-card__link:hover, .conn-card__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* --- Checklist (troubleshoot card) --- */ .conn-card__checklist { margin: var(--space-2) 0 0 0; padding: 0 0 0 var(--space-5); font-family: var(--font-serif, 'Source Serif 4', serif); font-size: var(--fs-sm, 14px); line-height: 1.65; color: var(--color-ink, #374151); } .conn-card__checklist li { padding: 2px 0; } .conn-card__checklist li::marker { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; color: var(--color-accent, #1D4ED8); font-weight: 700; } /* --- Mobile: stack icon above --- */ @media (max-width: 520px) { .conn-card { grid-template-columns: 1fr; gap: var(--space-2); } .conn-card__icon { width: 40px; height: 40px; border-radius: 10px; } .conn-card__icon svg { width: 20px; height: 20px; } .conn-overview__svg { min-width: 480px; } } /* ═══════════════════════════════════════════════════════════════════════════ 7C. LIBRARY REDESIGN (MIDI-scoped) ═══════════════════════════════════════════════════════════════════════════ */ /* --- Stage color palette --- */ .midi-hub .library__item[data-stage="orient"] { --stage-color: #6366F1; } .midi-hub .library__item[data-stage="software"] { --stage-color: #8B5CF6; } .midi-hub .library__item[data-stage="shopping"] { --stage-color: #059669; } .midi-hub .library__item[data-stage="skill"] { --stage-color: #D97706; } .midi-hub .library__item[data-stage="connect"] { --stage-color: #0891B2; } /* --- Left accent border per item --- */ .midi-hub .library__item { border-left: 3px solid var(--stage-color, var(--color-line)); padding-left: var(--space-4); transition: border-color 200ms ease, background 200ms ease; } .midi-hub .library__item:hover { background: rgba(0, 0, 0, 0.015); } /* --- Stage tag inherits stage color --- */ .midi-hub .library__stage-tag { color: var(--stage-color, var(--color-accent)); } /* --- Filter dots --- */ .midi-hub .library__filter-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-muted, #9CA3AF); margin-right: 4px; flex-shrink: 0; } .midi-hub [data-filter="orient"] .library__filter-dot { background: #6366F1; } .midi-hub [data-filter="software"] .library__filter-dot { background: #8B5CF6; } .midi-hub [data-filter="shopping"] .library__filter-dot { background: #059669; } .midi-hub [data-filter="skill"] .library__filter-dot { background: #D97706; } .midi-hub [data-filter="connect"] .library__filter-dot { background: #0891B2; } .midi-hub [data-filter="all"] .library__filter-dot { background: var(--color-accent, #1D4ED8); } /* --- Article description line --- */ .midi-hub .library__desc { display: block; grid-column: 1; grid-row: 3; font-family: var(--font-serif, 'Source Serif 4', serif); font-size: 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 */ .midi-hub .library__link { grid-template-rows: auto auto auto; } /* --- Featured hero cards --- */ .midi-hub .library__featured { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-8); } @media (min-width: 640px) { .midi-hub .library__featured { grid-template-columns: repeat(3, 1fr); } } .midi-hub .library__hero { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--color-line, #E7E2DC); border-radius: 10px; background: var(--color-surface, #FFFFFF); text-decoration: none; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; position: relative; overflow: hidden; } .midi-hub .library__hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-accent, #1D4ED8); opacity: 0.6; } @media (hover: hover) and (pointer: fine) { .midi-hub .library__hero:hover { border-color: var(--color-accent); box-shadow: 0 8px 24px -8px rgba(29, 78, 216, 0.18); transform: translateY(-2px); } } .midi-hub .library__hero-eyebrow { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent, #1D4ED8); } .midi-hub .library__hero-title { font-family: var(--font-sans, Inter, sans-serif); font-size: var(--fs-lg, 18px); font-weight: 800; color: var(--color-ink, #111827); line-height: 1.25; } .midi-hub .library__hero-desc { font-family: var(--font-serif, 'Source Serif 4', serif); font-size: var(--fs-sm, 14px); line-height: 1.55; color: var(--color-ink-muted, #6B7280); flex: 1; } .midi-hub .library__hero-cta { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600; color: var(--color-accent, #1D4ED8); letter-spacing: 0.02em; margin-top: var(--space-1); } /* Shopping items get a subtle green tint to signal "this leads to buying" */ .midi-hub .library__item[data-stage="shopping"] { border-left-width: 3px; } /* ═══════════════════════════════════════════════════════════════════════════ 7D. ADJACENT READS REDESIGN (MIDI-scoped) ═══════════════════════════════════════════════════════════════════════════ */ /* --- Hub accent tokens per destination --- */ .midi-hub .adj-card[data-hub="dj"] { --hub-accent: #C026D3; } /* fuchsia-600 */ .midi-hub .adj-card[data-hub="music"] { --hub-accent: #4F46E5; } /* indigo-600 */ .midi-hub .adj-card[data-hub="acoustic"] { --hub-accent: #0891B2; } /* cyan-600 */ .midi-hub .adj-card[data-hub="bass-traps"] { --hub-accent: #0D9488; } /* teal-600 */ .midi-hub .adj-card[data-hub="panels"] { --hub-accent: #0284C7; } /* sky-600 */ .midi-hub .adj-card[data-hub="foam"] { --hub-accent: #06B6D4; } /* cyan-500 */ /* --- Horizontal scroller layout --- */ .midi-hub .adj-reads { display: flex; flex-direction: row; gap: var(--space-5); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-3); scrollbar-width: thin; scrollbar-color: rgba(29, 78, 216, 0.22) transparent; /* Right-edge fade mask to hint at more content */ -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%); } .midi-hub .adj-reads::-webkit-scrollbar { height: 6px; } .midi-hub .adj-reads::-webkit-scrollbar-track { background: transparent; } .midi-hub .adj-reads::-webkit-scrollbar-thumb { background: rgba(29, 78, 216, 0.22); border-radius: 4px; } .midi-hub .adj-reads::-webkit-scrollbar-thumb:hover { background: rgba(29, 78, 216, 0.4); } /* Each card keeps a fixed width so many cards can live in the row. */ .midi-hub .adj-reads .adj-card { flex: 0 0 320px; scroll-snap-align: start; } @media (min-width: 780px) { .midi-hub .adj-reads .adj-card { flex-basis: 340px; } } /* When viewport is narrow, allow tighter cards so two peek on mobile. */ @media (max-width: 520px) { .midi-hub .adj-reads .adj-card { flex-basis: 280px; } } /* --- Card --- */ .midi-hub .adj-card { display: flex; flex-direction: column; border: 1px solid var(--color-line, #E7E2DC); border-radius: 12px; background: var(--color-surface, #FFFFFF); text-decoration: none; overflow: hidden; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; position: relative; } .midi-hub .adj-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hub-accent, var(--color-accent)); opacity: 0.5; transition: opacity 200ms ease; } @media (hover: hover) and (pointer: fine) { .midi-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); } .midi-hub .adj-card:hover::before { opacity: 1; } } /* --- Visual zone (SVG illustration) --- */ .midi-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); } .midi-hub .adj-card__svg { display: block; width: 100%; max-width: 160px; height: auto; color: var(--hub-accent, var(--color-accent)); opacity: 0.65; transition: opacity 280ms ease; } .midi-hub .adj-card:hover .adj-card__svg { opacity: 0.85; } /* --- Body text --- */ .midi-hub .adj-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); flex: 1; } .midi-hub .adj-card__role { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hub-accent, var(--color-accent)); line-height: 1.3; } .midi-hub .adj-card__name { font-family: var(--font-sans, Inter, sans-serif); 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; } .midi-hub .adj-card:hover .adj-card__name { color: var(--hub-accent, var(--color-accent)); } .midi-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; } .midi-hub .adj-card__cta { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 700; color: var(--hub-accent, var(--color-accent)); letter-spacing: 0.02em; margin-top: var(--space-2); transition: letter-spacing 200ms ease; } .midi-hub .adj-card:hover .adj-card__cta { letter-spacing: 0.06em; } /* --- Mobile: reduce visual zone padding --- */ @media (max-width: 520px) { .midi-hub .adj-card__visual { padding: var(--space-4) var(--space-4) var(--space-2); } .midi-hub .adj-card__svg { max-width: 120px; } } /* ═══════════════════════════════════════════════════════════════════════════ 8. TIER-CARD HOVER TINT — blue shadow ═══════════════════════════════════════════════════════════════════════════ */ @media (hover: hover) and (pointer: fine) { .midi-hub .pick-tier:hover { box-shadow: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 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. */ .midi-hub .treatment-shell > .page-section { padding-inline: var(--space-4); } .midi-hub .treatment-shell > #next-topics { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); } .midi-hub .treatment-shell > #library { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); } @media (min-width: 720px) { .midi-hub .treatment-shell > .page-section { padding-inline: var(--container-pad); } } @media (min-width: 1100px) { .midi-hub .treatment-shell > #library, .midi-hub .treatment-shell > #misconceptions, .midi-hub .treatment-shell > #next-topics { grid-column: 2 / -1; } } /* prefers-reduced-motion: suppress transform, keep reorder + highlight */ @media (prefers-reduced-motion: reduce) { .midi-hub .form-factor-card[data-priority-for], .midi-hub .daw-router__map .daw-match[data-priority-for], .midi-hub .pick-tier[data-priority-for], .signal-flow__card, .form-factor-card, .form-factor-card__svg, .key-scale__entry, .action-card, .action-card__key, .action-card__spring, .action-card__press-cue, .action-card__weight, .action-card__hammer-mech, .action-card__pad, .conn-overview__route, .conn-overview__packet, .conn-overview__node, .conn-overview__key, .conn-overview__driver, .conn-overview__arrow, .conn-overview__latency, .pick-tier__knob, .pick-tier__pad, .pick-tier__mini-key, .pick-tier__svg--learner circle, .pick-tier__svg--learner rect, .pick-tier__svg--producer circle, .pick-tier__svg--producer rect, .pick-tier__svg--pianist circle, .pick-tier__svg--pianist rect, .pick-tier__svg--studio circle, .pick-tier__svg--studio rect { transition: none; animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 11. TIER-JUMP PILLS Compact horizontal row of anchor pills that replaces the heavier 5-row comparison table without duplicating info that's already in the 5 cards. ═══════════════════════════════════════════════════════════════════════════ */ .midi-hub .tier-jump { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } .midi-hub .tier-jump__label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--color-ink-soft, #6B7280); margin-right: var(--space-1); } .midi-hub .tier-jump__pill { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--color-ink, #111827); text-decoration: none; padding: 6px 12px; border: 1px solid var(--color-border, #E5E7EB); border-radius: 999px; background: #FFFFFF; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } @media (hover: hover) and (pointer: fine) { .midi-hub .tier-jump__pill:hover { background: rgba(29, 78, 216, 0.06); border-color: rgba(29, 78, 216, 0.35); color: var(--color-accent); } } /* Chapter-rail progress, visited state, and tablet overrides are now handled entirely by the shared treatment-hub.css. */ /* ═══════════════════════════════════════════════════════════════════════════ 13. PICK-TIER REDESIGN (MIDI-scoped) Shared category-hub.css renders tier cards as a 2-column grid with a left "meta" stack + a right body with 4 dashed-border label/value rows. That spec-sheet feel was too boxy for the MIDI hub. This section flattens the card to a single editorial column: small top strip with tier label + quick specs, big criterion headline, prominent clickable pick card, short lede, tinted tradeoff callout, one-line alternatives, tiny verified foot. Overrides only apply inside .midi-hub so DJ hub keeps the shared layout. ═══════════════════════════════════════════════════════════════════════════ */ .midi-hub .pick-tier { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) 0 var(--space-6) 0; border: 0; border-top: 1px solid var(--color-border, #E5E7EB); border-radius: 0; background: transparent; box-shadow: none; } .midi-hub .pick-tier:first-child { border-top: 0; padding-top: 0; } .midi-hub .pick-tier::before { display: none; } @media (min-width: 800px) { .midi-hub .pick-tier { gap: var(--space-5); padding: var(--space-10) 0 var(--space-8) 0; } } /* Top strip: tier label (left) + quick specs (right, mono) */ .midi-hub .pick-tier__top { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; } .midi-hub .pick-tier__label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); } .midi-hub .pick-tier__quickspecs { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-ink-soft, #6B7280); letter-spacing: 0.02em; } /* Criterion — the teaching headline. MIDI-scoped size so it doesn't compete with the pick card below. */ .midi-hub .pick-tier__criterion { font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: -0.01em; color: var(--color-ink, #111827); margin: 0; } .midi-hub .pick-tier__criterion em { color: var(--color-accent); font-style: italic; font-weight: var(--fw-semibold); } /* Pick card — the prominent clickable product surface. 4 columns: eyebrow pill (left), product name (flex middle, truncates if narrow), price (right), arrow (far right). Price + arrow cluster together so the CTA reads as one visual unit instead of the arrow floating alone. */ .midi-hub .pick-tier__pick-card { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px; border: 1px solid rgba(29, 78, 216, 0.15); border-radius: 999px; background: rgba(29, 78, 216, 0.04); text-decoration: none; width: fit-content; transition: background 180ms ease, border-color 180ms ease; } /* Product silhouette SVG */ .midi-hub .pick-tier__svg { display: block; width: 100%; max-width: 420px; height: auto; margin: var(--space-4) 0 var(--space-3); color: var(--color-accent, #1D4ED8); opacity: 0.55; transition: opacity 280ms ease; } .midi-hub .pick-tier:hover .pick-tier__svg { opacity: 0.75; } .midi-hub .pick-tier__svg--starter .pick-tier__knob, .midi-hub .pick-tier__svg--starter .pick-tier__pad, .midi-hub .pick-tier__svg--starter .pick-tier__mini-key { transform-box: fill-box; transform-origin: center; } .midi-hub .pick-tier__svg--starter .pick-tier__knob { animation: pick-tier-knob-turn 5.2s ease-in-out infinite; } .midi-hub .pick-tier__svg--starter .pick-tier__knob--2, .midi-hub .pick-tier__svg--starter .pick-tier__knob--6 { animation-delay: 0.35s; } .midi-hub .pick-tier__svg--starter .pick-tier__knob--4, .midi-hub .pick-tier__svg--starter .pick-tier__knob--8 { animation-delay: 0.7s; } .midi-hub .pick-tier__svg--starter .pick-tier__pad { animation: pick-tier-pad-hit 3.4s ease-in-out infinite; } .midi-hub .pick-tier__svg--starter .pick-tier__pad--2 { animation-delay: 0.25s; } .midi-hub .pick-tier__svg--starter .pick-tier__pad--5 { animation-delay: 0.5s; } .midi-hub .pick-tier__svg--starter .pick-tier__pad--4 { animation-delay: 0.75s; } .midi-hub .pick-tier__svg--starter .pick-tier__pad--7 { animation-delay: 1s; } .midi-hub .pick-tier__svg--starter .pick-tier__pad--1 { animation-delay: 1.25s; } .midi-hub .pick-tier__svg--starter .pick-tier__pad--6 { animation-delay: 1.5s; } .midi-hub .pick-tier__svg--starter .pick-tier__pad--3 { animation-delay: 1.75s; } .midi-hub .pick-tier__svg--starter .pick-tier__pad--8 { animation-delay: 2s; } .midi-hub .pick-tier__svg--starter .pick-tier__mini-key { animation: pick-tier-mini-key-press 2.8s ease-in-out infinite; } .midi-hub .pick-tier__svg--starter .pick-tier__mini-key--2 { animation-delay: 0.18s; } .midi-hub .pick-tier__svg--starter .pick-tier__mini-key--5 { animation-delay: 0.36s; } .midi-hub .pick-tier__svg--starter .pick-tier__mini-key--3 { animation-delay: 0.54s; } .midi-hub .pick-tier__svg--starter .pick-tier__mini-key--7 { animation-delay: 0.72s; } .midi-hub .pick-tier__svg--learner circle, .midi-hub .pick-tier__svg--learner rect, .midi-hub .pick-tier__svg--producer circle, .midi-hub .pick-tier__svg--producer rect, .midi-hub .pick-tier__svg--pianist circle, .midi-hub .pick-tier__svg--pianist rect, .midi-hub .pick-tier__svg--studio circle, .midi-hub .pick-tier__svg--studio rect { transform-box: fill-box; transform-origin: center; } .midi-hub .pick-tier__svg--learner circle, .midi-hub .pick-tier__svg--producer circle, .midi-hub .pick-tier__svg--pianist circle, .midi-hub .pick-tier__svg--studio circle { animation: pick-tier-knob-turn 5.2s ease-in-out infinite; } .midi-hub .pick-tier__svg--learner rect:nth-of-type(n+2):nth-of-type(-n+17), .midi-hub .pick-tier__svg--producer rect:nth-of-type(n+20):nth-of-type(-n+35), .midi-hub .pick-tier__svg--studio rect:nth-of-type(n+3):nth-of-type(-n+34) { animation: pick-tier-pad-hit 3.6s ease-in-out infinite; } .midi-hub .pick-tier__svg--learner rect:nth-of-type(3), .midi-hub .pick-tier__svg--learner rect:nth-of-type(9), .midi-hub .pick-tier__svg--producer rect:nth-of-type(21), .midi-hub .pick-tier__svg--producer rect:nth-of-type(29), .midi-hub .pick-tier__svg--studio rect:nth-of-type(4), .midi-hub .pick-tier__svg--studio rect:nth-of-type(13), .midi-hub .pick-tier__svg--studio rect:nth-of-type(22), .midi-hub .pick-tier__svg--studio rect:nth-of-type(31) { animation-delay: 0.28s; } .midi-hub .pick-tier__svg--learner rect:nth-of-type(6), .midi-hub .pick-tier__svg--learner rect:nth-of-type(12), .midi-hub .pick-tier__svg--producer rect:nth-of-type(24), .midi-hub .pick-tier__svg--producer rect:nth-of-type(32), .midi-hub .pick-tier__svg--studio rect:nth-of-type(8), .midi-hub .pick-tier__svg--studio rect:nth-of-type(17), .midi-hub .pick-tier__svg--studio rect:nth-of-type(26), .midi-hub .pick-tier__svg--studio rect:nth-of-type(34) { animation-delay: 0.56s; } .midi-hub .pick-tier__svg--learner rect:nth-of-type(22), .midi-hub .pick-tier__svg--learner rect:nth-of-type(25), .midi-hub .pick-tier__svg--learner rect:nth-of-type(31), .midi-hub .pick-tier__svg--producer rect:nth-of-type(40), .midi-hub .pick-tier__svg--producer rect:nth-of-type(44), .midi-hub .pick-tier__svg--producer rect:nth-of-type(50), .midi-hub .pick-tier__svg--pianist rect:nth-of-type(4), .midi-hub .pick-tier__svg--pianist rect:nth-of-type(9), .midi-hub .pick-tier__svg--pianist rect:nth-of-type(15), .midi-hub .pick-tier__svg--pianist rect:nth-of-type(23), .midi-hub .pick-tier__svg--pianist rect:nth-of-type(31) { animation: pick-tier-key-press 3.1s ease-in-out infinite; } .midi-hub .pick-tier__svg--learner rect:nth-of-type(25), .midi-hub .pick-tier__svg--producer rect:nth-of-type(44), .midi-hub .pick-tier__svg--pianist rect:nth-of-type(9), .midi-hub .pick-tier__svg--pianist rect:nth-of-type(23) { animation-delay: 0.24s; } .midi-hub .pick-tier__svg--learner rect:nth-of-type(31), .midi-hub .pick-tier__svg--producer rect:nth-of-type(50), .midi-hub .pick-tier__svg--pianist rect:nth-of-type(15), .midi-hub .pick-tier__svg--pianist rect:nth-of-type(31) { animation-delay: 0.48s; } .midi-hub .pick-tier__svg--producer rect:nth-of-type(3), .midi-hub .pick-tier__svg--producer rect:nth-of-type(5), .midi-hub .pick-tier__svg--producer rect:nth-of-type(7), .midi-hub .pick-tier__svg--producer rect:nth-of-type(9), .midi-hub .pick-tier__svg--producer rect:nth-of-type(11), .midi-hub .pick-tier__svg--producer rect:nth-of-type(13), .midi-hub .pick-tier__svg--producer rect:nth-of-type(15), .midi-hub .pick-tier__svg--producer rect:nth-of-type(17), .midi-hub .pick-tier__svg--producer rect:nth-of-type(19) { animation: pick-tier-fader-slide 4.8s ease-in-out infinite; } .midi-hub .pick-tier__svg--producer rect:nth-of-type(5), .midi-hub .pick-tier__svg--producer rect:nth-of-type(11), .midi-hub .pick-tier__svg--producer rect:nth-of-type(17) { animation-delay: 0.32s; } .midi-hub .pick-tier__svg--producer rect:nth-of-type(7), .midi-hub .pick-tier__svg--producer rect:nth-of-type(13), .midi-hub .pick-tier__svg--producer rect:nth-of-type(19) { animation-delay: 0.64s; } .midi-hub .pick-tier__svg--producer rect:nth-of-type(36), .midi-hub .pick-tier__svg--pianist rect:nth-of-type(2), .midi-hub .pick-tier__svg--studio rect:nth-of-type(2) { animation: pick-tier-display-glow 4.2s ease-in-out infinite; } .midi-hub .pick-tier__svg--studio rect:nth-of-type(n+35):nth-of-type(-n+42) { animation: pick-tier-transport-blink 4s ease-in-out infinite; } .midi-hub .pick-tier__svg--studio rect:nth-of-type(37), .midi-hub .pick-tier__svg--studio rect:nth-of-type(40) { animation-delay: 0.4s; } .midi-hub .pick-tier__svg--studio rect:nth-of-type(39), .midi-hub .pick-tier__svg--studio rect:nth-of-type(42) { animation-delay: 0.8s; } @keyframes pick-tier-knob-turn { 0%, 100% { transform: rotate(0deg); opacity: 1; } 42% { transform: rotate(12deg); opacity: 0.7; } 68% { transform: rotate(-6deg); opacity: 0.9; } } @keyframes pick-tier-pad-hit { 0%, 100% { transform: scale(1); opacity: 0.12; } 10% { transform: scale(0.94); opacity: 0.7; } 22% { transform: scale(1); opacity: 0.2; } } @keyframes pick-tier-mini-key-press { 0%, 100% { transform: translateY(0); opacity: 0.25; } 18% { transform: translateY(5px); opacity: 0.65; } 34% { transform: translateY(0); opacity: 0.3; } } @keyframes pick-tier-key-press { 0%, 100% { transform: translateY(0); opacity: 0.22; } 18% { transform: translateY(4px); opacity: 0.62; } 36% { transform: translateY(0); opacity: 0.28; } } @keyframes pick-tier-fader-slide { 0%, 100% { transform: translateY(0); opacity: 0.3; } 38% { transform: translateY(-5px); opacity: 0.62; } 72% { transform: translateY(3px); opacity: 0.48; } } @keyframes pick-tier-display-glow { 0%, 100% { opacity: 0.05; } 45%, 68% { opacity: 0.24; } } @keyframes pick-tier-transport-blink { 0%, 100% { opacity: 0.06; } 28%, 42% { opacity: 0.32; } } /* Tier 5 (Push 3) has a taller square aspect — cap its height */ .midi-hub #tier-5 .pick-tier__svg { max-width: 240px; } .midi-hub .pick-tier__pick-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); background: transparent; padding: 0; white-space: nowrap; } .midi-hub .pick-tier__pick-name { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink, #111827); white-space: nowrap; } .midi-hub .pick-tier__pick-price { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent); white-space: nowrap; opacity: 0.8; } .midi-hub .pick-tier__pick-arrow { color: var(--color-accent); opacity: 0.6; font-size: var(--fs-sm); transition: transform 180ms ease, opacity 180ms ease; } @media (hover: hover) and (pointer: fine) { .midi-hub .pick-tier__pick-card:hover { background: rgba(29, 78, 216, 0.10); border-color: rgba(29, 78, 216, 0.30); } .midi-hub .pick-tier__pick-card:hover .pick-tier__pick-arrow { transform: translateX(3px); opacity: 1; } } /* Lede — single descriptive paragraph (replaces Reader fit + Our pick description rows). */ .midi-hub .pick-tier__lede { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-ink, #374151); } /* Tradeoff — inline italic text (no box). */ .midi-hub .pick-tier__tradeoff { margin: 0; padding: 0; background: transparent; border-left: 0; border-radius: 0; font-size: var(--fs-sm); font-style: italic; line-height: 1.55; color: var(--color-ink-soft, #4B5563); } .midi-hub .pick-tier__tradeoff strong { color: var(--color-ink, #111827); font-weight: 700; } /* Alt — one-line runner-ups (replaces the Runner-up row). */ .midi-hub .pick-tier__alt { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--color-ink-soft, #4B5563); } .midi-hub .pick-tier__alt strong { color: var(--color-ink, #111827); font-weight: 700; } .midi-hub .pick-tier__alt a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid rgba(29, 78, 216, 0.3); transition: border-color 180ms ease; } .midi-hub .pick-tier__alt a:hover { border-bottom-color: var(--color-accent); } /* Foot — tiny verified stamp, no top border (card chrome removed). */ .midi-hub .pick-tier__foot { padding-top: 0; border-top: 0; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-subtle, #9CA3AF); letter-spacing: 0.04em; opacity: 0.7; } /* ── Accordion collapse / expand ────────────────────────────────────────── Tier cards default to collapsed (data-open="false"). Only the summary row (top strip + criterion + pick pill) is visible. Click toggles data-open. Tier 1 starts open. The tier-jump pills also open their target tier. ── */ /* Clickable header zone */ .midi-hub .pick-tier__top { cursor: pointer; position: relative; padding-right: var(--space-8); } /* Chevron indicator */ .midi-hub .pick-tier__top::after { content: ''; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--color-accent, #1D4ED8); border-bottom: 2px solid var(--color-accent, #1D4ED8); transform: translateY(-50%) rotate(45deg); transition: transform 250ms ease; opacity: 0.5; } .midi-hub .pick-tier[data-open="true"] .pick-tier__top::after { transform: translateY(-30%) rotate(-135deg); opacity: 0.8; } /* Collapsed: hide detail content */ .midi-hub .pick-tier[data-open="false"] .pick-tier__svg, .midi-hub .pick-tier[data-open="false"] .pick-tier__lede, .midi-hub .pick-tier[data-open="false"] .pick-tier__tradeoff, .midi-hub .pick-tier[data-open="false"] .pick-tier__alt, .midi-hub .pick-tier[data-open="false"] .pick-tier__foot { display: none; } /* Collapsed: tighter padding */ .midi-hub .pick-tier[data-open="false"] { gap: var(--space-2); padding-top: var(--space-5); padding-bottom: var(--space-5); } @media (min-width: 800px) { .midi-hub .pick-tier[data-open="false"] { padding-top: var(--space-6); padding-bottom: var(--space-6); } } /* Collapsed criterion: slightly smaller to read as summary */ .midi-hub .pick-tier[data-open="false"] .pick-tier__criterion { font-size: var(--fs-lg, 18px); } /* Hover hint on collapsed cards */ .midi-hub .pick-tier[data-open="false"]:hover { background: rgba(29, 78, 216, 0.02); } .midi-hub .pick-tier[data-open="false"]:hover .pick-tier__top::after { opacity: 1; } /* Reduced-motion: disable pick-card hover transform. */ @media (prefers-reduced-motion: reduce) { .midi-hub .pick-tier__pick-card, .midi-hub .pick-tier__pick-arrow { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 14. CHAPTER__SHARE BUTTON — HOVER-REVEAL The Share button was rendering as a raw default browser button (grey pill) inside each of the 7 chapter title lines, adding heavy visual weight to every section header. This ghosts the button by default and only reveals it on header hover or keyboard focus — same pattern as the existing .chapter-heading__copy-link in treatment-hub.css. On touch devices where hover doesn't exist, it stays subtly visible (opacity 0.7) so the feature is still discoverable. ═══════════════════════════════════════════════════════════════════════════ */ .midi-hub .chapter__share { display: inline-flex; align-items: center; vertical-align: middle; margin-left: var(--space-2); padding: 4px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--color-ink-soft, #6B7280); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity 180ms ease, color 180ms ease, background 180ms ease; } .midi-hub .chapter__header:hover .chapter__share, .midi-hub .chapter__share:focus-visible { opacity: 1; } .midi-hub .chapter__share:hover { color: var(--color-accent); background: rgba(29, 78, 216, 0.06); } .midi-hub .chapter__share[data-copied="true"] { opacity: 1; color: var(--color-accent); } .midi-hub .chapter__share[data-copied="true"]::after { content: " \2713 copied"; margin-left: var(--space-1); } @media (hover: none) { .midi-hub .chapter__share { opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { .midi-hub .chapter__share { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 15. KEY-SCALE SVG ↔ CARD LINKED HOVER When hovering a bar in the SVG diagram, JS sets data-highlight="true" on the matching entry card (and vice versa). These styles provide the visual feedback — same bg-tint + border treatment as the native hover, plus an opacity boost on the SVG bar group so both ends of the link light up. ═══════════════════════════════════════════════════════════════════════════ */ .key-scale__entry[data-highlight="true"] { background: rgba(29, 78, 216, 0.05); border-left-width: 4px; transform: translateX(3px); } .key-scale__svg g[data-highlight="true"] rect:nth-child(2) { opacity: 0.45; transition: opacity 200ms ease; } .key-scale__svg g[data-keys] rect:nth-child(2) { transition: opacity 200ms ease; } /* ═══════════════════════════════════════════════════════════════════════════ 16. MYTH ROWS (MIDI-scoped) ═══════════════════════════════════════════════════════════════════════════ */ .midi-hub .midi-myths { --myth-claim-color: #EF4444; display: flex; flex-direction: column; } .midi-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); } .midi-hub .myth-row:first-child { border-top: 2px solid var(--color-ink); padding-top: var(--space-8); } .midi-hub .myth-row:last-child { border-bottom: 1px solid var(--color-line); } .midi-hub .myth-row__myth { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .midi-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; } .midi-hub .myth-row__tag--myth { color: color-mix(in srgb, var(--myth-claim-color) 68%, var(--color-ink-muted)); } .midi-hub .myth-row__tag--reality { color: var(--color-accent); } .midi-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; } .midi-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)); } .midi-hub .myth-row__tag--reality .myth-row__tag-icon { background: var(--color-accent); color: var(--color-surface); } .midi-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; } .midi-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); } .midi-hub .myth-row__reality { display: flex; flex-direction: column; gap: var(--space-3); } .midi-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; } .midi-hub .myth-row__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .midi-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); } .midi-hub .myth-row__link:hover, .midi-hub .myth-row__link:focus-visible { outline: none; color: var(--color-accent-hover); border-color: var(--color-accent); background: var(--color-accent-soft); } .midi-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); } .midi-hub .myth-row__link:hover::after, .midi-hub .myth-row__link:focus-visible::after { transform: translateX(2px); } @media (max-width: 899px) and (min-width: 620px) { .midi-hub .myth-row { column-gap: var(--space-5); padding: var(--space-6) 0; } .midi-hub .myth-row__claim { font-size: var(--fs-lg); } } @media (max-width: 619px) { .midi-hub .myth-row { grid-template-columns: 1fr; row-gap: var(--space-4); padding: var(--space-6) 0; } .midi-hub .myth-row__divider { justify-content: flex-start; width: 24px; height: 24px; transform: rotate(90deg); } .midi-hub .myth-row__claim { font-size: var(--fs-lg); } } .midi-hub #misconceptions .myth-row { padding-top: var(--space-8); } /* ═══════════════════════════════════════════════════════════════════════════ 16. CHAPTER-COMMERCIAL-ROW DE-BOXING (MIDI-scoped) Shared treatment-hub.css gives each chapter's article-link row a tinted background pill — 7 chapters = 7 tinted boxes. These overrides strip the tint and border-radius so the rows read as plain inline link lists. ═══════════════════════════════════════════════════════════════════════════ */ .midi-hub .chapter-commercial-row { background: transparent; border-radius: 0; padding-inline: 0; border-top: 1px solid var(--color-border, #E5E7EB); padding-top: var(--space-3); margin-top: var(--space-6); }