/* ============================================================ iSnow — Central Design Tokens Palette provided by client (iSnow brand). Single source of truth for color, spacing, radius, shadow, and typography variables. Consumed by every custom stylesheet + the Gentelella override layer. ============================================================ */ :root { /* ── Brand palette (iSnow) ────────────────────────────── */ --brand: #D71A1E; /* Buttons (primary CTA) */ --brand-hover: #b8161a; --brand-dark: #8f1114; --accent: #0083FF; /* Buttons, strokes, links, focus, active */ --accent-hover: #0072e0; --accent-dark: #0055b3; --admin: #3582C4; /* Admin slider / secondary accent */ --heading: #15415B; /* Headings — deep iSnow blue */ --sidebar-bg: #1F2E42; /* Sidebar shell — darker step of #2D3F55 */ --sidebar-bg-2: #2A3B52; /* Sidebar hover */ /* ── Status ───────────────────────────────────────────── */ --success: #10b981; --warn: #f59e0b; --err: #D71A1E; /* Same as brand — red is red */ --info: #0083FF; /* ── Neutral surfaces ─────────────────────────────────── */ --white: #ffffff; --surface: #EDF5FF; /* Banner / soft blue tint */ --surface-page: #ffffff; /* Page background */ --surface-2: #F1F5FA; /* Hover / subtle */ --panel: #ffffff; /* Card surface */ /* ── Text ─────────────────────────────────────────────── */ --text: #000000; /* Body text */ --text-2: #1e293b; --muted: #64748b; --muted-2: #94a3b8; /* ── Chrome ───────────────────────────────────────────── */ --border: #DDE7F1; --border-2: #C4D3E2; --divider: #EAF0F6; /* ── Tint mixes (for badges, icon bubbles, focus, hovers) */ --brand-tint: rgba(215, 26, 30, 0.10); /* red tint */ --accent-tint: rgba(0, 131, 255, 0.12); /* blue tint */ --focus-ring: rgba(0, 131, 255, 0.20); --success-tint: rgba(16, 185, 129, 0.12); --warn-tint: rgba(245, 158, 11, 0.14); --err-tint: rgba(215, 26, 30, 0.10); --info-tint: rgba(0, 131, 255, 0.12); /* ── Radius ───────────────────────────────────────────── */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; /* ── Shadows (Radix-style layered — hairline ring + soft drop) ─ */ --shadow-hairline: 0 0 0 1px rgba(15, 32, 51, 0.06); --shadow-xs: 0 0 0 1px rgba(15, 32, 51, 0.05), 0 1px 2px rgba(15, 32, 51, 0.04); --shadow-sm: 0 0 0 1px rgba(15, 32, 51, 0.05), 0 2px 4px rgba(15, 32, 51, 0.05), 0 4px 8px -2px rgba(15, 32, 51, 0.04); --shadow-md: 0 0 0 1px rgba(15, 32, 51, 0.06), 0 3px 6px -1px rgba(15, 32, 51, 0.05), 0 10px 24px -6px rgba(15, 32, 51, 0.10); --shadow-lg: 0 0 0 1px rgba(15, 32, 51, 0.06), 0 8px 16px -4px rgba(15, 32, 51, 0.08), 0 20px 44px -12px rgba(15, 32, 51, 0.16); --shadow-focus: 0 0 0 3px var(--focus-ring); /* ── Typography ───────────────────────────────────────── */ --font-sans: "Poppins", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Poppins", var(--font-sans); /* ── Spacing scale (4-pt grid) ────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; /* ── Sidebar ──────────────────────────────────────────── */ --sidebar-width: 288px; --sidebar-collapsed-width: 76px; --sidebar-active-bg: rgba(255, 255, 255, 0.08); --sidebar-active-border: transparent; --sidebar-text: #ffffff; --sidebar-text-active: #ffffff; --sidebar-icon: #ffffff; --sidebar-icon-active: #ffffff; --sidebar-label: rgba(255, 255, 255, 0.55); /* ── Legacy aliases ───────────────────────────────────── */ --navy: var(--sidebar-bg); --teal: var(--accent); --radius-default: var(--radius); } /* ============================================================ iOS-style radial spinner (used as the blockUI loader) Markup:
Please wait…
============================================================ */ .ios-loader-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 28px 20px; background: rgba(20, 25, 32, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 18px; color: #fff; font-family: var(--font-sans); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } .ios-spinner { position: relative; width: 32px; height: 32px; color: #fff; } .ios-spinner > div { position: absolute; left: 50%; top: 0; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 2px; background: currentColor; transform-origin: 1.5px 16px; animation: iosSpinnerFade 1s linear infinite; } .ios-spinner > div:nth-child(1) { transform: rotate(0deg); animation-delay: -0.916s; } .ios-spinner > div:nth-child(2) { transform: rotate(30deg); animation-delay: -0.833s; } .ios-spinner > div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.750s; } .ios-spinner > div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.666s; } .ios-spinner > div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.583s; } .ios-spinner > div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.500s; } .ios-spinner > div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.416s; } .ios-spinner > div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.333s; } .ios-spinner > div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.250s; } .ios-spinner > div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.166s; } .ios-spinner > div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.083s; } .ios-spinner > div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes iosSpinnerFade { 0% { opacity: 1; } 100% { opacity: 0.20; } } .ios-loader-text { font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.88); }