Hero parcheggi: Mbl

Reviewed

HTML
View
Context
Assets
Info
Notes


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

    <div class="c-superhero__heading">
        <img class="c-superhero__heading-img" src="../../images/svgs/mbl.svg" width="180" alt="BLQ Fitness Lounge">
        <div class="c-superhero__heading-txt">
            <h1>Rilassati e parti in prima fila!</h1>
            <p class="c-superhero__subtitle">Ingresso VIP Lounge&nbsp;<strong>a soli € 30,00</strong></p>
        </div>
    </div>

    <div class="c-highlight c-highlight--composite c-highlight--grid c-highlight--rounded">
        <div class="c-highlight__content">
            <div class="c-highlight__stk">
                <img class="" src="/images/svgs/stk_gym.svg" alt="stk_mail_discount_reservation" aria-hidden="true">
            </div>
            <div class="c-highlight__msg">
                <div class="c-highlight__title typo-small">
                    <div class="c-highlight__rounded-label"><span class="c-rounded-label c-rounded-label--sky" aria-label="">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic-star-new-black-18px"></use>
                            </svg>
                            Novità
                        </span></div>
                    <strong>Scegli la Vip Lounge e scopri le Novità 2023</strong>
                </div>

                <div class="c-highlight__text">
                    <p><span class='u-hidden-mobile'>Hai mai pensato alla possibilità di allenarti prima di partire per il tuo viaggio?</p>
                    <p><span class='u-hidden-mobile'>La <strong>BLQ Fitness Lounge</strong> ti permette di mantenerti in forma anche durante l’attesa in aeroporto</span> <a href="#form-mbl"><strong>Scopri la Fitness Lounge →</strong></a></p>
                </div>

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

    <div class="c-superhero__inner">
        <div class="preform-header">
            <p class="preform-header__title">Cerca il tuo parcheggio:</p>
            <div class="preform-header__button"><button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open u-color-night-100" aria-controls="dialog-useful-info">

                    Regole e info utili
                    <svg class="c-icon--18">
                        <use xlink:href="#ic-info-serif"></use>
                    </svg>
                </button></div>
        </div>

        <form action="../../#.html" class="c-form c-form--mbl " id="form-mbl">
            <div class="c-form__el c-form__el--23 c-form__el--cal">
                <label for="departure-date-mobile" class="is-datepicker" aria-label="Scegli la data">

                    Data prevista <span class="required-marker" aria-hidden="true">*</span>

                    <input id="departure-date-mobile" type="date" class="" placeholder="Scegli la data" value="" aria-describedby="departure-date-mobile-note">

                    <p class="c-field__note " id="departure-date-mobile-note">
                        Seleziona la data di ingresso
                    </p>

                </label>

            </div>

            <div class="c-form__el c-form__el--13 c-form__el--cal">
                <label for="persons-select" class="" aria-label="">
                    N° persone <span class="required-marker" aria-hidden="true">*</span>
                    <select id="persons-select" class="" aria-describedby="persons-select-note">
                        <option value="" disabled selected></option>
                        <option value="option-1" selected>1</option>
                        <option value="option-2">2</option>
                        <option value="option-3">3</option>
                        <option value="option-4">4</option>
                    </select>
                    <em class="c-field__note " id="persons-select-note">
                        N° persone
                    </em>
                </label>
            </div>

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

                    Prenota ora

                </button>
            </div>
        </form>
        <div class="c-superhero__blurred">
            <span>
                <strong>Viaggi con dei bambini?</strong> I bambini sotto i 10 anni entrano gratis!
            </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}}

  <div class="c-superhero__heading">
    {{#if img}}
      <img class="c-superhero__heading-img" src="{{ path img.src}}" width="{{img.width}}" alt="{{img.alt}}">
    {{/if}}
    <div class="c-superhero__heading-txt">
      <h1>{{{ h1 }}}</h1>
      {{#if h2}}
      <p class="c-superhero__subtitle">{{{ h2 }}}</p>
      {{/if}}
    </div>
  </div>

  {{#if highlight-newspapers}}
  {{> @highlight--composite highlight-newspapers }}
  {{/if}}

  {{#if highlight-p-express}}
  {{> @highlight--composite highlight-p-express }}
  {{/if}}

  {{#if mbl-form }}
  <div class="c-superhero__inner">
    <div class="preform-header">
      <p class="preform-header__title">Cerca il tuo parcheggio:</p>
      <div class="preform-header__button">{{> @button--as-link btn-useful-info }}</div>
    </div>
    {{ render "@form--mbl" }}
    <div class="c-superhero__blurred">
      <span>
        <strong>Viaggi con dei bambini?</strong> I bambini sotto i 10 anni entrano gratis!
      </span>
    </div>
  </div>
  {{/if}}
</div>


        
            
            {
  "h1": "Rilassati e parti in prima fila!",
  "bg-path": "/images/superhero-mbl.jpg",
  "modifier": "c-superhero--mbl",
  "img": {
    "src": "/images/svgs/mbl.svg",
    "width": "180",
    "alt": "BLQ Fitness Lounge"
  },
  "h2": "Ingresso VIP Lounge&nbsp;<strong>a soli € 30,00</strong>",
  "mbl-form": true,
  "btn-useful-info": {
    "type": "button",
    "text": "Regole e info utili",
    "modifier": "c-button--as-link js-fr-dialogmodal-open u-color-night-100",
    "opens-dialog": "dialog-useful-info",
    "svg": {
      "symbol": "ic-info-serif",
      "class": "c-icon--18"
    }
  },
  "highlight-newspapers": {
    "modifier": "c-highlight--composite c-highlight--grid c-highlight--rounded",
    "rounded-label": {
      "modifier": "c-rounded-label--sky",
      "svg": {
        "symbol": "ic-star-new-black-18px",
        "class": "c-icon c-icon--24"
      },
      "text": "Novità"
    },
    "sticker": {
      "img-src": "/images/svgs/stk_gym.svg",
      "img-alt": "stk_mail_discount_reservation"
    },
    "title": "Scegli la Vip Lounge e scopri le Novità 2023",
    "text": "<p><span class='u-hidden-mobile'>Hai mai pensato alla possibilità di allenarti prima di partire per il tuo viaggio?</p><p><span class='u-hidden-mobile'>La <strong>BLQ Fitness Lounge</strong> ti permette di mantenerti in forma anche durante l’attesa in aeroporto</span> <a href=\"#form-mbl\"><strong>Scopri la Fitness Lounge →</strong></a></p>"
  },
  "form-mbl": {
    "hasQuantity": true
  }
}

File:

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

Handle: @superhero--mbl
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/superhero/superhero--mbl.hbs
References (3): @highlight--composite, @button--as-link, @form--mbl
Referenced by (2): @page-lounge, @page-fitness

No notes defined.