/* ============================================================================ MAKE-MUSIC PILLAR HUB — identity overlay ---------------------------------------------------------------------------- Make Music is the craft pillar of the site: the umbrella page that teaches *which kind of music-maker you are* (DJ vs producer) and routes readers to the correct sub-hub (`/dj-controllers/` or `/midi-controllers/`). It is structurally closer to `/acoustic-treatment/` (a routing pillar with teaching chapters) than to `/soundbar/` (a single-destination canonical hub). The pillar hosts only cross-craft content — the entry "starter kit" cards and the 51-article cross-library — while full tier stacks and per-craft chapters live in the sub-hubs. Palette: deep indigo → violet. Chosen because: - Unused across every existing hub (cyan, zinc, terracotta, walnut, amber, navy are all taken). A brand-new identity signals "this is a different kind of pillar" without asking the reader to decode a new palette mid-journey. - Purple has no conflict with Ableton (orange-red), Serato (red), Rekordbox (cyan-blue), or Pioneer DJ (blue) — so no single manufacturer's visual territory is being copied. - Reads as "craft, authorship, originality" in the music/creative vertical (think Prince, synthwave, festival lighting, Roland SP-404). Appropriate for a page whose job is to help readers find their creative lane. Child hub palette relationship: `/dj-controllers/` → fuchsia/pink (electric, club-energy) — dj-hub.css `/midi-controllers/` → blue-cyan (studio, tech, focus) — midi-hub.css The three palettes sit adjacent on the colour wheel (indigo → fuchsia and indigo → blue are each ~30-60° shifts) so "Make Music" reads as the parent and the two sub-hubs as its children visually. Load order: tokens.css base design tokens treatment-hub.css hub shell chrome (chips, rail, chapter heading) category-hub.css editorial content cards (library, misc grid) chapter-hub.css shared chapter mechanics (rhythm utilities) make-music-hub.css <- this file — pillar identity Scope: everything scoped to the `.make-music-hub` class on so the indigo accent doesn't bleed into sibling hub pages. ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ 1. TOKENS — indigo/violet accent swap --------------------------------------------------------------------------- Tailwind indigo palette. Hue ~243deg. Far enough from every existing hub hue (panels cyan 190, foam zinc 220, bass 30, diffuser 25, soundbar 35, navy ~220, cyan ~200) that there's no hue collision within the site. Accent scale: --color-accent indigo-700 (#4338CA) — the main brand moment --color-accent-hover indigo-800 (#3730A3) — hover / focus darker --color-accent-soft indigo-100 (#E0E7FF) — soft surface tints --color-accent-subtle indigo-200 (#C7D2FE) — card-edge hover borders --color-accent-on-dark violet-300 (#C4B5FD) for the hero where indigo-700 would flatten against the near-black backdrop. Violet-300 keeps the purple family but lifts the luminance enough for italics and step numbers to read crisply. ═══════════════════════════════════════════════════════════════════════════ */ .make-music-hub { --color-accent: #4338CA; /* indigo-700 */ --color-accent-hover: #3730A3; /* indigo-800 */ --color-accent-soft: #E0E7FF; /* indigo-100 */ --color-accent-subtle: #C7D2FE; /* indigo-200 */ --color-accent-on-dark: #C4B5FD; /* violet-300 */ } /* ── Hero readability fix ─────────────────────────────────────────────── Base .mission__statement em uses color: var(--color-accent). Indigo-700 on the near-black hero loses contrast; violet-300 lifts that to ~7.5:1. */ .make-music-hub .mission__statement em { color: var(--color-accent-on-dark); } .make-music-hub .mission--hub .mission__statement { font-size: clamp(2.35rem, 2.8vw, 3rem); line-height: 1.08; max-width: min(100%, 48rem); } .make-music-hero-ctas { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .make-music-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; } .make-music-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); } .make-music-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); } .make-music-hero-cta__icon { flex: 0 0 auto; } @media (hover: hover) and (pointer: fine) { .make-music-hero-cta--primary:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: #111827; transform: translateY(-1px); } .make-music-hero-cta--secondary:hover { color: var(--color-accent-on-dark); border-bottom-color: currentColor; } } .make-music-hero-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } @media (max-width: 899px) { .make-music-hub .mission--hub .mission__statement { font-size: clamp(2rem, 4.2vw, 2.35rem); line-height: 1.1; } } @media (max-width: 640px) { .make-music-hub .mission--hub .mission__statement { max-width: 100%; font-size: clamp(1.8rem, 6.4vw, 2.15rem); line-height: 1.12; } } .starter-kit { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: var(--space-6) 0 0; align-items: stretch; } /* Small tablet + desktop: keep the two choices side-by-side so the section reads as a real A/B decision, not two unrelated stacked cards. True phone widths still stack below 560px for tap comfort and readable link chips. */ @media (min-width: 560px) { .starter-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } } @media (min-width: 760px) { .starter-kit { gap: var(--space-5); } } @media (min-width: 1100px) { .starter-kit { gap: var(--space-6); } } .starter-kit__card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-5); background: #FFFFFF; border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; text-decoration: none; color: var(--color-ink, #111827); transition: border-color 160ms ease, background 160ms ease; } @media (min-width: 1100px) { .starter-kit__card { padding: var(--space-6); } } @media (min-width: 560px) and (max-width: 759px) { .starter-kit__card { padding: var(--space-4); } } .starter-kit__card:hover { border-color: var(--starter-kit-tone, var(--color-accent)); background: color-mix(in srgb, var(--starter-kit-tone, var(--color-accent)) 4%, #FFFFFF); } .starter-kit__card--dj { --starter-kit-tone: #A21CAF; --starter-kit-tone-soft: #FAE8FF; } .starter-kit__card--midi { --starter-kit-tone: #1D4ED8; --starter-kit-tone-soft: #DBEAFE; } .starter-kit__shape { display: block; width: 100%; max-width: 240px; height: auto; margin-bottom: var(--space-2); color: var(--starter-kit-tone); } @media (min-width: 560px) and (max-width: 759px) { .starter-kit__shape { max-width: 150px; margin-bottom: 0; } } .starter-kit__shape-device, .starter-kit__shape-control, .starter-kit__shape-line { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .starter-kit__shape-device { stroke-width: 1.4; opacity: 0.82; } .starter-kit__shape-control, .starter-kit__shape-line { stroke-width: 1; opacity: 0.54; } .starter-kit__shape-detail { fill: currentColor; opacity: 0.22; } .starter-kit__craft { display: inline-block; padding: 4px 10px; background: var(--starter-kit-tone-soft); color: var(--starter-kit-tone); border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; width: fit-content; } .starter-kit__criterion { margin: var(--space-2) 0 0; font-family: var(--font-sans); font-size: clamp(22px, 1.8vw + 0.9rem, 30px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--color-ink, #111827); } @media (min-width: 560px) and (max-width: 759px) { .starter-kit__criterion { font-size: clamp(20px, 3.4vw, 24px); } } .starter-kit__rationale { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: var(--fs-sm); line-height: 1.55; color: var(--color-ink-soft, #374151); } @media (min-width: 560px) and (max-width: 759px) { .starter-kit__rationale { margin-bottom: var(--space-2); font-size: 13px; } } .starter-kit__categories { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-2) 0 var(--space-5); padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--starter-kit-tone) 18%, var(--color-border, #E5E7EB)); } @media (min-width: 560px) and (max-width: 759px) { .starter-kit__categories { gap: var(--space-2); margin-bottom: var(--space-4); } } .starter-kit__group-label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--starter-kit-tone); } .starter-kit__list { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 0; padding: 0; list-style: none; } .starter-kit__list li { margin: 0; padding: 0; } .starter-kit__list a { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--starter-kit-tone) 16%, var(--color-border, #E5E7EB)); border-radius: 999px; background: #FFFFFF; color: var(--color-ink, #111827); font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1.1; text-decoration: none; transition: border-color 140ms ease, background 140ms ease, color 140ms ease; } @media (min-width: 560px) and (max-width: 759px) { .starter-kit__list a { padding: 4px 8px; font-size: 12px; } } .starter-kit__list a:hover, .starter-kit__list a:focus-visible { border-color: var(--starter-kit-tone); background: color-mix(in srgb, var(--starter-kit-tone) 8%, #FFFFFF); color: var(--starter-kit-tone); } .starter-kit__cta { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: auto; padding: 9px 14px; background: var(--starter-kit-tone); color: #FFFFFF; border-radius: 999px; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; line-height: 1.1; text-decoration: none; transition: background 160ms ease, transform 160ms ease; } .starter-kit__cta:hover, .starter-kit__cta:focus-visible { background: color-mix(in srgb, var(--starter-kit-tone) 86%, #111827 14%); color: #FFFFFF; transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════════════════════════ 5. HERO MEDIA — perform / compose background scene --------------------------------------------------------------------------- Mirrors the soundbar hero approach: a quiet CSS-built stage sits behind the copy, large enough to feel environmental but faint enough to stay secondary. ═══════════════════════════════════════════════════════════════════════════ */ .make-music-hub .mission--hub .mission__backdrop { justify-content: center; align-items: center; padding: 0; overflow: hidden; opacity: 1; } .make-music-hub .make-music-hero-scene { position: absolute; top: 50%; left: 50%; width: min(78vw, 940px); min-width: 660px; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); opacity: 0.22; } .make-music-hub .make-music-hero-scene__split { position: absolute; top: 14%; left: 50%; width: 1px; height: 68%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), transparent); opacity: 0.7; } .make-music-hub .make-music-hero-scene__deck, .make-music-hub .make-music-hero-scene__studio { position: absolute; } .make-music-hub .make-music-hero-scene__deck { top: 47%; left: 13%; width: 34%; height: 18%; border: 1px solid rgba(244, 114, 182, 0.5); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 32%), linear-gradient(180deg, rgba(219, 39, 119, 0.18), rgba(15, 23, 42, 0.42)), #15111B; box-shadow: 0 22px 70px rgba(219, 39, 119, 0.14); } .make-music-hub .make-music-hero-scene__jog { position: absolute; top: 18%; width: 24%; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 50%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0 16%, transparent 17%), radial-gradient(circle at center, transparent 0 48%, rgba(244, 114, 182, 0.16) 49% 100%); } .make-music-hub .make-music-hero-scene__jog--left { left: 10%; } .make-music-hub .make-music-hero-scene__jog--right { right: 10%; } .make-music-hub .make-music-hero-scene__fader { position: absolute; top: 25%; left: 48%; width: 4%; height: 50%; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.12); } .make-music-hub .make-music-hero-scene__pad { position: absolute; top: 14%; width: 5%; aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, 0.18); } .make-music-hub .make-music-hero-scene__pad--one { left: 5%; } .make-music-hub .make-music-hero-scene__pad--two { left: 12%; } .make-music-hub .make-music-hero-scene__pad--three { right: 12%; } .make-music-hub .make-music-hero-scene__pad--four { right: 5%; } .make-music-hub .make-music-hero-scene__studio { top: 24%; right: 9%; width: 38%; height: 46%; } .make-music-hub .make-music-hero-scene__screen { position: absolute; top: 0; left: 17%; width: 66%; height: 38%; border: 1px solid rgba(196, 181, 253, 0.5); border-radius: 8px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 32%), linear-gradient(180deg, rgba(99, 102, 241, 0.18), rgba(15, 23, 42, 0.48)), #111827; box-shadow: 0 22px 70px rgba(99, 102, 241, 0.14); } .make-music-hub .make-music-hero-scene__screen::after { content: ""; position: absolute; left: 13%; right: 13%; bottom: 22%; height: 34%; background: linear-gradient(135deg, transparent 0 20%, rgba(196, 181, 253, 0.34) 21% 22%, transparent 23% 34%, rgba(196, 181, 253, 0.3) 35% 36%, transparent 37% 100%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 18px); border-bottom: 1px solid rgba(196, 181, 253, 0.28); } .make-music-hub .make-music-hero-scene__keyboard { position: absolute; left: 9%; bottom: 16%; width: 82%; height: 17%; border: 1px solid rgba(196, 181, 253, 0.42); border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 7%, transparent 7% 10%), linear-gradient(180deg, rgba(196, 181, 253, 0.2), rgba(196, 181, 253, 0.04)); } .make-music-hub .make-music-hero-scene__speaker { position: absolute; top: 16%; width: 8%; height: 34%; border: 1px solid rgba(196, 181, 253, 0.44); border-radius: 7px; background: linear-gradient(180deg, rgba(196, 181, 253, 0.14), rgba(15, 23, 42, 0.34)), #121526; } .make-music-hub .make-music-hero-scene__speaker::after { content: ""; position: absolute; inset: 35% 22%; border: 1px solid rgba(196, 181, 253, 0.32); border-radius: 50%; } .make-music-hub .make-music-hero-scene__speaker--left { left: 2%; } .make-music-hub .make-music-hero-scene__speaker--right { right: 2%; } .make-music-hub .make-music-hero-scene__bridge { position: absolute; top: 47%; left: 44%; width: 12%; height: 1px; background: linear-gradient(90deg, rgba(244, 114, 182, 0.38), rgba(196, 181, 253, 0.38)); } @media (max-width: 700px) { .make-music-hub .mission--hub .mission__statement, .make-music-hub .mission--hub .mission__body { max-width: calc(100vw - 32px); overflow-wrap: anywhere; } .make-music-hub .mission--hub .mission__backdrop { justify-content: center; } .make-music-hub .make-music-hero-scene { width: 142vw; min-width: 0; opacity: 0.18; } } @media (max-width: 560px) { .make-music-hub .make-music-hero-scene { width: 172vw; opacity: 0.13; } } /* ═══════════════════════════════════════════════════════════════════════════ 9. SCOPED GRID OVERRIDES — reduce grid density on this pillar --------------------------------------------------------------------------- The myth-grid (from treatment-hub.css) defaults to a multi-column grid. On this pillar it feels grid-heavy alongside the other layouts. Override to single column so myths stack vertically — less visual noise, easier scan. ═══════════════════════════════════════════════════════════════════════════ */ .make-music-hub .foam-myths { --myth-claim-color: #b42318; margin-top: var(--space-10); display: flex; flex-direction: column; gap: 0; } .make-music-hub .myth-row { display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr); column-gap: var(--space-8); align-items: stretch; padding: var(--space-8) 0; border-top: 1px solid var(--color-line); } .make-music-hub .myth-row:first-child { border-top: 2px solid var(--color-ink); } .make-music-hub .myth-row:last-child { border-bottom: 1px solid var(--color-line); } .make-music-hub .myth-row__myth { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .make-music-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.14em; text-transform: uppercase; } .make-music-hub .myth-row__tag--myth { color: color-mix(in srgb, var(--myth-claim-color) 68%, var(--color-ink-muted)); } .make-music-hub .myth-row__tag--reality { color: var(--color-accent); } .make-music-hub .myth-row__tag-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-bold); line-height: 1; } .make-music-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)); } .make-music-hub .myth-row__tag--reality .myth-row__tag-icon { background: var(--color-accent); color: var(--color-surface); } .make-music-hub .myth-row__claim { font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.25; letter-spacing: var(--tracking-snug); color: var(--color-ink); margin: 0; text-decoration-line: line-through; text-decoration-color: color-mix(in srgb, var(--myth-claim-color) 30%, var(--color-line-strong)); text-decoration-thickness: 1px; } .make-music-hub .myth-row__divider { display: flex; align-items: center; justify-content: center; color: var(--color-ink-subtle); font-family: var(--font-mono); font-size: var(--fs-xl); } .make-music-hub .myth-row__reality { display: flex; flex-direction: column; gap: var(--space-3); } .make-music-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; } .make-music-hub .myth-row__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .make-music-hub .myth-row__link { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-ink); background: transparent; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .make-music-hub .myth-row__link:hover, .make-music-hub .myth-row__link:focus-visible { outline: none; color: var(--color-accent-hover); border-color: var(--color-accent); background: var(--color-accent-soft); } .make-music-hub .myth-row__link::after { content: "→"; font-family: var(--font-mono); font-size: var(--fs-xs); color: currentColor; margin-left: var(--space-1); transition: transform var(--duration-fast) var(--ease-out); } .make-music-hub .myth-row__link:hover::after, .make-music-hub .myth-row__link:focus-visible::after { transform: translateX(2px); } @media (max-width: 899px) and (min-width: 620px) { .make-music-hub .myth-row { column-gap: var(--space-5); padding: var(--space-6) 0; } .make-music-hub .myth-row__claim { font-size: var(--fs-lg); } } @media (max-width: 619px) { .make-music-hub .myth-row { grid-template-columns: 1fr; row-gap: var(--space-4); padding: var(--space-6) 0; } .make-music-hub .myth-row__divider { justify-content: flex-start; transform: rotate(90deg); width: 24px; height: 24px; } .make-music-hub .myth-row__claim { font-size: var(--fs-lg); } } /* ═══════════════════════════════════════════════════════════════════════════ 11. ADJACENT READS REDESIGN --------------------------------------------------------------------------- Enhanced cards with SVG illustrations, hub-specific accent colours, article count badges, and polished hover states. Same pattern as the MIDI hub adj-cards but scoped to .make-music-hub with this pillar's destination hubs (Acoustic Treatment, Soundproofing, Soundbars). ═══════════════════════════════════════════════════════════════════════════ */ /* --- Hub accent tokens per destination --- */ .make-music-hub .adj-card[data-hub="acoustic"] { --hub-accent: #0891B2; } /* cyan-600 */ .make-music-hub .adj-card[data-hub="soundproofing"] { --hub-accent: #475569; } /* slate-600 */ .make-music-hub .adj-card[data-hub="soundbar"] { --hub-accent: #D97706; } /* amber-600 */ /* --- Adjacent reads layout --- */ .make-music-hub .adj-reads { display: flex; flex-direction: row; gap: clamp(var(--space-4), 2.2vw, var(--space-6)); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding: var(--space-2) 0 var(--space-4); margin: 0; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-accent) 25%, transparent) transparent; -webkit-overflow-scrolling: touch; -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%); } .make-music-hub .adj-reads::-webkit-scrollbar { height: 6px; } .make-music-hub .adj-reads::-webkit-scrollbar-track { background: transparent; } .make-music-hub .adj-reads::-webkit-scrollbar-thumb { border-radius: 4px; background: color-mix(in srgb, var(--color-accent) 22%, transparent); } .make-music-hub .adj-reads::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-accent) 40%, transparent); } /* --- Card --- */ .make-music-hub .adj-card { position: relative; display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; background: color-mix(in srgb, var(--hub-accent, var(--color-accent)) 4%, #FFFFFF 96%); transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease; } .make-music-hub .adj-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--hub-accent, var(--color-accent)); opacity: 0.6; transition: opacity 200ms ease; } .make-music-hub .adj-reads .adj-card { flex: 0 0 min(84vw, 21rem); scroll-snap-align: start; } @media (min-width: 780px) { .make-music-hub .adj-reads .adj-card { flex-basis: clamp(21rem, 34vw, 23.5rem); } } @media (min-width: 1120px) { .make-music-hub .adj-reads .adj-card { flex-basis: clamp(22rem, 29vw, 25rem); } } /* --- Visual zone (SVG illustration) --- */ .make-music-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); } .make-music-hub .adj-card__svg { display: block; width: 100%; max-width: 160px; height: auto; color: var(--hub-accent, var(--color-accent)); opacity: 0.72; transition: opacity 280ms ease; } /* --- Body text --- */ .make-music-hub .adj-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-5); } .make-music-hub .adj-card__role { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-accent, var(--color-accent)); } .make-music-hub .adj-card__name { font-family: var(--font-sans, Inter, sans-serif); font-size: var(--fs-xl, 24px); font-weight: 800; line-height: 1.15; letter-spacing: 0; margin: 0; color: var(--color-ink, #111827); transition: color 200ms ease; } .make-music-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; } /* --- CTA --- */ .make-music-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.04em; margin-top: var(--space-2); transition: letter-spacing 200ms ease; } @media (hover: hover) and (pointer: fine) { .make-music-hub .adj-card:hover, .make-music-hub .adj-card:focus-visible { 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); } .make-music-hub .adj-card:hover::before, .make-music-hub .adj-card:focus-visible::before { opacity: 1; } .make-music-hub .adj-card:hover .adj-card__svg, .make-music-hub .adj-card:focus-visible .adj-card__svg { opacity: 0.88; } .make-music-hub .adj-card:hover .adj-card__name, .make-music-hub .adj-card:focus-visible .adj-card__name { color: var(--hub-accent, var(--color-accent)); } .make-music-hub .adj-card:hover .adj-card__cta, .make-music-hub .adj-card:focus-visible .adj-card__cta { letter-spacing: 0.06em; } } /* --- Mobile: reduce visual zone padding --- */ @media (max-width: 520px) { .make-music-hub .adj-card__visual { padding: var(--space-4) var(--space-4) var(--space-2); } .make-music-hub .adj-card__svg { max-width: 120px; } } /* --- Hub accent tokens for new adjacent-read destinations --- */ .make-music-hub .adj-card[data-hub="bass-traps"] { --hub-accent: #0D9488; } /* teal-600 */ .make-music-hub .adj-card[data-hub="panels"] { --hub-accent: #0284C7; } /* sky-600 */ .make-music-hub .adj-card[data-hub="foam"] { --hub-accent: #06B6D4; } /* cyan-500 */ /* ── Next reads: cross-craft routing surface ───────────────────────────── */ .make-music-hub #library.page-section--surface { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); } .make-music-hub #library.page-section--surface > .container { padding-inline: clamp(var(--space-5), 5vw, var(--space-12)); } .make-music-hub #library .library__featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); } @media (max-width: 899px) { .make-music-hub #library .library__featured { grid-template-columns: 1fr; } } .make-music-hub #library .library__hero { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-height: 188px; padding: var(--space-5); overflow: hidden; color: inherit; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } @media (max-width: 899px) { .make-music-hub #library .library__hero { min-height: 0; } } .make-music-hub #library .library__hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--color-accent); opacity: 0.7; } @media (hover: hover) and (pointer: fine) { .make-music-hub #library .library__hero:hover, .make-music-hub #library .library__hero:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--color-accent) 45%, transparent); transform: translateY(-2px); } } .make-music-hub #library .library__hero-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .make-music-hub #library .library__hero-title { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); color: var(--color-ink); } .make-music-hub #library .library__hero-desc { flex: 1; font-family: var(--font-serif); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--color-ink-muted); } .make-music-hub #library .library__hero-cta { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.06em; color: var(--color-accent); } .make-music-hub #library .library__filter-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--filter-tone, var(--color-accent, #4338CA)); margin-right: 2px; flex-shrink: 0; } .make-music-hub #library [data-filter="all"] { --filter-tone: var(--color-accent, #4338CA); } .make-music-hub #library [data-filter="orient"] { --filter-tone: #6366F1; } .make-music-hub #library [data-filter="compare"] { --filter-tone: #0EA5E9; } .make-music-hub #library [data-filter="software"] { --filter-tone: #8B5CF6; } .make-music-hub #library [data-filter="shopping"] { --filter-tone: #059669; } .make-music-hub #library [data-filter="skill"] { --filter-tone: #D97706; } .make-music-hub #library [data-filter="connect"] { --filter-tone: #0891B2; } .make-music-hub #library .library__filter:hover { border-bottom-color: color-mix(in srgb, var(--filter-tone, var(--color-accent)) 45%, transparent); } .make-music-hub #library .library__filter--active, .make-music-hub #library .library__filter--active:hover { border-bottom-color: var(--filter-tone, var(--color-accent, #4338CA)); } .make-music-hub #library .library__filter--active .library__filter-count { color: var(--filter-tone, var(--color-accent, #4338CA)); } .make-music-hub #library .library__item[data-stage="orient"] { --stage-color: #6366F1; } .make-music-hub #library .library__item[data-stage="compare"] { --stage-color: #0EA5E9; } .make-music-hub #library .library__item[data-stage="software"] { --stage-color: #8B5CF6; } .make-music-hub #library .library__item[data-stage="shopping"] { --stage-color: #059669; } .make-music-hub #library .library__item[data-stage="skill"] { --stage-color: #D97706; } .make-music-hub #library .library__item[data-stage="connect"] { --stage-color: #0891B2; } .make-music-hub #library .library__stage-tag { color: var(--stage-color, var(--color-accent, #4338CA)); } .make-music-hub #library .library__arrow { color: var(--stage-color, var(--color-accent, #4338CA)); } .make-music-hub #library .library__item { border-top: 0; border-left: 3px solid var(--stage-color, var(--color-border, #E5E7EB)); padding-left: var(--space-4); border-radius: 0 4px 4px 0; transition: border-color 200ms ease, background 200ms ease; } .make-music-hub #library .library__item[data-stage="shopping"] { border-left-width: 4px; } @media (hover: hover) and (pointer: fine) { .make-music-hub #library .library__item:hover { background: color-mix(in srgb, var(--stage-color, var(--color-accent)) 5%, transparent); } .make-music-hub #library .library__link:hover .library__title, .make-music-hub #library .library__link:focus-visible .library__title { color: var(--stage-color, var(--color-accent, #4338CA)); } } /* ── Next-read density reduction ───────────────────────────────────────── The default 3-column reading grid feels too dense alongside the other pillar content. Override to single column so articles stack vertically — easier scan, less visual noise. */ .make-music-hub .library__list { display: flex; flex-direction: column; gap: 0; } .make-music-hub .library__item { border-bottom: 1px solid var(--color-border, #E5E7EB); } .make-music-hub .library__item:last-child { border-bottom: none; } .make-music-hub .starter-kit__craft { border-radius: 999px; } .make-music-hub .starter-kit__criterion, .make-music-hub .starter-kit__rationale { max-width: 780px; } .make-music-hub .starter-kit__cta { width: fit-content; border-radius: 999px; } .make-music-hub .chapter, .make-music-hub .chapter-heading { scroll-margin-top: 136px; } /* The single content chapter on the pillar — matches .page-section rhythm so the page has consistent vertical breathing room between hero, fork, and the supplementary sections that follow. */ .make-music-hub .chapter--solo { padding-block: var(--space-10); } @media (min-width: 720px) { .make-music-hub .chapter--solo { padding-block: var(--space-12); } } @media (min-width: 900px) { .make-music-hub .chapter--solo { padding-block: var(--space-16); } } .make-music-hub .chapter, .make-music-hub .chapter__header, .make-music-hub .chapter-heading { min-width: 0; max-width: 100%; } .make-music-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); } .make-music-hub .chapter-heading__num { grid-column: 1; grid-row: 1; } .make-music-hub .chapter-heading__text, .make-music-hub .starter-kit__criterion, .make-music-hub .page-section__title { font-family: var(--font-serif); font-weight: 500; letter-spacing: var(--tracking-snug); } .make-music-hub .chapter-heading__text { display: block; grid-column: 1 / -1; grid-row: 2; min-width: 0; max-width: 100%; line-height: var(--lh-snug); overflow-wrap: break-word; } .make-music-hub .chapter-heading__copy-link { grid-column: 2; grid-row: 1; justify-self: end; } @media (max-width: 720px) { .make-music-hub .chapter-heading { grid-template-columns: 1fr; gap: var(--space-2); } .make-music-hub .chapter-heading__text { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.08; } .make-music-hub .chapter-heading__copy-link { grid-column: 1; grid-row: 3; justify-self: start; width: fit-content; } } /* Mobile: full-width starter CTA. */ @media (max-width: 640px) { .make-music-hub .starter-kit__cta { width: 100%; min-width: 0; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; } }