/* =========================================================================== Raqmi Resolve — public portal styles. Self-hosted and self-contained on purpose: the portal loads no third-party content at all, because on /c/{token} the page URL is a bearer credential and every external request is a chance to leak it in a Referer header (plan section 9.0). No @import, no web font, no CDN. System fonts only, for the same reason — including for Arabic. The obvious way to make Arabic look right is a web font (Noto Kufi, Cairo, IBM Plex Sans Arabic) from a CDN, and on a page whose URL is a credential that hands the URL to a third party on every single render. The stack below reaches the Arabic UI faces that Windows, macOS, iOS and Android already ship. DIRECTION: the page sets dir="rtl" on for Arabic, and everything here uses CSS LOGICAL properties (margin-inline-start, padding-inline, border-inline-start) rather than left/right. That is what makes one stylesheet serve both directions — a mirrored copy of this file would drift out of step the first time either side is edited alone. =========================================================================== */ :root { --ink: #18181b; --ink-soft: #52525b; --line: #e4e4e7; --bg: #fafafa; --panel: #ffffff; --accent: #18181b; --ok-bg: #f0fdf4; --ok-line: #86efac; --bad-bg: #fef2f2; --bad-line: #fca5a5; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.55; } /* Arabic. A slightly larger size and looser leading are not decoration: Arabic glyphs carry their distinguishing marks below and above the baseline, and at the Latin size and leading above they collide and become genuinely harder to read. */ [dir="rtl"] body { font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Arabic Typesetting", Arial, sans-serif; font-size: 17px; line-height: 1.8; } /* Latin-script content inside an Arabic page — a reference number, an email address, an invoice number. Marked dir="ltr" in the markup; this keeps punctuation and grouping with it rather than reflowing it into the surrounding paragraph. */ [dir="rtl"] [dir="ltr"] { text-align: start; unicode-bidi: isolate; } .portal-wrap { max-width: 46rem; margin: 0 auto; padding: 0 1rem; } .portal-header { background: var(--panel); border-bottom: 1px solid var(--line); padding: 1rem 0; } .portal-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .portal-brand { font-weight: 600; font-size: 1.15rem; } .portal-sub { color: var(--ink-soft); margin-inline-start: .5rem; font-size: .95rem; } .portal-home { color: inherit; text-decoration: none; } .portal-home:hover { text-decoration: underline; } .lang-switch { color: var(--ink-soft); text-decoration: none; font-size: .9rem; border: 1px solid var(--line); border-radius: .375rem; padding: .25rem .7rem; white-space: nowrap; } .lang-switch:hover { color: var(--ink); border-color: var(--ink-soft); } .portal-main { padding: 1.75rem 1rem 3rem; } .portal-footer { border-top: 1px solid var(--line); padding: 1rem 0 2rem; color: var(--ink-soft); font-size: .875rem; } h1 { font-size: 1.5rem; margin: 0 0 .35rem; } h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; } .lede { color: var(--ink-soft); margin: 0 0 1.5rem; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; padding: 1.25rem; margin-bottom: 1rem; } label { display: block; font-weight: 500; margin: 1rem 0 .3rem; } .hint { color: var(--ink-soft); font-size: .85rem; font-weight: 400; } input[type=text], input[type=email], input[type=tel], input[type=password], select, textarea { width: 100%; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: .375rem; font: inherit; background: #fff; color: var(--ink); } textarea { min-height: 8rem; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .readonly-field { background: #f4f4f5; border: 1px solid var(--line); border-radius: .375rem; padding: .55rem .65rem; color: var(--ink-soft); } button, .button { display: inline-block; margin-top: 1.25rem; padding: .6rem 1.25rem; background: var(--accent); color: #fff; border: 0; border-radius: .375rem; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; } button:hover { opacity: .9; } .notice { padding: .75rem 1rem; border-radius: .375rem; border: 1px solid; } .notice-ok { background: var(--ok-bg); border-color: var(--ok-line); } .notice-bad { background: var(--bad-bg); border-color: var(--bad-line); } .field-error { color: #b91c1c; font-size: .875rem; display: block; margin-top: .25rem; } .meta { color: var(--ink-soft); font-size: .9rem; } .meta dt { font-weight: 500; color: var(--ink); } .meta dd { margin: 0 0 .6rem; } .status-pill { display: inline-block; padding: .15rem .6rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; background: #f4f4f5; } .thread { list-style: none; padding: 0; margin: 0; } .thread li { border: 1px solid var(--line); border-radius: .5rem; padding: .85rem 1rem; margin-bottom: .65rem; background: var(--panel); } .thread .who { font-weight: 500; } .thread .when { color: var(--ink-soft); font-size: .85rem; } .thread .body { white-space: pre-wrap; margin: .4rem 0 0; } .complaint-list { list-style: none; padding: 0; margin: 0; } .complaint-list li { border: 1px solid var(--line); border-radius: .5rem; padding: .85rem 1rem; margin-bottom: .6rem; background: var(--panel); } /* The honeypot. Hidden from humans, present in the DOM for a script to fill. Not display:none, which some bots skip — off-canvas and inert instead. Kept on physical left/top rather than logical inset, deliberately: this rule only has to put the field outside the viewport, and in RTL a logical inset-inline-start resolves to the RIGHT edge, where a wide viewport plus a scroll container can bring it back into view. Off-canvas to the left is off-canvas in both directions. */ .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Off-screen but still read aloud — unlike .hp-field, which hides from everyone. Carries the "removed X" announcement, so a screen-reader user hears what the visual list just showed. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The attached-files list. Written with logical properties throughout so it mirrors in Arabic without a second rule. */ .file-list { list-style: none; padding: 0; margin: .6rem 0 0; } .file-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: .375rem; background: var(--panel); margin-bottom: .4rem; } .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-size { color: var(--ink-soft); font-size: .85rem; flex-shrink: 0; } .file-row-bad { background: var(--bad-bg); border-color: var(--bad-line); } /* A 40px target: this sits on a phone, next to a filename it must not be mistaken for. */ .file-remove { flex-shrink: 0; width: 2.5rem; height: 2.5rem; padding: 0; line-height: 1; border-radius: .375rem; background: transparent; color: var(--ink-soft); border: 1px solid var(--line); cursor: pointer; } .file-remove:hover { color: #b91c1c; border-color: #fca5a5; background: var(--bad-bg); } @media (prefers-color-scheme: dark) { :root { --ink: #fafafa; --ink-soft: #a1a1aa; --line: #3f3f46; --bg: #18181b; --panel: #27272a; --accent: #fafafa; --ok-bg: #14301f; --ok-line: #166534; --bad-bg: #3f1d1d; --bad-line: #991b1b; } input[type=text], input[type=email], input[type=tel], input[type=password], select, textarea { background: #1f1f23; } .readonly-field { background: #1f1f23; } button, .button { color: #18181b; } /* The rule above assumes a filled button on a light face. The remove button is neither, so it takes the page's own ink back. */ .file-remove { color: var(--ink-soft); background: transparent; } .file-remove:hover { color: #fca5a5; background: var(--bad-bg); } } /* See site.css: a validation summary with no messages still renders its container, which on the portal is a .notice.notice-bad box. Hide it until the class flips to -errors. */ .validation-summary-valid { display: none; }