/* (c) Spacehubs Africa. All rights reserved. Licensed under the Proprietary License found in the LICENSE file in the root directory of this source tree. */ /* ── Pan-African palette – single source of truth ───────────────────────── CSS custom properties used by Tailwind utility classes (defined in tailwind.config.js) and directly via var(--color-sha-*) in this file. To add a colour: add it here AND in tailwind.config.js theme.extend.colors. ────────────────────────────────────────────────────────────────────────── */ :root { --color-sha-indigo-bg: #EEF0F8; --color-sha-indigo-text: #2C3E7A; --color-sha-indigo-border: #7A90D4; --color-sha-indigo: #4A62B8; --color-sha-gold-bg: #FDF6DC; --color-sha-gold-text: #7A4500; --color-sha-gold-border: #E8B82A; --color-sha-gold: #C8960C; --color-sha-green-bg: #E8F7EF; --color-sha-green-text: #1A7A4A; --color-sha-green-border: #5DC98A; --color-sha-green: #2DAA64; --color-sha-red-bg: #FAE8E7; --color-sha-red-text: #C0392B; --color-sha-red-border: #E05444; --color-sha-red: #E05444; --color-sha-teal-bg: #E5F6F9; --color-sha-teal-text: #0A6A78; --color-sha-teal-border: #5DC4D4; --color-sha-teal: #12A8BD; --color-sha-purple-bg: #F3EEF8; --color-sha-purple-text: #5C2E8A; --color-sha-purple-border: #B08AD4; --color-sha-purple: #8B4DC8; --color-sha-orange-bg: #FEF0E0; --color-sha-orange-text: #B5520A; --color-sha-orange-border: #D97820; --color-sha-orange: #D97820; --color-sha-stone-bg: #F5F5F0; --color-sha-stone-text: #6B6B5E; --color-sha-stone-border: #9A9A88; --color-sha-stone: #9A9A88; --color-sha-sky-bg: #E0F5FB; --color-sha-sky-text: #075985; --color-sha-sky-border: #0EA5E9; --color-sha-sky: #0EA5E9; } /* Keep scrollbars subtle but still easy to grab. */ * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.28) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.28); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.42); border-radius: 999px; cursor: pointer; } /* Auth pages + empty states use this as a subtle background wash. */ .gradient-bg { background: radial-gradient(1200px circle at 20% 10%, rgba(99, 102, 241, 0.10), transparent 40%), radial-gradient(900px circle at 80% 30%, rgba(59, 130, 246, 0.10), transparent 40%), linear-gradient(180deg, #f8fafc, #ffffff 40%); } .hover-opacity-85:hover { opacity: 0.85; } .hover-bg-sha-indigo-text:hover { background-color: var(--color-sha-indigo-text); } .sha-green-cta { background-color: var(--color-sha-green); } .sha-green-cta:hover { background-color: var(--color-sha-green-text); } .sha-gold-cta { background-color: #C8960C; } .sha-gold-cta:hover { background-color: #A87800; } /* Arabic (ar) RTL overrides The attribute is set by base.html when LANGUAGE_CODE == 'ar'. Browsers handle inline text direction automatically. These rules fix the structural elements that use physical (left/right) CSS properties. */ /* Desktop user-menu dropdown: re-anchor to the left edge in RTL */ [dir="rtl"] #user-menu { right: auto; left: 0; } /* Mobile nav drawer: slide in from the right instead of the left */ [dir="rtl"] #mobileNav { left: auto; right: 0; } /* Invert the -translate-x-full hide state so the drawer exits to the right */ [dir="rtl"] #mobileNav.-translate-x-full { transform: translateX(100%); } /* ── Shared component styles ────────────────────────────────────────────────── */ /* Toggle switch */ .switch { position: relative; display: inline-block; width: 42px; height: 22px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background: #e5e7eb; transition: .2s; border-radius: 9999px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; top: 2px; background: #ffffff; transition: .2s; border-radius: 9999px; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .switch input:checked + .slider { background: var(--color-sha-indigo); } .switch input:checked + .slider:before { transform: translateX(20px); } /* amCharts export menu */ .am5-exporting-menu { z-index: 1000 !important; background: white !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 4px !important; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1) !important; } .am5-exporting-icon { width: 24px !important; height: 24px !important; padding: 4px !important; opacity: 0.6 !important; transition: opacity 0.2s !important; } .am5-exporting-icon:hover { opacity: 1 !important; background: #f1f5f9 !important; border-radius: 4px !important; } .am5-exporting-list { list-style: none !important; margin: 0 !important; padding: 0 !important; } .am5-exporting-item { padding: 8px 12px !important; font-size: 13px !important; color: #475569 !important; cursor: pointer !important; border-radius: 4px !important; } .am5-exporting-item:hover { background: var(--color-sha-indigo-bg) !important; color: var(--color-sha-indigo) !important; } /* ── RTL overrides ──────────────────────────────────────────────────────────── */ /* Toggle switch knob: start from the right side */ [dir="rtl"] .slider:before { left: auto; right: 2px; } /* Toggle switch: knob slides left (negative) in RTL */ [dir="rtl"] input:checked + .slider:before { transform: translateX(-18px); } /* Form text inputs: right-align text for Arabic */ [dir="rtl"] input[type="text"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="password"], [dir="rtl"] input[type="search"], [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } /* ── Skeleton Screens ───────────────────────────────────────────────────────── */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .skeleton { background-color: #f3f4f6; /* gray-100 */ border-radius: 0.75rem; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; position: relative; overflow: hidden; } /* Specific skeleton variants */ .skeleton-chart { min-height: 10rem; width: 100%; } .skeleton-card { min-height: 10rem; width: 100%; } /* For amCharts containers: hide skeleton once .loaded is added */ .chart-skeleton { background-color: #f8fafc; /* slate-50 */ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; border-radius: 0.5rem; } .chart-skeleton.loaded { background-color: transparent; animation: none; } /* ── Premium lock overlay (country detail + analytics) ─────────────────── */ .premium-lock-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding-top: 3.5rem; } .premium-lock-overlay-bg { position: absolute; inset: 0; background: rgba(255,255,255,0.78); backdrop-filter: blur(3px); border-radius: 0.75rem; } .premium-lock-card { position: relative; z-index: 10; text-align: center; background: #ffffff; border: 1px solid #fde68a; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.05); padding: 2rem 2rem 1.75rem; max-width: 22rem; margin: 0 1rem; } .premium-lock-icon { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: #fffbeb; border: 1px solid #fde68a; margin: 0 auto 1rem; } .premium-lock-skeleton-bg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; pointer-events: none; user-select: none; filter: blur(3px); opacity: 0.25; } .tab-content-blurred { pointer-events: none; user-select: none; filter: blur(3px); opacity: 0.2; }