Files
falah-ft-theme/design-proposals/direction-3-sovereign-rail.html
T

823 lines
30 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Direction 3: Sukuk & Sovereign Rail — Iqra Financial Terminal</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,500;0,6..72,700;1,6..72,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* === SUKUK & SOVEREIGN RAIL DESIGN SYSTEM TOKENS === */
:root {
--term-bg: #F4F5F7; /* Crisp executive workspace grey */
--term-surface: #FFFFFF; /* Solid white module card */
--term-dark: #0D1117; /* Deep obsidian executive header */
--term-ink: #111827; /* High-contrast ink */
--term-ink-subtle: #4B5563; /* Metadata and analytical prose */
--term-ink-muted: #9CA3AF; /* Micro-labeling */
--term-emerald: #056A4E; /* Deep treasury emerald */
--term-emerald-light: #ECFDF5;
--term-amber: #D97706; /* Telemetry alert amber */
--term-amber-light: #FFFBEB;
--term-blue: #1E40AF; /* Sovereign bond blue */
--term-border: #E5E7EB; /* Clean 1px modular grid border */
--term-border-dark: #D1D5DB;
--font-ui: 'Inter', -apple-system, sans-serif;
--font-serif: 'Newsreader', Georgia, serif;
--font-mono: 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--term-bg);
color: var(--term-ink);
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--term-emerald); }
.container {
max-width: 1360px;
margin: 0 auto;
padding: 0 24px;
}
/* === 1. LIVE TELEMETRY STRIP === */
.telemetry-strip {
background-color: var(--term-dark);
color: #E5E7EB;
font-family: var(--font-mono);
font-size: 11px;
padding: 8px 0;
border-bottom: 1px solid #1F2937;
}
.telemetry-inner {
display: flex;
justify-content: space-between;
align-items: center;
overflow-x: auto;
gap: 20px;
}
.telemetry-group {
display: flex;
align-items: center;
gap: 16px;
}
.telemetry-badge {
background: #10B981;
color: #064E3B;
font-size: 9.5px;
font-weight: 700;
padding: 2px 6px;
border-radius: 2px;
letter-spacing: 0.05em;
}
.telemetry-metric {
display: flex;
gap: 6px;
}
.metric-label { color: #9CA3AF; }
.metric-val { color: #34D399; font-weight: 600; }
.metric-val.up { color: #34D399; }
.metric-val.neutral { color: #FCD34D; }
/* === 2. TERMINAL EXECUTIVE MASTHEAD === */
.masthead {
background: var(--term-surface);
border-bottom: 1px solid var(--term-border);
padding: 16px 0;
position: sticky;
top: 0;
z-index: 100;
}
.masthead-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.brand-block {
display: flex;
align-items: center;
gap: 12px;
}
.brand-logo {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--term-ink);
display: flex;
align-items: center;
gap: 6px;
}
.brand-pill {
background: var(--term-emerald);
color: #FFF;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 3px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.terminal-nav {
display: flex;
gap: 20px;
font-size: 13px;
font-weight: 600;
color: var(--term-ink-subtle);
}
.terminal-nav a:hover, .terminal-nav a.active {
color: var(--term-emerald);
}
.terminal-actions {
display: flex;
align-items: center;
gap: 12px;
}
.search-cmd {
background: var(--term-bg);
border: 1px solid var(--term-border);
padding: 6px 12px;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: #6B7280;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.kbd-key {
background: #FFF;
border: 1px solid #D1D5DB;
padding: 1px 4px;
border-radius: 3px;
font-size: 10px;
}
.btn-access {
background: var(--term-dark);
color: #FFF;
font-size: 12px;
font-weight: 600;
padding: 7px 14px;
border-radius: 4px;
}
/* === 3. EXECUTIVE INTELLIGENCE GRID (MAIN TERMINAL) === */
.terminal-grid {
display: grid;
grid-template-columns: 8fr 4fr;
gap: 24px;
margin-top: 24px;
}
/* Primary Intelligence Column */
.main-col {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Lead Executive Card */
.lead-card {
background: var(--term-surface);
border: 1px solid var(--term-border);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.lead-card-header {
padding: 20px 24px 12px;
border-bottom: 1px solid var(--term-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.lead-tag {
background: var(--term-emerald-light);
color: var(--term-emerald);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
}
.lead-time {
font-family: var(--font-mono);
font-size: 11px;
color: var(--term-ink-muted);
}
.lead-card-body {
padding: 24px;
}
.lead-title {
font-family: var(--font-serif);
font-size: 34px;
font-weight: 700;
line-height: 1.2;
color: var(--term-ink);
margin-bottom: 16px;
}
/* Semafor-style Structured Breakdown */
.semafor-drawer {
display: flex;
flex-direction: column;
gap: 14px;
margin: 20px 0;
background: #F9FAFB;
border: 1px solid var(--term-border);
border-radius: 6px;
padding: 18px 20px;
}
.semafor-point {
display: grid;
grid-template-columns: 130px 1fr;
gap: 16px;
font-size: 13.5px;
line-height: 1.5;
}
.semafor-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--term-emerald);
}
.semafor-text {
color: #374151;
}
.lead-card-footer {
padding: 14px 24px;
background: #FAFAFA;
border-top: 1px solid var(--term-border);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12.5px;
}
.author-inline {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.author-thumb {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
}
/* Secondary 2-Up Cards */
.sub-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.sub-card {
background: var(--term-surface);
border: 1px solid var(--term-border);
border-radius: 6px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sub-kicker {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--term-blue);
text-transform: uppercase;
margin-bottom: 8px;
}
.sub-title {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--term-ink);
margin-bottom: 12px;
}
.sub-excerpt {
font-size: 13px;
color: var(--term-ink-subtle);
line-height: 1.5;
margin-bottom: 16px;
}
.sub-footer {
border-top: 1px solid var(--term-border);
padding-top: 10px;
font-size: 11px;
font-family: var(--font-mono);
color: var(--term-ink-muted);
display: flex;
justify-content: space-between;
}
/* Right Rail: Terminal Wire & Live Engines */
.side-col {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Live Wire Module */
.terminal-box {
background: var(--term-surface);
border: 1px solid var(--term-border);
border-radius: 6px;
overflow: hidden;
}
.box-header {
padding: 14px 18px;
border-bottom: 1px solid var(--term-border);
display: flex;
justify-content: space-between;
align-items: center;
background: #FAFAFA;
}
.box-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--term-ink);
display: flex;
align-items: center;
gap: 8px;
}
.signal-indicator {
width: 7px;
height: 7px;
background: #10B981;
border-radius: 50%;
}
.box-content {
padding: 0 18px;
}
.feed-row {
padding: 14px 0;
border-bottom: 1px solid var(--term-border);
display: flex;
flex-direction: column;
gap: 4px;
}
.feed-row:last-child {
border-bottom: none;
}
.feed-meta {
font-family: var(--font-mono);
font-size: 10px;
color: var(--term-ink-muted);
display: flex;
gap: 8px;
}
.feed-title {
font-size: 13.5px;
font-weight: 600;
line-height: 1.35;
color: var(--term-ink);
}
/* Live Interactive Calculator Widget */
.calculator-dock {
background: var(--term-dark);
color: #FFF;
border-radius: 6px;
padding: 20px;
}
.calc-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
border-bottom: 1px solid #374151;
padding-bottom: 10px;
}
.calc-title {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: #34D399;
text-transform: uppercase;
}
.calc-input-group {
margin-bottom: 12px;
}
.calc-label {
font-size: 11px;
color: #9CA3AF;
display: block;
margin-bottom: 4px;
}
.calc-input {
width: 100%;
background: #1F2937;
border: 1px solid #374151;
padding: 8px 12px;
border-radius: 4px;
color: #FFF;
font-family: var(--font-mono);
font-size: 13px;
}
.calc-output-box {
background: #111827;
border: 1px solid #056A4E;
padding: 12px;
border-radius: 4px;
margin-top: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.calc-output-val {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
color: #34D399;
}
.calc-btn {
width: 100%;
background: var(--term-emerald);
color: #FFF;
border: none;
padding: 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
margin-top: 12px;
cursor: pointer;
}
/* === 4. RESEARCH FELLOWS TERMINAL CARDS === */
.fellows-terminal-section {
margin: 40px 0 60px;
}
.terminal-section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--term-border-dark);
}
.section-headline {
font-size: 18px;
font-weight: 700;
color: var(--term-ink);
}
.fellows-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.fellow-terminal-card {
background: var(--term-surface);
border: 1px solid var(--term-border);
border-radius: 6px;
padding: 18px;
display: flex;
flex-direction: column;
}
.fellow-badge-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.desk-pill {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 700;
background: #F3F4F6;
color: #374151;
padding: 2px 6px;
border-radius: 3px;
}
.fellow-profile-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.fellow-img {
width: 44px;
height: 44px;
border-radius: 6px;
object-fit: cover;
border: 1px solid var(--term-border);
}
.fellow-name-h {
font-size: 14.5px;
font-weight: 700;
color: var(--term-ink);
}
.fellow-bio-text {
font-size: 12px;
color: var(--term-ink-subtle);
line-height: 1.45;
margin-bottom: 14px;
}
.fellow-stat-link {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--term-emerald);
border-top: 1px solid var(--term-border);
padding-top: 10px;
margin-top: auto;
display: flex;
justify-content: space-between;
}
/* FOOTER */
.terminal-footer {
background: var(--term-dark);
color: #9CA3AF;
padding: 32px 0;
font-family: var(--font-mono);
font-size: 11px;
border-top: 1px solid #1F2937;
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
<!-- 1. LIVE TELEMETRY STRIP -->
<div class="telemetry-strip">
<div class="container telemetry-inner">
<div class="telemetry-group">
<span class="telemetry-badge">LIVE TERMINAL</span>
<div class="telemetry-metric">
<span class="metric-label">GOLD NISAB:</span>
<span class="metric-val">RM 32,450.00 / 85g</span>
</div>
<div class="telemetry-metric">
<span class="metric-label">SILVER NISAB:</span>
<span class="metric-val">RM 2,890.00 / 595g</span>
</div>
<div class="telemetry-metric">
<span class="metric-label">SUKUK 5Y BENCH:</span>
<span class="metric-val up">4.82% (+0.04)</span>
</div>
<div class="telemetry-metric">
<span class="metric-label">ZAKAT APIS:</span>
<span class="metric-val neutral">OPERATIONAL</span>
</div>
</div>
<div class="telemetry-group">
<span>Rabi' al-Awwal 1448 &middot; UTC+8</span>
</div>
</div>
</div>
<!-- 2. TERMINAL EXECUTIVE MASTHEAD -->
<header class="masthead">
<div class="container masthead-inner">
<div class="brand-block">
<div class="brand-logo">
IQRA <span class="brand-pill">Terminal</span>
</div>
</div>
<nav class="terminal-nav">
<a href="#" class="active">Intelligence Feed</a>
<a href="#">Family Office</a>
<a href="#">Sukuk & Sovereign Debt</a>
<a href="#">Integrative Tibb</a>
<a href="#">Geopolitical Risk</a>
<a href="#">Faraid Engine</a>
</nav>
<div class="terminal-actions">
<div class="search-cmd">
<span>Search Intelligence...</span>
<span class="kbd-key">&amp;K</span>
</div>
<a href="#" class="btn-access">Client Access</a>
</div>
</div>
</header>
<!-- 3. MAIN TERMINAL GRID -->
<main class="container">
<div class="terminal-grid">
<!-- Left: Primary Intelligence Column -->
<div class="main-col">
<!-- Lead Investigation (Semafor-Style Breakdown) -->
<article class="lead-card">
<div class="lead-card-header">
<span class="lead-tag">SOVEREIGN CAPITAL &middot; LEAD INVESTIGATION</span>
<span class="lead-time">10 Oct 2026 &middot; 08:30 MYT</span>
</div>
<div class="lead-card-body">
<h2 class="lead-title">
<a href="#">Malaysia Prices First Tokenised Sukuk: The EVM Settlement Layer Dissected</a>
</h2>
<!-- Semafor Executive Breakdown -->
<div class="semafor-drawer">
<div class="semafor-point">
<span class="semafor-label">THE SIGNAL</span>
<span class="semafor-text">RM100 million priced with institutional syndicate backing (Khazanah, CIMB, Maybank). Wakalah underlying remains compliant with SAC-BNM guidelines.</span>
</div>
<div class="semafor-point">
<span class="semafor-label">THE EXPOSURE</span>
<span class="semafor-text">Cuts settlement cycle from T+2 to instantaneous atomic delivery-versus-payment (DvP) on private permissioned EVM ledger.</span>
</div>
<div class="semafor-point">
<span class="semafor-label">JURISTIC VIEW</span>
<span class="semafor-text">Dr. Tariq Al-Amiri confirms smart contract minting preserves legal title without invoking prohibited debt-sale (Bay al-Dayn) caveats.</span>
</div>
</div>
</div>
<div class="lead-card-footer">
<div class="author-inline">
<img src="https://iqra.falahos.my/content/images/authors/tariq-al-amiri.png" class="author-thumb" alt="Dr. Tariq Al-Amiri">
<span>Analysis by Dr. Tariq Al-Amiri &middot; Senior Jurist</span>
</div>
<a href="#" style="color: var(--term-emerald); font-weight: 600;">Read Full Analysis &rarr;</a>
</div>
</article>
<!-- 2-Up Sub Grid -->
<div class="sub-grid">
<article class="sub-card">
<div>
<span class="sub-kicker">Integrative Tibb &middot; Clinical Study</span>
<h3 class="sub-title"><a href="#">Neurobiology of Tahajjud: Melatonin Synchronization & Cortisol Reset</a></h3>
<p class="sub-excerpt">Quantitative study on third-quarter night vigilance, vagus nerve stimulation, and systemic autonomic balance.</p>
</div>
<div class="sub-footer">
<span>Dr. Hakim Zainur Rahman</span>
<span>6 min read</span>
</div>
</article>
<article class="sub-card">
<div>
<span class="sub-kicker">Geopolitics &middot; Maritime Corridors</span>
<h3 class="sub-title"><a href="#">Strait of Malacca: Sovereign Settlement Rails Bypassing Western Clearing</a></h3>
<p class="sub-excerpt">Bilateral energy and grain trade settled in tokenised gold dinar between Southeast Asia and the Gulf.</p>
</div>
<div class="sub-footer">
<span>Farhan Idris</span>
<span>8 min read</span>
</div>
</article>
</div>
</div>
<!-- Right Rail: Terminal Live Feeds & Interactive Engine -->
<div class="side-col">
<!-- Live Intelligence Wire -->
<div class="terminal-box">
<div class="box-header">
<span class="box-title"><span class="signal-indicator"></span> Live Intelligence Wire</span>
<span style="font-family: var(--font-mono); font-size: 10px; color: #6B7280;">POLLING</span>
</div>
<div class="box-content">
<div class="feed-row">
<div class="feed-meta"><span>14m ago</span> &middot; <span>FINTECH</span></div>
<h4 class="feed-title"><a href="#">Musaffa's US Halal Brokerage Integrates DriveWealth Clearing API</a></h4>
</div>
<div class="feed-row">
<div class="feed-meta"><span>1h ago</span> &middot; <span>FAMILY OFFICE</span></div>
<h4 class="feed-title"><a href="#">Cross-Border Waqf Ahli Framework Adopted in Labuan IBFC</a></h4>
</div>
<div class="feed-row">
<div class="feed-meta"><span>3h ago</span> &middot; <span>TIBB HEALTH</span></div>
<h4 class="feed-title"><a href="#">Clinical Trials on Intermittent Fasting Validate Monday-Thursday Sunnah Rhythm</a></h4>
</div>
<div class="feed-row">
<div class="feed-meta"><span>5h ago</span> &middot; <span>PHILOSOPHY</span></div>
<h4 class="feed-title"><a href="#">Ibn Khaldun's Asabiyyah and Modern Sovereign Wealth Funds</a></h4>
</div>
</div>
</div>
<!-- Live Interactive Calculator Dock -->
<div class="calculator-dock">
<div class="calc-header">
<span class="calc-title">Rapid Zakat Estimator</span>
<span style="font-size: 10px; color: #9CA3AF;">NISAB 2026</span>
</div>
<div class="calc-input-group">
<label class="calc-label">Total Liquid Assets (MYR)</label>
<input type="text" class="calc-input" value="1,250,000.00">
</div>
<div class="calc-input-group">
<label class="calc-label">Deductible Liabilities</label>
<input type="text" class="calc-input" value="150,000.00">
</div>
<div class="calc-output-box">
<span style="font-size: 11px; color: #9CA3AF;">Obligatory Zakat (2.5%):</span>
<span class="calc-output-val">RM 27,500.00</span>
</div>
<button class="calc-btn">Open Full Multi-Asset Engine &rarr;</button>
</div>
</div>
</div>
<!-- 4. RESEARCH FELLOWS TERMINAL CARDS -->
<section class="fellows-terminal-section">
<div class="terminal-section-header">
<h3 class="section-headline">Iqra Intelligence Desks & Senior Fellows</h3>
<span style="font-family: var(--font-mono); font-size: 11px; color: #6B7280;">6 ACTIVE DESKS</span>
</div>
<div class="fellows-grid">
<div class="fellow-terminal-card">
<div class="fellow-badge-row">
<span class="desk-pill">PUBLISHER'S DESK</span>
</div>
<div class="fellow-profile-row">
<img src="https://iqra.falahos.my/content/images/authors/jauhari-che-wan.png" class="fellow-img" alt="Jauhari Che Wan">
<div>
<h4 class="fellow-name-h">Jauhari Che Wan</h4>
<span style="font-size: 11px; color: #6B7280;">Editor-in-Chief</span>
</div>
</div>
<p class="fellow-bio-text">Writes The Jauhari Column on sovereign technology and civilizational istikhlaf in Nusantara.</p>
<a href="#" class="fellow-stat-link"><span>18 Monographs</span> <span>&rarr;</span></a>
</div>
<div class="fellow-terminal-card">
<div class="fellow-badge-row">
<span class="desk-pill">ESTATE & JURISPRUDENCE</span>
</div>
<div class="fellow-profile-row">
<img src="https://iqra.falahos.my/content/images/authors/tariq-al-amiri.png" class="fellow-img" alt="Dr. Tariq Al-Amiri">
<div>
<h4 class="fellow-name-h">Dr. Tariq Al-Amiri</h4>
<span style="font-size: 11px; color: #6B7280;">Senior Counsel</span>
</div>
</div>
<p class="fellow-bio-text">Advises on cross-border Faraid, family office trusts, and Sukuk issuance structures.</p>
<a href="#" class="fellow-stat-link"><span>8 Briefings</span> <span>&rarr;</span></a>
</div>
<div class="fellow-terminal-card">
<div class="fellow-badge-row">
<span class="desk-pill">INTEGRATIVE TIBB</span>
</div>
<div class="fellow-profile-row">
<img src="https://iqra.falahos.my/content/images/authors/hakim-zainur.png" class="fellow-img" alt="Dr. Hakim Zainur Rahman">
<div>
<h4 class="fellow-name-h">Dr. Hakim Zainur</h4>
<span style="font-size: 11px; color: #6B7280;">Clinical Researcher</span>
</div>
</div>
<p class="fellow-bio-text">Bridging prophetic medicine, clinical chronobiology, and Islamic cognitive reframing.</p>
<a href="#" class="fellow-stat-link"><span>8 Clinical Papers</span> <span>&rarr;</span></a>
</div>
<div class="fellow-terminal-card">
<div class="fellow-badge-row">
<span class="desk-pill">GEOPOLITICAL RISK</span>
</div>
<div class="fellow-profile-row">
<img src="https://iqra.falahos.my/content/images/authors/farhan-idris.png" class="fellow-img" alt="Farhan Idris">
<div>
<h4 class="fellow-name-h">Farhan Idris</h4>
<span style="font-size: 11px; color: #6B7280;">Corridors Strategist</span>
</div>
</div>
<p class="fellow-bio-text">Specialist in maritime straits, sovereign capital flows, and alternative settlement rails.</p>
<a href="#" class="fellow-stat-link"><span>5 Corridors Briefs</span> <span>&rarr;</span></a>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="terminal-footer">
<div class="container footer-inner">
<span>&copy; 2026 IQRA TERMINAL &middot; DARUL FALAH CAPITAL INTELLIGENCE &middot; FALAHOS RUNTIME</span>
<span>DATA FEEDS: NISAB LIVE INDEX &middot; STATUS: OPERATIONAL</span>
</div>
</footer>
</body>
</html>