.fnc-slider { overflow: hidden; box-sizing: border-box; position: relative; height: 100vh; } .fnc-slider *, .fnc-slider *:before, .fnc-slider *:after { box-sizing: border-box; } .fnc-slider__slides { position: relative; height: 100%; transition: transform 1s 0.6666666667s; } .fnc-slider .m--blend-dark .fnc-slide__inner { background-color: #8a8a8a; } .fnc-slider .m--blend-dark .fnc-slide__mask-inner { background-color: #575757; } .fnc-slider .m--navbg-dark { background-color: #575757; } .fnc-slider .m--blend-green .fnc-slide__inner { background-color: #6d9b98; } .fnc-slider .m--blend-green .fnc-slide__mask-inner { background-color: rgb(13, 35, 83); } .fnc-slider .m--navbg-green { background-color: #003da0; } .fnc-slide { overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translate3d(0, 0, 0); } .fnc-slide.m--before-sliding { z-index: 2 !important; transform: translate3d(100%, 0, 0); } .fnc-slide.m--active-slide { z-index: 1; transition: transform 1s 0.6666666667s ease-in-out; transform: translate3d(0, 0, 0); } .fnc-slide__inner { position: relative; height: 100%; background-size: cover; background-position: center top; transform: translate3d(0, 0, 0); } .m--global-blending-active .fnc-slide__inner, .m--blend-bg-active .fnc-slide__inner { background-blend-mode: luminosity; } .m--before-sliding .fnc-slide__inner { transform: translate3d(-100%, 0, 0); } .m--active-slide .fnc-slide__inner { transition: transform 1s 0.6666666667s ease-in-out; transform: translate3d(0, 0, 0); } .fnc-slide__mask { overflow: hidden; z-index: 1; position: absolute; right: 60%; top: 15%; width: 50.25vh; height: 67vh; margin-right: -90px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh); transform-origin: 50% 0; transition-timing-function: ease-in-out; } .m--before-sliding .fnc-slide__mask { transform: rotate(-10deg) translate3d(200px, 0, 0); opacity: 0; } .m--active-slide .fnc-slide__mask { transition: transform 0.7s 1.2222222222s, opacity 0.35s 1.2222222222s; transform: translate3d(0, 0, 0); opacity: 1; } .m--previous-slide .fnc-slide__mask { transition: transform 0.7s 0.3333333333s, opacity 0.35s 0.6833333333s; transform: rotate(10deg) translate3d(-200px, 0, 0); opacity: 0; } .fnc-slide__mask-inner { z-index: -1; position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; margin-left: -50vw; margin-top: -50vh; background-size: cover; background-position: center center; background-blend-mode: luminosity; transform-origin: 50% 16.5vh; transition-timing-function: ease-in-out; } .m--before-sliding .fnc-slide__mask-inner { transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0); } .m--active-slide .fnc-slide__mask-inner { transition: transform 0.7s 1.2222222222s; transform: translateX(0); } .m--previous-slide .fnc-slide__mask-inner { transition: transform 0.7s 0.3333333333s; transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0); } .fnc-slide__content { z-index: 2; position: absolute; left: 40%; top: 40%; } .fnc-slide__heading { margin-bottom: 10px; text-transform: uppercase; } .fnc-slide__heading-line { display: none; } .fnc-slide__heading-line:nth-child(2) { padding-left: 30px; } .m--before-sliding .fnc-slide__heading-line { transform: translateY(100%); } .m--active-slide .fnc-slide__heading-line { transition: transform 1.5s 1s; transform: translateY(0); } .m--previous-slide .fnc-slide__heading-line { transition: transform 1.5s; transform: translateY(-100%); } .fnc-slide__heading-line span { display: block; } .m--before-sliding .fnc-slide__heading-line span { transform: translateY(-100%); } .m--active-slide .fnc-slide__heading-line span { transition: transform 1.5s 1s; transform: translateY(0); } .m--previous-slide .fnc-slide__heading-line span { transition: transform 1.5s; transform: translateY(100%); } .fnc-slide__action-btn { position: relative; margin-left: 800px; padding: 5px 15px; font-size: 20px; line-height: 1; color: transparent; border: none; text-transform: uppercase; background: transparent; cursor: pointer; text-align: center; outline: none; } .fnc-slide__action-btn span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; perspective: 1000px; transform-style: preserve-3d; transition: transform 0.3s; transform-origin: 50% 0; line-height: 30px; color: #000000; } .fnc-slide__action-btn span:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #000000; border-top: none; border-bottom: none; } .fnc-slide__action-btn span:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 30px; background: #0575ff; opacity: 0; transform-origin: 50% 0; transform: translateY(100%) rotateX(-90deg); transition: opacity 0.15s 0.15s; } .fnc-slide__action-btn:hover span { transform: rotateX(90deg); } .fnc-slide__action-btn:hover span:after { opacity: 1; transition: opacity 0.15s; } .fnc-nav { z-index: 5; position: absolute; right: 0; bottom: 0; } .fnc-nav__bgs { z-index: -1; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .fnc-nav__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .fnc-nav__bg.m--nav-bg-before { z-index: 2 !important; transform: translateX(100%); } .fnc-nav__bg.m--active-nav-bg { z-index: 1; transition: transform 1s 0.6666666667s; transform: translateX(0); } .fnc-nav__controls { font-size: 0; } .fnc-nav__control { overflow: hidden; position: relative; display: inline-block; vertical-align: top; width: 100px; height: 50px; font-size: 14px; color: #fff; text-transform: uppercase; background: transparent; border: none; outline: none; cursor: pointer; transition: background-color 0.5s; } .fnc-nav__control.m--active-control { background: #1F2833; } .fnc-nav__control-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #fff; transform-origin: 0 50%; transform: scaleX(0); transition-timing-function: linear !important; } .m--with-autosliding .m--active-control .fnc-nav__control-progress { transform: scaleX(1); } .m--prev-control .fnc-nav__control-progress { transform: translateX(100%); transition: transform 0.5s !important; } .m--reset-progress .fnc-nav__control-progress { transform: scaleX(0); transition: transform 0s 0s !important; } .m--autosliding-blocked .fnc-nav__control-progress { transition: all 0s 0s !important; transform: scaleX(0) !important; } /* NOT PART OF COMMON SLIDER STYLES */ body { margin: 0; } .demo-cont { overflow: hidden; position: relative; height: 100vh; perspective: 1500px; background: #052f59; } .demo-cont__credits { box-sizing: border-box; overflow-y: auto; z-index: 1; position: absolute; right: 0; top: 0; width: 400px; height: 100%; padding: 20px 10px 30px; background: #ffffff; font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #052f59; text-align: center; transition: transform 0.7s; transform: translate3d(100%, 0, 0) rotateY(-45deg); will-change: transform; } .credits-active .demo-cont__credits { transition: transform 0.7s 0.2333333333s; transform: translate3d(0, 0, 0); } .demo-cont__credits *, .demo-cont__credits *:before, .demo-cont__credits *:after { box-sizing: border-box; } .demo-cont__credits-close { position: absolute; right: 20px; top: 20px; width: 28px; height: 28px; cursor: pointer; } .demo-cont__credits-close:before, .demo-cont__credits-close:after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: #fff; } .demo-cont__credits-close:before { transform: rotate(45deg); } .demo-cont__credits-close:after { transform: rotate(-45deg); } .demo-cont__credits-heading { text-transform: uppercase; font-size: 40px; margin-bottom: 20px; } .demo-cont__credits-img { display: block; width: 60%; margin: 0 auto 30px; border-radius: 10px; } .demo-cont__credits-name { margin-bottom: 20px; font-size: 30px; } .demo-cont__credits-link { display: block; margin-bottom: 10px; font-size: 24px; color: #052f59; } .demo-cont__credits-blend { font-size: 30px; margin-bottom: 10px; } .example-slider { z-index: 2; transform: translate3d(0, 0, 0); transition: transform 0.7s; } .credits-active .example-slider { transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9); } .example-slider .fnc-slide-1 .fnc-slide__inner, .example-slider .fnc-slide-1 .fnc-slide__mask-inner { background-image: url(../img/promo.webp); } .example-slider .fnc-slide-2 .fnc-slide__inner, .example-slider .fnc-slide-2 .fnc-slide__mask-inner { background-image: url(../img/Dilyaza.svg); } .example-slider .fnc-slide-3 .fnc-slide__inner:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); } .example-slider .fnc-slide-4 .fnc-slide__inner, .example-slider .fnc-slide-4 .fnc-slide__mask-inner { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/thor.jpg'); } .example-slider .fnc-slide-4 .fnc-slide__inner:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); } .example-slider .fnc-slide__heading, .example-slider .fnc-slide__action-btn, .example-slider .fnc-nav__control { font-family: 'Open Sans', Helvetica, Arial, sans-serif; } /* COLORFUL SWITCH STYLES ORIGINAL DEMO - https://codepen.io/suez/pen/WQjwOb */ .colorful-switch { position: relative; width: 180px; height: 77.1428571429px; margin: 0 auto; border-radius: 32.1428571429px; background: #cfcfcf; } .colorful-switch:before { content: ""; z-index: -1; position: absolute; left: -5px; top: -5px; width: 190px; height: 87.1428571429px; border-radius: 37.1428571429px; background: #314239; transition: background-color 0.3s; } .colorful-switch:hover:before { background: #4C735F; } .colorful-switch__checkbox { z-index: -10; position: absolute; left: 0; top: 0; opacity: 0; } .colorful-switch__label { z-index: 1; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 32.1428571429px; cursor: pointer; } .colorful-switch__bg { position: absolute; left: 0; top: 0; width: 540px; height: 100%; background: linear-gradient(90deg, #14DCD6 0, #10E7BD 180px, #EF9C29 360px, #E76339 100%); transition: transform 0.5s; transform: translate3d(-360px, 0, 0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg { transform: translate3d(0, 0, 0); } .colorful-switch__dot { position: absolute; left: 131.1428571429px; top: 50%; width: 5.1428571429px; height: 5.1428571429px; margin-left: -2.5714285714px; margin-top: -2.5714285714px; border-radius: 50%; background: #fff; transition: transform 0.5s; transform: translate3d(0, 0, 0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot { transform: translate3d(-80.3571428571px, 0, 0); } .colorful-switch__on { position: absolute; left: 104.1428571429px; top: 22.5px; width: 19.2857142857px; height: 36px; transition: transform 0.5s; transform: translate3d(0, 0, 0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on { transform: translate3d(-80.3571428571px, 0, 0); } .colorful-switch__on__inner { position: absolute; width: 100%; height: 100%; transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28); transform-origin: 100% 50%; transform: rotate(45deg) scale(0) translateZ(0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner { transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61); transform: rotate(45deg) scale(1) translateZ(0); } .colorful-switch__on__inner:before, .colorful-switch__on__inner:after { content: ""; position: absolute; border-radius: 2.5714285714px; background: #fff; } .colorful-switch__on__inner:before { left: 0; bottom: 0; width: 100%; height: 6.1428571429px; } .colorful-switch__on__inner:after { right: 0; top: 0; width: 6.1428571429px; height: 100%; } .colorful-switch__off { position: absolute; left: 131.1428571429px; top: 50%; width: 41.1428571429px; height: 41.1428571429px; margin-left: -20.5714285714px; margin-top: -20.5714285714px; transition: transform 0.5s; transform: translate3d(0, 0, 0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off { transform: translate3d(-80.3571428571px, 0, 0); } .colorful-switch__off:before, .colorful-switch__off:after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 5.1428571429px; margin-top: -2.5714285714px; border-radius: 2.5714285714px; background: #fff; transition: transform 0.25s 0.25s; } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after { transition-delay: 0s; } .colorful-switch__off:before { transform: rotate(45deg) scaleX(1) translateZ(0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before { transform: rotate(45deg) scaleX(0) translateZ(0); } .colorful-switch__off:after { transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61); transform: rotate(-45deg) scaleX(1) translateZ(0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after { transition-timing-function: ease; transform: rotate(-45deg) scaleX(0) translateZ(0); } /* Mobile (for screens 768px and below) */ @media (max-width: 768px) { .example-slider .fnc-slide-1 .fnc-slide__inner, .example-slider .fnc-slide-1 .fnc-slide__mask-inner { background-image: url(../img/promo-mobile.png); /* Replace with mobile image */ } .example-slider .fnc-slide-2 .fnc-slide__inner, .example-slider .fnc-slide-2 .fnc-slide__mask-inner { background-image: url(../img/dilyaza-mob.png); /* Replace with mobile image */ } } @media screen and (max-width: 768px) { .fnc-slider { height: 100vh; } .fnc-slide__mask { display: none; } .fnc-slide__content { display: none; } .fnc-slide__heading { font-size: 24px; margin-bottom: 15px; width: 100%; } .fnc-slide__heading-line { display: block; text-align: center; } .fnc-slide__heading-line:nth-child(2) { padding-left: 0; } .fnc-slide__action-btn { margin-left: 0; padding: 10px 20px; font-size: 16px; width: 200px; margin: 0 auto; } .fnc-nav { position: fixed; bottom: 0; width: 100%; display: flex; justify-content: center; } .fnc-nav__controls { width: 100%; display: flex; justify-content: center; } .fnc-nav__control { width: 25%; height: 40px; font-size: 12px; } /* Credits panel adjustments */ .demo-cont__credits { width: 100%; transform: translate3d(100%, 0, 0); } .credits-active .demo-cont__credits { transform: translate3d(0, 0, 0); } .credits-active .example-slider { transform: translate3d(-100%, 0, 0) scale(0.85); } .demo-cont__credits-heading { font-size: 24px; } .demo-cont__credits-img { width: 80%; } .demo-cont__credits-name { font-size: 20px; } .demo-cont__credits-link { font-size: 16px; } /* Colorful switch adjustments */ .colorful-switch { width: 120px; height: 51.4285714286px; transform: scale(0.8); } .colorful-switch:before { width: 130px; height: 61.4285714286px; } .colorful-switch__bg { width: 360px; } .colorful-switch__dot { left: 87.4285714286px; } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot { transform: translate3d(-53.5714285714px, 0, 0); } /* Background image handling */ .fnc-slide__inner, .fnc-slide__mask-inner { background-size: cover; background-position: center center; } /* Animation adjustments */ .m--before-sliding .fnc-slide__mask-inner { transform: translateY(0) rotate(5deg) translateX(-100px) translateZ(0); } .m--active-slide .fnc-slide__mask-inner { transition: transform 0.5s 1s; } .m--previous-slide .fnc-slide__mask-inner { transform: translateY(0) rotate(-5deg) translateX(100px) translateZ(0); } } /* Additional adjustments for very small screens */ @media screen and (max-width: 480px) { .fnc-slide__heading { font-size: 20px; } .fnc-slide__mask { height: 45vh; } .fnc-nav__control { font-size: 10px; } .demo-cont__credits-heading { font-size: 20px; } .demo-cont__credits-name { font-size: 18px; } }