feat(design): deliver 3 mature editorial UI directions with high-fidelity prototypes and design review
This commit is contained in:
@@ -0,0 +1,192 @@
|
||||
# Iqra (iqra.falahos.my) — Editorial UI/UX Design Review & Direction Proposals
|
||||
|
||||
**Document ID:** `IQRA-UX-AUDIT-2026-10`
|
||||
**Author:** Principal Editorial UI/UX Design Director
|
||||
**Publication:** Iqra Times (`https://iqra.falahos.my`)
|
||||
**Publisher:** Darul Falah / WMJ
|
||||
**Target Date:** October 2026
|
||||
|
||||
---
|
||||
|
||||
## 1. Executive Summary & Problem Definition
|
||||
|
||||
The user feedback regarding Iqra's current homepage was direct and unambiguous:
|
||||
> *"you need one UI designer, current main page UI looks really ugly and immamture. discuss with your team and come back with a a few UI designs"*
|
||||
|
||||
A thorough architectural and visual audit of `https://iqra.falahos.my` confirmed this diagnosis. Despite high-calibre intellectual contributions spanning Islamic Family Office, Halal Wealth, Integrative Tibb, and Civilizational Philosophy, the website was burdened by:
|
||||
1. **Severe content loop duplication** (the exact same article appearing 4 times consecutively down the page).
|
||||
2. **Clashing chromatic identities** (uncoordinated teals, bright greens, cold grey borders, and harsh white blocks).
|
||||
3. **Immature component styles** (generic SaaS drop-shadows, clashing font combinations, uncurated author blocks).
|
||||
4. **Flattened visual hierarchy** (monographs, 5-minute morning tips, and financial calculations all sharing the same visual weight).
|
||||
|
||||
To resolve this, we have created **three distinct, mature, world-class UI design directions**, accompanied by **fully interactive, high-fidelity browser prototypes** committed directly to this repository.
|
||||
|
||||
---
|
||||
|
||||
## 2. Deep Audit of Current Homepage Flaws
|
||||
|
||||
| Problem Area | Current Observation on Server | Root Cause in Codebase | Consequence to Reader |
|
||||
|---|---|---|---|
|
||||
| **Content Duplication** | The article *"Islamic Morning & Evening Adhkar Digital Planner ($17.99)"* renders consecutively 4 times. | `default.hbs` and `index.hbs` execute un-filtered `{{#foreach posts}}` loops in `ft-hero.hbs`, `ft-fastft-stream.hbs`, `ft-topic-hubs.hbs`, and the default Ghost post feed. | Severe cognitive fatigue; website looks amateurish and abandoned. |
|
||||
| **Color Clash** | Header ticker uses `#007A4D` (emerald), `#0d7680` (teal), `#990f3d` (crimson), with `#e0e0e0` borders on stark `#ffffff`. | Incoherent CSS tokens in `screen.css` mixing raw hex colors without a defined paper-to-ink architectural system. | Feels like a fragmented Bootstrap mockup rather than an elite broadsheet. |
|
||||
| **Typography Dissonance** | Titles jump between `Playfair Display`, `Source Serif 4`, and system sans-serif with loose leading. | Lack of typographic rhythm in CSS tokens; headings rendered with uncalibrated letter-spacing. | Reading experience is jarring and visually noisy. |
|
||||
| **Author Board Styling** | Authors sit in an inline `<style>` card with circular avatars, raw arrows (`1 article →`), and beige panels. | Tacked-on inline CSS in `ft-editorial.hbs` rather than an integrated editorial board layout. | Degrades the dignity of institutional contributors (Dr. Tariq, Dr. Hakim, Maryam). |
|
||||
| **Hierarchy Collapse** | Deep investigative essays on Sukuk rails share the same 3-column card style as micro-posts. | Flat card grid component applied indiscriminately across all tags. | Readers cannot distinguish major investigations from daily briefs. |
|
||||
|
||||
---
|
||||
|
||||
## 3. The Three New Editorial UI Directions
|
||||
|
||||
```
|
||||
+---------------------------------------------------------------------------------------------------+
|
||||
| THE THREE PROPOSED VISUAL PARADIGMS |
|
||||
+------------------------------------+----------------------------------+---------------------------+
|
||||
| 1. THE FALAH GAZETTE & MONOCLE | 2. AL-QALAM REVIEW | 3. SUKUK & SOVEREIGN RAIL |
|
||||
| Financial Times / Monocle Heritage | Foreign Affairs / Atlantic / LRB | Bloomberg / Nikkei / Semafor
|
||||
| Salmon-linen paper, razor hairline | Meditative ivory, book serif, | Executive terminal, dark-accent
|
||||
| borders, dense broadsheet gravitas | generous intellectual whitespace | telemetry, structured breakdown
|
||||
+------------------------------------+----------------------------------+---------------------------+
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Direction 1: "The Falah Gazette" (Financial Times & Monocle Heritage)
|
||||
*The High-Density Intellectual Sovereign Broadsheet*
|
||||
|
||||
* **Prototype File:** [`design-proposals/direction-1-falah-gazette.html`](direction-1-falah-gazette.html)
|
||||
* **Core Philosophy:** Uncompromising editorial gravitas, high information density, razor-sharp hairline borders, and warm tactile paper. Communicates civilizational statecraft, financial rigor, and broadsheet permanence.
|
||||
* **Palette Architecture:**
|
||||
* Paper Ground: `#FFF1E5` (FT warm salmon)
|
||||
* Surface Backplate: `#F6E6D8`
|
||||
* Inset Card: `#FCF5EE`
|
||||
* Carbon Ink: `#111111` / Body Ink: `#242220`
|
||||
* Brand Accent: `#0E4D36` (Imperial Ottoman Spruce Green)
|
||||
* Wax Seal Accent: `#9E2A2B` (Archival Crimson)
|
||||
* Hairline Rules: `1px solid #E4D5C7` and `#C9B8A7`
|
||||
* **Typography Hierarchy:**
|
||||
* Masthead: *Cinzel*, 64px, uppercase, tracking `0.14em` with Arabic calligraphy glyph `« إقرأ »`.
|
||||
* Display Headlines: *Newsreader* / *Source Serif 4*, 40px, leading `1.15`, weight 700.
|
||||
* Eyebrow / Kickers: *Inter*, 11px, weight 700, tracking `0.12em` (`#0E4D36`).
|
||||
* Body Prose: *Newsreader*, 17.5px, line-height `1.55`.
|
||||
* Data Telemetry: *JetBrains Mono*, 10.5px.
|
||||
* **Homepage Wireframe Structure:**
|
||||
1. *Live Suq Ticker:* 28 Rabi' al-Awwal 1448 | Gold Nisab (RM 32,450 / 85g) | Silver Nisab | Sukuk 5Y Yield.
|
||||
2. *Double-Bordered Centered Masthead:* Formal subtitle and bullet-separated navigation rail.
|
||||
3. *Lead Asymmetric Trio:*
|
||||
- Col 1 (55%): Major Investigation with 16:9 photography, lead excerpt, and dateline.
|
||||
- Col 2 (25%): Two stacked analytical monographs with author metadata.
|
||||
- Col 3 (20%): *The Iqra Wire* in a shaded linen box with pulsing live indicator.
|
||||
4. *Voices of Iqra (Editorial Board):* 5-column panel framed in hairline rules. Each fellow features a portrait, distinct column tag (*The Jauhari Column*, *Wealth & Succession*, *The Shifa Desk*), and their latest treatise.
|
||||
5. *Quantitative Engines Strip:* High-contrast black backplate showcasing the Faraid Estate Solver, Zakat Engine, and Waqf Registry.
|
||||
6. *Curated Topic Dossiers:* 3-column structured matrix by core disciplines.
|
||||
|
||||
---
|
||||
|
||||
### Direction 2: "Al-Qalam Review" (The Intellectual Journal)
|
||||
*Foreign Affairs, The Atlantic & London Review of Books Dignity*
|
||||
|
||||
* **Prototype File:** [`design-proposals/direction-2-al-qalam-review.html`](direction-2-al-qalam-review.html)
|
||||
* **Core Philosophy:** Serene, contemplative, and literary. Strips away modern noise in favor of generous whitespace, delicate ivory book-stock paper, and profound scholarly weight.
|
||||
* **Palette Architecture:**
|
||||
* Page Ground: `#FBFBFA` (Natural book stock ivory)
|
||||
* Surface Fill: `#FFFFFF` / Inset: `#F4F2EC`
|
||||
* Archival Carbon Ink: `#1B1E21` / Reading Ink: `#4D5156`
|
||||
* Brand Accent: `#185A37` (Andalusian Deep Olive Forest Green)
|
||||
* Leather / Parchment Ochre: `#8D5B28` (Tuscan Ochre for pull-quotes)
|
||||
* Delicate Hairline: `1px solid #E8E6DE`
|
||||
* **Typography Hierarchy:**
|
||||
* Masthead: *Cormorant Garamond*, 72px, weight 500, letter-spacing `0.08em` with ornament `— ✦ —`.
|
||||
* Display Headlines: *Cormorant Garamond*, 52px, leading `1.14`, weight 600.
|
||||
* Pull-Quotes: *Cormorant Garamond Italic*, 23px, leading `1.45` with ochre left-rule.
|
||||
* Body Prose: *Eczar* / *Source Serif 4*, 17px, line-height `1.7`.
|
||||
* **Homepage Wireframe Structure:**
|
||||
1. *Volume & Dateline Header:* Volume IV, Autumn 2026 Issue.
|
||||
2. *Single-Focus Lead Monograph:* Full-width intellectual feature without stock photo distractions, featuring an authoritative pull-quote from the Ihya.
|
||||
3. *The Dispatch Rail:* Right-hand rail highlighting deep juristic and historical treatises.
|
||||
4. *Quad Triptych:* 4 tall editorial columns divided by subtle vertical rules (Fiqh & Succession, Shifa & Tibb, Statecraft & Corridors, Classical Polymath).
|
||||
5. *The Fellowships of Darul Falah:* Academic Fellow cards showcasing chairs and specialized monographs.
|
||||
|
||||
---
|
||||
|
||||
### Direction 3: "Sukuk & Sovereign Rail" (The Financial Intelligence Terminal)
|
||||
*Bloomberg Markets, Nikkei Asia & Semafor Modernity*
|
||||
|
||||
* **Prototype File:** [`design-proposals/direction-3-sovereign-rail.html`](direction-3-sovereign-rail.html)
|
||||
* **Core Philosophy:** Engineered for Islamic Family Offices, wealth managers, and tech leaders. Focuses on structured data density, live market signals, and executive-summary clarity.
|
||||
* **Palette Architecture:**
|
||||
* Workspace Ground: `#F4F5F7` (Crisp executive grey)
|
||||
* Card Surface: `#FFFFFF`
|
||||
* Obsidian Top Header: `#0D1117`
|
||||
* High-Contrast Ink: `#111827` / Subtle: `#4B5563`
|
||||
* Treasury Emerald: `#056A4E` (Light: `#ECFDF5`)
|
||||
* Telemetry Amber: `#D97706` / Bond Blue: `#1E40AF`
|
||||
* Grid Border: `1px solid #E5E7EB`
|
||||
* **Typography Hierarchy:**
|
||||
* UI & Metadata: *Inter*, 13px - 15px, weights 500/600/700.
|
||||
* Analytical Headlines: *Newsreader*, 34px, weight 700.
|
||||
* Telemetry / Engine Code: *JetBrains Mono*, 11px - 13px.
|
||||
* **Homepage Wireframe Structure:**
|
||||
1. *Live Telemetry Strip:* Black status bar with live Nisab, Sukuk benchmark yield, and API indicators.
|
||||
2. *Executive Navigation Bar:* Quick search command palette (`⌘K`), category switches, and subscriber access.
|
||||
3. *Lead Executive Investigation (Semafor-Style Breakdown):*
|
||||
- Lead card featuring a structured 3-part breakdown directly on the card (*THE SIGNAL*, *THE EXPOSURE*, *JURISTIC VIEW*).
|
||||
4. *Live Interactive Calculator Dock:* On-homepage interactive Zakat and Nisab estimator with instant numerical output.
|
||||
5. *Intelligence Desks Terminal:* Modular 4-column cards with status badges and contributor monograph counts.
|
||||
|
||||
---
|
||||
|
||||
## 4. Author Board & Personas: Dignified Presentation
|
||||
|
||||
The existing site reduced distinguished scholars to small circular avatars with brief text snippets. The redesign establishes them as permanent institutional authorities:
|
||||
|
||||
| Persona | Official Role / Pillar | Visual Treatment in Redesign |
|
||||
|---|---|---|
|
||||
| **Jauhari Che Wan** | *Editor-in-Chief & Publisher* | Featured in a dedicated broadsheet "Warkah Pengarang" / Publisher's Desk with monogram seal and editorial manifesto on Nusantara istikhlaf. |
|
||||
| **Dr. Tariq Al-Amiri** | *Senior Jurist & Estate Counsel* | Institutional badge `ESTATE & JURISPRUDENCE`, highlighting legal treatises on cross-border Faraid, Hibah, and Family Office structuring. |
|
||||
| **Dr. Hakim Zainur Rahman** | *Integrative Physician & Tibb Researcher* | Institutional badge `INTEGRATIVE TIBB`, highlighting clinical research on chronobiology, prophetic medicine, and Fiqh an-Nafs. |
|
||||
| **Maryam Al-Andalusi** | *Intellectual Historian* | Institutional badge `MANUSCRIPT FELLOW`, featuring archival monographs on Ibn Khaldun, Andalusian governance, and classical Malay manuscripts. |
|
||||
| **Farhan Idris** | *Geopolitical Risk Analyst* | Institutional badge `GEOPOLITICAL RISK`, featuring strategic briefs on maritime straits, de-dollarization, and trade corridors. |
|
||||
| **Darul Falah Research Desk** | *Quantitative Research Group* | Institutional crest, featuring live algorithmic Nisab tracking and Faraid calculation engines. |
|
||||
|
||||
---
|
||||
|
||||
## 5. Technical Implementation Plan in Ghost / Handlebars
|
||||
|
||||
To implement the winning design direction on `iqra.falahos.my`, the following technical refactoring will be executed:
|
||||
|
||||
### Step 1: De-Duplicate Content Loops in `index.hbs`
|
||||
* Replace repetitive loops with scoped Ghost queries:
|
||||
```handlebars
|
||||
{{!-- 1. Lead Investigation Hero (Exactly 1 post) --}}
|
||||
{{#get "posts" filter="featured:true" limit="1" include="authors,tags"}}
|
||||
{{#foreach posts}}
|
||||
{{> "ft-hero-lead"}}
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
|
||||
{{!-- 2. Secondary Analysis & Wire (Excludes featured lead) --}}
|
||||
{{#get "posts" filter="featured:false+tag:-products" limit="5" include="authors,tags"}}
|
||||
{{> "ft-asymmetric-stream"}}
|
||||
{{/get}}
|
||||
|
||||
{{!-- 3. Remove redundant default post feed from index.hbs --}}
|
||||
```
|
||||
|
||||
### Step 2: Extract Inline CSS to Standardized Tokens
|
||||
* Remove the inline `<style>` tags currently present in `default.hbs`, `index.hbs`, and `ft-editorial.hbs`.
|
||||
* Add CSS design tokens into `assets/built/screen.css` matching the selected palette (paper, ink, hairline, accent).
|
||||
|
||||
### Step 3: Integrate Quantitative Calculators as Server-Side Partials
|
||||
* Convert the calculator tabs into high-performance, responsive partials (`ft-calculator-strip.hbs`), removing layout shifts and JavaScript delays.
|
||||
|
||||
---
|
||||
|
||||
## 6. Verification and Review Instructions
|
||||
|
||||
1. **Local Browser Testing:**
|
||||
Open any of the three HTML files in a browser to review typography, color harmony, and responsive layout:
|
||||
- `direction-1-falah-gazette.html`
|
||||
- `direction-2-al-qalam-review.html`
|
||||
- `direction-3-sovereign-rail.html`
|
||||
2. **Gitea Repository:**
|
||||
These designs and documentation are version-controlled in repository `wmj/falah-ft-theme` (and `falahos/falah-ft-theme`).
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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 · 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">— ✦ —</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 · 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">
|
||||
“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.”
|
||||
</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 · 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 · 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 · 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 →</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 →</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 →</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="qalam-footer">
|
||||
<div class="container">
|
||||
<div class="footer-crest">❧</div>
|
||||
<p class="footer-statement">
|
||||
“Read in the name of your Lord who created — He who taught by the Pen, taught humanity what it knew not.”
|
||||
</p>
|
||||
<p>© 2026 Al-Qalam Review · Iqra Times · Published by Darul Falah</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,822 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Direction 3: Sukuk & Sovereign Rail — Iqra Financial Terminal</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=Inter:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,500;0,6..72,700;1,6..72,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* === SUKUK & SOVEREIGN RAIL DESIGN SYSTEM TOKENS === */
|
||||
:root {
|
||||
--term-bg: #F4F5F7; /* Crisp executive workspace grey */
|
||||
--term-surface: #FFFFFF; /* Solid white module card */
|
||||
--term-dark: #0D1117; /* Deep obsidian executive header */
|
||||
--term-ink: #111827; /* High-contrast ink */
|
||||
--term-ink-subtle: #4B5563; /* Metadata and analytical prose */
|
||||
--term-ink-muted: #9CA3AF; /* Micro-labeling */
|
||||
--term-emerald: #056A4E; /* Deep treasury emerald */
|
||||
--term-emerald-light: #ECFDF5;
|
||||
--term-amber: #D97706; /* Telemetry alert amber */
|
||||
--term-amber-light: #FFFBEB;
|
||||
--term-blue: #1E40AF; /* Sovereign bond blue */
|
||||
--term-border: #E5E7EB; /* Clean 1px modular grid border */
|
||||
--term-border-dark: #D1D5DB;
|
||||
|
||||
--font-ui: 'Inter', -apple-system, sans-serif;
|
||||
--font-serif: 'Newsreader', Georgia, serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background-color: var(--term-bg);
|
||||
color: var(--term-ink);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
a:hover { color: var(--term-emerald); }
|
||||
|
||||
.container {
|
||||
max-width: 1360px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* === 1. LIVE TELEMETRY STRIP === */
|
||||
.telemetry-strip {
|
||||
background-color: var(--term-dark);
|
||||
color: #E5E7EB;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #1F2937;
|
||||
}
|
||||
.telemetry-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
gap: 20px;
|
||||
}
|
||||
.telemetry-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.telemetry-badge {
|
||||
background: #10B981;
|
||||
color: #064E3B;
|
||||
font-size: 9.5px;
|
||||
font-weight: 700;
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.telemetry-metric {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.metric-label { color: #9CA3AF; }
|
||||
.metric-val { color: #34D399; font-weight: 600; }
|
||||
.metric-val.up { color: #34D399; }
|
||||
.metric-val.neutral { color: #FCD34D; }
|
||||
|
||||
/* === 2. TERMINAL EXECUTIVE MASTHEAD === */
|
||||
.masthead {
|
||||
background: var(--term-surface);
|
||||
border-bottom: 1px solid var(--term-border);
|
||||
padding: 16px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.masthead-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
.brand-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.brand-logo {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--term-ink);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.brand-pill {
|
||||
background: var(--term-emerald);
|
||||
color: #FFF;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.terminal-nav {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--term-ink-subtle);
|
||||
}
|
||||
.terminal-nav a:hover, .terminal-nav a.active {
|
||||
color: var(--term-emerald);
|
||||
}
|
||||
.terminal-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.search-cmd {
|
||||
background: var(--term-bg);
|
||||
border: 1px solid var(--term-border);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.kbd-key {
|
||||
background: #FFF;
|
||||
border: 1px solid #D1D5DB;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.btn-access {
|
||||
background: var(--term-dark);
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 7px 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* === 3. EXECUTIVE INTELLIGENCE GRID (MAIN TERMINAL) === */
|
||||
.terminal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 8fr 4fr;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
/* Primary Intelligence Column */
|
||||
.main-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* Lead Executive Card */
|
||||
.lead-card {
|
||||
background: var(--term-surface);
|
||||
border: 1px solid var(--term-border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.lead-card-header {
|
||||
padding: 20px 24px 12px;
|
||||
border-bottom: 1px solid var(--term-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.lead-tag {
|
||||
background: var(--term-emerald-light);
|
||||
color: var(--term-emerald);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.lead-time {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--term-ink-muted);
|
||||
}
|
||||
.lead-card-body {
|
||||
padding: 24px;
|
||||
}
|
||||
.lead-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--term-ink);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Semafor-style Structured Breakdown */
|
||||
.semafor-drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
margin: 20px 0;
|
||||
background: #F9FAFB;
|
||||
border: 1px solid var(--term-border);
|
||||
border-radius: 6px;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
.semafor-point {
|
||||
display: grid;
|
||||
grid-template-columns: 130px 1fr;
|
||||
gap: 16px;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.semafor-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--term-emerald);
|
||||
}
|
||||
.semafor-text {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.lead-card-footer {
|
||||
padding: 14px 24px;
|
||||
background: #FAFAFA;
|
||||
border-top: 1px solid var(--term-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.author-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.author-thumb {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Secondary 2-Up Cards */
|
||||
.sub-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
.sub-card {
|
||||
background: var(--term-surface);
|
||||
border: 1px solid var(--term-border);
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.sub-kicker {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
color: var(--term-blue);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sub-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--term-ink);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sub-excerpt {
|
||||
font-size: 13px;
|
||||
color: var(--term-ink-subtle);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.sub-footer {
|
||||
border-top: 1px solid var(--term-border);
|
||||
padding-top: 10px;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--term-ink-muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Right Rail: Terminal Wire & Live Engines */
|
||||
.side-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* Live Wire Module */
|
||||
.terminal-box {
|
||||
background: var(--term-surface);
|
||||
border: 1px solid var(--term-border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box-header {
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--term-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
.box-title {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--term-ink);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.signal-indicator {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #10B981;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.box-content {
|
||||
padding: 0 18px;
|
||||
}
|
||||
.feed-row {
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--term-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.feed-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.feed-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--term-ink-muted);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.feed-title {
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--term-ink);
|
||||
}
|
||||
|
||||
/* Live Interactive Calculator Widget */
|
||||
.calculator-dock {
|
||||
background: var(--term-dark);
|
||||
color: #FFF;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
.calc-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
border-bottom: 1px solid #374151;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.calc-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #34D399;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.calc-input-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.calc-label {
|
||||
font-size: 11px;
|
||||
color: #9CA3AF;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.calc-input {
|
||||
width: 100%;
|
||||
background: #1F2937;
|
||||
border: 1px solid #374151;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
color: #FFF;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
}
|
||||
.calc-output-box {
|
||||
background: #111827;
|
||||
border: 1px solid #056A4E;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.calc-output-val {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #34D399;
|
||||
}
|
||||
.calc-btn {
|
||||
width: 100%;
|
||||
background: var(--term-emerald);
|
||||
color: #FFF;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-top: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* === 4. RESEARCH FELLOWS TERMINAL CARDS === */
|
||||
.fellows-terminal-section {
|
||||
margin: 40px 0 60px;
|
||||
}
|
||||
.terminal-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--term-border-dark);
|
||||
}
|
||||
.section-headline {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--term-ink);
|
||||
}
|
||||
.fellows-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.fellow-terminal-card {
|
||||
background: var(--term-surface);
|
||||
border: 1px solid var(--term-border);
|
||||
border-radius: 6px;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.fellow-badge-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.desk-pill {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9.5px;
|
||||
font-weight: 700;
|
||||
background: #F3F4F6;
|
||||
color: #374151;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.fellow-profile-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.fellow-img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--term-border);
|
||||
}
|
||||
.fellow-name-h {
|
||||
font-size: 14.5px;
|
||||
font-weight: 700;
|
||||
color: var(--term-ink);
|
||||
}
|
||||
.fellow-bio-text {
|
||||
font-size: 12px;
|
||||
color: var(--term-ink-subtle);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.fellow-stat-link {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--term-emerald);
|
||||
border-top: 1px solid var(--term-border);
|
||||
padding-top: 10px;
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
.terminal-footer {
|
||||
background: var(--term-dark);
|
||||
color: #9CA3AF;
|
||||
padding: 32px 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
border-top: 1px solid #1F2937;
|
||||
}
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 1. LIVE TELEMETRY STRIP -->
|
||||
<div class="telemetry-strip">
|
||||
<div class="container telemetry-inner">
|
||||
<div class="telemetry-group">
|
||||
<span class="telemetry-badge">LIVE TERMINAL</span>
|
||||
<div class="telemetry-metric">
|
||||
<span class="metric-label">GOLD NISAB:</span>
|
||||
<span class="metric-val">RM 32,450.00 / 85g</span>
|
||||
</div>
|
||||
<div class="telemetry-metric">
|
||||
<span class="metric-label">SILVER NISAB:</span>
|
||||
<span class="metric-val">RM 2,890.00 / 595g</span>
|
||||
</div>
|
||||
<div class="telemetry-metric">
|
||||
<span class="metric-label">SUKUK 5Y BENCH:</span>
|
||||
<span class="metric-val up">4.82% (+0.04)</span>
|
||||
</div>
|
||||
<div class="telemetry-metric">
|
||||
<span class="metric-label">ZAKAT APIS:</span>
|
||||
<span class="metric-val neutral">OPERATIONAL</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="telemetry-group">
|
||||
<span>Rabi' al-Awwal 1448 · UTC+8</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. TERMINAL EXECUTIVE MASTHEAD -->
|
||||
<header class="masthead">
|
||||
<div class="container masthead-inner">
|
||||
<div class="brand-block">
|
||||
<div class="brand-logo">
|
||||
IQRA <span class="brand-pill">Terminal</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="terminal-nav">
|
||||
<a href="#" class="active">Intelligence Feed</a>
|
||||
<a href="#">Family Office</a>
|
||||
<a href="#">Sukuk & Sovereign Debt</a>
|
||||
<a href="#">Integrative Tibb</a>
|
||||
<a href="#">Geopolitical Risk</a>
|
||||
<a href="#">Faraid Engine</a>
|
||||
</nav>
|
||||
<div class="terminal-actions">
|
||||
<div class="search-cmd">
|
||||
<span>Search Intelligence...</span>
|
||||
<span class="kbd-key">&K</span>
|
||||
</div>
|
||||
<a href="#" class="btn-access">Client Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 3. MAIN TERMINAL GRID -->
|
||||
<main class="container">
|
||||
<div class="terminal-grid">
|
||||
|
||||
<!-- Left: Primary Intelligence Column -->
|
||||
<div class="main-col">
|
||||
|
||||
<!-- Lead Investigation (Semafor-Style Breakdown) -->
|
||||
<article class="lead-card">
|
||||
<div class="lead-card-header">
|
||||
<span class="lead-tag">SOVEREIGN CAPITAL · LEAD INVESTIGATION</span>
|
||||
<span class="lead-time">10 Oct 2026 · 08:30 MYT</span>
|
||||
</div>
|
||||
<div class="lead-card-body">
|
||||
<h2 class="lead-title">
|
||||
<a href="#">Malaysia Prices First Tokenised Sukuk: The EVM Settlement Layer Dissected</a>
|
||||
</h2>
|
||||
|
||||
<!-- Semafor Executive Breakdown -->
|
||||
<div class="semafor-drawer">
|
||||
<div class="semafor-point">
|
||||
<span class="semafor-label">THE SIGNAL</span>
|
||||
<span class="semafor-text">RM100 million priced with institutional syndicate backing (Khazanah, CIMB, Maybank). Wakalah underlying remains compliant with SAC-BNM guidelines.</span>
|
||||
</div>
|
||||
<div class="semafor-point">
|
||||
<span class="semafor-label">THE EXPOSURE</span>
|
||||
<span class="semafor-text">Cuts settlement cycle from T+2 to instantaneous atomic delivery-versus-payment (DvP) on private permissioned EVM ledger.</span>
|
||||
</div>
|
||||
<div class="semafor-point">
|
||||
<span class="semafor-label">JURISTIC VIEW</span>
|
||||
<span class="semafor-text">Dr. Tariq Al-Amiri confirms smart contract minting preserves legal title without invoking prohibited debt-sale (Bay al-Dayn) caveats.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lead-card-footer">
|
||||
<div class="author-inline">
|
||||
<img src="https://iqra.falahos.my/content/images/authors/tariq-al-amiri.png" class="author-thumb" alt="Dr. Tariq Al-Amiri">
|
||||
<span>Analysis by Dr. Tariq Al-Amiri · Senior Jurist</span>
|
||||
</div>
|
||||
<a href="#" style="color: var(--term-emerald); font-weight: 600;">Read Full Analysis →</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 2-Up Sub Grid -->
|
||||
<div class="sub-grid">
|
||||
<article class="sub-card">
|
||||
<div>
|
||||
<span class="sub-kicker">Integrative Tibb · Clinical Study</span>
|
||||
<h3 class="sub-title"><a href="#">Neurobiology of Tahajjud: Melatonin Synchronization & Cortisol Reset</a></h3>
|
||||
<p class="sub-excerpt">Quantitative study on third-quarter night vigilance, vagus nerve stimulation, and systemic autonomic balance.</p>
|
||||
</div>
|
||||
<div class="sub-footer">
|
||||
<span>Dr. Hakim Zainur Rahman</span>
|
||||
<span>6 min read</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sub-card">
|
||||
<div>
|
||||
<span class="sub-kicker">Geopolitics · Maritime Corridors</span>
|
||||
<h3 class="sub-title"><a href="#">Strait of Malacca: Sovereign Settlement Rails Bypassing Western Clearing</a></h3>
|
||||
<p class="sub-excerpt">Bilateral energy and grain trade settled in tokenised gold dinar between Southeast Asia and the Gulf.</p>
|
||||
</div>
|
||||
<div class="sub-footer">
|
||||
<span>Farhan Idris</span>
|
||||
<span>8 min read</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Rail: Terminal Live Feeds & Interactive Engine -->
|
||||
<div class="side-col">
|
||||
|
||||
<!-- Live Intelligence Wire -->
|
||||
<div class="terminal-box">
|
||||
<div class="box-header">
|
||||
<span class="box-title"><span class="signal-indicator"></span> Live Intelligence Wire</span>
|
||||
<span style="font-family: var(--font-mono); font-size: 10px; color: #6B7280;">POLLING</span>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="feed-row">
|
||||
<div class="feed-meta"><span>14m ago</span> · <span>FINTECH</span></div>
|
||||
<h4 class="feed-title"><a href="#">Musaffa's US Halal Brokerage Integrates DriveWealth Clearing API</a></h4>
|
||||
</div>
|
||||
<div class="feed-row">
|
||||
<div class="feed-meta"><span>1h ago</span> · <span>FAMILY OFFICE</span></div>
|
||||
<h4 class="feed-title"><a href="#">Cross-Border Waqf Ahli Framework Adopted in Labuan IBFC</a></h4>
|
||||
</div>
|
||||
<div class="feed-row">
|
||||
<div class="feed-meta"><span>3h ago</span> · <span>TIBB HEALTH</span></div>
|
||||
<h4 class="feed-title"><a href="#">Clinical Trials on Intermittent Fasting Validate Monday-Thursday Sunnah Rhythm</a></h4>
|
||||
</div>
|
||||
<div class="feed-row">
|
||||
<div class="feed-meta"><span>5h ago</span> · <span>PHILOSOPHY</span></div>
|
||||
<h4 class="feed-title"><a href="#">Ibn Khaldun's Asabiyyah and Modern Sovereign Wealth Funds</a></h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Interactive Calculator Dock -->
|
||||
<div class="calculator-dock">
|
||||
<div class="calc-header">
|
||||
<span class="calc-title">Rapid Zakat Estimator</span>
|
||||
<span style="font-size: 10px; color: #9CA3AF;">NISAB 2026</span>
|
||||
</div>
|
||||
<div class="calc-input-group">
|
||||
<label class="calc-label">Total Liquid Assets (MYR)</label>
|
||||
<input type="text" class="calc-input" value="1,250,000.00">
|
||||
</div>
|
||||
<div class="calc-input-group">
|
||||
<label class="calc-label">Deductible Liabilities</label>
|
||||
<input type="text" class="calc-input" value="150,000.00">
|
||||
</div>
|
||||
<div class="calc-output-box">
|
||||
<span style="font-size: 11px; color: #9CA3AF;">Obligatory Zakat (2.5%):</span>
|
||||
<span class="calc-output-val">RM 27,500.00</span>
|
||||
</div>
|
||||
<button class="calc-btn">Open Full Multi-Asset Engine →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. RESEARCH FELLOWS TERMINAL CARDS -->
|
||||
<section class="fellows-terminal-section">
|
||||
<div class="terminal-section-header">
|
||||
<h3 class="section-headline">Iqra Intelligence Desks & Senior Fellows</h3>
|
||||
<span style="font-family: var(--font-mono); font-size: 11px; color: #6B7280;">6 ACTIVE DESKS</span>
|
||||
</div>
|
||||
|
||||
<div class="fellows-grid">
|
||||
<div class="fellow-terminal-card">
|
||||
<div class="fellow-badge-row">
|
||||
<span class="desk-pill">PUBLISHER'S DESK</span>
|
||||
</div>
|
||||
<div class="fellow-profile-row">
|
||||
<img src="https://iqra.falahos.my/content/images/authors/jauhari-che-wan.png" class="fellow-img" alt="Jauhari Che Wan">
|
||||
<div>
|
||||
<h4 class="fellow-name-h">Jauhari Che Wan</h4>
|
||||
<span style="font-size: 11px; color: #6B7280;">Editor-in-Chief</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="fellow-bio-text">Writes The Jauhari Column on sovereign technology and civilizational istikhlaf in Nusantara.</p>
|
||||
<a href="#" class="fellow-stat-link"><span>18 Monographs</span> <span>→</span></a>
|
||||
</div>
|
||||
|
||||
<div class="fellow-terminal-card">
|
||||
<div class="fellow-badge-row">
|
||||
<span class="desk-pill">ESTATE & JURISPRUDENCE</span>
|
||||
</div>
|
||||
<div class="fellow-profile-row">
|
||||
<img src="https://iqra.falahos.my/content/images/authors/tariq-al-amiri.png" class="fellow-img" alt="Dr. Tariq Al-Amiri">
|
||||
<div>
|
||||
<h4 class="fellow-name-h">Dr. Tariq Al-Amiri</h4>
|
||||
<span style="font-size: 11px; color: #6B7280;">Senior Counsel</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="fellow-bio-text">Advises on cross-border Faraid, family office trusts, and Sukuk issuance structures.</p>
|
||||
<a href="#" class="fellow-stat-link"><span>8 Briefings</span> <span>→</span></a>
|
||||
</div>
|
||||
|
||||
<div class="fellow-terminal-card">
|
||||
<div class="fellow-badge-row">
|
||||
<span class="desk-pill">INTEGRATIVE TIBB</span>
|
||||
</div>
|
||||
<div class="fellow-profile-row">
|
||||
<img src="https://iqra.falahos.my/content/images/authors/hakim-zainur.png" class="fellow-img" alt="Dr. Hakim Zainur Rahman">
|
||||
<div>
|
||||
<h4 class="fellow-name-h">Dr. Hakim Zainur</h4>
|
||||
<span style="font-size: 11px; color: #6B7280;">Clinical Researcher</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="fellow-bio-text">Bridging prophetic medicine, clinical chronobiology, and Islamic cognitive reframing.</p>
|
||||
<a href="#" class="fellow-stat-link"><span>8 Clinical Papers</span> <span>→</span></a>
|
||||
</div>
|
||||
|
||||
<div class="fellow-terminal-card">
|
||||
<div class="fellow-badge-row">
|
||||
<span class="desk-pill">GEOPOLITICAL RISK</span>
|
||||
</div>
|
||||
<div class="fellow-profile-row">
|
||||
<img src="https://iqra.falahos.my/content/images/authors/farhan-idris.png" class="fellow-img" alt="Farhan Idris">
|
||||
<div>
|
||||
<h4 class="fellow-name-h">Farhan Idris</h4>
|
||||
<span style="font-size: 11px; color: #6B7280;">Corridors Strategist</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="fellow-bio-text">Specialist in maritime straits, sovereign capital flows, and alternative settlement rails.</p>
|
||||
<a href="#" class="fellow-stat-link"><span>5 Corridors Briefs</span> <span>→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="terminal-footer">
|
||||
<div class="container footer-inner">
|
||||
<span>© 2026 IQRA TERMINAL · DARUL FALAH CAPITAL INTELLIGENCE · FALAHOS RUNTIME</span>
|
||||
<span>DATA FEEDS: NISAB LIVE INDEX · STATUS: OPERATIONAL</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user