PK!w_*ݰ_text-styling.scssnu[/* * * Text styling */ // Text styles .text-italic { font-style: italic; } .text-normal { font-style: normal; } // Text decoration .text-underline { text-decoration: underline; } .text-strike { text-decoration: line-through; } // Text weight .font-weight-thin { font-weight: 100; } .font-weight-light { font-weight: 300; } .font-weight-regular { font-weight: 400; } .font-weight-medium { font-weight: 500; } .font-weight-sbold { font-weight: 600; } .font-weight-ubold { font-weight: 900; } // Text spacing .text-spacing-0 { letter-spacing: 0; } // Text opacity .text-transparent{ color: rgba($white, .5); }PK!{ _backgrounds.scssnu[/* * * Backgrounds */ %context-dark { &, #{headings()} { color: $white; } p a { color: inherit; } .big { color: $white; } // Logo .brand { .brand-logo-dark { display: none; } .brand-logo-light { display: block; } } // Buttons .button-primary { &:hover { background: $primary-lighten; border-color: $primary-lighten; } } } %context-light { color: $body-color; #{headings()} { color: $headings-color; } // Logo .brand { .brand-logo-dark { display: block; } .brand-logo-light { display: none; } } } /** * Light Backgrounds */ .bg-gray-100 { @include bg-behaviour($gray-100); } .bg-gray-light { @include bg-behaviour($gray-light); } .bg-black-1 { @include bg-behaviour($black-1); } /** * Dark Backgrounds */ .context-dark { @extend %context-dark; } .bg-gray-700 { color: $gray-300; @extend %context-dark; @include bg-behaviour($gray-700); a { color: inherit; &:hover { color: $white; } } p a { &:hover { color: $white; } } } .bg-gray-800 { @extend %context-dark; @include bg-behaviour($gray-800); } /** * Accent Backgrounds */ .bg-primary { @extend %context-dark; @include bg-behaviour($primary); } .bg-primary-darker { @extend %context-dark; @include bg-behaviour($primary-darken); } /** * Background Image */ .bg-image { } [class*='bg-'] { background-size: cover; background-position: center center; } .bg-image-light { @include media-breakpoint-down(lg) { position: relative; &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba($white, .1); } } } .bg-image-1 { position: relative; background-position: 30% 100%; &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: $gray-700; opacity: .6; } > * { position: relative; z-index: 1; } @include media-breakpoint-up(sm) { background-position: 72% 100%; &::before { opacity: .2; } } @include media-breakpoint-up(md) { background-position: 54% 100%; &::before { display: none; } } } // Desktop only // html:not(.tablet):not(.mobile) { .bg-fixed { @include media-breakpoint-up(lg) { background-attachment: fixed; } } } .bg-image{ background-size: cover; background-repeat: no-repeat; background-position: center; }PK!OY ''_sections.scssnu[/* * * Sections */ // // Section Spacing // .section-xs { padding: 30px 0; } .section-sm { padding: 35px 0; &.section-first { padding-top: 65px; } &.section-last { padding-bottom: 80px; } } .section-md, .section-lg, .section-xl { padding: 50px 0; } .section-1 { padding: 35px 0; } // Section collapse .section-collapse + .section-collapse { padding-top: 0; } .section-collapse:last-child { padding-bottom: 0; } // Section with bottom zero padding html [class*='section-'].section-bottom-0 { padding-bottom: 0; } @include media-breakpoint-up(sm) { .section-xs { padding: 45px 0; } } @include media-breakpoint-up(md) { .section-sm { padding: 45px 0; &.section-first { padding-top: 90px; } &.section-last { padding-bottom: 90px; } } .section-md { padding: 60px 0; } .section-lg { padding: 72px 0; &.section-first { padding-top: 100px; } &.section-last { padding-bottom: 100px; } } .section-xl { padding: 80px 0; } .section-1 { padding: 60px 0; } } @include media-breakpoint-up(lg) { .section-md { padding: 60px 0 70px; } .section-xl { padding: 100px 0; } .section-1 { padding: 80px 0; } } @include media-breakpoint-up(xl) { .section-sm { padding: 60px 0; &.section-first { padding-top: 80px; } &.section-last { padding-bottom: 80px; } } } @include media-breakpoint-up(xxl) { .section-sm { &.section-first { padding-top: 120px; } &.section-last { padding-bottom: 120px; } } .section-md { padding: 85px 0 95px; } .section-lg { padding: 120px 0; &.section-first { padding-top: 120px; } &.section-last { padding-bottom: 120px; } } .section-xl { padding: 160px 0; } .section-1 { padding: 90px 0 100px; } } // // Custom sections // // Section single .section-single { display: flex; &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: rgba($gray-800, .4); } * + .rd-mailform-wrap { margin-top: 35px; } * + .countdown-wrap { margin-top: 30px; } .countdown-wrap + * { margin-top: 35px; } } .section-single-dummy { visibility: hidden; pointer-events: none; } .section-single-header { padding: calc(1em + 3vh) 0 calc(1em + 2vh); } .section-single-main { padding: calc(1em + 4vh) 0; } .section-single-footer { padding: calc(1em + 2vh) 0 calc(1em + 3vh); } .section-single-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; min-height: 100vh; padding-top: 6vh; > * { width: 100%; } } @supports (display: grid) { .section-single-inner { display: grid; justify-items: center; align-content: space-between; grid-template-columns: 1fr; } } @include media-breakpoint-down(xs) { .section-single { .section-single-main-content { max-width: 240px; margin-left: auto; margin-right: auto; } } } @include media-breakpoint-down(sm) { .section-single { .button-lg { font-size: 15px; padding-left: 25px; padding-right: 25px; } } } @include media-breakpoint-up(md) { .section-single { &::before { display: none; } } .section-single-inner { padding-top: 7vh; } } @include media-breakpoint-up(xl) { .section-single { * + .countdown-wrap { margin-top: 50px; } .countdown-wrap + * { margin-top: 50px; } } } // // Section Overlap // .section-overlap { position: relative; padding: 40px 0; .row { flex-wrap: nowrap; flex-direction: column; align-items: flex-end; } [class*='col'] { flex-basis: auto; } * + [class*='col'] { margin-top: 10px; } * + .col-offset-1 { margin-top: 20px; } } .section-overlap-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; } .section-overlap-content { position: relative; z-index: 1; } @include media-breakpoint-down(sm) { .section-overlap-content { .container { padding: 20px 15px; background: linear-gradient(to right, rgba($white, .9), rgba($white, .8)); > * { max-width: 380px; } } } @include media-breakpoint-up(sm) { .section-overlap-content { .container { padding: 40px 50px; } } } } @include media-breakpoint-between(md, md) { .section-overlap-image { &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; background: linear-gradient(to left, rgba($gray-100, .4), rgba($gray-100, 0)); } } } @include media-breakpoint-up(md) { .section-overlap { padding: 75px 0; * + [class*='col'] { margin-top: 20px; } * + .col-offset-1 { margin-top: 40px; } } .section-overlap-image { background-position: 80% 50%; width: #{grid-parameter(md, 5, 35px)}; } } @include media-breakpoint-up(lg) { .section-overlap { padding: 100px 0; } .section-overlap-image { width: #{grid-parameter(lg, 7, -45px)}; } .ie-10, .ie-11 { .section-overlap { .col-lg-7 { max-width: 64%; } } } } @include media-breakpoint-up(xl) { .section-overlap-image { width: #{grid-parameter(xl, 7, -15px)}; } } @include media-breakpoint-up(xxl) { .section-overlap { padding: 140px 0; } } // // Section Halfscreen // .section-halfscreen { position: relative; } .section-halfscreen-inner { padding: 40px 0; } .section-halfscreen-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba($white, .6), rgba($white, .4)); } } .section-halfscreen-content { position: relative; z-index: 1; } @include media-breakpoint-down(sm) { .section-halfscreen-content { max-width: 360px; } } @include media-breakpoint-between(sm, sm) { .section-halfscreen-image { &::before { opacity: .8; } } } @include media-breakpoint-up(md) { .section-halfscreen-inner { padding: 75px 0; } .section-halfscreen-image { background-position: 45% 50%; left: auto; width: #{grid-parameter(md, 5, 35px)}; &::before { display: none; } } } @include media-breakpoint-up(lg) { .section-halfscreen-inner { padding: 100px 0; } .section-halfscreen-image { width: #{grid-parameter(lg, 6, 0)}; } } @include media-breakpoint-up(xl) { .section-halfscreen { display: flex; } .section-halfscreen-inner { display: flex; align-items: center; width: 100%; min-height: (680 / 1920) * 100vw; padding: 90px 0; } .section-halfscreen-content { width: 100%; } } PK!;1_grid-modules.scssnu[/* * * Grid modules */ // Custom Grid // // Change $enable-grid-classes-custom: true // that would generate custom grid (example: 10 columns) $enable-grid-classes-custom: false; @mixin make-grid-columns-custom($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); @include media-breakpoint-up($breakpoint, $breakpoints) { @for $i from 1 through $columns { .col#{$infix}-#{$i} { @include make-col($i, $columns); } } } } } @if $enable-grid-classes-custom { .row-ten { @include make-grid-columns-custom(10); } .row-xl-ten { @include make-grid-columns-custom(10, 30px, (xl: map-get($grid-breakpoints, xl), xlg: map-get($grid-breakpoints, xlg), xxl: map-get($grid-breakpoints, xxl))); } } // // Range Grid System // .range { display: flex; flex-wrap: wrap; } .cell-inner { width: 100%; padding-right: 15px; padding-left: 15px; } .range > [class*='cell'] { position: relative; width: 100%; min-height: 1px; & > .row { margin: 0; } &.container { padding: 0; } } .range > [class*='col'] { padding: 0; } @mixin cell($breakpoint, $columns) { flex: 0 0 #{grid-parameter($breakpoint, $columns)}; max-width: #{grid-parameter($breakpoint, $columns)}; } @mixin cell-inner($breakpoint, $columns) { max-width: map-get($container-max-widths, $breakpoint) / 12 * $columns; } @include media-breakpoint-up(sm) { .cell-sm-6 { @include cell(sm, 6); .cell-inner { @include cell-inner(sm, 6); } } .range > [class*='cell-sm']:nth-child(odd) { .cell-inner { margin-left: auto; } } .range.flex-sm-row-reverse { > [class*='cell-sm'] { &:nth-child(odd) .cell-inner { margin-left: 0; } &:nth-child(even) .cell-inner { margin-left: auto; } } } .range > [class*='cell-sm'].container { margin: 0; } } @include media-breakpoint-up(md) { .range > [class*='cell-md']:nth-child(odd) { .cell-inner { margin-left: auto; } } .range.flex-md-row-reverse { > [class*='cell-md'] { &:nth-child(odd) .cell-inner { margin-left: 0; } &:nth-child(even) .cell-inner { margin-left: auto; } } } .range > [class*='cell-md'].container { margin: 0; } } @include media-breakpoint-up(lg) { [class*='cell-lg'] > .row > [class*='col'] { flex-basis: 100%; } .cell-lg-5 { @include cell(lg, 5); .cell-inner { @include cell-inner(lg, 5); } } .cell-lg-6 { @include cell(lg, 6); .cell-inner { @include cell-inner(lg, 6); } } .range > [class*='cell-lg']:nth-child(odd) { .cell-inner { margin-left: auto; } } .range.flex-lg-row-reverse { > [class*='cell-lg'] { &:nth-child(odd) .cell-inner { margin-left: 0; } &:nth-child(even) .cell-inner { margin-left: auto; } } } .range > [class*='cell-lg'].container { margin: 0; } } @include media-breakpoint-up(xl) { .range > [class*='cell-xl'].container { margin: 0; } .range > [class*='cell-xl']:nth-child(odd) { .cell-inner { margin-left: auto; } } .range { .cell-inner { flex-basis: 100%; } } .cell-xl-7 { @include cell(xl, 7); .cell-inner { @include cell-inner(xl, 7); } } .cell-lg-6, .cell-xl-6 { @include cell(xl, 6); .cell-inner { @include cell-inner(xl, 6); } } .cell-xl-5 { @include cell(xl, 5); .cell-inner { @include cell-inner(xl, 5); } } .cell-xl-4 { @include cell(xl, 4); .cell-inner { @include cell-inner(xl, 4); } } } @include media-breakpoint-up(xxl) { .cell-xxl-6 { @include cell(xl, 6); .cell-inner { @include cell-inner(xl, 6); } } } PK!<_utilities-custom.scssnu[/* * * Utilities custom */ .height-fill { position: relative; display: flex; flex-direction: column; align-items: stretch; > * { flex-grow: 1; flex-shrink: 0; } } // Object inline .object-inline { white-space: nowrap; > * { display: inline-block; min-width: 20px; vertical-align: top; white-space: normal; } &.wow span { display: inline-block; } > * + * { margin-left: 11px; } } .wow-outer { .object-inline span { display: inline-block; } } .oh { position: relative; overflow: hidden; } // Text decorations .text-decoration-lines { position: relative; overflow: hidden; width: 100%; text-align: center; &-content { position: relative; display: inline-block; padding: 0 20px; &::before, &::after { content: ''; position: absolute; height: 1px; background: $gray-300; top: 50%; width: 100vw; } &::before { left: 0; transform: translate3d(-100%, 0, 0); } &::after { right: 0; transform: translate3d(100%, 0, 0); } } } * + .text-decoration-lines { margin-top: 30px; } .text-block { > * { margin-left: .125em; margin-right: .125em; } } .offset-right-1 { @include media-breakpoint-up(lg) { margin-right: 40px; } } // Banner .banner { background-position: center center; background-size: cover; } // Phone Frame .phone-frame { max-width: 296px; padding: 0 5px; margin-left: auto; margin-right: auto; box-shadow: -46.037px 40.02px 21px 0px rgba(0, 0, 0, 0.02); } @include media-breakpoint-down(sm) { .phone-frame { display: none; } } // Tip Mark .tip-mark { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; padding-left: 2px; margin-bottom: 5px; font-size: 12px; line-height: 2em; vertical-align: middle; text-align: center; border-radius: 50%; border: 1px solid $gray-200; color: $primary; } PK!\\_page-layout.scssnu[/* * * Page layout */ // // Page // .page { position: relative; overflow: hidden; min-height: 100vh; &.fadeIn { animation-timing-function: ease-out; } &.fadeOut { animation-timing-function: ease-in; } [data-x-mode] & { opacity: 1; } } // // Boxed Layout // html.boxed { body { background: $page-boxed-background-color $page-boxed-background-image repeat fixed; } @media (min-width: $page-boxed-width + $grid-gutter-width) { .page { max-width: $page-boxed-width; margin-left: auto; margin-right: auto; box-shadow: 0 0 23px 0 rgba(1, 1, 1, 0.1); } .rd-navbar-static { max-width: $page-boxed-width; margin-left: auto; margin-right: auto; &.rd-navbar--is-stuck { max-width: $page-boxed-width; width: 100%; left: calc(50% - #{$page-boxed-width}); right: calc(50% - #{$page-boxed-width}); } } } } .page-header-navbar { position: relative; z-index: $zindex-rd-navbar; .rd-navbar-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: $zindex-rd-navbar; } } PK!ǜÜ _insets.scssnu[/* * * Insets */ // // Left // .inset-left-1 { @include media-breakpoint-up(sm) { padding-left: 10px; } @include media-breakpoint-up(md) { padding-left: 30px; } @include media-breakpoint-up(lg) { padding-left: 0; } } .inset-left-2 { @include media-breakpoint-between(lg, lg) { padding-left: 30px; } } // // Right // .inset-right-1 { @include media-breakpoint-up(sm) { padding-right: 20px; } @include media-breakpoint-up(md) { padding-right: 30px; } @include media-breakpoint-between(lg, lg) { padding-right: 0; } } .inset-right-2 { @include media-breakpoint-up(lg) { padding-right: 30px; } @include media-breakpoint-up(xl) { padding-right: 0; } } .inset-right-3 { @include media-breakpoint-up(lg) { padding-left: 5px; } @include media-breakpoint-up(xl) { padding-right: 0; } } PK!y _offsets.scssnu[/* * * Offsets */ // Elements offset * + p , * + .list-inline-comma { margin-top: 16px; } // Headings h3 + p, .heading-3 + p, h3 + .p, .heading-3 + .p { margin-top: 18px; } h4 + p, .heading-4 + p, h4 + .p, .heading-4 + .p { margin-top: 16px; } * + h1, * + .heading-1 { margin-top: 15px; } h3 + h1, h3 + .heading-1, .heading-3 + h1, .heading-3 + .heading-1 { margin-top: 5px; } h6 + h1, h6 + .heading-1, .heading-6 + h1, .heading-6 + .heading-1 { margin-top: 10px; } * + h4, * + .heading-4 { margin-top: 15px; } * + h5, * + .heading-5 { margin-top: 15px; } // Headings + Paragraph h6 + p, .heading-6 + p { margin-top: 22px; } // Paragraph + Headings p + h2, p + .heading-2 { margin-top: 15px; } // Tags + Tags p + p { margin-top: 14px; } img + p { margin-top: 15px; } h3 + img { margin-top: 42px; } p + hr { margin-top: 35px; } // Classes * + .row { margin-top: 30px; } * + .big { margin-top: 20px; } * + .text-block { margin-top: 25px; } * + .button, * + .button-outer { margin-top: 25px; } * + .list-sm { margin-top: 25px; } * + form.form-inline { margin-top: 18px; } * + form.rd-form-small { margin-top: 25px; } html * + .offset-top-1 { margin-top: 40px; } html * + .offset-top-2 { margin-top: 25px; } html * + .offset-top-3 { margin-top: 20px; } html * + .offset-top-4 { margin-top: 18px; } html .page * + .offset-top-5 { margin-top: 40px; } // Classes + Tags h3 + .row, .heading-3 + .row, h3 + .owl-carousel, .heading-3 + .owl-carousel { margin-top: 35px; } // Classes + Classes .container + .container { margin-top: 35px; } .container + .section { margin-top: 25px; } .row + .row { margin-top: 35px; } .row + .button-lg { margin-top: 30px; } .list-sm + .group-xs { margin-top: 20px; } @include media-breakpoint-up(md) { * + p, * + .list-inline-comma { margin-top: 20px; } * + .big { margin-top: 25px; } * + .button, * + .button-outer { margin-top: 34px; } * + .row { margin-top: 40px; } * + .text-block { margin-top: 30px; } .container + .section { margin-top: 30px; } .row + .button-lg { margin-top: 45px; } html * + .offset-top-2 { margin-top: 60px; } } @include media-breakpoint-up(lg) { * + h1, * + .heading-1 { margin-top: 22px; } h3 + p, .heading-3 + p, h3 + .p, .heading-3 + .p { margin-top: 24px; } h3 + .row, .heading-3 + .row, h3 + .owl-carousel, .heading-3 + .owl-carousel { margin-top: 55px; } html * + .offset-top-1 { margin-top: 60px; } html * + .offset-top-3 { margin-top: 30px; } html * + .offset-top-4 { margin-top: 24px; } html .page * + .offset-top-5 { margin-top: 60px; } .progress-linear + .button { margin-top: 55px; } .row + .group { margin-top: 45px; } } // Media offsets @include media-breakpoint-up(xl) { * + .button, * + .button-outer { margin-top: 40px; } * + .rd-form { margin-top: 40px; } h3 + p, .heading-3 + p, h3 + .p, .heading-3 + .p { margin-top: 30px; } html * + .offset-top-1 { margin-top: 70px; } .container + .container { margin-top: 60px; } .row + .row { margin-top: 60px; } } @include media-breakpoint-up(xxl) { h3 + .row, .heading-3 + .row, h3 + .owl-carousel, .heading-3 + .owl-carousel { margin-top: 75px; } html * + .offset-top-1 { margin-top: 144px; } html * + .offset-top-2 { margin-top: 75px; } .row + .button-lg { margin-top: 70px; } } // Range spacing .row-0 { @include grid-offset(0px); } .row-10 { @include grid-offset(10px); } .row-x-10 { @include grid-offset(10px); margin-left: -5px; margin-right: -5px; > [class*='col'] { padding-left: 5px; padding-right: 5px; } } .row-20 { @include grid-offset(20px); } .row-30 { @include grid-offset(30px); } .row-50 { @include grid-offset(50px); } .row-60 { @include grid-offset(50px); } .row-45 { @include grid-offset(45px); } @include media-breakpoint-up(md) { .row-md-50 { @include grid-offset(50px); } } @include media-breakpoint-up(lg) { .row-md-30 { @include grid-offset(30px); } } @include media-breakpoint-up(xxl) { .row-xxl-70 { @include grid-offset(70px); } } .offset-top-40{ margin-top: 40px; } .offset-top-30{ margin-top: 30px; }PK!w_*ݰ_text-styling.scssnu[PK!{ _backgrounds.scssnu[PK!OY ''$ _sections.scssnu[PK!;1)_grid-modules.scssnu[PK!<8_utilities-custom.scssnu[PK!\\A_page-layout.scssnu[PK!ǜÜ E_insets.scssnu[PK!y dI_offsets.scssnu[PKZ