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

345 lines
14 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 Intelligence — Sovereign Rail (Direction 3: Bloomberg & Semafor 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=JetBrains+Mono:wght@500;600&family=Newsreader:ital,opsz,wght@0,6..72,600;0,6..72,700;1,6..72,400&display=swap" rel="stylesheet">
<style>
:root {
--bg-terminal: #F7F8FA;
--card-surface: #FFFFFF;
--ink-black: #0B0F19;
--ink-muted: #525B6C;
--accent-emerald: #026E54;
--accent-gold: #B45309;
--border-grid: #E1E6EE;
--highlight-badge: #ECFDF5;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--bg-terminal);
color: var(--ink-black);
font-family: 'Inter', sans-serif;
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* LIVE TELEMETRY TOP BAR */
.terminal-bar {
background: #0B0F19;
color: #C3C9D5;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
padding: 8px 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #1E2638;
}
.telemetry-row { display: flex; gap: 20px; align-items: center; }
.telemetry-tag { color: #34D399; font-weight: 600; }
.container { max-width: 1260px; margin: 0 auto; padding: 0 24px; }
/* COMMAND MASTHEAD */
header.terminal-masthead {
background: #fff;
border-bottom: 1px solid var(--border-grid);
padding: 16px 0;
}
.masthead-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.terminal-brand {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 10px;
}
.terminal-pill {
background: var(--accent-emerald);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 3px 7px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.terminal-nav { display: flex; gap: 24px; font-size: 13px; font-weight: 600; }
.terminal-nav a { color: var(--ink-muted); text-decoration: none; }
.terminal-nav a:hover, .terminal-nav a.active { color: var(--accent-emerald); }
.cmd-search {
background: #EDF0F5;
border: 1px solid var(--border-grid);
border-radius: 4px;
padding: 6px 14px;
font-size: 12px;
color: var(--ink-muted);
display: flex;
align-items: center;
gap: 8px;
}
/* GRID MAIN */
.terminal-grid {
display: grid;
grid-template-columns: 7fr 3.5fr;
gap: 24px;
padding: 28px 0;
}
/* SEMAFOR STYLE HERO CARD */
.semafor-card {
background: #fff;
border: 1px solid var(--border-grid);
border-radius: 4px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.cat-pill {
align-self: flex-start;
background: var(--highlight-badge);
color: var(--accent-emerald);
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 3px;
text-transform: uppercase;
}
.semafor-title {
font-family: 'Newsreader', serif;
font-size: 38px;
line-height: 1.15;
font-weight: 700;
color: var(--ink-black);
}
.semafor-title a { color: inherit; text-decoration: none; }
.semafor-title a:hover { color: var(--accent-emerald); }
.takeaway-box {
background: #F8FAFC;
border-left: 3px solid var(--accent-emerald);
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 10px;
margin: 10px 0;
}
.takeaway-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; font-size: 14px; }
.takeaway-label { font-weight: 700; text-transform: uppercase; font-size: 11px; color: var(--ink-muted); letter-spacing: 0.05em; }
/* RIGHT DISPATCHES COLUMN */
.dispatches-column {
display: flex;
flex-direction: column;
gap: 16px;
}
.terminal-panel {
background: #fff;
border: 1px solid var(--border-grid);
border-radius: 4px;
padding: 20px;
}
.panel-header {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
border-bottom: 1px solid var(--border-grid);
padding-bottom: 10px;
margin-bottom: 14px;
display: flex;
justify-content: space-between;
}
.intel-item { padding: 10px 0; border-bottom: 1px solid #F1F4F9; }
.intel-item:last-child { border-bottom: none; }
.intel-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-gold); font-weight: 600; }
.intel-title { font-weight: 600; font-size: 14px; line-height: 1.35; margin-top: 3px; }
.intel-title a { color: inherit; text-decoration: none; }
.intel-title a:hover { color: var(--accent-emerald); }
/* QUANTITATIVE DOCK */
.quant-dock {
padding: 24px 0;
border-top: 1px solid var(--border-grid);
}
.dock-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.dock-card {
background: #fff;
border: 1px solid var(--border-grid);
border-radius: 4px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.dock-card h4 { font-size: 16px; font-weight: 700; }
.dock-card p { font-size: 13px; color: var(--ink-muted); }
.dock-cta {
font-size: 12px;
font-weight: 700;
color: var(--accent-emerald);
text-transform: uppercase;
margin-top: auto;
text-decoration: none;
}
footer.terminal-footer {
border-top: 1px solid var(--border-grid);
padding: 24px 0;
text-align: center;
font-size: 12px;
color: var(--ink-muted);
}
</style>
</head>
<body>
<div class="terminal-bar">
<div class="telemetry-row">
<span>MYR TOKENISED SUKUK: <strong class="telemetry-tag">4.82% YLD</strong></span>
<span>&bull;</span>
<span>GOLD NISAB: <strong style="color: #fff;">RM 32,450</strong></span>
<span>&bull;</span>
<span>SILVER NISAB: <strong style="color: #fff;">RM 2,890</strong></span>
<span>&bull;</span>
<span>CALC ENGINE: <strong class="telemetry-tag">LIVE v2.4</strong></span>
</div>
<div>
<span>TERMINAL DESK &bull; OCT 2026</span>
</div>
</div>
<header class="terminal-masthead">
<div class="container masthead-inner">
<div class="terminal-brand">
<span>IQRA</span>
<span class="terminal-pill">INTELLIGENCE</span>
</div>
<nav class="terminal-nav">
<a href="#" class="active">Markets & Wealth</a>
<a href="#">Geopolitical Risk</a>
<a href="#">Health & Shifa</a>
<a href="#">Governance</a>
<a href="#">Computational Suite</a>
</nav>
<div class="cmd-search">
<span>Search Intelligence...</span>
<kbd style="background: #fff; border: 1px solid #ccc; padding: 1px 4px; border-radius: 2px; font-size: 10px;">⌘K</kbd>
</div>
</div>
</header>
<div class="container">
<div class="terminal-grid">
<!-- LEFT: SEMAFOR STYLE INVESTIGATION -->
<div class="semafor-card">
<span class="cat-pill">Sovereign Debt & Trade Corridors</span>
<h1 class="semafor-title">
<a href="#">ASEAN's Parallel Settlement Architecture: How Bilateral Currency Swaps Bypass Petro-Dollar Hegemony</a>
</h1>
<div class="takeaway-box">
<div class="takeaway-row">
<span class="takeaway-label">The Signal</span>
<span>Malaysia, Indonesia, and Thailand settled over 24% of bilateral energy transactions using local currencies in Q3 2026.</span>
</div>
<div class="takeaway-row">
<span class="takeaway-label">The Fiqh</span>
<span>Shariah scholars view multi-currency settlement as closer to intrinsic value trading than fractional debt-based fiat monopolies.</span>
</div>
<div class="takeaway-row">
<span class="takeaway-label">The Exposure</span>
<span>Family offices holding dollar-heavy liquid reserves face escalating purchasing power divergence across Straits supply chains.</span>
</div>
</div>
<p style="color: var(--ink-muted); font-size: 15px; line-height: 1.6;">
The acceleration of regional central bank digital rails is creating an unannounced bifurcation in liquidity. Family offices positioning for 2027 must reweight treasury reserves toward physical gold, Sukuk liquidity baskets, and ringgit-denominated real productive assets...
</p>
<div style="font-size: 12px; color: var(--ink-muted); margin-top: 8px;">
Analysis by <strong>Farhan Idris</strong> &middot; Reviewed by <strong>Darul Falah Research Desk</strong> &middot; 8 min read
</div>
</div>
<!-- RIGHT: LIVE DISPATCHES -->
<div class="dispatches-column">
<div class="terminal-panel">
<div class="panel-header">
<span>Latest Dispatches</span>
<span style="color: var(--accent-emerald);">● LIVE</span>
</div>
<div class="intel-item">
<span class="intel-tag">CORRIDORS</span>
<div class="intel-title"><a href="#">US-Iran logistics dislocation playbook update for maritime shippers.</a></div>
</div>
<div class="intel-item">
<span class="intel-tag">ESTATE</span>
<div class="intel-title"><a href="#">Cross-border Waqf Ahli structuring guide for GCC-Southeast Asia assets.</a></div>
</div>
<div class="intel-item">
<span class="intel-tag">SHIFA DESK</span>
<div class="intel-title"><a href="#">Circadian intermittent fasting protocols for high-intensity executives.</a></div>
</div>
<div class="intel-item">
<span class="intel-tag">JURISPRUDENCE</span>
<div class="intel-title"><a href="#">Purification ratios on generative AI intellectual property royalties.</a></div>
</div>
</div>
<div class="terminal-panel" style="background: #F0FDF4; border-color: #BBF7D0;">
<div style="font-size: 11px; font-weight: 700; color: #166534; text-transform: uppercase; margin-bottom: 6px;">The Jauhari Column</div>
<h3 style="font-size: 16px; font-weight: 700; color: #14532D; margin-bottom: 6px;"><a href="#" style="color: inherit; text-decoration: none;">"Algorithmics of Amanah: Building Uncompromising Financial Rail"</a></h3>
<p style="font-size: 13px; color: #166534;">Jauhari Che Wan on why sovereign independence requires sovereign software.</p>
</div>
</div>
</div>
<!-- QUANTITATIVE SUITE DOCK -->
<section class="quant-dock">
<div style="font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px;">Computational Suite</div>
<div class="dock-grid">
<div class="dock-card">
<h4>Faraid Distribution Engine</h4>
<p>Mathematical inheritance simulation across all Shariah legal branches with instant shares breakdown.</p>
<a href="#" class="dock-cta">Open Engine &rarr;</a>
</div>
<div class="dock-card">
<h4>Zakat 2.0 Portfolio Auditor</h4>
<p>Automated balance-sheet deduction and nisab indexing for private equity and tokenised reserves.</p>
<a href="#" class="dock-cta">Calculate Zakat &rarr;</a>
</div>
<div class="dock-card">
<h4>Digital Waqf Ahli Planner</h4>
<p>Interactive structuring template for intergenerational family office trusts and foundations.</p>
<a href="#" class="dock-cta">Configure Waqf &rarr;</a>
</div>
</div>
</section>
<footer class="terminal-footer">
<p>Iqra Intelligence &middot; Powered by Darul Falah Computational Infrastructure &middot; All Rights Reserved.</p>
</footer>
</div>
</body>
</html>