ctt-babylon 0.8.17 → 0.9.0

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

@@ -0,0 +1,848 @@
+@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;
+                }
+            }
+        }
+    }
+}