/* ============================================================================ SOUNDBAR HUB — tool identity override ---------------------------------------------------------------------------- Soundbars sit alongside the 4 treatment tools (panels, foam, traps, diffusers) as a canonical pillar category. The visual identity is an amber-gold palette — carrying forward the `.path--gear` tone the homepage's Three Paths slot #3 already uses, so the click from homepage → /soundbar/ feels visually continuous. Gold was chosen because: - It distinguishes cleanly from the other warm-tone hubs (traps terracotta #9A3412, diffuser walnut #7C4A2A) by being yellow-leaning rather than red-leaning. - It matches cinema / TV-audio associations (theatre curtain, gold projector light) without drifting into pure yellow, which reads too playful for the editorial brand. - It reuses the existing homepage.pick--gear amber surface (#FFFBEB) and dark stroke (#78350F) family, so cross-page continuity is automatic — no separate colour story to teach readers. 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) soundbar-hub.css <- this file — soundbar amber-gold identity Scope: everything scoped to the .soundbar-hub class on so the amber-gold accent doesn't bleed into the rest of the site (e.g. the site header's cyan accent on other nav items stays cyan). ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ 1. TOKENS — soundbar amber-gold identity swap --------------------------------------------------------------------------- Re-point the site's --color-accent* tokens to the amber-gold family when the page body carries the .soundbar-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 (Tailwind amber family — standard values so nothing custom to maintain; hue ~35deg, clearly distinct from traps hue ~15deg and diffuser hue ~25deg): --color-accent amber-700 (#B45309) → the main brand moment --color-accent-hover amber-800 (#92400E) → hover / focus darker --color-accent-soft amber-100 (#FEF3C7) → soft surface tints --color-accent-subtle amber-200 (#FDE68A) → card-edge hover borders --color-accent-on-dark (honey gold, #F5B041) for hero and planner-cta aside contexts where the darker amber-700 would collapse into the near- black backdrop. Brighter than amber-400 to survive the dark hero; warm enough not to turn lemon-yellow. ═══════════════════════════════════════════════════════════════════════════ */ .soundbar-hub { --color-accent: #B45309; /* amber-700 */ --color-accent-hover: #92400E; /* amber-800 */ --color-accent-soft: #FEF3C7; /* amber-100 */ --color-accent-subtle: #FDE68A; /* amber-200 */ /* Hero "on-dark" emphasis tone. Amber-700 has enough chroma to read on white body surfaces but loses luminance against the near-black hero backdrop. Honey-gold (F5B041) keeps the warmth of the palette while giving italics, step numbers, and link text enough brightness to register clearly. Similar role to diffuser-hub's walnut-300 tan, just retuned to the soundbar's yellower hue. */ --color-accent-on-dark: #F5B041; /* honey gold */ } /* ── Hero readability fix ─────────────────────────────────────────────── Base .mission__statement em uses color: var(--color-accent). Amber-700 on the near-black hero still reads, but the brighter honey-gold gives the italicised word the same visual weight the directive-path step numbers carry. Small consistency win. */ .soundbar-hub .mission__statement em { color: var(--color-accent-on-dark, #F5B041); } .soundbar-hub .mission--hub .mission__statement { font-size: clamp(2.35rem, 2.8vw, 3rem); line-height: 1.08; max-width: min(100%, 48rem); } @media (max-width: 899px) { .soundbar-hub .mission--hub .mission__statement { font-size: clamp(2rem, 4.2vw, 2.35rem); line-height: 1.1; } } @media (max-width: 640px) { .soundbar-hub .mission--hub .mission__statement { max-width: 100%; font-size: clamp(1.8rem, 6.4vw, 2.15rem); line-height: 1.12; } } /* ═══════════════════════════════════════════════════════════════════════════ 2. HERO SCENE — experiential room/product backdrop --------------------------------------------------------------------------- The original line-art SVG was too symbolic for this page. This composed CSS scene keeps the hero deterministic and lightweight while making the product, room, listener path, and wave behaviour visible immediately. Composition: scene centred horizontally and vertically so the TV reads as the visual anchor at viewport centre, sub naturally falls left of it, and the sofa + signal path sit right of it. Because the copy block (.mission__inner) is also text-aligned centre and centred via margin-inline: auto, the scene and the copy share the middle of the hero. To keep typography legible without masking the scene's left half (which is the user-facing point — "sub on the left"), the hero backdrop layers a radial dark halo at viewport centre. The halo bleeds through the scene's reduced opacity (0.55) and dims the area directly behind the eyebrow / H1 / body / routes, while the scene's outer elements (sub at scene-x ~22%, signal path at scene-x ~80%) sit at the halo's falloff edge and stay readable as ambient detail. ═══════════════════════════════════════════════════════════════════════════ */ .soundbar-hub .mission--hub { padding-block: var(--space-10) var(--space-24); background: /* Centred dark halo behind the copy column. Tall, narrow ellipse so horizontal falloff exposes the scene's left (sub) and right (sofa / signal path) edges, while vertical extent covers the full copy stack from eyebrow down to chips. */ radial-gradient(ellipse 38% 92% at 50% 50%, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.82) 30%, rgba(15, 23, 42, 0.50) 58%, rgba(15, 23, 42, 0.18) 78%, transparent 96%), /* Symmetric warm-cool base — no left/right linear bias now that both copy and scene are centred. */ linear-gradient(135deg, #0F172A 0%, #18100A 46%, #34210E 100%); } .soundbar-hub .mission--hub .mission__inner { max-width: 880px; } /* Body width follows the canonical three-viewport rule defined in hub.css and used by dj/midi/make-music hubs: - Desktop (>900): max-width: none — body fills the .mission__inner block (880px) so the copy column visually matches the H1's line length. - Tablet (≤899): font-size shrinks to var(--fs-sm) via hub.css:152-154; width reflows naturally. - Mobile (≤700): overflow guard via the @media block below. */ .soundbar-hub .mission--hub .mission__body { max-width: none; } @media (max-width: 700px) { .soundbar-hub .mission--hub .mission__statement, .soundbar-hub .mission--hub .mission__body { max-width: calc(100vw - 32px); overflow-wrap: anywhere; } } .soundbar-hub .mission--hub .mission__backdrop { opacity: 1; align-items: center; justify-content: center; } .soundbar-hero-scene { position: absolute; top: 50%; left: 50%; width: min(76vw, 920px); min-width: 640px; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); color: var(--color-accent-on-dark, #F5B041); opacity: 0.22; } .soundbar-hero-scene__tv { position: absolute; top: 17%; left: 32%; width: 44%; height: 34%; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 6px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%), linear-gradient(180deg, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.7)), #15130F; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34); } .soundbar-hero-scene__tv::before, .soundbar-hero-scene__tv::after { content: ""; position: absolute; bottom: -30px; width: 1px; height: 30px; background: rgba(255, 255, 255, 0.28); } .soundbar-hero-scene__tv::before { left: 24%; transform: rotate(16deg); } .soundbar-hero-scene__tv::after { right: 24%; transform: rotate(-16deg); } .soundbar-hero-scene__bar { position: absolute; top: 58%; left: 30%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 48%; height: 5.5%; padding: 5px 12px; border: 1px solid rgba(245, 176, 65, 0.54); border-radius: 999px; background: linear-gradient(180deg, rgba(245, 176, 65, 0.22), rgba(245, 176, 65, 0.06)); box-shadow: 0 18px 55px rgba(245, 176, 65, 0.12); } .soundbar-hero-scene__bar span { border-radius: 999px; background: rgba(255, 255, 255, 0.2); } .soundbar-hero-scene__sub { position: absolute; left: 22%; bottom: 14%; width: 11%; aspect-ratio: 0.78; border: 1px solid rgba(245, 176, 65, 0.45); border-radius: 8px; background: linear-gradient(180deg, rgba(245, 176, 65, 0.16), rgba(15, 23, 42, 0.28)), #15110B; } .soundbar-hero-scene__sub::after { content: ""; position: absolute; inset: 28% 23%; border: 1px solid rgba(245, 176, 65, 0.32); border-radius: 50%; } @media (max-width: 899px) { .soundbar-hero-scene { width: 142vw; min-width: 0; opacity: 0.18; } } @media (max-width: 560px) { .soundbar-hero-scene { width: 170vw; opacity: 0.13; } } /* ═══════════════════════════════════════════════════════════════════════════ 5. HERO ROUTES + "JUMP TO PICKS" LINK --------------------------------------------------------------------------- Unique to soundbar (treatment hubs don't have this). Serves mixed-intent arrivals with three clear paths: diagnose, read inventory, or compare picks. The lower mono link remains as a discreet escape hatch to Ch 7. ═══════════════════════════════════════════════════════════════════════════ */ .soundbar-hero-routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); max-width: 900px; margin-top: var(--space-8); } .soundbar-hero-route { position: relative; display: flex; flex-direction: column; gap: var(--space-1); min-height: 78px; padding: var(--space-3) var(--space-4); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(15, 23, 42, 0.54); backdrop-filter: blur(8px); color: inherit; text-decoration: none; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; } .soundbar-hero-route__eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-on-dark, #F5B041); } .soundbar-hero-route__label { max-width: 14ch; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; color: rgba(255, 255, 255, 0.92); } .soundbar-hero-route__arrow { position: absolute; right: var(--space-4); bottom: var(--space-4); color: rgba(255, 255, 255, 0.48); transition: transform 180ms ease, color 180ms ease; } .soundbar-hero-route--commercial { border-color: color-mix(in srgb, var(--color-accent-on-dark, #F5B041) 42%, rgba(255, 255, 255, 0.12)); } @media (hover: hover) and (pointer: fine) { .soundbar-hero-route:hover, .soundbar-hero-route:focus-visible { border-color: var(--color-accent-on-dark, #F5B041); background: rgba(41, 30, 16, 0.74); transform: translateY(-1px); } .soundbar-hero-route:hover .soundbar-hero-route__arrow, .soundbar-hero-route:focus-visible .soundbar-hero-route__arrow { color: var(--color-accent-on-dark, #F5B041); transform: translateX(3px); } } /* Hero CTA row keeps the chapter walkthrough as the primary action while leaving a quieter fast path into the full soundbar library. */ .soundbar-hero-ctas { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .soundbar-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; } .soundbar-hero-cta--primary { min-height: 44px; padding: 0 var(--space-5); border: 1px solid var(--color-accent-on-dark, #F5B041); border-radius: 999px; background: var(--color-accent-on-dark, #F5B041); color: #111827; font-family: var(--font-sans); font-size: var(--fs-sm, 14px); font-weight: var(--fw-semibold); } .soundbar-hero-cta--secondary { color: color-mix(in srgb, var(--color-accent-on-dark, #F5B041) 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, #F5B041) 34%, transparent); } .soundbar-hero-cta__icon { flex: 0 0 auto; } @media (hover: hover) and (pointer: fine) { .soundbar-hero-cta--primary:hover { background: var(--color-accent, #F59E0B); border-color: var(--color-accent, #F59E0B); color: #111827; transform: translateY(-1px); } .soundbar-hero-cta--secondary:hover { color: var(--color-accent-on-dark, #F5B041); border-bottom-color: currentColor; } } .soundbar-hero-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } @media (max-width: 980px) { .soundbar-hero-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; } } @media (max-width: 720px) { .soundbar-hero-routes { grid-template-columns: 1fr; gap: var(--space-2); max-width: 460px; } .soundbar-hero-route { min-height: 66px; } .soundbar-hero-route__label { max-width: none; } } .soundbar-hub .mission--hub .mission__inner, .soundbar-hub .soundbar-hero-routes, .soundbar-hub .soundbar-hero-route, .soundbar-hub .soundbar-hero-ctas, .soundbar-hub .soundbar-hero-cta, .soundbar-hub .soundbar-journey__layout, .soundbar-hub .soundbar-journey__intro, .soundbar-hub .soundbar-router-summary, .soundbar-hub .soundbar-lane-router, .soundbar-hub .soundbar-lane-card, .soundbar-hub .soundbar-lane-card__links, .soundbar-hub .soundbar-funnel, .soundbar-hub .soundbar-start-points, .soundbar-hub .soundbar-start-point { min-width: 0; max-width: 100%; } .soundbar-hub .mission--hub .mission__statement, .soundbar-hub .mission--hub .mission__body, .soundbar-hub .soundbar-hero-route__label, .soundbar-hub .soundbar-hero-cta, .soundbar-hub .soundbar-lane-card, .soundbar-hub .soundbar-lane-card__links a, .soundbar-hub .soundbar-funnel__body, .soundbar-hub .soundbar-start-point { overflow-wrap: break-word; } .soundbar-hub .soundbar-funnel__step { grid-template-columns: 32px minmax(0, 1fr); } /* ═══════════════════════════════════════════════════════════════════════════ 6. PICK-TIER (Ch 7 tier-card layout) --------------------------------------------------------------------------- Promoted to category-hub.css (search: "PICK-TIER (canonical"). The component is now shared across soundbar, DJ, and MIDI sub-hubs because all three render a Ch 7 "5 tier cards with criterion-first" layout. Its colour still comes from --color-accent so the soundbar amber, DJ fuchsia, and MIDI blue all flow through automatically. A soundbar-specific hover-shadow fine-tune — if we ever wanted one — would go here, in the same pattern dj-hub.css uses. For now the color-mix default in category-hub.css reads fine against amber so no override is needed. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 7. CHANNEL LADDER (Ch 2 path-to-read/path-to-pick bridge) --------------------------------------------------------------------------- Keeps the channel-count chapter from becoming a static spec grid. Each step teaches the physics, then offers one article route and one tier route. The visual language stays in the same simple line-art family as the MIDI controller hub: outline first, no decorative illustration container. ═══════════════════════════════════════════════════════════════════════════ */ /* CHANNEL-KEY ─ labeled diagram of the X.Y.Z notation. Big color-coded number up top (e.g. 5.1.2), then a vertical legend below where each entry repeats the colored digit as a "pin" so the eye can ricochet between notation and explanation. The 3 tones (amber / teal / violet) match by entry, set via --key-tone on the entry. */ .soundbar-hub .channel-key { margin: var(--space-6) 0 var(--space-8); padding: var(--space-5) var(--space-4); border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 24%, var(--color-border, #E5E7EB) 76%); border-radius: 18px; background: color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 28%, #FFFFFF 72%); } .soundbar-hub .channel-key__caption { display: block; margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--fs-xs, 12px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted, #4B5563); } .soundbar-hub .channel-key__notation { display: flex; align-items: baseline; justify-content: center; gap: 0; margin: 0 0 var(--space-5); padding: var(--space-3) 0; font-family: var(--font-mono); font-size: clamp(56px, 12vw, 112px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .soundbar-hub .channel-key__digit { padding: 0 0.06em; } .soundbar-hub .channel-key__digit--mains { color: #B45309; } .soundbar-hub .channel-key__digit--sub { color: #0D9488; } .soundbar-hub .channel-key__digit--height { color: #7C3AED; } .soundbar-hub .channel-key__sep { color: var(--color-ink-muted, #4B5563); opacity: 0.45; font-size: 0.55em; padding: 0 0.05em; align-self: baseline; } .soundbar-hub .channel-key__legend { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 18%, var(--color-border, #E5E7EB) 82%); } .soundbar-hub .channel-key__entry { display: grid; grid-template-columns: clamp(44px, 8vw, 56px) 1fr; gap: var(--space-3); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 12%, var(--color-border, #E5E7EB) 88%); } .soundbar-hub .channel-key__entry:last-child { border-bottom: 0; padding-bottom: var(--space-2); } .soundbar-hub .channel-key__entry--mains { --key-tone: #B45309; } .soundbar-hub .channel-key__entry--sub { --key-tone: #0D9488; } .soundbar-hub .channel-key__entry--height { --key-tone: #7C3AED; } .soundbar-hub .channel-key__pin { font-family: var(--font-mono); font-size: clamp(28px, 4.4vw, 38px); font-weight: 800; line-height: 1; text-align: center; color: var(--key-tone, var(--color-accent, #B45309)); } .soundbar-hub .channel-key__copy { display: grid; gap: 4px; min-width: 0; margin: 0; } .soundbar-hub .channel-key__role { font-family: var(--font-sans); font-size: var(--fs-base, 16px); font-weight: 800; line-height: var(--lh-snug); letter-spacing: 0.01em; color: var(--color-ink, #111827); } .soundbar-hub .channel-key__detail { margin: 0; font-family: var(--font-serif); font-size: var(--fs-sm, 14px); line-height: 1.58; color: var(--color-ink, #111827); } .soundbar-hub .channel-key__detail strong { font-family: var(--font-mono); font-weight: 800; color: var(--key-tone, var(--color-accent, #B45309)); } .channel-ladder { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--space-8) 0; border-top: 1px solid var(--color-border, #E5E7EB); border-bottom: 1px solid var(--color-border, #E5E7EB); background: color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 18%, transparent); } .channel-ladder__step { display: flex; flex-direction: column; gap: var(--space-3); min-height: 100%; padding: var(--space-5) 0; text-align: center; border-bottom: 1px solid var(--color-border, #E5E7EB); } .channel-ladder__step:last-child { border-bottom: 0; } .channel-ladder__diagram { width: min(100%, 180px); height: auto; margin: 0 auto var(--space-1); color: var(--color-accent, #B45309); opacity: 0.86; } .channel-ladder__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, #B45309); } .channel-ladder__title { margin: 0; font-family: var(--font-serif); font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--color-ink, #111827); } .channel-ladder__body { margin: 0 auto; max-width: 24rem; color: var(--color-ink-muted, #4B5563); font-size: var(--fs-sm); line-height: 1.6; } .channel-ladder__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); } .channel-ladder__link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 36%, var(--color-border, #E5E7EB) 64%); border-radius: 999px; color: var(--color-accent, #B45309); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .channel-ladder__link--pick { background: var(--color-accent, #B45309); border-color: var(--color-accent, #B45309); color: #FFF7ED; } @media (hover: hover) and (pointer: fine) { .channel-ladder__link:hover, .channel-ladder__link:focus-visible { background: rgba(180, 83, 9, 0.07); border-color: var(--color-accent, #B45309); transform: translateY(-1px); } .channel-ladder__link--pick:hover, .channel-ladder__link--pick:focus-visible { background: var(--color-accent-hover, #92400E); border-color: var(--color-accent-hover, #92400E); color: #FFF7ED; } } @media (min-width: 680px) { .channel-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .channel-ladder__step { padding: var(--space-5) var(--space-4); } .channel-ladder__step:nth-child(odd) { border-right: 1px solid var(--color-border, #E5E7EB); } .channel-ladder__step:nth-last-child(-n + 2) { border-bottom: 0; } } @media (min-width: 1100px) { .channel-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); } .channel-ladder__step, .channel-ladder__step:nth-child(odd) { border-right: 1px solid var(--color-border, #E5E7EB); border-bottom: 0; } .channel-ladder__step:last-child { border-right: 0; } } @media (max-width: 560px) { .channel-ladder__actions { flex-direction: column; align-items: stretch; } .channel-ladder__link { width: 100%; } } /* ── UPGRADE THREAD (Ch 2 channel-format upgrade timeline) ───────────── Vertical thread that walks the reader through the three channel-count upgrade jumps (2.0→2.1, 2.1→3.1, 5.1→5.1.2). Numbered nodes are connected by a faint accent line so each comparison reads as one step on a continuous timeline. Renders inline as part of the chapter (no card chrome) so it reads as a continuation of the channel-ladder. ──────────────────────────────────────────────────────────────────── */ .soundbar-hub .upgrade-thread__title { margin: var(--space-7) 0 var(--space-4); font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; line-height: var(--lh-snug, 1.2); letter-spacing: var(--tracking-snug, -0.01em); color: var(--color-ink, #111827); } .soundbar-hub .upgrade-thread__title--why-buy { margin-top: var(--space-12); } .soundbar-hub .upgrade-thread__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; } .soundbar-hub .upgrade-thread__step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-3) 0 var(--space-5); } /* Continuous thread line connecting the nodes */ .soundbar-hub .upgrade-thread__step::before { content: ''; position: absolute; top: 36px; bottom: 0; left: 17px; width: 2px; background: color-mix(in srgb, var(--color-accent, #B45309) 32%, transparent); } .soundbar-hub .upgrade-thread__step:last-child::before { display: none; } .soundbar-hub .upgrade-thread__step:last-child { padding-bottom: var(--space-5); } .soundbar-hub .upgrade-thread__node { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent, #B45309); color: #FFFFFF; font-family: var(--font-mono); font-size: 14px; font-weight: 800; line-height: 1; position: relative; z-index: 1; } .soundbar-hub .upgrade-thread__body { display: grid; gap: var(--space-2); padding-top: 6px; min-width: 0; } .soundbar-hub .upgrade-thread__transition { display: inline-flex; align-items: baseline; gap: 0.25em; font-family: var(--font-mono); font-size: clamp(18px, 2vw, 22px); font-weight: 800; letter-spacing: 0.02em; color: var(--color-ink, #111827); } .soundbar-hub .upgrade-thread__arrow { color: var(--color-accent, #B45309); font-weight: 700; } .soundbar-hub .upgrade-thread__what { margin: 0; font-family: var(--font-serif); font-size: var(--fs-base, 16px); line-height: 1.6; color: var(--color-ink, #111827); } .soundbar-hub .upgrade-thread__what strong { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent, #B45309); } .soundbar-hub .upgrade-thread__link { font-family: var(--font-sans); font-size: var(--fs-xs, 12px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent, #B45309); text-decoration: none; border-bottom: 1px dashed currentColor; padding-bottom: 1px; width: fit-content; transition: color 180ms ease, border-color 180ms ease; } @media (hover: hover) and (pointer: fine) { .soundbar-hub .upgrade-thread__link:hover, .soundbar-hub .upgrade-thread__link:focus-visible { color: var(--color-accent-hover, #92400E); border-bottom-style: solid; } } .soundbar-hub .channel-choice-bridge { position: relative; margin: var(--space-7) 0 var(--space-5); padding: var(--space-4) var(--space-5); border-block: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 18%, var(--color-border, #E5E7EB) 82%); background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 42%, transparent) 0%, transparent 72%); } .soundbar-hub .upgrade-thread__list + .channel-choice-bridge { margin-top: var(--space-10); } .soundbar-hub .channel-choice-bridge::before { content: ""; position: absolute; top: var(--space-4); bottom: var(--space-4); left: 0; width: 4px; border-radius: 999px; background: var(--color-accent, #B45309); } .soundbar-hub .channel-choice-bridge__eyebrow { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-xs, 12px); font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent, #B45309); } .soundbar-hub .channel-choice-bridge__title { max-width: 28rem; margin: 0; font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: var(--lh-snug, 1.2); letter-spacing: var(--tracking-snug, -0.01em); color: var(--color-ink, #111827); } .soundbar-hub .channel-choice-bridge__body { max-width: 62ch; margin: var(--space-2) 0 0; font-family: var(--font-serif); font-size: var(--fs-base, 16px); line-height: 1.58; color: var(--color-ink-muted, #4B5563); } .soundbar-hub .connection-choice-bridge { position: relative; margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); border-block: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 18%, var(--color-border, #E5E7EB) 82%); background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 42%, transparent) 0%, transparent 72%); } .soundbar-hub .connection-choice-bridge::before { content: ""; position: absolute; top: var(--space-4); bottom: var(--space-4); left: 0; width: 4px; border-radius: 999px; background: var(--color-accent, #B45309); } .soundbar-hub .connection-choice-bridge__eyebrow { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-xs, 12px); font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent, #B45309); } .soundbar-hub .connection-choice-bridge__title { max-width: 28rem; margin: 0; font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: var(--lh-snug, 1.2); letter-spacing: var(--tracking-snug, -0.01em); color: var(--color-ink, #111827); } .soundbar-hub .connection-choice-bridge__body { max-width: 62ch; margin: var(--space-2) 0 0; font-family: var(--font-serif); font-size: var(--fs-base, 16px); line-height: 1.58; color: var(--color-ink-muted, #4B5563); } .soundbar-hub .soundbar-connection-check .spec-grid { margin: 0; } .soundbar-hub .soundbar-connection-check { display: grid; gap: var(--space-5); margin: var(--space-6) 0 var(--space-8); padding: var(--space-5); border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 22%, var(--color-border, #E5E7EB) 78%); border-radius: 20px; background: color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 24%, #FFFFFF 76%); } .soundbar-hub .soundbar-connection-check__intro { max-width: 42rem; } .soundbar-hub .soundbar-connection-check__eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent, #B45309); } .soundbar-hub .soundbar-connection-check__steps { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: var(--space-3) 0 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 20%, var(--color-border, #E5E7EB) 80%); } .soundbar-hub .soundbar-connection-check__steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); align-items: start; min-width: 0; padding: var(--space-3) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 12%, transparent); background: transparent; } .soundbar-hub .soundbar-connection-check__steps li:last-child { border-bottom: 0; } .soundbar-hub .soundbar-connection-check__num { display: inline-flex; grid-row: 1 / span 2; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 999px; background: color-mix(in srgb, var(--color-accent, #B45309) 7%, transparent); color: var(--color-accent, #B45309); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 800; line-height: 1; letter-spacing: 0.04em; } .soundbar-hub .soundbar-connection-check__steps strong { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 800; line-height: var(--lh-snug); color: var(--color-ink, #111827); } .soundbar-hub .soundbar-connection-check__steps li > span:not(.soundbar-connection-check__num) { font-family: var(--font-serif); font-size: var(--fs-xs); line-height: 1.55; color: var(--color-ink-muted, #4B5563); } @media (min-width: 760px) { .soundbar-hub .soundbar-connection-check__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .soundbar-hub .soundbar-connection-check__steps li { padding: var(--space-3); border-right: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 12%, transparent); border-bottom: 0; } .soundbar-hub .soundbar-connection-check__steps li:last-child { border-right: 0; } } /* ── Soundbar signal diagram (Ch 3 SVG depiction) ────────────────────── Visual depiction of the Source → TV → Soundbar signal chain that sits above the .soundbar-connection-check__steps OL. Numbered checkpoint badges (01–04) match the OL items so a reader can trace each step spatially before reading the detail. All strokes use currentColor so the diagram inherits the chapter ink color, with opacity dialed down for cable/port hierarchy (eARC > ARC > Optical). ──────────────────────────────────────────────────────────────────── */ .soundbar-hub .soundbar-signal-diagram { margin: 0 0 var(--space-5); padding: var(--space-3); background: rgba(255, 255, 255, 0.55); border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 16%, var(--color-border, #E5E7EB) 84%); border-radius: 14px; color: var(--color-accent, #B45309); } .soundbar-hub .soundbar-signal-diagram__svg { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; } .soundbar-hub .soundbar-signal-diagram__svg text { font-family: var(--font-sans); fill: currentColor; } .soundbar-hub .signal-diagram__label { font-size: 14px; font-weight: 800; } .soundbar-hub .signal-diagram__label-faint { font-size: 11px; opacity: 0.62; } .soundbar-hub .signal-diagram__port-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .soundbar-hub .signal-diagram__port-tag--faint { opacity: 0.6; } .soundbar-hub .signal-diagram__cable-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; fill: currentColor; opacity: 0.7; } .soundbar-hub .signal-diagram__bt-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; opacity: 0.65; } .soundbar-hub .signal-diagram__step-num { font-family: var(--font-mono); font-size: 12px; font-weight: 800; fill: var(--color-accent, #B45309); } .soundbar-hub .signal-diagram__step-cap { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; opacity: 0.7; } .soundbar-hub .signal-diagram__source, .soundbar-hub .signal-diagram__tv, .soundbar-hub .signal-diagram__bar { transform-box: fill-box; transform-origin: center; animation: signal-device-breathe 6s ease-in-out infinite; } .soundbar-hub .signal-diagram__tv { animation-delay: 0.35s; } .soundbar-hub .signal-diagram__bar { animation-delay: 0.7s; } .soundbar-hub .signal-diagram__source-line, .soundbar-hub .signal-diagram__cable { stroke-dasharray: 18 10; animation: signal-line-flow 2.8s linear infinite; } .soundbar-hub .signal-diagram__source-arrow, .soundbar-hub .signal-diagram__cable-arrow { animation: signal-arrow-pulse 2.8s ease-in-out infinite; } .soundbar-hub .signal-diagram__bt-path { animation: signal-bt-flow 5.2s linear infinite; } .soundbar-hub .signal-diagram__step { transform-box: fill-box; transform-origin: center; animation: signal-step-pulse 5.6s ease-in-out infinite; } .soundbar-hub .signal-diagram__step--2 { animation-delay: 0.7s; } .soundbar-hub .signal-diagram__step--1 { animation-delay: 1.4s; } .soundbar-hub .signal-diagram__step--3 { animation-delay: 2.1s; } .soundbar-hub .signal-diagram__step--4 { animation-delay: 2.8s; } @keyframes signal-line-flow { to { stroke-dashoffset: -28; } } @keyframes signal-bt-flow { to { stroke-dashoffset: -40; } } @keyframes signal-arrow-pulse { 0%, 100% { opacity: 0.58; } 45%, 60% { opacity: 1; } } @keyframes signal-step-pulse { 0%, 100% { opacity: 0.72; transform: scale(1); } 12%, 24% { opacity: 1; transform: scale(1.06); } } @keyframes signal-device-breathe { 0%, 100% { opacity: 0.86; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .soundbar-hub .signal-diagram__source, .soundbar-hub .signal-diagram__tv, .soundbar-hub .signal-diagram__bar, .soundbar-hub .signal-diagram__source-line, .soundbar-hub .signal-diagram__cable, .soundbar-hub .signal-diagram__source-arrow, .soundbar-hub .signal-diagram__cable-arrow, .soundbar-hub .signal-diagram__bt-path, .soundbar-hub .signal-diagram__step { animation: none; } } /* ── Ch 4 Q-card icons + room visuals ──────────────────────────────────── */ .soundbar-hub .stage-entry { grid-template-columns: auto auto 1fr; align-items: start; } .soundbar-hub .stage-entry__icon { width: 48px; height: 48px; color: var(--color-accent, #B45309); flex-shrink: 0; opacity: 0.82; } .soundbar-hub .stage-entry__icon text { font-family: var(--font-mono); } .soundbar-hub .room-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); } .soundbar-hub .room-scale__tier { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; } .soundbar-hub .room-scale__svg { width: 100%; max-width: 160px; height: auto; color: var(--color-accent, #B45309); } .soundbar-hub .room-scale__svg text { font-family: var(--font-mono); } .soundbar-hub .room-scale__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, #B45309); } .soundbar-hub .room-scale__desc { font-family: var(--font-serif); font-size: var(--fs-xs); line-height: 1.4; color: var(--color-ink-muted, #4B5563); } .soundbar-hub .room-scale__channel { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 800; color: var(--color-ink, #111827); } @media (max-width: 759px) { .soundbar-hub .room-scale { grid-template-columns: repeat(2, 1fr); } } .soundbar-hub .room-matrix-intro { font-family: var(--font-serif); font-size: var(--fs-base, 16px); line-height: 1.6; color: var(--color-ink-muted, #4B5563); margin: var(--space-4) 0 var(--space-2); } .soundbar-hub .room-matrix-intro__lead { display: block; margin-bottom: var(--space-2); font-size: var(--fs-lg, 18px); color: var(--color-ink, #111827); } .soundbar-hub .room-mismatch-note { font-family: var(--font-serif); font-size: var(--fs-sm, 14px); line-height: 1.6; color: var(--color-ink-muted, #4B5563); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-accent, #B45309); background: color-mix(in srgb, var(--color-accent, #B45309) 4%, transparent); border-radius: 0 6px 6px 0; } .soundbar-hub .room-mismatch-note strong { color: var(--color-ink, #111827); } .soundbar-hub .room-mismatch-note a { color: var(--color-accent, #B45309); text-decoration: underline; text-underline-offset: 2px; } .soundbar-hub .room-routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); } .soundbar-hub .room-route { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 20%, var(--color-border, #E5E7EB) 80%); border-radius: 10px; background: var(--color-surface, #FFFFFF); text-decoration: none; color: inherit; transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); } .soundbar-hub .room-route:hover, .soundbar-hub .room-route:focus-visible { border-color: var(--color-accent, #B45309); background: color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 30%, #FFFFFF 70%); } .soundbar-hub .room-route__room { font-family: var(--font-serif); font-size: var(--fs-sm, 14px); font-weight: 500; color: var(--color-ink, #111827); } .soundbar-hub .room-route__arrow { font-size: var(--fs-sm, 14px); color: var(--color-accent, #B45309); } .soundbar-hub .room-route__channel { font-family: var(--font-mono); font-size: var(--fs-sm, 14px); font-weight: 800; color: var(--color-accent, #B45309); white-space: nowrap; } @media (max-width: 759px) { .soundbar-hub .room-routes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .soundbar-hub .room-routes { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ 7b. SETUP DIAGRAM (Ch 5 side-view placement guide) ═══════════════════════════════════════════════════════════════════════════ */ .soundbar-hub .setup-diagram { margin: 0 0 var(--space-5); padding: 0; } .soundbar-hub .setup-diagram__svg { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; color: var(--color-ink, #111827); } @media (min-width: 1000px) { .soundbar-hub #chapter-5 .placement-stack { grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr); gap: var(--space-7); align-items: start; } .soundbar-hub #chapter-5 .setup-diagram { margin-bottom: 0; } .soundbar-hub #chapter-5 .setup-diagram__svg { max-width: 620px; } .soundbar-hub #chapter-5 .stage-entry { gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-4) 0; } .soundbar-hub #chapter-5 .stage-entry:first-child { padding-top: 0; } .soundbar-hub #chapter-5 .stage-entry__body { gap: var(--space-1); } .soundbar-hub #chapter-5 .stage-entry__q { font-size: var(--fs-base); line-height: 1.12; } .soundbar-hub #chapter-5 .stage-entry__gist { font-size: var(--fs-sm); line-height: var(--lh-snug); max-width: 42ch; } } @media (min-width: 900px) { .soundbar-hub #chapter-6 .stage-columns { grid-template-columns: minmax(0, 1.48fr) minmax(300px, 0.82fr); gap: var(--space-6); align-items: stretch; } .soundbar-hub #chapter-6 .stage-columns__primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .soundbar-hub #chapter-6 .stage-entry { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: var(--space-5); border: 1px solid color-mix(in srgb, var(--color-border, #E5E7EB) 80%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--color-surface, #FFFFFF) 68%, transparent); } .soundbar-hub #chapter-6 .stage-entry:first-child { padding-top: var(--space-5); } .soundbar-hub #chapter-6 .stage-entry:hover, .soundbar-hub #chapter-6 .stage-entry:focus-visible { padding-left: var(--space-5); } .soundbar-hub #chapter-6 .stage-entry__body { gap: var(--space-1); } .soundbar-hub #chapter-6 .stage-entry__q { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.18; } .soundbar-hub #chapter-6 .stage-entry__gist { font-size: var(--fs-sm); line-height: var(--lh-snug); } .soundbar-hub #chapter-6 .stage-columns__aside { display: flex; } .soundbar-hub #chapter-6 .decision-module { position: static; width: 100%; min-height: 100%; gap: var(--space-4); padding: var(--space-6); } .soundbar-hub #chapter-6 .decision-module__title { font-size: clamp(22px, 2.2vw, 30px); } .soundbar-hub #chapter-6 .decision-prompt { padding-block: var(--space-3); } } /* ═══════════════════════════════════════════════════════════════════════════ 8. ROOM MATRIX (Ch 4 summary grid) --------------------------------------------------------------------------- Ch 4 opens with the decision-tree (room-size questions); closes with this 2D matrix as a returning-reader lookup. Rows = room size; columns = channel tier; cells = verdict (earns it / downgrade / avoid). Cell coloring comes from --color-accent (green-tinted "earns it"), neutral ink-muted ("downgrade"), and amber-muted ("avoid"). Legible without being alarmist — matches the Burton voice. ═══════════════════════════════════════════════════════════════════════════ */ .room-matrix-shell { margin: var(--space-8) 0; padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--color-surface-muted, #F6F4F1) 64%, #FFFFFF 36%); overflow-x: auto; scrollbar-gutter: stable; } .room-matrix { display: table; width: 100%; min-width: 900px; margin: 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; font-family: var(--font-sans); font-size: var(--fs-sm); background: var(--color-surface); } .room-matrix thead { background: var(--color-surface-muted, #F6F4F1); } .room-matrix th, .room-matrix td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); vertical-align: top; } .room-matrix th:last-child, .room-matrix td:last-child { border-right: 0; } .room-matrix tr:last-child td { border-bottom: 0; } .room-matrix th { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); } .room-matrix tbody th { background: var(--color-surface-muted, #F6F4F1); color: var(--color-ink); white-space: nowrap; } .room-matrix tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-surface-muted, #F6F4F1) 38%, #FFFFFF 62%); } .room-matrix__verdict { display: inline-block; padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; } .room-matrix__verdict--earns { background: var(--color-accent-soft); color: var(--color-accent); } .room-matrix__verdict--downgrade { background: #F3F4F6; color: var(--color-ink-muted); } .room-matrix__verdict--avoid { background: #FEE2E2; color: #991B1B; } .room-matrix__note { display: block; margin-top: 2px; font-family: var(--font-serif); font-size: 12px; font-style: italic; color: var(--color-ink-muted); line-height: 1.4; } /* ═══════════════════════════════════════════════════════════════════════════ 9. PLANNER-CTA ON-DARK READABILITY (if present in a chapter aside) --------------------------------------------------------------------------- Same fix as diffuser-hub / bass-hub — category-hub.css paints planner- cta eyebrows and launch buttons in --color-accent; on near-black backgrounds (if a soundbar chapter uses a dark aside) that collapses, so we retarget to the on-dark tone. ═══════════════════════════════════════════════════════════════════════════ */ .soundbar-hub .planner-cta__eyebrow { color: var(--color-accent-on-dark); } .soundbar-hub .planner-cta--note .planner-cta__launch { color: var(--color-accent-on-dark); } .soundbar-hub .planner-cta--note .planner-cta__launch:hover, .soundbar-hub .planner-cta--note .planner-cta__launch:focus-visible { background: var(--color-accent-on-dark); color: var(--color-ink); } /* ═══════════════════════════════════════════════════════════════════════════ 10. SOUNDBAR LISTENING JOURNEY --------------------------------------------------------------------------- Mirrors the teaching role of soundproofing's wall/leak SVGs: make the invisible experience chain visible before the reader compares products. ═══════════════════════════════════════════════════════════════════════════ */ .soundbar-journey { background: #FFFBEB; border-bottom: 1px solid var(--color-border, #E5E7EB); } .soundbar-journey__layout { display: grid; gap: var(--space-8); align-items: start; } .soundbar-journey__intro { max-width: 720px; } .soundbar-journey__intro .page-section__lede { max-width: none; } .soundbar-router-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 18%, #FDE68A 82%); border-radius: 18px; background: rgba(255, 255, 255, 0.64); box-shadow: 0 18px 50px rgba(120, 53, 15, 0.08); } .soundbar-router-summary span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: var(--space-2); border-radius: 999px; background: color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 52%, #FFFFFF 48%); color: var(--color-accent-hover, #92400E); font-family: var(--font-mono); font-size: var(--fs-xs, 12px); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .soundbar-lane-router { display: grid; gap: var(--space-4); margin-top: var(--space-8); } .soundbar-lane-card { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-5); padding: var(--space-5); border: 1px solid rgba(180, 83, 9, 0.14); border-radius: 16px; background: rgba(255, 255, 255, 0.68); box-shadow: 0 18px 44px rgba(120, 53, 15, 0.07); } .soundbar-lane-card--buy { border-color: color-mix(in srgb, var(--color-accent, #B45309) 36%, #FDE68A 64%); background: linear-gradient(180deg, rgba(254, 243, 199, 0.78), rgba(255, 255, 255, 0.72)), #FFFFFF; } .soundbar-lane-card__header { display: grid; gap: var(--space-2); } .soundbar-lane-card__kicker { color: var(--color-accent, #B45309); font-family: var(--font-mono); font-size: var(--fs-xs, 12px); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .soundbar-lane-card h3 { margin: 0; color: var(--color-ink, #111827); font-family: var(--font-sans); font-size: clamp(1.05rem, 1.6vw, 1.28rem); font-weight: 800; letter-spacing: 0; line-height: 1.18; } .soundbar-lane-card p { margin: 0; color: var(--color-ink, #374151); font-size: var(--fs-sm, 14px); line-height: 1.58; } .soundbar-lane-card__links { display: grid; gap: var(--space-2); align-content: start; } .soundbar-lane-card__links a, .soundbar-lane-card__deep-link { color: inherit; text-decoration: none; } .soundbar-lane-card__links a { display: flex; align-items: center; min-height: 38px; padding: var(--space-2) var(--space-3); border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 12%, #E5E7EB 88%); border-radius: 8px; background: rgba(255, 255, 255, 0.68); color: var(--color-ink, #111827); font-size: var(--fs-sm, 14px); font-weight: 700; line-height: 1.28; transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease; } .soundbar-lane-card__deep-link { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; color: var(--color-accent-hover, #92400E); font-family: var(--font-sans); font-size: var(--fs-sm, 14px); font-weight: 800; border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 36%, transparent); } @media (hover: hover) and (pointer: fine) { .soundbar-lane-card__links a:hover, .soundbar-lane-card__links a:focus-visible { border-color: var(--color-accent, #B45309); background: #FFFFFF; color: var(--color-accent-hover, #92400E); transform: translateY(-1px); } .soundbar-lane-card__deep-link:hover, .soundbar-lane-card__deep-link:focus-visible { color: var(--color-accent, #B45309); border-bottom-color: currentColor; } } @media (min-width: 760px) { .soundbar-lane-router { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1180px) { .soundbar-lane-router { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 620px) { .soundbar-router-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3); } .soundbar-lane-card { padding: var(--space-4); } } .soundbar-hub .treatment-shell > .page-section > .container { max-width: none; padding-inline: 0; } .soundbar-hub .page-section__header { max-width: min(100%, 42rem); } .soundbar-hub .page-section__lede { max-width: min(100%, 36rem); } @media (min-width: 760px) { .soundbar-hub .page-section__header { max-width: min(100%, 48rem); } .soundbar-hub .page-section__lede { max-width: min(100%, 42rem); } } @media (min-width: 1100px) { .soundbar-hub .treatment-shell > .page-section { grid-column: 2; } .soundbar-hub .page-section__header { max-width: min(100%, 56rem); } .soundbar-hub .page-section__lede { max-width: min(100%, 46rem); } } /* Chapter-rail progress, visited state, and tablet overrides are now handled entirely by the shared treatment-hub.css. */ .soundbar-journey__primary { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); color: var(--color-accent, #B45309); font-family: var(--font-sans); font-weight: 700; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 36%, transparent); transition: color 180ms ease, border-color 180ms ease; } .soundbar-funnel { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: var(--space-5); background: rgba(255, 255, 255, 0.64); border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 18%, #FDE68A 82%); border-radius: 18px; box-shadow: 0 18px 50px rgba(120, 53, 15, 0.08); } .soundbar-funnel__step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; } .soundbar-funnel__step + .soundbar-funnel__step::before { content: ""; position: absolute; left: 15px; top: calc(var(--space-3) * -1); width: 1px; height: var(--space-3); background: color-mix(in srgb, var(--color-accent, #B45309) 34%, transparent); } .soundbar-funnel__num { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--color-accent, #B45309); color: #FFF7ED; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; } .soundbar-funnel__body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } .soundbar-funnel__body strong { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 700; color: var(--color-ink, #111827); } .soundbar-funnel__body span { color: var(--color-ink, #374151); font-size: var(--fs-sm); line-height: 1.5; } .soundbar-start-points { display: grid; gap: var(--space-3); margin-top: var(--space-8); } .soundbar-start-point { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); color: inherit; text-decoration: none; background: rgba(255, 255, 255, 0.54); border: 1px solid rgba(180, 83, 9, 0.13); border-radius: 14px; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; } .soundbar-start-point__prompt { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent, #B45309); } .soundbar-start-point strong { color: var(--color-ink, #111827); font-size: var(--fs-base); line-height: 1.35; } .soundbar-start-point span:last-child { color: var(--color-ink, #374151); font-size: var(--fs-sm); line-height: 1.55; } @media (hover: hover) and (pointer: fine) { .soundbar-journey__primary:hover, .soundbar-journey__primary:focus-visible { color: var(--color-accent-hover, #92400E); border-color: currentColor; } .soundbar-start-point:hover, .soundbar-start-point:focus-visible { background: rgba(255, 255, 255, 0.82); border-color: var(--color-accent, #B45309); transform: translateY(-1px); } } @media (min-width: 680px) { .soundbar-start-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .soundbar-journey__layout { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: var(--space-10); } } @media (max-width: 560px) { .soundbar-funnel, .soundbar-start-point { padding-inline: var(--space-4); } } /* ═══════════════════════════════════════════════════════════════════════════ 11. ADJACENT READS — illustrated destination cards --------------------------------------------------------------------------- Mirrors the DJ/MIDI adjacent-read rail: horizontally browsable, illustrated, and purpose-led. These are not generic related posts; each card names the room-side problem that usually appears after a soundbar decision. ═══════════════════════════════════════════════════════════════════════════ */ .soundbar-hub .adj-card[data-hub="acoustic"] { --hub-accent: #0891B2; } .soundbar-hub .adj-card[data-hub="soundproofing"] { --hub-accent: #7C3AED; } .soundbar-hub .adj-card[data-hub="bass-traps"] { --hub-accent: #0D9488; } .soundbar-hub .adj-card[data-hub="panels"] { --hub-accent: #0284C7; } .soundbar-hub .adj-card[data-hub="diffusers"] { --hub-accent: #B45309; } .soundbar-hub #library, .soundbar-hub #next-topics { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg, #F2FBF9) 86%, #FFFFFF 14%) 0%, var(--color-bg, #F2FBF9) 100% ); border-top: 1px solid color-mix(in srgb, var(--color-accent, #06B6D4) 12%, var(--color-line, #E2E8F0) 88%); } .soundbar-hub #library { padding-block: clamp(48px, 7vw, 80px) clamp(56px, 8vw, 88px); } .soundbar-hub #next-topics { padding-block: clamp(48px, 7vw, 76px) clamp(64px, 8vw, 96px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-accent, #06B6D4) 10%, transparent); } .soundbar-hub #library > .container, .soundbar-hub #next-topics > .container { max-width: min(var(--container-wide, 1280px), 100%); } .soundbar-hub #library .page-section__header, .soundbar-hub #next-topics .page-section__header { margin-bottom: clamp(var(--space-8), 5vw, var(--space-12)); } .soundbar-hub #library .library { padding: clamp(var(--space-4), 3vw, var(--space-6)); border: 1px solid color-mix(in srgb, var(--color-accent, #06B6D4) 10%, var(--color-line, #E2E8F0) 90%); border-radius: 22px; background: color-mix(in srgb, var(--color-bg, #F2FBF9) 82%, #FFFFFF 18%); } .soundbar-hub #next-topics .page-section__lede { max-width: min(100%, 34rem); } @media (min-width: 760px) { .soundbar-hub #next-topics .page-section__lede { max-width: min(100%, 40rem); } } @media (min-width: 1100px) { .soundbar-hub #next-topics .page-section__lede { max-width: min(100%, 44rem); } } .soundbar-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: rgba(180, 83, 9, 0.25) 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%); } .soundbar-hub .adj-reads::-webkit-scrollbar { height: 6px; } .soundbar-hub .adj-reads::-webkit-scrollbar-track { background: transparent; } .soundbar-hub .adj-reads::-webkit-scrollbar-thumb { background: rgba(180, 83, 9, 0.22); border-radius: 4px; } .soundbar-hub .adj-reads::-webkit-scrollbar-thumb:hover { background: rgba(180, 83, 9, 0.4); } .soundbar-hub .adj-reads .adj-card { flex: 0 0 min(84vw, 21rem); scroll-snap-align: start; } @media (min-width: 780px) { .soundbar-hub .adj-reads .adj-card { flex-basis: clamp(21rem, 34vw, 23.5rem); } } @media (min-width: 1120px) { .soundbar-hub .adj-reads .adj-card { flex-basis: clamp(22rem, 29vw, 25rem); } } .soundbar-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, #B45309)) 4%, #FFFFFF 96%); transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease; } .soundbar-hub .adj-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hub-accent, var(--color-accent, #B45309)); opacity: 0.6; transition: opacity 200ms ease; } .soundbar-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, #B45309)) 3%, transparent); } .soundbar-hub .adj-card__svg { display: block; width: 100%; max-width: 160px; height: auto; color: var(--hub-accent, var(--color-accent, #B45309)); opacity: 0.72; transition: opacity 280ms ease; } .soundbar-hub .adj-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-5); } .soundbar-hub .adj-card__role { color: var(--hub-accent, var(--color-accent, #B45309)); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; } .soundbar-hub .adj-card__name { margin: 0; color: var(--color-ink, #111827); font-family: var(--font-sans); font-size: var(--fs-xl, 24px); font-weight: 800; letter-spacing: 0; line-height: 1.15; transition: color 200ms ease; } .soundbar-hub .adj-card__hook { flex: 1; margin: 0; color: var(--color-ink-muted, #6B7280); font-family: var(--font-serif, "Source Serif 4", serif); font-size: var(--fs-sm, 14px); line-height: 1.6; } .soundbar-hub .adj-card__cta { margin-top: var(--space-2); color: var(--hub-accent, var(--color-accent, #B45309)); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; transition: letter-spacing 200ms ease; } @media (hover: hover) and (pointer: fine) { .soundbar-hub .adj-card:hover, .soundbar-hub .adj-card:focus-visible { border-color: var(--hub-accent, var(--color-accent, #B45309)); box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--hub-accent, var(--color-accent, #B45309)) 20%, transparent); transform: translateY(-3px); } .soundbar-hub .adj-card:hover::before, .soundbar-hub .adj-card:focus-visible::before { opacity: 1; } .soundbar-hub .adj-card:hover .adj-card__svg, .soundbar-hub .adj-card:focus-visible .adj-card__svg { opacity: 0.88; } .soundbar-hub .adj-card:hover .adj-card__name, .soundbar-hub .adj-card:focus-visible .adj-card__name { color: var(--hub-accent, var(--color-accent, #B45309)); } .soundbar-hub .adj-card:hover .adj-card__cta, .soundbar-hub .adj-card:focus-visible .adj-card__cta { letter-spacing: 0.06em; } } @media (max-width: 520px) { .soundbar-hub .adj-card__visual { padding: var(--space-4) var(--space-4) var(--space-2); } .soundbar-hub .adj-card__svg { max-width: 120px; } } /* ═══════════════════════════════════════════════════════════════════════════ CHAPTER 01 DIAGNOSIS — less prose, clearer routing --------------------------------------------------------------------------- The opening chapter now works as a first-principles diagnosis: explain the TV-audio failure visually, then route the reader by symptom into articles, tier sections, or adjacent hubs. ═══════════════════════════════════════════════════════════════════════════ */ .soundbar-hub .soundbar-diagnosis__lede { max-width: 76ch; } .soundbar-diagnosis { display: grid; gap: clamp(22px, 4vw, 42px); align-items: center; margin-top: var(--space-6); padding-block: clamp(22px, 4vw, 40px); border-top: 1px solid var(--color-line, #E5E7EB); border-bottom: 1px solid var(--color-line, #E5E7EB); } @media (min-width: 1100px) { .soundbar-diagnosis { grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr); } } .soundbar-diagnosis__visual { min-width: 0; width: 100%; max-width: 760px; justify-self: center; padding: clamp(10px, 2vw, 18px); border: 1px solid color-mix(in srgb, var(--color-accent) 20%, #E5E7EB 80%); border-radius: 12px; background: linear-gradient(180deg, rgba(254, 243, 199, 0.34), rgba(255, 255, 255, 0.84)); overflow: hidden; } .soundbar-diagnosis__svg { display: block; width: 100%; height: auto; color: var(--color-accent, #B45309); } .soundbar-diagnosis__label, .soundbar-diagnosis__callouts text { font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; text-anchor: middle; } .soundbar-diagnosis__label { font-size: 13px; } .soundbar-diagnosis__label--bad { fill: #9A3412; } .soundbar-diagnosis__label--good { fill: #0D9488; } .soundbar-diagnosis__panel { fill: #FFFFFF; stroke-width: 1.4; } .soundbar-diagnosis__panel--bad { stroke: color-mix(in srgb, #9A3412 26%, #E5E7EB 74%); } .soundbar-diagnosis__panel--good { stroke: color-mix(in srgb, #0D9488 26%, #E5E7EB 74%); } .soundbar-diagnosis__device--bad .soundbar-diagnosis__tv-frame { fill: #FFF7ED; stroke: #9A3412; stroke-width: 2; } .soundbar-diagnosis__device--bad .soundbar-diagnosis__tv-screen { fill: rgba(154, 52, 18, 0.08); stroke: #9A3412; stroke-width: 1.2; } .soundbar-diagnosis__device--bad .soundbar-diagnosis__speaker { fill: #FED7AA; stroke: #9A3412; stroke-width: 1.2; } .soundbar-diagnosis__device--good .soundbar-diagnosis__tv-frame { fill: #F0FDFA; stroke: #0D9488; stroke-width: 2; } .soundbar-diagnosis__device--good .soundbar-diagnosis__tv-screen { fill: rgba(13, 148, 136, 0.08); stroke: #0D9488; stroke-width: 1.2; } .soundbar-diagnosis__soundbar, .soundbar-diagnosis__driver { fill: #FFFFFF; stroke: #0D9488; stroke-width: 1.8; } .soundbar-diagnosis__signal path { fill: none; stroke-width: 2; stroke-linecap: round; } .soundbar-diagnosis__signal--bad path { stroke: #9A3412; stroke-dasharray: 7 8; opacity: 0.58; } .soundbar-diagnosis__signal--good path { stroke: #0D9488; opacity: 0.72; } .soundbar-diagnosis__callouts text { font-size: 12px; } .soundbar-diagnosis__callouts--bad text { fill: #9A3412; } .soundbar-diagnosis__callouts--good text { fill: #0D9488; } .soundbar-diagnosis__logic { min-width: 0; } .soundbar-diagnosis__eyebrow, .soundbar-symptom-router__eyebrow, .soundbar-symptom-route__tag, .soundbar-conversion-strip__label { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs, 12px); font-weight: 800; letter-spacing: 0; text-transform: uppercase; color: var(--color-accent-hover, #92400E); } .soundbar-diagnosis__title { max-width: min(100%, 34rem); margin: var(--space-2) 0 var(--space-5); font-family: var(--font-serif); font-size: clamp(24px, 3vw, 34px); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--color-ink, #111827); } .soundbar-diagnosis__levers { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line, #E5E7EB); } .soundbar-diagnosis__levers li { display: grid; grid-template-columns: minmax(82px, 0.35fr) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line, #E5E7EB); } .soundbar-diagnosis__levers li:last-child { border-bottom: 0; } .soundbar-diagnosis__levers strong { font-family: var(--font-sans); font-size: var(--fs-base, 16px); color: var(--color-ink, #111827); } .soundbar-diagnosis__levers span { font-family: var(--font-serif); font-size: var(--fs-base, 16px); line-height: 1.55; color: var(--color-ink-muted, #4B5563); } .soundbar-symptom-router { margin-top: clamp(var(--space-5), 3vw, var(--space-7)); } .soundbar-symptom-router__header { display: grid; gap: var(--space-2); max-width: 760px; margin-bottom: var(--space-4); } .soundbar-symptom-router__eyebrow { width: fit-content; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 16%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 30%, transparent); color: color-mix(in srgb, var(--color-accent-hover, #92400E) 82%, var(--color-ink-muted, #4B5563) 18%); font-size: 11px; letter-spacing: 0.06em; line-height: 1.2; } .soundbar-symptom-router__title { margin: 0; font-family: var(--font-sans); font-size: clamp(18px, 2vw, 24px); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-ink, #111827); } .soundbar-trouble-flow { display: grid; gap: var(--space-5); padding: clamp(var(--space-4), 2.4vw, var(--space-6)); border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 8%, var(--color-line, #E5E7EB) 92%); border-radius: 20px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 24%, transparent) 0 18%, transparent 46%), color-mix(in srgb, var(--color-bg, #F2FBF9) 92%, #FFFFFF 8%); } .soundbar-trouble-flow__start { position: relative; display: grid; gap: var(--space-2); max-width: 48rem; margin-inline: auto; padding: var(--space-5); border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 26%, var(--color-border, #E5E7EB) 74%); border-radius: 18px; background: radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 62%, transparent) 0 18%, transparent 42%), color-mix(in srgb, var(--color-surface-muted, #F6F4F1) 62%, #FFFFFF 38%); } .soundbar-trouble-flow__start span, .soundbar-trouble-node span { font-family: var(--font-mono); font-size: var(--fs-xs, 12px); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .soundbar-trouble-flow__start span { color: var(--color-accent-hover, #92400E); } .soundbar-trouble-flow__start strong { font-family: var(--font-serif); font-size: clamp(24px, 2.8vw, 32px); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--color-ink, #111827); } .soundbar-trouble-flow__start p { max-width: 62ch; margin: 0; font-family: var(--font-serif); font-size: var(--fs-base, 16px); line-height: 1.55; color: var(--color-ink-muted, #4B5563); } .soundbar-trouble-flow__paths { position: relative; display: grid; gap: var(--space-5); padding-top: var(--space-7); } .soundbar-trouble-flow__paths::before { content: ""; position: absolute; top: 0; left: 50%; height: var(--space-7); border-left: 1px dashed color-mix(in srgb, var(--color-accent, #B45309) 52%, transparent); } .soundbar-trouble-path { --trouble-tone: var(--color-accent, #B45309); position: relative; display: grid; gap: var(--space-4); min-width: 0; padding-left: var(--space-6); } .soundbar-trouble-path::before { content: ""; position: absolute; top: 0; bottom: 0; left: 12px; border-left: 1px dashed color-mix(in srgb, var(--trouble-tone) 42%, transparent); } .soundbar-trouble-path--signal { --trouble-tone: #B45309; } .soundbar-trouble-path--quality { --trouble-tone: #0D9488; } .soundbar-trouble-path--format { --trouble-tone: #2563EB; } .soundbar-trouble-node { position: relative; display: grid; gap: var(--space-2); min-width: 0; margin-left: 0; padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--trouble-tone) 22%, var(--color-border, #E5E7EB) 78%); border-radius: 16px; background: color-mix(in srgb, var(--trouble-tone) 5%, #FFFFFF 95%); } .soundbar-trouble-node::before { content: ""; position: absolute; top: 50%; left: calc(var(--space-6) * -1 + 12px); width: calc(var(--space-6) - 12px); border-top: 1px dashed color-mix(in srgb, var(--trouble-tone) 42%, transparent); } .soundbar-trouble-node::after { content: none; } .soundbar-trouble-node--decision { background: color-mix(in srgb, var(--trouble-tone) 10%, #FFFFFF 90%); } .soundbar-trouble-node--answer { color: inherit; text-decoration: none; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease; } .soundbar-trouble-node span { color: var(--trouble-tone); } .soundbar-trouble-node strong { font-family: var(--font-sans); font-size: clamp(18px, 2vw, 23px); font-weight: 800; line-height: 1.15; color: var(--color-ink, #111827); } .soundbar-trouble-node em { font-family: var(--font-serif); font-size: var(--fs-sm, 14px); font-style: normal; line-height: 1.5; color: var(--color-ink-muted, #4B5563); } .soundbar-trouble-node b { width: fit-content; margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--fs-xs, 12px); font-weight: 800; letter-spacing: 0; text-transform: uppercase; color: var(--trouble-tone); } @media (min-width: 880px) { .soundbar-trouble-flow__start::before { content: ""; position: absolute; left: 50%; bottom: calc(var(--space-6) * -1); height: var(--space-6); border-left: 1px dashed color-mix(in srgb, var(--color-accent, #B45309) 52%, transparent); } .soundbar-trouble-flow__paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-8); } .soundbar-trouble-flow__paths::before { top: calc(var(--space-8) / 2); left: 12px; right: 12px; width: auto; height: 0; border-top: 1px dashed color-mix(in srgb, var(--color-accent, #B45309) 52%, transparent); border-left: 0; } .soundbar-trouble-flow__paths::after { content: ""; position: absolute; top: 0; left: 50%; height: calc(var(--space-8) / 2); border-left: 1px dashed color-mix(in srgb, var(--color-accent, #B45309) 52%, transparent); } .soundbar-trouble-path::after { content: ""; position: absolute; top: calc(var(--space-8) / -2); left: 12px; height: calc(var(--space-8) / 2); border-left: 1px dashed color-mix(in srgb, var(--trouble-tone) 42%, transparent); } .soundbar-trouble-path::before { top: 0; } } @media (hover: hover) and (pointer: fine) { .soundbar-trouble-node--answer:hover, .soundbar-trouble-node--answer:focus-visible { border-color: color-mix(in srgb, var(--trouble-tone) 48%, var(--color-border, #E5E7EB) 52%); background: color-mix(in srgb, var(--trouble-tone) 8%, #FFFFFF 92%); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--trouble-tone) 40%, transparent); transform: translateY(-2px); } } .soundbar-symptom-router__list { display: grid; gap: 0; border-top: 1px solid var(--color-line, #E5E7EB); } .soundbar-symptom-route { --symptom-tone: var(--color-accent, #B45309); display: grid; grid-template-columns: minmax(86px, 0.26fr) minmax(0, 0.74fr); gap: var(--space-3) var(--space-5); align-items: start; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line, #E5E7EB); color: inherit; text-decoration: none; transition: color 180ms ease, background 180ms ease, padding-inline 180ms ease; } .soundbar-symptom-route--dialogue { --symptom-tone: #B45309; } .soundbar-symptom-route--bass { --symptom-tone: #D97706; } .soundbar-symptom-route--compare { --symptom-tone: #0D9488; } .soundbar-symptom-route--wrong { --symptom-tone: #7C3AED; } .soundbar-symptom-route__tag { grid-row: 1 / span 3; color: var(--symptom-tone); } .soundbar-symptom-route strong { font-family: var(--font-sans); font-size: clamp(20px, 2.3vw, 28px); line-height: 1.16; color: var(--color-ink, #111827); } .soundbar-symptom-route > span:not(.soundbar-symptom-route__tag) { max-width: 58ch; font-family: var(--font-serif); font-size: var(--fs-base, 16px); line-height: 1.58; color: var(--color-ink-muted, #4B5563); } .soundbar-symptom-route em { width: fit-content; font-family: var(--font-mono); font-size: var(--fs-xs, 12px); font-style: normal; font-weight: 800; letter-spacing: 0; text-transform: uppercase; color: var(--symptom-tone); } @media (hover: hover) and (pointer: fine) { .soundbar-symptom-route:hover, .soundbar-symptom-route:focus-visible { padding-inline: var(--space-4); background: color-mix(in srgb, var(--symptom-tone) 7%, #FFFFFF 93%); } } /* ── Soundbar myths block (Chapter 8 troubleshoot) ───────────────────── The "Bad assumptions" sub-section inside Chapter 8. Sits below the symptom router and reuses .soundbar-symptom-router__header for visual parity (eyebrow + serif title), then drops a lede paragraph above the shared .myth-grid layout. ──────────────────────────────────────────────────────────────────── */ .soundbar-myths { margin-top: clamp(28px, 5vw, 52px); } .soundbar-myths__lede { max-width: 76ch; margin: 0 0 var(--space-5); font-family: var(--font-serif); font-size: var(--fs-base, 16px); line-height: 1.58; color: var(--color-ink-muted, #4B5563); } .soundbar-hub .soundbar-myths .myth-grid { --myth-claim-color: #EF4444; display: flex; flex-direction: column; } .soundbar-hub .soundbar-myths .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); } .soundbar-hub .soundbar-myths .myth-row:first-child { border-top: 2px solid var(--color-ink); } .soundbar-hub .soundbar-myths .myth-row:last-child { border-bottom: 1px solid var(--color-line); } .soundbar-hub .soundbar-myths .myth-row__myth { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .soundbar-hub .soundbar-myths .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; } .soundbar-hub .soundbar-myths .myth-row__tag--myth { color: color-mix(in srgb, var(--myth-claim-color) 68%, var(--color-ink-muted)); } .soundbar-hub .soundbar-myths .myth-row__tag--reality { color: var(--color-accent); } .soundbar-hub .soundbar-myths .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; } .soundbar-hub .soundbar-myths .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)); } .soundbar-hub .soundbar-myths .myth-row__tag--reality .myth-row__tag-icon { background: var(--color-accent); color: var(--color-surface); } .soundbar-hub .soundbar-myths .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; } .soundbar-hub .soundbar-myths .myth-row__divider { display: flex; align-items: center; justify-content: center; min-width: 2rem; color: var(--color-ink-subtle); font-family: var(--font-mono); } .soundbar-hub .soundbar-myths .myth-row__reality { display: flex; flex-direction: column; gap: var(--space-3); } .soundbar-hub .soundbar-myths .myth-row__truth { font-family: var(--font-serif); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--color-ink); margin: 0; } .soundbar-hub .soundbar-myths .myth-row__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .soundbar-hub .soundbar-myths .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); } .soundbar-hub .soundbar-myths .myth-row__link:hover, .soundbar-hub .soundbar-myths .myth-row__link:focus-visible { outline: none; color: var(--color-accent-hover); border-color: var(--color-accent); background: var(--color-accent-soft); } .soundbar-hub .soundbar-myths .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); } .soundbar-hub .soundbar-myths .myth-row__link:hover::after, .soundbar-hub .soundbar-myths .myth-row__link:focus-visible::after { transform: translateX(2px); } @media (max-width: 899px) and (min-width: 620px) { .soundbar-hub .soundbar-myths .myth-row { column-gap: var(--space-5); padding: var(--space-6) 0; } .soundbar-hub .soundbar-myths .myth-row__claim { font-size: var(--fs-lg); } } @media (max-width: 619px) { .soundbar-hub .soundbar-myths .myth-row { grid-template-columns: 1fr; row-gap: var(--space-4); padding: var(--space-6) 0; } .soundbar-hub .soundbar-myths .myth-row__divider { justify-content: flex-start; width: 24px; height: 24px; transform: rotate(90deg); } .soundbar-hub .soundbar-myths .myth-row__claim { font-size: var(--fs-lg); } } .soundbar-conversion-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-accent, #B45309); background: color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 44%, #FFFFFF 56%); } .soundbar-conversion-strip__label { margin-right: var(--space-1); color: var(--color-ink, #111827); } .soundbar-conversion-strip a { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--color-accent) 28%, #D1D5DB 72%); border-radius: 999px; background: #FFFFFF; color: var(--color-accent-hover, #92400E); font-family: var(--font-sans); font-size: var(--fs-sm, 14px); font-weight: 700; line-height: 1.2; text-decoration: none; transition: background 160ms ease, border-color 160ms ease; } @media (hover: hover) and (pointer: fine) { .soundbar-conversion-strip a:hover, .soundbar-conversion-strip a:focus-visible { border-color: var(--color-accent, #B45309); background: #FFFBEB; } } @media (max-width: 720px) { .soundbar-hub .chapter-heading { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--space-2); } .soundbar-hub .chapter-heading__text { min-width: 0; max-width: 100%; overflow-wrap: break-word; font-size: clamp(30px, 8.4vw, 40px); line-height: 1.08; } .soundbar-hub .chapter-heading__copy-link { grid-column: 1; grid-row: 3; justify-self: start; width: fit-content; } .soundbar-diagnosis__levers li, .soundbar-symptom-route { grid-template-columns: 1fr; } .soundbar-symptom-route__tag { grid-row: auto; } .soundbar-conversion-strip, .soundbar-conversion-strip a { width: 100%; } .soundbar-conversion-strip a { justify-content: center; text-align: center; } } @media (max-width: 460px) { .soundbar-diagnosis__visual { padding: 6px; border-radius: 8px; } .soundbar-diagnosis__label { font-size: 11px; } .soundbar-diagnosis__callouts text { font-size: 10px; } } .soundbar-hub .chapter, .soundbar-hub .chapter-heading { scroll-margin-top: 136px; } .soundbar-hub .chapter, .soundbar-hub .chapter__header, .soundbar-hub .chapter-heading { min-width: 0; max-width: 100%; } .soundbar-hub .soundbar-chapter-shell-container { max-width: min(var(--container-wide, 1280px), 100%); } .soundbar-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); } .soundbar-hub .chapter-heading__num { grid-column: 1; grid-row: 1; } .soundbar-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; } .soundbar-hub .spec-card__spec, .soundbar-hub .decision-module__title, .soundbar-hub .pick-tier__criterion, .soundbar-hub .pick-tier__product, .soundbar-hub .soundbar-connection-check__title { font-family: var(--font-serif); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); } .soundbar-hub .spec-card__spec, .soundbar-hub .decision-module__title, .soundbar-hub .pick-tier__criterion, .soundbar-hub .pick-tier__product { font-size: clamp(20px, 2vw, 26px); } .soundbar-hub .soundbar-connection-check__title { margin: var(--space-2) 0 0; font-size: clamp(24px, 3vw, 34px); } .soundbar-hub .pick-tier__body { gap: var(--space-5); } .soundbar-hub .pick-tier { cursor: pointer; overflow: hidden; width: 100%; } .soundbar-hub .pick-tier::before { top: 0; left: 0; right: 0; border-top-left-radius: inherit; border-top-right-radius: inherit; } .soundbar-hub .pick-tier__card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; text-decoration: none; } .soundbar-hub .pick-tier__meta, .soundbar-hub .pick-tier__body { position: relative; z-index: 2; pointer-events: none; } .soundbar-hub .pick-tier__buy, .soundbar-hub .pick-tier__learn { position: relative; z-index: 3; pointer-events: auto; } .soundbar-hub .pick-tier__card-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent, #B45309) 70%, #FFFFFF 30%); outline-offset: 4px; } .soundbar-hub .pick-tier__summary { display: grid; gap: var(--space-3); min-width: 0; max-width: 58rem; } .soundbar-hub .pick-tier__fit { display: inline-flex; width: fit-content; max-width: 100%; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 20%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 42%, #FFFFFF 58%); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; letter-spacing: 0.04em; color: var(--color-accent-hover, #92400E); } .soundbar-hub .pick-tier__product { margin: var(--space-1) 0 0; color: var(--color-ink, #111827); } .soundbar-hub .pick-tier__reason { max-width: 58ch; margin: 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.55; color: var(--color-ink-muted, #4B5563); } .soundbar-hub .pick-tier__media { display: grid; place-items: center; width: 100%; min-height: 8.5rem; margin-block: var(--space-2) var(--space-3); padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--color-border, #E5E7EB) 82%, transparent); border-radius: 14px; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 40%, transparent) 0 34%, transparent 68%), color-mix(in srgb, var(--color-surface-muted, #F6F4F1) 42%, #FFFFFF 58%); overflow: hidden; } .soundbar-hub .pick-tier__image { display: block; width: 100%; max-width: 12rem; height: auto; max-height: 8rem; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(17, 24, 39, 0.12)); } .soundbar-hub .pick-tier__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border, #E5E7EB); } .soundbar-hub .pick-tier__buy, .soundbar-hub .pick-tier__learn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 999px; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 800; line-height: 1.2; text-decoration: none; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .soundbar-hub .pick-tier__buy { padding: 0 var(--space-5); background: var(--color-accent, #B45309); color: #FFF7ED; } .soundbar-hub .pick-tier__learn { padding: 0 var(--space-4); border: 1px solid color-mix(in srgb, var(--color-accent, #B45309) 24%, transparent); color: var(--color-accent-hover, #92400E); } .soundbar-hub .pick-tier__buy:hover, .soundbar-hub .pick-tier__buy:focus-visible { background: var(--color-accent-hover, #92400E); transform: translateY(-1px); } .soundbar-hub .pick-tier__learn:hover, .soundbar-hub .pick-tier__learn:focus-visible { border-color: color-mix(in srgb, var(--color-accent, #B45309) 48%, transparent); background: color-mix(in srgb, var(--color-accent-soft, #FEF3C7) 34%, #FFFFFF 66%); color: var(--color-accent-hover, #92400E); } .soundbar-hub .pick-tier__quick { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: 0; } .soundbar-hub .pick-tier__quick div { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--color-border, #E5E7EB) 82%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--color-surface-muted, #F6F4F1) 48%, #FFFFFF 52%); } .soundbar-hub .pick-tier__quick dt { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted, #4B5563); } .soundbar-hub .pick-tier__quick dd { margin: 0; font-family: var(--font-serif); font-size: var(--fs-sm); line-height: 1.45; color: var(--color-ink, #111827); } .soundbar-hub .pick-tiers__disclosure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px dashed var(--color-border, #E5E7EB); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--color-ink-muted, #4B5563); } .soundbar-hub .pick-tiers__disclosure-label { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-hover, #92400E); } .soundbar-hub .pick-tiers__disclosure-text { flex: 1 1 28rem; min-width: 0; } .soundbar-hub .pick-tiers__disclosure-link { color: var(--color-ink, #111827); font-weight: 700; text-decoration: none; } .soundbar-hub .pick-tiers__disclosure-link:hover, .soundbar-hub .pick-tiers__disclosure-link:focus-visible { color: var(--color-accent-hover, #92400E); } @media (min-width: 760px) { .soundbar-hub .pick-tier__quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } .soundbar-hub .pick-tier__media { min-height: 10rem; padding: var(--space-4); } .soundbar-hub .pick-tier__image { max-width: 14rem; max-height: 9rem; } } @media (min-width: 1100px) { .soundbar-hub .pick-tier { grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr); gap: clamp(var(--space-8), 4vw, var(--space-12)); padding: clamp(var(--space-8), 4vw, var(--space-10)); align-items: stretch; } .soundbar-hub .pick-tier__body { display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "summary actions" "quick quick"; align-items: start; align-content: center; column-gap: clamp(var(--space-6), 3vw, var(--space-10)); row-gap: clamp(var(--space-8), 5vw, var(--space-12)); padding-block: clamp(var(--space-5), 3vw, var(--space-8)); } .soundbar-hub .pick-tier__summary { grid-area: summary; max-width: min(100%, 44rem); gap: var(--space-4); } .soundbar-hub .pick-tier__actions { grid-area: actions; display: grid; gap: var(--space-2); justify-self: end; min-width: 10rem; padding-bottom: 0; border-bottom: 0; } .soundbar-hub .pick-tier__buy, .soundbar-hub .pick-tier__learn { width: 100%; min-width: 0; white-space: nowrap; } .soundbar-hub .pick-tier__media { min-height: clamp(11rem, 18vw, 15rem); } .soundbar-hub .pick-tier__image { max-width: clamp(13rem, 18vw, 18rem); max-height: clamp(9.5rem, 13vw, 12rem); } .soundbar-hub .pick-tier__quick { grid-area: quick; } } .soundbar-hub .chapter-heading__copy-link { grid-column: 2; grid-row: 1; justify-self: end; } @media (min-width: 1100px) { .soundbar-hub .chapter, .soundbar-hub .chapter-heading { scroll-margin-top: 96px; } } .soundbar-hub .library__item, .soundbar-hub .pick-tier { scroll-margin-top: 112px; } .soundbar-hub .library__featured { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-8); } @media (min-width: 640px) { .soundbar-hub .library__featured { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.75rem), 1fr)); } } .soundbar-hub .library__hero { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-5); overflow: hidden; color: inherit; text-decoration: none; border: 1px solid var(--color-line, #E7E2DC); border-radius: 10px; background: var(--color-surface, #FFFFFF); transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; } .soundbar-hub .library__hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-accent, #B45309); opacity: 0.6; } @media (hover: hover) and (pointer: fine) { .soundbar-hub .library__hero:hover, .soundbar-hub .library__hero:focus-visible { outline: none; border-color: var(--color-accent, #B45309); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--color-accent, #B45309) 24%, transparent); transform: translateY(-2px); } } .soundbar-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, #B45309); } .soundbar-hub .library__hero-title { font-family: var(--font-sans, Inter, sans-serif); font-size: var(--fs-lg, 18px); font-weight: 800; line-height: 1.25; color: var(--color-ink, #111827); } .soundbar-hub .library__hero-desc { flex: 1; 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); } .soundbar-hub .library__hero-cta { margin-top: var(--space-1); font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--color-accent, #B45309); } .soundbar-hub .library__filters { margin-bottom: var(--space-6); } .soundbar-hub .library__item[data-stage="start"] { --stage-color: #2563EB; } .soundbar-hub .library__item[data-stage="decide"] { --stage-color: #D97706; } .soundbar-hub .library__item[data-stage="shop"] { --stage-color: #059669; } .soundbar-hub .library__item { border-left: 3px solid var(--stage-color, transparent); } .soundbar-hub .library__stage-tag { color: var(--stage-color, var(--color-accent, #B45309)); } .soundbar-hub .library__filter-dot { display: inline-block; width: 6px; height: 6px; margin-right: 2px; border-radius: 50%; background: var(--color-accent, #B45309); flex-shrink: 0; } .soundbar-hub [data-filter="all"] .library__filter-dot { background: var(--color-accent, #B45309); } .soundbar-hub [data-filter="start"] .library__filter-dot { background: #2563EB; } .soundbar-hub [data-filter="decide"] .library__filter-dot { background: #D97706; } .soundbar-hub [data-filter="shop"] .library__filter-dot { background: #059669; } .soundbar-hub .library__link { padding-left: var(--space-3); transition: margin-inline 180ms ease, padding-left var(--duration-base) var(--ease-out), padding-right 180ms ease, background 180ms ease, box-shadow 180ms ease, border-radius 180ms ease; } .soundbar-hub .library__link:hover, .soundbar-hub .library__link:focus-visible { margin-inline: var(--space-1); padding-inline: var(--space-3); border-radius: 8px; background: color-mix(in srgb, var(--stage-color, var(--color-accent, #B45309)) 8%, #FFFFFF 92%); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--stage-color, var(--color-accent, #B45309)) 70%, transparent); } .soundbar-hub .library__item:target .library__link, .soundbar-hub .pick-tier:target { border-color: var(--stage-color, var(--color-accent, #B45309)); box-shadow: inset 3px 0 0 var(--stage-color, var(--color-accent, #B45309)); background: color-mix(in srgb, var(--stage-color, var(--color-accent, #B45309)) 10%, #FFFFFF 90%); } .soundbar-hub .library__item:target .library__link { margin-inline: var(--space-1); padding-inline: var(--space-3); border-radius: 8px; } .soundbar-hub .library__item:target .library__link:hover, .soundbar-hub .library__item:target .library__link:focus-visible { background: color-mix(in srgb, var(--stage-color, var(--color-accent, #B45309)) 14%, #FFFFFF 86%); box-shadow: inset 3px 0 0 var(--stage-color, var(--color-accent, #B45309)); }