| .groups-view { |
| position: relative; |
| overflow: visible; |
| background: var(--bg); |
| padding: var(--sp-8) var(--sp-10); |
| } |
|
|
| .groups-view__header { |
| display: grid; |
| grid-template-columns: 1.6fr 1fr; |
| gap: var(--sp-8); |
| align-items: end; |
| padding-bottom: var(--sp-6); |
| border-bottom: 1px solid var(--border); |
| margin-bottom: var(--sp-10); |
| } |
|
|
| .groups-view__title { |
| font-family: var(--font-display); |
| font-size: var(--fs-3xl); |
| line-height: 1.05; |
| margin-top: var(--sp-3); |
| letter-spacing: -0.015em; |
| max-width: 720px; |
| } |
|
|
| .groups-view__lede { |
| color: var(--text-muted); |
| font-size: var(--fs-base); |
| line-height: var(--lh-base); |
| max-width: 460px; |
| justify-self: end; |
| } |
|
|
| .groups-view__loading { |
| display: flex; |
| align-items: center; |
| gap: var(--sp-2); |
| color: var(--text-muted); |
| font-size: var(--fs-xs); |
| letter-spacing: 0.16em; |
| text-transform: uppercase; |
| padding: var(--sp-10); |
| justify-content: center; |
| } |
|
|
| .groups-view__axes { |
| display: flex; |
| flex-direction: column; |
| gap: var(--sp-12); |
| } |
|
|
| |
|
|
| .spectrum { |
| position: relative; |
| } |
|
|
| .spectrum__header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-end; |
| gap: var(--sp-5); |
| margin-bottom: var(--sp-5); |
| } |
|
|
| .spectrum__title { |
| font-family: var(--font-display); |
| font-size: var(--fs-2xl); |
| margin-top: 4px; |
| letter-spacing: -0.01em; |
| } |
|
|
| .spectrum__poles { |
| display: flex; |
| gap: var(--sp-8); |
| font-family: var(--font-mono); |
| font-size: var(--fs-xs); |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| } |
|
|
| .spectrum__pole--left { color: var(--danger); } |
| .spectrum__pole--right { color: var(--neutral); } |
|
|
| .spectrum__plot { |
| position: relative; |
| height: 240px; |
| margin: 0 var(--sp-6); |
| } |
|
|
| .spectrum__axis-line { |
| position: absolute; |
| top: 50%; |
| left: 0; |
| right: 0; |
| height: 1px; |
| background: linear-gradient( |
| to right, |
| rgba(224, 82, 82, 0.0) 0%, |
| rgba(224, 82, 82, 0.55) 10%, |
| rgba(200, 169, 110, 0.5) 50%, |
| rgba(74, 158, 138, 0.55) 90%, |
| rgba(74, 158, 138, 0.0) 100% |
| ); |
| } |
|
|
| .spectrum__center { |
| position: absolute; |
| top: calc(50% - 18px); |
| left: 50%; |
| width: 1px; |
| height: 36px; |
| background: var(--border-strong); |
| transform: translateX(-0.5px); |
| } |
|
|
| .spectrum__marker { |
| position: absolute; |
| top: 50%; |
| transform: translate(-50%, -50%); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| z-index: 2; |
| } |
|
|
| .spectrum__marker.above { |
| flex-direction: column-reverse; |
| transform: translate(-50%, -100%); |
| top: 50%; |
| } |
|
|
| .spectrum__marker.below { |
| flex-direction: column; |
| transform: translate(-50%, 0); |
| top: 50%; |
| } |
|
|
| .spectrum__dot { |
| display: block; |
| background: radial-gradient( |
| circle at 35% 35%, |
| rgba(255, 255, 255, 0.18), |
| var(--accent) 40%, |
| var(--accent-soft) 100% |
| ); |
| border-radius: 50%; |
| box-shadow: |
| 0 0 0 1px rgba(0, 0, 0, 0.4), |
| 0 0 14px rgba(200, 169, 110, 0.35); |
| transition: transform var(--transition); |
| } |
|
|
| .spectrum__marker:hover .spectrum__dot { |
| transform: scale(1.06); |
| } |
|
|
| .spectrum__leader { |
| width: 1px; |
| height: 28px; |
| background: var(--border-strong); |
| } |
|
|
| .spectrum__label { |
| text-align: center; |
| min-width: 80px; |
| padding: 4px 8px; |
| font-family: var(--font-mono); |
| font-size: var(--fs-xs); |
| white-space: nowrap; |
| } |
|
|
| .spectrum__source { |
| color: var(--text); |
| letter-spacing: 0.06em; |
| } |
|
|
| .spectrum__meta { |
| color: var(--text-muted); |
| letter-spacing: 0.06em; |
| display: flex; |
| gap: 6px; |
| justify-content: center; |
| margin-top: 2px; |
| } |
|
|
| @media (max-width: 1000px) { |
| .groups-view { |
| padding: var(--sp-6); |
| } |
|
|
| .groups-view__header { |
| grid-template-columns: 1fr; |
| gap: var(--sp-4); |
| margin-bottom: var(--sp-8); |
| } |
|
|
| .groups-view__title { |
| font-size: var(--fs-2xl); |
| } |
|
|
| .groups-view__lede { |
| justify-self: start; |
| } |
|
|
| .spectrum__header { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
| } |
|
|
| @media (max-width: 760px) { |
| .groups-view { |
| padding: var(--sp-5) var(--sp-4); |
| } |
|
|
| .spectrum__plot { |
| margin-inline: 0; |
| height: 280px; |
| } |
|
|
| .spectrum__poles { |
| width: 100%; |
| justify-content: space-between; |
| gap: var(--sp-3); |
| } |
|
|
| .spectrum__label { |
| min-width: 64px; |
| white-space: normal; |
| line-height: 1.2; |
| } |
|
|
| .spectrum__source, |
| .spectrum__meta { |
| max-width: 120px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| } |
|
|
