+
Security
Whole home security is all about correct coverage, ensuring your home has the right detection mechanisms for the property type. The security systems we supply, install and look after are designed to interact with one another, offering unbeatable protection whilst keeping you fully informed.
diff --git a/src/js/views/entertainment-slider.js b/src/js/views/entertainment-slider.js
index 8c827a9..b50d5f7 100644
--- a/src/js/views/entertainment-slider.js
+++ b/src/js/views/entertainment-slider.js
@@ -43,16 +43,26 @@ module.exports = {
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
- if(window.innerHeight > 900 && window.innerWidth > 1024 && !isIE()){
- this.$el.removeClass('fade-mode')
- }
var thisView = this;
- $( window ).resize(function() {
- if(window.innerHeight > 900 && window.innerWidth > 1024 && !isIE()){
- thisView.$el.removeClass('fade-mode')
+ if(window.innerHeight > 900 && window.innerWidth > 1024){
+ thisView.$el.removeClass('fade-mode').removeClass('flip-mode')
+ }else{
+ if(!isIE()) {
+ thisView.$el.removeClass('fade-mode').addClass('flip-mode')
}else{
thisView.$el.addClass('fade-mode')
}
+ }
+ $( window ).resize(function() {
+ if(window.innerHeight > 900 && window.innerWidth > 1024){
+ thisView.$el.removeClass('fade-mode').removeClass('flip-mode')
+ }else{
+ if(!isIE()) {
+ thisView.$el.removeClass('fade-mode').addClass('flip-mode')
+ }else{
+ thisView.$el.addClass('fade-mode')
+ }
+ }
})
}
};
diff --git a/src/sass/_content.scss b/src/sass/_content.scss
index d4f836b..b98323a 100644
--- a/src/sass/_content.scss
+++ b/src/sass/_content.scss
@@ -75,6 +75,9 @@
.page.process {
@include backgrounder("process-background", "jpg", "no-repeat center/cover");
+ @media all and(orientation:portrait){
+ @include backgrounder("process-background-portrait", "jpg", "no-repeat center/cover");
+ }
width:100%;
min-height: 125%;
@@ -131,9 +134,10 @@
.page.services {
h1 {
+ margin-top:50px;
text-align:center;
text-transform: uppercase;
- font-size: 2.7em;
+ font-size: 2.5em;
span {
@include underlineH(25%, $softblack);
}
@@ -193,8 +197,9 @@
position:absolute;
}
.splash-text {
+ *{@include std-shadow-text;}
position:absolute;
- bottom:23%;
+ bottom:20%;
left:0;
right:0;
text-align: center;
@@ -224,6 +229,19 @@
}
}
}
+ .content-row {
+ .intro{
+ h2 {
+ font-weight:600;
+ color:$softerwhite;
+ }
+ p {
+ font-weight:600;
+ color:$softerwhite;
+ }
+ margin-bottom:5%;
+ }
+ }
}
.entertainment {
@@ -234,16 +252,20 @@
background:$softwhite;
border:1px solid $softwhite;
.tt {
- height:320px;
+ height:325px;
border:1px solid transparent;
padding:0;
cursor:pointer;
.front, .back {
- height:320px;
+ height:325px;
position:absolute;
height:100%;
width:100%;
overflow:hidden;
+ p{
+ padding-left:2%;
+ padding-right:2%;
+ }
}
.back *{color:$softblack;}
.front {
@@ -336,58 +358,44 @@
.t6:hover .front {opacity:0;}
}
.six-display.flip-mode {
- .flip-container {
- perspective: 1000;
- }
- .flip-container:hover .flipper, .flip-container.hover .flipper {
- transform: rotateY(180deg);
- }
+ .slide-container {display:none;}
+ .flip-container {perspective: 1000;}
+ // .flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}
+ // .vertical.flip-container:hover .flipper {transform: rotateX(-180deg);}
+ &.t1-active {.t1 .flipper{transform: rotateY(180deg);}}
+ &.t2-active {.t2 .flipper{transform: rotateX(-180deg);}}
+ &.t3-active {.t3 .flipper{transform: rotateY(180deg);}}
+ &.t4-active {.t4 .flipper{transform: rotateX(-180deg);}}
+ &.t5-active {.t5 .flipper{transform: rotateY(180deg);}}
+ &.t6-active {.t6 .flipper{transform: rotateX(-180deg);}}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
-
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
-
}
.front, .back {
backface-visibility: hidden;
-
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
- /* for firefox 31 */
transform: rotateY(0deg);
}
- .back {
- transform: rotateY(180deg);
- }
+ .back {transform: rotateY(180deg);}
+ .vertical.flip-container {position: relative;}
+ .vertical .back {transform: rotateX(180deg);}
+ .vertical.flip-container .flipper {transform-origin: 100% 50%; /* half of height */}
- .vertical.flip-container {
- position: relative;
- }
-
- .vertical .back {
- transform: rotateX(180deg);
- }
-
- .vertical.flip-container .flipper {
- transform-origin: 100% 50%; /* half of height */
- }
-
- .vertical.flip-container:hover .flipper {
- transform: rotateX(-180deg);
- }
}
- .six-display {
+ .six-display:not(.flip-mode) {
.slide-container {
padding:0;
overflow:hidden;
@@ -398,6 +406,8 @@
position:absolute;
width:100%;
transition:left 0.3s;
+ padding-left:9%;
+ padding-right:9%;
h3{
text-transform: uppercase;
span{@include underlineH(25%, $softblack);}
@@ -509,16 +519,15 @@
* {color:$softblack;}
h3 {
@include underlineH(40%, $softblack);
- margin-bottom:5%;
+ margin-bottom:9%;
}
}
- .ff3 {background:url(/img/ff3.jpg) no-repeat center/cover;}
- .ff4 {background:url(/img/ff4.jpg) no-repeat center/cover;}
+ .ff3 {background:url(/img/ff3.jpg) no-repeat top/cover;}
+ .ff4 {background:url(/img/ff4.jpg) no-repeat top left/cover;}
.how-we-build {
background:$softwhite;
img {
- margin-top:50px;
width:50px;
height:50px;
border-radius:5px;
@@ -527,7 +536,8 @@
* {color:$softblack;}
h3{font-size:3.5em;}
h4{font-size:2em;margin-bottom:50px;}
- h5{font-size:1.5em;}
+ h5{font-size:1.5em;margin-top:10px;}
+ >.col {margin-bottom:25px;}
}
.whole-home-control {
background:url(/img/room-integration.jpg) center/cover no-repeat;
@@ -538,6 +548,14 @@
padding:3%;
h3 {
font-size:2.7em;
+ @include std-shadow-text;
+ }
+ h4 {
+ font-size:1.9em;
+ @include std-shadow-text;
+ }
+ p {
+ max-width:90%;
}
.ipad {
min-height:450px;
@@ -546,7 +564,7 @@
top:0;
margin-top:50px;
transition:top 1s;
- width:80%;
+ width:95%;
}
}
}
@@ -627,13 +645,13 @@
text-align: left;
h2 {
font-weight:100;
- font-size:2.7em;
+ font-size:2.5em;
margin-bottom:50px;
}
*{color:$softblack;}
}
.bluebutton {
- margin-top:100px;
+ margin-top:80px;
}
}
}
@@ -644,10 +662,11 @@
//@include backgrounder("markets-background-header", "jpg", "no-repeat top/cover");
@include std-shadow-in;
background:url(../img/markets-background-full.jpg) no-repeat bottom/cover;
- padding:4%;
+ padding:3.5%;
text-align: center;
h1,a{color:$softwhite;font-weight:600;}
- h1{@include std-shadow-text;font-size:2.7em;}
+ h1{@include std-shadow-text;font-size:2.2em;}
+
.slide-picker {
@include std-shadow;
margin:auto;
@@ -664,8 +683,8 @@
line-height:40px;
border-radius: 9px;
font-weight:600;
- @media all and (max-width:400px){
- width:50%;
+ @media all and (max-width:450px){
+ width:80%;
}
&.active {
background:$hardblue;
@@ -679,11 +698,15 @@
position:relative;
.slide {
opacity:0;
- transition: opacity 1s ease,z-index 0s linear 1s;
+ transition: opacity 0.5s ease,z-index 0s linear 0.5s,transform 0.2s;
+ h2{font-weight:600;}
+ .bluebutton{margin-bottom:5px;}
&.homeowners,&.developers {position:absolute;top:0;}
+ transform: scalex(98/100) scaley(98/100);
&.active {
opacity:1;
z-index:1;
+ transform: scalex(1) scaley(1);
}
}
}
@@ -697,8 +720,7 @@
}
}
h1 {
- font-size:2.7em;
- margin-bottom:50px;
+ font-size:2.5em;
strong {
color: $htblue;
font-weight: 500;
@@ -717,15 +739,17 @@
bottom:0;
padding:2%;
color:$softwhite;
- font-size:2.7em;
+ font-size:2.5em;
}
}
.testimonials {
padding:5%;
p {font-style: italic;}
.prevbtn,.nextbtn {
- width:30px;
- height:30px;
+ width:40px;
+ height:40px;
+ cursor:pointer;
+ margin-bottom:20px;
@media all and(min-width:640px){
position:absolute;
top:50%;
@@ -737,7 +761,7 @@
@media all and(min-width:640px){right:-60px;}
}
.prevbtn {
- float:right;
+ float:left;
@media all and(min-width:640px){left:-60px;}
}
}
diff --git a/src/sass/_layout.scss b/src/sass/_layout.scss
index 1e34e72..6cb5bce 100644
--- a/src/sass/_layout.scss
+++ b/src/sass/_layout.scss
@@ -65,7 +65,7 @@ html {
.arrow {
cursor: pointer;
position:absolute;
- top:50vh;
+ top:55vh;
height:60px;
width:60px;
border-radius:100%;
@@ -102,13 +102,14 @@ html {
}
padding:0 0 0 0;
- background:$softerwhite;
+ background:$softwhite;
.col{
width:33%;
margin:0 0;
display:inline-block;
text-align:center;
height:40px;
+ padding:0;
a {
position:relative;
line-height:40px;
@@ -116,15 +117,16 @@ html {
font-size:1.5em;
text-transform:uppercase;
img {display:none;}
- @media all and (max-width:640px) {
- font-size:3.5vw;
- }
@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 {
@@ -134,6 +136,7 @@ html {
}
&.snap-top-persistant {
z-index:9;
+ @include std-shadow;
&:not(.fixed){
display:none;
}
@@ -198,6 +201,7 @@ header {
line-height:55px;
&:hover {
color:$htblue-solid !important;
+ &:before{border-bottom:1.7px solid $htblue-solid;}
}
}
&:first-child { padding-left: 0; }