Hero parcheggi: Arrivals

Reviewed

HTML
View
Context
Assets
Info
Notes


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

    <h1 class="">Arrivi e partenze</h1>

    <div class="c-form">
        <label for="" class=" " aria-label="">

            <input id="" type="" class="js-combobox " placeholder="" value="" list="" data-combobox-prefix-class="" data-combobox-case-sensitive="" data-combobox-search-option="" data-combobox-help-text="" 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="">
            </datalist>
        </label>
    </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}}

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

  {{#if h2}}
    <h2>{{{ h2 }}}</h2>
  {{/if}}

  <div class="c-form">
    {{> @autocomplete search-field }}
  </div>

</div>


        
            
            {
  "h1": "Arrivi e partenze",
  "bg-path": "/images/superhero-arrival-departures.png",
  "modifier": "c-superhero--flights"
}

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--arrivals
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/superhero/superhero--arrivals.hbs
References (1): @autocomplete
Referenced by (2): @page-arrivals-departures, @page-arrivals-departures--emergency

No notes defined.