/* ========================================================================= Salesfine — Sharia-compliant B2B BNPL Design system built on the official brand book: Red #EC2427 (70%) · Black #231F20 (20%) · Gray #434343 (10%) Type: Kostania Bold (EN) / GE SS Two (AR) — web substitutes documented in README.md (Montserrat + IBM Plex Sans Arabic). No build step, no framework. ========================================================================= */ :root{ /* ---- Brand (from logo guideline) ---- */ --red: #ec2427; /* brand fill */ --red-cta: #d92124; /* one shade down: white label passes 5.0:1 */ --red-hi: #ff3d40; /* hover / light tint */ --red-soft: #f59394; /* guideline tint */ --black: #231f20; --gray: #434343; /* ---- Surfaces (neutral blacks derived from #231F20) ---- */ --bg: #0b0a0b; --bg-2: #100f10; --surface: #171516; --surface-2: #1e1c1d; --card: #141313; --card-hi: #1c1a1b; /* ---- Text ---- */ --text: #f6f3f3; --text-2: #b8b2b3; --muted: #8a8485; --faint: #8f8889; /* ---- Lines ---- */ --border: #2a2728; --border-2: #3b3738; /* ---- Functional (non-brand, for clarity/accessibility) ---- */ --green: #29c46b; /* vendor payout / positive */ --amber: #f5a623; /* notices, risk callouts */ /* ---- Type ---- */ --font: "Montserrat", "Kostania", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-ar: "IBM Plex Sans Arabic", "GE SS Two", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Rhythm ---- */ --radius: 16px; --radius-lg: 24px; --maxw: 1200px; --gutter: clamp(20px, 5vw, 48px); --section-y: clamp(44px, 6vw, 88px); --shadow: 0 24px 60px -20px rgba(0,0,0,.8); --shadow-red: 0 20px 60px -26px rgba(236,36,39,.6); --ease: cubic-bezier(.22,.68,.36,1); /* ---- Themeable primitives ---- Everything below flips in the light theme. Components must use these rather than literal white/black, or light mode breaks silently. */ --fg-strong: #ffffff; /* brightest text: headings, figures */ --tint-05: rgba(255,255,255,.018); /* barely-there section wash */ --tint-1: rgba(255,255,255,.03); --tint-2: rgba(255,255,255,.05); --tint-3: rgba(255,255,255,.08); --tint-4: rgba(255,255,255,.10); --tint-5: rgba(255,255,255,.14); --inset: rgba(0,0,0,.25); /* recessed panel behind the breakdown */ --ink-red: #ffc9ca; /* text inside a red-tinted surface */ --ink-green: #bdf0d1; --ink-amber: #e9dcc4; --ink-amber-hi: #ffd699; --amber-text: #f5a623; /* amber used as text, not as a fill */ --header-bg: rgba(11,10,11,.72); --header-bg-stuck: rgba(11,10,11,.95); --calc-bg: linear-gradient(150deg, #1a1617 0%, #131112 52%, #0f0e0e 100%); --band-bg: linear-gradient(120deg, rgba(236,36,39,.22) 0%, rgba(35,31,32,.6) 100%); --glow: radial-gradient(900px 620px at 80% -8%, rgba(236,36,39,.20), transparent 62%), radial-gradient(720px 520px at 4% 14%, rgba(236,36,39,.08), transparent 60%), radial-gradient(1000px 720px at 50% 104%,rgba(236,36,39,.10), transparent 62%); --logo-invert: 1; /* 1 = white silhouette, 0 = black */ color-scheme: dark; } /* ═══════════════════════ LIGHT THEME ═══════════════════════ Applied by [data-theme="light"] on . main.js sets it from the saved preference, falling back to the OS setting on a first visit. */ :root[data-theme="light"]{ --red-hi: #c8121a; /* darker red for text-sized accents on white */ --bg: #fbfaf9; --bg-2: #f4f1f0; --surface: #ffffff; --surface-2: #f7f4f3; --card: #ffffff; --card-hi: #faf7f6; --text: #231f20; --text-2: #55504f; --muted: #736c6b; --faint: #767070; --border: #e7e2e1; --border-2: #d4cecd; --green: #0f7a41; --amber: #b97a06; --fg-strong: #171213; --tint-05: rgba(35,31,32,.016); --tint-1: rgba(35,31,32,.03); --tint-2: rgba(35,31,32,.045); --tint-3: rgba(35,31,32,.07); --tint-4: rgba(35,31,32,.10); --tint-5: rgba(35,31,32,.14); --inset: rgba(35,31,32,.028); --ink-red: #a4111a; --ink-green: #0d6b3b; --ink-amber: #6f4a00; --ink-amber-hi: #8a5c00; --amber-text: #7a5100; --header-bg: rgba(251,250,249,.78); --header-bg-stuck: rgba(251,250,249,.96); --calc-bg: linear-gradient(150deg, #ffffff 0%, #fbf8f8 52%, #f6f2f1 100%); --band-bg: linear-gradient(120deg, rgba(236,36,39,.10) 0%, rgba(35,31,32,.06) 100%); --glow: radial-gradient(900px 620px at 80% -8%, rgba(236,36,39,.10), transparent 62%), radial-gradient(720px 520px at 4% 14%, rgba(236,36,39,.05), transparent 60%), radial-gradient(1000px 720px at 50% 104%,rgba(236,36,39,.06), transparent 62%); --shadow: 0 22px 54px -24px rgba(35,31,32,.22); --shadow-red: 0 20px 54px -26px rgba(236,36,39,.28); --logo-invert: 0; color-scheme: light; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } /* Honour the preference by removing the movement, not the transition: the sections still fade in, they just do not slide or scale. Killing this outright is what made the page look like it had no transitions at all. */ .reveal{ --rx:0; --ry:0; --rs:1; transition-duration:.35s !important; } } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } html[lang="ar"] body{ font-family:var(--font-ar); } /* Ambient brand glow */ body::before{ content:""; position:fixed; inset:0; background:var(--glow); pointer-events:none; z-index:0; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; } ::selection{ background:rgba(236,36,39,.4); color:#fff; } :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; border-radius:6px; } /* Hidden by moving it up, not sideways. An inline-start offset of -9999px resolves to `right` in RTL, which pushed 9999px of overflow off the right edge of every Arabic page and shifted the whole layout. */ .skip-link{ position:absolute; inset-inline-start:0; top:0; z-index:200; transform:translateY(-200%); background:var(--red-cta); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; } .skip-link:focus{ transform:none; } /* ---------- Layout ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:1; } .section{ padding-block:var(--section-y); position:relative; z-index:1; } .section--tight{ padding-block:clamp(32px,4vw,60px); } .section--alt{ background:linear-gradient(180deg, transparent, var(--tint-05) 18%, var(--tint-05) 82%, transparent); } .grid{ display:grid; gap:clamp(20px,2.6vw,32px); } .center{ text-align:center; } /* ---------- Typography ---------- */ h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.15; font-weight:800; letter-spacing:-.02em; } h1{ font-size:clamp(2.2rem, 5.2vw, 4rem); } h2{ font-size:clamp(2rem, 4.4vw, 3.3rem); } h3{ font-size:clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing:-.01em; } p{ margin:0 0 1rem; color:var(--text-2); } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{ letter-spacing:0; line-height:1.35; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red-hi); margin-bottom:16px; } html[lang="ar"] .eyebrow{ letter-spacing:0; } .eyebrow::before{ content:""; width:22px; height:2px; background:var(--red); border-radius:2px; } .lede{ font-size:clamp(1rem,1.4vw,1.18rem); color:var(--text-2); max-width:62ch; } .section-head{ max-width:780px; margin-bottom:clamp(24px,3vw,40px); } .section-head.center{ margin-inline:auto; } .section-head.center .lede{ margin-inline:auto; } .grad-text{ background:linear-gradient(100deg,var(--fg-strong) 10%, var(--red-hi) 58%, var(--red) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:999px; border:1px solid transparent; font-weight:700; font-size:.95rem; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s; will-change:transform; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn--primary{ background:linear-gradient(100deg,#c61e21 0%, var(--red-cta) 100%); color:#fff; box-shadow:0 14px 34px -14px rgba(236,36,39,.85); } .btn--primary:hover{ box-shadow:0 20px 46px -14px rgba(236,36,39,.95); } .btn--ghost{ background:var(--tint-2); border-color:var(--border-2); color:var(--text); } .btn--ghost:hover{ background:var(--tint-3); border-color:var(--red); } .btn--dark{ background:var(--black); border-color:var(--border-2); color:#fff; } .btn--sm{ padding:10px 18px; font-size:.85rem; } .btn--block{ width:100%; } /* ---------- Compliance top bar ---------- */ .topbar{ background:linear-gradient(90deg, rgba(236,36,39,.16), rgba(67,67,67,.22)); border-bottom:1px solid var(--border); font-size:.8rem; position:relative; z-index:60; } .topbar__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; padding-block:9px; } .topbar__item{ display:inline-flex; align-items:center; gap:8px; color:var(--text-2); } .topbar__item strong{ color:var(--text); font-weight:700; } .dot-live{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(41,196,107,.6); animation:pulse 2.4s infinite; } @keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(41,196,107,0);} 100%{ box-shadow:0 0 0 0 rgba(41,196,107,0);} } /* ---------- Header ---------- */ .header{ position:sticky; top:0; z-index:80; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:var(--header-bg); border-bottom:1px solid transparent; transition:background .3s, border-color .3s; } .header.is-stuck{ background:var(--header-bg-stuck); border-bottom-color:var(--border); } .header__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:16px; transition:padding .3s; } .header.is-stuck .header__inner{ padding-block:10px; } /* Logo: the full wordmark at rest, contracting into the SF tile once the header sticks. Both marks are stacked in the same box and crossfaded, and the box animates its width so the nav closes up behind it. */ .logo{ position:relative; display:block; width:75px; height:30px; transition:width .4s var(--ease); } .logo__word, .logo__mark{ position:absolute; top:50%; inset-inline-start:0; transform:translateY(-50%); transition:opacity .35s var(--ease), transform .35s var(--ease); } /* Brand red in both themes. A plain background-image rather than a CSS mask: a mask can be resolved by luminance instead of alpha, which makes the artwork vanish entirely in some browsers. */ .logo__word{ width:75px; height:20px; background:url(../img/logo-word-red.svg) no-repeat center/contain; } .logo__mark{ width:30px; height:30px; opacity:0; transform:translateY(-50%) scale(.72); } .header.is-stuck .logo{ width:30px; } .header.is-stuck .logo__word{ opacity:0; transform:translateY(-50%) scale(.88); } .header.is-stuck .logo__mark{ opacity:1; transform:translateY(-50%) scale(1); } /* The footer logo never sticks, so it always shows the wordmark */ .footer .logo{ margin-bottom:16px; } .nav{ display:flex; align-items:center; gap:2px; } .nav a{ padding:9px 13px; border-radius:999px; font-size:.9rem; font-weight:600; color:var(--text-2); transition:color .2s, background .2s; } .nav a:hover, .nav a.is-active{ color:var(--fg-strong); background:var(--tint-3); } .header__actions{ display:flex; align-items:center; gap:10px; } .lang-btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; cursor:pointer; background:var(--tint-2); border:1px solid var(--border-2); font-size:.85rem; font-weight:700; transition:background .2s, border-color .2s; } .lang-btn:hover{ background:var(--tint-4); border-color:var(--red); } /* Theme toggle — shows the icon of the theme it will switch TO */ .theme-btn{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:999px; cursor:pointer; color:var(--text); background:var(--tint-2); border:1px solid var(--border-2); transition:background .2s, border-color .2s, transform .2s var(--ease); } .theme-btn:hover{ background:var(--tint-4); border-color:var(--red); transform:translateY(-1px); } .theme-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .theme-btn .ico-moon{ display:none; } :root[data-theme="light"] .theme-btn .ico-sun{ display:none; } :root[data-theme="light"] .theme-btn .ico-moon{ display:block; } .burger{ display:none; width:44px; height:44px; border-radius:12px; cursor:pointer; background:var(--tint-2); border:1px solid var(--border-2); align-items:center; justify-content:center; flex-direction:column; gap:5px; } .burger span{ display:block; width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .progress{ position:fixed; inset-block-start:0; inset-inline-start:0; height:3px; width:0; background:linear-gradient(90deg,var(--red),var(--red-soft)); z-index:100; transition:width .1s linear; } /* ---------- Scroll reveal ---------- */ .reveal{ opacity:0; transform:translate(var(--rx, 0), var(--ry, 26px)) scale(var(--rs, 1)); transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:var(--d, 0ms); } .reveal.is-in{ opacity:1; transform:none; } /* Progressive enhancement without a specificity fight: the guard only applies when JS is off. Scoping the hidden state as `html.js .reveal` instead would outrank `.reveal.is-in` and leave every section stuck at opacity 0. */ html:not(.js) .reveal{ opacity:1; transform:none; } /* Variants set custom properties, never `transform` itself. A direction rule like `html[dir="rtl"] .reveal--left` outranks `.reveal.is-in`, so if it set a transform the offset would survive the reveal and push Arabic content past the right edge of the page. */ .reveal--left { --rx:-32px; --ry:0; } .reveal--right{ --rx:32px; --ry:0; } html[dir="rtl"] .reveal--left { --rx:32px; } html[dir="rtl"] .reveal--right{ --rx:-32px; } .reveal--scale{ --ry:0; --rs:.94; } /* Headings travel a touch further than surrounding copy, which makes the fade legible at larger type sizes. */ .section-head h2.reveal{ --ry:34px; } /* ---------- Hero ---------- */ .hero{ padding-block:clamp(56px,8vw,110px) clamp(48px,7vw,96px); position:relative; overflow:hidden; } .hero__grid{ display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:clamp(32px,5vw,72px); } .badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; } .badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:.78rem; font-weight:700; background:rgba(236,36,39,.12); border:1px solid rgba(236,36,39,.34); color:var(--ink-red); } .badge--green{ background:rgba(41,196,107,.12); border-color:rgba(41,196,107,.32); color:var(--ink-green); } .badge--gray{ background:var(--tint-2); border-color:var(--border-2); color:var(--text-2); } .hero h1{ margin-bottom:20px; } .hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; } .hero__note{ margin-top:18px; font-size:.85rem; color:var(--muted); } .phones{ position:relative; display:flex; justify-content:center; align-items:center; min-height:460px; } .phones__glow{ position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(236,36,39,.36), transparent 66%); filter:blur(40px); } .phone{ position:relative; border-radius:34px; overflow:hidden; border:1px solid var(--tint-5); box-shadow:var(--shadow), 0 0 0 8px var(--tint-1); background:#000; } .phone--main{ width:min(262px,62%); z-index:2; } .phone--side{ position:absolute; width:min(202px,46%); inset-inline-end:2%; top:14%; opacity:.7; transform:rotate(4deg) scale(.9); z-index:1; } html[dir="rtl"] .phone--side{ transform:rotate(-4deg) scale(.9); } .float{ animation:float 7s ease-in-out infinite; } @keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} } /* ---------- Stats ---------- */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; } .stat{ background:var(--card); padding:clamp(20px,2.6vw,30px); text-align:center; transition:background .3s; } .stat:hover{ background:var(--card-hi); } .stat__val{ font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; color:var(--fg-strong); } .stat__lbl{ font-size:.82rem; color:var(--muted); margin-top:4px; } /* ---------- Cards ---------- */ .card{ background:linear-gradient(160deg, var(--card) 0%, var(--surface) 100%); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(22px,2.8vw,34px); transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; } .card:hover{ transform:translateY(-4px); border-color:var(--border-2); box-shadow:var(--shadow); } .card h3{ color:var(--fg-strong); } .card p:last-child{ margin-bottom:0; } .card__icon{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(140deg, rgba(236,36,39,.24), rgba(67,67,67,.28)); border:1px solid var(--border-2); margin-bottom:18px; font-size:1.25rem; } .cols-2{ grid-template-columns:repeat(2,1fr); } .cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); } .ticks{ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .ticks li{ display:flex; gap:12px; align-items:flex-start; color:var(--text-2); font-size:.95rem; } .ticks li::before{ content:"✓"; flex:0 0 22px; height:22px; border-radius:7px; display:grid; place-items:center; background:rgba(41,196,107,.14); color:var(--green); font-size:.72rem; font-weight:800; margin-top:2px; } .ticks--red li::before{ background:rgba(236,36,39,.16); color:var(--red-hi); } /* ---------- Steps ---------- */ .steps{ counter-reset:step; display:grid; } .step{ counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:flex-start; padding:24px 0; border-bottom:1px solid var(--border); } .step:last-child{ border-bottom:0; } .step__n{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(140deg, rgba(236,36,39,.28), rgba(67,67,67,.3)); border:1px solid var(--border-2); font-family:var(--mono); font-weight:700; color:var(--fg-strong); } .step__n::before{ content:"0" counter(step); } .step h3{ margin-bottom:6px; } .step p{ margin:0; } /* ---------- Split panels ---------- */ .split{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,28px); } .panel{ position:relative; overflow:hidden; background:linear-gradient(165deg,var(--card),var(--surface)); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(24px,3vw,38px); } .panel::after{ content:""; position:absolute; inset-inline-start:0; top:0; height:3px; width:100%; background:var(--red); } .panel--vendor::after{ background:linear-gradient(90deg,var(--gray),var(--red)); } .panel__tag{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red-hi); margin-bottom:10px; } html[lang="ar"] .panel__tag{ letter-spacing:0; } /* ---------- Calculator ---------- */ .calc{ background:var(--calc-bg); border:1px solid var(--border-2); border-radius:clamp(20px,2.6vw,32px); padding:clamp(24px,3.4vw,52px); box-shadow:var(--shadow-red); position:relative; overflow:hidden; } .calc::before{ content:""; position:absolute; inset:0; background:radial-gradient(720px 400px at 82% 0%, rgba(236,36,39,.22), transparent 62%); pointer-events:none; } .calc__grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,44px); align-items:start; } .calc__controls{ display:grid; gap:clamp(20px,2.4vw,28px); } .field__label{ display:block; font-size:1.02rem; font-weight:700; color:var(--fg-strong); margin-bottom:12px; } .field__hint{ font-size:.8rem; color:var(--muted); font-weight:500; margin-top:8px; } .seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; background:var(--tint-2); border:1px solid var(--border-2); border-radius:999px; padding:5px; } .seg--sq{ border-radius:14px; } .seg--sq .seg__btn{ border-radius:10px; } .seg__btn{ appearance:none; border:0; background:transparent; cursor:pointer; padding:12px 10px; border-radius:999px; font-weight:700; font-size:.92rem; color:var(--text-2); transition:background .3s var(--ease), color .25s, box-shadow .3s; } .seg__btn:hover{ color:var(--fg-strong); } .seg__btn[aria-checked="true"]{ background:linear-gradient(120deg,#c61e21 0%, var(--red-cta) 100%); color:#fff; box-shadow:0 8px 22px -10px rgba(236,36,39,.95); } .calc__value{ font-family:var(--mono); font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:700; color:var(--fg-strong); letter-spacing:-.02em; display:flex; align-items:baseline; gap:10px; margin-bottom:14px; } .calc__value input{ width:100%; background:transparent; border:0; border-bottom:1px dashed var(--border-2); color:var(--fg-strong); font:inherit; padding:2px 0; min-width:0; } .calc__value input:focus{ outline:none; border-bottom-color:var(--red); } .calc__value .cur{ font-size:.62em; color:var(--red-hi); font-weight:700; } input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:linear-gradient(90deg,var(--red) var(--pct,10%), var(--tint-4) var(--pct,10%)); cursor:pointer; } html[dir="rtl"] input[type="range"]{ background:linear-gradient(270deg,var(--red) var(--pct,10%), var(--tint-4) var(--pct,10%)); } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:5px solid var(--red); box-shadow:0 4px 14px rgba(0,0,0,.6); transition:transform .18s var(--ease); } input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.14); } input[type="range"]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:5px solid var(--red); } .range-ends{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-top:10px; font-family:var(--mono); } .calc__results{ display:grid; gap:16px; } .result{ border-radius:var(--radius); padding:clamp(18px,2.2vw,26px); border:1px solid rgba(236,36,39,.32); background:linear-gradient(150deg, rgba(236,36,39,.16), rgba(236,36,39,.05)); } .result--payout{ border-color:rgba(41,196,107,.3); background:linear-gradient(150deg, rgba(41,196,107,.13), rgba(41,196,107,.04)); } .result__label{ font-size:.9rem; color:var(--text-2); margin-bottom:10px; } .result__label b{ color:var(--fg-strong); } .result__row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .result__amount{ font-family:var(--mono); font-size:clamp(1.6rem,3.2vw,2.35rem); font-weight:700; color:var(--fg-strong); letter-spacing:-.02em; flex:1 1 auto; } .result__meta{ border-inline-start:1px solid var(--tint-5); padding-inline-start:20px; display:grid; gap:6px; font-size:.82rem; color:var(--text-2); } .result__meta b{ color:var(--amber-text); font-family:var(--mono); } .result--payout .result__meta b{ color:var(--ink-green); } .breakdown{ border:1px solid var(--border-2); border-radius:var(--radius); overflow:hidden; background:var(--inset); } .breakdown__head{ padding:12px 18px; background:var(--tint-2); font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); } html[lang="ar"] .breakdown__head{ letter-spacing:0; } .breakdown__row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:11px 18px; border-top:1px solid var(--border); font-size:.88rem; } .breakdown__row span{ color:var(--text-2); } .breakdown__row b{ font-family:var(--mono); color:var(--fg-strong); font-weight:600; } .breakdown__row--total{ background:rgba(236,36,39,.12); } .breakdown__row--total span, .breakdown__row--total b{ color:var(--fg-strong); font-weight:800; } .notice{ display:flex; gap:14px; align-items:flex-start; border:1px solid rgba(245,166,35,.34); background:rgba(245,166,35,.08); border-radius:var(--radius); padding:16px 18px; } .notice__icon{ flex:0 0 30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--amber); color:#1a1206; font-weight:800; font-size:.95rem; } .notice__body{ font-size:.85rem; color:var(--ink-amber); } .notice__body strong{ display:block; color:var(--ink-amber-hi); margin-bottom:4px; } .notice--info{ border-color:var(--border-2); background:var(--tint-1); } .notice--info .notice__icon{ background:var(--red); color:#fff; } .notice--info .notice__body{ color:var(--text-2); } .notice--info .notice__body strong{ color:var(--fg-strong); } /* ---------- Monthly figure + instalment schedule ---------- */ .calc__value--sm{ font-size:clamp(1.1rem,2vw,1.4rem); margin-bottom:12px; color:var(--fg-strong); } .result--monthly{ border-color:var(--border-2); background:linear-gradient(150deg, var(--tint-2), var(--tint-05)); } .result__sub{ margin:6px 0 0; font-size:.82rem; color:var(--muted); } .sched{ margin-top:18px; border-top:1px solid var(--border-2); } .sched__head, .sched__row{ display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:9px 0; } /* The header carries two labels, not three: the number badge needs no heading, so "Instalment due" spans the badge and day columns. */ .sched__head{ grid-template-columns:1fr auto; } .sched__head > *{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sched__head > :last-child{ text-align:end; } .sched__head{ font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); } html[lang="ar"] .sched__head{ letter-spacing:0; } .sched__row{ border-bottom:1px solid var(--tint-2); font-size:.86rem; } .sched__row:last-child{ border-bottom:0; } .sched__n{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:rgba(236,36,39,.16); border:1px solid rgba(236,36,39,.3); font-family:var(--mono); font-size:.75rem; font-weight:700; color:var(--fg-strong); } .sched__day{ color:var(--text-2); } .sched__amt{ font-family:var(--mono); color:var(--fg-strong); font-weight:600; } /* ---------- Logo marquee (investors / team pedigree) ---------- */ .logo-row{ margin-bottom:clamp(20px,3vw,34px); } .logo-row__label{ text-align:center; font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; } html[lang="ar"] .logo-row__label{ letter-spacing:0; font-size:.82rem; } .marquee{ position:relative; overflow:hidden; /* Logos carry no reading direction, so the strip is laid out LTR in both languages. Without this, an RTL page starts the flex track at the right edge and overflows leftward — translateX(-50%) then pushes every logo out of view and the row renders empty. */ direction:ltr; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track{ display:flex; width:max-content; animation:marquee-ltr 34s linear infinite; } .marquee--slow .marquee__track{ animation-duration:46s; } .marquee:hover .marquee__track, .marquee:focus-within .marquee__track{ animation-play-state:paused; } /* Left → right: the track starts one group to the left and slides back. */ @keyframes marquee-ltr{ from{ transform:translateX(-50%); } to { transform:translateX(0); } } .marquee__group{ display:flex; align-items:center; flex:0 0 auto; gap:clamp(16px,2.6vw,40px); padding-inline:clamp(8px,1.3vw,20px); } /* A tile is transparent and its logo is flattened to a dim white silhouette, so a row of mismatched third-party logos reads as one set. Hovering a single logo restores its real colours on a light tile — and pauses the row. */ .logo-tile{ flex:0 0 auto; width:clamp(150px,16vw,205px); height:clamp(60px,6.4vw,78px); border-radius:12px; background:transparent; display:grid; place-items:center; padding:9px 16px; transition:background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .logo-tile img{ max-height:100%; max-width:100%; object-fit:contain; filter:grayscale(1) brightness(0) invert(var(--logo-invert)); /* colour -> flat tone */ opacity:.45; transition:filter .35s var(--ease), opacity .35s var(--ease); } /* The rest of the row recedes while one logo is being inspected */ .marquee:hover .logo-tile img{ opacity:.22; } .logo-tile:hover{ background:#fff; transform:translateY(-3px); box-shadow:0 14px 34px -14px rgba(0,0,0,.9); } .logo-tile:hover img, .marquee:hover .logo-tile:hover img{ filter:none; opacity:1; } /* Logos that are themselves white or very pale need a dark tile on hover, otherwise they disappear against white. */ .logo-tile--light:hover{ background:var(--black); } /* Awaiting a logo file — deliberately blank, no placeholder text */ .logo-tile--empty{ background:var(--tint-1); border:1px dashed var(--border-2); opacity:.55; } .logo-tile--empty:hover{ background:var(--tint-1); transform:none; box-shadow:none; } /* Hairline between the two rows, as in the reference */ .logo-row + .logo-row{ border-top:1px solid var(--border); padding-top:clamp(24px,3.4vw,40px); } @media (prefers-reduced-motion: reduce){ .marquee{ -webkit-mask-image:none; mask-image:none; } .marquee__track{ animation:none; width:100%; justify-content:center; } .marquee__group{ flex-wrap:wrap; justify-content:center; } .marquee__group + .marquee__group{ display:none; } } /* ---------- Tables ---------- */ .table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); } table.tbl{ width:100%; border-collapse:collapse; min-width:620px; font-size:.9rem; } .tbl th, .tbl td{ padding:15px 18px; text-align:start; border-bottom:1px solid var(--border); } .tbl thead th{ background:var(--tint-2); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); font-weight:800; } html[lang="ar"] .tbl thead th{ letter-spacing:0; } .tbl tbody tr:last-child td{ border-bottom:0; } .tbl tbody tr:hover{ background:var(--tint-1); } .tbl td b, .tbl td .num{ color:var(--fg-strong); } /* ---------- Case studies ---------- */ .case{ display:grid; gap:16px; } .quote{ border-radius:var(--radius); padding:20px 22px; border:1px solid var(--border); background:var(--tint-1); font-size:.95rem; color:var(--text-2); } .quote--after{ border-color:rgba(41,196,107,.3); background:rgba(41,196,107,.07); color:var(--ink-green); } .quote__tag{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } .quote--after .quote__tag{ color:var(--green); } html[lang="ar"] .quote__tag{ letter-spacing:0; } /* ---------- Chips ---------- */ .chips{ display:flex; flex-wrap:wrap; gap:10px; } .chip{ padding:9px 16px; border-radius:999px; border:1px solid var(--border-2); background:var(--tint-1); font-size:.84rem; font-weight:600; color:var(--text-2); transition:border-color .25s, color .25s, transform .25s var(--ease); } .chip:hover{ border-color:var(--red); color:var(--fg-strong); transform:translateY(-2px); } /* ---------- FAQ ---------- */ .faq{ border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--card); } .faq details{ border-bottom:1px solid var(--border); } .faq details:last-child{ border-bottom:0; } .faq summary{ cursor:pointer; padding:19px 22px; font-weight:700; color:var(--fg-strong); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:background .2s; } .faq summary::-webkit-details-marker{ display:none; } .faq summary:hover{ background:var(--tint-1); } .faq summary::after{ content:"+"; font-size:1.3rem; color:var(--red-hi); transition:transform .3s var(--ease); } .faq details[open] summary::after{ transform:rotate(45deg); } .faq__body{ padding:0 22px 20px; color:var(--text-2); font-size:.92rem; } /* ---------- Forms ---------- */ .form{ display:grid; gap:18px; } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } label.lbl{ display:block; font-size:.85rem; font-weight:700; color:var(--text); margin-bottom:8px; } .req{ color:var(--red-hi); } .input, textarea.input, select.input{ width:100%; padding:13px 16px; border-radius:12px; background:var(--tint-1); border:1px solid var(--border-2); color:var(--text); font:inherit; font-size:.95rem; transition:border-color .2s, background .2s; } .input::placeholder{ color:var(--faint); } .input:focus{ outline:none; border-color:var(--red); background:rgba(236,36,39,.06); } textarea.input{ resize:vertical; min-height:120px; } .consent{ display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:flex-start; padding:15px 17px; border:1px solid var(--border-2); border-radius:12px; background:var(--tint-1); transition:border-color .2s; } .consent:hover{ border-color:var(--red); } .consent input[type="checkbox"]{ width:20px; height:20px; margin:2px 0 0; accent-color:var(--red); cursor:pointer; flex:0 0 auto; } .consent__text{ font-size:.85rem; color:var(--text-2); line-height:1.55; } .consent__text a{ color:var(--red-hi); text-decoration:underline; } .form__status{ font-size:.88rem; padding:12px 16px; border-radius:12px; display:none; } .form__status.is-error{ display:block; background:rgba(236,36,39,.12); border:1px solid rgba(236,36,39,.35); color:var(--ink-red); } .form__status.is-ok{ display:block; background:rgba(41,196,107,.12); border:1px solid rgba(41,196,107,.35); color:var(--ink-green); } /* ---------- Security grid ---------- */ .sec-item{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:flex-start; } .sec-item__ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:1.1rem; background:rgba(236,36,39,.13); border:1px solid rgba(236,36,39,.28); } .sec-item h3{ font-size:1.02rem; margin-bottom:5px; } .sec-item p{ margin:0; font-size:.88rem; } /* ---------- CTA band ---------- */ .cta-band{ border-radius:clamp(20px,2.6vw,32px); padding:clamp(32px,4.4vw,64px); background:var(--band-bg); border:1px solid var(--border-2); text-align:center; position:relative; overflow:hidden; } .cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 80% 0%, rgba(236,36,39,.16), transparent 60%); } .cta-band > *{ position:relative; } /* ---------- Footer ---------- */ .footer{ border-top:1px solid var(--border); background:var(--bg-2); padding-block:clamp(44px,5vw,72px) 28px; position:relative; z-index:1; } .footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:clamp(24px,3vw,44px); } .footer h4{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; } html[lang="ar"] .footer h4{ letter-spacing:0; } .footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; } .footer a{ color:var(--text-2); font-size:.9rem; transition:color .2s; } .footer a:hover{ color:var(--fg-strong); } .footer p{ font-size:.88rem; } .legal-block{ font-size:.82rem; color:var(--muted); line-height:1.85; } .legal-block b{ color:var(--text-2); } .footer__bottom{ margin-top:36px; padding-top:22px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; font-size:.8rem; color:var(--muted); } /* ---------- App store badges ---------- Official artwork, used unmodified as both stores require. Apple's SVG is the badge itself; Google's PNG bakes in its own clear space (the button is 67% of the file), so the heights differ to make the two buttons look equal. */ .store-badges{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; margin-top:26px; } .store-badges a{ display:inline-flex; line-height:0; transition:transform .25s var(--ease), opacity .25s; } .store-badges a:hover{ transform:translateY(-2px); opacity:.88; } /* Named store-badge, not badge: .badge is the pill component used for the hero tags, and the images were picking up its pink fill and rounded frame. */ .store-badge{ height:46px; width:auto; display:block; } /* ---------- Social links ---------- */ /* Scoped to .footer so it outranks `.footer ul { display:grid }`, which would otherwise stack the icons vertically. */ .footer .social{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:18px 0 0; padding:0; } .footer .social li{ display:block; } .footer .social a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--text-2); background:var(--tint-2); border:1px solid var(--border); transition:color .25s, background .25s, border-color .25s, transform .25s var(--ease); } .footer .social a:hover{ color:#fff; background:var(--red-cta); border-color:var(--red-cta); transform:translateY(-2px); } .footer .social svg{ width:17px; height:17px; fill:currentColor; } .ph{ border-bottom:1px dashed var(--amber); color:var(--amber-text); font-family:var(--mono); font-size:.92em; padding-inline:2px; } /* ---------- Content pages ---------- */ .page-head{ padding-block:clamp(44px,6vw,80px) clamp(28px,3vw,44px); border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(236,36,39,.10), transparent); } .breadcrumb{ font-size:.82rem; color:var(--muted); margin-bottom:14px; } .breadcrumb a:hover{ color:var(--fg-strong); } .prose{ max-width:840px; } .prose h2{ margin-top:2.2em; font-size:clamp(1.3rem,2.2vw,1.7rem); } .prose h2:first-of-type{ margin-top:0; } .prose h3{ margin-top:1.6em; font-size:1.08rem; } .prose ul, .prose ol{ color:var(--text-2); padding-inline-start:22px; display:grid; gap:9px; margin-bottom:1.2rem; } .prose li{ font-size:.95rem; } .prose .meta{ font-size:.82rem; color:var(--muted); } /* ---------- Session timeout toast ---------- */ .session-toast{ position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:120; max-width:340px; padding:16px 18px; border-radius:14px; background:var(--surface-2); border:1px solid var(--amber); box-shadow:var(--shadow); font-size:.86rem; color:var(--ink-amber); transform:translateY(20px); opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease); } .session-toast.is-visible{ opacity:1; transform:none; pointer-events:auto; } .session-toast strong{ display:block; color:var(--ink-amber-hi); margin-bottom:5px; } .session-toast button{ margin-top:10px; background:var(--amber); color:#1a1206; border:0; border-radius:8px; padding:7px 14px; font-weight:700; cursor:pointer; font-size:.82rem; } /* ---------- Responsive ---------- */ @media (max-width: 1024px){ .hero__grid{ grid-template-columns:1fr; } .phones{ min-height:400px; order:-1; } .cols-4{ grid-template-columns:repeat(2,1fr); } .footer__grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 900px){ .nav{ position:fixed; inset-block-start:0; inset-inline-end:0; height:100dvh; width:min(320px,84vw); flex-direction:column; align-items:stretch; gap:6px; background:var(--surface); border-inline-start:1px solid var(--border); padding:96px 22px 32px; transform:translateX(110%); transition:transform .4s var(--ease); z-index:70; } html[dir="rtl"] .nav{ transform:translateX(-110%); } /* Both open-state rules must outrank `html[dir="rtl"] .nav` (0,2,1), otherwise the drawer never slides in on an Arabic page. */ html[dir="ltr"] .nav.is-open, html[dir="rtl"] .nav.is-open{ transform:none; } .nav a{ padding:13px 16px; font-size:1rem; } /* The drawer is a child of .header and carries z-index:70, so inside the header's stacking context it paints over the static buttons. Lifting the actions above it keeps the close button (and theme/language) tappable. */ .header__actions{ position:relative; z-index:90; } .burger{ display:flex; } .calc__grid, .cols-3, .split, .form__row{ grid-template-columns:1fr; } .stats{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 620px){ .cols-2, .cols-4{ grid-template-columns:1fr; } .footer__grid{ grid-template-columns:1fr; } .result__meta{ border-inline-start:0; padding-inline-start:0; border-top:1px solid var(--tint-5); padding-top:12px; width:100%; } .topbar__inner{ justify-content:center; text-align:center; } .hero__cta .btn{ width:100%; } /* The header row needs ~409px at this size. The CTA is the one thing that is repeated elsewhere (hero button, Contact in the menu), so it goes. */ .header__actions .btn--sm{ display:none; } /* Two long options cannot sit side by side; stack them instead */ .seg--stack{ grid-auto-flow:row; } /* Fee rows: let the label wrap, keep the figure on one line */ .breakdown__row{ flex-wrap:wrap; } .breakdown__row span{ flex:1 1 55%; } .breakdown__row b{ white-space:nowrap; } .sched__head{ font-size:.62rem; letter-spacing:.05em; } .sched__row{ font-size:.82rem; gap:8px; } .sched__amt{ white-space:nowrap; } /* 340px + 24px either side does not fit a 375px screen */ .session-toast{ inset-inline:12px; max-width:none; } /* Long unbroken strings (emails, URLs) must not push the page sideways */ .prose, .legal-block, .consent__text{ overflow-wrap:anywhere; } .calc__value{ font-size:clamp(1.45rem,7vw,1.9rem); } .logo-tile{ width:clamp(132px,42vw,170px); } /* On a phone the app mockups are decorative and push the message below the fold, so they are dropped and the headline leads. Combined with loading="lazy" on the images, they are not downloaded here either. */ .phones{ display:none; } .hero{ padding-block:clamp(24px,7vw,40px) clamp(36px,8vw,56px); } } /* ---------- Light-theme adjustments ---------- Effects tuned for a dark page that need softening rather than inverting. */ :root[data-theme="light"] .topbar{ background:linear-gradient(90deg, rgba(236,36,39,.08), rgba(67,67,67,.05)); } :root[data-theme="light"] .calc::before{ background:radial-gradient(720px 400px at 82% 0%, rgba(236,36,39,.09), transparent 62%); } :root[data-theme="light"] .phones__glow{ background:radial-gradient(circle, rgba(236,36,39,.16), transparent 66%); } :root[data-theme="light"] .phone{ border-color:rgba(35,31,32,.14); box-shadow:var(--shadow), 0 0 0 8px rgba(35,31,32,.03); } :root[data-theme="light"] .cta-band::before{ background:radial-gradient(120% 90% at 80% 0%, rgba(236,36,39,.09), transparent 60%); } :root[data-theme="light"] .logo-tile:hover{ box-shadow:0 14px 30px -16px rgba(35,31,32,.38); } /* Pale logos keep a dark tile in both themes; in light mode they also need a dark tile to be legible at rest is not required — the silhouette is black. */ :root[data-theme="light"] .sched__row{ border-bottom-color:rgba(35,31,32,.07); } @media print{ body::before, .header, .topbar, .burger, .progress{ display:none !important; } body{ background:#fff; color:#000; } }