*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --brand: #0175C2; --brand-dark: #015A9A; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } html { height: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } body { min-height: 100%; font-family: var(--font); background-color: #0d1117; background-image: url("../splash/img/light-background.png"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; color: #ffffff; /* NOTE: flex centering moved to .page-shell so the fixed footer isn't caught up in body's flex layout on old WebViews. */ } /* ── Page shell — owns the flex centering that used to live on ────── */ .page-shell { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px 72px; } button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; } img { display: block; max-width: 100%; } /* ── Scrim ───────────────────────────────────────────────────────────────── */ .scrim { position: fixed; /* Lowered from `inset: 0` (Chrome 87) so old Android WebViews can parse this. */ top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(170deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.68) 100%); pointer-events: none; z-index: 0; } /* ── Logo ────────────────────────────────────────────────────────────────── */ .logo-wrap { position: fixed; top: 28px; left: 28px; z-index: 10; } .logo-wrap img { width: 44px; height: 44px; border-radius: 12px; display: block; } /* ── Page layout ─────────────────────────────────────────────────────────── */ .page { position: relative; z-index: 1; width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } /* ── States ──────────────────────────────────────────────────────────────── */ .state { width: 100%; display: none; flex-direction: column; align-items: flex-start; } .state--active { display: flex; animation: up 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; } .hidden { display: none !important; } @keyframes up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ── Status icons ────────────────────────────────────────────────────────── */ .status-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; } .status-icon.success { background: rgba(29,158,117,0.15); border: 1px solid rgba(29,158,117,0.35); color: #2DD4A0; } .status-icon.error { background: rgba(216,90,48,0.15); border: 1px solid rgba(216,90,48,0.35); color: #F08060; } .status-icon.info { background: rgba(1,117,194,0.15); border: 1px solid rgba(1,117,194,0.35); color: #5BAEE8; } .status-icon.warning { background: rgba(216,158,48,0.15); border: 1px solid rgba(216,158,48,0.35); color: #F0C060; } /* ── Spinner ─────────────────────────────────────────────────────────────── */ .spinner { width: 52px; height: 52px; border: 2px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.70); border-radius: 50%; animation: spin 700ms linear infinite; margin-bottom: 28px; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Typography ──────────────────────────────────────────────────────────── */ h1 { font-size: 38px; font-weight: 800; color: #ffffff; letter-spacing: -1.2px; line-height: 1.08; margin-bottom: 14px; } p { font-size: 15px; color: rgba(255,255,255,0.50); line-height: 1.65; max-width: 280px; } p strong { color: rgba(255,255,255,0.85); font-weight: 600; } /* ── Eyebrow label (ready state — sits above the price hero) ─────────────── */ .eyebrow { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.28); letter-spacing: 1.4px; text-transform: uppercase; line-height: 1; margin-bottom: 20px; max-width: none; } /* ── Price hero (ready state) ────────────────────────────────────────────── */ .price-hero { margin-bottom: 10px; } .price-hero__row { display: flex; align-items: flex-start; line-height: 1; gap: 0; } .price-hero__currency { font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.55); margin-top: 14px; margin-right: 4px; } .price-hero__amount { font-size: 96px; font-weight: 800; color: #ffffff; letter-spacing: -6px; line-height: 0.9; } .price-hero__per-year { align-self: flex-end; padding-bottom: 12px; margin-left: 8px; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.40); letter-spacing: 0.2px; } .price-hero__sub { font-size: 14px; color: rgba(255,255,255,0.38); line-height: 1.6; margin-bottom: 32px; margin-top: 4px; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { margin-top: 36px; height: 52px; padding: 0 32px; border-radius: 14px; border: none; background: var(--brand); color: #fff; font-size: 15px; font-weight: 700; font-family: var(--font); cursor: pointer; letter-spacing: -0.1px; transition: background 120ms ease, transform 120ms ease; width: 100%; /* Ensure tags styled as .btn render correctly */ display: flex; align-items: center; justify-content: center; text-decoration: none; } .btn:hover { background: var(--brand-dark); } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn + .btn { margin-top: 12px; } .btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); } .btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.95); } /* ── WhatsApp CTA (emergency state) ─────────────────────────────────────── */ .btn--whatsapp { background: #25D366; color: #ffffff; } .btn--whatsapp:hover { background: #1fbe5c; } .btn--whatsapp:active { background: #1aaa52; transform: scale(0.97); } /* ── Back link ───────────────────────────────────────────────────────────── */ .back { margin-bottom: 24px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.45); padding: 6px 10px 6px 0; margin-left: -2px; transition: color 120ms ease; } .back:hover { color: rgba(255,255,255,0.85); } /* ── Hint ────────────────────────────────────────────────────────────────── */ .hint { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,0.30); line-height: 1.6; } .link { color: rgba(255,255,255,0.70); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; background: none; border: none; padding: 0; cursor: pointer; } .link:hover { color: #ffffff; } /* ── Input group ─────────────────────────────────────────────────────────── */ .input-group { width: 100%; position: relative; display: flex; align-items: center; } .pw-input { width: 100%; height: 52px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); border-radius: 14px; padding: 0 18px; font-size: 15px; font-weight: 600; color: #fff; font-family: var(--font); outline: none; transition: border-color 150ms ease; } .pw-input::placeholder { color: rgba(255,255,255,0.30); font-weight: 400; } .pw-input:focus { border-color: rgba(255,255,255,0.45); } .pw-input--otp { text-align: center; font-size: 22px; letter-spacing: 10px; font-weight: 700; } .reset-error { margin-top: 10px; font-size: 13px; color: #F08060; line-height: 1.5; } .field--error .pw-input { border-color: rgba(240,128,96,0.55); } /* ── Network picker ──────────────────────────────────────────────────────── */ .network-grid { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; margin-top: 20px; } .network { width: 100%; height: 52px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; color: rgba(255,255,255,0.85); font-size: 15px; font-weight: 600; font-family: var(--font); transition: all 150ms ease; } .network:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); } .network:active { transform: scale(0.97); } /* ── Brand footer ────────────────────────────────────────────────────────── */ .brand { position: fixed; /* 1. Standard fallback for Android 8 / old WebViews */ bottom: 20px; /* Respect system safe areas while keeping 20px padding. Old WebViews silently drop this and fall back to the line above. */ bottom: max(20px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 0.3px; z-index: 1; /* Force hardware acceleration to stop WebView flickering/blinking */ transform: translateZ(0); } .brand a { color: rgba(255,255,255,0.30); text-decoration: none; transition: color 120ms ease; } .brand a:hover { color: rgba(255,255,255,0.65); } .brand__sep { color: rgba(255,255,255,0.12); margin: 0 8px; } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 400px) { h1 { font-size: 32px; } .page { max-width: 100%; } .price-hero__amount { font-size: 76px; } .price-hero__currency { font-size: 14px; margin-top: 8px; } } /* Hide the footer entirely when the screen height shrinks (i.e. keyboard is open) */ @media (max-height: 550px) { .brand { display: none; } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: rgba(255,255,255,0.60); } .state--active { animation: none; } } /* ── Copy-link toast ─────────────────────────────────────────────────────── */ #__copy-toast { position: fixed; bottom: 56px; left: 50%; transform: translateX(-50%) translateY(6px); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255, 255, 255, 0.85); font-family: var(--font); font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 100px; z-index: 999; pointer-events: none; opacity: 0; transition: opacity 180ms ease, transform 180ms ease; white-space: nowrap; } /* ── Escape hatch (old-browser fallback) ─────────────────────────────────── */ /* Styled with only ancient CSS so it renders even when the rest of the page has parse failures further up the cascade. */ .escape-hatch-url { width: 100%; margin-top: 20px; padding: 14px 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; color: rgba(255,255,255,0.75); font-family: monospace; font-size: 12px; line-height: 1.5; word-break: break-all; -webkit-user-select: all; user-select: all; } /* ── Old-WebView restrictions ────────────────────────────────────────────── */ /* These rules activate when support.js adds `hide-hubtel` to (see applyOldDeviceRestrictions() in support.js). */ /* Hide the Hubtel/card option since its checkout site uses modern JS that won't run in old WebViews. */ body.hide-hubtel [data-action="pick-hubtel"] { display: none !important; } /* Hide the "← Back" button on momo-phone for old phones — they came here directly from verification, there's nothing to go back to. */ body.hide-hubtel [data-state="momo-phone"] .back { display: none; } /* Small price reminder shown ONLY for old phones on momo-phone — since they skipped the big ₵10 price hero in the ready state, they'd otherwise never see what they're paying. Default: hidden. */ .price-callout { display: none; } body.hide-hubtel [data-state="momo-phone"] .price-callout { display: block; color: rgba(255,255,255,0.65); font-size: 14px; margin-bottom: 18px; margin-top: -4px; } body.hide-hubtel [data-state="momo-phone"] .price-callout strong { color: #ffffff; font-weight: 700; }