Files
falah-ft-theme/design-proposals/direction-1-falah-gazette.html

590 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iqra — The Falah Gazette (Direction 1: FT & Monocle Heritage)</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@600;700;900&family=Newsreader:ital,opsz,wght@0,6..72,400;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&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg-paper: #FFF1E5;
--bg-card: #F7EAE0;
--ink-primary: #111111;
--ink-secondary: #5A544E;
--ink-muted: #857D75;
--accent-green: #0E4D36;
--accent-burgundy: #9E2A2B;
--border-hairline: #E2D3C4;
--border-dark: #111111;
--ticker-bg: #211E1C;
}
* { 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: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* TOP MARKET & NISAB TICKER */
.top-ticker {
background: var(--ticker-bg);
color: #EBDBC9;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
padding: 7px 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #332F2C;
}
.ticker-items { display: flex; gap: 20px; align-items: center; }
.ticker-item strong { color: #fff; font-family: 'JetBrains Mono', monospace; }
.ticker-badge { background: var(--accent-green); color: #fff; padding: 2px 6px; border-radius: 2px; font-size: 9px; font-weight: 700; text-transform: uppercase; }
/* CONTAINER */
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
/* MASTHEAD */
header.masthead {
border-bottom: 3px double var(--border-dark);
padding: 24px 0 16px;
text-align: center;
position: relative;
}
.masthead-meta-top {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-secondary);
border-bottom: 1px solid var(--border-hairline);
padding-bottom: 8px;
margin-bottom: 16px;
}
.brand-title {
font-family: 'Cinzel', serif;
font-size: 58px;
font-weight: 900;
letter-spacing: 0.16em;
color: var(--ink-primary);
line-height: 1;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.brand-title .arabic-watermark {
font-family: 'Newsreader', serif;
font-style: italic;
font-weight: 400;
font-size: 42px;
color: var(--accent-green);
}
.masthead-subtitle {
font-family: 'Newsreader', serif;
font-style: italic;
font-size: 16px;
color: var(--ink-secondary);
margin-bottom: 16px;
}
/* NAVIGATION BAR */
nav.main-nav {
border-top: 1px solid var(--border-hairline);
padding: 10px 0;
display: flex;
justify-content: center;
gap: 28px;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
nav.main-nav a { color: var(--ink-primary); text-decoration: none; transition: color 0.15s; }
nav.main-nav a:hover { color: var(--accent-green); }
nav.main-nav a.active { color: var(--accent-green); border-bottom: 2px solid var(--accent-green); padding-bottom: 2px; }
/* HERO TRIO GRID */
.hero-trio {
display: grid;
grid-template-columns: 5.5fr 2.5fr 2fr;
gap: 28px;
padding: 32px 0;
border-bottom: 1px solid var(--border-hairline);
}
.hero-main {
padding-right: 28px;
border-right: 1px solid var(--border-hairline);
}
.kicker {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent-green);
margin-bottom: 8px;
display: block;
}
.hero-headline {
font-family: 'Newsreader', serif;
font-size: 44px;
line-height: 1.14;
font-weight: 700;
color: var(--ink-primary);
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.hero-headline a { color: inherit; text-decoration: none; }
.hero-headline a:hover { color: var(--accent-green); }
.hero-img-wrap {
width: 100%;
height: 320px;
background: #D8C8B8;
margin-bottom: 16px;
overflow: hidden;
border-radius: 2px;
border: 1px solid var(--border-hairline);
position: relative;
}
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.hero-excerpt {
font-size: 18px;
line-height: 1.6;
color: var(--ink-secondary);
margin-bottom: 14px;
}
.byline {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: var(--ink-muted);
display: flex;
align-items: center;
gap: 8px;
}
.byline strong { color: var(--ink-primary); }
/* COLUMN 2: ANALYTICAL ESSAYS */
.hero-middle {
padding-right: 28px;
border-right: 1px solid var(--border-hairline);
display: flex;
flex-direction: column;
gap: 28px;
}
.story-card { display: flex; flex-direction: column; gap: 8px; }
.story-title {
font-family: 'Newsreader', serif;
font-size: 24px;
line-height: 1.25;
font-weight: 600;
}
.story-title a { color: inherit; text-decoration: none; }
.story-title a:hover { color: var(--accent-green); }
.story-card p { font-size: 15px; color: var(--ink-secondary); line-height: 1.5; }
/* COLUMN 3: THE WIRE (FASTFT STYLE) */
.hero-wire {
background: var(--bg-card);
padding: 20px;
border: 1px solid var(--border-hairline);
border-top: 3px solid var(--accent-burgundy);
}
.wire-header {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-burgundy);
margin-bottom: 16px;
border-bottom: 1px solid var(--border-hairline);
padding-bottom: 8px;
}
.wire-item {
padding: 12px 0;
border-bottom: 1px solid var(--border-hairline);
}
.wire-item:last-child { border-bottom: none; }
.wire-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-muted); margin-bottom: 4px; display: block; }
.wire-item h4 { font-family: 'Source Serif 4', serif; font-size: 15px; font-weight: 600; line-height: 1.35; }
.wire-item h4 a { color: inherit; text-decoration: none; }
.wire-item h4 a:hover { color: var(--accent-green); }
/* VOICES OF IQRA: EDITORIAL FELLOWS RAIL */
.editorial-rail {
padding: 36px 0;
border-bottom: 1px solid var(--border-hairline);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 24px;
border-bottom: 2px solid var(--border-dark);
padding-bottom: 8px;
}
.section-title {
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.section-label { font-family: 'Newsreader', serif; font-style: italic; font-size: 15px; color: var(--ink-secondary); }
.fellows-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.fellow-card {
background: var(--bg-card);
border: 1px solid var(--border-hairline);
padding: 18px;
display: flex;
flex-direction: column;
gap: 10px;
transition: all 0.2s ease;
}
.fellow-card:hover { border-color: var(--accent-green); background: #FAF0E6; }
.fellow-badge {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: var(--accent-green);
letter-spacing: 0.08em;
}
.fellow-name {
font-family: 'Newsreader', serif;
font-size: 19px;
font-weight: 700;
line-height: 1.2;
color: var(--ink-primary);
}
.fellow-role { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--ink-secondary); font-weight: 500; }
.fellow-latest {
font-family: 'Source Serif 4', serif;
font-size: 13.5px;
font-style: italic;
color: var(--ink-primary);
line-height: 1.4;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--border-hairline);
}
/* JAUHARI COLUMN HERO */
.jauhari-column-hero {
background: #201D1A;
color: #FFF1E5;
padding: 32px;
margin: 32px 0;
border-radius: 2px;
display: grid;
grid-template-columns: 140px 1fr;
gap: 32px;
align-items: center;
}
.jauhari-avatar {
width: 130px;
height: 130px;
border-radius: 50%;
border: 3px solid var(--accent-green);
background: #3B3632;
overflow: hidden;
}
.jauhari-avatar img { width: 100%; height: 100%; object-fit: cover; }
.jauhari-tag {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #92C5B2;
margin-bottom: 8px;
display: block;
}
.jauhari-title {
font-family: 'Newsreader', serif;
font-size: 32px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 12px;
color: #FFF1E5;
}
.jauhari-title a { color: inherit; text-decoration: none; }
.jauhari-title a:hover { color: #92C5B2; }
.jauhari-desc { font-size: 16px; color: #D1C4B7; line-height: 1.6; max-width: 850px; }
/* QUANTITATIVE ENGINES STRIP */
.engines-strip {
padding: 32px 0;
border-bottom: 1px solid var(--border-hairline);
}
.engines-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.engine-card {
border: 1px solid var(--border-hairline);
border-top: 4px solid var(--accent-green);
background: #fff;
padding: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.engine-card h3 { font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.engine-card p { font-size: 14px; color: var(--ink-secondary); max-width: 380px; }
.engine-btn {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
background: var(--accent-green);
color: #fff;
padding: 12px 20px;
text-decoration: none;
border-radius: 2px;
white-space: nowrap;
}
.engine-btn:hover { background: #0A3827; }
/* FOOTER */
footer.site-footer {
border-top: 3px double var(--border-dark);
padding: 40px 0;
text-align: center;
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--ink-secondary);
}
</style>
</head>
<body>
<!-- REAL-TIME SUQ & NISAB TICKER -->
<div class="top-ticker">
<div class="ticker-items">
<span>ISLAMIC CALENDAR: <strong>28 RABI' AL-AWWAL 1448</strong></span>
<span>&bull;</span>
<span>GOLD NISAB: <strong>RM 32,450 / 85g</strong> <span class="ticker-badge">+0.4%</span></span>
<span>&bull;</span>
<span>SILVER NISAB: <strong>RM 2,890 / 595g</strong></span>
<span>&bull;</span>
<span>TOKENISED SUKUK 5Y: <strong>4.82%</strong></span>
</div>
<div>
<span style="color: #A39B93;">KUALA LUMPUR &middot; LONDON &middot; JEDDAH</span>
</div>
</div>
<div class="container">
<!-- FORMAL BROADSHEET MASTHEAD -->
<header class="masthead">
<div class="masthead-meta-top">
<span>The Sovereign Journal of Islamic Wealth, Governance & Shifa</span>
<span>VOL. IV &middot; NO. 142 &middot; SATURDAY EDITION</span>
<span>MEMBER PORTAL &bull; SIGN IN</span>
</div>
<div class="brand-title">
<span>IQRA</span>
<span class="arabic-watermark">« إقرأ »</span>
</div>
<div class="masthead-subtitle">The Broadsheet of Islamic Family Office, Geopolitical Intelligence & Classical Civilizational Polymathy</div>
<nav class="main-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="#">Faraid & Nisab Engines</a>
<a href="#">Digital Library</a>
</nav>
</header>
<!-- ASYMMETRIC LEAD TRIO GRID -->
<section class="hero-trio">
<!-- COL 1: LEAD INVESTIGATION (55%) -->
<div class="hero-main">
<span class="kicker">Sovereign Asset Structuring &bull; Lead Investigation</span>
<h1 class="hero-headline">
<a href="#">The Family Constitution Architecture: Protecting Intergenerational Amanah Under Cross-Border Shariah Governance</a>
</h1>
<div class="hero-img-wrap">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80" alt="Sovereign Architecture">
</div>
<p class="hero-excerpt">
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>
<div class="byline">
By <strong>Dr. Tariq Al-Amiri</strong> &middot; Senior Jurist &middot; 18 min read &middot; October 2026
</div>
</div>
<!-- COL 2: IN-DEPTH ANALYSES (25%) -->
<div class="hero-middle">
<div class="story-card">
<span class="kicker" style="color: var(--accent-burgundy);">Geopolitical Risk</span>
<h2 class="story-title">
<a href="#">The Strait of Malacca Chokepoint: How ASEAN Central Banks Counter Sovereign Energy Sanctions</a>
</h2>
<p>Analysis of shadow oil logistics, non-dollar bilateral settlement corridors, and sovereign liquidity buffering.</p>
<div class="byline">By <strong>Farhan Idris</strong> &middot; 7 min read</div>
</div>
<div class="story-card" style="border-top: 1px solid var(--border-hairline); padding-top: 20px;">
<span class="kicker">The Shifa Desk &bull; Tibb Nabawi</span>
<h2 class="story-title">
<a href="#">Neuro-Theology & Fasting: The Cellular Biology of Tazkiyah an-Nafs</a>
</h2>
<p>Clinical data reconciling autophagy with Prophetic fasting schedules, circadian prayer rhythms, and emotional homeostasis.</p>
<div class="byline">By <strong>Dr. Hakim Zainur Rahman</strong> &middot; 11 min read</div>
</div>
</div>
<!-- COL 3: THE WIRE / FASTFT STREAM (20%) -->
<div class="hero-wire">
<div class="wire-header">
<span>The Iqra Wire</span>
<span>Live Dispatches</span>
</div>
<div class="wire-item">
<span class="wire-time">14m ago &bull; Market Intel</span>
<h4><a href="#">Bank Negara Malaysia advances ringgit-pegged wholesale digital currency pilot.</a></h4>
</div>
<div class="wire-item">
<span class="wire-time">1h ago &bull; Juridical Advisory</span>
<h4><a href="#">AAOIFI publishes revised standard on cross-border private equity Zakat treatment.</a></h4>
</div>
<div class="wire-item">
<span class="wire-time">3h ago &bull; Estate Structuring</span>
<h4><a href="#">High Court clarifies priority ranking of joint tenancy vs matrimonial Faraid assets.</a></h4>
</div>
<div class="wire-item">
<span class="wire-time">5h ago &bull; Philosophy</span>
<h4><a href="#">Darul Falah releases unedited translation of Ibn Khaldun's chapter on sovereign coinage.</a></h4>
</div>
</div>
</section>
<!-- THE JAUHARI COLUMN SPOTLIGHT -->
<section class="jauhari-column-hero">
<div class="jauhari-avatar">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=300&q=80" alt="Jauhari Che Wan">
</div>
<div>
<span class="jauhari-tag">The Jauhari Column &middot; Warkah Pengarang</span>
<h2 class="jauhari-title">
<a href="#">On Sovereign Independence: Why Muslim Capital Must Construct Its Own Computational & Financial Rail</a>
</h2>
<p class="jauhari-desc">
"True wealth sovereignty is neither speculative accumulation nor reactionary withdrawal. It is the disciplined stewardship of capital, institutions, and algorithmic truth aligned with Divine Amanah."
</p>
<div class="byline" style="color: #C2B6A9; margin-top: 10px;">
Jauhari Che Wan &middot; Editor-in-Chief & Publisher &middot; <a href="#" style="color: #92C5B2;">Read all column essays &rarr;</a>
</div>
</div>
</section>
<!-- VOICES OF IQRA: EDITORIAL BOARD RAIL -->
<section class="editorial-rail">
<div class="section-header">
<div>
<h2 class="section-title">Voices of Iqra</h2>
<span class="section-label">Institutional Chairs & Editorial Fellows</span>
</div>
<a href="#" style="font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--accent-green); text-transform: uppercase;">View All Fellows &rarr;</a>
</div>
<div class="fellows-grid">
<div class="fellow-card">
<span class="fellow-badge">Juridical Counsel</span>
<h3 class="fellow-name">Dr. Tariq Al-Amiri</h3>
<span class="fellow-role">Senior Jurist & Estate Counsel</span>
<div class="fellow-latest">"Faraid, Hibah & Waqf Ahli as a Tripartite Defence" &rarr;</div>
</div>
<div class="fellow-card">
<span class="fellow-badge">Clinical Medicine</span>
<h3 class="fellow-name">Dr. Hakim Zainur</h3>
<span class="fellow-role">Integrative Physician & Researcher</span>
<div class="fellow-latest">"Curing Cognitive Distortions Through Islamic Reframing" &rarr;</div>
</div>
<div class="fellow-card">
<span class="fellow-badge">Intellectual History</span>
<h3 class="fellow-name">Maryam Al-Andalusi</h3>
<span class="fellow-role">Manuscript Fellow & Historian</span>
<div class="fellow-latest">"Ibn Khaldun's Cyclical Model of Sovereign Debt" &rarr;</div>
</div>
<div class="fellow-card">
<span class="fellow-badge">Geopolitical Risk</span>
<h3 class="fellow-name">Farhan Idris</h3>
<span class="fellow-role">Resource & Corridors Analyst</span>
<div class="fellow-latest">"Shadow Fleet & ASEAN's Parallel Oil Settlement" &rarr;</div>
</div>
<div class="fellow-card">
<span class="fellow-badge">Quantitative Group</span>
<h3 class="fellow-name">Darul Falah Desk</h3>
<span class="fellow-role">Shariah Algorithmics & Indexing</span>
<div class="fellow-latest">"The Zakat 2.0 Engine: Tokenised Asset Purification" &rarr;</div>
</div>
</div>
</section>
<!-- QUANTITATIVE ENGINES STRIP -->
<section class="engines-strip">
<div class="engines-grid">
<div class="engine-card">
<div>
<span class="kicker">Proprietary Calculator</span>
<h3>Interactive Faraid Estate Solver</h3>
<p>Simulate precise estate distributions under Shariah inheritance jurisprudence across 24 kin categories with judicial audit reports.</p>
</div>
<a href="#" class="engine-btn">Launch Solver &rarr;</a>
</div>
<div class="engine-card">
<div>
<span class="kicker">Quantitative Index</span>
<h3>Zakat 2.0 Portfolio Purification</h3>
<p>Real-time Nisab valuation against Malaysian gold/silver standards with multi-asset business balance sheet deduction logic.</p>
</div>
<a href="#" class="engine-btn">Calculate Zakat &rarr;</a>
</div>
</div>
</section>
<footer class="site-footer">
<p>&copy; 2026 Iqra &middot; Darul Falah Publishing House. All rights reserved. Sovereign Shariah Press.</p>
</footer>
</div>
</body>
</html>