/* * Announcement top bar — thin, full-width banner rendered in normal flow at * the very top of (via wp_body_open), above the theme header. It is * intentionally NOT fixed: it scrolls away with the page. Brand-blue * background, white text, optional CTA. Complements the bottom-corner * welcome modal by surfacing the "Trouver mon courtier" offer in the first * viewport, on the opposite axis from the cookie banner so the two never * compete for the same corner. * * Pure CSS: there is no open/close state and no JS — the whole bar is either * a link (when a destination page is set) or a static strip. */ .ghq-match-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.75rem; width: 100%; box-sizing: border-box; padding: 0.85rem 1.25rem; background: #006FFF; color: #ffffff; font-family: 'Montserrat', system-ui, sans-serif; font-size: 0.9375rem; /* 15px — thin, but not razor-thin */ line-height: 1.3; text-align: center; text-decoration: none; transition: background-color 0.2s ease; } /* Only the linked variant reacts to hover/focus. */ a.ghq-match-topbar:hover, a.ghq-match-topbar:focus-visible { background: #000033; color: #ffffff; text-decoration: none; outline: none; } .ghq-match-topbar__text { font-weight: 500; letter-spacing: 0.01em; } .ghq-match-topbar__cta { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .ghq-match-topbar__cta-arrow { display: inline-block; flex: 0 0 auto; transition: transform 0.2s ease; } a.ghq-match-topbar:hover .ghq-match-topbar__cta-arrow, a.ghq-match-topbar:focus-visible .ghq-match-topbar__cta-arrow { transform: translateX( 3px ); } @media ( max-width: 600px ) { .ghq-match-topbar { padding: 0.7rem 1rem; font-size: 0.875rem; /* 14px */ } .ghq-match-topbar__cta { letter-spacing: 0.02em; } } @media ( prefers-reduced-motion: reduce ) { .ghq-match-topbar, .ghq-match-topbar__cta-arrow { transition: none; } }