ctt-babylon 0.8.16 → 0.8.17

package/lib/styles/styles/babylon/globals.scss

@@ -1,848 +0,0 @@
-@import 'mixins.scss';
-
-html * {
-    -webkit-font-smoothing: antialiased;
-}
-
-body {
-    background: var(--cl_background_body);
-    font-size: 14px;
-    line-height: 1.6;
-    font-family: var(--font-text);
-    color: var(--cl_text);
-    margin: 0;
-}
-
-main {
-    position: relative;
-    z-index: 2;
-    background-color: var(--cl_background_body);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    color: var(--cl_title);
-    font-weight: 700;
-    letter-spacing: -0.03em;
-    line-height: 1.3;
-}
-
-h3,
-h4,
-h5,
-h6 {
-    font-weight: 600;
-}
-
-p {
-    margin-bottom: 25px;
-}
-
-strong {
-    font-weight: 600;
-}
-
-p.lead {
-    strong {
-        font-weight: 500;
-    }
-}
-
-hr {
-    margin: 30px 0 30px 0;
-    border-color: var(--cl_border-light);
-    opacity: 1;
-
-    &.more_margin {
-        margin: 60px 0 60px 0;
-    }
-}
-
-/* General links color */
-a {
-    color: var(--cl_btn-link);
-    text-decoration: none;
-    @include transition-default;
-    outline: none;
-
-    &:hover,
-    &:focus {
-        color: var(--cl_btn-link-hover);
-        text-decoration: none;
-        outline: none;
-    }
-}
-
-/*-------- ESPACIOS --------*/
-.margin-main {
-    padding-block: 60px;
-    @include full-tablet {
-        padding-block: 40px;
-    }
-    @include small-tablet {
-        padding-block: 30px;
-    }
-}
-.margin-main-botom {
-    margin-bottom: 60px;
-    @include full-tablet {
-        margin-bottom: 40px;
-    }
-}
-/*-------- BUTTONS --------*/
-
-.btn {
-    border: none;
-    border: 1px solid var(--cl_btn-box);
-    color: var(--cl_btn-box-text);
-    padding: 13px 25px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    outline: none;
-    background-color: transparent;
-    transition: all 0.4s ease;
-
-    @include transition-default;
-    border-radius: var(--btn_radius);
-    line-height: 1;
-    font-family: var(--font-text);
-    letter-spacing: 1px;
-    font-weight: var(--w_btn);
-    font-size: 14px;
-    cursor: pointer;
-    text-decoration: none;
-    span {
-        width: 24px;
-        height: 15px;
-        font-size: 8px;
-        font-weight: var(--w_btn);
-        align-items: center;
-        display: flex;
-        @include transition-default;
-        svg,
-        &:before {
-            @include transition-default;
-            color: var(--cl_btn-box-text);
-            right: 0px;
-            position: relative;
-        }
-    }
-    &:hover {
-        background-color: var(--cl_btn-box-hover);
-        color: var(--cl_btn-box-text-hover);
-        span {
-            svg,
-            &:before {
-                color: var(--cl_btn-box-text-hover);
-                right: -10px;
-                position: relative;
-            }
-        }
-    }
-
-    &_primary {
-        border: 1px solid var(--cl_btn-box);
-        color: var(--cl_btn-box-text);
-        background: transparent;
-        position: relative;
-        &.btn--light {
-            border: 1px solid var(--cl_btn-light);
-            color: var(--cl_btn-light-text);
-            span {
-                svg,
-                &:before {
-                    color: var(--cl_btn-light-text);
-                }
-            }
-        }
-        &:hover {
-            background-color: var(--cl_btn-box-hover);
-            border-color: var(--cl_btn-box-hover);
-            color: var(--cl_btn-box-text-hover);
-        }
-    }
-    &_call {
-        border: 1px solid var(--cl_btn-call);
-        background-color: var(--cl_btn-call);
-        color: var(--cl_btn-call-text);
-        position: relative;
-        span:before {
-            color: var(--cl_btn-call-text);
-        }
-        &.btn--light {
-            background-color: var(--cl_btn-light);
-            border: 1px solid var(--cl_btn-light);
-            color: var(--cl_btn-call);
-            span:before {
-                color: var(--cl_btn-call);
-            }
-        }
-        &:hover {
-            background-color: var(--cl_btn-call-hover);
-            border-color: var(--cl_btn-call-hover);
-            color: var(--cl_btn-call-text-hover);
-        }
-    }
-}
-
-.btn-link {
-    position: relative;
-    font-style: normal;
-    font-family: var(--font-text);
-    letter-spacing: 1px;
-    font-weight: var(--w_btn);
-    font-size: 14px;
-    cursor: pointer;
-    text-decoration: none;
-    color: var(--cl_btn-link);
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    @include transition-default;
-    span {
-        font-size: 8px;
-        @include transition-default;
-        svg,
-        &:before {
-            @include transition-default;
-            color: var(--cl_btn-link);
-            right: 0px;
-            position: relative;
-        }
-    }
-    &:hover {
-        color: var(--cl_btn-link-hover);
-        span {
-            svg,
-            &:before {
-                color: var(--cl_btn-link-hover);
-                right: -10px;
-                position: relative;
-            }
-        }
-    }
-    &.btn-link--light {
-        color: var(--cl_btn-light);
-        span:before {
-            color: var(--cl_btn-light);
-        }
-        &:hover {
-            color: var(--cl_btn-light -hover);
-            span {
-                svg,
-                &:before {
-                    color: var(--cl_btn-light -hover);
-                }
-            }
-        }
-    }
-}
-
-.btns__box {
-    padding-block: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    flex-wrap: wrap;
-    gap: 10px;
-    &.justify-between {
-        justify-content: space-between;
-        @include medium-tablet {
-            justify-content: center;
-            flex-direction: column;
-        }
-    }
-    &.align--left {
-        justify-content: flex-start;
-        @include full-tablet {
-            justify-content: center;
-        }
-    }
-    &.align--right {
-        justify-content: flex-end;
-        @include full-tablet {
-            justify-content: center;
-        }
-    }
-    &.align--center {
-        justify-content: center;
-        @include full-tablet {
-            justify-content: center;
-        }
-    }
-    &.align--vertical-center {
-        justify-content: center;
-        flex-direction: column;
-        @include full-tablet {
-            justify-content: center;
-        }
-    }
-    @include full-tablet {
-        padding-block: 20px 10px;
-        align-items: center;
-        justify-content: center;
-    }
-}
-
-/*-------- TEXTOS--------*/
-.title_carrusel {
-    font-size: 40px;
-    font-family: var(--font-title);
-    line-height: 1.2;
-    letter-spacing: 1px;
-    color: var(--cl_title-light);
-    font-weight: var(--w_title);
-    margin: 0;
-    margin-block: 0;
-    @include min-small-desktop {
-        font-size: 70px;
-    }
-    @include min-full-desktop {
-        font-size: 85px;
-    }
-    &.title_carrusel--dark {
-        color: var(--cl_title);
-    }
-}
-.pretitle_carrusel {
-    font-size: 16px;
-    line-height: 1.2;
-    letter-spacing: 1px;
-    color: var(--cl_pretitle-light);
-    font-weight: var(--w_pretitle);
-    margin: 0;
-    margin-block: 0;
-    @include min-small-desktop {
-        font-size: 18px;
-    }
-    @include min-full-desktop {
-        font-size: 20px;
-    }
-    &.pretitle_carrusel--dark {
-        color: var(--cl_pretitle);
-    }
-}
-.title--big {
-    font-size: 50px;
-    font-family: var(--font-title);
-    line-height: 1.2;
-    letter-spacing: 1px;
-    color: var(--cl_title);
-    font-weight: var(--w_title);
-    margin: 0;
-    margin-block: 0;
-    @include min-small-desktop {
-        font-size: 80px;
-    }
-    @include min-full-desktop {
-        font-size: 90px;
-    }
-}
-.title {
-    font-size: 40px;
-    font-family: var(--font-title);
-    line-height: 1.2;
-    letter-spacing: 1px;
-    color: var(--cl_title);
-    font-weight: var(--w_title);
-    margin: 0;
-    margin-block: 0;
-    @include min-small-desktop {
-        font-size: 50px;
-    }
-    @include min-full-desktop {
-        font-size: 60px;
-    }
-}
-.title--small {
-    @extend .title;
-    font-size: 28px;
-    font-family: var(--font-title);
-    &--light {
-        color: var(--cl_title-light);
-    }
-    @include min-small-desktop {
-        font-size: 30px;
-    }
-    @include min-full-desktop {
-        font-size: 36px;
-    }
-}
-.title--smaller {
-    @extend .title;
-    font-size: 20px;
-    font-family: var(--font-title);
-}
-.pretitle {
-    font-size: 14px;
-    line-height: 1.2;
-    letter-spacing: 3px;
-    color: var(--cl_pretitle);
-    font-weight: var(--w_pretitle);
-    margin: 0;
-    margin-block: 0;
-    text-transform: uppercase;
-    font-family: var(--font-pretitle);
-    @include min-small-desktop {
-        font-size: 14px;
-    }
-    @include min-full-desktop {
-        font-size: 16px;
-    }
-}
-.pretitle--small {
-    @extend .pretitle;
-    font-size: 16px;
-}
-.subtitle {
-    font-size: 20px;
-    line-height: 1.2;
-    letter-spacing: 1px;
-    color: var(--cl_subtitle);
-    font-weight: var(--w_subtitle);
-    margin: 0;
-    margin-block: 0;
-    @include min-small-desktop {
-        font-size: 26px;
-    }
-    @include min-full-desktop {
-        font-size: 30px;
-    }
-}
-.subtitle--small {
-    @extend .subtitle;
-    font-size: 20px;
-    &--light {
-        color: var(--cl_title-light);
-    }
-}
-.pretitle-top {
-    font-size: 14px;
-    line-height: 1.2;
-    letter-spacing: 2px;
-    color: var(--cl_pretitle);
-    font-family: var(--font-pretitle);
-    font-weight: var(--w_pretitle);
-    margin: 0;
-    margin-block: 0;
-    text-transform: uppercase;
-    text-align: left;
-    margin-bottom: 1rem;
-    @include min-small-desktop {
-        font-size: 16px;
-        margin-bottom: 3rem;
-    }
-    @include min-full-desktop {
-        font-size: 16px;
-        margin-bottom: 5rem;
-    }
-    @include full-tablet {
-        text-align: center;
-    }
-}
-.text {
-    font-size: 14px;
-    line-height: 1.7;
-    color: var(--cl_text);
-    font-weight: var(--w_text);
-    margin: 0;
-    margin-block: 0;
-    margin-bottom: 20px;
-    font-family: var(--font-text);
-    a {
-        color: var(--cl_text);
-        &:hover {
-            color: var(--cl_accent);
-        }
-    }
-    @include min-small-desktop {
-        font-size: 16px;
-    }
-    @include full-tablet {
-        margin-bottom: 10px;
-    }
-}
-.text--small {
-    font-size: 13px;
-    line-height: 1.7;
-    color: var(--cl_text);
-    font-weight: 400;
-    margin: 0;
-    margin-block: 0;
-    font-family: var(--font-text);
-    @include min-small-desktop {
-        font-size: 14px;
-    }
-}
-
-@mixin intro_info_align($type-align) {
-    @if $type-align == center {
-        @include min-full-tablet {
-            body {
-                .intro_info:not(.no-align) {
-                    flex-direction: column;
-                    align-items: center;
-                    justify-content: center;
-                    text-align: center;
-                    width: 100%;
-                    .btns__box {
-                        justify-content: center;
-                    }
-                    .cs_list.cs_style_1 {
-                        li {
-                            justify-content: center;
-                        }
-                    }
-                }
-                .cs_iconbox.cs_style_3 {
-                    text-align: center;
-                }
-                .cs_card.cs_style_4,
-                .cs_card.cs_style_1 {
-                    .cs_card_list {
-                        justify-content: center;
-                    }
-                }
-            }
-        }
-    } @else if $type-align == left {
-        @include min-full-tablet {
-            body {
-                .intro_info:not(.no-align) {
-                    flex-direction: column;
-                    align-items: flex-start;
-                    justify-content: flex-start;
-                    text-align: left;
-                    .btns__box {
-                        justify-content: flex-start;
-                    }
-                    .cs_list.cs_style_1 {
-                        li {
-                            justify-content: flex-start;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.intro_info {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    text-align: left;
-    .pretitle {
-        margin-bottom: 30px;
-        @include full-tablet {
-            margin-bottom: 10px;
-        }
-    }
-    .title {
-        margin-bottom: 25px;
-        @include full-tablet {
-            margin-bottom: 10px;
-        }
-    }
-    .subtitle {
-        margin-bottom: 20px;
-        @include full-tablet {
-            margin-bottom: 10px;
-        }
-    }
-    &--light {
-        .text {
-            color: var(--cl_text-light);
-        }
-        .title {
-            color: var(--cl_title-light);
-        }
-        .subtitle {
-            color: var(--cl_subtitle-light);
-        }
-        .pretitle,
-        .pretitle-top {
-            color: var(--cl_pretitle-light);
-        }
-
-        .text--small {
-            color: var(--cl_text-light);
-        }
-        .info--icon .icon--svg {
-            background-color: var(--cl_title-light);
-        }
-    }
-    &.align--center {
-        align-items: center;
-        text-align: center;
-        .btns__box.align--center {
-            justify-content: center;
-        }
-    }
-    &.align--left {
-        align-items: flex-start;
-        text-align: left;
-    }
-    &.align--right {
-        align-items: flex-end;
-    }
-    @include full-tablet {
-        align-items: center !important;
-        justify-content: center !important;
-        text-align: center !important;
-        width: 100%;
-        .cs_card_lis,
-        .cs_card_list {
-            align-items: center;
-            justify-content: center;
-        }
-    }
-}
-
-$type-align: left; //center / left
-@include intro_info_align($type-align);
-
-.cs--radius {
-    border-radius: var(--img_radius);
-}
-
-.bg--gray {
-    background-color: var(--cl_background_gray);
-}
-
-.bg--dark {
-    background-color: var(--cl_background_dark);
-}
-
-.bg--white {
-    background-color: var(--cl_background_white);
-}
-
-.cs_image_layer,
-.cs_feature_box_thumb,
-.cs_video_block,
-.cs_post_thumb,
-.cs_gallery_item_hover,
-.cs_card_thumb,
-.cs_feature_box_bg {
-    position: relative;
-    &:not(.cs_style_5) {
-        &::before,
-        &::after {
-            content: '';
-            position: absolute;
-            left: 30px;
-            right: 30px;
-            top: 30px;
-            bottom: 30px;
-            border: var(--img_border-whidth) solid var(--img_border);
-            border-radius: var(--img_radius);
-            z-index: 1;
-            @include full-tablet {
-                left: 15px;
-                right: 15px;
-                top: 15px;
-                bottom: 15px;
-            }
-        }
-    }
-    &.no-border {
-        &::before,
-        &::after {
-            border: none !important;
-        }
-        .cs_image_layer_2,
-        .cs_image_layer_1 {
-            position: relative;
-            &::before,
-            &::after {
-                content: '';
-                z-index: 1;
-                position: absolute;
-                left: 30px;
-                right: 30px;
-                top: 30px;
-                bottom: 30px;
-                border: var(--img_border-whidth) solid var(--img_border);
-                border-radius: var(--img_radius);
-                @include full-tablet {
-                    left: 15px;
-                    right: 15px;
-                    top: 15px;
-                    bottom: 15px;
-                }
-            }
-        }
-    }
-}
-
-.btn-close--modal {
-    position: absolute;
-    top: 70px;
-    right: 70px;
-    z-index: 1;
-
-    .babylon-plus::before {
-        transform: rotate(-45deg);
-    }
-
-    &.margin-30 {
-        top: 30px;
-        right: 30px;
-    }
-}
-
-.blanco-version-form {
-    .input-group {
-        position: relative;
-        .input-control,
-        .select-control {
-            height: 6rem;
-            appearance: none;
-            border: 1px solid transparent;
-            border-bottom-color: var(--var(--grey));
-            @include lineHeight(14, 14);
-            color: var(--primary);
-            padding: 2.9rem 5.6rem 1rem 2rem;
-            outline: 0;
-            width: 100%;
-            transition: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-            background: transparent;
-            display: block;
-            &:hover,
-            &:focus {
-                border-color: var(--grey);
-                background: var(--white);
-            }
-        }
-        &.open {
-            span.input-control {
-                border-color: var(--grey);
-            }
-        }
-        &--inner {
-            position: relative;
-        }
-        &--label {
-            position: absolute;
-            left: 0.2rem;
-            padding: 2.1rem 2rem;
-            @include lineHeight(16, 16);
-            color: var(--primary);
-            transition: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-            top: 0.1rem;
-            background: var(--white);
-            pointer-events: none;
-            width: calc(100% - 5.6rem);
-        }
-        &--icon {
-            position: absolute;
-            width: 1.6rem;
-            height: 1.6rem;
-            top: 50%;
-            pointer-events: none;
-            right: 2rem;
-            transform: translateY(-50%);
-            &:has(.user) {
-                width: 1.2rem;
-                height: 1.2rem;
-            }
-            &:has(.baby) {
-                width: 0.9rem;
-                height: 0.9rem;
-            }
-            svg {
-                width: 100%;
-                height: 100%;
-            }
-        }
-        &:has(input:focus) &,
-        &:has(input:not(:placeholder-shown)) & {
-            &--label {
-                padding-top: 1.1rem;
-                padding-bottom: 3.2rem;
-                line-height: 1;
-                background: transparent;
-            }
-        }
-        &:not(.open) {
-            .input-group--icon {
-                svg {
-                    &.persons {
-                        display: block;
-                    }
-                    &.down-arrow {
-                        display: none;
-                        width: 1.4rem;
-                        height: 1.4rem;
-                    }
-                }
-            }
-        }
-        &.open {
-            .input-group--icon {
-                svg {
-                    &.persons {
-                        display: none;
-                    }
-                    &.down-arrow {
-                        display: block;
-                        width: 1.4rem;
-                        height: 1.4rem;
-                    }
-                }
-            }
-        }
-    }
-    .checkbox__group {
-        label {
-            position: relative;
-            input {
-                position: absolute;
-                left: 0;
-                top: 0;
-                opacity: 0;
-                pointer-events: none;
-                &:checked + span {
-                    svg {
-                        opacity: 1;
-                    }
-                }
-            }
-            span {
-                padding-left: 2.55rem;
-                @include lineHeight(14, 14);
-                color: rgb(var(--primary), 80%);
-                position: relative;
-                display: block;
-                &::before {
-                    content: '';
-                    width: 1.5rem;
-                    height: 1.5rem;
-                    border: 1px solid rgb(var(--primary), 70%);
-                    position: absolute;
-                    left: 0;
-                    top: 0.1rem;
-                }
-                .checkbox--tick {
-                    opacity: 0;
-                    pointer-events: none;
-                    width: 0.9rem;
-                    height: 0.6rem;
-                    color: var(--primary);
-                    position: absolute;
-                    left: 0.3rem;
-                    top: 0.5rem;
-                }
-            }
-        }
-    }
-}