Add full editorial UI redesign suite: Directions 1-4, review dashboard, and high-res renders

This commit is contained in:
wmj
2026-10-10 14:10:59 +08:00
parent a17eac6ed7
commit 6fa424bab7
10 changed files with 2085 additions and 1574 deletions
@@ -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>&bull;</span>
<span>28 Rabi' al-Awwal 1448</span>
<span>&bull;</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>&bull;</span>
<span>SILVER NISAB: <strong>RM 2,890</strong></span>
<span>&bull;</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 &bull; $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 &middot; No. 142</span><br>
<span>Kuala Lumpur &middot; London &middot; 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 &bull; 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> &middot; Senior Jurist &middot; 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 &middot; 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> &middot; Resource Strategist &middot; 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 &middot; 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 &middot; 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 &bull; Live Intelligence
</div>
<div class="wire-item">
<span class="wire-time">14m ago &bull; 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 &bull; 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 &rarr;</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 &rarr;</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 &rarr;</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 &rarr;</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 &rarr;</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 &bull; 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">
&copy; 2026 Iqra &middot; Darul Falah Publishing House. Published in Kuala Lumpur & London. All rights reserved.
</div>
</footer>
</div>
</body>
</html>