//Variables and mixin declaration
r-blue = #008ce6
dkgrey = #282D32
dkestgrey = #231F20
mdgrey = #64696E
ltgrey = #BEBEBE
accent-color = r-blue
.r-blue {
color: r-blue !important
}
.ltgrey {
color: ltgrey !important
}
.mdgrey {
color: mdgrey !important
}
.dkgrey {
color: dkgrey !important
}
.white {
color: white !important
}
//Media queries
break1 = 767px
break2 = 769px
break3 = 1025px
break4 = 1201px
break5 = 1401px
break6 = 1601px
num-columns = 12
max-width = 75em
gutter-width = 3.75em
lg-width = break4 //80em //1280px
md-width = break3 //64em //1024px
sm-width = break2 //48em //768px
xs-width = break1 //30em //480px
//Background iamge (svg with png backup and [email protected] backup)
$image-path = '../img'
$fallback-extension = 'png'
$retina-suffix = '@2x'
background-image($name, $size = false) {
$url = $image-path + '/' + $name + '.svg'
$urlExt = $image-path + '/' + $name + '.' + $fallback-extension
$urlRetina = $image-path + '/' + $name + $retina-suffix + '.' + $fallback-extension
background-image: url($url)
background-repeat: no-repeat
if $size {
background-size: $size
background-repeat: no-repeat
}
.no-svg & {
background-image: url($urlExt)
background-repeat: no-repeat
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url($urlRetina)
background-repeat: no-repeat
}
}
}
chrome-bug() {
.chrome-fix & {
-webkit-transform: translateZ(0)
-webkit-backface-visibility: hidden
-webkit-perspective: 1000
}
.touch.chrome-fix & {
-webkit-transform: initial
-webkit-backface-visibility: initial
-webkit-perspective: initial
}
}
clearfix() {
&::before, &::after {
display: table
content: ' '
}
&::after {
clear: both
}
}
font-legibility() {
text-rendering: optimizeLegibility
font-smoothing: antialiased
}
hide-text() {
text-indent: 100%
white-space: nowrap
overflow: hidden
}
element-invisible() {
position: absolute
top: -999999em
left: auto
width: 1px
height: 1px
overflow: hidden
}
justify(n) {
text-align: justify
text-justify: inter-ideograph
font-size: 0px
& > * {
display: inline-block
vertical-align: n
text-align: left
}
&:after {
content: ''
width: 100%
display: inline-block
}
}
justify-flex(n) {
justify(n)
display: flex
justify-content: space-between
flex-wrap: wrap
overflow: hidden
}
typography-responsive() {
font-size: 16px
@media all and (max-width: break4) {
font-size: 15.5px
}
@media all and (max-width: break3) {
font-size: 15px
}
@media all and (max-width: break2) {
font-size: 14.5px
}
}
vertically-aligned() {
font-size: 0.1px
&::before {
height: 100%
content: ''
display: inline-block
vertical-align: middle
}
.content {
display: inline-block
vertical-align: middle
width: 99.9%
typography-responsive()
}
}
.hidden {
display: none !important
}
.hidden-text {
display: block
hide-text()
}
//Global styling (some not used here)
body {
position: relative
}
.background-scrollover-content {
clearfix()
}
.content-box {
padding: 2em
position: relative
display: block
width: 100%
float: left
overflow: hidden
&.half-split {
width: 50%
float: left
display: block
square(50%)
@media screen and (max-width: xs-width) {
width: 100%
height: auto
position: relative
padding-bottom: 2em
.overlay {
position: relative
display: block
top: auto
right: auto
bottom: auto
left: auto
padding: 2em
}
}
}
}
.transitional-text {
background: white
color: mdgrey
text-align: center
padding: 3em 4em
h3 {
brandon-black()
letter-spacing: 2px
font-size: 0.875em
line-height: 1.5
}
}
.triangle-cutout {
position: absolute
top: 0
width: 0
height: 0
border-left: 18px solid transparent
border-right: 18px solid transparent
border-top: 18px solid white
left: 50%
margin-left: -9px
z-index: 1
}
.triangle-cutout-cover {
position: absolute
top: 0
width: 0
height: 0
border-left: 18px solid transparent
border-right: 18px solid transparent
border-top: 18px solid rgba(0,0,0,0.6)
left: 50%
margin-left: -9px
z-index: 2
opacity: 0
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s
}
.sidebar-open .triangle-cutout-cover {
height: 5em
opacity: 1
transition: opacity 0.5s
}
//Actual animation styling
#lightingAnimation {
width: 100%
padding: 0
background: #928896
min-height: 650px
height: 100vh
.content-left, .content-right {
float: left
display: block
}
.content-left {
width: 20%
}
.content-right {
width: 80%
padding: 0 2em
}
.animation-display {
position: absolute
top: 0
bottom: 0
left: 20%
height: 100%
}
.animation-navigation {
position: absolute
top: 0
left: 0
bottom: 0
height: 100vh
}
#animationNavigation {
list-style: none
padding: 0
height: 100vh
width: 100%
margin: 0
li {
width: 100%
height: 16.666666667%
cursor: pointer
color: white
padding: 0 1em
text-align: center
display: flex
justify-content: center
align-items: center
position: relative
background: rgba(40, 45, 50, 0.8)
transition all 100ms ease-in-out
&:after {
left: 100%
top: 50%
border: solid transparent
content: " "
height: 0
width: 0
position: absolute
pointer-events: none
border-color: rgba(255, 255, 255, 0)
border-left-color:rgba(255, 255, 255, 0)
border-width: 18px
margin-top: -18px
}
&.active {
background: rgba(255, 255, 255, 0.8)
&:after {
border-left-color:rgba(255, 255, 255, 0.8)
}
span {
color: dkestgrey
}
i {
svg path, svg circle, svg polygon {
fill: accent-color
}
}
}
span {
color: white
text-transform: uppercase
display: block
brandon-black()
letter-spacing: 2px
font-size: 0.875em
margin-top: 8px
}
i {
display: inline-block
}
.content {
display inline-block
vertical-align middle
width 99.9%
typography-responsive()
}
i#scheduleIcon {
width: 37px
height: 37px
}
i#daylightIcon {
width: 40px
height: 40px
}
i#occupancyIcon {
width: 41.3px
height: 40px
}
i#dimmingIcon {
width: 40px
height: 20px
}
i#demandResponseIcon {
width: 40px
height: 40px
}
i#dimmingControlsIcon {
width: 27.8px
height: 40px
}
}
}
}
#lightingAnimation {
#animationNavigation {
li {
&:hover {
background: rgba(255, 255, 255, 0.8)
&:after {
border-left-color:rgba(255, 255, 255, 0.8)
}
span {
color: dkestgrey
}
i {
svg path, svg circle, svg polygon {
fill: accent-color
}
}
}
}
}
}
.animation-slide {
position: relative
clearfix()
display: block
width: 100%
height: 100%
.info-text {
position: absolute
opacity: 0
width: 400px
height: auto
top: 3em
left: 4em
opacity: 0
transition all 200ms ease-in-out
h6, p {
color: white
}
h6 {
brandon()
margin-bottom: 0
display: table-cell
vertical-align: middle
font-size: 2.25em
line-height: 1
}
p {
brandon()
font-size: 1.125em
font-legibility()
margin-top: 10px
}
}
@media screen and (max-width: sm-width) {
.info-text {
width: 90%
top: 4em
}
}
#clock {
position: absolute
width: 25%
height: auto
bottom: 4em
right: 4em
h6 {
color: white
font-size: 2.25em
line-height: 1
brandon()
margin-bottom: 0
text-align: right
}
}
}
.outer-animations-container {
position: absolute
left: 50%
bottom: -200px
width: 395px
height: 702px
margin-left: -197.5px
transition all 275ms ease-in-out
.phone-inner-container {
position: absolute
width: 247px
height: 417px
overflow: hidden
left: 79px
bottom: 142px
img {
position: relative
left: 0
transition all 275ms ease-in-out
}
}
#relative-phone {
position: relative
width: 395px
height: 702px
.phone {
width: 395px
height: 702px
position: absolute
}
.phone-bg {
background-color: #282D32
width: 260px
height: 350px
position: absolute
left: 70px
bottom: 142px
}
}
}
.animation-background {
width: 100%
height: 100%
position: absolute
}
#animationBackground1, #animationBackground2, #animationBackground2, #animationBackground2, #animationBackground2, #animationBackground2 {
opacity: 0
transition opacity 205ms ease-in-out
}
#animated-display-inner {
height: 100%
width: 100%
position: relative
}
.animation-item {
position: absolute
top: 0
left: 5%
bottom: 0
right: 0
width: 100%
height: 100%
display: block
vertically-aligned()
transition all 275ms ease-in-out
img {
display inline-block
vertical-align middle
width 99.9%
max-width: 1280px
typography-responsive()
}
&.main-building {
opacity: 1
}
&.street-lights {
opacity: 0
@keyframes schedulingTransition1 {
0% { opacity: 0.8}
100% { opacity: 0}
}
animation: schedulingTransition1 4s 1
}
&.interior-lights {
opacity: 1
@keyframes schedulingTransition2 {
0% { opacity: 0}
100% { opacity: 1}
}
animation: schedulingTransition2 4s 1
}
&.conference-lights {
opacity: 0
}
&.bathroom-lights {
opacity: 0
}
&.interior-light-fixtures {
opacity: 1
}
&.conference-room {
opacity: 0.5
@keyframes schedulingTransition3 {
0% { opacity: 0.9}
100% { opacity: 0.5}
}
animation: schedulingTransition3 4s 1
}
&.bathroom {
opacity: 0.8
}
&.person {
opacity: 0
transform: translate3d(7px, 7px, 0px)
}
&.desk-shadows {
opacity: 0
}
&.lighter-walls {
opacity: 0
}
&.sunbeam {
opacity: 0
}
&.building-lights {
opacity: 0
@keyframes schedulingTransition4 {
0% { opacity: 0.4}
100% { opacity: 0}
}
animation: schedulingTransition4 4s 1
}
&.interior-brightness {
opacity: 0
@keyframes schedulingTransition5 {
0% { opacity: 0.5}
100% { opacity: 0}
}
animation: schedulingTransition5 4s 1
}
&.exterior-brightness {
opacity: 0
@keyframes schedulingTransition6 {
0% { opacity: 0.4}
100% { opacity: 0}
}
animation: schedulingTransition6 4s 1
}
&.daylight-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.dimming-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.occupancy-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.car {
opacity: 0
transform: translate3D(-50px, 20px, 0px)
}
&.flag {
opacity: 1
}
}
.animation-item {
@media screen and (max-width: sm-width) {
left: -12%
width: 130%
}
}
.animationStage1 { //Scheduling
#animationBackground1 {
background: linear-gradient(0deg, rgba(253, 152, 97, 1) 0%, rgba(180, 139, 136, 1) 25.81%, rgba(44, 116, 148, 1) 100%)
opacity: 1
}
.animation-slide {
.info-text {
&.animation-1 {
opacity: 1
}
&.animation-2, &.animation-3, &.animation-4, &.animation-5, &.animation-6 {
opacity: 0
}
}
}
.animation-item {
&.street-lights {
opacity: 0
@keyframes schedulingTransition1 {
0% { opacity: 0.8}
100% { opacity: 0}
}
animation: schedulingTransition1 4s 1
}
&.interior-lights {
opacity: 1
@keyframes schedulingTransition2 {
0% { opacity: 0}
100% { opacity: 1}
}
animation: schedulingTransition2 4s 1
}
&.conference-lights {
opacity: 0
}
&.bathroom-lights {
opacity: 0
}
&.interior-light-fixtures {
opacity: 1
}
&.conference-room {
opacity: 0.5
@keyframes schedulingTransition3 {
0% { opacity: 0.9}
100% { opacity: 0.5}
}
animation: schedulingTransition3 4s 1
}
&.bathroom {
opacity: 0.8
}
&.person {
opacity: 0
transform: translate3d(7px, 7px, 0px)
}
&.desk-shadows {
opacity: 0
}
&.lighter-walls {
opacity: 0
}
&.sunbeam {
opacity: 0
}
&.building-lights {
opacity: 0
@keyframes schedulingTransition4 {
0% { opacity: 0.4}
100% { opacity: 0}
}
animation: schedulingTransition4 4s 1
}
&.interior-brightness {
opacity: 0
@keyframes schedulingTransition5 {
0% { opacity: 0.5}
100% { opacity: 0}
}
animation: schedulingTransition5 4s 1
}
&.exterior-brightness {
opacity: 0
@keyframes schedulingTransition6 {
0% { opacity: 0.4}
100% { opacity: 0}
}
animation: schedulingTransition6 4s 1
}
&.daylight-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.dimming-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.occupancy-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.car {
opacity: 0
transform: translate3D(-50px, 20px, 0px)
}
}
.outer-animations-container {
bottom: -702px // -702px // -200px
.phone-inner-container {
img {
left: 0
}
}
}
}
.animationStage2 { //Daylight
#animationBackground2 {
background: linear-gradient(0deg, rgba(177, 138, 137, 1) 0%, rgba(104, 134, 167, 1) 100%)
// background: linear-gradient(0deg, rgba(85, 160, 188, 1) 0%, rgba(121, 172, 191, 1) 100%)
opacity: 1
}
.animation-slide {
.info-text {
&.animation-2 {
opacity: 1
}
&.animation-1, &.animation-3, &.animation-4, &.animation-5, &.animation-6 {
opacity: 0
}
}
}
.animation-item {
&.street-lights {
opacity: 0
}
&.interior-lights {
opacity: 0
}
&.conference-lights {
opacity: 0
}
&.bathroom-lights {
opacity: 0
}
&.conference-room {
opacity: 0.5
}
&.bathroom {
opacity: 0.8
}
&.person {
opacity: 0
transform: translate3d(7px, 7px, 0px)
}
&.desk-shadows {
opacity: 0.4
}
&.lighter-walls {
opacity: 1
}
&.sunbeam {
opacity: 0.8
}
&.building-lights {
opacity: 0
}
&.interior-brightness {
opacity: 0
}
&.exterior-brightness {
opacity: 0
}
&.daylight-icons {
opacity: 1
transform: translate3d(0px, 0px, 0px)
}
&.dimming-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.occupancy-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.car {
opacity: 1
transform: translate3D(0px, 0px, 0px)
}
}
.outer-animations-container {
bottom: -702px
.phone-inner-container {
img {
left: 0
}
}
}
}
.animationStage3 { //Occupancy
#animationBackground3 {
background: linear-gradient(0deg, rgba(85, 160, 188, 1) 0%, rgba(121, 172, 191, 1) 100%)
opacity: 1
}
.animation-slide {
.info-text {
&.animation-3 {
opacity: 1
}
&.animation-1, &.animation-2, &.animation-4, &.animation-5, &.animation-6 {
opacity: 0
}
}
}
.animation-item {
&.street-lights {
opacity: 0
}
&.interior-lights {
opacity: 0.7
}
&.conference-lights {
opacity: 0
}
&.bathroom-lights {
opacity: 1
}
&.conference-room {
opacity: 0.5
}
&.bathroom {
opacity: 0
}
&.person {
opacity: 1
transform: translate3d(0px, 0px, 0px)
}
&.desk-shadows {
opacity: 0
}
&.lighter-walls {
opacity: 0
}
&.sunbeam {
opacity: 0
}
&.building-lights {
opacity: 0
}
&.interior-brightness {
opacity: 0.1
}
&.exterior-brightness {
opacity: 0
}
&.daylight-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.dimming-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.occupancy-icons {
opacity: 1
transform: translate3d(0px, 0px, 0px)
}
&.car {
opacity: 1
transform: translate3D(0px, 0px, 0px)
}
}
.outer-animations-container {
bottom: -702px
.phone-inner-container {
img {
left: 0
}
}
}
}
.animationStage4 { //Dimming
#animationBackground4 {
background: linear-gradient(0deg, rgba(38, 91, 131, 1) 0%, rgba(73, 148, 177, 1) 100%)
opacity: 1
}
.animation-slide {
.info-text {
&.animation-4 {
opacity: 1
}
&.animation-1, &.animation-2, &.animation-3, &.animation-5, &.animation-6 {
opacity: 0
}
}
}
.animation-item {
&.street-lights {
opacity: 0
}
&.interior-lights {
opacity: 1
}
&.conference-lights {
opacity: 1
}
&.bathroom-lights {
opacity: 0
}
&.conference-room {
opacity: 0
}
&.bathroom {
opacity: 0.8
}
&.person {
opacity: 0
transform: translate3d(7px, 7px, 0px)
}
&.desk-shadows {
opacity: 0
}
&.lighter-walls {
opacity: 0
}
&.sunbeam {
opacity: 0
}
&.building-lights {
opacity: 0
}
&.interior-brightness {
opacity: 0
}
&.exterior-brightness {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.daylight-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.dimming-icons {
opacity: 1
transform: translate3d(0px, 0px, 0px)
}
&.occupancy-icons {
opacity: 0
}
&.car {
opacity: 1
transform: translate3D(0px, 0px, 0px)
}
}
.outer-animations-container {
bottom: -702px
.phone-inner-container {
img {
left: 0
}
}
}
}
.animationStage5 { //Demand response
#animationBackground5 {
background: linear-gradient(0deg, rgba(33, 71, 113, 1) 0%, rgba(44, 116, 148, 1) 100%)
opacity: 1
}
.animation-slide {
.info-text {
&.animation-5 {
opacity: 1
}
&.animation-1, &.animation-2, &.animation-3, &.animation-4, &.animation-6 {
opacity: 0
}
}
}
.animation-item {
&.street-lights {
opacity: 0
}
&.interior-lights {
opacity: 1
}
&.conference-lights {
opacity: 1
}
&.bathroom-lights {
opacity: 0
}
&.conference-room {
opacity: 0
}
&.bathroom {
opacity: 0.8
}
&.person {
opacity: 0
transform: translate3d(7px, 7px, 0px)
}
&.desk-shadows {
opacity: 0.4
}
&.lighter-walls {
opacity: 0
}
&.sunbeam {
opacity: 0.8
}
&.building-lights {
opacity: 0
}
&.interior-brightness {
opacity: 0
}
&.exterior-brightness {
opacity: 0.1
}
&.daylight-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.dimming-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.occupancy-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.car {
opacity: 1
transform: translate3D(0px, 0px, 0px)
}
}
.outer-animations-container {
bottom: -200px
.phone-inner-container {
img {
left: 0
}
}
}
}
.animationStage6 { //Personal dimming controls
#animationBackground6 {
background: linear-gradient(0deg, rgba(122, 130, 93, 1) 0%, rgba(99, 115, 98, 1) 14.16%, rgba(70, 96, 105, 1) 36.05%, rgba(50, 82, 109, 1) 57.85%, rgba(37, 74, 112, 1) 79.3%, rgba(33, 71, 113, 1) 100%)
opacity: 1
}
.animation-slide {
.info-text {
&.animation-6 {
opacity: 1
}
&.animation-1, &.animation-2, &.animation-3, &.animation-4, &.animation-5 {
opacity: 0
}
}
}
.animation-item {
&.street-lights {
opacity: 0.7
}
&.interior-lights {
opacity: 1
}
&.conference-lights {
opacity: 0
}
&.bathroom-lights {
opacity: 0
}
&.conference-room {
opacity: 0.6
}
&.bathroom {
opacity: 0.8
}
&.person {
opacity: 0
transform: translate3d(7px, 7px, 0px)
}
&.desk-shadows {
opacity: 0
}
&.lighter-walls {
opacity: 0
}
&.sunbeam {
opacity: 0
}
&.building-lights {
opacity: 0.2
}
&.interior-brightness {
opacity: 0.1
}
&.exterior-brightness {
opacity: 0.2
}
&.daylight-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.dimming-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.occupancy-icons {
opacity: 0
transform: translate3d(0px, -5px, 0px)
}
&.car {
opacity: 0
transform: translate3D(-50px, 20px, 0px)
}
}
.outer-animations-container {
bottom: -200px
.phone-inner-container {
img {
left: -234px
}
}
}
}
#phoneAnimationReplacement {
#phoneAnimationNavigation {
list-style: none
padding: 0
height: 101%
width: 100%
margin: 0
li {
square(50%)
padding-bottom: 40%
float: left
color: white
text-align: center
display: flex
justify-content: center
align-items: center
position: relative
background: rgba(40, 45, 50, 0.8)
transition all 100ms ease-in
border: none
overflow: hidden
@media only screen and (min-device-width : 320px) and (max-device-width : 667px) and (orientation : landscape) {
padding-bottom: 23%
}
&.active {
background: rgba(255, 255, 255, 0.8)
&:after {
border-left-color:rgba(255, 255, 255, 0.8)
}
span {
color: dkestgrey
}
i {
svg path, svg circle, svg polygon {
fill: accent-color
}
}
}
span {
color: white
text-transform: uppercase
display: block
brandon-black()
letter-spacing: 2px
font-size: 0.875em
}
i {
display: inline-block
}
.content {
display inline-block
vertical-align middle
width 99.9%
typography-responsive()
}
i#scheduleIcon {
width: 45px
height: 45px
}
i#daylightIcon {
width: 40px
height: 40px
}
i#occupancyIcon {
width: 41.3px
height: 40px
}
i#dimmingIcon {
width: 40px
height: 20px
}
i#demandResponseIcon {
width: 40px
height: 40px
}
i#dimmingControlsIcon {
width: 27.8px
height: 40px
}
}
li {
.content {
padding-left: 1em
padding-right: 1em
}
}
li.description-text {
width: 100%
display: none
padding: 1em
height: auto
&.active {
display: block
}
.individual-descriptor-text {
display: none
&.active {
display: block
}
h6, p {
color: dkestgrey
text-align: left
}
h6 {
font-size: 1.5em
margin: 0
}
p {
font-size: 1em
}
}
}
}
}
!
