/* Comment Sweep — commentsweep.naseeh.io * * One hand-written stylesheet for the whole site. No build step, no * preprocessor, no external font. The colours match the app's own palette so * the site and the app look like the same product. * * Direction: every box uses logical properties (margin-inline, padding-inline, * border-inline-start) so the Arabic pages under /ar/ get a correct mirrored * layout from this same file with nothing but dir="rtl" on . */ :root { color-scheme: light dark; --canvas: #f6f8fb; /* ColorConfig.bgColor */ --surface: #ffffff; /* ColorConfig.surfaceColor */ --soft: #eaf0ff; /* ColorConfig.secondaryBgColor */ --ink: #0b163f; /* ColorConfig.textPrimaryColor */ --muted: #475467; /* ColorConfig.mutedInk */ --brand: #10245f; /* ColorConfig.primaryColor */ --on-brand: #ffffff; --border: #d6dee9; /* ColorConfig.dividerColor */ --hairline: #cbd5e1; --danger: #c51636; --focus: #b45309; /* ColorConfig.accentColor, amber: visible on both */ --measure: 42rem; --radius: 10px; } @media (prefers-color-scheme: dark) { :root { --canvas: #0d0f14; /* ErpThemeTokens.darkNavy background */ --surface: #14171f; --soft: #1c2130; --ink: #f4f6fb; --muted: #a8b3c7; --brand: #6e9bff; --on-brand: #0d0f14; --border: #2a2f3c; --hairline: #2a2f3c; --danger: #ff8a96; --focus: #ffc24b; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 1rem; line-height: 1.6; } /* Arabic pages: prefer a Naskh face that ships with the operating system. * Nothing is downloaded; if none of these exist the stack falls through to the * system UI font, which on every current phone OS has Arabic coverage. */ html[lang="ar"] body { font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", "Tahoma", system-ui, sans-serif; line-height: 1.9; } /* ---------- links, focus ---------- */ a { color: var(--brand); } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; } .skip { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--brand); color: var(--on-brand); padding: 0.6rem 1rem; z-index: 10; } .skip:focus { inset-inline-start: 0; } /* ---------- shell ---------- */ .wrap { max-width: var(--measure); margin-inline: auto; padding-inline: 1rem; } .site-header { background: var(--surface); border-block-end: 1px solid var(--border); } .site-header .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; justify-content: space-between; padding-block: 0.75rem; } .brand { font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .brand svg { inline-size: 1.35rem; block-size: 1.35rem; flex: none; } .brand:hover { text-decoration: underline; } .lang { font-size: 0.95rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.75rem; text-decoration: none; background: var(--soft); white-space: nowrap; } .lang:hover, .lang:focus-visible { border-color: var(--brand); } nav.pages ul { list-style: none; margin: 0; padding: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.95rem; } nav.pages a[aria-current="page"] { font-weight: 700; text-decoration: none; border-block-end: 2px solid var(--brand); } main { padding-block: 1.5rem 2.5rem; } /* ---------- type ---------- */ h1 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 0.5rem; color: var(--ink); } h2 { font-size: 1.2rem; line-height: 1.3; margin: 2rem 0 0.5rem; } h3 { font-size: 1.02rem; margin: 1.25rem 0 0.35rem; } p, ul, ol, dl { margin: 0 0 1rem; } .lead { font-size: 1.1rem; color: var(--ink); } .muted { color: var(--muted); } small, .small { font-size: 0.9rem; color: var(--muted); } ul, ol { padding-inline-start: 1.35rem; } li { margin-block-end: 0.35rem; } code, kbd, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--soft); border-radius: 4px; padding: 0.05em 0.35em; overflow-wrap: anywhere; } /* Latin identifiers inside Arabic prose keep their own direction. */ [dir="ltr"] { direction: ltr; unicode-bidi: isolate; } pre { background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; overflow-x: auto; direction: ltr; text-align: start; } pre code { background: none; padding: 0; } /* ---------- blocks ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-block-end: 1rem; } .note { background: var(--soft); border-inline-start: 4px solid var(--brand); border-radius: var(--radius); padding: 0.75rem 1rem; margin-block-end: 1rem; } .steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1rem; } .steps > li { counter-increment: step; position: relative; padding-inline-start: 2.5rem; margin-block-end: 1rem; } .steps > li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0.15rem; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; } .steps > li > strong { display: block; } dl.keys { margin: 0; } dl.keys dt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; margin-block-start: 0.75rem; direction: ltr; unicode-bidi: isolate; text-align: start; } dl.keys dd { margin: 0.1rem 0 0; padding-inline-start: 0; color: var(--muted); } .updated { color: var(--muted); font-size: 0.9rem; margin-block-end: 1.5rem; } /* ---------- footer ---------- */ .site-footer { border-block-start: 1px solid var(--border); background: var(--surface); padding-block: 1.25rem 2rem; color: var(--muted); font-size: 0.9rem; } .site-footer ul { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; } .site-footer p { margin: 0.25rem 0; } /* ---------- small screens ---------- */ @media (max-width: 24rem) { body { font-size: 0.97rem; } h1 { font-size: 1.45rem; } .wrap { padding-inline: 0.75rem; } .steps > li { padding-inline-start: 2.25rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }