/* ========================================================================== VPN Myanmar — style.css Two layouts: (default) and data-layout="desktop". boot.js sets the attribute from screen size + aspect ratio before first paint. Animations only touch opacity/transform (GPU-friendly, battery-friendly). ========================================================================== */ :root { /* Brand: green, black, white. The green is a fill colour — it does not have enough contrast for text on white, so --signal-ink is used for that. */ --paper: #ffffff; --mist: #f2f6f3; --ink: #0a0c0b; --graphite: #6a706c; --hair: #dce3de; --signal: #0dbb65; --signal-deep: #0aa457; --signal-ink: #077a42; --signal-glow: #35d98a; --erase: #0a0c0b; --night: #000000; --night-text: #ffffff; --night-muted: #9aa19c; /* System fonts: SF Pro on Apple, Segoe on Windows, Roboto on Android — zero downloads. Burmese falls back to each OS's Myanmar font. */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Myanmar", "Myanmar Sangam MN", "Myanmar Text", Padauk, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --nav-h: 52px; --gutter: 22px; --maxw: 1080px; } html[data-layout="desktop"] { --nav-h: 56px; --gutter: 40px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); } html.modal-open { overflow: hidden; } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.47; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: opacity 0.45s ease; } html[lang="my"] body { line-height: 1.85; } /* Hidden for a split second while layout + language are decided (see boot.js). */ html.is-loading body { opacity: 0; } /* Burmese has no spaces between words, so browsers wrap mid-word. main.js wraps each Burmese phrase in headings/buttons in .nobr, so lines only break at the spaces written in i18n.js. */ h1, h2, h3 { text-wrap: balance; } .nobr { white-space: nowrap; } img, svg { display: block; max-width: 100%; } a { color: var(--signal-ink); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid rgba(13, 187, 101, 0.55); outline-offset: 3px; border-radius: 8px; } .container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: #fff; } .skip-link:focus { top: 12px; } /* ---------- Scroll reveal ---------- */ html.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); } html.js .reveal.is-visible { opacity: 1; transform: none; } .d1 { --d: 0.08s; } .d2 { --d: 0.16s; } .d3 { --d: 0.24s; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 980px; background: var(--signal); color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .btn:hover { background: var(--signal-deep); text-decoration: none; } .btn:active { transform: scale(0.98); } .btn--small { min-height: 32px; padding: 0 14px; font-size: 14px; } .btn--quiet { background: transparent; color: var(--signal-ink); box-shadow: inset 0 0 0 1px var(--signal); } .btn--quiet:hover { background: rgba(13, 187, 101, 0.10); } .text-link { font-size: 17px; } /* ---------- Nav ---------- */ .scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; } .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .nav.is-scrolled { border-bottom-color: rgba(0, 0, 0, 0.08); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nav { background: var(--paper); } } .nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .brand:hover { text-decoration: none; } .brand svg { width: 33px; height: 18px; color: var(--signal); } .nav__links { display: none; } .nav__actions { display: flex; align-items: center; gap: 12px; } .nav__buy { display: none; } .lang { display: inline-flex; padding: 2px; border-radius: 980px; background: rgba(0, 0, 0, 0.06); } .lang button { min-height: 28px; padding: 3px 11px; border: 0; border-radius: 980px; background: transparent; color: var(--graphite); font-size: 13px; line-height: 1.6; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .lang button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); } html[data-layout="desktop"] .nav__links { display: flex; gap: 34px; } html[data-layout="desktop"] .nav__links a { color: var(--ink); font-size: 14px; opacity: 0.78; transition: opacity 0.2s ease; } html[data-layout="desktop"] .nav__links a:hover { opacity: 1; text-decoration: none; } html[data-layout="desktop"] .nav__buy { display: inline-flex; } /* ---------- Section 1: Hero / No-logs ---------- */ .hero { padding: calc(var(--nav-h) + 52px) 0 80px; text-align: center; overflow: hidden; } .hero__grid { display: grid; gap: 52px; } .hero__title { max-width: 12ch; margin: 0 auto; font-size: clamp(42px, 11.5vw, 58px); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; } html[lang="my"] .hero__title { max-width: 15ch; font-size: clamp(30px, 8.2vw, 40px); line-height: 1.45; letter-spacing: 0; } .hero__lead { max-width: 34em; margin: 20px auto 0; color: var(--graphite); font-size: 19px; line-height: 1.5; } html[lang="my"] .hero__lead { font-size: 16px; line-height: 1.95; } .hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin-top: 30px; } .hero__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 32px 0 0; padding: 0; list-style: none; font-size: 15px; } .hero__points li { display: flex; align-items: center; gap: 8px; } .hero__points li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; } /* The "log that erases itself" */ .ledger { width: 100%; max-width: 420px; margin: 0 auto; padding: 22px 22px 18px; border-radius: 28px; background: #fff; text-align: left; box-shadow: 0 40px 80px -40px rgba(29, 29, 31, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05); } .ledger__head { padding-bottom: 12px; border-bottom: 1px solid var(--mist); color: var(--graphite); font-size: 13px; font-weight: 600; } .ledger__rows { margin: 0; padding: 0; list-style: none; } .ledger__row { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--mist); transition: opacity 0.6s ease; transition-delay: calc(1.05s + var(--i) * 0.35s); } .ledger__row:nth-child(1) { --i: 0; } .ledger__row:nth-child(2) { --i: 1; } .ledger__row:nth-child(3) { --i: 2; } .ledger__row:nth-child(4) { --i: 3; } .ledger__kind { color: var(--graphite); font-size: 13px; } .ledger__row code { color: var(--ink); font-family: var(--font-mono); font-size: 14px; } .ledger__row::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--erase); transform: scaleX(0); transform-origin: left center; transition: transform 0.55s var(--ease-out); transition-delay: calc(0.6s + var(--i) * 0.35s); } .ledger.is-visible .ledger__row { opacity: 0.25; } .ledger.is-visible .ledger__row::after { transform: scaleX(1); } .ledger__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; font-size: 15px; font-weight: 600; } .ledger__count { display: inline-grid; font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ledger__count > span { grid-area: 1 / 1; text-align: right; transition: opacity 0.4s ease, transform 0.6s var(--ease-out); } .ledger__to { color: var(--signal-ink); opacity: 0; transform: translateY(45%); } .ledger.is-visible .ledger__from { opacity: 0; transform: translateY(-45%); transition-delay: 2.35s; } .ledger.is-visible .ledger__to { opacity: 1; transform: none; transition-delay: 2.4s; } .ledger__note { margin-top: 12px; color: var(--graphite); font-size: 13px; } html[data-layout="desktop"] .hero { display: flex; align-items: center; min-height: min(100vh, 920px); padding: calc(var(--nav-h) + 72px) 0 110px; text-align: left; } html[data-layout="desktop"] .hero__grid { grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: 72px; } html[data-layout="desktop"] .hero__title { margin: 0; max-width: 11ch; font-size: clamp(60px, 6.6vw, 88px); } html[data-layout="desktop"][lang="my"] .hero__title { max-width: 14ch; font-size: clamp(40px, 4.2vw, 54px); } html[data-layout="desktop"] .hero__lead { margin-left: 0; font-size: 21px; } html[data-layout="desktop"][lang="my"] .hero__lead { font-size: 18px; } html[data-layout="desktop"] .hero__cta, html[data-layout="desktop"] .hero__points { justify-content: flex-start; } html[data-layout="desktop"] .ledger { max-width: 440px; margin-right: 0; padding: 26px 28px 22px; } /* ---------- Shared section headings ---------- */ .section-title { max-width: 16ch; margin: 0 auto; font-size: clamp(34px, 9vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; text-align: center; } html[lang="my"] .section-title { max-width: 18ch; font-size: clamp(26px, 7vw, 32px); line-height: 1.5; letter-spacing: 0; } .section-lead { max-width: 34em; margin: 18px auto 0; color: var(--graphite); font-size: 19px; line-height: 1.5; text-align: center; } html[lang="my"] .section-lead { font-size: 16px; line-height: 1.95; } html[data-layout="desktop"] .section-title { max-width: 20ch; font-size: clamp(48px, 5vw, 64px); } html[data-layout="desktop"][lang="my"] .section-title { font-size: clamp(34px, 3.4vw, 44px); } html[data-layout="desktop"] .section-lead { font-size: 21px; } html[data-layout="desktop"][lang="my"] .section-lead { font-size: 18px; } /* ---------- Section 2: Speed ---------- */ .speed { padding: 96px 0; background: var(--night); color: var(--night-text); } .speed .section-lead { color: var(--night-muted); } .route { margin: 40px auto 0; } .route svg { width: 100%; height: auto; overflow: visible; } .route--wide { display: none; max-width: 780px; } .route--tall { max-width: 360px; } html[data-layout="desktop"] .route--wide { display: block; margin-top: 56px; } html[data-layout="desktop"] .route--tall { display: none; } .route__track { fill: none; stroke: rgba(255, 255, 255, 0.24); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) 0.3s; } .route.is-visible .route__track { stroke-dashoffset: 0; } .route__pulse { fill: none; stroke: var(--signal-glow); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.08 0.92; stroke-dashoffset: 1; opacity: 0; transition: opacity 0.4s ease 1.5s; } .route.is-visible .route__pulse { opacity: 1; animation: route-pulse 2.2s linear 1.5s infinite; } .route__dot { fill: #fff; } .route__dot--end { fill: var(--signal-glow); } .route__ring { fill: none; stroke: var(--signal-glow); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; } .route.is-visible .route__ring { animation: route-ring 2.2s var(--ease-out) 1.5s infinite; } /* Pause loops while off-screen */ .route:not(.is-running) .route__pulse, .route:not(.is-running) .route__ring { animation-play-state: paused; } .route text { fill: var(--night-text); font-family: var(--font-sans); font-size: 17px; font-weight: 600; } .route--wide text { font-size: 16px; } @keyframes route-pulse { to { stroke-dashoffset: 0; } } @keyframes route-ring { 0%, 20% { transform: scale(0.4); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } } .features { display: grid; max-width: 560px; margin: 48px auto 0; padding: 0; list-style: none; } .features li { padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); } .features h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; } .features p { margin: 6px 0 0; color: var(--night-muted); } html[lang="my"] .features h3 { font-size: 18px; letter-spacing: 0; } html[lang="my"] .features p { font-size: 15px; } html[data-layout="desktop"] .speed { padding: 140px 0; } html[data-layout="desktop"] .features { grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: none; margin-top: 72px; } html[data-layout="desktop"] .features li { padding: 24px 0 0; } /* ---------- Section 3: Pricing ---------- */ .pricing { padding: 96px 0 104px; background: var(--mist); } /* Mobile: swipeable carousel */ .plans { position: relative; display: flex; gap: 14px; margin: 44px calc(var(--gutter) * -1) 0; padding: 8px var(--gutter) 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; } .plans::-webkit-scrollbar { display: none; } .plan { display: flex; flex-direction: column; flex: 0 0 82%; max-width: 340px; padding: 28px 24px 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); scroll-snap-align: center; } .plan--featured { box-shadow: inset 0 0 0 2px var(--signal); } .plan__badge { align-self: flex-start; margin: 0 0 12px; padding: 3px 10px; border-radius: 980px; background: rgba(13, 187, 101, 0.14); color: var(--signal-ink); font-size: 12px; font-weight: 600; } .plan__name { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; } .plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 16px 0 0; } .plan__amount { font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .plan__currency { color: var(--graphite); font-size: 17px; font-weight: 600; } .plan__period { margin: 2px 0 0; color: var(--graphite); font-size: 15px; } .plan__features { display: grid; flex: 1; align-content: start; gap: 10px; margin: 22px 0 26px; padding: 18px 0 0; border-top: 1px solid var(--mist); list-style: none; font-size: 15px; } .plan__features li { display: flex; gap: 10px; } .plan__features li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 0.3em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m2.5 7.3 2.8 2.8 6.2-6.2' fill='none' stroke='%23077a42' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .plan__buy { width: 100%; } .plans__status { width: 100%; margin: 0; padding: 32px 0; color: var(--graphite); text-align: center; } .plans__status .btn { margin-top: 16px; } .plan-dots { display: flex; justify-content: center; gap: 2px; min-height: 24px; } .plan-dots button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } .plan-dots button::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); transition: background-color 0.25s ease, transform 0.25s ease; } .plan-dots button.is-active::before { background: var(--ink); transform: scale(1.15); } .pricing__note { margin: 20px 0 0; color: var(--graphite); font-size: 14px; text-align: center; } /* Desktop: all plans side by side */ html[data-layout="desktop"] .pricing { padding: 140px 0 150px; } html[data-layout="desktop"] .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; max-width: 1000px; margin: 64px auto 0; padding: 0; overflow: visible; } html[data-layout="desktop"] .plan { max-width: none; padding: 34px 30px 28px; } html[data-layout="desktop"] .plan-dots { display: none; } html[data-layout="desktop"] .pricing__note { margin-top: 36px; } /* ---------- Footer ---------- */ .footer { padding: 28px 0 calc(104px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--mist); color: var(--graphite); font-size: 12px; } .footer p { margin: 4px 0; } html[data-layout="desktop"] .footer { padding-bottom: 36px; } html[data-layout="desktop"] .footer__inner { display: flex; justify-content: space-between; gap: 24px; } /* ---------- Mobile bottom bar ---------- */ .mobile-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 20px; background: rgba(10, 12, 11, 0.9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: #fff; font-size: 15px; transform: translateY(calc(100% + 32px)); transition: transform 0.45s var(--ease-out); } .mobile-bar.is-shown { transform: none; } html[lang="my"] .mobile-bar { font-size: 14px; } html[data-layout="desktop"] .mobile-bar { display: none; } /* ---------- Buy now popup ---------- */ .modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, 0); color: var(--ink); overflow: hidden; transition: background-color 0.35s ease; } .modal[open] { display: flex; align-items: flex-end; justify-content: center; } .modal::backdrop { background: transparent; } .modal.is-open { background: rgba(0, 0, 0, 0.42); } /* Mobile: bottom sheet */ .modal__panel { position: relative; width: 100%; max-height: 90vh; padding: 10px 22px calc(26px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 24px 24px 0 0; background: #fff; transform: translateY(100%); transition: transform 0.42s var(--ease-out); } .modal.is-open .modal__panel { transform: none; } .modal__grabber { width: 36px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: var(--hair); } /* Desktop: centred card */ html[data-layout="desktop"] .modal[open] { align-items: center; } html[data-layout="desktop"] .modal__panel { max-width: 440px; padding: 34px 32px 30px; border-radius: 28px; opacity: 0; transform: scale(0.96); transition: transform 0.35s var(--ease-out), opacity 0.25s ease; } html[data-layout="desktop"] .modal.is-open .modal__panel { opacity: 1; transform: none; } html[data-layout="desktop"] .modal__grabber { display: none; } .modal__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--mist); color: var(--graphite); cursor: pointer; } .modal__close svg { width: 16px; height: 16px; } .modal__title { margin: 0; padding-right: 40px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } html[lang="my"] .modal__title { font-size: 20px; line-height: 1.6; letter-spacing: 0; } .modal__plan { margin: 6px 0 0; color: var(--graphite); font-size: 15px; } .modal__empty { margin: 16px 0 0; color: var(--graphite); font-size: 15px; } .contact-list { display: grid; gap: 10px; margin-top: 22px; } .contact { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--mist); color: var(--ink); font-size: 16px; font-weight: 600; transition: background-color 0.2s ease; } .contact:hover { background: var(--mist); text-decoration: none; } .contact__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; } .contact__icon svg { width: 20px; height: 20px; } .contact--facebook .contact__icon { background: var(--ink); } .contact--telegram .contact__icon { background: var(--ink); } .contact--viber .contact__icon { background: var(--ink); } .contact-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px 0 64px; color: var(--graphite); font-size: 14px; font-variant-numeric: tabular-nums; } .copy-btn { padding: 4px 12px; border: 0; border-radius: 980px; background: rgba(13, 187, 101, 0.14); color: var(--signal-ink); font-size: 13px; font-weight: 600; cursor: pointer; } /* ---------- Reduced motion: show everything, no movement ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } html.js .reveal { opacity: 1; transform: none; } } /* ---------- 404 page ---------- */ .notfound__inner { display: grid; place-content: center; min-height: 100vh; text-align: center; } .notfound__cta { margin-top: 28px; }