/* ============================================================
ديوانية — Design Tokens + Base (SINGLE SOURCE OF TRUTH)
Strictly monochrome: black, white, neutral grays. No color.
Loaded by EVERY page (landing + social). On social pages it
loads AFTER superq8.css so these tokens win.
============================================================ */
:root {
/* ---- Surfaces (dark) ---- */
--ink: #000000; /* page background — pure black */
--char: #111111; /* cards / panels */
--slate: #1C1C1C; /* chips / avatar fallback */
--elev: #181818; /* raised controls / inputs */
/* ---- Borders ---- */
--line: #272727; /* hairline borders */
--line-soft: #1B1B1B;
/* ---- Text ---- */
--white: #ECECEC; /* primary text (off-white) */
--paper: #CFCFCF; /* secondary bright */
--bone: #F4F4F4; /* hover for light surfaces */
--soft: #9A9A9A; /* soft text */
--mute: #6E6E6E; /* muted text */
--black: #000000;
/* ---- Accent (monochrome) ---- */
--accent: #FFFFFF;
--accent-strong: #E6E6E6;
--accent-soft: rgba(255,255,255,0.10);
--on-accent: #0A0A0A; /* text on white accent */
--live: #FFFFFF; /* "live" indicator (monochrome) */
/* ---- Radii ---- */
--r-xs: 8px;
--r-sm: 12px;
--r-md: 16px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
/* ---- Spacing scale ---- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
/* ---- Shadows (subtle, monochrome) ---- */
--shadow-1: 0 1px 2px rgba(0,0,0,0.40);
--shadow-2: 0 8px 28px rgba(0,0,0,0.45);
/* ---- Type ---- */
--font-ar: 'Tajawal', system-ui, -apple-system, sans-serif;
--font-en: 'Inter', system-ui, -apple-system, sans-serif;
/* ---- Logo (ONE source — the bolt mark, rendered via CSS mask) ----
--bolt-outline: hollow/outlined bolt (large sizes, hero/headers)
--bolt-solid: filled bolt (small/clear at 32px, favicons, avatars) */
--bolt-outline: url("data:image/svg+xml;utf8,");
--bolt-solid: url("data:image/svg+xml;utf8,");
/* ---- Derived ---- */
--hair: 1px solid var(--line);
--hair-soft: 1px solid var(--line-soft);
}
/* Light ("نهار") theme — pure white + black */
body.light {
--ink: #FFFFFF;
--char: #F4F4F4;
--slate: #ECECEC;
--elev: #EFEFEF;
--line: #E2E2E2;
--line-soft: #EEEEEE;
--white: #0A0A0A; /* primary text — black */
--paper: #222222;
--bone: #1A1A1A;
--soft: #5A5A5A;
--mute: #8A8A8A;
--black: #FFFFFF;
--accent: #000000;
--accent-strong: #1A1A1A;
--accent-soft: rgba(0,0,0,0.08);
--on-accent: #FFFFFF;
--live: #000000;
}
body { background: var(--ink); color: var(--white); font-family: var(--font-ar); }
/* ============================================================
Type scale — one consistent hierarchy
============================================================ */
.t-display { font-family: var(--font-ar); font-weight: 800; font-size: clamp(40px, 8.5vw, 64px); line-height: 1.05; letter-spacing: -0.01em; }
.t-title { font-family: var(--font-ar); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.t-subtitle { font-family: var(--font-ar); font-weight: 700; font-size: 16px; line-height: 1.35; }
.t-body { font-family: var(--font-ar); font-weight: 400; font-size: 15px; line-height: 1.7; }
.t-meta { font-family: var(--font-en); font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--mute); }
/* ============================================================
Brand logo — ONE component (single source via CSS mask).
The mark is always a black tile + white bolt (brand-locked),
independent of light/dark theme.
Usage:
============================================================ */
.dw-logo { display: inline-block; flex-shrink: 0; line-height: 0; }
.dw-logo svg { width: 100%; height: 100%; display: block; }
.dw-logo--lg { width: 128px; height: 128px; }
.dw-logo--md { width: 40px; height: 40px; }
.dw-logo--sm { width: 32px; height: 32px; }
/* ============================================================
Unified top bar — ONE component, injected by diwaniya-header.js
on every page. Centered logo (no name); fixed cluster
(theme · language · profile) at the inline-end
(left in Arabic / right in English). No service links.
============================================================ */
.dw-topbar {
position: sticky; top: 0; z-index: 90; flex-shrink: 0;
display: flex; align-items: center; gap: 10px;
padding: 11px 16px;
backdrop-filter: blur(16px);
background: rgba(0,0,0,0.80);
border-bottom: var(--hair);
/* Hide-on-scroll */
transition: transform .28s cubic-bezier(.4,0,.2,1);
will-change: transform;
}
body.light .dw-topbar { background: rgba(246,246,246,0.82); }
.dw-topbar--hidden { transform: translateY(-100%); }
/* ── Floating Action Button (FAB) ── */
.dw-fab {
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
inset-inline-end: 20px;
z-index: 80;
width: 56px; height: 56px; border-radius: 50%;
background: var(--white); color: var(--black);
border: none; cursor: pointer;
display: grid; place-items: center;
box-shadow: 0 4px 20px rgba(0,0,0,.5);
transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s, background .15s;
will-change: transform, opacity;
}
.dw-fab:hover { background: #e0e0e0; }
.dw-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.dw-fab--hidden { transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; }
/* Above mobile nav if present */
@media (max-width: 800px) {
.dw-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
.dw-topbar__start { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dw-topbar__logo { position: absolute; left: 50%; transform: translateX(-50%); display: block; line-height: 0; }
.dw-topbar__logo .dw-logo { width: 30px; height: 30px; }
.dw-topbar__cluster { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.dw-ico {
width: 38px; height: 38px; border-radius: 50%; border: var(--hair); background: transparent;
color: var(--soft); cursor: pointer; display: grid; place-items: center;
font-family: var(--font-en); font-weight: 700; font-size: 13px;
overflow: hidden; text-decoration: none; transition: .15s; flex-shrink: 0;
}
.dw-ico:hover { border-color: var(--white); color: var(--white); }
.dw-ico img { width: 100%; height: 100%; object-fit: cover; }
.dw-ico svg { width: 18px; height: 18px; }
/* Language toggle — quieter than the other icons (smaller, muted text, faint
border) so it stays available without grabbing the eye. */
#dwLang { font-size: 11px; font-weight: 600; color: var(--mute);
border-color: rgba(255,255,255,0.07); opacity: .7; }
#dwLang:hover { color: var(--white); opacity: 1; border-color: var(--white); }
body.light #dwLang { border-color: rgba(0,0,0,0.08); }
/* Mobile: tidy the top bar so the action cluster doesn't crowd the
(absolutely-centered) logo — smaller icons + tighter gaps, logo unchanged. */
@media (max-width: 800px) {
.dw-topbar { padding: 9px 14px; gap: 8px; }
.dw-topbar__cluster { gap: 6px; }
.dw-topbar__start { gap: 6px; }
.dw-ico { width: 34px; height: 34px; }
.dw-ico svg { width: 17px; height: 17px; }
}
/* ── Notification unread badge (dot) — shared across all pages ── */
.nt-dot {
position: absolute; top: 4px; inset-inline-end: 8px;
min-width: 16px; height: 16px; border-radius: 999px;
background: var(--white); color: var(--black);
font-size: 10px; font-weight: 800; font-family: var(--font-en);
display: none; align-items: center; justify-content: center;
padding: 0 4px; line-height: 1;
border: 2px solid var(--black);
pointer-events: none;
}
body.light .nt-dot { border-color: #f6f6f6; }