/* Shared site header, mobile slide-out menu, and mobile bottom-nav footer. */ /* ---------- Smooth cross-page navigation (View Transitions API) ---------- Supported browsers cross-fade between pages instead of hard white-flashing. The header and bottom tab-bar get their own transition names so they stay anchored (app-shell feel) instead of fading with the page body. Feature detection is added via @supports to prevent issues in older browsers and Instagram's in-app browser. */ /* NOTE: The commented block below was the CSS View Transitions API. It only works in Chromium and flickered on Safari/Firefox/older devices and in-app browsers, so it's replaced by the plain opacity fade + loading bar further down (driven by the page-transition script in partials/head.ejs). */ /* @supports (view-transition-name: none) { @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; } .site-header { view-transition-name: site-header; } .modern-footer { view-transition-name: mobile-tabbar; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } } */ /* ---------- Gentle page fade-in (body content only) ---------- The main page content eases from transparent to opaque as it loads, so a new page opens smoothly instead of snapping in (and a slightly slow load looks intentional rather than glitchy). There is NO fade-out on navigation. The header and footer chrome are excluded so they stay put — only the content between them fades. opacity can't be "un-set" on a child of a faded parent, so we fade body's content children directly rather than itself, skipping the chrome (.app-promo-wrap, .site-header, .mobile-nav, .overlay from the header partial; .desktop-footer, .modern-footer from the footer partial). PERF — read before changing. An earlier version of this fade was JS-gated: the content sat at opacity:0 until JS added .pt-ready on DOMContentLoaded, so first paint and the LCP element were both stuck behind JS. That cost ~1–1.7s of FCP/LCP on mobile and was the main thing holding the Lighthouse score down, so it was disabled in V59.6. This version is a pure-CSS animation instead: it runs the moment the stylesheet is parsed, with no JS and no class to wait for, so content paints as soon as the CSS arrives (the fade costs one frame, not a round-trip through JS). Keep it that way — do NOT reintroduce a rule that holds content at opacity:0 pending a JS-applied class. NOTE: no animation-fill-mode here, deliberately. A filled (forwards/both) animation keeps applying its final opacity:1 after it ends, and animations beat normal declarations in the cascade — that silently overrode overlays that hide themselves with opacity:0 (e.g. .modal-overlay on the eSIMs page), pinning them visible and killing their fade-out. Without a fill mode the animation is transient: elements revert to their own styles the moment it finishes. */ @media (prefers-reduced-motion: no-preference) { body > *:not(.app-promo-wrap):not(.site-header):not(.mobile-nav):not(.overlay):not(.desktop-footer):not(.modern-footer) { animation: pt-fade-in 0.32s ease; } } @keyframes pt-fade-in { from { opacity: 0; } to { opacity: 1; } } :root { --primary-color: #034f5c; --text-color: #333; --light-gray: #f5f5f5; --white: #ffffff; --mobile-menu-width: 80%; } /* ---------- App promo banner (above header) ---------- */ /* Full-bleed strip; the inner row is constrained to the header width. No padding/height on the wrapper, so a hidden banner leaves no gap. */ .app-promo-wrap { width: 100%; } .app-promo-banner-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; } .app-promo-banner img { display: block; } /* ---------- Site header ---------- */ .site-header { background: var(--white); box-shadow: 0 2px 10px rgba(3, 79, 92, 0.08); /* relative (not sticky) so z-index applies: the view-transition-name makes the header a stacking context, and without a real z-index the Help dropdown inside it painted BELOW later page sections (search/hero). */ position: relative; z-index: 500; border-bottom: 1px solid #eef1f5; } .site-header .header-inner { max-width: 1200px; margin: 0 auto; padding: 0.6rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand-logo img { height: 40px; width: auto; display: block; } /* ---------- Desktop navigation ---------- */ .desktop-nav { display: flex; align-items: center; gap: 0.4rem; } .desktop-nav .dn-link { font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 500; color: #1d2327; text-decoration: none; transition: all 0.2s ease; white-space: nowrap; padding: 0.5rem 0.85rem; border-radius: 8px; display: inline-flex; align-items: center; gap: 0.45rem; background: none; border: none; cursor: pointer; } .desktop-nav .dn-link i:not(.dn-caret) { color: #008080; font-size: 0.9rem; } @media (hover: hover) and (pointer: fine) { .desktop-nav .dn-link:hover { background: #f0fbfb; color: #008080; } } /* Help dropdown */ .dn-dropdown { position: relative; } .dn-caret { font-size: 0.7rem !important; transition: transform 0.2s ease; margin-left: 1px; } @media (hover: hover) and (pointer: fine) { .dn-dropdown:hover .dn-caret { transform: rotate(180deg); } } .dn-dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; background: #fff; border: 1px solid #eef1f5; border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 35, 75, 0.12); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 600; } @media (hover: hover) and (pointer: fine) { .dn-dropdown:hover .dn-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } } /* Focus-within stays UNguarded so tapping/keyboard-opening the dropdown still reveals it on touch devices (where :hover never fires). */ .dn-dropdown:focus-within .dn-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dn-dropdown-menu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; font-family: 'Poppins', sans-serif; font-size: 0.88rem; font-weight: 500; color: #34455e; text-decoration: none; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; } .dn-dropdown-menu a i { color: #008080; width: 18px; text-align: center; } @media (hover: hover) and (pointer: fine) { .dn-dropdown-menu a:hover { background: #f0fbfb; color: #008080; } } /* My Account button */ .desktop-nav .dn-account { font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; padding: 0.55rem 1.1rem; border-radius: 50px; margin-left: 0.5rem; background: linear-gradient(165deg, #008181, #006b6b); display: inline-flex; align-items: center; gap: 0.45rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) and (pointer: fine) { .desktop-nav .dn-account:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 110, 110, 0.3); color: #fff; } } @media (max-width: 900px) { .desktop-nav { display: none; } } /* ---------- Mobile menu button ---------- */ .mobile-menu-btn { display: none; position: relative; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--white); background-color: #055867; border-radius: 8px; z-index: 100; padding: 7px 13px; transition: transform 0.2s; font-family: 'Poppins', sans-serif; } @media (hover: hover) and (pointer: fine) { .mobile-menu-btn:hover { transform: scale(1.05); } } @media (max-width: 900px) { .mobile-menu-btn { display: inline-block; } } /* ---------- Mobile slide-out navigation ---------- */ .mobile-nav { position: fixed; top: 0; left: 0; width: var(--mobile-menu-width); height: 100vh; background-color: var(--white); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: 3000; display: flex; flex-direction: column; } .mobile-nav.active { transform: translateX(0); } .mobile-menu-header { padding: 1.5rem; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .esimlogo { width: 150px; height: auto; } .mobile-menu { list-style: none; flex-grow: 1; overflow-y: auto; padding: 0; margin-bottom: 0; margin-top: 0px; } .mobile-menu li { border-bottom: 1px solid #eee; } .mobile-menu a { display: flex; align-items: center; padding: 1rem 1.5rem; text-decoration: none; color: var(--text-color); font-weight: 500; font-family: 'Poppins', sans-serif; } .mobile-menu a i { margin-right: 12px; width: 20px; text-align: center; color: var(--primary-color); } .mobile-menu-footer { padding: 1rem; border-top: 1px solid #eee; margin-top: auto; margin-bottom: 60px; display: none; } .mobile-menu .lang-switch-item { border-bottom: none !important; margin-top: 20px; } .logout-btn { display: block; width: 100%; padding: 0.75rem; background-color: var(--light-gray); border: none; border-radius: 4px; color: var(--text-color); font-weight: 500; cursor: pointer; text-align: center; font-size: 0.9rem; font-family: 'Poppins', sans-serif; text-decoration: none; } .logout-btn i { margin-right: 8px; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .overlay.active { opacity: 1; visibility: visible; } .close-btn { background: none; border: none; font-size: 1.8rem; cursor: pointer; color: #055867 !important; background-color: white !important; padding: 0.5rem; margin: -0.5rem; transition: transform 0.2s; line-height: 1; } @media (hover: hover) and (pointer: fine) { .close-btn:hover { transform: scale(1.1); } } /* ---------- Mobile bottom-nav footer ---------- */ .modern-footer { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } .bottom-nav { background: #ffffff; box-shadow: 0 -2px 8px rgb(0 0 0 / 13%); padding: 5px 0px 8px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .bottom-nav.hidden { transform: translateY(100%); opacity: 0; pointer-events: none; } .nav-menu { display: flex; justify-content: space-around; align-items: center; max-width: 600px; margin: 0 auto; position: relative; gap: 4px; } .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #4a5568; font-size: 11px; font-weight: 500; padding: 6px 8px 4px; border-radius: 8px; transition: all 0.2s ease; position: relative; z-index: 2; flex: 1; max-width: 70px; letter-spacing: 0.2px; box-sizing: border-box; } @media (hover: hover) and (pointer: fine) { .nav-item:hover { color: #034f5c; background: rgba(3, 79, 92, 0.05); } } .nav-item.active { color: #034f5c; font-weight: 600; } .nav-icon { margin-bottom: 2px; position: relative; transition: transform 0.2s ease; width: 22px; height: 22px; } .nav-icon svg { width: 100%; height: 100%; } @media (hover: hover) and (pointer: fine) { .nav-item:hover .nav-icon { transform: translateY(-1px); } } .nav-item.active .nav-icon { color: #008080; } .nav-label { font-size: 13px; font-weight: 800; white-space: nowrap; transition: color 0.2s ease; } /* Active-tab underline is a pure-CSS pseudo-element on the active item, so it renders instantly with the server-marked active tab — no JS measurement, no flash/slide on each page load. The old floating .nav-indicator is retired. */ .nav-indicator { display: none; } .nav-item.active::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 34px; height: 3px; background: #008080; border-radius: 2px 2px 0 0; } .logged-in-menu, .logged-out-menu { display: none; } .logged-in-menu.active, .logged-out-menu.active { display: flex; } @media (prefers-color-scheme: dark) { .bottom-nav { background: #ffffff; border-top-color: rgba(3, 79, 92, 0.3); } .nav-item { color: #616a76; } @media (hover: hover) and (pointer: fine) { .nav-item:hover { color: #034f5c; background: rgba(3, 79, 92, 0.2); } } .nav-item.active { color: #008080; } .nav-indicator { background: #008080; } } @media (min-width: 769px) { .modern-footer { display: none; } } /* ---------- Desktop footer (shown ≥769px only; mobile keeps the bottom nav) ---------- Four bands, all sharing the same 1180px content width so their edges line up: a trust strip, the link grid, and the legal/payments bar. The teal glow behind them is painted by ::before rather than on the footer itself, so the element keeps a flat solid background as the fallback if gradients don't render. */ .desktop-footer { display: none; } @media (min-width: 769px) { .desktop-footer { display: block; position: relative; /* isolation is load-bearing, not decorative: the ::before glow layer sits at z-index:-1, and without a stacking context here that negative index would escape to the root and paint BEHIND this element's own solid background, hiding the gradient entirely. */ isolation: isolate; overflow: hidden; background: #033f4c; color: #a9cccc; margin-top: 0; font-family: 'Poppins', 'Segoe UI', sans-serif; } /* Two soft teal light sources over a deep vertical gradient. z-index:-1 puts it above the footer's flat fallback background but under all the content. */ .desktop-footer::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 380px at 6% -30%, rgba(0, 195, 190, 0.26), transparent 62%), radial-gradient(760px 340px at 94% -10%, rgba(0, 130, 175, 0.22), transparent 66%), linear-gradient(180deg, #045567 0%, #033f4c 46%, #022a34 100%); } /* Brand hairline across the very top edge, fading out at both ends */ .desktop-footer::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(0, 208, 200, 0) 0%, rgba(0, 208, 200, 0.55) 25%, rgba(0, 208, 200, 0.55) 75%, rgba(0, 208, 200, 0) 100%); } /* ----- Trust strip ----- */ .df-trust { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .df-trust-inner { max-width: 1180px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .df-trust-item { display: flex; align-items: center; gap: 14px; } .df-trust-item + .df-trust-item { border-left: 1px solid rgba(255, 255, 255, 0.07); padding-left: 28px; } .df-trust-icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #6fe3dc; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); } .df-trust-icon svg { width: 21px; height: 21px; display: block; } .df-trust-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .df-trust-text strong { color: #ffffff; font-size: 14.5px; font-weight: 600; } .df-trust-text small { color: #8fb6b8; font-size: 12.5px; } /* ----- Link grid ----- */ .df-inner { max-width: 1180px; margin: 0 auto; padding: 46px 24px 34px; display: grid; grid-template-columns: 2.1fr 1fr 1fr 1.2fr; gap: 36px; } .df-logo { display: inline-block; } .df-brand img { height: 40px; width: auto; margin-bottom: 18px; display: block; } .df-brand p { color: #9fc3c3; font-size: 13.7px; line-height: 1.7; max-width: 340px; margin: 0 0 22px; } .df-social { display: flex; gap: 10px; } .df-social a { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.11); color: #d3ecec; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 15px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) and (pointer: fine) { .df-social a:hover { background: linear-gradient(165deg, #00a5a5, #007878); border-color: transparent; color: #ffffff; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 150, 150, 0.3); } } /* Column headings: small caps with a short teal underline */ .df-col h4, .df-app h4 { position: relative; color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 6px 0 18px; padding-bottom: 10px; } .df-col h4::after, .df-app h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #00d0c8, rgba(0, 208, 200, 0)); } .df-col a { display: block; color: #9fc3c3; text-decoration: none; font-size: 13.7px; padding: 6px 0; transition: color 0.2s ease, transform 0.2s ease; } @media (hover: hover) and (pointer: fine) { .df-col a:hover { color: #ffffff; transform: translateX(4px); } } /* ----- App / contact column ----- */ .df-store { display: flex; align-items: center; gap: 10px; max-width: 210px; margin-bottom: 10px; padding: 8px 14px 8px 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.11); color: #e2f3f3; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .df-store img { width: 26px; height: 26px; border-radius: 7px; display: block; } @media (hover: hover) and (pointer: fine) { .df-store:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(111, 227, 220, 0.4); transform: translateY(-2px); } } .df-mail { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; color: #9fc3c3; font-size: 13.4px; text-decoration: none; transition: color 0.2s ease; } .df-mail i { color: #6fe3dc; } @media (hover: hover) and (pointer: fine) { .df-mail:hover { color: #ffffff; } } /* ----- Legal / payments bar ----- */ .df-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); max-width: 1180px; margin: 0 auto; padding: 18px 24px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12.8px; color: #7ea6a6; } .df-bottom a { color: #7ea6a6; text-decoration: none; transition: color 0.2s ease; } @media (hover: hover) and (pointer: fine) { .df-bottom a:hover { color: #ffffff; } } .df-pay { display: flex; align-items: center; gap: 11px; } .df-pay i { font-size: 22px; color: #9fc3c3; opacity: 0.7; } } /* Below ~1080px the four columns get too narrow, so the brand block takes a full row of its own and the three link columns share the row underneath. */ @media (min-width: 769px) and (max-width: 1079px) { .df-inner { grid-template-columns: repeat(3, 1fr); gap: 28px 32px; } .df-brand { grid-column: 1 / -1; } .df-brand p { max-width: 560px; } } @media (min-width: 769px) and (max-width: 899px) { .df-trust-inner { padding: 20px 24px; } .df-trust-item { gap: 11px; } .df-trust-item + .df-trust-item { padding-left: 18px; } .df-trust-text strong { font-size: 13.5px; } .df-trust-text small { font-size: 11.8px; } .df-bottom { flex-direction: column; align-items: flex-start; } } /* Keep page content clear of the fixed bottom bar on mobile */ @media (max-width: 768px) { body { padding-bottom: 70px; } } @media (max-width: 380px) { .nav-item { padding: 4px 6px 2px; font-size: 9px; } .nav-label { font-size: 8px; } .nav-icon { width: 20px; height: 20px; } .nav-indicator { width: 35px; } } .nav-item[data-active="true"] .nav-icon { color: #008080; } .nav-item, .nav-icon, .nav-label { transition: all 0.2s ease; } /* ---------- Language switcher ---------- */ .lang-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } /* Desktop dropdown variant: current-language pill that opens a menu with all locales (the old EN|AL toggle doesn't scale to 8 languages). */ .lang-dropdown { position: relative; display: inline-flex; margin-right: 0.5rem; /* sits on the LEFT of the desktop nav */ } .lang-dropdown .lang-current { display: inline-flex; align-items: center; gap: 0.35rem; font-family: 'Poppins', sans-serif; font-size: 0.78rem; font-weight: 600; color: #2a6a6a; background: #f0fbfb; border: 1px solid #cfe6e6; border-radius: 50px; padding: 0.35rem 0.65rem; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } @media (hover: hover) and (pointer: fine) { .lang-dropdown .lang-current:hover { background: #e0f4f4; color: #008080; } } .lang-dropdown .lang-caret { font-size: 0.6rem; } .lang-dropdown .lang-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1200; min-width: 160px; padding: 0.35rem; background: #fff; border: 1px solid #cfe6e6; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } @media (hover: hover) and (pointer: fine) { .lang-dropdown:not(.lang-dropdown-mobile):hover .lang-menu { display: block; } } /* Focus-within stays UNguarded so a tap still opens the language menu on touch. */ .lang-dropdown:not(.lang-dropdown-mobile):focus-within .lang-menu { display: block; } /* Tap-toggled (nav.js adds .open) — the mobile variant relies on this only, so touch taps don't fight the sticky hover state. */ .lang-dropdown.open .lang-menu { display: block; } .lang-dropdown .lang-menu .lang-opt { display: flex; align-items: center; gap: 0.5rem; font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 600; color: #2a6a6a; text-decoration: none; padding: 0.45rem 0.6rem; border-radius: 8px; line-height: 1; transition: background 0.2s ease, color 0.2s ease; } @media (hover: hover) and (pointer: fine) { .lang-dropdown .lang-menu .lang-opt:hover { background: #e0f4f4; color: #008080; } } .lang-dropdown .lang-menu .lang-opt.active { background: linear-gradient(165deg, #008181, #006b6b); color: #fff; } /* Mobile variant: same dropdown as desktop, but inside the slide-out menu. It sits at the BOTTOM of the menu, so the list opens UPWARD (drop-up) over the items above it instead of running off the bottom; nav.js toggles .open on tap. */ .lang-switch-item { border-bottom: none; padding: 0.5rem 0; } .lang-dropdown-mobile { display: inline-flex; margin: 0.25rem 1.5rem; } .lang-dropdown-mobile .lang-menu { top: auto; bottom: 100%; margin-bottom: 0.4rem; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); /* On short screens (landscape phones) the drop-up can't extend past the top of the slide-out menu — cap it and scroll inside instead. */ max-height: 55vh; overflow-y: auto; }