diff options
Diffstat (limited to 'assets/css')
-rw-r--r-- | assets/css/custom.css | 3 | ||||
-rw-r--r-- | assets/css/custom.scss | 5 | ||||
-rw-r--r-- | assets/css/modules/left-pill-bar.scss | 39 | ||||
-rw-r--r-- | assets/css/pages/about.css | 203 | ||||
-rw-r--r-- | assets/css/pages/about.scss | 46 | ||||
-rw-r--r-- | assets/css/pages/generic.css | 26 | ||||
-rw-r--r-- | assets/css/pages/generic.scss | 30 | ||||
-rw-r--r-- | assets/css/pages/home.css | 1346 | ||||
-rw-r--r-- | assets/css/pages/home.scss | 137 | ||||
-rw-r--r-- | assets/css/pages/pressrelease.css | 26 | ||||
-rw-r--r-- | assets/css/pages/pressrelease.scss | 30 |
11 files changed, 902 insertions, 989 deletions
diff --git a/assets/css/custom.css b/assets/css/custom.css index 233b8493..8bbaba56 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -10746,6 +10746,9 @@ blockquote { @media (min-width: 768px) { .quote .image--feature.new-img, .call-to-action .image--feature.new-img { border: 10px solid #0082c9 !important; } } + @media (max-width: 991px) { + .quote .icon, .call-to-action .icon { + margin-top: 30px; } } /* Whitepaper sections */ .section--whitepaper, .whitepaper { diff --git a/assets/css/custom.scss b/assets/css/custom.scss index 6c3a37ec..2c499d8d 100644 --- a/assets/css/custom.scss +++ b/assets/css/custom.scss @@ -1456,6 +1456,11 @@ blockquote { border: 10px solid $nextcloud-blue !important; } } + .icon { + @media (max-width: $break-big) { + margin-top: 30px; + } + } } /* Whitepaper sections */ diff --git a/assets/css/modules/left-pill-bar.scss b/assets/css/modules/left-pill-bar.scss index 05fdaee4..bf988530 100644 --- a/assets/css/modules/left-pill-bar.scss +++ b/assets/css/modules/left-pill-bar.scss @@ -6,30 +6,27 @@ @import '../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/border-radius.scss'; @import '../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs.scss'; -.nav { - position: relative; +.nav.nav-pills.brand-pills.nav-stacked { + position: relative !important; padding: 5px 0 30px 0; - &.nav-pills.brand-pills.nav-stacked { - opacity: 1; /* compensate for nav being set to opacity 0 by our top nav bar code */ - li { - margin: 0; - border-left: 1px solid lightgray; - &:hover, &.active { - border-left: 1px solid blue; - font-weight: 700; - } - a { - color: #2a2a36; - background-color: transparent; - padding-left: 20px; - border-radius: 0; - margin: 0; - } - + opacity: 1; /* compensate for nav being set to opacity 0 by our top nav bar code */ + li { + margin: 0; + border-left: 1px solid lightgray; + &:hover, &.active { + border-left: 1px solid blue; + font-weight: 700; + } + a { + color: #2a2a36; + background-color: transparent; + padding-left: 20px; + border-radius: 0; + margin: 0; } .tab-content { - margin-top: 15px; - padding-top: 5px; + margin-top: 15px; + padding-top: 5px; } } } diff --git a/assets/css/pages/about.css b/assets/css/pages/about.css index 5ab67a3c..d2c5d677 100644 --- a/assets/css/pages/about.css +++ b/assets/css/pages/about.css @@ -7,90 +7,75 @@ padding-right: 15px; padding-left: 15px; margin-right: auto; - margin-left: auto; } - @media (min-width: 768px) { - .container-widest .container-widest { - width: 738px; } } - @media (min-width: 992px) { - .container-widest .container-widest { - width: 962px; } } - @media (min-width: 1200px) { - .container-widest .container-widest { - width: 1170px; } } - @media (min-width: 1500px) { - .container-widest .container-widest { - width: 1470px; } } - @media (min-width: 1800px) { - .container-widest .container-widest { - width: 1770px; } } + margin-left: auto; +} +@media (min-width: 768px) { + .container-widest .container-widest { + width: 738px; + } +} +@media (min-width: 992px) { + .container-widest .container-widest { + width: 962px; + } +} +@media (min-width: 1200px) { + .container-widest .container-widest { + width: 1170px; + } +} +@media (min-width: 1500px) { + .container-widest .container-widest { + width: 1470px; + } +} +@media (min-width: 1800px) { + .container-widest .container-widest { + width: 1770px; + } +} /* Make Navbar transparent */ .nav:not(.scrolled) { background-color: transparent; - position: absolute; } + position: absolute; +} .about-background { background: url("../../img/headers/about.jpg") no-repeat; background-position: center; - background-size: cover; } + background-size: cover; +} footer.page-footer { - margin-top: 20px; } + margin-top: 20px; +} section { padding-top: 80px; - /* display: inline-block; */ } - section .section--heading-1 { - padding: 80px 0 30px 0; - text-align: center; } + /* display: inline-block; */ +} +section .section--heading-1 { + padding: 80px 0 30px 0; + text-align: center; +} +section .section--intro { + font-weight: 600; + padding-top: 30px; + color: #2a2a36; +} +@media (max-width: 768px) { section .section--intro { - font-weight: 600; - padding-top: 30px; - color: #2a2a36; } - @media (max-width: 768px) { - section .section--intro { - text-align: left !important; } } - section .newsrow { - margin-top: 70px; - margin-bottom: 30px; } - section .newsrow .col-md-4 { - padding: 15px; } - -.section--products { - margin: 80px 0 0 0; - padding: 90px 0 70px 0; - background-color: #eee; } - .section--products .row { - margin-bottom: 10px; } - .section--products img { - padding: 20px; } - .section--products .description { - min-height: 100px; - margin: 0 20px; } - .section--products .description .title { - display: block; - padding: 5px 10px 0 0; - font-size: 18px; - /* color: white; */ } - .section--products .description .title .logo { - width: 65px; - min-height: 25px; - float: left; - vertical-align: middle; } - .section--products .description .title .logo img { - margin-top: 0px; - padding: 4px 5px 0 0; - height: 60px; - width: 60px; } - .section--products .description .title .text { - line-height: 1; - padding: 10px 0 10px 0; } - .section--products .description .title .text strong { - line-height: 1.2; - font-weight: normal; - font-size: 22px; } - .section--products .description .title .text small { - opacity: 0.8; } + text-align: left !important; + } +} +section .newsrow { + margin-top: 70px; + margin-bottom: 30px; +} +section .newsrow .col-md-4 { + padding: 15px; +} .section--differentiators .quote--container { display: flex; @@ -102,40 +87,52 @@ section { border: 1px solid #FCFCFC; -webkit-box-shadow: 0 1px 40px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 1px 40px 0 rgba(0, 0, 0, 0.14); - margin: 30px 20px; } - @media (min-width: 991px) { - .section--differentiators .quote--container { - float: right; - width: 40%; - min-width: 300px; } } - .section--differentiators .quote--container blockquote { - font-style: italic; - font-size: 1.6em; - margin: 0; } - .section--differentiators .quote--container .quote--brand { - padding-top: 5px; - display: flex; - justify-content: center; - align-items: center; } - .section--differentiators .quote--container .quote--brand .quote--brand--logo { - background: url("../../img/conference/der-spiegel-logo.png") no-repeat center/contain; - width: 46px; - height: 46px; } - .section--differentiators .quote--container .quote--brand .quote--brand--text a { - margin: 0; - padding: 0 0 0 10px; - font-weight: 600; - text-transform: uppercase; - font-size: 15px; - color: #6c6c6c; } + margin: 30px 20px; +} +@media (min-width: 991px) { + .section--differentiators .quote--container { + float: right; + width: 40%; + min-width: 300px; + } +} +.section--differentiators .quote--container blockquote { + font-style: italic; + font-size: 1.6em; + margin: 0; +} +.section--differentiators .quote--container .quote--brand { + padding-top: 5px; + display: flex; + justify-content: center; + align-items: center; +} +.section--differentiators .quote--container .quote--brand .quote--brand--logo { + background: url("../../img/conference/der-spiegel-logo.png") no-repeat center/contain; + width: 46px; + height: 46px; +} +.section--differentiators .quote--container .quote--brand .quote--brand--text a { + margin: 0; + padding: 0 0 0 10px; + font-weight: 600; + text-transform: uppercase; + font-size: 15px; + color: #6c6c6c; +} .img-responsive { - padding-top: 10px; } - @media (min-width: 991px) { - .img-responsive { - margin-bottom: 50px; } } - @media (min-width: 1600px) { - .img-responsive { - /* margin-bottom: 0px; */ } } + padding-top: 10px; +} +@media (min-width: 991px) { + .img-responsive { + margin-bottom: 50px; + } +} +@media (min-width: 1600px) { + .img-responsive { + /* margin-bottom: 0px; */ + } +} /*# sourceMappingURL=about.css.map */ diff --git a/assets/css/pages/about.scss b/assets/css/pages/about.scss index e675bf9a..67352ff0 100644 --- a/assets/css/pages/about.scss +++ b/assets/css/pages/about.scss @@ -40,53 +40,7 @@ section { } } -.section--products { - margin: 80px 0 0 0; - padding: 90px 0 70px 0; - background-color: #eee; - .row { - margin-bottom: 10px; - } - img { - padding: 20px; - } - .description { - min-height: 100px; - margin: 0 20px; - .title { - display: block; - padding: 5px 10px 0 0; - font-size: 18px; -/* color: white; */ - .logo { - width: 65px; - min-height: 25px; - float:left; - vertical-align: middle; - img { - margin-top: 0px; - padding: 4px 5px 0 0; - height: 60px; - width: 60px; - } - } - .text { - line-height: 1; - padding: 10px 0 10px 0; - strong { - line-height: 1.2; - font-weight: normal; - font-size: 22px; - } - small { - opacity: 0.8; - } - } - } - - } -} .section--differentiators { .quote--container { display: flex; diff --git a/assets/css/pages/generic.css b/assets/css/pages/generic.css index 400791c9..20e15471 100644 --- a/assets/css/pages/generic.css +++ b/assets/css/pages/generic.css @@ -30,25 +30,15 @@ position: absolute; } .generic-background { - background: -webkit-gradient(linear, left top, left bottom, from(#0082c9), color-stop(100%, #3e9ed8), to(#d8d8d8)); - background: linear-gradient(to bottom, #0082c9, #3e9ed8 100%, #d8d8d8); - padding: 0; - border-radius: 0 !important; - margin-bottom: 0px; + background: url("../../img/headers/background-transparent.png") no-repeat; + background-color: #0082c9; + background-position: center; + background-size: cover; height: 30vh; - min-height: 400px; - max-height: 600px; } - .generic-background .pattern { - width: 100%; - height: 100%; - opacity: 0.1; - background: url("../../img/headers/generic.png") no-repeat; - background-size: cover; - background-position: center; } - @media (max-width: 991px) { - .generic-background { - min-height: 200px; - max-height: 400px; } } + min-height: 300px; + max-height: 400px; } + .generic-background .topheader { + margin-top: 70px; } /* General */ section { diff --git a/assets/css/pages/generic.scss b/assets/css/pages/generic.scss index 5288df55..162f2c5d 100644 --- a/assets/css/pages/generic.scss +++ b/assets/css/pages/generic.scss @@ -4,29 +4,15 @@ .generic-background { - background: -webkit-gradient(linear, left top, left bottom, from($nextcloud-blue), color-stop(100%, #3e9ed8), to(#d8d8d8)); - background: linear-gradient(to bottom, $nextcloud-blue, #3e9ed8 100%, #d8d8d8); - padding: 0; - border-radius: 0 !important; - margin-bottom: 0px; + background: url('../../img/headers/background-transparent.png') no-repeat; + background-color: #0082c9; + background-position: center; + background-size: cover; height: 30vh; - min-height: 400px; - max-height: 600px; - - .pattern { - width:100%; - height:100%; - opacity: 0.1; - background: url('../../img/headers/generic.png') no-repeat; - background-size: cover; - background-position: center; - - @media (max-width: $break-big) { - } - } - @media (max-width: $break-big) { - min-height: 200px; - max-height: 400px; + min-height: 300px; + max-height: 400px; + .topheader { + margin-top: 70px; } } diff --git a/assets/css/pages/home.css b/assets/css/pages/home.css index 743d3647..c2fe0fe0 100644 --- a/assets/css/pages/home.css +++ b/assets/css/pages/home.css @@ -7,39 +7,27 @@ padding-right: 15px; padding-left: 15px; margin-right: auto; - margin-left: auto; -} -@media (min-width: 768px) { - .container-widest .container-widest { - width: 738px; - } -} -@media (min-width: 992px) { - .container-widest .container-widest { - width: 962px; - } -} -@media (min-width: 1200px) { - .container-widest .container-widest { - width: 1170px; - } -} -@media (min-width: 1500px) { - .container-widest .container-widest { - width: 1470px; - } -} -@media (min-width: 1800px) { - .container-widest .container-widest { - width: 1770px; - } -} + margin-left: auto; } + @media (min-width: 768px) { + .container-widest .container-widest { + width: 738px; } } + @media (min-width: 992px) { + .container-widest .container-widest { + width: 962px; } } + @media (min-width: 1200px) { + .container-widest .container-widest { + width: 1170px; } } + @media (min-width: 1500px) { + .container-widest .container-widest { + width: 1470px; } } + @media (min-width: 1800px) { + .container-widest .container-widest { + width: 1770px; } } /* Make Navbar transparent */ .nav:not(.scrolled) { background-color: transparent; - position: absolute; -} + position: absolute; } .jumbotron { background: -webkit-gradient(linear, left top, left bottom, from(#0082c9), color-stop(100%, #3e9ed8), to(#d8d8d8)); @@ -51,565 +39,531 @@ min-height: 700px; border-radius: 0 !important; position: relative; - overflow: hidden; -} -.jumbotron__pattern { - opacity: 0.1; - width: calc(100vw - 15px); - height: 100vh; - -o-object-fit: cover; - object-fit: cover; -} -@media (max-width: 991px) { + overflow: hidden; } .jumbotron__pattern { + opacity: 0.1; width: calc(100vw - 15px); height: 100vh; -o-object-fit: cover; - object-fit: cover; - } -} -@media (max-width: 991px) { - .jumbotron { - min-height: 600px; - } -} -.jumbotron .jumbotron--heading-1 { - padding-top: 10px; -} -@media (max-width: 768px) { + object-fit: cover; } + @media (max-width: 991px) { + .jumbotron__pattern { + width: calc(100vw - 15px); + height: 100vh; + -o-object-fit: cover; + object-fit: cover; } } + @media (max-width: 991px) { + .jumbotron { + min-height: 600px; } } .jumbotron .jumbotron--heading-1 { - max-width: 300px; - text-align: left; - } -} -@media (min-width: 768px) { - .jumbotron .jumbotron--heading-1 { - max-width: 500px; - } -} -.jumbotron .jumbotron--lead { - width: 377px; - text-align: left; -} -@media (max-width: 991px) { + padding-top: 10px; } + @media (max-width: 768px) { + .jumbotron .jumbotron--heading-1 { + max-width: 300px; + text-align: left; } } + @media (min-width: 768px) { + .jumbotron .jumbotron--heading-1 { + max-width: 500px; } } .jumbotron .jumbotron--lead { - width: 250px; - } -} -.jumbotron p { - margin-top: 50px; -} -.jumbotron .topbanner { - background: url(../../img/home/top-banner@2x.png) bottom 0 right 0/contain no-repeat; - width: auto; - height: auto; - max-width: 55vw; - max-height: 90vh; - margin: 0 0 0 0; - padding: 0 0 0 0; - position: absolute; - bottom: 0; - right: 0; - overflow: hidden; - opacity: 0; - -webkit-transform: translateY(50px); - transform: translateY(50px); -} -@media (max-width: 768px) { + width: 377px; + text-align: left; } + @media (max-width: 991px) { + .jumbotron .jumbotron--lead { + width: 250px; } } + .jumbotron p { + margin-top: 50px; } .jumbotron .topbanner { - background-image: url("../../img/home/top-banner@2x_mobile.png"); - padding-top: 100%; - } -} -@media (min-width: 768px) and (max-width: 991px) { - .jumbotron .topbanner { - background-image: url("../../img/home/top-banner@2x_mobile.png"); - padding-top: 55%; - } -} -.jumbotron .topbanner img { - width: 100%; - height: 100%; - opacity: 0; -} -.jumbotron .toptext { - position: absolute; - top: 30vh; - padding-left: 0; - margin-left: 0; - z-index: 2; -} -.jumbotron .toptext .button { - opacity: 0; - -webkit-transform: translateY(50px); - transform: translateY(50px); -} -.jumbotron .toptext .jumbotron--heading-1, -.jumbotron .toptext .jumbotron--lead { - opacity: 1; - -webkit-transform: translateY(50px); - transform: translateY(50px); -} -@media (max-width: 768px) { - .jumbotron .toptext .jumbotron--lead { - text-shadow: 0px 0px 5px #000000; - } -} -@media (max-width: 768px) { - .jumbotron .toptext .button { - /* text-shadow: 0px 0px 5px #000000; */ - /* background: #0082c9cc; */ - } -} -@media (max-width: 991px) { + background: url(../../img/home/top-banner@2x.png) bottom 0 right 0/contain no-repeat; + width: auto; + height: auto; + max-width: 55vw; + max-height: 90vh; + margin: 0 0 0 0; + padding: 0 0 0 0; + position: absolute; + bottom: 0; + right: 0; + overflow: hidden; + opacity: 0; + -webkit-transform: translateY(50px); + transform: translateY(50px); } + @media (max-width: 768px) { + .jumbotron .topbanner { + background-image: url("../../img/home/top-banner@2x_mobile.png"); + padding-top: 100%; } } + @media (min-width: 768px) and (max-width: 991px) { + .jumbotron .topbanner { + background-image: url("../../img/home/top-banner@2x_mobile.png"); + padding-top: 55%; } } + .jumbotron .topbanner img { + width: 100%; + height: 100%; + opacity: 0; } .jumbotron .toptext { - top: 120px; - margin-left: 5%; - } -} -.jumbotron .toptext .announcement { - max-width: 600px; - background-color: rgba(0, 115, 178, 0.51); - border-radius: 20px; - padding: 0 12px 0 8px; - text-decoration: none; - color: white; - line-height: 1.2; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - opacity: 0; - -webkit-transform: translateX(-20px); - transform: translateX(-20px); -} -@media (max-width: 768px) { - .jumbotron .toptext .announcement { - margin-left: -20px; - width: calc(100% + 35px); - border-radius: 0; - } -} -.jumbotron .toptext .announcement .type { - padding: 0 6px; - font-size: 11px; - line-height: 16px; - font-weight: 600; - background: #FF8B00; - text-transform: uppercase; - border-radius: 10px; -} -@media (max-width: 768px) { - .jumbotron .toptext .announcement .type { - margin-left: 10px; - } -} -.jumbotron .toptext .announcement .message { - margin: 10px 16px 10px 10px; - font-size: 13px; - line-height: 1em; -} -@media (max-width: 768px) { - .jumbotron .toptext .announcement .message { - font-size: 15px; - line-height: 22px; - margin: 10px 10px; - } -} -.jumbotron .toptext .announcement svg { - display: inline-block; - height: 12px; - width: 12px; - top: 10px; - transform: translateX(-10px); - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; -} -.jumbotron .toptext .announcement svg g { - fill: #fff; -} -@media (max-width: 768px) { - .jumbotron .toptext .announcement svg { - position: relative; - top: 2px; - } -} -.jumbotron .toptext .announcement:hover svg { - transform: translateX(0px); -} - + position: absolute; + top: 30vh; + padding-left: 0; + margin-left: 0; + z-index: 2; } + .jumbotron .toptext .button { + opacity: 0; + -webkit-transform: translateY(50px); + transform: translateY(50px); } + .jumbotron .toptext .jumbotron--heading-1, + .jumbotron .toptext .jumbotron--lead { + opacity: 1; + -webkit-transform: translateY(50px); + transform: translateY(50px); } + @media (max-width: 768px) { + .jumbotron .toptext .jumbotron--lead { + text-shadow: 0px 0px 5px #000000; } } + @media (max-width: 768px) { + .jumbotron .toptext .button { + /* text-shadow: 0px 0px 5px #000000; */ + /* background: #0082c9cc; */ } } + @media (max-width: 991px) { + .jumbotron .toptext { + top: 120px; + margin-left: 5%; } } + .jumbotron .toptext .announcement { + max-width: 600px; + background-color: rgba(0, 115, 178, 0.51); + border-radius: 20px; + padding: 0 12px 0 8px; + text-decoration: none; + color: white; + line-height: 1.2; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + opacity: 0; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); } + @media (max-width: 768px) { + .jumbotron .toptext .announcement { + margin-left: -20px; + width: calc(100% + 35px); + border-radius: 0; } } + .jumbotron .toptext .announcement .type { + padding: 0 6px; + font-size: 11px; + line-height: 16px; + font-weight: 600; + background: #FF8B00; + text-transform: uppercase; + border-radius: 10px; } + @media (max-width: 768px) { + .jumbotron .toptext .announcement .type { + margin-left: 10px; } } + .jumbotron .toptext .announcement .message { + margin: 10px 16px 10px 10px; + font-size: 13px; + line-height: 1em; } + @media (max-width: 768px) { + .jumbotron .toptext .announcement .message { + font-size: 15px; + line-height: 22px; + margin: 10px 10px; } } + .jumbotron .toptext .announcement svg { + display: inline-block; + height: 12px; + width: 12px; + top: 10px; + transform: translateX(-10px); + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; } + .jumbotron .toptext .announcement svg g { + fill: #fff; } + @media (max-width: 768px) { + .jumbotron .toptext .announcement svg { + position: relative; + top: 2px; } } + .jumbotron .toptext .announcement:hover svg { + transform: translateX(0px); } + .jumbotron .scrollbutton a { + position: absolute; + bottom: 6px; + left: 25%; + z-index: 2; + display: inline-block; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + color: #fff; + letter-spacing: .1em; + text-decoration: none; + transition: opacity .3s; } + .jumbotron .scrollbutton a:hover { + opacity: .5; } + .jumbotron .scrollbutton a { + padding-top: 80px; } + .jumbotron .scrollbutton a span { + position: absolute; + top: 0; + left: 50%; + width: 24px; + height: 24px; + margin-left: -12px; + border-left: 1px solid #fff; + border-bottom: 1px solid #fff; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-animation: sdb07 2s infinite; + animation: sdb07 2s infinite; + opacity: 0; + box-sizing: border-box; } + .jumbotron .scrollbutton a span:nth-of-type(1) { + -webkit-animation-delay: 0s; + animation-delay: 0s; } + .jumbotron .scrollbutton a span:nth-of-type(2) { + top: 16px; + -webkit-animation-delay: .15s; + animation-delay: .15s; } + .jumbotron .scrollbutton a span:nth-of-type(3) { + top: 32px; + -webkit-animation-delay: .3s; + animation-delay: .3s; } +@-webkit-keyframes sdb07 { + 0% { + opacity: 0; } + 50% { + opacity: 1; } + 100% { + opacity: 0; } } +@keyframes sdb07 { + 0% { + opacity: 0; } + 50% { + opacity: 1; } + 100% { + opacity: 0; } } /** * Home page: Why Nextcloud? */ .icon-row { - padding-bottom: 100px; -} + padding-bottom: 100px; } .icon-row img { - height: 200px; -} + height: 200px; } .icon-row h4 { - padding-top: 39px; -} + padding-top: 39px; } + +.section--products { + margin: 0 0 0 0; + padding: 90px 0 70px 0; + /* background-color: #eee; */ } + .section--products .row { + margin-bottom: 10px; } + .section--products img { + padding: 20px; } + .section--products .description { + min-height: 100px; + margin: 0 20px; } + .section--products .description .title { + display: block; + padding: 5px 10px 0 0; + font-size: 18px; + /* color: white; */ } + .section--products .description .title .logo { + width: 65px; + min-height: 25px; + float: left; + vertical-align: middle; } + .section--products .description .title .logo img { + margin-top: 0px; + padding: 4px 5px 0 0; + height: 60px; + width: 60px; } + .section--products .description .title .text { + line-height: 1; + padding: 10px 0 10px 0; } + .section--products .description .title .text strong { + line-height: 1.2; + font-weight: normal; + font-size: 22px; } + .section--products .description .title .text small { + opacity: 0.8; } .section--why { - padding-bottom: 80px; -} -.section--why a { - margin-left: 30px; - margin-right: 30px; -} -.section--why .highlights { - display: -ms-flexbox; - display: flex; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - margin: -16px 0 0 -16px; - padding: 0 0 30px 0; - list-style: none; -} -@media (max-width: 1024px) { + padding-bottom: 80px; } + .section--why a { + margin-left: 30px; + margin-right: 30px; } .section--why .highlights { - display: block; - text-align: center; - margin: 0 10px 0 10px; - } -} -.section--why .highlights_align { - padding-top: 100px; - flex-basis: 33.33333%; - max-width: 33.33333%; - padding-left: 64px; -} -.section--why .highlights_align:first-child { - padding-left: 0px; -} -.section--why .highlights_align svg { - margin-left: -10px; -} -.section--why .highlights_align .section--paragraph { - font-size: 16px; -} -.section--why .highlights_align h4 { - text-align: center; - margin-top: 20px; - margin-left: -20px; - margin-bottom: 0; -} -@media (max-width: 1024px) { + display: -ms-flexbox; + display: flex; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + margin: -16px 0 0 -16px; + padding: 0 0 30px 0; + list-style: none; } + @media (max-width: 1024px) { + .section--why .highlights { + display: block; + text-align: center; + margin: 0 10px 0 10px; } } .section--why .highlights_align { - flex-basis: auto; - max-width: none; - padding-left: 0; - padding-top: 50px; - } -} -@media (max-width: 1200px) { - .section--why .highlights_align svg { - margin-left: 0; - } -} -@media (max-width: 1200px) { - .section--why .highlights_align h4 { - margin-left: 0; - } -} + padding-top: 100px; + flex-basis: 33.33333%; + max-width: 33.33333%; + padding-left: 64px; } + .section--why .highlights_align:first-child { + padding-left: 0px; } + .section--why .highlights_align svg { + margin-left: -10px; } + .section--why .highlights_align .section--paragraph { + font-size: 16px; } + .section--why .highlights_align h4 { + text-align: center; + margin-top: 20px; + margin-left: -20px; + margin-bottom: 0; } + @media (max-width: 1024px) { + .section--why .highlights_align { + flex-basis: auto; + max-width: none; + padding-left: 0; + padding-top: 50px; } } + @media (max-width: 1200px) { + .section--why .highlights_align svg { + margin-left: 0; } } + @media (max-width: 1200px) { + .section--why .highlights_align h4 { + margin-left: 0; } } .jumbotron > .container-fluid > .col-md-6 > p > a { width: 290px; height: 60px; padding-top: 16px; - text-indent: -30px; -} + text-indent: -30px; } .section--customers { - padding-top: 130px; - padding-bottom: 110px; - position: relative; -} -.section--customers .row { - margin-top: 50px; -} -.section--customers .customer { - position: relative; - padding-left: 10px; - padding-right: 10px; -} -.section--customers .customer .customer-logo { - /* -webkit-filter: saturate(0%) contrast(.35) brightness(130%); */ - /* filter: saturate(0%) contrast(.35) brightness(130%); */ - max-width: 250px; - float: center; - /* height: 200px; */ - position: relative; - /* line-height: 200px; */ - text-align: center; - /* width: 100%; */ - margin-left: auto; - margin-right: auto; - padding-left: 10px; - padding-right: 10px; - vertical-align: middle; - /* img { - max-width: 90%; - vertical-align: middle; - } - .scaling-svg-container { - height: 0; - width: 100%; - padding: 0; - padding-bottom: 100%; - } - svg { - position: absolute; - height: 100%; - width: 100%; - left: 0; - top: 0; - } - @media (max-width: $break-big) { - height: 150px; - line-height: 150px; - } - @media (max-width: $break-small) { - height: 100px; - line-height: 100px; - }*/ - /* svg { - * vertical-align: middle; - * float:none; - * width: auto; - * height: 400px; - * padding-bottom: 100px; - }*/ -} + padding-top: 60px; + padding-bottom: 90px; + position: relative; } + .section--customers .row { + margin-top: 50px; } + .section--customers .customer { + margin-top: 30px; + position: relative; + padding-left: 10px; + padding-right: 10px; } + .section--customers .customer .customer-logo { + -webkit-filter: saturate(0%) contrast(0.4) brightness(400%); + filter: saturate(0%) contrast(0.4) brightness(300%); + max-width: 250px; + float: center; + /* height: 200px; */ + position: relative; + /* line-height: 200px; */ + text-align: center; + /* width: 100%; */ + margin-left: auto; + margin-right: auto; + padding-left: 10px; + padding-right: 10px; + vertical-align: middle; + /* img { + max-width: 90%; + vertical-align: middle; + } + .scaling-svg-container { + height: 0; + width: 100%; + padding: 0; + padding-bottom: 100%; + } + svg { + position: absolute; + height: 100%; + width: 100%; + left: 0; + top: 0; + } + @media (max-width: $break-big) { + height: 150px; + line-height: 150px; + } + @media (max-width: $break-small) { + height: 100px; + line-height: 100px; + }*/ + /* svg { + * vertical-align: middle; + * float:none; + * width: auto; + * height: 400px; + * padding-bottom: 100px; +}*/ } /** * Home page: Nextcloud Events */ .section--conf { - margin: 100px 0 100px 0; + margin: 100px 0 0 0; padding: 50px 0 0 0; background-image: url("../../img/headers/team.jpg"); background-size: cover; background-attachment: fixed; - background-position: center; - /* @media (max-width: $break-small) { */ - /* background-image: url('../../img/home/perfect-for-home-and-business-mobile.jpg'); */ - /* } */ -} -.section--conf .button { - margin-right: 30px; -} -@media (min-width: 1600px) { - .section--conf { - padding-top: 120px; - padding-bottom: 180px; - } -} -.section--conf .section--heading-1 { - color: white; - width: 669px; - text-shadow: 0px 0px 1px black; -} -@media (max-width: 768px) { + background-position: center; } + .section--conf .button { + margin-right: 30px; } + @media (min-width: 1600px) { + .section--conf { + padding-top: 120px; + padding-bottom: 180px; } } .section--conf .section--heading-1 { - width: 100%; - } -} -.section--conf .section--paragraph { - color: white; - width: 669px; - text-shadow: 0px 0px 1px black; -} -@media (max-width: 768px) { + color: white; + width: 669px; + text-shadow: 0px 0px 1px black; } + @media (max-width: 768px) { + .section--conf .section--heading-1 { + width: 100%; } } .section--conf .section--paragraph { - width: 90%; - padding-top: 10px; - } -} + color: white; + width: 669px; + text-shadow: 0px 0px 1px black; } + @media (max-width: 768px) { + .section--conf .section--paragraph { + width: 90%; + padding-top: 10px; } } .section--enterprise-day { margin: 100px 0 0 0; padding: 80px 0 50px 0; background-image: url("../../img/conference/enterprise-day-wide.jpg"); background-size: cover; - background-position: center; - /* @media (max-width: $break-small) { */ - /* background-image: url('../../img/home/perfect-for-home-and-business-mobile.jpg'); */ - /* } */ -} -.section--enterprise-day .btn-primary { - width: 430px; -} -@media (min-width: 1600px) { - .section--enterprise-day { - padding-top: 120px; - padding-bottom: 180px; - } -} -@media (max-width: 768px) { + background-position: center; } .section--enterprise-day .btn-primary { - width: 300px; - } - .section--enterprise-day .btn-primary .icon-arrow { - background: url(../../img/arrow_right.svg) center/contain no-repeat; - position: absolute; - width: 20px; - height: 100%; - right: 20px; - top: 2px; - } -} -.section--enterprise-day .section--heading-1 { - color: white; - width: 469px; -} -@media (max-width: 768px) { + width: 430px; } + @media (min-width: 1600px) { + .section--enterprise-day { + padding-top: 120px; + padding-bottom: 180px; } } + @media (max-width: 768px) { + .section--enterprise-day .btn-primary { + width: 300px; } + .section--enterprise-day .btn-primary .icon-arrow { + background: url(../../img/arrow_right.svg) center/contain no-repeat; + position: absolute; + width: 20px; + height: 100%; + right: 20px; + top: 2px; } } .section--enterprise-day .section--heading-1 { - width: 100%; - } -} -.section--enterprise-day .section--paragraph { - color: white; - width: 469px; -} -.section--enterprise-day .section--paragraph i { - color: white; -} -@media (max-width: 768px) { + color: white; + width: 469px; } + @media (max-width: 768px) { + .section--enterprise-day .section--heading-1 { + width: 100%; } } .section--enterprise-day .section--paragraph { - width: 90%; - padding-top: 10px; - } -} + color: white; + width: 469px; } + .section--enterprise-day .section--paragraph i { + color: white; } + @media (max-width: 768px) { + .section--enterprise-day .section--paragraph { + width: 90%; + padding-top: 10px; } } .section--compliance { - margin-top: 0px !important; -} + margin-top: 0px !important; } /** * Home page: Introducing Nextcloud X */ .right-text-grey { opacity: 0; - padding-top: 75px; -} -.right-text-grey:first-child { - padding-top: 50px; -} -@media (max-width: 768px) { - .right-text-grey { - text-align: center; - } -} + padding-top: 75px; } + .right-text-grey:first-child { + padding-top: 50px; } + @media (max-width: 768px) { + .right-text-grey { + text-align: center; } } .introducing-nc-release { padding-top: 100px; - padding-bottom: 75px; -} -@media (max-width: 768px) { - .introducing-nc-release { - padding-top: 50px; - } -} -.introducing-nc-release img { - width: 582px; - height: 474px; - display: block; - margin: 0 auto; -} -@media (max-width: 768px) { + padding-bottom: 75px; } + @media (max-width: 768px) { + .introducing-nc-release { + padding-top: 50px; } } .introducing-nc-release img { - width: 90%; - height: 90%; - } -} -.introducing-nc-release p:last-child { - margin-top: 30px; -} + width: 582px; + height: 474px; + display: block; + margin: 0 auto; } + @media (max-width: 768px) { + .introducing-nc-release img { + width: 90%; + height: 90%; } } + .introducing-nc-release p:last-child { + margin-top: 30px; } .Section-Introducing-Nextcloud { background-color: transparent; overflow: hidden; height: 200vh; position: relative; - padding-top: 130px; -} -@media (max-width: 1200px) { - .Section-Introducing-Nextcloud { - padding-top: 60px; - height: 100vh; - } -} -.Section-Introducing-Nextcloud .img_carousel { - padding-top: 100px; - position: relative; -} -@media (max-height: 800px) { + padding-top: 130px; } + @media (max-width: 1200px) { + .Section-Introducing-Nextcloud { + padding-top: 60px; + height: 100vh; } } .Section-Introducing-Nextcloud .img_carousel { - padding-top: 60px; - } -} -.Section-Introducing-Nextcloud .img_carousel img { - float: right; - width: 582px; - height: 474px; -} -@media (max-height: 800px) { - .Section-Introducing-Nextcloud .img_carousel img { - width: 490px; - height: 402px; - } -} -.Section-Introducing-Nextcloud .indicators { - -webkit-transition: all 0.5s; - transition: all 0.5s; - opacity: 1; - position: absolute; - z-index: 2; - bottom: 50vh; - right: 0; -} -@media (max-width: 768px) { + padding-top: 100px; + position: relative; } + @media (max-height: 800px) { + .Section-Introducing-Nextcloud .img_carousel { + padding-top: 60px; } } + .Section-Introducing-Nextcloud .img_carousel img { + float: right; + width: 582px; + height: 474px; } + @media (max-height: 800px) { + .Section-Introducing-Nextcloud .img_carousel img { + width: 490px; + height: 402px; } } .Section-Introducing-Nextcloud .indicators { - display: none; - } -} -.Section-Introducing-Nextcloud .indicators .btn_carousel { - margin-top: 10px; - width: 14px; - height: 14px; - color: transparent; - border: 1px solid #0082c9; - background-color: #0082c9; - border-radius: 50%; - padding: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - -webkit-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; -} -.Section-Introducing-Nextcloud .indicators .btn_carousel.active { - background-color: transparent; - -webkit-transform: scale(1); - transform: scale(1); -} + -webkit-transition: all .5s; + transition: all .5s; + opacity: 1; + position: absolute; + z-index: 2; + bottom: 50vh; + right: 0; } + @media (max-width: 768px) { + .Section-Introducing-Nextcloud .indicators { + display: none; } } + .Section-Introducing-Nextcloud .indicators .btn_carousel { + margin-top: 10px; + width: 14px; + height: 14px; + color: transparent; + border: 1px solid #0082c9; + background-color: #0082c9; + border-radius: 50%; + padding: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5); + -webkit-transition: all 250ms ease-in-out; + transition: all 250ms ease-in-out; } + .Section-Introducing-Nextcloud .indicators .btn_carousel.active { + background-color: transparent; + -webkit-transform: scale(1); + transform: scale(1); } #pinContainer { width: 100%; height: 100vh; - overflow: hidden; -} + overflow: hidden; } .panel { height: 100%; width: 100%; - position: absolute; -} + position: absolute; } /** * Home page: Stay up to date @@ -617,256 +571,194 @@ /** * Home page: perfect-for-home-and-business */ -#perfect-for-home-and-business { +.section--underyourcontrol { margin-top: 100px; padding-top: 80px; padding-bottom: 50px; padding-left: 0; padding-right: 0; background-image: url("../../img/home/perfect-for-home-and-business.jpg"); - background-size: cover; -} -@media (max-width: 768px) { - #perfect-for-home-and-business { - background-image: url("../../img/home/perfect-for-home-and-business-mobile.jpg"); - } -} -#perfect-for-home-and-business .btn-primary { - width: 430px; -} -@media (min-width: 1600px) { - #perfect-for-home-and-business { - padding-top: 120px; - padding-bottom: 180px; - } -} -@media (max-width: 768px) { - #perfect-for-home-and-business .btn-primary { - width: 300px; - } - #perfect-for-home-and-business .btn-primary .icon-arrow { - background: url(../../img/common/arrow_right.svg) center/contain no-repeat; - position: absolute; - width: 20px; - height: 100%; - right: 20px; - top: 2px; - } -} -#perfect-for-home-and-business .section--heading-1 { - width: 469px; - color: white; -} -@media (max-width: 768px) { - #perfect-for-home-and-business .section--heading-1 { + background-size: cover; } + @media (max-width: 768px) { + .section--underyourcontrol { + background-image: url("../../img/home/perfect-for-home-and-business-mobile.jpg"); } } + .section--underyourcontrol .btn-primary { + width: 430px; } + @media (min-width: 1600px) { + .section--underyourcontrol { + padding-top: 120px; + padding-bottom: 180px; } } + @media (max-width: 768px) { + .section--underyourcontrol .btn-primary { + width: 300px; } + .section--underyourcontrol .btn-primary .icon-arrow { + background: url(../../img/common/arrow_right.svg) center/contain no-repeat; + position: absolute; + width: 20px; + height: 100%; + right: 20px; + top: 2px; } } + .section--underyourcontrol .section--heading-1 { + width: 469px; + color: white; } + @media (max-width: 768px) { + .section--underyourcontrol .section--heading-1 { + color: white; + width: 100%; + text-align: left; } } + .section--underyourcontrol li { + color: white !important; + list-style-image: url("../../img/common/white-check.svg"); + list-style-position: inside; } + .section--underyourcontrol .section--paragraph { color: white; - width: 100%; - text-align: left; - } -} -#perfect-for-home-and-business li { - color: white !important; - list-style-image: url("../../img/common/white-check.svg"); - list-style-position: inside; -} -#perfect-for-home-and-business .section--paragraph { - color: white; - width: 469px; - padding-top: 5px; - padding-bottom: 5px; -} -@media (max-width: 768px) { - #perfect-for-home-and-business .section--paragraph { - width: 90%; - padding-top: 10px; - } -} + width: 469px; + padding-top: 5px; + padding-bottom: 5px; } + @media (max-width: 768px) { + .section--underyourcontrol .section--paragraph { + width: 90%; + padding-top: 10px; } } .community-icon { height: 207px; width: 177px; - margin: auto; -} -@media (max-width: 1200px) { - .community-icon { - margin: auto; - } -} + margin: auto; } + @media (max-width: 1200px) { + .community-icon { + margin: auto; } } .privacy-icon { height: 200px; width: 202px; - margin: auto; -} -@media (max-width: 1200px) { - .privacy-icon { - margin: auto; - } -} + margin: auto; } + @media (max-width: 1200px) { + .privacy-icon { + margin: auto; } } .flexibility-icon { height: 206px; width: 205px; - margin: auto; -} -@media (max-width: 1200px) { - .flexibility-icon { - margin: auto; - } -} + margin: auto; } + @media (max-width: 1200px) { + .flexibility-icon { + margin: auto; } } #why-nextcloud { - padding-top: 130px; -} + padding-top: 130px; } .news-section { position: relative; - overflow: hidden; -} -.news-section .news { - background: #0082c9; - padding-bottom: 120px; -} -.news-section .news:before { - background: url(../../img/home/pattern.svg) bottom 0 right 0/contain no-repeat; - height: 90vh; - width: 2000px; - position: absolute; - left: 50%; - background-position: bottom; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); -} -@media (max-width: 768px) { - .news-section .news .container { - width: 95%; - } -} -@media (min-width: 768px) and (max-width: 991px) { - .news-section .news .container { - width: 720px !important; - } -} -@media (min-width: 991px) and (max-width: 1005px) { - .news-section .news .container { - width: 950px !important; - } -} -.news-section .news .col-md-4 { - background: white; - margin-bottom: 90px; - width: 28%; -} -@media (max-width: 1199px) { - .news-section .news .col-md-4 { - width: 26%; - } -} -@media (max-width: 991px) { - .news-section .news .col-md-4 { - width: 90%; - margin: 0 auto; - margin-bottom: 30px; - } -} -.news-section .news .row .col-md-4 { - padding: 20px; - margin: 30px; - min-height: 500px; -} -@media (max-width: 768px) { - .news-section .news .row .col-md-4 { - margin: 30px auto; - } -} -.news-section .news h1 { - /* font-family: OpenSans; */ - text-align: center; - color: #ffffff; - margin-top: 120px; - margin-bottom: 80px; -} -.news-section .news h3 { - /* font-family: OpenSans; */ - font-size: 20px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 1.45; - text-align: left; - color: #555555; -} -.news-section .news p { - /* font-family: OpenSans; */ - font-size: 60px; - font-weight: 300; - font-style: normal; - font-stretch: normal; - line-height: 0.88; - color: #ffffff; -} -.news-section .news ul { - list-style-type: none; - padding: 0; - -webkit-padding-start: 0px; - -moz-padding-start: 0px; -} -.news-section .news li { - padding-top: 10px; - padding-bottom: 10px; - border-bottom: solid 2px #eeeeee; -} -.news-section .news a { - font-size: 18px; - font-weight: 300; - font-style: normal; - font-stretch: normal; - line-height: 1.61; - text-align: left; - color: #555555; -} + overflow: hidden; } + .news-section .news { + background: #0082c9; + padding-bottom: 120px; } + .news-section .news:before { + background: url(../../img/home/pattern.svg) bottom 0 right 0/contain no-repeat; + height: 90vh; + width: 2000px; + position: absolute; + left: 50%; + background-position: bottom; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } + @media (max-width: 768px) { + .news-section .news .container { + width: 95%; } } + @media (min-width: 768px) and (max-width: 991px) { + .news-section .news .container { + width: 720px !important; } } + @media (min-width: 991px) and (max-width: 1005px) { + .news-section .news .container { + width: 950px !important; } } + .news-section .news .col-md-4 { + background: white; + margin-bottom: 90px; + width: 28%; } + @media (max-width: 1199px) { + .news-section .news .col-md-4 { + width: 26%; } } + @media (max-width: 991px) { + .news-section .news .col-md-4 { + width: 90%; + margin: 0 auto; + margin-bottom: 30px; } } + .news-section .news .row .col-md-4 { + padding: 20px; + margin: 30px; + min-height: 500px; } + @media (max-width: 768px) { + .news-section .news .row .col-md-4 { + margin: 30px auto; } } + .news-section .news h1 { + /* font-family: OpenSans; */ + text-align: center; + color: #ffffff; + margin-top: 120px; + margin-bottom: 80px; } + .news-section .news h3 { + /* font-family: OpenSans; */ + font-size: 20px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 1.45; + text-align: left; + color: #555555; } + .news-section .news p { + /* font-family: OpenSans; */ + font-size: 60px; + font-weight: 300; + font-style: normal; + font-stretch: normal; + line-height: 0.88; + color: #ffffff; } + .news-section .news ul { + list-style-type: none; + padding: 0; + -webkit-padding-start: 0px; + -moz-padding-start: 0px; } + .news-section .news li { + padding-top: 10px; + padding-bottom: 10px; + border-bottom: solid 2px #eeeeee; } + .news-section .news a { + font-size: 18px; + font-weight: 300; + font-style: normal; + font-stretch: normal; + line-height: 1.61; + text-align: left; + color: #555555; } .stay-up-to-date { - padding: 50px 0; -} -.stay-up-to-date .section--heading-2 { - margin: 0; -} -@media (max-width: 768px) { + padding: 50px 0; } .stay-up-to-date .section--heading-2 { - text-align: left; - } -} -.stay-up-to-date .section--paragraph { - margin: 0; -} -@media (max-width: 768px) { + margin: 0; } + @media (max-width: 768px) { + .stay-up-to-date .section--heading-2 { + text-align: left; } } .stay-up-to-date .section--paragraph { - padding-top: 15px; - text-align: left; - } -} -@media (max-width: 768px) { - .stay-up-to-date .button { - float: left; - } -} + margin: 0; } + @media (max-width: 768px) { + .stay-up-to-date .section--paragraph { + padding-top: 15px; + text-align: left; } } + @media (max-width: 768px) { + .stay-up-to-date .button { + float: left; } } /* hide the image and table for the tweets */ .news .contribook_microbloguserpicture img { - width: 0px !important; -} + width: 0px !important; } .news table { - margin-left: -15px; -} + margin-left: -15px; } .revealOnScroll { - opacity: 0; -} + opacity: 0; } .section--compare { - padding-top: 70px; -} + padding-top: 70px; } /*# sourceMappingURL=home.css.map */ diff --git a/assets/css/pages/home.scss b/assets/css/pages/home.scss index 9ff53049..78546b4c 100644 --- a/assets/css/pages/home.scss +++ b/assets/css/pages/home.scss @@ -205,6 +205,78 @@ } } } + .scrollbutton a { + position: absolute; + bottom: 6px; + left: 25%; + z-index: 2; + display: inline-block; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + color: #fff; + letter-spacing: .1em; + text-decoration: none; + transition: opacity .3s; + } + .scrollbutton a:hover { + opacity: .5; + } + .scrollbutton a { + padding-top: 80px; + } + .scrollbutton a span { + position: absolute; + top: 0; + left: 50%; + width: 24px; + height: 24px; + margin-left: -12px; + border-left: 1px solid #fff; + border-bottom: 1px solid #fff; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-animation: sdb07 2s infinite; + animation: sdb07 2s infinite; + opacity: 0; + box-sizing: border-box; + } + .scrollbutton a span:nth-of-type(1) { + -webkit-animation-delay: 0s; + animation-delay: 0s; + } + .scrollbutton a span:nth-of-type(2) { + top: 16px; + -webkit-animation-delay: .15s; + animation-delay: .15s; + } + .scrollbutton a span:nth-of-type(3) { + top: 32px; + -webkit-animation-delay: .3s; + animation-delay: .3s; + } + @-webkit-keyframes sdb07 { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + @keyframes sdb07 { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + } @@ -221,6 +293,52 @@ padding-top: 39px; } +.section--products { + margin: 0 0 0 0; + padding: 90px 0 70px 0; +/* background-color: #eee; */ + .row { + margin-bottom: 10px; + } + img { + padding: 20px; + } + .description { + min-height: 100px; + margin: 0 20px; + .title { + display: block; + padding: 5px 10px 0 0; + font-size: 18px; + /* color: white; */ + .logo { + width: 65px; + min-height: 25px; + float:left; + vertical-align: middle; + img { + margin-top: 0px; + padding: 4px 5px 0 0; + height: 60px; + width: 60px; + } + } + .text { + line-height: 1; + padding: 10px 0 10px 0; + strong { + line-height: 1.2; + font-weight: normal; + font-size: 22px; + } + small { + opacity: 0.8; + } + } + } + } +} + .section--why { padding-bottom: 80px; a { @@ -297,8 +415,8 @@ } .section--customers { - padding-top: 130px; - padding-bottom: 110px; + padding-top: 60px; + padding-bottom: 90px; position: relative; .container { } @@ -306,13 +424,14 @@ margin-top: 50px; } .customer { + margin-top: 30px; position: relative; padding-left: 10px; padding-right: 10px; .customer-logo { -/* -webkit-filter: saturate(0%) contrast(.35) brightness(130%); */ -/* filter: saturate(0%) contrast(.35) brightness(130%); */ + -webkit-filter: saturate(0%) contrast(0.4) brightness(400%); + filter: saturate(0%) contrast(0.4) brightness(300%); max-width: 250px; float: center; @@ -369,15 +488,12 @@ */ .section--conf { - margin: 100px 0 100px 0; + margin: 100px 0 0 0; padding: 50px 0 0 0; background-image: url('../../img/headers/team.jpg'); background-size: cover; background-attachment: fixed; background-position: center; - /* @media (max-width: $break-small) { */ - /* background-image: url('../../img/home/perfect-for-home-and-business-mobile.jpg'); */ - /* } */ .button { margin-right: 30px; @@ -414,9 +530,6 @@ background-image: url('../../img/conference/enterprise-day-wide.jpg'); background-size: cover; background-position: center; - /* @media (max-width: $break-small) { */ - /* background-image: url('../../img/home/perfect-for-home-and-business-mobile.jpg'); */ - /* } */ .btn-primary { width: 430px; @@ -597,7 +710,7 @@ overflow: hidden; * Home page: perfect-for-home-and-business */ -#perfect-for-home-and-business { +.section--underyourcontrol { margin-top: 100px; padding-top: 80px; padding-bottom: 50px; diff --git a/assets/css/pages/pressrelease.css b/assets/css/pages/pressrelease.css index 56dcfba6..4836a163 100644 --- a/assets/css/pages/pressrelease.css +++ b/assets/css/pages/pressrelease.css @@ -30,25 +30,15 @@ position: absolute; } .generic-background { - background: -webkit-gradient(linear, left top, left bottom, from(#0082c9), color-stop(100%, #3e9ed8), to(#d8d8d8)); - background: linear-gradient(to bottom, #0082c9, #3e9ed8 100%, #d8d8d8); - padding: 0; - border-radius: 0 !important; - margin-bottom: 0px; + background: url("../../img/headers/background-transparent.png") no-repeat; + background-color: #0082c9; + background-position: center; + background-size: cover; height: 30vh; - min-height: 400px; - max-height: 600px; } - .generic-background .pattern { - width: 100%; - height: 100%; - opacity: 0.1; - background: url("../../img/headers/generic.png") no-repeat; - background-size: cover; - background-position: center; } - @media (max-width: 991px) { - .generic-background { - min-height: 200px; - max-height: 400px; } } + min-height: 300px; + max-height: 400px; } + .generic-background .topheader { + margin-top: 70px; } /* General */ .section--pressrelease { diff --git a/assets/css/pages/pressrelease.scss b/assets/css/pages/pressrelease.scss index 1fffd10b..8959a916 100644 --- a/assets/css/pages/pressrelease.scss +++ b/assets/css/pages/pressrelease.scss @@ -4,29 +4,15 @@ .generic-background { - background: -webkit-gradient(linear, left top, left bottom, from($nextcloud-blue), color-stop(100%, #3e9ed8), to(#d8d8d8)); - background: linear-gradient(to bottom, $nextcloud-blue, #3e9ed8 100%, #d8d8d8); - padding: 0; - border-radius: 0 !important; - margin-bottom: 0px; + background: url('../../img/headers/background-transparent.png') no-repeat; + background-color: #0082c9; + background-position: center; + background-size: cover; height: 30vh; - min-height: 400px; - max-height: 600px; - - .pattern { - width:100%; - height:100%; - opacity: 0.1; - background: url('../../img/headers/generic.png') no-repeat; - background-size: cover; - background-position: center; - - @media (max-width: $break-big) { - } - } - @media (max-width: $break-big) { - min-height: 200px; - max-height: 400px; + min-height: 300px; + max-height: 400px; + .topheader { + margin-top: 70px; } } |