/* ============================================================ SINDAL ARABIA — COLOR TOKENS Derived from the brand "S" gradient: deep blue → teal → emerald → lime, with a charcoal wordmark on cool neutrals. ============================================================ */ :root { /* ---- Brand gradient stops (sampled from the logo mark) ---- */ --sindal-blue: #0067AA; /* deep azure — base of the S */ --sindal-cyan: #0086A0; /* blue→teal transition */ --sindal-teal: #008A84; /* core teal */ --sindal-emerald: #009257; /* green body of the S */ --sindal-green: #1A9A3C; /* upper sweep */ --sindal-lime: #4FA80A; /* bright tip of the swoosh */ /* Tints & shades of the signature emerald (primary ramp) */ --emerald-50: #e7f6ee; --emerald-100: #c3e9d3; --emerald-200: #8fd6ad; --emerald-300: #54bf83; --emerald-400: #1fa861; --emerald-500: #009257; /* base primary */ --emerald-600: #007a48; --emerald-700: #00603a; --emerald-800: #06492e; --emerald-900: #0a3a26; /* Blue ramp (secondary) */ --blue-50: #e6f1f8; --blue-100: #c2dded; --blue-200: #88bcdb; --blue-300: #4897c5; --blue-400: #1a7bb4; --blue-500: #0067AA; /* base secondary */ --blue-600: #005691; --blue-700: #034472; --blue-800: #07344f; --blue-900: #0a2738; /* ---- Cool neutral ramp (slate with a faint blue cast, echoing the logo's lavender-grey ground) ---- */ --ink-950: #0b1117; --ink-900: #11181f; /* charcoal — wordmark color */ --ink-800: #1c2630; --ink-700: #2c3946; --ink-600: #3f4e5d; --ink-500: #5b6b7a; --ink-400: #7e8c99; --ink-300: #a6b1bc; --ink-200: #cdd4db; --ink-150: #dfe4e9; --ink-100: #eceff2; --ink-50: #f5f7f9; --ink-25: #fafbfc; --white: #ffffff; /* ---- Hi-vis safety semantics ---- */ --safety-amber: #F5A623; /* caution */ --safety-amber-bg:#fdf1da; --safety-red: #E03A3A; /* danger / stop */ --safety-red-bg: #fbe4e4; --safety-orange: #F26A21; /* hazard accent */ --success: var(--emerald-500); --success-bg: var(--emerald-50); --warning: var(--safety-amber); --warning-bg: var(--safety-amber-bg); --danger: var(--safety-red); --danger-bg: var(--safety-red-bg); --info: var(--blue-500); --info-bg: var(--blue-50); /* ============================================================ SEMANTIC ALIASES — reference these in components, not raw ramps ============================================================ */ /* Brand */ --brand-primary: var(--emerald-500); --brand-primary-hover: var(--emerald-600); --brand-primary-press: var(--emerald-700); --brand-secondary: var(--blue-500); --brand-secondary-hover:var(--blue-600); --brand-on-primary: #ffffff; /* Text */ --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-subtle: var(--ink-400); --text-on-dark: rgba(255,255,255,0.92); --text-on-dark-muted: rgba(255,255,255,0.66); --text-link: var(--blue-600); /* Surfaces (opaque) */ --surface-page: var(--ink-50); --surface-card: #ffffff; --surface-sunken: var(--ink-100); --surface-inverse:var(--ink-900); /* Borders & lines */ --border-subtle: var(--ink-150); --border-default:var(--ink-200); --border-strong: var(--ink-300); --focus-ring: color-mix(in srgb, var(--emerald-500) 55%, transparent); } /* ============================================================ SINDAL ARABIA — TYPOGRAPHY TOKENS Display: Oxanium — geometric, chamfered, techno; echoes the angular logo wordmark. Headlines, numerals, labels. Text: IBM Plex Sans Arabic — bilingual (Latin + Arabic), clean and technical; all body & UI copy. Mono: IBM Plex Mono — SKUs, specs, codes. NOTE: Real wordmark font is a custom/unknown geometric face; Oxanium is the closest Google Fonts substitute. Flagged to the user — supply the original if available. ============================================================ */ :root { --font-display: "Oxanium", "Saira", system-ui, sans-serif; --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* Type scale — 1.250 (major third), 16px base */ --text-2xs: 0.6875rem; /* 11 */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-md: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 2.875rem; /* 46 */ --text-5xl: 3.75rem; /* 60 */ --text-6xl: 4.75rem; /* 76 */ /* Weights */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-extrabold:800; /* @kind font */ /* Line heights */ --lh-tight: 1.05; /* @kind font */ --lh-snug: 1.2; /* @kind font */ --lh-normal: 1.5; /* @kind font */ --lh-relaxed: 1.65; /* @kind font */ /* Letter spacing */ --ls-tight: -0.02em; /* @kind font */ --ls-normal: 0; /* @kind font */ --ls-wide: 0.04em; /* @kind font */ --ls-wider: 0.12em; /* @kind font */ /* uppercase eyebrows / techno labels */ /* Semantic roles */ --display-font: var(--font-display); --display-weight: var(--fw-bold); --display-tracking: var(--ls-tight); --eyebrow-font: var(--font-display); --eyebrow-tracking: var(--ls-wider); --body-font: var(--font-sans); --body-line: var(--lh-relaxed); } /* ============================================================ SINDAL ARABIA — SPACING, RADII, LAYOUT 8px base grid. Generous radii to support the soft, pill-and- panel glassmorphism look. ============================================================ */ :root { --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-12: 7rem; /* 112 */ /* Corner radii */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; /* default glass panel */ --radius-xl: 26px; --radius-2xl: 36px; --radius-pill:999px; --radius-round:50%; /* Layout */ --container-sm: 640px; --container-md: 920px; --container-lg: 1200px; --container-xl: 1360px; --gutter: var(--space-5); /* Control sizing */ --control-h-sm: 36px; --control-h-md: 44px; /* >= 44px touch target */ --control-h-lg: 54px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-med: 240ms; /* @kind other */ --dur-slow: 420ms; /* @kind other */ } /* ============================================================ SINDAL ARABIA — GRADIENTS & GLASSMORPHISM The brand expresses itself through the "S" gradient and frosted-glass surfaces layered over it. ============================================================ */ :root { /* ---- Signature gradients ---- */ --grad-brand: linear-gradient(115deg, #0067AA 0%, #008A84 42%, #009257 68%, #4FA80A 100%); /* @kind color */ --grad-brand-soft: linear-gradient(115deg, #0a5e93 0%, #0a7d76 50%, #2a8a3e 100%); /* @kind color */ --grad-aqua: linear-gradient(135deg, #0086A0 0%, #009257 100%); /* @kind color */ --grad-lime: linear-gradient(135deg, #009257 0%, #4FA80A 100%); /* @kind color */ --grad-deep: linear-gradient(160deg, #07344f 0%, #06492e 100%); /* @kind color */ /* Mesh wash for hero/page backgrounds behind glass */ --grad-mesh: radial-gradient(120% 120% at 0% 0%, rgba(0,103,170,0.85) 0%, rgba(0,103,170,0) 55%), radial-gradient(120% 120% at 100% 0%, rgba(79,168,10,0.80) 0%, rgba(79,168,10,0) 50%), radial-gradient(140% 140% at 80% 100%,rgba(0,146,87,0.90) 0%, rgba(0,138,132,0) 60%), linear-gradient(135deg, #064a6e 0%, #06492e 100%); /* @kind color */ /* ---- Glass surfaces ---- Frosted panels. Pair --glass-* bg with --glass-blur and a 1px --glass-border, plus the highlight inset shadow. */ --glass-blur: 18px; --glass-blur-strong: 32px; --glass-saturate: 1.4; /* @kind other */ /* Light glass — over imagery or gradients, content reads dark */ --glass-light-bg: rgba(255,255,255,0.55); --glass-light-bg-2: rgba(255,255,255,0.72); --glass-light-border: rgba(255,255,255,0.65); --glass-light-hair: rgba(255,255,255,0.9); /* top highlight */ /* Tinted glass — brand-tinted frost */ --glass-tint-bg: rgba(0,146,87,0.16); --glass-tint-border: rgba(255,255,255,0.40); /* Dark glass — over bright gradients, content reads light */ --glass-dark-bg: rgba(11,24,31,0.42); --glass-dark-bg-2: rgba(11,24,31,0.62); --glass-dark-border: rgba(255,255,255,0.16); --glass-dark-hair: rgba(255,255,255,0.22); /* Frost on a plain page (neutral cards that still feel glassy) */ --glass-frost-bg: rgba(245,247,249,0.70); --glass-frost-border: rgba(255,255,255,0.8); /* ---- Elevation: soft, cool-tinted shadows ---- */ --shadow-xs: 0 1px 2px rgba(11,24,31,0.06); --shadow-sm: 0 2px 6px rgba(11,24,31,0.07), 0 1px 2px rgba(11,24,31,0.06); --shadow-md: 0 8px 24px rgba(11,24,31,0.10), 0 2px 6px rgba(11,24,31,0.06); --shadow-lg: 0 18px 48px rgba(11,24,31,0.14), 0 6px 16px rgba(11,24,31,0.08); --shadow-xl: 0 32px 80px rgba(7,52,79,0.22), 0 12px 28px rgba(11,24,31,0.12); /* Glow under brand-colored surfaces */ --shadow-brand: 0 16px 40px rgba(0,146,87,0.30); --shadow-blue: 0 16px 40px rgba(0,103,170,0.28); /* The glass "lift": outer drop + inner top highlight + inner base shade */ --glass-shadow: 0 12px 40px rgba(7,52,79,0.18), inset 0 1px 0 var(--glass-light-hair), inset 0 -1px 0 rgba(11,24,31,0.04); --glass-shadow-dark: 0 16px 48px rgba(0,0,0,0.28), inset 0 1px 0 var(--glass-dark-hair), inset 0 -1px 0 rgba(0,0,0,0.10); } /* ---- Utility classes (optional convenience) ---- */ .sa-glass { background: var(--glass-light-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-light-border); box-shadow: var(--glass-shadow); border-radius: var(--radius-lg); } .sa-glass-dark { background: var(--glass-dark-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-dark-border); box-shadow: var(--glass-shadow-dark); border-radius: var(--radius-lg); color: var(--text-on-dark); } .sa-gradient-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }