/* تكتك مشوار — Web Design Tokens + Component Kit Shared by the Admin dashboard and the marketing Landing page. Extends the app design system (DESIGN_TOKENS.md / styles.css) for web. ----------------------------------------------------------------- */ :root { /* ---- Core palette (locked, from app) ---- */ --tk-yellow: #F2C014; --tk-yellow-2: #F7D14A; --tk-yellow-d: #E2AC0B; --tk-yellow-deep: #B88A05; --tk-petrol: #0E2A33; --tk-petrol-2: #15394A; --tk-petrol-3: #1D4859; --tk-cream: #FBF4E4; --tk-cream-2: #F4EAD2; --tk-cream-3: #EFE2C5; --tk-clay: #C9402D; --tk-clay-d: #A03220; --tk-mint: #1E8A7A; --tk-mint-2: #2BA593; --tk-sand: #D9BC7A; --tk-ink: #1A1410; --tk-muted: #6B6258; /* Map palette */ --map-bg: #E8E0CC; --map-road: #FFFFFF; --map-water: #BCD6CF; --map-park: #CBD9B4; /* ---- Semantic (light / admin default) ---- */ --bg: var(--tk-cream); --surface: #FFFFFF; --surface-2: var(--tk-cream-2); --line: rgba(14,42,51,0.10); --line-2: rgba(14,42,51,0.06); --text: var(--tk-petrol); --text-muted:var(--tk-muted); --text-on-dark: var(--tk-cream); /* ---- Type ---- */ --f-display: 'Cairo', system-ui, sans-serif; --f-body: 'Tajawal', 'Cairo', system-ui, sans-serif; --f-deco: 'Amiri', serif; /* ---- Radii ---- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 14px; --r-xl: 16px; --r-2xl: 22px; --r-pill: 999px; /* ---- Shadows ---- */ --sh-sm: 0 1px 2px rgba(14,42,51,0.06), 0 1px 3px rgba(14,42,51,0.04); --sh-md: 0 4px 10px rgba(14,42,51,0.08), 0 1px 3px rgba(14,42,51,0.04); --sh-lg: 0 12px 28px rgba(14,42,51,0.12); --sh-xl: 0 24px 60px rgba(14,42,51,0.18); --sh-yellow: 0 10px 24px rgba(184,138,5,0.30); /* ---- Spacing base (8px grid) ---- */ --sp: 8px; } /* Dark theme for admin (toggle data-theme="dark" on ) */ [data-theme="dark"] { --bg: #0A1F26; --surface: #11313C; --surface-2: #15394A; --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.06); --text: var(--tk-cream); --text-muted:#9DB0B6; --text-on-dark: var(--tk-cream); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--f-body); background: var(--bg); color: var(--text); direction: rtl; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Mashrabiya overlay ---- */ .mash { background-image: radial-gradient(circle at 50% 0, currentColor 1.4px, transparent 2px), radial-gradient(circle at 0 50%, currentColor 1.4px, transparent 2px), radial-gradient(circle at 100% 50%, currentColor 1.4px, transparent 2px), radial-gradient(circle at 50% 100%, currentColor 1.4px, transparent 2px); background-size: 26px 26px; } .mash-fine { background-image: radial-gradient(circle at 50% 50%, currentColor 1px, transparent 1.6px); background-size: 16px 16px; } /* ================= COMPONENT KIT ================= */ /* Wordmark */ .wordmark { display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; white-space: nowrap; } .wordmark .w-tok { font-family: var(--f-display); font-weight: 900; letter-spacing: -0.5px; } .wordmark .w-mishwar { font-family: var(--f-deco); font-weight: 700; font-style: italic; } /* Buttons */ .btn { font-family: var(--f-display); font-weight: 800; border: none; cursor: pointer; border-radius: var(--r-md); padding: 12px 20px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; transition: transform .12s, box-shadow .12s, background .15s; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-yellow { color: var(--tk-petrol); background: linear-gradient(180deg, var(--tk-yellow-2) 0%, var(--tk-yellow) 60%, var(--tk-yellow-d) 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -2px 0 rgba(0,0,0,0.08) inset, 0 4px 0 var(--tk-yellow-deep), 0 8px 18px rgba(184,138,5,0.30); } .btn-yellow:active { box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 0 var(--tk-yellow-deep), 0 4px 10px rgba(184,138,5,0.25); transform: translateY(2px); } .btn-petrol { background: var(--tk-petrol); color: var(--tk-cream); box-shadow: var(--sh-sm); } .btn-petrol:hover { background: var(--tk-petrol-2); } .btn-outline { background: transparent; border: 2px solid var(--tk-petrol); color: var(--tk-petrol); } .btn-outline-cream { background: transparent; border: 2px solid rgba(251,244,228,0.5); color: var(--tk-cream); } .btn-clay { background: var(--tk-clay); color: #fff; box-shadow: var(--sh-sm); } .btn-ghost { background: transparent; color: var(--text); } .btn-ghost:hover { background: var(--line-2); } .btn-sm { padding: 8px 14px; font-size: 13px; border-radius: var(--r-sm); } .btn-lg { padding: 15px 28px; font-size: 16px; border-radius: var(--r-lg); } /* Cards */ .card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-sm); } .card-pad { padding: 18px; } /* Badges / pills */ .badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-display); font-weight: 800; font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill); } .badge-yellow { background: rgba(242,192,20,0.18); color: #8a6d00; } .badge-mint { background: rgba(30,138,122,0.14); color: var(--tk-mint); } .badge-clay { background: rgba(201,64,45,0.12); color: var(--tk-clay); } .badge-petrol{ background: rgba(14,42,51,0.08); color: var(--tk-petrol); } .badge-muted { background: var(--surface-2); color: var(--text-muted); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* Status pill with leading dot */ .status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-display); font-weight: 700; font-size: 12px; } /* Inputs */ .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-family: var(--f-display); font-weight: 700; font-size: 12.5px; color: var(--text); } .input, .select, .textarea { width: 100%; font-family: var(--f-body); font-size: 14px; color: var(--text); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 11px 14px; transition: border-color .15s, box-shadow .15s; outline: none; } .input:focus, .select:focus, .textarea:focus { border-color: var(--tk-petrol); box-shadow: 0 0 0 3px rgba(14,42,51,0.08); } [data-theme="dark"] .input:focus { border-color: var(--tk-yellow); box-shadow: 0 0 0 3px rgba(242,192,20,0.18); } .input-search { background: var(--surface-2); border: none; border-radius: var(--r-md); } /* Toggle switch */ .switch { position: relative; width: 42px; height: 24px; display: inline-block; cursor: pointer; flex: 0 0 auto; } .switch input { display: none; } .switch .track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .18s; } .switch input:checked + .track { background: var(--tk-mint); } .switch .thumb { position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: inset-inline-start .18s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .switch input:checked ~ .thumb { inset-inline-start: 21px; } /* Tables */ .tk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tk-table thead th { text-align: start; font-family: var(--f-display); font-weight: 800; font-size: 12px; color: var(--text-muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } .tk-table tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } .tk-table tbody tr:hover { background: var(--line-2); } /* Tabs */ .tabs { display: flex; gap: 4px; flex-wrap: wrap; } .tab { font-family: var(--f-display); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; color: var(--text-muted); border: 1.5px solid transparent; display: inline-flex; align-items: center; gap: 7px; } .tab.active { background: var(--tk-petrol); color: var(--tk-cream); } .tab:not(.active):hover { background: var(--line-2); } .tab .count { background: rgba(255,255,255,0.18); padding: 0 7px; border-radius: var(--r-pill); font-size: 11px; } .tab:not(.active) .count { background: var(--line); color: var(--text-muted); } /* Numerals helper: use Eastern Arabic directly in markup */ .num { font-variant-numeric: lining-nums; } /* Scrollbar */ .thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .thin-scroll::-webkit-scrollbar-thumb { background: rgba(14,42,51,0.18); border-radius: 8px; } .thin-scroll::-webkit-scrollbar-track { background: transparent; } /* Utility */ .row { display: flex; align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .muted { color: var(--text-muted); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }