/* --------------------------------------------------------------------------- Design tokens. EVERY colour in this file (and home.css) must resolve from here — no raw hex inside rules, or one of the two themes breaks. LIGHT is the default: a visitor with no stored preference gets the white site. Dark is opt-in via the header toggle, which sets the `theme` cookie; the server then stamps data-theme="dark" on (see locale.py + base.html) so the page renders dark on the FIRST paint — no flash. --------------------------------------------------------------------------- */ :root { color-scheme: light; --accent-rgb: 11, 127, 82; --bg: #f7f9fb; --bg-blur: rgba(247, 249, 251, .94); --card: #ffffff; --sunken: #f1f4f8; --sunken-2: #e7ecf2; --surface-hover: #eef2f7; --line: #dde4ec; --text: #16202b; --muted: #5a6a79; --accent: #0b7f52; --accent-ink: #ffffff; --accent-hover: #085f3d; --accent-soft: #e9f7f1; /* kept light enough that --accent on it clears 4.5:1 */ --accent-pale: #d3efe1; --accent-pale-ink: #075437; --danger: #c22b28; --danger-hover: #931d1b; --error-bg: #fdeceb; --error-line: #f3c3c1; --notice-bg: #eaf2fb; --notice-line: #c6daf1; --warn-bg: #fdf6e5; --warn-line: #e3cd95; --warn-line-hover: #b58f2c; --warn-text: #6a5313; --warn-text-hover: #43340a; --shadow-sm: 0 8px 24px rgba(18, 32, 46, .08); --shadow-md: 0 16px 40px rgba(18, 32, 46, .10); --shadow-lg: 0 20px 56px rgba(18, 32, 46, .14); --shadow-bar: 0 10px 32px rgba(18, 32, 46, .16); --backdrop: rgba(18, 28, 38, .42); --backdrop-strong: rgba(18, 28, 38, .55); /* World map fills — read from JS by home.js, which repaints on theme change. */ --map-land: #dfe6ee; --map-stroke: #f7f9fb; --map-on: #0b7f52; --map-dim: #9fd3bd; } :root[data-theme="dark"] { color-scheme: dark; --accent-rgb: 61, 220, 151; --bg: #0f1720; --bg-blur: rgba(15, 23, 32, .96); --card: #17212b; --sunken: #111923; --sunken-2: #0b1420; --surface-hover: #1e2b38; --line: #24303c; --text: #e8eef4; --muted: #9fb0c0; --accent: #3ddc97; --accent-ink: #06301f; --accent-hover: #79e8b9; --accent-soft: #12241c; --accent-pale: #d7fff0; --accent-pale-ink: #06301f; --danger: #f0908f; --danger-hover: #ff6b6a; --error-bg: #3a1c1c; --error-line: #5a2b2b; --notice-bg: #14263a; --notice-line: #1e3a52; --warn-bg: #2d2412; --warn-line: #6d521a; --warn-line-hover: #d4a83f; --warn-text: #f3deb0; --warn-text-hover: #ffe6ad; --shadow-sm: 0 10px 30px rgba(0, 0, 0, .4); --shadow-md: 0 20px 50px rgba(0, 0, 0, .5); --shadow-lg: 0 24px 70px rgba(0, 0, 0, .55); --shadow-bar: 0 12px 40px rgba(0, 0, 0, .55); --backdrop: rgba(0, 0, 0, .6); --backdrop-strong: rgba(0, 0, 0, .68); --map-land: #1b2732; --map-stroke: #0f1720; --map-on: #3ddc97; --map-dim: #284b3c; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } a { color: var(--accent); } a:visited { color: var(--accent); } a:hover { color: var(--accent-hover); } .site-header { display: flex; align-items: baseline; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 45; background: var(--bg-blur); backdrop-filter: blur(10px); } .brand-wrap { display: flex; align-items: center; gap: 0.55rem; } .brand { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; color: var(--text); } .brand span { color: var(--accent); } .support-mode-pill { border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-text); border-radius: 999px; padding: 0.12rem 0.55rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .tagline { margin: 0; color: var(--muted); font-size: 0.9rem; } main { max-width: 980px; margin: 0 auto; padding: 1.5rem; } /* --- storefront intro --- */ .storefront-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; margin: 0.25rem 0 1.5rem; } .storefront-hero h1 { font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.1; margin: 0.15rem 0 0; max-width: 720px; } .hero-points { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; } .hero-points span { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); padding: 0.25rem 0.65rem; font-size: 0.78rem; white-space: nowrap; } /* --- trip form --- */ .trip form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field label { font-weight: 600; font-size: 0.9rem; } .field input[type="text"], .field input[type="number"] { padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 1rem; } .dest-field { position: relative; flex: 1; min-width: 240px; } .dest-field input[type="text"] { width: 100%; } .field.check { flex-direction: row; align-items: center; } .field.check label { display: flex; gap: 0.4rem; align-items: center; font-weight: 500; } .primary { padding: 0.65rem 1.2rem; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1rem; cursor: pointer; } .primary, .primary:visited { color: var(--accent-ink); text-decoration: none; } /* --- autocomplete --- */ .suggest { list-style: none; margin: 0.35rem 0 0; padding: 0.25rem; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 10px; max-height: 320px; overflow: auto; box-shadow: var(--shadow-sm); } .suggest li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.55rem 0.7rem; border-radius: 8px; cursor: pointer; } .suggest li:hover { background: var(--surface-hover); } .s-label { font-weight: 600; } .s-country { color: var(--muted); font-size: 0.85rem; } /* --- results --- */ .results h2 { margin: 2rem 0 0.5rem; font-size: 1.25rem; } .use-case { margin-top: 1.5rem; } .use-case h3 { font-size: 1rem; color: var(--muted); font-weight: 600; margin: 0 0 0.75rem; } .use-case h3 .count { display: inline-block; margin-left: 0.4rem; font-size: 0.75rem; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: 0 0.5rem; } .plan-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .plan-list { display: flex; flex-direction: column; gap: 0.65rem; } .plan-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; } .plan-row { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(260px, 1fr) auto auto; gap: 1rem; align-items: center; padding: 0.85rem 1rem; } .plan-flags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.45rem; } .plan-flag { font-size: 0.7rem; font-weight: 800; border: 1px solid var(--line); border-radius: 999px; padding: 0.08rem 0.55rem; white-space: nowrap; } .plan-flag.reusable { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } .plan-flag.one-time { color: var(--muted); background: var(--sunken); } .plan-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; min-width: 0; } .plan-data { font-size: 1.4rem; font-weight: 800; } .plan-meta { color: var(--muted); font-size: 0.85rem; } .plan-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin: 0; } .plan-facts div { background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem; min-width: 0; } .plan-facts dt { color: var(--muted); font-size: 0.68rem; } .plan-facts dd { margin: 0.1rem 0 0; font-size: 0.82rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plan-renew-note { min-height: 2.5rem; margin: 0.45rem 0 0; color: var(--muted); font-size: 0.78rem; } .plan-price { font-size: 1.3rem; font-weight: 800; color: var(--accent); white-space: nowrap; } .plan-actions { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; } .buy { flex: 1; padding: 0.55rem; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; } .link { background: none; border: 0; color: var(--accent); cursor: pointer; text-decoration: underline; font-size: 0.85rem; } .link:visited { color: var(--accent); } .link:hover { color: var(--accent-hover); } .muted { color: var(--muted); } .error { background: var(--error-bg); border: 1px solid var(--error-line); padding: 0.75rem 1rem; border-radius: 10px; } /* --- modal --- */ .modal { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; } .modal[hidden] { display: none; } .modal-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; max-width: 460px; width: 100%; position: relative; } .modal-close { position: absolute; top: 0.75rem; right: 0.9rem; background: none; border: 0; color: var(--muted); font-size: 1.5rem; cursor: pointer; line-height: 1; } .modal-box h3 { margin: 0 1.5rem 0.25rem 0; } .m-price { color: var(--accent); font-weight: 800; font-size: 1.4rem; margin-bottom: 0.75rem; } .m-specs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1rem; margin: 1rem 0; } .m-specs dt { color: var(--muted); font-size: 0.85rem; } .m-specs dd { margin: 0; overflow-wrap: anywhere; min-width: 0; } .modal-box .buy { width: 100%; margin-top: 0.5rem; } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .nav-account { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text); text-decoration: none; font-weight: 600; border: 1px solid var(--line); padding: 0.4rem 0.8rem; border-radius: 999px; white-space: nowrap; } .nav-ico { display: none; flex: 0 0 auto; } .nav-account:hover { border-color: var(--accent); } .nav-support { color: var(--warn-text); text-decoration: none; font-weight: 800; border: 1px solid var(--warn-line); background: var(--warn-bg); padding: 0.4rem 0.8rem; border-radius: 999px; } .nav-support:hover { border-color: var(--warn-line-hover); color: var(--warn-text-hover); } .nav-logout button { background: none; border: 0; color: var(--muted); cursor: pointer; display: flex; align-items: center; padding: 0.35rem; border-radius: 8px; } .nav-logout button:hover { color: var(--accent); background: var(--card); } /* Light/dark toggle. Shows the icon for the theme you would switch TO, which is the convention users read fastest. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* Language + currency pickers (see locale.js). These live in base.html, i.e. on EVERY page — so their styles, including the responsive ones, belong here and not in a page-specific stylesheet. They previously did, and every page except the homepage got a broken popover as a result. */ .locale-pill { display: inline-flex; gap: 0.35rem; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.75rem; cursor: pointer; background: var(--card); color: var(--text); font-family: inherit; font-size: 0.9rem; font-weight: 600; white-space: nowrap; } .locale-pill:hover { border-color: var(--accent); } .locale-pill[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); } .locale-pill .caret { color: var(--muted); font-size: 0.7rem; } .cur-sym { font-weight: 800; color: var(--accent); } /* FIXED, not absolute. The header is sticky, so an absolutely-positioned popover is anchored to the top of the DOCUMENT: scroll down, open it, and it renders above the viewport — you had to scroll back to the top to see it. */ .locale-pop { position: fixed; right: 1rem; top: 4.2rem; z-index: 60; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; width: min(340px, calc(100vw - 2rem)); max-height: min(70vh, 32rem); overflow: auto; box-shadow: var(--shadow-md); } .locale-pop[hidden] { display: none; } .locale-pop h4 { margin: 0.2rem 0 0.6rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .locale-pop input { width: 100%; padding: 0.5rem 0.6rem; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); margin-bottom: 0.6rem; font-size: 16px; } .opt-grid { display: flex; flex-wrap: wrap; gap: 0.35rem; } /* Options are real links for language (so they can be opened in a new tab and read by a crawler) and
for currency — hence the explicit reset off the global link colour. Each is a distinct chip: a 130-currency list with no borders reads as a wall of text. */ .opt { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--line); border-radius: 9px; padding: 0.35rem 0.6rem; cursor: pointer; font-size: 0.85rem; color: var(--text); text-decoration: none; background: var(--card); white-space: nowrap; } .opt:visited { color: var(--text); } .opt:hover { border-color: var(--accent); color: var(--accent); } .opt.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 700; } .opt .cur-sym { font-weight: 800; } /* Full-width rule between the pinned currencies and the rest of the list. */ .opt-sep { flex: 1 0 100%; height: 1px; background: var(--line); margin: 0.45rem 0 0.15rem; } .locale-done { width: 100%; margin-top: 0.9rem; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 9px; padding: 0.6rem; font-weight: 800; cursor: pointer; font-family: inherit; font-size: 0.9rem; } .hist-head { margin-top: 2rem; color: var(--muted); } .acct-card.hist { opacity: 0.85; } /* --- account / login --- */ .login-form { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; } .login-form input { flex: 1; min-width: 220px; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 1rem; } .notice { background: var(--notice-bg); border: 1px solid var(--notice-line); padding: 0.9rem 1.1rem; border-radius: 10px; } .small { font-size: 0.8rem; } .account-shell { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } .account-side { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; display: grid; grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr); gap: 1rem; align-items: center; } .side-kicker { color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; } .side-email { font-size: 0.85rem; overflow-wrap: anywhere; } .side-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; } .side-nav a { display: flex; justify-content: space-between; gap: 0.75rem; color: var(--text); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.7rem; } .side-nav a:hover { background: var(--surface-hover); color: var(--accent); } .side-nav span { color: var(--muted); } .account-main { min-width: 0; } .dash-head, .section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .dash-head h2, .section-head h3 { margin: 0; } .dash-section { margin-top: 1.5rem; } .acct-head { display: flex; align-items: center; justify-content: space-between; } .acct-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .active-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .acct-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; } .active-card { display: flex; flex-direction: column; gap: 0.85rem; } .acct-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .acct-plan { font-weight: 700; } .badge { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap; } .bar { height: 8px; background: var(--sunken-2); border-radius: 999px; margin: 0.75rem 0 0.35rem; overflow: hidden; } .bar-fill { height: 100%; background: var(--accent); } .usage-panel { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: center; } .usage-value { font-size: 1.8rem; font-weight: 800; color: var(--accent); min-width: 4.5rem; } .renewal-state { border-top: 1px solid var(--line); padding-top: 0.75rem; min-height: 4rem; } .renewal-state p { margin: 0.25rem 0 0; } .acct-btn { display: inline-block; margin-top: 0.75rem; text-decoration: none; text-align: center; } .install-btn { display: inline-block; text-decoration: none; margin: 0.25rem 0.5rem 0.25rem 0; } .refund { margin-top: 1.5rem; } .txn-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .txn-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1rem; } .txn-title { font-weight: 700; } .txn-meta { display: flex; align-items: center; gap: 0.7rem; } .txn-price { color: var(--accent); font-weight: 800; white-space: nowrap; } .settings-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; } .support-banner { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1rem; color: var(--warn-text); } .support-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .support-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1rem; } .support-email { font-weight: 800; overflow-wrap: anywhere; } .support-open { flex: 0 0 auto; text-decoration: none; text-align: center; } .support-actions { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; justify-content: flex-end; } .support-actions form, .support-preview-form { margin: 0; } .support-preview { color: var(--warn-text); font-weight: 800; } .account-workspace { display: grid; gap: 1rem; } .account-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.15rem; } .account-hero h2 { margin: 0.1rem 0 0.25rem; font-size: 1.25rem; overflow-wrap: anywhere; } .account-hero p { max-width: 680px; } .account-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem; flex-wrap: wrap; } .account-section { display: grid; gap: 1rem; scroll-margin-top: 120px; } .esim-stack { display: grid; gap: 1rem; } .esim-command-card { display: grid; gap: 0.9rem; scroll-margin-top: 145px; } .esim-command-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16), var(--shadow-md); } .esim-command-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; position: relative; } .esim-title-block { min-width: 0; } .esim-title-block p { margin: 0.15rem 0 0; } .esim-title-line { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .compact { margin-top: 0; padding: 0.45rem 0.7rem; font-size: 0.86rem; } .tool-action { display: inline-flex; align-items: center; gap: 0.4rem; } .esim-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; } .esim-facts div { background: var(--sunken); border: 1px solid var(--line); border-radius: 9px; padding: 0.6rem; min-width: 0; } .fact-label { display: block; color: var(--muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; } .esim-facts strong { display: block; margin-top: 0.12rem; font-size: 0.86rem; overflow-wrap: anywhere; } .lifecycle { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; padding: 0; margin: 0; } .lifecycle li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.05rem 0.45rem; align-items: center; background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem; min-width: 0; } .lifecycle span { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 999px; background: var(--sunken-2); color: var(--muted); font-size: 0.75rem; font-weight: 900; } .lifecycle strong { font-size: 0.82rem; min-width: 0; } .lifecycle em { display: block; color: var(--muted); font-style: normal; font-size: 0.72rem; min-width: 0; overflow-wrap: anywhere; } .lifecycle .done span, .lifecycle .current span { background: var(--accent); color: var(--accent-ink); } .lifecycle .current { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.1); } .command-usage { border-top: 1px solid var(--line); padding-top: 0.85rem; } .action-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; } /* Pale-green variant of .primary — needs its own ink, since --accent-ink is white in light mode and would vanish against the pale background. */ .secondary-action { background: var(--accent-pale); color: var(--accent-pale-ink); } .inline-form { margin: 0; display: inline-flex; } .renewal-copy { background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem; color: var(--muted); font-size: 0.88rem; } .renewal-copy strong { color: var(--text); } .renewal-copy span { display: block; margin-top: 0.25rem; } .renewal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; } .renewal-controls { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 0.5rem; justify-content: end; } .renew-toggle { border: 1px solid var(--line); border-radius: 999px; background: var(--sunken-2); color: var(--muted); display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.65rem 0.32rem 0.32rem; font-weight: 900; cursor: pointer; } .renew-toggle span { display: block; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--muted); margin: 0; } .renew-toggle.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .renew-toggle.on span { background: var(--accent); } .threshold-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem; } .threshold-dual { display: inline-flex; align-items: end; gap: 0.45rem; color: var(--text); flex-wrap: wrap; } .threshold-dual label { display: grid; gap: 0.2rem; color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; } .threshold-dual input { width: 7rem; } .threshold-equals { padding-bottom: 0.5rem; color: var(--muted); font-weight: 900; } .account-dialog { width: min(520px, calc(100vw - 2rem)); max-height: min(760px, calc(100dvh - 2rem)); overflow: auto; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem; box-shadow: var(--shadow-lg); position: relative; } .account-dialog.wide { width: min(880px, calc(100vw - 2rem)); } .account-dialog::backdrop { background: var(--backdrop-strong); backdrop-filter: blur(4px); } .account-dialog h3 { margin: 0 2rem 0.25rem 0; } .dialog-close-form { position: absolute; top: 0.7rem; right: 0.75rem; margin: 0; } .dialog-close-form button { width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--line); background: var(--sunken); color: var(--muted); font-size: 1.2rem; cursor: pointer; } .dialog-form { display: grid; gap: 0.75rem; margin-top: 0.9rem; } .dialog-form .primary { justify-self: start; } .modal-plan-table { display: grid; gap: 0.4rem; margin-top: 1rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.45rem; background: var(--bg); min-width: 0; overflow-x: auto; } .modal-plan-table legend { padding: 0 0.25rem; color: var(--muted); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } .modal-plan-head, .modal-plan-row { display: grid; grid-template-columns: minmax(8rem, 1.35fr) minmax(4.8rem, .7fr) minmax(5rem, .75fr) minmax(5rem, .75fr) minmax(6.8rem, auto); gap: 0.55rem; align-items: center; } .modal-plan-head { color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; padding: 0.25rem 0.45rem; } .modal-plan-row { width: 100%; border: 1px solid transparent; background: var(--sunken); color: var(--text); border-radius: 9px; padding: 0.55rem; text-align: left; } .modal-plan-row.selected { border-color: var(--accent); background: var(--accent-soft); } .modal-plan-row strong, .modal-plan-row span { display: block; min-width: 0; } .modal-plan-main strong { overflow-wrap: anywhere; } .modal-plan-row .buy { width: 100%; white-space: nowrap; } .renew-table { overflow-x: auto; } .renew-row { cursor: pointer; } .renew-row input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .radio-dot { width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid var(--muted); justify-self: center; } .renew-row:has(input:checked) .radio-dot { border-color: var(--accent); background: radial-gradient(circle at center, var(--accent) 0 45%, transparent 48%); } .compact-days input { width: 4.5rem; } .delivery-account-cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; } .delivery-account-cta p { margin: 0.2rem 0 0; } .refund.install-manual { margin-top: 1rem; } .refund.install-manual details { margin: 0; } .refund.install-manual summary { cursor: pointer; color: var(--accent); font-weight: 800; } /* --- cart --- */ .nav-cart { color: var(--text); text-decoration: none; font-weight: 600; border: 1px solid var(--line); padding: 0.4rem 0.55rem; border-radius: 999px; min-width: 2.25rem; min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.15rem; position: relative; } .nav-cart:hover, .nav-cart.active, .nav-account.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .cart-count { display: inline-block; min-width: 1.1rem; text-align: center; margin-left: 0.15rem; background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: 0.75rem; padding: 0 0.35rem; font-weight: 800; } .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; } .cart-list { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: 1rem; } .cart-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; } .cart-item-main { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; } .cart-item-desc { font-weight: 700; } .cart-item-price { font-weight: 800; color: var(--accent); white-space: nowrap; } .cart-autorenew { margin-top: 0.6rem; border-top: 1px solid var(--line); padding-top: 0.6rem; } .cart-reuse-head { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.35rem; } .renewal-preview { background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem; margin: 0.45rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .renewal-preview dt { color: var(--muted); font-size: 0.72rem; } .renewal-preview dd { margin: 0.1rem 0 0; font-size: 0.85rem; font-weight: 700; } .cart-autorenew form, .ar-form { display: flex; gap: 0.5rem; align-items: center; } .toggle-form { margin: 0.2rem 0; } .switch-row { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font-weight: 700; color: var(--text); } .switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; } .switch input { opacity: 0; width: 0; height: 0; } .switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--sunken-2); border: 1px solid var(--line); transition: background .15s ease, border-color .15s ease; } .switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; border-radius: 50%; background: var(--muted); transition: transform .15s ease, background .15s ease; } .switch input:checked + span { background: var(--accent); border-color: var(--accent); } .switch input:checked + span::before { transform: translateX(18px); background: var(--accent-ink); } .cart-remove { margin-top: 0.5rem; } .cart-summary { position: sticky; top: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.25rem; margin-top: 0.5rem; } .cart-summary h3 { margin: 0 0 0.75rem; } .cart-total-row { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 800; } .cart-total-row:not(.grand) { font-size: 0.95rem; color: var(--muted); } .cart-total-row.grand { border-top: 1px solid var(--line); margin-top: 0.8rem; padding-top: 0.8rem; } .cart-total { color: var(--accent); } .summary-renew { background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem; margin: 0.8rem 0; } .summary-renew p { margin: 0.3rem 0 0; } .pay-now { width: 100%; margin: 0.75rem 0 0.5rem; } .ar-on, .ar-badge { color: var(--accent); font-weight: 700; font-size: 0.9rem; } .auto-renew { margin-top: 0.75rem; border-top: 1px solid var(--line); padding-top: 0.6rem; } /* auto-renew config (cart) */ .ar-config { margin-top: 0.75rem; } .ar-plans { border: 0; padding: 0; margin: 0.4rem 0; display: flex; flex-direction: column; gap: 0.4rem; } .ar-plans legend { padding: 0; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .ar-plan { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--sunken); } .ar-plan:hover { border-color: var(--muted); } .ar-plan.sel { border-color: var(--accent); background: var(--accent-soft); } .ar-plan input { accent-color: var(--accent); } .ar-plan-data { font-weight: 800; margin-right: auto; } .ar-trigger { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0; } .ar-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); } .ar-field select, .ar-field input { padding: 0.45rem 0.55rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 0.9rem; } .days-inline { display: flex; align-items: center; gap: 0.4rem; color: var(--text); } .days-inline input { width: 4rem; } /* order summary */ .summary-items { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .summary-items li { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; } .summary-name { min-width: 0; } .summary-price { font-weight: 700; white-space: nowrap; } .ar-chip { font-size: 0.66rem; font-weight: 800; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 0.05rem 0.4rem; vertical-align: middle; } /* dashboard eSIM card */ .usage-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; } .usage-nums { font-weight: 800; } .usage-foot { display: flex; justify-content: space-between; margin-top: 0.35rem; } .ar-line { display: flex; align-items: center; gap: 0.5rem; } .ar-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); display: inline-block; } .ar-dot.on { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18); } /* dashboard redesign — eSIM cards + sidebar nav */ .side-esim { display: block; padding: 0.4rem 0.6rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.9rem; } .side-esim:hover { background: var(--surface-hover); } .side-buy { color: var(--accent); font-weight: 700; } .review-banner { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px; padding: 0.9rem 1.1rem; margin-bottom: 1rem; font-size: 0.92rem; } .review-banner a { font-weight: 700; } .esim-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem; margin-bottom: 1.25rem; scroll-margin-top: 1rem; } .esim-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; } .esim-name-wrap { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .esim-name { margin: 0; font-size: 1.15rem; } .name-edit { position: relative; } .name-edit summary { list-style: none; cursor: pointer; opacity: 0.6; font-size: 0.85rem; } .name-edit summary::-webkit-details-marker { display: none; } .name-edit[open] summary { opacity: 1; } .name-edit form { position: absolute; z-index: 10; top: 1.4rem; left: 0; display: flex; gap: 0.4rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem; box-shadow: var(--shadow-sm); } .name-edit input { padding: 0.4rem 0.55rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); min-width: 12rem; } .esim-card .net-chips { margin: 0.5rem 0 0.75rem; } .esim-card .usage-panel { display: block; border-top: 1px solid var(--line); padding-top: 0.85rem; } .esim-install { display: inline-block; text-decoration: none; margin-top: 0.85rem; } .esim-manage { border-top: 1px solid var(--line); margin-top: 0.9rem; padding-top: 0.9rem; } .manage-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr); gap: 0.75rem; } .manage-panel { background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; padding: 0.85rem; min-width: 0; } .manage-panel.needs-review { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.12); } .manage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .manage-head p { margin: 0.15rem 0 0; } .manage-title { font-weight: 800; } .manage-status { display: flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; } .manage-action { display: inline-block; text-decoration: none; margin-top: 0.6rem; width: 100%; text-align: center; } .ar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ar-status { display: flex; align-items: center; gap: 0.5rem; } .ar-row.needs-review { outline: 2px solid rgba(var(--accent-rgb),.35); outline-offset: 6px; border-radius: 8px; } .ar-trigger-text { margin: 0.35rem 0 0; } .esim-manage details { margin-top: 0.75rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.75rem; background: var(--bg); } .esim-manage details[open] { padding-bottom: 0.85rem; } .esim-manage summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--accent); } .ar-form-full { margin-top: 0.75rem; } .ar-form-full .primary { margin-top: 0.5rem; } .confirm-form { margin-top: 0.6rem; } .addnow-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .addnow-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.65rem; background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; } .addnow-list form { display: flex; align-items: center; gap: 0.4rem; } .days-mini { width: 3.4rem; padding: 0.35rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); } /* --- top-up --- */ .net-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0; } .net-chip { font-size: 0.7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.05rem 0.5rem; } .net-chip.more { color: var(--accent); } .plan-card-renew { border-color: var(--accent); } .renew-tag { font-size: 0.72rem; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 0.1rem 0.6rem; align-self: flex-start; margin-bottom: 0.5rem; } .topup-btn { display: inline-block; text-decoration: none; text-align: center; margin-top: 0.75rem; } .delivery-card { display: grid; gap: 1rem; } .delivery-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .delivery-head h2 { margin: 0.1rem 0 0; } .delivery-usage { border-top: 1px solid var(--line); padding-top: 0.85rem; } .install-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; } .install-main h3 { margin: 0 0 0.25rem; } .install-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; } .qr-panel { display: grid; gap: 0.45rem; justify-items: center; text-align: center; } /* Deliberately NOT tokenised: a QR needs a white quiet zone to scan in both themes. */ .qr-panel img { border-radius: 10px; background: #fff; padding: 0.35rem; } .delivery-manage { margin-top: 0; } .install-manual { border: 1px solid var(--line); border-radius: 10px; padding: 0.65rem 0.85rem; background: var(--sunken); } .install-manual summary { cursor: pointer; color: var(--accent); font-weight: 700; } .acct-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .acct-btn.ghost { background: none; border: 1px solid var(--line); color: var(--text); padding: 0.55rem 1rem; border-radius: 10px; font-weight: 600; } .acct-btn.ghost:hover { border-color: var(--accent); color: var(--accent); } .topup .back { display: inline-block; margin-bottom: 0.5rem; color: var(--muted); text-decoration: none; } .topup .back:hover { color: var(--accent); } .topup .plan-card .buy-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; } .topup .buy { width: 100%; } .renew-form { border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.8rem; padding-top: 0.75rem; } .renew-set { align-self: flex-start; font-weight: 700; } .days-pick { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.9rem; } .days-pick input { width: 5rem; padding: 0.5rem 0.6rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 1rem; } .site-footer { max-width: 980px; margin: 2rem auto 3rem; padding: 0 1.5rem; color: var(--muted); font-size: 0.85rem; } .attribution { display: block; margin-top: 0.35rem; font-size: 0.7rem; opacity: 0.45; } .attribution a { color: inherit; } @media (max-width: 760px) { /* The header is sticky, so every row it occupies is permanently lost viewport. Drop the decorative tagline (the h1 below says it better) and let the controls sit on their own right-aligned row under the brand. */ .tagline { display: none; } /* Bottom sheet on phones: immune to scroll position and inside thumb reach, instead of a popover pinned under a header the user may have scrolled past. */ .locale-pop { top: auto !important; bottom: 0; left: 0 !important; right: 0 !important; width: auto; max-height: 72vh; border-radius: 16px 16px 0 0; padding: 1rem 1rem 1.4rem; box-shadow: 0 -12px 40px rgba(0, 0, 0, .28); } .locale-pill { padding: 0.35rem 0.6rem; font-size: 0.85rem; gap: 0.3rem; } .locale-pill .caret { display: none; } .opt-grid { max-height: none; } .site-header { flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; padding: 1rem; } .brand-wrap { order: 1; } .nav-right { order: 2; flex: 1 1 12rem; justify-content: flex-end; flex-wrap: wrap; gap: 0.35rem; margin-left: 0; } .nav-cart, .nav-account { padding: 0.35rem 0.65rem; } .tagline { order: 3; width: 100%; font-size: 0.82rem; } main { padding: 1rem; } .storefront-hero { grid-template-columns: 1fr; align-items: start; } .hero-points { justify-content: flex-start; } .trip form { align-items: stretch; } .field, .trip .primary { width: 100%; } .plan-grid { grid-template-columns: 1fr; } .plan-row { grid-template-columns: 1fr; gap: 0.75rem; } .plan-card-head { align-items: flex-start; } .plan-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plan-actions { justify-content: flex-start; } .account-side { grid-template-columns: 1fr; align-items: stretch; } .side-nav { justify-content: flex-start; } .side-nav a { flex: 1 1 auto; } .account-hero { grid-template-columns: 1fr; align-items: start; } .account-hero-actions { justify-content: flex-start; } .esim-command-head { padding-right: 3rem; } .delivery-account-cta { flex-direction: column; align-items: stretch; } .renewal-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .renewal-controls { grid-template-columns: auto auto; justify-content: flex-start; } .tool-action { position: absolute; top: 0; right: 0; width: 2.6rem; height: 2.6rem; justify-content: center; padding: 0; background: rgba(var(--accent-rgb),.12); border-color: var(--accent); color: var(--accent); } .tool-action svg { width: 20px; height: 20px; } .tool-action span { display: none; } .esim-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lifecycle { grid-template-columns: 1fr 1fr; } .action-strip .primary, .action-strip .acct-btn, .action-strip .inline-form, .action-strip .inline-form button { width: 100%; text-align: center; } .modal-plan-head, .modal-plan-row { min-width: 620px; } .modal-plan-row .buy, .dialog-form .primary { width: 100%; } .manage-grid { grid-template-columns: 1fr; } .delivery-head { flex-direction: column; } .install-panel { grid-template-columns: 1fr; } .qr-panel { justify-items: start; text-align: left; } .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } .cart-item-main { align-items: flex-start; } .renewal-preview { grid-template-columns: 1fr; } .dash-head, .section-head, .txn-row { align-items: flex-start; flex-direction: column; } .txn-meta { width: 100%; justify-content: space-between; } } @media (min-height: 880px) { .account-dialog.wide { max-height: none; overflow: visible; } } @media (max-width: 430px) { /* Five controls plus the wordmark cannot fit one row at this width, so stop pretending: give the controls their own full-width row instead of letting one of them strand. */ .nav-account .nav-ico { display: block; } .nav-account span { display: none; } .nav-account { padding: 0.4rem; min-width: 2.25rem; justify-content: center; } .nav-right { flex: 1 1 100%; gap: 0.3rem; } .site-header { padding: 0.5rem 0.85rem; gap: 0.35rem; } .brand { font-size: 1.2rem; } .locale-pill { padding: 0.3rem 0.55rem; font-size: 0.8rem; } .theme-toggle { width: 2rem; height: 2rem; } .nav-cart, .nav-account { padding: 0.3rem 0.5rem; min-width: 2rem; min-height: 2rem; } .renewal-controls { grid-template-columns: auto; align-items: start; } .renewal-controls .acct-btn { margin-top: 0; } } /* ---- organizational folders (dashboard eSIMs) ---- */ .folder-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.15rem; border-bottom: 1px solid var(--line); } .folder-head.depth-0 { margin-top: 0.6rem; } .folder-toggle { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0 0.15rem; width: 1.3rem; text-align: center; } .folder-toggle:hover { color: var(--accent); } .folder-name { font-weight: 700; } .folder-count { white-space: nowrap; } .unfiled-head .folder-name { color: var(--muted); font-weight: 600; } .folder-actions { margin-left: auto; display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; } .link.small { font-size: 0.82rem; text-decoration: none; } .link.small:hover { text-decoration: underline; } .link.danger { color: var(--danger); } .link.danger:hover { color: var(--danger-hover); } .folder-delete { display: inline; margin: 0; } .folder-child { min-width: 0; } .depth-1 { margin-left: 1.25rem; } .depth-2 { margin-left: 2.5rem; } .depth-3 { margin-left: 3.6rem; } .depth-4 { margin-left: 4.7rem; } .depth-5 { margin-left: 5.7rem; } .depth-6 { margin-left: 6.6rem; } .collapsed-hidden { display: none !important; } .move-form { margin: 0; } .move-label { display: inline-flex; align-items: center; gap: 0.4rem; } .move-label select { padding: 0.4rem 0.55rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 0.85rem; max-width: 13rem; } @media (max-width: 760px) { .depth-1, .folder-child.depth-1 { margin-left: 0.75rem; } .depth-2 { margin-left: 1.5rem; } .depth-3 { margin-left: 2.1rem; } .depth-4 { margin-left: 2.6rem; } .depth-5 { margin-left: 3rem; } .depth-6 { margin-left: 3.3rem; } .folder-actions { gap: 0.65rem; } }