feat(design): deliver 3 mature editorial UI directions with high-fidelity prototypes and design review

This commit is contained in:
wmj
2026-10-10 13:41:20 +08:00
commit a17eac6ed7
4 changed files with 2650 additions and 0 deletions
@@ -0,0 +1,622 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Direction 2: Al-Qalam Review — Iqra Editorial Design System</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Eczar:wght@400;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* === AL-QALAM REVIEW: THE INTELLECTUAL JOURNAL DESIGN TOKENS === */
:root {
--qalam-ivory: #FBFBFA; /* Pure unhurried book stock ivory */
--qalam-surface: #FFFFFF; /* Crisp paper white */
--qalam-ink: #1B1E21; /* Deep carbon black */
--qalam-ink-subtle: #4D5156; /* Subtle charcoal reading ink */
--qalam-ink-muted: #7A8086; /* Archival date and issue caption */
--qalam-green: #185A37; /* Andalusian deep olive-forest green */
--qalam-ochre: #8D5B28; /* Tuscan parchment ochre / leather */
--qalam-hairline: #E8E6DE; /* Whispering book divider */
--qalam-hairline-dark: #D4D0C5;
--font-display: 'Cormorant Garamond', Garamond, serif;
--font-body: 'Eczar', Georgia, serif;
--font-ui: 'Inter', -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--qalam-ivory);
color: var(--qalam-ink-subtle);
font-family: var(--font-display);
font-size: 19px;
line-height: 1.68;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--qalam-green); }
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
}
/* === 1. SCHOLARLY ISSUE BAR === */
.issue-bar {
border-bottom: 1px solid var(--qalam-hairline);
padding: 12px 0;
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--qalam-ink-muted);
}
.issue-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.issue-tag {
color: var(--qalam-green);
font-weight: 600;
}
/* === 2. CEREBRAL MASTHEAD === */
.masthead {
text-align: center;
padding: 56px 0 32px;
border-bottom: 1px solid var(--qalam-hairline-dark);
}
.masthead-ornament {
font-size: 18px;
color: var(--qalam-ochre);
letter-spacing: 0.3em;
margin-bottom: 14px;
display: block;
}
.masthead-title {
font-family: var(--font-display);
font-size: 72px;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--qalam-ink);
line-height: 1;
margin-bottom: 14px;
}
.masthead-subtitle {
font-family: var(--font-display);
font-style: italic;
font-size: 20px;
color: var(--qalam-ink-subtle);
margin-bottom: 28px;
}
.masthead-nav {
border-top: 1px solid var(--qalam-hairline);
padding-top: 14px;
}
.masthead-menu {
list-style: none;
display: flex;
justify-content: center;
gap: 32px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.masthead-menu a:hover {
color: var(--qalam-green);
}
/* === 3. LEAD MONOGRAPH SECTION (DEEP INTELLECTUAL DIGNITY) === */
.lead-monograph {
padding: 56px 0 48px;
border-bottom: 1px solid var(--qalam-hairline-dark);
}
.monograph-grid {
display: grid;
grid-template-columns: 7fr 4fr;
gap: 60px;
align-items: start;
}
.monograph-kicker {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--qalam-green);
margin-bottom: 16px;
display: block;
}
.monograph-headline {
font-family: var(--font-display);
font-size: 52px;
font-weight: 600;
line-height: 1.14;
color: var(--qalam-ink);
letter-spacing: -0.01em;
margin-bottom: 24px;
}
.monograph-pullquote {
border-left: 2px solid var(--qalam-ochre);
padding-left: 22px;
font-family: var(--font-display);
font-style: italic;
font-size: 23px;
line-height: 1.45;
color: #2D3136;
margin-bottom: 28px;
}
.monograph-excerpt {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.7;
color: #383D42;
margin-bottom: 28px;
}
.monograph-author-block {
display: flex;
align-items: center;
gap: 16px;
border-top: 1px solid var(--qalam-hairline);
padding-top: 16px;
}
.monograph-author-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--qalam-hairline-dark);
}
.monograph-author-info {
font-family: var(--font-ui);
font-size: 12px;
}
.monograph-author-name {
font-weight: 700;
color: var(--qalam-ink);
font-size: 14px;
font-family: var(--font-display);
letter-spacing: 0.02em;
}
.monograph-author-role {
color: var(--qalam-ink-muted);
letter-spacing: 0.04em;
}
/* Right Rail: The Quad Dispatch */
.dispatch-rail {
background: #F4F2EC;
padding: 32px 28px;
border: 1px solid var(--qalam-hairline-dark);
}
.dispatch-header {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--qalam-ochre);
border-bottom: 1px solid var(--qalam-hairline-dark);
padding-bottom: 12px;
margin-bottom: 24px;
}
.dispatch-item {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--qalam-hairline);
}
.dispatch-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.dispatch-category {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--qalam-green);
margin-bottom: 4px;
display: block;
}
.dispatch-title {
font-family: var(--font-display);
font-size: 21px;
font-weight: 600;
line-height: 1.25;
color: var(--qalam-ink);
margin-bottom: 8px;
}
.dispatch-meta {
font-family: var(--font-ui);
font-size: 10.5px;
color: var(--qalam-ink-muted);
}
/* === 4. QUAD TRIPTYCH (4-COLUMN INTELLECTUAL MATRIX) === */
.triptych-section {
padding: 56px 0;
border-bottom: 1px solid var(--qalam-hairline-dark);
}
.section-title {
text-align: center;
font-family: var(--font-display);
font-size: 36px;
font-weight: 500;
color: var(--qalam-ink);
margin-bottom: 8px;
}
.section-desc {
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
color: var(--qalam-ink-muted);
margin-bottom: 40px;
}
.triptych-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.triptych-column {
display: flex;
flex-direction: column;
border-right: 1px solid var(--qalam-hairline);
padding-right: 24px;
}
.triptych-column:last-child {
border-right: none;
padding-right: 0;
}
.triptych-column-header {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--qalam-green);
border-bottom: 2px solid var(--qalam-green);
padding-bottom: 8px;
margin-bottom: 20px;
}
.triptych-essay-card {
margin-bottom: 28px;
}
.triptych-essay-title {
font-family: var(--font-display);
font-size: 21px;
font-weight: 600;
line-height: 1.3;
color: var(--qalam-ink);
margin-bottom: 10px;
}
.triptych-essay-excerpt {
font-family: var(--font-display);
font-size: 15.5px;
line-height: 1.55;
color: #555;
margin-bottom: 12px;
}
.triptych-byline {
font-family: var(--font-ui);
font-size: 10.5px;
color: var(--qalam-ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* === 5. THE FELLOWSHIPS OF DARUL FALAH (SCHOLARLY PERSONAS) === */
.fellows-scholarly {
padding: 56px 0;
border-bottom: 1px solid var(--qalam-hairline-dark);
background: #F8F7F2;
margin: 0 -32px;
padding-left: 32px;
padding-right: 32px;
}
.scholarly-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.scholarly-card {
background: #FFFFFF;
border: 1px solid var(--qalam-hairline-dark);
padding: 28px;
display: flex;
flex-direction: column;
}
.scholarly-avatar-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.scholarly-avatar {
width: 64px;
height: 64px;
border-radius: 4px;
object-fit: cover;
border: 1px solid var(--qalam-hairline);
}
.scholarly-name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--qalam-ink);
line-height: 1.2;
}
.scholarly-chair {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--qalam-ochre);
}
.scholarly-bio {
font-family: var(--font-display);
font-size: 16px;
line-height: 1.6;
color: #444;
margin-bottom: 20px;
}
.scholarly-latest {
font-family: var(--font-ui);
font-size: 11px;
border-top: 1px solid var(--qalam-hairline);
padding-top: 12px;
margin-top: auto;
color: var(--qalam-green);
font-weight: 600;
}
/* FOOTER */
.qalam-footer {
padding: 64px 0 40px;
text-align: center;
font-family: var(--font-ui);
font-size: 11.5px;
color: var(--qalam-ink-muted);
letter-spacing: 0.08em;
}
.footer-crest {
font-size: 24px;
color: var(--qalam-ochre);
margin-bottom: 16px;
}
.footer-statement {
font-family: var(--font-display);
font-size: 18px;
font-style: italic;
color: var(--qalam-ink);
max-width: 600px;
margin: 0 auto 24px;
line-height: 1.5;
}
</style>
</head>
<body>
<!-- 1. SCHOLARLY ISSUE BAR -->
<div class="issue-bar">
<div class="container issue-inner">
<span>Volume IV &middot; Autumn 2026 Issue</span>
<span class="issue-tag">An Independent Review of Islamic Thought & Statecraft</span>
<span>Published at Kuala Lumpur & London</span>
</div>
</div>
<!-- 2. CEREBRAL MASTHEAD -->
<header class="masthead">
<div class="container">
<span class="masthead-ornament">&mdash; &#10022; &mdash;</span>
<h1 class="masthead-title">AL-QALAM REVIEW</h1>
<p class="masthead-subtitle">The Journal of Classical Wisdom, Sovereign Fiqh & Contemplative Science</p>
<nav class="masthead-nav">
<ul class="masthead-menu">
<li><a href="#">The Monograph</a></li>
<li><a href="#">Wealth & Succession</a></li>
<li><a href="#">Tibb & Shifa</a></li>
<li><a href="#">Geopolitical Corridors</a></li>
<li><a href="#">Classical Polymath</a></li>
<li><a href="#">Endowment Archives</a></li>
</ul>
</nav>
</div>
</header>
<!-- 3. LEAD MONOGRAPH SECTION -->
<main class="container">
<section class="lead-monograph">
<div class="monograph-grid">
<!-- Left: Grand Essay -->
<article>
<span class="monograph-kicker">Lead Monograph &middot; Autumn 2026</span>
<h2 class="monograph-headline">
<a href="#">The Architecture of Tazkiyah: Diagnosing and Curing the Diseases of the Heart in the Age of Synthetic Noise</a>
</h2>
<blockquote class="monograph-pullquote">
&ldquo;The heart is the sovereign king; the faculties and limbs are but its mobilized garrison. If the sovereign is corrupted by heedlessness, the entire state slips into ruin.&rdquo;
</blockquote>
<p class="monograph-excerpt">
Imam al-Ghazali opens the third quadrant of the Ihya Ulum al-Din with an anatomy of internal crisis that reads with striking diagnostic accuracy today. In this monograph, we examine how the classical science of Fiqh an-Nafs offers a systematic epistemological defense against ambient sensory exhaustion, modern anxiety pathologies, and the erosion of contemplative will.
</p>
<div class="monograph-author-block">
<img src="https://iqra.falahos.my/content/images/authors/hakim-zainur.png" class="monograph-author-avatar" alt="Dr. Hakim Zainur">
<div class="monograph-author-info">
<div class="monograph-author-name">Dr. Hakim Zainur Rahman</div>
<div class="monograph-author-role">Chair of Integrative Tibb & Fiqh an-Nafs Studies</div>
</div>
</div>
</article>
<!-- Right: The Dispatch Rail -->
<aside class="dispatch-rail">
<div class="dispatch-header">The Dispatch Rail</div>
<div class="dispatch-item">
<span class="dispatch-category">Juridical Estate</span>
<h3 class="dispatch-title">
<a href="#">On the Perpetuity of Waqf Ahli in Cross-Border Jurisdictions</a>
</h3>
<div class="dispatch-meta">Dr. Tariq Al-Amiri &middot; 14 min read</div>
</div>
<div class="dispatch-item">
<span class="dispatch-category">Sovereign Philosophy</span>
<h3 class="dispatch-title">
<a href="#">Ibn Khaldun on Asabiyyah and the Longevity of Dynastic Capital</a>
</h3>
<div class="dispatch-meta">Maryam Al-Andalusi &middot; 18 min read</div>
</div>
<div class="dispatch-item">
<span class="dispatch-category">Trade & Sea Rails</span>
<h3 class="dispatch-title">
<a href="#">The Indian Ocean Rim: Reconstructing Historical Muslim Trade Networks</a>
</h3>
<div class="dispatch-meta">Farhan Idris &middot; 12 min read</div>
</div>
</aside>
</div>
</section>
<!-- 4. QUAD TRIPTYCH (4-COLUMN INTELLECTUAL MATRIX) -->
<section class="triptych-section">
<h2 class="section-title">The Four Intellectual Pillars</h2>
<p class="section-desc">Rigorous inquiry across jurisprudence, contemplative health, statecraft, and historiography</p>
<div class="triptych-grid">
<!-- Pillar 1 -->
<div class="triptych-column">
<div class="triptych-column-header">I. Fiqh & Succession</div>
<article class="triptych-essay-card">
<h3 class="triptych-essay-title"><a href="#">Faraid as a Systemic Wealth Recirculator</a></h3>
<p class="triptych-essay-excerpt">Why the strict divine quotas prevent dynastic sclerosis and fuel generational venture dynamism.</p>
<span class="triptych-byline">Dr. Tariq Al-Amiri</span>
</article>
<article class="triptych-essay-card">
<h3 class="triptych-essay-title"><a href="#">Tokenised Sukuk and the Rule Against Bay al-Dayn</a></h3>
<p class="triptych-essay-excerpt">Distinguishing true fractional asset ownership from synthetic debt securitization.</p>
<span class="triptych-byline">Darul Falah Desk</span>
</article>
</div>
<!-- Pillar 2 -->
<div class="triptych-column">
<div class="triptych-column-header">II. Shifa & Tibb Nabawi</div>
<article class="triptych-essay-card">
<h3 class="triptych-essay-title"><a href="#">The Chronobiology of the Third Watch</a></h3>
<p class="triptych-essay-excerpt">Vagal stimulation, neurochemical balance, and autonomic nervous system recalibration through Tahajjud.</p>
<span class="triptych-byline">Dr. Hakim Zainur</span>
</article>
<article class="triptych-essay-card">
<h3 class="triptych-essay-title"><a href="#">Sunnah Dietary Protocols & Cellular Longevity</a></h3>
<p class="triptych-essay-excerpt">Evidence-based fasting mechanisms, polyphenols of the olive tree, and metabolic health.</p>
<span class="triptych-byline">The Shifa Desk</span>
</article>
</div>
<!-- Pillar 3 -->
<div class="triptych-column">
<div class="triptych-column-header">III. Statecraft & Corridors</div>
<article class="triptych-essay-card">
<h3 class="triptych-essay-title"><a href="#">The Malacca Dilemma & Islamic Navigational Heritage</a></h3>
<p class="triptych-essay-excerpt">How control of the maritime bottlenecks shaped Nusantara sovereign authority for five centuries.</p>
<span class="triptych-byline">Farhan Idris</span>
</article>
<article class="triptych-essay-card">
<h3 class="triptych-essay-title"><a href="#">The Gold Dinar in Bilateral Clearing</a></h3>
<p class="triptych-essay-excerpt">Practical mechanisms for physical settlement between resource-rich Muslim trading nations.</p>
<span class="triptych-byline">Farhan Idris</span>
</article>
</div>
<!-- Pillar 4 -->
<div class="triptych-column">
<div class="triptych-column-header">IV. Classical Polymath</div>
<article class="triptych-essay-card">
<h3 class="triptych-essay-title"><a href="#">Hang Tuah: Between Royal Fealty and Absolute Adl</a></h3>
<p class="triptych-essay-excerpt">A re-examination of the Hikayat Hang Tuah through the juridical ethics of Al-Ghazali's Nasihat al-Muluk.</p>
<span class="triptych-byline">Maryam Al-Andalusi</span>
</article>
<article class="triptych-essay-card">
<h3 class="triptych-essay-title"><a href="#">Ihya Hamka: Spiritual Renewal in Nusantara</a></h3>
<p class="triptych-essay-excerpt">How Buya Hamka translated classical Baghdad and Nishapur spirituality into the Malay idiom.</p>
<span class="triptych-byline">Maryam Al-Andalusi</span>
</article>
</div>
</div>
</section>
<!-- 5. THE FELLOWSHIPS OF DARUL FALAH -->
<section class="fellows-scholarly">
<h2 class="section-title">The Fellowship of Iqra</h2>
<p class="section-desc">Scholars, jurists, and clinicians leading our research desks</p>
<div class="scholarly-grid">
<div class="scholarly-card">
<div class="scholarly-avatar-row">
<img src="https://iqra.falahos.my/content/images/authors/jauhari-che-wan.png" class="scholarly-avatar" alt="Jauhari Che Wan">
<div>
<h3 class="scholarly-name">Jauhari Che Wan</h3>
<span class="scholarly-chair">Editor-in-Chief & Publisher</span>
</div>
</div>
<p class="scholarly-bio">Writes The Jauhari Column on sovereign technology, civilizational custodianship (istikhlaf), and Nusantara reflections.</p>
<div class="scholarly-latest">The Jauhari Column Archive &rarr;</div>
</div>
<div class="scholarly-card">
<div class="scholarly-avatar-row">
<img src="https://iqra.falahos.my/content/images/authors/tariq-al-amiri.png" class="scholarly-avatar" alt="Dr. Tariq Al-Amiri">
<div>
<h3 class="scholarly-name">Dr. Tariq Al-Amiri</h3>
<span class="scholarly-chair">Senior Estate Jurist</span>
</div>
</div>
<p class="scholarly-bio">Senior Counsel on cross-border inheritance, Waqf Ahli trusts, and family governance across common law and Shariah courts.</p>
<div class="scholarly-latest">Treatises on Succession &rarr;</div>
</div>
<div class="scholarly-card">
<div class="scholarly-avatar-row">
<img src="https://iqra.falahos.my/content/images/authors/maryam-al-andalusi.png" class="scholarly-avatar" alt="Maryam Al-Andalusi">
<div>
<h3 class="scholarly-name">Maryam Al-Andalusi</h3>
<span class="scholarly-chair">Manuscript Fellow</span>
</div>
</div>
<p class="scholarly-bio">Intellectual historian specializing in Andalusian governance treatises, the Muqaddimah of Ibn Khaldun, and classical Malay manuscripts.</p>
<div class="scholarly-latest">Manuscript Monographs &rarr;</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="qalam-footer">
<div class="container">
<div class="footer-crest">&#10087;</div>
<p class="footer-statement">
&ldquo;Read in the name of your Lord who created &mdash; He who taught by the Pen, taught humanity what it knew not.&rdquo;
</p>
<p>&copy; 2026 Al-Qalam Review &middot; Iqra Times &middot; Published by Darul Falah</p>
</div>
</footer>
</body>
</html>