/* ===== style block #1 (from apply.html) ===== */
/* ═══════════════════════════════════════════
RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Open Sans', sans-serif;
color: #1a1a1a;
background: #F5F6F5;
font-size: 15px;
line-height: 1.6;
/* overflow-x: clip prevents horizontal scrolling without breaking position:sticky on descendants
(unlike overflow-x: hidden, which can do so). Falls back to hidden for older browsers. */
overflow-x: hidden;
overflow-x: clip;
width: 100%;
position: relative;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* ═══════════════════════════════════════════
TOKENS
═══════════════════════════════════════════ */
:root {
/* ── Sharakah Brand Colors (from Brand Guidelines 2023) ── */
--green-dark: #39373B; /* Phantom — used as dark bg */
--green-main: #6B8F48; /* Banana Palm — primary brand green */
--green-mid: #7C8C87; /* Chinois Green */
--green-light: #C0DCCD; /* Dusty Aqua — accent */
--green-pale: #DDE0DF; /* Barely Blue — light bg tint */
--green-tint: #f0f4ee; /* derived light green tint */
--winter-sky: #A9C0CB; /* Winter Sky */
--ensign-blue: #384C67; /* Ensign Blue */
--gold: #A9C0CB; /* use Winter Sky for accents */
--gold-pale: #EBF1F4;
--off-white: #F5F6F5;
--warm-white: #FFFFFF;
--border: rgba(57,55,59,0.12);
--border-mid: rgba(57,55,59,0.22);
--text-muted: #5a5a5a;
--text-hint: #8a8a8a;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 22px;
--shadow-sm: 0 2px 8px rgba(57,55,59,0.08);
--shadow-md: 0 6px 24px rgba(57,55,59,0.12);
}
/* ═══════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════ */
.nav {
position: sticky; top: 0; z-index: 100;
background: #4F6C35;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.nav-inner {
max-width: 1160px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 0 2rem; height: 64px;
}
.nav-logo {
display: flex; align-items: center;
}
/* nav-logo replaced with img */
.nav-tabs {
display: flex; gap: 4px;
}
.nav-tab {
font-size: 13px; font-weight: 500;
color: rgba(255,255,255,0.55);
padding: 8px 16px; border-radius: 6px;
cursor: pointer; transition: all 0.2s;
border: none; background: transparent;
font-family: 'Montserrat', sans-serif;
}
.nav-tab:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-tab.active { color: #fff; background: rgba(255,255,255,0.1); }
.nav-cta {
background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3);
border: none; border-radius: var(--radius-sm);
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 500;
padding: 9px 20px; cursor: pointer;
transition: background 0.15s;
}
.nav-cta:hover { background: rgba(255,255,255,0.25); }
/* ═══════════════════════════════════════════
PAGE SYSTEM
═══════════════════════════════════════════ */
.page { display: none; }
.page.active { display: block; }
/* ═══════════════════════════════════════════
SHARED LAYOUT HELPERS
═══════════════════════════════════════════ */
.container { max-width: 1160px; margin: 0 auto; padding: 0 2rem; }
.section { padding: 80px 0; }
.section-sm { padding: 52px 0; }
.eyebrow {
font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
text-transform: uppercase; color: #6B8F48;
margin-bottom: 0.6rem;
}
.section-title {
font-family: 'Montserrat', sans-serif;
font-size: clamp(26px, 3vw, 36px);
font-weight: 600; line-height: 1.2;
margin-bottom: 0.75rem;
}
.section-sub {
font-size: 15px; color: var(--text-muted);
max-width: 560px; line-height: 1.7;
margin-bottom: 2.5rem;
}
.tag {
display: inline-block;
font-size: 11px; font-weight: 500; padding: 4px 10px;
border-radius: 20px;
}
.tag-green { background: #eaf0e6; color: #6B8F48; }
.tag-gold { background: #EBF1F4; color: #384C67; }
.tag-gray { background: #EDEDEC; color: #5a5a5a; }
/* ═══════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 14px; font-weight: 500;
padding: 12px 24px; border-radius: var(--radius-sm);
border: none; cursor: pointer; transition: all 0.15s;
/* Kill iOS Safari's native button chrome (grey fill + blue text) so an
unstyled/variant-only button never renders blue on mobile. */
-webkit-appearance: none; appearance: none;
background: transparent; color: #39373B;
}
/* Ghost (secondary) button on light backgrounds — e.g. "Skip and fill manually". */
.btn-ghost-dark { background: #f2f4ef; color: var(--green-main); border: 1px solid var(--border-mid, #d6dad6); }
.btn-ghost-dark:hover { background: #e7ece1; border-color: var(--green-main); }
.btn-md { padding: 10px 18px; font-size: 13px; }
.btn-primary { background: var(--green-main); color: #fff; }
.btn-primary:hover { background: #5a7a3d; }
.btn-light { background: #C0DCCD; color: #39373B; }
.btn-light:hover { background: #a8c4b0; }
.btn-outline { background: transparent; color: var(--green-main); border: 1.5px solid var(--green-main); }
.btn-outline:hover { background: var(--green-tint); }
.btn-ghost-white { background: transparent; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.25); }
.btn-ghost-white:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* ═══════════════════════════════════════════
PAGE 1 — FINANCIAL SOLUTIONS
═══════════════════════════════════════════ */
/* Hero */
.fs-hero {
background: #4F6C35;
padding: 50px 0 50px;
overflow: hidden;
position: relative;
}
.fs-hero::before {
content: '';
position: absolute; top: -80px; right: -80px;
width: 400px; height: 400px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
pointer-events: none;
}
.fs-hero-inner {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4rem; align-items: start;
}
.fs-hero-text { padding-bottom: 0; }
.fs-hero-tag {
display: inline-block;
background: rgba(192,220,205,0.2); color: #C0DCCD;
font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
text-transform: uppercase; padding: 5px 14px;
border-radius: 20px; margin-bottom: 1.5rem;
}
.fs-hero h1 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(34px, 4vw, 52px);
font-weight: 500; color: #fff;
line-height: 1.15; margin-bottom: 1.25rem;
}
.fs-hero h1 em { font-style: italic; color: #C0DCCD; }
.fs-hero-sub {
font-size: 15px; color: rgba(255,255,255,0.6);
line-height: 1.7; max-width: 440px; margin-bottom: 2rem;
}
.fs-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.fs-hero-stats {
display: flex; gap: 0;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 1.25rem; margin-top: 0.75rem;
}
.fs-hstat {
flex: 1; padding-right: 2rem;
border-right: 1px solid rgba(255,255,255,0.1);
}
.fs-hstat:last-child { border-right: none; padding-right: 0; padding-left: 2rem; }
.fs-hstat:first-child { padding-left: 0; }
.fs-hstat-num {
font-family: 'Montserrat', sans-serif;
font-size: 26px; font-weight: 500; color: #fff;
}
.fs-hstat-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.fs-hero-visual {
display: flex; flex-direction: column; gap: 12px;
padding-top: 78px;
padding-bottom: 0;
position: relative; z-index: 1;
}
.fs-hero-card {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-md);
padding: 16px 20px;
display: flex; align-items: center; gap: 14px;
backdrop-filter: blur(6px);
}
.fs-hero-card-icon {
width: 40px; height: 40px; border-radius: 10px;
background: rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.fs-hero-card-icon svg { width: 20px; height: 20px; }
.fs-hero-card-name { font-size: 13px; font-weight: 500; color: #fff; }
.fs-hero-card-amount { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 1px; }
.fs-hero-card-tag {
margin-left: auto;
font-size: 10px; font-weight: 500;
padding: 3px 10px; border-radius: 20px;
background: rgba(192,220,205,0.2); color: #C0DCCD;
white-space: nowrap;
}
/* Products Grid */
.fs-products { background: var(--warm-white); }
.fs-products-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.prod-card {
background: var(--warm-white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 24px 24px;
position: relative; cursor: pointer;
transition: all 0.2s;
display: flex; flex-direction: column;
}
.prod-card:hover { border-color: #6B8F48; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.prod-card.featured { border-color: #6B8F48; border-width: 1.5px; }
.prod-card.featured::before {
content: 'Most popular';
position: absolute; top: -1px; left: 24px;
background: var(--green-main); color: #fff;
font-size: 10px; font-weight: 500;
padding: 4px 12px; border-radius: 0 0 8px 8px;
}
.prod-card-header { margin-bottom: 16px; }
.prod-icon {
width: 44px; height: 44px; border-radius: 10px;
background: #eaf0e6;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.prod-icon svg { width: 22px; height: 22px; }
.prod-name {
font-family: 'Montserrat', sans-serif;
font-size: 19px; font-weight: 400;
margin-bottom: 6px;
}
.prod-range {
font-size: 13px; font-weight: 500;
color: var(--green-main);
}
.prod-divider {
height: 1px; background: var(--border);
margin: 16px 0;
}
.prod-desc {
font-size: 13px; color: var(--text-muted);
line-height: 1.65; margin-bottom: 16px; flex: 1;
}
.prod-specs {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 20px;
}
.prod-spec {
display: flex; align-items: center; gap: 8px;
font-size: 12.5px;
}
.prod-spec-dot {
width: 5px; height: 5px; border-radius: 50%;
background: #C0DCCD; flex-shrink: 0;
}
.prod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.prod-cta {
display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 500;
color: #6B8F48;
background: none; border: none;
cursor: pointer; padding: 0;
font-family: 'Open Sans', sans-serif;
transition: gap 0.15s;
margin-top: auto;
}
.prod-cta:hover { gap: 10px; }
.prod-cta svg { width: 16px; height: 16px; }
/* Sharia Section */
.fs-sharia { background: #F5F6F5; }
/* Sharia Introduction / Bridge Section — full-width banner between products grid and the deep-dive */
.fs-sharia-intro {
background: #6B8F48;
padding: 64px 0;
position: relative;
overflow: hidden;
color: #fff;
}
.fs-sharia-intro::before {
content: '';
position: absolute;
top: -30%; right: -8%;
width: 38%; aspect-ratio: 1;
background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
pointer-events: none;
}
.fs-sharia-intro::after {
content: '';
position: absolute;
bottom: -40%; left: -8%;
width: 38%; aspect-ratio: 1;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
pointer-events: none;
}
.fs-sharia-intro-inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 760px;
margin: 0 auto;
}
.fs-sharia-intro-eyebrow { margin-bottom: 18px; }
.fs-sharia-intro-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.30);
color: #fff;
padding: 7px 14px; border-radius: 999px;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 1.5px;
}
.fs-sharia-intro-badge svg { width: 14px; height: 14px; }
.fs-sharia-intro-title {
font-family: 'Montserrat', sans-serif;
font-size: clamp(24px, 3vw, 34px);
font-weight: 500;
line-height: 1.25;
margin-bottom: 18px;
color: #fff;
}
.fs-sharia-intro-sub {
font-size: 15px;
line-height: 1.7;
color: rgba(255,255,255,0.90);
margin: 0 auto 30px;
}
.fs-sharia-intro-cta {
display: inline-flex; align-items: center; gap: 8px;
background: #fff;
color: #4F6C35;
border: none; border-radius: 8px;
padding: 13px 26px;
font-family: 'Montserrat', sans-serif;
font-size: 14px; font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.fs-sharia-intro-cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.fs-sharia-intro-cta svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
.fs-sharia-intro { padding: 44px 0; }
.fs-sharia-intro-sub { font-size: 14px; }
}
.fs-sharia-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px;
}
.sharia-card {
background: var(--warm-white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
transition: all 0.2s;
}
.sharia-card:hover { border-color: #A9C0CB; box-shadow: var(--shadow-sm); }
.sharia-card-top {
display: flex; align-items: flex-start;
justify-content: space-between; gap: 12px;
margin-bottom: 12px;
}
.sharia-name {
font-family: 'Montserrat', sans-serif;
font-size: 17px; font-weight: 400;
}
.sharia-arabic {
font-size: 13px; color: var(--text-hint);
font-style: italic; margin-bottom: 8px;
}
.sharia-desc {
font-size: 13px; color: var(--text-muted);
line-height: 1.65; margin-bottom: 14px;
}
.sharia-how {
background: var(--green-tint);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.sharia-how-label {
font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.08em;
color: #6B8F48; margin-bottom: 8px;
}
.sharia-steps {
display: flex; flex-direction: column; gap: 6px;
}
.sharia-step {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12px; color: #3a5228; line-height: 1.5;
}
.sharia-step-num {
width: 16px; height: 16px; border-radius: 50%;
background: var(--green-main); color: #fff;
font-size: 9px; font-weight: 500;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
}
/* Ventures Section */
.fs-ventures {
background: #6B8F48;
position: relative; overflow: hidden;
}
.fs-ventures::after {
content: '';
position: absolute; bottom: -100px; right: -60px;
width: 300px; height: 300px; border-radius: 50%;
background: rgba(255,255,255,0.06);
pointer-events: none;
}
.fs-ventures-inner {
display: grid; grid-template-columns: 1fr 1.2fr;
gap: 4rem; align-items: center;
position: relative; z-index: 1;
}
.fs-ventures-text .eyebrow { color: #C0DCCD; }
.fs-ventures-title {
font-family: 'Montserrat', sans-serif;
font-size: clamp(26px, 3vw, 36px);
font-weight: 500; color: #fff;
line-height: 1.2; margin-bottom: 1rem;
}
.fs-ventures-sub {
font-size: 15px; color: rgba(255,255,255,0.6);
line-height: 1.7; margin-bottom: 2rem;
}
.ventures-cards {
display: flex; flex-direction: column; gap: 12px;
}
.vc {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-md);
padding: 18px 20px;
display: flex; gap: 14px; align-items: flex-start;
}
.vc-icon {
width: 36px; height: 36px; border-radius: 8px;
background: rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.vc-icon svg { width: 18px; height: 18px; }
.vc-title { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 3px; }
.vc-desc { font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.55; }
/* Eligibility */
.fs-elig { background: var(--warm-white); }
.fs-elig-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 14px; margin-bottom: 1.5rem;
}
.elig-card {
background: var(--off-white);
border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 20px;
transition: border-color 0.15s;
}
.elig-card:hover { border-color: #6B8F48; }
.elig-icon {
width: 38px; height: 38px; border-radius: 9px;
background: #eaf0e6;
display: flex; align-items: center; justify-content: center;
margin-bottom: 12px;
}
.elig-icon svg { width: 18px; height: 18px; }
.elig-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.elig-val { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.elig-val strong { color: var(--green-main); font-weight: 500; }
.elig-note {
background: #EBF1F4; border: 1px solid #A9C0CB;
border-radius: var(--radius-sm); padding: 14px 18px;
font-size: 13px; color: #384C67; line-height: 1.6;
display: flex; align-items: flex-start; gap: 10px;
}
.elig-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
/* Testimonials */
.fs-testi { background: var(--off-white); }
.fs-testi-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.testi-card {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 28px 24px;
}
.testi-quote-mark {
font-family: 'Montserrat', sans-serif;
font-size: 48px; line-height: 1; color: var(--green-pale);
margin-bottom: 8px;
}
.testi-text {
font-family: 'Montserrat', sans-serif;
font-size: 15px; font-weight: 300; font-style: italic;
line-height: 1.65; color: #1a1a1a; margin-bottom: 20px;
}
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
width: 38px; height: 38px; border-radius: 50%;
background: #eaf0e6;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 500; color: var(--green-main);
flex-shrink: 0;
}
.testi-name { font-size: 13px; font-weight: 500; }
.testi-biz { font-size: 11.5px; color: var(--text-hint); margin-top: 1px; }
.testi-sector {
margin-left: auto; flex-shrink: 0;
}
/* Page 1 CTA Bridge */
.fs-bridge {
background: #6B8F48;
padding: 60px 0;
}
.fs-bridge-inner {
display: flex; align-items: center;
justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.fs-bridge h2 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(22px, 3vw, 30px);
font-weight: 500; color: #fff;
}
.fs-bridge p { font-size: 14px; color: rgba(255,255,255,0.65); margin-top: 4px; }
.fs-bridge-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* ═══════════════════════════════════════════
PAGE 2 — FUNDING PROCESS
═══════════════════════════════════════════ */
/* Hero */
.fp-hero {
background: #4F6C35;
padding: 50px 0 50px;
position: relative; overflow: hidden;
}
.fp-hero::before {
content: '';
position: absolute; top: -60px; right: -60px;
width: 320px; height: 320px; border-radius: 50%;
background: radial-gradient(circle, rgba(107,143,72,0.35) 0%, transparent 70%);
}
.fp-hero::after {
content: '';
position: absolute; bottom: -80px; left: 40%;
width: 240px; height: 240px; border-radius: 50%;
background: rgba(168,208,112,0.07);
}
.fp-hero-inner {
position: relative; z-index: 1;
display: grid; grid-template-columns: 1fr 1fr;
gap: 4rem; align-items: center;
}
.fp-hero-tag {
display: inline-block;
background: rgba(192,220,205,0.2); color: #C0DCCD;
font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
text-transform: uppercase; padding: 5px 14px;
border-radius: 20px; margin-bottom: 1.5rem;
}
.fp-hero h1 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 500; color: #fff;
line-height: 1.2; margin-bottom: 1rem;
}
.fp-hero h1 em { font-style: italic; color: #C0DCCD; }
.fp-hero-sub {
font-size: 15px; color: rgba(255,255,255,0.6);
line-height: 1.7; max-width: 440px; margin-bottom: 2rem;
}
.fp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.fp-hero-stats {
display: flex; gap: 0;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 2rem; margin-top: 2.5rem;
}
.fp-hstat {
flex: 1;
border-right: 1px solid rgba(255,255,255,0.1);
padding-right: 1.5rem;
}
.fp-hstat:last-child { border-right: none; padding-left: 1.5rem; padding-right: 0; }
.fp-hstat:first-child { padding-left: 0; }
.fp-hstat-num {
font-family: 'Montserrat', sans-serif;
font-size: 24px; font-weight: 500; color: #fff;
}
.fp-hstat-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
/* Hero timeline preview */
.fp-hero-timeline {
display: flex; flex-direction: column; gap: 0;
}
.fp-htl-step {
display: flex; align-items: flex-start; gap: 16px;
position: relative;
}
.fp-htl-step:not(:last-child)::after {
content: '';
position: absolute; left: 19px; top: 40px;
width: 2px; height: calc(100% - 8px);
background: rgba(168,208,112,0.25);
}
.fp-htl-num {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(192,220,205,0.18);
border: 1px solid rgba(168,208,112,0.3);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-family: 'Montserrat', sans-serif;
font-size: 15px; color: #C0DCCD;
position: relative; z-index: 1;
}
.fp-htl-content { padding: 8px 0 28px; }
.fp-htl-title { font-size: 14px; font-weight: 500; color: #fff; }
.fp-htl-time { font-size: 11.5px; color: rgba(255,255,255,0.4); margin-top: 3px; }
/* Steps Detail — Horizontal */
.fp-steps { background: var(--warm-white); }
/* Track */
.fps-track {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; position: relative; margin-bottom: 0;
}
/* Connector lines */
.fps-connectors {
position: absolute; top: 52px; left: 0; right: 0;
display: flex; pointer-events: none; z-index: 0;
padding: 0 12.5%;
}
.fps-line {
flex: 1; height: 2px;
background: rgba(107,143,72,0.2);
margin: 0 -1px;
}
/* Step card */
.fps-card {
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 0 12px 28px;
cursor: pointer; position: relative; z-index: 1;
transition: all .2s;
}
.fps-num {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(107,143,72,0.12); color: #6B8F48;
font-family: 'Montserrat', sans-serif;
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
margin-bottom: 10px; transition: all .2s;
}
.fps-card.active .fps-num, .fps-card:hover .fps-num {
background: #6B8F48; color: #fff;
}
.fps-icon-wrap {
width: 80px; height: 80px; border-radius: 20px;
background: #F5F6F5; border: 2px solid rgba(107,143,72,0.15);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px; transition: all .25s;
color: #7C8C87;
}
.fps-icon-wrap svg { width: 36px; height: 36px; }
.fps-card:hover .fps-icon-wrap {
border-color: #6B8F48; background: #f0f6ea; color: #6B8F48;
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(107,143,72,0.15);
}
.fps-card.active .fps-icon-wrap {
border-color: #6B8F48; background: #6B8F48; color: #fff;
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(107,143,72,0.25);
}
.fps-card.active .fps-badge-circle { fill: #fff; }
.fps-card-title {
font-family: 'Montserrat', sans-serif;
font-size: 14px; font-weight: 600;
color: #1a1a1a; margin-bottom: 4px;
transition: color .2s;
}
.fps-card.active .fps-card-title, .fps-card:hover .fps-card-title { color: #6B8F48; }
.fps-card-timing {
font-size: 12px; color: var(--text-hint);
font-weight: 500;
}
/* Detail panel */
.fps-detail {
background: #F5F6F5;
border: 1.5px solid rgba(107,143,72,0.18);
border-radius: 16px;
padding: 28px 32px 24px;
margin-top: 8px;
animation: fpsIn .3s ease;
}
@keyframes fpsIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.fps-detail-header {
display: flex; align-items: center; gap: 16px;
margin-bottom: 16px;
}
.fps-detail-icon {
width: 52px; height: 52px; border-radius: 14px;
background: #6B8F48; color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.fps-detail-icon svg { width: 26px; height: 26px; }
.fps-detail-title {
font-family: 'Montserrat', sans-serif;
font-size: 20px; font-weight: 700; color: #1a1a1a;
}
.fps-detail-timing {
display: inline-block; font-size: 12px; font-weight: 500;
color: #6B8F48; background: rgba(107,143,72,0.1);
padding: 3px 12px; border-radius: 20px; margin-top: 4px;
}
.fps-detail-desc {
font-size: 14px; color: var(--text-muted);
line-height: 1.75; margin-bottom: 20px;
border-left: 3px solid #6B8F48;
padding-left: 16px;
}
.fps-detail-items {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; margin-bottom: 20px;
}
.fps-detail-item {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13.5px; line-height: 1.55; color: #3a3a3a;
}
.fps-detail-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #6B8F48; flex-shrink: 0; margin-top: 5px;
}
/* Optional advisory paragraph between items and roles (e.g. Step 2 timing caveat) */
.fps-detail-note {
background: #fffaf2;
border-left: 3px solid #d4a64a;
padding: 12px 14px;
margin: 0 0 18px;
font-size: 13px;
color: #6a4f1a;
line-height: 1.55;
border-radius: 0 6px 6px 0;
}
.fps-detail-note strong { color: #8a6614; }
.fps-detail-roles {
display: flex; gap: 20px; flex-wrap: wrap;
padding-top: 16px; border-top: 1px solid rgba(107,143,72,0.15);
}
.fps-detail-role {
display: flex; align-items: center; gap: 8px;
font-size: 12.5px; color: var(--text-muted);
}
.fps-detail-role-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Nav buttons */
.fps-nav {
display: flex; justify-content: space-between;
align-items: center; margin-top: 20px;
padding-top: 16px; border-top: 1px solid rgba(107,143,72,0.1);
}
.fps-nav-btn {
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 500;
padding: 9px 18px; border-radius: 8px; cursor: pointer;
transition: all .15s; border: 1.5px solid rgba(107,143,72,0.25);
background: #fff; color: #6B8F48;
}
.fps-nav-btn:hover { background: #f0f6ea; border-color: #6B8F48; }
.fps-nav-btn:disabled { opacity: .3; cursor: default; }
.fps-nav-btn.primary { background: #6B8F48; color: #fff; border-color: #6B8F48; }
.fps-nav-btn.primary:hover { background: #3d5228; }
@media (max-width: 720px) {
.fps-track { grid-template-columns: 1fr 1fr; gap: 16px; }
.fps-connectors { display: none; }
.fps-detail-items { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.fps-track { grid-template-columns: 1fr 1fr; }
}
/* Keep old fp-step CSS for fallback — hide the old list */
.fp-steps-list { display: none; }
/* Documents */
.fp-docs { background: var(--off-white); }
.fp-docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.doc-card {
background: var(--warm-white);
border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 20px;
display: flex; align-items: center; gap: 14px;
text-decoration: none; color: inherit;
transition: all 0.15s;
}
.doc-card:hover { border-color: #6B8F48; box-shadow: var(--shadow-sm); }
.doc-icon {
width: 44px; height: 44px; border-radius: 10px;
background: #eaf0e6;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.doc-icon svg { width: 20px; height: 20px; }
.doc-name { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.doc-desc { font-size: 12px; color: var(--text-hint); }
.doc-arrow { margin-left: auto; color: var(--text-hint); flex-shrink: 0; }
.doc-arrow svg { width: 16px; height: 16px; }
/* FAQ */
.fp-faq { background: var(--warm-white); }
.fp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 0; cursor: pointer; gap: 12px;
font-size: 14px; font-weight: 500; line-height: 1.4;
transition: color 0.15s;
}
.faq-q:hover { color: var(--green-main); }
.faq-icon { font-size: 20px; flex-shrink: 0; color: var(--green-main); transition: transform 0.2s; line-height: 1; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
font-size: 13.5px; color: var(--text-muted);
line-height: 1.7; padding-bottom: 16px; display: none;
}
.faq-item.open .faq-a { display: block; }
/* Final CTA */
.fp-cta {
background: #6B8F48;
padding: 80px 0;
position: relative; overflow: hidden;
}
.fp-cta::before {
content: '';
position: absolute; top: -80px; left: -80px;
width: 320px; height: 320px; border-radius: 50%;
background: rgba(255,255,255,0.06);
}
.fp-cta-inner {
position: relative; z-index: 1;
text-align: center;
}
.fp-cta h2 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 500; color: #fff;
line-height: 1.2; margin-bottom: 1rem;
}
.fp-cta h2 em { font-style: italic; color: #C0DCCD; }
.fp-cta-sub {
font-size: 15px; color: rgba(255,255,255,0.6);
max-width: 460px; margin: 0 auto 2.5rem;
line-height: 1.7;
}
.fp-cta-actions {
display: flex; gap: 12px;
justify-content: center; flex-wrap: wrap;
}
.fp-cta-note {
font-size: 12px; color: rgba(255,255,255,0.35);
margin-top: 1.25rem;
}
.fp-cta-contacts {
display: flex; gap: 2rem; justify-content: center;
flex-wrap: wrap; margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
.fp-cta-contact {
display: flex; align-items: center; gap: 10px;
}
.fp-cta-contact-icon {
width: 36px; height: 36px; border-radius: 8px;
background: rgba(255,255,255,0.07);
display: flex; align-items: center; justify-content: center;
}
.fp-cta-contact-icon svg { width: 16px; height: 16px; }
.fp-cta-contact-label { font-size: 11px; color: rgba(255,255,255,0.4); }
.fp-cta-contact-val { font-size: 13px; color: #fff; font-weight: 500; }
/* ═══════════════════════════════════════════
BLOG
═══════════════════════════════════════════ */
/* Blog hero */
.blog-hero {
background: #4F6C35;
padding: 80px 0 70px;
position: relative;
overflow: hidden;
}
.blog-hero::before {
content: '';
position: absolute; top: -80px; right: -80px;
width: 380px; height: 380px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
pointer-events: none;
}
.blog-hero-inner {
max-width: 760px;
position: relative; z-index: 1;
}
.blog-hero-eyebrow {
display: inline-block;
font-size: 11px; font-weight: 600;
color: #C0DCCD;
text-transform: uppercase; letter-spacing: 2px;
margin-bottom: 18px;
}
.blog-hero h1 {
font-family: 'Montserrat', sans-serif;
color: #fff;
font-size: clamp(28px, 4vw, 44px);
font-weight: 400;
line-height: 1.2;
margin-bottom: 18px;
}
.blog-hero-sub {
font-size: 16px; line-height: 1.6;
color: rgba(255,255,255,0.85);
max-width: 620px;
}
/* Listing body */
.blog-body {
background: var(--warm-white);
padding: 64px 0 80px;
}
/* Featured post (full width, image left, content right on desktop) */
.blog-featured-card {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 36px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 40px;
cursor: pointer;
transition: all 0.25s;
}
.blog-featured-card:hover {
border-color: #6B8F48;
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.blog-featured-image {
position: relative;
min-height: 320px;
display: flex; align-items: center; justify-content: center;
}
.blog-featured-image svg.illustration {
width: 60%; height: auto; opacity: 0.9;
}
.blog-featured-content {
padding: 38px 32px 32px 0;
display: flex; flex-direction: column; justify-content: center;
}
.blog-featured-badge {
display: inline-flex; align-items: center; gap: 6px;
background: #6B8F48; color: #fff;
font-size: 10.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: 1.5px;
padding: 5px 11px; border-radius: 999px;
margin-bottom: 14px;
align-self: flex-start;
}
.blog-featured-title {
font-family: 'Montserrat', sans-serif;
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 500;
line-height: 1.3;
color: #39373B;
margin-bottom: 14px;
}
.blog-featured-excerpt {
font-size: 14.5px; line-height: 1.65;
color: #555;
margin-bottom: 20px;
}
.blog-featured-meta {
display: flex; align-items: center; gap: 14px;
font-size: 12.5px; color: #888;
}
.blog-featured-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #c0c0c0; }
/* Grid of post cards */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.blog-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex; flex-direction: column;
cursor: pointer;
transition: all 0.2s;
}
.blog-card:hover {
border-color: #6B8F48;
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.blog-card-image {
height: 180px;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.blog-card-image svg.illustration {
width: 50%; height: auto; opacity: 0.85;
}
.blog-card-body {
padding: 22px 22px 24px;
display: flex; flex-direction: column;
flex: 1;
}
.blog-card-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10px; font-weight: 600;
color: #4F6C35;
text-transform: uppercase; letter-spacing: 1.5px;
margin-bottom: 10px;
align-self: flex-start;
}
.blog-card-badge::before {
content: ''; width: 5px; height: 5px;
border-radius: 50%; background: #6B8F48;
}
.blog-card-title {
font-family: 'Montserrat', sans-serif;
font-size: 16.5px;
font-weight: 500;
line-height: 1.35;
color: #39373B;
margin-bottom: 10px;
}
.blog-card-excerpt {
font-size: 13px; line-height: 1.6;
color: #666;
margin-bottom: 16px;
flex: 1;
}
.blog-card-meta {
display: flex; align-items: center; gap: 10px;
font-size: 11.5px; color: #999;
padding-top: 14px;
border-top: 1px solid #f0f0f0;
}
.blog-card-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #c0c0c0; }
/* Gradient backgrounds for blog illustrations — varies by category */
.blog-img-bg-funding { background: linear-gradient(135deg, #4F6C35 0%, #6B8F48 100%); }
.blog-img-bg-success { background: linear-gradient(135deg, #384C67 0%, #5A7290 100%); }
.blog-img-bg-insights { background: linear-gradient(135deg, #6B8F48 0%, #A9C0CB 100%); }
.blog-img-bg-news { background: linear-gradient(135deg, #C0DCCD 0%, #6B8F48 100%); }
.blog-img-bg-guide { background: linear-gradient(135deg, #4F6C35 0%, #C0DCCD 100%); }
/* Detail view */
.blog-detail {
background: var(--warm-white);
padding: 48px 0 80px;
}
.blog-back-btn {
display: inline-flex; align-items: center; gap: 8px;
background: none; border: none;
font-family: inherit; font-size: 13.5px;
color: #6B8F48; font-weight: 500;
cursor: pointer; padding: 0;
margin-bottom: 28px;
}
.blog-back-btn:hover { color: #4F6C35; }
.blog-back-btn svg { width: 14px; height: 14px; }
.blog-article {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.blog-article-hero {
height: 280px;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.blog-article-hero svg.illustration {
width: 35%; height: auto; opacity: 0.9;
}
.blog-article-body {
padding: 44px 56px 52px;
max-width: 760px;
margin: 0 auto;
}
.blog-article-meta-top {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
font-size: 12.5px; color: #888;
}
.blog-article-badge {
display: inline-flex; align-items: center; gap: 6px;
background: #f0f6ec;
color: #4F6C35;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 1.5px;
padding: 5px 12px; border-radius: 999px;
}
.blog-article-title {
font-family: 'Montserrat', sans-serif;
font-size: clamp(26px, 3.5vw, 36px);
font-weight: 500;
line-height: 1.2;
color: #39373B;
margin-bottom: 18px;
}
.blog-article-lede {
font-size: 17px; line-height: 1.7;
color: #555;
margin-bottom: 32px;
font-weight: 400;
}
.blog-article-author {
display: flex; align-items: center; gap: 12px;
padding: 16px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-bottom: 32px;
}
.blog-author-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #6B8F48 0%, #4F6C35 100%);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 600; font-size: 14px;
font-family: 'Montserrat', sans-serif;
flex-shrink: 0;
}
.blog-author-info { line-height: 1.4; }
.blog-author-name {
font-size: 13.5px; font-weight: 600; color: #39373B;
}
.blog-author-role { font-size: 12px; color: #888; }
.blog-article-content { color: #39373B; }
.blog-article-content h2 {
font-family: 'Montserrat', sans-serif;
font-size: 22px; font-weight: 600;
color: #39373B;
margin: 36px 0 16px;
line-height: 1.3;
}
.blog-article-content h3 {
font-family: 'Montserrat', sans-serif;
font-size: 17px; font-weight: 600;
color: #4F6C35;
margin: 28px 0 12px;
}
.blog-article-content p {
font-size: 15.5px; line-height: 1.75;
margin-bottom: 18px;
color: #444;
}
.blog-article-content ul,
.blog-article-content ol {
margin: 0 0 22px 22px;
padding: 0;
}
.blog-article-content li {
font-size: 15.5px; line-height: 1.7;
color: #444;
margin-bottom: 8px;
}
.blog-article-content blockquote {
border-left: 3px solid #6B8F48;
background: #f7f9f5;
padding: 18px 22px;
margin: 26px 0;
font-style: italic;
font-size: 16px;
color: #4F6C35;
border-radius: 0 8px 8px 0;
}
.blog-article-content strong { color: #39373B; font-weight: 600; }
.blog-article-content a { color: #4F6C35; text-decoration: underline; }
.blog-cta-box {
background: linear-gradient(135deg, #4F6C35 0%, #6B8F48 100%);
color: #fff;
border-radius: 12px;
padding: 28px 32px;
margin: 36px 0 8px;
text-align: center;
}
.blog-cta-box-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px; font-weight: 500;
margin-bottom: 6px;
}
.blog-cta-box-sub {
font-size: 13.5px; color: rgba(255,255,255,0.85);
margin-bottom: 18px;
}
.blog-cta-box button {
background: #fff; color: #4F6C35;
border: none; border-radius: 8px;
padding: 11px 22px;
font-family: 'Montserrat', sans-serif;
font-size: 13.5px; font-weight: 600;
cursor: pointer; transition: all 0.15s;
}
.blog-cta-box button:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
/* Related posts */
.blog-related {
margin-top: 56px;
}
.blog-related-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px; font-weight: 500;
color: #39373B;
margin-bottom: 22px;
}
.blog-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 900px) {
.blog-featured-card { grid-template-columns: 1fr; }
.blog-featured-content { padding: 28px 24px 32px; }
.blog-featured-image { min-height: 220px; }
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.blog-related-grid { grid-template-columns: 1fr 1fr; }
.blog-article-body { padding: 32px 28px 40px; }
.blog-article-hero { height: 200px; }
}
@media (max-width: 600px) {
.blog-hero { padding: 56px 0 48px; }
.blog-body { padding: 40px 0 56px; }
.blog-grid { grid-template-columns: 1fr; }
.blog-related-grid { grid-template-columns: 1fr; }
.blog-article-body { padding: 24px 20px 32px; }
.blog-article-hero { height: 160px; }
}
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
.footer {
background: #4F6C35;
padding: 24px 0;
}
.footer-inner {
display: flex; align-items: center;
justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer-logo {
font-family: 'Montserrat', sans-serif;
font-size: 16px; color: rgba(255,255,255,0.6);
}
.footer-links {
display: flex; gap: 20px;
}
.footer-link {
font-size: 12px; color: rgba(255,255,255,0.35);
transition: color 0.15s; cursor: pointer;
}
.footer-link:hover { color: rgba(255,255,255,0.7); }
.footer-copy { font-size: 11.5px; color: rgba(255,255,255,0.25); }
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 900px) {
.fs-hero-inner,
.fp-hero-inner,
.fs-ventures-inner { grid-template-columns: 1fr; gap: 2rem; }
.fs-hero-visual, .fp-hero-timeline { display: none; }
.fs-products-grid { grid-template-columns: 1fr 1fr; }
.fs-sharia-grid { grid-template-columns: 1fr; }
.fs-elig-grid { grid-template-columns: 1fr 1fr; }
.fs-testi-grid { grid-template-columns: 1fr; }
.fp-step-items { grid-template-columns: 1fr; }
.fp-faq-grid { grid-template-columns: 1fr; }
.fp-docs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.container { padding: 0 1.25rem; }
.section { padding: 52px 0; }
.nav-tabs { display: none; }
.nav-cta { display: none; }
.nav-hamburger { display: flex !important; }
.fs-products-grid { grid-template-columns: 1fr; }
.fs-elig-grid { grid-template-columns: 1fr; }
}
/* ── Mobile hamburger ── */
.nav-hamburger {
display: none;
flex-direction: column; justify-content: center; gap: 5px;
width: 40px; height: 40px; border-radius: 8px;
background: rgba(255,255,255,0.12);
border: none; cursor: pointer; padding: 10px;
margin-left: auto;
}
.nav-hamburger span {
display: block; height: 2px; border-radius: 2px;
background: #fff; transition: all .25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── Mobile drawer ── */
.nav-drawer {
position: fixed; top: 64px; left: 0; right: 0; z-index: 99;
background: #3d5228;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: 12px 0 16px;
transform: translateY(-110%);
transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
/* If the drawer is taller than the screen, let it scroll internally instead of overflowing */
max-height: calc(100vh - 64px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Defensive hide: even if a transform glitches, these keep the drawer invisible */
visibility: hidden;
pointer-events: none;
}
.nav-drawer.open {
transform: translateY(0);
visibility: visible;
pointer-events: auto;
transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
}
/* Backdrop — covers the page behind the drawer so tapping anywhere closes it. */
.nav-drawer-backdrop {
display: none;
position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
z-index: 98;
background: rgba(0,0,0,0.35);
opacity: 0;
transition: opacity .25s ease;
}
.nav-drawer-backdrop.open {
display: block;
opacity: 1;
}
.nav-drawer-link {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 13px 24px;
background: none; border: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px; font-weight: 500;
color: rgba(255,255,255,0.75);
cursor: pointer; text-align: left;
transition: all .15s;
}
.nav-drawer-link:hover, .nav-drawer-link.active {
color: #fff; background: rgba(255,255,255,0.08);
}
.nav-drawer-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .7; }
.nav-drawer-link.active svg { opacity: 1; }
.nav-drawer-divider {
height: 1px; background: rgba(255,255,255,0.1);
margin: 8px 24px;
}
.nav-drawer-apply {
margin: 8px 24px 0;
display: block; width: calc(100% - 48px);
background: #6B8F48; color: #fff;
border: none; border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 14px; font-weight: 600;
padding: 13px; cursor: pointer;
text-align: center; transition: background .15s;
}
.nav-drawer-apply:hover { background: #5a7a3d; }
/* ── Shareholder cards */
.sh-card {
background: #f8faf6; border: 1.5px solid rgba(107,143,72,0.2);
border-radius: 12px; padding: 18px 18px 14px;
margin-bottom: 12px; position: relative;
transition: border-color .15s;
}
.sh-card:hover { border-color: rgba(107,143,72,0.4); }
.sh-card-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.sh-card-title {
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 700; color: #6B8F48;
display: flex; align-items: center; gap: 8px;
}
.sh-card-title-num {
width: 22px; height: 22px; border-radius: 50%;
background: #6B8F48; color: #fff;
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.sh-remove-btn {
background: none; border: 1px solid rgba(192,57,43,0.3);
border-radius: 6px; padding: 4px 10px;
font-size: 11px; color: #c0392b; cursor: pointer;
font-family: 'Montserrat', sans-serif; font-weight: 500;
transition: all .15s;
}
.sh-remove-btn:hover { background: #fdf0f0; border-color: #c0392b; }
.sh-primary-badge {
font-size: 10px; font-weight: 600; color: #6B8F48;
background: rgba(107,143,72,0.12); padding: 3px 9px;
border-radius: 20px;
}
/* ═══════════════════════════════════════════
BOOKING PANEL
═══════════════════════════════════════════ */
/* Floating trigger button */
.book-fab {
position: fixed; bottom: 28px; right: 28px; z-index: 200;
display: flex; align-items: center; gap: 10px;
background: #6B8F48; color: #fff;
border: none; border-radius: 50px;
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 600;
padding: 13px 22px 13px 18px;
cursor: pointer; box-shadow: 0 4px 20px rgba(107,143,72,0.4);
transition: all 0.2s;
}
.book-fab:hover { background: #3d5228; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(107,143,72,0.45); }
.book-fab-icon {
width: 22px; height: 22px;
background: rgba(255,255,255,0.2); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.book-fab-icon svg { width: 12px; height: 12px; }
.book-fab-pulse {
position: absolute; top: -3px; right: -3px;
width: 10px; height: 10px; border-radius: 50%;
background: #C0DCCD; border: 2px solid #fff;
animation: bookPulse 2s infinite;
}
@keyframes bookPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.7; }
}
/* Overlay */
.book-overlay {
position: fixed; inset: 0; z-index: 300;
background: rgba(30,20,10,0.55);
backdrop-filter: blur(3px);
opacity: 0; pointer-events: none;
transition: opacity 0.3s;
}
.book-overlay.open { opacity: 1; pointer-events: all; }
/* Panel */
.book-panel {
position: fixed; top: 0; right: -540px; z-index: 301;
width: 100%; max-width: 520px; height: 100%;
background: #fff;
display: flex; flex-direction: column;
box-shadow: -8px 0 40px rgba(0,0,0,0.15);
transition: right 0.35s cubic-bezier(.4,0,.2,1);
overflow: hidden;
}
.book-panel.open { right: 0; }
/* Panel header */
.book-header {
background: #6B8F48;
padding: 20px 24px 18px;
display: flex; align-items: center; gap: 14px;
flex-shrink: 0;
}
.book-header-icon {
width: 40px; height: 40px; border-radius: 10px;
background: rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.book-header-icon svg { width: 20px; height: 20px; }
.book-header-title {
font-family: 'Montserrat', sans-serif;
font-size: 16px; font-weight: 700; color: #fff;
}
.book-header-sub { font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 2px; }
.book-close {
margin-left: auto; background: rgba(255,255,255,0.15);
border: none; border-radius: 8px; width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0; color: #fff; transition: background .15s;
}
.book-close:hover { background: rgba(255,255,255,0.25); }
.book-close svg { width: 16px; height: 16px; }
/* Step indicator */
.book-steps {
display: flex; padding: 14px 24px 0;
gap: 0; flex-shrink: 0;
border-bottom: 1px solid rgba(57,55,59,0.1);
background: #fff;
}
.book-step-tab {
flex: 1; text-align: center; padding-bottom: 12px;
font-size: 11.5px; font-weight: 500; color: #9a9a9a;
font-family: 'Montserrat', sans-serif;
border-bottom: 2px solid transparent;
transition: all .2s;
}
.book-step-tab.active { color: #6B8F48; border-bottom-color: #6B8F48; }
.book-step-tab.done { color: #6B8F48; }
.book-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
background: #f0f0ec; color: #9a9a9a;
font-size: 10px; font-weight: 700;
margin-right: 6px; vertical-align: middle;
transition: all .2s;
}
.book-step-tab.active .book-step-num { background: #6B8F48; color: #fff; }
.book-step-tab.done .book-step-num { background: #6B8F48; color: #fff; }
/* Panel body — scrollable */
.book-body { flex: 1; overflow-y: auto; padding: 24px; }
.book-pane { display: none; animation: bookIn .25s ease; }
.book-pane.active { display: block; }
@keyframes bookIn {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
/* ── PANE 1: Date picker ── */
.book-month-nav {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.book-month-label {
font-family: 'Montserrat', sans-serif;
font-size: 15px; font-weight: 600;
}
.book-month-btn {
background: none; border: 1.5px solid rgba(57,55,59,0.2);
border-radius: 8px; width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #3a3a3a; transition: all .15s;
}
.book-month-btn:hover { border-color: #6B8F48; color: #6B8F48; }
.book-month-btn svg { width: 14px; height: 14px; }
.book-calendar { width: 100%; border-collapse: collapse; }
.book-calendar th {
font-size: 11px; font-weight: 600; color: #9a9a9a;
text-align: center; padding: 6px 0 10px;
text-transform: uppercase; letter-spacing: .06em;
}
.book-calendar td { text-align: center; padding: 3px; }
.book-day {
width: 40px; height: 40px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto; font-size: 13.5px;
cursor: pointer; transition: all .15s;
border: 1.5px solid transparent;
}
.book-day.empty { cursor: default; }
.book-day.past { color: #ccc; cursor: not-allowed; }
.book-day.weekend { color: #ccc; cursor: not-allowed; }
.book-day.available:hover { background: #f0f6ea; border-color: #6B8F48; color: #6B8F48; }
.book-day.selected { background: #6B8F48; color: #fff; font-weight: 600; }
.book-day.today { border-color: rgba(107,143,72,0.4); color: #6B8F48; font-weight: 600; }
.book-day.today.selected { border-color: #6B8F48; }
/* ── PANE 2: Time slots ── */
.book-selected-date {
font-size: 13px; font-weight: 500; color: #6B8F48;
background: #f0f6ea; border-radius: 8px;
padding: 8px 14px; margin-bottom: 18px;
display: flex; align-items: center; gap: 6px;
}
.book-selected-date svg { width: 14px; height: 14px; }
.book-slots-label { font-size: 13px; font-weight: 500; color: #3a3a3a; margin-bottom: 10px; }
.book-slots-grid {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 8px; margin-bottom: 20px;
}
.book-slot {
border: 1.5px solid rgba(57,55,59,0.18);
border-radius: 8px; padding: 10px 6px;
text-align: center; cursor: pointer;
font-size: 13px; font-weight: 500;
color: #3a3a3a; transition: all .15s;
background: #fff;
}
.book-slot:hover { border-color: #6B8F48; color: #6B8F48; background: #f6faf2; }
.book-slot.selected { background: #6B8F48; color: #fff; border-color: #6B8F48; }
.book-slot.unavailable { background: #f5f5f5; color: #ccc; cursor: not-allowed; border-color: transparent; }
.book-format-label { font-size: 13px; font-weight: 500; color: #3a3a3a; margin-bottom: 10px; }
.book-format-opts { display: flex; gap: 10px; margin-bottom: 8px; }
.book-format-opt {
flex: 1; border: 1.5px solid rgba(57,55,59,0.18);
border-radius: 8px; padding: 12px 10px;
text-align: center; cursor: pointer;
transition: all .15s; background: #fff;
}
.book-format-opt:hover { border-color: #6B8F48; }
.book-format-opt.selected { border-color: #6B8F48; background: #f0f6ea; }
.book-format-icon { font-size: 20px; margin-bottom: 4px; }
.book-format-name { font-size: 12px; font-weight: 500; color: #3a3a3a; }
.book-format-opt.selected .book-format-name { color: #6B8F48; }
/* ── PANE 3: Your details ── */
.book-field { margin-bottom: 14px; }
.book-label { font-size: 12.5px; font-weight: 500; color: #3a3a3a; margin-bottom: 5px; display: block; }
.book-input, .book-select, .book-textarea {
width: 100%; padding: 11px 14px;
border: 1.5px solid rgba(57,55,59,0.2);
border-radius: 8px; font-family: 'Open Sans', sans-serif;
font-size: 13.5px; color: #1a1a1a; background: #fff;
outline: none; transition: border-color .15s;
}
.book-input:focus, .book-select:focus, .book-textarea:focus { border-color: #6B8F48; box-shadow: 0 0 0 3px rgba(107,143,72,0.1); }
.book-textarea { resize: none; min-height: 72px; line-height: 1.55; }
.book-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.book-summary {
background: #F5F6F5; border-radius: 10px;
padding: 14px 16px; margin-bottom: 16px;
font-size: 13px;
}
.book-summary-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; color: #3a3a3a; }
.book-summary-row svg { width: 14px; height: 14px; color: #6B8F48; flex-shrink: 0; }
.book-summary-val { font-weight: 500; }
/* ── Success screen ── */
.book-success { text-align: center; padding: 20px 0; }
.book-success-icon {
width: 64px; height: 64px; border-radius: 50%;
background: #f0f6ea; border: 3px solid #6B8F48;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px; font-size: 28px;
}
.book-success h3 {
font-family: 'Montserrat', sans-serif;
font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #1a1a1a;
}
.book-success-ref {
display: inline-block; background: #f0f6ea; color: #6B8F48;
font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600;
padding: 6px 16px; border-radius: 20px; margin: 8px 0 16px;
}
.book-success p { font-size: 13.5px; color: #6b6b6b; line-height: 1.65; margin-bottom: 6px; }
.book-what-next {
background: #F5F6F5; border-radius: 10px;
padding: 14px 16px; text-align: left; margin: 16px 0;
}
.book-what-next-title { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #6B8F48; margin-bottom: 10px; }
.book-what-item { display: flex; gap: 10px; font-size: 13px; color: #3a3a3a; padding: 4px 0; align-items: flex-start; }
.book-what-dot { width: 6px; height: 6px; border-radius: 50%; background: #6B8F48; flex-shrink: 0; margin-top: 5px; }
/* Panel footer */
.book-footer {
padding: 16px 24px;
border-top: 1px solid rgba(57,55,59,0.1);
display: flex; gap: 10px; align-items: center;
background: #fff; flex-shrink: 0;
}
.book-btn-back {
background: none; border: 1.5px solid rgba(57,55,59,0.2);
border-radius: 8px; padding: 10px 18px; cursor: pointer;
font-size: 13px; color: #6b6b6b;
font-family: 'Montserrat', sans-serif; font-weight: 500;
transition: all .15s;
}
.book-btn-back:hover { border-color: #6B8F48; color: #6B8F48; }
.book-btn-next {
flex: 1; background: #6B8F48; color: #fff;
border: none; border-radius: 8px; padding: 12px 20px;
cursor: pointer; font-size: 13.5px; font-weight: 600;
font-family: 'Montserrat', sans-serif;
transition: background .15s; display: flex;
align-items: center; justify-content: center; gap: 8px;
}
.book-btn-next:hover { background: #3d5228; }
.book-btn-next:disabled { background: #ccc; cursor: not-allowed; }
.book-btn-next svg { width: 16px; height: 16px; }
.calc-hero {
background: #4F6C35;
padding: 56px 0 48px;
position: relative; overflow: hidden;
}
.calc-hero::before {
content: '';
position: absolute; top: -60px; right: -60px;
width: 280px; height: 280px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
}
.calc-hero-inner { position: relative; z-index: 1; }
.calc-hero-tag {
display: inline-block;
background: rgba(192,220,205,0.18); color: #C0DCCD;
font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
text-transform: uppercase; padding: 5px 14px;
border-radius: 20px; margin-bottom: 1.25rem;
}
.calc-hero h1 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(26px, 3.5vw, 40px);
font-weight: 600; color: #fff;
line-height: 1.2; margin-bottom: .75rem;
}
.calc-hero h1 span { color: #C0DCCD; }
.calc-hero-sub {
font-size: 14px; color: rgba(255,255,255,0.58);
line-height: 1.7; max-width: 500px;
}
/* Main calc layout */
.calc-body { background: #F5F6F5; padding: 48px 0 80px; }
.calc-layout {
display: grid; grid-template-columns: 1fr 380px;
gap: 24px; align-items: start;
}
@media (max-width: 860px) {
.calc-layout { grid-template-columns: 1fr; }
}
/* Controls panel */
.calc-controls {
background: #fff;
border: 1px solid rgba(57,55,59,0.12);
border-radius: 16px;
padding: 28px 28px 24px;
}
.calc-controls-title {
font-family: 'Montserrat', sans-serif;
font-size: 17px; font-weight: 600;
margin-bottom: 4px;
}
.calc-controls-sub {
font-size: 13px; color: #6b6b6b;
margin-bottom: 24px; line-height: 1.5;
}
/* Product tabs */
.calc-prod-tabs {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 24px;
}
.calc-prod-tab {
font-size: 12px; font-weight: 500;
padding: 7px 14px; border-radius: 20px;
border: 1.5px solid rgba(57,55,59,0.18);
background: #fff; cursor: pointer;
transition: all .15s;
font-family: 'Montserrat', sans-serif;
color: #6b6b6b;
}
.calc-prod-tab:hover { border-color: #6B8F48; color: #6B8F48; }
.calc-prod-tab.active { background: #6B8F48; color: #fff; border-color: #6B8F48; }
/* Slider group */
.calc-group { margin-bottom: 22px; }
.calc-group-header {
display: flex; justify-content: space-between;
align-items: baseline; margin-bottom: 10px;
}
.calc-group-label {
font-size: 13px; font-weight: 500; color: #3a3a3a;
}
.calc-group-value {
font-family: 'Montserrat', sans-serif;
font-size: 18px; font-weight: 600; color: #6B8F48;
}
.calc-group-value span { font-size: 12px; font-weight: 400; color: #8a8a8a; margin-left: 4px; }
.calc-slider-wrap { position: relative; padding: 4px 0; }
.calc-slider {
-webkit-appearance: none;
width: 100%; height: 4px;
border-radius: 4px;
background: linear-gradient(to right, #6B8F48 var(--pct, 50%), #DDE0DF var(--pct, 50%));
outline: none; cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px; height: 22px; border-radius: 50%;
background: #fff; border: 3px solid #6B8F48;
box-shadow: 0 1px 6px rgba(107,143,72,0.3);
cursor: grab; transition: transform .1s;
}
.calc-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.calc-slider::-moz-range-thumb {
width: 22px; height: 22px; border-radius: 50%;
background: #fff; border: 3px solid #6B8F48;
box-shadow: 0 1px 6px rgba(107,143,72,0.3);
cursor: grab;
}
.calc-slider-minmax {
display: flex; justify-content: space-between;
font-size: 11px; color: #9a9a9a; margin-top: 6px;
}
/* Rate display */
.calc-rate-badge {
display: flex; align-items: center; gap: 10px;
background: #eaf0e6; border: 1px solid rgba(107,143,72,0.2);
border-radius: 10px; padding: 12px 16px;
margin-bottom: 20px;
}
.calc-rate-icon {
width: 34px; height: 34px; border-radius: 8px;
background: #6B8F48;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.calc-rate-icon svg { width: 16px; height: 16px; }
.calc-rate-label { font-size: 12px; color: #6B8F48; }
.calc-rate-val { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; color: #6B8F48; }
/* Moratorium toggle */
.calc-toggle-row {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0; border-top: 1px solid rgba(57,55,59,0.1);
margin-top: 4px;
}
.calc-toggle-label { font-size: 13px; color: #3a3a3a; }
.calc-toggle-sub { font-size: 11px; color: #8a8a8a; margin-top: 1px; }
.calc-toggle {
position: relative; width: 44px; height: 24px; flex-shrink: 0;
}
.calc-toggle input { opacity: 0; width: 0; height: 0; }
.calc-toggle-track {
position: absolute; inset: 0; border-radius: 24px;
background: #DDE0DF; cursor: pointer; transition: background .2s;
}
.calc-toggle input:checked + .calc-toggle-track { background: #6B8F48; }
.calc-toggle-track::after {
content: ''; position: absolute;
width: 18px; height: 18px; border-radius: 50%;
background: #fff; top: 3px; left: 3px;
transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.calc-toggle input:checked + .calc-toggle-track::after { left: 23px; }
/* Results panel */
.calc-results {
display: flex; flex-direction: column; gap: 16px;
position: sticky; top: 80px;
}
.calc-result-hero {
background: #6B8F48;
border-radius: 16px;
padding: 28px 24px;
text-align: center;
}
.calc-result-hero-label {
font-size: 12px; color: rgba(255,255,255,0.75);
text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px;
font-weight: 600;
}
.calc-result-hero-amount {
font-family: 'Montserrat', sans-serif;
font-size: 40px; font-weight: 700; color: #fff; line-height: 1;
}
.calc-result-hero-currency {
font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.75);
display: block; margin-top: 4px;
}
.calc-result-hero-note {
font-size: 11px; color: rgba(255,255,255,0.6);
margin-top: 12px; line-height: 1.5;
}
.calc-result-card {
background: #fff;
border: 1px solid rgba(57,55,59,0.12);
border-radius: 14px;
padding: 20px 20px 16px;
}
.calc-result-row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(57,55,59,0.08);
}
.calc-result-row:last-child { border-bottom: none; padding-bottom: 0; }
.calc-result-row:first-child { padding-top: 0; }
.calc-rrow-label { font-size: 13px; color: #6b6b6b; }
.calc-rrow-val {
font-family: 'Montserrat', sans-serif;
font-size: 14px; font-weight: 600; color: #39373B;
}
.calc-rrow-val.accent { color: #6B8F48; }
.calc-rrow-val.red { color: #c0392b; }
/* Amortization bar */
.calc-split-bar-wrap { margin: 12px 0 4px; }
.calc-split-bar {
height: 10px; border-radius: 10px; overflow: hidden;
display: flex;
}
.calc-split-principal { background: #6B8F48; border-radius: 10px 0 0 10px; transition: width .4s; }
.calc-split-profit { background: #A9C0CB; border-radius: 0 10px 10px 0; transition: width .4s; }
.calc-split-legend {
display: flex; gap: 14px; margin-top: 8px;
}
.calc-split-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #6b6b6b; }
.calc-split-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Schedule table */
.calc-schedule {
background: #fff;
border: 1px solid rgba(57,55,59,0.12);
border-radius: 14px;
overflow: hidden;
}
.calc-schedule-header {
padding: 16px 20px 12px;
border-bottom: 1px solid rgba(57,55,59,0.1);
display: flex; justify-content: space-between; align-items: center;
}
.calc-schedule-title { font-size: 14px; font-weight: 500; }
.calc-schedule-toggle {
font-size: 12px; color: #6B8F48; cursor: pointer;
font-family: 'Montserrat', sans-serif; font-weight: 500;
background: none; border: none;
}
.calc-table { width: 100%; border-collapse: collapse; }
.calc-table th {
font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: .07em;
color: #8a8a8a; padding: 8px 12px;
background: #F5F6F5;
text-align: right;
}
.calc-table th:first-child { text-align: left; }
.calc-table td {
font-size: 12.5px; padding: 9px 12px;
border-top: 1px solid rgba(57,55,59,0.06);
text-align: right;
}
.calc-table td:first-child { text-align: left; color: #8a8a8a; font-weight: 500; }
.calc-table tr:last-child td {
font-weight: 600; color: #39373B;
background: #eaf0e6; font-size: 12.5px;
}
.calc-table-wrap { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.calc-table-wrap.open { max-height: 600px; overflow-y: auto; }
/* "Good to know" info panel (sits between monthly hero and CTA strip) */
.calc-info-panel {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px 20px;
}
.calc-info-title {
display: flex; align-items: center; gap: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 600;
color: #4F6C35;
margin-bottom: 12px;
text-transform: uppercase; letter-spacing: 1px;
}
.calc-info-title svg { width: 16px; height: 16px; color: #6B8F48; }
.calc-info-list {
list-style: none;
margin: 0; padding: 0;
}
.calc-info-list li {
position: relative;
padding: 7px 0 7px 18px;
font-size: 13px; color: #555;
line-height: 1.55;
}
.calc-info-list li::before {
content: '';
position: absolute;
left: 0; top: 14px;
width: 6px; height: 6px;
border-radius: 50%;
background: #6B8F48;
}
.calc-info-list li strong { color: #39373B; font-weight: 600; }
/* CTA strip */
.calc-cta-strip {
background: #6B8F48; border-radius: 14px;
padding: 20px 20px 18px;
text-align: center;
}
.calc-cta-strip h3 {
font-family: 'Montserrat', sans-serif;
font-size: 15px; font-weight: 600; color: #fff;
margin-bottom: 6px;
}
.calc-cta-strip p { font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.calc-cta-strip-btn {
background: #fff; color: #6B8F48;
border: none; border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 600;
padding: 10px 20px; cursor: pointer;
width: 100%; transition: background .15s;
}
.calc-cta-strip-btn:hover { background: #eaf0e6; }
/* Disclaimer */
.calc-disclaimer {
font-size: 11.5px; color: #8a8a8a; line-height: 1.6;
text-align: center; max-width: 720px; margin: 0 auto;
padding-top: 8px;
}
/* Stepper */
.af-stepper {
display: flex; align-items: center;
gap: 0; margin-bottom: 0;
}
.af-step-item {
display: flex; align-items: center; flex: 1;
cursor: pointer;
transition: opacity 0.15s;
}
.af-step-item:hover { opacity: 0.85; }
.af-step-item:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 3px; border-radius: 4px; }
.af-step-item:last-child { flex: none; }
.af-step-bubble {
width: 36px; height: 36px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.2);
display: flex; align-items: center; justify-content: center;
font-family: 'Montserrat', sans-serif; font-size: 14px;
color: rgba(255,255,255,0.4);
flex-shrink: 0; transition: all 0.3s; position: relative; z-index: 1;
}
.af-step-item.done .af-step-bubble {
background: #C0DCCD; border-color: #C0DCCD; color: #39373B;
}
.af-step-item.active .af-step-bubble {
background: #fff; border-color: #fff; color: #39373B;
}
.af-step-label {
font-size: 11px; color: rgba(255,255,255,0.4);
white-space: nowrap; margin-left: 8px;
transition: color 0.3s;
}
.af-step-item.active .af-step-label { color: rgba(255,255,255,0.9); }
.af-step-item.done .af-step-label { color: #C0DCCD; }
.af-step-line {
flex: 1; height: 1px;
background: rgba(255,255,255,0.15);
margin: 0 12px;
}
/* Bookend steps (Start / Review) — smaller, dimmer, icon-based */
.af-step-item.af-step-bookend .af-step-bubble {
width: 28px; height: 28px;
border-style: dashed;
border-color: rgba(255,255,255,0.25);
background: transparent;
color: rgba(255,255,255,0.45);
}
.af-step-item.af-step-bookend .af-step-bubble svg {
width: 12px; height: 12px;
}
.af-step-item.af-step-bookend.active .af-step-bubble {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.9);
border-style: solid;
color: #fff;
}
.af-step-item.af-step-bookend.done .af-step-bubble {
background: #C0DCCD;
border-color: #C0DCCD;
border-style: solid;
color: #39373B;
}
.af-step-item.af-step-bookend .af-step-label {
font-style: italic;
font-size: 10.5px;
opacity: 0.85;
}
/* Hero strip */
.af-hero {
background: #4F6C35;
padding: 48px 0 40px;
}
.af-hero-inner { position: relative; z-index: 1; }
.af-hero h1 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(26px, 3vw, 38px);
font-weight: 500; color: #fff;
margin-bottom: 8px; line-height: 1.2;
}
.af-hero h1 em { font-style: italic; color: #C0DCCD; }
.af-hero-sub {
font-size: 14px; color: rgba(255,255,255,0.55);
margin-bottom: 2rem; max-width: 500px; line-height: 1.6;
}
/* Form wrapper */
.af-body { background: var(--off-white); padding: 48px 0 80px; }
@media (max-width: 600px) {
/* (skip+save share rules with back button — see further down for shared mobile styles) */
}
/* Draft-found / resume banner (top of apply page) */
.draft-banner {
background: #f0f6ec; border-bottom: 1px solid #cfdec5;
padding: 14px 0;
}
.draft-banner-inner {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.draft-banner-icon {
width: 36px; height: 36px; border-radius: 8px;
background: #4F6C35; color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.draft-banner-icon svg { width: 18px; height: 18px; }
.draft-banner-text {
flex: 1; min-width: 200px;
font-size: 14px; color: #39373B; line-height: 1.5;
}
.draft-banner-text strong { display: block; color: #4F6C35; }
.draft-banner-text span { color: #666; font-size: 13px; }
.draft-banner-actions { display: flex; gap: 8px; }
.draft-banner-btn {
padding: 8px 14px; border-radius: 7px;
font-family: inherit; font-size: 13px; font-weight: 500;
cursor: pointer; transition: all .15s;
border: 1px solid transparent;
}
.draft-banner-btn.primary {
background: #6B8F48; color: #fff;
}
.draft-banner-btn.primary:hover { background: #5a7a3c; }
.draft-banner-btn.ghost {
background: transparent; color: #6e6e6e;
border-color: #d0d0d0;
}
.draft-banner-btn.ghost:hover { background: #fff; color: #39373B; }
/* Application modals (OTP + Save draft) — shared "ax-" prefix to avoid clashes */
.ax-modal {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.ax-modal-backdrop {
position: absolute; inset: 0;
background: rgba(57, 55, 59, 0.55);
backdrop-filter: blur(2px);
}
.ax-modal-card {
position: relative; z-index: 1;
width: 100%; max-width: 440px;
background: #fff; border-radius: 14px;
box-shadow: 0 12px 48px rgba(0,0,0,0.25);
padding: 32px 28px 28px;
text-align: center;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.ax-modal-close {
position: absolute; top: 10px; right: 14px;
background: none; border: none;
font-size: 24px; line-height: 1;
color: #999; cursor: pointer;
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
.ax-modal-close:hover { background: #f0f0f0; color: #333; }
.ax-modal-state { animation: ax-fade-in .2s ease; }
@keyframes ax-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.ax-modal-icon {
width: 54px; height: 54px; border-radius: 50%;
background: #f0f6ec; color: #4F6C35;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.ax-modal-icon.success { background: #6B8F48; color: #fff; }
.ax-modal-icon svg { width: 26px; height: 26px; }
.ax-modal-icon.success svg { width: 28px; height: 28px; }
.ax-modal-title {
font-family: 'Montserrat', sans-serif;
font-size: 19px; font-weight: 500; color: #39373B;
margin-bottom: 8px;
}
.ax-modal-sub {
font-size: 13.5px; color: #666; line-height: 1.55;
margin-bottom: 18px;
}
.ax-modal-sub strong { color: #39373B; font-weight: 600; }
.ax-modal-note {
background: #EBF1F4; border: 1px solid #d6e2e8;
border-radius: 8px; padding: 10px 12px;
font-size: 12px; color: #384C67; line-height: 1.55;
text-align: left;
margin-bottom: 14px;
}
.ax-modal-note strong { color: #2c3a4f; }
.ax-modal-error {
background: #fdecec; color: #7a2929;
border: 1px solid #f4cfcf;
border-radius: 8px; padding: 9px 12px;
font-size: 13px; margin-bottom: 12px;
text-align: left;
}
.ax-modal-btn {
width: 100%; padding: 13px 18px;
border-radius: 9px; border: none;
font-family: inherit; font-size: 14.5px; font-weight: 600;
cursor: pointer; transition: all .15s;
}
.ax-modal-btn.primary {
background: #6B8F48; color: #fff;
}
.ax-modal-btn.primary:hover { background: #5a7a3c; }
.ax-modal-btn.primary:disabled {
background: #c5c8c0; cursor: not-allowed;
}
.ax-modal-foot {
margin-top: 14px;
font-size: 13px; color: #888;
}
.ax-modal-foot-sep { margin: 0 8px; color: #ccc; }
.ax-modal-link {
background: none; border: none;
font-family: inherit; font-size: 13px;
color: #4F6C35; cursor: pointer;
padding: 0; text-decoration: underline; text-underline-offset: 3px;
}
.ax-modal-link:hover { color: #6B8F48; }
.ax-modal-link:disabled { color: #aaa; cursor: not-allowed; text-decoration: none; }
.ax-modal-spinner {
width: 44px; height: 44px; border-radius: 50%;
border: 3px solid #eef2ec; border-top-color: #6B8F48;
margin: 0 auto 18px;
animation: ax-spin 0.8s linear infinite;
}
@keyframes ax-spin {
to { transform: rotate(360deg); }
}
.ax-otp-input {
width: 100%; padding: 16px;
border: 2px solid #e0e6da; border-radius: 10px;
font-family: 'Courier New', monospace;
font-size: 26px; font-weight: 700;
letter-spacing: 12px; text-align: center;
color: #4F6C35;
margin-bottom: 14px;
transition: border-color .15s;
}
.ax-otp-input:focus {
outline: none; border-color: #6B8F48;
}
.ax-otp-input.error { border-color: #c75a5a; }
.ax-input {
width: 100%; padding: 12px 14px;
border: 1.5px solid #e0e6da; border-radius: 8px;
font-family: inherit; font-size: 14px;
color: #39373B;
margin-bottom: 12px;
transition: border-color .15s;
}
.ax-input:focus {
outline: none; border-color: #6B8F48;
}
@media (max-width: 600px) {
.draft-banner-actions { width: 100%; }
.draft-banner-btn { flex: 1; }
.af-toolbar { justify-content: space-between; }
}
.af-wrap { max-width: 840px; margin: 0 auto; }
/* Pane system */
.af-pane { display: none; }
.af-pane.active { display: block; }
/* ── CR upload pane ─────────────────────────────────────────────── */
.cr-upload-card {
border: 2px dashed #C0DCCD;
border-radius: 12px;
background: linear-gradient(180deg, #f7f9f5 0%, #ffffff 100%);
padding: 36px 28px;
text-align: center;
transition: all 0.2s;
margin-top: 8px;
}
.cr-upload-card.dragover {
border-color: #6B8F48;
background: #f0f6ec;
transform: scale(1.005);
}
.cr-upload-card.processing { border-style: solid; border-color: #6B8F48; }
.cr-upload-card.success { border-style: solid; border-color: #6B8F48; background: #f0f6ec; }
.cr-upload-card.error { border-style: solid; border-color: #d4a64a; background: #fff8e8; }
.cr-upload-icon { margin-bottom: 14px; }
.cr-upload-headline {
font-family: 'Montserrat', sans-serif;
font-size: 16px; font-weight: 600;
color: #4F6C35;
margin-bottom: 6px;
}
.cr-upload-sub {
font-size: 13px;
color: #666;
margin-bottom: 18px;
}
.cr-upload-btn {
margin-bottom: 14px;
}
.cr-upload-privacy {
font-size: 11.5px;
color: #888;
margin-top: 4px;
}
.cr-upload-spinner {
width: 44px; height: 44px;
border: 4px solid #C0DCCD;
border-top-color: #4F6C35;
border-radius: 50%;
margin: 0 auto 18px;
animation: crSpin 0.8s linear infinite;
}
@keyframes crSpin { to { transform: rotate(360deg); } }
/* Small inline spinner for document upload progress rows */
.sh-mini-spinner {
display: inline-block;
width: 13px; height: 13px;
border: 1.5px solid #C0DCCD;
border-top-color: #4F6C35;
border-radius: 50%;
animation: crSpin 0.8s linear infinite;
}
/* Declaration error highlight — pulses red briefly when the applicant
tries to submit without checking all three required boxes. Removed
automatically when they tick the box. */
.declaration-error {
background: #fdecec;
border: 1px solid #f5b7b7;
border-radius: 8px;
padding: 10px 12px !important;
margin: -2px -12px;
animation: declarationShake 0.5s ease-in-out;
}
@keyframes declarationShake {
0%, 100% { transform: translateX(0); }
15%, 65% { transform: translateX(-6px); }
35%, 85% { transform: translateX(6px); }
}
.cr-upload-status {
font-family: 'Montserrat', sans-serif;
font-size: 15px; font-weight: 500;
color: #4F6C35;
margin-bottom: 6px;
}
.cr-upload-status-sub {
font-size: 12.5px;
color: #888;
}
.cr-upload-done-icon, .cr-upload-error-icon { margin-bottom: 14px; }
.cr-upload-done-headline, .cr-upload-error-headline {
font-family: 'Montserrat', sans-serif;
font-size: 17px; font-weight: 600;
margin-bottom: 6px;
}
.cr-upload-done-headline { color: #4F6C35; }
.cr-upload-error-headline { color: #7a2929; }
.cr-upload-done-body, .cr-upload-error-body {
font-size: 13.5px;
color: #555;
margin-bottom: 16px;
max-width: 460px;
margin-left: auto; margin-right: auto;
line-height: 1.5;
}
/* ── ✨ AI-filled badge on form fields ──────────────────────────── */
.af-field { position: relative; }
.af-ai-badge {
position: absolute;
top: -2px; right: 0;
display: inline-flex; align-items: center; gap: 4px;
font-size: 10.5px; font-weight: 600;
color: #4F6C35;
background: #f0f6ec;
border: 1px solid #C0DCCD;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0.3px;
pointer-events: none;
transition: opacity 0.3s, transform 0.3s;
animation: aiBadgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.af-ai-badge.fading {
opacity: 0;
transform: translateY(-4px);
}
@keyframes aiBadgePop {
0% { opacity: 0; transform: scale(0.7) translateY(-4px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.af-field input.ai-filled,
.af-field select.ai-filled,
.af-field textarea.ai-filled {
background: linear-gradient(90deg, #fafff5 0%, #ffffff 100%);
border-color: #C0DCCD;
}
/* Project type multi-step branching */
.pt-step { animation: ptFadeIn .25s ease; }
@keyframes ptFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.pt-back {
display: inline-flex; align-items: center; gap: 4px;
background: none; border: none;
font-family: 'Open Sans', sans-serif;
font-size: 12.5px; font-weight: 500;
color: #6B8F48; cursor: pointer;
padding: 4px 0; margin-bottom: 14px;
transition: color .15s;
}
.pt-back:hover { color: #4F6C35; }
.pt-back svg { stroke: currentColor; }
/* Project type chooser */
.af-type-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px; margin-bottom: 2rem;
}
.af-type-card {
background: var(--warm-white);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 24px;
cursor: pointer; transition: all 0.2s;
text-align: center;
}
.af-type-card:hover { border-color: #6B8F48; box-shadow: var(--shadow-md); }
.af-type-card.selected { border-color: var(--green-main); background: var(--green-tint); }
.af-type-icon {
width: 56px; height: 56px; border-radius: 14px;
background: #eaf0e6;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.af-type-icon svg { width: 26px; height: 26px; }
.af-type-card.selected .af-type-icon { background: var(--green-main); }
.af-type-card.selected .af-type-icon svg path,
.af-type-card.selected .af-type-icon svg circle,
.af-type-card.selected .af-type-icon svg rect { stroke: #fff; }
.af-type-title {
font-family: 'Montserrat', sans-serif;
font-size: 20px; font-weight: 400; margin-bottom: 8px;
}
.af-type-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.af-type-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
/* Form sections */
.af-section {
background: var(--warm-white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 28px 24px;
margin-bottom: 20px;
}
.af-section-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px; font-weight: 400;
margin-bottom: 4px;
}
.af-section-sub {
font-size: 13px; color: var(--text-muted);
margin-bottom: 20px; line-height: 1.5;
}
.af-section-divider {
height: 1px; background: var(--border);
margin: 20px 0;
}
/* Field grid */
.af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.af-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.af-full { grid-column: 1 / -1; }
/* Field */
.af-field { display: flex; flex-direction: column; gap: 6px; }
.af-label {
font-size: 12.5px; font-weight: 500; color: #3a3a3a;
display: flex; align-items: center; gap: 5px;
}
.af-required {
color: #c0392b; font-size: 11px;
}
.af-optional {
font-size: 11px; color: var(--text-hint); font-weight: 400;
}
.af-input, .af-select, .af-textarea {
width: 100%; padding: 11px 14px;
border: 1.5px solid var(--border-mid);
border-radius: var(--radius-sm);
font-family: 'Open Sans', sans-serif;
font-size: 14px; color: #1a1a1a;
background: var(--warm-white);
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
}
.af-input:focus, .af-select:focus, .af-textarea:focus {
border-color: var(--green-main);
box-shadow: 0 0 0 3px rgba(107,143,72,0.1);
}
.af-input.error, .af-select.error, .af-textarea.error {
border-color: #c0392b;
box-shadow: 0 0 0 3px rgba(192,57,43,0.08);
}
.af-textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.af-select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.af-hint { font-size: 11.5px; color: var(--text-hint); line-height: 1.4; }
.af-error-msg { font-size: 11.5px; color: #c0392b; display: none; }
.af-field.has-error .af-error-msg { display: block; }
/* Radio group */
.af-radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
/* Tel input with fixed Omani country-code prefix (+968).
Visual treatment: the prefix sits flush against the input, sharing the
border so it reads as one control. The input itself only accepts 8 digits. */
.af-tel-wrap {
display: flex;
align-items: stretch;
border-radius: var(--radius-sm);
}
.af-tel-prefix {
background: #f3f1ed;
border: 1.5px solid var(--border-mid);
border-right: none;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
padding: 0 14px;
display: flex; align-items: center;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px; font-weight: 600;
color: #4F6C35;
letter-spacing: 0.3px;
white-space: nowrap;
user-select: none;
}
.af-tel-input {
flex: 1; min-width: 0;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-left: none !important;
letter-spacing: 1px;
}
.af-field.has-error .af-tel-prefix { border-color: #d05757; background: #fdecec; color: #7a2929; }
/* Clean checkbox checklist (used for "target customers" — a multi-select
where the user picks one or more categories). Two-column responsive grid
that collapses to a single column on narrow viewports. Each item is a
standard checkbox with a custom-drawn box for visual consistency with the
rest of the form. Keyboard accessible: real stays in the tab
order, focus ring on the box mirrors browser focus on the input. */
.af-checklist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 4px 24px;
margin-top: 6px;
}
.af-check-item {
display: flex;
align-items: center;
gap: 11px;
padding: 8px 8px 8px 4px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 14px;
user-select: none;
position: relative;
transition: background 0.12s;
}
.af-check-item:hover { background: #f7f9f5; }
.af-check-item input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0; height: 0;
}
.af-check-box {
width: 19px; height: 19px;
flex-shrink: 0;
border: 2px solid var(--border-mid);
border-radius: 4px;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.af-check-item:hover .af-check-box { border-color: var(--green-main); }
.af-check-item input:checked ~ .af-check-box {
background: var(--green-main);
border-color: var(--green-main);
}
.af-check-item input:checked ~ .af-check-box::after {
content: '';
display: block;
width: 5px; height: 10px;
border: solid #ffffff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
.af-check-item input:focus ~ .af-check-box {
box-shadow: 0 0 0 3px rgba(79, 108, 53, 0.18);
}
.af-check-text { color: var(--phantom); font-weight: 500; line-height: 1.4; }
.af-field.has-error .af-checklist {
background: #fdecec;
border-radius: 6px;
padding: 6px 8px;
margin-left: -4px; margin-right: -4px;
}
.af-radio-btn {
display: flex; align-items: center; gap: 8px;
padding: 9px 16px;
border: 1.5px solid var(--border-mid);
border-radius: var(--radius-sm);
cursor: pointer; font-size: 13.5px;
transition: all 0.15s; background: var(--warm-white);
user-select: none;
}
.af-radio-btn:hover { border-color: #6B8F48; }
.af-radio-btn.selected { border-color: var(--green-main); background: var(--green-tint); color: var(--green-main); font-weight: 500; }
.af-radio-btn input { display: none; }
.af-radio-dot {
width: 14px; height: 14px; border-radius: 50%;
border: 1.5px solid currentColor;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.af-radio-btn.selected .af-radio-dot::after {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--green-main);
}
/* Product selector */
.af-prod-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 10px; margin-bottom: 8px;
}
.af-prod-opt {
border: 1.5px solid var(--border-mid);
border-radius: var(--radius-md);
padding: 14px 12px;
cursor: pointer; transition: all 0.15s;
background: var(--warm-white);
}
.af-prod-opt:hover { border-color: #6B8F48; }
.af-prod-opt.selected { border-color: var(--green-main); background: var(--green-tint); }
.af-prod-opt.disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
.af-prod-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.af-prod-range { font-size: 11px; color: var(--text-hint); }
.af-prod-tag { font-size: 10px; color: var(--green-main); margin-top: 4px; font-weight: 500; }
/* Upload zones */
.af-uploads { display: flex; flex-direction: column; gap: 14px; }
.af-upload-item {
border: 1.5px dashed var(--border-mid);
border-radius: var(--radius-md);
padding: 16px 18px;
display: flex; align-items: center; gap: 14px;
background: var(--off-white);
cursor: pointer; transition: all 0.15s;
position: relative;
}
.af-upload-item:hover { border-color: #6B8F48; background: var(--green-tint); }
.af-upload-item.doc-missing { border-color: #c0392b !important; box-shadow: 0 0 0 2px rgba(192,57,42,0.15); }
.af-upload-item.has-file { border-style: solid; border-color: var(--green-main); background: var(--green-tint); }
.af-upload-item.required-doc::before {
content: 'Required';
position: absolute; top: -1px; right: 14px;
background: #c0392b; color: #fff;
font-size: 9px; font-weight: 500;
padding: 2px 8px; border-radius: 0 0 6px 6px;
letter-spacing: 0.04em;
}
.af-upload-item.optional-doc::before {
content: 'Optional';
position: absolute; top: -1px; right: 14px;
background: var(--text-hint); color: #fff;
font-size: 9px; font-weight: 500;
padding: 2px 8px; border-radius: 0 0 6px 6px;
}
.af-upload-icon {
width: 40px; height: 40px; border-radius: 10px;
background: rgba(107,143,72,0.1);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.af-upload-icon svg { width: 20px; height: 20px; }
.af-upload-item.has-file .af-upload-icon { background: var(--green-main); }
.af-upload-item.has-file .af-upload-icon svg path { stroke: #fff; }
.af-upload-name { font-size: 13.5px; font-weight: 500; margin-bottom: 2px; }
/* Inline info icon — small circular ⓘ next to a doc-slot label. Clicking it
opens an info modal explaining the document. Used for "Audited Financials"
to give applicants a quick primer on what auditing means and where to
find authorised auditors. */
.af-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
background: #C0DCCD;
color: #4F6C35;
font-size: 11px;
font-weight: 700;
font-family: 'Georgia', serif;
font-style: italic;
margin-left: 6px;
cursor: pointer;
border: none;
vertical-align: middle;
transition: all 0.15s;
padding: 0; line-height: 1;
}
.af-info-icon:hover {
background: #4F6C35; color: #fff;
transform: scale(1.1);
}
/* Defer-option card — the "Do you have audited financials ready?" picker
that sits inside the audited-financials upload slot. Mirrors the visual
weight of the surrounding upload area without competing with it. */
.af-defer-card {
background: #f7f9f5;
border: 1px solid #e3ebd9;
border-radius: 6px;
padding: 12px 14px;
margin: 12px 0 4px;
}
.af-defer-card .af-defer-q {
font-size: 13px;
font-weight: 600;
color: #39373B;
margin-bottom: 10px;
}
.af-defer-card .af-radio-group {
flex-direction: column;
gap: 6px;
align-items: stretch;
}
.af-defer-card .af-radio-btn {
font-size: 13px;
padding: 7px 14px;
}
/* "Not yet — submitting later" notice — shown in place of the upload area
when the applicant chooses to defer audited financials. Warm amber tone
so it reads as informational rather than an error. */
.af-defer-notice {
margin-top: 10px;
padding: 12px 14px;
background: #fef9e7;
border-left: 3px solid #c9a86a;
border-radius: 4px;
font-size: 12.5px;
color: #6b4d1f;
line-height: 1.5;
}
.af-defer-notice strong { color: #4F6C35; }
.af-upload-desc { font-size: 12px; color: var(--text-muted); }
.af-upload-status { margin-left: auto; font-size: 12px; color: var(--green-main); font-weight: 500; flex-shrink: 0; display: none; }
.af-upload-item.has-file .af-upload-status { display: block; }
.af-upload-input { display: none; }
/* Progress bar */
.af-progress-wrap {
background: rgba(255,255,255,0.1);
border-radius: 4px; height: 3px; margin-top: 1.5rem;
overflow: hidden;
}
.af-progress-bar {
height: 100%; background: #C0DCCD;
border-radius: 4px; transition: width 0.4s ease;
}
/* Nav buttons */
.af-nav {
display: flex; justify-content: space-between;
align-items: center; margin-top: 2rem;
padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.af-nav-left { display: flex; align-items: center; gap: 12px; }
.af-back-btn {
background: none; border: 1.5px solid var(--border-mid);
border-radius: var(--radius-sm);
font-family: 'Open Sans', sans-serif;
font-size: 14px; padding: 11px 20px;
cursor: pointer; color: var(--text-muted);
transition: all 0.15s;
display: inline-flex; align-items: center; gap: 6px;
}
.af-back-btn:hover { border-color: var(--green-main); color: var(--green-main); }
.af-next-btn {
background: #6B8F48; color: #fff;
border: none; border-radius: var(--radius-sm);
font-family: 'Open Sans', sans-serif;
font-size: 14px; font-weight: 500;
padding: 12px 28px; cursor: pointer;
transition: background 0.15s;
display: flex; align-items: center; gap: 8px;
}
.af-next-btn:hover { background: #3d5228; }
.af-next-btn:disabled { background: var(--text-hint); cursor: not-allowed; }
.af-next-btn svg { width: 16px; height: 16px; }
/* Ghost-style secondary actions: Save & Skip both match Back button visually
so the nav row reads as: [Back] [Step counter] [Save] [Skip] [Continue] */
.af-skip-btn,
.af-save-inline {
background: none;
border: 1.5px solid var(--border-mid);
border-radius: var(--radius-sm);
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 400;
padding: 11px 20px;
cursor: pointer;
color: var(--text-muted);
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
white-space: nowrap;
margin: 0;
}
.af-skip-btn:hover,
.af-save-inline:hover {
border-color: var(--green-main);
color: var(--green-main);
background: #f0f6ec;
}
.af-skip-btn svg,
.af-save-inline svg {
width: 14px; height: 14px;
flex-shrink: 0;
}
/* Skipped step indicator — small amber outline on the stepper bubble */
.af-step-item.skipped .af-step-bubble {
background: #fff8e8;
border: 1.5px solid #d4a64a;
color: #8a6418;
}
/* Nav row layout: left cluster (Back + Step) | right cluster (Save, Skip, Continue) */
.af-nav {
display: flex; align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.af-nav-left {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap;
}
.af-nav-right {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
margin-left: auto;
}
@media (max-width: 600px) {
.af-skip-btn,
.af-save-inline,
.af-back-btn {
font-size: 13px;
padding: 9px 14px;
}
.af-next-btn { padding: 11px 22px; font-size: 13px; }
.af-nav { gap: 10px; align-items: center; }
/* Flatten af-nav-left so Back, the step counter, and the action cluster are
all direct flex children — lets us reorder on mobile: Back (left) + actions
(right) on top, and the "Step N of 4" caption centered on its own row at the
bottom (tidier than cramming it next to Back). Simple panes (CR: Back +
"Skip and fill manually", no counter) keep Back + action on one row. */
.af-nav-left { display: contents; }
.af-back-btn { order: 1; }
.af-nav-right { order: 2; margin-left: auto; justify-content: flex-end; }
.af-step-counter { order: 3; width: 100%; text-align: center; margin: 2px 0 0; }
.af-skip-btn .af-skip-label-long,
.af-save-inline .af-save-label-long { display: none; }
}
.af-step-counter { font-size: 12px; color: var(--text-hint); }
/* Summary */
.af-summary { background: var(--warm-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 20px; }
.af-summary-title { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 400; margin-bottom: 16px; }
.af-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.af-summary-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.af-summary-item:nth-last-child(-n+2) { border-bottom: none; }
.af-summary-label { font-size: 11.5px; color: var(--text-hint); margin-bottom: 2px; }
.af-summary-val { font-size: 13.5px; font-weight: 500; }
.af-summary-badge { display: inline-flex; align-items: center; gap: 6px; background: #eaf0e6; color: #6B8F48; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 20px; }
/* Success screen */
.af-success {
text-align: center; padding: 60px 20px;
max-width: 520px; margin: 0 auto;
}
.af-success-icon {
width: 72px; height: 72px; border-radius: 50%;
background: #eaf0e6;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 24px;
}
.af-success-icon svg { width: 36px; height: 36px; }
.af-success h2 { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 300; margin-bottom: 12px; }
.af-success p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 8px; }
.af-success-ref { font-size: 13px; background: var(--green-tint); border: 1px solid var(--border-mid); border-radius: var(--radius-sm); padding: 10px 16px; display: inline-block; margin: 12px 0 24px; font-weight: 500; color: var(--green-main); }
.af-success-steps { text-align: left; background: var(--off-white); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 24px; }
.af-success-step { display: flex; gap: 10px; font-size: 13px; padding: 6px 0; color: var(--text-muted); align-items: flex-start; }
.af-success-step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-main); flex-shrink: 0; margin-top: 5px; }
/* Responsive form */
@media (max-width: 700px) {
.af-type-grid, .af-grid, .af-grid-3, .af-prod-grid, .af-summary-grid { grid-template-columns: 1fr; }
.af-prod-grid { grid-template-columns: 1fr 1fr; }
.af-section { padding: 20px 16px; }
/* Compact stepper — hide labels, shrink bubbles, tighten lines */
.af-step-label { display: none; }
.af-step-bubble {
width: 28px; height: 28px; font-size: 12px;
}
.af-step-line { margin: 0 4px; }
.af-stepper { padding: 0 4px; }
/* Make sure form navigation buttons don't blow out the layout */
.af-nav { flex-wrap: wrap; gap: 12px; }
.af-next-btn, .af-back-btn { min-width: 0; }
/* Type cards a bit more compact */
.af-type-card { padding: 20px 16px; }
/* Radio groups: allow wrap so they don't push horizontally */
.af-radio-group { flex-wrap: wrap; }
}
/* ════════════════════════════════════════ */
/* SUBMIT PROGRESS OVERLAY */
/* ════════════════════════════════════════ */
.upload-overlay {
position: fixed; inset: 0;
background: rgba(57, 55, 59, 0.85);
backdrop-filter: blur(2px);
display: none; align-items: center; justify-content: center;
z-index: 100000;
font-family: 'Open Sans', sans-serif;
}
.upload-overlay.active { display: flex; }
.upload-card {
background: #fff; border-radius: 14px; padding: 32px 28px;
width: 90%; max-width: 460px; text-align: center;
box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.upload-icon { font-size: 36px; margin-bottom: 12px; line-height: 1; }
.upload-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px; font-weight: 600; color: #2d3f1e;
margin-bottom: 8px;
}
.upload-phase {
font-size: 13px; color: #555; margin-bottom: 20px;
min-height: 18px; line-height: 1.4;
}
.upload-bar-track {
background: #ececec; border-radius: 6px; height: 10px;
overflow: hidden; margin-bottom: 10px;
}
.upload-bar-fill {
background: linear-gradient(90deg, #6B8F48, #4F6C35);
height: 100%; width: 0%;
transition: width 0.2s ease;
}
.upload-bar-indeterminate {
background: linear-gradient(90deg, transparent, #6B8F48, transparent);
background-size: 50% 100%; background-repeat: no-repeat;
height: 100%; width: 100%;
animation: upload-shift 1.4s linear infinite;
}
@keyframes upload-shift {
0% { background-position: -50% 0; }
100% { background-position: 150% 0; }
}
.upload-stats {
font-size: 12px; color: #888;
display: flex; justify-content: space-between;
}
.upload-spin {
display: inline-block; width: 14px; height: 14px;
border: 2px solid #ddd; border-top-color: #6B8F48;
border-radius: 50%; animation: upload-spin 0.8s linear infinite;
margin-right: 8px; vertical-align: -2px;
}
@keyframes upload-spin { to { transform: rotate(360deg); } }
/* ===== style block #2 (from apply.html) ===== */
/* ── Eligibility Questionnaire ── */
.eq-step { display: none; animation: eqIn .3s ease; }
.eq-step.active { display: block; }
@keyframes eqIn {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
.eq-question {
font-family: 'Montserrat', sans-serif;
font-size: 17px; font-weight: 600;
color: #1a1a1a; margin-bottom: 6px; line-height: 1.35;
}
.eq-hint {
font-size: 13px; color: var(--text-muted);
margin-bottom: 1.25rem; line-height: 1.5;
}
.eq-options { display: flex; flex-direction: column; gap: 10px; }
.eq-opt {
display: flex; align-items: center; gap: 14px;
background: #fff;
border: 1.5px solid rgba(57,55,59,0.18);
border-radius: 10px; padding: 14px 18px;
cursor: pointer; transition: all .15s;
font-size: 14px; color: #1a1a1a;
text-align: left; width: 100%;
font-family: 'Open Sans', sans-serif;
}
.eq-opt:hover { border-color: #6B8F48; background: #f6faf2; }
.eq-opt.selected { border-color: #6B8F48; background: #f0f6ea; color: #3a5228; font-weight: 500; }
.eq-opt-icon {
width: 36px; height: 36px; border-radius: 8px;
background: rgba(107,143,72,0.1);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 18px;
}
.eq-opt.selected .eq-opt-icon { background: rgba(107,143,72,0.2); }
.eq-opt-text { flex: 1; }
.eq-opt-label { font-size: 14px; font-weight: 500; }
.eq-opt-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; font-weight: 400; }
.eq-opt.selected .eq-opt-sub { color: #5a7a42; }
.eq-nav { display: flex; align-items: center; gap: 12px; margin-top: 1.25rem; }
.eq-back {
background: none; border: 1.5px solid rgba(57,55,59,0.2);
border-radius: 8px; padding: 10px 18px; cursor: pointer;
font-size: 13px; color: var(--text-muted);
font-family: 'Montserrat', sans-serif;
transition: all .15s;
}
.eq-back:hover { border-color: #6B8F48; color: #6B8F48; }
.eq-step-label { font-size: 12px; color: var(--text-hint); margin-left: auto; }
/* Result card */
.eq-result { display: none; animation: eqIn .35s ease; }
.eq-result.active { display: block; }
.eq-result-card {
border-radius: 14px; padding: 28px 26px 24px;
border: 2px solid;
}
.eq-result-card.green { background: #f0f6ea; border-color: #6B8F48; }
.eq-result-card.amber { background: #fef9ec; border-color: #e8c84a; }
.eq-result-card.red { background: #fdf0f0; border-color: #d98080; }
.eq-result-icon {
width: 48px; height: 48px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; margin-bottom: 14px;
}
.eq-result-card.green .eq-result-icon { background: #6B8F48; }
.eq-result-card.amber .eq-result-icon { background: #c8a020; }
.eq-result-card.red .eq-result-icon { background: #c04040; }
.eq-result-verdict {
font-family: 'Montserrat', sans-serif;
font-size: 19px; font-weight: 700; margin-bottom: 6px;
}
.eq-result-card.green .eq-result-verdict { color: #3a5228; }
.eq-result-card.amber .eq-result-verdict { color: #7a5c0a; }
.eq-result-card.red .eq-result-verdict { color: #7a2020; }
.eq-result-body { font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
.eq-result-card.green .eq-result-body { color: #3a5228; }
.eq-result-card.amber .eq-result-body { color: #7a5c0a; }
.eq-result-card.red .eq-result-body { color: #7a2020; }
.eq-product-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.eq-product-tag {
font-size: 12px; font-weight: 500;
padding: 5px 12px; border-radius: 20px;
background: rgba(107,143,72,0.15); color: #3a5228;
}
.eq-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.eq-btn-primary {
background: #6B8F48; color: #fff;
border: none; border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 600;
padding: 11px 22px; cursor: pointer;
transition: background .15s;
}
.eq-btn-primary:hover { background: #3d5228; }
.eq-btn-ghost {
background: none;
border: 1.5px solid rgba(107,143,72,0.35);
border-radius: 8px; color: #6B8F48;
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 500;
padding: 11px 22px; cursor: pointer;
transition: all .15s;
}
.eq-btn-ghost:hover { background: #f0f6ea; }
/* Dot progress */
.eq-dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(107,143,72,0.2);
transition: all .2s;
}
.eq-dot.done { background: #6B8F48; }
.eq-dot.active { background: #6B8F48; width: 24px; border-radius: 4px; }
/* ===== style block #4 (from apply.html) ===== */
.mw-overlay {
position: fixed; inset: 0; z-index: 500;
background: rgba(20,30,14,0.6); backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center;
padding: 20px;
}
.mw-overlay.open { display: flex; }
.mw-modal {
background: #fff; border-radius: 20px;
width: 100%; max-width: 680px; max-height: 90vh;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
overflow: hidden;
}
.mw-header {
background: #384C67; padding: 20px 24px;
display: flex; align-items: center; gap: 14px; flex-shrink: 0;
}
.mw-header-icon {
width: 40px; height: 40px; border-radius: 10px;
background: rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mw-header-icon svg { width: 20px; height: 20px; }
.mw-header-title {
font-family: 'Montserrat', sans-serif;
font-size: 15px; font-weight: 700; color: #fff;
}
.mw-header-sub { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.mw-close {
margin-left: auto; background: rgba(255,255,255,0.15);
border: none; border-radius: 8px; width: 34px; height: 34px;
cursor: pointer; color: #fff; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.mw-close:hover { background: rgba(255,255,255,0.25); }
/* Steps bar */
.mw-steps {
display: flex; background: #f8f8f8;
border-bottom: 1px solid #eee; flex-shrink: 0;
}
.mw-step-tab {
flex: 1; padding: 12px 8px; text-align: center;
font-size: 11px; font-weight: 600; color: #9a9a9a;
font-family: 'Montserrat', sans-serif;
border-bottom: 2px solid transparent;
transition: all .2s;
}
.mw-step-tab.active { color: #384C67; border-bottom-color: #384C67; }
.mw-step-tab.done { color: #6B8F48; border-bottom-color: #6B8F48; }
/* Body */
.mw-body { flex: 1; overflow-y: auto; padding: 24px; }
.mw-pane { display: none; }
.mw-pane.active { display: block; }
/* Form fields */
.mw-section-title {
font-family: 'Montserrat', sans-serif;
font-size: 14px; font-weight: 700; color: #384C67;
margin: 0 0 16px; padding-bottom: 8px;
border-bottom: 2px solid #EBF1F4;
display: flex; align-items: center; gap: 8px;
}
.mw-section-title svg { width: 16px; height: 16px; }
.mw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.mw-full { grid-column: 1 / -1; }
.mw-field { display: flex; flex-direction: column; gap: 5px; }
.mw-label { font-size: 12px; font-weight: 500; color: #3a3a3a; }
.mw-input, .mw-select {
padding: 9px 12px; border: 1.5px solid rgba(57,55,59,0.2);
border-radius: 7px; font-family: 'Open Sans', sans-serif;
font-size: 13px; color: #1a1a1a; outline: none;
transition: border-color .15s;
}
.mw-input:focus, .mw-select:focus {
border-color: #384C67; box-shadow: 0 0 0 3px rgba(56,76,103,0.1);
}
.mw-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
/* Signatory rows */
.mw-signatory {
background: #f8f9f8; border: 1px solid #e5ebe5;
border-radius: 10px; padding: 14px 16px; margin-bottom: 12px;
}
.mw-signatory.disabled { opacity: 0.55; }
.mw-signatory-title {
font-size: 12px; font-weight: 600; color: #384C67;
margin-bottom: 10px;
}
/* Signatory header row with name + toggle */
.mw-sig-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.mw-sig-head-left {
font-size: 13px; font-weight: 600; color: #384C67;
display: flex; align-items: center; gap: 10px;
}
.mw-sig-num {
width: 24px; height: 24px; border-radius: 50%;
background: #6B8F48; color: #fff; font-size: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600;
}
.mw-sig-pct {
font-size: 11px; font-weight: 500; color: #6b6b6b;
background: #fff; border: 1px solid #e0e0e0;
padding: 2px 8px; border-radius: 12px;
}
/* Will-sign toggle switch */
.mw-toggle {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; color: #4a4a4a; cursor: pointer; user-select: none;
}
.mw-toggle-track {
width: 36px; height: 20px; border-radius: 12px;
background: #ccc; position: relative; transition: background 0.2s;
}
.mw-toggle-track::after {
content: ''; position: absolute; left: 2px; top: 2px;
width: 16px; height: 16px; border-radius: 50%; background: #fff;
transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.mw-toggle input { display: none; }
.mw-toggle input:checked + .mw-toggle-track { background: #6B8F48; }
.mw-toggle input:checked + .mw-toggle-track::after { transform: translateX(16px); }
/* Per-signatory signature pad block */
.mw-sigpad-block {
background: #f8f9f8; border: 1px solid #e5ebe5;
border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.mw-sigpad-head {
font-size: 13px; font-weight: 600; color: #384C67;
margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.mw-sigpad-head .mw-sig-num { width: 22px; height: 22px; font-size: 11px; }
.mw-sigpad-status {
margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 10px;
font-weight: 500;
}
.mw-sigpad-status.pending { background: #fef3e0; color: #b07a1f; }
.mw-sigpad-status.signed { background: #e9f3e0; color: #4f6c35; }
/* Signature pad */
.mw-sig-wrap {
border: 2px dashed rgba(56,76,103,0.3);
border-radius: 10px; background: #fafbfc;
position: relative; overflow: hidden; margin-bottom: 8px;
}
.mw-sig-canvas {
display: block; width: 100%; height: 140px; cursor: crosshair;
touch-action: none;
}
.mw-sig-placeholder {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 13px; color: #b0b8b0; pointer-events: none;
font-style: italic;
}
.mw-sig-actions {
display: flex; gap: 8px; justify-content: flex-end;
}
.mw-sig-clear {
font-size: 11px; color: #c0392b; background: none;
border: 1px solid #c0392b; border-radius: 6px;
padding: 4px 10px; cursor: pointer; font-family: 'Montserrat', sans-serif;
}
.mw-sig-clear:hover { background: #fdf0f0; }
/* Confirmation / review */
.mw-review-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;
}
.mw-review-row:last-child { border-bottom: none; }
.mw-review-label { color: #8a8a8a; }
.mw-review-val { font-weight: 500; color: #1a1a1a; }
.mw-sig-preview {
border: 1px solid #e0e0e0; border-radius: 8px;
background: #fff; width: 100%; height: 80px;
object-fit: contain; margin-top: 6px;
}
/* Consent note */
.mw-consent {
background: #EBF1F4; border-radius: 8px;
padding: 12px 14px; font-size: 12px;
color: #384C67; line-height: 1.6; margin-top: 16px;
}
/* QR signing panel — desktop-only, shown above signature pads */
.mw-qr-panel {
background: #fff;
border: 1px solid #C0DCCD;
border-radius: 12px;
padding: 18px 20px 18px;
margin-bottom: 16px;
box-shadow: 0 2px 10px rgba(79,108,53,0.06);
}
.mw-qr-head {
display: flex; gap: 14px; align-items: flex-start;
padding-bottom: 14px; margin-bottom: 14px;
border-bottom: 1px solid #eef2ec;
}
.mw-qr-icon {
width: 38px; height: 38px; border-radius: 9px;
background: #4F6C35; color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mw-qr-icon svg { width: 20px; height: 20px; }
.mw-qr-title {
font-family: 'Montserrat', sans-serif;
font-size: 16px; font-weight: 500; color: #39373B;
}
.mw-qr-sub {
font-size: 12.5px; color: #777; margin-top: 2px; line-height: 1.5;
}
/* Overall progress bar */
.mw-qr-overall { margin-bottom: 16px; }
.mw-qr-overall-text {
font-size: 13px; color: #4F6C35; font-weight: 500; margin-bottom: 6px;
}
.mw-qr-overall-text.complete { color: #6B8F48; }
.mw-qr-progress {
height: 6px; background: #eef2ec; border-radius: 3px;
overflow: hidden;
}
.mw-qr-progress-bar {
height: 100%; background: #6B8F48;
transition: width .3s ease;
}
/* Card list: stacks vertically, each card is horizontal (QR | info) */
.mw-qr-cards {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 14px;
}
.mw-qr-card {
background: #fafbfa;
border: 1px solid #e1e6dd;
border-radius: 10px;
padding: 14px;
display: flex;
gap: 16px;
align-items: center;
transition: all .25s;
}
.mw-qr-card.signed {
background: #f0f6ec;
border-color: #cfdec5;
}
/* Left side: QR code (or signed checkmark) — fixed size, doesn't shrink */
.mw-qr-card-qrwrap {
width: 124px;
height: 124px;
flex-shrink: 0;
background: #fff;
border: 1px solid #e0e6da;
border-radius: 8px;
padding: 6px;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.mw-qr-card-qrwrap img {
width: 100%; height: 100%; display: block;
}
.mw-qr-card-qrwrap .mw-qr-loading {
font-size: 11px; color: #999;
}
.mw-qr-card.signed .mw-qr-card-qrwrap {
background: #fff;
border-color: #cfdec5;
color: #6B8F48;
}
.mw-qr-card-signed-block {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
width: 100%; height: 100%;
color: #6B8F48;
}
.mw-qr-card-signed-block svg { width: 36px; height: 36px; }
.mw-qr-card-signed-block-text {
font-size: 11px; font-weight: 600; margin-top: 6px;
}
/* Right side: name, status, instruction, buttons */
.mw-qr-card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.mw-qr-card-header {
display: flex; align-items: center; gap: 10px;
}
.mw-qr-card-num {
width: 22px; height: 22px; border-radius: 11px;
background: #4F6C35; color: #fff;
font-size: 11px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mw-qr-card.signed .mw-qr-card-num { background: #6B8F48; }
.mw-qr-card-name {
font-size: 14px; font-weight: 500; color: #39373B;
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mw-qr-card-status {
font-size: 11px; padding: 2px 8px; border-radius: 4px;
font-weight: 600;
flex-shrink: 0;
}
.mw-qr-card.pending .mw-qr-card-status { background: #fef3e0; color: #8a6418; }
.mw-qr-card.signed .mw-qr-card-status { background: #6B8F48; color: #fff; }
.mw-qr-card-instr {
font-size: 12px; color: #777; line-height: 1.5;
}
.mw-qr-card.signed .mw-qr-card-instr { color: #4F6C35; }
.mw-qr-card-buttons {
display: flex; gap: 8px;
flex-wrap: wrap;
}
.mw-qr-card.signed .mw-qr-card-buttons { display: none; }
.mw-qr-card-btn {
background: #fff;
border: 1px solid #d8e0d4;
color: #4F6C35;
border-radius: 6px;
padding: 7px 12px;
font-size: 12px; font-weight: 500;
font-family: inherit;
cursor: pointer;
display: inline-flex; align-items: center; gap: 5px;
transition: all .15s;
white-space: nowrap;
}
.mw-qr-card-btn:hover {
background: #f0f5eb;
border-color: #6B8F48;
}
.mw-qr-card-btn.copied {
background: #6B8F48; color: #fff; border-color: #6B8F48;
}
.mw-qr-card-btn svg {
width: 13px; height: 13px;
flex-shrink: 0;
}
.mw-qr-card-btn-wa {
background: #25D366; color: #fff; border-color: #25D366;
}
.mw-qr-card-btn-wa:hover {
background: #1da851; border-color: #1da851;
}
/* Bottom actions row */
.mw-qr-actions {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
padding-top: 12px;
border-top: 1px solid #eef2ec;
}
.mw-qr-fallback {
background: transparent; border: none;
color: #4F6C35; cursor: pointer;
font-family: inherit; font-size: 13px;
text-decoration: underline; text-underline-offset: 3px;
padding: 4px 0;
flex: 1;
text-align: left;
}
.mw-qr-fallback:hover { color: #6B8F48; }
.mw-qr-refresh {
background: transparent;
border: 1px solid #d8e0d4;
color: #777;
border-radius: 6px;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
}
.mw-qr-refresh:hover { background: #f5f7f4; color: #4F6C35; }
@media (max-width: 700px) {
.mw-qr-panel { display: none !important; } /* mobile never shows the QR panel */
.mw-qr-card { flex-direction: column; align-items: stretch; }
.mw-qr-card-qrwrap { width: 100%; height: auto; aspect-ratio: 1/1; max-width: 200px; margin: 0 auto; }
}
/* Footer */
.mw-footer {
padding: 14px 24px; border-top: 1px solid #eee;
display: flex; gap: 10px; align-items: center;
background: #fff; flex-shrink: 0;
}
.mw-btn-back {
background: none; border: 1.5px solid #ccc;
border-radius: 8px; padding: 10px 18px;
font-size: 13px; color: #6b6b6b; cursor: pointer;
font-family: 'Montserrat', sans-serif; font-weight: 500;
}
.mw-btn-back:hover { border-color: #384C67; color: #384C67; }
.mw-btn-next {
flex: 1; background: #384C67; color: #fff;
border: none; border-radius: 8px; padding: 12px;
font-size: 13.5px; font-weight: 600; cursor: pointer;
font-family: 'Montserrat', sans-serif; transition: background .15s;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.mw-btn-next:hover { background: #2d3c54; }
.mw-btn-next svg { width: 16px; height: 16px; }
.mw-btn-done {
flex: 1; background: #6B8F48; color: #fff;
border: none; border-radius: 8px; padding: 12px;
font-size: 13.5px; font-weight: 600; cursor: pointer;
font-family: 'Montserrat', sans-serif; transition: background .15s;
}
.mw-btn-done:hover { background: #5a7a3d; }
/* Success */
.mw-success { text-align: center; padding: 32px 16px; }
.mw-success-icon {
width: 64px; height: 64px; border-radius: 50%;
background: #f0f6ea; border: 3px solid #6B8F48;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px; font-size: 28px;
}
.mw-success h3 {
font-family: 'Montserrat', sans-serif;
font-size: 18px; font-weight: 700; margin-bottom: 8px;
}
.mw-success p { font-size: 13.5px; color: #6b6b6b; line-height: 1.65; margin-bottom: 20px; }
@media (max-width: 520px) {
.mw-grid { grid-template-columns: 1fr; }
.mw-body { padding: 16px; }
}
/* ════════════════════════════════════════════════════════════
INTERNATIONALISATION (i18n) — language switcher + RTL / Arabic
------------------------------------------------------------
Everything here is additive and scoped: the LTR/English layout
is untouched; `html[dir="rtl"]` rules only apply when Arabic is
active. Extend the RTL block as more of the form is translated.
════════════════════════════════════════════════════════════ */
/* ── Language switcher (header) ── */
.nav-lang {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.30);
color: #fff; border-radius: var(--radius-sm, 8px);
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 500;
padding: 7px 12px; margin-left: 10px; cursor: pointer;
transition: background .15s;
}
.nav-lang:hover { background: rgba(255,255,255,0.20); }
.nav-lang svg { width: 15px; height: 15px; opacity: .85; }
/* The Arabic label reads well in Cairo even inside the English UI */
.nav-lang [data-lang-label] { font-family: 'Cairo', 'Montserrat', sans-serif; line-height: 1; }
@media (max-width: 900px) {
/* Keep the switcher visible on mobile even though tabs/CTA hide */
.nav-lang { margin-left: auto; margin-right: 8px; }
}
/* ── Arabic typography (Montserrat doesn't cover Arabic) ── */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .section-title,
html[dir="rtl"] .af-section-title,
html[dir="rtl"] .nav-tab,
html[dir="rtl"] .nav-cta,
html[dir="rtl"] .af-step-label {
font-family: 'Cairo', 'Montserrat', sans-serif;
}
/* ── RTL layout: Apply hero + stepper ── */
/* `dir="rtl"` auto-reverses flex rows and default text alignment;
these rules fix the few physical-direction properties. */
html[dir="rtl"] .af-hero-sub { max-width: 500px; }
/* Stepper label sits to the LEFT of its bubble in RTL */
html[dir="rtl"] .af-step-label {
margin-left: 0;
margin-right: 8px;
}
/* Progress bar fills from the right */
html[dir="rtl"] .af-progress-bar {
margin-left: auto;
margin-right: 0;
}
/* Header switcher spacing mirrors in RTL */
html[dir="rtl"] .nav-lang { margin-left: 0; margin-right: 10px; }
/* ════════════════════════════════════════════════════════════
BOOKING — HIDDEN PER REQUEST (2026-07)
------------------------------------------------------------
Hides the floating "Book a consultation" button and EVERY control
that opens the booking panel (any element calling openBooking()),
including the dynamically-rendered eligibility-result buttons.
Fully reversible: delete this block to restore booking.
════════════════════════════════════════════════════════════ */
.book-fab,
[onclick*="openBooking"] {
display: none !important;
}
/* ════════════════════════════════════════════════════════════
LANGUAGE SWITCHER — HIDDEN PER REQUEST (2026-07)
------------------------------------------------------------
Site launches English-only while the Arabic translation is
being reviewed. Hides the header + mobile-drawer language
toggle (any control calling toggleLang()). The full i18n
machinery stays in place — new visitors default to English.
Fully reversible: delete this block to bring the toggle back.
════════════════════════════════════════════════════════════ */
.nav-lang,
[onclick*="toggleLang"] {
display: none !important;
}
/* ════════════════════════════════════════════════════════════
CALCULATOR — hidden from nav; available as a popup (2026-07)
------------------------------------------------------------
The standalone /calc page still exists (unlinked) so it can be
re-enabled later — just delete the display:none rule below.
The calculator now opens as a modal, triggered from the
"Funding amount requested" field on the application form.
════════════════════════════════════════════════════════════ */
[data-i18n="nav.calc"],
#drawer-calc,
[data-i18n="foot.calculator"] {
display: none !important;
}
/* Trigger link under the funding-amount field */
.calc-trigger-link {
display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
background: #f0f6ea; border: 1px solid #C0DCCD; color: #4F6C35;
font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600;
padding: 7px 12px; border-radius: 8px; cursor: pointer; transition: background .15s;
}
.calc-trigger-link:hover { background: #e2eed8; }
.calc-trigger-link svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Popup overlay + card */
.calcpop-overlay {
position: fixed; inset: 0; z-index: 1000; display: none;
align-items: center; justify-content: center; padding: 20px;
background: rgba(30,35,25,0.55);
}
.calcpop-overlay.open { display: flex; }
.calcpop-card {
background: #fff; border-radius: 16px; width: 100%; max-width: 480px;
max-height: 90vh; overflow-y: auto; position: relative;
box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.calcpop-header {
background: #4F6C35; color: #fff; padding: 20px 24px;
border-radius: 16px 16px 0 0; position: sticky; top: 0; z-index: 1;
}
.calcpop-title { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 600; }
.calcpop-sub { font-size: 12.5px; opacity: .82; margin-top: 4px; line-height: 1.5; }
.calcpop-close {
position: absolute; top: 16px; right: 18px;
background: rgba(255,255,255,0.15); border: none; color: #fff;
width: 30px; height: 30px; border-radius: 50%; font-size: 20px;
line-height: 1; cursor: pointer;
}
.calcpop-close:hover { background: rgba(255,255,255,0.28); }
.calcpop-body { padding: 22px 24px; }
.calcpop-result { background: #f0f6ea; border-radius: 12px; padding: 18px; text-align: center; margin: 20px 0; }
.calcpop-result-label { font-size: 11.5px; color: #6a7a5a; text-transform: uppercase; letter-spacing: .06em; }
.calcpop-result-amount { font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 700; color: #4F6C35; line-height: 1.15; margin: 4px 0; }
.calcpop-result-cur { font-size: 12px; color: #6a7a5a; }
.calcpop-result-note { font-size: 12px; color: #7a8a6a; margin-top: 8px; line-height: 1.5; }
.calcpop-actions { display: flex; gap: 10px; margin-top: 6px; }
.calcpop-actions button {
flex: 1; font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 600;
padding: 11px; border-radius: 8px; cursor: pointer; border: none;
}
.calcpop-use { background: #4F6C35; color: #fff; }
.calcpop-use:hover { background: #3d5228; }
.calcpop-close-btn { background: #eef1ec; color: #39373B; }
.calcpop-close-btn:hover { background: #e2e6df; }
.calcpop-disclaimer { font-size: 11px; color: #9a9a9a; line-height: 1.55; margin-top: 16px; }
html[dir="rtl"] .calcpop-close { right: auto; left: 18px; }