Aeroporto di Bologna - Design System

Hero parcheggi: Flights 

<div class="c-superhero c-superhero--mask c-superhero--flights" style="background-image: url(../../images/superhero-flights.jpg)">

    <h1 class="">Il tuo viaggio inizia ora, prenota il tuo volo.</h1>

    <div class="c-superhero__formwrapper">
        <form action="../../#.html" class="c-form c-form--flights " onsubmit="return false">

            <button class="js-close-overlay" aria-label="close">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>

            <div class="wrapper wrapper--extended">
                <div role="radiogroup" aria-label="seleziona volo in economy o business class">
                    <label for="select-economy-business-selection" class="" aria-label="">
                        Tipo di viaggio:
                        <select id="select-economy-business-selection" class="is-small is-inline" aria-describedby="select-economy-business-selection-note">
                            <option value="" disabled selected></option>
                            <option value="option-1" selected>Economy</option>
                            <option value="option-2">Business Class</option>
                        </select>
                        <em class="c-field__note u-visuallyhidden" id="select-economy-business-selection-note">
                            Seleziona il tipo di viaggio
                        </em>
                    </label> <label for="select-round-trip-selection" class="" aria-label="">

                        <select id="select-round-trip-selection" class="is-small is-inline" aria-describedby="select-round-trip-selection-note">
                            <option value="" disabled selected></option>
                            <option value="option-1" selected>Andata e ritorno</option>
                            <option value="option-2">Solo andata</option>
                        </select>
                        <em class="c-field__note u-visuallyhidden" id="select-round-trip-selection-note">

                        </em>
                    </label>
                </div>
            </div>

            <div class="wrapper wrapper--localities">
                <div class="c-form__el c-form__el--pair">
                    <label for="from" class=" " aria-label="">
                        Da <span class="required-marker" aria-hidden="true">*</span>
                        <input id="from" type="text" class="js-combobox " placeholder="" value="" required aria-required="true" aria-describedby="from-note" list="departures" 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">
                        <datalist id="departures">
                            <option value="Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)">
                            <option value="Roma, Fiumicino [FCO] (ITALIA)">
                            <option value="New York Ny, John F Kennedy Intl [JFK] (STATI UNITI)">
                            <option value="Parigi, Charles De Gaulle [CDG] (FRANCIA)">
                            <option value="Berlino, Schoenefeld [SXF] (GERMANIA)">
                            <option value="Londra, Heathrow [LHR] (REGNO UNITO)">
                            <option value="Los Angeles Ca, International [LAX] (STATI UNITI)">
                            <option value="Cana Brava Mg [NBV] (BRASILE)">
                            <option value="Pecs, Pogany [PEV] (UNGHERIA)">
                        </datalist>
                        <p class="c-field__note " id="from-note">
                            Digita e scegli la partenza
                        </p>
                    </label>
                </div>
                <div class="c-form__el c-form__el--icon">
                    <button type="button" class="switch-round-trip js-switch-btn" aria-label="Inverti origine e destinazione">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-switch-arrows-black-24px"></use>
                        </svg> </button>
                </div>
                <div class="c-form__el c-form__el--pair">
                    <label for="to" class=" " aria-label="">
                        A <span class="required-marker" aria-hidden="true">*</span>
                        <input id="to" type="text" class="js-combobox " placeholder="" value="" required aria-required="true" aria-describedby="to-note" list="arrivals" 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">
                        <datalist id="arrivals">
                            <option value="Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)">
                            <option value="Roma, Fiumicino [FCO] (ITALIA)">
                            <option value="New York Ny, John F Kennedy Intl [JFK] (STATI UNITI)">
                            <option value="Parigi, Charles De Gaulle [CDG] (FRANCIA)">
                            <option value="Berlino, Schoenefeld [SXF] (GERMANIA)">
                            <option value="Londra, Heathrow [LHR] (REGNO UNITO)">
                            <option value="Los Angeles Ca, International [LAX] (STATI UNITI)">
                            <option value="Cana Brava Mg [NBV] (BRASILE)">
                            <option value="Pecs, Pogany [PEV] (UNGHERIA)">
                        </datalist>
                        <p class="c-field__note " id="to-note">
                            Digita e scegli l'arrivo
                        </p>
                    </label>
                </div>
            </div>

            <div class="wrapper wrapper--dates">
                <span class="c-form__note is-negative u-visuallyhidden" id="flights-form-note">Inserisci una data di uscita successiva a quella di entrata</span>
                <div class="c-form__el c-form__el--pair js-round-desktop">
                    <label for="round-desktop" class="flatpickr-label" aria-label="Scegli la data di andata">

                        Andata

                        <input id="round-desktop" type="date" class="js-flatpickr flatpickr-input" placeholder="" value="" aria-describedby="round-desktop-note">

                        <p class="c-field__note " id="round-desktop-note">
                            Seleziona la data di andata
                        </p>

                    </label>

                </div>
                <div class="c-form__el c-form__el--pair js-trip-desktop">
                    <label for="trip-desktop" class="flatpickr-label" aria-label="Scegli la data di ritorno">

                        Ritorno

                        <input id="trip-desktop" type="date" class="js-flatpickr flatpickr-input" placeholder="" value="" aria-describedby="trip-desktop-note">

                        <p class="c-field__note " id="trip-desktop-note">
                            Seleziona la data di ritorno
                        </p>

                    </label>

                </div>
            </div>

            <div class="wrapper wrapper--alone wrapper--pax">
                <div class="c-form__el c-form__el--pax ">
                    <label for="text-field">
                        Passeggeri
                        <span class="required-marker" aria-hidden="true">*</span>
                        <button type="button" class="c-form__el--toggleFlightsPax js-toggleFlightsPax" aria-expanded="false" aria-label="1 passeggero" aria-describedby="pax-note" aria-controls="aria-paxChoiceDesc">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic-person-black-24px"></use>
                            </svg> <strong>1
                            </strong>
                        </button>
                        <p class="c-field__note" id="pax-note" aria-hidden="true">
                            N. passeggeri
                        </p>
                    </label>
                    <div class="js-flightsPaxCnt" id="aria-paxChoice">
                        <div class="u-visuallyhidden" aria-live="polite" id="aria-paxChoiceDesc">
                            Procedi per modificare la quantità.
                        </div>
                        <div class="pax-type">
                            <label for="adult">
                                <strong>Adulti</strong> (da 12 anni in su)</label>
                            <div class="c-button c-button--qty " aria-label="Seleziona il numero">
                                <button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
                                <input type="number" class="js-qty-value" value="1" readonly id="adult" aria-label="Quantità" min="1">
                                <button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
                            </div>
                        </div>
                        <div class="pax-type">
                            <label for="child">
                                <strong>Bambini</strong> (da 2 a 11 anni)</label>
                            <div class="c-button c-button--qty " aria-label="Seleziona il numero">
                                <button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
                                <input type="number" class="js-qty-value" value="1" readonly id="child" aria-label="Quantità" min="1">
                                <button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
                            </div>
                        </div>
                        <div class="pax-type">
                            <label for="baby">
                                <strong>Neonato</strong> (Meno di 2 anni)</label>
                            <div class="c-button c-button--qty " aria-label="Seleziona il numero">
                                <button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
                                <input type="number" class="js-qty-value" value="1" readonly id="baby" aria-label="Quantità" min="1">
                                <button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
                            </div>
                        </div>
                        <button type="button" class="js-closeFlightsPax c-button c-button--as-link" aria-hidden="true">Chiudi</button>
                    </div>
                </div>
            </div>

            <div class="wrapper wrapper--alone">
                <div class="c-form__el c-form__el--cta">
                    <button type="submit" class="c-button c-button--submit">

                        Cerca il tuo volo

                    </button>
                </div>
            </div>

        </form>
        <div class="c-superhero__blurred">
            <span>
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic-call-black-24px"></use>
                </svg> <strong>Non sei abituato ad acquistare online?</strong> <a href="#">Scopri come prenotare il tuo volo da
                    telefono <span aria-hidden="true">&#x2192;</span></a>
            </span>
        </div>
    </div>

</div>
 
<div class="c-superhero c-superhero--mask {{ modifier }}" {{#if
  bg-path}}style="background-image: url({{ path bg-path }})" {{/if}}>

  {{#if back-message}}
  <div class="o-back c-back is-dark">
    <a href="{{ path back-message-url }}"><span aria-hidden="true">&#x2039;</span> {{{ back-message }}}</a>
  </div>
  {{/if}}

  <h1 class="{{ modifier-h1 }}">{{{ h1 }}}</h1>
  {{#if h2}}<h2>{{{ h2 }}}</h2> {{/if}}

  {{#if sticker}}
  <img src="{{ img-src }}" alt="{{ img-alt }}" aria-hidden="true" />
  {{/if}}

  {{#if highlight}}
  {{> @highlight highlight-emergency }}
  {{/if}}

  <div class="c-superhero__formwrapper">
    {{ render "@form--flights" form-flights merge=true }}
    <div class="c-superhero__blurred">
      <span>
        {{> @icon icon }}
        <strong>Non sei abituato ad acquistare online?</strong> <a href="#">Scopri come prenotare il tuo volo da
          telefono <span aria-hidden="true">&#x2192;</span></a>
      </span>
    </div>
  </div>

</div>
 
{
  "h1": "Il tuo viaggio inizia ora, prenota il tuo volo.",
  "bg-path": "/images/superhero-flights.jpg",
  "modifier": "c-superhero--flights",
  "h3": "Scopri gli sconti dedicati a te, <strong>se prenoti un volo online:</strong>",
  "icon": {
    "symbol": "ic-call-black-24px",
    "class": "c-icon c-icon--24"
  },
  "form-flights": {
    "hide-switch": true
  }
}
  • Content: 
    .c-superhero {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  padding: remify(48px) remify(16px);
  position: relative;
  z-index: $z-Index-superhero;
  text-align: center;

  &:not(.c-superhero--mask) {
    // Added by Antonio on 26/07/23 to manage cases of hero without mask
    background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
  }

  @include min-screen(bp(tablet)) {
    padding: remify(48px) remify(16px);
    margin-bottom: remify(24px);
  }

  &.c-superhero--mask:before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 2;

    background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);

    @include min-screen(bp(tablet-p)) {
      background: transparent url(../../images/svgs/superhero-mask-wide.svg) no-repeat right remify(90px) top ;
      background-size: cover;
    }

  }

  & > * {
    position: relative;
    z-index: 5;
  }

  & > .c-back {
    position: absolute;
    top: 0;
    left: remify(16px);
  }

  main & {
    grid-column: full;
  }

  h1 {
    text-align: center;
    color: primary(night,100);
    font-weight: fw(light);
    font-size: remify(28px);
    line-height: 1.333;
    margin-bottom: remify(8px);
    max-width: remify($base-page-width);
    margin-left: auto;
    margin-right: auto;

    @include min-screen(bp(tablet)) {
      font-size: remify(48px);
      line-height: 1.166;
    }

  }

  h2,
  .c-superhero__subtitle {
    text-align: center;
    color: primary(night,100);
    font-weight: fw(light);
    font-size: 100%;
    line-height: 1.5;
    margin-bottom: remify(24px);
    margin-left: auto;
    margin-right: auto;
    max-width: remify(800px);

    @include min-screen(bp(tablet)) {
      font-size: 150%;
      line-height: 1.333;
      // margin: remify(24px) auto remify(48px);
    }

  }

  .c-form label.search-field-alone {
    max-width: remify(420px);
    color: primary(night, 120);
    text-align: left;
  }

  .preform-header {
    text-align: left;
    padding: remify(16px) remify(16px) 0;
    display: flex;
    flex-direction: column;
    gap: remify(16px);

    @include min-screen(bp(phone-p)) {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }

  .preform-header__title {
    @include font-scale(level-3);
    color: primary(night, 100);
  }

}

.c-superhero__inner {
  margin: 0 auto;
  width: 100%;
  max-width: remify(1040px);

  .l-travel-home__core & {
    grid-column: innermain;
    max-width: remify(770px);
  }
}

.c-superhero__blurred {
  text-align: center;
  color: #fff;
  padding: remify(16px);
  display: block;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: remify(4px);
  margin-top: remify(32px);

  @include min-screen(bp(tablet-p)) {
    border-radius: 0 0 remify(24px) remify(24px);
    margin-top: 0;
  }

  a {
    color: currentColor;
  }
}

.c-dialog__formwrapper,
.c-superhero__formwrapper {
  background-color: primary(sky, 10);
  border-radius: remify(24px);
  @include shadow(higher);
  display: table;
  margin: remify(16px) auto 0;
  width: auto;
  max-width: remify($base-page-width);

  .c-form--flights {
    padding: 0 remify(16px);
  }

  .c-superhero__blurred { 
    color:  primary(night,120);
    background-color: primary(sky,20);
    padding: remify(8px) remify(16px);
  }
  
  .c-list-search--inline {
    max-width: 800px;
    .c-button--submit {
      margin-top: 0;
      margin-left: remify(16px);
    }
  }
}

/*------------------------------------*\
  Superhero Homepage modifier
\*------------------------------------*/

.c-superhero--homepage {
  padding: remify(40px) remify(16px) remify(56px);
  margin-bottom: 0;

  @include min-screen(bp(tablet)) {
    padding: remify(76px) remify(16px) remify(126px);
  }

}

/*------------------------------------*\
  Superhero parkings modifier
\*------------------------------------*/

.c-superhero--parkings {
  padding: remify(40px) remify(16px) remify(56px);

  @include min-screen(bp(tablet)) {
    padding: remify(88px) remify(16px) remify(144px);
  }

  .c-superhero__inner {
    background-color: primary(sky, 20);
    border-radius: remify(24px);

    .c-form--parkings {
      text-align: left;
      padding: remify(16px);
    }

    .c-form--parkings-conventions,
    .c-form--parkings-conventions a {
      color: secondary(text, 100);
    }

    .c-superhero__blurred {
      background-color: primary(sky, 40);
      color: primary(night, 120);
    }
  }

}

/*------------------------------------*\
  Superhero rates and conventions modifier
\*------------------------------------*/

.c-superhero--rates-conventions {
  padding: remify(60px) remify(16px) remify(40px);

  @include min-screen(bp(tablet)) {
    padding: remify(80px) remify(16px) remify(0px);
  }
}

/*------------------------------------*\
  Superhero meet and greet modifier
\*------------------------------------*/

.c-superhero--meet-greet {
  padding: remify(60px) remify(16px) remify(40px);

  @include min-screen(bp(tablet)) {
    padding: remify(120px) remify(16px) remify(96px);
  }

}

/*------------------------------------*\
  Superhero where to pay modifier
\*------------------------------------*/

.c-superhero--where-to-pay {
  padding: remify(60px) remify(16px) remify(40px);

  @include min-screen(bp(tablet)) {
    padding: remify(120px) remify(16px) remify(96px);
  }

}

/*------------------------------------*\
  Superhero MBL modifier
\*------------------------------------*/

.c-superhero--mbl {
  padding: remify(60px) remify(16px) remify(40px);

  @include min-screen(bp(tablet)) {
    padding: remify(72px) remify(16px) remify(72px);
  }

  .c-superhero__img {
    margin-bottom: remify(8px);
  }

  h1 {
    margin-bottom: 0;
    @include font-scale(level-6, light);
  }

  h2,
  .c-superhero__subtitle {
    margin-bottom: remify(24px);
  }

  .c-highlight {
    margin-top: remify(24px);
  }

  .c-superhero__inner {
    background-color: primary(sky, 20);
    border-radius: remify(24px);
    overflow: hidden;
    max-width: remify(1130px);

    .c-form--mbl {
      text-align: left;
      padding: remify(16px);
    }

    .c-superhero__blurred {
      background-color: primary(sky, 40);
      color: primary(night, 120);
    }

  }

}

/*------------------------------------*
  Superhero MBL modifier + Video MBL
  Shit code (blame on me)
*------------------------------------*/
.c-superhero--mbl.c-superhero--flex-headings {

  .c-superhero__heading {
    display: flex;
    flex-direction: column;
    gap: remify(16px);
    align-items: center;

    @include min-screen(bp(tablet)) {
      flex-direction: row;
      max-width: remify(600px);
      margin: remify(24px) auto;
    }
  }

  h2 {
    @include min-screen(bp(tablet)) {
      position: relative;
      left: remify(104px);
      top: remify(-6px);
    }
  }

}

/*------------------------------------*\
  Superhero Flights modifier
\*------------------------------------*/

.c-superhero--flights {

  span svg {
    vertical-align: text-bottom;
    margin-right: remify(8px);
  }

  .c-form--flights {
    label input {
      background-color: #fff;
      border-color: primary(night, 20);
      padding-left: remify(16px);
    }

    label.is-negative input {
      border-color: status(negative);
    }
  }

  .c-superhero__cta {
    margin-top: remify(32px);
  }
}


/*------------------------------------*\
  Superhero palantir modifier
\*------------------------------------*/

.c-superhero--palantir {

  padding-top: remify(16px);

  .palantir-info {
    width: 100%;
    max-width: $base-page-width;
    margin: 0 auto;

    &>* {
      text-align: center;
    }

    @include min-screen(bp(tablet-p)) {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    h1 {
      margin-bottom: 0;
      margin-top: remify(8px);

      @include min-screen(bp(tablet-p)) {
        margin-top: 0;
      }

    }

  }

}

/*------------------------------------*\
  Superhero nav modifier
\*------------------------------------*/

.c-superhero--nav {
  z-index: $z-Index-superhero--nav;

  @include min-screen(bp(tablet)) {
    z-index: auto;
  }
}

/*------------------------------------*\
  Superhero switcher modifier
\*------------------------------------*/

.c-superhero--switcher {
  padding-bottom: remify(48px);
}


/*------------------------------------*\
  Superhero emergency modifier
\*------------------------------------*/

.c-superhero--emergency {
  background-color: primary(night, 100);
  color: #ffffff;

  img {
    margin: 0 auto;
    display: block;
  }

  h1, h2 {
    color: #fff;
  }

  &.c-superhero--mask:before {
    background: primary(night, 100);
    @include min-screen(bp(tablet-p)) {
      background: transparent url(../../images/svgs/superhero-mask-dark.svg) no-repeat right remify(90px) top ;
      background-size: cover;
    }

  }

  label .c-field__note  {
    color: #fff;
  }

}

/*------------------------------------*\
  Superhero minimal modifier
\*------------------------------------*/

.c-superhero--minimal {
  padding: remify(48px) remify(16px);
  background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);

  &:after {
    display: none;
  }

  .o-back a {
    color: primary(night, 100);
  }

  h1 {
    margin-bottom: remify(0px);

    @include min-screen(bp(tablet)) {
      margin-bottom: remify(8px);
    }

  }
}

/*------------------------------------*\
  Superhero manteinance modifier
\*------------------------------------*/

.c-superhero--manteinance {
  & h1 {
      font-size: 2rem;
      line-height: 1.166;
  }

  &.c-superhero--mask:before {

    @include min-screen(bp(tablet-p)) {
      background: transparent url(../../images/svgs/superhero-mask-wide.svg) no-repeat right remify(0px) top ;
      background-size: cover;
    }

  }
}
  • URL: /components/raw/superhero/_superhero.scss
  • Filesystem Path: src/views/03-organisms/superhero/_superhero.scss
  • Size: 10 KB

No notes defined.