/* ============================================================ Costa Global Capital — footer language picker Drops up from the footer, dark glass pill, columned menu of native-name language buttons. Pairs with /assets/js/translate.js ============================================================ */ .cgc-lang-picker { position: relative; display: inline-flex; align-items: center; font-family: 'Inter', system-ui, sans-serif; } /* Centered footer slot — the pill sits at the foot of the footer, like the Dubai build */ .cgc-lang-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: center; width: 100%; margin: 28px 0 4px; } /* The Costa footer is dark (#050810) -> light pill so it stays visible there */ .mc-footer .cgc-lang-trigger, .cgc-lang-slot .cgc-lang-trigger { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #F5F0E8; } .mc-footer .cgc-lang-trigger:hover, .cgc-lang-slot .cgc-lang-trigger:hover { background: rgba(255,255,255,0.12); border-color: var(--mc-red, #E07856); color: #fff; } .cgc-lang-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; /* Light Asia footer: dark pill, token-driven. Dark-footer override below. */ background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.15); color: var(--text-primary, #1A1A1A); cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .cgc-lang-trigger:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary, #1A1A1A); border-color: var(--mc-red, #E07856); } /* Globe icon: masked SVG painted in currentColor so it matches the pill text (dark on light footer, cream on dark footer) — never a stray blue emoji. */ .cgc-lang-globe { width: 14px; height: 14px; font-size: 0; line-height: 0; flex-shrink: 0; background-color: currentColor; -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnPjxjaXJjbGUgY3g9JzEyJyBjeT0nMTInIHI9JzknLz48cGF0aCBkPSdNMyAxMmgxOCcvPjxwYXRoIGQ9J00xMiAzYTE0IDE0IDAgMCAxIDAgMTggMTQgMTQgMCAwIDEgMC0xOHonLz48L3N2Zz4=') center / contain no-repeat; mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnPjxjaXJjbGUgY3g9JzEyJyBjeT0nMTInIHI9JzknLz48cGF0aCBkPSdNMyAxMmgxOCcvPjxwYXRoIGQ9J00xMiAzYTE0IDE0IDAgMCAxIDAgMTggMTQgMTQgMCAwIDEgMC0xOHonLz48L3N2Zz4=') center / contain no-repeat; } /* Dark-footer adaptiveness (e.g. a dark footer market) */ .cgc-footer-dark .cgc-lang-trigger, [data-surface="dark"] .cgc-lang-trigger { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #F5F0E8; } .cgc-footer-dark .cgc-lang-trigger:hover, [data-surface="dark"] .cgc-lang-trigger:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--mc-red, #E07856); } .cgc-lang-chev { font-size: 9px; opacity: 0.65; transition: transform 0.22s ease; } .cgc-lang-picker.open .cgc-lang-chev { transform: rotate(180deg); } /* ─── Menu (drops UP since it's in the footer) ─── */ .cgc-lang-menu { position: absolute; bottom: calc(100% + 10px); left: 0; /* topmost of the z-scale; when open it is portaled to and positioned fixed by positionLangMenu(), so it clears every section/panel below it. */ z-index: var(--z-language-sheet, 13000); min-width: 540px; max-width: 92vw; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #14110D 0%, #0A0907 100%); border: 1px solid rgba(245, 237, 224, 0.14); box-shadow: 0 32px 72px -20px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); display: none; grid-template-columns: repeat(3, 1fr); gap: 4px; max-height: 380px; overflow-y: auto; } .cgc-lang-picker.open .cgc-lang-menu, .cgc-lang-menu.open { display: grid; } .cgc-lang-item { display: flex; align-items: center; padding: 9px 12px; background: transparent; border: 0; border-radius: 8px; color: rgba(245, 237, 224, 0.78); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; text-align: left; text-transform: none; transition: background 0.18s ease, color 0.18s ease; } .cgc-lang-item:hover { background: rgba(245, 237, 224, 0.08); color: #F5EDE0; } .cgc-lang-item:focus-visible { outline: 2px solid var(--mc-red, #C41E3A); outline-offset: -2px; } /* Active language (currently selected) — subtle accent + checkmark via ::after */ .cgc-lang-item.is-active { background: rgba(196,30,58,0.10); color: #F5EDE0; position: relative; } .cgc-lang-item.is-active::after { content: '✓'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--mc-red, #C41E3A); font-size: 12px; font-weight: 700; } /* ─── Floating fallback (only if no footer found on the page) ─── */ .cgc-lang-picker.cgc-lang-floating { position: fixed; bottom: 16px; left: 16px; z-index: 8999; } .cgc-lang-picker.cgc-lang-floating .cgc-lang-trigger { background: rgba(14,17,13,0.92); border-color: rgba(245,237,224,0.18); color: #F5EDE0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 32px -10px rgba(0,0,0,0.55); } /* ─── Language pill in the top nav (Dubai-style: pinned to the CTA in a flex group) ─── */ .cgc-lang-top { pointer-events: auto; margin-right: 8px; position: relative; } .cgc-lang-top .cgc-lang-trigger { padding: 10px 14px; border-radius: 999px; background: rgba(12,11,10,0.6); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,0.10); color: rgba(245,240,232,0.82); display: inline-flex; align-items: center; gap: 7px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .cgc-lang-top .cgc-lang-trigger:hover { background: rgba(20,18,16,0.78); color: #fff; border-color: rgba(255,255,255,0.22); } .cgc-lang-top .cgc-lang-globe { display: inline-flex; font-size: 13px; } .cgc-lang-top .cgc-lang-chev { font-size: 10px; transform: rotate(180deg); } .cgc-lang-top.open .cgc-lang-chev { transform: rotate(0deg); } /* menu drops DOWN from the nav, right-aligned (the footer version opens up) */ .cgc-lang-top .cgc-lang-menu { top: calc(100% + 10px); bottom: auto; left: auto; right: 0; min-width: 240px !important; grid-template-columns: 1fr 1fr !important; transform-origin: top right; } /* pill + CTA travel as one unit -> identical placement on every page */ .cgc-lang-ctagroup { display: inline-flex; align-items: center; gap: 10px; pointer-events: auto; } .cgc-lang-ctagroup .cgc-lang-top { margin-right: 0; } /* burger owns mobile -> hide the top-nav pill there (Phuket burger appears <=1100px) */ @media (max-width: 1100px) { .cgc-lang-top { display: none !important; } } /* ─── Drag handle (mobile-only, hidden on desktop) ─── */ .cgc-lang-handle { display: none; } /* Menu title — used to label the bottom sheet on mobile. */ .cgc-lang-menu-title { display: none; } /* ─── Mobile backdrop scrim (sibling element appended to ) ─── */ .cgc-lang-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 280ms ease; z-index: 11998; } @media (max-width: 767px) { .cgc-lang-backdrop { display: block; } .cgc-lang-backdrop.open { opacity: 1; pointer-events: auto; } } /* ─── Mobile bottom-sheet pattern (<768px) ─── */ @media (max-width: 767px) { /* Menu becomes a fixed bottom sheet, full viewport width. Always rendered (display:flex) but translated off-screen until .open. This avoids display toggling that breaks transitions. */ .cgc-lang-menu { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; min-width: 0; max-width: none; width: 100%; padding: 6px 0 max(20px, env(safe-area-inset-bottom)) 0; border-radius: 20px 20px 0 0; background: linear-gradient(180deg, #14110D 0%, #0A0907 100%); border-top: 1px solid rgba(245, 237, 224, 0.14); box-shadow: 0 -24px 60px -16px rgba(0,0,0,0.7); max-height: 70vh; max-height: 70dvh; /* iOS dynamic viewport — avoids address-bar overlap */ overflow-y: auto; /* the sheet itself scrolls */ -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */ overscroll-behavior: contain; /* don't propagate scroll to the page behind */ touch-action: pan-y; /* explicit: allow vertical pan inside the sheet */ display: flex !important; /* always flex; visibility via transform */ flex-direction: column; grid-template-columns: 1fr; /* override desktop's 3-col grid */ gap: 0; transform: translateY(100%); transition: transform 300ms cubic-bezier(0.22,0.61,0.36,1); z-index: 11999; pointer-events: auto; } .cgc-lang-picker.open .cgc-lang-menu, .cgc-lang-menu.open { transform: translateY(0); } /* Drag handle pill at the top of the sheet (visual affordance only) */ .cgc-lang-handle { display: block; flex: 0 0 auto; width: 44px; height: 4px; margin: 8px auto 8px; border-radius: 999px; background: rgba(245,237,224,0.28); } /* Sheet title row */ .cgc-lang-menu-title { display: block; flex: 0 0 auto; padding: 4px 20px 12px; color: rgba(245,237,224,0.55); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 1px solid rgba(245,237,224,0.08); margin-bottom: 6px; } .cgc-lang-item { /* Full-width row, 48px+ touch target */ width: 100%; min-height: 48px; padding: 14px 20px; font-size: 16px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: left; } .cgc-lang-item:last-child { border-bottom: 0; } .cgc-lang-item:active, .cgc-lang-item:hover { background: rgba(245,237,224,0.10); color: #F5EDE0; } .cgc-lang-item.is-active { background: rgba(196,30,58,0.10); color: #F5EDE0; position: relative; } .cgc-lang-item.is-active::after { content: '✓'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--mc-red, #C41E3A); font-size: 14px; font-weight: 700; } } /* Body scroll-lock when the sheet is open (mobile only). IMPORTANT: do NOT use `touch-action: none` here — it propagates to inner scroll containers and would block scrolling inside the sheet itself. `overflow: hidden` alone stops the page from scrolling behind. */ @media (max-width: 767px) { body.cgc-lang-open { overflow: hidden; } } /* ─── Translating... toast ─── */ .cgc-lang-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(8px); z-index: 13000; padding: 11px 22px; border-radius: 999px; background: rgba(14,17,13,0.94); color: #F5EDE0; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; border: 1px solid rgba(245,237,224,0.16); box-shadow: 0 16px 40px -12px rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; } .cgc-lang-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ─── Auto-detect banner (bottom-right, dismissable) ─── */ .cgc-lang-banner { position: fixed; bottom: 16px; right: 16px; z-index: 13500; max-width: 360px; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; background: linear-gradient(180deg, #14110D 0%, #0A0907 100%); color: #F5EDE0; border: 1px solid rgba(245,237,224,0.16); border-radius: 14px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; line-height: 1.45; box-shadow: 0 24px 60px -16px rgba(0,0,0,0.6), 0 6px 20px rgba(0,0,0,0.4); animation: cgcLangBannerIn 0.32s cubic-bezier(0.22,0.61,0.36,1); } @keyframes cgcLangBannerIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .cgc-lang-banner-msg { flex: 1; color: rgba(245,237,224,0.85); } .cgc-lang-banner-msg strong { color: #fff; font-weight: 700; } .cgc-lang-banner-cta { padding: 8px 14px; border-radius: 999px; border: 0; background: #C41E3A; color: #fff; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; transition: background 0.2s ease, transform 0.2s ease; } .cgc-lang-banner-cta:hover { background: #9B1530; transform: translateY(-1px); } .cgc-lang-banner-close { background: transparent; border: 0; color: rgba(245,237,224,0.5); cursor: pointer; width: 26px; height: 26px; font-size: 22px; line-height: 1; padding: 0; border-radius: 6px; flex-shrink: 0; transition: color 0.18s, background 0.18s; } .cgc-lang-banner-close:hover { color: #F5EDE0; background: rgba(245,237,224,0.08); } @media (max-width: 640px) { .cgc-lang-banner { left: 12px; right: 12px; max-width: none; } } /* ─── Hide Google's default UI artefacts so only OUR picker shows ─── */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, iframe.skiptranslate, .goog-te-gadget-icon, #goog-gt-tt, .goog-te-balloon-frame, .goog-text-highlight, .skiptranslate > iframe { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; position: absolute !important; top: -9999px !important; } /* Google sets body { top: 40px } via inline style to make room for the banner. Force it back to 0 via high-specificity rule + JS observer in translate.js. */ html body { top: 0 !important; position: static !important; } html { margin-top: 0 !important; } .goog-te-gadget { height: 0; overflow: hidden; } .goog-te-gadget > span > a { display: none; } .goog-te-gadget .goog-te-combo { margin: 0; } .goog-tooltip, .goog-tooltip:hover { display: none !important; }