%PDF- %PDF-
Direktori : /var/www/maraton.eco-n-tech.co.uk/wp-content/themes/maraton/src/scss/ |
Current File : /var/www/maraton.eco-n-tech.co.uk/wp-content/themes/maraton/src/scss/main.scss |
@import "~animate.css/animate.min.css"; $fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; @import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import '~@fortawesome/fontawesome-free/scss/solid'; @import '~@fortawesome/fontawesome-free/scss/regular'; @import "custom"; @import "~bootstrap/scss/bootstrap-grid"; @import "~bootstrap/scss/bootstrap-reboot"; @import "~bootstrap/scss/accordion"; @import "~bootstrap/scss/modal"; @import "~bootstrap/scss/transitions"; @import "fonts"; @import "../../blocks/**/*.scss"; @import "wp"; @import "header"; @import "footer"; .animate__delay-05s { animation-delay: 0.5s; } html { &.scroll-behavior-auto { scroll-behavior: auto !important; } } @media screen and (max-width: 782px) { html #wpadminbar { overflow-x: scroll; } } body { min-height: 100vh; display: flex; flex-direction: column; font-family: 'Source Sans Pro', sans-serif; box-sizing: border-box; main { overflow-x: hidden; } // Archive Mediekanaler &.post-type-archive-mediekanaler, &.single-mediekanaler { main { padding-top: calc-rem(200); } } // Archive Biblioteket &.post-type-archive-biblioteket, &.tax-biblioteket_cat { main { padding-top: calc-rem(95); @include media-breakpoint-down(sm) { padding-top: calc-rem(74); } } } // Single Biblioteket &.single-biblioteket { main { padding-top: calc-rem(95); background-color: #F6F2EE; @include media-breakpoint-down(sm) { padding-top: calc-rem(74); } } } // Archive Karriar &.post-type-archive-karriar { main { background-color: #F6F2EE; padding-top: calc-rem(95); @include media-breakpoint-down(sm) { padding-top: calc-rem(74); } } } // Single Karriar &.single-karriar { main { background-color: #F6F2EE; padding-top: calc-rem(95); @include media-breakpoint-down(sm) { padding-top: calc-rem(74); } } } // Archive FAQ, Single FAQ, Single &.post-type-archive-faq, &.single-faq { main { background-color: #F6F2ED; padding-top: calc-rem(200); @include media-breakpoint-down(sm) { padding-top: calc-rem(100); } } } // Default page &.page-template-default:not(.has-header-section) { main { padding-top: calc-rem(95); @include media-breakpoint-down(sm) { padding-top: calc-rem(74); } } } } ul { margin-bottom: calc-rem(45); } ol { list-style: none; padding-left: 0; margin-top: calc-rem(25); margin-bottom: calc-rem(25); li { font-family: $ofelia; font-size: calc-rem(25); padding-block: calc-rem(35); font-weight: 600; position: relative; border-bottom: 1px solid $black; padding-left: calc-rem(70); &:first-child { border-top: 1px solid $black; } @include media-breakpoint-down(sm) { font-size: calc-rem(18); padding-left: calc-rem(40); } &::before { content: counter(list-item, decimal-leading-zero) '.'; font-weight: 400; position: absolute; left: 0; top: 50%; transform: translateY(-50%); @include media-breakpoint-down(sm) { content: counter(list-item, decimal-leading-zero); } } } } [data-animate] { @include media-breakpoint-up(lg) { opacity: 0; } } .xdebug-var-dump, pre { background: #fff; } // Mobile container fluid .container-fluid { @include media-breakpoint-down(sm) { padding-left: calc-rem(30); padding-right: calc-rem(30); } } // Buttons { .button { background-color: $primary; color: $white; text-decoration: none; padding-inline: calc-rem(40); height: calc-rem(65); border-radius: calc-rem(33); display: inline-flex; align-items: center; transition: 0.2s all ease; @include media-breakpoint-down(md) { max-width: calc-rem(240); margin-inline: auto; } &:hover { background-color: $black; color: $white; } img { width: calc-rem(27); margin-left: calc-rem(8); } } img + .button, img + noscript + .button { @include media-breakpoint-down(sm) { margin-top: calc-rem(20); } @include media-breakpoint-up(sm) { margin-left: calc-rem(40); } } #boka-ett-mote { &::after { content: ''; background-image: url("../img/arrow-right.svg"); background-size: contain; width: calc-rem(27); height: calc-rem(12); margin-left: calc-rem(10); background-repeat: no-repeat; } } // } Buttons // Breadcrumbs .breadcrumbs { text-transform: uppercase; font-size: calc-rem(18); color: #6F6F6F; margin-bottom: calc-rem(60); display: flex; align-items: center; flex-wrap: wrap; a { text-decoration: none; color: #6F6F6F; &:hover { text-decoration: underline; color: $primary; } } .breadcrumbs__current { max-width: calc-rem(300); overflow: hidden; text-overflow: ellipsis; display: inline-block; white-space: nowrap; } } // Notification .notification { display: block; font-size: calc-rem(19); line-height: 1.3; margin: 0; padding: calc-rem(11) calc-rem(19); text-decoration: none; color: $primary; background: rgba($primary, 0.1); border-radius: calc-rem(10); position: relative; > * { margin-bottom: calc-rem(10); &:last-child { margin-bottom: 0; } } &:before { position: absolute; top: 0; left: 0; content: ""; width: 16px; height: 16px; border-radius: 50%; background: $primary; border: 4px solid #1a1e2e; box-shadow: 0 0 0 0 black; animation: pulse 3s infinite; z-index: 2; transform: translate(-50%, -50%); } } // Pagination .pagination { display: flex; justify-content: center; padding-top: calc-rem(50); ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; li { display: block; .pagination--prev { svg { max-width: calc-rem(27); transform: rotate(-180deg); height: auto; vertical-align: baseline; * { fill: $primary } } } .pagination--next { svg { max-width: calc-rem(27); height: auto; vertical-align: baseline; * { fill: $primary } } } > a { color: $primary; &:hover { background: $primary; color: $white; svg { * { fill: $white; } } } &.pagination--prev { color: $primary; } &.pagination--next { color: $primary; } } > span { color:rgba(#919191, 0.5); } > * { border-radius: calc-rem(4); font-size: calc-rem(18); line-height: calc-rem(18); text-decoration: none; display: block; padding: calc-rem(6) calc-rem(8); transition: $transition_normal; &.pagination--active { background: $primary; color: $white; } } & + li { margin-left: calc-rem(7); } } } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba($primary, 0.7); } 25% { box-shadow: 0 0 0 10px rgba(71, 190, 190, 0); } 50% { box-shadow: 0 0 0 0 rgba(71, 190, 190, 0); } } // Page 404 .page-404 { min-height: 100vh; display: flex; flex-flow: column; justify-content: center; align-items: center; text-align: center; } // CPT Biblioteket { .biblioteket { // Header &__header { background-color: #F6F2EE; padding-block: calc-rem(85); h1 { @include media-breakpoint-down(sm) { margin-bottom: calc-rem(20); font-size: calc-rem(34); } } p { max-width: calc-rem(760); margin-bottom: 0; } } // Categories list &__categories { padding-block: calc-rem(50); border-bottom: 1px solid #dbdbdb; > span { font-family: $ofelia; font-weight: 600; color: $primary; margin-right: calc-rem(30); @include media-breakpoint-down(sm) { display: block; margin-bottom: calc-rem(25); } } a { letter-spacing: calc-rem(-0.32); font-size: calc-rem(16); text-decoration: none; padding-bottom: calc-rem(5); &:not(:last-child) { margin-right: calc-rem(30); } &.active { font-weight: 600; border-bottom: 2px solid $primary; } } } &__archive { // Archive margin-top: calc-rem(50); margin-bottom: calc-rem(170); @include media-breakpoint-down(md) { margin-bottom: calc-rem(50); } // Post item &-post { // Big style &.big { .preview-biblioteket { padding-bottom: calc-rem(50); @include media-breakpoint-up(md) { margin-bottom: calc-rem(40); } @include media-breakpoint-down(md) { border: 0; } } .preview-biblioteket__content-meta { @include media-breakpoint-down(md) { font-size: calc-rem(16); margin-bottom: calc-rem(20); } } .preview-biblioteket__content { h4 { @include media-breakpoint-down(md) { font-size: calc-rem(20); margin-bottom: 0; } } } } // Default style &:not(.big) { @include media-breakpoint-up(md) { max-width: 50%; } .preview-biblioteket { border: 0; position: relative; padding-bottom: 0; margin-bottom: calc-rem(50); @include media-breakpoint-down(sm) { margin-bottom: calc-rem(40); } .col-md-6 { @include media-breakpoint-down(xl) { width: 100%; } } } .preview-biblioteket__image { position: relative; @include media-breakpoint-up(xl) { max-width: calc-rem(275); } } .preview-biblioteket__image-arrow { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); svg { * { fill: #fff; } } } .preview-biblioteket__content-meta { font-size: calc-rem(16); margin-bottom: calc-rem(20); } .preview-biblioteket__content { padding-left: calc-rem(40); flex: 1; @include media-breakpoint-down(xl) { padding-top: calc-rem(20); padding-left: 0; } h4 { font-size: calc-rem(20); max-width: calc-rem(440); @include media-breakpoint-down(md) { margin-bottom: 0; } } } .preview-biblioteket__content-arrow { display: none; } } } // Pagination .pagination { border-top: 1px solid #dbdbdb; } } &__single { // Single //Image &-image { min-height: calc(100vh - #{calc-rem(95)}); position: relative; overflow: hidden; @include media-breakpoint-down(sm) { min-height: calc-rem(220); } img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; } } // Content &-content { max-width: calc-rem(1080); margin-inline: auto; margin-top: -25vh; position: relative; background-color: #F6F2EE; @include media-breakpoint-down(sm) { margin-top: calc-rem(-70); margin-inline: calc-rem(20); } .container { padding: calc-rem(75); @include media-breakpoint-down(md) { padding: calc-rem(20); } } h2 { font-size: calc-rem(30); font-weight: 600; letter-spacing: calc-rem(-1.2); line-height: calc-lh(30, 40); margin-bottom: calc-rem(25); font-family: $ofelia; @include media-breakpoint-down(lg) { font-size: calc-rem(25); } } h3 { font-size: calc-rem(25); letter-spacing: -0.075rem; margin-bottom: calc-rem(25); @include media-breakpoint-down(lg) { font-size: calc-rem(20); } } h4 { font-size: calc-rem(20); @include media-breakpoint-down(lg) { font-size: calc-rem(16); } } p:first-of-type { font-size: calc-rem(25); line-height: calc-lh(25, 34); @include media-breakpoint-up(md) { font-size: calc-rem(30); line-height: calc-lh(30, 43); } } ul { margin-bottom: calc-rem(45); word-break: break-word; } p:not(:first-of-type), h2, h3, h4, ul, .wp-block-image, .wp-block-quote{ max-width: calc-rem(730); } .wp-block-image { margin-bottom: calc-rem(50); } } // Related posts &-related { @include media-breakpoint-down(md) { background-color: #fff; } hr { background-color: #DBDBDB; margin-bottom: calc-rem(120); @include media-breakpoint-down(md) { margin-bottom: calc-rem(60); } } h3 { margin-bottom: calc-rem(75); } .biblioteket__archive { @include media-breakpoint-down(md) { margin-bottom: 0; } } } } &__not-found { padding-top: calc-rem(50); padding-bottom: calc-rem(80); } } .preview-biblioteket { // Preview padding-bottom: calc-rem(80); border-bottom: 1px solid #dbdbdb; text-decoration: none; display: block; &:not(:last-child) { margin-bottom: calc-rem(80); } @include media-breakpoint-down(md) { padding-bottom: calc-rem(30); &:not(:last-child) { margin-bottom: calc-rem(40); } } &:hover { .preview-biblioteket__image { opacity: 0.6; } .preview-biblioteket__content { h4 { color: $primary; text-decoration: underline; } } .preview-biblioteket__content-arrow { svg * { fill: $primary; } } } & * { transition: $transition_normal; } &__image { height: 100%; &-arrow { display: none; } img { max-width: 100%; height: auto; } } // Content &__content { display: flex; flex-flow: column; padding-top: calc-rem(20); @include media-breakpoint-up(md) { padding-top: 0; padding-left: calc-rem(60); } &-meta { margin-bottom: calc-rem(30); span { color: $black; &:not(:last-child):after { content: " | "; margin-left: calc-rem(8); margin-right: calc-rem(8); } @include media-breakpoint-down(md) { font-size: calc-rem(16); } } a { transition: $transition_normal; color: $black; &:hover { color: $primary; text-decoration: underline; span { color: $primary; } } } } &-arrow { margin-top: auto; margin-bottom: calc-rem(35); @include media-breakpoint-down(md) { display: none; } } a { text-decoration: none; } h4 { color: $black; font-weight: 400; font-family: $font-primary; letter-spacing: initial; } } } // } CPT Biblioteket // CPT Mediekanaler { .mediekanaler { &__header { margin-bottom: calc-rem(100); // Image &__image { height: 100%; display: flex; align-items: center; justify-content: center; img { max-width: 100%; } } a { color: $black; text-decoration: none; } h1 { font-size: calc-rem(20); text-transform: uppercase; letter-spacing: calc-rem(3.2); margin-bottom: calc-rem(15); font-family: $font-primary; font-weight: 500; line-height: 1.2; } //h1 { // font-size: calc-rem(90); // letter-spacing: calc-rem(-4.5); // font-family: $ofelia; // line-height: calc-lh(90, 110); // font-weight: 600; // // @include media-breakpoint-down(xl) { // font-size: calc-rem(60); // letter-spacing: calc-rem(-3); // } // // @include media-breakpoint-down(md) { // font-size: calc-rem(34); // letter-spacing: calc-rem(-2); // word-break: break-word; // hyphens: auto; // } // // @include media-breakpoint-up(lg) { // margin-left: calc-rem(-8); // } //} hr { margin-top: calc-rem(120); margin-bottom: calc-rem(80); background-color: #131315; } } // Categories list &__categories { border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; padding-block: calc-rem(30); margin-bottom: calc-rem(70); span { font-family: $ofelia; font-weight: 600; letter-spacing: calc-rem(-0.8); margin-right: calc-rem(30); } a { letter-spacing: calc-rem(-0.32); font-size: calc-rem(16); text-decoration: none; padding-bottom: calc-rem(5); &:not(:last-child) { margin-right: calc-rem(30); } &.active { font-weight: 600; border-bottom: 2px solid $primary; } } } // Archive &__archive { margin-bottom: calc-rem(150); &-post { width: 100%; max-width: calc(100% / 5); @include media-breakpoint-down(xl) { max-width: calc(100% / 4); } @include media-breakpoint-down(lg) { max-width: calc(100% / 3); } @include media-breakpoint-down(md) { max-width: calc(100% / 2); } } .row { --bs-gutter-x: 2.1875rem; --bs-gutter-y: 2.1875rem; @include media-breakpoint-down(md) { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; } } } &__not-found { padding-top: calc-rem(50); padding-bottom: calc-rem(80); } } .preview-mediekanaler { // Preview border: 1px solid #dbdbdb; transition: $transition_normal; height: 100%; display: flex; flex-flow: column; &:hover { box-shadow: 0 0 36px rgba(0, 0, 0, 0.1); } &__image { display: flex; align-items: center; justify-content: center; height: calc-rem(130); border-bottom: 1px solid #dbdbdb; padding-inline: calc-rem(30); padding-block: calc-rem(25); img { max-width: calc-rem(150); width: auto; max-height: 100%; @include media-breakpoint-down(md) { max-width: 100%; } } } &__content { padding: calc-rem(25) calc-rem(30); display: flex; flex-flow: column; flex: 1; word-break: break-word; @include media-breakpoint-down(md) { padding: calc-rem(20) calc-rem(10); text-align: center; } &-link { font-size: calc-rem(16); text-decoration: none; margin-bottom: calc-rem(15); } &-more { text-decoration: none; margin-top: calc-rem(25); } span { margin-bottom: auto; @include media-breakpoint-down(md) { font-size: calc-rem(16); } } } } // } CPT Mediekanaler // CPT Karriar { .karriar { // Archive &__archive { padding-bottom: calc-rem(180); @include media-breakpoint-down(md) { padding-bottom: calc-rem(80); } // Header &-header { padding-top: calc-rem(100); padding-bottom: calc-rem(80); border-bottom: 1px solid #131315; @include media-breakpoint-down(md) { padding-top: calc-rem(40); } h1 { font-size: calc-rem(45); font-weight: 600; letter-spacing: calc-rem(-2.25); line-height: calc-lh(45, 60); font-family: $ofelia; margin-bottom: calc-rem(45); @include media-breakpoint-down(xxl) { font-size: calc-rem(44); } @include media-breakpoint-down(sm) { br { display: none; } } } p { @include media-breakpoint-up(md) { font-size: calc-rem(30); } } img { max-width: 100%; } } } // Single &__single { //Image &-image { min-height: calc(100vh - #{calc-rem(95)}); position: relative; overflow: hidden; @include media-breakpoint-down(sm) { min-height: calc-rem(220); } img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; } } // Content &-content { max-width: calc-rem(1080); margin-inline: auto; margin-top: -25vh; position: relative; background-color: #F6F2EE; @include media-breakpoint-down(sm) { margin-top: calc-rem(-70); margin-inline: calc-rem(20); } .container { padding: calc-rem(75); @include media-breakpoint-down(md) { padding: calc-rem(20); } } p:first-of-type { font-size: calc-rem(25); line-height: calc-lh(25, 34); @include media-breakpoint-up(md) { font-size: calc-rem(30); line-height: calc-lh(30, 43); } } p:not(:first-of-type), .wp-block-image, h3, h4{ max-width: calc-rem(730); } .wp-block-image { margin-bottom: calc-rem(50); } h2 { font-size: calc-rem(30); font-weight: 600; letter-spacing: calc-rem(-1.2); line-height: calc-lh(30, 40); margin-bottom: calc-rem(25); font-family: $ofelia; @include media-breakpoint-down(lg) { font-size: calc-rem(25); } } h3 { font-size: calc-rem(25); letter-spacing: -0.075rem; margin-bottom: calc-rem(25); @include media-breakpoint-down(lg) { font-size: calc-rem(20); } } h4 { font-size: calc-rem(20); @include media-breakpoint-down(lg) { font-size: calc-rem(16); } } } } } .preview-karriar { // Preview padding-block: calc-rem(45); border-bottom: 1px solid #131315; @include media-breakpoint-down(md) { padding-block: calc-rem(34); } &__meta { margin-bottom: calc-rem(15); * { &:not(:last-child) { margin-right: calc-rem(25); } } span { svg { margin-right: calc-rem(10); } } a { text-decoration: none; @include media-breakpoint-down(md) { display: none; } &:hover { svg { margin-left: calc-rem(20); } } svg { max-width: calc-rem(27); margin-left: calc-rem(15); stroke: $primary; transition: $transition_normal; } } } &-link { text-decoration: none; color: $black; transition: $transition_normal; &:hover { color: $primary; text-decoration: underline; } h3 { margin-bottom: calc-rem(20); @include media-breakpoint-up(md) { margin-bottom: 0; } } } &-more { text-decoration: none; @include media-breakpoint-up(md) { display: none; } &:hover { svg { margin-left: calc-rem(20); } } svg { max-width: calc-rem(27); margin-left: calc-rem(15); stroke: $primary; transition: $transition_normal; } } img { max-width: calc-rem(175); } } // } CPT Karriar // CPT FAQ { .faq { &__archive { padding-bottom: calc-rem(150); &-header { margin-bottom: calc-rem(80); h1 { @include media-breakpoint-up(md) { font-size: 2.8125rem; font-weight: 600; letter-spacing: -0.140625rem; line-height: 1.3333333333; margin-bottom: 2.8125rem; } } p { font-size: 1rem; letter-spacing: 0.2rem; margin-bottom: 0.9375rem; } } } &__single { padding-bottom: calc-rem(100); &-content { max-width: calc-rem(650); &__link { text-decoration: none; color: $primary; transition: $transition_normal; &:hover { text-decoration: underline; &::after { margin-left: calc-rem(20); } } &::after { content: ''; display: inline-block; width: calc-rem(25); height: calc-rem(12.5); background-image: url("../img/arrow-right-primary.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; margin-left: calc-rem(15); transition: $transition_normal; } } h2 { font-size: calc-rem(30); font-weight: 600; letter-spacing: calc-rem(-1.2); line-height: calc-lh(30, 40); margin-bottom: calc-rem(25); font-family: $ofelia; @include media-breakpoint-down(lg) { font-size: calc-rem(25); } } h3 { font-size: calc-rem(25); letter-spacing: -0.075rem; margin-bottom: calc-rem(25); @include media-breakpoint-down(lg) { font-size: calc-rem(20); } } h4 { font-size: calc-rem(20); @include media-breakpoint-down(lg) { font-size: calc-rem(16); } } } h1 { max-width: calc-rem(550); } } } .preview-faq { padding-block: calc-rem(40); border-top: 1px solid $black; font-size: calc-rem(25); font-weight: 600; font-family: $ofelia; display: list-item; position: relative; padding-left: calc-rem(100); padding-right: calc-rem(45); list-style: none; color: $black; text-decoration: none; @include media-breakpoint-down(md) { padding-block: calc-rem(30); font-size: calc-rem(20); padding-left: calc-rem(50); } &:hover { color: $black; span { color: $primary; text-decoration: underline; } } &:last-of-type { border-bottom: 1px solid $black; } &::before { content: counter(list-item, decimal-leading-zero) '.'; font-weight: 400; position: absolute; left: 0; top: 50%; transform: translateY(-50%); @include media-breakpoint-down(sm) { content: counter(list-item, decimal-leading-zero); } } svg { width: calc-rem(25); position: absolute; right: 0; top: 50%; transform: translateY(-50%); path { fill: $black; } } span { transition: $transition_normal; } } // } CPT FAQ // Popup boka et motte { .modal { &-dialog { max-width: calc-rem(1144); @include media-breakpoint-down(md) { margin: 0; } } &-header { border: 0; position: absolute; right: 0; top: 0; z-index: 1; padding: calc-rem(35); @include media-breakpoint-down(md) { padding: calc-rem(25); } .btn-close { text-decoration: underline; color: #E1D4C8; background-color: transparent; padding: 0; border: 0; margin: 0; &:hover { text-decoration: none; &::after { margin-left: calc-rem(20); } } &::after { content: url("../img/close-outlined.svg"); display: inline-block; line-height: 1; vertical-align: middle; margin-left: calc-rem(15); transition: 0.2s all ease; line-height: 0; } } } &-content { background-color: $black; color: $white; .arrow { svg { transform: rotate(90deg); * { fill: $white; } } } .wpcf7 { margin-top: calc-rem(50); label { width: 100%; margin-bottom: calc-rem(80); @include media-breakpoint-down(md) { margin-bottom: calc-rem(50); } input { width: 100%; background-color: transparent; border: 0; border-bottom: 2px solid $white; padding: calc-rem(10) 0; font-size: calc-rem(26); color: $white; transition: $transition_normal; &:focus { outline: none; border-color: $primary; } } textarea { width: 100%; background-color: transparent; border: 0; border-bottom: 2px solid $white; padding: calc-rem(10) 0; height: calc-rem(130); font-size: calc-rem(26); color: $white; transition: $transition_normal; &:focus { outline: none; border-color: $primary; } } select { width: 100%; background-color: transparent; border: 0; border-bottom: 2px solid $white; padding: calc-rem(10) 0; color: $white; font-size: calc-rem(26); &:focus { outline: none; } } } .s-contact_form__form-footer { display: flex; align-items: flex-start; @include media-breakpoint-down(xl) { flex-flow: column; } > div { display: flex; @include media-breakpoint-down(xl) { margin-bottom: calc-rem(30); } @include media-breakpoint-down(sm) { flex-flow: wrap; width: 100%; } .wpcf7-submit { background-color: $primary; color: $white; padding: calc-rem(20) calc-rem(40); border: 0; border-radius: 0; transition: $transition_normal; height: calc-rem(65); display: flex; align-items: center; justify-content: center; @include media-breakpoint-down(sm) { flex: 1; max-width: calc-rem(270); } &:hover { background-color: $black; } } .wpcf7-spinner { @include media-breakpoint-down(sm) { display: none; } } } p, span { font-size: calc-rem(16); line-height: calc-lh(16, 20); margin-bottom: 0; } } } p { max-width: calc-rem(760); } } &-body { padding: calc-rem(120) calc-rem(140); @include media-breakpoint-down(xl) { padding: calc-rem(80) calc-rem(40); } @include media-breakpoint-down(md) { padding: calc-rem(40) calc-rem(20); padding-top: calc-rem(80); } } } // } Popup boka et motte // SVG Loader { .svg-loader--wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999; display: none; } .svg-loader{ display:flex; position: relative; align-content: space-around; justify-content: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; align-items: center; background: rgba(19,23,38,0.8); } .loader-svg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; fill: none; stroke-width: 5px; stroke-linecap: round; stroke: $primary; } .loader-svg.bg{ stroke-width: 8px; stroke: #090C17; } .animate{ stroke-dasharray: 242.6; animation: fill-animation 1s cubic-bezier(1,1,1,1) 0s infinite; } @keyframes fill-animation{ 0%{ stroke-dasharray: 40 242.6; stroke-dashoffset: 0; } 50%{ stroke-dasharray: 141.3; stroke-dashoffset: 141.3; } 100%{ stroke-dasharray: 40 242.6; stroke-dashoffset: 282.6; } } .select2-container--default .select2-results>.select2-results__options { max-height: 300px !important; } // } SVG Loader // Cookies popup { .cookies-popup { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; background: #fff; border-radius: calc-rem(9); overflow: hidden; max-width: 430px; box-shadow: 0px 0px 25px 0px rgba(34, 60, 80, 0.2); transform: scale(1); opacity: 1; transform-origin: right bottom; transition: all 0.5s ease-in-out; z-index: 99999; @include media-breakpoint-down(sm) { max-width: 1000px; left: 20px; bottom: 20px; right: 20px; } &.cookies-popup--hidden { transform: scale(0); opacity: 0; } .cookies-popup--header { display: flex; align-items: center; padding: 17px 24px; justify-content: space-between; background: #EAEAEA; img { max-height: 45px; } .cookies--header--close { background: none; border: none; font-size: calc-rem(16); text-decoration: underline; text-transform: uppercase; } } .cookies-popup--body { padding: 24px; h3 { } p { } > * { &:last-child { margin-bottom: 0; } } } .cookies-popup--footer { padding: 24px; padding-top: 0; display: flex; flex-direction: column; > * + * { margin-top: 12px; } button { background: none; border: solid 1px #151726; border-radius: calc-rem(9); font-size: calc-rem(18); padding: calc-rem(10) calc-rem(20) calc-rem(7) calc-rem(20); font-weight: bold; text-transform: uppercase; opacity: 1; transition: $transition_normal; &:hover { opacity: 0.7; } } .cookies-popup--footer--accept { background: #151726; color: $primary; } .cookies-popup--footer--close { } } } // } Cookies popup