/* ============================================================================ SOUND DIFFUSER HUB — tool identity override ---------------------------------------------------------------------------- Diffusers are the *finishing* tool in the treatment family — the last thing a treated room needs, after panels and traps have already done the heavy lifting. The colour system reflects that: a warm walnut-brown accent rather than the site's bright cyan. Walnut reads as furniture / craft / wood-grain — the visual grammar of finished mastering rooms, high-end listening spaces, and the diffuser's dominant material (solid hardwood or QRD plywood). It distances the hub from panels (cyan), foam (zinc), and bass traps (amber) while keeping the tool-family feel coherent. Load order: tokens.css base design tokens treatment-hub.css hub shell chrome (chips, rail, chapter heading) category-hub.css editorial content cards (stage-entry, spec-grid, placement-stack, pick-row, library) chapter-hub.css shared chapter mechanics (directive-path, priority reorder, install-block, rhythm) diffuser-hub.css <- this file — sound-diffuser colour identity Scope: everything scoped to the .diffuser-hub class on so nothing bleeds into the rest of the site (e.g. the site header's cyan accent on the "Acoustic Treatment" nav item stays cyan, not walnut). ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ 1. TOKENS — sound-diffuser colour identity swap --------------------------------------------------------------------------- Re-point the site's --color-accent* tokens to the walnut family when the page body carries the .diffuser-hub class. Every downstream rule that uses var(--color-accent) (chapter heading eyebrows, directive-path step numbers, CTAs, spec tags, etc.) picks up the new tone automatically — zero per-component rewrites needed. Accent scale (custom walnut palette — not a Tailwind standard so values are inlined rather than token-aliased; hue ~25deg, lower saturation than the amber-700 bass-hub palette so the two read as distinct families): --color-accent walnut-700 (#7C4A2A) → the main brand moment --color-accent-hover walnut-900 (#5C3817) → hover / focus darker --color-accent-soft walnut-100 (#F5E8D9) → soft surface tints --color-accent-subtle walnut-200 (#E8D3B8) → card-edge hover borders Also adds --color-accent-on-dark (walnut-300 / tan) for the hero and planner-cta aside contexts where the darker walnut-700 would collapse into the near-black backdrop (same pattern foam-hub.css and bass-hub.css established for their respective dark-background tones). ═══════════════════════════════════════════════════════════════════════════ */ .diffuser-hub { --color-accent: var(--tool-diffuser-accent, #7C4A2A); --color-accent-hover: #5C3817; --color-accent-soft: #F5E8D9; --color-accent-subtle: #E8D3B8; /* Hero "on-dark" emphasis tone. Walnut-700 has enough saturation to read on white body surfaces but loses contrast against the near-black hero background. Walnut-300 (tan) keeps the warmth of the palette while giving italics, step numbers, and link text enough luminance to register clearly. Slightly brighter than a pure mid-walnut to survive the dark backdrop without turning gold (which would conflict with the bass-hub amber identity). */ --color-accent-on-dark: #D4A574; /* walnut-300 / tan */ } /* ── Hero readability fix ─────────────────────────────────────────────── Base .mission__statement em uses color: var(--color-accent). With walnut- 700 on the near-black hero the italic still reads but with less punch than the brighter walnut-300 the rest of the on-dark content uses. Bump it to the on-dark tone for consistency with directive-path step numbers, etc. */ .diffuser-hub .mission__statement em { color: var(--color-accent-on-dark, #D4A574); } /* ═══════════════════════════════════════════════════════════════════════════ 2. HERO BACKDROP — diffuser-specific motif --------------------------------------------------------------------------- The mission backdrop SVG is page-specific (see the HTML head — each hub paints its own waveform / scatter motif there). At the CSS layer we only nudge the opacity: walnut-on-dark is more muted than cyan, so we let the backdrop show through a touch more than the panels default to keep the hero from feeling empty. Matches the bass-hub opacity so both warm-tone hubs feel visually parallel. ═══════════════════════════════════════════════════════════════════════════ */ .diffuser-hub .mission--hub .mission__backdrop { opacity: 0.22; } /* ═══════════════════════════════════════════════════════════════════════════ 3. SHAPE GRID — not used on sound-diffuser --------------------------------------------------------------------------- Sound-diffuser Ch 2 covers materials and scattering geometry in a .spec-grid (inherited from category-hub.css), not the .shape-list component that lives on the foam hub. Nothing to do here; kept as a comment for symmetry with foam-hub.css / bass-hub.css so the section numbering lines up across per-hub stylesheets. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 4. CHIP ACTIVE STATE — no override needed --------------------------------------------------------------------------- treatment-hub.css's .reader-chip active state uses neutral white-alpha (not --color-accent), so the walnut swap doesn't affect it. Chips still read white-on-darker-white when selected. No override required. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 5. DIRECTIVE-PATH ON-DARK READABILITY --------------------------------------------------------------------------- Same pattern as foam-hub.css / bass-hub.css Section 5. The directive-path (chapter-hub.css) uses var(--color-accent) for its step numbers, intro , CTA links, and the "Show step N of 4" button. Walnut-700 on the near-black hero is legible but low-energy; walnut-300 (tan) gives the numbered steps the visual weight they need to scan as a clear 4-step path. ═══════════════════════════════════════════════════════════════════════════ */ .diffuser-hub .directive-path__num, .diffuser-hub .directive-path__intro strong, .diffuser-hub .directive-path__link { color: var(--color-accent-on-dark); } .diffuser-hub .directive-path__link { border-bottom-color: color-mix(in srgb, var(--color-accent-on-dark) 55%, transparent); } .diffuser-hub .directive-path__link:hover, .diffuser-hub .directive-path__link:focus-visible { border-bottom-color: var(--color-accent-on-dark); color: var(--color-accent-soft); /* walnut-100 — brightens further on hover */ } .diffuser-hub .directive-path__more { color: var(--color-accent-on-dark); border-color: color-mix(in srgb, var(--color-accent-on-dark) 40%, transparent); } .diffuser-hub .directive-path__more:hover, .diffuser-hub .directive-path__more:focus-visible { border-color: var(--color-accent-on-dark); color: var(--color-accent-soft); background: color-mix(in srgb, var(--color-accent-on-dark) 8%, transparent); } /* ═══════════════════════════════════════════════════════════════════════════ 6. PLANNER-CTA ON-DARK READABILITY (Ch 3 aside) --------------------------------------------------------------------------- Same fix as foam-hub.css / bass-hub.css Section 6 — the planner-cta aside has a dark near-black background; category-hub.css points the eyebrow at var(--color-accent) and the note-variant launch button at var(--color-accent-hover). Both collapse into the dark bg on sound- diffuser because walnut-700 / walnut-900 are darker than cyan. ═══════════════════════════════════════════════════════════════════════════ */ .diffuser-hub .planner-cta__eyebrow { color: var(--color-accent-on-dark); } .diffuser-hub .planner-cta--note .planner-cta__launch { color: var(--color-accent-on-dark); } .diffuser-hub .planner-cta--note .planner-cta__launch:hover, .diffuser-hub .planner-cta--note .planner-cta__launch:focus-visible { background: var(--color-accent-on-dark); color: var(--color-ink); /* invert on hover: dark text on tan pill */ } /* ═══════════════════════════════════════════════════════════════════════════ 7. HERO VISUAL — diffuser-specific SVG elements ═══════════════════════════════════════════════════════════════════════════ */ .diffuser-hub .diffuser-hero-visual { display: block; width: 100%; height: 100%; } .diffuser-hub .diffuser-hero-visual__wall { fill: currentColor; opacity: 0.08; stroke: currentColor; stroke-width: 1.4; stroke-opacity: 0.25; } .diffuser-hub .diffuser-hero-visual__panel { fill: none; stroke: currentColor; stroke-width: 2; stroke-opacity: 0.45; } .diffuser-hub .diffuser-hero-visual__scatter { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; opacity: 0.3; stroke-dasharray: 6 4; } .diffuser-hub .diffuser-hero-visual__listener, .diffuser-hub .diffuser-hero-visual__chair { fill: currentColor; opacity: 0.55; } /* ═══════════════════════════════════════════════════════════════════════════ 8. HERO CTA BUTTONS ═══════════════════════════════════════════════════════════════════════════ */ .diffuser-hub .diffuser-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); } .diffuser-hub .diffuser-hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); text-decoration: none; font-family: var(--font-mono); line-height: 1; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .diffuser-hub .diffuser-hero-cta--primary { padding: var(--space-3) var(--space-5); border: 1px solid color-mix(in srgb, var(--color-accent-on-dark) 58%, transparent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-surface); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .diffuser-hub .diffuser-hero-cta--secondary { color: color-mix(in srgb, var(--color-surface) 88%, transparent); font-family: var(--font-serif); font-size: var(--fs-md); font-style: italic; border-bottom: 1px solid color-mix(in srgb, var(--color-accent-on-dark) 42%, transparent); } .diffuser-hub .diffuser-hero-cta:hover, .diffuser-hub .diffuser-hero-cta:focus-visible { outline: none; transform: translateY(-1px); } .diffuser-hub .diffuser-hero-cta--primary:hover, .diffuser-hub .diffuser-hero-cta--primary:focus-visible { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: var(--color-ink); } .diffuser-hub .diffuser-hero-cta--secondary:hover, .diffuser-hub .diffuser-hero-cta--secondary:focus-visible { color: var(--color-accent-on-dark); border-bottom-color: var(--color-accent-on-dark); } .diffuser-hub .diffuser-hero-cta__icon { flex: 0 0 auto; } /* ═══════════════════════════════════════════════════════════════════════════ 9. CHAPTER CONTENT BLOCKS ═══════════════════════════════════════════════════════════════════════════ */ /* -- Ch 1: Readiness check -- */ .diffuser-check { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .diffuser-check { grid-template-columns: 1.2fr 1fr; } } /* ── Reads: primary column (stacked rows, dominant) ── */ .diffuser-check__reads { display: flex; flex-direction: column; gap: 0; } .diffuser-check__entry { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-4); border-bottom: 1px solid var(--color-line); text-decoration: none; color: var(--color-ink); transition: background var(--duration-fast) var(--ease-out); } .diffuser-check__entry:first-child { border-top: 2px solid var(--color-ink); } .diffuser-check__entry:hover, .diffuser-check__entry:focus-visible { background: color-mix(in srgb, var(--color-accent) 6%, transparent); } .diffuser-check__num { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent); line-height: 1.7; } .diffuser-check__body { display: flex; flex-direction: column; gap: var(--space-1); } .diffuser-check__body strong { font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--tracking-snug); } .diffuser-check__body > span:last-child { font-size: var(--fs-sm); color: var(--color-ink-muted); line-height: 1.5; } /* ── Choices: supporting aside (recessed) ── */ .diffuser-check__choices { display: flex; flex-direction: column; gap: 0; padding: var(--space-5); background: var(--color-surface-2, var(--color-bg)); border-radius: var(--radius-lg); align-self: start; } .diffuser-check__gate { padding: 0 0 var(--space-3); } .diffuser-check__gate-title { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); margin: 0 0 var(--space-1); } .diffuser-check__gate-desc { font-size: var(--fs-sm); color: var(--color-ink-muted); margin: 0; line-height: 1.5; } .diffuser-check__choice { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); text-decoration: none; color: var(--color-ink); transition: color var(--duration-fast) var(--ease-out); } .diffuser-check__choice:hover, .diffuser-check__choice:focus-visible { color: var(--color-accent); } .diffuser-check__symptom { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-sm); color: var(--color-ink-muted); } .diffuser-check__verdict { font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--tracking-snug); } /* -- Ch 2: Diffuser types (visual shelf) -- */ .diffuser-types { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 640px) { .diffuser-types { grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-6); } .diffuser-type:nth-child(n) { border-top: 2px solid var(--color-ink); } } .diffuser-type { display: grid; grid-template-columns: 5rem 1fr; grid-template-rows: auto auto; gap: var(--space-2) var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-line); text-decoration: none; color: var(--color-ink); } .diffuser-type:first-child { border-top: 2px solid var(--color-ink); } @media (min-width: 640px) { .diffuser-type { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: var(--space-3); padding: var(--space-5) 0; } } .diffuser-type__visual { display: block; box-sizing: border-box; width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); border: 1px solid var(--color-line); background: var(--color-bg); color: var(--color-accent); overflow: hidden; grid-row: 1 / -1; } @media (min-width: 640px) { .diffuser-type__visual { width: min(100%, 10rem); grid-row: auto; } } .diffuser-type__visual svg { display: block; width: 100%; height: 100%; } .diffuser-type__label { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 600; color: var(--color-ink); margin: 0; } .diffuser-type__desc { font-size: var(--fs-sm); color: var(--color-ink-muted); line-height: 1.55; } /* -- Ch 3: Materials -- */ .diffuser-materials { display: flex; flex-direction: column; gap: 0; } .diffuser-material { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-4) 0; text-decoration: none; color: var(--color-ink); position: relative; transition: background var(--duration-fast) var(--ease-out); } .diffuser-material:hover, .diffuser-material:focus-visible { background: color-mix(in srgb, var(--color-accent) 6%, transparent); } .diffuser-material__num { flex: 0 0 auto; width: 1.75rem; text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent); line-height: 1.7; } .diffuser-material__body { display: flex; flex-direction: column; gap: var(--space-1); } .diffuser-material__body strong { font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--tracking-snug); } .diffuser-material__body > span:last-child { font-size: var(--fs-sm); color: var(--color-ink-muted); line-height: 1.5; } /* -- Ch 4: Placement -- */ .diffuser-placement { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .diffuser-placement { grid-template-columns: 1.3fr 1fr; } } .diffuser-placement__reads { display: flex; flex-direction: column; gap: var(--space-4); } .diffuser-placement__entry { display: flex; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); text-decoration: none; color: var(--color-ink); border: 1px solid var(--color-line); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .diffuser-placement__entry:hover { border-color: var(--color-accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent) 10%, transparent); } .diffuser-placement__num { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent); line-height: 1.7; } .diffuser-placement__body { display: flex; flex-direction: column; gap: var(--space-1); } .diffuser-placement__body strong { font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 600; } .diffuser-placement__body > span:last-child { font-size: var(--fs-sm); color: var(--color-ink-muted); line-height: 1.5; } .diffuser-placement__rule { padding: var(--space-6); background: var(--color-accent-soft); border: 1px solid var(--color-accent-subtle); border-radius: var(--radius-lg); align-self: start; position: sticky; top: calc(var(--header-height, 80px) + var(--space-5)); } .diffuser-placement__rule-title { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 700; margin: 0 0 var(--space-3); color: var(--color-accent); } .diffuser-placement__rule-body { font-size: var(--fs-sm); line-height: 1.6; color: var(--color-ink); margin: 0 0 var(--space-5); } .diffuser-placement__rule-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-5); font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--color-ink-muted); } .diffuser-placement__rule-list li::before { content: "→ "; color: var(--color-accent); } /* -- Ch 5: Buy lanes (visual product cards) -- */ .diffuser-buy-lanes { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 480px) and (max-width: 767px) { .diffuser-buy-lanes { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .diffuser-buy-lanes { grid-template-columns: repeat(3, 1fr); } } .diffuser-buy-lane { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); text-decoration: none; color: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--radius-lg); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .diffuser-buy-lane:hover, .diffuser-buy-lane:focus-visible { border-color: var(--color-accent); box-shadow: 0 4px 20px color-mix(in srgb, var(--color-accent) 12%, transparent); } .diffuser-buy-lane__visual { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent); overflow: hidden; } .diffuser-buy-lane__visual svg { display: block; width: 100%; height: 100%; } .diffuser-buy-lane__tag { display: inline-flex; align-self: flex-start; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); font-family: var(--font-mono); font-size: var(--fs-2xs, 0.6875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .diffuser-buy-lane strong { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--tracking-snug); } .diffuser-buy-lane__desc { font-size: var(--fs-sm); color: var(--color-ink-muted); line-height: 1.55; flex: 1; } .diffuser-buy-lane__cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding: var(--space-2) 0; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent); letter-spacing: 0.04em; transition: color var(--duration-fast) var(--ease-out); } .diffuser-buy-lane:hover .diffuser-buy-lane__cta { color: var(--color-accent-hover); } /* ═══════════════════════════════════════════════════════════════════════════ 10. LIBRARY — featured hero cards ═══════════════════════════════════════════════════════════════════════════ */ .diffuser-hub .library__featured { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-8); } @media (min-width: 480px) and (max-width: 767px) { .diffuser-hub .library__featured { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .diffuser-hub .library__featured { grid-template-columns: repeat(3, 1fr); } } .diffuser-hub .library__hero { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-ink); min-height: 14rem; overflow: hidden; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .diffuser-hub .library__hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--color-accent); opacity: 0.7; } @media (hover: hover) and (pointer: fine) { .diffuser-hub .library__hero:hover { border-color: var(--color-accent); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--color-accent) 20%, transparent); transform: translateY(-2px); } } .diffuser-hub .library__hero-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); } .diffuser-hub .library__hero-title { font-family: var(--font-sans); font-size: var(--fs-lg, 18px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; } .diffuser-hub .library__hero-desc { font-family: var(--font-serif); font-size: var(--fs-sm, 14px); line-height: 1.55; color: var(--color-ink-muted); flex: 1; } .diffuser-hub .library__hero-cta { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-accent); margin-top: var(--space-2); } /* ── Filter dots (color-coded by stage) ──────────────────────────────── */ .diffuser-hub .library__filter-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--stage-color, var(--color-accent)); } .diffuser-hub [data-filter="all"] .library__filter-dot { background: var(--color-accent); } .diffuser-hub [data-filter="orient"] .library__filter-dot { background: #2563EB; } .diffuser-hub [data-filter="material"] .library__filter-dot { background: #7C3AED; } .diffuser-hub [data-filter="placement"] .library__filter-dot { background: #059669; } .diffuser-hub [data-filter="picks"] .library__filter-dot { background: #D97706; } /* ── Library items (color-coded left border) ─────────────────────────── */ .diffuser-hub .library__item { --stage-color: var(--color-accent); border-top: 0; border-left: 3px solid var(--stage-color); padding-left: var(--space-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .diffuser-hub .library__item[data-stage="orient"] { --stage-color: #2563EB; } .diffuser-hub .library__item[data-stage="material"] { --stage-color: #7C3AED; } .diffuser-hub .library__item[data-stage="placement"] { --stage-color: #059669; } .diffuser-hub .library__item[data-stage="picks"] { --stage-color: #D97706; } .diffuser-hub .adj-card[data-hub="acoustic"] { --hub-accent: #0891B2; } .diffuser-hub .adj-card[data-hub="panels"] { --hub-accent: #0284C7; } .diffuser-hub .adj-card[data-hub="bass-traps"] { --hub-accent: #0D9488; } .diffuser-hub .adj-card[data-hub="diffusers"] { --hub-accent: #7C3AED; } .diffuser-hub .adj-card[data-hub="soundproofing"] { --hub-accent: #B45309; } .diffuser-hub .adj-reads { display: flex; flex-direction: row; gap: var(--space-5); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-left: var(--space-1); padding: var(--space-2) var(--space-1) var(--space-4); margin: 0 calc(var(--space-1) * -1); scrollbar-width: thin; scrollbar-color: 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%); } .diffuser-hub .adj-reads::-webkit-scrollbar { height: 6px; } .diffuser-hub .adj-reads::-webkit-scrollbar-track { background: transparent; } .diffuser-hub .adj-reads::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-accent) 22%, transparent); border-radius: 4px; } .diffuser-hub .adj-reads::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-accent) 40%, transparent); } .diffuser-hub .adj-reads .adj-card { flex: 0 0 320px; scroll-snap-align: start; } .diffuser-hub .adj-card { position: relative; display: flex; flex-direction: column; 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); } .diffuser-hub .adj-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--hub-accent, var(--color-accent)); opacity: 0.6; transition: opacity var(--duration-fast) var(--ease-out); } .diffuser-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, var(--color-accent)) 4%, transparent); } .diffuser-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 var(--duration-base) var(--ease-out); } .diffuser-hub .adj-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-5); } .diffuser-hub .adj-card__role { color: var(--hub-accent, var(--color-accent)); font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; } .diffuser-hub .adj-card__name { margin: 0; color: var(--color-ink); font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: 0; line-height: 1.15; transition: color var(--duration-fast) var(--ease-out); } .diffuser-hub .adj-card__hook { flex: 1; margin: 0; color: var(--color-ink-muted); font-family: var(--font-serif); font-size: var(--fs-sm); line-height: 1.6; } .diffuser-hub .adj-card__cta { margin-top: var(--space-2); color: var(--hub-accent, var(--color-accent)); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.04em; transition: letter-spacing var(--duration-fast) var(--ease-out); } .diffuser-hub #next-topics { scroll-margin-top: var(--space-20); } @media (hover: hover) and (pointer: fine) { .diffuser-hub .adj-card:hover, .diffuser-hub .adj-card:focus-visible { outline: none; border-color: var(--hub-accent, var(--color-accent)); box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--hub-accent, var(--color-accent)) 20%, transparent); transform: translateY(-3px); } .diffuser-hub .adj-card:hover::before, .diffuser-hub .adj-card:focus-visible::before { opacity: 1; } .diffuser-hub .adj-card:hover .adj-card__svg, .diffuser-hub .adj-card:focus-visible .adj-card__svg { opacity: 0.88; } .diffuser-hub .adj-card:hover .adj-card__name, .diffuser-hub .adj-card:focus-visible .adj-card__name { color: var(--hub-accent, var(--color-accent)); } .diffuser-hub .adj-card:hover .adj-card__cta, .diffuser-hub .adj-card:focus-visible .adj-card__cta { letter-spacing: 0.06em; } } @media (min-width: 780px) { .diffuser-hub .adj-reads .adj-card { flex-basis: 340px; } } @media (max-width: 520px) { .diffuser-hub .adj-reads .adj-card { flex-basis: 280px; } .diffuser-hub .adj-card__visual { padding: var(--space-4) var(--space-4) var(--space-2); } .diffuser-hub .adj-card__svg { max-width: 120px; } } /* ═══════════════════════════════════════════════════════════════════════════ 11. MOBILE OVERRIDES ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 639px) { .diffuser-hub .diffuser-hero-ctas { align-items: stretch; } .diffuser-hub .diffuser-hero-cta--primary { width: 100%; } }