.plan {
// background: url('./images/background/bg-tolls-classic.jpg') top right / contain no-repeat; min-height: calc(100vh - 96px); padding: 0; width: 100%; @media screen and (max-width: $desktop) { background-position: 130% 0; background-size: auto 100%; } @media screen and (max-width: $tablet) { background: $whisper !important; min-height: calc(100vh - 86px); } @media screen and (max-height: $max-height) { padding: 0; background-position: 100% 0; } // &--prime { // background: url("./images/background/bg-tolls-prime.jpg") top right / // contain no-repeat; // } // &--exclusive { // background: url("./images/background/bg-tolls-brown.jpg") top right / // contain no-repeat; // } // &--private { // background: url("./images/background/bg-tolls-private.jpg") top right / // contain no-repeat; // } .plan__title-header { padding-right: 20px; } .plans { display: flex; flex-direction: column; justify-content: space-between; width: 100%; @media screen and (min-width: $tablet) { flex-direction: row; } } &__intro { max-width: 690px; color: $osloGray; font-family: $ft-open-sans; font-size: 16px; line-height: 1.5; display: inline-block; margin: 0 0 20px 0; @media screen and (max-width: $tablet) { width: 100%; margin-top: 15px; margin-bottom: 10px; } } &__row { align-items: flex-start; display: flex; justify-content: space-between; @media screen and (max-width: $tablet) { flex-direction: column-reverse; } > * { margin: 20px 0 0; @media screen and (max-width: $tablet) { margin: 0; max-width: 100%; } } } &__brand { &--white { width: 218px; @media screen and (max-width: $tablet) { display: none !important; } } &--black { display: none; @media screen and (max-width: $tablet) { display: block !important; } } @media screen and (max-width: $tablet) { height: 50px; margin-top: 20px; } } &__title { color: $title-color; font-family: $ft-galano; font-size: 28px; font-weight: 400; line-height: 1.25; margin: 0 0 10px; @media screen and (max-width: $tablet) { font-size: 22px; margin: 16px 0; } @media screen and (max-height: $max-height) { font-size: 29px; } &--row { display: block; } } &__box { background: $white; border-radius: 8px; box-shadow: 0 4px 12px 0 rgba(42, 34, 100, 0.24); display: flex; flex-direction: column; margin-bottom: 15px; max-width: calc(100vw - 32px); overflow: hidden; padding-bottom: 15px; width: 436px; @media screen and (max-height: $max-height) { width: 430px; } } &__header { padding: 12px 24px 15px; min-height: 90px; @if $plan-header-bg-color2 != null { background-image: linear-gradient( to bottom right, $plan-header-bg-color, $plan-header-bg-color2 ); } @else { background-color: $plan-header-bg-color; } } &__name { color: $plan-name-color; font-family: $ft-galano; font-size: 20px; font-weight: 400; line-height: 1.25; margin: 0; @media screen and (min-height: $tablet) { font-size: 23px; } } &__description { color: $white; font-family: $ft-open-sans; font-size: 15px; font-stretch: normal; font-style: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4; margin: 0; @media screen and (max-height: $max-height) { font-size: 13px; } } &__content { padding: 0 24px 10px; } &__list { list-style: none; margin: 0; padding: 0; } &__item { align-items: center; display: flex; font-family: $ft-open-sans; height: 50px; justify-content: space-between; &:nth-child(3), &:last-child { height: 30px; @media screen and (max-height: $max-height) { height: 25px; } } &:not(:nth-child(3)) { box-shadow: 0 1px 0 0 $blueHaze; } @media screen and (max-height: $max-height) { height: 40px; } } &__text { font-size: 14px; @media screen and (max-height: $max-height) { font-size: 12px; } } &__value { font-size: 16px; font-weight: bold; line-height: 1.56; @media screen and (max-height: $max-height) { font-size: 12px; } &--scratched { text-decoration: line-through; } &--free { background: url("./images/ic-check-free.svg") left center no-repeat; font-size: 16px; padding-left: 25px; @media screen and (max-height: $max-height) { font-size: 12px; } } } &__free { color: $manatee; display: inline-block; font-size: 14px; line-height: 1.5; text-align: center; text-transform: uppercase; width: 100%; @media screen and (max-height: $max-height) { font-size: 12px; } } &__checkmark { border-radius: 4px; border: 1px solid $cadetBlue; display: inline-block; margin-right: 10px; min-height: 20px; min-width: 20px; } &__term { align-items: center; color: $manatee; cursor: pointer; display: flex; padding: 0 40px; @media screen and (max-width: $tablet) { padding: 0 20px; } @media screen and (max-height: $max-height) { padding: 0; margin-top: 10px; } input { display: none; &:checked ~ .plan__checkmark { background: $scooter url("./images/ic-check.svg") center no-repeat; border: 1px solid transparent; transition: $transition; } } p { color: $manatee; font-family: $ft-open-sans; font-size: 12px; line-height: 1.43; @media screen and (max-height: $max-height) { font-size: 10px; margin: 0; } } a { color: $manatee; } } &__button { background: $button-bg-color; border-radius: 6px; color: $button-color; cursor: pointer; font-family: $ft-open-sans; font-size: 16px; font-weight: bold; height: 48px; margin: 0 auto; text-align: center; transition: $transition; width: 176px; @media screen and (max-height: $max-height) { font-size: 14px; height: 40px; } &:disabled { background-color: $button-disabled-bg-color; color: $manatee; cursor: not-allowed; opacity: 0.5; } }
}