Last active
August 23, 2018 10:46
-
-
Save Robin-bob/c79998f300759a20f17a7d144a5cd198 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container-left-alignment { | |
max-width: 1300px; | |
padding: 0 15px; | |
box-sizing: border-box; | |
} | |
.use-cases-pages { | |
position: relative; | |
overflow: hidden; | |
.site-header__link, .site-header__dropdown-header { | |
color: #fff; | |
} | |
.site-header__logo { | |
path { | |
&:nth-of-type(1) { | |
fill: #fff; | |
} | |
&:nth-of-type(2) { | |
fill: #fff; | |
} | |
&:nth-of-type(3) { | |
fill: #0c85ff; | |
} | |
} | |
} | |
.site-header__dropdown-header { | |
background: url('https://uscreen.global.ssl.fastly.net/static/icons/icn-arrow-down--white.svg') center right no-repeat; | |
} | |
.ui-button.ui-button--grey { | |
background: #fff; | |
color: #263547; | |
} | |
&--slider { | |
.slick-dots { | |
position: absolute; | |
bottom: 100px; | |
left: 50%; | |
transform: translate(-50%, 0); | |
width: 100%; | |
max-width: 1040px; | |
margin: 0 auto; | |
padding: 0 15px; | |
text-align: left; | |
li { | |
margin: 0 2px; | |
button:before { | |
color: #fff; | |
font-size: 12px; | |
} | |
} | |
} | |
.slick-slide { | |
position: relative; | |
} | |
.slick-next:before, .slick-prev:before { | |
font-size: 0; | |
} | |
.slick-prev { | |
left: 5%; | |
z-index: 5; | |
width: 20px; | |
height: 40px; | |
background: url('https://www.uscreen.tv/wp-content/uploads/2018/08/slider-arrow-left.png') center no-repeat; | |
background-size: cover; | |
} | |
.slick-next { | |
right: 5%; | |
z-index: 5; | |
width: 20px; | |
height: 40px; | |
background: url('https://www.uscreen.tv/wp-content/uploads/2018/08/slider-arrow-right.png') center no-repeat; | |
background-size: cover; | |
} | |
&-image { | |
height: 52vw; | |
min-height: 500px; | |
max-height: 660px; | |
position: relative; | |
background-size: cover !important; | |
} | |
&-link { | |
display: inline-block; | |
border-radius: 30px; | |
border: solid 2px #ffffff; | |
padding: 20px 35px; | |
line-height: 1; | |
font-size: 18px; | |
font-weight: bold; | |
text-align: center; | |
color: #ffffff; | |
text-decoration: none; | |
min-width: 220px; | |
box-sizing: border-box; | |
} | |
&-content { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
width: 100%; | |
margin: 0 auto; | |
padding: 0 10%; | |
box-sizing: border-box; | |
h2 { | |
font-size: 80px; | |
font-weight: 600; | |
color: #ffffff; | |
margin: 0 auto; | |
margin-bottom: 15px; | |
} | |
p { | |
font-size: 18px; | |
font-weight: 300; | |
line-height: 1.67; | |
letter-spacing: normal; | |
color: #ced4dd; | |
margin: 0 auto; | |
margin-bottom: 30px; | |
max-width: 440px; | |
margin-left: 0; | |
} | |
} | |
} | |
&--section { | |
padding: 100px 0; | |
&.blue { | |
background: #f4f8fc; | |
} | |
&.orange { | |
background: #fcf9f4; | |
} | |
&.pink { | |
background: #fcf6f4; | |
} | |
&-inner { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
&-image { | |
text-align: center; | |
width: calc(100% - 342px); | |
&.left { | |
text-align: left; | |
} | |
&.right { | |
text-align: right; | |
} | |
img { | |
position: relative; | |
} | |
} | |
&-text { | |
width: 342px; | |
h3 { | |
font-size: 45px; | |
font-weight: 600; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: 1.42; | |
letter-spacing: -0.5px; | |
color: #1b2733; | |
margin: 0 auto; | |
margin-bottom: 25px; | |
} | |
p { | |
font-size: 20px; | |
font-weight: 300; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: 1.5; | |
letter-spacing: normal; | |
color: #637282; | |
margin: 0 auto; | |
} | |
} | |
} | |
} | |
.use-cases-navigation { | |
background-color: #ffffff; | |
box-shadow: 0 5px 15px 0 rgba(0, 64, 128, 0.09); | |
margin: 0 auto; | |
position: relative; | |
margin-right: 0; | |
margin-top: 0; | |
top: -90px; | |
display: inline-block; | |
&--wrapper { | |
text-align: right; | |
margin-bottom: -100px; | |
} | |
&--inner { | |
display: flex; | |
justify-content: flex-end; | |
align-items: center; | |
padding-left: 45px; | |
} | |
&--link { | |
padding: 35px 35px; | |
font-size: 18px; | |
font-weight: bold; | |
font-style: italic; | |
font-stretch: normal; | |
line-height: 1.67; | |
letter-spacing: -0.5px; | |
color: #1b2733; | |
text-decoration: none; | |
display: inline-block; | |
vertical-align: middle; | |
border-bottom: 4px solid transparent; | |
text-align: center; | |
text-transform: uppercase; | |
&.active { | |
border-color: #ee2554; | |
} | |
} | |
} | |
.get-inspired { | |
&--title { | |
font-size: 45px; | |
font-weight: 600; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: 1.42; | |
letter-spacing: -0.5px; | |
text-align: center; | |
color: #1b2733; | |
margin: 0 auto; | |
margin-bottom: 14px; | |
} | |
&--subtitle { | |
margin: 0 auto; | |
margin-bottom: 71px; | |
font-size: 20px; | |
font-weight: 300; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: 1.5; | |
letter-spacing: normal; | |
text-align: center; | |
color: #637282; | |
} | |
&--blocks { | |
display: flex; | |
justify-content: center; | |
flex-wrap: wrap; | |
max-width: 1310px; | |
margin: 0 auto; | |
padding: 0 15px; | |
box-sizing: border-box; | |
margin-bottom: -50px; | |
} | |
} | |
.use-case-block { | |
width: 335px; | |
position: relative; | |
margin: 7.5px; | |
margin-bottom: 50px; | |
&--image { | |
display: block; | |
img { | |
width: 100%; | |
} | |
} | |
&--footer { | |
position: absolute; | |
bottom: -40px; | |
left: 0; | |
width: 100%; | |
padding-left: 38px; | |
display: block; | |
box-sizing: border-box; | |
&-logo { | |
display: block; | |
margin-bottom: 30px; | |
img { | |
max-width: 100%; | |
} | |
} | |
&-name { | |
margin: 0 auto; | |
font-size: 25px; | |
font-weight: 600; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: normal; | |
letter-spacing: -0.3px; | |
color: #1b2733; | |
margin-bottom: 5px; | |
display: block; | |
} | |
&-link { | |
font-size: 20px; | |
font-weight: 600; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: normal; | |
letter-spacing: normal; | |
color: #0ea2ff; | |
position: relative; | |
display: inline-block; | |
&:after { | |
display: inline-block; | |
vertical-align: middle; | |
margin-left: 10px; | |
content: ''; | |
background: url('https://www.uscreen.tv/wp-content/uploads/2018/08/blue-arrow.png') center no-repeat; | |
background-size: cover; | |
width: 13px; | |
height: 10px; | |
} | |
} | |
&-block { | |
box-sizing: border-box; | |
display: block; | |
background-color: #ffffff; | |
box-shadow: 0 5px 15px 0 rgba(0, 64, 128, 0.09); | |
padding: 30px; | |
} | |
} | |
} | |
.grey-logo-companies { | |
&--title { | |
font-size: 35px; | |
font-weight: 600; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: 1.42; | |
letter-spacing: -0.5px; | |
text-align: center; | |
color: #1b2733; | |
margin: 0 auto; | |
margin-bottom: 60px; | |
} | |
&--inner { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-wrap: wrap; | |
} | |
&--link { | |
width: 25%; | |
text-align: center; | |
display: block; | |
margin-bottom: 66px; | |
img { | |
max-width: 100%; | |
} | |
} | |
} | |
.launch-your-content { | |
&--left { | |
width: 462px; | |
h2 { | |
font-size: 45px; | |
font-weight: 600; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: 1.42; | |
letter-spacing: -0.5px; | |
color: #1b2733; | |
margin: 0 auto; | |
margin-bottom: 25px; | |
} | |
.ui-button.ui-button--blue { | |
min-width: 220px; | |
text-align: center; | |
font-weight: bold; | |
box-sizing: border-box; | |
img { | |
margin-right: 8px; | |
} | |
img, span { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
} | |
} | |
&--right { | |
width: calc(100% - 462px); | |
img { | |
width: 900px; | |
position: relative; | |
} | |
} | |
&--inner { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
} | |
.all-is-one-platform { | |
&--title { | |
font-size: 45px; | |
font-weight: 600; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: 1.42; | |
letter-spacing: -0.5px; | |
text-align: center; | |
color: #1b2733; | |
margin: 0 auto; | |
margin-bottom: 14px; | |
} | |
&--subtitle { | |
margin: 0 auto; | |
margin-bottom: 71px; | |
font-size: 20px; | |
font-weight: 300; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: 1.5; | |
letter-spacing: normal; | |
text-align: center; | |
color: #637282; | |
} | |
&--left { | |
width: 462px; | |
h3 { | |
font-size: 45px; | |
font-weight: 600; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: 1.42; | |
letter-spacing: -0.5px; | |
color: #1b2733; | |
margin: 0 auto; | |
margin-bottom: 25px; | |
} | |
p { | |
font-size: 20px; | |
font-weight: 300; | |
font-style: normal; | |
font-stretch: normal; | |
line-height: 1.5; | |
letter-spacing: normal; | |
color: #637282; | |
margin: 0 auto; | |
} | |
} | |
&--right { | |
width: calc(100% - 462px); | |
img { | |
width: 900px; | |
position: relative; | |
} | |
} | |
&--inner { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
} | |
.use-case-modal { | |
&-close { | |
width: 30px; | |
height: 30px; | |
background: url('https://www.uscreen.tv/wp-content/uploads/2018/08/close-modal.png') center no-repeat; | |
background-size: cover; | |
position: absolute; | |
top: 0; | |
right: 0; | |
cursor: pointer; | |
} | |
&-wrapper { | |
&.tingle-modal { | |
background-color: #f4f8fc; | |
padding-top: 0; | |
} | |
.tingle-modal__close { | |
display: none; | |
} | |
.tingle-modal-box { | |
width: 100%; | |
max-width: none; | |
background: none; | |
margin-top: 0; | |
} | |
.tingle-modal-box__content { | |
padding: 70px 35px; | |
box-sizing: border-box; | |
} | |
&--header { | |
display: flex; | |
align-items: center; | |
position: relative; | |
.ui-button { | |
min-width: 200px; | |
margin-right: 30px; | |
text-align: center; | |
font-weight: bold; | |
box-sizing: border-box; | |
} | |
&-title { | |
margin: 0; | |
font-size: 22px; | |
font-weight: normal; | |
letter-spacing: -0.2px; | |
color: #1b2733; | |
span { | |
font-weight: bold; | |
} | |
} | |
} | |
&--iframe { | |
width: 100%; | |
height: 52vw; | |
min-height: 400px; | |
overflow: scroll; | |
margin-top: 70px; | |
background: #fff url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif') center no-repeat; | |
} | |
} | |
} | |
@media only screen and (min-width:768px) and (max-width: 992px) { | |
.use-cases-pages--slider .slick-dots { | |
text-align: center; | |
} | |
.use-cases-pages--slider-content h2 { | |
font-size: 60px; | |
} | |
.use-cases-navigation--link { | |
padding: 25px 11px; | |
font-size: 16px; | |
} | |
.use-cases-navigation--inner { | |
padding-left: 20px; | |
padding-right: 20px; | |
} | |
.use-cases-pages--section { | |
padding: 60px 0; | |
&.branded-apps { | |
padding: 60px 0; | |
} | |
} | |
.grey-logo-companies--link { | |
width: 33%; | |
} | |
.launch-your-content--left { | |
width: 100%; | |
text-align: center; | |
-webkit-box-ordinal-group: 2; | |
-ms-flex-order: 2; | |
order: 2; | |
padding: 50px 0; | |
h2 { | |
font-size: 30px; | |
br { | |
display: none; | |
} | |
} | |
} | |
.launch-your-content--right { | |
width: 100%; | |
text-align: center; | |
-webkit-box-ordinal-group: 1; | |
-ms-flex-order: 1; | |
order: 1; | |
img { | |
max-width: 100%; | |
} | |
} | |
.launch-your-content--inner, .all-is-one-platform--inner { | |
flex-wrap: wrap; | |
} | |
.all-is-one-platform--left { | |
width: 100%; | |
text-align: center; | |
-webkit-box-ordinal-group: 2; | |
-ms-flex-order: 2; | |
order: 2; | |
h2 { | |
font-size: 30px; | |
br { | |
display: none; | |
} | |
} | |
h3 { | |
font-size: 30px; | |
br { | |
display: none; | |
} | |
} | |
} | |
.all-is-one-platform--right { | |
width: 100%; | |
text-align: center; | |
-webkit-box-ordinal-group: 1; | |
-ms-flex-order: 1; | |
order: 1; | |
img { | |
max-width: 100%; | |
left: -30px; | |
} | |
} | |
.all-is-one-platform--subtitle { | |
margin-bottom: 15px; | |
} | |
.use-cases-pages--section-inner { | |
flex-wrap: wrap; | |
} | |
.use-cases-pages--section-text { | |
width: 100%; | |
text-align: center; | |
-webkit-box-ordinal-group: 2; | |
-ms-flex-order: 2; | |
order: 2; | |
padding-top: 30px; | |
h3 { | |
font-size: 30px; | |
br { | |
display: none; | |
} | |
} | |
} | |
.use-cases-pages--section-image { | |
width: 100%; | |
text-align: center !important; | |
-webkit-box-ordinal-group: 1; | |
-ms-flex-order: 1; | |
order: 1; | |
img { | |
max-width: 100%; | |
} | |
} | |
} | |
@media only screen and (max-width:767px) { | |
.use-cases-pages--slider .slick-dots { | |
text-align: center; | |
} | |
.use-cases-pages--slider-content { | |
text-align: center; | |
} | |
.use-cases-pages--slider-content h2 { | |
font-size: 40px; | |
br { | |
display: none; | |
} | |
} | |
.use-cases-navigation--link { | |
padding: 17px 12px; | |
font-size: 14px; | |
} | |
.use-cases-navigation--inner { | |
padding-left: 0px; | |
padding-right: 0px; | |
flex-wrap: wrap; | |
justify-content: center; | |
} | |
.use-cases-pages--slider .slick-prev { | |
left: 2%; | |
} | |
.use-cases-pages--slider .slick-next { | |
right: 2%; | |
} | |
.use-cases-pages--slider .slick-dots { | |
bottom: 65px; | |
} | |
.use-cases-pages--section { | |
padding: 40px 0; | |
&.branded-apps { | |
padding: 40px 0; | |
} | |
} | |
.get-inspired--subtitle { | |
margin-bottom: 40px; | |
} | |
.grey-logo-companies--inner { | |
justify-content: space-between; | |
} | |
.grey-logo-companies--link { | |
width: 45%; | |
} | |
.launch-your-content--left { | |
width: 100%; | |
text-align: center; | |
-webkit-box-ordinal-group: 2; | |
-ms-flex-order: 2; | |
order: 2; | |
padding: 50px 0; | |
h2 { | |
font-size: 30px; | |
br { | |
display: none; | |
} | |
} | |
} | |
.launch-your-content--right { | |
width: 100%; | |
text-align: center; | |
-webkit-box-ordinal-group: 1; | |
-ms-flex-order: 1; | |
order: 1; | |
img { | |
max-width: 100%; | |
} | |
} | |
.launch-your-content--inner, .all-is-one-platform--inner { | |
flex-wrap: wrap; | |
} | |
.all-is-one-platform--left { | |
width: 100%; | |
text-align: center; | |
-webkit-box-ordinal-group: 2; | |
-ms-flex-order: 2; | |
order: 2; | |
h2 { | |
font-size: 30px; | |
br { | |
display: none; | |
} | |
} | |
h3 { | |
font-size: 30px; | |
br { | |
display: none; | |
} | |
} | |
} | |
.all-is-one-platform--right { | |
width: 100%; | |
text-align: center; | |
-webkit-box-ordinal-group: 1; | |
-ms-flex-order: 1; | |
order: 1; | |
img { | |
max-width: 100%; | |
left: -10px; | |
} | |
} | |
.all-is-one-platform--subtitle { | |
margin-bottom: 15px; | |
} | |
.use-cases-pages--section-inner { | |
flex-wrap: wrap; | |
} | |
.use-cases-pages--section-text { | |
width: 100%; | |
text-align: center; | |
-webkit-box-ordinal-group: 2; | |
-ms-flex-order: 2; | |
order: 2; | |
padding-top: 30px; | |
h3 { | |
font-size: 30px; | |
br { | |
display: none; | |
} | |
} | |
} | |
.use-cases-pages--section-image { | |
width: 100%; | |
text-align: center !important; | |
-webkit-box-ordinal-group: 1; | |
-ms-flex-order: 1; | |
order: 1; | |
img { | |
max-width: 100%; | |
} | |
} | |
.use-case-modal-wrapper .tingle-modal-box__content { | |
padding: 10px; | |
} | |
.use-case-modal-wrapper--header { | |
flex-wrap: wrap; | |
text-align: center; | |
justify-content: center; | |
} | |
.use-case-modal-wrapper--header .ui-button { | |
margin: 30px; | |
} | |
.use-case-modal-wrapper--iframe { | |
margin-top: 30px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment