/* Radius ---------------------------------*/ .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) { -webkit-border-radius: @topleft @topright @bottomright @bottomleft; -moz-border-radius: @topleft @topright @bottomright @bottomleft; border-radius: @topleft @topright @bottomright @bottomleft; } /* Shadow ---------------------------------*/ .text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); } .inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); } /* Transitions ---------------------------------*/ .transition (@prop: all, @time: 1s, @ease: linear) { -webkit-transition: @prop @time @ease; -moz-transition: @prop @time @ease; -o-transition: @prop @time @ease; -ms-transition: @prop @time @ease; transition: @prop @time @ease; } .animation (@name, @duration: 300ms, @delay: 0, @ease: ease) { -webkit-animation: @name @duration @delay @ease; -moz-animation: @name @duration @delay @ease; -ms-animation: @name @duration @delay @ease; } .transform(@string){ -webkit-transform: @string; -moz-transform: @string; -ms-transform: @string; -o-transform: @string; } /* Opacity ---------------------------------*/ .opacity (@opacity: 0.5) { -webkit-opacity: @opacity; -moz-opacity: @opacity; opacity: @opacity; } /* Gradient ---------------------------------*/ .gradient (@startColor: #eee, @endColor: white) { background-color: @startColor; background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); background: -webkit-linear-gradient(top, @startColor, @endColor); background: -moz-linear-gradient(top, @startColor, @endColor); background: -ms-linear-gradient(top, @startColor, @endColor); background: -o-linear-gradient(top, @startColor, @endColor); } .horizontal-gradient (@startColor: #eee, @endColor: white) { background-color: @startColor; background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(left, @startColor, @endColor); background-image: -moz-linear-gradient(left, @startColor, @endColor); background-image: -ms-linear-gradient(left, @startColor, @endColor); background-image: -o-linear-gradient(left, @startColor, @endColor); } /* Header ---------------------------------*/ .logo-container, .social-media { .border-radius-custom (0, 0, 5px, 5px); .box-shadow(4px, 4px, 5px, 0.1); } section#home-intro { .inner-shadow(0, 0, 10px, 3px, 0.15); } section#home-intro h1 { .text-shadow(0 1px 3px rgba(0, 0, 0, 0.2)); } article.product-attributes > header h2.product-tag { .box-shadow(4px, 4px, 5px, 0.05); } #rmit-video { .box-shadow(4px, 4px, 5px, 0.5); } section#video a#video-close { .border-radius(100px); .box-shadow(4px, 4px, 5px, 0.5); } section#video a#video-close:hover { .transition(background-color, 0.1s, linear); } /* Navigation ---------------------------------*/ #primary-nav { .inner-shadow(0, 0, 5px, 3px, 0.3); } ul.primary-nav ul { .box-shadow(4px, 4px, 5px, 0.1); .transition(opacity, 0.1s, linear); } ul.primary-nav ul li a:hover { .transition(all, 0.1s, linear); } /* Buttons ---------------------------------*/ a.dave-link:hover { .border-radius(5px); .box-shadow(4px, 4px, 5px, 0.1); } a#video-button { .border-radius(5px); .box-shadow(4px, 4px, 5px, 0.2); } a#video-button:hover { .transition(all, 0.1s, linear); } /* Meet Dave ---------------------------------*/ a.next, a.prev { .box-shadow(4px, 4px, 5px, 0.05); } a.next:hover, a.prev:hover { .transition(background-color, 0.2s, linear); } section#meet-dave ul#nav li a { .border-radius(100px); .inner-shadow(0, 0, 2px, 2px, 0.05); } section#meet-dave ul#nav li a:hover { .transition(background-color, 0.2s, linear); .inner-shadow(0, 0, 2px, 2px, 0.15); } section#meet-dave ul#nav li a.active { .inner-shadow(0, 0, 2px, 2px, 0.15); } section#meet-dave .dave-image { .box-shadow(4px, 4px, 5px, 0.5); } /* Products ---------------------------------*/ section#product-intro ul.key-components li { .border-radius(5px); .inner-shadow(0, 0, 5px, 3px, 0.3); } section#product-intro a.more-info-button { .border-radius(5px); .inner-shadow(0, 0, 3px, 3px, 0.1); } section#product-intro a.more-info-button:hover { .transition(all, 0.2s, linear); } .product-image-wrapper ul#nav li a { .border-radius(100px); .inner-shadow(0, 0, 2px, 2px, 0.05); } .product-image-wrapper ul#nav li a:hover { .transition(background-color, 0.2s, linear); .inner-shadow(0, 0, 2px, 2px, 0.15); } .product-image-wrapper ul#nav li a.active { .inner-shadow(0, 0, 2px, 2px, 0.15); } section#product-detail a.top-button { .box-shadow(4px, 4px, 5px, 0.1); } section#product-detail a.top-button:hover { .transition(background, 0.2s, ease-in); } .tipsy-inner { .border-radius(2px); .box-shadow(4px, 4px, 5px, 0.1); } /* Sections ---------------------------------*/ h1.fancy-header { .border-radius(5px); .box-shadow(4px, 4px, 5px, 0.1); } section > article.services > header { .box-shadow(4px, 4px, 5px, 0.05); } article.event .date-container { .box-shadow(4px, 4px, 5px, 0.1); } article.event .description { .box-shadow(5px, 5px, 5px, 0.05); } /* Revolution ---------------------------------*/ section#rainmaker-revolution ul#nav li a { .border-radius(100px); } section#rainmaker-revolution ul#nav li a:hover { .transition(background-color, 0.2s, linear); .inner-shadow(0, 0, 2px, 2px, 0.15); } section#rainmaker-revolution ul#nav li a.active { .inner-shadow(0, 0, 2px, 2px, 0.15); } /* Typography ---------------------------------*/ article#standard a, article#product-range a { .transition(all, 0.18s, ease-in); } a:hover { opacity: 1; } /* Forms ---------------------------------*/ #rmit-form { .border-radius(10px); .box-shadow(4px, 4px, 5px, 0.05); } #rmit-form input[type="text"] { .border-radius(3px); } #rmit-form input[type="text"]:focus { } #rmit-form input[type="submit"] { .border-radius(5px); .box-shadow(4px, 4px, 5px, 0.15); .transition(background, 0.1s, ease-in); } /* Footer ---------------------------------*/