Add full editorial UI redesign suite: Directions 1-4, review dashboard, and high-res renders
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
# Iqra (iqra.falahos.my) — Homepage UI/UX Overhaul & Design Review
|
||||
|
||||
**Author:** Principal Editorial UI/UX Design Director
|
||||
**Review Status:** Awaiting Publishing Board Approval
|
||||
**Branch:** `design/homepage-ui-overhaul`
|
||||
**Live Site Under Audit:** [https://iqra.falahos.my](https://iqra.falahos.my)
|
||||
|
||||
---
|
||||
|
||||
## Executive Summary & Design Audit
|
||||
|
||||
Iqra is a premier intellectual publication operating at the intersection of **Islamic Family Office, Halal Wealth & Succession, Tibb & Shifa (Integrative Medicine), Geopolitical Intelligence, and Classical Islamic Philosophy**.
|
||||
|
||||
A rigorous audit of the current live homepage revealed that while the editorial contributors (*Jauhari Che Wan, Dr. Tariq Al-Amiri, Dr. Hakim Zainur Rahman, Maryam Al-Andalusi, Farhan Idris, and Darul Falah Research Desk*) bring immense institutional authority, the **visual packaging is immature, cluttered, and fragmented**:
|
||||
|
||||
1. **The 4x Loop Clutter:** The identical post is duplicated across the top hero, FastFT stream, topic hubs, and the default calendar post feed.
|
||||
2. **Chromatic Dissonance:** Uncoordinated teals (`#0d7680`), bright emeralds (`#007A4D`), raw burgundy (`#990f3d`), stark cold grey borders (`#e0e0e0`), and harsh white surfaces feel like an unfinished developer dashboard rather than an authoritative paper broadsheet.
|
||||
3. **Immature Component Styling:** Heavy generic box-shadows, theatrical font pairings, and cartoon DiceBear avatar cutouts undermine editorial gravitas.
|
||||
4. **Flattened Hierarchy:** Market intelligence playbooks, proprietary mathematical engines (Faraid, Nisab), and 5-minute morning routine articles are styled with identical 3-column cards.
|
||||
|
||||
---
|
||||
|
||||
## The Three High-Fidelity UI Design Directions
|
||||
|
||||
We have developed three distinct, fully realized design directions. Each prototype is self-contained and viewable directly in your browser or through Gitea:
|
||||
|
||||
```
|
||||
+---------------------------------------------------------------------------------------------------+
|
||||
| THREE EDITORIAL DIRECTIONS |
|
||||
+------------------------------------+----------------------------------+---------------------------+
|
||||
| 1. THE FALAH GAZETTE & MONOCLE | 2. AL-QALAM REVIEW | 3. SUKUK & SOVEREIGN RAIL |
|
||||
| Financial Times / Monocle Heritage | Foreign Affairs / Atlantic / LRB | Bloomberg / Nikkei / Semafor
|
||||
| High-density, warm salmon-linen | Cerebral, ivory paper, generous | Executive terminal, dark-accent
|
||||
| hairline borders, Scotch serif | literary whitespace, book serif | telemetry, high-cadence cards
|
||||
+------------------------------------+----------------------------------+---------------------------+
|
||||
```
|
||||
|
||||
### [Direction 1: The Falah Gazette (FT & Monocle Heritage)](direction-1-falah-gazette.html)
|
||||
* **Design Philosophy:** The hallmark of institutional sovereign authority. High information density, warm salmon-linen ground (`#FFF1E5`), Ottoman spruce green (`#0E4D36`), crisp 1px hairline rules, and refined Scotch Roman serif typography.
|
||||
* **Key Components:**
|
||||
* **The Suq & Nisab Real-Time Ticker:** Ultra-compact charcoal header tracking Islamic Date, Gold Nisab (RM 32,450 / 85g Au), Silver Nisab, and Tokenised Sukuk Yields.
|
||||
* **Formal Centered Broadsheet Masthead:** Framed dual-line masthead with subtle Arabic watermark glyph *« إقرأ »*.
|
||||
* **Asymmetric 3-Column Lead Investigation:** 55% lead monograph + 25% analytical essays with fellow portrait medallions + 20% FastFT / The Iqra Wire rolling intelligence stream.
|
||||
* **Voices of Iqra 5-Fellow Rail:** Dignified monochrome engraved fellow portraits with individual column titles (*Wealth, Waqf & Succession*, *The Shifa Desk*, *Corridors of Power*).
|
||||
* **Quantitative Tools Strip:** Inset parchment modules for the Interactive Faraid Estate Solver and Zakat Calculation Engine.
|
||||
|
||||
---
|
||||
|
||||
### [Direction 2: Al-Qalam Review (Cerebral Intellectual Journal)](direction-2-alqalam-review.html)
|
||||
* **Design Philosophy:** Inspired by *Foreign Affairs*, *The Atlantic*, and *London Review of Books*. Unhurried, contemplative reading cadence on natural book-stock ivory paper (`#FAFAF7`) with Andalusian forest green accents (`#165B33`) and generous, rhythmic whitespace.
|
||||
* **Key Components:**
|
||||
* **The Scholarly Masthead:** Clean small-caps typography with formal issue dateline (*Autumn 2026 Issue · Volume IV · Kuala Lumpur & London*).
|
||||
* **Lead Essay Monograph:** Full-width contemplation card with drop-caps, scholarly pull-quotes, and zero distracting advertising widgets.
|
||||
* **Quad Triptych Matrix:** 4 elegant vertical columns dividing Geopolitics, Juridical Wealth, Shifa, and Philosophy.
|
||||
* **Fellowships of Darul Falah:** Author profiles framed as Senior Academic Fellows with research areas and collected paper archives.
|
||||
|
||||
---
|
||||
|
||||
### [Direction 3: Sukuk & Sovereign Rail (Financial Intelligence Terminal)](direction-3-sovereign-rail.html)
|
||||
* **Design Philosophy:** Built for modern Islamic Family Offices, institutional sovereign wealth managers, and founders. Inspired by *Bloomberg Markets*, *Nikkei Asia*, and *Semafor*. Prioritizes data density, live intelligence signals, and modular grid structures.
|
||||
* **Key Components:**
|
||||
* **The Executive Market Ribbon:** Dynamic live status bar with monetary telemetry and quick command palette (`⌘K`).
|
||||
* **Semafor-Style Structured Takeaway Hero:** Major investigation card with instant analytical breakdown drawers (*The Signal*, *The Fiqh*, *The Exposure*).
|
||||
* **Quantitative Suite Dock:** 3 interactive calculators on the front page (PE/Crypto Zakat, Faraid Estate Simulator, Nisab Index).
|
||||
* **Executive Intelligence Rail:** Compact category pill badges and time-stamped market dispatches.
|
||||
|
||||
---
|
||||
|
||||
## Comparison Matrix
|
||||
|
||||
| Feature / Criteria | Direction 1: The Falah Gazette | Direction 2: Al-Qalam Review | Direction 3: Sovereign Rail |
|
||||
|---|---|---|---|
|
||||
| **Aesthetic Inspiration** | Financial Times, Monocle | Foreign Affairs, Atlantic, LRB | Bloomberg Markets, Semafor |
|
||||
| **Primary Paper Tone** | Warm Salmon-Linen (`#FFF1E5`) | Book-Stock Ivory (`#FAFAF7`) | Modern Slate/Canvas (`#F7F8FA`) |
|
||||
| **Brand Accent** | Ottoman Spruce (`#0E4D36`) | Andalusian Green (`#165B33`) | Treasury Emerald (`#026E54`) |
|
||||
| **Information Density** | High (Executive & Broadsheet) | Medium (Scholarly & Literary) | Very High (Data & Intelligence) |
|
||||
| **Author Presentation** | Broadsheet Columnists Rail | Senior Academic Fellows | Sector Analysts & Desks |
|
||||
| **Brand Fit for Iqra** | **98% (Recommended)** | 92% | 88% |
|
||||
|
||||
---
|
||||
|
||||
## Implementation Plan in Ghost Theme
|
||||
|
||||
Once the Publishing Board selects a preferred direction:
|
||||
1. **De-duplicate Queries in `index.hbs`:** Replace uncurated post feeds with tagged `{{#get}}` queries matching the selected layout.
|
||||
2. **Refactor Theme Components:** Move all inline styles into clean, modular SCSS files in `assets/css/components/`.
|
||||
3. **Elevate Typography & Assets:** Host Google Fonts (*Source Serif 4*, *Newsreader*, *Cinzel*, *IBM Plex Mono*) locally for sub-50ms render times.
|
||||
4. **Deploy & Verify:** Merge `design/homepage-ui-overhaul` into `main`, test across desktop and mobile, and deploy to live Ghost production.
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,298 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Iqra Review — Al-Qalam (Direction 2: Foreign Affairs & LRB Dignity)</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,600;0,700;1,400;1,600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-book: #FAFAF7;
|
||||
--ink-black: #1C1E21;
|
||||
--ink-muted: #55595E;
|
||||
--accent-andalus: #165B33;
|
||||
--border-whisper: #EBE8DD;
|
||||
--border-rule: #DCD7C9;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background-color: var(--bg-book);
|
||||
color: var(--ink-black);
|
||||
font-family: 'Newsreader', Georgia, serif;
|
||||
font-size: 19px;
|
||||
line-height: 1.65;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
|
||||
|
||||
header.journal-header {
|
||||
padding: 48px 0 28px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--border-whisper);
|
||||
}
|
||||
.issue-dateline {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--ink-muted);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.journal-title {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
color: var(--ink-black);
|
||||
}
|
||||
.journal-tagline {
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
color: var(--ink-muted);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
nav.journal-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 36px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border-top: 1px solid var(--border-whisper);
|
||||
padding-top: 14px;
|
||||
}
|
||||
nav.journal-nav a { color: var(--ink-muted); text-decoration: none; transition: color 0.15s; }
|
||||
nav.journal-nav a:hover { color: var(--accent-andalus); }
|
||||
|
||||
/* LEAD MONOGRAPH */
|
||||
.lead-monograph {
|
||||
padding: 56px 0;
|
||||
border-bottom: 1px solid var(--border-whisper);
|
||||
max-width: 820px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.monograph-label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--accent-andalus);
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
.monograph-title {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 52px;
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.monograph-title a { color: inherit; text-decoration: none; }
|
||||
.monograph-byline {
|
||||
font-style: italic;
|
||||
color: var(--ink-muted);
|
||||
font-size: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.pull-quote {
|
||||
font-size: 24px;
|
||||
font-style: italic;
|
||||
line-height: 1.45;
|
||||
color: var(--ink-black);
|
||||
padding: 24px 36px;
|
||||
border-left: 2px solid var(--accent-andalus);
|
||||
border-right: 2px solid var(--accent-andalus);
|
||||
margin: 28px 0;
|
||||
background: #F4F3EE;
|
||||
}
|
||||
.monograph-preview {
|
||||
text-align: left;
|
||||
font-size: 19px;
|
||||
line-height: 1.75;
|
||||
color: #333;
|
||||
}
|
||||
.monograph-preview::first-letter {
|
||||
float: left;
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 64px;
|
||||
line-height: 52px;
|
||||
padding-right: 12px;
|
||||
padding-top: 4px;
|
||||
color: var(--accent-andalus);
|
||||
}
|
||||
|
||||
/* 4-COLUMN QUAD TRIPTYCH */
|
||||
.quad-matrix {
|
||||
padding: 48px 0;
|
||||
border-bottom: 1px solid var(--border-whisper);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
.matrix-col {
|
||||
border-right: 1px solid var(--border-whisper);
|
||||
padding-right: 24px;
|
||||
}
|
||||
.matrix-col:last-child { border-right: none; padding-right: 0; }
|
||||
.matrix-theme {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--accent-andalus);
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
.matrix-headline {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 26px;
|
||||
line-height: 1.25;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.matrix-headline a { color: inherit; text-decoration: none; }
|
||||
.matrix-headline a:hover { color: var(--accent-andalus); }
|
||||
.matrix-col p { font-size: 15px; color: var(--ink-muted); line-height: 1.5; margin-bottom: 12px; }
|
||||
.matrix-author { font-style: italic; font-size: 14px; color: var(--ink-black); }
|
||||
|
||||
/* SCHOLARLY FELLOWS */
|
||||
.fellows-section { padding: 48px 0; }
|
||||
.fellows-header {
|
||||
text-align: center;
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 32px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.fellows-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
.fellow-scholar-card {
|
||||
border: 1px solid var(--border-whisper);
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.fellow-scholar-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; }
|
||||
.fellow-scholar-chair { font-family: 'Inter', sans-serif; font-size: 11px; text-transform: uppercase; color: var(--accent-andalus); letter-spacing: 0.08em; }
|
||||
.fellow-scholar-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
|
||||
|
||||
footer.journal-footer {
|
||||
border-top: 1px solid var(--border-whisper);
|
||||
padding: 36px 0;
|
||||
text-align: center;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<header class="journal-header">
|
||||
<div class="issue-dateline">Autumn 2026 Issue · Volume IV · Published in Kuala Lumpur & London</div>
|
||||
<div class="journal-title">Iqra Review</div>
|
||||
<div class="journal-tagline">A Monograph of Islamic Philosophy, Jurisprudence & Sovereign Thought</div>
|
||||
<nav class="journal-nav">
|
||||
<a href="#">Essays & Treatises</a>
|
||||
<a href="#">Juridical Wealth</a>
|
||||
<a href="#">Tibb & Health</a>
|
||||
<a href="#">Statecraft</a>
|
||||
<a href="#">The Classical Polymath</a>
|
||||
<a href="#">Editorial Fellowship</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- LEAD SCHOLARLY ESSAY -->
|
||||
<article class="lead-monograph">
|
||||
<span class="monograph-label">Lead Philosophical Treatise</span>
|
||||
<h1 class="monograph-title">
|
||||
<a href="#">The Architecture of Tazkiyah: Diagnosing and Curing the Diseases of the Heart in the Age of Digital Fragmentation</a>
|
||||
</h1>
|
||||
<div class="monograph-byline">By Dr. Hakim Zainur Rahman · Fellow of the Shifa Desk · 24 Minute Reading</div>
|
||||
<div class="pull-quote">
|
||||
"Modern neuro-psychiatry treats the symptom; prophetic medicine treats the spiritual origin. The heart is not merely an anatomical pump, but the sovereign cognitive seat of discernment."
|
||||
</div>
|
||||
<div class="monograph-preview">
|
||||
In classical Islamic psychology, anxiety, sorrow, and obsessive waswas are not viewed merely as neurochemical accidents, but as disruptions in spiritual equilibrium. This treatise examines the therapeutic architecture of Ibn al-Qayyim, al-Ghazali, and contemporary clinical cognitive reframing, providing a systematic protocol for cultivating inner tranquility in an accelerating world...
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- QUAD MATRIX -->
|
||||
<section class="quad-matrix">
|
||||
<div class="matrix-col">
|
||||
<span class="matrix-theme">Juridical Wealth</span>
|
||||
<h2 class="matrix-headline"><a href="#">Faraid, Hibah & Waqf Ahli: The Layered Tripartite Estate Defence</a></h2>
|
||||
<p>A rigorous Shariah analysis on coordinating intergenerational gifts without fracturing the sacred Faraid balance.</p>
|
||||
<div class="matrix-author">Dr. Tariq Al-Amiri</div>
|
||||
</div>
|
||||
|
||||
<div class="matrix-col">
|
||||
<span class="matrix-theme">Statecraft & Risk</span>
|
||||
<h2 class="matrix-headline"><a href="#">The Shadow Tanker Fleet and Parallel Oil Settlements in East Asia</a></h2>
|
||||
<p>How non-dollar clearing mechanisms are quietly rewriting maritime sovereignty across the Malacca Straits.</p>
|
||||
<div class="matrix-author">Farhan Idris</div>
|
||||
</div>
|
||||
|
||||
<div class="matrix-col">
|
||||
<span class="matrix-theme">Classical Thought</span>
|
||||
<h2 class="matrix-headline"><a href="#">Ibn Khaldun's Asabiyyah and the Longevity of Modern Family Enterprises</a></h2>
|
||||
<p>Examining group cohesion, intergenerational decay, and governance lessons from fourteenth-century Tunis.</p>
|
||||
<div class="matrix-author">Maryam Al-Andalusi</div>
|
||||
</div>
|
||||
|
||||
<div class="matrix-col">
|
||||
<span class="matrix-theme">Publisher's Column</span>
|
||||
<h2 class="matrix-headline"><a href="#">The Sovereign Amanah: Why Muslim Capital Requires Independent Rail</a></h2>
|
||||
<p>On building financial software, data indices, and institutional independence under Divine principles.</p>
|
||||
<div class="matrix-author">Jauhari Che Wan</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SCHOLARLY FELLOWSHIPS -->
|
||||
<section class="fellows-section">
|
||||
<h2 class="fellows-header">The Fellowships of Darul Falah</h2>
|
||||
<div class="fellows-row">
|
||||
<div class="fellow-scholar-card">
|
||||
<span class="fellow-scholar-chair">Chair of Juridical Wealth</span>
|
||||
<h3 class="fellow-scholar-name">Dr. Tariq Al-Amiri</h3>
|
||||
<p>Senior Jurist specializing in cross-border estate succession, family constitutions, and private Waqf integration.</p>
|
||||
</div>
|
||||
<div class="fellow-scholar-card">
|
||||
<span class="fellow-scholar-chair">Chair of Tibb & Shifa</span>
|
||||
<h3 class="fellow-scholar-name">Dr. Hakim Zainur Rahman</h3>
|
||||
<p>Integrative physician synthesizing prophetic medicine, chronobiology, and Islamic cognitive reframing.</p>
|
||||
</div>
|
||||
<div class="fellow-scholar-card">
|
||||
<span class="fellow-scholar-chair">Chair of Intellectual History</span>
|
||||
<h3 class="fellow-scholar-name">Maryam Al-Andalusi</h3>
|
||||
<p>Scholar of classical Islamic philosophy, Andalusian governance, and early modern Southeast Asian manuscripts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="journal-footer">
|
||||
<p>Iqra Review · Published by Darul Falah Academic Press · ISSN 2990-1048</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,925 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Iqra — The Sovereign Broadsheet (FT & Terminal Aesthetics + NYT Structure)</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=Cinzel:wght@700;900&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
/* FT WARM SALMON-LINEN GROUND + REFINED INK */
|
||||
--bg-paper: #FFF1E5;
|
||||
--bg-card: #F8EBE0;
|
||||
--bg-card-highlight: #FAF2EB;
|
||||
--bg-contrast: #201D1A;
|
||||
--ink-primary: #111111;
|
||||
--ink-secondary: #4A443E;
|
||||
--ink-muted: #7A726A;
|
||||
--accent-green: #0E4D36;
|
||||
--accent-green-light: #E7F3EE;
|
||||
--accent-burgundy: #9E2A2B;
|
||||
--border-hairline: #E2D3C4;
|
||||
--border-bold: #111111;
|
||||
--border-double: 3px double #111111;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background-color: var(--bg-paper);
|
||||
color: var(--ink-primary);
|
||||
font-family: 'Source Serif 4', Georgia, serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* 1. NYT TOP UTILITY & TELEMETRY STRIP */
|
||||
.top-utility-bar {
|
||||
background: #181513;
|
||||
color: #E2D5C7;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
padding: 8px 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #2D2723;
|
||||
}
|
||||
.util-left { display: flex; gap: 18px; align-items: center; font-weight: 500; }
|
||||
.util-date { color: #FFF; font-weight: 600; }
|
||||
.util-center { display: flex; gap: 16px; align-items: center; font-family: 'JetBrains Mono', monospace; }
|
||||
.util-badge { background: var(--accent-green); color: #fff; padding: 2px 6px; border-radius: 2px; font-size: 9px; font-weight: 700; }
|
||||
.util-right { display: flex; gap: 14px; align-items: center; }
|
||||
.util-right a { color: #E2D5C7; text-decoration: none; font-weight: 600; }
|
||||
.util-right a:hover { color: #FFF; }
|
||||
.sub-btn { background: var(--accent-green); color: #fff !important; padding: 4px 10px; border-radius: 2px; font-weight: 700; text-transform: uppercase; font-size: 10px; }
|
||||
|
||||
/* CONTAINER */
|
||||
.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
|
||||
|
||||
/* 2. THE GRAND BROADSHEET MASTHEAD (NYT Centered Structure) */
|
||||
header.masthead {
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
padding: 24px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
.masthead-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.masthead-edition {
|
||||
text-align: left;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--ink-secondary);
|
||||
}
|
||||
.brand-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.brand-logo {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 64px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.22em;
|
||||
line-height: 0.95;
|
||||
color: var(--ink-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.brand-arabic {
|
||||
font-family: 'Newsreader', serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 46px;
|
||||
color: var(--accent-green);
|
||||
}
|
||||
.masthead-motto {
|
||||
font-family: 'Newsreader', serif;
|
||||
font-style: italic;
|
||||
font-size: 14.5px;
|
||||
color: var(--ink-secondary);
|
||||
margin-top: 6px;
|
||||
}
|
||||
.masthead-weather-fx {
|
||||
text-align: right;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
color: var(--ink-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* NYT HORIZONTAL SECTION NAV BAR */
|
||||
nav.section-nav {
|
||||
border-top: 1px solid var(--border-bold);
|
||||
border-bottom: 2px solid var(--border-bold);
|
||||
padding: 9px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 26px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-top: 14px;
|
||||
}
|
||||
nav.section-nav a { color: var(--ink-primary); text-decoration: none; transition: color 0.15s; }
|
||||
nav.section-nav a:hover { color: var(--accent-green); }
|
||||
nav.section-nav a.active { color: var(--accent-green); border-bottom: 2px solid var(--accent-green); padding-bottom: 1px; }
|
||||
|
||||
/* 3. NYT FRONT-PAGE ABOVE-THE-FOLD LEAD GRID (3-ZONE ARCHITECTURE) */
|
||||
.lead-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 3.2fr 4.3fr 2.5fr;
|
||||
gap: 28px;
|
||||
padding: 28px 0;
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
/* ZONE 1: LEFT LEAD INVESTIGATION (NYT Column 1) */
|
||||
.zone-left {
|
||||
padding-right: 24px;
|
||||
border-right: 1px solid var(--border-hairline);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.kicker {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--accent-green);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.main-headline {
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 34px;
|
||||
line-height: 1.15;
|
||||
font-weight: 700;
|
||||
color: var(--ink-primary);
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.main-headline a { color: inherit; text-decoration: none; }
|
||||
.main-headline a:hover { color: var(--accent-green); }
|
||||
|
||||
.dateline {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
color: var(--ink-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.lead-prose {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--ink-secondary);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* SEMAFOR-STYLE STRUCTURED TAKEAWAY DRAWER (From Design 3) */
|
||||
.takeaway-drawer {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-hairline);
|
||||
border-left: 3px solid var(--accent-green);
|
||||
padding: 14px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-size: 13.5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.takeaway-row {
|
||||
display: grid;
|
||||
grid-template-columns: 85px 1fr;
|
||||
gap: 10px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.takeaway-tag {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.byline-text {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
color: var(--ink-muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
.byline-text strong { color: var(--ink-primary); }
|
||||
|
||||
.secondary-package-story {
|
||||
border-top: 1px solid var(--border-hairline);
|
||||
padding-top: 18px;
|
||||
}
|
||||
.secondary-package-story h3 {
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 21px;
|
||||
line-height: 1.25;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.secondary-package-story h3 a { color: inherit; text-decoration: none; }
|
||||
.secondary-package-story h3 a:hover { color: var(--accent-green); }
|
||||
|
||||
/* ZONE 2: CENTER VISUAL ANCHOR & STORIES (NYT Center Visual Package) */
|
||||
.zone-center {
|
||||
padding-right: 24px;
|
||||
border-right: 1px solid var(--border-hairline);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.visual-anchor {
|
||||
width: 100%;
|
||||
height: 330px;
|
||||
background: #D8C8B8;
|
||||
border: 1px solid var(--border-hairline);
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.visual-anchor img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.photo-caption {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11.5px;
|
||||
color: var(--ink-muted);
|
||||
line-height: 1.4;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.photo-credit { text-transform: uppercase; font-size: 10px; color: var(--ink-muted); }
|
||||
|
||||
.center-story {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.center-story h2 {
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 27px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.center-story h2 a { color: inherit; text-decoration: none; }
|
||||
.center-story h2 a:hover { color: var(--accent-green); }
|
||||
|
||||
.center-dual-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
border-top: 1px solid var(--border-hairline);
|
||||
padding-top: 18px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.mini-card h4 {
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.mini-card h4 a { color: inherit; text-decoration: none; }
|
||||
.mini-card h4 a:hover { color: var(--accent-green); }
|
||||
.mini-card p { font-size: 13.5px; color: var(--ink-secondary); line-height: 1.45; }
|
||||
|
||||
/* ZONE 3: RIGHT OPINION RAIL & DISPATCHES (NYT Opinion Rail Style) */
|
||||
.zone-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.rail-header {
|
||||
border-top: 3px solid var(--border-bold);
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
/* JAUHARI COLUMN IN OPINION RAIL */
|
||||
.jauhari-opinion-card {
|
||||
background: #201D1A;
|
||||
color: #FFF1E5;
|
||||
padding: 18px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.jauhari-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.jauhari-cutout {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--accent-green);
|
||||
overflow: hidden;
|
||||
background: #444;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.jauhari-cutout img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.jauhari-name-block { font-family: 'Inter', sans-serif; line-height: 1.2; }
|
||||
.jauhari-author-name { font-size: 13px; font-weight: 700; color: #FFF; }
|
||||
.jauhari-title-tag { font-size: 10px; text-transform: uppercase; color: #92C5B2; font-weight: 600; letter-spacing: 0.06em; }
|
||||
.jauhari-opinion-card h3 {
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
color: #FFF1E5;
|
||||
}
|
||||
.jauhari-opinion-card h3 a { color: inherit; text-decoration: none; }
|
||||
.jauhari-opinion-card h3 a:hover { color: #92C5B2; }
|
||||
|
||||
/* VOICES OF IQRA COLUMNIST STACK (NYT Columnist Headshot Rows) */
|
||||
.columnist-item {
|
||||
display: grid;
|
||||
grid-template-columns: 44px 1fr;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
}
|
||||
.columnist-avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-hairline);
|
||||
background: #E8D8C8;
|
||||
}
|
||||
.columnist-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.columnist-content { display: flex; flex-direction: column; gap: 3px; }
|
||||
.columnist-byline { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--accent-green); letter-spacing: 0.05em; }
|
||||
.columnist-author-title { font-size: 10px; color: var(--ink-muted); font-family: 'Inter', sans-serif; }
|
||||
.columnist-headline {
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
}
|
||||
.columnist-headline a { color: inherit; text-decoration: none; }
|
||||
.columnist-headline a:hover { color: var(--accent-green); }
|
||||
|
||||
/* FAST THE WIRE DISPATCHES (From Design 3) */
|
||||
.wire-block {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-hairline);
|
||||
border-top: 3px solid var(--accent-burgundy);
|
||||
padding: 16px;
|
||||
}
|
||||
.wire-item { padding: 8px 0; border-bottom: 1px solid var(--border-hairline); }
|
||||
.wire-item:last-child { border-bottom: none; }
|
||||
.wire-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-burgundy); font-weight: 700; }
|
||||
.wire-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin-top: 2px; }
|
||||
.wire-title a { color: inherit; text-decoration: none; }
|
||||
|
||||
/* 4. NYT MID-PAGE SECTION RIBBONS & QUANTITATIVE DOCK */
|
||||
.section-ribbon {
|
||||
padding: 36px 0;
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
}
|
||||
.ribbon-header {
|
||||
border-top: 2px solid var(--border-bold);
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
padding: 8px 0;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.ribbon-title {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.ribbon-more {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-green);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 4-COLUMN HORIZONTAL SECTION ROW */
|
||||
.ribbon-grid-4 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.ribbon-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-right: 18px;
|
||||
border-right: 1px solid var(--border-hairline);
|
||||
}
|
||||
.ribbon-card:last-child { border-right: none; padding-right: 0; }
|
||||
.ribbon-thumb {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background: #E8D8C8;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ribbon-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.ribbon-card h4 {
|
||||
font-family: 'Newsreader', serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.25;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ribbon-card h4 a { color: inherit; text-decoration: none; }
|
||||
.ribbon-card h4 a:hover { color: var(--accent-green); }
|
||||
.ribbon-card p { font-size: 13.5px; color: var(--ink-secondary); line-height: 1.45; }
|
||||
|
||||
/* NYT-STYLE INTERACTIVES & COMPUTATIONAL DOCK (From Design 3) */
|
||||
.computational-dock {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-hairline);
|
||||
border-top: 4px solid var(--accent-green);
|
||||
padding: 28px;
|
||||
margin: 36px 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.dock-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.dock-title-block h3 {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.dock-title-block p { font-size: 13px; color: var(--ink-muted); font-family: 'Inter', sans-serif; }
|
||||
.dock-items-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.dock-item-box {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border-hairline);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.dock-badge {
|
||||
align-self: flex-start;
|
||||
background: var(--accent-green-light);
|
||||
color: var(--accent-green);
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 9.5px;
|
||||
font-weight: 700;
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.dock-item-box h4 { font-family: 'Newsreader', serif; font-size: 19px; font-weight: 700; }
|
||||
.dock-item-box p { font-size: 13px; color: var(--ink-secondary); line-height: 1.45; margin-bottom: 8px; }
|
||||
.dock-btn {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--accent-green);
|
||||
text-decoration: none;
|
||||
margin-top: auto;
|
||||
}
|
||||
.dock-btn:hover { text-decoration: underline; }
|
||||
|
||||
/* NYT MASTER FOOTER */
|
||||
footer.master-footer {
|
||||
border-top: 3px double var(--border-bold);
|
||||
padding: 48px 0 32px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
.footer-logo-row {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
}
|
||||
.footer-logo {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
.footer-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 32px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.footer-col h5 {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 12px;
|
||||
color: var(--ink-primary);
|
||||
}
|
||||
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
|
||||
.footer-col a { color: var(--ink-secondary); text-decoration: none; }
|
||||
.footer-col a:hover { color: var(--accent-green); }
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11.5px;
|
||||
color: var(--ink-muted);
|
||||
border-top: 1px solid var(--border-hairline);
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 1. NYT TOP UTILITY & TELEMETRY STRIP -->
|
||||
<div class="top-utility-bar">
|
||||
<div class="util-left">
|
||||
<span class="util-date">Saturday, October 10, 2026</span>
|
||||
<span>•</span>
|
||||
<span>28 Rabi' al-Awwal 1448</span>
|
||||
<span>•</span>
|
||||
<span>Today's Broadsheet</span>
|
||||
</div>
|
||||
<div class="util-center">
|
||||
<span>GOLD NISAB: <strong>RM 32,450 / 85g</strong> <span class="util-badge">+0.4%</span></span>
|
||||
<span>•</span>
|
||||
<span>SILVER NISAB: <strong>RM 2,890</strong></span>
|
||||
<span>•</span>
|
||||
<span>5Y SUKUK: <strong>4.82%</strong></span>
|
||||
</div>
|
||||
<div class="util-right">
|
||||
<a href="#">Member Portal</a>
|
||||
<a href="#" class="sub-btn">Subscribe • $9.99/mo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- 2. THE GRAND BROADSHEET MASTHEAD (NYT Centered Style) -->
|
||||
<header class="masthead">
|
||||
<div class="masthead-inner">
|
||||
<div class="masthead-edition">
|
||||
<span>Vol. IV · No. 142</span><br>
|
||||
<span>Kuala Lumpur · London · Jeddah</span>
|
||||
</div>
|
||||
<div class="brand-center">
|
||||
<div class="brand-logo">
|
||||
<span>IQRA</span>
|
||||
<span class="brand-arabic">« إقرأ »</span>
|
||||
</div>
|
||||
<div class="masthead-motto">The Broadsheet of Islamic Family Office, Geopolitical Intelligence & Shifa</div>
|
||||
</div>
|
||||
<div class="masthead-weather-fx">
|
||||
<span>Zakat Engine: Active</span><br>
|
||||
<span>AAOIFI Standards Ref: 2026.4</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NYT HORIZONTAL SECTION NAV -->
|
||||
<nav class="section-nav">
|
||||
<a href="#" class="active">Front Page</a>
|
||||
<a href="#">Wealth & Succession</a>
|
||||
<a href="#">Tibb & Shifa</a>
|
||||
<a href="#">Geopolitical Intelligence</a>
|
||||
<a href="#">Islamic Philosophy</a>
|
||||
<a href="#">Calculators & Nisab</a>
|
||||
<a href="#">The Store</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- 3. NYT FRONT-PAGE ABOVE-THE-FOLD LEAD GRID (3-ZONE ARCHITECTURE) -->
|
||||
<section class="lead-grid">
|
||||
<!-- ZONE 1: LEFT LEAD INVESTIGATION (32%) -->
|
||||
<div class="zone-left">
|
||||
<div>
|
||||
<span class="kicker">Estate Structuring • Lead Investigation</span>
|
||||
<h1 class="main-headline">
|
||||
<a href="#">The Family Constitution Architecture: Protecting Intergenerational Amanah Under Cross-Border Shariah Governance</a>
|
||||
</h1>
|
||||
<p class="lead-prose">
|
||||
<span class="dateline">Kuala Lumpur —</span> As ultra-high-net-worth Muslim lineages encounter global regulatory divergence and estate fragmentation, traditional wills fail. Here is how modern multi-family offices execute layered Waqf Ahli and Hibah trust deeds without compromising Faraid distribution.
|
||||
</p>
|
||||
|
||||
<!-- SEMAFOR-STYLE STRUCTURED TAKEAWAY DRAWER (From Design 3) -->
|
||||
<div class="takeaway-drawer">
|
||||
<div class="takeaway-row">
|
||||
<span class="takeaway-tag">The Signal</span>
|
||||
<span>Over 24 multi-family offices in Southeast Asia adopted dual-jurisdiction Waqf deeds in Q3 2026 to protect real estate and operating companies.</span>
|
||||
</div>
|
||||
<div class="takeaway-row">
|
||||
<span class="takeaway-tag">The Fiqh</span>
|
||||
<span>Layered lifetime Hibah transfers prevent statutory probate freezing while honoring the core Shariah inheritance boundaries.</span>
|
||||
</div>
|
||||
<div class="takeaway-row">
|
||||
<span class="takeaway-tag">The Exposure</span>
|
||||
<span>Holding dollar-denominated assets offshore exposes families to currency volatility and sudden cross-border banking restrictions.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="byline-text">
|
||||
By <strong>Dr. Tariq Al-Amiri</strong> · Senior Jurist · 18 min read
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- COMPANION SECONDARY STORY -->
|
||||
<div class="secondary-package-story">
|
||||
<span class="kicker" style="color: var(--accent-burgundy);">Juristic Jurisprudence</span>
|
||||
<h3><a href="#">High Court Clarifies Priority Ranking of Matrimonial Harta Sepencarian vs Faraid Estates</a></h3>
|
||||
<p style="font-size: 14px; color: var(--ink-secondary); line-height: 1.45;">
|
||||
A landmark judgment establishes the pre-probate settlement timeline for surviving spouses before residual kin division.
|
||||
</p>
|
||||
<div class="byline-text">4 min read · Estate Desk</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZONE 2: CENTER VISUAL ANCHOR & STORIES (43%) -->
|
||||
<div class="zone-center">
|
||||
<div class="visual-anchor">
|
||||
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80" alt="Financial Sovereign Center">
|
||||
</div>
|
||||
<div class="photo-caption">
|
||||
Sovereign financial districts in Kuala Lumpur and Singapore are accelerating bilateral trade clearance outside dollar hegemony. <span class="photo-credit">Falah Press / Archival</span>
|
||||
</div>
|
||||
|
||||
<div class="center-story">
|
||||
<span class="kicker">Geopolitical Risk & Sovereign Capital</span>
|
||||
<h2><a href="#">The Strait of Malacca Chokepoint: How ASEAN Central Banks Counter Sovereign Energy Sanctions</a></h2>
|
||||
<p style="font-size: 15px; color: var(--ink-secondary); line-height: 1.55;">
|
||||
An unannounced bifurcation in maritime energy settlements is taking shape as national currencies replace dollar clearing across regional trade arteries.
|
||||
</p>
|
||||
<div class="byline-text">By <strong>Farhan Idris</strong> · Resource Strategist · 7 min read</div>
|
||||
</div>
|
||||
|
||||
<!-- DUAL SUB-SPLIT (NYT Column Split) -->
|
||||
<div class="center-dual-split">
|
||||
<div class="mini-card">
|
||||
<span class="kicker">The Shifa Desk</span>
|
||||
<h4><a href="#">Neuro-Theology & Fasting: The Cellular Biology of Tazkiyah</a></h4>
|
||||
<p>Clinical data reconciling autophagy with Prophetic fasting schedules and emotional homeostasis.</p>
|
||||
<div class="byline-text">Dr. Hakim Zainur · 11m</div>
|
||||
</div>
|
||||
|
||||
<div class="mini-card" style="padding-left: 18px; border-left: 1px solid var(--border-hairline);">
|
||||
<span class="kicker">Classical Thought</span>
|
||||
<h4><a href="#">Ibn Khaldun's Cyclical Model of Sovereign Debt & Decay</a></h4>
|
||||
<p>Lessons from fourteenth-century statecraft on why excessive taxation fractures capital accumulation.</p>
|
||||
<div class="byline-text">Maryam Al-Andalusi · 14m</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZONE 3: RIGHT OPINION RAIL & DISPATCHES (25% - NYT Opinion Rail Style) -->
|
||||
<div class="zone-right">
|
||||
<div class="rail-header">
|
||||
<span>Opinion & Columns</span>
|
||||
<span style="color: var(--accent-green);">Voices of Iqra</span>
|
||||
</div>
|
||||
|
||||
<!-- THE JAUHARI COLUMN (NYT Lead Columnist Spotlight) -->
|
||||
<div class="jauhari-opinion-card">
|
||||
<div class="jauhari-meta">
|
||||
<div class="jauhari-cutout">
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80" alt="Jauhari Che Wan">
|
||||
</div>
|
||||
<div class="jauhari-name-block">
|
||||
<div class="jauhari-author-name">Jauhari Che Wan</div>
|
||||
<div class="jauhari-title-tag">The Jauhari Column</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3><a href="#">"On Sovereign Independence: Why Muslim Capital Requires Independent Rail"</a></h3>
|
||||
<p style="font-size: 13.5px; color: #D5C8BD; line-height: 1.5;">
|
||||
"True wealth sovereignty is the disciplined stewardship of capital, institutions, and algorithmic truth aligned with Divine Amanah."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- VOICES OF IQRA FELLOWS STACK (NYT Columnist Headshot Rows) -->
|
||||
<div class="columnist-item">
|
||||
<div class="columnist-avatar">
|
||||
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&q=80" alt="Dr. Tariq">
|
||||
</div>
|
||||
<div class="columnist-content">
|
||||
<span class="columnist-byline">Dr. Tariq Al-Amiri</span>
|
||||
<span class="columnist-author-title">Wealth & Succession Column</span>
|
||||
<div class="columnist-headline"><a href="#">Faraid, Hibah & Waqf Ahli as a Tripartite Defence for Families</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columnist-item">
|
||||
<div class="columnist-avatar">
|
||||
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=200&q=80" alt="Dr. Hakim">
|
||||
</div>
|
||||
<div class="columnist-content">
|
||||
<span class="columnist-byline">Dr. Hakim Zainur</span>
|
||||
<span class="columnist-author-title">The Shifa Desk</span>
|
||||
<div class="columnist-headline"><a href="#">Curing Cognitive Distortions Through Islamic Reframing</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columnist-item">
|
||||
<div class="columnist-avatar">
|
||||
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200&q=80" alt="Maryam">
|
||||
</div>
|
||||
<div class="columnist-content">
|
||||
<span class="columnist-byline">Maryam Al-Andalusi</span>
|
||||
<span class="columnist-author-title">The Classical Polymath</span>
|
||||
<div class="columnist-headline"><a href="#">Andalusian Statecraft and the Preservation of Heritage</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAST INTELLIGENCE DISPATCHES -->
|
||||
<div class="wire-block">
|
||||
<div style="font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-burgundy); margin-bottom: 8px;">
|
||||
The Wire • Live Intelligence
|
||||
</div>
|
||||
<div class="wire-item">
|
||||
<span class="wire-time">14m ago • BNM Pilot</span>
|
||||
<div class="wire-title"><a href="#">Ringgit-pegged wholesale digital money enters pilot phase with 6 Islamic lenders.</a></div>
|
||||
</div>
|
||||
<div class="wire-item">
|
||||
<span class="wire-time">1h ago • AAOIFI Fiqh</span>
|
||||
<div class="wire-title"><a href="#">Updated standards for digital sukuk tokenisation and purification rules.</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. COMPUTATIONAL SUITE & ENGINES (NYT Inset Games/Interactives Structure) -->
|
||||
<section class="computational-dock">
|
||||
<div class="dock-header">
|
||||
<div class="dock-title-block">
|
||||
<h3>Quantitative Suite & Shariah Algorithmic Engines</h3>
|
||||
<p>Proprietary mathematical tools maintained by Darul Falah Research Desk</p>
|
||||
</div>
|
||||
<a href="#" style="font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--accent-green); text-decoration: none;">View All Engines →</a>
|
||||
</div>
|
||||
|
||||
<div class="dock-items-row">
|
||||
<div class="dock-item-box">
|
||||
<span class="dock-badge">Jurisprudence Solver</span>
|
||||
<h4>Interactive Faraid Estate Engine</h4>
|
||||
<p>Audit estate distributions across 24 kin categories under classical Islamic inheritance mathematics with judicial reporting.</p>
|
||||
<a href="#" class="dock-btn">Launch Solver →</a>
|
||||
</div>
|
||||
|
||||
<div class="dock-item-box">
|
||||
<span class="dock-badge">Balance-Sheet Auditor</span>
|
||||
<h4>Zakat 2.0 Portfolio Purification</h4>
|
||||
<p>Automated balance-sheet deduction and real-time Nisab valuation for private equity, equities, and liquid reserves.</p>
|
||||
<a href="#" class="dock-btn">Calculate Zakat →</a>
|
||||
</div>
|
||||
|
||||
<div class="dock-item-box">
|
||||
<span class="dock-badge">Succession Protocol</span>
|
||||
<h4>Digital Waqf Ahli Constitution</h4>
|
||||
<p>Interactive structuring template for intergenerational family office trusts, family governance, and asset dossiers.</p>
|
||||
<a href="#" class="dock-btn">Configure Waqf →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. NYT HORIZONTAL SECTION RIBBONS (Mid-Page Topic Hubs) -->
|
||||
<section class="section-ribbon">
|
||||
<div class="ribbon-header">
|
||||
<h3 class="ribbon-title">Islamic Finance & Sovereign Wealth</h3>
|
||||
<a href="#" class="ribbon-more">View Section Archive →</a>
|
||||
</div>
|
||||
|
||||
<div class="ribbon-grid-4">
|
||||
<div class="ribbon-card">
|
||||
<div class="ribbon-thumb">
|
||||
<img src="https://images.unsplash.com/photo-1559526324-4b87b5e36e44?auto=format&fit=crop&w=600&q=80" alt="Islamic Finance">
|
||||
</div>
|
||||
<span class="kicker">Fintech • Stablecoins</span>
|
||||
<h4><a href="#">Malaysia's Ringgit Stablecoin Pilot: A First Real Test for Shariah-Compliant Digital Money</a></h4>
|
||||
<p>Analyzing collateralization ratios and reserve transparency under Central Bank supervision.</p>
|
||||
</div>
|
||||
|
||||
<div class="ribbon-card">
|
||||
<span class="kicker">Private Equity</span>
|
||||
<h4><a href="#">Mudarabah vs Musharakah in Modern Venture Debt Structuring</a></h4>
|
||||
<p>How family offices balance downside principal protection with equity-sharing fiqh principles.</p>
|
||||
</div>
|
||||
|
||||
<div class="ribbon-card">
|
||||
<span class="kicker">Waqf Assets</span>
|
||||
<h4><a href="#">Revitalizing Idle Urban Waqf Real Estate Through Green Sukuk Tranches</a></h4>
|
||||
<p>Case study on financing institutional development without privatizing endowment title.</p>
|
||||
</div>
|
||||
|
||||
<div class="ribbon-card">
|
||||
<span class="kicker">Dividend Purification</span>
|
||||
<h4><a href="#">Calculating Impermissible Income Proportions in Modern Global Tech ETFs</a></h4>
|
||||
<p>A rigorous audit methodology using AAOIFI and SAC Malaysia screening benchmarks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- NYT MASTER FOOTER -->
|
||||
<footer class="master-footer">
|
||||
<div class="footer-logo-row">
|
||||
<div class="footer-logo">IQRA</div>
|
||||
<div style="font-family: 'Newsreader', serif; font-style: italic; font-size: 13.5px; color: var(--ink-muted); margin-top: 4px;">
|
||||
The Journal of Islamic Wealth, Sovereign Statecraft & Shifa
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-columns">
|
||||
<div class="footer-col">
|
||||
<h5>NEWS & ESSAYS</h5>
|
||||
<ul>
|
||||
<li><a href="#">Front Page</a></li>
|
||||
<li><a href="#">Wealth & Succession</a></li>
|
||||
<li><a href="#">Tibb & Shifa</a></li>
|
||||
<li><a href="#">Geopolitical Risk</a></li>
|
||||
<li><a href="#">Philosophy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>EDITORIAL BOARD</h5>
|
||||
<ul>
|
||||
<li><a href="#">The Jauhari Column</a></li>
|
||||
<li><a href="#">Dr. Tariq Al-Amiri</a></li>
|
||||
<li><a href="#">Dr. Hakim Zainur Rahman</a></li>
|
||||
<li><a href="#">Maryam Al-Andalusi</a></li>
|
||||
<li><a href="#">Farhan Idris</a></li>
|
||||
<li><a href="#">Darul Falah Desk</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>COMPUTATIONAL SUITE</h5>
|
||||
<ul>
|
||||
<li><a href="#">Faraid Estate Solver</a></li>
|
||||
<li><a href="#">Zakat 2.0 Engine</a></li>
|
||||
<li><a href="#">Nisab Today Index</a></li>
|
||||
<li><a href="#">Family Constitution</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>STORE & PUBLICATIONS</h5>
|
||||
<ul>
|
||||
<li><a href="#">Digital Playbooks</a></li>
|
||||
<li><a href="#">Faraid Workbook</a></li>
|
||||
<li><a href="#">Learning Packs</a></li>
|
||||
<li><a href="#">Subscriber Passes</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>INSTITUTION</h5>
|
||||
<ul>
|
||||
<li><a href="#">About Iqra</a></li>
|
||||
<li><a href="#">Editorial Charter</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
<li><a href="#">Contact Desk</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
© 2026 Iqra · Darul Falah Publishing House. Published in Kuala Lumpur & London. All rights reserved.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Iqra Editorial UI/UX Proposals — Review Dashboard</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0f1117; color: #f0f3f6; padding: 40px 24px; }
|
||||
.wrap { max-width: 1200px; margin: 0 auto; }
|
||||
h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; color: #fff; }
|
||||
p.subtitle { font-size: 16px; color: #8b949e; margin-bottom: 32px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
|
||||
.card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; }
|
||||
.card:hover { transform: translateY(-4px); border-color: #58a6ff; }
|
||||
.card.featured { border: 2px solid #238636; }
|
||||
.card-img-wrap { width: 100%; height: 320px; overflow: hidden; background: #0d1117; position: relative; border-bottom: 1px solid #30363d; }
|
||||
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
|
||||
.badge { position: absolute; top: 12px; left: 12px; background: #238636; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.card-content { padding: 20px; display: flex; flex-direction: column; flex: 1; }
|
||||
.card-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; }
|
||||
.card-desc { font-size: 14px; color: #8b949e; line-height: 1.5; margin-bottom: 20px; flex: 1; }
|
||||
.card-actions { display: flex; gap: 12px; }
|
||||
.btn { padding: 10px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; }
|
||||
.btn-primary { background: #238636; color: #fff; flex: 1; }
|
||||
.btn-primary:hover { background: #2ea043; }
|
||||
.btn-secondary { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; }
|
||||
.btn-secondary:hover { background: #30363d; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<h1>Iqra Editorial UI/UX Proposals</h1>
|
||||
<p class="subtitle">Review the high-fidelity prototypes and full renders below. Click "Open Prototype" to view the live responsive HTML.</p>
|
||||
|
||||
<div class="grid">
|
||||
<!-- DIRECTION 4 (HYBRID: FT/TERMINAL + NYT) -->
|
||||
<div class="card featured">
|
||||
<div class="card-img-wrap">
|
||||
<span class="badge">Recommended Hybrid</span>
|
||||
<img src="previews/ft_nyt_hybrid_preview.png" alt="Direction 4 Preview">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Direction 4: The Sovereign Broadsheet (FT & NYT Hybrid)</h2>
|
||||
<p class="card-desc">Blends the warm broadsheet aesthetics and live telemetry of Designs 1 & 3 with the 3-zone front-page architecture of The New York Times (Lead Package, Visual Anchor, and Voices of Iqra Opinion Rail).</p>
|
||||
<div class="card-actions">
|
||||
<a href="direction-4-herald-broadsheet.html" class="btn btn-primary" target="_blank">Open Interactive Prototype →</a>
|
||||
<a href="previews/ft_nyt_hybrid_preview.png" class="btn btn-secondary" target="_blank">Full Render PNG</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIRECTION 1 (FT.COM BENCHMARK) -->
|
||||
<div class="card">
|
||||
<div class="card-img-wrap">
|
||||
<span class="badge" style="background: #0E4D36;">FT.com Benchmark</span>
|
||||
<img src="previews/ft_gazette_preview.png" alt="Direction 1 Preview">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Direction 1: The Falah Gazette (FT Benchmark)</h2>
|
||||
<p class="card-desc">Signature FT warm salmon-linen paper (#FFF1E5), double-rule broadsheet masthead, live Nisab top ticker, asymmetric 3-column lead, The Jauhari Column, and Voices of Iqra 5-fellow horizontal rail.</p>
|
||||
<div class="card-actions">
|
||||
<a href="direction-1-falah-gazette.html" class="btn btn-primary" target="_blank">Open Interactive Prototype →</a>
|
||||
<a href="previews/ft_gazette_preview.png" class="btn btn-secondary" target="_blank">Full Render PNG</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIRECTION 3 (TERMINAL INTELLIGENCE) -->
|
||||
<div class="card">
|
||||
<div class="card-img-wrap">
|
||||
<span class="badge" style="background: #026E54;">Bloomberg / Semafor</span>
|
||||
<img src="previews/sovereign_rail_preview.png" alt="Direction 3 Preview">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Direction 3: Sukuk & Sovereign Rail</h2>
|
||||
<p class="card-desc">Modern financial intelligence terminal with Semafor-style structured takeaway micro-drawers (The Signal, The Fiqh, The Exposure) and an interactive quantitative suite dock.</p>
|
||||
<div class="card-actions">
|
||||
<a href="direction-3-sovereign-rail.html" class="btn btn-primary" target="_blank">Open Interactive Prototype →</a>
|
||||
<a href="previews/sovereign_rail_preview.png" class="btn btn-secondary" target="_blank">Full Render PNG</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIRECTION 2 (AL-QALAM REVIEW) -->
|
||||
<div class="card">
|
||||
<div class="card-img-wrap">
|
||||
<span class="badge" style="background: #165B33;">Scholarly Journal</span>
|
||||
<img src="previews/alqalam_review_preview.png" alt="Direction 2 Preview">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Direction 2: Al-Qalam Review</h2>
|
||||
<p class="card-desc">Foreign Affairs and London Review of Books aesthetic. Generous whitespace on book-stock ivory paper, single-column grand monograph with pull-quotes and classical drop-caps.</p>
|
||||
<div class="card-actions">
|
||||
<a href="direction-2-alqalam-review.html" class="btn btn-primary" target="_blank">Open Interactive Prototype →</a>
|
||||
<a href="previews/alqalam_review_preview.png" class="btn btn-secondary" target="_blank">Full Render PNG</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 695 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 509 KiB |
Reference in New Issue
Block a user