/* ==================================================================== Ecoflix i18n locale bar Slim strip injected at the top of by /assets/i18n.js when the auto-detected locale isn't English + USD. Sits ABOVE the sticky header (which has z-index ~80), and pushes everything else down. ==================================================================== */ .i18n-bar { position: relative; z-index: 90; background: linear-gradient(180deg, rgba(168,243,65,.10), rgba(2,7,24,.96)); border-bottom: 1px solid rgba(168,243,65,.28); font-family: var(--display, 'Red Hat Display', system-ui, sans-serif); color: var(--bone, #f5f3ee); animation: i18n-in .35s ease-out; } .i18n-bar.is-out { animation: i18n-out .25s ease-in both } @keyframes i18n-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes i18n-out { to { opacity: 0; transform: translateY(-6px); max-height: 0; padding: 0; border: 0; } } .i18n-bar-inner { max-width: 1280px; margin: 0 auto; padding: 10px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Mini globe — stylized orthographic projection with a leaf pin dropped on the visitor's detected country. Matches the site's cartograph aesthetic (dashed graticule, soft leaf glow). */ .i18n-globe-wrap { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: radial-gradient(60% 60% at 35% 30%, rgba(168,243,65,.10), rgba(2,7,24,.55)); box-shadow: inset 0 0 0 1px rgba(168,243,65,.32), inset 0 -6px 14px rgba(0,0,0,.35); cursor: help; } .i18n-globe-svg { width: 36px; height: 36px; display: block; } .i18n-globe-disc { fill: rgba(2,7,24,.65); } .i18n-globe-ring { fill: none; stroke: rgba(168,243,65,.55); stroke-width: 1; } .i18n-globe-lat, .i18n-globe-lon { fill: none; stroke: rgba(168,243,65,.20); stroke-width: 0.7; stroke-dasharray: 1.5 2; } /* Leaf pin — outer glow + inner solid dot, with a gentle pulse. */ .i18n-globe-pin-glow { fill: rgba(168,243,65,.30); animation: i18n-globe-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .i18n-globe-pin { fill: var(--leaf, #A8F341); stroke: rgba(2,7,24,.55); stroke-width: 0.6; filter: drop-shadow(0 0 4px rgba(168,243,65,.65)); } @keyframes i18n-globe-pulse { 0%, 100% { opacity: .55; r: 5; } 50% { opacity: .95; r: 7; } } @media (prefers-reduced-motion: reduce) { .i18n-globe-pin-glow { animation: none; } } /* "You are in: France" pill that sits next to the lang/currency. */ .i18n-where { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(168,243,65,.06); border: 1px solid rgba(168,243,65,.22); color: var(--bone, #f5f3ee); font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; } .i18n-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .005em; color: var(--mist, #c0c4ce); flex: 1; min-width: 0; } .i18n-label b { color: var(--bone, #f5f3ee); font-weight: 700; letter-spacing: -.005em; } .i18n-label .i18n-prefix { font-family: var(--display, 'Red Hat Display', system-ui, sans-serif); font-weight: 700; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--leaf, #A8F341); margin-right: 4px; } .i18n-label .i18n-dot { color: var(--mist-2, #8e93a3); } .i18n-switch { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(168,243,65,.45); background: rgba(168,243,65,.08); color: var(--leaf, #A8F341); font-family: inherit; font-weight: 700; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, transform .15s; } .i18n-switch b { color: var(--bone, #f5f3ee); font-weight: 800; letter-spacing: .04em; } .i18n-switch svg { width: 12px; height: 12px; opacity: .9; } .i18n-switch:hover { background: rgba(168,243,65,.18); border-color: rgba(168,243,65,.7); transform: translateY(-1px); } .i18n-close { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.10); background: transparent; color: var(--mist, #c0c4ce); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s, transform .15s, background .2s; } .i18n-close svg { width: 14px; height: 14px; } .i18n-close:hover { border-color: rgba(168,243,65,.45); color: var(--leaf, #A8F341); background: rgba(168,243,65,.06); } @media (max-width: 640px) { .i18n-bar-inner { padding: 10px 14px; gap: 10px; } .i18n-label { font-size: 12px; width: 100%; order: 2; } .i18n-globe-wrap { order: 1; } .i18n-where { display: none; } /* country name lives in the globe tooltip on mobile */ .i18n-switch { order: 3; padding: 6px 10px; font-size: 10.5px; letter-spacing: .12em; flex: 1; justify-content: center; } .i18n-close { order: 4; } } /* When the bar is present, give the sticky header a hair of breathing room so its drop shadow doesn't cross the bar's bottom border. */ .i18n-bar + header.header { box-shadow: 0 8px 24px rgba(0,0,0,.18); } /* Tiny helper class for footnote-style currency disclaimers (used inline on /donate/ near the picker). */ .currency-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: var(--mist-2, #8e93a3); font-family: var(--display, 'Red Hat Display', system-ui, sans-serif); font-weight: 600; letter-spacing: .04em; } .currency-note::before { content: "⊕"; color: var(--leaf, #A8F341); }