/* * Baseer design tokens + base styles — dark theme (Metoro-inspired). * Complements the Tailwind Play CDN config embedded in each page's . * Keep raw values in sync with tailwind.config there. */ :root { /* Dark palette */ --color-bg: #0b1120; /* deep navy (slate-950 family) */ --color-surface: #0f172a; /* slate-900 */ --color-primary: #0b1120; /* legacy var name kept for older refs */ --color-primary-dark: #020617; --color-primary-light: #1e293b; --color-accent-start: #3b82f6; /* electric blue */ --color-accent-end: #06b6d4; /* cyan */ --color-text: #f8fafc; /* slate-50 */ --color-text-muted: #94a3b8; /* slate-400 */ --gradient-accent: linear-gradient(135deg, var(--color-accent-start), var(--color-accent-end)); /* Inter for Latin, Tajawal for Arabic (swap under RTL) — loaded in */ --font-latin: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-arabic: "Tajawal", "Cairo", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-latin); } /* RTL: Arabic-first stack; layout flips automatically via logical utilities. */ [dir="rtl"] { --font-body: var(--font-arabic); } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text-muted); -webkit-font-smoothing: antialiased; } ::selection { background: rgba(59, 130, 246, 0.35); color: #fff; } /* Brand helpers */ .bg-gradient-accent { background-image: var(--gradient-accent); } .text-gradient-accent { background-image: linear-gradient(90deg, var(--color-accent-start), var(--color-accent-end)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Glassmorphism card: translucent surface + blur + hairline border */ .glass { background-color: rgba(15, 23, 42, 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(30, 41, 59, 0.8); } /* Sticky header becomes more opaque and elevated after scrolling (class toggled by main.js on [data-header]). */ [data-header].is-scrolled { background-color: rgba(2, 6, 23, 0.85); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6); } /* Scroll-triggered reveals: main.js adds .is-visible when the element enters the viewport (IntersectionObserver). */ [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } [data-animate].is-visible { opacity: 1; transform: none; } /* Keep anchor targets clear of the sticky header */ :target { scroll-margin-top: 6rem; } /* Accessibility */ :focus-visible { outline: 2px solid var(--color-accent-end); outline-offset: 2px; } .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; } .skip-link:focus { inset-inline-start: 1rem; top: 1rem; padding: 0.5rem 1rem; background: var(--color-accent-start); color: #fff; border-radius: 0.375rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-animate] { opacity: 1; transform: none; transition: none; } }