.hero-banner–border {
display: block; height: 3px; margin: 0 auto; max-width: 1090px; width: 100%; .hero-banner--border-contain { background: rgba($slate, 0.1); display: block; height: 3px; margin-left: 20px; margin-right: 20px; @media screen and (min-width: $mq-wide) { margin: 0; } }
}
.hero-banner.default {
@include contain-1090; padding-top: 40px; @media screen and (min-width: $mq-medium) { padding-top: 60px; } h1 { @include display-1; margin-top: 0; color: $black; margin-bottom: 20px; @media screen and (min-width: $mq-medium) { margin-left: -5px; } } .lead-paragraph { @include big-description; color: $black; margin-bottom: 0; } .path-frontpage & { h1 { @include h1; margin-bottom: 27px; } }
}
.form-header-meta {
position: relative; h2 { font-size: 1rem; font-weight: $fw-regular; margin-bottom: 0.25rem; @media screen and (min-width: $mq-medium) { width: 70%; } }
}
// Progress
.form-progress {
position: relative; height: 1.5rem; margin: 0.25rem 0; @media screen and (min-width: $mq-medium) { position: absolute; top: 0; right: 0; margin: 0; }
}
.form-progress-bubble {
background: $purple-1; padding: 0.25rem 1rem; border-radius: 1.5rem; display: inline-block; position: absolute; top: 0; white-space: nowrap; font-size: 1rem; line-height: 1; @media screen and (min-width: $mq-medium) { top: -0.25rem; right: 0; margin: 0; }
}
.form-progress-bar {
font-size: 0; color: transparent; background: $purple-1; height: 0.75rem; display: inline-block; width: 100%; position: absolute; top: 0.25rem; border-radius: 0.375rem; &::before { content: ''; background: #6b8292; height: 0.75rem; border-radius: 0.375rem 0 0 0.375rem; position: absolute; top: 0; left: 0; } @media screen and (min-width: $mq-medium) { top: 0; right: 0; height: 0.75rem; width: 10rem; &::before { height: 0.75rem; } }
}
@for $i from 1 to 90 {
.form-progress-bar-#{$i}::before { width: $i * 1%; }
}
@for $i from 91 to 99 {
.form-progress-bar-#{$i} { background: #6b8292; &::before { background: $purple-1; left: auto; right: 0; border-radius: 0 0.375rem 0.375rem 0; width: (100% - ($i * 1%)); } }
}