%PDF- %PDF-
Direktori : /proc/thread-self/root/var/www/knwn/wp-content/themes/kn-wn/src/scss/ |
Current File : //proc/thread-self/root/var/www/knwn/wp-content/themes/kn-wn/src/scss/main.scss |
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;700&display=swap'); @import "~animate.css/animate.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 "fonts"; @import "custom"; @import "~bootstrap/scss/bootstrap-reboot"; @import "~bootstrap/scss/bootstrap-grid"; html { &.scroll-behavior-auto { scroll-behavior: auto !important; } } body { min-height: 100vh; display: flex; flex-direction: column; font-family: 'Hind', sans-serif; box-sizing: border-box; padding-top: calc-rem(75); background: #131726; // background: url(../img/source/Contacts.png) center -75px no-repeat; // height: 10000px; } .xdebug-var-dump, pre { background: #fff; } header { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 99; border-bottom: solid 1px #fff; transition: $transition_normal; .header--wrapper { padding: calc-rem(28) 0 calc-rem(25) 0; display: flex; #main-nav--toggle { margin-left: auto; background: none; border: none; width: calc-rem(26); height: calc-rem(19); position: relative; span { display: block; position: absolute; height: calc-rem(3); left: 0; right: 0; background: #000; transition: $transition_normal; &:nth-child(1) { top: 0; opacity: 1; } &:nth-child(2) { top: 50%; margin-top: calc-rem(-1.5); transform: rotate(0deg); } &:nth-child(3) { top: 50%; margin-top: calc-rem(-1.5); transform: rotate(0deg); } &:nth-child(4) { bottom: 0; opacity: 1; } } } } } .branding { display: flex; align-items: center; .branding--logo { display: block; text-decoration: none; margin-right: 1em; padding-right: 1.25em; position: relative; max-width: calc-rem(163); &:after { content: ''; display: block; position: absolute; top: -5px; right: 0; bottom: -5px; border-right: solid 1px #000; @include media-breakpoint-down(md) { display: none; } } img { display: block; width: 100%; } } .branding--title { font-size: calc-rem(15); @include media-breakpoint-down(md) { display: none; } } } picture { display: block; > * { width: 100%; display: block; } } #nav-main { position: fixed; top: 0; left: 0; right: 0; height: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: $primary; overflow: hidden; transition: $transition_normal; z-index: 98; @include media-breakpoint-down(lg) { align-items: flex-start; } ul { list-style: none; padding: 0; display: flex; flex-direction: column; align-items: center; @include media-breakpoint-down(lg) { width: 100%; align-items: flex-start; padding-top: calc-rem(100); border-bottom: solid 1px #1B3038; padding-bottom: calc-rem(27); } li { position: relative; @include media-breakpoint-down(lg) { width: 100%; } &:after { content: ''; display: block; width: 0; position: absolute; left: 50%; top: 0; bottom:0; background: #131726; z-index: 1; transition: $transition_normal; @include media-breakpoint-down(lg) { display: none; } } a { color: #131726; text-decoration: none; font-size: 5vh; line-height: 5vh; font-weight: 300; position: relative; z-index: 2; transition: $transition_normal; padding-top: calc-rem(18); padding-bottom: calc-rem(10); display: block; @include media-breakpoint-down(lg) { text-align: left; font-size: calc-rem(24); padding: calc-rem(10) calc-rem(20) calc-rem(7) calc-rem(20); } } &:hover, &.current-menu-item { @include media-breakpoint-down(lg) { background: #131726; } &:after { left: -35px; width: calc(100% + 70px); } a { color: $primary; } } } } } #nav-standart-pages { padding-top: calc-rem(80); @include media-breakpoint-down(xl) { padding-top: calc-rem(40); } ul { list-style: none; padding: 0; li { margin-top: calc-rem(4); margin-bottom: calc-rem(3); a { font-size: calc-rem(22); display: block; padding: calc-rem(8) calc-rem(23) calc-rem(6) calc-rem(43); text-decoration: none; } &.current-menu-item { margin-top: calc-rem(17); margin-bottom: calc-rem(17); a { padding-left: calc-rem(23); background: $primary; color: #131726; } } } } } #nav-standart-pages--mobile { width: 100%; } .navigation-active { header { background: $primary; border-color: #1B3038; .header--wrapper { #main-nav--toggle { span { &:nth-child(1) { top: 0; opacity: 0; } &:nth-child(2) { top: 50%; margin-top: calc-rem(-1.5); transform: rotate(315deg); } &:nth-child(3) { top: 50%; margin-top: calc-rem(-1.5); transform: rotate(225deg); } &:nth-child(4) { bottom: 0; opacity: 0; } } } } } #nav-main { height: 100vh; } } .button--small { display: inline-block; color: $primary; border: solid 1px $primary; border-radius: calc-rem(50); text-decoration: none; padding: calc-rem(7) calc-rem(15) calc-rem(5) calc-rem(15); font-size: calc-rem(14); font-weight: bold; background: transparent; transition: $transition_normal; i { font-size: calc-rem(12); } &:hover { color: #131726; background: $primary; } } .button--large { display: inline-block; color: $primary; border: solid 1px $primary; border-radius: calc-rem(10); text-decoration: none; padding: calc-rem(16) calc-rem(35) calc-rem(12) calc-rem(35); font-size: calc-rem(16); font-weight: 500; background: transparent; transition: $transition_normal; i { font-size: calc-rem(12); } &:hover { color: #131726; background: $primary; } } .frontpage-hero { // @extend .dark-background-gradient; // border-bottom: solid 1px #f00; background-color: #131726; background-image: url(../img/hero-gradient-bg.jpg); background-size: 100% 100%; overflow: hidden; .frontpage-hero--inner { display: flex; align-items: flex-start; padding: calc-rem(158) 0 calc-rem(108) 0; @include media-breakpoint-down(lg) { flex-direction: column; } @include media-breakpoint-down(xl) { padding: calc-rem(70) 0 calc-rem(70) 0; } @include media-breakpoint-down(md) { padding: calc-rem(50) 0 calc-rem(50) 0; } .frontpage-hero--blockquote { color: #fff; max-width: calc-rem(680); margin-right: calc-rem(100); @include media-breakpoint-down(xxl) { margin-right: calc-rem(100); } @include media-breakpoint-down(md) { margin-right: 0; } h1 { line-height: 1.225; margin-bottom: calc-rem(20); display: block; position: relative; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.7rem; text-decoration-color: $primary; margin-bottom: calc-rem(26); } p { font-size: calc-rem(19); } } .frontpage-hero--notifications { margin-left: auto; margin-right: calc-rem(35); margin-top: calc-rem(50); @include media-breakpoint-down(xxl) { min-width: calc-rem(380); } @include media-breakpoint-down(md) { margin-right: auto; min-width: calc-rem(1); width: 100%; } .swiper { width: 100%; max-width: calc-rem(755); overflow: visible; .swiper-slide { padding: calc-rem(30); opacity: 0; top: calc-rem(50); @include media-breakpoint-down(lg) { padding: 0; opacity: 1; top: 0; width: auto; } @include media-breakpoint-down(lg) { width: 70%; } .notification { @include media-breakpoint-down(lg) { } @include media-breakpoint-down(md) { width: 100%; } } &.swiper-slide-visible { opacity: 1; top: 0; // & + .swiper-slide-visible + * { // top: calc-rem(-50); // } } } &.transition-enabled { .swiper-slide { transition: $transition_normal; } } } } } } .media-assets { background-color: #131726; background-image: url(../img/media-assets-gradient-bg.jpg); background-size: 100% 100%; padding: calc-rem(107) 0 calc-rem(85) 0; overflow: hidden; @include media-breakpoint-down(xl) { padding: calc-rem(70) 0 calc-rem(70) 0; } @include media-breakpoint-down(md) { padding: calc-rem(40) 0 calc-rem(50) 0; } .section-title--row { @include media-breakpoint-down(xl) { flex-wrap: wrap; } @include media-breakpoint-down(md) { margin-bottom: calc-rem(20); } .section-title { @include media-breakpoint-down(xl) { order: 1; } @include media-breakpoint-down(md) { font-size: calc-rem(30); margin-right: auto; } } .media-assets--filters { @include media-breakpoint-down(xl) { width: 100%; order: 4; margin-top: calc-rem(50); } @include media-breakpoint-down(md) { margin-top: calc-rem(20); flex-direction: column; } .media-assets--filters--item { @include media-breakpoint-down(xl) { flex: 1 1; } @include media-breakpoint-down(md) { width: 100%; margin-right: 0; margin-bottom: calc-rem(10); } .select2-container { @include media-breakpoint-down(xl) { width: 100% !important; } } } } .media-assets--search { @include media-breakpoint-down(xl) { order: 2; } @include media-breakpoint-down(md) { } } .section-title--link { @include media-breakpoint-down(xl) { order: 3; } @include media-breakpoint-down(md) { display: none; } } } .load-more--wrapper { @include media-breakpoint-down(md) { display: none; } } } .whats-up { padding: calc-rem(57) 0 calc-rem(85) 0; // background: #090C17; } .solutions-for-advertising { padding: calc-rem(175) 0 calc-rem(165) 0; display: flex; flex-direction: column; align-items: center; background-color: #131726; @include media-breakpoint-down(xl) { padding: calc-rem(70) 0 calc-rem(70) 0; } @include media-breakpoint-down(md) { padding: calc-rem(40) 0 calc-rem(50) 0; } .solutions-for-advertising--title { display: block; font-size: calc-rem(50); font-weight: bold; margin-left: calc-rem(330); @include media-breakpoint-down(xl) { margin-left: 0; font-size: calc-rem(40); } @include media-breakpoint-down(md) { font-size: calc-rem(28); text-align: center; } span { &:nth-child(1) { margin-left: calc-rem(32); line-height: calc-rem(50); color: #fff; @include media-breakpoint-down(md) { margin-left: 0; } } &:nth-child(2) { color: #131726; display: block; font-size: calc-rem(100); line-height: calc-rem(70); font-family: 'Conv_Kallisto Heavy'; text-shadow: -1px -1px 0 $primary, 1px -1px 0 $primary, -1px 1px 0 $primary, 1px 1px 0 $primary; @include media-breakpoint-down(xl) { font-size: calc-rem(60); line-height: calc-rem(50); } @include media-breakpoint-down(md) { font-size: calc-rem(36); line-height: calc-rem(22); } } } img { display: block; } } .solutions-for-advertising--arrow { margin-top: calc-rem(40); margin-left: calc-rem(16); @include media-breakpoint-down(xl) { margin-top: calc-rem(10); } svg { @include media-breakpoint-down(xl) { max-width: calc-rem(400); height: auto; } } #solutions-for-advertising--shape { @include media-breakpoint-down(xl) { stroke-width: 3; } } .arrow-desctop { @include media-breakpoint-down(xl) { margin-left: calc-rem(100); } @include media-breakpoint-down(md) { display: none; } } .arrow-mobile { display: none; @include media-breakpoint-down(md) { display: block; } } } #caret-down-solid, #caret-down-solid-mobile { opacity: 0; transition: $transition_normal; } .solutions-for-advertising--menu { border: solid 1px $primary; border-radius: calc-rem(16); margin-top: calc-rem(20); margin-right: calc-rem(700); opacity: 0; transform: scale(0); transition: $transition_normal; transform-origin: top center; @include media-breakpoint-down(xl) { margin-right: 0; } ul { list-style: none; padding: calc-rem(10) 0; margin: 0; li { a { display: flex; align-items: center; padding: calc-rem(18) calc-rem(55) calc-rem(16) calc-rem(20); text-decoration: none; line-height: 1.2; font-size: calc-rem(25); @include media-breakpoint-down(md) { font-size: calc-rem(22); padding: calc-rem(15) calc-rem(20) calc-rem(13) calc-rem(15); } i { margin-bottom: calc-rem(4); margin-right: calc-rem(20); font-size: calc-rem(18); } } &.active { a { color: #131726; background: $primary; } } & + li { margin-top: calc-rem(15); @include media-breakpoint-down(md) { margin-top: calc-rem(5); } } } } } } .join-us { padding: calc-rem(140) 0 calc-rem(155) 0; background: #090C17; @include media-breakpoint-down(xl) { padding: calc-rem(70) 0 calc-rem(40) 0; } @include media-breakpoint-down(md) { padding: calc-rem(40) 0 calc-rem(10) 0; } .section-title--row { margin-bottom: calc-rem(40); @include media-breakpoint-down(xl) { justify-content: center; h2 { margin-right: 0 } } @include media-breakpoint-down(md) { margin-bottom: calc-rem(30); } } .join-us--list--all-link { display: inline-block; margin-left: calc-rem(20); margin-top: calc-rem(7); @include media-breakpoint-down(xl) { margin-left: 0; } } } .join-us--list--offer { background: #131726; display: flex; align-items: center; padding: calc-rem(21) calc-rem(20) calc-rem(18) calc-rem(20); margin-bottom: calc-rem(19); border-radius: calc-rem(16); .join-us--list--offer--title { flex: 1 1; display: flex; flex-direction: column-reverse; margin-right: calc-rem(30); @include media-breakpoint-down(md) { margin-right: calc-rem(20); } h3 { text-transform: uppercase; font-size: calc-rem(20); font-weight: bold; color: $primary; margin-bottom: 0; } p { text-transform: uppercase; display: flex; align-items: center; font-size: calc-rem(14); margin-bottom: calc-rem(5); color: #BCBCBC; i { margin-right: calc-rem(7); margin-bottom: calc-rem(3); font-size: calc-rem(15); } } } } .join-us--legend { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: calc-rem(24); text-align: center; @include media-breakpoint-down(xl) { font-size: calc-rem(16); } p { max-width: calc-rem(427); margin-bottom: calc-rem(60); a { text-decoration-thickness: 1px; text-underline-offset: 0.05rem; } } } .contacts { padding: calc-rem(136) 0 calc-rem(150) 0; background: #131726; @include media-breakpoint-down(xl) { padding: calc-rem(70) 0 calc-rem(40) 0; } @include media-breakpoint-down(md) { padding: calc-rem(40) 0 calc-rem(40) 0; } .section-title--row { margin-bottom: calc-rem(96); @include media-breakpoint-down(xl) { justify-content: center; margin-bottom: calc-rem(40); @include media-breakpoint-down(md) { margin-bottom: calc-rem(30); } h2 { margin-right: 0 } } } .card-contact { margin-bottom: calc-rem(20); } .notification { margin-bottom: calc-rem(36); } } .home { .whats-up { padding: calc-rem(97) 0 calc-rem(85) 0; background: #090C17; @include media-breakpoint-down(xl) { padding: calc-rem(70) 0 calc-rem(40) 0; } @include media-breakpoint-down(md) { padding: calc-rem(40) 0 calc-rem(20) 0; } .section-title--row { align-items: flex-end; margin-bottom: calc-rem(75); @include media-breakpoint-down(md) { margin-bottom: calc-rem(35); } .section-title { margin-right: calc-rem(10); @include media-breakpoint-down(md) { font-size: calc-rem(30); margin-right: auto; } } .section-title--link { margin-left: 0; @include media-breakpoint-down(md) { padding: 0; } } } } } article { color: #959595; h1 { color: $primary; } h2, h3, h4, h5, h6 { color: #fff; margin-bottom: calc-rem(16); } ul { font-size: calc-rem(16); line-height: calc-rem(32); padding-left: calc-rem(20); margin-bottom: calc-rem(16); li { padding-left: calc-rem(7); } } p { margin-bottom: calc-rem(20); } .wp-block-image { overflow: hidden; border-radius: calc-rem(10); margin-bottom: calc-rem(30); margin-top: calc-rem(10); img { display: block; height: auto; } } } .post-media-single { overflow: hidden; background: #131726; .media--card--wrapper { padding-top: calc-rem(57); padding-bottom: calc-rem(57); z-index: 2; position: relative; @include media-breakpoint-down(md) { padding-top: calc-rem(30); padding-bottom: calc-rem(30); .media-assets--item--info { margin-bottom: calc-rem(20) !important; } } &:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: -1000px; left: -1000px; background: #090C17; z-index: 1; @include media-breakpoint-up(xl) { display: none; } } > * { @include media-breakpoint-down(xl) { z-index: 2; position: relative; } } } .media-assets--item { .media-assets--item--logo { padding: calc-rem(52) calc-rem(20) calc-rem(52) calc-rem(20); display: block; .media-assets--item--logo--inner { width: calc-rem(255); height: calc-rem(155); } } .media-assets--item--info { padding-bottom: calc-rem(33); margin-bottom: calc-rem(55); } } .media-assets--view-all { text-align: center; } article { height: 100%; position: relative; padding: calc-rem(73) calc-rem(60) calc-rem(57) calc-rem(80); @include media-breakpoint-down(xxl) { padding: calc-rem(60) calc-rem(30) calc-rem(57) calc-rem(30); } @include media-breakpoint-down(xl) { padding: calc-rem(60) calc-rem(0) calc-rem(57) calc-rem(0); } @include media-breakpoint-down(md) { padding: calc-rem(60) calc-rem(0) calc-rem(0) calc-rem(0); } &:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 100%; width: 5000px; background: #090C17; z-index: 1; @include media-breakpoint-down(xl) { display: none; } } h1 { font-size: calc-rem(60); line-height:calc-rem(64); margin-bottom: calc-rem(23); @include media-breakpoint-down(xxl) { font-size: calc-rem(40); line-height:calc-rem(44); } @include media-breakpoint-down(md) { font-size: calc-rem(30); line-height:calc-rem(34); } } } aside { padding-top: calc-rem(57); padding-bottom: calc-rem(57); @include media-breakpoint-down(md) { padding-top: calc-rem(20); padding-bottom: calc-rem(40); } > * { margin-bottom: calc-rem(20); } } } .page-standart { overflow: hidden; background: #131726; article { height: 100%; position: relative; padding: calc-rem(87) calc-rem(40) calc-rem(57) 0; @include media-breakpoint-down(xxl) { padding: calc-rem(60) calc-rem(30) calc-rem(57) calc-rem(30); } @include media-breakpoint-down(xl) { padding: calc-rem(30) calc-rem(0) calc-rem(57) calc-rem(0); } @include media-breakpoint-down(md) { padding: calc-rem(30) calc-rem(0) calc-rem(0) calc-rem(0); } h1 { font-size: calc-rem(50); line-height:calc-rem(58); margin-bottom: calc-rem(23); @include media-breakpoint-down(xxl) { font-size: calc-rem(40); line-height:calc-rem(44); } @include media-breakpoint-down(md) { font-size: calc-rem(30); line-height:calc-rem(34); } } } &.page-standart--has-menu { article { padding-left: calc-rem(40); @include media-breakpoint-down(xl) { padding-left: 0; } } } aside { padding-top: calc-rem(89); padding-bottom: calc-rem(57); @include media-breakpoint-down(xl) { padding-top: 0; } > * { margin-bottom: calc-rem(20); } } } .media-assets--page { &.media-assets { padding: calc-rem(63) 0 calc-rem(85) 0; @include media-breakpoint-down(md) { padding: calc-rem(30) 0 calc-rem(40) 0; } } } .whats-up--page { &.whats-up { background: #131726; padding: 0 0 calc-rem(85) 0; .section-title--row { margin-bottom: 0; padding-bottom: calc-rem(65); @include media-breakpoint-down(md) { padding-bottom: calc-rem(25); } .section-title { @include media-breakpoint-down(md) { font-size: calc-rem(30); margin-bottom: calc-rem(10); margin-top: calc-rem(10); } } } .whats-up--title { background: #090C17; padding-top: calc-rem(97); @include media-breakpoint-down(md) { padding-top: calc-rem(30); margin-right: auto; } } .whats-up--list { padding-top: calc-rem(60); } .whats-up--list--load-more { margin-top: calc-rem(40); button { width: 100%; } } // .media-assets--filters { // @include media-breakpoint-down(md) { // width: 100%; // // order: 3; // } // .media-assets--filters--item { // @include media-breakpoint-down(md) { // width: 100%; // margin-right: 0; // } // .select2-container { // @include media-breakpoint-down(md) { // width: 100% !important; // } // } // } // } .media-assets--search { @include media-breakpoint-down(md) { // order: 2; } } } } .post-newssingle { background: #131726; overflow: hidden; .breadcrumbs { @include media-breakpoint-down(md) { display: none; } } .post-newssingle--main { height: 100%; position: relative; padding: calc-rem(75) calc-rem(30) calc-rem(75) 0; @include media-breakpoint-down(xl) { padding: calc-rem(75) 0 calc-rem(75) 0; } @include media-breakpoint-down(md) { padding: calc-rem(40) 0 calc-rem(40) 0; } &:after { content: ''; display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 5000px; background: #090C17; z-index: 1; @include media-breakpoint-down(xl) { right: -1000px; } } > * { position: relative; z-index: 2; } } article { > * { max-width: calc-rem(705); @include media-breakpoint-down(xl) { max-width: calc-rem(1500); } } h1 { font-size: calc-rem(60); line-height: calc-rem(67); font-weight: 500; margin-bottom: calc-rem(40); @include media-breakpoint-down(md) { font-size: calc-rem(30); line-height: calc-rem(34); margin-bottom: calc-rem(20); } } p { font-size: calc-rem(16.4); } .wp-block-image { max-width: calc-rem(940); } } aside { height: 100%; padding: calc-rem(73) calc-rem(40) calc-rem(75) calc-rem(40); @include media-breakpoint-down(xxl) { padding: calc-rem(73) calc-rem(0) calc-rem(75) calc-rem(0); } @include media-breakpoint-down(md) { padding: calc-rem(40) calc-rem(0) calc-rem(40) calc-rem(0); } } } .post-join-us { background: #131726; overflow: hidden; .post-join-us--main { height: 100%; position: relative; padding: calc-rem(87) calc-rem(30) calc-rem(75) 0; @include media-breakpoint-down(xl) { padding: calc-rem(87) 0 calc-rem(75) 0; } @include media-breakpoint-down(md) { padding: calc-rem(40) 0 calc-rem(10) 0; } &:after { content: ''; display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 5000px; background: #090C17; z-index: 1; @include media-breakpoint-down(xl) { display: none; } } > * { position: relative; z-index: 2; } .join-us--list--offer { padding: 0; background: none; margin-bottom: calc-rem(50); } .breadcrumbs { @include media-breakpoint-down(md) { display: none; } } } article { > * { max-width: calc-rem(705); } h1 { font-size: calc-rem(60); line-height: calc-rem(67); font-weight: 500; margin-bottom: calc-rem(30); max-width: calc-rem(750); @include media-breakpoint-down(md) { font-size: calc-rem(30); line-height: calc-rem(34); margin-bottom: calc-rem(20); } } p { font-size: calc-rem(16.4); } .wp-block-image { max-width: calc-rem(940); } } aside { height: 100%; padding: calc-rem(80) 0 calc-rem(75) 0; @include media-breakpoint-down(md) { padding: calc-rem(40) 0 calc-rem(40) 0; } @include media-breakpoint-down(xl) { position: relative; > * { z-index: 2; position: relative; } } &:after { content: ''; display: none; position: absolute; right: -1000px; top: 0; bottom: 0; width: 5000px; background: #090C17; z-index: 1; @include media-breakpoint-down(xl) { display: block; } } } .join-us--list { .join-us--list--offer { background: #090C17; @include media-breakpoint-down(xl) { background: #131726; } } } .join-us--legend { height: auto; padding-top: calc-rem(65); @include media-breakpoint-down(md) { padding-top: calc-rem(25); p { margin-bottom: calc-rem(20); } } } } .advertising-solution--page { background: #131726; padding: 0 0 calc-rem(55) 0; @include media-breakpoint-down(md) { padding: 0 0 calc-rem(10) 0; } .section-title--row { margin-bottom: 0; padding-bottom: calc-rem(15); .section-title { @include media-breakpoint-down(md) { font-size: calc-rem(30); line-height: calc-rem(34); } } } .advertising-solution--title { background: #090C17; padding-top: calc-rem(63); padding-bottom: calc-rem(59); @include media-breakpoint-down(xl) { padding-top: calc-rem(40); padding-bottom: calc-rem(25); } } .section-title--content { color: #6E6E6E; font-size: calc-rem(20); font-weight: 500; @include media-breakpoint-down(md) { font-size: calc-rem(18); } p { margin-bottom: calc-rem(25); } } .advertising-solution--list { padding-top: calc-rem(90); @include media-breakpoint-down(md) { padding-top: calc-rem(50); } } } .advertising-solution--whats-up { background: #090C17; padding-top: calc-rem(80); @include media-breakpoint-down(md) { padding-top: calc-rem(40); } .section-title--row { margin-bottom: calc-rem(20); .section-title { @include media-breakpoint-down(md) { font-size: calc-rem(25); } } } .section-title--content { margin-bottom: calc-rem(50); font-size: calc-rem(20); font-weight: 500; color: #6E6E6E; } } .advertising-solution--list-item { margin-bottom: calc-rem(40); .advertising-solution--list-item--title { display: flex; align-items: center; padding: calc-rem(22) calc-rem(25) calc-rem(15) calc-rem(25); border: solid 1px $primary; border-top-left-radius: calc-rem(16); border-top-right-radius: calc-rem(16); background: $primary; color: #131726; h2 { margin-bottom: 0; text-transform: uppercase; font-size: calc-rem(25); font-weight: bold; } i { font-size: calc-rem(20); margin-right: calc-rem(10); margin-bottom: calc-rem(5); } } .advertising-solution--list-item--content { padding: calc-rem(35) calc-rem(40) calc-rem(20) calc-rem(40); border: solid 1px $primary; border-top: none; @include media-breakpoint-down(md) { padding: calc-rem(20) calc-rem(20) calc-rem(5) calc-rem(20); } h1,h2,h3,h4,h5,h6 { margin-bottom: calc-rem(15); font-weight: 500; color: #fff; } h3 { font-size: calc-rem(20); } p { font-size: calc-rem(16); color: #959595; } .button--large{ margin-bottom: calc-rem(15); width: 100%; text-align: center; } &:last-child { border-bottom-left-radius: calc-rem(16); border-bottom-right-radius: calc-rem(16); } } } .page-contacts { background: url('../img/contacts-bg.jpg') center; background-size: cover; padding-top: calc-rem(80); padding-bottom: calc-rem(80); @include media-breakpoint-down(md) { padding-top: calc-rem(40); padding-bottom: calc-rem(40); } .section-title--row { justify-content: center; margin-bottom: calc-rem(83); @include media-breakpoint-down(md) { margin-bottom: calc-rem(40); } .section-title { margin-right: 0; } } .card { margin-bottom: calc-rem(21); } } .related-articles { color: #BCBCBC; h2 { font-size: calc-rem(30); font-weight: 500; margin-bottom: calc-rem(63); color: #fff; @include media-breakpoint-down(md) { margin-bottom: calc-rem(40); } } .related-articles--item { margin-bottom: calc-rem(54); .related-articles--item-title { font-size: calc-rem(30); line-height: calc-rem(35); text-decoration: none; transition: $transition_normal; margin-bottom: calc-rem(5); display: block; @include media-breakpoint-down(md) { font-size: calc-rem(20); line-height: calc-rem(24); } &:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2rem; text-decoration-color: $primary; } } p { a { text-decoration: none; } } } } .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 { 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%); } } .card { padding: calc-rem(27) calc-rem(30); border: solid 1px #707070; border-radius: calc-rem(16); color: #BCBCBC; @include media-breakpoint-down(md) { padding: calc-rem(20) calc-rem(20); } &.card-contact { > h3 { font-size: calc-rem(24); font-weight: bold; margin-bottom: calc-rem(14); color: #fff; } > p { margin-bottom: calc-rem(10); } > * { margin-bottom: calc-rem(10); &:last-child { margin-bottom: 0; } } } &.card-shortcode { text-align: center; padding: calc-rem(27) calc-rem(25); @include media-breakpoint-down(md) { padding: calc-rem(20) calc-rem(20); } h3 { margin-top: calc-rem(15); font-weight: 500; font-size: calc-rem(30); margin-bottom: calc-rem(16); color: #fff; } p { font-size: calc-rem(18); line-height: calc-rem(25); } .form-wrapper { margin-top: calc-rem(43); } } } .mailto { display: inline-flex; align-items: center; text-decoration: none; i { margin-right: calc-rem(5); margin-bottom: calc-rem(1); } &:hover { span { text-decoration: underline; } } } .form-wrapper { text-align: left; .wpcf7-not-valid-tip { position: absolute; font-size: 12px; text-align: right; width: 100%; } .form-row { position: relative; margin-bottom: calc-rem(29); input[type="text"], input[type="email"], input[type="tel"], select { width: 100%; border: none; border-bottom: solid 2px #9E9EA1; background: transparent; color: #fff; padding: calc-rem(10) calc-rem(5) calc-rem(7) calc-rem(5); position: relative; z-index: 2; & + label { position: absolute; white-space: nowrap; color: #9E9EA1; z-index: 88; left: 0; top: 0; transform: translateY(-100%); transition: $transition_normal; opacity: 1; font-size: calc-rem(12); z-index: 1; } &:placeholder-shown { & + label { top: 50%; opacity: 0; font-size: calc-rem(16); left: calc-rem(5); transform: translateY(-50%); } } &:focus { outline: none; border-bottom: solid 2px $primary; & + label { color: $primary; } } } select { padding: calc-rem(10) calc-rem(5) calc-rem(7) calc-rem(3) ; color: #9E9EA1; & + label { top: 50%; opacity: 0; font-size: calc-rem(16); left: calc-rem(5); transform: translateY(-50%); } &.selected { color: #fff; & + label { position: absolute; white-space: nowrap; color: #9E9EA1; z-index: 88; left: 0; top: 0; transform: translateY(-100%); transition: $transition_normal; opacity: 1; font-size: calc-rem(12); } &:focus { outline: none; border-bottom: solid 2px $primary; & + label { color: $primary; } } } } &.form-row--select { select { appearance: none; } &:after { content: "\f078"; font-family: 'Font Awesome 5 Free'; font-weight: 900; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; position: absolute; right: calc-rem(22); color: #9E9EA1; font-size: calc-rem(14); top: 50%; transform: translateY(-50%); @include media-breakpoint-down(md) { right: calc-rem(10); } } &:hover { &:after { color: $primary; } } } .wpcf7-acceptance { .wpcf7-list-item { margin: 0; } input { position: absolute; opacity: 0; & + .wpcf7-list-item-label { display: block; position: relative; padding-left: calc-rem(25); font-size: calc-rem(14); line-height: calc-rem(22); cursor: pointer; &:before { content: ''; width: calc-rem(13); height: calc-rem(13); border: solid 1px #BCBCBC; display: block; position: absolute; left: 0; top: calc-rem(3); } &:after { display: none; position: absolute; content: "\f00c"; font-family: 'Font Awesome 5 Free'; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; left: calc-rem(2); top: calc-rem(5); font-size: calc-rem(8); color: $primary; } } &:checked + .wpcf7-list-item-label { &:before { border-color: $primary; } &:after { display: block; } } } } } button[type="submit"] { background: none; border: solid 1px $primary; display: flex; justify-content: center; align-items: center; width: 100%; padding: calc-rem(10) calc-rem(10) calc-rem(8) calc-rem(10); border-radius: calc-rem(10); color: $primary; text-transform: uppercase; font-weight: 500; transition: $transition_normal; i { margin-left: calc-rem(7); position: relative; top: -1px; font-size: calc-rem(12); } &:hover { background: $primary; color: #131726; } &:disabled { background: #4c4c4c; border: solid 1px #707070; color: #707070; } } } .wpcf7 form .wpcf7-response-output { margin-left: 0; margin-right: 0; border-radius: calc-rem(10); padding: calc-rem(15) calc-rem(20); } .wpcf7 form.sent .wpcf7-response-output { border-color: #46b450; color: #46b450; background: rgba(70,180,80,0.15); } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: #ffb900; color: #ffb900; background: rgba(255,185,0,0.15); } .section-title--row { display: flex; align-items: center; color: #fff; margin-bottom: calc-rem(65); @include media-breakpoint-down(md) { flex-wrap: wrap; } .section-title { margin-bottom: 0; display: block; line-height: 1.2; font-size: calc-rem(50); font-weight: bold; margin-top: calc-rem(7); text-transform: uppercase; margin-right: calc-rem(40); } .section-title--link { margin-left: auto; padding: calc-rem(10) calc-rem(20); } } .media-assets--filters { display: flex; align-items: center; .select2-container { width: auto !important; } .media-assets--filters--item { // min-width: calc-rem(126); margin-right: calc-rem(15); select { width: 100%; } } } .pagination { display: flex; justify-content: center; margin-top: calc-rem(45); ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; li { display: block; .pagination--prev { font-size: calc-rem(14); i { margin-right: calc-rem(5); } } .pagination--next { font-size: calc-rem(14); i { margin-left: calc-rem(5); } } > a { color: #919191; &:hover { background: #1C1F2E; } &.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(7) calc-rem(10) calc-rem(3) calc-rem(10); transition: $transition_normal; &.pagination--active { background: $primary; color: #131726; } } & + li { margin-left: calc-rem(7); } } } } .select2-container--default { .select2-selection--single { background-color: $select_bg; border: none; border-radius: calc-rem(10) !important; height: calc-rem(40); &:hover { background-color: lighten($select_bg, 2%); } .select2-selection__rendered { color: $primary; line-height: calc-rem(44); padding-left: calc-rem(21); padding-right: calc-rem(36); } .select2-selection__arrow { height: calc-rem(40); width: calc-rem(40); b { border-color: $primary transparent transparent transparent; border-width: 6px 5px 0 5px; } } } &.select2-container--open { .select2-selection--single { .select2-selection__arrow { b { border-color: transparent transparent $primary transparent; border-width: 0 5px 6px 5px; margin-top: -3px; } } } } .select2-results__option--selected { background-color: $primary !important; color: #131726 !important; &.select2-results__option--highlighted { background-color: $primary !important; color: #131726 !important; } } .select2-results__option--selectable { background-color: rgba($primary, 0.1); &.select2-results__option--highlighted { background-color: rgba($primary, 0.2); color: $primary; } } } .select2-dropdown { @include media-breakpoint-up(xl) { width: auto !important; } min-width: 100% !important; margin-top: calc-rem(20); border-radius: calc-rem(10) !important; overflow: hidden; background-color: $select_bg; border: solid 1px $primary !important; &.select2-dropdown--below { margin-top: calc-rem(20); } &.select2-dropdown--above { margin-top: calc-rem(-20); } } .select2-results__option { color: $primary; padding: calc-rem(8) calc-rem(21) calc-rem(6) calc-rem(21); white-space: nowrap; // & + .select2-results__option { // // border-top: solid 1px $primary; // } } .media-assets--search { display: flex; align-items: center; } .media-assets--search { button { background: none; border: none; display: flex; align-items: center; color: $primary; &:hover { color: shift-color($link-color, $link-shade-percentage); } i { font-size: calc-rem(20); margin-left: calc-rem(7); } } } .media-assets--item { height: 100%; display: flex; flex-direction: column; > * { border: solid 1px #707070; & + * { border-top: none !important; } &:first-child { border-top-left-radius: calc-rem(16); border-top-right-radius: calc-rem(16); overflow: hidden; } &:last-child { margin-bottom: calc-rem(39); border-bottom-left-radius: calc-rem(16); border-bottom-right-radius: calc-rem(16); } } .media-assets--item--logo { padding: calc-rem(50) calc-rem(20) calc-rem(40) calc-rem(20); height: 100%; .media-assets--item--logo--inner { width: calc-rem(230); height: calc-rem(100); margin: auto; display: block; img { width: 100%; height: 100%; object-fit: contain; } } } .media-assets--item--info { position: relative; padding: calc-rem(37) calc-rem(26) calc-rem(22) calc-rem(26); flex: 1 1; .media-assets--item--info--status { border: solid 1px #707070; font-size: calc-rem(12); line-height: 1; position: absolute; left: calc-rem(26); top: 0; transform: translateY(-50%); text-transform: uppercase; padding: calc-rem(5) calc-rem(10) calc-rem(4) calc-rem(10); border-radius: calc-rem(6); background: #131726; &.status-live { color: $primary; border-color: $primary; } &.status-soon { color: #6C6C6C; border-color: #6C6C6C; } } .media-assets--item--info--title { font-size: calc-rem(20); line-height: 1.2; margin-bottom: 0; color: #fff; display: block; text-decoration: none; } .media-assets--item--info--link { font-weight: 300; font-size: calc-rem(14); text-decoration: none; span { text-decoration: underline; } } .media-assets--item--info--desc { margin-top: calc-rem(10); color: #6A6E7C; font-size: calc-rem(13); p { margin-bottom: calc-rem(8); } } } .media-assets--item--scope { padding: calc-rem(25) calc-rem(26) calc-rem(15) calc-rem(26); .media-assets--item--scope--title { font-size: calc-rem(14); margin-bottom: 0; color: #fff; } .media-assets--item--scope--desc { margin-top: calc-rem(3); color: #6A6E7C; font-size: calc-rem(13); p { margin-bottom: calc-rem(8); } } } } .whats-up--list { .whats-up--list--article { margin-bottom: calc-rem(33); picture { border-radius: calc-rem(10); overflow: hidden; } .whats-up--list--article--title { margin-top: calc-rem(10); margin-bottom: calc-rem(10); font-size: calc-rem(30); line-height: calc-rem(36); font-weight: 500; color: $primary; text-decoration: none; transition: $transition_normal; display: block; @include media-breakpoint-down(md) { font-size: calc-rem(23); line-height: calc-rem(27); margin-top: calc-rem(20); } &:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2rem; text-decoration-color: $primary; } } .whats-up--list--article--desc { p { display: inline; color: #BCBCBC; } a { margin-left: calc-rem(10); @include media-breakpoint-down(md) { margin-left: 0; display: block; } } } } } @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); } } main { flex: 1 1; } footer { background: #fff; padding: calc-rem(10) 0 calc-rem(10) 0; .footer--branding { padding: calc-rem(35) 0 calc-rem(35) 0; } .footer--copyright { padding: calc-rem(30) 0 calc-rem(25) 0; border-top: solid 1px #E3E3E3; p { color: #ADADAD; font-size: calc-rem(11); line-height: calc-rem(18); margin-bottom: calc-rem(10); } } } .no-posts { color: #6A6E7C; } #load-more-posts { width: 100%; } .view-all-assets--mobile { text-align: center; } .media-assets--list.swiper { overflow: visible; .swiper-wrapper { flex-wrap: nowrap; margin-top: 0; margin-right: 0; margin-left: 0; } .swiper-slide { width: 90% !important; padding: 0 !important; } } .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; } .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 { } } }