/**
* Iqra Online — Design Tokens v3
* Source of truth for all colours, typography, spacing, and layout.
* All component CSS must reference these variables — never hardcode values.
*
* Brand origin: logo navy badge (#1E3A5F), umber rihal (#7A3B1E),
* gold ring (#B8922A), cream circle (#EDE8DC), near-black type (#1C1A17)
*/
/* ============================================================
GOOGLE FONTS
Load in before any stylesheet.
============================================================ */
/*
*/
:root {
/* ==========================================================
FONT FAMILIES
========================================================== */
--font-display: 'Playfair Display', Georgia, serif;
--font-serif: 'Source Serif 4', Georgia, serif;
--font-ui: 'Inter', system-ui, -apple-system, sans-serif;
--font-arabic: 'Noto Naskh Arabic', serif;
/* ==========================================================
BRAND PALETTE — raw stops
Reference semantic tokens in components, not these directly.
========================================================== */
/* Navy — from logo badge border */
--navy-50: #EDF1F7;
--navy-100: #C8D5E8;
--navy-200: #94AECF; /* hadith source text on navy bg */
--navy-400: #4A74A8;
--navy-600: #1E3A5F; /* BASE — logo colour */
--navy-800: #0D1B2A; /* pill text — 11.4:1 on navy-50 ✓ AAA */
--navy-900: #070E17;
/* Umber — from logo rihal/stand */
--umber-50: #F5EDE8;
--umber-100: #E8D0C3;
--umber-200: #CFA48E;
--umber-400: #A3613D;
--umber-600: #7A3B1E; /* BASE — logo colour, primary CTA */
--umber-800: #4E2512; /* text on umber-50 bg — 8.9:1 ✓ AAA */
--umber-900: #2E1509;
/* Gold — from logo ring. Decorative only — never text on white */
--gold-50: #FBF5E6;
--gold-100: #F0D99A;
--gold-200: #D9B85A;
--gold-400: #B8922A; /* BASE — SVG rule stroke, active nav indicator */
--gold-600: #8C6D1A; /* min AA text (5.4:1 on white) — use sparingly */
--gold-800: #5C4610; /* AAA on navy bg (7.1:1 on #1E3A5F) */
/* Neutral / Paper — from logo cream circle */
--neutral-0: #FFFFFF; /* pure white — nav, surface cards */
--neutral-50: #F8F7F4; /* page background */
--neutral-100: #EEEAE3; /* alternate section bg (v3 darkened from #F0EDE8) */
--neutral-200: #DDD9D2; /* border-light (v3 darkened from #E4E0D9) */
--neutral-300: #C0BCB5; /* border-medium */
--neutral-400: #8A8480; /* tertiary text — 4.6:1 on page bg ✓ AA */
--neutral-600: #4A4743; /* secondary text — 8.1:1 on page bg ✓ AAA (v3: was #6B6560, 5.8:1) */
--neutral-800: #2A2825; /* body text — 14.2:1 on page bg ✓ AAA (v3: was #2E2C28) */
--neutral-900: #1C1A17; /* primary text — 17.2:1 on page bg ✓ AAA */
/* Forest Green — courses only. Not from logo. */
--green-50: #E8F0ED; /* course card tint */
--green-100: #C0D9CE;
--green-600: #2C4A3E; /* BASE — 8.1:1 on white ✓ AAA */
--green-800: #1A2E26; /* text on green-50 — 9.3:1 ✓ AAA */
/* Semantic system states */
--semantic-success: #2D6A4F;
--semantic-success-light: #D8EDE4;
--semantic-warning: #92600A;
--semantic-warning-light: #FEF3D7;
--semantic-error: #9B1C1C;
--semantic-error-light: #FDE8E8;
/* ==========================================================
SEMANTIC COLOUR TOKENS
These are what components use. Always reference these.
========================================================== */
/* Backgrounds */
--color-bg-page: var(--neutral-50); /* #F8F7F4 */
--color-bg-surface: var(--neutral-0); /* #FFFFFF */
--color-bg-subtle: var(--neutral-100); /* #EEEAE3 — essays, authors, newsletter */
--color-bg-inverse: #1C1A17; /* footer */
--color-bg-navy: var(--navy-600); /* #1E3A5F — hadith section */
/* Text */
--color-text-primary: var(--neutral-900); /* #1C1A17 — 17.2:1 ✓ AAA */
--color-text-body: var(--color-text-primary); /* body copy — same as headings black */
--color-text-secondary: var(--neutral-600); /* #4A4743 — 8.1:1 ✓ AAA */
--color-text-tertiary: var(--neutral-400); /* #8A8480 — 4.6:1 ✓ AA */
--color-text-inverse: var(--neutral-50); /* #F8F7F4 — on dark bg */
--color-text-on-navy: #FFFFFF; /* on navy section bg — 8.6:1 ✓ AAA */
/* Borders */
--color-border-light: var(--neutral-200); /* #DDD9D2 */
--color-border-medium: var(--neutral-300); /* #C0BCB5 */
/* Accent — umber (CTAs, buttons; not inline links) */
--color-accent: var(--umber-600); /* #7A3B1E */
--color-link: var(--color-text-primary);
--color-link-hover: var(--color-text-secondary);
--color-accent-hover: var(--umber-800); /* #4E2512 */
--color-accent-light: var(--umber-50); /* #F5EDE8 */
--color-accent-text: var(--umber-800); /* #4E2512 — 8.9:1 on accent-light ✓ AAA */
/* Navy — categorical (pills) and interactive (active states) */
--color-navy: var(--navy-600); /* #1E3A5F */
--color-navy-light: var(--navy-50); /* #EDF1F7 */
--color-navy-text: var(--navy-800); /* #0D1B2A — 11.4:1 on navy-light ✓ AAA */
/* Gold — decorative only */
--color-gold: var(--gold-400); /* #B8922A — SVG rule stroke */
--color-gold-nav: var(--gold-400); /* #B8922A — active nav underline */
/* Courses — action/learning (green) */
--color-courses: var(--green-600); /* #2C4A3E — 8.1:1 on white ✓ AAA */
--color-courses-light: var(--green-50); /* #E8F0ED */
--color-courses-text: var(--green-800); /* #1A2E26 — 9.3:1 on courses-light ✓ AAA */
/* System states */
--color-success: var(--semantic-success);
--color-success-light: var(--semantic-success-light);
--color-warning: var(--semantic-warning);
--color-warning-light: var(--semantic-warning-light);
--color-error: var(--semantic-error);
--color-error-light: var(--semantic-error-light);
/* Footer (inverse surface) */
--color-footer-text: var(--color-text-inverse);
--color-footer-text-hover: rgba(248, 247, 244, 0.8);
--color-footer-text-muted: rgba(248, 247, 244, 0.5);
--color-footer-text-subtle: rgba(248, 247, 244, 0.45);
--color-footer-text-soft: rgba(248, 247, 244, 0.75);
--color-footer-text-faint: rgba(248, 247, 244, 0.3);
--color-footer-text-emphasis: rgba(248, 247, 244, 0.6);
--color-footer-border: rgba(255, 255, 255, 0.08);
--color-footer-border-strong: rgba(248, 247, 244, 0.2);
--color-footer-border-hover: rgba(248, 247, 244, 0.5);
/* Overlays & link underlines */
--color-overlay: rgba(28, 26, 23, 0.45);
--color-link-underline: rgba(26, 24, 21, 0.25);
--color-link-underline-hover: rgba(74, 71, 67, 0.4);
--color-video-play-bg: rgba(255, 255, 255, 0.92);
--color-video-play-shadow: rgba(26, 24, 21, 0.12);
--color-video-duration-bg: rgba(26, 24, 21, 0.72);
/* ==========================================================
TYPOGRAPHY
========================================================== */
/* Scale — 1rem = 16px */
--text-xs: 0.6875rem; /* 11px — timestamps, read-time, pills, footer links */
--text-sm: 0.8125rem; /* 13px — nav links, captions, hero secondary meta */
--text-base: 1rem; /* 16px — body text, essay excerpts */
--text-md: 1.125rem; /* 18px — card headlines, course/media titles */
--text-lg: 1.375rem; /* 22px — hero secondary titles */
--text-xl: 1.75rem; /* 28px — essay item titles, hadith text */
--text-2xl: 2.25rem; /* 36px — featured hero headline */
--text-3xl: 2.75rem; /* 44px — section headings (Latest Essays, etc.) */
/* Weights */
--weight-light: 300; /* Source Serif 4 body, footer tagline */
--weight-regular: 400; /* nav links, body, footer links */
--weight-medium: 500; /* UI labels, eyebrows, dropdown titles, author names */
--weight-display: 600; /* featured headline, section headings, essay titles */
/* Line heights */
--leading-tight: 1.15; /* display headlines (--text-2xl, --text-3xl) */
--leading-snug: 1.35; /* card titles, hero secondary, essay item titles */
--leading-body: 1.75; /* all body/running text */
--leading-loose: 2.0; /* hadith quote only */
/* Letter spacing */
--tracking-tight: -0.02em; /* large display headlines only */
--tracking-normal: 0em;
--tracking-wide: 0.06em; /* ALL CAPS labels — pills, eyebrows, footer headings */
--tracking-widest: 0.14em; /* IQRA ONLINE logotype */
/* ==========================================================
SPACING
8px base unit. All values are multiples.
========================================================== */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
/* ==========================================================
LAYOUT
========================================================== */
--max-width-site: 1200px;
--max-width-text: 720px; /* article body, reading columns */
--max-width-narrow: 560px; /* newsletter, hadith */
--col-gutter: 2rem;
--page-margin: clamp(1.5rem, 5vw, 4rem);
/* Breakpoints — reference in media queries */
/* --bp-sm: 640px --bp-md: 768px --bp-lg: 1024px --bp-xl: 1200px */
/* ==========================================================
BORDER RADIUS
Sharp corners are the default.
========================================================== */
--radius-none: 0px; /* cards, images, section blocks — DEFAULT */
--radius-sm: 3px; /* category pills, status tags */
--radius-md: 4px; /* buttons, inputs, footer social CTAs */
--radius-full: 9999px; /* author avatars only */
}
/* ==========================================================
DARK THEME — semantic token remap
========================================================== */
html {
color-scheme: light dark;
}
html[data-theme="dark"] {
color-scheme: dark;
--color-bg-page: #141210;
--color-bg-surface: #1C1A17;
--color-bg-subtle: #242220;
--color-bg-inverse: #0E0D0B;
--color-bg-navy: var(--navy-900);
--color-text-primary: #F0EDE8;
--color-text-body: #F0EDE8;
--color-text-secondary: #B8B2AA;
--color-text-tertiary: #8A8480;
--color-text-inverse: #F0EDE8;
--color-text-on-navy: #FFFFFF;
--color-border-light: #3A3632;
--color-border-medium: #4A4642;
--color-accent: var(--umber-400);
--color-accent-hover: var(--umber-200);
--color-accent-light: #2E1509;
--color-accent-text: var(--umber-100);
--color-link: #F0EDE8;
--color-link-hover: var(--umber-200);
--color-navy-light: #0D1B2A;
--color-navy-text: #C8D5E8;
--color-courses-light: #1A2E26;
--color-courses-text: #C0D9CE;
--color-footer-text: var(--color-text-inverse);
--color-footer-text-hover: rgba(240, 237, 232, 0.85);
--color-footer-text-muted: rgba(240, 237, 232, 0.55);
--color-footer-text-subtle: rgba(240, 237, 232, 0.45);
--color-footer-text-soft: rgba(240, 237, 232, 0.75);
--color-footer-text-faint: rgba(240, 237, 232, 0.35);
--color-footer-text-emphasis: rgba(240, 237, 232, 0.65);
--color-footer-border: rgba(255, 255, 255, 0.1);
--color-footer-border-strong: rgba(240, 237, 232, 0.22);
--color-footer-border-hover: rgba(240, 237, 232, 0.5);
--color-overlay: rgba(0, 0, 0, 0.6);
--color-link-underline: rgba(240, 237, 232, 0.28);
--color-link-underline-hover: rgba(184, 178, 170, 0.5);
--color-video-play-bg: rgba(28, 26, 23, 0.92);
--color-video-play-shadow: rgba(0, 0, 0, 0.35);
--color-video-duration-bg: rgba(0, 0, 0, 0.78);
}
/* ==========================================================
GLOBAL RESET & BASE
========================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
background-color: var(--color-bg-page);
color: var(--color-text-body);
font-family: var(--font-serif);
font-size: var(--text-base);
font-weight: var(--weight-light);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
/* Container */
.container {
max-width: var(--max-width-site);
margin-inline: auto;
padding-inline: var(--page-margin);
}
/* Skip link */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
background: var(--color-accent);
color: var(--color-text-inverse);
padding: var(--space-2) var(--space-4);
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border-radius: var(--radius-md);
z-index: 9999;
transition: top 200ms ease;
}
.skip-link:focus { top: var(--space-4); }
/* Screen-reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Focus styles — applied globally */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================
SHARED COMPONENTS
Reusable across all sections.
========================================================== */
/* Category pill — navy background */
.pill {
display: inline-flex;
align-items: center;
font-family: var(--font-ui);
font-size: 0.625rem; /* 10px */
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-navy-text); /* #0D1B2A — 11.4:1 on pill bg ✓ AAA */
background: var(--color-navy-light); /* #EDF1F7 */
padding: 3px 9px;
border-radius: var(--radius-sm);
margin-bottom: var(--space-3);
white-space: nowrap;
}
/* Article meta line — author · date · read-time */
.meta {
font-family: var(--font-ui);
font-size: var(--text-xs);
color: var(--color-text-secondary); /* #4A4743 — 8.1:1 ✓ AAA */
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
margin-top: var(--space-2);
}
.meta .sep {
opacity: 0.35;
user-select: none;
}
.meta a {
color: var(--color-link);
transition: color 150ms ease, opacity 150ms ease;
}
.meta a:hover {
color: var(--color-link-hover);
}
/* Section eyebrow — small ALL CAPS label above heading */
.eyebrow {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-text-secondary);
display: block;
margin-bottom: var(--space-3);
}
/* Section heading — commanding 44px */
.section-heading {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: var(--weight-display);
line-height: var(--leading-tight);
color: var(--color-text-primary);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-8);
}
/* Section header — heading + view-all side by side */
.section-header-flex {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--space-8);
}
.section-header-flex .section-heading { margin-bottom: 0; }
/* View all link */
.view-all {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: 0.02em;
color: var(--color-link);
border-bottom: 1px solid currentColor;
white-space: nowrap;
transition: opacity 150ms ease;
}
.view-all:hover {
opacity: 0.55;
}
/* Gold geometric rule — divider between articles */
.rule {
display: block;
height: 2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2'%3E%3Cpath d='M0 1 L3 0 L6 1 L9 0 L12 1' stroke='%23B8922A' stroke-width='0.8' fill='none'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-size: 12px 2px;
border: none;
opacity: 0.55;
margin: var(--space-5) 0;
}
/* Status tags — series status */
.status-tag {
display: inline-block;
font-family: var(--font-ui);
font-size: 0.625rem;
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--radius-sm);
}
.status-tag--ongoing {
background: var(--color-accent-light);
color: var(--color-accent-text); /* 8.9:1 ✓ AAA */
}
.status-tag--complete {
background: var(--color-bg-subtle);
color: var(--color-text-secondary); /* 6.9:1 on subtle bg ✓ AA */
}
.status-tag--new {
background: var(--color-courses-light);
color: var(--color-courses-text); /* 9.3:1 ✓ AAA */
}
/* ==========================================================
ARTICLE BODY (long-form reading)
========================================================== */
.article-body {
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: var(--weight-regular);
line-height: 1.85;
letter-spacing: 0.01em;
max-width: 68ch;
color: var(--color-text-body);
}
.article-body p + p { margin-top: 1.5rem; }
.article-body h2 {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-text-primary);
margin-top: 3rem;
margin-bottom: 0.75rem;
letter-spacing: var(--tracking-tight);
}
.article-body h3 {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: var(--weight-medium);
color: var(--color-text-primary);
margin-top: 2rem;
margin-bottom: 0.5rem;
}
.article-body blockquote {
border-left: 3px solid var(--color-gold);
padding-left: var(--space-5);
margin: var(--space-8) 0;
font-style: italic;
color: var(--color-text-secondary);
}
.article-body a {
color: var(--color-link);
border-bottom: 1px solid var(--color-link-underline);
transition: color 150ms ease, border-color 150ms ease;
}
.article-body a:hover {
color: var(--color-link-hover);
border-bottom-color: var(--color-link-underline-hover);
}
/* Legacy aliases (GeneratePress / older theme CSS) */
:root {
--iqra-font-display: var(--font-display);
--iqra-font-body: var(--font-serif);
--iqra-font-ui: var(--font-ui);
--iqra-color-text: var(--color-text-primary);
--iqra-color-muted: var(--color-text-secondary);
--iqra-color-accent: var(--color-accent);
--iqra-color-accent-hover: var(--color-accent-hover);
--iqra-color-accent-green: var(--color-courses);
--iqra-color-border: var(--color-border-light);
--iqra-color-bg: var(--color-bg-page);
--iqra-color-header-bg: var(--color-bg-surface);
--iqra-color-footer-bg: var(--color-bg-inverse);
--iqra-color-surface: var(--color-bg-surface);
--iqra-measure: var(--max-width-text);
--iqra-measure-wide: var(--max-width-site);
--iqra-gutter: var(--page-margin);
--iqra-line-height: var(--leading-body);
--iqra-line-height-tight: var(--leading-tight);
--iqra-space-section: var(--space-16);
--iqra-space-block: var(--space-6);
--color-highlight-text: var(--color-accent-text);
}
.iqra-container,
.container {
max-width: var(--max-width-site);
margin-inline: auto;
padding-inline: var(--page-margin);
}