/* ============================================================
WorldIndex — Master Theme
Version: 1.0.0
Generated from: 39 Blade views audit
TABLE OF CONTENTS
─────────────────
1. Google Fonts
2. Color Palette (CSS Custom Properties)
3. Typography Scale
4. Spacing & Radius Tokens
5. Base Reset
6. Layout
7. Navigation
8. Cards
9. Buttons
10. Form Controls
11. Alerts & Badges
12. Tables
13. Page Headers
14. Utility Classes
15. RTL Support
16. Icon Library Reference
============================================================ */
/* ============================================================
1. GOOGLE FONTS
============================================================
Usage in :
Fonts used:
- Inter (Latin/default) → font-family: 'Inter', sans-serif
- Noto Kufi Arabic (RTL/Arabic) → font-family: 'Noto Kufi Arabic', 'Inter', sans-serif
============================================================ */
/* ============================================================
2. COLOR PALETTE
============================================================ */
:root {
/* ── Brand Colors ── */
--primary: #1B2A4A; /* Navy — main brand, nav background, headings */
--primary-dark: #0D1421; /* Darker navy — hover states */
--primary-mid: #243660; /* Mid navy — button hover */
--accent: #EEDC11; /* Yellow — highlights, CTAs, score badges */
--accent-light: #FFFDE7; /* Light yellow — backgrounds */
--accent-dim: rgba(238, 220, 17, 0.12); /* Yellow overlay */
/* ── Semantic Colors ── */
--success: #059669; /* Green — positive states, loaded badges */
--success-bg: #ECFDF5; /* Green background */
--success-border: #A7F3D0; /* Green border */
--success-text: #065F46; /* Green text */
--success-light: #34D399; /* Light green — charts */
--danger: #DC2626; /* Red — errors, danger actions */
--danger-bg: #FEF2F2; /* Red background */
--danger-border: #FECACA; /* Red border */
--danger-text: #991B1B; /* Red text */
--danger-light: #EF4444; /* Light red — YoY negative */
--danger-muted: #FEE2E2; /* Muted red — backgrounds */
--warning: #D97706; /* Orange — warnings */
--warning-bg: #FFFBEB; /* Orange background */
--warning-border: #FDE68A; /* Orange border */
--warning-text: #92400E; /* Orange text */
--warning-light: #F97316; /* Light orange — charts */
--warning-pale: #FED7AA; /* Pale orange — medal bronze */
--info: #2563EB; /* Blue — links, info states */
--info-bg: #EFF6FF; /* Blue background */
--info-border: #BFDBFE; /* Blue border */
--info-text: #1E40AF; /* Blue text */
--info-light: #3B82F6; /* Light blue — charts */
--purple: #7C3AED; /* Purple — white label plan */
--purple-light: #A78BFA; /* Light purple */
--purple-bg: rgba(124, 58, 237, 0.2);
/* ── Neutral / Gray Scale ── */
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-300: #D1D5DB;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;
/* ── Surface Colors ── */
--bg: #F1F5F9; /* Page background */
--surface: #FFFFFF; /* Card / panel background */
--surface-raised: #FFFFFF; /* Elevated surface */
--border: #E5E7EB; /* Default border */
--border-light: #F3F4F6; /* Subtle border */
/* ── Aliases (kept for backward compatibility) ── */
--navy: var(--primary);
--yellow: var(--accent);
--yellow-light: var(--accent-light);
--green: var(--success);
--red: var(--danger);
--blue: var(--info);
--orange: var(--warning);
--white: var(--surface);
/* ── Plan Badge Colors ── */
--plan-free-bg: rgba(255, 255, 255, 0.1);
--plan-free-text: #94A3B8;
--plan-pro-bg: rgba(238, 220, 17, 0.15);
--plan-pro-text: var(--accent);
--plan-gov-bg: rgba(5, 150, 105, 0.2);
--plan-gov-text: #34D399;
--plan-wl-bg: rgba(124, 58, 237, 0.2);
--plan-wl-text: #A78BFA;
}
/* ============================================================
3. TYPOGRAPHY SCALE
============================================================ */
:root {
/* Font Families */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-arabic: 'Noto Kufi Arabic', 'Inter', sans-serif;
--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
/* Font Sizes (from audit: 9–80px used, core scale below) */
--text-xs: 9px; /* micro labels */
--text-2xs: 10px; /* badges, metadata */
--text-sm: 11px; /* secondary labels */
--text-base: 12px; /* most common body text */
--text-md: 13px; /* primary body text */
--text-lg: 14px; /* slightly larger body */
--text-xl: 16px; /* section headings */
--text-2xl: 18px; /* card headings */
--text-3xl: 22px; /* page titles */
--text-4xl: 28px; /* stat numbers */
--text-5xl: 36px; /* hero scores */
/* Font Weights (from audit: 400, 500, 600, 700 used) */
--font-normal: 400;
--font-medium: 500;
--font-semibold:600;
--font-bold: 700;
/* Line Heights */
--leading-tight: 1.4;
--leading-normal: 1.6;
--leading-relaxed: 1.75;
}
/* ============================================================
4. SPACING & RADIUS TOKENS
============================================================ */
:root {
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
/* Border Radius (from audit: 2px, 6px, 8px, 9px, 10px, 12px, 14px, 99px) */
--radius-xs: 2px; /* flags, tiny elements */
--radius-sm: 6px; /* small buttons, tags */
--radius-md: 8px; /* inputs, small cards */
--radius-lg: 9px; /* standard inputs/buttons */
--radius-xl: 12px; /* modals, dropdowns */
--radius-2xl: 14px; /* cards */
--radius-full: 99px; /* pills, badges, progress bars */
--radius-circle:50%; /* avatars */
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-nav: 0 2px 8px rgba(0, 0, 0, 0.2);
/* Transitions */
--transition-fast: all 0.1s ease;
--transition-base: all 0.15s ease;
--transition-slow: all 0.3s ease;
}
/* ============================================================
5. BASE RESET
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--gray-900);
font-size: var(--text-lg);
line-height: var(--leading-normal);
}
a {
color: var(--info);
text-decoration: none;
}
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
/* ============================================================
6. LAYOUT
============================================================ */
.wi-main {
max-width: 1200px;
margin: 0 auto;
padding: 24px 20px;
}
.wi-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.wi-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.wi-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
.wi-grid-2-1 {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-4);
}
@media (max-width: 768px) {
.wi-grid-2,
.wi-grid-3,
.wi-grid-4,
.wi-grid-2-1 {
grid-template-columns: 1fr;
}
}
/* ============================================================
7. NAVIGATION
============================================================ */
.wi-nav {
background: var(--primary);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-nav);
}
.wi-nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
gap: 8px;
height: 56px;
}
/* Logo */
.wi-logo {
display: flex;
align-items: baseline;
gap: 3px;
text-decoration: none;
margin-right: 12px;
flex-shrink: 0;
}
.wi-logo-w { font-size: 18px; font-weight: 700; color: var(--accent); }
.wi-logo-i { font-size: 18px; font-weight: 700; color: var(--surface); }
.wi-logo-tag {
font-size: 9px;
font-weight: 700;
color: var(--primary);
background: var(--accent);
padding: 1px 5px;
border-radius: var(--radius-full);
margin-left: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Nav links */
.wi-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.wi-nav-link {
padding: 8px 12px;
color: #94A3B8;
font-size: var(--text-base);
font-weight: var(--font-medium);
border-radius: 7px;
text-decoration: none;
transition: var(--transition-base);
white-space: nowrap;
}
.wi-nav-link:hover {
color: var(--surface);
background: rgba(255, 255, 255, 0.08);
text-decoration: none;
}
.wi-nav-link.active {
color: var(--accent);
background: rgba(238, 220, 17, 0.1);
}
/* Nav actions */
.wi-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Plan badge */
.wi-plan-badge {
padding: 3px 9px;
border-radius: var(--radius-full);
font-size: var(--text-2xs);
font-weight: var(--font-bold);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.wi-plan-free { background: var(--plan-free-bg); color: var(--plan-free-text); }
.wi-plan-pro { background: var(--plan-pro-bg); color: var(--plan-pro-text); }
.wi-plan-government { background: var(--plan-gov-bg); color: var(--plan-gov-text); }
.wi-plan-whitelabel { background: var(--plan-wl-bg); color: var(--plan-wl-text); }
/* Notification badge */
.wi-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-full);
font-size: var(--text-2xs);
font-weight: var(--font-bold);
background: var(--danger);
color: var(--surface);
}
/* User menu */
.wi-user-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.15);
background: transparent;
color: var(--surface);
font-size: var(--text-base);
font-weight: var(--font-medium);
cursor: pointer;
font-family: inherit;
transition: var(--transition-base);
}
.wi-user-btn:hover { background: rgba(255, 255, 255, 0.08); }
.wi-user-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--surface);
border: 1px solid var(--gray-200);
border-radius: var(--radius-xl);
min-width: 200px;
box-shadow: var(--shadow-lg);
display: none;
z-index: 200;
overflow: hidden;
}
.wi-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
color: var(--gray-700);
font-size: var(--text-md);
cursor: pointer;
transition: var(--transition-fast);
text-decoration: none;
}
.wi-dropdown-item:hover { background: var(--gray-50); color: var(--gray-900); text-decoration: none; }
.wi-dropdown-item.danger { color: var(--danger); }
.wi-dropdown-divider { height: 1px; background: var(--gray-200); margin: 4px 0; }
.wi-dropdown-header { padding: 12px 14px; font-size: var(--text-base); color: var(--gray-500); }
/* Language switcher */
.wi-lang { display: flex; align-items: center; gap: 4px; }
.wi-lang-btn {
padding: 3px 8px;
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.2);
background: transparent;
color: #94A3B8;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
cursor: pointer;
font-family: inherit;
transition: var(--transition-base);
}
.wi-lang-btn.active { background: var(--accent); color: var(--primary); border-color: var(--accent); }
.wi-lang-btn:hover:not(.active) { color: var(--surface); border-color: rgba(255, 255, 255, 0.4); }
/* ============================================================
8. CARDS
============================================================ */
.wi-card {
background: var(--surface);
border-radius: var(--radius-2xl);
border: 1px solid var(--gray-200);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.wi-card-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
gap: 10px;
}
.wi-card-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--primary);
}
.wi-card-body { padding: 16px 20px; }
/* Navy header card variant */
.wi-card-navy-header {
background: var(--primary);
padding: 20px 24px;
display: flex;
align-items: center;
gap: 16px;
}
/* ============================================================
9. BUTTONS
============================================================ */
.btn, .wi-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 18px;
border-radius: var(--radius-lg);
border: none;
font-size: var(--text-md);
font-weight: var(--font-semibold);
cursor: pointer;
transition: var(--transition-base);
font-family: inherit;
text-decoration: none;
white-space: nowrap;
line-height: 1;
}
/* Variants */
.btn-primary, .wi-btn-primary {
background: var(--primary);
color: var(--accent);
}
.btn-primary:hover, .wi-btn-primary:hover {
background: var(--primary-mid);
color: var(--accent);
text-decoration: none;
}
.btn-yellow {
background: var(--accent);
color: var(--primary);
}
.btn-yellow:hover { background: #e0d00f; color: var(--primary); }
.btn-outline, .wi-btn-secondary {
background: transparent;
color: var(--primary);
border: 1.5px solid var(--gray-300);
}
.btn-outline:hover, .wi-btn-secondary:hover {
border-color: var(--primary);
background: var(--gray-50);
text-decoration: none;
}
.btn-danger {
background: var(--danger);
color: var(--surface);
}
.btn-danger:hover { background: #b91c1c; }
/* Sizes */
.btn-sm { padding: 6px 12px; font-size: var(--text-base); border-radius: 7px; }
.btn-lg { padding: 12px 24px; font-size: var(--text-lg); border-radius: 10px; }
/* Upgrade banner */
.wi-upgrade-banner {
background: linear-gradient(135deg, var(--primary) 0%, #243660 100%);
border: 1px solid rgba(238, 220, 17, 0.3);
border-radius: var(--radius-2xl);
padding: 16px 20px;
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.wi-upgrade-text { flex: 1; font-size: var(--text-md); color: rgba(255, 255, 255, 0.85); }
/* ============================================================
10. FORM CONTROLS
============================================================ */
.wi-form-group { margin-bottom: 16px; }
.wi-label {
display: block;
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--gray-700);
margin-bottom: 6px;
}
.wi-input {
width: 100%;
padding: 9px 12px;
border-radius: var(--radius-lg);
border: 1.5px solid var(--gray-300);
background: var(--surface);
color: var(--gray-900);
font-size: var(--text-md);
font-family: inherit;
transition: border-color 0.15s;
}
.wi-input:focus { outline: none; border-color: var(--primary); }
.wi-input.error { border-color: var(--danger); }
.wi-input-hint { font-size: var(--text-sm); color: var(--gray-400); margin-top: 4px; }
.wi-select {
width: 100%;
padding: 9px 12px;
border-radius: var(--radius-lg);
border: 1.5px solid var(--gray-300);
background: var(--surface);
font-size: var(--text-md);
font-family: inherit;
cursor: pointer;
}
.wi-select:focus { outline: none; border-color: var(--primary); }
.wi-error {
font-size: var(--text-sm);
color: var(--danger);
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
/* ============================================================
11. ALERTS & BADGES
============================================================ */
.wi-alert {
padding: 12px 16px;
border-radius: var(--radius-lg);
margin-bottom: 16px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--text-md);
}
.wi-alert-success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); }
.wi-alert-error { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text); }
.wi-alert-warning { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text); }
.wi-alert-info { background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-text); }
/* Inline badges */
.badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: var(--text-2xs);
font-weight: var(--font-semibold);
}
.badge-green { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.badge-red { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); }
.badge-yellow { background: var(--accent-light); color: var(--primary); border: 1px solid rgba(238,220,17,0.4); }
.badge-gray { background: var(--gray-100); color: var(--gray-600); border: 1px solid var(--gray-200); }
.badge-blue { background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-border); }
/* ============================================================
12. TABLES
============================================================ */
.wi-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-md);
}
.wi-table th {
padding: 10px 14px;
text-align: left;
font-size: var(--text-2xs);
font-weight: var(--font-bold);
color: var(--gray-400);
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--gray-50);
border-bottom: 2px solid var(--border-light);
}
.wi-table td {
padding: 10px 14px;
border-bottom: 1px solid var(--border-light);
color: var(--gray-700);
}
.wi-table tr:last-child td { border-bottom: none; }
.wi-table tr:hover td { background: var(--gray-50); }
/* Progress bar (used in tables and domain bars) */
.wi-bar-track {
background: var(--gray-100);
border-radius: var(--radius-full);
height: 6px;
overflow: hidden;
}
.wi-bar-fill {
height: 100%;
border-radius: var(--radius-full);
transition: width 0.4s ease;
}
/* ============================================================
13. PAGE HEADERS
============================================================ */
.wi-page-header {
margin-bottom: 20px;
}
.wi-page-title {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
.wi-page-sub {
font-size: var(--text-md);
color: var(--gray-500);
margin-top: 4px;
}
/* ============================================================
14. UTILITY CLASSES
============================================================ */
/* Flag images */
.flag-img { width: 24px; height: auto; border-radius: var(--radius-xs); }
.flag-img-lg { width: 48px; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
/* Spinner */
.spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: var(--surface);
border-radius: var(--radius-circle);
animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Score color helpers */
.score-high { color: var(--success); }
.score-medium { color: var(--warning-light); }
.score-low { color: var(--danger); }
/* Trend arrows */
.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }
.trend-flat { color: var(--gray-400); }
/* Text utilities */
.text-navy { color: var(--primary); }
.text-yellow { color: var(--accent); }
.text-muted { color: var(--gray-400); }
.text-mono { font-family: var(--font-mono); }
.text-right { text-align: right; }
.text-center { text-align: center; }
/* Truncate */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ============================================================
15. RTL SUPPORT
============================================================ */
html[dir="rtl"] body {
font-family: var(--font-arabic);
}
html[dir="rtl"] .wi-nav-inner {
flex-direction: row-reverse;
}
html[dir="rtl"] .wi-logo {
margin-right: 0;
margin-left: 12px;
}
html[dir="rtl"] .wi-user-dropdown {
right: auto;
left: 0;
}
/* ============================================================
16. ICON LIBRARY REFERENCE
============================================================
WorldIndex uses two icon sources:
A) EMOJI ICONS (inline, no library needed)
Used for domain icons, status, and UI decoration.
Domain icons defined in config/worldindex.php:
Digital & Technology → 💻
Smart Cities & Urban → 🏙
Human Development → 🌍
Economy & Competitiveness→ 💼
Governance & Transparency→ 🏛
Peace, Security & Freedom→ 🕊
Environment & Sustainability→ 🌿
Education & Knowledge → 🎓
Health → 🏥
Gender & Inclusion → 👥
Trade, Logistics & Travel→ ✈
Infrastructure & Energy → ⚡
B) LUCIDE ICONS (via CDN, for UI elements)
Add to :
Usage: then call lucide.createIcons()
Icons used across the app:
search → country/index search
filter → filter panels
chevron-down → dropdowns
chevron-right → breadcrumbs, links
x → close / clear filters
check → loaded status
circle → not loaded status
trending-up → positive YoY
trending-down → negative YoY
minus → no change
globe → world / global
map → map toggle
bar-chart-2 → rankings
users → admin users
settings → admin settings
shield → governance domain
leaf → environment domain
zap → energy domain
graduation-cap → education domain
heart-pulse → health domain
scale → justice / governance
plane → trade/travel domain
building-2 → smart cities domain
cpu → digital domain
landmark → economy domain
flag → country profiles
star → pro plan
lock → subscription gate
log-out → nav logout
bell → notifications
user → profile
credit-card → billing
C) FLAG ICONS (via CDN, already in app.blade.php)
Usage: (ISO 3166-1 alpha-2 lowercase)
Alternative: flagcdn.com WebP images (already used in views)
============================================================ */