feat(design): deliver 3 mature editorial UI directions with high-fidelity prototypes and design review
This commit is contained in:
@@ -0,0 +1,822 @@
|
||||
<!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 · 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">&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 · LEAD INVESTIGATION</span>
|
||||
<span class="lead-time">10 Oct 2026 · 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 · Senior Jurist</span>
|
||||
</div>
|
||||
<a href="#" style="color: var(--term-emerald); font-weight: 600;">Read Full Analysis →</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 2-Up Sub Grid -->
|
||||
<div class="sub-grid">
|
||||
<article class="sub-card">
|
||||
<div>
|
||||
<span class="sub-kicker">Integrative Tibb · 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 · 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> · <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> · <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> · <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> · <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 →</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>→</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>→</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>→</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>→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="terminal-footer">
|
||||
<div class="container footer-inner">
|
||||
<span>© 2026 IQRA TERMINAL · DARUL FALAH CAPITAL INTELLIGENCE · FALAHOS RUNTIME</span>
|
||||
<span>DATA FEEDS: NISAB LIVE INDEX · STATUS: OPERATIONAL</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user