/* ============================================================ Masir design system — Webrokh Brand Book v3.1 (portal globals.css). Loaded site-wide (WP + static). Dual theme via . ============================================================ */ /* ---------- Fonts: Inter (Latin) + Dana (Persian) ---------- */ @font-face{font-family:'Inter';src:url('/fonts/Inter-VariableFont_opszwght.ttf') format('truetype');font-weight:100 900;font-display:swap;} @font-face{font-family:'dana';src:url('/fonts/dana-thin.ttf') format('truetype');font-weight:100;font-display:swap;} @font-face{font-family:'dana';src:url('/fonts/dana-extralight.ttf') format('truetype');font-weight:200;font-display:swap;} @font-face{font-family:'dana';src:url('/fonts/dana-light.ttf') format('truetype');font-weight:300;font-display:swap;} @font-face{font-family:'dana';src:url('/fonts/dana-regular.ttf') format('truetype');font-weight:400;font-display:swap;} @font-face{font-family:'dana';src:url('/fonts/dana-medium.ttf') format('truetype');font-weight:500;font-display:swap;} @font-face{font-family:'dana';src:url('/fonts/dana-demibold.ttf') format('truetype');font-weight:600;font-display:swap;} @font-face{font-family:'dana';src:url('/fonts/dana-bold.ttf') format('truetype');font-weight:700;font-display:swap;} @font-face{font-family:'dana';src:url('/fonts/dana-extrabold.ttf') format('truetype');font-weight:800;font-display:swap;} @font-face{font-family:'dana';src:url('/fonts/dana-black.ttf') format('truetype');font-weight:900;font-display:swap;} /* ---------- Tokens (exact Brand Book v3.1 / portal) ---------- */ :root{ --font-sans:"Inter","dana","Tahoma",system-ui,sans-serif; /* brand palette */ --wk-red:#EA3244; --wk-dark:#1D232E; --wk-g1:#344054; --wk-g2:#667085; --wk-g3:#98A2B3; --wk-g4:#D0D5DD; --wk-gbg:#F2F4F7; /* light (base) */ --background:#ffffff; --foreground:#1D232E; --card:#ffffff; --card-foreground:#1D232E; --popover:#ffffff; --popover-foreground:#1D232E; --primary:#EA3244; --primary-foreground:#ffffff; --secondary:#F2F4F7; --secondary-foreground:#1D232E; --muted:#F2F4F7; --muted-foreground:#667085; --accent:#F2F4F7; --accent-foreground:#1D232E; --border:#D0D5DD; --input:#D0D5DD; --ring:#EA3244; --radius:0.5rem; --pixel-dot:rgba(29,35,46,0.07); } html.dark{ --background:#141414; --foreground:#F2F4F7; --card:#1C1C1C; --card-foreground:#F2F4F7; --popover:#1C1C1C; --popover-foreground:#F2F4F7; --primary:#EA3244; --primary-foreground:#ffffff; --secondary:#1C1C1C; --secondary-foreground:#F2F4F7; --muted:#1C1C1C; --muted-foreground:#98A2B3; --accent:#232323; --accent-foreground:#F2F4F7; --border:rgba(255,255,255,0.10); --input:rgba(255,255,255,0.15); --ring:#EA3244; --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 ---------- */ html{font-family:var(--font-sans);} 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;} /* 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;}