/* BelloPay — black and blue. Loaded after styles.css. Palette (BelloPay design system): blue #2B63F6 (actions, balance, active tab), cyan #38D6E8 (money: top-up, credits), royal #1C46C8 (second blue in banners), sky #6FA0FF (history, referrals), on near-black navy #05080F (dark) or cool white #F3F6FC (light). The card face is drawn in CSS: deep navy #0B1A4A, a royal disc and a cyan band. Bold rounded type (Manrope 700), round buttons. The --bp-* names are kept so the rules below still apply: --bp-turq is cyan, --bp-coral royal, --bp-sun sky, --bp-ink navy. Only CSS: the markup, element ids and app.js are shared with every brand, so every action works as for LETO; what changes is the look and where things sit. */ :root { /* --- accent ------------------------------------------------------------ */ --accent: rgb(43, 99, 246); /* #2B63F6 buttons, rings, indicators */ --accent-500: rgb(111, 160, 255); /* brand text on the dark theme */ --accent-700: rgb(31, 79, 216); /* brand text on the light theme */ --accent-a12: rgba(43, 99, 246, 0.16); /* selected and pressed tints */ --accent-a22: rgba(43, 99, 246, 0.26); --accent-ring: rgba(43, 99, 246, 0.8); --accent-contrast: rgb(255, 255, 255); /* text and icons on an --accent fill */ --card-face-base: rgb(11, 26, 74); /* the card face, drawn in CSS below */ --bp-card-mid: rgb(28, 70, 200); --bp-turq: rgb(56, 214, 232); /* cyan: money */ --bp-coral: rgb(28, 70, 200); /* royal blue */ --bp-sun: rgb(111, 160, 255); /* sky blue */ --bp-ink: rgb(5, 8, 15); /* near-black navy, text on cyan and sky */ /* palm silhouette: trunk and seven fronds, 100x120; cyan for the navy card face, white for the banners */ --bp-palm-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill='%2338D6E8' fill-opacity='.55' d='M52 118C50 90 46 70 50 44L55 44C52 70 57 92 60 118ZM52 42C40 28 22 26 6 34C22 30 36 34 52 44ZM52 42C64 26 82 24 98 34C82 30 68 34 52 44ZM52 42C44 22 30 10 14 8C30 14 42 26 50 44ZM52 42C60 22 74 10 90 8C74 14 62 26 54 44ZM52 42C50 26 54 12 60 2C58 14 56 28 54 44ZM52 42C38 40 26 50 20 64C30 52 40 46 52 46ZM52 42C66 40 78 50 84 64C74 52 64 46 52 46Z'/%3E%3C/svg%3E"); --bp-palm-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill='%23FFFFFF' fill-opacity='.28' d='M52 118C50 90 46 70 50 44L55 44C52 70 57 92 60 118ZM52 42C40 28 22 26 6 34C22 30 36 34 52 44ZM52 42C64 26 82 24 98 34C82 30 68 34 52 44ZM52 42C44 22 30 10 14 8C30 14 42 26 50 44ZM52 42C60 22 74 10 90 8C74 14 62 26 54 44ZM52 42C50 26 54 12 60 2C58 14 56 28 54 44ZM52 42C38 40 26 50 20 64C30 52 40 46 52 46ZM52 42C66 40 78 50 84 64C74 52 64 46 52 46Z'/%3E%3C/svg%3E"); /* --- navy neutrals (dark) and cool white (light) ------------------------- */ --neutral-0: rgb(255, 255, 255); --neutral-25: rgb(250, 251, 255); --neutral-50: rgb(243, 246, 252); --neutral-150: rgb(227, 234, 247); --neutral-200: rgb(214, 223, 238); --neutral-400: rgb(154, 168, 199); --neutral-500: rgb(122, 138, 172); --neutral-600: rgb(70, 83, 111); --neutral-700: rgb(34, 48, 77); --neutral-800: rgb(21, 32, 56); --neutral-850: rgb(14, 22, 40); --neutral-900: rgb(10, 16, 32); --neutral-950: rgb(5, 8, 15); --divider: rgba(154, 168, 199, .14); --sheet-fill: var(--neutral-900); --kyc-later-fill: var(--neutral-800); --benefits-fill: var(--neutral-850); --toggle-icon-idle: var(--neutral-400); --color-state-success: var(--bp-turq); /* --- type: bold and rounded ---------------------------------------------- */ --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tracking-tight: -0.02em; --type-body-weight: 600; /* --- shape: LETO radii, round buttons, a hairline on every panel ---------- */ --radius-pill: 999px; --hairline: inset 0 0 0 1px var(--color-border-default); --shadow-card: 0 20px 40px -14px rgba(43, 99, 246, .45); } :root[data-theme="light"], .light { --color-bg-base: var(--neutral-50); --color-surface-default: var(--neutral-0); --color-surface-elevated: var(--neutral-50); --color-surface-nav-active: var(--accent); --color-icon-nav-active: var(--accent-contrast); --color-state-success: rgb(8, 115, 95); --divider: rgba(7, 12, 26, .08); --sheet-fill: var(--neutral-0); --shadow-card: 0 18px 34px -14px rgba(11, 26, 74, .45); } /* every surface block gets a soft navy shadow in the light theme */ :root[data-theme="light"] :is(.panel, #card-notice, #otp-panel, #tx-open, #reqs.open, .docs, #hist-list, .usecase-panel > .usecase, #pf-verify, .choicex, .payopt) { box-shadow: 0 12px 30px -16px rgba(11, 26, 74, .16); } /* ---- BelloPay look (reference screen 2026-10-23, the exact one) -------------- Raster art cut from the reference: the card face (the baked "••• 8716" is painted out, the app draws the real last four), the header lockup and the backdrop (palm fronds and blue brush strokes, the UI wiped). The rest is CSS: glass panels with a blue hairline, an azure gradient top-up pill, four tiles (added by the small script at the end of the page), captioned tabs. */ :root { --bp-azure: rgb(47, 140, 255); --bp-azure-text: rgb(77, 166, 255); --bp-glass: rgba(10, 16, 32, .74); --bp-edge: rgba(111, 160, 255, .22); --bp-card-art: var(--card-face-image, url("/brand/card-face.webp")); --bp-backdrop: url("data:image/webp;base64,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"); --bp-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); } html, body { background: var(--bp-backdrop) center top / cover no-repeat, rgb(5, 8, 15); background-attachment: fixed; } /* ---- type ----------------------------------------------------------------- */ .balance-value, .pf-name, .flow-title, .sheet h2, .sheet-title, .usecase-name, .txrow-t, .otp-heading h3, .docs .docs-t, .cn-t, .ref-banner .rb-t { font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.02em; } .primary { font-weight: 700; font-size: 16px; } /* ---- header ----------------------------------------------------------------- */ .brand-logo { height: 36px; width: auto; } .hd-lang:not(:empty), .hd-theme { background: var(--bp-glass); box-shadow: inset 0 0 0 1px var(--bp-edge); } .hd-theme-btn.active { background: rgba(43, 99, 246, .18); color: var(--bp-azure-text); box-shadow: inset 0 0 0 1.5px var(--bp-azure), 0 0 14px -2px rgba(47, 140, 255, .6); } /* no language or theme switches in the header: dark theme, Telegram's language */ .hd-cluster { display: none; } /* ---- bank card: the reference art, a glowing azure edge ---------------------- */ .hero-card { aspect-ratio: 353 / 206; border-radius: 16px; background: var(--bp-card-art) center / 100% 100% no-repeat, rgb(5, 8, 15); box-shadow: 0 0 0 1.5px rgba(90, 160, 255, .9), 0 0 26px -2px rgba(47, 140, 255, .6); } /* VISA, the lockup, the caption, contactless and Mastercard are in the art */ .hero-card .cf-visa, .hero-card .cf-foot, .hero-card .cf-wallets { display: none; } .cf-pan { color: rgba(255, 255, 255, .92); font-size: 13px; letter-spacing: .06em; } /* the flip hint moves up into the top row, clear of the chip in the art */ .hero-card .cf-flip-hint { left: auto; right: 34%; top: 20px; background: rgba(5, 8, 15, .55); } /* ---- the balance panel: glass, hairline, a faint glow ---------------------- */ #balance-panel { position: relative; background: var(--bp-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--bp-edge), 8px 10px 28px -16px rgba(47, 140, 255, .7); } #balance-head .bh-k, #balance-head .bh-pan { color: rgb(184, 195, 220); } #balance { font-size: 36px; } #balance .cents { color: rgb(154, 168, 199); } #balance-panel.bp-masked #balance { filter: blur(10px); } /* a notice (not active / activating / being issued) takes the eye's place */ #balance-panel:has(#card-notice:not(.hidden)) .bp-eye { display: none; } #act-topup.bp-slide > span#act-topup-label { font-size: 15px; line-height: 19px; } .bp-eye { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 0; color: rgb(184, 195, 220); background: rgba(21, 32, 56, .8); box-shadow: inset 0 0 0 1px var(--bp-edge); } .bp-eye svg { width: 20px; height: 20px; } /* no "Balance •••• 1234 >" line: the amount leads the panel, the eye sits beside it */ :root[data-brand-script] #balance-head { display: none; } #balance-panel .bp-eye { top: 18px; } /* no Profile tab: the Settings tile still opens the profile. Native controls that theme.js replaces are hidden under :root[data-brand-script] only, which index.html clears when the script fails to load: such a page keeps every action. */ :root[data-brand-script] .tab[data-tab="profile"] { display: none; } /* top-up: the reference button, a navy glass pill with a glowing azure edge, a blue wallet tile on the left, the label after it, a chevron on the right */ #act-topup { position: relative; height: 58px; padding: 0 48px 0 8px; gap: 16px; justify-content: flex-start; border-radius: var(--radius-pill); background: radial-gradient(140px 70px at 12% 50%, rgba(47, 140, 255, .28), transparent 70%), linear-gradient(90deg, rgb(8, 26, 70), rgb(7, 18, 46) 60%, rgb(9, 28, 72)); color: #fff; font: 600 16px/20px var(--font-ui); box-shadow: inset 0 0 0 1.5px rgba(60, 140, 255, .95), 0 0 20px -2px rgba(47, 140, 255, .6); } #act-topup > svg { display: none; } #act-topup::before { content: ""; flex-shrink: 0; width: 50px; height: 42px; border-radius: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h12.5a2.5 2.5 0 0 1 2.5 2.5v0a2.5 2.5 0 0 1-2.5 2.5H16'/%3E%3Cpath d='M6 6V5.2A1.7 1.7 0 0 1 8.2 3.6L17 6'/%3E%3C/svg%3E") center / 24px no-repeat, linear-gradient(135deg, rgb(36, 146, 255), rgb(43, 99, 246)); box-shadow: 0 0 14px -2px rgba(47, 140, 255, .75); } #act-topup::after { content: ""; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--bp-chev) center / contain no-repeat; opacity: .85; } #act-topup:active { background: linear-gradient(90deg, rgb(12, 36, 92), rgb(9, 24, 60)); } /* four tiles; the original controls stay and do the work */ .bp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: var(--space-12); } .bp-tile { min-height: 84px; padding: 12px 4px 10px; border: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(14, 22, 40, .8); box-shadow: inset 0 0 0 1px var(--bp-edge); color: rgb(230, 236, 248); font: 600 11px/13px var(--font-ui); text-align: center; hyphens: auto; } .bp-tile svg { width: 26px; height: 26px; color: var(--bp-azure-text); flex-shrink: 0; } .bp-tile:active { background: rgba(43, 99, 246, .16); } /* the card cannot use it right now (not active yet, frozen, no 3DS codes): the muted ink of the demo's disabled KYC button */ .bp-tile:disabled, .bp-tile:disabled svg { color: rgb(90, 102, 132); pointer-events: none; } :root[data-theme="light"] .bp-tile:disabled, :root[data-theme="light"] .bp-tile:disabled svg { color: var(--bp-ink-3); } /* card details and 3DS codes live in the sheet now (the script borrows them) */ :root[data-brand-script] #balance-panel > #reqs, :root[data-brand-script] #balance-panel > #otp-panel { display: none; } .bp-tile.bp-wide { grid-column: span 2; min-height: 56px; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 12px; text-align: left; font-size: 12.5px; line-height: 15px; } .bp-tile.bp-wide svg { width: 24px; height: 24px; } .bp-ref { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 14px; text-align: left; color: #fff; background: radial-gradient(circle at 100% 0, rgba(47, 140, 255, .45) 0 70px, transparent 140px), linear-gradient(90deg, rgba(20, 44, 110, .9), rgba(14, 22, 40, .9)); box-shadow: inset 0 0 0 1px rgba(90, 170, 255, .5), 0 0 18px -6px rgba(47, 140, 255, .6); } .bp-ref-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgb(26, 160, 255), rgb(43, 99, 246)); color: #fff; } .bp-ref-ico svg { width: 22px; height: 22px; } .bp-ref-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .bp-ref-t { font: 700 14px/18px var(--font-ui); } .bp-ref-s { font: 500 12px/15px var(--font-ui); color: rgb(184, 195, 220); } .bp-ref-s b { color: var(--bp-azure-text); font-weight: 700; } .bp-ref-chev svg { width: 18px; height: 18px; color: rgb(184, 195, 220); } .bp-block { grid-column: 1 / -1; height: 52px; border: 0; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(90deg, rgb(229, 56, 79), rgb(196, 30, 58)); color: #fff; font: 700 15px/20px var(--font-ui); box-shadow: 0 8px 22px -8px rgba(229, 56, 79, .7), inset 0 1px 0 rgba(255, 255, 255, .2); } .bp-block svg { width: 20px; height: 20px; } .bp-block-quiet { width: fit-content; margin: var(--space-12) auto 0; padding: 10px 16px; min-height: 44px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: rgb(232, 120, 135); font: 600 13px/16px var(--font-ui); box-shadow: inset 0 0 0 1px rgba(232, 120, 135, .28); } .bp-block-quiet svg { width: 16px; height: 16px; } .bp-block-quiet[hidden] { display: none; } .bp-block-quiet:active { background: rgba(232, 120, 135, .1); } /* issue screen: Tariffs and Rules tiles, and their sheets */ .bp-legal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--space-12); } .bp-legal .bp-tile { grid-column: auto; justify-content: center; font-size: 14px; } .bp-rows { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: rgba(14, 22, 40, .9); box-shadow: inset 0 0 0 1px var(--bp-edge); } .bp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; } .bp-row + .bp-row { border-top: 1px solid rgba(111, 160, 255, .12); } .bp-row-k { color: rgb(154, 168, 199); font: 500 14px/18px var(--font-ui); } .bp-row-v { color: #fff; font: 700 15px/18px var(--font-ui); text-align: right; } .bp-row-v small { display: block; margin-top: 2px; color: rgb(122, 138, 172); font: 500 11px/14px var(--font-ui); } .bp-rules { margin: 0 0 var(--space-16); padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .bp-rules li { position: relative; padding: 12px 14px 12px 38px; border-radius: 14px; background: rgba(14, 22, 40, .9); box-shadow: inset 0 0 0 1px var(--bp-edge); color: rgb(220, 228, 244); font: 500 14px/19px var(--font-ui); } .bp-rules li::before { content: ""; position: absolute; left: 15px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--bp-azure); box-shadow: 0 0 8px rgba(47, 140, 255, .8); } .bp-link { width: 100%; margin-top: 10px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(43, 99, 246, .14); box-shadow: inset 0 0 0 1px rgba(90, 170, 255, .45); color: var(--bp-azure-text); font: 600 14px/18px var(--font-ui); text-align: left; } .bp-link svg { width: 18px; height: 18px; flex-shrink: 0; } /* the sheet, as a glass pop-up */ .sheet { background: rgb(10, 16, 32); box-shadow: inset 0 1px 0 rgba(111, 160, 255, .35), 0 -12px 40px -10px rgba(47, 140, 255, .35); } #sheet-body.bp-pop #reqs-body { display: block; } #sheet-body.bp-pop #otp-panel { display: block !important; margin: 0; padding: 0; border-top: 0; background: none; box-shadow: none; } #sheet-body.bp-pop .req-field, #sheet-body.bp-pop .otp-row { background: rgba(14, 22, 40, .9); box-shadow: inset 0 0 0 1px var(--bp-edge); border-radius: 14px; } #sheet-body.bp-pop .rf-copy, #sheet-body.bp-pop .otp-copy { color: var(--bp-azure-text); } .primary.danger { background: linear-gradient(90deg, rgb(229, 56, 79), rgb(196, 30, 58)); color: #fff; } /* every main button gets the top-up pill's azure gradient */ .primary:not(.danger):not(.ghosted):not(.ghost-plain):not(:disabled) { background: linear-gradient(90deg, rgb(26, 160, 255), rgb(43, 99, 246)); color: #fff; box-shadow: 0 8px 24px -8px rgba(30, 140, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .22); } :root[data-brand-script] #wallet .home-sheet { display: none; } /* ---- tab bar: the slide from the first versions ------------------------------- A floating bar; the active tab grows into a blue pill with its caption (the tab's own translated aria-label), the others are icons only. */ .tabbar { background: rgba(10, 16, 32, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 28px; box-shadow: inset 0 0 0 1px var(--bp-edge), 0 16px 34px -14px rgba(0, 0, 0, .7); gap: 6px; } .tab { flex: 1 1 0; gap: 8px; color: rgba(255, 255, 255, .62); transition: flex-grow .25s ease, background-color var(--t-state), color var(--t-state); } .tab.active { flex-grow: 2.2; background: linear-gradient(90deg, rgb(26, 160, 255), rgb(43, 99, 246)); color: #fff; box-shadow: 0 6px 18px -6px rgba(30, 140, 255, .7); } .tab.active::after { content: attr(aria-label); font: 700 13px/16px var(--font-ui); white-space: nowrap; } /* icon cut-outs are drawn in the surface colour; match them to each fill */ .tab svg [fill^="var(--color-surface-default)"] { fill: rgb(10, 16, 32); } .tab.active svg [fill^="var(--color-surface-default)"] { fill: rgb(36, 120, 250); } /* ---- profile and referrals ------------------------------------------------- */ .pf-id-chip .pfc-tag { background: var(--accent); color: #fff; } .panel:not(#balance-panel), .docs, #hist-list, #pf-verify { background: var(--bp-glass); box-shadow: inset 0 0 0 1px var(--bp-edge); } /* referral banner: a plain dark field so the copy reads; the card art (chip, VISA, lockup) stays on the card. Glow and palms sit right, away from text. */ .ref-banner { background: linear-gradient(100deg, rgb(6, 10, 22) 0 45%, rgba(8, 16, 38, .88) 68%, rgba(18, 52, 140, .55) 100%), radial-gradient(circle at 100% 0, rgba(47, 140, 255, .55) 0 60px, transparent 150px), var(--bp-backdrop) center 88% / 140% auto no-repeat, rgb(6, 10, 22); box-shadow: inset 0 0 0 1px rgba(90, 170, 255, .55), 0 0 22px -6px rgba(47, 140, 255, .55); } .ref-banner .rb-t { color: #fff; font-size: 23px; line-height: 28px; } /* three stats share the row instead of running off the right edge */ .ref-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ref-stats .ref-stat { min-width: 0; padding: 12px; background: var(--bp-glass); box-shadow: inset 0 0 0 1px var(--bp-edge); } .ref-stats .ref-stat > :first-child { font-size: 11.5px; line-height: 14px; -webkit-hyphens: auto; hyphens: auto; } .ref-stats .rs-v { font-size: 19px; } .ref-banner .rb-s { color: rgb(196, 206, 228); } .ref-banner .rb-t b { color: var(--bp-azure-text); } .ref-banner .rb-bg, .ref-banner .rb-glow { display: none; } /* ---- support ------------------------------------------------------------------- */ .support-head .sh-ava { background: none; } .support-head .sh-ava img { width: 48px; } .chat-msg.customer .chat-bubble { background: var(--accent); } /* ---- start page (no card yet), reference screens 2026-10-23 ----------------- The card on top, then the pitch, where the card works, use cases, how to get it, fees, security, FAQ and support. Illustrations and service icons are cut from the reference; all copy is live text. The app's own issue panel is hidden: the big button presses its "issue" button, so the payment flow is the app's. */ :root[data-brand-script] #empty #usecase-block, :root[data-brand-script] #empty .bp-legal { display: none !important; } #empty .issue-stage .hero-card::before { content: "•••• 5564"; position: absolute; left: 20px; top: 18px; z-index: 3; color: rgba(255, 255, 255, .92); font: 600 13px/20px var(--font-data); letter-spacing: .06em; } .bp-land { display: flex; flex-direction: column; gap: 26px; margin-top: 18px; padding-bottom: 8px; color: #fff; } .bp-land h2 { margin: 0; font: 700 19px/24px var(--font-ui); letter-spacing: -.01em; } .bp-az { color: rgb(56, 170, 255); } .bp-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .bp-more { border: 0; background: none; padding: 6px 0; color: rgb(77, 166, 255); font: 600 13px/16px var(--font-ui); display: inline-flex; align-items: center; gap: 4px; } .bp-more svg { width: 14px; height: 14px; } .bp-glass { background: rgba(12, 20, 40, .78); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .2); border-radius: 16px; } /* hero */ .bp-hero h1 { margin: 0; font: 800 28px/33px var(--font-ui); letter-spacing: -.02em; } .bp-hero h1 span { white-space: nowrap; } .bp-hero p { margin: 10px 0 0; color: rgb(184, 195, 220); font: 500 15px/21px var(--font-ui); } .bp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .bp-chip { height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; background: rgba(12, 20, 40, .78); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .22); color: rgb(220, 228, 244); font: 500 13.5px/16px var(--font-ui); } .bp-chip i { width: 7px; height: 7px; border-radius: 50%; background: rgb(61, 219, 120); box-shadow: 0 0 8px rgba(61, 219, 120, .8); } .bp-cta { margin-top: 18px; width: 100%; height: 58px; border: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(90deg, rgb(26, 160, 255), rgb(43, 99, 246)); color: #fff; font: 700 16px/20px var(--font-ui); box-shadow: 0 0 0 1px rgba(120, 190, 255, .6), 0 10px 30px -8px rgba(30, 140, 255, .85); } .bp-cta svg { width: 22px; height: 22px; } .bp-cta .bp-arr { width: 18px; height: 18px; opacity: .85; } /* where the card works */ .bp-svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .bp-svc > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 2px 10px; border-radius: 14px; background: rgba(12, 20, 40, .78); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .18); color: rgb(214, 222, 240); font: 500 11.5px/14px var(--font-ui); text-align: center; } .bp-svc img { width: 40px; height: 40px; display: block; } .bp-svc .bp-svc-more { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; font: 300 28px/1 var(--font-ui); } /* banners */ .bp-banner { position: relative; overflow: hidden; min-height: 104px; padding: 18px 18px; display: flex; flex-direction: column; justify-content: center; border-radius: 18px; background: rgba(8, 16, 36, .92); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .28), 0 0 24px -10px rgba(47, 140, 255, .6); } .bp-banner img { position: absolute; right: 0; top: 0; height: 100%; width: auto; pointer-events: none; } .bp-banner > div { position: relative; max-width: 62%; } .bp-banner b { display: block; font: 800 22px/25px var(--font-ui); letter-spacing: -.01em; } .bp-banner small { display: block; margin-top: 8px; color: rgb(196, 206, 228); font: 500 13px/17px var(--font-ui); } /* use cases */ .bp-uses { display: flex; flex-direction: column; gap: 10px; } .bp-use { display: flex; gap: 14px; align-items: flex-start; padding: 14px; } .bp-ico { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: rgb(77, 176, 255); background: linear-gradient(160deg, rgba(43, 99, 246, .38), rgba(14, 30, 70, .9)); box-shadow: inset 0 0 0 1px rgba(90, 170, 255, .45), 0 0 16px -4px rgba(47, 140, 255, .6); } .bp-ico svg { width: 24px; height: 24px; } .bp-use b { display: block; font: 700 15px/19px var(--font-ui); } .bp-use > div > span { display: block; margin-top: 4px; color: rgb(170, 182, 208); font: 500 13px/17px var(--font-ui); } /* steps */ .bp-steps { display: flex; flex-direction: column; gap: 10px; } .bp-step { display: flex; gap: 14px; align-items: center; padding: 14px; } .bp-num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, rgb(36, 146, 255), rgb(43, 99, 246)); color: #fff; font: 800 18px/1 var(--font-ui); box-shadow: 0 0 14px -2px rgba(47, 140, 255, .8); } .bp-step b { display: block; font: 700 14.5px/18px var(--font-ui); } .bp-step > div > span { display: block; margin-top: 3px; color: rgb(170, 182, 208); font: 500 12.5px/16px var(--font-ui); } .bp-illu { display: block; width: 100%; max-width: 360px; margin: -6px auto -10px; } /* fees */ .bp-fees { padding: 0 16px; } .bp-fees > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; } .bp-fees > div + div { border-top: 1px solid rgba(111, 160, 255, .12); } .bp-fees span { color: rgb(170, 182, 208); font: 500 14.5px/18px var(--font-ui); } .bp-fees b { font: 700 15px/18px var(--font-ui); } .bp-fees b.ok { color: rgb(61, 219, 140); } /* security */ .bp-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bp-sec > div { padding: 16px 10px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; } .bp-sec svg { width: 24px; height: 24px; color: rgb(56, 170, 255); margin-bottom: 6px; filter: drop-shadow(0 0 6px rgba(56, 170, 255, .6)); } .bp-sec b { font: 700 14px/18px var(--font-ui); } .bp-sec span { color: rgb(170, 182, 208); font: 500 12.5px/16px var(--font-ui); } /* FAQ */ .bp-faq { display: flex; flex-direction: column; gap: 8px; } .bp-faq details { border-radius: 14px; background: rgba(12, 20, 40, .78); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .22); } .bp-faq summary { list-style: none; cursor: pointer; min-height: 46px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 14px/18px var(--font-ui); } .bp-faq summary::-webkit-details-marker { display: none; } .bp-faq summary::after { content: "+"; flex-shrink: 0; color: rgb(56, 170, 255); font: 400 24px/1 var(--font-ui); transition: transform .2s ease; } .bp-faq details[open] summary::after { transform: rotate(45deg); } .bp-faq details p { margin: 0; padding: 0 14px 14px; color: rgb(184, 195, 220); font: 500 13.5px/19px var(--font-ui); } /* support */ .bp-help { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; } .bp-help b { display: block; font: 700 15px/19px var(--font-ui); white-space: nowrap; } .bp-help span { display: block; margin-top: 4px; color: rgb(77, 166, 255); font: 500 12.5px/16px var(--font-ui); } .bp-help button { flex-shrink: 0; height: 46px; padding: 0 16px; border: 0; border-radius: 14px; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgb(36, 146, 255), rgb(43, 99, 246)); color: #fff; font: 700 14px/18px var(--font-ui); box-shadow: 0 0 16px -4px rgba(47, 140, 255, .8); } .bp-help button svg { width: 18px; height: 18px; } /* start page, third reference screen: four promo cards and a closing CTA. Travel and shopping are photos cut from the reference; the subscriptions and "one card" pictures are composed from the card art and service icons. */ .bp-promos { display: flex; flex-direction: column; gap: 14px; } .bp-promo { position: relative; overflow: hidden; min-height: 300px; border-radius: 20px; display: flex; flex-direction: column; justify-content: flex-end; background: rgb(6, 12, 28); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .3), 0 0 26px -12px rgba(47, 140, 255, .7); } .bp-promo-art { position: absolute; inset: 0 0 34% 0; overflow: hidden; } .bp-promo-art > img.bp-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; } .bp-promo:nth-child(2) .bp-photo { object-position: 90% 70%; } .bp-promo-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 12, 28, 0) 45%, rgb(6, 12, 28) 100%); } .bp-promo-txt { position: relative; padding: 0 18px 18px; } .bp-promo-txt b { display: block; font: 800 22px/26px var(--font-ui); letter-spacing: -.01em; } .bp-promo-txt span { display: block; margin-top: 8px; color: rgb(184, 195, 220); font: 500 13.5px/18px var(--font-ui); } /* composed pictures */ .bp-promo-art.bp-comp { background: var(--bp-backdrop) center 92% / 160% auto no-repeat, radial-gradient(circle at 70% 30%, rgba(47, 140, 255, .45), transparent 60%), rgb(8, 18, 44); } .bp-tilt { position: absolute; width: 62%; aspect-ratio: 353 / 206; border-radius: 12px; background: var(--bp-card-art) center / 100% 100% no-repeat; box-shadow: 0 0 0 1.5px rgba(90, 160, 255, .9), 0 0 26px -2px rgba(47, 140, 255, .7); } .bp-comp-subs .bp-tilt { left: 6%; top: 28%; transform: rotate(-12deg); } .bp-apps { position: absolute; right: 7%; top: 6%; display: flex; flex-direction: column; gap: 7px; transform: rotate(8deg); } .bp-apps img { width: 38px; height: 38px; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); } .bp-comp-one .bp-tilt { width: 78%; left: 11%; top: 16%; transform: rotate(-9deg); } .bp-comp-one::before { content: ""; position: absolute; left: 20%; right: 20%; top: 30%; height: 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 140, 255, .55), transparent); filter: blur(10px); } /* closing CTA */ .bp-ready { padding: 20px 18px 18px; border-radius: 20px; background: radial-gradient(circle at 100% 0, rgba(90, 120, 255, .55), transparent 60%), linear-gradient(135deg, rgb(20, 52, 140), rgb(10, 22, 60)); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .5), 0 0 28px -10px rgba(47, 140, 255, .8); } .bp-ready b { display: block; font: 800 22px/26px var(--font-ui); } .bp-ready > span { display: block; margin-top: 8px; color: rgb(200, 212, 238); font: 500 13.5px/18px var(--font-ui); } .bp-ready .bp-cta { margin-top: 16px; height: 52px; border-radius: 14px; font-size: 15px; } /* payment-method sheet, reference screen: close button, glass rail cards with logo, ticked points and an illustration, azure Continue with an arrow disc */ #sheet-body.bp-paysheet { position: relative; } #sheet-body.bp-paysheet .sheet-title { padding-right: 48px; font: 800 21px/26px var(--font-ui); color: #fff; text-align: left; } #sheet-body.bp-paysheet .sheet-sub { text-align: left; color: rgb(154, 168, 199); font: 500 14px/18px var(--font-ui); margin-bottom: 14px; } .bp-x { position: absolute; right: 0; top: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(21, 32, 56, .9); color: rgb(200, 212, 238); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .25); } .bp-x svg { width: 18px; height: 18px; } #sheet-body.bp-paysheet .payopt { position: relative; overflow: hidden; width: 100%; min-height: 116px; margin: 0 0 12px; padding: 16px 16px 16px 14px; display: flex; align-items: flex-start; gap: 12px; text-align: left; border: 0; border-radius: 18px; background: radial-gradient(160px 110px at 88% 70%, rgba(47, 140, 255, .32), transparent 70%), linear-gradient(135deg, rgba(14, 26, 60, .95), rgba(8, 14, 32, .95)); box-shadow: inset 0 0 0 1px rgba(90, 150, 255, .4); } #sheet-body.bp-paysheet .payopt.active { background: radial-gradient(170px 120px at 88% 70%, rgba(47, 140, 255, .45), transparent 70%), linear-gradient(135deg, rgba(18, 38, 92, .98), rgba(9, 18, 44, .98)); box-shadow: inset 0 0 0 1.5px rgb(61, 139, 255), 0 0 22px -4px rgba(47, 140, 255, .75); } #sheet-body.bp-paysheet .payopt-tile { flex-shrink: 0; width: 46px; height: 46px; border-radius: 0; background: none !important; box-shadow: none; display: grid; place-items: center; } #sheet-body.bp-paysheet .payopt-tile svg { width: 44px; height: 44px; } .bp-pcol { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } #sheet-body.bp-paysheet .payopt-t { color: #fff; font: 800 17px/22px var(--font-ui); } #sheet-body.bp-paysheet .payopt-rate { color: rgb(154, 168, 199); font: 500 12px/14px var(--font-ui); } .bp-points { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .bp-points span { display: flex; align-items: center; gap: 7px; color: rgb(200, 212, 238); font: 500 13px/16px var(--font-ui); } .bp-points svg { width: 13px; height: 13px; flex-shrink: 0; color: rgb(56, 214, 232); } .bp-part { position: absolute; right: -6px; bottom: -6px; width: 104px; height: 84px; pointer-events: none; opacity: .95; } .bp-points span { position: relative; z-index: 1; text-shadow: 0 1px 6px rgba(5, 8, 15, .9); } .bp-part svg { width: 100%; height: 100%; display: block; } #sheet-body.bp-paysheet .payopt-radio { position: absolute; z-index: 2; right: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 2px rgba(150, 175, 220, .7); color: transparent; } #sheet-body.bp-paysheet .payopt.active .payopt-radio { background: linear-gradient(135deg, rgb(36, 146, 255), rgb(43, 99, 246)); box-shadow: 0 0 12px -2px rgba(47, 140, 255, .9); color: #fff; } #sheet-body.bp-paysheet .payopt-radio svg { width: 16px; height: 16px; } #sheet-body.bp-paysheet .promo-label { color: rgb(184, 195, 220); font: 500 14px/18px var(--font-ui); } #sheet-body.bp-paysheet .promo-entry { border-radius: 14px; background: rgba(14, 22, 40, .9); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .2); } #sheet-body.bp-paysheet .promo-apply { color: rgb(77, 166, 255); background: rgba(43, 99, 246, .16); border-radius: 12px; } #sheet-body.bp-paysheet #method-go { position: relative; height: 58px; border-radius: 999px; font: 700 17px/20px var(--font-ui); box-shadow: 0 0 0 1px rgba(120, 190, 255, .55), 0 10px 30px -8px rgba(30, 140, 255, .85); } .bp-go-arr { position: absolute; right: 5px; top: 5px; bottom: 5px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); } .bp-go-arr svg { width: 22px; height: 22px; } /* payment-method sheet, matched to the reference at 390px: tighter cards with a blue edge on both, raster art from the reference, filled promo field, rounded Continue with a solid arrow disc */ #sheet.bp-paysheet-on { padding-left: 14px; padding-right: 14px; } #sheet-body.bp-paysheet .sheet-title { padding-right: 46px; font: 800 19px/24px var(--font-ui); margin-top: 6px; } #sheet-body.bp-paysheet .sheet-sub { font: 500 13px/17px var(--font-ui); margin: 6px 0 14px; } #sheet-body.bp-paysheet .bp-x { top: 2px; width: 34px; height: 34px; } #sheet-body.bp-paysheet .bp-x svg { width: 16px; height: 16px; } #sheet-body.bp-paysheet .payopt { min-height: 118px; margin: 0 0 10px; padding: 18px 14px 14px 18px; gap: 14px; border-radius: 14px; background: radial-gradient(150px 110px at 86% 65%, rgba(47, 140, 255, .38), transparent 70%), linear-gradient(135deg, rgb(12, 24, 58), rgb(8, 15, 36)); box-shadow: inset 0 0 0 1.5px rgba(61, 139, 255, .85), 0 0 16px -4px rgba(47, 140, 255, .55); } #sheet-body.bp-paysheet .payopt.active { background: radial-gradient(160px 120px at 86% 65%, rgba(47, 140, 255, .5), transparent 70%), linear-gradient(135deg, rgb(14, 32, 80), rgb(9, 18, 44)); box-shadow: inset 0 0 0 1.5px rgb(80, 155, 255), 0 0 22px -2px rgba(47, 140, 255, .8); } #sheet-body.bp-paysheet .payopt-tile { width: 46px; height: 46px; margin: 0 0 0 -4px; } #sheet-body.bp-paysheet .payopt-tile svg { width: 46px; height: 46px; } #sheet-body.bp-paysheet .promo-apply:disabled { opacity: 1; color: rgb(77, 166, 255); } #sheet-body.bp-paysheet .payopt-t { font: 800 16px/20px var(--font-ui); } #sheet-body.bp-paysheet .bp-points { gap: 3px; margin-top: 6px; } #sheet-body.bp-paysheet .bp-points span { font: 500 12px/16px var(--font-ui); gap: 6px; } #sheet-body.bp-paysheet .bp-points svg { width: 12px; height: 12px; } #sheet-body.bp-paysheet .bp-part { right: 4px; bottom: 2px; width: 100px; height: 96px; } #sheet-body.bp-paysheet .payopt[data-method^="usdt"] .bp-part { right: 2px; bottom: 0; width: 126px; height: 92px; } #sheet-body.bp-paysheet .bp-part img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: right bottom; } #sheet-body.bp-paysheet .payopt-radio { right: 16px; top: 18px; width: 26px; height: 26px; box-shadow: inset 0 0 0 2px rgba(205, 220, 245, .85); } #sheet-body.bp-paysheet .payopt.active .payopt-radio { background: rgb(43, 110, 246); box-shadow: 0 0 10px -1px rgba(47, 140, 255, .9); } #sheet-body.bp-paysheet .promo-box { margin-top: 18px; } #sheet-body.bp-paysheet .promo-label { font: 500 13px/17px var(--font-ui); margin-bottom: 8px; } #sheet-body.bp-paysheet .promo-entry { min-height: 48px; padding: 0 6px 0 14px; border-radius: 12px; background: rgb(18, 28, 52); box-shadow: none; border: 0; } #sheet-body.bp-paysheet .promo-entry input { font: 500 15px/20px var(--font-ui); color: #fff; background: transparent; border: 0; box-shadow: none; } #sheet-body.bp-paysheet .promo-entry input::placeholder { color: rgb(170, 182, 208); } #sheet-body.bp-paysheet .promo-apply { height: 34px; padding: 0 12px; border-radius: 10px; background: rgb(22, 40, 84); color: rgb(77, 166, 255); font: 600 12.5px/16px var(--font-ui); } #sheet-body.bp-paysheet #method-go { height: 52px; margin-top: 16px; border-radius: 18px; font: 700 16px/20px var(--font-ui); background: linear-gradient(90deg, rgb(24, 150, 255), rgb(43, 99, 246)); box-shadow: 0 0 0 1px rgba(120, 190, 255, .45), 0 8px 26px -8px rgba(30, 140, 255, .9); } #sheet-body.bp-paysheet .bp-go-arr { right: 7px; top: 8px; bottom: 8px; background: rgb(64, 140, 255); box-shadow: 0 0 10px -2px rgba(140, 200, 255, .8); } #sheet-body.bp-paysheet .bp-go-arr svg { width: 18px; height: 18px; } /* top-up: the wallet tile is a knob that slides right to top up */ #act-topup.bp-slide { overflow: hidden; } #act-topup.bp-slide::before { display: none; } #act-topup.bp-slide > span#act-topup-label { position: relative; z-index: 1; margin-left: 66px; opacity: calc(1 - var(--bp-slide, 0) * 1.4); } #act-topup.bp-slide::after { opacity: calc(.85 - var(--bp-slide, 0)); } .bp-knob { position: absolute; left: 8px; top: 50%; margin-top: -21px; z-index: 2; width: 50px; height: 42px; border-radius: 16px; touch-action: none; cursor: grab; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h12.5a2.5 2.5 0 0 1 2.5 2.5v0a2.5 2.5 0 0 1-2.5 2.5H16'/%3E%3Cpath d='M6 6V5.2A1.7 1.7 0 0 1 8.2 3.6L17 6'/%3E%3C/svg%3E") center / 24px no-repeat, linear-gradient(135deg, rgb(36, 146, 255), rgb(43, 99, 246)); box-shadow: 0 0 14px -2px rgba(47, 140, 255, .75); } .bp-knob:active { cursor: grabbing; } .bp-trail { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 0; border-radius: 999px; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(36, 146, 255, .05), rgba(43, 120, 255, .45)); } .bp-knob.bp-back, .bp-trail.bp-back { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), width .25s ease; } /* "Let's get acquainted" sheet (reference 2026-10-23) in place of the app's KYC-required sheet: art on top, left-aligned title with an azure second line, three icon tiles, a note, azure Start with an arrow, outlined Later */ #sheet-body.bp-kyc { text-align: left; } #sheet.bp-kyc-on { max-height: calc(var(--app-h) * 0.96 / var(--ui-scale, 1)); } #sheet-body.bp-kyc .ks-shield, #sheet-body.bp-kyc .ks-facts, #sheet-body.bp-kyc .ks-next { display: none; } .bp-kyc-art { display: block; width: 100%; height: 150px; margin: -6px 0 0; object-fit: cover; object-position: center 40%; } #sheet-body.bp-kyc .sheet-title { text-align: left; font: 800 25px/29px var(--font-ui); letter-spacing: -.01em; color: #fff; margin: 0; } #sheet-body.bp-kyc .sheet-title .bp-az { color: rgb(56, 170, 255); } #sheet-body.bp-kyc .sheet-sub { text-align: left; margin: 8px 0 0; color: rgb(200, 212, 238); font: 500 13.5px/18px var(--font-ui); } .bp-kyc-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 14px; } .bp-kyc-tiles > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; text-align: center; color: #fff; font: 700 12.5px/16px var(--font-ui); } .bp-kyc-tiles > div + div { border-left: 1px solid rgba(111, 160, 255, .18); } .bp-kyc-tiles i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: rgb(77, 176, 255); background: linear-gradient(160deg, rgba(43, 99, 246, .35), rgba(14, 30, 70, .95)); box-shadow: inset 0 0 0 1px rgba(90, 170, 255, .4), 0 0 14px -4px rgba(47, 140, 255, .6); } .bp-kyc-tiles svg { width: 22px; height: 22px; } .bp-kyc-note { margin: 12px 0 0; text-align: center; color: rgb(154, 168, 199); font: 500 12.5px/17px var(--font-ui); } #sheet-body.bp-kyc #kyc-go { position: relative; height: 50px; margin-top: 12px; border-radius: 18px; font: 700 16px/20px var(--font-ui); background: linear-gradient(90deg, rgb(24, 150, 255), rgb(43, 99, 246)); color: #fff; box-shadow: 0 0 0 1px rgba(120, 190, 255, .45), 0 8px 26px -8px rgba(30, 140, 255, .9); } #sheet-body.bp-kyc #kyc-go .bp-go-arr2 { position: absolute; right: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; } #sheet-body.bp-kyc #kyc-later { height: 46px; margin-top: 8px; border-radius: 16px; background: rgba(12, 20, 40, .8); color: rgb(200, 212, 238); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .28); font: 600 15px/20px var(--font-ui); } /* identity-check upload screen, reference 2026-10-23: two tall glass cards with an illustration, left-aligned title and hints, a dashed "upload" button; a Continue button that is visible but disabled until both photos are in. Contacts and rules are kept out of sight. */ #kyc .bp-kyc-intro { margin: 6px 2px 14px; color: rgb(200, 212, 238); font: 500 14px/19px var(--font-ui); } #kyc .kyc-rules, #kyc .kyc-privacy { display: none; } #kyc .kyc-contacts { display: grid; gap: 8px; margin-top: 12px; padding: 18px; border-radius: 20px; background: linear-gradient(180deg, rgb(10, 20, 46), rgb(7, 13, 30)); box-shadow: inset 0 0 0 1px rgba(90, 150, 255, .45), 0 0 22px -8px rgba(47, 140, 255, .55); } #kyc .kyc-contacts .ks-t { margin: 0 0 4px; font: 800 17px/22px var(--font-ui); color: #fff; } #kyc .kyc-contacts label { color: rgb(184, 195, 220); font: 500 13px/16px var(--font-ui); margin-top: 4px; } #kyc .kyc-contacts input { height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: rgb(18, 28, 52); color: #fff; font: 600 15px/20px var(--font-ui); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .2); } #kyc .kyc-contacts input:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px rgb(61, 139, 255); } #kyc .kyc-contacts input::placeholder { color: rgb(110, 122, 150); } #kyc .kyc-slot:not(.done) { align-items: flex-start; text-align: left; margin-top: 12px; padding: 22px 18px 18px; border-radius: 20px; background: radial-gradient(180px 120px at 50% 0%, rgba(47, 140, 255, .18), transparent 70%), linear-gradient(180deg, rgb(10, 20, 46), rgb(7, 13, 30)); box-shadow: inset 0 0 0 1px rgba(90, 150, 255, .45), 0 0 22px -8px rgba(47, 140, 255, .55); } #kyc .kyc-slot:not(.done) .ks-ico { width: 100%; height: 116px; border-radius: 0; background: none; display: flex; justify-content: center; align-items: center; } #kyc .kyc-slot:not(.done) .ks-ico svg { width: 150px; height: 110px; } #kyc .kyc-slot:not(.done) .ks-t { margin-top: 18px; font: 800 20px/24px var(--font-ui); letter-spacing: -.01em; color: #fff; } #kyc .kyc-slot:not(.done) .ks-s { margin-top: 6px; text-align: left; color: rgb(184, 195, 220); font: 500 14px/19px var(--font-ui); } #kyc .kyc-slot:not(.done) .ks-s .bp-fmt { display: block; margin-top: 4px; } #kyc .kyc-slot:not(.done) .ks-chip { width: 100%; justify-content: center; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(10, 20, 46, .5); outline: 1.5px dashed rgba(90, 150, 255, .6); outline-offset: -1.5px; color: rgb(77, 166, 255); font: 600 14px/18px var(--font-ui); } #kyc .kyc-slot:not(.done) .ks-chip svg { width: 22px; height: 22px; } #kyc #kyc-send { display: flex !important; align-items: center; justify-content: center; margin-top: 16px !important; height: 52px; border-radius: 18px; font: 700 16px/20px var(--font-ui); } #kyc #kyc-send[hidden], #kyc #kyc-send:disabled { background: rgb(14, 22, 40); color: rgb(90, 102, 132); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .15); pointer-events: none; } #kyc #kyc-send:not([hidden]):not(:disabled) { background: linear-gradient(90deg, rgb(24, 150, 255), rgb(43, 99, 246)); color: #fff; box-shadow: 0 0 0 1px rgba(120, 190, 255, .45), 0 8px 26px -8px rgba(30, 140, 255, .9); } /* ---- no exchange desk ----------------------------------------------------------- BelloPay runs without the exchange (EXCHANGE_ENABLED=false). This also keeps the tab and the screen out of sight if the switch is ever turned on by mistake on this brand. */ #tab-exchange, #exchange { display: none !important; } /* ---- card flip: brand colours on the back and the hint --------------------- */ /* the back: its own plain navy face (no front art showing through), so the details read at a glance; number large and white, labels light blue */ .hero-card.cf-back { background: radial-gradient(circle at 100% 100%, rgba(47, 140, 255, .32) 0 70px, transparent 170px), linear-gradient(160deg, rgb(13, 26, 62), rgb(5, 9, 20)); } .cf-back::before { display: none; } .cb-stripe { background: rgb(2, 4, 9); box-shadow: inset 0 -1px 0 rgba(111, 160, 255, .25); } .cb-body { gap: 12px; text-shadow: none; } .cb-pan { padding: 7px 10px; margin-left: -10px; gap: 8px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(111, 160, 255, .3); border-radius: 12px; } .cb-pan .cb-v { font-size: 19px; line-height: 24px; font-weight: 700; color: #fff; letter-spacing: .05em; } .cb-pan svg { width: 16px; height: 16px; opacity: 1; color: var(--bp-azure-text); } .cb-row { gap: 30px; } .cb-k { font: 700 10.5px/12px var(--font-ui); letter-spacing: .1em; opacity: 1; color: rgb(150, 185, 245); } .cb-field .cb-v { font-size: 19px; line-height: 23px; font-weight: 700; color: #fff; } /* no menu button on the back: its items are tiles on the home screen */ :root[data-brand-script] .cb-menu { display: none; } .cb-body { right: 20px; } .cf-flip-hint { background: rgba(255, 255, 255, .24); } /* ---- BelloPay light theme ------------------------------------------------------ Everything above is the dark reference. Here the same blocks flip under :root[data-theme="light"]: a pale blue-white base with the palm backdrop washed out, white glass panels with an azure hairline and a soft navy shadow, ink text, and a deeper azure for text so it reads on white. The card art, the gradient buttons and the tab pill keep their colours. */ :root[data-theme="light"] { --bp-bg: rgb(241, 245, 251); --bp-ink: rgb(10, 18, 38); --bp-ink-2: rgb(74, 86, 112); --bp-ink-3: rgb(112, 124, 150); --bp-azure-text: rgb(20, 104, 222); --bp-glass: rgba(255, 255, 255, .86); --bp-edge: rgba(43, 99, 246, .16); --bp-lift: 0 10px 28px -18px rgba(11, 26, 74, .28); --bp-tint: rgb(232, 240, 253); --sheet-fill: rgb(255, 255, 255); } /* base: the palms stay as a faint texture under a pale wash */ :root[data-theme="light"], :root[data-theme="light"] body { background: linear-gradient(180deg, rgba(241, 245, 251, .9), rgba(241, 245, 251, .96) 40%, rgb(241, 245, 251)), var(--bp-backdrop) center top / cover no-repeat, rgb(241, 245, 251); background-attachment: fixed; color: var(--bp-ink); } @media (min-width: 560px) { :root[data-theme="light"] { background: radial-gradient(900px 600px at 20% 0%, rgb(214, 228, 252), rgb(232, 238, 248) 60%); } :root[data-theme="light"] body { box-shadow: 0 0 0 10px rgb(255, 255, 255), 0 0 0 12px rgb(206, 216, 234), 0 40px 90px -30px rgba(11, 26, 74, .35); } :root[data-theme="light"] .demo-note { color: rgb(90, 104, 134); } } /* header: the lockup with ink letters; the theme switch is shown, the language pill stays hidden (the language still comes from Telegram) */ .hd-cluster { display: flex; } .hd-cluster .hd-lang { display: none; } :root[data-theme="light"] .hd-theme { background: rgb(255, 255, 255); box-shadow: inset 0 0 0 1px var(--bp-edge), var(--bp-lift); } :root[data-theme="light"] .hd-theme-btn { color: var(--bp-ink-3); } :root[data-theme="light"] .hd-theme-btn.active { background: var(--bp-tint); color: var(--bp-azure-text); box-shadow: inset 0 0 0 1.5px rgb(47, 140, 255); } /* card: same art, a softer edge glow on white */ :root[data-theme="light"] .hero-card { box-shadow: 0 0 0 1.5px rgba(90, 160, 255, .9), 0 18px 34px -14px rgba(11, 26, 74, .45); } :root[data-theme="light"] .bp-tilt { box-shadow: 0 0 0 1.5px rgba(90, 160, 255, .9), 0 14px 28px -12px rgba(11, 26, 74, .45); } /* panels and glass */ :root[data-theme="light"] #balance-panel, :root[data-theme="light"] .panel:not(#balance-panel), :root[data-theme="light"] .docs, :root[data-theme="light"] #hist-list, :root[data-theme="light"] #pf-verify, :root[data-theme="light"] .ref-stats .ref-stat, :root[data-theme="light"] .bp-glass, :root[data-theme="light"] .bp-faq details, :root[data-theme="light"] .bp-svc > div, :root[data-theme="light"] .bp-tile, :root[data-theme="light"] .bp-rows, :root[data-theme="light"] .bp-rules li { background: var(--bp-glass); box-shadow: inset 0 0 0 1px var(--bp-edge), var(--bp-lift); color: var(--bp-ink); } :root[data-theme="light"] #balance-panel { color: var(--bp-ink); } :root[data-theme="light"] #balance .cents, :root[data-theme="light"] #balance-head .bh-k, :root[data-theme="light"] #balance-head .bh-pan { color: var(--bp-ink-3); } :root[data-theme="light"] .bp-eye { background: var(--bp-tint); color: var(--bp-ink-2); box-shadow: inset 0 0 0 1px var(--bp-edge); } :root[data-theme="light"] .bp-tile:active { background: var(--bp-tint); } :root[data-theme="light"] .bp-tile svg { color: var(--bp-azure-text); } /* top-up pill: white with an azure edge; the blue knob stays */ :root[data-theme="light"] #act-topup { background: radial-gradient(140px 70px at 12% 50%, rgba(47, 140, 255, .14), transparent 70%), rgb(255, 255, 255); color: var(--bp-ink); box-shadow: inset 0 0 0 1.5px rgba(47, 140, 255, .85), 0 10px 26px -14px rgba(30, 110, 240, .55); } :root[data-theme="light"] #act-topup::after { filter: invert(1) brightness(.35); } :root[data-theme="light"] #act-topup:active { background: var(--bp-tint); } :root[data-theme="light"] .bp-trail { background: linear-gradient(90deg, rgba(36, 146, 255, .04), rgba(43, 120, 255, .25)); } /* referral tile and banner: light azure field, ink copy */ :root[data-theme="light"] .bp-ref { color: var(--bp-ink); background: radial-gradient(circle at 100% 0, rgba(47, 140, 255, .22) 0 70px, transparent 140px), linear-gradient(90deg, rgb(226, 237, 255), rgb(255, 255, 255)); box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .35), var(--bp-lift); } :root[data-theme="light"] .bp-ref-s, :root[data-theme="light"] .bp-ref-chev svg { color: var(--bp-ink-2); } :root[data-theme="light"] .ref-banner { background: linear-gradient(100deg, rgb(255, 255, 255) 0 45%, rgba(255, 255, 255, .9) 68%, rgba(200, 222, 255, .6) 100%), radial-gradient(circle at 100% 0, rgba(47, 140, 255, .35) 0 60px, transparent 150px), var(--bp-backdrop) center 88% / 140% auto no-repeat, rgb(255, 255, 255); box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .35), var(--bp-lift); } :root[data-theme="light"] .ref-banner .rb-t { color: var(--bp-ink); } :root[data-theme="light"] .ref-banner .rb-s { color: var(--bp-ink-2); } /* the quiet block link keeps its red, a shade deeper for white */ :root[data-theme="light"] .bp-block-quiet { color: rgb(196, 30, 58); box-shadow: inset 0 0 0 1px rgba(196, 30, 58, .3); } /* rows, rules, links */ :root[data-theme="light"] .bp-row + .bp-row, :root[data-theme="light"] .bp-fees > div + div { border-top-color: rgba(11, 26, 74, .08); } :root[data-theme="light"] .bp-row-k, :root[data-theme="light"] .bp-fees span { color: var(--bp-ink-2); } :root[data-theme="light"] .bp-row-v { color: var(--bp-ink); } :root[data-theme="light"] .bp-row-v small { color: var(--bp-ink-3); } :root[data-theme="light"] .bp-rules li { color: var(--bp-ink); } :root[data-theme="light"] .bp-rules li::before { box-shadow: none; } :root[data-theme="light"] .bp-link { background: var(--bp-tint); box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .35); } /* sheets */ :root[data-theme="light"] .sheet { background: rgb(255, 255, 255); color: var(--bp-ink); box-shadow: 0 -12px 40px -10px rgba(11, 26, 74, .25); } :root[data-theme="light"] #sheet-body.bp-pop .req-field, :root[data-theme="light"] #sheet-body.bp-pop .otp-row { background: rgb(246, 249, 254); box-shadow: inset 0 0 0 1px var(--bp-edge); } /* tab bar: white float, the active pill stays azure */ :root[data-theme="light"] .tabbar { background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px var(--bp-edge), 0 16px 34px -14px rgba(11, 26, 74, .35); } :root[data-theme="light"] .tab { color: var(--bp-ink-3); } :root[data-theme="light"] .tab.active { color: #fff; } :root[data-theme="light"] .tab svg [fill^="var(--color-surface-default)"] { fill: rgb(255, 255, 255); } :root[data-theme="light"] .tab.active svg [fill^="var(--color-surface-default)"] { fill: rgb(36, 120, 250); } /* start page */ :root[data-theme="light"] .bp-land { color: var(--bp-ink); } :root[data-theme="light"] .bp-az { color: var(--bp-azure-text); } :root[data-theme="light"] .bp-more, :root[data-theme="light"] .bp-help span { color: var(--bp-azure-text); } :root[data-theme="light"] .bp-hero p, :root[data-theme="light"] .bp-use > div > span, :root[data-theme="light"] .bp-step > div > span, :root[data-theme="light"] .bp-sec span, :root[data-theme="light"] .bp-faq details p, :root[data-theme="light"] .bp-banner small, :root[data-theme="light"] .bp-promo-txt span { color: var(--bp-ink-2); } :root[data-theme="light"] .bp-svc > div { color: var(--bp-ink-2); } :root[data-theme="light"] .bp-svc .bp-svc-more { color: var(--bp-ink); } :root[data-theme="light"] .bp-chip { background: rgb(255, 255, 255); color: var(--bp-ink); box-shadow: inset 0 0 0 1px var(--bp-edge), var(--bp-lift); } :root[data-theme="light"] .bp-chip i { background: rgb(22, 163, 90); box-shadow: none; } :root[data-theme="light"] .bp-cta { box-shadow: 0 10px 26px -10px rgba(30, 110, 240, .7); } :root[data-theme="light"] .bp-ico, :root[data-theme="light"] .bp-kyc-tiles i { background: var(--bp-tint); color: var(--bp-azure-text); box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .3); } :root[data-theme="light"] .bp-num { box-shadow: none; } :root[data-theme="light"] .bp-sec svg { color: var(--bp-azure-text); filter: none; } :root[data-theme="light"] .bp-fees b.ok { color: rgb(8, 128, 80); } :root[data-theme="light"] .bp-faq summary::after { color: var(--bp-azure-text); } :root[data-theme="light"] .bp-help button { box-shadow: 0 8px 20px -10px rgba(30, 110, 240, .7); } /* banners and promo cards keep their dark artwork; only the frame softens */ :root[data-theme="light"] .bp-banner { color: #fff; box-shadow: 0 14px 30px -16px rgba(11, 26, 74, .45); } :root[data-theme="light"] .bp-banner small { color: rgb(200, 212, 238); } :root[data-theme="light"] .bp-banner .bp-az { color: rgb(77, 176, 255); } :root[data-theme="light"] .bp-promo { background: rgb(255, 255, 255); color: var(--bp-ink); box-shadow: inset 0 0 0 1px var(--bp-edge), var(--bp-lift); } :root[data-theme="light"] .bp-promo-art::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgb(255, 255, 255) 100%); } :root[data-theme="light"] .bp-promo-txt .bp-az { color: var(--bp-azure-text) !important; } :root[data-theme="light"] .bp-ready { color: #fff; box-shadow: 0 16px 34px -16px rgba(20, 52, 140, .6); } /* payment-method sheet */ :root[data-theme="light"] #sheet-body.bp-paysheet .sheet-title, :root[data-theme="light"] #sheet-body.bp-paysheet .payopt-t { color: var(--bp-ink); } :root[data-theme="light"] #sheet-body.bp-paysheet .sheet-sub, :root[data-theme="light"] #sheet-body.bp-paysheet .payopt-rate, :root[data-theme="light"] #sheet-body.bp-paysheet .promo-label { color: var(--bp-ink-2); } :root[data-theme="light"] .bp-x { background: rgb(240, 244, 251); color: var(--bp-ink-2); box-shadow: inset 0 0 0 1px var(--bp-edge); } :root[data-theme="light"] #sheet-body.bp-paysheet .payopt { background: radial-gradient(150px 110px at 86% 65%, rgba(47, 140, 255, .14), transparent 70%), rgb(255, 255, 255); box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .3), var(--bp-lift); } :root[data-theme="light"] #sheet-body.bp-paysheet .payopt.active { background: radial-gradient(160px 120px at 86% 65%, rgba(47, 140, 255, .2), transparent 70%), rgb(240, 246, 255); box-shadow: inset 0 0 0 1.5px rgb(47, 128, 255), 0 10px 26px -14px rgba(30, 110, 240, .6); } :root[data-theme="light"] .bp-points span { color: var(--bp-ink-2); text-shadow: none; } :root[data-theme="light"] .bp-points svg { color: rgb(8, 150, 170); } :root[data-theme="light"] #sheet-body.bp-paysheet .payopt-radio { box-shadow: inset 0 0 0 2px rgba(74, 86, 112, .45); } :root[data-theme="light"] #sheet-body.bp-paysheet .payopt.active .payopt-radio { box-shadow: none; } :root[data-theme="light"] #sheet-body.bp-paysheet .promo-entry { background: rgb(243, 246, 252); box-shadow: inset 0 0 0 1px var(--bp-edge); } :root[data-theme="light"] #sheet-body.bp-paysheet .promo-entry input { color: var(--bp-ink); } :root[data-theme="light"] #sheet-body.bp-paysheet .promo-entry input::placeholder { color: var(--bp-ink-3); } :root[data-theme="light"] #sheet-body.bp-paysheet .promo-apply, :root[data-theme="light"] #sheet-body.bp-paysheet .promo-apply:disabled { background: var(--bp-tint); color: var(--bp-azure-text); } /* KYC sheet and upload screen */ :root[data-theme="light"] #sheet-body.bp-kyc .sheet-title { color: var(--bp-ink); } :root[data-theme="light"] #sheet-body.bp-kyc .sheet-sub, :root[data-theme="light"] .bp-kyc-note { color: var(--bp-ink-2); } :root[data-theme="light"] .bp-kyc-tiles > div { color: var(--bp-ink); } :root[data-theme="light"] .bp-kyc-tiles > div + div { border-left-color: rgba(11, 26, 74, .1); } :root[data-theme="light"] #sheet-body.bp-kyc #kyc-later { background: rgb(240, 244, 251); color: var(--bp-ink); box-shadow: inset 0 0 0 1px var(--bp-edge); } :root[data-theme="light"] #kyc .bp-kyc-intro { color: var(--bp-ink-2); } :root[data-theme="light"] #kyc .kyc-contacts, :root[data-theme="light"] #kyc .kyc-slot:not(.done) { background: radial-gradient(180px 120px at 50% 0%, rgba(47, 140, 255, .1), transparent 70%), rgb(255, 255, 255); box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .3), var(--bp-lift); } :root[data-theme="light"] #kyc .kyc-contacts .ks-t, :root[data-theme="light"] #kyc .kyc-slot:not(.done) .ks-t { color: var(--bp-ink); } :root[data-theme="light"] #kyc .kyc-contacts label, :root[data-theme="light"] #kyc .kyc-slot:not(.done) .ks-s { color: var(--bp-ink-2); } :root[data-theme="light"] #kyc .kyc-contacts input { background: rgb(243, 246, 252); color: var(--bp-ink); box-shadow: inset 0 0 0 1px var(--bp-edge); } :root[data-theme="light"] #kyc .kyc-contacts input::placeholder { color: var(--bp-ink-3); } :root[data-theme="light"] #kyc .kyc-slot:not(.done) .ks-chip { background: var(--bp-tint); outline-color: rgba(47, 128, 255, .55); color: var(--bp-azure-text); } :root[data-theme="light"] #kyc #kyc-send[hidden], :root[data-theme="light"] #kyc #kyc-send:disabled { background: rgb(232, 237, 245); color: var(--bp-ink-3); box-shadow: none; } /* the method art is cut on a dark field: feather its edges into the white card */ :root[data-theme="light"] #sheet-body.bp-paysheet .bp-part img { -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); } /* the top-up rate: an azure pill under the method name, clear of the art */ #sheet-body.bp-paysheet .bp-pcol .payopt-rate { align-self: flex-start; display: inline-flex; align-items: center; margin: 2px 0 2px; padding: 4px 10px; border-radius: 999px; text-align: left; white-space: nowrap; background: rgba(43, 120, 255, .22); box-shadow: inset 0 0 0 1px rgba(90, 170, 255, .45); color: rgb(140, 200, 255); font: 700 13px/16px var(--font-ui); font-variant-numeric: tabular-nums; } :root[data-theme="light"] #sheet-body.bp-paysheet .bp-pcol .payopt-rate { background: rgb(226, 237, 255); box-shadow: inset 0 0 0 1px rgba(47, 128, 255, .35); color: rgb(16, 92, 206); } /* ---- home, light: one primary action, flat tiles inside the white panel ---- */ /* top-up is the filled azure pill now; the knob turns into a frosted chip */ :root[data-theme="light"] #act-topup { background: linear-gradient(90deg, rgb(26, 160, 255), rgb(43, 99, 246)); color: #fff; box-shadow: 0 10px 24px -10px rgba(30, 110, 240, .7), inset 0 1px 0 rgba(255, 255, 255, .22); } :root[data-theme="light"] #act-topup::after { filter: none; } :root[data-theme="light"] #act-topup:active { background: linear-gradient(90deg, rgb(20, 140, 235), rgb(36, 86, 220)); } :root[data-theme="light"] .bp-knob { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h12.5a2.5 2.5 0 0 1 2.5 2.5v0a2.5 2.5 0 0 1-2.5 2.5H16'/%3E%3Cpath d='M6 6V5.2A1.7 1.7 0 0 1 8.2 3.6L17 6'/%3E%3C/svg%3E") center / 24px no-repeat, rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); } :root[data-theme="light"] .bp-trail { background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .28)); } /* tiles: soft tinted fills, no rings or shadows of their own */ :root[data-theme="light"] #balance-panel .bp-tile { background: rgb(242, 246, 253); box-shadow: none; } :root[data-theme="light"] #balance-panel .bp-tile:active { background: rgb(228, 237, 252); } /* referral: the same quiet fill, the gift tile carries the colour */ :root[data-theme="light"] .bp-ref { background: rgb(242, 246, 253); box-shadow: none; } /* tile labels hang from one line: icons at the same height, captions start together */ .bp-tiles .bp-tile:not(.bp-wide) { justify-content: flex-start; padding-top: 16px; } /* ---- theme switch: one pill, a white knob slides under the active icon (2026-10-25) ---- */ :root .hd-theme, :root[data-theme="light"] .hd-theme { position: relative; width: 72px; height: 30px; padding: 0 3px; gap: 0; justify-content: space-between; overflow: visible; isolation: isolate; background: linear-gradient(90deg, rgb(36, 128, 255) 0%, rgb(28, 86, 236) 45%, rgb(14, 34, 120) 100%); box-shadow: inset 0 0 0 1.5px rgba(96, 170, 255, .95), 0 0 0 1px rgba(20, 60, 170, .35), 0 0 12px -2px rgba(40, 130, 255, .75); } :root .hd-theme::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 1.5px; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgb(255, 255, 255) 0%, rgb(236, 243, 255) 70%, rgb(214, 228, 255) 100%); box-shadow: 0 0 0 1px rgba(170, 205, 255, .9), 0 0 11px 1px rgba(120, 180, 255, .75), 0 3px 8px -3px rgba(0, 20, 80, .6); transition: transform .28s cubic-bezier(.3, .7, .2, 1); } :root[data-theme="dark"] .hd-theme::before, :root:not([data-theme="light"]) .hd-theme::before { transform: translateX(39px); } :root .hd-theme-btn, :root[data-theme="light"] .hd-theme-btn, :root .hd-theme-btn.active, :root[data-theme="light"] .hd-theme-btn.active { position: relative; z-index: 1; width: 27px; height: 27px; padding: 0; background: transparent; box-shadow: none; color: rgb(150, 180, 255); transition: color .28s; } :root .hd-theme-btn.active, :root[data-theme="light"] .hd-theme-btn.active { color: rgb(30, 110, 255); } :root .hd-theme-btn svg { width: 14px; height: 14px; } :root .hd-theme-btn .hd-sun { width: 15px; height: 15px; } :root .hd-theme-btn .hd-sun .sun-rays { left: 1px; top: 1px; width: 13px; height: 13px; } :root .hd-theme-btn .hd-sun .sun-core { left: 5px; top: 5px; width: 5px; height: 5px; } :root #theme-dark svg { width: 13px; height: 12.5px; }