-
-
Control
-
Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.
-
-
-
Control
-
Simple, yet powerful
+
+
+
Control
+
Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.
+
+
+
Control
+
Simple, yet powerful
+
-
Click any of the categories above
+ Click any of the categories above
-
Audio Visual
+
Audio Visual
From high fidelity audio to Ultra HD video, our team have a wealth of experience in supplying, installing and supporting the very best whole-home audio visual systems on the market. Ease of operation is an integral part of every setup, whilst maintaining a clean and unobtrusive design that will allow you to experience music and film exactly as the creators intended.
-
Multiroom Audio
+
Multiroom Audio
The ability to move freely around your home whilst listening to your favourite music is a fantastic addition to any property. Seamless incorporation of audio equipment with wireless functionality provides a refined listening experience that’s extremely simple to use, and enjoyable to share with friends and family.
-
Media
+
Media
The things we watch, listen to and share with friends and family define personal entertainment. We believe that these things should be available all the time and everywhere you go, and as such, develop our media distribution systems to present your favourite digital content, all around your home, at the touch of a button.
-
Bespoke Design
+
Bespoke Design
All of our entertainment services require detailed custom planning and support, but if you have something extraordinary in mind, we can work with you to make this a reality, the only limit is your imagination. Delivery has to be met with perfection, minimising spatial presence and maximising user enjoyment.
-
Cinema
+
Cinema
Our immersive media rooms combine awe-inspiring visuals with breathtaking audio to make sure you see every detail and feel every moment. By working with the finest suppliers of cinema equipment, perfectly suited to your budget, our team can deliver a system that not only impresses, but defies belief.
-
Control
+
Control
Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.
diff --git a/src/js/app.js b/src/js/app.js
index c1e2c7f..e18a3ec 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -16,5 +16,6 @@ $(function() {
Backbone.history.start({ silent: true, pushState: true });
$(document.head).append('')
+ console.log(app)
});
diff --git a/src/js/views/entertainment-slider.js b/src/js/views/entertainment-slider.js
index 3942d13..25d38ad 100644
--- a/src/js/views/entertainment-slider.js
+++ b/src/js/views/entertainment-slider.js
@@ -28,5 +28,16 @@ module.exports = {
removeClass('t5-active').
removeClass('t6-active').
addClass(name + '-active')
+
+ //Scroll into view
+ if(window.innerHeight > 900){
+ $pct = $('.slide-container');
+ var $win = $('body,html,main');
+ var minScrollVal = $pct.offset().top + 200 - window.innerHeight;
+ $win.animate({scrollTop: minScrollVal}, 500)
+ }
+ },
+ initialize: function(){
+ this.$el.removeClass('fade-mode')
}
};
diff --git a/src/js/views/index.js b/src/js/views/index.js
index f80f170..e72e427 100644
--- a/src/js/views/index.js
+++ b/src/js/views/index.js
@@ -9,5 +9,6 @@ module.exports = {
EntertainmentSlider: require('./entertainment-slider'),
PrevNext: require('./prev-next'),
Scroll2Me: require('./scroll2me'),
- BurgerHover: require('./burger-hover')
+ BurgerHover: require('./burger-hover'),
+ TestimonialSlide: require('./testimonial-slide')
};
diff --git a/src/js/views/prev-next.js b/src/js/views/prev-next.js
index d973464..5d6fa0e 100644
--- a/src/js/views/prev-next.js
+++ b/src/js/views/prev-next.js
@@ -44,15 +44,17 @@ module.exports = {
},
onRouteChange: function(route, params)
{
- var path = "/" + params[0];
+ var path = "/" + (params[0] || "");
if(this.notVisibleOn.indexOf(path) != -1) //If this is a subpage to services
this.$el.hide()
else
this.$el.show()
+ console.log(this.lastPath)
+
//Valet shit
- if((this.notVisibleOn.indexOf(path) != -1 || path == '/services') && (this.notVisibleOn.indexOf(this.lastPath) != -1 || this.lastPath == '/services'))
+ if((this.notVisibleOn.indexOf(path) != -1 || path == '/services') && (this.notVisibleOn.indexOf(this.lastPath) != -1 || this.lastPath == '/services' || this.lastPath == '/'))
{
$(document.body).removeClass('anim-fade anim-neg anim-pos')
$(document.body).addClass('anim-fade')
diff --git a/src/js/views/snap-top.js b/src/js/views/snap-top.js
index f8d9af4..c880bc3 100644
--- a/src/js/views/snap-top.js
+++ b/src/js/views/snap-top.js
@@ -15,7 +15,7 @@ module.exports = {
thisView.$el.addClass('fixed')
$sts.addClass('hidden')
}
- else {
+ else if(!thisView.blockRemove){
thisView.$el.removeClass('fixed')
$sts.removeClass('hidden')
}
@@ -31,7 +31,9 @@ module.exports = {
this.forceHidden = false;
if(params[0] == 'services/integration' || params[0] == 'services/security' || params[0] == 'services/entertainment'){
var thisView = this;
- setTimeout(function(){thisView.$el.addClass('fixed')},500)
+ thisView.blockRemove = true;
+ thisView.$el.addClass('fixed')
+ setTimeout(function(){thisView.blockRemove = false},1000)
}else{
this.$el.removeClass('fixed')
}
diff --git a/src/raster/customers-say.jpg b/src/raster/customers-say.jpg
index aa9c586..d9c66f0 100644
Binary files a/src/raster/customers-say.jpg and b/src/raster/customers-say.jpg differ
diff --git a/src/sass/_content.scss b/src/sass/_content.scss
index b8f137d..a06c089 100644
--- a/src/sass/_content.scss
+++ b/src/sass/_content.scss
@@ -75,8 +75,8 @@
.page.process {
@include backgrounder("process-background", "jpg", "no-repeat center/cover");
- height:1%;
width:100%;
+ min-height: 125%;
.process-band {
@include std-shadow;
@@ -98,7 +98,7 @@
line-height:70px;
text-align:center;
text-transform:uppercase;
- @include underlineH(33%, $softwhite);
+ @include underlineH(40%, $softwhite);
}
}
@@ -133,6 +133,7 @@
h1 {
text-align:center;
text-transform: uppercase;
+ font-size: 2.7em;
span {
@include underlineH(25%, $softblack);
}
@@ -145,7 +146,6 @@
clear:both;
@include std-shadow-in;
-
&.cinema {@include backgrounder("services-home-background-cinema", "jpg", "center/cover no-repeat");}
&.audio {@include backgrounder("services-home-background-audio", "jpg", "center/cover no-repeat");}
&.security {@include backgrounder("services-home-background-security", "jpg", "center/cover no-repeat");}
@@ -240,21 +240,24 @@
height:320px;
border:1px solid $softwhite;
padding:0;
+ cursor:pointer;
.front, .back {
height:320px;
position:absolute;
height:100%;
width:100%;
+ overflow:hidden;
}
.back *{color:$softblack;}
.front {
h3, p{margin:0;background:$transblack;}
h3 {
- margin-top:100px;
- padding-top:20px;
+ margin-top:0;
+ padding-top:120px;
+ text-transform: uppercase;
}
p {
- padding-bottom:20px;
+ padding-bottom:150px;
}
}
&.t1 .front{background:url(/img/t1.jpg) no-repeat center/cover;}
@@ -264,45 +267,107 @@
&.t5 .front{background:url(/img/t5.jpg) no-repeat center/cover;}
&.t6 .front{background:url(/img/t6.jpg) no-repeat center/cover;}
}
- }
-
- .six-display.flip-mode {
- .slide-container {display:none;}
- .back,.front {
- //Flip animation
- backface-visibility:hidden;
- transform-style: preserve-3d;
- transition:transform 0.3s ease;
- transform:rotateX(0deg) rotateY(0deg);
+ .hover-wrap:hover{
+ .tt:hover {
+ h3 {
+ margin-top:100px;
+ padding-top:20px;
+ }
+ p {
+ padding-bottom:20px;
+ }
+ }
}
- .t1 .back,.t3 .back,.t5 .back {transform:rotateX(180deg);}
- .t2 .back,.t4 .back,.t6 .back {transform:rotateY(180deg);}
&.t1-active {
- .t1 .front {transform:rotateX(180deg);}
- .t1 .back {transform:rotateX(0deg);}
+ .hover-wrap:not(:hover){
+ .t1{
+ h3{margin-top:100px;padding-top:20px;}
+ p{padding-bottom:20px;}
+ }
+ }
}
&.t2-active {
- .t2 .front {transform:rotateY(180deg);}
- .t2 .back {transform:rotateY(0deg);}
+ .hover-wrap:not(:hover){
+ .t2{
+ h3{margin-top:100px;padding-top:20px;}
+ p{padding-bottom:20px;}
+ }
+ }
}
&.t3-active {
- .t3 .front {transform:rotateX(180deg);}
- .t3 .back {transform:rotateX(0deg);}
+ .hover-wrap:not(:hover){
+ .t3{
+ h3{margin-top:100px;padding-top:20px;}
+ p{padding-bottom:20px;}
+ }
+ }
}
&.t4-active {
- .t4 .front {transform:rotateY(180deg);}
- .t4 .back {transform:rotateY(0deg);}
+ .hover-wrap:not(:hover){
+ .t4{
+ h3{margin-top:100px;padding-top:20px;}
+ p{padding-bottom:20px;}
+ }
+ }
}
&.t5-active {
- .t5 .front {transform:rotateX(180deg);}
- .t5 .back {transform:rotateX(0deg);}
+ .hover-wrap:not(:hover){
+ .t5{
+ h3{margin-top:100px;padding-top:20px;}
+ p{padding-bottom:20px;}
+ }
+ }
}
&.t6-active {
- .t6 .front {transform:rotateY(180deg);}
- .t6 .back {transform:rotateY(0deg);}
+ .hover-wrap:not(:hover){
+ .t6{
+ h3{margin-top:100px;padding-top:20px;}
+ p{padding-bottom:20px;}
+ }
+ }
}
}
+ @media all and(max-height: 900px){
+ .six-display:not(.fade-mode) {
+ .slide-container {display:none;}
+ .back,.front {
+ //Flip animation
+ backface-visibility:hidden;
+ transform-style: preserve-3d;
+ transition:transform 0.3s ease;
+ transform:rotateX(0deg) rotateY(0deg);
+ }
+ .t1 .back,.t3 .back,.t5 .back {transform:rotateX(180deg);}
+ .t2 .back,.t4 .back,.t6 .back {transform:rotateY(180deg);}
+ &.t1-active {
+ .t1 .front {transform:rotateX(180deg);}
+ .t1 .back {transform:rotateX(0deg);}
+ }
+ &.t2-active {
+ .t2 .front {transform:rotateY(180deg);}
+ .t2 .back {transform:rotateY(0deg);}
+ }
+ &.t3-active {
+ .t3 .front {transform:rotateX(180deg);}
+ .t3 .back {transform:rotateX(0deg);}
+ }
+ &.t4-active {
+ .t4 .front {transform:rotateY(180deg);}
+ .t4 .back {transform:rotateY(0deg);}
+ }
+ &.t5-active {
+ .t5 .front {transform:rotateX(180deg);}
+ .t5 .back {transform:rotateX(0deg);}
+ }
+ &.t6-active {
+ .t6 .front {transform:rotateY(180deg);}
+ .t6 .back {transform:rotateY(0deg);}
+ }
+ }
+ }
+
+
.six-display.fade-mode {
.slide-container {display:none;}
.tt .front {transition:opacity 0.3s;}
@@ -314,7 +379,7 @@
.t6:hover .front {opacity:0;}
}
- .six-display.slide-mode {
+ .six-display {
.slide-container {
padding:0;
overflow:hidden;
@@ -325,7 +390,12 @@
position:absolute;
width:100%;
transition:left 0.3s;
- > * {
+ h3{
+ text-transform: uppercase;
+ span{@include underlineH(25%, $softblack);}
+ margin-bottom:25px;
+ }
+ * {
color:$softblack;
text-align: center;
}
@@ -411,6 +481,9 @@
padding-right:5%;
margin-top:10%;
margin-bottom:10%;
+ h3 {
+ margin-top:10px;
+ }
}
padding:5%;
}
@@ -476,6 +549,10 @@
* {
color:$softblack;
}
+ @media all and(max-width:640px){
+ &:nth-child(even) {background:$chillwhite !important;}
+ &:nth-child(odd) {background:$softwhite !important;}
+ }
h3 {
margin-top:0;
font-size: 1em;
@@ -491,7 +568,7 @@
}
&:hover img {
- margin-top:1%;
+ margin-top:8%;
}
&:hover p {
@@ -522,6 +599,7 @@
}
.camera {
+ padding:5%;
background:url(/img/axis-camera-big2.png) left top/contain no-repeat $softwhite;
.camera-space {
min-height:200px;
@@ -534,23 +612,16 @@
}
}
-
-
-
-
-
-
-
.page.markets {
height:1%;
.head-splash {
//@include backgrounder("markets-background-header", "jpg", "no-repeat top/cover");
@include std-shadow-in;
- background:url(../img/testcover.jpg) no-repeat bottom/cover;
+ background:url(../img/markets-background-full.jpg) no-repeat bottom/cover;
padding:4%;
text-align: center;
h1,a{color:$softwhite;font-weight:600;}
- h1{@include std-shadow-text;}
+ h1{@include std-shadow-text;font-size:2.7em;}
.slide-picker {
@include std-shadow;
margin:auto;
@@ -600,7 +671,7 @@
}
}
h1 {
- font-size:3.5em;
+ font-size:2.7em;
margin-bottom:50px;
strong {
color: $htblue;
@@ -617,12 +688,31 @@
h2 {
@include std-shadow-text;
position:absolute;
- bottom:3%;
- padding:3%;
+ bottom:0;
+ padding:2%;
color:$softwhite;
- font-size:4em;
- @media all and(max-width:900px){font-size: 2.8em;}
- text-transform: uppercase;
+ font-size:2.7em;
+ }
+ }
+ .testimonials {
+ padding:5%;
+ p {font-style: italic;}
+ .prevbtn,.nextbtn {
+ width:30px;
+ height:30px;
+ @media all and(min-width:640px){
+ position:absolute;
+ top:50%;
+ top:calc(50% - 15px);
+ }
+ }
+ .nextbtn {
+ float:right;
+ @media all and(min-width:640px){right:-60px;}
+ }
+ .prevbtn {
+ float:right;
+ @media all and(min-width:640px){left:-60px;}
}
}
}
@@ -635,7 +725,7 @@
}
}
h1 {
- font-size:3.5em;
+ font-size:2.7em;
margin-bottom:50px;
strong {
color: $htblue;
diff --git a/src/sass/_layout.scss b/src/sass/_layout.scss
index bac87b7..72b3a85 100644
--- a/src/sass/_layout.scss
+++ b/src/sass/_layout.scss
@@ -42,6 +42,7 @@ html {
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;
@@ -101,17 +102,28 @@ html {
padding:0 0 0 0;
background:$softerwhite;
- a {
- line-height:40px;
- vertical-align:middle;
- text-align:center;
+ .col{
width:33%;
margin:0 0;
display:inline-block;
- font-size:1.5em;
- text-transform:uppercase;
- @media all and (max-width:640px) {
- font-size:3.5vw;
+ text-align:center;
+ height:40px;
+ a {
+ position:relative;
+ line-height:40px;
+ vertical-align:middle;
+ 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;}
+ }
}
}
&.fixed {
@@ -355,7 +367,7 @@ body {
footer {
background:$softblack;
border-top:2px solid $softwhite;
- padding:2.5%;
+ padding:2%;
*:not(.company-name):not(strong) {font-weight:500;}
h3, h2, *:not(li) > a {
color:$softwhite;
+ 
+