/* ============================================================================ Isnaad Certificates — Halaqat / HaramApp Design System: canonical tokens ---------------------------------------------------------------------------- Brought across from the shared Halaqat design system (_ds/halaqat-design-system/styles.css) so this app renders in the same visual language as HaramApp and the QM HelpDesk. Arabic-first (RTL), single font Almarai, Bootstrap-5 token layer. Adopted from the HelpDesk's refinement of the same tokens: - AA-safe TEXT colours (--gold-text, --danger-text, --success-text, --info-text). The --bs-* status colours stay the FILL colours. - Almarai ships no 500/600 weight, so --fw-medium/--fw-semibold resolve to the weights that actually exist (400/700) instead of silently rounding. ELEVATION RULE: depth is communicated through BORDERS, never shadows. The --shadow-* values exist for reference but must NOT be applied. ============================================================================ */ /* Metric-matched fallback for Almarai. Almarai is fetched from the Google CDN with display=swap, so the first paint uses a system face and the page REFLOWS when the webfont arrives. This face is not a download - it aliases a local system font and corrects its metrics to Almarai's, so the swap moves nothing. Named in --bs-font-sans-serif above, between Almarai and the plain system stack. Values from the shared system (Support System/resources/css/app.css:35-41). */ @font-face { font-family: 'Almarai Fallback'; src: local('Segoe UI'), local('system-ui'); size-adjust: 96%; ascent-override: 105%; descent-override: 30%; } :root { /* ============================================================ BRAND ============================================================ */ --haram-primary: #315b4d; /* main brand green */ --haram-primary-light: #3d7261; /* hover / lighter primary */ --haram-primary-d1: #284b3f; /* hero-gradient mid stop */ --haram-primary-d2: #1f3a31; /* hero-gradient end stop */ --haram-gold: #b18f5d; /* accent — links, highlights */ /* Isnaad is GREEN-ONLY: the per-halaqa green/blue runtime switch that HaramApp uses is deliberately not wired here (same call the HelpDesk made). */ --bs-primary: #315b4d; --bs-primary-rgb: 49, 91, 77; /* Kept for reference; not switched in this app. */ --halaqa-quran: #315b4d; --halaqa-mutoon: #315971; /* ============================================================ SEMANTIC / STATUS ============================================================ */ --bs-success: #28c76f; --bs-success-rgb: 40, 199, 111; --bs-warning: #ff9f43; --bs-warning-rgb: 255, 159, 67; --bs-danger: #ff4c51; --bs-danger-rgb: 255, 76, 81; --bs-info: #00bad1; --bs-info-rgb: 0, 186, 209; --bs-secondary: #808390; --bs-secondary-rgb: 128, 131, 144; --bs-gold: #b18f5d; --bs-gold-rgb: 177, 143, 93; /* AA-safe TEXT variants. The fills above measure ~3.3:1 on white and fail AA for text; these are used wherever the colour carries a word, not a shape. */ --gold-text: #8a6d3b; /* ~4.6:1 on white */ --danger-text: #b3261e; /* ~6.0:1 */ --success-text: #12693c; /* ~5.6:1 */ --info-text: #00707e; /* ~4.9:1 */ --warning-text: #8a6d1f; /* ============================================================ GRAY SCALE (12 levels) ============================================================ */ --bs-gray-25: #fcfcfc; --bs-gray-50: #f3f2f3; --bs-gray-75: #eeeeef; --bs-gray-100: #eaeaec; --bs-gray-200: #e6e6e8; --bs-gray-300: #c1bfc5; --bs-gray-400: #acaab1; --bs-gray-500: #97959e; --bs-gray-600: #82808b; --bs-gray-700: #6d6b77; /* body text */ --bs-gray-800: #595564; --bs-gray-900: #444050; /* ============================================================ SURFACES & TEXT ============================================================ */ --bs-body-bg: #fafafa; --bs-body-color: #6d6b77; --bs-body-color-rgb: 109, 107, 119; --bs-secondary-color: #76778e; --bs-paper-bg: #ffffff; --bs-card-bg: #ffffff; --bs-tertiary-bg: #f3f2f3; --bs-border-color: rgba(47, 43, 61, 0.16); --bs-heading-color: #444050; --bs-base-color: #2f2b3d; --bs-emphasis-color-rgb: 47, 43, 61; /* ============================================================ SOFT PASTEL STAT-CARD COLOURS (data tiles only) Pattern: tile bg rgba(c,.08-.15) - icon bg rgba(c,.15-.25) - value full hex ============================================================ */ --stat-forest: #2d5a45; --stat-sage: #6b9b7a; --stat-terracotta: #c4857a; --stat-slate: #7a9bb5; --stat-amber: #c4a84a; --stat-tan: #d4a574; /* ============================================================ TYPOGRAPHY — single family: Almarai ============================================================ */ --bs-font-sans-serif: 'Almarai', 'Almarai Fallback', system-ui, 'Segoe UI', sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --font: var(--bs-font-sans-serif); --fs-xs: 0.6875rem; /* 11px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.9375rem; /* 15px — body default */ --fs-lg: 1rem; /* 16px */ --fs-xl: 1.1875rem; /* 19px */ --h1: 2.875rem; --h2: 2.375rem; --h3: 1.75rem; --h4: 1.5rem; --h5: 1.125rem; --h6: 0.9375rem; --fw-light: 300; --fw-normal: 400; --fw-medium: 400; /* Almarai has no 500 */ --fw-semibold: 700; /* Almarai has no 600 */ --fw-bold: 700; --fw-extrabold: 800; --lh-base: 1.375; --lh-xs: 1; --lh-sm: 1.125; --lh-lg: 1.625; --lh-xl: 1.75; /* ============================================================ SPACING (base 1rem) ============================================================ */ --sp-0: 0; --sp-50: 0.125rem; --sp-1: 0.25rem; --sp-1_5: 0.375rem; --sp-2: 0.5rem; --sp-2_5: 0.625rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-9: 2.25rem; --sp-10: 2.5rem; --sp-11: 2.75rem; --sp-12: 3rem; /* ============================================================ BORDER RADIUS ============================================================ */ --r-xs: 0.5rem; /* 8px — buttons, inputs */ --r-sm: 0.75rem; /* 12px — cards (workhorse) */ --r-md: 1.25rem; /* 20px */ --r-lg: 1.5rem; /* 24px */ --r-xl: 1.75rem; /* 28px */ --r-xxl: 2.5rem; /* 40px */ --r-pill: 50rem; --bs-border-radius-xs: var(--r-xs); --bs-border-radius-sm: var(--r-sm); --bs-border-radius: var(--r-md); --bs-border-radius-lg: var(--r-lg); --bs-border-radius-pill: var(--r-pill); /* ============================================================ SHADOWS — DO NOT USE. Reference only; use a 1px border instead. ============================================================ */ --shadow-xs: 0 0.0625rem 0.375rem 0 rgba(47,43,61,0.10); --shadow-sm: 0 0.125rem 0.5rem 0 rgba(47,43,61,0.12); --shadow: 0 0.1875rem 0.75rem 0 rgba(47,43,61,0.14); --shadow-lg: 0 0.25rem 1.125rem 0 rgba(47,43,61,0.16); --shadow-xl: 0 0.3125rem 1.875rem 0 rgba(47,43,61,0.18); /* ============================================================ MOTION ============================================================ */ --transition: all 0.2s ease-in-out; --transition-fast: all 0.15s ease; --transition-menu: 0.3s ease; /* ============================================================ APP-SPECIFIC LAYOUT TOKENS (the old stylesheet repeated 256px in two places and had no z-scale) ============================================================ */ --sidebar-w: 260px; --sidebar-w-drawer: 280px; --navbar-h: 56px; --page-max: 1440px; --page-gutter: 24px; /* Kept below Bootstrap's modal (1055) / offcanvas (1045) tiers. */ --z-backdrop: 1035; --z-sidebar: 1040; --z-burger: 1030; --z-pop: 40; } /* ============================================================================ DARK MODE — exact values from the design system's core [data-bs-theme=dark] ============================================================================ */ [data-bs-theme="dark"], [data-theme="dark"] { --bs-body-bg: #090a0d; --bs-body-color: #acabc1; --bs-body-color-rgb: 172, 171, 193; --bs-paper-bg: #0f1115; --bs-card-bg: #0f1115; --bs-tertiary-bg: #1d2127; --bs-border-color: #1d2127; --bs-heading-color: #cfcde4; --bs-base-color: #e1def5; --bs-gold: #b39363; /* The light-mode text colours are near-black on a near-black surface — dark mode needs the tints, not the shades. */ --gold-text: #cfa877; --danger-text: #ff9b97; --success-text: #6fdca0; --info-text: #62d8e6; --warning-text: #e0bc5e; --bs-menu-bg: #0f1115; --bs-menu-color: #cfcde4; --bs-gray-25: #272a3a; --bs-gray-50: #2e3142; --bs-gray-75: #34384a; --bs-gray-100: #3d4154; --bs-gray-200: #1d2127; --bs-gray-300: #64667d; --bs-gray-400: #76778e; --bs-gray-500: #9293ae; --bs-gray-600: #9a9ab0; --bs-gray-700: #acabc1; --bs-gray-800: #bdbcd3; --bs-gray-900: #cfcde4; } /* ============================================================================ BASE ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* The canvas colour, on the root rather than only on body. Every sheet in this project painted body and left transparent, which is fine once everything has loaded — the body background propagates to the canvas — but it means nothing paints the page until the LAST render-blocking stylesheet is parsed. Declaring it here, in the first of the project's own sheets, paints it as soon as the tokens exist. The pre-paint script in the two base templates covers the window before even this file arrives. */ html { background: var(--bs-body-bg); } body { font-family: var(--bs-body-font-family); font-size: var(--fs-base); font-weight: var(--fw-normal); line-height: var(--lh-base); color: var(--bs-body-color); background: var(--bs-body-bg); text-align: start; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .headline { font-family: var(--bs-body-font-family); color: var(--bs-heading-color); font-weight: var(--fw-bold); } /* Bootstrap's reboot ships `a { text-decoration: underline }`, so every link that is not explicitly a control - inside an alert, a table cell, a help line - came out underlined, and the underline reappeared on click as focus took hold. A link here is identified by the primary colour, a hover recolour and a real :focus-visible outline; the rule is stated once at the element level rather than switched off control by control. */ a { color: var(--bs-primary); text-decoration: none; } a:hover, a:focus { color: var(--haram-primary-light); } /* `.arabic` marks Arabic content (student names, dates). The design system is single-font, so this no longer swaps typeface — it only pins direction, and stays in the markup as the semantic hook the templates already use. */ .arabic { direction: rtl; } /* An EMPTY field follows the PAGE; a filled one follows its CONTENT. Two fields on the generate form pin their direction because their VALUE demands it: the student name is `.arabic` (rtl — the field takes Arabic script only) and the email is `dir="ltr"` (an address is always ltr). Correct for the value, wrong for the placeholder, which is UI text in the page's own language. So each one broke in the opposite language: on the English page "Student Name" sat hard against the right edge while its label sat left, and on the Arabic page the email placeholder sat against the left edge while its label sat right — a placeholder mirrored away from its own label in both directions. `:placeholder-shown` matches only while the field is empty and stops the moment a character is typed, so the pinned direction returns for the value itself. Typing an Arabic name still lays out rtl; typing an address still lays out ltr. Nothing about entering data changes — this is the empty state only. */ html[dir="ltr"] .arabic:placeholder-shown { direction: ltr; } html[dir="rtl"] input[dir="ltr"]:placeholder-shown { direction: rtl; } /* ============================================================================ SEMANTIC HELPER CLASSES ============================================================================ */ .text-heading { color: var(--bs-heading-color); } .text-primary { color: var(--bs-primary) !important; } .text-gold { color: var(--gold-text) !important; } .haram-h1 { font-size: var(--h1); font-weight: var(--fw-extrabold); line-height: 1.18; color: var(--bs-heading-color); } .haram-h2 { font-size: var(--h2); font-weight: var(--fw-bold); line-height: 1.2; color: var(--bs-heading-color); } .haram-h3 { font-size: var(--h3); font-weight: var(--fw-bold); line-height: 1.2; color: var(--bs-heading-color); } .haram-h4 { font-size: var(--h4); font-weight: var(--fw-bold); line-height: 1.25; color: var(--bs-heading-color); } .haram-h5 { font-size: var(--h5); font-weight: var(--fw-bold); line-height: 1.3; color: var(--bs-heading-color); } .haram-h6 { font-size: var(--h6); font-weight: var(--fw-bold); line-height: 1.35; color: var(--bs-heading-color); } .haram-body { font-size: var(--fs-base); color: var(--bs-body-color); line-height: var(--lh-base); } .haram-small { font-size: var(--fs-sm); color: var(--bs-secondary-color); } .haram-caption { font-size: var(--fs-xs); color: var(--bs-secondary-color); } /* The `hidden` attribute must win over any class that sets `display`, so JS can toggle visibility with `el.hidden = true` instead of writing inline styles. (The UA default `[hidden]{display:none}` loses that fight.) */ [hidden] { display: none !important; } /* Screen-reader-only. */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }