888 lines
18 KiB
SCSS
888 lines
18 KiB
SCSS
.page.index {
|
|
@include backgrounder("index-background", "jpg", "no-repeat center center/cover");
|
|
overflow:visible;
|
|
position:absolute;
|
|
height:100%; //Required because fuck you
|
|
min-height:500px;
|
|
.black-band {
|
|
background:$transblack;
|
|
min-height:500px;
|
|
height:100%;
|
|
height:calc(100% - 60px);
|
|
.set-btm{
|
|
width:100%;
|
|
text-align: right;
|
|
padding:4%;
|
|
position:absolute;
|
|
bottom:0;
|
|
left:0;
|
|
* { color:$softwhite; }
|
|
h1 {
|
|
margin-top:0;
|
|
font-weight: 600;
|
|
font-size: 5em;
|
|
@media all and (min-width:100px){font-size:10px;}
|
|
@media all and (min-width:150px){font-size:12px;}
|
|
@media all and (min-width:200px){font-size:16px;}
|
|
@media all and (min-width:250px){font-size:20px;}
|
|
@media all and (min-width:300px){font-size:30px;}
|
|
@media all and (min-width:400px){font-size:40px;}
|
|
@media all and (min-width:500px){font-size:50px;}
|
|
@media all and (min-width:640px){font-size:50px;}
|
|
@media all and (min-width:740px){font-size:60px;}
|
|
@media all and (min-width:880px){font-size:70px;}
|
|
@media all and (min-width:1000px){font-size:80px;}
|
|
@media all and (min-width:1440px){font-size:120px;}
|
|
}
|
|
h2 {
|
|
border-right:2px solid $htblue;
|
|
padding-right:2%;
|
|
font-size: 3em;
|
|
@media all and (min-width:100px){font-size:5px;}
|
|
@media all and (min-width:150px){font-size:6px;}
|
|
@media all and (min-width:200px){font-size:8px;}
|
|
@media all and (min-width:250px){font-size:10px;}
|
|
@media all and (min-width:300px){font-size:15px;}
|
|
@media all and (min-width:400px){font-size:20px;}
|
|
@media all and (min-width:500px){font-size:25px;}
|
|
@media all and (min-width:640px){font-size:25px;}
|
|
@media all and (min-width:740px){font-size:30px;}
|
|
@media all and (min-width:880px){font-size:35px;}
|
|
@media all and (min-width:1000px){font-size:40px;}
|
|
@media all and (min-width:1440px){font-size:60px;}
|
|
}
|
|
}
|
|
|
|
.bluebutton {
|
|
&.entertainment {width:37%;}
|
|
&.security {width:27%;}
|
|
&.integration {width:33%;}
|
|
margin: 1px 0.5%;
|
|
font-size:1vw;
|
|
@media all and(max-width:1024px){font-size:1.45vw;}
|
|
@media all and(max-width:800px){
|
|
width:100% !important;
|
|
font-size:1em !important;
|
|
}
|
|
img {
|
|
@include ratio(1);
|
|
width:30px;
|
|
vertical-align:-10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page.process {
|
|
@include backgrounder("process-background", "jpg", "no-repeat center/cover");
|
|
width:100%;
|
|
min-height: 125%;
|
|
|
|
.process-band {
|
|
@include std-shadow;
|
|
.square-bg {display:none;}
|
|
@media all and (max-width:480px){
|
|
width:100%;
|
|
background:$softwhite;
|
|
.square-bg {
|
|
display:block;
|
|
@include ratio(1);
|
|
background: url(../img/process-background-square.jpg) no-repeat top/cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title-box {
|
|
padding-bottom:90px !important;
|
|
h1 {
|
|
line-height:70px;
|
|
text-align:center;
|
|
text-transform:uppercase;
|
|
@include underlineH(40%, $softwhite);
|
|
}
|
|
}
|
|
|
|
.wbg h3 {
|
|
line-height:45px;
|
|
padding-left:45px;
|
|
&#icon-design { background:url(../img/icon-design.svg) no-repeat left/contain; }
|
|
&#icon-supply { background:url(../img/icon-supply.svg) no-repeat left/contain; }
|
|
&#icon-install { background:url(../img/icon-install.svg) no-repeat left/contain; }
|
|
&#icon-support { background:url(../img/icon-support.svg) no-repeat left/contain; }
|
|
}
|
|
|
|
.cgbg {
|
|
background:$chillgrey;
|
|
*{color: $softwhite;}
|
|
h3 {margin-top:0;}
|
|
padding:5%;
|
|
}
|
|
|
|
.wbg {
|
|
background:$transwhite;
|
|
padding:3%;
|
|
}
|
|
|
|
.btm-process {
|
|
h3 { font-weight: 600; }
|
|
p { font-weight: 400; }
|
|
}
|
|
}
|
|
|
|
.page.services {
|
|
h1 {
|
|
text-align:center;
|
|
text-transform: uppercase;
|
|
font-size: 2.7em;
|
|
span {
|
|
@include underlineH(25%, $softblack);
|
|
}
|
|
}
|
|
|
|
.biggie {
|
|
@include ratio(2.5);
|
|
min-height:400px;
|
|
width:100%;
|
|
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");}
|
|
&.automation {@include backgrounder("services-home-background-automation", "jpg", "center/cover no-repeat");}
|
|
}
|
|
.describe-service {
|
|
width:50%;
|
|
min-width:320px;
|
|
max-width:940px;
|
|
padding:3%;
|
|
margin:-5% 2% 2% 2%;
|
|
|
|
@include std-shadow;
|
|
background:white;
|
|
|
|
h2 {
|
|
margin-top:0;
|
|
strong {color:$htblue;}
|
|
font-size:2.8em;
|
|
@media all and (max-width:480px){font-size: 2.2em}
|
|
}
|
|
|
|
&.r {float:right;clear:both;}
|
|
|
|
@media all and (max-width:1024px){
|
|
margin:0 0 0 0;
|
|
width:100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.servicepage {
|
|
height:1%;
|
|
width:100%;
|
|
|
|
* { color:$softwhite; }
|
|
|
|
.splash {
|
|
top:0;
|
|
min-height:600px;
|
|
width:100%;
|
|
position:fixed;
|
|
z-index:1;
|
|
@media all and(max-height:600px){
|
|
position:absolute;
|
|
}
|
|
.splash-text {
|
|
position:absolute;
|
|
bottom:23%;
|
|
left:0;
|
|
right:0;
|
|
text-align: center;
|
|
.scroll2me {
|
|
width:50px;
|
|
height:50px;
|
|
}
|
|
}
|
|
}
|
|
.splashspacer{
|
|
margin-top:-75px;
|
|
min-height:600px;
|
|
width:100%;
|
|
}
|
|
.postsplash {
|
|
z-index:2;
|
|
background:$hardgrey;
|
|
text-align:center;
|
|
.top-icon-row {
|
|
text-align:center;
|
|
margin-top:-35px;
|
|
.icon {
|
|
background:$hardgrey;
|
|
border-radius:50%;
|
|
width:70px;
|
|
height:70px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.entertainment {
|
|
.splash {
|
|
@include backgrounder("services-entertainment-splash", "jpg", "top/cover no-repeat");
|
|
}
|
|
.six-display {
|
|
background:$softwhite;
|
|
border:1px solid $softwhite;
|
|
.tt {
|
|
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;
|
|
text-transform: uppercase;
|
|
position:relative;
|
|
&:before {
|
|
content:"";
|
|
position:absolute;
|
|
height:150px;
|
|
width:100%;
|
|
top:-150px;
|
|
left:0;
|
|
background:$transblack;
|
|
transition:opacity 0.5s;
|
|
opacity:1;
|
|
}
|
|
}
|
|
p {
|
|
position:relative;
|
|
padding-bottom:20px;
|
|
&:before {
|
|
content:"";
|
|
position:absolute;
|
|
height:150px;
|
|
width:100%;
|
|
bottom:-150px;
|
|
left:0;
|
|
background:$transblack;
|
|
transition:opacity 0.5s;
|
|
opacity:1;
|
|
}
|
|
}
|
|
}
|
|
&.t1 .front{background:url(/img/t1.jpg) no-repeat center/cover;}
|
|
&.t2 .front{background:url(/img/t2.jpg) no-repeat center/cover;}
|
|
&.t3 .front{background:url(/img/t3.jpg) no-repeat center/cover;}
|
|
&.t4 .front{background:url(/img/t4.jpg) no-repeat center/cover;}
|
|
&.t5 .front{background:url(/img/t5.jpg) no-repeat center/cover;}
|
|
&.t6 .front{background:url(/img/t6.jpg) no-repeat center/cover;}
|
|
}
|
|
.hover-wrap:hover{
|
|
.tt:hover {
|
|
h3:before,p:before{opacity:0;}
|
|
}
|
|
}
|
|
&.t1-active {
|
|
.hover-wrap:not(:hover){
|
|
.t1{h3:before,p:before{opacity:0;}}
|
|
}
|
|
}
|
|
&.t2-active {
|
|
.hover-wrap:not(:hover){
|
|
.t2{h3:before,p:before{opacity:0;}}
|
|
}
|
|
}
|
|
&.t3-active {
|
|
.hover-wrap:not(:hover){
|
|
.t3{h3:before,p:before{opacity:0;}}
|
|
}
|
|
}
|
|
&.t4-active {
|
|
.hover-wrap:not(:hover){
|
|
.t4{h3:before,p:before{opacity:0;}}
|
|
}
|
|
}
|
|
&.t5-active {
|
|
.hover-wrap:not(:hover){
|
|
.t5{h3:before,p:before{opacity:0;}}
|
|
}
|
|
}
|
|
&.t6-active {
|
|
.hover-wrap:not(:hover){
|
|
.t6{h3:before,p:before{opacity:0;}}
|
|
}
|
|
}
|
|
}
|
|
|
|
.six-display.fade-mode {
|
|
.slide-container {display:none;}
|
|
.tt .front {transition:opacity 0.3s;}
|
|
.t1:hover .front {opacity:0;}
|
|
.t2:hover .front {opacity:0;}
|
|
.t3:hover .front {opacity:0;}
|
|
.t4:hover .front {opacity:0;}
|
|
.t5:hover .front {opacity:0;}
|
|
.t6:hover .front {opacity:0;}
|
|
}
|
|
|
|
.six-display {
|
|
.slide-container {
|
|
padding:0;
|
|
overflow:hidden;
|
|
position:relative;
|
|
height:200px;
|
|
transition:height 0.3s;
|
|
> .slide {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
&.t0-active {
|
|
.slide-container{height:100px;}
|
|
}
|
|
//Initial state
|
|
&.t0-active {
|
|
.t0-slide {left:0;}
|
|
.t1-slide {left:100%;}
|
|
.t2-slide {left:200%;}
|
|
.t3-slide {left:300%;}
|
|
.t4-slide {left:400%;}
|
|
.t5-slide {left:500%;}
|
|
.t6-slide {left:600%;}
|
|
}
|
|
|
|
//Active states
|
|
&.t1-active {
|
|
.t0-slide {left:-100%;}
|
|
.t1-slide {left:0%;}
|
|
.t2-slide {left:100%;}
|
|
.t3-slide {left:200%;}
|
|
.t4-slide {left:300%;}
|
|
.t5-slide {left:400%;}
|
|
.t6-slide {left:500%;}
|
|
}
|
|
&.t2-active {
|
|
.t0-slide {left:-200%;}
|
|
.t1-slide {left:-100%;}
|
|
.t2-slide {left:0%;}
|
|
.t3-slide {left:100%;}
|
|
.t4-slide {left:200%;}
|
|
.t5-slide {left:300%;}
|
|
.t6-slide {left:400%;}
|
|
}
|
|
&.t3-active {
|
|
.t0-slide {left:-300%;}
|
|
.t1-slide {left:-200%;}
|
|
.t2-slide {left:-100%;}
|
|
.t3-slide {left:0%;}
|
|
.t4-slide {left:100%;}
|
|
.t5-slide {left:200%;}
|
|
.t6-slide {left:300%;}
|
|
}
|
|
&.t4-active {
|
|
.t0-slide {left:-400%;}
|
|
.t1-slide {left:-300%;}
|
|
.t2-slide {left:-200%;}
|
|
.t3-slide {left:-100%;}
|
|
.t4-slide {left:0%;}
|
|
.t5-slide {left:100%;}
|
|
.t6-slide {left:200%;}
|
|
}
|
|
&.t5-active {
|
|
.t0-slide {left:-500%;}
|
|
.t1-slide {left:-400%;}
|
|
.t2-slide {left:-300%;}
|
|
.t3-slide {left:-200%;}
|
|
.t4-slide {left:-100%;}
|
|
.t5-slide {left:0%;}
|
|
.t6-slide {left:100%;}
|
|
}
|
|
&.t6-active {
|
|
.t0-slide {left:-600%;}
|
|
.t1-slide {left:-500%;}
|
|
.t2-slide {left:-400%;}
|
|
.t3-slide {left:-300%;}
|
|
.t4-slide {left:-200%;}
|
|
.t5-slide {left:-100%;}
|
|
.t6-slide {left:0%;}
|
|
}
|
|
}
|
|
|
|
.expertly-tailored {
|
|
min-height:600px;
|
|
background:url(/img/se-splash2.jpg) top/cover no-repeat;
|
|
.blue-left{
|
|
border-left:2px solid $htblue;
|
|
text-align: left;
|
|
padding-right:5%;
|
|
margin-top:10%;
|
|
margin-bottom:10%;
|
|
h2 {
|
|
margin-top:10px;
|
|
font-weight:100;
|
|
}
|
|
}
|
|
padding:5%;
|
|
}
|
|
}
|
|
.integration {
|
|
.splash {
|
|
@include backgrounder("services-integration-splash", "jpg", "top/cover no-repeat");
|
|
}
|
|
.ff {min-height:450px;}
|
|
.ff1 {background:url(/img/ff1.jpg) no-repeat right/cover;}
|
|
.ff2 {
|
|
background:$softwhite;
|
|
padding:5%;
|
|
* {color:$softblack;}
|
|
h3 {
|
|
@include underlineH(40%, $softblack);
|
|
margin-bottom:5%;
|
|
}
|
|
}
|
|
.ff3 {background:url(/img/ff3.jpg) no-repeat center/cover;}
|
|
.ff4 {background:url(/img/ff4.jpg) no-repeat center/cover;}
|
|
|
|
.how-we-build {
|
|
background:$softwhite;
|
|
img {
|
|
margin-top:50px;
|
|
width:50px;
|
|
height:50px;
|
|
border-radius:5px;
|
|
background:$softblack;
|
|
}
|
|
* {color:$softblack;}
|
|
h3{font-size:3.5em;}
|
|
h4{font-size:2em;margin-bottom:50px;}
|
|
h5{font-size:1.5em;}
|
|
}
|
|
.whole-home-control {
|
|
background:url(/img/room-integration.jpg) center/cover no-repeat;
|
|
*:not(.bluebutton) {text-align:left;}
|
|
.center-bb{margin-top:100px;text-align: center;}
|
|
position:relative;
|
|
overflow:hidden;
|
|
padding:3%;
|
|
.ipad {
|
|
min-height:450px;
|
|
img {
|
|
position:absolute;
|
|
top:0;
|
|
margin-top:50px;
|
|
transition:top 1s;
|
|
width:80%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.security {
|
|
.splash {
|
|
@include backgrounder("services-security-splash", "jpg", "top left/cover no-repeat");
|
|
}
|
|
.hover-p{
|
|
.hover-for-p {
|
|
background:$softwhite;
|
|
height:200px;
|
|
overflow-y:hidden;
|
|
text-align: center;
|
|
|
|
&.chillwhite {
|
|
background:$chillwhite;
|
|
}
|
|
* {
|
|
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;
|
|
font-weight:600;
|
|
}
|
|
.icon-hiding {
|
|
position:relative;
|
|
width:10%;
|
|
}
|
|
img {
|
|
transition:margin-top 0.5s ease;
|
|
margin-top:70px;
|
|
}
|
|
|
|
&:hover img {
|
|
margin-top:25px;
|
|
}
|
|
|
|
&:hover p {
|
|
opacity:1;
|
|
}
|
|
p {
|
|
opacity:0;
|
|
transition:opacity 0.5s ease;
|
|
font-size:0.8em;
|
|
}
|
|
|
|
}
|
|
}
|
|
.call2action {
|
|
background:url(../img/uk-house.jpg) center/cover no-repeat;
|
|
height:600px;
|
|
text-align: left;
|
|
.bluebutton:hover {
|
|
color:white;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
margin-top:30%;
|
|
text-shadow: 5px 3px 10px rgba(0, 0, 0, 1);
|
|
}
|
|
}
|
|
|
|
.camera {
|
|
padding:3%;
|
|
background:url(/img/axis-camera-big2.png) left top/contain no-repeat $softwhite;
|
|
.camera-space {
|
|
min-height:200px;
|
|
}
|
|
.text-pad {
|
|
text-align: left;
|
|
h2 {
|
|
font-weight:100;
|
|
font-size:2.7em;
|
|
margin-bottom:50px;
|
|
}
|
|
*{color:$softblack;}
|
|
}
|
|
.bluebutton {
|
|
margin-top:100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page.markets {
|
|
height:1%;
|
|
.head-splash {
|
|
//@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%;
|
|
text-align: center;
|
|
h1,a{color:$softwhite;font-weight:600;}
|
|
h1{@include std-shadow-text;font-size:2.7em;}
|
|
.slide-picker {
|
|
@include std-shadow;
|
|
margin:auto;
|
|
max-width:600px;
|
|
background:$softwhite;
|
|
border-radius:10px;
|
|
a {
|
|
cursor:pointer;
|
|
color:$hardblue;
|
|
display:inline-block;
|
|
width:30%;
|
|
margin:5px 0;
|
|
height:40px;
|
|
line-height:40px;
|
|
border-radius: 9px;
|
|
font-weight:600;
|
|
@media all and (max-width:400px){
|
|
width:50%;
|
|
}
|
|
&.active {
|
|
background:$hardblue;
|
|
color:$softwhite;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.slide-container {
|
|
min-height:80%;
|
|
position:relative;
|
|
.slide {
|
|
opacity:0;
|
|
transition: opacity 1s ease,z-index 0s linear 1s;
|
|
&.homeowners,&.developers {position:absolute;top:0;}
|
|
&.active {
|
|
opacity:1;
|
|
z-index:1;
|
|
}
|
|
.bluebutton {
|
|
width:48%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.page.about {
|
|
height:1%;
|
|
.minimummer {
|
|
min-height:50%;
|
|
> .row > .col {
|
|
padding: 3%;
|
|
}
|
|
}
|
|
h1 {
|
|
font-size:2.7em;
|
|
margin-bottom:50px;
|
|
strong {
|
|
color: $htblue;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.customers-say {
|
|
background:url(../img/customers-say.jpg) top left/cover no-repeat;
|
|
min-height:600px;
|
|
height:50%;
|
|
@include std-shadow-in;
|
|
position:relative;
|
|
padding:5%;
|
|
h2 {
|
|
@include std-shadow-text;
|
|
position:absolute;
|
|
bottom:0;
|
|
padding:2%;
|
|
color:$softwhite;
|
|
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;}
|
|
}
|
|
}
|
|
}
|
|
.page.contact {
|
|
height:1%;
|
|
.minimummer {
|
|
min-height:80%;
|
|
> .row > .col {
|
|
padding: 3%;
|
|
}
|
|
}
|
|
h1 {
|
|
font-size:2.7em;
|
|
margin-bottom:50px;
|
|
strong {
|
|
color: $htblue;
|
|
}
|
|
}
|
|
.map {
|
|
background:url(../img/map.png) center/cover no-repeat;
|
|
height:300px;
|
|
@include std-shadow-in;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
line-height: 300px;
|
|
|
|
a {
|
|
width:100%;
|
|
}
|
|
img {
|
|
width:60px;
|
|
display:inline-block;
|
|
transition:width 0.1s, height 0.1s;
|
|
&:hover {
|
|
width:65px;
|
|
}
|
|
}
|
|
}
|
|
.formCover {
|
|
background:$softwhite;
|
|
position:absolute;
|
|
top:0;
|
|
bottom:0;
|
|
left:0;
|
|
right:0;
|
|
z-index:-1;
|
|
transition:opacity 0.5s ease;
|
|
opacity:0;
|
|
img.imgload {
|
|
position:absolute;
|
|
height:50%;
|
|
top:25%;
|
|
width:50%;
|
|
right:25%;
|
|
transition:transform 500s linear;
|
|
background:transparent;
|
|
}
|
|
.imgfail{display:none;width:50%;margin-left:25%;background:transparent;}
|
|
a.tryAgain{display:none;text-decoration:underline;cursor:pointer;}
|
|
a.sendAnother{display:none;text-decoration:underline;cursor:pointer;}
|
|
}
|
|
.pending .formCover {
|
|
z-index:5;
|
|
opacity:1;
|
|
> *:not(img) {display:none;}
|
|
img.imgload {
|
|
opacity:1;
|
|
transform:rotate(36000deg);
|
|
}
|
|
}
|
|
.success .formCover {
|
|
z-index:5;
|
|
opacity:1;
|
|
img {display:none;}
|
|
a.sendAnother{display:block}
|
|
}
|
|
.fail .formCover {
|
|
z-index:5;
|
|
opacity:1;
|
|
> *:not(img) {display:none;}
|
|
img.imgload {display:none;}
|
|
img.imgfail {display:block;}
|
|
a.tryAgain{display:block;}
|
|
}
|
|
|
|
form {
|
|
margin-top:-42px;
|
|
position:relative;
|
|
label{
|
|
display:block;
|
|
background:transparent;
|
|
transition:margin 0.3s ease;
|
|
margin-top:5px;
|
|
cursor:text;
|
|
}
|
|
div.empty label {
|
|
margin-top:30px;
|
|
margin-bottom:-30px;
|
|
color:rgba(0,0,0,0.2);
|
|
}
|
|
|
|
div.filled-in, div.active, div.valid, div.invalid {
|
|
label {
|
|
margin-bottom:0;
|
|
margin-top:0;
|
|
color:$softgrey;
|
|
}
|
|
textarea {
|
|
@media all and(min-height:500px)
|
|
{
|
|
height:300px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.valid {
|
|
label {
|
|
margin-bottom:0;
|
|
}
|
|
input,textarea {
|
|
&::-ms-clear {
|
|
display: none;
|
|
}
|
|
background:url(../img/valid.svg) top right/20px no-repeat;
|
|
border-bottom:1px solid $htblue;
|
|
}
|
|
}
|
|
div.invalid {
|
|
label {
|
|
margin-bottom:0;
|
|
}
|
|
input,textarea {
|
|
background:url(../img/nope.svg) top right/20px no-repeat;
|
|
}
|
|
}
|
|
input:focus,textarea:focus {
|
|
border-bottom:1px solid $htblue;
|
|
}
|
|
input,textarea {
|
|
border-bottom:1px solid $softgrey;
|
|
color:$softblack;
|
|
margin-bottom:0;
|
|
box-shadow:none;
|
|
}
|
|
|
|
|
|
*
|
|
{
|
|
border:none;
|
|
padding:5px;
|
|
}
|
|
div:not(:last-of-type)
|
|
{
|
|
margin-top:0%;
|
|
}
|
|
input:not([type="submit"]) {
|
|
background:transparent;
|
|
outline:0;
|
|
width:100%;
|
|
}
|
|
|
|
textarea {
|
|
background:transparent;
|
|
width:100%;
|
|
height:100px;
|
|
transition:height 0.3s ease 0.2s;
|
|
outline:0;
|
|
@media all and(min-height:500px)
|
|
{
|
|
&:focus {
|
|
height:300px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bar-under-title {
|
|
text-align:center;
|
|
position:relative;
|
|
padding-bottom:50px;
|
|
}
|
|
.bar-under-title:after {
|
|
content:"";
|
|
display:block;
|
|
position:absolute;
|
|
bottom:25px;
|
|
width:50%;
|
|
margin-left:25%;
|
|
border-top: 2px solid $softwhite;
|
|
}
|
|
.contact-padding {
|
|
padding:5%;
|
|
}
|
|
|
|
.bluebutton {
|
|
padding:0;
|
|
box-shadow:none;
|
|
}
|
|
} |