/* Language suggestion banner + nav switcher. * * Ported from filters-venn's style.css "Language suggestion banner + * switcher" block (template-parts/language-suggestion-banner.php + * assets/js/lang.js's controller): rendered on every page, hidden by * default via inline style="display:none" on [data-pgt-lang-banner], * revealed by JS once the geo/cookie check resolves. * * Unlike filters-venn's .site-header (position: sticky, which a normal * block placed above it pushes down for free), this theme's .nav is * position: fixed — so the banner has to be fixed too (top: 0, above * everything) and .nav has to be told explicitly how far to drop while the * banner is showing. lang.js sets --pgt-banner-h (+ .has-lang-banner on * ) to the banner's rendered height; the rule right below the mobile * nav include reads it back. The mobile slide-down panel (#site-nav, * position: absolute; top: 100% inside .nav) needs no separate offset — it * is already positioned relative to .nav, so it moves with it for free. */ .lang-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 0, 0, .06); } body.has-lang-banner .nav { top: var(--pgt-banner-h, 0); } .lang-banner-row { display: none; align-items: center; justify-content: space-between; gap: 16px; max-width: 1280px; margin-inline: auto; padding: 10px 26px; } .lang-banner-mobile { display: flex; flex-direction: column; gap: 10px; padding: 12px 26px; } @media (min-width: 640px) { .lang-banner-row { display: flex; } .lang-banner-mobile { display: none; } } .lang-banner-message { margin: 0; font-size: 13px; line-height: 1.5; color: var(--sub); } .lang-banner-mobile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .lang-banner-mobile-top .lang-banner-message { padding-top: 2px; } .lang-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .lang-banner-mobile-actions { display: flex; align-items: center; gap: 10px; } .lang-banner-dropdown { position: relative; } .lang-banner-toggle { display: flex; align-items: center; gap: 8px; min-width: 160px; padding: 7px 10px 7px 12px; background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 11px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; } .lang-banner-toggle:hover { border-color: rgba(0, 0, 0, .25); } .lang-banner-selected { flex: 1; text-align: left; } .lang-banner-chevron { width: 10px; height: 10px; color: var(--sub); flex-shrink: 0; transition: transform 150ms ease; } .lang-banner-chevron.is-open { transform: rotate(180deg); } .lang-banner-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 11px; box-shadow: 0 12px 30px rgba(22, 24, 28, .16); overflow: hidden; } .lang-banner-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; background: none; border: 0; font: inherit; font-size: 13px; color: var(--sub); text-align: left; cursor: pointer; } .lang-banner-option:hover { background: var(--bg); } .lang-banner-check { width: 12px; height: 12px; flex-shrink: 0; color: transparent; } .lang-banner-check.is-active { color: var(--manual); } /* Same shape and feel as the header's Download button (.cta-btn.small in style.css): 11px radius, 8/16 padding, weight 650, blue shadow + hover lift — so the two buttons sitting in the same top strip read as one pattern, not a pill next to a rounded rectangle. */ .lang-banner-continue { padding: 8px 16px; border-radius: 11px; border: 0; background: var(--manual); color: #fff; box-shadow: 0 3px 10px rgba(10, 132, 255, .32); font: inherit; font-size: 13.5px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .lang-banner-continue:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10, 132, 255, .4); } @media (prefers-reduced-motion: reduce) { .lang-banner-continue { transition: none; } .lang-banner-continue:hover { transform: none; } } .lang-banner-dismiss { display: inline-flex; padding: 4px; background: none; border: 0; color: var(--sub); cursor: pointer; } .lang-banner-dismiss:hover { color: var(--ink); } .lang-banner-dismiss svg { width: 14px; height: 14px; } /* Nav language switcher (data-pgt-switcher, revealed by JS once the banner settles — mutually exclusive with it: at most one of the two is visible at a time). Placed inside #site-nav after the Blog link, so it is a flex item alongside the other primary links on desktop and, on mobile, a block row inside the slide-down panel (see nav-mobile.css). */ .lang-switcher { position: relative; } .lang-switcher-toggle { padding: 6px 10px; background: none; border: 1px solid rgba(0, 0, 0, .12); border-radius: 11px; font: inherit; font-size: 14px; font-weight: 600; color: var(--sub); cursor: pointer; } .lang-switcher-toggle:hover { border-color: rgba(0, 0, 0, .25); color: var(--ink); } .lang-switcher-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 96px; background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 11px; box-shadow: 0 12px 30px rgba(22, 24, 28, .16); overflow: hidden; } .lang-switcher-option { display: block; padding: 8px 14px; font-size: 14px; color: var(--sub); text-align: center; text-decoration: none; } .lang-switcher-option:hover { background: var(--bg); color: var(--ink); text-decoration: none; }