/* =========================================================== Noor Auto Hub — design system (flat bundle, no @import). Source modules live in ds/tokens/*.css; this is the linked build. =========================================================== */ /* =========================================================== Noor Auto Hub — Color tokens Two brand "directions" (themes): a = "غرفة التحكم" / Control Room (dark, cyan accent) — default b = "ضوء النهار" / Daylight (light, green accent) Set on or . With no attribute, the dark Control Room palette applies. =========================================================== */ /* ---------- Direction A · Control Room (dark) — default ---------- */ :root, :root[data-theme="a"]{ --bg: #090c12; --bg-grad: radial-gradient(1200px 700px at 78% -8%, #14203100 0%, #0b1018 60%), #090c12; --panel: #0f141d; --panel-2: #141b26; --panel-3: #1a2430; --line: rgba(255,255,255,.085); --line-2: rgba(255,255,255,.14); --ink: #eaf1f9; --ink-2: #b3c0d1; --muted: #7f8da0; --accent: #38d6ff; --accent-2: #5b8bff; --accent-ink:#04222e; --profit: #43e39b; --warn: #ffc24b; --danger: #ff6b6b; --chip: rgba(56,214,255,.12); --glow: 0 0 0 1px rgba(56,214,255,.25), 0 8px 40px -8px rgba(56,214,255,.35); --card-sh: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 50px -28px rgba(0,0,0,.9); --hero-mock-bg: linear-gradient(180deg,#0e1623,#0a0f17); --scheme: dark; /* @kind other */ --dot-grid: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); /* @kind other */ } /* ---------- Direction B · Daylight (light) ---------- */ :root[data-theme="b"]{ --bg: #f4f1ea; --bg-grad: radial-gradient(1100px 640px at 80% -10%, #e9efe6 0%, #f4f1ea 58%), #f4f1ea; --panel: #ffffff; --panel-2: #fbfaf6; --panel-3: #f1efe7; --line: rgba(28,33,24,.10); --line-2: rgba(28,33,24,.18); --ink: #1b2017; --ink-2: #41483a; --muted: #767c6d; --accent: #167a4e; --accent-2: #0f5e69; --accent-ink:#ffffff; --profit: #167a4e; --warn: #b07d12; --danger: #c0443a; --chip: rgba(22,122,78,.10); --glow: 0 0 0 1px rgba(22,122,78,.18), 0 10px 30px -10px rgba(22,122,78,.28); --card-sh: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 44px -30px rgba(28,33,24,.4); --hero-mock-bg: linear-gradient(180deg,#ffffff,#f6f4ee); --scheme: light; /* @kind other */ --dot-grid: radial-gradient(rgba(28,33,24,.06) 1px, transparent 1px); /* @kind other */ } /* =========================================================== Noor Auto Hub — Typography tokens Tajawal for everything UI/display; IBM Plex Mono for numerals, timestamps, plate IDs, and code-like step labels (CAM / SYNC / P&L). Tabular figures are on by default so numbers don't jitter when live. =========================================================== */ :root{ /* families */ --font-sans: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* weights — Tajawal ships 400/500/700/800/900; 900 is the brand display weight */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-heavy: 800; /* @kind font */ --fw-black: 900; /* @kind font */ /* fluid display sizes (used by hero / section titles) */ --fs-hero: clamp(2.3rem, 5.6vw, 4.2rem); /* @kind font */ --fs-display: clamp(1.7rem, 3.4vw, 2.7rem); /* @kind font */ --fs-h1: 1.5rem; /* @kind font */ --fs-h2: 1.3rem; /* @kind font */ --fs-h3: 1.12rem; /* @kind font */ /* fixed text sizes */ --fs-lead: 1.08rem; /* @kind font */ --fs-body: 1rem; /* @kind font */ --fs-sm: .92rem; /* @kind font */ --fs-xs: .82rem; /* @kind font */ --fs-2xs: .74rem; /* @kind font */ /* line-heights */ --lh-tight: 1.12; /* @kind font */ --lh-body: 1.6; /* @kind font */ /* tracking */ --ls-tight: -.02em; /* @kind font */ --ls-mono: .05em; /* @kind font */ } /* =========================================================== Noor Auto Hub — Spacing, radius & layout tokens The product uses a loose rem rhythm (0.5 / 0.7 / 1 / 1.4 rem) plus generous fluid section padding. Radii step from controls (12px) up to cards (18px) and full pills (999px). =========================================================== */ :root{ /* spacing scale */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .7rem; --sp-4: 1rem; --sp-5: 1.4rem; --sp-6: 1.8rem; --sp-7: 2.6rem; /* fluid block padding (vertical section rhythm) */ --sp-section: clamp(3.5rem, 7vw, 6rem); /* @kind spacing */ /* radii */ --r-sm: 7px; /* tiny chips, plate tags, tooltips */ --r-input: 11px; /* inputs, segmented controls, pills-as-fields */ --r-btn: 12px; /* buttons, icon tiles */ --r-card: 18px; /* cards / panels */ --r-mock: 22px; /* hero mock + camera frame */ --r-pill: 999px; /* eyebrows, switches, badges */ /* layout */ --wrap: min(1180px, 92vw); /* @kind other */ --rail-w: 74px; /* @kind spacing */ } /* =========================================================== Noor Auto Hub — Elevation / shadow tokens The two signature shadows (--glow, --card-sh) are theme-specific and live in colors.css because they shift with the palette. This file holds the palette-neutral floating elevation used by fixed controls (the direction switcher), popovers and tooltips. =========================================================== */ :root{ /* floating elements above the page (switcher, menus, toasts) */ --shadow-float: 0 14px 40px -16px rgba(0,0,0,.55); /* hover lift added to primary buttons (combined with --glow) */ --shadow-lift: 0 6px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent); /* focus ring for inputs */ --ring-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } /* =========================================================== Noor Auto Hub — Base layer Global resets + the shared, brand-level utility classes that the source product treats as foundations (.wrap, .btn, .card, .eyebrow, .mono, section titles, scroll-reveal). All values reference tokens. =========================================================== */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font-sans); background:var(--bg-grad); color:var(--ink); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; transition:background .5s ease, color .35s ease; overflow-x:hidden; } ::selection{ background:var(--accent); color:var(--accent-ink); } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; } /* ---------- layout ---------- */ .wrap{ width:var(--wrap); margin-inline:auto; } /* ---------- eyebrow chip ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.02em; color:var(--accent); background:var(--chip); padding:.4rem .85rem; border-radius:var(--r-pill); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); } .eyebrow .mono{ font-size:var(--fs-2xs); opacity:.85; } /* ---------- headings ---------- */ h1,h2,h3{ line-height:var(--lh-tight); margin:0; font-weight:var(--fw-heavy); letter-spacing:-.01em; } .section-title{ font-size:var(--fs-display); font-weight:var(--fw-black); } .section-lead{ color:var(--ink-2); font-size:var(--fs-lead); max-width:46ch; margin-top:.9rem; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.4rem; border-radius:var(--r-btn); font-weight:var(--fw-bold); font-size:1rem; border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:var(--glow); } .btn-primary:hover{ box-shadow:var(--glow), var(--shadow-lift); transform:translateY(-1px); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); } .btn-ghost:hover{ background:var(--panel-2); } .btn .arr{ font-size:1.05em; } /* ---------- form controls ---------- */ .field-ctrl{ transition:border-color .18s ease, box-shadow .18s ease; } .field-ctrl:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring-focus); } /* ---------- cards ---------- */ .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--card-sh); } /* ---------- shared keyframes (live motifs) ---------- */ @keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--profit) 70%, transparent); } 70%{ box-shadow:0 0 0 8px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } @keyframes scan{ 0%{ top:4%; } 100%{ top:96%; } } @keyframes fresh{ 0%{ background:var(--chip); } 100%{ background:transparent; } } /* ---------- scroll reveal (only hides once JS adds .is-ready) ---------- */ @media (prefers-reduced-motion:no-preference){ html.is-ready .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } html.is-ready .reveal.in{ opacity:1; transform:none; } }