/* Marketing site styles. * * Every colour and dimension comes from tokens.css, which is generated from the * app's own lib/theme.ts and lib/tokens.ts. There are no raw hexes and no magic * pixel values here — the same rule the app enforces via scripts/check-tokens.sh, * applied to the one surface that stylesheet can't see. * * **The page is white on purpose, and only ever white.** The app follows the * OS scheme; this page does not. It has one job — convincing a stranger to * trust a finance product with their money — and a bright, high-contrast page * does that better than a dark one whatever their laptop is set to. * * That whiteness is built by SWAPPING which existing token plays which role * rather than by introducing a new colour: `--color-card` is already #ffffff * and becomes the page, `--color-bg` is the light grey and becomes the * alternating bands. No hex is hard-coded here, so the palette still tracks * lib/theme.ts. * * Layout is intrinsic: flex/grid with minmax and clamp, so it adapts by content * width rather than by a ladder of breakpoints. * * RTL is handled with logical properties (margin-inline, padding-inline, * inset-inline) so `dir="rtl"` on flips the whole page with no rule * duplicated per direction. Never hide anything at a large negative offset — * `inset-inline-start: -9999px` becomes `right: -9999px` under RTL and makes * the document 10,000px wide. */ /* IRANSans, self-hosted and subsetted to Arabic + Latin + both digit sets. * Four weights, ~38KB each as woff2. * * `font-display: swap` renders immediately in the fallback and swaps when the * file lands: for a page whose ranking depends on how fast it paints, a * readable page now beats a perfect one in 300ms. The two weights used above * the fold are preloaded in base.html; the others fetch when first used. */ @font-face { font-family: "IRANSans"; src: url("fonts/iransans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IRANSans"; src: url("fonts/iransans-500.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; } @font-face { font-family: "IRANSans"; src: url("fonts/iransans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "IRANSans"; src: url("fonts/iransans-800.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; /* White page. See the note at the top: --color-card IS the white in the palette, so this stays a token read rather than a hard-coded colour. */ background: var(--color-card); color: var(--color-text); font-family: "IRANSans", system-ui, Tahoma, sans-serif; font-size: var(--type-body-size); line-height: var(--type-body-leading); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* IRANSans ships Persian digits in its own glyphs; this keeps Latin numerals tabular where they do appear, so figures line up in a column. */ font-variant-numeric: tabular-nums; } img, svg { max-width: 100%; height: auto; } a { color: var(--color-brand); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; text-wrap: balance; } h1 { font-size: clamp(var(--type-title-size), 6vw, calc(var(--type-display-size) * 1.6)); font-weight: 800; line-height: 1.18; } h2 { font-size: clamp(var(--type-heading-size), 3.6vw, calc(var(--type-display-size) * 1.05)); font-weight: 800; line-height: 1.25; } h3 { font-size: var(--type-subtitle-size); font-weight: 700; line-height: var(--type-subtitle-leading); } p { margin: 0; } .muted { color: var(--color-text-muted); } .faint { color: var(--color-text-faint); } .micro { font-size: var(--type-micro-size); } .center { text-align: center; } .lede { font-size: calc(var(--type-body-size) * 1.15); color: var(--color-text-muted); line-height: 1.65; } .eyebrow { font-size: var(--type-eyebrow-size); font-weight: 600; text-transform: uppercase; color: var(--color-brand-soft-text); margin: 0; } /* letterSpacing breaks Arabic-script glyph joining — the same rule the app encodes in eyebrowStyle(). Latin only. */ :lang(en) .eyebrow { letter-spacing: .08em; } /* Hidden by clipping, NOT by parking it off-screen at a negative offset. * * `inset-inline-start: -9999px` resolves to `right: -9999px` under RTL, which * makes the document ten thousand pixels wide and horizontally scrollable — * every page on the Farsi site was clipped by it. Clipping takes the element * out of view without giving it a position outside the viewport, so it behaves * identically in both directions while staying reachable by keyboard. */ .skip { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; z-index: 10; } .skip:focus { width: auto; height: auto; clip-path: none; inset-block-start: var(--space-sm); inset-inline-start: var(--space-lg); background: var(--color-card); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); } :where(a, button, summary):focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-xs); } /* ── layout ─────────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-xl); } .wrap.narrow { max-width: 760px; } .section { padding-block: clamp(var(--space-xxxl), 7vw, calc(var(--space-huge) * 2)); } .band { padding-block: clamp(var(--space-xxxl), 7vw, calc(var(--space-huge) * 2)); background: var(--color-bg); border-block: 1px solid var(--color-border); } .section-head { margin-bottom: var(--space-xxl); display: grid; gap: var(--space-sm); } .section-head.row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; } .page-head { padding-block: var(--space-huge) var(--space-xxl); display: grid; gap: var(--space-md); } .grid { display: grid; gap: var(--space-xl); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* 320px floors this at three columns on a 1240px content box, so the six features land 3×2 rather than 4+2 with two orphans on the second row. */ .grid-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* ── header ─────────────────────────────────────────────────────────────── */ .site-head { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--color-card) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--color-border); } .head-inner { display: flex; align-items: center; gap: var(--space-xl); padding-block: var(--space-md); } .brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-text); font-weight: 800; font-size: var(--type-subtitle-size); } .brand:hover { text-decoration: none; } .brand .logo { color: var(--color-brand); flex: none; } .nav { display: none; gap: var(--space-xl); margin-inline: auto; } .nav a { color: var(--color-text-muted); font-size: var(--type-sub-size); font-weight: 600; } .nav a:hover { color: var(--color-text); text-decoration: none; } .head-actions { display: flex; align-items: center; gap: var(--space-sm); margin-inline-start: auto; } .lang { color: var(--color-text-muted); font-size: var(--type-sub-size); font-weight: 700; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); } .lang:hover { background: var(--color-bg); text-decoration: none; } @media (min-width: 860px) { .nav { display: flex; } .head-actions { margin-inline-start: 0; } } /* ── buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); border-radius: var(--radius-md); font-weight: 700; font-size: var(--type-body-size); padding: var(--space-md) var(--space-xl); border: 1px solid transparent; cursor: pointer; transition: transform var(--motion-fast) ease, background var(--motion-fast) ease; /* 44px minimum touch target. */ min-height: 44px; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-brand); color: var(--color-brand-text); } .btn-primary:hover { background: var(--color-brand-soft-text); } .btn-ghost { background: var(--color-card); color: var(--color-text); border-color: var(--color-border-strong); } .btn-ghost:hover { background: var(--color-bg); } .btn-sm { padding: var(--space-sm) var(--space-lg); min-height: 38px; font-size: var(--type-sub-size); } .btn-lg { padding: var(--space-lg) var(--space-xxl); font-size: calc(var(--type-body-size) * 1.05); } .link { color: var(--color-brand); font-weight: 700; font-size: var(--type-sub-size); } .back { display: inline-block; margin-bottom: var(--space-sm); } /* ── hero ───────────────────────────────────────────────────────────────── */ .hero { padding-block: clamp(var(--space-huge), 9vw, calc(var(--space-huge) * 2.4)); /* Brand wash that survives dark mode because it is mixed against the current background rather than being a fixed light gradient. */ background: radial-gradient(90ch 40ch at 50% -12%, color-mix(in srgb, var(--color-brand) 9%, transparent), transparent 70%), var(--color-card); } .hero-inner { display: grid; gap: var(--space-lg); justify-items: center; text-align: center; max-width: 900px; } .hero .lede { max-width: 62ch; } .accent { color: var(--color-brand); } .cta-row { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; margin-top: var(--space-sm); } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xxl); width: 100%; } .stat { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-lg); } .stat-value { font-size: var(--type-heading-size); font-weight: 800; color: var(--color-brand); } .stat-label { font-size: var(--type-caption-size); color: var(--color-text-muted); margin-top: var(--space-xxs); } /* ── cards ──────────────────────────────────────────────────────────────── */ .card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-xl); display: grid; gap: var(--space-sm); align-content: start; } .card p { color: var(--color-text-muted); font-size: var(--type-sub-size); line-height: 1.7; } .card-link, .card-post { transition: border-color var(--motion-fast) ease, transform var(--motion-fast) ease; } .card-link:hover, .card-post:hover { border-color: var(--color-brand); transform: translateY(-2px); } .card-post h2 { font-size: var(--type-heading-size); } .card h2 a, .card h3 a { color: var(--color-text); } .card h2 a:hover, .card h3 a:hover { color: var(--color-brand); text-decoration: none; } .card-featured { border-color: var(--color-brand); background: var(--color-brand-soft-bg); } .icon { width: 42px; height: 42px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--color-brand-soft-bg); color: var(--color-brand-soft-text); margin-bottom: var(--space-xs); } .icon svg { width: 22px; height: 22px; } /* ── steps ──────────────────────────────────────────────────────────────── */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .step { display: flex; gap: var(--space-lg); align-items: flex-start; } .step h3 { margin-bottom: var(--space-xxs); } .step-n { flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-brand); color: var(--color-brand-text); font-weight: 800; font-size: var(--type-sub-size); } /* ── FAQ ────────────────────────────────────────────────────────────────── */ .faq { display: grid; gap: var(--space-md); } .faq details { background: var(--color-card); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl); } .faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .faq summary::-webkit-details-marker { display: none; } .faq summary h3 { font-size: var(--type-subtitle-size); } .faq summary::after { content: "+"; color: var(--color-text-faint); font-size: var(--type-heading-size); font-weight: 400; line-height: 1; flex: none; } .faq details[open] summary::after { content: "−"; } .faq details p { margin-top: var(--space-md); color: var(--color-text-muted); line-height: 1.75; } /* ── CTA band ───────────────────────────────────────────────────────────── */ .cta { padding-block: clamp(var(--space-xxxl), 7vw, calc(var(--space-huge) * 1.6)); background: linear-gradient(180deg, var(--color-card), var(--color-bg)); border-top: 1px solid var(--color-border); } .cta .wrap { display: grid; gap: var(--space-lg); justify-items: center; } /* ── prose (blog body) ──────────────────────────────────────────────────── */ .prose { display: grid; gap: var(--space-lg); padding-block: var(--space-xl) var(--space-huge); } .prose h2 { font-size: calc(var(--type-heading-size) * 1.2); margin-top: var(--space-xl); } .prose h3 { font-size: var(--type-subtitle-size); margin-top: var(--space-md); } .prose p, .prose li { font-size: calc(var(--type-body-size) * 1.06); line-height: 1.85; color: var(--color-text); } .prose ul { margin: 0; padding-inline-start: var(--space-xl); display: grid; gap: var(--space-sm); } .prose blockquote { margin: 0; padding: var(--space-lg) var(--space-xl); border-inline-start: 3px solid var(--color-brand); background: var(--color-brand-soft-bg); border-radius: var(--radius-lg); } .prose blockquote p { color: var(--color-brand-soft-text); font-weight: 600; } .prose code { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xs); padding: 0 var(--space-xs); font-size: .92em; } .prose strong { color: var(--color-text); font-weight: 700; } /* ── footer ─────────────────────────────────────────────────────────────── */ .site-foot { border-top: 1px solid var(--color-border); background: var(--color-bg); padding-block: var(--space-xxxl) var(--space-xl); margin-top: auto; } .foot-inner { display: flex; gap: var(--space-xxl); justify-content: space-between; flex-wrap: wrap; } .brand-foot { margin-bottom: var(--space-sm); } .foot-nav { display: flex; gap: var(--space-xl); flex-wrap: wrap; align-items: flex-start; } .foot-nav a { color: var(--color-text-muted); font-size: var(--type-sub-size); font-weight: 600; } .foot-legal { display: flex; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; font-size: var(--type-micro-size); border-top: 1px solid var(--color-border); margin-top: var(--space-xxl); padding-top: var(--space-lg); }