Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>World Social Protection Report 2024-26 — Interactive Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| 'display': ['Cormorant Garamond', 'serif'], | |
| 'body': ['Inter', 'sans-serif'], | |
| 'mono': ['JetBrains Mono', 'monospace'], | |
| }, | |
| colors: { | |
| 'slate-950': '#0a0e1a', | |
| 'slate-900': '#0f1629', | |
| 'slate-850': '#121a30', | |
| 'slate-800': '#1a2240', | |
| 'slate-750': '#1e2a4d', | |
| 'slate-700': '#243055', | |
| 'slate-650': '#2a3860', | |
| 'slate-600': '#334470', | |
| 'slate-500': '#4a5d85', | |
| 'slate-400': '#6b7d9f', | |
| 'slate-300': '#94a3b8', | |
| 'slate-200': '#cbd5e1', | |
| 'amber-450': '#d4973f', | |
| 'amber-500': '#d4a03f', | |
| 'teal-550': '#2a9d8f', | |
| 'teal-650': '#1e7a6e', | |
| 'rose-550': '#c75c5c', | |
| 'rose-650': '#a84545', | |
| 'indigo-550': '#5c6bc0', | |
| 'indigo-650': '#4552a8', | |
| 'emerald-550': '#2e8b57', | |
| 'emerald-650': '#1e6b40', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --bg-deep: #0a0e1a; | |
| --bg-card: #121a30; | |
| --bg-card-hover: #1a2240; | |
| --border-subtle: rgba(74, 93, 133, 0.2); | |
| --border-hover: rgba(74, 93, 133, 0.4); | |
| --text-primary: #e2e8f0; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| --amber: #d4a03f; | |
| --amber-glow: rgba(212, 160, 63, 0.15); | |
| --teal: #2a9d8f; | |
| --teal-glow: rgba(42, 157, 143, 0.15); | |
| --rose: #c75c5c; | |
| --rose-glow: rgba(199, 92, 92, 0.15); | |
| --indigo: #5c6bc0; | |
| --indigo-glow: rgba(92, 107, 192, 0.15); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--bg-deep); | |
| color: var(--text-primary); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| /* ── Ambient Background ── */ | |
| .ambient-bg { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| pointer-events: none; | |
| overflow: hidden; | |
| } | |
| .ambient-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: -20%; | |
| right: -10%; | |
| width: 60vw; | |
| height: 60vw; | |
| background: radial-gradient(circle, rgba(42, 157, 143, 0.06) 0%, transparent 70%); | |
| border-radius: 50%; | |
| animation: ambientFloat1 20s ease-in-out infinite; | |
| } | |
| .ambient-bg::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -15%; | |
| left: -10%; | |
| width: 50vw; | |
| height: 50vw; | |
| background: radial-gradient(circle, rgba(212, 160, 63, 0.04) 0%, transparent 70%); | |
| border-radius: 50%; | |
| animation: ambientFloat2 25s ease-in-out infinite; | |
| } | |
| @keyframes ambientFloat1 { | |
| 0%, 100% { | |
| transform: translate(0, 0); | |
| } | |
| 50% { | |
| transform: translate(-5%, 5%); | |
| } | |
| } | |
| @keyframes ambientFloat2 { | |
| 0%, 100% { | |
| transform: translate(0, 0); | |
| } | |
| 50% { | |
| transform: translate(5%, -5%); | |
| } | |
| } | |
| /* ── Grid Overlay ── */ | |
| .grid-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1; | |
| pointer-events: none; | |
| background-image: | |
| linear-gradient(rgba(74, 93, 133, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(74, 93, 133, 0.03) 1px, transparent 1px); | |
| background-size: 80px 80px; | |
| } | |
| /* ── Noise Texture ── */ | |
| .noise { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 2; | |
| pointer-events: none; | |
| opacity: 0.02; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); | |
| } | |
| /* ── Scrollbar ── */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-deep); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--slate-600); | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--slate-500); | |
| } | |
| /* ── Reveal Animations ── */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(40px); | |
| transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .reveal.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .reveal-delay-1 { | |
| transition-delay: 0.1s; | |
| } | |
| .reveal-delay-2 { | |
| transition-delay: 0.2s; | |
| } | |
| .reveal-delay-3 { | |
| transition-delay: 0.3s; | |
| } | |
| .reveal-delay-4 { | |
| transition-delay: 0.4s; | |
| } | |
| .reveal-delay-5 { | |
| transition-delay: 0.5s; | |
| } | |
| /* ── Glass Card ── */ | |
| .glass-card { | |
| background: rgba(18, 26, 48, 0.7); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 16px; | |
| transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glass-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: inherit; | |
| padding: 1px; | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%, rgba(255, 255, 255, 0.03) 100%); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .glass-card:hover { | |
| border-color: var(--border-hover); | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5); | |
| } | |
| .glass-card-strong { | |
| background: rgba(18, 26, 48, 0.85); | |
| } | |
| /* ── Gradient Border ── */ | |
| .gradient-border { | |
| position: relative; | |
| } | |
| .gradient-border::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--amber), var(--teal), transparent); | |
| opacity: 0.3; | |
| } | |
| /* ── Glow Effects ── */ | |
| .glow-amber { | |
| box-shadow: 0 0 40px -10px var(--amber-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05); | |
| } | |
| .glow-teal { | |
| box-shadow: 0 0 40px -10px var(--teal-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05); | |
| } | |
| .glow-rose { | |
| box-shadow: 0 0 40px -10px var(--rose-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05); | |
| } | |
| .glow-indigo { | |
| box-shadow: 0 0 40px -10px var(--indigo-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05); | |
| } | |
| /* ── Progress Rings ── */ | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-bg { | |
| stroke: rgba(74, 93, 133, 0.15); | |
| } | |
| .progress-ring-fill { | |
| stroke-linecap: round; | |
| transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| /* ── Bar Charts ── */ | |
| .bar-fill { | |
| transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); | |
| width: 0; | |
| } | |
| .bar-fill.visible { | |
| width: var(--target-width); | |
| } | |
| /* ── Counter Animation ── */ | |
| .counter { | |
| display: inline-block; | |
| } | |
| /* ── Navigation ── */ | |
| .nav-link { | |
| position: relative; | |
| color: var(--text-muted); | |
| transition: color 0.3s ease; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -4px; | |
| left: 0; | |
| width: 0; | |
| height: 1px; | |
| background: var(--amber); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover, | |
| .nav-link.active { | |
| color: var(--text-primary); | |
| } | |
| .nav-link:hover::after, | |
| .nav-link.active::after { | |
| width: 100%; | |
| } | |
| /* ── Section Divider ── */ | |
| .section-divider { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent 0%, rgba(74, 93, 133, 0.3) 20%, rgba(74, 93, 133, 0.3) 80%, transparent 100%); | |
| position: relative; | |
| } | |
| .section-divider::after { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| top: -3px; | |
| transform: translateX(-50%); | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--amber); | |
| box-shadow: 0 0 12px var(--amber-glow); | |
| } | |
| /* ── Table Styles ── */ | |
| .data-table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| } | |
| .data-table th { | |
| text-align: left; | |
| padding: 14px 16px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| border-bottom: 1px solid var(--border-subtle); | |
| white-space: nowrap; | |
| } | |
| .data-table td { | |
| padding: 14px 16px; | |
| border-bottom: 1px solid rgba(74, 93, 133, 0.08); | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| vertical-align: middle; | |
| } | |
| .data-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .data-table tbody tr { | |
| transition: background 0.2s ease; | |
| } | |
| .data-table tbody tr:hover { | |
| background: rgba(74, 93, 133, 0.06); | |
| } | |
| .data-table .value-cell { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 0.9rem; | |
| } | |
| .data-table .highlight-row { | |
| background: rgba(212, 160, 63, 0.04); | |
| } | |
| .data-table .highlight-row:hover { | |
| background: rgba(212, 160, 63, 0.08); | |
| } | |
| /* ── Tooltip ── */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip::before { | |
| content: attr(data-tip); | |
| position: absolute; | |
| bottom: calc(100% + 8px); | |
| left: 50%; | |
| transform: translateX(-50%) translateY(4px); | |
| padding: 6px 12px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 8px; | |
| font-size: 0.7rem; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.2s ease; | |
| z-index: 100; | |
| } | |
| .tooltip:hover::before { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| /* ── Scroll indicator ── */ | |
| .scroll-hint { | |
| animation: scrollBounce 2s ease-in-out infinite; | |
| } | |
| @keyframes scrollBounce { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| opacity: 0.5; | |
| } | |
| 50% { | |
| transform: translateY(8px); | |
| opacity: 1; | |
| } | |
| } | |
| /* ── Status badges ── */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| letter-spacing: 0.02em; | |
| } | |
| .badge-mature { | |
| background: rgba(42, 157, 143, 0.12); | |
| color: var(--teal); | |
| border: 1px solid rgba(42, 157, 143, 0.2); | |
| } | |
| .badge-progress { | |
| background: rgba(212, 160, 63, 0.12); | |
| color: var(--amber); | |
| border: 1px solid rgba(212, 160, 63, 0.2); | |
| } | |
| .badge-crisis { | |
| background: rgba(199, 92, 92, 0.12); | |
| color: var(--rose); | |
| border: 1px solid rgba(199, 92, 92, 0.2); | |
| } | |
| .badge-stagnant { | |
| background: rgba(100, 116, 139, 0.12); | |
| color: var(--text-muted); | |
| border: 1px solid rgba(100, 116, 139, 0.2); | |
| } | |
| /* ── Range Slider ── */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| height: 4px; | |
| background: var(--slate-700); | |
| border-radius: 2px; | |
| outline: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: var(--amber); | |
| cursor: pointer; | |
| box-shadow: 0 0 12px var(--amber-glow); | |
| transition: transform 0.2s ease; | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| } | |
| /* ── Custom Select ── */ | |
| .custom-select { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 10px; | |
| padding: 10px 16px; | |
| color: var(--text-primary); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .custom-select:hover { | |
| border-color: var(--border-hover); | |
| } | |
| .custom-select:focus { | |
| outline: none; | |
| border-color: var(--amber); | |
| box-shadow: 0 0 0 3px var(--amber-glow); | |
| } | |
| /* ── Tab System ── */ | |
| .tab-btn { | |
| padding: 10px 20px; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| background: transparent; | |
| border: 1px solid transparent; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| white-space: nowrap; | |
| } | |
| .tab-btn:hover { | |
| color: var(--text-primary); | |
| background: rgba(74, 93, 133, 0.1); | |
| } | |
| .tab-btn.active { | |
| color: var(--amber); | |
| background: var(--amber-glow); | |
| border-color: rgba(212, 160, 63, 0.2); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: tabFadeIn 0.4s ease; | |
| } | |
| @keyframes tabFadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ── Accordion ── */ | |
| .accordion-item { | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .accordion-item:last-child { | |
| border-bottom: none; | |
| } | |
| .accordion-header { | |
| padding: 20px 0; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| transition: color 0.2s ease; | |
| } | |
| .accordion-header:hover { | |
| color: var(--text-primary); | |
| } | |
| .accordion-body { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .accordion-body.open { | |
| max-height: 500px; | |
| } | |
| .accordion-chevron { | |
| transition: transform 0.3s ease; | |
| color: var(--text-muted); | |
| } | |
| .accordion-item.open .accordion-chevron { | |
| transform: rotate(180deg); | |
| } | |
| /* ── Map-like Regions ── */ | |
| .region-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 12px; | |
| } | |
| .region-card { | |
| padding: 20px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border-subtle); | |
| background: rgba(18, 26, 48, 0.5); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .region-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 3px; | |
| height: 100%; | |
| background: var(--color); | |
| opacity: 0.7; | |
| transition: width 0.3s ease; | |
| } | |
| .region-card:hover { | |
| border-color: var(--border-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.4); | |
| } | |
| .region-card:hover::before { | |
| width: 4px; | |
| } | |
| /* ── Stacked Bar ── */ | |
| .stacked-bar { | |
| display: flex; | |
| height: 32px; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| background: var(--slate-750); | |
| } | |
| .stacked-segment { | |
| transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); | |
| position: relative; | |
| } | |
| .stacked-segment:hover { | |
| filter: brightness(1.2); | |
| } | |
| /* ── Sparkline placeholder ── */ | |
| .sparkline-up { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 2px; | |
| height: 20px; | |
| } | |
| .sparkline-up .dot { | |
| width: 3px; | |
| border-radius: 2px; | |
| background: var(--teal); | |
| opacity: 0.5; | |
| animation: sparkGrow 0.6s ease forwards; | |
| } | |
| @keyframes sparkGrow { | |
| from { | |
| height: 2px; | |
| } | |
| } | |
| /* ── Hero Number Animation ── */ | |
| .hero-number { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-weight: 700; | |
| font-size: clamp(3.5rem, 10vw, 7rem); | |
| line-height: 1; | |
| letter-spacing: -0.04em; | |
| background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 50%, #64748b 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-number.accent { | |
| background: linear-gradient(135deg, #d4a03f 0%, #e8c070 50%, #d4a03f 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: 0 0 60px var(--amber-glow); | |
| } | |
| /* ── Timeline Visualization ── */ | |
| .timeline-track { | |
| position: relative; | |
| height: 4px; | |
| background: var(--slate-700); | |
| border-radius: 2px; | |
| } | |
| .timeline-fill { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| border-radius: 2px; | |
| transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .timeline-marker { | |
| position: absolute; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| border: 2px solid var(--bg-deep); | |
| transition: all 0.3s ease; | |
| } | |
| .timeline-marker::after { | |
| content: attr(data-year); | |
| position: absolute; | |
| top: -28px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| font-family: 'JetBrains Mono', monospace; | |
| white-space: nowrap; | |
| } | |
| .timeline-marker::before { | |
| content: attr(data-label); | |
| position: absolute; | |
| top: 18px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.65rem; | |
| color: var(--text-muted); | |
| white-space: nowrap; | |
| } | |
| /* ── Responsive ── */ | |
| @media (max-width: 768px) { | |
| .region-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* ── Print styles ── */ | |
| @media print { | |
| .ambient-bg, | |
| .grid-overlay, | |
| .noise, | |
| .scroll-hint { | |
| display: none ; | |
| } | |
| body { | |
| background: white; | |
| color: black; | |
| } | |
| .glass-card { | |
| background: white; | |
| border: 1px solid #ccc; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background Layers --> | |
| <div class="ambient-bg"></div> | |
| <div class="grid-overlay"></div> | |
| <div class="noise"></div> | |
| <!-- Header / Nav --> | |
| <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="mainHeader"> | |
| <div class="max-w-7xl mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: linear-gradient(135deg, var(--amber), var(--teal));"> | |
| <i class="fa-solid fa-globe text-white text-sm"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-sm font-bold tracking-tight text-white">World Social Protection</h1> | |
| <p class="text-[0.65rem] text-slate-400 font-mono tracking-wider">ILO REPORT 2024–26</p> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex items-center gap-1"> | |
| <a href="#executive-summary" class="nav-link px-3 py-1.5 text-xs font-medium">Executive</a> | |
| <a href="#coverage" class="nav-link px-3 py-1.5 text-xs font-medium">Coverage</a> | |
| <a href="#regional" class="nav-link px-3 py-1.5 text-xs font-medium">Regional</a> | |
| <a href="#gender" class="nav-link px-3 py-1.5 text-xs font-medium">Gender</a> | |
| <a href="#oecd" class="nav-link px-3 py-1.5 text-xs font-medium">Expenditure</a> | |
| <a href="#financing" class="nav-link px-3 py-1.5 text-xs font-medium">Financing</a> | |
| <a href="#projections" class="nav-link px-3 py-1.5 text-xs font-medium">Projections</a> | |
| </nav> | |
| <button class="md:hidden text-slate-300 hover:text-white" onclick="toggleMobileNav()"> | |
| <i class="fa-solid fa-bars text-lg"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Nav --> | |
| <div id="mobileNav" class="fixed inset-0 z-40 bg-slate-950/95 backdrop-blur-xl hidden"> | |
| <div class="flex flex-col items-center justify-center h-full gap-6"> | |
| <a href="#executive-summary" onclick="toggleMobileNav()" class="text-xl font-display text-slate-300 hover:text-amber-400 transition-colors">Executive Summary</a> | |
| <a href="#coverage" onclick="toggleMobileNav()" class="text-xl font-display text-slate-300 hover:text-amber-400 transition-colors">Coverage</a> | |
| <a href="#regional" onclick="toggleMobileNav()" class="text-xl font-display text-slate-300 hover:text-amber-400 transition-colors">Regional</a> | |
| <a href="#gender" onclick="toggleMobileNav()" class="text-xl font-display text-slate-300 hover:text-amber-400 transition-colors">Gender</a> | |
| <a href="#oecd" onclick="toggleMobileNav()" class="text-xl font-display text-slate-300 hover:text-amber-400 transition-colors">Expenditure</a> | |
| <a href="#financing" onclick="toggleMobileNav()" class="text-xl font-display text-slate-300 hover:text-amber-400 transition-colors">Financing</a> | |
| <a href="#projections" onclick="toggleMobileNav()" class="text-xl font-display text-slate-300 hover:text-amber-400 transition-colors">Projections</a> | |
| <button onclick="toggleMobileNav()" class="mt-8 text-slate-500 hover:text-white"> | |
| <i class="fa-solid fa-xmark text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- ── HERO ── --> | |
| <section class="relative z-10 min-h-screen flex flex-col justify-center px-6 pt-20 pb-16" id="executive-summary"> | |
| <div class="max-w-7xl mx-auto w-full"> | |
| <!-- Top label --> | |
| <div class="reveal flex items-center gap-3 mb-8"> | |
| <div class="h-px w-12 bg-gradient-to-r from-amber-400 to-transparent"></div> | |
| <span class="text-[0.7rem] font-mono font-medium tracking-[0.2em] uppercase text-amber-400">Global Social Protection Dashboard</span> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center"> | |
| <div> | |
| <h2 class="reveal reveal-delay-1 font-display text-4xl md:text-5xl lg:text-6xl font-bold leading-[1.1] text-white mb-6"> | |
| Half the world is covered.<br> | |
| <span class="text-slate-400">Half is not.</span> | |
| </h2> | |
| <p class="reveal reveal-delay-2 text-slate-400 text-base md:text-lg leading-relaxed max-w-xl mb-10"> | |
| For the first time in history, <strong class="text-white">52.4%</strong> of the global population has access to at least one social protection benefit. Yet 3.8 billion people remain entirely unprotected, and universal coverage won't arrive until <span class="text-rose-400 font-mono font-semibold">2073</span> at the current rate. | |
| </p> | |
| <div class="reveal reveal-delay-3 flex flex-wrap gap-3 mb-12"> | |
| <a href="#coverage" class="group px-6 py-3 bg-amber-500/10 border border-amber-500/20 text-amber-400 rounded-xl text-sm font-medium hover:bg-amber-500/20 hover:border-amber-500/30 transition-all duration-300 flex items-center gap-2"> | |
| Explore the Data | |
| <i class="fa-solid fa-arrow-right text-xs group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| <a href="#projections" class="px-6 py-3 bg-slate-800/50 border border-slate-700/50 text-slate-300 rounded-xl text-sm font-medium hover:bg-slate-800 hover:border-slate-600 transition-all duration-300"> | |
| See Projections | |
| </a> | |
| </div> | |
| </div> | |
| <div class="reveal reveal-delay-2 relative"> | |
| <div class="glass-card p-8 md:p-10 glow-amber"> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div class="text-center"> | |
| <div class="hero-number accent counter" data-target="52.4">0</div> | |
| <div class="text-slate-400 text-xs font-medium mt-2 uppercase tracking-wider">Global Coverage</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="hero-number counter" data-target="3.8">0</div> | |
| <div class="text-slate-400 text-xs font-medium mt-2 uppercase tracking-wider">Billion Unprotected</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="hero-number counter" data-target="76.2">0</div> | |
| <div class="text-slate-400 text-xs font-medium mt-2 uppercase tracking-wider">pp Divergence Gap</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="hero-number" style="background: linear-gradient(135deg, #c75c5c, #e57373); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">2073</div> | |
| <div class="text-slate-400 text-xs font-medium mt-2 uppercase tracking-wider">Universal Target</div> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-slate-700/50"> | |
| <div class="flex items-center justify-between text-xs"> | |
| <span class="text-slate-500">High-income coverage</span> | |
| <span class="font-mono font-bold text-teal-400">85.9%</span> | |
| </div> | |
| <div class="flex items-center justify-between text-xs mt-2"> | |
| <span class="text-slate-500">Low-income coverage</span> | |
| <span class="font-mono font-bold text-rose-400">9.7%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Decorative element --> | |
| <div class="absolute -top-4 -right-4 w-24 h-24 border border-amber-500/10 rounded-full animate-pulse" style="animation-duration: 4s;"></div> | |
| <div class="absolute -bottom-6 -left-6 w-16 h-16 border border-teal-500/10 rounded-full animate-pulse" style="animation-duration: 5s;"></div> | |
| </div> | |
| </div> | |
| <!-- Scroll hint --> | |
| <div class="scroll-hint absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-slate-500"> | |
| <span class="text-[0.65rem] tracking-widest uppercase">Scroll</span> | |
| <i class="fa-solid fa-chevron-down text-xs"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── SECTION I: GLOBAL COVERAGE ── --> | |
| <section class="relative z-10 px-6 py-20" id="coverage"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="reveal flex items-center gap-3 mb-4"> | |
| <span class="font-mono text-xs text-amber-400 font-bold">I.</span> | |
| <div class="h-px w-8 bg-amber-400/30"></div> | |
| </div> | |
| <h2 class="reveal font-display text-3xl md:text-4xl font-bold text-white mb-3">Global Coverage</h2> | |
| <p class="reveal text-slate-400 text-base max-w-2xl mb-12">The Coverage Landscape in 2023 — income groups, social protection branches, and the widening chasm between the protected and the unprotected.</p> | |
| <!-- Income Groups Table --> | |
| <div class="reveal glass-card p-1 mb-8"> | |
| <div class="p-5 pb-3 border-b border-slate-700/30"> | |
| <h3 class="text-sm font-semibold text-white flex items-center gap-2"> | |
| <i class="fa-solid fa-layer-group text-amber-400 text-xs"></i> | |
| Coverage by Income Group | |
| </h3> | |
| <p class="text-xs text-slate-500 mt-1">Share of population covered by at least one social protection benefit</p> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="data-table"> | |
| <thead> | |
| <tr> | |
| <th>Income Group</th> | |
| <th>Coverage</th> | |
| <th>Uncovered Population</th> | |
| <th>Visual</th> | |
| </tr> | |
| </thead> | |
| <tbody id="incomeTableBody"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Branch Coverage Cards --> | |
| <div class="reveal mb-4"> | |
| <h3 class="text-sm font-semibold text-white flex items-center gap-2 mb-6"> | |
| <i class="fa-solid fa-sitemap text-teal-400 text-xs"></i> | |
| Coverage by Social Protection Branch | |
| </h3> | |
| </div> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" id="branchCards"></div> | |
| </div> | |
| </section> | |
| <div class="section-divider max-w-7xl mx-auto"></div> | |
| <!-- ── SECTION II: REGIONAL ANALYSIS ── --> | |
| <section class="relative z-10 px-6 py-20" id="regional"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="reveal flex items-center gap-3 mb-4"> | |
| <span class="font-mono text-xs text-amber-400 font-bold">II.</span> | |
| <div class="h-px w-8 bg-amber-400/30"></div> | |
| </div> | |
| <h2 class="reveal font-display text-3xl md:text-4xl font-bold text-white mb-3">Regional Analysis</h2> | |
| <p class="reveal text-slate-400 text-base max-w-2xl mb-12">Divergent trajectories across regions — from mature systems to crisis territory.</p> | |
| <!-- Regional Progress Table --> | |
| <div class="reveal glass-card p-1 mb-10"> | |
| <div class="p-5 pb-3 border-b border-slate-700/30"> | |
| <h3 class="text-sm font-semibold text-white flex items-center gap-2"> | |
| <i class="fa-solid fa-earth-americas text-teal-400 text-xs"></i> | |
| Regional Progress (2015 — 2023) | |
| </h3> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="data-table"> | |
| <thead> | |
| <tr> | |
| <th>Region / Group</th> | |
| <th>2015</th> | |
| <th>2023</th> | |
| <th>Change</th> | |
| <th>Status</th> | |
| </tr> | |
| </thead> | |
| <tbody id="regionalTableBody"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Africa Crisis Panel --> | |
| <div class="reveal glass-card p-8 glow-rose border-rose-500/20"> | |
| <div class="flex items-start gap-5"> | |
| <div class="w-12 h-12 rounded-xl bg-rose-500/10 flex items-center justify-center flex-shrink-0 border border-rose-500/20"> | |
| <i class="fa-solid fa-triangle-exclamation text-rose-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Africa's Protection Crisis</h3> | |
| <p class="text-slate-400 text-sm leading-relaxed mb-5"> | |
| <strong class="text-rose-400">80.9%</strong> of Africa's 1.4 billion people have no social protection whatsoever. Sub-Saharan Africa fares worst at just 15.4% coverage. Given climate shocks, demographic youth bulge, and informal labor dominance, this deficit represents an <span class="text-rose-400">existential risk</span> to continental stability. | |
| </p> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="text-center p-4 bg-rose-500/5 rounded-xl border border-rose-500/10"> | |
| <div class="text-2xl font-mono font-bold text-rose-400">80.9%</div> | |
| <div class="text-[0.65rem] text-slate-500 mt-1 uppercase tracking-wider">Unprotected</div> | |
| </div> | |
| <div class="text-center p-4 bg-rose-500/5 rounded-xl border border-rose-500/10"> | |
| <div class="text-2xl font-mono font-bold text-rose-400">15.4%</div> | |
| <div class="text-[0.65rem] text-slate-500 mt-1 uppercase tracking-wider">Sub-Saharan</div> | |
| </div> | |
| <div class="text-center p-4 bg-rose-500/5 rounded-xl border border-rose-500/10"> | |
| <div class="text-2xl font-mono font-bold text-rose-400">35.8%</div> | |
| <div class="text-[0.65rem] text-slate-500 mt-1 uppercase tracking-wider">Northern Africa</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |