/* ---------- ALBERT SANS ---------- One face for the whole site, headings and body alike, requested as a single 400..800 variable file. Nothing else is loaded; --display, --body and --mono all point here, so a rule that names the wrong one still lands on Albert Sans. The hierarchy is carried by weight, size and tracking rather than by a second face: 400 body copy 500 secondary lines and the labels inside the calculator 600 buttons, navigation, eyebrows, card and column titles 700 section headings 800 hero and the closing display line, plus financial figures Albert Sans is a geometric sans: rounder bowls, a narrower set and a shorter x-height than the Manrope it replaces, so the same string sets both shorter and lighter at the same font-size. Two things follow, and both are done here rather than left to chance - the display tracking below is eased off, because a geometric face tightened as hard as a wide grotesk closes its counters and the words go to one dark shape, and the type ladder is left where it is rather than pulled down a second time. Google serves the family as a 100..900 variable file. This page asks for 400..800, which is the range the ladder above actually uses. */ :root{ /* One theme, one value. The page is true black - the same colour the footer runs at, which is bleap.finance's. There is no longer a step between the two: the document is a single unbroken ground from the header to the copyright line, and what separates the footer from the page above it is the hairline along its top edge, not a change in value. Everything layered on that ground is an rgba white overlay (--surface-1, --surface-2, --hairline) rather than a fixed colour, so the whole elevation system still reads at this depth without retuning. color-scheme tells the browser the same thing the palette does, which is what gets scrollbars, form controls and the tap highlight rendered dark instead of leaving light-mode widgets stranded on a dark page. */ color-scheme:dark; --brand:#000000; --ink:#000000; --paper:#EEF1F5; --off:#EDEBFB; --gold:#EEF1F5; --gold-rgb:238,241,245; --line:rgba(255,255,255,0.14); --line-soft:rgba(0,0,0,0.14); --muted:rgba(255,255,255,0.65); --muted-dark:rgba(0,0,0,0.6); --header-bg:rgba(0,0,0,0.88); --eyebrow-bg:rgba(255,255,255,0.12); --eyebrow-border:rgba(255,255,255,0.28); --section-eyebrow-bg:rgba(0,0,0,0.06); --section-eyebrow-border:rgba(0,0,0,0.16); --tag-bg:rgba(255,255,255,0.08); --tag-border:rgba(255,255,255,0.2); --avatar-bg:rgba(255,255,255,0.14); --avatar-text:var(--gold); --pillars-line:rgba(0,0,0,0.14); --hover-tint:var(--off); --visual-shadow:rgba(0,0,0,0.35); --hero-shadow:rgba(0,0,0,0.55); /* True black, the value bleap.finance runs its own footer at - and now the value the page runs at too, so this token and --brand resolve to the same colour. It is kept as its own name rather than collapsed into --brand: the footer and the compliance band both read this one, and giving the page a different ground later should not mean hunting down every rule that meant "the footer's colour". */ --footer-bg:#000000; --social-ink:rgba(255,255,255,0.78); /* wise.com runs a strict two-face system: Wise Sans Heavy for display type and Inter for absolutely everything else. The layout metrics below still come from Wise; the face is Albert Sans, described at the top of this sheet. All three tokens now resolve to it. --mono is kept as a name because ~70 rules reference it; what it means is "the label face", and the eyebrows it styles are 600, sentence case, with the old 0.14em tracking removed. */ --display: 'Albert Sans', sans-serif; --body: 'Albert Sans', sans-serif; --mono: 'Albert Sans', sans-serif; /* ---------- TYPE SCALE ---------- One ladder, nothing outside it. Section body sits at 17px rather than the 18 it started at, and nav and footer links at 15 rather than 14. Both moves were made against a tall-x-height grotesk; Albert Sans reads a shade smaller at the same value, so nothing here goes back down - if anything the ladder is now a touch conservative. The steps are in rem (1rem = 16px at the browser default), so a reader who has raised their default text size gets the whole ladder scaled with it; px would pin it. Fine print sits at 13px rather than 12, and nothing a reader taps or must read to act - links, buttons, instructions - goes below 14px. */ --t-mono:0.875rem; /* 14px eyebrows, labels */ --t-fine:0.8125rem; /* 13px legal, captions */ --t-sm:0.9375rem; /* 15px nav, footer links, buttons */ --t-base:1rem; /* 16px card body */ --t-body:1.0625rem; /* 17px section body */ --t-lead:1.25rem; /* 20px hero lead */ --t-h3:1.25rem; /* 20px */ --t-h2:clamp(1.875rem, 3.6vw, 3rem); /* The hero is no longer the same size as a section heading. It is the first thing on the page and it should be the largest thing on it after the closing line; 58px is the ceiling that keeps "Beyond borders." on one line inside its column. */ --t-h1:clamp(2.375rem, 4.6vw, 3.625rem); /* ---------- DISPLAY METRICS ---------- Albert Sans sets narrower than the Manrope this page used to run, so it wants less pulling in: -0.03em on the hero and -0.022em on section headings, which is where the letterforms stop reading as separate objects and start reading as a word without the round counters of a geometric face closing up on themselves. The leading is crushed to match - just over 1 for the hero, just under 1.05 for sections - so a two-line heading holds together as a block. Weight climbs with size rather than staying flat: 700 carries section headings, 800 is kept for the hero and the closing line, so scale and weight say the same thing rather than competing. */ --lh-display:1.02; --ls-display:-0.03em; --wt-display:800; --lh-h2:1.04; --ls-h2:-0.022em; --wt-h2:700; /* ---------- SPACING (8px base) ---------- Every margin and pad below routes through these, so vertical rhythm is consistent instead of a drift of 26/34/44/56/64px one-offs. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:40px; --sp-8:56px; --sp-9:72px; --sp-10:96px; --sp-11:128px; --radius-sm:12px; --radius-md:18px; --radius-lg:24px; --radius-xl:32px; /* Shared height for the band visuals. It lives up here, in the first :root, rather than down beside the badge tokens where it started - custom properties are resolved by cascade order like anything else, and from there it was re-declaring itself AFTER the max-width:860px block that lowers it to 340. Same specificity, later wins, so the phone value never applied and every band reserved 480px of height on a 375px screen. Declared before the media query, it is overridable again. */ --band-visual-h:480px; /* One easing curve for the whole page. Mixed curves read as inconsistent motion even when no single transition looks wrong. */ --ease:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.16,1,.3,1); /* Layered elevation. A flat rgba fill has no light source; the inset hairline gives each surface a lit top edge, which is most of what makes dark UI read as crafted. */ --surface-1:rgba(255,255,255,0.045); --surface-2:rgba(255,255,255,0.07); --hairline:rgba(255,255,255,0.09); --shadow-md:0 18px 40px -24px rgba(0,0,0,0.7); --shadow-lg:0 40px 80px -40px rgba(0,0,0,0.85); /* No wash. The page is the flat --brand grey from top to bottom. This used to carry five very wide radial tints (green over the hero, blue and violet through the middle bands, amber into the closing block) stacked down the length of the document. They are gone deliberately, not lost: put a gradient stack back on this one token and the whole page picks it up again, because body::before is the only thing that reads it. */ --ground:none; } body{transition:background 0.25s ease, color 0.25s ease;} *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} section[id]{ scroll-margin-top:var(--sp-10); } body{ /* Containing block for the ::before wash below. */ position:relative; background:var(--brand); color:var(--paper); font-family:var(--body); font-weight:400; /* 1.55 rather than 1.5: the paragraphs on this page want air rather than density, and Albert Sans' open counters hold at the looser setting where a denser face would start to look sparse. */ line-height:1.55; letter-spacing:-0.005em; overflow-x:hidden; /* Without this, Albert Sans renders noticeably heavier on macOS than it does on the sites this page is being measured against. */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"kern" 1,"liga" 1,"calt" 1; } /* Figures should never wobble in width when they change. */ .tabular{font-variant-numeric:tabular-nums;} /* The ground layer behind the page. It paints --ground, which is now `none` in both themes, so this currently renders nothing and the flat --brand colour shows through. It is kept rather than deleted because it is the whole mechanism: it stays absolute rather than fixed so that anything put back into --ground is as tall as the document and stays with the section it was placed over, where fixed would park it in the viewport and slide the page past it. */ body::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:var(--ground); } header,main,footer{position:relative; z-index:1;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} .wrap{max-width:1180px;margin:0 auto;padding:0 var(--sp-6);} ::selection{background:var(--gold);color:var(--brand);} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;} } /* ---------- NAV ---------- */ /* At the top the header should be invisible against the hero; it only earns its border and blur once content is passing underneath it. */ header{ position:sticky; top:0; z-index:50; background:transparent; border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); } header.is-scrolled{ background:var(--header-bg); backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line); } /* The mobile panel needs an opaque header behind it whether scrolled or not. */ header.nav-open{ background:var(--brand); border-bottom-color:var(--line); } nav{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4) 0; transition:padding .3s var(--ease); } .logo-img{height:34px; width:auto;} .foot-brand .logo-img{height:34px;} @media (max-width:860px){ .logo-img{height:30px;} } @media (max-width:560px){ .logo-img{height:28px;} .foot-brand .logo-img{height:26px;} } /* The links sit in a dark pill centred on the row, and Product opens by growing that same pill downward rather than dropping a separate panel - bleap.finance's header, measured off their site: #1a1a1a fill, the menu scaling up from 0.4 at its top-left corner while the pill's height runs out to fit it, 32px icon tiles at 5% white that go to 10% on hover as the row slides 8px right. The positioner is a fixed 48px box centred on the nav row, so the pill can grow out of it downward without changing the row's height and shifting the logo and the call to action. Width and height are set from the script: the pill has to be as wide as the wider of its tabs and its menu, and a transition cannot run to or from `auto`. */ nav{ position:relative; } .nav-links{ position:absolute; left:50%; top:50%; height:48px; margin-top:-24px; transform:translateX(-50%); z-index:2; } .nav-pill{ position:relative; height:48px; border-radius:24px; overflow:hidden; background:#1a1a1a; transition:height .5s var(--ease-soft), width .5s var(--ease-soft); } /* Centred, so the tabs stay put while the pill widens around them to fit the menu. */ .nav-tabs{ display:flex; width:max-content; margin:0 auto; align-items:center; padding:4px; white-space:nowrap; } .nav-tab{ height:40px; display:flex; align-items:center; padding:0 16px; background:none; border:0; cursor:pointer; font-family:var(--body); font-size:var(--t-sm); font-weight:600; letter-spacing:-0.005em; color:var(--muted); transition:color .2s var(--ease); } .nav-tab:hover, .nav-tab[aria-expanded="true"]{ color:#fff; } .nav-tab:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; border-radius:20px; } .nav-drop-clip{ position:absolute; top:56px; left:0; right:0; bottom:0; overflow:hidden; } .nav-drop{ position:absolute; top:0; left:0; width:360px; display:flex; flex-direction:column; gap:2px; padding:0 8px 8px; opacity:0; transform:scale(.4); transform-origin:left top; transition:opacity .3s var(--ease), transform .5s var(--ease-soft); } /* One pill, several menus (Product, Company, Support): only the open tab's list shows, the others stay collapsed and inert inside the same clip. */ .nav-drop:not(.is-active){ pointer-events:none; } .nav-pill.is-open .nav-drop.is-active{ opacity:1; transform:none; } .nav-tab .nav-tab-chev{ width:12px; height:12px; margin-left:6px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease); } .nav-tab[aria-expanded="true"] .nav-tab-chev{ transform:rotate(180deg); } /* The rows inside are spenda.africa's product list - the product's name and one line on what it does - led by bleap's 32px icon tile. */ .nav-drop-item{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); border-radius:14px; color:#fff; transition:background .15s var(--ease); } .nav-drop-item:hover, .nav-drop-item:focus-visible{ background:rgba(255,255,255,0.06); outline:none; } .nav-drop-ic{ width:32px; height:32px; flex-shrink:0; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); transition:background .15s var(--ease); } .nav-drop-item:hover .nav-drop-ic, .nav-drop-item:focus-visible .nav-drop-ic{ background:rgba(255,255,255,0.1); } .nav-drop-ic svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .nav-drop-text{ display:flex; flex-direction:column; gap:2px; min-width:0; } .nav-drop-title{ font-size:var(--t-sm); font-weight:600; line-height:1.3; } .nav-drop-desc{ font-size:var(--t-mono); line-height:1.35; color:var(--muted); } .nav-cta{display:flex; align-items:center; gap:var(--sp-4);} /* Buttons run one notch tighter than body copy. A pill is a small closed shape and the label has to read as a single object inside it. */ .btn{ font-family:var(--body); font-weight:600; font-size:var(--t-sm); padding:var(--sp-3) var(--sp-5); border-radius:100px; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:var(--sp-2); letter-spacing:-0.015em; } .btn-primary{background:var(--paper); color:var(--brand);} .btn-primary:hover{background:var(--hover-tint);} .btn-ghost{color:var(--paper); font-weight:600;} .btn:focus-visible,.store-badge:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:100px; } .menu-toggle{ display:none; position:relative; width:34px; height:34px; background:none; border:0; padding:0; cursor:pointer; } .menu-toggle .menu-bar{ position:absolute; left:7px; width:20px; height:1.5px; background:var(--paper); transition:transform .3s cubic-bezier(.22,.61,.36,1); } .menu-toggle .menu-bar:nth-child(1){ top:14px; } .menu-toggle .menu-bar:nth-child(2){ top:20px; } .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1){ transform:translateY(3px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2){ transform:translateY(-3px) rotate(-45deg); } .menu-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; } /* Panel drops out of the sticky header, which is its containing block. */ .mobile-nav{ position:absolute; left:0; right:0; top:100%; background:var(--brand); border-bottom:1px solid var(--line); display:flex; flex-direction:column; padding-bottom:8px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), visibility .25s; } header.nav-open .mobile-nav{ opacity:1; visibility:visible; transform:none; } .mobile-nav a{ padding:var(--sp-4) 20px; font-size:16px; font-weight:600; color:var(--paper); border-top:1px solid var(--line); } .mobile-nav a:first-child{ border-top:0; } .mobile-nav a:active{ background:var(--eyebrow-bg); } .mobile-nav .mobile-nav-legal{ font-size:14px; color:var(--muted); } /* Product in the phone menu is the same list as the desktop pill's, opened in place under its row. Rows collapse on a 0fr/1fr grid track so the list animates to its own height without a measured max-height. */ .mobile-nav-group{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:var(--sp-4) 20px; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--body); font-size:16px; font-weight:600; color:var(--paper); } .mobile-nav-group svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease); } .mobile-nav-group[aria-expanded="true"] svg{ transform:rotate(180deg); } .mobile-nav-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease-soft); } .mobile-nav-group[aria-expanded="true"] + .mobile-nav-sub{ grid-template-rows:1fr; } .mobile-nav-sub > div{ overflow:hidden; display:flex; flex-direction:column; } .mobile-nav-group[aria-expanded="true"] + .mobile-nav-sub > div{ padding-bottom:12px; } .mobile-nav .mobile-nav-sub a{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 20px; border-top:0; } /* The panel's own call to action, under the links rather than among them. It is the one thing in this menu that is not navigation, so it stops being a list row: no rule above it, centred, and inset from the edges the links run to. */ .mobile-nav .btn{ margin:var(--sp-4) 20px var(--sp-2); padding:var(--sp-3) var(--sp-5); border-top:0; justify-content:center; font-size:15px; color:var(--brand); } .mobile-nav .btn:active{ background:var(--hover-tint); } @media (min-width:861px){ .mobile-nav{ display:none; } } @media (prefers-reduced-motion: reduce){ .mobile-nav{ transition:opacity .25s ease, visibility .25s; transform:none; } .menu-toggle .menu-bar{ transition:none; } } @media (max-width:860px){ .nav-links{display:none;} .menu-toggle{display:block;} } /* Below ~560px the logo, the pill and the toggle stop fitting on one line: tightened as far as it goes, the pill still ends up flush against the wordmark with no gap at all. So the pill leaves the row here and the one at the bottom of the menu takes over. Same button, one tap further in, and the header gets its logo back. */ @media (max-width:560px){ nav{padding:var(--sp-4) 0;} .nav-cta{gap:12px;} .nav-cta .btn{display:none;} } /* ---------- HERO ---------- */ .hero{ padding:var(--sp-10) 0 var(--sp-9); position:relative; } .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--sp-8); align-items:center; } .eyebrow{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--body); font-size:var(--t-mono); font-weight:600; letter-spacing:-0.008em; color:var(--muted); background:none; border:0; padding:0; margin-bottom:var(--sp-4); } h1{ font-family:var(--display); font-weight:var(--wt-display); font-size:var(--t-h1); line-height:var(--lh-display); letter-spacing:var(--ls-display); margin-bottom:var(--sp-5); } /* ---------- HERO WORD ROTATOR ---------- bleap.finance's hero device: the first word is fixed and the one after it is exchanged on a timer, so one line carries two claims. Taken at the mechanism rather than at the effect, because the effect falls apart without it: - the words are stacked absolutely on top of one another, so a swap has no reflow to fight and nothing below the hero ever moves; - the box's width is animated to the incoming word rather than snapped, which is what keeps the full stop travelling with the word instead of jumping ahead of it; - each word is split into letters that arrive on a stagger. They fall in from above and leave downward, so the exchange reads as one motion carrying on through the line rather than as two opposing ones. Only transform and opacity are animated, so the whole thing composites and never lays out. Width is the one exception and it is on a box no other element is sized from. The no-JS shape is the first word sitting in normal flow, which is why the layers are only lifted out of it under .is-live - a class the script adds. Without it the hero still reads "Beyond money." */ .hero-title{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:0.24em; } .hero-rot{ position:relative; display:inline-block; white-space:nowrap; } .hero-rot.is-live{ transition:width .52s var(--ease-soft); } /* Holds the current word at visibility:hidden purely to give the box its height. Width comes from the script, because an inline-block's implicit width is not a transitionable value. */ .hero-rot__size{ visibility:hidden; white-space:pre; } .hero-rot.is-live .hero-rot__word{ position:absolute; left:0; top:0; white-space:nowrap; } .hero-rot__l{ display:inline-block; will-change:transform, opacity; transition:transform .52s var(--ease-soft), opacity .3s linear; } .hero-rot__word.is-in .hero-rot__l{ opacity:0; transform:translateY(-0.62em); } .hero-rot__word.is-out .hero-rot__l{ opacity:0; transform:translateY(0.62em); } /* The letters are split for the stagger and are hidden from assistive tech because a per-character run is read out character by character. The word reaches the accessibility tree once, whole, through this instead. */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } @media (prefers-reduced-motion: reduce){ .hero-rot.is-live, .hero-rot__l{ transition:none; } } /* 540px rather than 440: the lead runs to two sentences now, and anything under 540 leaves it five lines deep under the heading. 540 is the width where it breaks to four, and there is still ~80px of air before the hero visual beside it. */ .hero p.lead{ font-size:var(--t-lead); font-weight:500; line-height:1.5; letter-spacing:-0.012em; color:var(--muted); max-width:540px; margin-bottom:var(--sp-7); } .hero-actions{display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center;} .hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; } .hero-visual img{width:100%; max-width:400px; height:auto; display:block; margin:0 auto;} /* ---------- SECTION HEADERS ---------- */ /* 128px between sections rather than 96px. The reference sites all breathe harder than this page did; cramped rhythm is what made it feel busy. */ section{padding:var(--sp-9) 0;} h2{ font-family:var(--display); font-weight:var(--wt-h2); font-size:var(--t-h2); letter-spacing:var(--ls-h2); line-height:var(--lh-h2); margin-bottom:var(--sp-4); } .band-copy{color:var(--muted); font-size:var(--t-body); line-height:1.6; max-width:46ch; margin-bottom:var(--sp-6);} /* The closing line under a band's body copy. It is a claim rather than more explanation, so it steps back up to full-strength ink where the paragraph above it is --muted, and takes weight instead of size - the same trick the trust list uses to sit brighter than the copy it follows without becoming a second heading. */ .band-kicker{ color:var(--paper); font-size:var(--t-base); font-weight:600; line-height:1.5; letter-spacing:-0.005em; max-width:46ch; margin-top:var(--sp-4); } /* Light section variant */ .section-light{ background:var(--paper); color:var(--ink); border-radius:32px; } .section-light .eyebrow{ color:var(--muted-dark); background:none; border:0; } /* ---------- SECTION BOXES ---------- The middle of the page is bleap.finance's product grid: one wide panel, then two half panels beneath it, all on a true-black document. The hero stays on the bare ground because the first block should read as the page itself; the FAQ's rule-and-divider list has its own structure and does not want a second frame; and the live rates section is a calculator whose two fields are already cards, so a panel behind them was a card on a card. The fill is bleap's own: a short vertical gradient from #232323 down to #131313, no border, no shadow. It is a gradient rather than a flat tint because a single dark grey on black has no light source and reads as a hole; falling ten values over the height of the panel gives it a lit top edge and a shaded bottom one, which is the whole effect. Tokens, not literals, because three panels read them and the nested surfaces have to move together if the fill is ever retuned. */ :root{ --box-fill:linear-gradient(180deg, #232323 0%, #131313 100%); --box-radius:24px; /* bleap's own figure, and the same on every panel whatever its size: 24px inside a card, 32px from 768 up. The wide panel used to run to 56 at the top of the range on the reasoning that 1180px holding a two-column band wants more room than a half card. True in isolation, but it pushed that panel's heading 17px right of the one below it, and a stack of panels reads as a system mainly because every heading starts on the same vertical line. One value for all three buys the rail; bleap runs it flat across their whole grid for what is presumably the same reason. */ --box-pad:clamp(24px, 2.6vw, 32px); /* The gap between the wide panel and the row, and between the two panels in it. bleap's own figure at this breakpoint. */ --box-gap:24px; /* How far the fill takes to fall from #232323 to #131313. A fixed length, not the height of the box - see .section-box below. */ --box-grad:640px; } .section-box{ /* The same colour on every panel, whatever height it happens to be. A linear-gradient is normalised to the element it paints, so #232323 lands on the top edge and #131313 on the bottom edge of EACH box independently. Three panels of three different heights therefore run the same two endpoints over three different distances and read as three slightly different greys side by side - and the wide panel's #131313 bottom edge meets the row's #232323 top edge as a visible step. Pinning the ramp to a fixed 640px measured from the top of every panel, over a #131313 base colour that carries anything past it, makes the fill identical at identical distance from the top edge on all three. Set --box-grad to a value taller than any panel to get the per-element behaviour back. */ background-color:#131313; background-image:var(--box-fill); background-repeat:no-repeat; background-size:100% var(--box-grad); border-radius:var(--box-radius); padding:var(--box-pad); /* bleap lifts a card 4px under the cursor. The transition lives on the box rather than the hover state so the card settles back down when the pointer leaves instead of snapping. */ transition:transform .4s var(--ease-soft); } /* .wrap sets its own padding, and the max-width:860px block at the foot of this sheet re-sets it at equal specificity and later in source order, so the wide panel needs the two-class selector to hold its padding on a phone. */ .wrap.section-box{ padding:var(--box-pad); } /* The gutter moves off .wrap (which is now the panel itself) and onto the section, so the panel keeps a margin from the window edge instead of bleeding into it. Same 32px the wrap uses. Panels are their own separation, so the 72px of section padding that used to do that job would read as dead ground under a card; the wide panel keeps its full distance from the hero above and hands the row below it --box-gap. */ #cards{ padding:var(--sp-8) var(--sp-6) calc(var(--box-gap) / 2); } /* ---------- THE ROW ---------- Two panels side by side under the wide one. #crypto and #trust stay real sections inside it - they are nav targets and document landmarks - so the row grid places the sections and each section hands its full height down to the panel inside it, which is what keeps the two panels the same height when one carries a list and the other does not. */ .box-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--box-gap); /* The gutter is a width reduction, not padding. .wrap is border-box, so the wide panel above measures 1180px INCLUDING its 32px gutter; giving this row the same max-width plus 32px of padding would inset it a further 28px on each side and the two left edges would not line up. Taking the gutter out of the width instead lands the row on exactly the same 1180px column as the panel above it. */ width:calc(100% - 2 * var(--sp-6)); max-width:1180px; margin:0 auto; padding:calc(var(--box-gap) / 2) 0 var(--sp-8); } .box-row > section{ padding:0; display:flex; } .box-row .section-box{ width:100%; } .box-row .section-box:hover{ transform:translateY(-4px); } /* Half the width, so the two-column bands inside collapse to one column. These are viewport media queries elsewhere in the sheet, which never fire for a 578px column on a 1440px screen - the stack has to be stated here. auto/1fr rather than two auto rows: the copy takes what it needs and the art gets the remainder, so the shorter of the two panels grows its picture to match the taller instead of leaving a band of empty fill at the bottom. Order puts the picture last in both, which is bleap's own card order: title, then description, then art. */ .box-row .section-box{ grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:var(--box-gap); } .box-row .coins-band .visual-frame, .box-row .trust-shield{ order:2; align-self:center; } .box-row .coins-band .visual-frame{ min-height:0; } /* The section heading ladder is set for a full-width block. At 48px it runs to four lines in a 514px column, so the half panels take bleap's own 32px card title instead. */ .box-row h2{ font-size:clamp(26px, 2.2vw, 32px); } .box-row .band-copy, .box-row .trust-copy p{ margin-bottom:0; } /* The art in a half panel would otherwise run the full width of the column and tower over the copy above it. The #crypto rule needs the id to outrank the min(100%, 480px) cap set for that image in the wide layout. */ .box-row .visual-frame.frameless img, .box-row #crypto .visual-frame.frameless img{ max-height:260px; width:auto; max-width:100%; margin:0 auto; } .box-row .trust-shield img{ max-width:170px; } @media (max-width:860px){ /* One column. The row is now just a stack, and it takes the phone gutter and the tighter gap bleap uses below 768. */ .box-row{ grid-template-columns:1fr; gap:16px; width:calc(100% - 40px); } #cards{ padding-left:20px; padding-right:20px; } } @media (prefers-reduced-motion:reduce){ .box-row .section-box:hover{ transform:none; } } /* ---------- SECURITY SPLIT ---------- */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center; } .visual-frame{ border-radius:24px; overflow:hidden; border:1px solid var(--line-soft); box-shadow:0 30px 60px -25px var(--visual-shadow); } .visual-frame img{width:100%; display:block;} .visual-frame.frameless{border-radius:0; overflow:visible; border:none; box-shadow:none;} .visual-frame.frameless img{width:100%; height:auto; display:block;} @media (max-width:860px){ .split{grid-template-columns:1fr;} /* Scoped to .split. Unscoped, this reached every .visual-frame on the page, including the one in the Global payments band, and pulled the art above the copy on a phone - the opposite of the order that band is now built in. */ .split .visual-frame{order:-1;} } /* ---------- COINS FEATURE BAND ---------- */ .coins-band{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .coins-band .visual-frame{border-radius:24px;} /* Every band visual gets the same vertical room, whatever shape the art is. Left to themselves these ran 266px, 659px and 401px tall, so the three sections read as three different layouts rather than one series. The image centres in that room and is capped by height as well as width, so nothing is cropped and a portrait image no longer towers over a landscape one. */ .coins-band .visual-frame{ display:flex; align-items:center; justify-content:center; min-height:var(--band-visual-h); } .coins-band .visual-frame.frameless img{ width:auto; height:auto; max-width:100%; max-height:var(--band-visual-h); margin:0 auto; } /* ---------- CLOSING CTA ---------- The glow is a very large circle, wider than the viewport, positioned so only its lower arc crosses the section. That is what makes it read as a light source rather than as a shape: at this radius the curve across the block is almost flat, so no edge is visible. It is clipped by overflow on the section, not by a smaller radius - shrinking it would bring the curvature back and it would read as a circle sitting behind the type. Monochrome, deliberately. The reference runs a blue-to-navy glow here, but this sheet is one value ladder from --paper to true black with no hue in it, so a coloured glow would be the only colour on the page. Everything except the three stops is structural: put hues on --cta-orb-a/b/c and the section takes them with nothing else changed. */ :root{ --cta-orb-a:rgba(238,241,245,0.30); --cta-orb-b:rgba(255,255,255,0.07); --cta-orb-c:rgba(255,255,255,0); --cta-orb-size:1600px; } .cta{ position:relative; overflow:hidden; isolation:isolate; /* No padding at the foot. The art is meant to stand ON the hairline the footer draws along its top edge rather than float above it, so the section has to end exactly where the picture does - any bottom padding here becomes a gap between the phone and the line it should be resting on. */ padding:var(--sp-10) var(--sp-6) 0; } .cta-orb{ position:absolute; z-index:-1; width:var(--cta-orb-size); height:var(--cta-orb-size); left:50%; top:0; transform:translate(-50%, -72%); border-radius:50%; background:linear-gradient(180deg, var(--cta-orb-a) 0%, var(--cta-orb-b) 51%, var(--cta-orb-c) 100%); pointer-events:none; } .cta-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:1180px; margin:0 auto; } /* 32px on a narrow measure, so it breaks to three lines the way a spoken sentence does. Bold rather than the regular weight the reference sets its closing line in: this is the last thing on the page and the only prompt left, so it takes the same 700 the section headings above it carry. */ .cta-title{ font-size:clamp(26px, 2.6vw, 32px); font-weight:var(--wt-h2); line-height:1.25; letter-spacing:-0.012em; max-width:18ch; margin-bottom:var(--sp-6); } /* The store badges, not a pill. This is the foot of the page, where the next step is the download itself rather than a scroll back up to find it - and the badges are the mark people look for. .store-badge is the hero's own class, so the height and the Play badge's transparent-margin correction come for free and the two pairs stay identical. */ .cta-actions{ display:flex; align-items:center; justify-content:center; gap:var(--sp-4); flex-wrap:wrap; } .cta-art{ width:100%; max-width:340px; margin-top:var(--sp-9); margin-bottom:0; font-size:0; } .cta-art img{ width:100%; height:auto; display:block; } @media (max-width:860px){ .cta{ padding:var(--sp-9) 20px 0; } :root{ --cta-orb-size:900px; } .cta-art{ margin-top:var(--sp-7); } } /* ---------- GLOBAL PAYMENTS BAND ---------- The 480px floor above was set when this panel held a portrait render and three bands had to agree on one height. Neither is true now: #crypto is a half panel in the row below and already zeroes the floor, so the rule serves this band alone - and the art here is landscape, 1100x673, which needs 324px at this column width. The floor was holding the panel 156px taller than its own contents, all of it empty fill under the globe. Zeroed, so the band is as tall as the taller of its two columns and nothing else. */ #cards .visual-frame{ min-height:0; } /* A landscape image in an even split reads small: 530px of art inside an 1180px panel left the globe looking like a thumbnail beside its own heading. The art takes the larger share instead. 1.2, not more, because the copy column is the binding constraint at the other end - .band-copy is capped at 46ch, which sets about 480px at 17px, and 485 is that measure with nothing to spare. Widening the art past this starts breaking the paragraph into a narrower column than it was written for. Scoped to min-width, not left open: #cards .section-box is an id plus a class, which outranks the .coins-band single-column rule in the max-width:860px block further down the sheet. Unscoped, this would keep two columns on a phone and wedge a 250px globe beside 250px of type. */ @media (min-width:861px){ #cards .section-box{ grid-template-columns:1fr 1.2fr; gap:48px; /* Copy anchored to the top edge, the way a bleap card reads: title and description first, art under them. .coins-band centres both columns, which floated the wording in the middle of the panel because the art is the taller of the two. start puts both on the top edge and lets the art run down from there. */ align-items:start; } /* The globe was drawing at the full width of its column, which made it exactly as tall as the panel is deep - it defines the panel height, so it met the top and bottom padding with nothing to spare and read as crowded. Capped, it sits back from its column and the panel closes to match. The id is needed to outrank the .coins-band max-width:100%. */ #cards .visual-frame.frameless img{ max-width:440px; } /* A little more room top and bottom. Vertical only - the horizontal pad stays tied to --box-pad so this panel's heading keeps landing on the same left rail as the two below it. */ #cards .section-box{ padding:48px var(--box-pad); } } @media (max-width:860px){ .coins-band{grid-template-columns:1fr;} /* The art no longer jumps above the copy when the band stacks. Both bands now lead with the heading in source order - the wide one because its heading belongs on the same left rail as every other heading on the page, the half one because that is the card order it was built in - and a phone should read them in that same order rather than opening on a picture. Source order is the order now; there is no rule here. */ /* One column, so the visual has the full width and needs less height. */ :root{ --band-visual-h:340px; } } /* ---------- TESTIMONIALS ---------- */ .avatar{ width:34px; height:34px; border-radius:50%; background:var(--avatar-bg); display:flex; align-items:center; justify-content:center; font-family:var(--body); font-size:13px; font-weight:600; color:var(--avatar-text); } /* ---------- LANGUAGE ---------- A flag-and-code pill in the header, with a listbox under it. It used to be a styled face over a real