/*------------------------------------ Background Overlay Gradients ------------------------------------*/ [class*="gradient-overlay-half"] { position: relative; z-index: 1; &::before { position: absolute; top: 0; right: 0; bottom: 0; right: 0; z-index: -1; width: 100%; height: 100%; content: ""; transition: $btn-transition; } } .gradient-overlay-half-primary-video-v1 { &::before { z-index: 2; @include gradient-x($hs-start-color: rgba($indigo, .9), $hs-end-color: rgba($primary-lighter, .85), $deg: 150deg); } } .gradient-overlay-half-primary-v1 { &::before { @include gradient-x($hs-start-color: rgba($indigo, .9), $hs-end-color: rgba($primary-lighter, .85), $deg: 150deg); } } .gradient-overlay-half-primary-v2 { &::before { @include gradient-x($hs-start-color: rgba($primary-lighter, .85), $hs-end-color: rgba($indigo, .9), $deg: 30deg); } } .gradient-overlay-half-info-v1 { &::before { @include gradient-x($hs-start-color: rgba($primary, .92), $hs-end-color: rgba($info, .92), $deg: 0deg); } } .gradient-overlay-half-dark-v1 { &::before { @include gradient-x($hs-start-color: $dark, $hs-end-color: transparent, $hs-end-percent: 75%, $deg: 0deg); } } .gradient-overlay-half-dark-v2 { &::before { @include gradient-x($hs-start-color: mix(rgba($primary, .35), $dark), $hs-end-color: rgba($gray-700, .3), $deg: 150deg); } } .gradient-overlay-half-bg-gradient { &::before { background: linear-gradient(180deg, #1e2022 0%, transparent 50%); } &:hover:before { background: linear-gradient(180deg, #1e2022 0%, transparent 75%); } } .gradient-overlay-half-bg-gradient-v1 { &::before { background: linear-gradient(180deg, #484848 0%, transparent 75%); } } .gradient-overlay-half-bg-gradient-v2 { &::before { background-color: #20274d; opacity: .4; } &.gradient-overlay { &:hover:before { background: none; } } } .gradient-overlay-half-bg-gradient-v3 { &::before { background: linear-gradient(180deg, #1e2022 0%, transparent 50%); } } .gradient-overlay-half-bg-gradient-v4 { &::before { background: linear-gradient(160deg, #1e2022 -18%, transparent 90%); } } .gradient-overlay-half-bg-gradient-v5 { z-index: 0; &::before { background: linear-gradient(to top, rgba(19,19,19,1) 6%, rgba(19,19,19,0.2) 72%, rgba(34,34,34,0) 89%, rgba(44,44,44,0) 100%); z-index: 0; } } .gradient-overlay-half-bg-gradient-v6 { z-index: 0; &::before { background: linear-gradient(to top, rgba(19,19,19,1) 6%, rgba(19,19,19,0.2) 72%, rgba(34,34,34,0) 89%, rgba(44,44,44,0) 100%); z-index: 0; border-radius: $border-radius-xs; } } .gradient-overlay-half-bg-gradient-v7 { &::before { background: linear-gradient(to top, rgba(19,19,19,1) 6%, rgba(19,19,19,0.2) 72%, rgba(34,34,34,0) 89%, rgba(44,44,44,0) 100%); z-index: inherit; } } .gradient-overlay { &::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: $primary; opacity: .0; } &:hover:after { opacity: .4; z-index: -1; transition-duration: 0.5s; } } .gradient-overlay-half-bg-orange { &::before { background-color: #ff9500; opacity: .85; } } [class*="gradient-overlay-half-bg-dark"] { &::before { background-color: #000000; opacity: .7; } } .gradient-overlay-half-bg-dark-v1 { &::before { opacity: .6; } } .gradient-overlay-half-bg-blue-light { &::before { background-color: #297cbb; opacity: .8; } } .gradient-overlay-half-bg-grayish-blue { &::before { background-color: #3b444f; opacity: .8; } } .gradient-overlay-half-bg-blue { &::before { background-color: #7eadfb; opacity: 0.4; } } .gradient-overlay-half-bg-violet { &::before { background-color: rgba(73, 16, 128, 0.64); } } .gradient-overlay-half-black-gradient { &::before { background-color: #18181a; opacity: 0.5; } } .gradient-overlay-half-gray-gradient { &::before { background-color: #3b444f; opacity: 0.6; } } .gradient-overlay-half-blue-gradient { &::before { background-color: #1a2b49; opacity: 0.4; } } .gradient-overlay-half-sapphire-gradient { &::before { background-color: #002568; opacity: 0.7; } } .gradient-overlay-half-sapphire-gradient { &::before { background-color: #002568; opacity: 0.7; } } .gradient-overlay-half-bg-violet-light { &::before { background-color: #ac5ef1; opacity: 0.7; } } .gradient-overlay-half-white-gradient { &::before { background-color: #ffffff; opacity: 0.15; } } .gradient-overlay-half-bg-catalina-blue { &:before { background-color: #16142D; opacity: .4; } } .gradient-overlay-half-bg-charcoal-gray { &:before { background-color: #484848; opacity: 0.5; } } .gradient-overlay-half-bg-white { &::before { background-color: #fff; opacity: 1; } &:hover:before { opacity: 0; } &:hover { i,h6,span { color: #fff !important; } } } .collapsed.text-gradient::before { content: ''; position: absolute; left: 0; right: 0; background: linear-gradient(180deg, transparent 0%, #ffffff 50%); opacity: .7; width: 100%; height: 80px; bottom: 30px; } .u-media-viewer__dark { &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color:rgba(11, 13, 16, 0.8); border-radius: 3px; } }