Deploy FT & NYT Hybrid Broadsheet UI overhaul to production
This commit is contained in:
WMJ Ismail
@@ -0,0 +1,718 @@
|
|||||||
|
/* ============================================================
|
||||||
|
FT & NYT HYBRID BROADSHEET DESIGN TOKENS & SYSTEM
|
||||||
|
Aesthetics: FT Warm Linen (#FFF1E5) + Hairline Borders (#E2D3C4)
|
||||||
|
Structure: NYT 3-Zone Front Page Lead + Opinion Rail + 4-Col Ribbons
|
||||||
|
Responsive: Mobile (iPhone) to Desktop 1440px
|
||||||
|
============================================================ */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--ft-bg-paper: #FFF1E5;
|
||||||
|
--ft-bg-card: #F8EBE0;
|
||||||
|
--ft-bg-contrast: #201D1A;
|
||||||
|
--ft-ink-primary: #111111;
|
||||||
|
--ft-ink-secondary: #4A443E;
|
||||||
|
--ft-ink-muted: #7A726A;
|
||||||
|
--ft-accent-green: #0E4D36;
|
||||||
|
--ft-accent-green-light: #E7F3EE;
|
||||||
|
--ft-accent-burgundy: #9E2A2B;
|
||||||
|
--ft-border-hairline: #E2D3C4;
|
||||||
|
--ft-border-bold: #111111;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--ft-bg-paper) !important;
|
||||||
|
color: var(--ft-ink-primary) !important;
|
||||||
|
font-family: 'Source Serif 4', Georgia, serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.55;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site {
|
||||||
|
background-color: var(--ft-bg-paper) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1. TOP TELEMETRY BAR */
|
||||||
|
.ft-top-telemetry-bar {
|
||||||
|
background: #181513;
|
||||||
|
color: #E2D5C7;
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 7px 32px;
|
||||||
|
border-bottom: 1px solid #2D2723;
|
||||||
|
}
|
||||||
|
.ft-telemetry-inner {
|
||||||
|
max-width: 1320px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ft-tel-left {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ft-tel-date {
|
||||||
|
color: #FFF;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.ft-tel-bullet {
|
||||||
|
color: #665D56;
|
||||||
|
}
|
||||||
|
.ft-tel-center {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 10.5px;
|
||||||
|
}
|
||||||
|
.ft-badge-up {
|
||||||
|
background: var(--ft-accent-green);
|
||||||
|
color: #fff;
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.ft-tel-right {
|
||||||
|
display: flex;
|
||||||
|
gap: 14px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ft-tel-link {
|
||||||
|
color: #E2D5C7;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.ft-tel-link:hover { color: #FFF; }
|
||||||
|
.ft-tel-btn {
|
||||||
|
background: var(--ft-accent-green);
|
||||||
|
color: #fff !important;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2. REFINED MASTHEAD & NAVIGATION */
|
||||||
|
.ft-nav {
|
||||||
|
background: var(--ft-bg-paper) !important;
|
||||||
|
border-bottom: 2px solid var(--ft-border-bold) !important;
|
||||||
|
}
|
||||||
|
.ft-nav-inner {
|
||||||
|
max-width: 1320px !important;
|
||||||
|
padding: 0 32px !important;
|
||||||
|
}
|
||||||
|
.ft-nav-logo {
|
||||||
|
font-family: 'Cinzel', 'Playfair Display', Georgia, serif !important;
|
||||||
|
font-size: 26px !important;
|
||||||
|
font-weight: 900 !important;
|
||||||
|
letter-spacing: 0.16em !important;
|
||||||
|
color: var(--ft-ink-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3. FRONT PAGE LEAD GRID (NYT 3-ZONE) */
|
||||||
|
.ft-broadsheet-lead-zone {
|
||||||
|
max-width: 1320px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px 32px 32px;
|
||||||
|
border-bottom: 1px solid var(--ft-border-hairline);
|
||||||
|
}
|
||||||
|
.ft-lead-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 3.2fr 4.3fr 2.5fr;
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ZONE 1 (Left 32%) */
|
||||||
|
.ft-lead-col-left {
|
||||||
|
padding-right: 24px;
|
||||||
|
border-right: 1px solid var(--ft-border-hairline);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.ft-lead-kicker {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--ft-accent-green);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.ft-lead-kicker a { color: inherit; text-decoration: none; }
|
||||||
|
.ft-kicker-burgundy { color: var(--ft-accent-burgundy) !important; }
|
||||||
|
.ft-lead-headline {
|
||||||
|
font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 1.15;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--ft-ink-primary);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.ft-lead-headline a { color: inherit; text-decoration: none; }
|
||||||
|
.ft-lead-headline a:hover { color: var(--ft-accent-green); }
|
||||||
|
.ft-dateline {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--ft-ink-primary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
.ft-lead-prose {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--ft-ink-secondary);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SEMAFOR TAKEAWAY DRAWER */
|
||||||
|
.ft-takeaway-drawer {
|
||||||
|
background: var(--ft-bg-card);
|
||||||
|
border: 1px solid var(--ft-border-hairline);
|
||||||
|
border-left: 3px solid var(--ft-accent-green);
|
||||||
|
padding: 14px 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 13.5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.ft-takeaway-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 80px 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
.ft-takeaway-tag {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--ft-accent-green);
|
||||||
|
}
|
||||||
|
.ft-lead-byline {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 11.5px;
|
||||||
|
color: var(--ft-ink-muted);
|
||||||
|
}
|
||||||
|
.ft-lead-byline strong, .ft-lead-byline a {
|
||||||
|
color: var(--ft-ink-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.ft-lead-byline a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
.ft-lead-secondary-story {
|
||||||
|
border-top: 1px solid var(--ft-border-hairline);
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
.ft-secondary-headline {
|
||||||
|
font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.25;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.ft-secondary-headline a { color: inherit; text-decoration: none; }
|
||||||
|
.ft-secondary-headline a:hover { color: var(--ft-accent-green); }
|
||||||
|
.ft-secondary-excerpt {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--ft-ink-secondary);
|
||||||
|
line-height: 1.45;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ZONE 2 (Center 43%) */
|
||||||
|
.ft-lead-col-center {
|
||||||
|
padding-right: 24px;
|
||||||
|
border-right: 1px solid var(--ft-border-hairline);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.ft-visual-frame {
|
||||||
|
width: 100%;
|
||||||
|
height: 310px;
|
||||||
|
background: #D8C8B8;
|
||||||
|
border: 1px solid var(--ft-border-hairline);
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.ft-visual-frame img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
.ft-visual-frame:hover img { transform: scale(1.02); }
|
||||||
|
.ft-photo-caption {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 11.5px;
|
||||||
|
color: var(--ft-ink-muted);
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
.ft-photo-credit {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.ft-center-story-body { margin-top: 8px; }
|
||||||
|
.ft-center-headline {
|
||||||
|
font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 1.2;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.ft-center-headline a { color: inherit; text-decoration: none; }
|
||||||
|
.ft-center-headline a:hover { color: var(--ft-accent-green); }
|
||||||
|
.ft-center-excerpt {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--ft-ink-secondary);
|
||||||
|
line-height: 1.55;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ft-center-dual-split {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 18px;
|
||||||
|
border-top: 1px solid var(--ft-border-hairline);
|
||||||
|
padding-top: 18px;
|
||||||
|
}
|
||||||
|
.ft-mini-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.ft-mini-card-bordered {
|
||||||
|
padding-left: 18px;
|
||||||
|
border-left: 1px solid var(--ft-border-hairline);
|
||||||
|
}
|
||||||
|
.ft-mini-headline {
|
||||||
|
font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
|
||||||
|
font-size: 16.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
.ft-mini-headline a { color: inherit; text-decoration: none; }
|
||||||
|
.ft-mini-headline a:hover { color: var(--ft-accent-green); }
|
||||||
|
.ft-mini-excerpt {
|
||||||
|
font-size: 13.5px;
|
||||||
|
color: var(--ft-ink-secondary);
|
||||||
|
line-height: 1.45;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ZONE 3 (Right 25% - OPINION RAIL) */
|
||||||
|
.ft-lead-col-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.ft-rail-header {
|
||||||
|
border-top: 3px solid var(--ft-border-bold);
|
||||||
|
border-bottom: 1px solid var(--ft-border-hairline);
|
||||||
|
padding: 8px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
}
|
||||||
|
.ft-rail-accent { color: var(--ft-accent-green); }
|
||||||
|
|
||||||
|
.ft-jauhari-spotlight-card {
|
||||||
|
background: #201D1A;
|
||||||
|
color: #FFF1E5;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.ft-jauhari-meta-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.ft-jauhari-avatar-frame {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--ft-accent-green);
|
||||||
|
overflow: hidden;
|
||||||
|
background: #444;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.ft-jauhari-avatar-frame img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.ft-jauhari-info {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
.ft-jauhari-name {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
.ft-jauhari-tag {
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #92C5B2;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
.ft-jauhari-headline {
|
||||||
|
font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #FFF1E5;
|
||||||
|
}
|
||||||
|
.ft-jauhari-headline a { color: inherit; text-decoration: none; }
|
||||||
|
.ft-jauhari-headline a:hover { color: #92C5B2; }
|
||||||
|
.ft-jauhari-quote {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #D5C8BD;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ft-columnist-stack {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
.ft-columnist-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 42px 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid var(--ft-border-hairline);
|
||||||
|
}
|
||||||
|
.ft-col-avatar {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--ft-border-hairline);
|
||||||
|
background: #E8D8C8;
|
||||||
|
}
|
||||||
|
.ft-col-avatar img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.ft-col-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
.ft-col-byline {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 11.5px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ft-accent-green);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
.ft-col-byline a { color: inherit; text-decoration: none; }
|
||||||
|
.ft-col-bio-snippet {
|
||||||
|
font-size: 12.5px;
|
||||||
|
color: var(--ft-ink-secondary);
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ft-wire-box {
|
||||||
|
background: var(--ft-bg-card);
|
||||||
|
border: 1px solid var(--ft-border-hairline);
|
||||||
|
border-top: 3px solid var(--ft-accent-burgundy);
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
.ft-wire-header {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--ft-accent-burgundy);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.ft-wire-item {
|
||||||
|
padding: 6px 0;
|
||||||
|
border-bottom: 1px solid var(--ft-border-hairline);
|
||||||
|
}
|
||||||
|
.ft-wire-item:last-child { border-bottom: none; }
|
||||||
|
.ft-wire-time {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 9.5px;
|
||||||
|
color: var(--ft-accent-burgundy);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.ft-wire-title {
|
||||||
|
font-size: 12.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.35;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.ft-wire-title a { color: inherit; text-decoration: none; }
|
||||||
|
.ft-wire-title a:hover { color: var(--ft-accent-green); }
|
||||||
|
|
||||||
|
/* 4. COMPUTATIONAL SUITE & HORIZONTAL TOPIC RIBBONS */
|
||||||
|
.ft-broadsheet-engines-ribbons {
|
||||||
|
max-width: 1320px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 32px 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ft-comp-dock {
|
||||||
|
background: var(--ft-bg-card);
|
||||||
|
border: 1px solid var(--ft-border-hairline);
|
||||||
|
border-top: 4px solid var(--ft-accent-green);
|
||||||
|
padding: 24px;
|
||||||
|
margin: 32px 0 40px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.ft-comp-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.ft-comp-title {
|
||||||
|
font-family: 'Cinzel', serif;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ft-ink-primary);
|
||||||
|
}
|
||||||
|
.ft-comp-subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--ft-ink-muted);
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
}
|
||||||
|
.ft-status-pill {
|
||||||
|
background: var(--ft-accent-green-light);
|
||||||
|
color: var(--ft-accent-green);
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.ft-comp-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.ft-comp-card {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid var(--ft-border-hairline);
|
||||||
|
padding: 18px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.ft-dock-badge {
|
||||||
|
align-self: flex-start;
|
||||||
|
background: var(--ft-accent-green-light);
|
||||||
|
color: var(--ft-accent-green);
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 9.5px;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.ft-dock-name {
|
||||||
|
font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.ft-dock-desc {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--ft-ink-secondary);
|
||||||
|
line-height: 1.45;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.ft-dock-link {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--ft-accent-green);
|
||||||
|
text-decoration: none;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
.ft-dock-link:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* HORIZONTAL TOPIC RIBBONS */
|
||||||
|
.ft-section-ribbon {
|
||||||
|
padding: 28px 0;
|
||||||
|
border-bottom: 1px solid var(--ft-border-hairline);
|
||||||
|
}
|
||||||
|
.ft-ribbon-bar {
|
||||||
|
border-top: 2px solid var(--ft-border-bold);
|
||||||
|
border-bottom: 1px solid var(--ft-border-hairline);
|
||||||
|
padding: 7px 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ft-ribbon-tag-name {
|
||||||
|
font-family: 'Cinzel', serif;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.ft-ribbon-tag-name a { color: inherit; text-decoration: none; }
|
||||||
|
.ft-ribbon-view-all {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ft-accent-green);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.ft-ribbon-grid-4 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.ft-ribbon-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
padding-right: 16px;
|
||||||
|
border-right: 1px solid var(--ft-border-hairline);
|
||||||
|
}
|
||||||
|
.ft-ribbon-card:last-child { border-right: none; padding-right: 0; }
|
||||||
|
.ft-ribbon-thumb {
|
||||||
|
width: 100%;
|
||||||
|
height: 140px;
|
||||||
|
background: #E8D8C8;
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.ft-ribbon-thumb img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.ft-ribbon-card-headline {
|
||||||
|
font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.25;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.ft-ribbon-card-headline a { color: inherit; text-decoration: none; }
|
||||||
|
.ft-ribbon-card-headline a:hover { color: var(--ft-accent-green); }
|
||||||
|
.ft-ribbon-card-excerpt {
|
||||||
|
font-size: 13.5px;
|
||||||
|
color: var(--ft-ink-secondary);
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
.ft-ribbon-card-byline {
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--ft-ink-muted);
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
.ft-ribbon-card-byline a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
RESPONSIVE SYSTEM (Mobile & Tablet Breakpoints)
|
||||||
|
============================================================ */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.ft-broadsheet-lead-zone, .ft-broadsheet-engines-ribbons { padding-left: 20px; padding-right: 20px; }
|
||||||
|
.ft-lead-grid { grid-template-columns: 1fr; gap: 32px; }
|
||||||
|
.ft-lead-col-left, .ft-lead-col-center {
|
||||||
|
padding-right: 0;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--ft-border-hairline);
|
||||||
|
padding-bottom: 28px;
|
||||||
|
}
|
||||||
|
.ft-comp-grid { grid-template-columns: 1fr; gap: 16px; }
|
||||||
|
.ft-ribbon-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
||||||
|
.ft-ribbon-card:nth-child(2) { border-right: none; padding-right: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.ft-broadsheet-lead-zone, .ft-broadsheet-engines-ribbons { padding-left: 16px; padding-right: 16px; }
|
||||||
|
|
||||||
|
.ft-top-telemetry-bar {
|
||||||
|
padding: 6px 16px;
|
||||||
|
}
|
||||||
|
.ft-telemetry-inner {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
.ft-tel-left {
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 10.5px;
|
||||||
|
}
|
||||||
|
.ft-tel-center {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
padding: 4px 0;
|
||||||
|
font-size: 10px;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.ft-tel-center::-webkit-scrollbar { display: none; }
|
||||||
|
.ft-tel-right {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-top: 1px solid #2D2723;
|
||||||
|
padding-top: 5px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ft-lead-headline { font-size: 26px; line-height: 1.18; }
|
||||||
|
.ft-visual-frame { height: 210px; }
|
||||||
|
.ft-center-headline { font-size: 22px; line-height: 1.22; }
|
||||||
|
.ft-center-dual-split { grid-template-columns: 1fr; gap: 16px; }
|
||||||
|
.ft-mini-card-bordered {
|
||||||
|
padding-left: 0;
|
||||||
|
border-left: none;
|
||||||
|
border-top: 1px solid var(--ft-border-hairline);
|
||||||
|
padding-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ft-takeaway-drawer { padding: 12px; }
|
||||||
|
.ft-takeaway-row { grid-template-columns: 1fr; gap: 3px; }
|
||||||
|
|
||||||
|
.ft-ribbon-grid-4 { grid-template-columns: 1fr; gap: 18px; }
|
||||||
|
.ft-ribbon-card {
|
||||||
|
border-right: none;
|
||||||
|
padding-right: 0;
|
||||||
|
border-bottom: 1px solid var(--ft-border-hairline);
|
||||||
|
padding-bottom: 14px;
|
||||||
|
}
|
||||||
|
.ft-ribbon-card:last-child { border-bottom: none; }
|
||||||
|
.ft-ribbon-thumb { height: 170px; }
|
||||||
|
}
|
||||||
+321
@@ -0,0 +1,321 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{@site.locale}}">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
|
<title>{{meta_title page=(t " (Page %)")}}</title>
|
||||||
|
|
||||||
|
{{!-- Critical CSS - Above the fold --}}
|
||||||
|
<style>
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:'Source Serif 4',Georgia,serif;font-size:18px;line-height:1.5;color:#000;background:#fff}h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:1.1;color:#000}h1{font-size:36px}h2{font-size:28px}h3{font-size:24px}a{color:#007A4D;text-decoration:none}a:hover{color:#006B42}.ft-container{max-width:1200px;margin:0 auto;padding:0 32px}.ft-container-article{max-width:800px;margin:0 auto;padding:0 32px}.ft-nav{position:sticky;top:0;z-index:300;background:#fff;border-bottom:1px solid #e0e0e0}.ft-nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:56px}.ft-nav-logo{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:700;color:#000;text-decoration:none}.ft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-family:'Source Serif 4',Georgia,serif;font-size:14px;font-weight:500;line-height:1;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:all 150ms ease;text-decoration:none;white-space:nowrap}.ft-btn-primary{background:#0d7680;color:#fff;border-color:#0d7680}.ft-btn-primary:hover{background:#005a63;border-color:#005a63;color:#fff}.ft-hero{position:relative;width:100%;min-height:50vh;display:flex;align-items:flex-end;background:#fff}.ft-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.ft-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 40%,transparent 100%);z-index:1}.ft-hero-content{position:relative;z-index:2;width:100%;max-width:800px;margin:0 auto;padding:48px 32px 72px;color:#fff}.ft-hero-title{font-size:48px;font-weight:700;line-height:1.1;margin-bottom:24px;color:#fff;max-width:90%}.ft-hero-excerpt{font-size:20px;line-height:1.6;color:rgba(255,255,255,0.95);margin-bottom:36px;max-width:70%}.ft-stream{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:1024px){.ft-stream{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.ft-stream{grid-template-columns:1fr}}.ft-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;transition:box-shadow 250ms ease,transform 250ms ease}.ft-card:hover{box-shadow:0 4px 6px rgba(0,0,0,0.07);transform:translateY(-2px)}.ft-card-image{width:100%;aspect-ratio:16/9;object-fit:cover}.ft-card-content{padding:16px;flex:1;display:flex;flex-direction:column}.ft-card-title{font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:700;line-height:1.3;margin-bottom:8px;color:#000}.ft-card-title a{color:inherit;text-decoration:none}.ft-card-title a:hover{color:#007A4D;text-decoration:underline}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
max-width: 100vw;
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.site {
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
*, *:before, *:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.kg-card, .kg-audio-card, .kg-embed-card, iframe, video, audio {
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.ft-calculator-tabs {
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.ft-tab-btn {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.ft-share-bar {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.ft-share-label {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.ft-share-progress {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.ft-table {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
|
||||||
|
<link rel="stylesheet" href="{{asset "built/ft-search.css"}}">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<link rel="stylesheet" href="{{asset "built/broadsheet-hybrid.css"}}">
|
||||||
|
|
||||||
|
{{ghost_head}}
|
||||||
|
{{{block "meta_tags"}}}
|
||||||
|
<meta name="description" content="{{#if meta_description}}{{meta_description}}{{else}}{{@site.description}}{{/if}}">
|
||||||
|
<meta property="og:description" content="{{#if meta_description}}{{meta_description}}{{else}}{{@site.description}}{{/if}}">
|
||||||
|
<meta property="og:title" content="{{meta_title}}">
|
||||||
|
<meta property="og:image" content="{{#if @site.cover_image}}{{@site.cover_image}}{{else}}https://iqra.falahos.my/content/images/size/w256h256/2026/07/72961271-45ce-44d6-80cc-b57033d915d5.jpeg{{/if}}">
|
||||||
|
|
||||||
|
{{!-- Progressive Web App (PWA) & iOS Standalone Meta --}}
|
||||||
|
<link rel="manifest" href="{{asset "manifest.webmanifest"}}">
|
||||||
|
<meta name="theme-color" content="#0d7680">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Iqra">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="{{asset "icons/apple-touch-icon.png"}}">
|
||||||
|
<link rel="stylesheet" href="{{asset "built/pwa.css"}}">
|
||||||
|
<link rel="stylesheet" href="{{asset "built/tools.css"}}">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="{{body_class}}{{{block "body_class"}}}">
|
||||||
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||||
|
|
||||||
|
<div class="site">
|
||||||
|
{{> "ft-masthead-strip"}}
|
||||||
|
<!-- FT Navigation -->
|
||||||
|
<header class="ft-nav" role="banner">
|
||||||
|
<div class="ft-nav-inner">
|
||||||
|
<div class="ft-nav-brand">
|
||||||
|
<a class="ft-nav-logo" href="{{@site.url}}">
|
||||||
|
{{#if @site.logo}}
|
||||||
|
<img src="{{@site.logo}}" alt="{{@site.title}}">
|
||||||
|
{{else}}
|
||||||
|
{{@site.title}}
|
||||||
|
{{/if}}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="ft-nav-menu" role="navigation" aria-label="Main navigation">
|
||||||
|
{{navigation}}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="ft-nav-actions">
|
||||||
|
<div class="ft-nav-search">
|
||||||
|
{{> "ft-search"}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{#if @site.members_enabled}}
|
||||||
|
<div class="ft-nav-members">
|
||||||
|
{{#unless @member}}
|
||||||
|
{{#unless @site.members_invite_only}}
|
||||||
|
<a class="ft-btn ft-btn-ghost ft-btn-sm" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
|
||||||
|
<a class="ft-btn ft-btn-primary ft-btn-sm" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
|
||||||
|
{{else}}
|
||||||
|
<a class="ft-btn ft-btn-primary ft-btn-sm" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
|
||||||
|
{{/unless}}
|
||||||
|
{{else}}
|
||||||
|
<a class="ft-btn ft-btn-secondary ft-btn-sm" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
|
||||||
|
{{/unless}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<button class="ft-nav-burger" aria-label="{{t "Toggle menu"}}" aria-expanded="false" aria-controls="mobile-menu">
|
||||||
|
{{> "icons/menu"}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Mobile Menu -->
|
||||||
|
<nav class="ft-nav-menu ft-md:hidden" id="mobile-menu" role="navigation" aria-label="Mobile navigation">
|
||||||
|
{{navigation}}
|
||||||
|
{{#if @site.members_enabled}}
|
||||||
|
<div class="ft-nav-members ft-py-4 ft-border-t">
|
||||||
|
{{#unless @member}}
|
||||||
|
{{#unless @site.members_invite_only}}
|
||||||
|
<a class="ft-btn ft-btn-primary ft-w-full ft-mb-2" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
|
||||||
|
<a class="ft-btn ft-btn-outline ft-w-full" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
|
||||||
|
{{else}}
|
||||||
|
<a class="ft-btn ft-btn-primary ft-w-full" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
|
||||||
|
{{/unless}}
|
||||||
|
{{else}}
|
||||||
|
<a class="ft-btn ft-btn-secondary ft-w-full" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
|
||||||
|
{{/unless}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Left Rail (Desktop) -->
|
||||||
|
<aside class="ft-left-rail ft-lg:hidden" role="complementary" aria-label="Sidebar navigation">
|
||||||
|
<div class="ft-left-rail-section">
|
||||||
|
<h3 class="ft-left-rail-title">Products</h3>
|
||||||
|
<a class="ft-left-rail-link" href="/products">Digital Products</a>
|
||||||
|
<a class="ft-left-rail-link" href="/tag/falah-cast/">Falah Cast</a>
|
||||||
|
<a class="ft-left-rail-link" href="/tag/learning-pack/">Learning Packs</a>
|
||||||
|
</div>
|
||||||
|
<div class="ft-left-rail-section">
|
||||||
|
<h3 class="ft-left-rail-title">Sections</h3>
|
||||||
|
{{navigation type="secondary"}}
|
||||||
|
</div>
|
||||||
|
<div class="ft-left-rail-section">
|
||||||
|
<h3 class="ft-left-rail-title">Newsletters</h3>
|
||||||
|
<a class="ft-left-rail-link" href="/newsletters/morning-brief">Morning Brief</a>
|
||||||
|
<a class="ft-left-rail-link" href="/newsletters/evening-brief">Evening Brief</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main id="main-content" class="site-content ft-lg:ml-[260px]">
|
||||||
|
{{#is "home"}}
|
||||||
|
{{> "ft-hero"}}
|
||||||
|
{{> "ft-editorial"}}
|
||||||
|
{{/is}}
|
||||||
|
|
||||||
|
{{{body}}}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Sticky Newsletter Banner -->
|
||||||
|
<div class="ft-newsletter-banner" id="newsletter-banner" role="region" aria-label="Newsletter signup">
|
||||||
|
<div class="ft-newsletter-banner-content">
|
||||||
|
<div class="ft-newsletter-banner-text">
|
||||||
|
<h3 class="ft-newsletter-banner-title">Get the best of Iqra Times</h3>
|
||||||
|
<p class="ft-newsletter-banner-desc">Daily Islamic insights, product updates, and exclusive content.</p>
|
||||||
|
</div>
|
||||||
|
<form class="ft-newsletter-banner-form" action="#/portal/signup" method="POST" data-members-form>
|
||||||
|
<input class="ft-newsletter-banner-input" type="email" name="email" placeholder="Your email address" required>
|
||||||
|
<button class="ft-btn ft-btn-primary" type="submit">Subscribe</button>
|
||||||
|
</form>
|
||||||
|
<button class="ft-newsletter-banner-close" aria-label="Dismiss newsletter banner">{{> "icons/x"}}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="ft-footer" role="contentinfo">
|
||||||
|
<div class="ft-footer-inner">
|
||||||
|
<div class="ft-footer-brand">
|
||||||
|
<a class="ft-footer-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||||
|
<p class="ft-footer-tagline">{{@site.description}}</p>
|
||||||
|
<div class="ft-footer-social">
|
||||||
|
{{#each @site.social_links}}
|
||||||
|
<a class="ft-footer-social-link" href="{{href}}" target="_blank" rel="noopener" aria-label="{{name}}">
|
||||||
|
{{#> (concat "icons/" type)}}
|
||||||
|
<span>{{name}}</span>
|
||||||
|
{{/undefined}}
|
||||||
|
</a>
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{#if @site.secondary_navigation}}
|
||||||
|
<nav class="ft-footer-section" aria-label="Footer navigation">
|
||||||
|
<h3 class="ft-footer-section-title">Sections</h3>
|
||||||
|
<ul class="ft-footer-links">
|
||||||
|
{{#foreach navigation type="secondary"}}
|
||||||
|
<li><a class="ft-footer-link" href="{{url}}">{{label}}</a></li>
|
||||||
|
{{/foreach}}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<nav class="ft-footer-section" aria-label="About">
|
||||||
|
<h3 class="ft-footer-section-title">About</h3>
|
||||||
|
<ul class="ft-footer-links">
|
||||||
|
<li><a class="ft-footer-link" href="/about">About Iqra Times</a></li>
|
||||||
|
<li><a class="ft-footer-link" href="/contact">Contact</a></li>
|
||||||
|
<li><a class="ft-footer-link" href="/careers">Careers</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="ft-footer-section" aria-label="Products">
|
||||||
|
<h3 class="ft-footer-section-title">Products</h3>
|
||||||
|
<ul class="ft-footer-links">
|
||||||
|
<li><a class="ft-footer-link" href="/products">Digital Products</a></li>
|
||||||
|
<li><a class="ft-footer-link" href="/tag/falah-cast/">Falah Cast</a></li>
|
||||||
|
<li><a class="ft-footer-link" href="/tag/learning-pack/">Learning Packs</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="ft-footer-section" aria-label="Legal">
|
||||||
|
<h3 class="ft-footer-section-title">Legal</h3>
|
||||||
|
<ul class="ft-footer-links">
|
||||||
|
<li><a class="ft-footer-link" href="/privacy">Privacy Policy</a></li>
|
||||||
|
<li><a class="ft-footer-link" href="/terms">Terms of Service</a></li>
|
||||||
|
<li><a class="ft-footer-link" href="/refunds">Refund Policy</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="ft-footer-bottom">
|
||||||
|
<p class="ft-footer-copyright">{{@site.title}} © {{date format="YYYY"}}</p>
|
||||||
|
<nav class="ft-footer-legal" aria-label="Legal links">
|
||||||
|
<a href="/privacy">Privacy</a>
|
||||||
|
<a href="/terms">Terms</a>
|
||||||
|
<a href="/cookies">Cookies</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{#is "post, page"}}
|
||||||
|
{{> "pswp"}}
|
||||||
|
{{/is}}
|
||||||
|
|
||||||
|
{{!-- Fixes 100vh issue on mobile browsers with toolbar on the bottom --}}
|
||||||
|
<script>
|
||||||
|
if (document.body.classList.contains('with-full-cover') && (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
|
||||||
|
const cover = document.getElementsByClassName('ft-hero')[0] || document.getElementsByClassName('cover')[0];
|
||||||
|
if (cover) cover.style.height = window.innerHeight + 'px';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="{{asset "built/tts.js"}}"></script>
|
||||||
|
|
||||||
|
<script src="{{asset "built/search.js"}}"></script>
|
||||||
|
|
||||||
|
<script src="https://gumroad.com/js/gumroad.js"></script>
|
||||||
|
<script src="{{asset "built/pwa-app.js"}}" defer></script>
|
||||||
|
{{ghost_foot}}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Mobile menu toggle
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const burger = document.querySelector('.ft-nav-burger');
|
||||||
|
const mobileMenu = document.getElementById('mobile-menu');
|
||||||
|
if (burger && mobileMenu) {
|
||||||
|
burger.addEventListener('click', function() {
|
||||||
|
mobileMenu.classList.toggle('open');
|
||||||
|
burger.setAttribute('aria-expanded', mobileMenu.classList.contains('open'));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Newsletter banner
|
||||||
|
const banner = document.getElementById('newsletter-banner');
|
||||||
|
const closeBtn = banner?.querySelector('.ft-newsletter-banner-close');
|
||||||
|
if (banner && closeBtn) {
|
||||||
|
closeBtn.addEventListener('click', function() {
|
||||||
|
banner.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show banner after 30 seconds
|
||||||
|
setTimeout(function() {
|
||||||
|
if (!localStorage.getItem('newsletter_dismissed')) {
|
||||||
|
banner.classList.add('visible');
|
||||||
|
}
|
||||||
|
}, 30000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
{{!< default}}
|
||||||
|
|
||||||
|
{{#is "home"}}
|
||||||
|
{{!-- Homepage loop is replaced by the hybrid broadsheet 3-zone lead and topic ribbons in default.hbs --}}
|
||||||
|
{{else}}
|
||||||
|
<div class="site-main">
|
||||||
|
<header class="feed-header gh-canvas">
|
||||||
|
{{#if @custom.feed_title}}
|
||||||
|
<div class="feed-header-wrapper">
|
||||||
|
<h2 class="feed-header-title">{{@custom.feed_title}}</h2>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="post-feed{{#match @custom.feed_layout "!=" "Minimal"}} expanded{{/match}}{{#match @custom.feed_layout "Right thumbnail"}} right-thumbnail{{/match}}{{#match @custom.feed_layout "Text-only"}} text-only{{/match}} gh-feed gh-canvas">
|
||||||
|
{{#foreach posts}}
|
||||||
|
{{> "loop"}}
|
||||||
|
{{/foreach}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{pagination}}
|
||||||
|
</div>
|
||||||
|
{{/is}}
|
||||||
|
|
||||||
|
{{#contentFor "body_class"}}{{#if @site.cover_image}} with-full-cover is-head-transparent{{/if}}{{#if @member}} logged-in{{/if}}{{/contentFor}}
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
{{!-- FT & NYT Hybrid Broadsheet — Computational Engines & Horizontal Topic Ribbons --}}
|
||||||
|
<section class="ft-broadsheet-engines-ribbons" aria-label="Computational Engines and Topic Hubs">
|
||||||
|
|
||||||
|
{{!-- 1. COMPUTATIONAL SUITE DOCK --}}
|
||||||
|
<div class="ft-comp-dock">
|
||||||
|
<div class="ft-comp-header">
|
||||||
|
<div class="ft-comp-titles">
|
||||||
|
<h3 class="ft-comp-title">The Falah Computational Suite</h3>
|
||||||
|
<p class="ft-comp-subtitle">Deterministic Shariah engines executing AAOIFI 2026.4 standards and Islamic estate distribution algorithms</p>
|
||||||
|
</div>
|
||||||
|
<div class="ft-comp-status">
|
||||||
|
<span class="ft-status-pill">Active Engines • Live Telemetry</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ft-comp-grid">
|
||||||
|
<div class="ft-comp-card">
|
||||||
|
<span class="ft-dock-badge">Succession Protocol</span>
|
||||||
|
<h4 class="ft-dock-name">Faraid Estate Distribution</h4>
|
||||||
|
<p class="ft-dock-desc">Mathematical calculation of Islamic inheritance shares under Ashab al-Furud, Asabah, and Rad. Automated Radd, Awl, and spouse shares.</p>
|
||||||
|
<a href="/calculator/" class="ft-dock-link">Launch Engine →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ft-comp-card">
|
||||||
|
<span class="ft-dock-badge">Purification Engine</span>
|
||||||
|
<h4 class="ft-dock-name">Portfolio Zakat & Dividend Engine</h4>
|
||||||
|
<p class="ft-dock-desc">Calculates operational zakat liability across equities, cash, private equity, and gold, with automated dividend purification deductions.</p>
|
||||||
|
<a href="/zakat/" class="ft-dock-link">Launch Engine →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ft-comp-card">
|
||||||
|
<span class="ft-dock-badge">Family Governance</span>
|
||||||
|
<h4 class="ft-dock-name">The Virtual Family Office</h4>
|
||||||
|
<p class="ft-dock-desc">Interactive curriculum and templates for Muslim family wealth preservation, Waqf covenants, and emergency estate dossiers.</p>
|
||||||
|
<a href="/tools/" class="ft-dock-link">Explore Curriculum →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{!-- 2. HORIZONTAL SECTION TOPIC RIBBONS (NYT 4-Column Horizontal Layout) --}}
|
||||||
|
{{#get "tags" filter="slug:[islamic-finance,shifa,geopolitical-intelligence,philosophy]" limit="4"}}
|
||||||
|
{{#foreach tags}}
|
||||||
|
<div class="ft-section-ribbon">
|
||||||
|
<div class="ft-ribbon-bar">
|
||||||
|
<h3 class="ft-ribbon-tag-name"><a href="{{url}}">{{name}}</a></h3>
|
||||||
|
<a href="{{url}}" class="ft-ribbon-view-all">View Full Section →</a>
|
||||||
|
</div>
|
||||||
|
<div class="ft-ribbon-grid-4">
|
||||||
|
{{#get "posts" filter="tag:{{slug}}+status:published" limit="4" include="tags,authors"}}
|
||||||
|
{{#foreach posts}}
|
||||||
|
<article class="ft-ribbon-card">
|
||||||
|
{{#if feature_image}}
|
||||||
|
<div class="ft-ribbon-thumb">
|
||||||
|
<a href="{{url}}"><img src="{{img_url feature_image size="m"}}" alt="{{title}}"></a>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
<h4 class="ft-ribbon-card-headline">
|
||||||
|
<a href="{{url}}">{{title}}</a>
|
||||||
|
</h4>
|
||||||
|
<p class="ft-ribbon-card-excerpt">
|
||||||
|
{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="18"}}{{/if}}
|
||||||
|
</p>
|
||||||
|
<div class="ft-ribbon-card-byline">
|
||||||
|
{{#if primary_author}}<a href="{{primary_author.url}}">{{primary_author.name}}</a>{{/if}} · {{reading_time}}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,250 @@
|
|||||||
|
{{!-- FT & NYT Hybrid Broadsheet — Front Page 3-Zone Lead Package --}}
|
||||||
|
<section class="ft-broadsheet-lead-zone" aria-label="Front Page Broadsheet Lead Package">
|
||||||
|
<div class="ft-lead-grid">
|
||||||
|
|
||||||
|
{{!-- ZONE 1: LEAD INVESTIGATION (Left Column 32%) --}}
|
||||||
|
<div class="ft-lead-col-left">
|
||||||
|
{{#get "posts" filter="featured:true" limit="1" include="tags,authors"}}
|
||||||
|
{{#foreach posts}}
|
||||||
|
<article class="ft-lead-story-main">
|
||||||
|
<span class="ft-lead-kicker">
|
||||||
|
{{#if primary_tag}}<a href="{{primary_tag.url}}">{{primary_tag.name}}</a> • {{/if}}Lead Investigation
|
||||||
|
</span>
|
||||||
|
<h1 class="ft-lead-headline">
|
||||||
|
<a href="{{url}}">{{title}}</a>
|
||||||
|
</h1>
|
||||||
|
<p class="ft-lead-prose">
|
||||||
|
<span class="ft-dateline">Kuala Lumpur —</span>
|
||||||
|
{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="38"}}{{/if}}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{{!-- SEMAFOR-STYLE STRUCTURED TAKEAWAY DRAWER --}}
|
||||||
|
<div class="ft-takeaway-drawer">
|
||||||
|
<div class="ft-takeaway-row">
|
||||||
|
<span class="ft-takeaway-tag">The Signal</span>
|
||||||
|
<span>Multi-family governance protocols in Southeast Asia are integrating Waqf Ahli covenants to protect operating assets from statutory probate freezing.</span>
|
||||||
|
</div>
|
||||||
|
<div class="ft-takeaway-row">
|
||||||
|
<span class="ft-takeaway-tag">The Fiqh</span>
|
||||||
|
<span>Lifetime Hibah transfers execute irrevocable legal vesting while strictly safeguarding the residual Faraid entitlement rules.</span>
|
||||||
|
</div>
|
||||||
|
<div class="ft-takeaway-row">
|
||||||
|
<span class="ft-takeaway-tag">The Exposure</span>
|
||||||
|
<span>Dollar-denominated cross-border trust structures face sovereign sanction overhang and banking friction under changing OECD reporting rules.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ft-lead-byline">
|
||||||
|
By {{#if primary_author}}<strong><a href="{{primary_author.url}}">{{primary_author.name}}</a></strong> · {{primary_author.location}}{{else}}<strong>Editorial Board</strong>{{/if}} · {{reading_time}}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{{/foreach}}
|
||||||
|
{{else}}
|
||||||
|
{{#get "posts" limit="1" order="published_at desc" include="tags,authors"}}
|
||||||
|
{{#foreach posts}}
|
||||||
|
<article class="ft-lead-story-main">
|
||||||
|
<span class="ft-lead-kicker">
|
||||||
|
{{#if primary_tag}}<a href="{{primary_tag.url}}">{{primary_tag.name}}</a> • {{/if}}Lead Story
|
||||||
|
</span>
|
||||||
|
<h1 class="ft-lead-headline">
|
||||||
|
<a href="{{url}}">{{title}}</a>
|
||||||
|
</h1>
|
||||||
|
<p class="ft-lead-prose">
|
||||||
|
<span class="ft-dateline">Kuala Lumpur —</span>
|
||||||
|
{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="38"}}{{/if}}
|
||||||
|
</p>
|
||||||
|
<div class="ft-takeaway-drawer">
|
||||||
|
<div class="ft-takeaway-row">
|
||||||
|
<span class="ft-takeaway-tag">The Signal</span>
|
||||||
|
<span>Strategic wealth stewardship and institutional succession frameworks for sovereign Muslim families.</span>
|
||||||
|
</div>
|
||||||
|
<div class="ft-takeaway-row">
|
||||||
|
<span class="ft-takeaway-tag">The Fiqh</span>
|
||||||
|
<span>Preserving sacred generational contracts without compromising legal execution across jurisdictions.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ft-lead-byline">
|
||||||
|
By {{#if primary_author}}<strong><a href="{{primary_author.url}}">{{primary_author.name}}</a></strong>{{else}}<strong>Editorial Desk</strong>{{/if}} · {{reading_time}}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
{{/get}}
|
||||||
|
|
||||||
|
{{!-- Secondary Anchor Story (Left Column Companion) --}}
|
||||||
|
{{#get "posts" filter="featured:false" limit="1" order="published_at desc" include="tags,authors"}}
|
||||||
|
{{#foreach posts}}
|
||||||
|
<article class="ft-lead-secondary-story">
|
||||||
|
<span class="ft-lead-kicker ft-kicker-burgundy">
|
||||||
|
{{#if primary_tag}}<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>{{else}}Juristic Review{{/if}}
|
||||||
|
</span>
|
||||||
|
<h3 class="ft-secondary-headline">
|
||||||
|
<a href="{{url}}">{{title}}</a>
|
||||||
|
</h3>
|
||||||
|
<p class="ft-secondary-excerpt">
|
||||||
|
{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="22"}}{{/if}}
|
||||||
|
</p>
|
||||||
|
<div class="ft-lead-byline">
|
||||||
|
{{#if primary_author}}<a href="{{primary_author.url}}">{{primary_author.name}}</a>{{/if}} · {{reading_time}}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{!-- ZONE 2: VISUAL ANCHOR & CENTER PACKAGE (Center Column 43%) --}}
|
||||||
|
<div class="ft-lead-col-center">
|
||||||
|
{{#get "posts" filter="tag:geopolitical-intelligence" limit="1" order="published_at desc" include="tags,authors"}}
|
||||||
|
{{#foreach posts}}
|
||||||
|
<article class="ft-center-package">
|
||||||
|
{{#if feature_image}}
|
||||||
|
<div class="ft-visual-frame">
|
||||||
|
<a href="{{url}}"><img src="{{img_url feature_image size="xl"}}" alt="{{title}}"></a>
|
||||||
|
</div>
|
||||||
|
<div class="ft-photo-caption">
|
||||||
|
Sovereign financial corridors and maritime trade arteries in the Malacca Strait. <span class="ft-photo-credit">Iqra Press · Archival</span>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
<div class="ft-center-story-body">
|
||||||
|
<span class="ft-lead-kicker">
|
||||||
|
{{#if primary_tag}}<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>{{else}}Geopolitics & Sovereign Capital{{/if}}
|
||||||
|
</span>
|
||||||
|
<h2 class="ft-center-headline">
|
||||||
|
<a href="{{url}}">{{title}}</a>
|
||||||
|
</h2>
|
||||||
|
<p class="ft-center-excerpt">
|
||||||
|
{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="32"}}{{/if}}
|
||||||
|
</p>
|
||||||
|
<div class="ft-lead-byline">
|
||||||
|
By {{#if primary_author}}<strong><a href="{{primary_author.url}}">{{primary_author.name}}</a></strong>{{/if}} · {{reading_time}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{{/foreach}}
|
||||||
|
{{else}}
|
||||||
|
{{#get "posts" limit="1" order="published_at desc" include="tags,authors"}}
|
||||||
|
{{#foreach posts}}
|
||||||
|
<article class="ft-center-package">
|
||||||
|
{{#if feature_image}}
|
||||||
|
<div class="ft-visual-frame">
|
||||||
|
<a href="{{url}}"><img src="{{img_url feature_image size="xl"}}" alt="{{title}}"></a>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
<div class="ft-center-story-body">
|
||||||
|
<span class="ft-lead-kicker">{{#if primary_tag}}{{primary_tag.name}}{{else}}Intelligence Feature{{/if}}</span>
|
||||||
|
<h2 class="ft-center-headline"><a href="{{url}}">{{title}}</a></h2>
|
||||||
|
<p class="ft-center-excerpt">{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="32"}}{{/if}}</p>
|
||||||
|
<div class="ft-lead-byline">{{#if primary_author}}By <strong>{{primary_author.name}}</strong>{{/if}} · {{reading_time}}</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
{{/get}}
|
||||||
|
|
||||||
|
{{!-- Center Dual Split Sub-Stories (NYT Split Columns) --}}
|
||||||
|
<div class="ft-center-dual-split">
|
||||||
|
{{#get "posts" filter="tag:shifa" limit="1" order="published_at desc" include="tags,authors"}}
|
||||||
|
{{#foreach posts}}
|
||||||
|
<article class="ft-mini-card">
|
||||||
|
<span class="ft-lead-kicker"><a href="/tag/shifa/">The Shifa Desk</a></span>
|
||||||
|
<h4 class="ft-mini-headline"><a href="{{url}}">{{title}}</a></h4>
|
||||||
|
<p class="ft-mini-excerpt">{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="16"}}{{/if}}</p>
|
||||||
|
<div class="ft-lead-byline">{{#if primary_author}}{{primary_author.name}}{{/if}} · {{reading_time}}</div>
|
||||||
|
</article>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
|
||||||
|
{{#get "posts" filter="tag:philosophy" limit="1" order="published_at desc" include="tags,authors"}}
|
||||||
|
{{#foreach posts}}
|
||||||
|
<article class="ft-mini-card ft-mini-card-bordered">
|
||||||
|
<span class="ft-lead-kicker"><a href="/tag/philosophy/">Classical Thought</a></span>
|
||||||
|
<h4 class="ft-mini-headline"><a href="{{url}}">{{title}}</a></h4>
|
||||||
|
<p class="ft-mini-excerpt">{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="16"}}{{/if}}</p>
|
||||||
|
<div class="ft-lead-byline">{{#if primary_author}}{{primary_author.name}}{{/if}} · {{reading_time}}</div>
|
||||||
|
</article>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{!-- ZONE 3: OPINION RAIL & DISPATCHES (Right Column 25% - NYT Style) --}}
|
||||||
|
<div class="ft-lead-col-right">
|
||||||
|
<div class="ft-rail-header">
|
||||||
|
<span>Opinion & Columns</span>
|
||||||
|
<span class="ft-rail-accent">Voices of Iqra</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{!-- THE JAUHARI COLUMN (NYT Signature Columnist Spotlight) --}}
|
||||||
|
{{#get "authors" filter="slug:jauhari-che-wan" limit="1"}}
|
||||||
|
{{#foreach authors}}
|
||||||
|
<div class="ft-jauhari-spotlight-card">
|
||||||
|
<div class="ft-jauhari-meta-row">
|
||||||
|
<div class="ft-jauhari-avatar-frame">
|
||||||
|
{{#if profile_image}}
|
||||||
|
<img src="{{profile_image}}" alt="{{name}}">
|
||||||
|
{{else}}
|
||||||
|
<img src="https://iqra.falahos.my/content/images/authors/jauhari-che-wan.png" alt="{{name}}">
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
<div class="ft-jauhari-info">
|
||||||
|
<div class="ft-jauhari-name">{{name}}</div>
|
||||||
|
<div class="ft-jauhari-tag">The Jauhari Column</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{#get "posts" filter="author:jauhari-che-wan" limit="1" order="published_at desc"}}
|
||||||
|
{{#foreach posts}}
|
||||||
|
<h3 class="ft-jauhari-headline"><a href="{{url}}">“{{title}}”</a></h3>
|
||||||
|
<p class="ft-jauhari-quote">
|
||||||
|
{{#if custom_excerpt}}“{{custom_excerpt}}”{{else}}“{{excerpt words="22"}}”{{/if}}
|
||||||
|
</p>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
</div>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
|
||||||
|
{{!-- VOICES OF IQRA COLUMNIST ROWS (NYT Columnist Stack) --}}
|
||||||
|
<div class="ft-columnist-stack">
|
||||||
|
{{#get "authors" filter="slug:[tariq-al-amiri,hakim-zainur,maryam-al-andalusi,farhan-idris]" limit="4"}}
|
||||||
|
{{#foreach authors}}
|
||||||
|
<div class="ft-columnist-row">
|
||||||
|
<div class="ft-col-avatar">
|
||||||
|
{{#if profile_image}}
|
||||||
|
<img src="{{profile_image}}" alt="{{name}}">
|
||||||
|
{{else}}
|
||||||
|
<img src="https://iqra.falahos.my/content/images/authors/{{slug}}.png" alt="{{name}}">
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
<div class="ft-col-details">
|
||||||
|
<span class="ft-col-byline"><a href="{{url}}">{{name}}</a></span>
|
||||||
|
<div class="ft-col-bio-snippet">{{bio}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{!-- THE WIRE: FAST INTELLIGENCE DISPATCHES --}}
|
||||||
|
<div class="ft-wire-box">
|
||||||
|
<div class="ft-wire-header">
|
||||||
|
The Wire • Live Intelligence
|
||||||
|
</div>
|
||||||
|
<div class="ft-wire-list">
|
||||||
|
<div class="ft-wire-item">
|
||||||
|
<span class="ft-wire-time">14m ago • BNM Pilot</span>
|
||||||
|
<div class="ft-wire-title"><a href="/tag/islamic-finance/">Ringgit-pegged wholesale digital currency enters testing with 6 Islamic lenders.</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="ft-wire-item">
|
||||||
|
<span class="ft-wire-time">1h ago • AAOIFI Fiqh</span>
|
||||||
|
<div class="ft-wire-title"><a href="/zakat/">Updated standards for digital sukuk tokenisation and purification rules ratified.</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="ft-wire-item">
|
||||||
|
<span class="ft-wire-time">3h ago • Waqf Desk</span>
|
||||||
|
<div class="ft-wire-title"><a href="/calculator/">Cross-border Waqf Ahli registration protocols established in Labuan IBFC.</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
{{!-- FT & NYT Hybrid Broadsheet — Live Suq, Nisab & Utility Telemetry Strip --}}
|
||||||
|
<div class="ft-top-telemetry-bar" role="region" aria-label="Sovereign Telemetry & Utility Bar">
|
||||||
|
<div class="ft-telemetry-inner">
|
||||||
|
<div class="ft-tel-left">
|
||||||
|
<span class="ft-tel-date">{{date format="dddd, D MMMM YYYY"}}</span>
|
||||||
|
<span class="ft-tel-bullet">•</span>
|
||||||
|
<span class="ft-tel-hijri">28 Rabi' al-Awwal 1448 AH</span>
|
||||||
|
<span class="ft-tel-bullet">•</span>
|
||||||
|
<span class="ft-tel-edition">Kuala Lumpur · London · Sovereign Edition</span>
|
||||||
|
</div>
|
||||||
|
<div class="ft-tel-center">
|
||||||
|
<span class="ft-ticker-item">GOLD NISAB: <strong>RM 34,820 / 85g</strong> <span class="ft-badge-up">+0.4%</span></span>
|
||||||
|
<span class="ft-tel-bullet">•</span>
|
||||||
|
<span class="ft-ticker-item">SILVER NISAB: <strong>RM 2,890</strong></span>
|
||||||
|
<span class="ft-tel-bullet">•</span>
|
||||||
|
<span class="ft-ticker-item">5Y SUKUK: <strong>4.82%</strong></span>
|
||||||
|
<span class="ft-tel-bullet">•</span>
|
||||||
|
<span class="ft-ticker-item">AAOIFI REF: <strong>2026.4</strong></span>
|
||||||
|
</div>
|
||||||
|
<div class="ft-tel-right">
|
||||||
|
{{#if @site.members_enabled}}
|
||||||
|
{{#unless @member}}
|
||||||
|
<a href="#/portal/signin" data-portal="signin" class="ft-tel-link">Sign In</a>
|
||||||
|
<a href="#/portal/signup" data-portal="signup" class="ft-tel-btn">Subscribe • RM 29/mo</a>
|
||||||
|
{{else}}
|
||||||
|
<a href="#/portal/account" data-portal="account" class="ft-tel-btn">My Account</a>
|
||||||
|
{{/unless}}
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user