/*============================================================================== Clunky Design System (CDS) File: statistics.css Version: 0.1.0 Sprint: 1 Purpose: Statistics, research findings, KPI cards, benchmark panels and numerical highlights used throughout flagship resources. ==============================================================================*/ /*============================================================================== SECTION 1 Statistics Section ==============================================================================*/ .statistics{ padding-block:5rem; } .statistics + .statistics{ border-top:1px solid var(--color-border); } /*============================================================================== SECTION 2 Statistics Grid ==============================================================================*/ .statistics-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem; margin:3rem 0; } /*============================================================================== SECTION 3 Statistic Card ==============================================================================*/ .stat-card{ display:flex; flex-direction:column; justify-content:center; padding:2rem; background:#ffffff; border:1px solid var(--color-border); border-radius:24px; box-shadow:0 10px 30px rgba(15,23,42,.04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .stat-card:hover{ transform:translateY(-6px); border-color:#bfdbfe; box-shadow:0 20px 50px rgba(15,23,42,.08); } /*============================================================================== SECTION 4 Primary Statistic ==============================================================================*/ .stat-value{ font-size:clamp(2.5rem,5vw,4rem); font-weight:800; line-height:1; color:var(--color-primary); margin-bottom:.75rem; letter-spacing:-.04em; } .stat-unit{ font-size:1.1rem; font-weight:700; margin-left:.25rem; } /*============================================================================== SECTION 5 Labels ==============================================================================*/ .stat-title{ font-size:1.1rem; font-weight:700; margin-bottom:.5rem; color:var(--color-text); } .stat-description{ color:var(--color-text-light); margin-bottom:0; } /*============================================================================== SECTION 6 Statistic Source ==============================================================================*/ .stat-source{ margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--color-border); font-size:.875rem; color:var(--color-text-light); } /*============================================================================== SECTION 7 Featured Statistic ==============================================================================*/ .stat-feature{ padding:3rem; margin:4rem 0; text-align:center; border-radius:28px; background: linear-gradient( 135deg, #eff6ff, #ffffff); border:1px solid #dbeafe; } .stat-feature .stat-value{ font-size:clamp(4rem,8vw,6rem); } .stat-feature p{ max-width:60ch; margin-inline:auto; } /*============================================================================== SECTION 8 Research Panel ==============================================================================*/ .research-panel{ padding:2rem; margin:3rem 0; background:#ffffff; border-radius:24px; border:1px solid var(--color-border); } .research-panel h3{ margin-bottom:1rem; } .research-panel ul{ margin-top:1.5rem; padding-left:1.5rem; } /*============================================================================== SECTION 9 Survey Results ==============================================================================*/ .survey-results{ display:grid; gap:1rem; margin:2rem 0; } .survey-item{ display:grid; grid-template-columns:140px 1fr 70px; align-items:center; gap:1rem; } .survey-label{ font-weight:600; } .survey-bar{ height:14px; background:#e5e7eb; border-radius:999px; overflow:hidden; } .survey-fill{ height:100%; background:linear-gradient( 90deg, var(--color-primary), #3b82f6); border-radius:999px; } .survey-value{ font-weight:700; text-align:right; } /*============================================================================== SECTION 10 Comparison Statistics ==============================================================================*/ .stat-comparison{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin:3rem 0; } .stat-before, .stat-after{ padding:2rem; border-radius:22px; border:1px solid var(--color-border); } .stat-before{ border-left:6px solid #ef4444; background:#fef2f2; } .stat-after{ border-left:6px solid #22c55e; background:#ecfdf5; } /*============================================================================== SECTION 11 Metric List ==============================================================================*/ .metric-list{ display:grid; gap:1rem; margin-top:2rem; } .metric{ display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; background:#f8fafc; border-radius:16px; } .metric-name{ font-weight:600; } .metric-value{ font-weight:700; color:var(--color-primary); } /*============================================================================== SECTION 12 Insight Banner ==============================================================================*/ .insight-banner{ padding:2rem; margin:4rem 0; background:#0f172a; color:#ffffff; border-radius:28px; text-align:center; } .insight-banner h2, .insight-banner h3{ color:#ffffff; } .insight-banner p{ color:rgba(255,255,255,.88); max-width:60ch; margin-inline:auto; } /*============================================================================== SECTION 13 Statistic Callout ==============================================================================*/ .stat-callout{ display:flex; gap:1.5rem; align-items:flex-start; padding:2rem; margin:3rem 0; background:#fff7ed; border-left:6px solid #f59e0b; border-radius:0 20px 20px 0; } .stat-icon{ font-size:2rem; line-height:1; flex-shrink:0; } /*============================================================================== SECTION 14 Research Highlights Grid ==============================================================================*/ .highlights-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem; margin:3rem 0; } .highlight{ padding:2rem; border-radius:20px; background:#ffffff; border:1px solid var(--color-border); } .highlight-number{ font-size:2rem; font-weight:800; color:var(--color-primary); margin-bottom:.75rem; } /*============================================================================== SECTION 15 Responsive ==============================================================================*/ @media (max-width:768px){ .statistics{ padding-block:3.5rem; } .statistics-grid{ grid-template-columns:1fr; } .stat-comparison{ grid-template-columns:1fr; } .survey-item{ grid-template-columns:1fr; gap:.75rem; } .survey-value{ text-align:left; } .stat-feature{ padding:2rem; } .stat-callout{ flex-direction:column; } } /*============================================================================== END OF FILE Version: 0.1.0 Future Sections 16 Animated Counter States 17 Circular KPI Cards 18 Progress Rings 19 Trend Indicators 20 Sparkline Support 21 Interactive Benchmarks 22 Calculator Result Cards 23 Assessment Score Panels 24 Dashboard Layouts ==============================================================================*/