/* alarabia.chat - Arabic model inference UI. No external fonts or stylesheets: the page must work behind a firewall and under a Content-Security-Policy that allows nothing but 'self'. */ :root { color-scheme: light; /* institute palette, shared with hadith.chat */ --teal: #0D7377; --gold: #D4AF37; --dark: #1A1A2E; --light: #F8F9FA; --deep-teal: #14213D; --orange-accent: #FCA311; --teal-dark: #095255; --teal-soft: #e6f2f2; --gold-dark: #b3902c; --ink: #1A1A2E; --muted: #667085; --line: #e3e6ec; --card: #ffffff; --danger: #b3261e; --danger-soft: #fdf1f0; --ok-soft: #e8f6ee; --ok-ink: #14663d; --radius: 12px; --arabic: "Segoe UI", "Noto Naskh Arabic", "Traditional Arabic", "Amiri", "Scheherazade New", Tahoma, serif; /* Surfaces that used to be a literal #fff. Named so that dark mode is an override of this block rather than a second copy of the whole sheet. */ --surface: #ffffff; /* inputs, pill buttons, download chips */ --code-bg: #eef1f5; --th-bg: #f2f4f7; --disabled: #9aa5b1; --heading-ink: var(--deep-teal); /* the hero title */ /* Structure-label chips. Each is a pair, because dark mode needs to move the ink as well as the ground to stay legible. */ --lab-hnum-bg: #e5e9f5; --lab-hnum-ink: #14213D; --lab-isnad-bg: #fdf0d5; --lab-isnad-ink: #8a6410; --lab-matn-bg: var(--teal-soft); --lab-matn-ink: var(--teal-dark); --lab-head-bg: #ffeeda; --lab-head-ink: #96541a; } /* ---------- dark theme ---------- Same contract as hadith.chat, so the two sites behave identically: a `dark` class on , remembered in localStorage under "theme", defaulting to the operating system's preference. `static/theme.js` applies it from before the first paint — it is a separate file rather than an inline script because the CSP allows script-src 'self' and nothing inline. Only the variables move. Anything already dark in the light theme (the masthead, the footer, white text on a teal button) is correct in both. */ html.dark { color-scheme: dark; --light: #11141d; /* page ground */ --card: #181c27; --surface: #1e2331; --ink: #e7eaf1; --muted: #98a1b3; --line: #2b3143; --code-bg: #202636; --th-bg: #1c2130; --disabled: #3a4150; /* The teals are lifted: #0D7377 on a near-black ground is too low-contrast to read, and --teal-dark is used for accent TEXT as often as for a hover ground, so on dark it has to become the lighter of the two. */ --teal: #17999e; --teal-dark: #56cfd2; --teal-soft: #12303a; --danger: #ff8a80; --danger-soft: #341d1d; --ok-soft: #14301f; --ok-ink: #7fd6a0; --heading-ink: #e7eaf1; --lab-hnum-bg: #232a42; --lab-hnum-ink: #b9c6ef; --lab-isnad-bg: #3a2f13; --lab-isnad-ink: #e8c877; --lab-matn-bg: #12303a; --lab-matn-ink: #6fd8db; --lab-head-bg: #3a2716; --lab-head-ink: #eab183; } * { box-sizing: border-box; } body { margin: 0; background: var(--light); color: var(--ink); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .wrap { max-width: 940px; margin: 0 auto; padding: 0 1rem; } /* ---------- masthead ---------- */ .masthead { background: var(--dark); color: #fff; border-bottom: 3px solid var(--gold); } /* Three columns, not a flex row with a spacer: the brand sits in the middle column and is therefore centred on the BANNER, not on whatever space the donate button happens to leave. The two side columns are equal, so the centre holds as the button changes width between languages. */ .masthead-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.7rem 1rem; max-width: 940px; margin: 0 auto; } .brand { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; min-width: 0; } .brand-logo { height: 46px; width: auto; flex: none; } .brand-names { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; } .brand-name { height: 30px; width: auto; max-width: 15rem; object-fit: contain; } /* The Arabic name is an image, so the English line under it is set in type small enough to read as a subtitle rather than compete with it. */ .brand-name-en { font-size: 0.6rem; line-height: 1.3; letter-spacing: 0.02em; text-align: center; opacity: 0.82; max-width: 17rem; } .brand-text { display: none; } .theme-toggle { grid-column: 1; justify-self: start; background: none; color: inherit; cursor: pointer; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; padding: 0; } .theme-toggle:hover { border-color: var(--gold); } .theme-toggle .theme-icon { font-size: 1rem; line-height: 1; } /* Moon while light (what clicking gives you), sun while dark. */ .theme-toggle .theme-icon::before { content: "\1F319"; } html.dark .theme-toggle .theme-icon::before { content: "\2600"; } .donate { grid-column: 3; justify-self: end; } /* donate menu, mirroring hadith.chat's two Stripe payment links */ .donate { position: relative; } .donate-btn { background: var(--gold); color: var(--dark); border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.9rem; padding: 0.45rem 1rem; display: flex; align-items: center; gap: 0.4rem; } .donate-btn:hover { background: var(--gold-dark); } .donate-btn::after { content: "\25BE"; font-size: 0.7em; } .donate-menu { position: absolute; top: calc(100% + 0.35rem); inset-inline-end: 0; z-index: 50; min-width: 15rem; border-radius: 9px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.28); } .donate-menu a { display: block; padding: 0.6rem 0.85rem; text-decoration: none; color: #fff; font-size: 0.88rem; } .donate-menu a small { display: block; font-weight: 400; opacity: .85; font-size: 0.78rem; } .donate-menu a .ar-inline { font-family: var(--arabic); } .donate-monthly { background: var(--teal); } .donate-monthly:hover { background: var(--teal-dark); } .donate-onetime { background: var(--deep-teal); } .donate-onetime:hover { background: #0d1730; } /* ---------- hero ---------- */ .hero { text-align: center; padding: 2.1rem 1rem 1.4rem; } .hero h1 { margin: 0; font-size: 2rem; letter-spacing: -0.02em; color: var(--heading-ink); } .hero-ar { margin: 0.15rem 0 0; font-family: var(--arabic); font-size: 1.45rem; color: var(--teal); } .tagline { margin: 0.8rem auto 0; max-width: 46rem; color: var(--muted); } /* ---------- top-level page tabs ---------- */ .nav { display: flex; gap: 0.3rem; justify-content: center; flex-wrap: wrap; padding-bottom: 1.2rem; } .nav button { border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; font-size: 0.92rem; color: var(--muted); padding: 0.45rem 1.1rem; border-radius: 999px; display: flex; gap: 0.45rem; align-items: baseline; } .nav button:hover { border-color: var(--teal); color: var(--teal-dark); } .nav button.is-active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; } .nav button.is-active .ar-inline { color: #d7ecec; } .ar-inline { font-family: var(--arabic); } .page { padding-bottom: 3rem; } .page.is-hidden, .is-hidden { display: none; } /* ---------- cards ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem 1.4rem; margin: 0 0 1.1rem; } .card h2 { margin: 0 0 1rem; font-size: 1.05rem; display: flex; align-items: center; gap: 0.6rem; } .step { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--teal); color: #fff; font-size: 0.85rem; flex: none; } .ar { font-family: var(--arabic); font-weight: 400; color: var(--muted); margin-inline-start: auto; } .muted { color: var(--muted); } /* ---------- task picker ---------- */ .tasks { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .task { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 0.9rem; cursor: pointer; transition: border-color .12s, background .12s; } .task:hover { border-color: var(--teal); } .task input { position: absolute; opacity: 0; pointer-events: none; } .task.is-active { border-color: var(--teal); background: var(--teal-soft); } .task-title { font-weight: 600; display: block; } .task-title-ar { font-family: var(--arabic); color: var(--teal); display: block; } .task-desc { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.35rem; } /* ---------- inner tabs (paste / upload) ---------- */ .tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; } .tab { border: 0; background: none; cursor: pointer; padding: 0.55rem 0.9rem; font: inherit; font-size: 0.95rem; color: var(--muted); border-bottom: 2px solid transparent; display: flex; gap: 0.5rem; align-items: baseline; } .tab.is-active { color: var(--teal-dark); border-bottom-color: var(--teal); font-weight: 600; } .tab .ar { margin: 0; font-size: 0.9rem; } /* ---------- inputs ---------- */ textarea, input[type="text"], input[type="email"] { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 0.75rem 0.85rem; font: inherit; background: var(--surface); color: var(--ink); } textarea { font-family: var(--arabic); font-size: 1.15rem; line-height: 2; resize: vertical; } textarea.plain { font-family: inherit; font-size: 1rem; line-height: 1.6; } textarea:focus, input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); } .hint { font-size: 0.82rem; color: var(--muted); margin: 0.45rem 0 0; } .field { margin-top: 1rem; } .field label { display: block; font-size: 0.9rem; margin-bottom: 0.35rem; font-weight: 500; } .field-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } code { background: var(--code-bg); padding: 0 0.3em; border-radius: 4px; font-size: 0.9em; } .drop { display: grid; gap: 0.35rem; place-items: center; text-align: center; border: 2px dashed var(--line); border-radius: 10px; padding: 2rem 1rem; cursor: pointer; transition: border-color .12s, background .12s; } .drop:hover, .drop.is-over { border-color: var(--teal); background: var(--teal-soft); } .drop.has-file { border-style: solid; border-color: var(--teal); background: var(--teal-soft); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- buttons ---------- */ .run-card { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .run { border: 0; border-radius: 9px; cursor: pointer; background: var(--teal); color: #fff; font: inherit; font-weight: 600; font-size: 1.02rem; padding: 0.7rem 2.2rem; display: flex; gap: 0.6rem; align-items: baseline; } .run:hover { background: var(--teal-dark); } .run:disabled { background: var(--disabled); cursor: progress; } .run .ar { color: #cfe7e7; margin: 0; } .status { margin: 0; color: var(--muted); font-size: 0.92rem; } .status.is-error { color: var(--danger); background: var(--danger-soft); padding: 0.5rem 0.75rem; border-radius: 8px; } .status.is-ok { color: var(--ok-ink); background: var(--ok-soft); padding: 0.5rem 0.75rem; border-radius: 8px; } .status.is-busy::after { content: "\2026"; } /* ---------- results ---------- */ .meta { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 0 0 0.8rem; font-size: 0.86rem; } .meta dt { color: var(--muted); display: inline; } .meta dd { display: inline; margin: 0 0 0 0.35rem; font-weight: 600; } .meta div { padding: 0.15rem 0; } .notes { margin: 0 0 0.9rem; padding-inline-start: 1.1rem; font-size: 0.86rem; color: var(--muted); } .toolbar { display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-block: 1px solid var(--line); margin-bottom: 1rem; } .downloads, .toggles, .langs { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .toolbar-label { font-size: 0.86rem; color: var(--muted); } /* English / Arabic switch for the POS and structure tag names. */ .langs #lang-buttons { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; } .lang { border: 0; background: var(--surface); font: inherit; font-size: 0.86rem; padding: 0.35rem 0.75rem; color: var(--muted); cursor: pointer; } .lang + .lang { border-inline-start: 1px solid var(--line); } .lang:hover { background: var(--teal-soft); color: var(--teal-dark); } .lang.is-active { background: var(--teal); color: #fff; } .dl, .ghost { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); padding: 0.35rem 0.8rem; font: inherit; font-size: 0.86rem; color: var(--ink); text-decoration: none; cursor: pointer; } .dl:hover, .ghost:hover { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-soft); } .dl.is-off { opacity: 0.45; pointer-events: none; } .check { font-size: 0.86rem; color: var(--muted); display: flex; gap: 0.35rem; align-items: center; } .output { font-family: var(--arabic); font-size: 1.3rem; line-height: 2.15; max-height: 34rem; overflow-y: auto; padding: 0.4rem 0.2rem; } .output p { margin: 0 0 0.55rem; } .output .src { font-size: 0.95rem; color: var(--muted); line-height: 1.8; margin-bottom: 0.1rem; } .output .blank { height: 0.7rem; } .tok { display: inline-grid; justify-items: center; margin: 0 0.22rem 0.5rem; vertical-align: top; } .tok .w { line-height: 1.4; } .tok .t { font-family: system-ui, sans-serif; font-size: 0.62rem; letter-spacing: 0.03em; color: var(--teal-dark); background: var(--teal-soft); border-radius: 4px; padding: 0 0.3rem; line-height: 1.5; } /* Arabic tag names are words, not codes: they need the Arabic face and a size that keeps their diacritic-free shapes legible under the token. */ .tok .t[lang="ar"], .seg .lab[lang="ar"] { font-family: var(--arabic); letter-spacing: 0; font-size: 0.85rem; } .seg { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.3rem; } .seg .lab { font-family: system-ui, sans-serif; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 4px; padding: 0.05rem 0.4rem; flex: none; line-height: 1.7; } .seg .txt { flex: 1; } .lab-HNUM { background: var(--lab-hnum-bg); color: var(--lab-hnum-ink); } .lab-ISNAD { background: var(--lab-isnad-bg); color: var(--lab-isnad-ink); } .lab-MATN { background: var(--lab-matn-bg); color: var(--lab-matn-ink); } .lab-HEADING { background: var(--lab-head-bg); color: var(--lab-head-ink); } /* The narrator chain, under the isnād it belongs to. Indented on the start side and hung off a rule so it reads as a breakdown of the line above rather than as another segment. */ .chain { margin: 0.1rem 0 0.7rem 0; padding-inline-start: 0.7rem; margin-inline-start: 3.4rem; border-inline-start: 2px solid var(--lab-isnad-bg); } .hop { display: flex; gap: 0.5rem; align-items: baseline; line-height: 1.9; } .hop-n { font-family: system-ui, sans-serif; font-size: 0.66rem; color: var(--muted); min-width: 1.1rem; text-align: end; flex: none; } /* Verb and name carry the two things a reader is separating: how the report travelled and who it travelled through. The verb is set in the isnād's own colour on a tinted chip, the name in ordinary body ink — so the chain scans as names with connectives between them, not as one undifferentiated run. */ .hop-verb { font-family: var(--arabic); font-size: 0.95rem; flex: none; color: var(--lab-isnad-ink); background: var(--lab-isnad-bg); border-radius: 4px; padding: 0 0.35rem; } .hop-name { font-family: var(--arabic); font-weight: 600; color: var(--ink); } @media (max-width: 640px) { .chain { margin-inline-start: 0.8rem; } } .grid { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .grid th, .grid td { border: 1px solid var(--line); padding: 0.35rem 0.55rem; text-align: start; vertical-align: top; } .grid th { background: var(--th-bg); font-size: 0.8rem; color: var(--muted); font-family: system-ui, sans-serif; } .grid td.out { background: var(--teal-soft); } /* ---------- donate / feedback / about pages ---------- */ .lede { font-size: 1.05rem; color: var(--muted); margin-top: 0; } .prose p { margin: 0 0 0.8rem; } .prose h3 { margin: 1.4rem 0 0.5rem; font-size: 0.98rem; } .prose ul { margin: 0 0 0.9rem; padding-inline-start: 1.2rem; } .prose a { color: var(--teal-dark); } .rtl { direction: rtl; text-align: right; font-family: var(--arabic); } .tiers { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 0.4rem; } .tier { border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; } .tier h3 { margin: 0; font-size: 1.05rem; } .tier .ar-inline { color: var(--teal); } .tier p { margin: 0; font-size: 0.88rem; color: var(--muted); flex: 1; } .tier a { margin-top: 0.7rem; text-align: center; text-decoration: none; border-radius: 8px; padding: 0.55rem 1rem; font-weight: 600; font-size: 0.92rem; } .tier-monthly a { background: var(--teal); color: #fff; } .tier-monthly a:hover { background: var(--teal-dark); } .tier-onetime a { background: var(--deep-teal); color: #fff; } .tier-onetime a:hover { background: #0d1730; } .badge { display: inline-block; font-size: 0.75rem; font-weight: 600; background: var(--teal-soft); color: var(--teal-dark); border-radius: 999px; padding: 0.1rem 0.6rem; margin-inline-start: 0.4rem; } /* ---------- footer ---------- */ .site-footer { background: var(--dark); color: #c9cfda; text-align: center; font-size: 0.86rem; padding: 1.6rem 1rem; border-top: 3px solid var(--gold); } .site-footer p { margin: 0.3rem 0; } .site-footer a { color: var(--gold); } .site-footer .footer-logo { height: 34px; opacity: .9; margin-bottom: 0.4rem; } @media (max-width: 640px) { /* The institute name goes, both scripts together — the English line is a subtitle to the Arabic image, so keeping one without the other reads as a mistake. The logo alone carries the brand at this width, which is what the banner already did before the English line existed. */ .brand-name, .brand-name-en { display: none; } .masthead-inner { gap: 0.5rem; padding: 0.6rem 0.7rem; } .field-row { grid-template-columns: 1fr; } .hero h1 { font-size: 1.6rem; } }