/* ═══════════════════════════════════════════════════════════════════ Country Selector Popup + Navbar Chip Scoped under .fcs-* so it can't collide with site CSS. Brand tokens pulled from country.css (--cy-orange #fc5007, etc.). Loaded from web-master when COUNTRY_SELECTOR_ENABLED=true. ═══════════════════════════════════════════════════════════════════ */ /* ── Modal overlay ──────────────────────────────────────────────── */ .fcs-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(26, 14, 8, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .fcs-overlay.fcs-open { display: flex; animation: fcs-fade .22s ease-out; } @keyframes fcs-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes fcs-pop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } } @keyframes fcs-slide { from { transform: translateY(100%) } to { transform: none } } .fcs-modal { background: #fff; width: 100%; max-width: 440px; border-radius: 22px; box-shadow: 0 30px 90px rgba(26, 14, 8, .4); overflow: hidden; animation: fcs-pop .32s cubic-bezier(.2, .8, .2, 1); position: relative; display: flex; flex-direction: column; max-height: calc(100vh - 40px); color: #3f2016; } .fcs-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(63, 32, 22, .06); color: #3f2016; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; padding: 0; } .fcs-close:hover { background: rgba(63, 32, 22, .12); transform: rotate(90deg); } .fcs-hero { padding: 44px 32px 28px; text-align: center; background: linear-gradient(180deg, #fdf6ef 0%, #fff 100%); border-bottom: 1px solid #e7dcd0; } .fcs-hero--plain { padding: 36px 32px 20px; } .fcs-flag { font-size: 4.8rem; line-height: 1; display: inline-block; margin-bottom: 18px; filter: drop-shadow(0 8px 18px rgba(26, 14, 8, .18)); } .fcs-brand { font-family: 'NT Wagner', Georgia, serif; font-size: 1.1rem; letter-spacing: 3px; color: #3f2016; margin: 0 0 10px; text-transform: uppercase; } .fcs-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #8a7a70; margin: 0 0 8px; } .fcs-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.75rem; line-height: 1.15; color: #3f2016; margin: 0; } .fcs-title-plain { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: #3f2016; margin: 0 0 8px; } .fcs-sub { font-size: .85rem; color: #5a4a42; margin: 0; line-height: 1.5; } .fcs-body { padding: 24px 24px 22px; flex: 0 0 auto; } .fcs-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 20px; background: #fc5007; color: #fff; border-radius: 14px; text-decoration: none; font-size: 1rem; font-weight: 700; letter-spacing: .3px; transition: all .2s; box-shadow: 0 8px 22px rgba(252, 80, 7, .3); border: 0; font-family: inherit; } .fcs-cta:hover { background: #e04604; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(252, 80, 7, .4); text-decoration: none; } .fcs-cta:active { transform: translateY(0); } .fcs-cta:focus-visible { outline: 3px solid rgba(252, 80, 7, .35); outline-offset: 3px; } .fcs-cta svg { width: 16px; height: 16px; transition: transform .2s; } .fcs-cta:hover svg { transform: translateX(3px); } .fcs-change { margin-top: 14px; text-align: center; } .fcs-change-btn { background: none; border: 0; padding: 8px 12px; font-size: .85rem; font-weight: 500; color: #8a7a70; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; font-family: inherit; } .fcs-change-btn:hover { color: #3f2016; } .fcs-list { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .2s ease; border-top: 1px solid #e7dcd0; } .fcs-modal.is-listing .fcs-list { max-height: 55vh; opacity: 1; overflow-y: auto; } .fcs-modal.is-listing .fcs-body { padding-bottom: 8px; } /* Plain-hero variant is always in list view — no top border on the list because the hero transitions directly into it. */ .fcs-hero--plain + .fcs-list { border-top: 0; max-height: 55vh; opacity: 1; overflow-y: auto; } .fcs-list-inner { padding: 10px 10px 14px; } .fcs-country { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; text-decoration: none; color: #3f2016; transition: background .15s; font-size: .92rem; } .fcs-country:hover { background: #fdf6ef; color: #3f2016; text-decoration: none; } .fcs-country.is-current { background: rgba(252, 80, 7, .08); color: #fc5007; font-weight: 600; } .fcs-country-flag { font-size: 1.4rem; line-height: 1; flex-shrink: 0; } .fcs-country-name { flex: 1; } .fcs-country-hint { font-size: .7rem; color: #8a7a70; font-weight: 500; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; } .fcs-divider { font-size: .62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8a7a70; padding: 14px 14px 6px; } /* Mobile — bottom sheet */ @media (max-width: 500px) { .fcs-overlay { padding: 0; align-items: flex-end; } .fcs-overlay.fcs-open .fcs-modal { animation: fcs-slide .3s cubic-bezier(.2, .8, .2, 1); } .fcs-modal { max-width: 100%; border-radius: 22px 22px 0 0; max-height: 92vh; } .fcs-flag { font-size: 4.2rem; } .fcs-title { font-size: 1.5rem; } .fcs-hero { padding: 38px 24px 24px; } } /* ── Navbar chip ────────────────────────────────────────────────── */ .fcs-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(63, 32, 22, .06); border: 1px solid rgba(63, 32, 22, .12); color: #3f2016; font-size: .78rem; font-weight: 600; letter-spacing: .4px; text-decoration: none; transition: all .2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; white-space: nowrap; } .fcs-chip:hover { background: rgba(252, 80, 7, .08); border-color: rgba(252, 80, 7, .3); color: #fc5007; text-decoration: none; } .fcs-chip-flag { font-size: 1rem; line-height: 1; } .fcs-chip-label { line-height: 1; } /* Mobile chip slot — renders the country chip inside .nav-menu next to the hamburger so it stays reachable on phones. Desktop hides the slot; desktop chip continues to live in #navbar-list via d-none d-lg-flex. */ .fcs-chip-mobile-slot { display: inline-flex; align-items: center; margin-inline-end: 10px; } .fcs-chip-mobile-slot .fcs-chip { padding: 5px 10px; font-size: .72rem; } @media (min-width: 992px) { .fcs-chip-mobile-slot { display: none !important; } }