/* ============================================================================ FOAM HUB — tool identity override ---------------------------------------------------------------------------- Foam is the "starter / accessible" tool in the treatment family. The colour system reflects that: a vivid blue-700 accent that reads as practical and approachable — matching foam's character in the buyer's mind — while staying clearly distinct from acoustic-panels (teal), bass traps (terracotta), and diffusers (violet). Load order: tokens.css base design tokens treatment-hub.css hub shell chrome (chips, sticky rail, chapter heading) category-hub.css editorial content cards (stage-entry, spec-grid, room-grid, pick-row, install-grid, library, shape-list, shape-card) chapter-hub.css shared chapter mechanics (directive-path, priority reorder, install-block, rhythm) foam-hub.css <- this file — foam colour identity Scope: the override targets the foam hub page only. We scope it to the .foam-hub class on so nothing bleeds into the rest of the site (e.g. the site header's cyan accent on "Acoustic Treatment" nav item should stay cyan, not foam's blue). ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ 1. TOKENS — foam colour identity swap --------------------------------------------------------------------------- Re-point the site's --color-accent* tokens to the foam blue family when the page body carries the .foam-hub class. Every downstream rule that uses var(--color-accent) (chapter heading eyebrows, chip active state, directive-path step numbers, CTAs, etc.) picks up the new tone automatically — zero per-component rewrites needed. Accent scale: --color-accent blue-700 (#1D4ED8) → the main brand moment --color-accent-hover blue-800 (#1E40AF) → hover / focus darker --color-accent-soft blue-100 (#DBEAFE) → soft surface tints --color-accent-subtle blue-200 (#BFDBFE) → card hover borders --color-accent-on-dark blue-300 (#93C5FD) → brighter on dark hero ═══════════════════════════════════════════════════════════════════════════ */ .foam-hub { --color-accent: var(--tool-foam-accent, #1D4ED8); --color-accent-hover: #1E40AF; --color-accent-soft: #DBEAFE; --color-accent-subtle: #BFDBFE; --foam-section-spacing: clamp(var(--space-10), 6vw, var(--space-16)); /* Hero "on-dark" emphasis tone. Blue-700 reads well on the light body (chapter headings, CTAs, eyebrows) but darkens against the near-black hero background — the "widely misunderstood" italic loses contrast. This token gives the hero a brighter blue-300 so the emphasis still works against a dark backdrop without abandoning the palette. */ --color-accent-on-dark: #93C5FD; /* blue-300 */ } /* ── Hero readability fix ─────────────────────────────────────────────── The shared .mission__statement em rule (mission.css) uses color: var(--color-accent). With foam's blue-700 accent, that italic is dark-blue-on-near-black with too little contrast to read at a glance. Swap it for the "on-dark" token above. Italic / font-style untouched. */ .foam-hub .mission__statement em { color: var(--color-accent-on-dark, #93C5FD); } /* ═══════════════════════════════════════════════════════════════════════════ 2. HERO BACKDROP — foam-specific waveform motif --------------------------------------------------------------------------- The panels hub leans on the mission backdrop's default waveform. For foam, nudge the backdrop opacity down a touch — we want the hero copy and the blue accent moments to carry the visual weight rather than compete with the pattern. ═══════════════════════════════════════════════════════════════════════════ */ .foam-hub .mission--hub .mission__backdrop { align-items: center; justify-content: center; padding: 0; overflow: hidden; opacity: 0.2; } .foam-hub .mission--hub .mission__backdrop .foam-hero-visual { width: min(92vw, 760px); height: auto; color: color-mix(in srgb, var(--color-accent-on-dark) 78%, var(--color-surface)); } /* ═══════════════════════════════════════════════════════════════════════════ 3. SHAPE GRID — inherits from category-hub.css --------------------------------------------------------------------------- Ch 3's .shape-list / .shape-card is an elegant horizontal-line list already defined by category-hub.css (.decision-module--shapes). No foam-specific overrides are needed — the base design uses --color-ink / --color-ink-muted for the card copy and --color-accent-hover only for a single "Best for:" lead-in, which picks up foam's blue automatically. Earlier iterations of this file added chunky bordered-card overrides that fought the design intent; removing them was part of iteration 2. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 4. CHIP ACTIVE STATE — no override needed --------------------------------------------------------------------------- The base .reader-chip active state in treatment-hub.css uses neutral white-alpha fills (rgba(255,255,255,0.08) background, rgba(255,255,255, 0.45) border, white text) — it is NOT accent-driven. So foam inherits the correct look without any override. This note prevents future editors from "fixing" a non-issue. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 5. DIRECTIVE-PATH ON-DARK READABILITY --------------------------------------------------------------------------- The directive-path (chapter-hub.css) uses var(--color-accent) for its step numbers, intro , CTA links, and the "Show step N of 4" button. On the acoustic-panels hub that accent is teal-700 (saturated, readable on dark). On foam the accent is blue-700 (#1D4ED8) which darkens against the near-black hero background — exactly the same contrast problem the "widely misunderstood" italic had. Fix: override each of those elements inside the hero so they pull the "on-dark" blue token (#93C5FD) instead. The accent stays blue-700 everywhere else on the page (chapter headings, CTAs, spec tags), so the foam identity is preserved; only the dark-hero instances get brightened. ═══════════════════════════════════════════════════════════════════════════ */ .foam-hub .directive-path__num, .foam-hub .directive-path__intro strong, .foam-hub .directive-path__link { color: var(--color-accent-on-dark); } .foam-hub .directive-path__link { border-bottom-color: color-mix(in srgb, var(--color-accent-on-dark) 55%, transparent); } .foam-hub .directive-path__link:hover, .foam-hub .directive-path__link:focus-visible { border-bottom-color: var(--color-accent-on-dark); color: #EFF6FF; /* blue-50 — brightens further on hover */ } .foam-hub .directive-path__more { /* The "Show step N of 4" button also lives on the dark hero */ color: var(--color-accent-on-dark); border-color: color-mix(in srgb, var(--color-accent-on-dark) 40%, transparent); } .foam-hub .directive-path__more:hover, .foam-hub .directive-path__more:focus-visible { border-color: var(--color-accent-on-dark); color: #EFF6FF; /* blue-50 — brightens further on hover */ background: rgba(255, 255, 255, 0.06); } /* ═══════════════════════════════════════════════════════════════════════════ 6. PLANNER-CTA ON-DARK READABILITY (Ch 4 aside) --------------------------------------------------------------------------- category-hub.css paints the planner-cta aside with a dark near-black background and uses var(--color-accent) for the eyebrow ("BEFORE YOU STICK ANYTHING") and var(--color-accent-hover) for the note-variant launch button ("Plan the placement first"). On foam, those tokens are blue-700 / blue-800 — both too dark to read on the dark panel. Same fix as the hero: point the affected elements at the on-dark blue token so the aside actually reads. The planner-cta__title and __body already use white / white-alpha, so they don't need changes. ═══════════════════════════════════════════════════════════════════════════ */ .foam-hub .planner-cta__eyebrow { color: var(--color-accent-on-dark); } .foam-hub .planner-cta--note .planner-cta__launch { color: var(--color-accent-on-dark); /* border uses currentColor from the base rule so it follows automatically */ } .foam-hub .planner-cta--note .planner-cta__launch:hover, .foam-hub .planner-cta--note .planner-cta__launch:focus-visible { background: var(--color-accent-on-dark); color: var(--color-ink); /* invert on hover: dark text on light pill */ } .foam-hub .foam-hero { overflow: hidden; } .foam-hub .foam-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(var(--space-4), 1.6vw, var(--space-6)); } .foam-hub .foam-hero__inner > .mission__eyebrow, .foam-hub .foam-hero__inner > .mission__statement, .foam-hub .foam-hero__inner > .foam-hero__subhead, .foam-hub .foam-hero__inner > .foam-hero-ctas { margin-block: 0; } .foam-hub .foam-hero__subhead { display: grid; gap: var(--space-2); } .foam-hub .foam-hero__subhead > .mission__body { margin-block: 0; } .foam-hub .foam-hero-ctas { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); align-self: flex-start; margin-top: clamp(var(--space-3), 1.8vw, var(--space-6)); } .foam-hub .foam-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; } .foam-hub .foam-hero-cta--primary { min-height: 44px; padding: 0 var(--space-5); border: 1px solid var(--color-accent-on-dark); border-radius: 999px; background: var(--color-accent-on-dark); color: #111827; font-family: var(--font-sans); font-size: var(--fs-sm, 14px); font-weight: var(--fw-semibold); } .foam-hub .foam-hero-cta--secondary { color: color-mix(in srgb, var(--color-accent-on-dark) 72%, white); font-family: var(--font-serif); font-size: var(--fs-sm, 14px); font-style: italic; border-bottom: 1px solid color-mix(in srgb, var(--color-accent-on-dark) 34%, transparent); } .foam-hub .foam-hero-cta__icon { flex: 0 0 auto; } @media (hover: hover) and (pointer: fine) { .foam-hub .foam-hero-cta--primary:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: #111827; transform: translateY(-1px); } .foam-hub .foam-hero-cta--secondary:hover { color: var(--color-accent-on-dark); border-bottom-color: currentColor; } } .foam-hub .foam-hero-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .foam-hub .foam-journey-wrap { padding-top: clamp(var(--space-10), 8vw, var(--space-16)); } .foam-hub .foam-journey { display: flex; flex-direction: column; gap: 0; } .foam-hub .foam-journey__chapter { padding-block: var(--foam-section-spacing); border-bottom: 1px solid var(--color-line); } .foam-hub .foam-journey__chapter:first-child { padding-top: 0; } .foam-hub .foam-journey__chapter:last-child { padding-bottom: var(--foam-section-spacing); border-bottom: 1px solid var(--color-line); } .foam-hub .treatment-shell > .page-section { min-width: 0; padding-block: var(--foam-section-spacing); border-bottom: 1px solid var(--color-line); } .foam-hub .treatment-shell > .page-section + .page-section { margin-top: 0; } .foam-hub .treatment-shell > #next-topics { border-bottom: 0; } .foam-hub .treatment-shell > .page-section > .container { max-width: none; padding-inline: clamp(var(--space-5), 4vw, var(--space-10)); } .foam-hub .treatment-shell > #foam-myths > .container { padding-inline: 0; } @media (min-width: 1100px) { .foam-hub .treatment-shell { row-gap: 0; } } .foam-hub .chapter-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: start; } .foam-hub .chapter-heading__num { grid-column: 1; grid-row: 1; } .foam-hub .chapter-heading__copy-link { grid-column: 2; grid-row: 1; } .foam-hub .chapter-heading__text { grid-column: 1 / -1; grid-row: 2; font-family: var(--font-serif); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); } .foam-hub .foam-diagnosis { display: grid; gap: var(--space-8); margin-top: var(--space-8); } .foam-hub .foam-diagnosis__visual { display: flex; flex-direction: column; gap: clamp(var(--space-3), 2vw, var(--space-5)); margin: 0; color: var(--color-accent-hover); } .foam-hub .foam-diagnosis__svg { display: block; width: 100%; height: auto; } /* ── Diagnose-map animations ───────────────────────────────────────────────── Mirrored from acoustic-panels-hub.css so the foam page's diagnose visual feels alive in the same way the parent hub does. The source pulses, wall reflections rebound, and scatter arrows drift — each on its own tempo so the room reads as a continuous chaotic reverberation rather than a single synchronized pulse. Disabled when the user prefers reduced motion. */ @keyframes foam-diagnose-emit-burst { 0% { opacity: 0.06; transform: scale(0.78); } 35% { opacity: var(--emit-peak, 0.55); transform: scale(1.06); } 100% { opacity: 0.06; transform: scale(0.78); } } @keyframes foam-diagnose-reflect-bounce { 0%, 100% { opacity: 0.08; transform: scale(1, 1); } 25% { opacity: 0.12; transform: scale(1, 1); } 55% { opacity: 0.42; transform: scale(0.96, 0.96); } 75% { opacity: 0.28; transform: scale(1.02, 1.02); } } @keyframes foam-diagnose-scatter-drift { 0% { opacity: 0.1; transform: translate(0, 0); } 20% { opacity: 0.36; transform: translate(2px, -1px); } 45% { opacity: 0.18; transform: translate(-2px, 1px); } 70% { opacity: 0.32; transform: translate(1px, 2px); } 100% { opacity: 0.1; transform: translate(0, 0); } } .foam-hub .foam-diagnose__emit { transform-box: fill-box; transform-origin: 185px 113px; } /* ── Diagnose-map blue palette ────────────────────────────────────────────── The arrows take a soft blue family from the foam page accent. Setting `color` on each group lets `currentColor` cascade into both the line strokes (stroke="currentColor" on the group) and the arrowhead markers (fill="currentColor" inside the marker polygon) in one go — so heads and lines always match. The three emit rings step from light → mid → dark blue, reinforcing the ring-pop animation: the smallest, freshest sound is the lightest tint; the outermost ring is the most saturated. The source circle deliberately stays in the page accent so it reads as "the device" rather than as part of the wave. */ .foam-hub .foam-diagnose__emit--inner { color: var(--color-accent-on-dark); } .foam-hub .foam-diagnose__emit--mid { color: var(--color-accent); } .foam-hub .foam-diagnose__emit--outer { color: var(--color-accent-hover); } .foam-hub .foam-diagnose__reflect { color: var(--color-accent); } .foam-hub .foam-diagnose__scatter { color: var(--color-accent-on-dark); } .foam-hub .foam-diagnose__emit--inner { --emit-peak: 0.6; animation: foam-diagnose-emit-burst 2s ease-in-out infinite; } .foam-hub .foam-diagnose__emit--mid { --emit-peak: 0.5; animation: foam-diagnose-emit-burst 2s ease-in-out 0.5s infinite; } .foam-hub .foam-diagnose__emit--outer { --emit-peak: 0.42; animation: foam-diagnose-emit-burst 2s ease-in-out 1s infinite; } .foam-hub .foam-diagnose__reflect { transform-box: fill-box; transform-origin: 185px 113px; animation: foam-diagnose-reflect-bounce 2.6s ease-in-out 1.4s infinite; } .foam-hub .foam-diagnose__scatter { animation: foam-diagnose-scatter-drift 3.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .foam-hub .foam-diagnose__emit, .foam-hub .foam-diagnose__reflect, .foam-hub .foam-diagnose__scatter { animation: none; } } .foam-hub .foam-diagnosis__legend { display: grid; gap: 0; margin-top: auto; } .foam-hub .foam-diagnosis__legend-item { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); } .foam-hub .foam-diagnosis__legend-item span { width: max-content; padding: 0.16rem var(--space-2); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.68rem; font-weight: var(--fw-bold); letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .foam-hub .foam-diagnosis__legend-item strong { font-family: var(--font-serif); font-size: clamp(var(--fs-base), 1.55vw, var(--fs-lg)); font-weight: 600; line-height: var(--lh-snug); color: var(--color-ink); } .foam-hub .foam-diagnosis__legend-item--inside span { background: rgba(16, 185, 129, 0.12); color: #047857; } .foam-hub .foam-diagnosis__legend-item--partial span { background: rgba(245, 158, 11, 0.14); color: #92400E; } .foam-hub .foam-diagnosis__board { display: grid; gap: var(--space-4); } .foam-hub .foam-check { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--color-line); } .foam-hub .foam-check:first-child { border-top: 0; } .foam-hub .foam-check__status { width: max-content; padding: 0.2rem var(--space-2); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.7rem; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; } .foam-hub .foam-check--yes .foam-check__status { background: rgba(16, 185, 129, 0.12); color: #047857; } .foam-hub .foam-check--maybe .foam-check__status { background: rgba(245, 158, 11, 0.14); color: #92400E; } .foam-hub .foam-check--no .foam-check__status { background: rgba(239, 68, 68, 0.12); color: #B42318; } .foam-hub .foam-check__title { margin: 0; font-family: var(--font-serif); font-size: clamp(var(--fs-lg), 2.1vw, var(--fs-xl)); font-weight: 600; line-height: var(--lh-snug); color: var(--color-ink); } .foam-hub .foam-check__body { margin: 0; max-width: 58ch; color: var(--color-ink-muted); line-height: var(--lh-normal); } .foam-hub .foam-check__link { width: max-content; color: var(--color-accent-hover); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; } .foam-hub .foam-check__link:hover, .foam-hub .foam-check__link:focus-visible { color: var(--color-ink); } /* Nine room cards. 9 divides cleanly only by 1 or 3 columns; 2-col or 4-col layouts always orphan the last item. Use explicit breakpoints. */ .foam-hub .foam-room-atlas { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--space-8); border-top: 2px solid var(--color-ink); } @media (min-width: 900px) { .foam-hub .foam-room-atlas { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .foam-hub .foam-room-card { --foam-room-accent: var(--color-accent-hover); --foam-room-soft: color-mix(in srgb, var(--foam-room-accent) 11%, transparent); display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line); color: inherit; text-decoration: none; } .foam-hub .foam-room-card--podcast { --foam-room-accent: #7C3AED; } .foam-hub .foam-room-card--bedroom { --foam-room-accent: #0E7490; } .foam-hub .foam-room-card--booth { --foam-room-accent: #BE123C; } .foam-hub .foam-room-card--recording { --foam-room-accent: #2563EB; } .foam-hub .foam-room-card--apartment { --foam-room-accent: #047857; } .foam-hub .foam-room-card--background { --foam-room-accent: #B45309; } .foam-hub .foam-room-card__icon { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; aspect-ratio: 1.25; border-radius: var(--radius-sm); color: var(--foam-room-accent); background: radial-gradient(circle at 50% 42%, var(--foam-room-soft), transparent 70%); } .foam-hub .foam-room-card__icon svg { display: block; width: 92%; height: auto; overflow: visible; } .foam-hub .foam-room-card__room, .foam-hub .foam-room-card__surface, .foam-hub .foam-room-card__line, .foam-hub .foam-room-card__dot { stroke: currentColor; vector-effect: non-scaling-stroke; } .foam-hub .foam-room-card__room { fill: color-mix(in srgb, var(--foam-room-accent) 5%, transparent); stroke-width: 1.15; opacity: 0.78; } .foam-hub .foam-room-card__surface { fill: color-mix(in srgb, var(--foam-room-accent) 15%, transparent); stroke-width: 1; } .foam-hub .foam-room-card__line { fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.62; } .foam-hub .foam-room-card__dot { fill: color-mix(in srgb, var(--foam-room-accent) 22%, white); stroke-width: 1; } .foam-hub .foam-room-card__label { grid-column: 2; min-width: 0; display: block; font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-snug); color: var(--color-ink); } .foam-hub .foam-room-card__move { grid-column: 2; min-width: 0; display: block; color: var(--color-ink-muted); line-height: var(--lh-normal); } .foam-hub .foam-room-card:hover .foam-room-card__label, .foam-hub .foam-room-card:focus-visible .foam-room-card__label { color: var(--foam-room-accent); } .foam-hub .foam-expectation { display: grid; gap: var(--space-8); margin-top: var(--space-8); } /* Three frequency-band rows (low / mid / high). Only 1 or 3 columns avoid the 2+1 orphan state. */ .foam-hub .foam-sound-band { display: grid; grid-template-columns: 1fr; gap: clamp(var(--space-4), 3vw, var(--space-6)); margin-top: var(--space-6); } @media (min-width: 820px) { .foam-hub .foam-sound-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .foam-hub .foam-sound-band__row { display: flex; flex-direction: column; gap: clamp(var(--space-3), 1.2vw, var(--space-4)); padding: clamp(var(--space-4), 1.6vw, var(--space-5)); border: 1px solid var(--color-line); border-top: 3px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); } .foam-hub .foam-sound-band__row--low { border-top-color: var(--color-line-strong); } .foam-hub .foam-sound-band__row--mid { border-top-color: var(--color-line-strong); } .foam-hub .foam-sound-band__row--high { border-top-color: var(--color-accent); } .foam-hub .foam-sound-band__row span { font-family: var(--font-serif); font-size: clamp(var(--fs-base), 1.6vw, var(--fs-lg)); color: var(--color-ink); line-height: var(--lh-snug); } .foam-hub .foam-sound-band__row strong { align-self: start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; } .foam-hub .foam-sound-band__row--low strong { color: var(--color-ink-muted); background: var(--color-surface-2); } .foam-hub .foam-sound-band__row--mid strong { color: var(--color-ink-muted); background: var(--color-surface-2); } .foam-hub .foam-sound-band__row--high strong { color: var(--color-accent-hover); background: var(--color-accent-soft); } .foam-hub .foam-decay { margin: 0; } .foam-hub .foam-decay__caption-block { margin: 0 0 var(--space-4); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); } .foam-hub .foam-decay__svg { display: block; width: 100%; height: auto; color: var(--color-ink-muted); overflow: visible; } .foam-hub .foam-decay__axis { stroke: var(--color-line); stroke-width: 1; } .foam-hub .foam-decay__impulse line { stroke: var(--color-ink); stroke-width: 1.4; stroke-linecap: round; } .foam-hub .foam-decay__impulse circle { fill: var(--color-ink); } .foam-hub .foam-decay__caption { fill: var(--color-ink-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .foam-hub .foam-decay__caption--axis { fill: var(--color-ink-muted); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0; text-transform: none; } .foam-hub .foam-decay__caption--after { fill: var(--color-accent); } .foam-hub .foam-decay__after-stop { stop-color: var(--color-accent); } .foam-hub .foam-decay__set--before .foam-decay__wave { stroke: color-mix(in srgb, var(--color-ink) 60%, transparent); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .foam-hub .foam-decay__set--after .foam-decay__wave { stroke: var(--color-accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .foam-hub .foam-decay__marker line { stroke: var(--color-ink-muted); stroke-width: 0.9; opacity: 0.55; } .foam-hub .foam-decay__marker--after line { stroke: var(--color-accent); opacity: 0.7; } .foam-hub .foam-decay__set--before .foam-decay__wave { stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: foam-decay-draw-before 5.6s cubic-bezier(0.18, 0.62, 0.22, 1) infinite; } .foam-hub .foam-decay__set--after .foam-decay__wave { stroke-dasharray: 540; stroke-dashoffset: 540; animation: foam-decay-draw-after 5.6s cubic-bezier(0.22, 0.7, 0.18, 1) infinite; } .foam-hub .foam-decay__marker { opacity: 0; } .foam-hub .foam-decay__marker--after { animation: foam-decay-marker-after 5.6s linear infinite; } .foam-hub .foam-decay__marker--before { animation: foam-decay-marker-before 5.6s linear infinite; } @keyframes foam-decay-draw-before { 0% { stroke-dashoffset: 1500; opacity: 0; } 4% { opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes foam-decay-draw-after { 0% { stroke-dashoffset: 540; opacity: 0; } 4% { opacity: 1; } 28% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes foam-decay-marker-after { 0%, 26% { opacity: 0; } 34%, 92% { opacity: 1; } 100% { opacity: 0; } } @keyframes foam-decay-marker-before { 0%, 76% { opacity: 0; } 84%, 92% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .foam-hub .foam-decay__set--before .foam-decay__wave, .foam-hub .foam-decay__set--after .foam-decay__wave, .foam-hub .foam-decay__marker { animation: none; stroke-dashoffset: 0; opacity: 1; } } .foam-hub .placement-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-8); } .foam-hub .placement-visual { --foam-placement-accent: var(--color-accent-hover); --foam-placement-rgb: 63 63 70; --foam-placement-soft: rgb(var(--foam-placement-rgb) / 0.1); --foam-placement-line: rgb(var(--foam-placement-rgb) / 0.3); display: grid; width: 100%; gap: var(--space-5); } .foam-hub .room-marker[data-zone="1"], .foam-hub .placement-route[data-zone="1"] { --foam-placement-accent: #2563EB; --foam-placement-rgb: 37 99 235; } .foam-hub .room-marker[data-zone="2"], .foam-hub .placement-route[data-zone="2"] { --foam-placement-accent: #B45309; --foam-placement-rgb: 180 83 9; } .foam-hub .room-marker[data-zone="3"], .foam-hub .placement-route[data-zone="3"] { --foam-placement-accent: #7C3AED; --foam-placement-rgb: 124 58 237; } .foam-hub .room-marker[data-zone="4"], .foam-hub .placement-route[data-zone="4"] { --foam-placement-accent: #047857; --foam-placement-rgb: 4 120 87; } .foam-hub #placement-route-4 { --foam-placement-accent: #0E7490; --foam-placement-rgb: 14 116 144; } .foam-hub .room-map__stage { padding: var(--space-4); background: transparent; border: 0; border-radius: 0; box-shadow: none; scroll-margin-top: calc(var(--site-header-h, 80px) + var(--space-20)); } .foam-hub .room-map__svg { display: block; width: 100%; height: auto; color: var(--color-ink-muted); } .foam-hub .room__ceiling { fill: var(--color-bg); stroke: var(--color-line); } .foam-hub .room__side-wall { fill: var(--color-surface-2); stroke: var(--color-line); } .foam-hub .room__front-wall { fill: var(--color-surface); stroke: var(--color-line); stroke-width: 1.5; } .foam-hub .room__floor { fill: var(--color-line); stroke: var(--color-line); opacity: 0.5; } .foam-hub .room__sofa { fill: var(--color-surface-2); stroke: var(--color-line); stroke-width: 1.25; } .foam-hub .room__sofa-seam { stroke: var(--color-line); opacity: 0.45; } .foam-hub .room__person-body, .foam-hub .room__person-head { fill: var(--color-ink); opacity: 0.88; } .foam-hub .room-marker__shape { fill: rgb(var(--foam-placement-rgb) / 0.18); stroke: var(--foam-placement-accent); stroke-width: 1.5; transition: fill 0.2s ease, stroke-width 0.2s ease; } .foam-hub .room-marker__core { fill: var(--foam-placement-accent); } .foam-hub .room-marker[data-zone="1"] .room-marker__shape { fill: rgb(37 99 235 / 0.18); stroke: #2563EB; } .foam-hub .room-marker[data-zone="1"] .room-marker__core { fill: #2563EB; } .foam-hub .room-marker[data-zone="2"] .room-marker__shape { fill: rgb(180 83 9 / 0.18); stroke: #B45309; } .foam-hub .room-marker[data-zone="2"] .room-marker__core { fill: #B45309; } .foam-hub .room-marker[data-zone="3"] .room-marker__shape { fill: rgb(124 58 237 / 0.18); stroke: #7C3AED; } .foam-hub .room-marker[data-zone="3"] .room-marker__core { fill: #7C3AED; } .foam-hub .room-marker[data-zone="4"] .room-marker__shape { fill: rgb(4 120 87 / 0.18); stroke: #047857; } .foam-hub .room-marker[data-zone="4"] .room-marker__core { fill: #047857; } .foam-hub .room-marker__number { fill: var(--color-surface); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); text-anchor: middle; dominant-baseline: central; pointer-events: none; } .foam-hub .placement-visual[data-active="1"] .room-marker[data-zone="1"] .room-marker__shape, .foam-hub .placement-visual[data-active="2"] .room-marker[data-zone="2"] .room-marker__shape, .foam-hub .placement-visual[data-active="3"] .room-marker[data-zone="3"] .room-marker__shape, .foam-hub .placement-visual[data-active="4"] .room-marker[data-zone="4"] .room-marker__shape, .foam-hub .room-marker:hover .room-marker__shape, .foam-hub .room-marker:focus-visible .room-marker__shape { fill: rgb(var(--foam-placement-rgb) / 0.32); stroke-width: 2.5; } .foam-hub .placement-visual[data-active="1"] .room-marker[data-zone="1"] .room-marker__core, .foam-hub .placement-visual[data-active="2"] .room-marker[data-zone="2"] .room-marker__core, .foam-hub .placement-visual[data-active="3"] .room-marker[data-zone="3"] .room-marker__core, .foam-hub .placement-visual[data-active="4"] .room-marker[data-zone="4"] .room-marker__core, .foam-hub .room-marker:hover .room-marker__core, .foam-hub .room-marker:focus-visible .room-marker__core { fill: color-mix(in srgb, var(--foam-placement-accent) 82%, black); } .foam-hub .placement-visual[data-blink="1"] .room-marker[data-zone="1"] .room-marker__shape, .foam-hub .placement-visual[data-blink="2"] .room-marker[data-zone="2"] .room-marker__shape, .foam-hub .placement-visual[data-blink="3"] .room-marker[data-zone="3"] .room-marker__shape, .foam-hub .placement-visual[data-blink="4"] .room-marker[data-zone="4"] .room-marker__shape { animation: foam-placement-marker-blink 0.8s ease-in-out 4; } @keyframes foam-placement-marker-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .foam-hub .placement-visual__routes { display: grid; gap: var(--space-3); } .foam-hub .placement-route { --foam-placement-accent: var(--color-accent-hover); --foam-placement-rgb: 63 63 70; --foam-placement-soft: rgb(var(--foam-placement-rgb) / 0.075); --foam-placement-line: rgb(var(--foam-placement-rgb) / 0.28); display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); border: 1px solid var(--foam-placement-line); border-radius: var(--radius-sm); background: linear-gradient(90deg, rgb(var(--foam-placement-rgb) / 0.08), transparent 72%), var(--color-surface); box-shadow: inset 3px 0 0 var(--foam-placement-accent); color: inherit; text-decoration: none; scroll-margin-top: calc(var(--site-header-h, 80px) + var(--space-20)); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } @media (min-width: 1100px) { .foam-hub .room-map__stage, .foam-hub .placement-route { scroll-margin-top: calc(var(--site-header-h, 80px) + var(--space-6)); } } .foam-hub .placement-route:hover, .foam-hub .placement-route:focus-visible, .foam-hub .placement-route:target, .foam-hub .placement-visual[data-active="1"] .placement-route[data-zone="1"], .foam-hub .placement-visual[data-active="2"] .placement-route[data-zone="2"], .foam-hub .placement-visual[data-active="3"] .placement-route[data-zone="3"], .foam-hub .placement-visual[data-active="4"] .placement-route[data-zone="4"] { background-color: var(--foam-placement-soft); border-color: var(--foam-placement-line); box-shadow: inset 3px 0 0 var(--foam-placement-accent); } .foam-hub .placement-route__num { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--foam-placement-accent); letter-spacing: 0.08em; } .foam-hub .placement-route__body { display: grid; gap: var(--space-1); } .foam-hub .placement-route__title { font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--foam-placement-accent); } .foam-hub .placement-route__hint { font-family: var(--font-serif); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--color-ink-muted); } @media (min-width: 560px) { .foam-hub .placement-visual__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } } @media (max-width: 559px) { .foam-hub .room-map__stage { padding: var(--space-3); } .foam-hub .placement-route__hint { display: none; } } .foam-hub .foam-shape-shelf { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-8); } .foam-hub .foam-shape-card { display: grid; gap: var(--space-3); padding: var(--space-5) 0; border-top: 1px solid var(--color-line); } .foam-hub .foam-shape-card:first-child { border-top: 2px solid var(--color-ink); } .foam-hub .foam-shape-card__visual { display: block; box-sizing: border-box; width: min(100%, 10rem); aspect-ratio: 1 / 1; height: auto; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background-color: color-mix(in srgb, var(--color-accent-soft) 36%, var(--color-surface)); color: var(--color-accent-hover); overflow: hidden; } .foam-hub .foam-shape-card__visual svg { display: block; width: 100%; height: 100%; } .foam-hub .foam-shape-card h3 { margin: 0; font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 600; color: var(--color-ink); } .foam-hub .foam-shape-card p { margin: 0; color: var(--color-ink-muted); line-height: var(--lh-normal); } .foam-hub .foam-shape-card p:first-of-type strong { color: #1B7A4A; } .foam-hub .foam-shape-card p:last-of-type strong { color: #8B1A2B; } .foam-hub .foam-buy-lanes { display: grid; gap: 0; margin-top: var(--space-8); border-top: 2px solid var(--color-ink); } .foam-hub .foam-buy-lane { display: grid; grid-template-columns: minmax(7rem, 0.32fr) minmax(0, 1fr); gap: var(--space-2) var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line); color: inherit; text-decoration: none; } .foam-hub .foam-buy-lane span { grid-row: span 2; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-hover); } .foam-hub .foam-buy-lane strong { font-family: var(--font-serif); font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--color-ink); } .foam-hub .foam-buy-lane em { color: var(--color-ink-muted); font-style: normal; line-height: var(--lh-normal); } .foam-hub .foam-buy-lane:hover strong, .foam-hub .foam-buy-lane:focus-visible strong { color: var(--color-accent-hover); } .foam-hub .foam-install-timeline { display: grid; gap: 0; margin: var(--space-8) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); } .foam-hub .foam-install-timeline li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line); } .foam-hub .foam-install-timeline span { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-accent-hover); } .foam-hub .foam-install-timeline strong { color: var(--color-ink); line-height: var(--lh-snug); } .foam-hub .foam-install-timeline a { color: var(--color-accent-hover); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; white-space: nowrap; } .foam-hub .foam-install-timeline a:hover, .foam-hub .foam-install-timeline a:focus-visible { color: var(--color-ink); } .foam-hub .foam-myths { --myth-claim-color: #b42318; margin-top: var(--space-10); display: flex; flex-direction: column; gap: 0; } .foam-hub .myth-row { display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr); column-gap: var(--space-8); align-items: stretch; padding: var(--space-8) 0; border-top: 1px solid var(--color-line); } .foam-hub .myth-row:first-child { border-top: 2px solid var(--color-ink); } .foam-hub .myth-row:last-child { border-bottom: 1px solid var(--color-line); } .foam-hub .myth-row__myth { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .foam-hub .myth-row__tag { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; } .foam-hub .myth-row__tag--myth { color: color-mix(in srgb, var(--myth-claim-color) 68%, var(--color-ink-muted)); } .foam-hub .myth-row__tag--reality { color: var(--color-accent); } .foam-hub .myth-row__tag-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-bold); line-height: 1; } .foam-hub .myth-row__tag--myth .myth-row__tag-icon { color: currentColor; background: transparent; border: 1px solid color-mix(in srgb, var(--myth-claim-color) 38%, var(--color-line)); } .foam-hub .myth-row__tag--reality .myth-row__tag-icon { background: var(--color-accent); color: var(--color-surface); } .foam-hub .myth-row__claim { font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.25; letter-spacing: var(--tracking-snug); color: var(--color-ink); margin: 0; text-decoration-line: line-through; text-decoration-color: color-mix(in srgb, var(--myth-claim-color) 30%, var(--color-line-strong)); text-decoration-thickness: 1px; } .foam-hub .myth-row__divider { display: flex; align-items: center; justify-content: center; color: var(--color-ink-subtle); font-family: var(--font-mono); font-size: var(--fs-xl); } .foam-hub .myth-row__reality { display: flex; flex-direction: column; gap: var(--space-3); } .foam-hub .myth-row__truth { font-family: var(--font-serif); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--color-ink); margin: 0; } .foam-hub .myth-row__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .foam-hub .myth-row__link { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-ink); background: transparent; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .foam-hub .myth-row__link:hover, .foam-hub .myth-row__link:focus-visible { outline: none; color: var(--color-accent-hover); border-color: var(--color-accent); background: var(--color-accent-soft); } .foam-hub .myth-row__link::after { content: "→"; font-family: var(--font-mono); font-size: var(--fs-xs); color: currentColor; margin-left: var(--space-1); transition: transform var(--duration-fast) var(--ease-out); } .foam-hub .myth-row__link:hover::after, .foam-hub .myth-row__link:focus-visible::after { transform: translateX(2px); } .foam-hub .library__featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); } .foam-hub .library__hero { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-height: 188px; padding: var(--space-5); overflow: hidden; color: inherit; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .foam-hub .library__hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--color-accent); opacity: 0.7; } .foam-hub .library__hero-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .foam-hub .library__hero-title { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); color: var(--color-ink); } .foam-hub .library__hero-desc { flex: 1; font-family: var(--font-serif); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--color-ink-muted); } .foam-hub .library__hero-cta { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.06em; color: var(--color-accent); } .foam-hub .library__hero:hover, .foam-hub .library__hero:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--color-accent) 45%, transparent); transform: translateY(-2px); } .foam-hub .library__filter-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--stage-color, var(--color-accent)); } .foam-hub [data-filter="all"] .library__filter-dot { background: var(--color-accent); } .foam-hub [data-filter="orient"] .library__filter-dot { background: #2563EB; } .foam-hub [data-filter="anatomy"] .library__filter-dot { background: #0EA5E9; } .foam-hub [data-filter="shape"] .library__filter-dot { background: #7C3AED; } .foam-hub [data-filter="placement"] .library__filter-dot { background: #059669; } .foam-hub [data-filter="rooms"] .library__filter-dot { background: #D97706; } .foam-hub [data-filter="picks"] .library__filter-dot { background: #A21CAF; } .foam-hub [data-filter="install"] .library__filter-dot { background: #475569; } .foam-hub .library__item { --stage-color: var(--color-accent); border-top: 0; border-left: 3px solid var(--stage-color); padding-left: var(--space-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .foam-hub .library__item[data-stage="orient"] { --stage-color: #2563EB; } .foam-hub .library__item[data-stage="anatomy"] { --stage-color: #0EA5E9; } .foam-hub .library__item[data-stage="shape"] { --stage-color: #7C3AED; } .foam-hub .library__item[data-stage="placement"] { --stage-color: #059669; } .foam-hub .library__item[data-stage="rooms"] { --stage-color: #D97706; } .foam-hub .library__item[data-stage="picks"] { --stage-color: #A21CAF; } .foam-hub .library__item[data-stage="install"] { --stage-color: #475569; } .foam-hub .library__link { grid-template-rows: auto auto auto; padding: var(--space-4) var(--space-3); } .foam-hub .library__link:hover, .foam-hub .library__link:focus-visible { background: color-mix(in srgb, var(--stage-color) 7%, transparent); padding-left: var(--space-4); outline: none; } .foam-hub .library__item:target .library__link { background: color-mix(in srgb, var(--stage-color) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage-color) 32%, transparent); } .foam-hub .library__stage-tag { color: var(--stage-color); } .foam-hub .library__desc { display: block; grid-column: 1; grid-row: 3; margin-top: 2px; font-family: var(--font-serif); font-size: var(--fs-xs); line-height: 1.5; color: var(--color-ink-muted); } .foam-hub .adj-card[data-hub="acoustic"] { --hub-accent: #0891B2; } .foam-hub .adj-card[data-hub="panels"] { --hub-accent: #0284C7; } .foam-hub .adj-card[data-hub="bass-traps"] { --hub-accent: #0D9488; } .foam-hub .adj-card[data-hub="diffusers"] { --hub-accent: #7C3AED; } .foam-hub .adj-card[data-hub="soundproofing"] { --hub-accent: #B45309; } .foam-hub .adj-reads { display: flex; flex-direction: row; gap: var(--space-5); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-left: var(--space-1); padding: var(--space-2) var(--space-1) var(--space-4); margin: 0 calc(var(--space-1) * -1); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-accent) 25%, transparent) transparent; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%); } .foam-hub .adj-reads::-webkit-scrollbar { height: 6px; } .foam-hub .adj-reads::-webkit-scrollbar-track { background: transparent; } .foam-hub .adj-reads::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-accent) 22%, transparent); border-radius: 4px; } .foam-hub .adj-reads::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-accent) 40%, transparent); } .foam-hub .adj-reads .adj-card { flex: 0 0 320px; scroll-snap-align: start; } .foam-hub .adj-card { position: relative; display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .foam-hub .adj-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--hub-accent, var(--color-accent)); opacity: 0.6; transition: opacity var(--duration-fast) var(--ease-out); } .foam-hub .adj-card__visual { display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-5) var(--space-3); background: color-mix(in srgb, var(--hub-accent, var(--color-accent)) 4%, transparent); } .foam-hub .adj-card__svg { display: block; width: 100%; max-width: 160px; height: auto; color: var(--hub-accent, var(--color-accent)); opacity: 0.72; transition: opacity var(--duration-base) var(--ease-out); } .foam-hub .adj-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-5); } .foam-hub .adj-card__role { color: var(--hub-accent, var(--color-accent)); font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; } .foam-hub .adj-card__name { margin: 0; color: var(--color-ink); font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: 0; line-height: 1.15; transition: color var(--duration-fast) var(--ease-out); } .foam-hub .adj-card__hook { flex: 1; margin: 0; color: var(--color-ink-muted); font-family: var(--font-serif); font-size: var(--fs-sm); line-height: 1.6; } .foam-hub .adj-card__cta { margin-top: var(--space-2); color: var(--hub-accent, var(--color-accent)); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.04em; transition: letter-spacing var(--duration-fast) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .foam-hub .adj-card:hover, .foam-hub .adj-card:focus-visible { outline: none; border-color: var(--hub-accent, var(--color-accent)); box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--hub-accent, var(--color-accent)) 20%, transparent); transform: translateY(-3px); } .foam-hub .adj-card:hover::before, .foam-hub .adj-card:focus-visible::before { opacity: 1; } .foam-hub .adj-card:hover .adj-card__svg, .foam-hub .adj-card:focus-visible .adj-card__svg { opacity: 0.88; } .foam-hub .adj-card:hover .adj-card__name, .foam-hub .adj-card:focus-visible .adj-card__name { color: var(--hub-accent, var(--color-accent)); } .foam-hub .adj-card:hover .adj-card__cta, .foam-hub .adj-card:focus-visible .adj-card__cta { letter-spacing: 0.06em; } } .foam-hub #foam-myths, .foam-hub #library { scroll-margin-top: var(--space-20); } .foam-hub #next-topics { scroll-margin-top: var(--space-20); } @media (min-width: 680px) { .foam-hub .foam-shape-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foam-hub .foam-shape-card:nth-child(2) { border-top: 2px solid var(--color-ink); } } @media (min-width: 780px) { .foam-hub .adj-reads .adj-card { flex-basis: 340px; } } @media (min-width: 900px) { /* ── Diagnosis: visual-dominant asymmetric grid ─────────────────────────── The visual is the hero of this chapter, so it gets the wider column (1.6fr) while the foam-check cards take the narrower one (1fr). The visual is also pinned with `position: sticky` so it stays in view while the reader scrolls through the three foam-check cards next to it — letting the diagram do the explaining instead of scrolling away. */ .foam-hub .foam-diagnosis { grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 1fr); column-gap: var(--space-6); align-items: start; } .foam-hub .foam-diagnosis__visual { position: sticky; top: var(--space-6); align-self: start; } .foam-hub .foam-room-atlas { column-gap: var(--space-8); } .foam-hub .foam-room-card:nth-child(2) { border-top: 0; } } @media (min-width: 1100px) { .foam-hub .treatment-shell > #foam-myths, .foam-hub .treatment-shell > #library, .foam-hub .treatment-shell > #next-topics { grid-column: 2 / -1; } } @media (max-width: 899px) and (min-width: 620px) { .foam-hub .library__featured { grid-template-columns: 1fr; } .foam-hub .library__hero { min-height: 0; } .foam-hub .myth-row { column-gap: var(--space-5); padding: var(--space-6) 0; } .foam-hub .myth-row__claim { font-size: var(--fs-lg); } } @media (max-width: 679px) { .foam-hub .mission--hub .mission__backdrop { opacity: 0.16; } .foam-hub .mission--hub .mission__backdrop .foam-hero-visual { width: min(116vw, 520px); } .foam-hub .foam-hero-ctas { flex-direction: column; align-items: center; align-self: stretch; } .foam-hub .foam-hero-cta--primary { justify-content: center; width: min(100%, 18rem); } .foam-hub .foam-room-card { grid-template-columns: 3.5rem minmax(0, 1fr); } .foam-hub .foam-buy-lane, .foam-hub .foam-install-timeline li { grid-template-columns: 1fr; } .foam-hub .foam-install-timeline a { white-space: normal; } } @media (max-width: 520px) { .foam-hub .adj-reads .adj-card { flex-basis: 280px; } .foam-hub .adj-card__visual { padding: var(--space-4) var(--space-4) var(--space-2); } .foam-hub .adj-card__svg { max-width: 120px; } } @media (max-width: 619px) { .foam-hub .library__featured { grid-template-columns: 1fr; } .foam-hub .library__hero { min-height: 0; } .foam-hub .myth-row { grid-template-columns: 1fr; row-gap: var(--space-4); padding: var(--space-6) 0; } .foam-hub .myth-row__divider { justify-content: flex-start; transform: rotate(90deg); width: 24px; height: 24px; } .foam-hub .myth-row__claim { font-size: var(--fs-lg); } }