/* ════════════════════════════════════════════════════════════════════════ QITS BASE — element defaults + shared chrome + components Depends on tokens.css (load tokens.css FIRST). Spec: docs/aesthetics.md ──────────────────────────────────────────────────────────────────────── Framework-free. Consume ONLY semantic vars (--bg, --accent, …) so both theme modes work. Use LOGICAL properties (margin-inline-*, padding-inline-*, text-align:start) so one sheet serves LTR + RTL. Set dir/lang on elements. ════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--q-font-ui); font-size: 16px; /* Arabic reads small — never below 16px */ line-height: 1.6; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Type roles ──────────────────────────────────────────────────────── Headings = geometric (Latin display / Arabic Kufi). Body = UI sans. Long-form reading = serif. Qur'anic + tafsir Arabic = Naskh (Amiri). */ h1, h2, h3 { font-family: var(--q-font-display); font-weight: 500; line-height: 1.25; } .q-kufi { font-family: var(--q-font-kufi); } /* Arabic display / brand */ .q-naskh { font-family: var(--q-font-naskh); } /* Arabic body + Qur'anic */ .q-read { font-family: var(--q-font-read); } /* long-form Latin body */ .q-mono { font-family: var(--q-font-mono); } /* Arabic + Qur'anic text — larger, looser, RTL. Never restyle Qur'anic glyphs (no letter-spacing, no transform). dir/lang belong on the element. */ [lang="ar"], .q-ar { font-family: var(--q-font-naskh); line-height: 1.9; } .q-ayah { font-family: var(--q-font-naskh); direction: rtl; color: var(--text-dim); font-size: 1.15em; line-height: 2; } /* ════════════════════════════════════════════════════════════════════════ THE OCTAGRAM — the one brand motif (Rub-el-Hizb / khatim ۞). Two overlapping squares (one at 45°) + centre dot. Inherits currentColor. Use WITH the --fixed modifier for a whole-page mark (pinned to the viewport, painted above the bg + behind all content via z-index:-1 — no per-content z-index needed); OR drop it inside any position:relative container WITHOUT --fixed for a scoped mark (e.g. a hero). */ .q-watermark { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .q-watermark--fixed { position: fixed; z-index: -1; } .q-watermark svg { position: absolute; width: 260vh; height: 260vh; top: -55%; right: -88%; color: var(--accent); opacity: var(--watermark-opacity, 0.10); transform: rotate(28deg); transform-origin: 50% 50%; } @media (max-width: 880px) { .q-watermark svg { width: 200vh; height: 200vh; top: -25%; right: -110%; } } /* ════════════════════════════════════════════════════════════════════════ SHARED CHROME — brand header band + waqf footer. The footer is a LOAD-BEARING waqf surface (CLAUDE.md contract): the Al-Hijr 9 ayah + policy links must survive. Do not strip for "clean" output. ════════════════════════════════════════════════════════════════════════ */ .q-header { background: var(--band); border-bottom: 1px solid rgba(0,0,0,0.25); padding: var(--q-space-3) var(--q-space-5); display: flex; align-items: center; gap: var(--q-space-2); font-family: var(--q-font-mono); font-size: 0.85rem; color: var(--q-cream); } .q-header .q-glyph { color: var(--accent); } .q-header .q-prompt { color: var(--accent); } .q-footer { background: var(--band); border-top: 1px solid rgba(0,0,0,0.25); padding: var(--q-space-3) var(--q-space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--q-space-4); flex-wrap: wrap; } .q-footer .q-ayah { font-family: var(--q-font-naskh); color: var(--q-cream-dim); font-size: 0.92rem; margin: 0; } .q-footer nav { display: flex; gap: var(--q-space-5); font-family: var(--q-font-mono); font-size: 0.74rem; } .q-footer nav a { color: var(--q-cream-faint); } .q-footer nav a:hover { color: var(--accent); } /* ════════════════════════════════════════════════════════════════════════ COMPONENTS — buttons, inputs, cards, pills. ════════════════════════════════════════════════════════════════════════ */ .q-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--q-space-2); padding: var(--q-space-3) var(--q-space-5); background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--q-radius-sm); font-family: var(--q-font-kufi); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background var(--q-dur-fast) var(--q-ease); } .q-btn:hover { background: var(--accent-hover); color: var(--on-accent); } .q-btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--rule); } .q-btn--ghost:hover { background: transparent; border-color: var(--accent); } .q-input { padding: var(--q-space-3) var(--q-space-4); background: var(--bg-elev); color: var(--text); border: 1px solid var(--rule); border-radius: var(--q-radius-sm); font-family: var(--q-font-ui); font-size: 0.95rem; outline: none; } .q-input::placeholder { color: var(--text-faint); } .q-input:focus { border-color: var(--accent); } .q-card { background: var(--bg-elev); border: 1px solid var(--rule); border-radius: var(--q-radius); padding: var(--q-space-5); box-shadow: var(--shadow); } .q-pill { display: inline-flex; align-items: center; gap: var(--q-space-1); padding: 0.15em 0.7em; border-radius: 999px; font-family: var(--q-font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--rule); color: var(--text-dim); } .q-pill--ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); } .q-pill--warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); } .q-pill--down { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } /* Mono "status" eyebrow — recurring label style across surfaces. */ .q-eyebrow { font-family: var(--q-font-mono); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; } /* ── Layout helpers ──────────────────────────────────────────────────── */ .q-page { max-width: var(--q-page-max); margin-inline: auto; padding-inline: var(--q-space-5); } .q-prose { max-width: var(--q-measure); } .q-stack > * + * { margin-block-start: var(--q-space-4); } /* ── Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }