/* Utility bar — language switcher above the main header. * * Design: a globe affordance + a small segmented "pill" selector so it reads * unmistakably as a language picker (not just three loose links). The active * language is a filled cobalt pill; the others are quiet until hovered. * Tokens mirror the brand palette (Italian Cobalt #1551C1 / Hairline #E8ECF3 / * Press Black #2D2F34 / Mill Cream #F8F9FA / Neutral #767C89). * * The desktop bar shows only on the full-nav breakpoint (>= 1200px). Below that * the burger menu is active and the same selector is rendered inside it * (.navbar-mobile-collapse__lang), so the two never overlap. * * Active language is detected via aria-current="page" (the language block marks * every link is-active for cache reasons; only the current link is aria-current). */ /* ---- Desktop bar ------------------------------------------------------- */ .utility-bar { background-color: #F8F9FA; border-bottom: 1px solid #E8ECF3; position: relative; z-index: 10; } .utility-bar__inner { display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-height: 40px; padding: 6px 24px; max-width: 1320px; margin: 0 auto; } /* Globe icon to the left of the selector — universal language affordance. */ .utility-bar__inner::before { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; content: 'language'; font-size: 19px; line-height: 1; color: #767C89; flex-shrink: 0; } .utility-bar .block, .utility-bar .region { margin: 0; padding: 0; } /* The segmented container. */ .utility-bar ul.language-switcher-language-url, .utility-bar ul.links { list-style: none; margin: 0; padding: 3px; display: inline-flex; align-items: center; gap: 2px; background-color: #FFFFFF; border: 1px solid #E3E8F0; border-radius: 999px; } .utility-bar ul.language-switcher-language-url li, .utility-bar ul.links li { display: inline-flex; align-items: center; } /* Each language = a pill. */ .utility-bar ul.language-switcher-language-url a, .utility-bar ul.links a { display: inline-block; color: #5A616E; text-decoration: none; text-transform: uppercase; letter-spacing: 0.10em; font-size: 11px; font-weight: 600; line-height: 1; padding: 7px 14px; border-radius: 999px; transition: background-color 0.18s ease, color 0.18s ease; } .utility-bar ul.language-switcher-language-url a:hover, .utility-bar ul.links a:hover { background-color: #F0F3F8; color: #1551C1; } .utility-bar ul.language-switcher-language-url a:focus-visible, .utility-bar ul.links a:focus-visible { outline: 2px solid #1551C1; outline-offset: 2px; } /* Active language — filled cobalt pill. * The language block marks EVERY link is-active / aria-current (the links all * resolve to ), so those cannot single out the current language. We key * off instead, matched against the per-item langcode on the
  • . */ html[lang="it"] .utility-bar li[data-drupal-language="it"] a, html[lang="en"] .utility-bar li[data-drupal-language="en"] a, html[lang="fr"] .utility-bar li[data-drupal-language="fr"] a { background-color: #1551C1; color: #FFFFFF !important; pointer-events: none; cursor: default; } /* ---- Mobile / tablet selector (inside the burger menu) ----------------- */ .navbar-mobile-collapse__lang { display: none; align-items: center; gap: 10px; padding: 18px 0 22px; } .navbar-mobile-collapse__lang::before { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; content: 'language'; font-size: 20px; line-height: 1; color: #767C89; flex-shrink: 0; } .navbar-mobile-collapse__lang ul.language-switcher-language-url, .navbar-mobile-collapse__lang ul.links { list-style: none; margin: 0; padding: 4px; display: inline-flex; align-items: center; gap: 4px; background-color: #F8F9FA; border: 1px solid #E3E8F0; border-radius: 999px; } .navbar-mobile-collapse__lang ul.language-switcher-language-url li, .navbar-mobile-collapse__lang ul.links li { display: inline-flex; align-items: center; } .navbar-mobile-collapse__lang ul.language-switcher-language-url a, .navbar-mobile-collapse__lang ul.links a { display: inline-block; color: #2D2F34; text-decoration: none; text-transform: uppercase; letter-spacing: 0.10em; font-size: 13px; font-weight: 600; line-height: 1; padding: 10px 18px; border-radius: 999px; transition: background-color 0.18s ease, color 0.18s ease; } html[lang="it"] .navbar-mobile-collapse__lang li[data-drupal-language="it"] a, html[lang="en"] .navbar-mobile-collapse__lang li[data-drupal-language="en"] a, html[lang="fr"] .navbar-mobile-collapse__lang li[data-drupal-language="fr"] a { background-color: #1551C1; color: #FFFFFF !important; pointer-events: none; cursor: default; } .navbar-mobile-collapse__lang ul.language-switcher-language-url a:focus-visible, .navbar-mobile-collapse__lang ul.links a:focus-visible { outline: 2px solid #1551C1; outline-offset: 2px; } /* ---- Breakpoints ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .utility-bar a, .navbar-mobile-collapse__lang a { transition: none; } } /* Below the full-nav breakpoint the burger menu is active: hide the top bar * and show the in-menu selector instead. This is also what fixes the tablet * overlap (the top bar no longer adds height the header offset doesn't know * about). */ @media (max-width: 1199.98px) { .utility-bar { display: none; } .navbar-mobile-collapse__lang { display: flex; justify-content: center; } }