/* * article-visual-enhancements.css * Chart & visualization component styles for landing pages. * Referenced by all articles via in . */ /* === Chart & Visualization Components === */ .visualization-section { margin: var(--spacing-xl, 60px) 0; } .chart-container { position: relative; height: 400px; max-width: 820px; margin: var(--spacing-lg, 40px) auto; padding: 28px; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-md, 15px); border: 1px solid rgba(64, 192, 240, 0.15); backdrop-filter: blur(10px); overflow: hidden; } .chart-container.chart-bar { height: 460px; } .chart-container.chart-doughnut { height: 480px; } .chart-container.chart-radar { height: 500px; } .chart-container.chart-line { height: 420px; } .chart-container canvas { display: block; width: 100% !important; height: calc(100% - 60px) !important; } .chart-source { text-align: center; font-size: 0.9em; color: var(--color-text-muted, #a0c0e0); margin-top: 16px; font-style: italic; } .chart-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 12px; padding: 0 16px; } .chart-legend-item { display: flex; align-items: center; gap: 8px; color: var(--color-text-light, #cccccc); font-size: 0.9em; } .chart-legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex-shrink: 0; } /* Responsive: tablet */ @media (max-width: 1024px) { .chart-container { max-width: 100%; padding: 24px; } } /* Responsive: mobile */ @media (max-width: 768px) { .chart-container { height: 300px; padding: 16px; margin: 24px auto; } .chart-container.chart-bar, .chart-container.chart-doughnut, .chart-container.chart-radar, .chart-container.chart-line { height: 320px; } .chart-legend { gap: 10px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .chart-container canvas { animation: none !important; } }