/* ========================================================================= Modaker — Design Tokens الجمعية الخيرية لتحفيظ القرآن الكريم بعنيزة This is the single source of truth for Modaker's web visual system. Agents: import this file before writing any component styles. or @import url("/brand-kit-web/tokens.css"); Never hard-code brand colors, fonts, spacing, or radii. Always use the variables defined below so the identity stays consistent across every page, email, or document. ========================================================================= */ :root { /* -------------------------------------------------------------------- 1. COLOR — brand palette The identity is a disciplined 3-color system. Do not introduce new hues. Tints/shades may be used for states (hover, disabled, overlays). Values sampled directly from the official brand PNG assets. -------------------------------------------------------------------- */ /* Core */ --color-ink: #14141F; /* deep near-black navy — primary text & lockup */ --color-bronze: #B2845D; /* warm metallic bronze — accent, highlight */ --color-cream: #F7F5F0; /* warm off-white sand — primary background */ --color-white: #FFFFFF; /* pure white — logo on dark, surfaces over ink */ /* Tints (for hover, dividers, subtle surfaces) */ --color-ink-90: rgba(20, 20, 31, 0.90); --color-ink-70: rgba(20, 20, 31, 0.70); --color-ink-50: rgba(20, 20, 31, 0.50); --color-ink-20: rgba(20, 20, 31, 0.20); --color-ink-10: rgba(20, 20, 31, 0.10); --color-ink-05: rgba(20, 20, 31, 0.05); --color-bronze-90: rgba(178, 132, 93, 0.90); --color-bronze-70: rgba(178, 132, 93, 0.70); --color-bronze-20: rgba(178, 132, 93, 0.20); --color-bronze-10: rgba(178, 132, 93, 0.10); --color-cream-2: #EFEAE0; /* slightly deeper sand — dividers, wells */ --color-cream-3: #E6DFD0; /* deeper still — pressed states */ /* Semantic roles — use these in components */ --bg-page: var(--color-cream); --bg-surface: var(--color-white); --bg-surface-alt: var(--color-cream-2); --bg-inverse: var(--color-ink); --fg-default: var(--color-ink); --fg-muted: var(--color-ink-70); --fg-subtle: var(--color-ink-50); --fg-inverse: var(--color-cream); --fg-accent: var(--color-bronze); --border-default: var(--color-ink-10); --border-strong: var(--color-ink-20); --border-accent: var(--color-bronze); --focus-ring: var(--color-bronze); /* Status colors — chosen to harmonize with bronze/ink (not generic reds/greens) */ --color-success: #4F7A52; --color-warning: #C08A2E; --color-danger: #A13C2C; --color-info: #2E5673; /* -------------------------------------------------------------------- 2. TYPOGRAPHY The brand is Arabic-first (RTL). English may appear as a secondary layer. Use the --font-ar stack for Arabic content and --font-en for Latin. --font-display is reserved for headings / hero text. -------------------------------------------------------------------- */ /* Font stacks — system-safe fallbacks first, then webfont preferences. Recommended webfonts (load from Google Fonts or self-host): Arabic body: "IBM Plex Sans Arabic" or "Tajawal" Arabic display: "Readex Pro" or "Noto Kufi Arabic" Latin body: "Inter" or system-ui */ --font-ar: "IBM Plex Sans Arabic", "Tajawal", "Readex Pro", "Segoe UI Arabic", "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif; --font-ar-display: "Readex Pro", "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif; --font-en: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Default: Arabic body. Override per component for English content. */ --font-body: var(--font-ar); --font-display: var(--font-ar-display); /* Scale — modular 1.200 (minor third), tuned for Arabic legibility */ --text-xs: 0.75rem; /* 12px — captions, footnotes */ --text-sm: 0.875rem; /* 14px — secondary text, labels */ --text-base: 1rem; /* 16px — body copy (minimum for Arabic) */ --text-lg: 1.125rem; /* 18px — lead paragraph */ --text-xl: 1.375rem; /* 22px — small headings */ --text-2xl: 1.75rem; /* 28px — section headings */ --text-3xl: 2.25rem; /* 36px — page headings */ --text-4xl: 3rem; /* 48px — hero display */ --text-5xl: 4rem; /* 64px — marketing hero */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line heights — Arabic text needs taller line-height than Latin */ --lh-tight: 1.25; /* display headings */ --lh-snug: 1.45; /* subheadings */ --lh-normal: 1.7; /* body copy (Arabic-friendly) */ --lh-loose: 1.9; /* long-form reading / Quranic quotations */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* small caps, labels */ /* -------------------------------------------------------------------- 3. SPACING — 4-pt base scale Use these everywhere instead of magic numbers. -------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /*128px */ /* -------------------------------------------------------------------- 4. RADII — soft, not playful Keep corners modest; the brand is serious/charitable, not consumer. -------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 4px; /* inputs, small chips */ --radius-md: 8px; /* buttons, small cards */ --radius-lg: 14px; /* cards, dialogs */ --radius-xl: 22px; /* hero panels */ --radius-pill: 999px; /* pills, circular avatars */ /* -------------------------------------------------------------------- 5. SHADOWS — restrained, warm (tinted by ink, not pure black) -------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(20, 20, 31, 0.06); --shadow-sm: 0 2px 6px rgba(20, 20, 31, 0.08); --shadow-md: 0 6px 18px rgba(20, 20, 31, 0.10); --shadow-lg: 0 14px 38px rgba(20, 20, 31, 0.14); --shadow-xl: 0 26px 60px rgba(20, 20, 31, 0.18); /* -------------------------------------------------------------------- 6. MOTION -------------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1); --ease-emphasized: cubic-bezier(0.3, 0.0, 0.1, 1); --dur-fast: 120ms; --dur-medium: 220ms; --dur-slow: 360ms; /* -------------------------------------------------------------------- 7. LAYOUT -------------------------------------------------------------------- */ --container-xs: 480px; --container-sm: 640px; --container-md: 800px; --container-lg: 1040px; --container-xl: 1240px; --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; /* -------------------------------------------------------------------- 8. BRAND ASSETS Use these to reference assets rather than hard-coding paths. Adjust the base path if you mount the kit at a different URL. -------------------------------------------------------------------- */ --brand-assets: "./assets"; --brand-logo: url("./assets/logos/logo-on-cream.png"); --brand-logo-dark: url("./assets/logos/logo-on-dark.png"); --brand-logo-white: url("./assets/logos/logo-white.png"); --brand-logo-mark: url("./assets/logos/logo-mark.png"); --brand-pattern: url("./assets/pattern/pattern-tile.png"); --brand-pattern-dark: url("./assets/pattern/pattern-tile-dark.png"); --brand-pattern-watermark: url("./assets/pattern/pattern-tile-watermark.png"); } /* ========================================================================= Global baseline — a minimal reset that honors the tokens. Include these rules once at the top of your stylesheet. ========================================================================= */ html { direction: rtl; /* Arabic-first — flip per for English pages */ color-scheme: light; /* primary surface is light/cream */ text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg-page); color: var(--fg-default); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-normal); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* English content inside an Arabic page */ [lang="en"], .is-latin { font-family: var(--font-en); direction: ltr; letter-spacing: var(--tracking-normal); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--fg-default); margin: 0 0 var(--space-4); letter-spacing: var(--tracking-tight); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); font-weight: var(--fw-medium); } h6 { font-size: var(--text-base);font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-muted); } p { margin: 0 0 var(--space-4); } a { color: var(--fg-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--color-ink); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } hr { border: 0; height: 1px; background: var(--border-default); margin: var(--space-6) 0; } ::selection { background: var(--color-bronze-20); color: var(--color-ink); } /* ========================================================================= Utility classes — light, opt-in ========================================================================= */ .container { max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-5); } .container-sm { max-width: var(--container-md); margin-inline: auto; padding-inline: var(--space-5); } .container-lg { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-5); } .surface { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .surface-inverse { background: var(--bg-inverse); color: var(--fg-inverse); } .text-accent { color: var(--fg-accent); } .text-muted { color: var(--fg-muted); } .text-inverse { color: var(--fg-inverse); } .divider-gold { height: 2px; background: var(--color-bronze); width: 64px; border-radius: var(--radius-pill); margin-block: var(--space-4); } /* Backgrounds with the brand pattern — subtle watermark by default */ .bg-pattern { background-image: var(--brand-pattern-watermark); background-size: 400px auto; background-repeat: repeat; } .bg-pattern-strong { background-image: var(--brand-pattern); background-size: 400px auto; background-repeat: repeat; } .bg-pattern-dark { background-image: var(--brand-pattern-dark); background-size: 400px auto; background-repeat: repeat; background-color: var(--color-ink); color: var(--fg-inverse); } /* ========================================================================= Accessibility — prefers-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; } }