@import url('/fonts/fonts.css'); /* Khetabi design system — "ink on paper". --------------------------------------------------------------------------- The product is formal letters, so the interface is built from the vocabulary of documents rather than of dashboards: warm paper stock, deep ink, a ruled margin, a wax seal, and type set in the same naskh face as the PDFs we generate. Radii are small and shadows are hard-edged offsets, because paper casts a crisp shadow and printed rules do not have 18px corners. One stylesheet serves both directions: every inline offset uses logical properties (margin-inline, inset-inline), so flipping between rtl and ltr needs no second sheet and no overrides. Class names are stable — pages built against the previous visual language keep working; only the values beneath them changed. */ :root { /* Paper and ink. Nothing here is pure #fff or #000: paper is warm and ink is never quite black, which is most of why the palette reads as printed. */ --paper: #FAF6EE; --paper-2: #F3EDE1; --card: #FFFDF8; --ink: #1B1714; --ink-2: #574F45; --ink-3: #8C8175; --line: #E2D9C8; --line-2: #CFC3AC; /* Deep green carries authority without borrowing the flag. Brass is the metallic highlight; seal red is used sparingly and only where something is genuinely official or genuinely wrong. */ --green-900: #0C3B2E; --green-700: #14543F; --green-500: #1E7355; --green-100: #E4EDE7; --brass: #A87C2C; --brass-100: #F6EDD8; --seal: #96302A; --seal-100: #F7E7E3; /* Aliases kept from the previous system so existing pages restyle rather than break. Anything new should prefer the names above. */ --brand-900: var(--green-900); --brand-700: var(--green-700); --brand-500: var(--green-500); --brand-100: var(--green-100); --gold: var(--brass); --gold-100: var(--brass-100); --bg: var(--paper); --ok: #1E7355; --ok-100: #E4EDE7; --warn: #8A5A12; --warn-100: #F8EED6; --danger: var(--seal); --danger-100: var(--seal-100); --r-sm: 3px; --r: 5px; --r-lg: 7px; /* Hard offset, not a blur halo — the shadow a sheet of paper actually casts. */ --shadow: 2px 2px 0 rgba(27, 23, 20, .05); --shadow-lg: 6px 6px 0 rgba(12, 59, 46, .09); --press: 3px 3px 0 var(--green-900); --font-ar: 'IBM Plex Sans Arabic', 'SF Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif; --font-en: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font: var(--font-ar); --display: 'Amiri', 'SF Arabic', Georgia, serif; --maxw: 1120px; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: var(--paper); color: var(--ink); line-height: 1.85; /* Arabic needs more air than Latin */ -webkit-font-smoothing: antialiased; /* Paper grain. Fractal noise at 3% opacity — invisible as a texture, but it stops large flat fills from reading as screen-flat. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.032'/%3E%3C/svg%3E"); } .num, table.data td, .stat .n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.4; margin: 0 0 .5rem; color: var(--green-900); letter-spacing: 0; } h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.3; } h2 { font-size: clamp(1.45rem, 3.4vw, 2.15rem); } h3 { font-size: 1.2rem; font-family: var(--font); font-weight: 700; } h4 { font-family: var(--font); font-weight: 700; margin: 0 0 .4rem; color: var(--green-900); } p { margin: 0 0 1rem; color: var(--ink-2); } a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--green-900); } /* A section heading with a short brass rule above it — the mark used on letterhead to open a block. */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--brass); margin-block-end: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brass); } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; } .wrap-narrow { max-width: 720px; margin-inline: auto; padding-inline: 22px; } /* ---------- header ---------- */ .site-header { background: var(--card); border-block-end: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .site-header .wrap { display: flex; align-items: center; gap: 18px; height: 72px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--green-900); text-decoration: none; } .brand:hover { color: var(--green-900); } /* Solid ink block, not a gradient chip. Set in the display face so the mark is literally a letter from the typeface the letters are written in. */ .brand-mark { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--green-900); color: var(--paper); display: grid; place-items: center; font-family: var(--display); font-size: 1.35rem; font-weight: 700; padding-block-end: 3px; } .spacer { flex: 1; } .site-header a.small { color: var(--ink-2); font-weight: 500; text-decoration: none; } .site-header a.small:hover { color: var(--green-700); text-decoration: underline; } .lang-toggle { border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); border-radius: var(--r-sm); padding: 7px 15px; font-family: inherit; font-size: .88rem; cursor: pointer; font-weight: 600; transition: .15s; } .lang-toggle:hover { border-color: var(--green-700); color: var(--green-900); background: var(--card); } /* ---------- buttons ---------- */ /* Letterpress: a solid slab that physically moves into its own shadow when pressed, rather than fading opacity. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1.5px solid transparent; border-radius: var(--r); padding: 12px 26px; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.5; transition: transform .12s ease, box-shadow .12s ease, background .15s; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--green-900); color: #FDFBF6; border-color: var(--green-900); box-shadow: var(--press); } .btn-primary:hover { background: var(--green-700); color: #FDFBF6; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--green-900); } .btn-primary:active { transform: translate(3px, 3px); box-shadow: none; } .btn-gold { background: var(--brass); color: #221803; border-color: #8A6522; box-shadow: 3px 3px 0 #6E5019; } .btn-gold:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #6E5019; color: #221803; } .btn-gold:active { transform: translate(3px, 3px); box-shadow: none; } .btn-ghost { background: var(--card); border-color: var(--line-2); color: var(--ink); } .btn-ghost:hover { border-color: var(--green-700); color: var(--green-900); background: var(--paper-2); } .btn-danger { background: var(--seal-100); border-color: #E2BDB7; color: var(--seal); } .btn-danger:hover { background: var(--seal); color: #fff; border-color: var(--seal); } .btn-sm { padding: 7px 14px; font-size: .875rem; box-shadow: 2px 2px 0 var(--green-900); } .btn-sm.btn-ghost, .btn-sm.btn-danger { box-shadow: none; } .btn-lg { padding: 15px 36px; font-size: 1.1rem; } .btn-block { width: 100%; } .btn:disabled, .btn[aria-busy="true"] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* ---------- cards ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); } .card + .card { margin-block-start: 18px; } .card-title { display: flex; align-items: center; gap: 10px; margin-block-end: 16px; } .card-title h3 { margin: 0; } /* A sheet: paper with the ruled margin an Arabic letterhead carries down its leading edge. Used for anything that IS a document. */ .sheet { background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--brass); border-radius: var(--r-lg); padding: 26px 28px; box-shadow: var(--shadow-lg); } .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .grid > .card + .card { margin-block-start: 0; } .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .row-end { justify-content: flex-end; } .section { padding-block: clamp(44px, 7vw, 82px); } /* ---------- forms ---------- */ .field { margin-block-end: 20px; } .label { display: block; font-weight: 600; color: var(--ink); margin-block-end: 7px; font-size: .95rem; } .label .req { color: var(--seal); } .hint { font-size: .87rem; color: var(--ink-3); margin-block-start: 6px; line-height: 1.7; } .input, .textarea, .select { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 1rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); color: var(--ink); transition: .15s; line-height: 1.7; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(30, 115, 85, .13); } .input::placeholder, .textarea::placeholder { color: var(--ink-3); } .textarea { min-height: 200px; resize: vertical; line-height: 1.95; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%238C8175' stroke-width='1.6' d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; padding-inline-start: 14px; padding-inline-end: 38px; } html[dir="ltr"] .select { background-position: right 14px center; } .input.err, .textarea.err, .select.err { border-color: var(--seal); } .err-msg { color: var(--seal); font-size: .87rem; margin-block-start: 6px; display: none; } .err-msg.show { display: block; } /* ---------- upload ---------- */ .drop { border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); padding: 38px 20px; text-align: center; background: var(--paper-2); cursor: pointer; transition: .16s; } .drop:hover, .drop.over { border-color: var(--green-500); background: var(--green-100); } .file-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; } .file-row { display: flex; align-items: center; gap: 11px; padding: 11px 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .92rem; } .file-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-row .size { color: var(--ink-3); font-size: .84rem; } .icon-btn { border: none; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 1.05rem; padding: 3px 7px; border-radius: var(--r-sm); font-family: inherit; } .icon-btn:hover { background: var(--seal-100); color: var(--seal); } /* ---------- pills ---------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--r-sm); font-size: .8rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .pill-pending_payment { background: var(--paper-2); color: var(--ink-3); border-color: var(--line-2); } .pill-new { background: var(--green-100); color: var(--green-700); border-color: #C3D8CA; } .pill-processing { background: var(--warn-100); color: var(--warn); border-color: #ECD8A6; } .pill-editing { background: var(--brass-100); color: #7A5A11; border-color: #E3CE9B; } .pill-completed { background: var(--green-900); color: #EFE7D5; border-color: var(--green-900); } .pill-cancelled { background: var(--seal-100); color: var(--seal); border-color: #E2BDB7; } .pill-muted { background: var(--paper-2); color: var(--ink-3); border-color: var(--line); } /* ---------- steps ---------- */ .steps { display: flex; align-items: center; gap: 10px; margin-block-end: 32px; flex-wrap: wrap; } .step { display: flex; align-items: center; gap: 9px; color: var(--ink-3); font-size: .92rem; font-weight: 600; } .step .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink-3); font-size: .85rem; font-weight: 700; flex: none; } .step.active { color: var(--green-900); } .step.active .dot { background: var(--green-900); border-color: var(--green-900); color: var(--paper); } .step.done { color: var(--green-700); } .step.done .dot { background: var(--card); border-color: var(--green-500); color: var(--green-500); } .step-line { flex: 1; height: 1px; background: var(--line-2); min-width: 20px; } /* ---------- table ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); } table.data { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 900px; } table.data th { text-align: start; padding: 13px 16px; background: var(--paper-2); color: var(--ink-2); font-weight: 600; font-size: .82rem; letter-spacing: .03em; border-block-end: 1px solid var(--line-2); white-space: nowrap; } table.data td { padding: 14px 16px; border-block-end: 1px solid var(--line); vertical-align: middle; } table.data tr:last-child td { border-block-end: none; } table.data tbody tr:hover { background: var(--paper-2); } /* ---------- stat cards ---------- */ .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; cursor: pointer; transition: .15s; border-block-start: 3px solid var(--line-2); } .stat:hover { border-block-start-color: var(--brass); } .stat.active { border-block-start-color: var(--green-700); background: var(--card); box-shadow: var(--shadow); } .stat .n { font-family: var(--display); font-size: 2.1rem; font-weight: 700; color: var(--green-900); line-height: 1.2; } .stat .k { font-size: .87rem; color: var(--ink-2); font-weight: 500; } /* ---------- alerts ---------- */ .alert { border-radius: var(--r); padding: 14px 18px; font-size: .94rem; margin-block-end: 16px; border: 1px solid; border-inline-start-width: 3px; } .alert-info { background: var(--green-100); border-color: #C3D8CA; border-inline-start-color: var(--green-500); color: var(--green-900); } .alert-ok { background: var(--green-100); border-color: #C3D8CA; border-inline-start-color: var(--green-700); color: var(--green-900); } .alert-warn { background: var(--warn-100); border-color: #ECD8A6; border-inline-start-color: var(--brass); color: var(--warn); } .alert-danger { background: var(--seal-100); border-color: #E2BDB7; border-inline-start-color: var(--seal); color: var(--seal); } /* ---------- misc ---------- */ .muted { color: var(--ink-3); } .small { font-size: .88rem; } .center { text-align: center; } .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .checklist li { display: flex; align-items: flex-start; gap: 11px; color: var(--ink-2); } /* A drawn tick rather than a font glyph — it keeps its weight at any size and does not inherit the emoji look a bare ✓ picks up on some platforms. */ .checklist li::before { content: ""; flex: none; width: 17px; height: 17px; margin-block-start: 5px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231E7355' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.6l3.6 3.6L13.5 4.5'/%3E%3C/svg%3E"); } .kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 20px; font-size: .95rem; } .kv dt { color: var(--ink-3); font-weight: 500; } .kv dd { margin: 0; color: var(--ink); font-weight: 600; } .divider { height: 1px; background: var(--line); margin-block: 22px; border: none; } .hidden { display: none !important; } /* A wax seal. Deliberately off-axis: a stamp pressed by hand is never square, and that single degree of rotation is most of what stops the page reading as machine-generated. */ .seal { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; text-align: center; flex: none; border: 2px solid var(--brass); color: var(--brass); font-family: var(--display); font-weight: 700; font-size: .82rem; line-height: 1.35; background: var(--brass-100); transform: rotate(-7deg); padding: 8px; box-shadow: inset 0 0 0 1px var(--brass-100), inset 0 0 0 3px var(--card); } .spinner { width: 16px; height: 16px; border: 2px solid rgba(253, 251, 246, .3); border-top-color: #FDFBF6; border-radius: 50%; animation: spin .7s linear infinite; flex: none; } .spinner-dark { border-color: var(--line-2); border-top-color: var(--green-700); } @keyframes spin { to { transform: rotate(360deg); } } .site-footer { border-block-start: 1px solid var(--line); background: var(--card); padding-block: 30px; margin-block-start: 56px; color: var(--ink-3); font-size: .9rem; } .site-footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .site-footer a { color: var(--ink-2); text-decoration: none; } .site-footer a:hover { color: var(--green-700); text-decoration: underline; } /* Toast */ #toast { position: fixed; inset-block-end: 26px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--green-900); color: #FDFBF6; padding: 13px 26px; border-radius: var(--r); box-shadow: var(--shadow-lg); z-index: 200; font-weight: 600; display: none; max-width: 90vw; } #toast.show { display: block; animation: rise .25s ease-out; } #toast.err { background: var(--seal); } @keyframes rise { from { opacity: 0; transform: translate(-50%, 10px); } } /* Modal */ .modal-back { position: fixed; inset: 0; background: rgba(27, 23, 20, .55); z-index: 150; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-back.show { display: flex; } .modal { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 28px; max-width: 620px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: 10px 10px 0 rgba(12, 59, 46, .16); } @media (max-width: 640px) { body { line-height: 1.8; } .card, .sheet { padding: 20px; } .site-header .wrap { height: 62px; gap: 12px; } .btn-lg { padding: 13px 24px; font-size: 1.02rem; } .seal { width: 74px; height: 74px; font-size: .72rem; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } .btn:hover, .btn:active { transform: none; } }