418 lines
6.9 KiB
SCSS
418 lines
6.9 KiB
SCSS
//General styles
|
|
html {
|
|
a {
|
|
text-decoration: none;
|
|
color:$softblack;
|
|
}
|
|
* {
|
|
font-family:Open Sans,sans-serif !important;
|
|
font-weight:100;
|
|
}
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
.row {
|
|
max-width:100%;
|
|
}
|
|
}
|
|
|
|
//Used breakpoints
|
|
//1023
|
|
//800
|
|
//640
|
|
//480
|
|
|
|
|
|
.response-band {
|
|
position:relative;
|
|
width:40%;
|
|
float:right;
|
|
margin-right:8%;
|
|
@media all and (max-width: 1023px){
|
|
width:55%;
|
|
margin:0;
|
|
}
|
|
@media all and (max-width: 639px){
|
|
width:65%;
|
|
margin:0;
|
|
}
|
|
}
|
|
|
|
.bluebutton {
|
|
cursor:pointer;
|
|
display:inline-block;
|
|
width:150px;
|
|
@media all and(max-width:400px){width:135px;}
|
|
line-height:45px;
|
|
text-align: center;
|
|
font-size:1.1em;
|
|
font-weight:600;
|
|
color:$softwhite;
|
|
background:$htblue;
|
|
border:2px solid transparent !important;
|
|
margin-top:1px;
|
|
transition: color .3s ease,background .3s ease,border .3s ease, border-radius .3s ease;
|
|
&:hover{
|
|
background:transparent;
|
|
border:2px solid $htblue !important;
|
|
border-radius:9px;
|
|
&.mtb {
|
|
color:$softblack;
|
|
}
|
|
}
|
|
}
|
|
.prev-next {
|
|
.arrow {
|
|
cursor: pointer;
|
|
position:absolute;
|
|
top:55vh;
|
|
height:60px;
|
|
width:60px;
|
|
border-radius:100%;
|
|
text-align: center;
|
|
opacity: 0.6;
|
|
transition: transform 0.3s linear;
|
|
z-index:2;
|
|
}
|
|
.prev {
|
|
left:40px;
|
|
background:url(/img/prev-arrow.svg) center/cover;
|
|
}
|
|
.next {
|
|
right:40px;
|
|
background:url(/img/next-arrow.svg) center/cover;
|
|
}
|
|
@media all and(orientation:portrait) {
|
|
.prev{transform:rotateX(90deg) !important}
|
|
.next{transform:rotateX(90deg) !important}
|
|
}
|
|
@media all and(max-width:1440px) {
|
|
.prev{transform:rotateX(90deg) !important}
|
|
.next{transform:rotateX(90deg) !important}
|
|
}
|
|
.hidden {
|
|
&.prev{transform:rotateX(90deg) !important}
|
|
&.next{transform:rotateX(90deg) !important}
|
|
}
|
|
|
|
}
|
|
.snap-top-menu {
|
|
@media all and(min-height:900px){
|
|
margin-top:60px;
|
|
}
|
|
|
|
padding:0 0 0 0;
|
|
background:$softwhite;
|
|
.col{
|
|
width:33%;
|
|
margin:0 0;
|
|
display:inline-block;
|
|
text-align:center;
|
|
height:40px;
|
|
padding:0;
|
|
a {
|
|
position:relative;
|
|
line-height:40px;
|
|
vertical-align:middle;
|
|
font-size:1.5em;
|
|
text-transform:uppercase;
|
|
img {display:none;}
|
|
@media all and (min-width:800px) {
|
|
padding-left:35px;
|
|
&.entertainment{background:url(/img/icon-entertainment-black.svg) left/contain no-repeat;}
|
|
&.security{background:url(/img/icon-security-black.svg) left/contain no-repeat;}
|
|
&.integration{background:url(/img/icon-integration-black.svg) left/contain no-repeat;}
|
|
}
|
|
@media all and (max-width:600px) {font-size:20px;}
|
|
@media all and (max-width:500px) {font-size:15px;}
|
|
@media all and (max-width:400px) {font-size:12px;}
|
|
@media all and (max-width:321px) {font-size:10px;}
|
|
}
|
|
}
|
|
&.fixed {
|
|
position:fixed;
|
|
top:0;
|
|
width:100%;
|
|
}
|
|
&.snap-top-persistant {
|
|
z-index:9;
|
|
@include std-shadow;
|
|
&:not(.fixed){
|
|
display:none;
|
|
}
|
|
}
|
|
&.snap-top-static.hidden {
|
|
opacity:0;
|
|
}
|
|
}
|
|
|
|
//Header
|
|
header {
|
|
top:0;
|
|
position:absolute;
|
|
@media all and(min-height:900px){
|
|
position:fixed;
|
|
}
|
|
|
|
@include std-shadow;
|
|
background:$softblack;
|
|
width:100%;
|
|
height:60px;
|
|
padding-right:3%;
|
|
padding-left:3%;
|
|
z-index:10;
|
|
|
|
nav {
|
|
> ul {
|
|
float:right;
|
|
@include wipe-list;
|
|
|
|
> li {
|
|
float:left;
|
|
padding: 0 15px;
|
|
vertical-align:-50%;
|
|
|
|
&.current > a:before {
|
|
opacity:1;
|
|
}
|
|
|
|
> a {
|
|
font-variant:small-caps;
|
|
font-size: 1.1em;
|
|
font-weight:600 !important;
|
|
position:relative;
|
|
&:before {
|
|
position:absolute;
|
|
bottom:-3px;
|
|
left:5px;
|
|
right:5px;
|
|
content:" ";
|
|
border-bottom:1.7px solid $softwhite;
|
|
opacity:0;
|
|
transition:opacity 0.5s ease;
|
|
}
|
|
}
|
|
|
|
a {
|
|
font-weight: 600 !important;
|
|
font-size: 1.1em;
|
|
font-variant: small-caps;
|
|
text-transform: lowercase;
|
|
line-height:55px;
|
|
&:hover {
|
|
color:$htblue-solid !important;
|
|
&:before{border-bottom:1.7px solid $htblue-solid;}
|
|
}
|
|
}
|
|
&:first-child { padding-left: 0; }
|
|
ul {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.burger {display:none;}
|
|
.coverer {
|
|
width:0px;height:0px;
|
|
transition:background 1s ease;
|
|
}
|
|
@media all and(max-width:800px){
|
|
.burger {
|
|
display:block;
|
|
height:60px;
|
|
position:absolute;
|
|
height:60px;
|
|
width:50px;
|
|
right:2%;
|
|
}
|
|
&.visible {
|
|
position:fixed;
|
|
nav > ul{right:0;}
|
|
|
|
.coverer{
|
|
display:block;
|
|
position:fixed;
|
|
width:100%;
|
|
height:100%;
|
|
top:60px;
|
|
left:0;
|
|
background:$transblack;
|
|
}
|
|
}
|
|
nav {
|
|
>ul {
|
|
z-index:12;
|
|
display:block;
|
|
position:fixed;
|
|
top:60px;
|
|
height:100%;
|
|
background:$softerblack;
|
|
right:-100%;
|
|
transition:right 0.5s ease;
|
|
min-width:200px;
|
|
width:25%;
|
|
>li {
|
|
margin:0;
|
|
text-align: center;
|
|
width:100%;
|
|
padding:0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.company {
|
|
float:left;
|
|
h1 {
|
|
img {
|
|
height:40px;
|
|
width:40px;
|
|
vertical-align: -11px;
|
|
margin-right:7px;
|
|
border-radius: 15%;
|
|
}
|
|
margin:0;
|
|
line-height: 60px;
|
|
font-size:1.6em;
|
|
@media all and(max-width:400px){
|
|
font-size: 1.3em;
|
|
}
|
|
}
|
|
}
|
|
|
|
* {
|
|
color:$softwhite !important;
|
|
}
|
|
}
|
|
|
|
|
|
//Default body styles
|
|
html,body{height:100%;width:100%;position:relative;}
|
|
body {
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
> main {
|
|
overflow-x: hidden;
|
|
overflow-y: visible;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
min-height: calc(100% - 60px);
|
|
> .page {
|
|
position:absolute;
|
|
&:not(.servicepage){
|
|
margin-top:60px;
|
|
}
|
|
@media all and(min-height:900px){
|
|
margin-top:60px;
|
|
}
|
|
overflow-y: visible;
|
|
width: 100%;
|
|
height:1%;
|
|
min-height: 100%;
|
|
min-height: calc(100% - 60px);
|
|
}
|
|
}
|
|
&.anim-fade .page {
|
|
&.animate {
|
|
transition: right 0.5s ease-out, opacity 0.5s linear;
|
|
position: absolute;
|
|
right:0;
|
|
}
|
|
&.leave {
|
|
|
|
}
|
|
&.leave.active {
|
|
opacity: 0;
|
|
}
|
|
&.enter {
|
|
opacity: 0;
|
|
}
|
|
&.enter.active, &.leave {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&.anim-neg .page {
|
|
&.animate {
|
|
transition: right 0.5s ease-out, opacity 0.5s linear;
|
|
position: absolute;
|
|
}
|
|
&.leave {
|
|
right:-100%;
|
|
}
|
|
&.leave.active {
|
|
right:-100%;
|
|
}
|
|
&.enter {
|
|
right:100%;
|
|
}
|
|
&.enter.active, &.leave {
|
|
right:0;
|
|
}
|
|
}
|
|
&.anim-pos .page {
|
|
&.animate {
|
|
transition: right 0.5s ease-out, opacity 0.5s linear;
|
|
position: absolute;
|
|
}
|
|
&.leave {
|
|
right:100%;
|
|
}
|
|
&.leave.active {
|
|
right:100%;
|
|
}
|
|
&.enter {
|
|
right:-100%;
|
|
}
|
|
&.enter.active, &.leave {
|
|
right:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Footer
|
|
footer {
|
|
background:$softblack;
|
|
border-top:2px solid $softwhite;
|
|
padding-top:35px;
|
|
padding-bottom:35px;
|
|
padding-left:2%;
|
|
*:not(.company-name):not(strong) {font-weight:500;}
|
|
h3, h2, *:not(li) > a {
|
|
color:$softwhite;
|
|
}
|
|
|
|
h3, h2 {
|
|
font-size:1.2em;
|
|
}
|
|
|
|
ul {
|
|
@include wipe-list;
|
|
> li > a {
|
|
color: $footeracolor;
|
|
font-size:0.9em;
|
|
}
|
|
}
|
|
|
|
.logo-to-the-left {
|
|
margin-top:1rem;
|
|
|
|
.company-name {
|
|
font-size:1.5em;
|
|
}
|
|
.copyright {
|
|
font-size:0.75em;
|
|
}
|
|
img {
|
|
height:32px;
|
|
width:32px;
|
|
vertical-align: -30%;
|
|
border-radius:15%;
|
|
margin-right:3px;
|
|
}
|
|
}
|
|
* {
|
|
text-align: left !important;
|
|
}
|
|
}
|
|
|