/* --------------------------------------------------------------------------- Public site — landing page, about, contact, and the legal documents. Layers on panel.css, which owns the reset and the dark colour tokens. The wallet brands bring their own colour and it arrives in their logos; that is the only place it belongs, which is why there is no bKash pink defined here for anything else to borrow. --------------------------------------------------------------------------- */ /* ----------------------------------------------------------------- fonts -- */ /* * Self-hosted, not linked from a CDN. panel.css shipped no webfont at all so the * panel would render on a box with no outbound internet, and these files satisfy * that reason while fixing what it cost: with only a system stack, an Android * handset whose owner has themed their system font renders the entire site in * that font. On a payment page that is not a small problem. * * Manrope is 25 KB for latin. The Bengali face is 108 KB and only downloads when * the page actually contains Bengali, because of unicode-range. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Noto Sans Bengali'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/notosansbengali-bengali.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; } /* --------------------------------------------------------------- palette -- */ .site-body { /* Bengali first for its own range; Manrope carries everything else. */ --sans: 'Manrope', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Wallet logos are drawn for white paper, so each one sits on a light tile. */ --logo-tile: #f6f8fd; } /* * Light theme, public pages only. * * The attribute is set on by the toggle, and the panels never set it, so * the dashboard and the checkout stay in the one palette they were designed in. * A merchant switching the marketing site to light must not find their live * checkout repainted underneath them. */ :root[data-theme="light"] { --bg: #f6f8fc; --bg-soft: #eef2f9; --surface: #ffffff; --surface-2: #f4f7fc; --surface-3: #e9eff8; --line: #dae2ef; --line-soft: #e8edf6; --text: #0b1424; --text-2: #48586f; --text-3: #78879e; --accent-soft: rgba(99, 102, 241, .10); --accent-line: rgba(99, 102, 241, .30); /* The mint that reads on near-black is far too pale on white. */ --ok: #0d9668; --ok-soft: rgba(13, 150, 104, .10); --ok-line: rgba(13, 150, 104, .28); --warn: #b45309; --warn-soft: rgba(180, 83, 9, .10); --warn-line: rgba(180, 83, 9, .26); --danger: #c92f2f; --danger-soft: rgba(201, 47, 47, .09); --danger-line: rgba(201, 47, 47, .26); --shadow: 0 18px 40px -22px rgba(15, 27, 51, .35); } :root[data-theme="light"] .site-body { --logo-tile: #ffffff; } :root[data-theme="light"] .wallet .tile { border: 1px solid var(--line-soft); } /* The hero art is drawn on transparency around a dark handset; on white it needs a softer shadow or it looks stamped on. */ :root[data-theme="light"] .hero-shot { filter: drop-shadow(0 26px 44px rgba(15, 27, 51, .28)); } /* ---------------------------------------------------------------- layout -- */ .site { max-width: 1140px; margin: 0 auto; padding: 0 24px; } /* * Every in-page anchor on this site — the header's "Pricing" and "How it * works", and the contents list beside each document — lands under a sticky * header 60px tall unless the scroll is told to stop short of it. The heading * you clicked ends up above the fold, and the page looks like it jumped to the * wrong place. * * The smooth scroll is behind a no-preference query rather than the usual * reduce-override, so a visitor who has asked for less motion never gets it * turned on in the first place. */ html { scroll-padding-top: 78px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; z-index: 100; } .skip:focus { left: 0; } /* ------------------------------------------------------------------ nav -- */ .site-nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, background .2s ease; } /* Only once the page has moved. A rule under a nav sitting at the top of an unscrolled page is a line for its own sake. */ .site-nav.is-scrolled { border-bottom-color: var(--line-soft); background: color-mix(in srgb, var(--bg) 94%, transparent); } .site-nav .site { display: flex; align-items: center; gap: 8px; height: 64px; } .site-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; color: var(--text); margin-right: auto; white-space: nowrap; } .site-brand img { max-height: 28px; width: auto; } .nav-links { display: flex; align-items: center; gap: 2px; } .navlink { color: var(--text-2); font-size: 14px; font-weight: 500; padding: 8px 10px; border-radius: var(--r-sm); white-space: nowrap; transition: color .15s ease, background .15s ease; } .navlink:hover, .navlink:focus-visible { color: var(--text); background: var(--surface-2); } .navlink.is-active { color: var(--text); } .nav-tools { display: flex; align-items: center; gap: 6px; margin-left: 6px; } /* ------------------------------------------------- language + appearance -- */ .seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); } .seg a, .seg button { appearance: none; border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; line-height: 1.25; transition: color .15s ease, background .15s ease; } .seg a:hover, .seg button:hover { color: var(--text); } .seg .is-on { background: var(--accent); color: #fff; } .seg .is-on:hover { color: #fff; } .icon-btn { appearance: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .icon-btn:hover { color: var(--text); border-color: var(--accent-line); } /* One button, two glyphs: whichever one the toggle would take you to. */ .theme-toggle .to-light { display: none; } :root[data-theme="light"] .theme-toggle .to-light { display: block; } :root[data-theme="light"] .theme-toggle .to-dark { display: none; } /* ---------------------------------------------------------- mobile menu -- */ .burger { display: none; } .menu-scrim { position: fixed; inset: 0; background: rgba(3, 7, 16, .6); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 45; } .menu-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); background: var(--bg-soft); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .26s cubic-bezier(.32, .72, 0, 1); z-index: 46; display: flex; flex-direction: column; padding: 16px 20px 26px; overflow-y: auto; } body.menu-open { overflow: hidden; } body.menu-open .menu-scrim { opacity: 1; pointer-events: auto; } body.menu-open .menu-panel { transform: none; } .menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .menu-link { display: block; padding: 13px 2px; font-size: 16px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line-soft); } .menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); } .menu-row > span { font-size: 13px; color: var(--text-3); font-weight: 600; } .menu-cta { display: grid; gap: 9px; margin-top: 20px; } /* ----------------------------------------------------------------- hero -- */ .hero { position: relative; padding: 76px 0 0; } .hero .site { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 48px; align-items: start; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); background: var(--ok-soft); border: 1px solid var(--ok-line); border-radius: 999px; padding: 6px 13px; margin-bottom: 22px; } .hero h1 { font-size: clamp(35px, 5.6vw, 62px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; margin: 0 0 20px; text-wrap: balance; } /* The thing the whole product turns on gets the only coloured word on the page. */ .hero h1 .knows { color: var(--ok); } .lead { font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.62; color: var(--text-2); max-width: 46ch; margin: 0 0 28px; text-wrap: pretty; } .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; } .hero-fine { margin: 18px 0 0; font-size: 12.5px; color: var(--text-3); } .hero-shot { position: relative; z-index: 2; } /* ------------------------------------------------------ the hero phone -- */ /* * The whole product in one loop: money leaves the customer, the wallet's message * lands on the merchant's handset, our app forwards it, the payment settles for * the same amount. It runs on one 11s cycle with every beat keyed to a * percentage of it, so nothing needs JavaScript to stay in step and nothing can * drift out of order after a background tab. * * Every beat keeps its space in the layout for the whole cycle and only fades, * so the phone never changes height and the hero never reflows under the copy * beside it. */ .stage { max-width: 340px; margin-left: auto; } .phone { border: 3px solid var(--line); border-radius: 34px; background: var(--surface); padding: 9px; filter: drop-shadow(0 30px 48px rgba(0, 0, 0, .5)); } :root[data-theme="light"] .phone { filter: drop-shadow(0 22px 40px rgba(15, 27, 51, .22)); } .screen { position: relative; background: var(--bg); border-radius: 26px; padding: 15px 15px 20px; min-height: 430px; } .statusbar { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--text-3); margin-bottom: 14px; } .statusbar .dots { display: inline-flex; gap: 4px; } .statusbar .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); } .beat { opacity: 0; } /* --- 1. the customer sends ------------------------------------------- */ .b1 { margin-bottom: 14px; } .b1 .pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; } .b1 .pill b { color: var(--text-2); font-variant-numeric: tabular-nums; } .b1 .pill svg { color: var(--accent); width: 13px; height: 13px; } /* --- 2. the wallet message ------------------------------------------- */ .b2 .sender { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; } .b2 .ava { width: 28px; height: 28px; border-radius: 50%; /* bKash's own pink. The merchant recognises it before they read a word. */ background: #e2136e; color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; } .b2 .sender b { display: block; font-size: 13px; color: var(--text); } .b2 .sender i { display: block; font-size: 11px; color: var(--text-3); font-style: normal; } .b2 .bubble { margin: 0; background: var(--surface-2); border-radius: 14px; padding: 11px 13px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); } .b2 .amt, .b2 .ref { color: var(--ok); font-style: normal; font-weight: 600; } /* --- 3. our app forwards it ------------------------------------------ */ .b3 { margin-top: 14px; } .b3 .chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 10px 13px; } .b3 .chip b { display: block; font-size: 12.5px; color: var(--text); } .b3 .chip i { display: block; font-size: 11px; color: var(--text-3); font-style: normal; } .b3 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; } .b3 .rail { display: block; height: 26px; margin: 4px 0 4px 17px; } .b3 .rail i { display: block; width: 2px; height: 100%; background: var(--line); transform: scaleY(0); transform-origin: top; } /* --- 4. settled ------------------------------------------------------ */ .b4 .settled { border: 1px solid var(--ok-line); border-radius: 16px; background: var(--ok-soft); padding: 14px; } .b4 .settled-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .b4 .settled-head b { font-size: 13px; color: var(--text); } .b4 .tick { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: var(--bg); display: grid; place-items: center; flex: none; } .b4 .tick svg { width: 13px; height: 13px; } .b4 .big { font-size: 27px; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--ok); line-height: 1.1; } .b4 .fine { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); margin-top: 5px; } /* --- the cycle -------------------------------------------------------- */ .b1 { animation: beat1 11s ease-in-out infinite; } .b2, .b3, .b4 { animation-duration: 11s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .b2 { animation-name: beat2; } .b3 { animation-name: beat3; } .b4 { animation-name: beat4; } .b3 .rail i { animation: rail 11s ease-in-out infinite; } /* The match: the same figure lights up in the message and on the card at the same instant, because "the reference and the exact amount must agree" is the mechanism and this is the moment it happens. */ .b2 .amt, .b4 .big { animation: matched 11s ease-in-out infinite; } @keyframes beat1 { 0%, 3% { opacity: 0; transform: translateY(-6px); } 9%, 21% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-6px); } } @keyframes beat2 { 0%, 17% { opacity: 0; transform: translateY(10px); } 24%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-6px); } } @keyframes beat3 { 0%, 36% { opacity: 0; transform: translateY(10px); } 43%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-6px); } } @keyframes beat4 { 0%, 56% { opacity: 0; transform: translateY(12px) scale(.98); } 64%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-6px); } } @keyframes rail { 0%, 45% { transform: scaleY(0); } 53%, 90% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } } @keyframes matched { 0%, 63% { filter: none; } 68% { filter: brightness(1.45); } 74%, 100% { filter: none; } } /* --------------------------------------------------------------- proof -- */ /* * The three questions a merchant asks before anything else, in the order they * ask them. Rules rather than cards: these are facts about the service, not * three features competing for a click. */ .proof { position: relative; margin-top: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .proof .site { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .proof-item { padding: 30px 26px 30px 0; } .proof-item + .proof-item { padding-left: 26px; border-left: 1px solid var(--line); } .proof-item strong { display: block; font-size: 15px; letter-spacing: -0.015em; margin-bottom: 5px; } .proof-item span { color: var(--text-3); font-size: 13px; line-height: 1.6; display: block; } /* ------------------------------------------------------------- sections -- */ .section { padding: 72px 0; } .section + .section { border-top: 1px solid var(--line-soft); } .section-head { max-width: 62ch; margin-bottom: 40px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2, .linkbox h2, .cta h2 { font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.032em; line-height: 1.12; font-weight: 800; margin: 0 0 12px; text-wrap: balance; } .section-head p { color: var(--text-2); margin: 0; line-height: 1.65; font-size: 15px; } .kicker { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; } /* ---------------------------------------------------------------- steps -- */ /* * Labelled by who does the work, not 1-2-3. Which party acts is the surprising * part of this product — the merchant's own handset is the verifier — and an * ordinal would hide exactly the thing worth showing. */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .step { position: relative; padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color .2s ease, transform .2s ease; } .step:hover { border-color: var(--accent-line); transform: translateY(-2px); } .step .actor { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 4px 11px; margin-bottom: 16px; } .step.is-phone .actor { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); } .step h3 { margin: 0 0 8px; font-size: 15.5px; letter-spacing: -0.018em; font-weight: 700; } .step p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.65; } /* -------------------------------------------------------------- wallets -- */ .wallets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .wallet { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: border-color .2s ease; } .wallet:hover { border-color: var(--accent-line); } .wallet .tile { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; background: var(--logo-tile); display: grid; place-items: center; padding: 5px; } .wallet .tile img { max-width: 100%; max-height: 100%; width: auto; } /* --------------------------------------------------------- payment links -- */ .linkbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; } .linkbox > div > p { color: var(--text-2); margin: 0; line-height: 1.65; font-size: 15px; } .linkdemo { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 22px; } .linkdemo .label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; } .linkdemo .url { font-family: var(--mono); font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; overflow-x: auto; white-space: nowrap; } .linkdemo .url b { color: var(--ok); font-weight: 600; } .ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .ticks li { display: flex; gap: 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; } .ticks li svg { flex: none; margin-top: 2px; color: var(--ok); } /* -------------------------------------------------------------- pricing -- */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px; } .plan { display: flex; flex-direction: column; padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color .2s ease, transform .2s ease; } .plan:hover { transform: translateY(-3px); border-color: var(--accent-line); } .plan.featured { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), transparent 55%), var(--surface); position: relative; } .plan .tag { position: absolute; top: -11px; left: 22px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } .plan h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--text-2); font-weight: 600; } .plan .price { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin: 10px 0 2px; } .plan .term { color: var(--text-3); font-size: 12.5px; } .plan .was { color: var(--text-3); font-size: 12px; margin-top: 4px; } .plan ul { list-style: none; margin: 20px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; } .plan li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; } .plan li svg { flex: none; margin-top: 2px; color: var(--ok); } /* ------------------------------------------------------------------ faq -- */ .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 34px; } .faq-item { padding: 20px 0; border-top: 1px solid var(--line-soft); } .faq-item h3 { margin: 0 0 8px; font-size: 14.5px; letter-spacing: -0.015em; font-weight: 700; } .faq-item p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.72; } .faq-item a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------------ cta -- */ .cta { text-align: center; padding: 80px 0; border-top: 1px solid var(--line-soft); } .cta p { color: var(--text-2); max-width: 52ch; margin: 0 auto 26px; line-height: 1.65; } /* -------------------------------------------------------------- article -- */ /* * The legal documents, About and Contact. Narrow measure, generous leading: * these are read rather than skimmed, and by someone deciding whether to trust * you with their customers' money. * * A measure has to be *placed*, though, not just capped. Capping the column at * 68ch inside an 1140px container and leaving it at that is what pinned every * one of these pages to the left edge with half the screen empty beside it — * which reads as a layout bug rather than as a considered line length, and it * was on every public page except the landing page. * * So the grid places it, and the space that was empty carries the contents list * and a route to a human. On a narrow screen the aside drops below the text and * this collapses back to the single column it always was. */ .article { padding: 64px 0 80px; } .article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; column-gap: 62px; align-items: start; max-width: 1000px; } .article-head { grid-column: 1 / -1; max-width: 60ch; margin-bottom: 44px; } .article-head h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.036em; line-height: 1.08; font-weight: 800; margin: 0 0 12px; } .article-head p { color: var(--text-2); margin: 0; font-size: 16px; line-height: 1.6; } .prose { max-width: 68ch; } .prose section + section { margin-top: 38px; } .prose h2 { font-size: 17px; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); } .prose p { margin: 0 0 14px; color: var(--text-2); font-size: 14.5px; line-height: 1.78; } .prose p:last-child { margin-bottom: 0; } .prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .notice { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--surface); padding: 14px 16px; margin-bottom: 30px; color: var(--text-2); font-size: 13.5px; line-height: 1.7; } .notice-ok { border-left-color: var(--ok); } .notice-bad { border-left-color: var(--danger); } /* Specific enough to beat `.prose p`, which would otherwise flatten the gap and leave this sitting on the last paragraph as if it were part of it. */ .prose > .prose-foot { margin-top: 38px; color: var(--text-3); font-size: 13px; } /* ---------------------------------------------------------------- aside -- */ /* Sticky below the header, which is 60px and translucent. */ .article-aside { position: sticky; top: 84px; display: grid; gap: 16px; } .toc h2, .aside-card h2 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .toc { border-left: 1px solid var(--line); padding-left: 18px; } .toc h2 { padding-left: 0; } .toc a { display: block; padding: 5px 0; color: var(--text-2); font-size: 13px; line-height: 1.45; transition: color .14s; } .toc a:hover { color: var(--text); } .aside-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 18px 20px; } .aside-card p { margin: 0 0 14px; color: var(--text-2); font-size: 13px; line-height: 1.6; } .aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .aside-list li { display: flex; gap: 10px; font-size: 13px; color: var(--text-2); line-height: 1.5; } .aside-list li svg { flex: none; margin-top: 3px; color: var(--accent); } .aside-list a { color: var(--text); } .aside-list small { color: var(--text-3); font-size: 12px; } /* --------------------------------------------------------- contact form -- */ /* * The site's own field styling rather than the panel's. panel.css dresses its * inputs for a dense dashboard; this is one form on a marketing page and it can * afford the room. */ .contact-form { margin: 4px 0 42px; } .fld { margin-bottom: 16px; } .fld-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .fld label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); } .fld input, .fld select, .fld textarea { width: 100%; padding: 11px 13px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 14px; transition: border-color .14s, box-shadow .14s; } .fld textarea { resize: vertical; min-height: 132px; line-height: 1.65; } .fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .fld input::placeholder, .fld textarea::placeholder { color: var(--text-3); } .fld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c9e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; } .contact-send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; } .contact-send span { color: var(--text-3); font-size: 12.5px; } /* * The honeypot. Off-screen rather than display:none — a bot that reads the * stylesheet skips a hidden field, and one that does not read it at all still * finds this one and fills it in. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --------------------------------------------------------------- footer -- */ .site-foot { border-top: 1px solid var(--line); padding: 48px 0 0; } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 30px; padding-bottom: 40px; } .foot-brand p { margin: 12px 0 0; color: var(--text-3); font-size: 13px; line-height: 1.6; max-width: 34ch; } .foot-grid h4 { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .foot-grid > div > a { display: block; color: var(--text-2); font-size: 13.5px; padding: 5px 0; } .foot-grid > div > a:hover { color: var(--text); } .foot-base { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; padding-top: 22px; padding-bottom: 34px; border-top: 1px solid var(--line-soft); color: var(--text-3); font-size: 12.5px; } /* ------------------------------------------------------------- animation -- */ /* * One idea, applied consistently: things arrive from just below where they * settle. Sections reveal as they come into view, and the hero runs the same * move on load as a short stagger. Nothing loops, nothing floats, and nothing * keeps asking for attention once it has arrived. */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1); } [data-reveal].in { opacity: 1; transform: none; } /* No JavaScript, no observer, no problem: the content is simply there. */ .no-js [data-reveal] { opacity: 1; transform: none; } .hero [data-enter] { opacity: 0; transform: translateY(14px); animation: rise .6s cubic-bezier(.22, .61, .36, 1) forwards; } .hero [data-enter="1"] { animation-delay: .04s; } .hero [data-enter="2"] { animation-delay: .11s; } .hero [data-enter="3"] { animation-delay: .18s; } .hero [data-enter="4"] { animation-delay: .25s; } .hero [data-enter="5"] { animation-delay: .30s; } @keyframes rise { to { opacity: 1; transform: none; } } /* ------------------------------------------------- page transitions -- */ /* * Moving between pages, without a single line of JavaScript. * * `navigation: auto` hands the browser both documents and lets it cross-fade * them itself, so there is no click handler holding a navigation back while an * animation plays — which is the failure mode of every hand-rolled version of * this: on a slow connection the old page sits there faded out, and the visitor * clicks again. * * The header and the footer are named, so they are treated as the *same* * element on both sides of the navigation and stay put while only the content * between them changes. That is what makes it read as one site rather than as * a slideshow of separate pages. */ @view-transition { navigation: auto; } .site-nav { view-transition-name: site-nav; } .site-foot { view-transition-name: site-foot; } ::view-transition-old(root) { animation: vt-out .18s cubic-bezier(.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.22, .61, .36, 1) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(12px); } } @keyframes vt-fade-out { to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } } /* * Browsers without view transitions get the same idea a cheaper way: the * content of every page arrives with one short rise, on load. It cannot know * where you came from, so it does not try to — it just makes arriving feel like * arriving somewhere rather than a repaint. * * Gated behind @supports so the two never run at once and double the motion. */ @supports not (view-transition-name: none) { /* * The opening state lives in the keyframe rather than on the element, so a * browser that ignores `animation` outright leaves the content visible * instead of hiding it at opacity 0 with nothing coming to bring it back. */ #main { animation: vt-in .34s cubic-bezier(.22, .61, .36, 1) both; } } /* ---------------------------------------------------------- responsive -- */ @media (max-width: 1000px) { /* Everything but the brand, the theme button and the burger moves into the panel. Keeping five links, two switches and a button on one line is what made the header wrap on a phone in the first place. */ .nav-links, .nav-tools .lang-desktop, .hide-sm { display: none; } .burger { display: inline-grid; } .site-nav .site { gap: 10px; } } @media (max-width: 960px) { .hero .site { grid-template-columns: minmax(0, 1fr); gap: 30px; } .stage { margin: 0 auto; max-width: 320px; } .lead { max-width: none; } .linkbox { grid-template-columns: minmax(0, 1fr); gap: 26px; } .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } } @media (max-width: 900px) { /* The aside stops being a margin and becomes the end of the page. Sticky would pin it over the text it is meant to sit beside. */ .article-grid { grid-template-columns: minmax(0, 1fr); } .article-aside { position: static; margin-top: 46px; } .toc { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; } .prose { max-width: none; } } @media (max-width: 780px) { .steps, .faq { grid-template-columns: minmax(0, 1fr); } .faq { gap: 0; } .fld-row { grid-template-columns: minmax(0, 1fr); } .proof .site { grid-template-columns: minmax(0, 1fr); } .proof-item { padding: 22px 0; } .proof-item + .proof-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-soft); } .section { padding: 54px 0; } .hero { padding-top: 44px; } .cta { padding: 60px 0; } } @media (prefers-reduced-motion: reduce) { [data-reveal], .hero [data-enter] { opacity: 1; transform: none; animation: none; } .menu-panel, .menu-scrim, .site-nav, .step, .plan, .wallet { transition: none; } /* * The page still cross-fades — a hard cut between two documents is its own * kind of jolt — but nothing slides, and it is over in half the time. */ ::view-transition-old(root) { animation: vt-fade-out .12s linear both; } ::view-transition-new(root) { animation: vt-fade-in .12s linear both; } #main { animation: none; } /* * Freeze the phone on its last frame rather than just stopping the * animation. The beats start at opacity 0, so cancelling the keyframes * without this leaves a visitor who asked for less motion staring at an * empty handset. */ .beat, .b1 { opacity: 1; transform: none; animation: none; } .b3 .rail i { transform: scaleY(1); animation: none; } .b2 .amt, .b4 .big { filter: none; animation: none; } /* The first beat is the customer paying; on the frozen frame the payment has already settled, so showing it would contradict the card below. */ .b1 { display: none; } } /* * Same reasoning for a browser that never runs the keyframes at all. Without * JavaScript the reveals are handled by .no-js; CSS animations need no script, * so this only guards the case where they are unsupported entirely. */ @supports not (animation-name: beat2) { .beat { opacity: 1; } .b1 { display: none; } .b3 .rail i { transform: scaleY(1); } }