Hero parcheggi: Parkings

Reviewed

HTML
View
Context
Assets
Info
Notes


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

    <h1>Parcheggia in Aeroporto</h1>

    <div class="c-highlight c-highlight--composite c-highlight--grid c-highlight--narrow c-highlight--rounded">
        <div class="c-highlight__content">
            <div class="c-highlight__stk">
                <img class="" src="/images/svgs/stk_coupon-30.svg" alt="stk_mail_discount_reservation" aria-hidden="true">
            </div>
            <div class="c-highlight__msg">
                <div class="c-highlight__title typo-small">
                    <strong>Fino al 30% di sconto se acquisti online!</strong>
                </div>

                <div class="c-highlight__text">
                    <p class='u-hidden-mobile'>Assicurati il posto auto in aeroporto al miglior prezzo.</p>
                </div>

                <div class="c-highlight__text">
                    <p><strong class='u-hidden-mobile'>Scopri subito lo sconto.</strong> <a class="js-fr-dialogmodal-open" aria-controls="dialog-parking-form" href="javascript:;">Scegli le date →</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="/components/preview/page-parking-results" class="c-form c-form--parkings">

            <div class="c-form__el c-form__el--cal">
                <label for="entrance-date" class="" aria-label="Scegli data di ingresso">

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

                    <input id="entrance-date" type="date" class="" placeholder="Scegli data di ingresso" value="" aria-describedby="entrance-date-note">

                    <p class="c-field__note " id="entrance-date-note">
                        Inserisci data di entrata
                    </p>

                </label>

            </div>
            <div class="c-form__el c-form__el--sel">
                <label for="entrance-time" class="" aria-label="">
                    Orario <span class="required-marker" aria-hidden="true">*</span>
                    <select id="entrance-time" class="" aria-describedby="select-note">
                        <option value="" disabled selected>Scegli orario</option>
                        <option value="00:00">00:00</option>
                        <option value="00:15">00:15</option>
                        <option value="00:30">00:30</option>
                        <option value="00:45">00:45</option>
                        <option value="01:00">01:00</option>
                        <option value="01:15">01:15</option>
                        <option value="01:30">01:30</option>
                        <option value="01:45">01:45</option>
                        <option value="02:00">02:00</option>
                        <option value="02:15">02:15</option>
                        <option value="02:30">02:30</option>
                        <option value="02:45">02:45</option>
                        <option value="03:00">03:00</option>
                    </select>
                    <em class="c-field__note " id="entrance-time-note">
                        Ora di ingresso
                    </em>
                </label>
            </div>

            <div class="c-form__el c-form__el--cal">
                <label for="exit-date" class="" aria-label="Scegli data di uscita">

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

                    <input id="exit-date" type="date" class="" placeholder="" value="" aria-describedby="exit-date-note">

                    <p class="c-field__note " id="exit-date-note">
                        Inserisci data di entrata uscita
                    </p>

                </label>

            </div>

            <div class="c-form__el c-form__el--sel">
                <label for="exit-time" class="" aria-label="">
                    Orario <span class="required-marker" aria-hidden="true">*</span>
                    <select id="exit-time" class="" aria-describedby="select-note">
                        <option value="" disabled selected>Scegli orario</option>
                        <option value="00:00">00:00</option>
                        <option value="00:15">00:15</option>
                        <option value="00:30">00:30</option>
                        <option value="00:45">00:45</option>
                        <option value="01:00">01:00</option>
                        <option value="01:15">01:15</option>
                        <option value="01:30">01:30</option>
                        <option value="01:45">01:45</option>
                        <option value="02:00">02:00</option>
                        <option value="02:15">02:15</option>
                        <option value="02:30">02:30</option>
                        <option value="02:45">02:45</option>
                        <option value="03:00">03:00</option>
                    </select>
                    <em class="c-field__note " id="exit-time-note">
                        Ora di uscita
                    </em>
                </label>
            </div>

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

                    Cerca parcheggio

                </button>
            </div>

            <div class="c-form__note is-negative u-visuallyhidden" id="parking-form-note">Inserisci una data e un orario di uscita successivi a quelli di entrata</div>

        </form>

        <div class="c-form--parkings-conventions"><a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-parking-form">Hai una convenzione?</a>
        </div>

        <div class="c-superhero__blurred">
            <span>
                <strong>Accompagni o riprendi qualcuno in aeroporto?</strong> <a href="../preview/page-meet-greet.html">Scopri dove parcheggiare <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>{{ h1 }}</h1>

  {{!-- temporary banner P Express --}}
  {{> @highlight--composite highlight-p-express }}

  <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--parkings" }}

    <div class="c-superhero__blurred">
      <span>
        <strong>Accompagni o riprendi qualcuno in aeroporto?</strong> <a
          href="{{ path '/components/preview/page-meet-greet' }}">Scopri dove parcheggiare <span
            aria-hidden="true">&#x2192;</span></a>
      </span>
    </div>

  </div>

</div>


        
            
            {
  "h1": "Parcheggia in Aeroporto",
  "bg-path": "/images/superhero-parkings.jpg",
  "modifier": "c-superhero--parkings ",
  "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-p-express": {
    "modifier": "c-highlight--composite c-highlight--grid c-highlight--narrow c-highlight--rounded",
    "sticker": {
      "img-src": "/images/svgs/stk_coupon-30.svg",
      "img-alt": "stk_mail_discount_reservation"
    },
    "title": "Fino al 30% di sconto se acquisti online!",
    "text": "<p class='u-hidden-mobile'>Assicurati il posto auto in aeroporto al miglior prezzo.</p>",
    "text2": "<p><strong class='u-hidden-mobile'>Scopri subito lo sconto.</strong> <a class=\"js-fr-dialogmodal-open\" aria-controls=\"dialog-parking-form\" href=\"javascript:;\">Scegli le date →</a></p>"
  }
}

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--parkings
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/superhero/superhero--parkings.hbs
References (3): @highlight--composite, @button--as-link, @form--parkings
Referenced by (1): @page-parkings-home

No notes defined.