/** * density-pass.css — Institutional information density pass. * Owns: tightening card padding and grid gaps ~15-20% site-wide for a * Bloomberg/macro-terminal density feel WITHOUT reducing font sizes. * Does NOT own: color scheme, font sizes, layout structure, auth logic. * * Targets: homepage, command center, dashboard, FLP suite, GFC, GBC, institutional pages. * Load via in . */ /* ── Nowcast cards: 24px/28px → 19px/22px ───────────────────────────────── */ .nowcast-card { padding: 19px 22px !important; margin-bottom: 18px !important; } /* ── Chart cards: header/canvas padding tighten ─────────────────────────── */ .chart-header { padding: 14px 20px 0 !important; gap: 8px !important; } .chart-canvas-wrap { padding: 12px 20px 16px !important; } .chart-footer { padding: 0 20px 14px !important; gap: 14px !important; } /* ── Dashboard: regime banner ───────────────────────────────────────────── */ .regime-banner { padding: 18px 24px !important; margin-bottom: 18px !important; } /* ── Dashboard: main page padding ───────────────────────────────────────── */ .dashboard { padding: 26px 28px 60px !important; } .dash-header { margin-bottom: 24px !important; } /* ── Command center: page wrapper ───────────────────────────────────────── */ .page { padding: 32px 40px 60px !important; } .cc-header { margin-bottom: 28px !important; } /* ── Generic card classes ────────────────────────────────────────────────── */ .card, .sky-card, .info-card, .metric-card, .data-card { padding: 18px 20px !important; margin-bottom: 18px !important; } /* ── Corr bar items ──────────────────────────────────────────────────────── */ .corr-item { padding: 16px 20px !important; } /* ── Stats bar (homepage) ────────────────────────────────────────────────── */ .stats-bar { padding: 22px 40px !important; gap: 36px !important; } /* ── Section headers / eyebrows ──────────────────────────────────────────── */ .indicator-cards-header, .trust-header, .pricing-header { margin-bottom: 24px !important; } /* ── Indicator cards grid ────────────────────────────────────────────────── */ .indicator-cards-grid { gap: 14px !important; } .indicator-card { padding: 18px 20px !important; } /* ── Trust grid ──────────────────────────────────────────────────────────── */ .trust-grid { gap: 14px !important; } .trust-item { padding: 18px 20px !important; } /* ── Institutional page modules ──────────────────────────────────────────── */ .inst-module, .module-card, .analysis-card, .research-card { padding: 18px 20px !important; } /* ── Scatter / FLI cards ────────────────────────────────────────────────── */ .scatter-card { padding: 14px 20px 16px !important; } /* ── Upgrade wall ────────────────────────────────────────────────────────── */ .upgrade-wall-body { padding: 0 40px 36px !important; } /* ── Plan cards (pricing) ────────────────────────────────────────────────── */ .plan-card { padding: 24px 22px !important; } .pricing-inner { gap: 14px !important; } /* ── Grid layouts: tighten gaps ~10-15% ─────────────────────────────────── */ .grid-2, .grid-3, .grid-4, [class*="grid-col"] { gap: 14px !important; } /* ── Sections (analytical pages) ────────────────────────────────────────── */ .section-gap, .chart-section, .analytics-section { margin-bottom: 18px !important; } /* ── Instit. institutional report / research sections ────────────────────── */ .report-section, .overview-section, .methodology-section { padding: 18px 20px !important; margin-bottom: 18px !important; } /* ── GBC / GFC specific ─────────────────────────────────────────────────── */ .gbc-card, .gfc-card, .flp-card, .bmi-card { padding: 18px 20px !important; margin-bottom: 18px !important; } /* ── Table rows: tighten cell padding ───────────────────────────────────── */ .data-table th, .data-table td, table.sky-table th, table.sky-table td { padding: 8px 12px !important; } /* ── Nowcast stat tighten ────────────────────────────────────────────────── */ .nowcast-stats { gap: 22px !important; } /* ── Mobile: institutional density — compact but readable ────────────────── */ @media (max-width: 768px) { .nowcast-card { padding: 14px 16px !important; } .chart-header { padding: 10px 14px 0 !important; } .chart-canvas-wrap { padding: 8px 14px 12px !important; } .stats-bar { padding: 12px 16px !important; gap: 16px !important; } .page, .dashboard { padding: 16px 14px 36px !important; } /* Card padding tighter on mobile */ .card, .sky-card, .info-card, .metric-card, .data-card, .indicator-card, .trust-item, .gbc-card, .gfc-card, .flp-card, .bmi-card, .report-section, .overview-section, .methodology-section { padding: 14px 16px !important; margin-bottom: 12px !important; } /* Reduce vertical section gaps on mobile */ .section-gap, .chart-section, .analytics-section, .nowcast-section, .value-section, .timeline-section, .trust-section, .institutional-suite { padding-top: 28px !important; padding-bottom: 0 !important; } /* Grid gaps tighter on mobile */ .grid-2, .grid-3, .grid-4, .indicator-cards-grid, .trust-grid, [class*="grid-col"] { gap: 10px !important; } /* Table cells compact */ .data-table th, .data-table td, table.sky-table th, table.sky-table td { padding: 6px 10px !important; } } /* ── Mobile hero: restrained, not full-viewport ──────────────────────────── */ @media (max-width: 768px) { /* Hero padding: reduce top to keep it well under 60vh */ .hero { padding-top: 36px !important; padding-bottom: 28px !important; } /* Hero title: scale down proportionally on mobile */ .hero h1, .hero-title { font-size: clamp(24px, 6.5vw, 38px) !important; letter-spacing: -0.5px !important; margin-bottom: 12px !important; } /* Hero subtitle/sub: compact */ .hero-sub, .hero-subtitle, .hero p { font-size: 14px !important; margin-bottom: 16px !important; line-height: 1.55 !important; } /* Hero actions: tighter */ .hero-actions { gap: 10px !important; margin-bottom: 12px !important; } /* Hero eyebrow: compact */ .hero-eyebrow { margin-bottom: 12px !important; font-size: 9px !important; } }