/* ============================================================ Masir design system — Webrokh Brand Book v3.1 (portal globals.css). Loaded site-wide (WP + static). Dual theme via . ============================================================ */ /* ---------- Font: Vazirmatn (Morshed design system) — self-hosted variable woff2. Latin + Arabic/Persian subsets, one variable file each (weights 100–900). ---------- */ @font-face{font-family:'Vazirmatn';src:url('/fonts/vazirmatn-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Vazirmatn';src:url('/fonts/vazirmatn-arabic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;} /* ---------- Tokens (exact Brand Book v3.1 / portal) ---------- */ :root{ --font-sans:"Vazirmatn","Tahoma",system-ui,sans-serif; /* brand palette (accent = Academy orange; neutrals = Morshed gray scale) */ --wk-red:#FF7A00; --wk-dark:#181D27; --wk-g1:#414651; --wk-g2:#535862; --wk-g3:#717680; --wk-g4:#D5D7DA; --wk-gbg:#FAFAFA; /* light (Morshed neutrals) */ --background:#ffffff; --foreground:#181D27; --card:#ffffff; --card-foreground:#181D27; --popover:#ffffff; --popover-foreground:#181D27; --primary:#FF7A00; --primary-foreground:#ffffff; --secondary:#F5F5F5; --secondary-foreground:#181D27; --muted:#FAFAFA; --muted-foreground:#535862; --accent:#F5F5F5; --accent-foreground:#181D27; --border:#E9EAEB; --input:#D5D7DA; --ring:#FF7A00; --radius:0.5rem; --pixel-dot:rgba(24,29,39,0.06); } html.dark{ /* dark (Morshed neutrals: bluish-black bg + exact gray/border scale) */ --background:#0A0D12; --foreground:#ffffff; --card:#13161B; --card-foreground:#ffffff; --popover:#13161B; --popover-foreground:#ffffff; --primary:#FF7A00; --primary-foreground:#ffffff; --secondary:#1A1D26; --secondary-foreground:#ffffff; --muted:#13161B; --muted-foreground:#A4A7AE; --accent:#1A1D26; --accent-foreground:#ffffff; --border:#22262F; --input:#22262F; --ring:#FF7A00; --pixel-dot:rgba(255,255,255,0.05); } /* ---------- Notion color palette (component accents) ---------- */ :root{ --n-gray:#787774; --n-brown:#9F6B53; --n-orange:#D9730D; --n-yellow:#CB912F; --n-green:#448361; --n-blue:#337EA9; --n-purple:#9065B0; --n-pink:#C14C8A; --n-red:#D44C47; } html.dark{ --n-gray:#9B9B9B; --n-brown:#BA856F; --n-orange:#C77D48; --n-yellow:#CA9849; --n-green:#529E72; --n-blue:#5E87C9; --n-purple:#9D68D3; --n-pink:#D15796; --n-red:#DF5452; } /* ---------- Base ---------- */ /* clip (not hidden) on the root contains the fixed off-canvas drawer's overflow without creating a scroll container — so position:sticky (homepage nav) still works. */ html{font-family:var(--font-sans);overflow-x:clip;} body{background-color:var(--background)!important;color:var(--foreground)!important;font-family:var(--font-sans); -webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease; overflow-x:clip;} /* clip (not hidden) — kills off-canvas drawer overflow without breaking position:sticky */ /* Vazirmatn everywhere — form controls don't inherit body font by default. */ input,button,select,textarea,optgroup{font-family:var(--font-sans);} /* Brand signature: red dot after a heading (.title-dot) */ .title-dot::after{content:".";color:var(--wk-red);margin-inline-start:.25rem;font-weight:700;} /* subtle pixel-grid background utility */ .pixel-bg{background-image:radial-gradient(circle at 1px 1px,var(--pixel-dot) 1px,transparent 0);background-size:16px 16px;} /* page entrance motion (portal) */ @media (prefers-reduced-motion:no-preference){ @keyframes masir-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} } /* ---------- Theme toggle button (lives in the nav) ---------- */ .masir-theme-btn{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;cursor:pointer;flex-shrink:0; background:transparent;border:none;color:var(--foreground); transition:color .2s;padding:0; } .masir-theme-btn:hover{color:var(--primary);} .masir-theme-btn svg{width:18px;height:18px;} .masir-theme-btn .ic-sun{display:none;} .masir-theme-btn .ic-moon{display:block;} html.dark .masir-theme-btn .ic-sun{display:block;} html.dark .masir-theme-btn .ic-moon{display:none;} /* ——— Buttons — design system: pill, compact, monochrome (black/white only) ——— */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 18px; border-radius:999px;font-weight:600;font-size:14px;line-height:1;text-decoration:none; border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:opacity .2s,background .2s,color .2s,border-color .2s;} .btn-primary{background:var(--foreground);color:var(--background);} .btn-primary:hover{opacity:.85;} .btn-ghost{background:transparent;color:var(--foreground);border-color:var(--border);} .btn-ghost:hover{border-color:var(--foreground);} .btn-white{background:var(--foreground);color:var(--background);border-radius:999px;}