/* v 1781345030394 */ /* ═══════════════════════════════════════════════════════════════════════ Tafsir Center Design System — colors_and_type.css نظام تصميم مركز تفسير للدراسات القرآنية Apple Liquid Glass × Tafsir warm gold identity. Load order: 1) Google Fonts CSS (IBM Plex Sans Arabic + JetBrains Mono) — see README 2) this file All tokens are public. Always reference via var(--token-name) — never hard-code hex/rgba values in product code. ═══════════════════════════════════════════════════════════════════════ */ /* حُذف استيراد JetBrains Mono من CDN — انظر scripts/sync_design.py */ /* ───────────────────────────────────────────────────────────────────────── 0. BRAND FONT — Somar Sans The Tafsir brand's Arabic+Latin sans-serif. Ships with weights 100–900 and italic variants at 300/500. Loaded locally from /fonts/ — no CDN. ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-Thin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-ExtraLight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-MediumItalic.otf")format("opentype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-ExtraBold.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Somar Sans"; src: url("./fonts/SomarSans-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } /* ───────────────────────────────────────────────────────────────────────── Lotus — body / paragraph font (NOT YET PROVIDED) To enable: drop Lotus.ttf/.otf (+ Lotus-Bold) into ./fonts/, then re-add the @font-face blocks below and switch --font-body back to "Lotus". Until then body text uses Somar Sans. @font-face { font-family:"Lotus"; src:url("./fonts/Lotus.ttf") format("truetype"); font-weight:400; font-display:swap; } @font-face { font-family:"Lotus"; src:url("./fonts/Lotus-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; } ───────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────── Qur'anic mushaf font — King Fahd Complex "Uthman Taha Naskh" Source: https://fonts.qurancomplex.gov.sa/nashkh-font/ Drop the downloaded TTF into ./fonts/UthmanicHafs.ttf for it to load. Family name and U+0600-06FF range follow the complex's naming. ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "KFGQPC Uthman Taha Naskh"; src: url("./fonts/UthmanTN_v2-0.ttf") format("truetype"); font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* ───────────────────────────────────────────────────────────────────────── Dax — Latin / English brand font Used for Latin runs via var(--font-latin). Restricted to U+0000-024F so Arabic always renders in Somar Sans even inside mixed text. ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "Dax"; src: url("./fonts/Dax-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20A0-20BF; } @font-face { font-family: "Dax"; src: url("./fonts/Dax-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20A0-20BF; } @font-face { font-family: "Dax"; src: url("./fonts/Dax-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20A0-20BF; } /* ───────────────────────────────────────────────────────────────────────── 1. CORE TOKENS — light theme (default) ───────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand ──────────────────────────────────────────────────────── */ --color-primary: #B79851; /* gold — primary actions, focus, brand */ --color-primary-hover: #A48745; --color-primary-active: #92763C; --color-primary-light: #C8AA63; /* used in dark mode as primary */ --color-primary-soft: rgba(183, 152, 81, 0.12); --color-primary-border: rgba(183, 152, 81, 0.30); --color-primary-shadow: 0 4px 20px rgba(183, 152, 81, 0.18); --color-secondary: #627536; /* warm olive green — brand titles & sparing accent */ --color-secondary-dark: #495826; --color-secondary-soft: rgba(98, 117, 54, 0.12); /* Brand-derived heading color (olive) — use on h1/h2 to tie titles to identity. */ --color-heading: #627536; /* ── Warm surfaces ──────────────────────────────────────────────── */ --color-bg-page: #F7F3ED; /* page background */ --color-bg-header: #F5F2E9; --color-bg-footer: #F5F1E8; --color-bg-surface: #FAF8F4; /* cards */ --color-bg-surface-soft: #F5F2E9; --color-bg-surface-mute: #F2EFE4; /* ── Text ───────────────────────────────────────────────────────── */ --color-text-primary: #000000; --color-text-secondary: #3C3C43; --color-text-muted: #6F6A5F; --color-text-faint: #A59C8D; --color-text-on-primary: #FFFFFF; /* ── Borders / dividers ─────────────────────────────────────────── */ --color-border: #E2D8C8; --color-border-strong: #C8BBAA; --color-divider: #D8CFBF; /* ── Semantic states ────────────────────────────────────────────── */ --color-success: #34C759; /* iOS system green */ --color-success-soft: rgba(52, 199, 89, 0.14); --color-danger: #B0443E; --color-danger-soft: rgba(176, 68, 62, 0.12); --color-warning: #B79851; --color-warning-soft: rgba(183, 152, 81, 0.14); --color-info: #3A6B8A; --color-info-soft: rgba(58, 107, 138, 0.12); --color-focus-ring: rgba(183, 152, 81, 0.35); /* ───────────────────────────────────────────────────────────────── 2. LIQUID GLASS — adapts to its background, like Apple's material ───────────────────────────────────────────────────────────────── */ --glass-heavy: rgba(250, 248, 244, 0.92); /* modal, full panels */ --glass-warm: rgba(250, 248, 244, 0.82); /* header, popover ★ */ --glass-medium: rgba(250, 248, 244, 0.72); /* card, dropdown */ --glass-light: rgba(250, 248, 244, 0.62); /* tooltip, badge */ --glass-border-strong: rgba(226, 216, 200, 0.80); --glass-border-warm: rgba(226, 216, 200, 0.60); --glass-border-soft: rgba(226, 216, 200, 0.40); --glass-blur-heavy: blur(40px) saturate(1.4); /* @kind other */ --glass-blur-warm: blur(24px) saturate(1.2); /* @kind other */ --glass-blur-medium: blur(16px) saturate(1.15); /* @kind other */ --glass-blur-light: blur(10px) saturate(1.1); /* @kind other */ --glass-shadow-modal: 0 24px 64px rgba(31, 31, 31, 0.14), 0 0 0 1px rgba(226, 216, 200, 0.30); --glass-shadow-card: 0 8px 32px rgba(31, 31, 31, 0.08), 0 0 0 1px rgba(226, 216, 200, 0.40); --glass-shadow-popover: 0 12px 40px rgba(31, 31, 31, 0.12), 0 0 0 1px rgba(226, 216, 200, 0.35); --glass-shadow-tooltip: 0 4px 16px rgba(31, 31, 31, 0.10), 0 0 0 1px rgba(226, 216, 200, 0.30); /* Specular edge — the bright top-left highlight that gives glass volume. Use as `outline: 1px solid var(--glass-specular); outline-offset: -1px`. */ --glass-specular: rgba(255, 250, 240, 0.22); /* ── Apple-style top-light rim ────────────────────────────────── Light from above. Top edge fully lit (100%), bottom edge nearly gone (10%). Apply via the .gloss-rim utility class — it draws this as a 1px hollow border via mask-composite. ──────────────────────────────────────────────────────────── */ --gloss-rim-gradient: linear-gradient(to bottom, rgba(255,255,255,1.00) 0%, rgba(255,255,255,.90) 18%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.35) 65%, rgba(255,255,255,.45) 85%, rgba(255,255,255,.55) 100%); /* @kind other */ /* Apple-float shadow — four layers, low alpha, negative spread. The element appears to hover; sides stay clean, only bottom reads as shadow. */ --float-shadow: 0 2px 4px -1px rgba(31,28,22,.020), 0 8px 16px -6px rgba(31,28,22,.022), 0 22px 36px -16px rgba(31,28,22,.024), 0 48px 80px -32px rgba(31,28,22,.028); /* ───────────────────────────────────────────────────────────────── 3. ELEVATION (non-glass shadows — restrained, for layering only) ───────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(31, 31, 31, 0.04); --shadow-sm: 0 2px 8px rgba(31, 31, 31, 0.05); --shadow-md: 0 4px 16px rgba(31, 31, 31, 0.07); --shadow-lg: 0 8px 32px rgba(31, 31, 31, 0.09); --shadow-xl: 0 16px 48px rgba(31, 31, 31, 0.10); --shadow-gold: 0 4px 20px rgba(183, 152, 81, 0.18); /* ───────────────────────────────────────────────────────────────── 4. RADII ───────────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-button:14px; --radius-input: 12px; --radius-card: 22px; --radius-panel: 28px; --radius-full: 9999px; /* ───────────────────────────────────────────────────────────────── 5. SPACING — 4-pt base scale ───────────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; /* ───────────────────────────────────────────────────────────────── 6. MOTION ───────────────────────────────────────────────────────────────── */ --dur-instant: 80ms; /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-med: 300ms; /* @kind other */ --dur-slow: 400ms; /* @kind other */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ --ease-enter: cubic-bezier(0.0, 0, 0.2, 1); /* @kind other */ --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* ───────────────────────────────────────────────────────────────── 7. Z-INDEX ───────────────────────────────────────────────────────────────── */ --z-below: -1; /* @kind other */ --z-base: 0; /* @kind other */ --z-raised: 10; /* @kind other */ --z-dropdown:100; /* @kind other */ --z-sticky: 200; /* @kind other */ --z-header: 300; /* @kind other */ --z-overlay: 400; /* @kind other */ --z-modal: 500; /* @kind other */ --z-toast: 600; /* @kind other */ --z-tooltip: 700; /* @kind other */ /* ───────────────────────────────────────────────────────────────── 8. BREAKPOINTS (referenced in JS / container queries) ───────────────────────────────────────────────────────────────── */ --bp-xs: 375px; --bp-sm: 430px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl:1440px; /* ───────────────────────────────────────────────────────────────── 9. TYPOGRAPHY — base ───────────────────────────────────────────────────────────────── */ /* Brand Arabic + Latin: Somar Sans for chrome / labels / buttons. Body copy & paragraphs use Lotus (a softer reading face). */ --font-arabic: "Somar Sans", "Segoe UI", "Helvetica Neue", system-ui, sans-serif; --font-body: "Somar Sans", "Segoe UI", system-ui, sans-serif; /* swap to "Lotus" once the font is added to ./fonts/ */ --font-latin: "Dax", "Somar Sans", "IBM Plex Sans", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; /* Qur'anic mushaf — set responsibly: only inside .quran / .verse blocks. */ --font-quran: "KFGQPC Uthman Taha Naskh", "Amiri Quran", "Scheherazade New", "Traditional Arabic", serif; /* Type scale (Arabic-first; line-heights err generous for Arabic shaping). */ --type-hero-size: 72px; --type-hero-lh: 1.10; --type-hero-track: -0.02em; --type-h1-size: 44px; --type-h1-lh: 1.20; --type-h1-track: -0.01em; --type-h2-size: 32px; --type-h2-lh: 1.25; --type-h3-size: 24px; --type-h3-lh: 1.30; --type-h4-size: 20px; --type-h4-lh: 1.35; --type-body-lg-size:17px; --type-body-lg-lh:1.75; --type-body-size: 15px; --type-body-lh: 1.70; --type-body-sm-size:13px; --type-body-sm-lh:1.65; --type-caption-size:12px; --type-caption-lh:1.55; --type-label-size: 11px; --type-label-lh: 1.40; --type-label-track: 0.08em; /* Weights — never use 800/900; brand stays restrained. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; } /* ───────────────────────────────────────────────────────────────────────── 10. DARK THEME — warmth preserved; never pure black, never deep green ───────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --color-primary: #C8AA63; --color-primary-hover: #D4B670; --color-primary-active: #A48745; --color-primary-soft: rgba(200, 170, 99, 0.14); --color-primary-border: rgba(200, 170, 99, 0.32); /* زيتونيٌّ أفتحُ للوضع الداكن. و‏#82915B قبله كان يسقط في أربعة مواضعَ لا في موضع، مقيسةً على أسطح الوضع الداكن كلِّها: الصفحة ‏5.30 (تمرّ)، والبطاقة ‏4.82 (تمرّ)، والناعمة ‏4.47، والكاتمة ‏4.18، **ونصُّ الوسم على تعبئته الزيتونية ‏3.45** — وهو أسوأُها وأكثرُها ورودًا (‏٩٨ وسمًا). وهذا يعطي أدناها ‏4.90، وأعلاها ‏8.11. */ --color-secondary: #8FBA6E; --color-secondary-soft: rgba(143, 186, 110, 0.14); --color-bg-page: #171613; --color-bg-header: #1D1B17; --color-bg-footer: #1B1915; --color-bg-surface: #211F1A; --color-bg-surface-soft: #28251F; --color-bg-surface-mute: #2E2A23; --color-text-primary: #F5F1E8; --color-text-secondary: #D8CFBF; --color-text-muted: #B8AE9E; --color-text-faint: #7D7468; --color-text-on-primary: #1A1714; --color-border: #3A342B; --color-border-strong: #4A4236; --color-divider: #2E2A23; --color-focus-ring: rgba(200, 170, 99, 0.40); --glass-heavy: rgba(33, 31, 26, 0.92); --glass-warm: rgba(33, 31, 26, 0.82); --glass-medium: rgba(33, 31, 26, 0.72); --glass-light: rgba(33, 31, 26, 0.62); --glass-border-strong: rgba(58, 52, 43, 0.80); --glass-border-warm: rgba(58, 52, 43, 0.60); --glass-border-soft: rgba(58, 52, 43, 0.40); --glass-specular: rgba(255, 240, 210, 0.10); } /* ───────────────────────────────────────────────────────────────────────── 11. SEMANTIC TYPOGRAPHY CLASSES — what you actually write in product code Apply to elements. Pair `.t-body` etc. with .ar / .en when mixing scripts. ───────────────────────────────────────────────────────────────────────── */ html { font-family: var(--font-arabic); color: var(--color-text-primary); } .t-hero { font-family: var(--font-arabic); font-size: var(--type-hero-size); line-height: var(--type-hero-lh); letter-spacing: var(--type-hero-track); font-weight: var(--weight-bold); color: var(--color-heading); } .t-h1 { font-family: var(--font-arabic); font-size: var(--type-h1-size); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-track); font-weight: var(--weight-bold); color: var(--color-heading); } .t-h2 { font-family: var(--font-arabic); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); font-weight: var(--weight-semibold); color: var(--color-heading); } .t-h3 { font-family: var(--font-arabic); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); font-weight: var(--weight-semibold); } .t-h4 { font-family: var(--font-arabic); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); font-weight: var(--weight-semibold); } .t-body-lg { font-family: var(--font-body); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); color: var(--color-text-secondary); } .t-body { font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--color-text-secondary); } .t-body-sm { font-family: var(--font-body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--color-text-muted); } .t-caption { font-family: var(--font-arabic); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--color-text-muted); } .t-label { font-family: var(--font-arabic); font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-track); text-transform: uppercase; font-weight: var(--weight-bold); color: var(--color-primary-active); } .t-mono { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); } .t-quran { font-family: var(--font-quran); font-size: 26px; line-height: 2.2; color: var(--color-text-primary); direction: rtl; } /* ───────────────────────────────────────────────────────────────────────── 12. ACCESSIBILITY ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ───────────────────────────────────────────────────────────────────────── 13. .gloss-rim — Apple-style top-light edge Apply to any rounded surface. Draws a 1px hollow border whose alpha fades top→bottom (white 100% → 10%), matching Apple's recipe for Liquid-Glass and visionOS chrome (light source from above). The element must have a border-radius and `position: relative`. ───────────────────────────────────────────────────────────────────────── */ .gloss-rim { position: relative; isolation: isolate; } .gloss-rim::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gloss-rim-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } .gloss-rim > * { position: relative; } /* Companion: Apple-float shadow shortcut. Pair with .gloss-rim on any surface that should appear to hover (cards, modals, popovers). */ .float { box-shadow: var(--float-shadow); } :focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 4px; }