<header class="c-header ">
<div class="c-header__inner">
<div class="c-header_orientation">
<div class="c-orientation ">
<div class="c-orientation__inner">
<ul class="c-site-areas " aria-hidden="true">
<li>
<a href="/components/preview/page-home-travel--default">Viaggiare</a>
</li>
<li>
<a href="/components/preview/page-society-home" class="is-active">Società</a>
</li>
<li>
<a href="/components/preview/page-investor-home">Investor relations</a>
</li>
<li>
<a href="/components/preview/page-innovability-home">Innovability</a>
</li>
<li>
<a href="" class="c-sites-areas__link">Lavora con noi</a>
</li>
</ul>
<div class="c-orientation__utilities">
<div class="c-languages__dropdown">
<input type="checkbox" id="checkbox_language_toggle" class="c-languages__switch">
<label for="checkbox_language_toggle">
ita
<svg class="c-icon c-icon--24 chevron--up">
<use xlink:href="#ic_arrow_drop_up_black_24px"></use>
</svg> <svg class="c-icon c-icon--24 chevron--down">
<use xlink:href="#ic_arrow_drop_down_black_24px"></use>
</svg>
<ul class="c-languages__dropdown-content" aria-label="Seleziona la lingua del sito">
<li>
<a href="#" aria-label="Inglese">eng</a>
</li>
<li>
<a href="#" aria-label="Cinese">zh</a>
</li>
</ul>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="c-header__toolbar">
<div class="c-toolbar">
<div class="c-toolbar__inner">
<div class="c-toolbar__left">
<a href="/components/preview/page-home-travel--default" class="c-toolbar__logo">
<img src="../../images/svgs/logo-adb.svg" class="c-logo" alt="Homepage aeroporto di Bologna">
</a>
<a href="/components/preview/page-home-travel--default" class="c-toolbar__logo c-toolbar__logo--innovability">
<img src="../../images/svgs/logo-innovability.svg" class="c-logo c-logo--innovability" alt="Homepage aeroporto di Bologna">
</a>
</div>
<div class="c-toolbar__center" aria-hidden="true">
<div class="c-header__shortcuts" aria-hidden="true">
<div class="c-navigation-shortcuts">
<ul>
<li class="has-dropdown">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Profilo aziendale</strong>
<span></span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Profilo aziendale</p>
<div class="c-megamenu__card-abstract">
Profilo aziendale
Aeroporto di Bologna, porta d’accesso ideale per l’Italia
</div>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<li><a href="#">Vision, Mission & Strategy</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Dati chiave</a></li>
<li><a href="#">Risorse umane</a></li>
<li><a href="#">Etica d'impresa</a></li>
</ul>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
<li class="has-dropdown">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Business</strong>
<span></span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Business</p>
<div class="c-megamenu__card-abstract">
Avition, Retail, Adv, Formazione, Eventi. Le anime molteplici del business dell’Aeroporto
</div>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<strong class="c-megamenu__listtitle">Attività commerciali</strong>
<li><a href="#">Retail, Advertising, Eventi</a></li>
<li><a href="#">Portale Appalti</a></li>
<li><a href="#">BLQ Training</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Aviation</strong>
<li><a href="#">Pista e infrastrutture</a></li>
<li><a href="#">Tariffe Aviation</a></li>
<li><a href="#">Cargo</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Progetti Europei e Protocolli</strong>
<li><a href="#">Cyrano</a></li>
<li><a href="#">ITAIR ISAC</a></li>
<li><a href="#">PRECINCT</a></li>
<li><a href="#">Protocolli d’Intesa</a></li>
</ul>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
<li class="has-dropdown">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Sala stampa</strong>
<span></span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Sala stampa</p>
<div class="c-megamenu__card-abstract">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<li><a href="#">COVID 19 | Approfondimenti</a></li>
<li><a href="#">COVID 19 | Ultimi aggiornamenti</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Comunicati stampa</a></li>
<li><a href="#">Photogallery</a></li>
</ul>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
<li class="has-dropdown">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Operatori aeroportuali</strong>
<span></span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Operatori aeroportuali</p>
<div class="c-megamenu__card-abstract">
Informazioni a supporto delle attività operative
</div>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<strong class="c-megamenu__listtitle">Documentazione e Segnalazioni</strong>
<li><a href="#">Manuale di Aeroporto</a></li>
<li><a href="#">Regolamento di Scalo</a></li>
<li><a href="#">Titoli di accesso</a></li>
<li><a href="#">Segnalazioni degli Operatori</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Safety Management System</strong>
<li><a href="#">Definizione di SMS</a></li>
<li><a href="#">I Comitati della Safety</a></li>
<li><a href="#">L’analisi dei rischi</a></li>
<li><a href="#">Il reporting system</a></li>
<li><a href="#">Ambiente ed Energia</a></li>
<li><a href="#">Safety Promotion & Education</a></li>
<li><a href="#">Gestione delle emergenze</a></li>
<li><a href="#">Segnalazioni di Safety</a></li>
</ul>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="c-toolbar__right">
<button type="button" class="c-button c-toolbar__icon is-clickable js-fr-dialogmodal-open" aria-label="Cerca nel sito" aria-controls="dialog-search">
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_search_black_24px"></use>
</svg>
</button>
<div class="c-notifications ">
<button type="button" class="c-notifications__button has-indicator js-toggleNotificationsBtn" aria-expanded="false" aria-label="Notifiche" aria-controls="aria-notifications">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic_notifications_active_black_24px"></use>
</svg>
<p class="c-notifications__indicator" aria-hidden="true">2</p>
</button>
<div class="c-notifications__box is-narrow has-indicator js-notificationsBox" aria-live="polite" id="aria-notifications">
<div class="c-notifications__head">
<div class="c-notifications__title">
Centro notifiche
</div>
<button type="button" class="c-notifications__closeBtn js-toggleNotificationsBtn" aria-expanded="false" aria-label="Chiudi" aria-controls="aria-notifications">
Chiudi <svg class="c-icon c-icon--16">
<use xlink:href="#ic_close_black_24px"></use>
</svg>
</button>
</div>
<ul class="c-notifications__list">
<li class="important not-read">
<span class="c-notifications__title">Lorem ipsum dolor sit amet</span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="not-read">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<p>Prevista forte nevicata il 5 Dicembre dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
</ul>
</div>
</div>
<div class="c-header__switch c-toolbar__icon c-toolbar__switch is-clickable">
<div data-menu-component class='c-navigation-switch'>
<input type='checkbox' role='button' aria-haspopup='true' id='toggle-extended-nav' class='u-visuallyhidden' aria-hidden='true' />
<label for='toggle-extended-nav' data-opens-menu aria-hidden='true'>
<span class='u-visuallyhidden expanded-text'>
Chiudi menù
</span>
<span class='u-visuallyhidden collapsed-text'>
Apri menù
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="c-dialog c-dialog--search js-fr-dialogmodal " id="dialog-search">
<div class="js-fr-dialogmodal-modal">
<div role="document">
<div class="c-expanded-search ">
<form class="c-expanded-search__searchWrapper c-form">
<label for="search-field" class=" has-button" aria-label="">
Cerca nel sito
<input id="search-field" type="text" class="js-combobox " placeholder="" value="" aria-describedby="search-field-note" list="search-destinations" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
<button type="submit" class="c-button c-button--submit c-button--searchIcon " aria-label="Avvia la ricerca">
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_search_black_24px"></use>
</svg> </button>
<datalist id="search-destinations">
<option value="Check in A">
<option value="Check in B">
<option value="Check in C">
<option value="Accettazione">
<option value="Cafè">
<option value="Bagagli">
<option value="Bar centrale">
</datalist>
<p class="c-field__note " id="search-field-note">
Scrivi ciò che vuoi cercare es: <strong>arrivi</strong>, <strong>bagagli</strong>, <strong>VIP lounge</strong>, etc …
</p>
</label>
<p class="c-expanded-search__search-flight">
<a href="../preview/page-arrivals-departures--default.html">Stai cercando un volo?→</a>
</p>
<div class="c-search-suggestions">
<h3>Potrebbero esserti utili</h3>
<ul class="c-search-suggestions__list">
<li class="c-search-suggestions__item">
<a href="#">Ultimi aggiornamenti covid <span aria-hidden="true">→</span></a>
</li>
<li class="c-search-suggestions__item">
<a href="#">Parcheggia in aeroporto <span aria-hidden="true">→</span></a>
</li>
<li class="c-search-suggestions__item">
<a href="#">Contatti e supporto <span aria-hidden="true">→</span></a>
</li>
<li class="c-search-suggestions__item">
<a href="#">Fast track <span aria-hidden="true">→</span></a>
</li>
</ul>
</div>
</form>
<button type="button" class="c-expanded-search__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
Chiudi
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="menu" data-menu-origin="top" class="c-header__primary-navigation">
<nav class="c-primary-navigation">
<ul class="c-site-areas c-primary-navigation__areas" aria-hidden="false">
<li>
<a href="/components/preview/page-home-travel--default">Viaggiare</a>
</li>
<li>
<a href="/components/preview/page-society-home" class="is-active">Società</a>
</li>
<li>
<a href="/components/preview/page-investor-home">Investor relations</a>
</li>
<li>
<a href="/components/preview/page-innovability-home">Innovability</a>
</li>
</ul>
<ul class="c-primary-navigation__biz">
<li>
<div class="c-primary-navigation__accordion o-collapsible">
<p class="c-primary-navigation__toggle o-collapsible__title js-collapsible-title">
<strong>Profilo aziendale</strong>
<span></span>
</p>
<ul class="sub-level">
<p class="sub-title"></p>
<li>
<a href="#">Vision, Mission & Strategy</a>
</li>
<li>
<a href="#">Management</a>
</li>
<li>
<a href="#">Dati chiave</a>
</li>
<li>
<a href="#">Risorse umane</a>
</li>
<li>
<a href="#">Etica d'impresa</a>
</li>
</ul>
</div>
</li>
<li>
<div class="c-primary-navigation__accordion o-collapsible">
<p class="c-primary-navigation__toggle o-collapsible__title js-collapsible-title">
<strong>Business</strong>
<span></span>
</p>
<ul class="sub-level">
<p class="sub-title">Attività commerciali</p>
<li>
<a href="#">Retail, Advertising, Eventi</a>
</li>
<li>
<a href="#">Portale Appalti</a>
</li>
<li>
<a href="#">BLQ Training</a>
</li>
</ul>
<ul class="sub-level">
<p class="sub-title">Aviation</p>
<li>
<a href="#">Pista e infrastrutture</a>
</li>
<li>
<a href="#">Tariffe Aviation</a>
</li>
<li>
<a href="#">Cargo</a>
</li>
</ul>
<ul class="sub-level">
<p class="sub-title">Progetti Europei e Protocolli</p>
<li>
<a href="#">Cyrano</a>
</li>
<li>
<a href="#">ITAIR ISAC</a>
</li>
<li>
<a href="#">PRECINCT</a>
</li>
<li>
<a href="#">Protocolli d’Intesa</a>
</li>
</ul>
</div>
</li>
<li>
<div class="c-primary-navigation__accordion o-collapsible">
<p class="c-primary-navigation__toggle o-collapsible__title js-collapsible-title">
<strong>Sala stampa</strong>
<span></span>
</p>
<ul class="sub-level">
<p class="sub-title"></p>
<li>
<a href="#">COVID 19 | Approfondimenti</a>
</li>
<li>
<a href="#">COVID 19 | Ultimi aggiornamenti</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Comunicati stampa</a>
</li>
<li>
<a href="#">Photogallery</a>
</li>
</ul>
</div>
</li>
<li>
<div class="c-primary-navigation__accordion o-collapsible">
<p class="c-primary-navigation__toggle o-collapsible__title js-collapsible-title">
<strong>Operatori aeroportuali</strong>
<span></span>
</p>
<ul class="sub-level">
<p class="sub-title">Documentazione e Segnalazioni</p>
<li>
<a href="#">Manuale di Aeroporto</a>
</li>
<li>
<a href="#">Regolamento di Scalo</a>
</li>
<li>
<a href="#">Titoli di accesso</a>
</li>
<li>
<a href="#">Segnalazioni degli Operatori</a>
</li>
</ul>
<ul class="sub-level">
<p class="sub-title">Safety Management System</p>
<li>
<a href="#">Definizione di SMS</a>
</li>
<li>
<a href="#">I Comitati della Safety</a>
</li>
<li>
<a href="#">L’analisi dei rischi</a>
</li>
<li>
<a href="#">Il reporting system</a>
</li>
<li>
<a href="#">Ambiente ed Energia</a>
</li>
<li>
<a href="#">Safety Promotion & Education</a>
</li>
<li>
<a href="#">Gestione delle emergenze</a>
</li>
<li>
<a href="#">Segnalazioni di Safety</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="c-primary-navigation__utils">
<ul class="c-languages" aria-label="Seleziona la lingua del sito">
<li>
<a href="#" aria-label="ita">
<img src="../../images/svgs/flag_it.svg" class="c-language__img" alt="Lingua italiana" aria-hidden="true" />
ita
</a>
</li>
<li>
<a href="#" aria-label="eng">
<img src="../../images/svgs/flag_en.svg" class="c-language__img" alt="English language" aria-hidden="true" />
eng
</a>
</li>
</ul>
<a class="c-primary-navigation__assistance " href="../preview/page-home-assistenze.html">
Lavora con noi
</a>
</div>
</nav>
</div>
</header>
<div class="c-slim-alert">
<div class="c-slim-alert__inner">
<div class="c-slim-alert__content">
<div class="c-slim-alert__label">
<img src="../../images/svgs/stk_covid.svg" alt="Accedi alla MyBLQ" aria-hidden="true" width="24">
<strong>Covid 19:</strong>
</div>
<div>
<a href="#">
Ultimi aggiornamenti
</a>
</div>
<div>
<a href="#">
Approfondimenti
</a>
</div>
<div class="c-slim-alert__notifications">
<div class="c-notifications ">
<button type="button" class="c-notifications__button has-indicator js-toggleNotificationsBtn" aria-expanded="false" aria-label="Notifiche" aria-controls="aria-notifications">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic_notifications_active_black_24px"></use>
</svg>
<p class="c-notifications__indicator" aria-hidden="true">2</p>
</button>
<div class="c-notifications__box is-narrow has-indicator js-notificationsBox" aria-live="polite" id="aria-notifications">
<div class="c-notifications__head">
<div class="c-notifications__title">
Centro notifiche
</div>
<button type="button" class="c-notifications__closeBtn js-toggleNotificationsBtn" aria-expanded="false" aria-label="Chiudi" aria-controls="aria-notifications">
Chiudi <svg class="c-icon c-icon--16">
<use xlink:href="#ic_close_black_24px"></use>
</svg>
</button>
</div>
<ul class="c-notifications__list">
<li class="important not-read">
<span class="c-notifications__title">Lorem ipsum dolor sit amet</span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="not-read">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<p>Prevista forte nevicata il 5 Dicembre dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='c-overlay'></div>
<header class="c-header {{modifier}}">
<div class="c-header__inner">
<div class="c-header_orientation">
{{> @orientation--society dropdown-toolbar merge=true }}
</div>
<div class="c-header__toolbar">
{{render "@toolbar--society"}}
</div>
</div>
<div role="menu" data-menu-origin="top" class="c-header__primary-navigation">
{{ render "@primary-navigation--society" shortcuts merge=true }}
</div>
</header>
{{ render "@slim-alert" }}
<div class='c-overlay'></div>
{
"name": "default",
"dropdown-toolbar": {
"site-areas": {
"areas": [
{
"text": "Viaggiare",
"link": "/components/preview/page-home-travel--default"
},
{
"text": "Società",
"class": "is-active",
"link": "/components/preview/page-society-home"
},
{
"text": "Investor relations",
"link": "/components/preview/page-investor-home"
},
{
"text": "Innovability",
"link": "/components/preview/page-innovability-home"
}
],
"work-with-us": true
},
"dropdown-orientation": {
"main-language": {
"text": "ita",
"url": "#",
"aria-label": "Italiano"
},
"sub-languages": [
{
"text": "eng",
"url": "#",
"aria-label": "Inglese"
},
{
"text": "zh",
"url": "#",
"aria-label": "Cinese"
}
]
}
},
"slim-alert": {
"items": [
{
"anchor-text": false,
"text": "<a href=\"#\">Lavori infrastrutturali</a>"
}
]
}
}
$header-bg: secondary(soft, 100);
.c-header {
position: relative;
background-color: $header-bg;
z-index: $zIndex-header;
@include shadow(medium);
}
.c-header__switch:has(input[type="checkbox"]:focus) {
@include outline;
}
.c-header__shortcuts+.c-header__switch {
position: absolute;
z-index: $zIndex-hamburgerMenu;
right: remify(8px);
bottom: remify(-36px);
@include min-screen(bp(tablet-p)) {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.c-header--chinese & {
right: remify(8px);
top: remify(8px);
@include min-screen(bp(tablet-p)) {
right: remify(16px);
top: remify(24px);
}
}
}
.c-header__primary-navigation {
position: relative;
}
/*------------------------------------*\
Modifier c-header--host
\*------------------------------------*/
.c-header--host {
@include min-screen(bp(tablet-p)) {
// padding-bottom: remify(100px);
}
}
/*------------------------------------*\
Modifier c-header--stepbar
\*------------------------------------*/
// .c-header--progress {
// padding-bottom: remify(8px);
// }
/*------------------------------------*\
Modifier c-header--withSub
\*------------------------------------*/
.c-header--withSub {
.c-header__shortcuts+.c-header__switch {
bottom: remify(-92px);
}
}
/*------------------------------------*\
Emergency modifier
\*------------------------------------*/
.c-header--emergency {
background-color: primary(emergency, 120);
color: #fff;
a {
color: #fff;
}
& .c-toolbar a,
& .c-orientation a,
& .c-orientation__utilities,
& .c-orientation__utilities a,
.c-navigation-shortcuts a {
color: #fff;
}
}
/*------------------------------------*
Modifier: c-header--minimal
*------------------------------------*/
.c-header--minimal {
.c-header__inner:has(.c-header__toolbar + *) {
display: flex;
align-items: center;
justify-content: space-between;
max-width: remify($base-page-width);
margin-inline: auto;
}
}
/*------------------------------------*\
overlay
\*------------------------------------*/
.c-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
z-index: $z-Index-overlay;
display: none;
&.is-visible {
display: block;
}
}
No notes defined.