uawdijnntqw1x1x1
IP : 216.73.217.6
Hostname : webm002.cluster111.gra.hosting.ovh.net
Kernel : Linux webm002.cluster111.gra.hosting.ovh.net 6.18.42-ovh-vps-grsec-zfs+ #1 SMP PREEMPT_DYNAMIC Wed Aug 5 15:59:48 CEST 2026 x86_64
Disable Function : _dyuweyrj4,_dyuweyrj4r,dl
OS : Linux
PATH:
/
home
/
atelierpru
/
provence
/
6bf95
/
..
/
tmp
/
..
/
52177
/
.
/
less.tar
/
/
framework_components/tabs.less000066600000002207152442520560012641 0ustar00// MARKUP: // // <ul class="tabs"> // <li class="active || not"> // <div class="tab__title"> // ... // </div> // <div class="tab__content"> // ... // </div> // </li> // </ul> // // MODIFIERS: // .active - place this class on the tab you want initially to be open. // [data-content-align] - set to 'left' when you want the tabs aligned center but the content aligned left .tabs{ display: block; margin-bottom: 0; > li{ display: inline-block; opacity: .5; .transition(0.3s,ease); .disable-select; } > .active, &:hover{ opacity: 1; } .tab__title{ cursor: pointer; &:not(.btn){ padding: @tab-title-padding; } } li:first-child{ .tab__title{ &:not(.btn){ padding-left: 0; } } } .tab__content{ display: none; } } .tabs-content{ margin-top: 1em; li > .tab__content{ width: 100%; display: none; } > .active{ > .tab__content{ display: block; } } } .tabs-container{ &[data-content-align="left"]{ .tabs-content{ text-align: left; } } } @media all and (max-width: 767px){ .tabs-content{ > li:not(.active) .tab__content{ display: none !important; } } }framework_components/dropdowns.less000066600000004431152442520560013730 0ustar00.dropdown{ position: relative; .dropdown__container{ .transition(0.3s,ease); opacity: 0; pointer-events: none; position: absolute; z-index: 999; .dropdown__container{ &:before{ height: 0; } } } .dropdown__content{ padding: @base-line-height; &:not([class*='col-']){ width: @base-line-height*10; } &:not([class*='bg-']){ background: @color-bg-site; } &:not([class='bg--dark']){ .menu-vertical{ a{ color: @color-body; } } } } .dropdown__trigger{ cursor: pointer; user-select: none; } &.dropdown--active{ >.dropdown__container{ opacity: 1; >.container{ >.row{ > .dropdown__content{ pointer-events: all; } } } } } } //Desktop @media all and (min-width: 991px){ .dropdown{ .dropdown__container{ &:before{ height: @base-line-height/2; width: 100%; content: ''; display: block; } } .dropdown__content{ &.dropdown__content--md{ padding: @base-line-height*1.5; } &.dropdown__content--lg{ padding: @base-line-height*2; } &.dropdown__content--xlg{ padding: @base-line-height*2.5; } } } } // Tablet Down @media all and (max-width: 767px){ .dropdown{ .dropdown__container{ min-width: 100%; position: relative; display: none; } .dropdown__content{ padding: @base-line-height; left: 0 !important; } &.dropdown--active{ >.dropdown__container{ display: block; } } } } // Dropdown Hovers body.dropdowns--hover{ .dropdown:not(.dropdown--click){ &:hover{ >.dropdown__container{ &:before{ pointer-events: all; } opacity: 1; .dropdown__content{ pointer-events: all; } } } } } body:not(.dropdowns--hover){ .dropdown.dropdown--hover{ &:hover{ >.dropdown__container{ &:before{ pointer-events: all; } opacity: 1; .dropdown__content{ pointer-events: all; } } } } } // Tablet Down @media all and (max-width: 990px){ body.dropdowns--hover{ .dropdown:not(.dropdown--click){ &.dropdown--active{ >.dropdown__container{ &:before{ pointer-events: all; } display: block; } } } } } @media all and (max-width: 767px){ .dropdown{ &.dropdown--absolute{ .dropdown__container{ position: absolute; } } } } framework_components/switchable.less000066600000001556152442520560014043 0ustar00// MARKUP: // <section class="switchable switchable--switch"> // <div class="switchable__text"> // ... // </div> // </section> // // MODIFIERS // .switchable--switch - reverses the direction of content in the section .switchable{ position: relative; div[class*='col-']:first-child{ float: left; &:not([class*='pull']):not([class*='push']){ left: 0; } right: auto; } div[class*='col-']:last-child{ float: right; &:not([class*='pull']):not([class*='push']){ right: 0; } left: auto; } &.switchable--switch{ div[class*='col-']:first-child{ float: right; right: 0; left: auto; &:not([class*='pull']):not([class*='push']){ left: auto; } } div[class*='col-']:last-child{ float: left; left: 0; right: auto; } } .switchable__text{ margin-top: @base-line-height * 2; } >div[class*='col-']{ padding: 0; } }framework_components/position.less000066600000003134152442520560013554 0ustar00body{ overflow-x: hidden; } .pos-relative{ position: relative; } .pos-absolute{ position: absolute; &.container{ left: 0; right: 0; } } .pos-top{ top: 0; } .pos-bottom{ bottom: 0; } .pos-right{ right: 0; } .pos-left{ left: 0; } .float-left{ float: left; } .float-right{ float: right; } @media all and (max-width: 767px){ .float-left,.float-right{ float: none; } .float-left-xs{ float: left; } .float-right-xs{ float: right; } } .pos-vertical-center{ position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } @media all and (max-width: 767px){ .pos-vertical-center{ top: 0; transform: none; -webkit-transform: none; } } @media all and (max-height: 600px){ .pos-vertical-center{ top: 0; transform: none; -webkit-transform: none; } } .pos-vertical-align-columns{ display: table; table-layout: fixed; width: 100%; > div[class*='col-']{ display: table-cell; float: none; vertical-align: middle; } } @media all and (max-width: 990px){ .pos-vertical-align-columns{ display: block; width: auto; > div[class*='col-']{ display: block; } } } .inline-block{ display: inline-block; } .block{ display: block; } @media all and (max-width: 767px){ .block--xs{ display: block; } } @media all and (max-width: 990px){ .text-center-md{ text-align: center; } .text-left-md{ text-align: left; } .text-right-md{ text-align: right; } } @media all and (max-width: 767px){ .text-center-xs{ text-align: center; } .text-left-xs{ text-align: left; } .text-right-xs{ text-align: right; } }framework_components/modals.less000066600000004403152442520560013167 0ustar00// MARKUP: // // <div class="modal-instance"> // <a class="modal-trigger">Trigger</a> // <div class="modal-container" data-modal-id="optional"> // <div class="modal-content" data-width="80" data-height="80"> // ... // </div> // </div> // </div> // // MODIFIERS: // .modal-trigger[data-modal-id] - use any element to trigger a modal using its ID // [data-autoshow] - place on '.modal-container' outside the main container for autoshow modals // [data-width][data-height] - place on modal content to control height in % // .height--natural - (on modal-content) content dictates the height and width for the modal .modal-instance{ .modal-body{ display: none; } } .modal-container{ .transition(0.3s,linear); padding: 0; visibility: hidden; opacity: 0; z-index: 999; pointer-events: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; &.modal-active{ opacity: 1; visibility: visible; pointer-events: all; } &:before{ background: rgba(0,0,0,0.85); content: ''; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .modal-content{ backface-visibility: hidden; position: fixed; z-index: 2; top: 50%; left: 50%; max-height: 100%; overflow-y: scroll; border: none; .translate3d(-50%,-50%,0); &:not(.height--natural){ width: 50%; height: 50%; } padding: @default-modal-padding; border-radius: 0; box-shadow: none; .modal-close-cross{ cursor: pointer; position: absolute; opacity: .5; .transition(0.1s,linear); top: 1em; right: 1em; z-index: 99; &:before{ content: '\00D7'; font-size: 1.5em; } &:hover{ opacity: 1; } } &.imagebg:not(.image--light) .modal-close-cross{ &:before{ color: #fff; } } iframe{ width: 100%; outline: none; border: none; height: 100%; backface-visibility: hidden; &:first-child{ +.modal-close-cross{ &:last-child{ top: -@base-line-height*2; } } } } } } .modal-content{ &.section-modal{ pointer-events: none; [class*='col-']{ pointer-events: all; } } } @media all and (max-width: 767px){ .modal-container{ .modal-content{ width: 97% !important; height: auto !important; padding-top: 2em; padding-bottom: 2em; } } }framework_components/parallax.less000066600000001634152442520560013517 0ustar00.parallax > .background-image-holder, .parallax .slides li > .background-image-holder { height: 100%; min-height: 100vh; top: -50vh; transition: opacity 0.3s ease !important; -webkit-transition: opacity 0.3s ease !important; -webkit-transform-style: preserve-3d; } .parallax:first-child .slides li > .background-image-holder, .parallax:first-child .background-image-holder { top: 0; } .main-container > a:first-child + .parallax .background-image-holder { top: 0; } @media all and (max-width: 1024px) { .parallax > .background-image-holder, .parallax .slides li > .background-image-holder { -webkit-transition: transform 0.016s linear !important; transition: transform 0.016s linear !important; } .parallax.parallax-disable-mobile .background-image-holder, .parallax.parallax-disable-mobile .slides li > .background-image-holder{ top: 0 !important; transform: none !important; } }framework_components/boxed-layout.less000066600000001077152442520560014330 0ustar00// DESCRIPTION: // Add the class "boxed-layout" to the <body> element. @media all and (min-width: (@boxed-layout-width)){ body.boxed-layout{ padding: @base-line-height*2 0; background: darken(@color-bg-secondary, 5%); section:not([class*='bg-']):not(.imagebg),footer:not([class*='bg-']):not(.imagebg),nav:not([class*='bg-']):not(.bar--transparent):not(.bar--absolute),.tabs-container:not([class*='bg-']):not(.imagebg){ background: @color-bg-site; } .nav-container, .main-container, > section, nav{ max-width: @boxed-layout-width; margin: 0 auto; } } }framework_components/forms-v2.less000066600000011174152442520560013366 0ustar00// MARKUP: // // <form> // <input type="text" placeholder="Input Placeholder" name="name" /> // // <textarea></textarea> // // <div class="input-checkbox"> // <labeL>Y/N</label> // <div class="inner"></div> // <input type="checkbox" /> // </div> // // <div class="input-radio"> // <label>L</label> // <div class="inner"></div> // <input type="radio" name="radio" value="radio1" /> // </div> // // <div class="input-select"> // <i class="glyphicon glyphicon-chevron-down"></i> // <select> // <option selected="" value="Default">Select An Option</option> // <option value="Small">Small</option> // <option value="Medium">Medium</option> // <option value="Larger">Large</option> // </select> // </div> // // <button class="btn--primary" type="submit"> // <span class="btn__text"> // Submit form // </span> // </button> // // </form> form{ max-width: 100%; + form{ margin-top: 30px; } &:before,&:after{ content: "."; display: block; height: 0; overflow: hidden; } &:after{ clear: both; } } label{ margin: 0; font-size: @input-label-font-size; font-weight: @input-label-font-weight; } input[type],textarea,select{ -webkit-appearance: none; background: @input-background-color; padding: @input-padding; border-radius: @input-border-radius; &when (@inputs-have-border = true){ border: @input-border; } &when (@inputs-have-border = false){ border: none; } &:focus{ outline: none; } &:active{ outline: none; } .placeholder-text(@input-placeholder-color); } input[type="image"]{ border: none; padding: none; width: auto; } textarea{ display:block; width: 100%; max-width: 100%; } select{ cursor: pointer; padding-right: @input-padding * 4; -webkit-appearance: none; } select::ms-expand{ display: none; } input[type="submit"]{ background: none; outline: none; border: none; background: @color-primary; padding: @input-padding @button-padding-e @input-padding @button-padding-w; color: #fff; } @keyframes load{ 0% { opacity: 0; width: 0; } 50%{ width: 100%; opacity: .8; left: 0; } 100% { left: 100%; opacity: 0; } } button{ background: none; &[type="submit"]{ &.btn--loading{ position: relative; overflow: hidden; pointer-events: none; color: rgba(0,0,0,0); *{ opacity: 0; } &:after{ content: ''; position: absolute; width: 0; height: 100%; background: #ddd; animation: load 1.5s ease-out infinite; left: 0; top: 0; } .btn__text{ opacity: 0; } } } &:focus{ outline: none !important; } &.bg--error{ color: #fff; } } .input-icon{ position: relative; i{ .disable-select; cursor: default; position: absolute; } } .input-checkbox, .input-radio, .input-select{ .disable-select; display: inline-block; input{ opacity: 0 !important; height: 0 !important; width: 0 !important; position: absolute !important; } label{ display: block !important; cursor: pointer; } } .input-checkbox{ label{ width: @checkbox-width; height: @checkbox-height; border-radius: @checkbox-border-radius; background: #000; } padding: @checkbox-padding; } .input-radio{ label{ width: @radio-width; height: @radio-height; border-radius: @radio-border-radius; background: #000; } padding: @radio-padding; } .input-select{ position: relative; i{ position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 1em; font-size: .87em; } } .input-file{ position: relative; display: inline-block; input{ display: none; } } .form-error { margin-top: 1.5625em; padding: 0.78125em; background: #D84D4D; color: #fff; position: fixed; min-width: 350px; left: 50%; bottom: 1.5625em; transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); z-index: 999; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); } .form-success { margin-top: 1.5625em; padding: 0.78125em; background: #1DC020; color: #fff; position: fixed; min-width: 350px; left: 50%; bottom: 1.5625em; transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); z-index: 999; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); } .attempted-submit .field-error { border-color: #D84D4D !important; } .attempted-submit div.recaptcha.field-error { border-color: #D84D4D !important; border-style: solid; border: 1px solid; border-radius: 5px; padding: 5px; } div.recaptcha iframe { min-height: 0; }framework_components/typed-effect.less000066600000000757152442520560014277 0ustar00.typed-text{ display: inline-block; &.typed-text--cursor{ &:after{ content: '|'; font-size: 1.2em; -webkit-animation: blink 0.7s infinite; animation: blink 0.7s infinite; position: relative; right: 6px; } } } @keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } }framework_components/navigation-inpage.less000066600000003140152442520560015305 0ustar00.page-navigator{ position: fixed; padding: 0; top: 50%; transform: translateY(-50%); right: @base-line-height; z-index: 10; } .page-navigator ul{ display: inline-block; padding: @base-line-height/2; background: rgba(0,0,0,0.4); border-radius: @base-line-height; transition: all .2s ease; &:hover{ background: rgba(0,0,0,0.6); } li{ &:not(:last-child){ margin-bottom: @base-line-height; } } } @media all and (max-width: 767px){ .page-navigator{ right: 0; ul{ border-radius: @base-line-height 0 0 @base-line-height; padding: @base-line-height @base-line-height/2; } } } .page-navigator li a{ width: 8px; height: 8px; background: #fff; border-radius: 50%; transition: all .2s ease; display: block; position: relative; &:not(:hover){ opacity: .5; } &.inner-link--active{ opacity: 1; animation: bulge .5s ease; -webkit-animation: bulge .5s ease; } } @keyframes bulge{ 0%{ transform: scale(1); } 50%{ transform: scale(1.3); } 100%{ transform: scale(1); } } @-webkit-keyframes bulge{ 0%{ transform: scale(1); } 50%{ transform: scale(1.3); } 100%{ transform: scale(1); } } .page-navigator li a[data-title]{ &:before{ content: attr(data-title); position: absolute; right: 12px; top: -14px; background: #222; color: #fff; border-radius: 6px; padding: 4px 8px; display: inline-block; transition: all .2s ease; white-space: nowrap; } &:not(:hover){ &:before{ opacity: 0; transform: translateX(-20px); } } }framework_components/radials.less000066600000000336152442520560013330 0ustar00.radial{ position: relative; .radial__label{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); margin-bottom: 0; } }framework_components/images.less000066600000011764152442520560013165 0ustar00img{ max-width: 100%; margin-bottom: @base-line-height; } /*p+img, img:last-child{ margin-bottom: 0; }*/ .img--fullwidth{ width: 100%; } .imageGrid(@divider) when (@divider > 1){ .imageGrid((@divider - 1)); &[data-grid="@{divider}"]{ &.masonry{ -webkit-column-count: @divider; -webkit-column-gap: 0; -moz-column-count: @divider; -moz-column-gap: 0; column-count: @divider; column-gap: 0; li{ width: 100%; float: none; } } li{ width: percentage(1 / @divider); display: inline-block; } } } .imageGrid(8); @media all and (max-width:767px){ [data-grid]:not(.masonry) li{ width: 33.333333%; } [data-grid="2"]:not(.masonry) li{ width: 50%; } [data-grid].masonry{ -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } .background-image-holder{ position: absolute; &:not([class*='col-']){ width: 100%; } height: 100%; top: 0; left: 0; background-size: cover !important; background-position: 50% 50% !important; z-index: 0; transition: opacity .3s linear; -webkit-transition: opacity .3s linear; opacity: 0; background: @color-dark; &.background--bottom{ background-position: 50% 100% !important; } &.background--top{ background-position: 50% 0% !important; } } .image--light{ .background-image-holder{ background: none; } } .background-image-holder img{ display: none; } .overlay-strength(@value) when (@value > 0){ .overlay-strength((@value - 1)); &[data-overlay="@{value}"]{ &:before{ opacity: (@value / 10); } } } [data-overlay]{ position: relative; &:before{ position: absolute; content: ''; background: @color-dark; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } *:not(.container):not(.background-image-holder){ z-index: 2; } &.image--light{ &:before{ background: #fff; } } &.bg--primary{ &:before{ background: @color-primary; } } } .overlay-strength(10); [data-overlay="0"]{ &:before{ opacity: 0; } } .scrim-bottom-strength(@value) when (@value > 0){ .scrim-bottom-strength((@value - 1)); &[data-scrim-bottom="@{value}"]{ &:before{ opacity: (@value / 10); } } } [data-scrim-bottom]{ position: relative; &:before{ position: absolute; content: ''; width: 100%; height: 80%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, @color-dark 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,@color-dark)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,@color-dark 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,@color-dark 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,@color-dark 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,@color-dark 100%); bottom: 0; left: 0; z-index: 1; backface-visibility: hidden; } &:not(.image--light){ h1,h2,h3,h4,h5,h6{ .smart-text-color(@color-heading,50%); } p,span,ul{ .smart-text-color(@color-body,50%); } } &.image--light{ &:before{ background: #fff; } } } .scrim-bottom-strength(10); .scrim-top-strength(@value) when (@value > 0){ .scrim-top-strength((@value - 1)); &[data-scrim-top="@{value}"]{ &:before{ opacity: (@value / 10); } } } [data-scrim-top]{ position: relative; &:before{ position: absolute; content: ''; width: 100%; height: 80%; background: -moz-linear-gradient(bottom, @color-dark 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,@color-dark), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(bottom, @color-dark 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(bottom, @color-dark 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(bottom, @color-dark 0%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, @color-dark 0%,rgba(0,0,0,0) 100%); top: 0; left: 0; z-index: 1; } &:not(.image--light){ h1,h2,h3,h4,h5,h6{ color: #fff; } p,span,ul{ .smart-text-color(@color-body,50%); } } &.image--light{ &:before{ background: #fff; } } } .scrim-top-strength(10); .imagebg{ position: relative; .container{ &:not(.pos-absolute){ position: relative; } z-index: 2; } } .imagebg:not(.image--light){ h1,h2,h3,h4,h5,h6,p,ul,blockquote{ color: #fff; } } .imagebg:not(.image--light){ .bg--white{ h1,h2,h3,h4,h5,h6{ color: @color-dark; } p,ul{ color: @color-body; } } } div[data-overlay]{ h1,h2,h3,h4,h5,h6{ color: #fff; } p,ul{ color: #fff; } } .parallax{ overflow: hidden; .background-image-holder{ transition: none !important; -webkit-transition: none !important; -moz-transition: none !important; } } .image--xxs{ max-height: @base-line-height; } .image--xs{ max-height: @base-line-height*2; } .image--sm{ max-height: @base-line-height*3; } .image--md{ max-height: @base-line-height*4; }framework_components/colors.less000066600000004666152442520560013224 0ustar00body{ background: @color-bg-site; } .color--primary{ color: @color-primary !important; } a{ color: @color-primary; } &when (@has-primary-1 = true){ .color--primary-1{ color: @color-primary-1 !important; } } &when (@has-primary-2 = true){ .color--primary-2{ color: @color-primary-2 !important; } } .color--white{ color: #fff; } .color--dark{ color: @color-dark; } .color--success{ color: @color-success; } .color--error{ color: @color-error; } .bg--dark{ background: @color-dark; &:not(.nav-bar):not(.bar){ h1,h2,h3,h4,h5,h6,i,span:not(.btn__text),p{ color: @color-on-dark; } color: @color-on-dark; a:not(.btn){ color: #fff; } } } .bg--site{ background: @color-bg-site; } .bg--secondary{ background: @color-bg-secondary; } .bg--primary{ background: @color-primary; p,span,ul,a:not(.btn){ color: #fff; } h1,h2,h3,h4,h5,h6,i{ color: #fff; } .color--primary{ color: #fff !important; } } .bg--white{ background: #fff; p,span,ul,a:not(.btn){ color: @color-body; } h1,h2,h3,h4,h5,h6,i{ color: @color-dark; } } .bg--error{ background: @color-error; } .bg--success{ background: @color-success; } .imagebg:not(.image--light){ .bg--white{ p,span,ul,a:not(.btn){ color: @color-body; } h1,h2,h3,h4,h5,h6,i{ color: @color-dark; } } .bg--secondary{ background: rgba(red(@color-bg-secondary),green(@color-bg-secondary),blue(@color-bg-secondary),.2); } } &when (@has-primary-1 = true){ .bg--primary-1{ background: @color-primary-1; p,span,ul,a:not(.btn){ color: #fff; } h1,h2,h3,h4,h5,h6,i{ color: #fff; } } } &when (@has-primary-2 = true){ .bg--primary-2{ background: @color-primary-2; p,span,ul,a:not(.btn){ color: #fff; } h1,h2,h3,h4,h5,h6,i{ color: #fff; } } } .image-bg:not(.image-light){ *:not(a){ color: #fff; } } .color--facebook{ color: #3b5998; } .color--twitter{ color: #00aced; } .color--googleplus{ color: #dd4b39; } .color--instagram{ color: #125688; } .color--pinterest{ color: #cb2027; } .color--dribbble{ color: #ea4c89; } .color--behance{ color: #053eff; } .bg--facebook{ background: #3b5998; color: #fff; } .bg--twitter{ background: #00aced; color: #fff; } .bg--googleplus{ background: #dd4b39; color: #fff; } .bg--instagram{ background: #125688; color: #fff; } .bg--pinterest{ background: #cb2027; color: #fff; } .bg--dribbble{ background: #ea4c89; color: #fff; } .bg--behance{ background: #053eff; color: #fff; }framework_components/wizard.less000066600000001027152442520560013207 0ustar00// MARKUP FOR WIZARD // // <ol class="wizard"> // <li class="wizard__step"> // ... // </li> // </ol> // // .wizard__body{ list-style: none; } .wizard__step{ &:not(.active){ display: none; } .wizard__title{ display: none; } } .wizard__controls{ .clearfix; .wizard-prev{ float: left; } .wizard-next{ float: right; } .wizard-prev:hover, .wizard-next:hover{ transform: none !important; } .wizard-prev, .wizard-next{ &.inactive{ pointer-events: none; opacity: .3; cursor: not-allowed; } } }framework_components/bars.less000066600000005300152442520560012634 0ustar00// DESCRIPTION: // Defines the structure of bars for navigation / utility // // // MARKUP: // // <div class="bar"> // ... // </div> // // MODIFIERS: //.bar--sm - Add class to bar to make slightly smaller with larger logo //.bar--lg - Add class to bar to make taller with larger logo //.bar--xlg - Add class to bar to make much taller with larger logo .bar{ padding: @base-line-height 0; .logo{ margin: 0; position: relative; top: 4px; } .menu-horizontal{ position: relative; top: 6px; } &:not([class*='visible-']){ +.bar{ margin-top: @base-line-height/2; } } &.bar--xs{ padding: @base-line-height/4 0; } &.bar--sm{ padding: @base-line-height/2 0; } &.bar--lg{ padding: @base-line-height*1.5 0; .logo{ top: 0; } } &.bar--xlg{ padding: @base-line-height*2.5 0; .logo{ top: 0; } } &.bg--dark{ .logo-dark{ display: none; } } &:not(.bg--dark):not(.bar--transparent){ .logo-light{ display: none; } } } @media all and (max-width: 767px){ .bar{ &.bar--mobile-sticky[data-scroll-class*='fixed'].pos-fixed{ position: fixed; width: 100%; background: #fff; z-index: 999; } &.bar--mobile-sticky[data-scroll-class*='fixed'] + .bar.pos-fixed{ top: @base-line-height * 2; position: fixed; width: 100%; background: #fff; z-index: 999; } } } // Desktop @media all and (min-width: 991px){ .bar__module{ &:not(:only-child){ display: inline-block; } &:not(:last-child){ margin-right: @base-line-height/2; } } .bar--transparent:not(.bar--dark){ background: none; .logo-dark{ display: none; } .logo-light{ display: inline-block; } &:not(.pos-fixed){ .menu-horizontal{ > li{ > a, > span{ color: #fff; } } } .btn:not([class*='primary']){ .btn__text{ color: #fff; } border-color: rgba(255,255,255,.3); &:hover{ border-color: rgba(255,255,255,.7); } } } } .bar--absolute{ position: absolute; } .bar--absolute, .pos-fixed{ z-index: 99; width: 100%; } .bar{ &.pos-fixed{ position: fixed; top: 0; animation: fadeInDown .3s ease-out forwards; .box-shadow; &:not([class*='bg-']){ background: @color-bg-site; .logo-dark{ display: inline-block; } .logo-light{ display: none; } } &.bg--dark{ background: @color-dark; } } } } // Mobile @media all and (max-width: 767px){ .bar__module{ margin-bottom: @base-line-height/2; +.bar__module{ margin-top: @base-line-height; } .btn{ display: block; +.btn{ margin-left: 0 !important; } &:not(:last-child){ margin-bottom: @base-line-height/2; } } } .bar{ +nav.bar{ padding-top: 0; } } }framework_components/twitter.less000066600000000611152442520560013407 0ustar00// MARKUP // // <div class="twitter-feed twitter-feed--slider"> // <div class="tweets-feed" data-widget-id="492085717044981760"></div> // </div> // // MODIFIERS: // .twitter-feed--slider - make each tweet a slide // [data-widget-id] - a uninque widget ID obtained from twitter .twitter-feed{ .user{ display: none; } .interact{ display: none; } .timePosted{ font-size: .87em; } }framework_components/menus.less000066600000001623152442520560013040 0ustar00.menu-horizontal{ > li{ &:not(:hover){ >a,>span,>.modal-instance>.modal-trigger{ opacity: .5; } } >a,>span,>.modal-instance>.modal-trigger{ .transition(0.3s,ease); color: @color-heading; &:hover{ color: @color-heading; } } } } .bg--dark{ .menu-horizontal{ >li{ >a,>span{ color: #fff; &:hover{ color: #fff; } } } } } .menu-vertical{ width: 100%; li{ width: 100%; a{ font-weight: normal; } } } @media all and (min-width: 990px){ .menu-horizontal{ display: inline-block; >li{ display: inline-block; &:not(:last-child){ margin-right: @base-line-height; } } } .menu-vertical{ display: inline-block; li{ white-space: nowrap; } .dropdown__container{ top: 0; .dropdown__content:not([class*='bg-']){ background: @color-bg-site; } .dropdown__content{ transform: translateX(75%); } } } }framework_components/flickity.less000066600000006153152442520560013532 0ustar00.heightSlides(@number) when (@number > 0){ .heightSlides((@number - 1)); @multiplier: @number*10; &.height-@{multiplier}{ height: auto; .slides .flickity-slider > li{ height: @number*10vh; padding: 0; } } @media all and (min-width: 768px){ &.height-@{multiplier}{ .slides li.imagebg{ min-height: @number*10vh; } } } } .slides:not(.flickity-enabled){ li.imagebg:not(:first-child){ display: none; } li.imagebg:first-child{ .container{ opacity: 0; } background: @color-dark; animation: backgroundLoad .5s ease alternate infinite; } } @keyframes backgroundLoad{ 0%{ background: @color-dark; } 100%{ background: lighten(@color-dark, 10%) } } .slider{ .heightSlides(10); .slides{ .flickity-slider{ > li{ &:not([class*='col-']){ width: 100%; } } } &.slides--gapless{ li[class*='col-']{ padding-left: 0; padding-right: 0; } } } &[data-arrows="true"]{ &.slider--arrows-hover{ &:not(:hover){ .flickity-prev-next-button{ opacity: 0; } } } } &[data-paging="true"]{ &:not(section){ margin-bottom: @base-line-height*2; .flickity-page-dots{ bottom: -@base-line-height*2; } } &:not([class*='text-']){ .flickity-page-dots{ text-align: center; } } } &[data-children="1"]{ .flickity-prev-next-button{ display: none; } } &:not([data-paging="true"]){ .slides{ margin: 0; } } &.controls--dark{ .flickity-page-dots{ .dot{ background: @color-dark; } } .flickity-prev-next-button{ &:before{ color: @color-dark; } } } } section.slider{ padding: 0; .heightSlides(10); &[data-paging="true"]{ .flickity-page-dots{ bottom: @base-line-height; } } &:not(.image--light){ &[data-paging="true"]{ .flickity-page-dots{ .dot{ background: #fff; } } } } .slides{ margin: 0; } } @media all and (max-width: 767px){ section.slider{ &[class*='height-']{ .slides .flickity-slider > li{ height: auto; padding: @standard-space-n 0; } } &.space--lg{ .slides .flickity-slider > li{ padding: @standard-space-mobile * 2 0; } } &.space--xlg{ .slides .flickity-slider > li{ padding: @standard-space-mobile * 2 0; } } } } section.bg--dark,section.bg--primary{ .slider{ &[data-paging="true"]{ .flickity-page-dots{ .dot{ background: #fff; } } } } } .flickity-page-dots{ .dot{ .transition(0.3s,ease); width: @slider-paging-height; height: @slider-paging-width; border-radius: @slider-paging-radius; background: @slider-paging-bg; border: @slider-paging-border; margin: 0 @slider-paging-spacing; &:hover{ &:not(.is-selected){ opacity: .6; } } } } .text-center, section.slider{ .flickity-page-dots{ text-align: center; } } .flickity-prev-next-button{ svg{ display: none; } &:before{ font-family: @slider-arrow-font; content: @slider-arrow-right; font-size: @slider-arrow-size; font-weight: normal; } &.previous{ &:before{ content: @slider-arrow-left; } } } .imagebg:not(.image--light),.bg--dark{ .flickity-page-dots{ .dot{ background: #fff; } } }framework_components/transitions.less000066600000001121152442520560014257 0ustar00// MARKUP: // // <section class="transition--NAME">...</section> // // // MODIFIERS: // --fade - will fade the transition element in with opacity // --scale - will make the element grow to full size on load // --slide - will bring the content in from the right-side on load [class*='transition--']{ .transition(0.3s,ease); opacity: 0; &.transition--active{ opacity: 1; } } .transition--scale{ .scale(.98); &.transition--active{ opacity: 1; .scale(1); } } .transition--slide{ .translate3d(200px,0,0); .translate3d(30vw,0,0); &.transition--active{ .translate3d(0,0,0); } }framework_components/hover-elements.less000066600000001505152442520560014645 0ustar00// MARKUP: // // <div class="hover-element"> // <div class="hover-element__initial"> // .. // </div> // // <div class="hover-element__reveal"> // .. // </div> // </div> // // // // MODIFIERS: // .hover--active - simulates a permanent hover on the element .hover-element{ position: relative; overflow: hidden; margin-bottom: 30px; *{ .transition(0.3s,ease); } .hover-element__reveal{ position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; .boxed{ height: 100%; } } &:hover,&.hover--active{ .hover-element__reveal{ opacity: 1; } } img{ margin-bottom: 0; } } @media all and (max-width: 1024px){ .hover-element{ cursor: pointer; } } .row{ &:last-child{ div[class*='col-']{ &:last-child{ .hover-element{ margin-bottom: 0; } } } } }framework_components/spacing.less000066600000004301152442520560013331 0ustar00section,footer{ padding-top: @standard-space-n; padding-bottom: @standard-space-s; &.space--xxs{ padding-top: @standard-space-n/4; padding-bottom: @standard-space-n/4; } &.space--xs{ padding-top: @standard-space-n/2; padding-bottom: @standard-space-n/2; } &.space--sm{ padding-top: @standard-space-n/1.5; padding-bottom: @standard-space-n/1.5; } &.space--md{ padding-top: @standard-space-n *1.5; padding-bottom: @standard-space-n *1.5; } &.space--lg{ padding-top: @standard-space-n * 2; padding-bottom: @standard-space-n * 2; } &.space--xlg{ padding-top: @standard-space-n * 4; padding-bottom: @standard-space-s * 4; } &.space--0{ padding: 0; } &.section--even{ padding-top: @standard-space-s; padding-bottom: @standard-space-s; } &.space-bottom--sm{ padding-bottom: @standard-space-n/1.5; } } @media all and (max-width: 767px){ section,footer,section.section--even{ padding: @standard-space-mobile 0; &.space--lg,&.space--md{ padding: @standard-space-mobile 0; } &.space--xlg{ padding: @standard-space-mobile * 1.5 0; } } } // Bootstrap nested columns div[class*='col-'] > div[class*='col-']:first-child{ padding-left: 0; } div[class*='col-'] > div[class*='col-']:last-child{ padding-right: 0; } // Bootstrap six col fix @media all and (max-width: 767px){ .col-xs-6:nth-child(odd){ padding-right: 7.5px; } .col-xs-6:nth-child(even){ padding-left: 7.5px; } } // Spacing Classes @media all and (min-width: 768px){ .mt--1{ margin-top: @base-line-height; } .mt--2{ margin-top: @base-line-height*2; } .mt--3{ margin-top: @base-line-height*3; } .mb--1{ margin-bottom: @base-line-height; } .mb--2{ margin-bottom: @base-line-height*2; } .mb--3{ margin-bottom: @base-line-height*3; } } @media all and (max-width: 990px){ .mt--1,.mt--2{ margin-top: @base-line-height; } .mt--3{ margin-top: @base-line-height*1.5; } } .unpad{ padding: 0; } .unpad--bottom{ padding-bottom: 0; } .unpad--top{ padding-top: 0; } section{ &.unpad--bottom{ padding-bottom: 0; } &.unpad{ padding: 0; } &.unpad--top{ padding-top: 0; } } .unmarg--bottom{ margin-bottom: 0; } .unmarg{ margin: 0; } .unmarg--top{ margin-top: 0; } framework_components/breadcrumbs.less000066600000000402152442520560014174 0ustar00.breadcrumb{ padding: 0; margin: 0; background: none; display: inline-block; li{ font-size: @breadcrumb-font-size; &when(@breadcrumbs-uppercase = true){ text-transform: uppercase; } } li+li:before{ padding: 0 @breadcrumb-item-padding; } }framework_components/alerts.less000066600000001722152442520560013203 0ustar00// MARKUP: // // <div class="alert"> // <div class="alert__body"></div> // <div class="alert__close"></div> // </div> // // MODIFIERS: // // .bg--error, .bg--success, .bg--primary .alert{ overflow: hidden; border: 1px solid darken(@color-bg-site, 10%); padding: @base-line-height/2; .alert__body, .alert__close{ display: inline-block; user-select: none; } .alert__body{ float: left; } .alert__close{ float: right; cursor: pointer; } &.bg--error{ background: lighten(@color-error, 40%); border-color: @color-error; .alert__close{ color: @color-error; } } &.bg--success{ background: lighten(@color-success, 40%); border-color: @color-success; .alert__close{ color: @color-success; } } &.bg--primary{ background: lighten(@color-primary, 40%); border-color: @color-primary; .alert__body{ > span{ color: @color-body; } } .alert__close{ color: @color-primary; } } &.alert--dismissed{ display: none; } }framework_components/reset.less000066600000000066152442520560013033 0ustar00*,h1,h2,h3,h4,h5,h6,p,ul,a{ margin: 0; padding: 0; }framework_components/size.less000066600000001547152442520560012670 0ustar00.height-100,.height-90,.height-80,.height-70,.height-60,.height-50,.height-40,.height-30,.height-20,.height-10{ height: auto; padding: 5em 0; } @media all and (max-width: 767px){ .height-100,.height-90,.height-80,.height-70,.height-60,.height-50,.height-40,.height-30,.height-20,.height-10{ height: auto; padding: 4em 0; } } .heightClasses(@number) when (@number > 0){ .heightClasses((@number - 1)); @multiplier: @number*10; .height-@{multiplier}{ height: @number*10vh; } } @media all and (min-height: 600px) and (min-width: 767px){ .heightClasses(10); } section.height-auto{ height: auto; .pos-vertical-center{ top: 0; position: relative; transform: none; } } @media all and (max-width: 767px){ div[class*='col-'][class*='height-']{ padding-top: @standard-space-mobile !important; padding-bottom: @standard-space-mobile !important; } }framework_components/lists.less000066600000000431152442520560013043 0ustar00ul{ &:last-child{ margin: 0; } } .list-inline li{ padding: 0 1em; margin-left: 0; &:first-child{ padding-left: 0; } &:last-child{ padding-right: 0; } } .list-inline.list-inline--narrow li{ padding: 0 .5em; } .list-inline.list-inline--wide li{ padding: 0 2em; }framework_components/maps.less000066600000000221152442520560012642 0ustar00.map-container{ position: relative; overflow: hidden; iframe, .map-canvas{ position: absolute; width: 100%; height: 100%; top: 0; } }framework_components/image-blocks.less000066600000003645152442520560014254 0ustar00// MARKUP: // // <section class="image-block"> // <div class="image-block__content pos-left"> // ... // </div> // // <div class="container"> // ... // </div> // </section> // // MODIFIERS: // .pos-left,.pos-right,.col-* - Adjust the position and width of the image blocks content on the '.imaeg-block__content' element. .imageblock{ position: relative; padding: 0; > .container, > div[class*='col-']:not(.imageblock__content){ padding-top: @standard-space-n; padding-bottom: @standard-space-s; float: none; overflow: hidden; } &.imageblock--lg{ > .container, > div[class*='col-']:not(.imageblock__content){ padding-top: @standard-space-s * 1.25; padding-bottom: @standard-space-s * 1.25; float: none; overflow: hidden; } } .imageblock__content{ position: absolute; height: 100%; top: 0; z-index: 2; padding: 0; .slider{ position: absolute; width: 100%; height: 100%; top: 0; .slides{ > li{ padding: 0; min-height: 100%; position: absolute !important; } } } } &.allow-overflow{ .imageblock__content{ overflow: visible; } } } @media all and (max-height: 728px){ .imageblock{ > .container, > div[class*='col-']:not(.imageblock__content){ padding-top: @standard-space-n/2; padding-bottom: @standard-space-s/2; } } } @media all and (max-width: 767px){ .imageblock{ &[class*='space-']{ padding-bottom: 0; padding-top: 0; } .imageblock__content{ position: relative; min-height: @base-line-height * 10; } > .container, > div[class*='col-']:not(.imageblock__content){ padding-top: @standard-space-mobile; padding-bottom: @standard-space-mobile; float: none; overflow: hidden; } &.imageblock--lg{ > .container, > div[class*='col-']:not(.imageblock__content){ padding-top: @standard-space-mobile; padding-bottom: @standard-space-mobile; float: none; overflow: hidden; } } } }framework_components/mixins.less000066600000004164152442520560013223 0ustar00.transition(@time,@ease){ transition: @time @ease ; -webkit-transition: @time @ease ; -moz-transition: @time @ease ; } .rotate(@amount){ transform: rotate(@amount); -webkit-transform: rotate(@amount); } .scale(@amount){ transform: scale(@amount); -webkit-transform: scale(@amount); } .translate3d(@x,@y,@z){ transform: translate3d(@x,@y,@z); -webkit-transform: translate3d(@x,@y,@z); } .placeholder-text(@color){ &::-webkit-input-placeholder { color: @color; font-size: @input-placeholder-size; } &:-moz-placeholder { /* Firefox 18- */ color: @color; font-size: @input-placeholder-size; } &::-moz-placeholder { /* Firefox 19+ */ color: @color; font-size: @input-placeholder-size; } &:-ms-input-placeholder { color: @color; font-size: @input-placeholder-size; } } .disable-select() { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .smart-text-color (@color,@amount) when (lightness(@color) >= 50%) { color: darken(@color,@amount); } .smart-text-color (@color,@amount) when (lightness(@color) < 50%) { color: lighten(@color,@amount); } .smart-text-color (@color,@amount) when (lightness(@color) < 20%) { color: lighten(@color,80%); } .translate3d(@x,@y,@z){ transform: translate3d(@x,@y,@z); -webkit-transform: translate3d(@x,@y,@z); } .animation(@name,@duration,@timing,@delay,@fillmode){ animation: @name @duration @timing @delay @fillmode; -webkit-animation: @name @duration @timing @delay @fillmode; -moz-animation: @name @duration @timing @delay @fillmode; } .box-shadow(@level: 1){ & when (@level = 1) { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } & when (@level = 2) { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } & when (@level = 3) { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } & when (@level = 4) { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } & when (@level = 5) { box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } }framework_components/video.less000066600000014244152442520560013022 0ustar00// MARKUP FOR LOCAL VIDEO BACKGROUNDS // // <section || div class="videobg imagebg"> // <div class="background-image-holder"> // <img /> // </div> // // <video autoplay muted loop>...</video> // </section || /div> // // // MARKUP FOR YOUTUBE BACKGROUNDS // // <section || div class="videobg imagebg"> // <div class="background-image-holder"> // <img /> // </div> // // <div class="youtube-background" data-video-url="9d8wWcJLnFI" data-start-at="0"></div> // </section || /div> // // // MODIFIERS: // [data-video-url] - the unique ID for the video obtained from Youtube // [data-start-at] - at what point through the video (in seconds) do you want it to start playing // // // MARKUP FOR VIDEO COVERS // // <div class="video-cover"> // <div class="background-image-holder"> // <img /> // </div> // // <div class="video-play-icon video-play-icon--dark"></div> // // <video>...</video> || <iframe></iframe> // </div> // // // MODIFIERS: // .video-play-icon--dark - make the play icon dark instead of white // .video-play-icon--sm - make the play icon smaller iframe{ width: 100%; min-height: 350px; border: none; } @media all and (max-width: 767px){ iframe{ min-height: 220px; } } .videobg{ background: @color-dark; position: relative; overflow: hidden; .container, .background-image-holder{ opacity: 0; .transition(0.3s,linear); } .background-image-holder{ opacity: 0 !important; } &.video-active{ .container{ opacity: 1; } .loading-indicator{ opacity: 0; visibility: hidden; } } video{ object-fit: cover; height: 100%; min-width: 100%; position: absolute; top: 0; z-index: 0 !important; left: 0; } } @media all and (max-width: 1024px){ .videobg{ .background-image-holder, .container{ opacity: 1 !important; } .loading-indicator{ display: none; } video{ display: none; } } } .youtube-background{ position: absolute; height: 100%; width: 100%; top: 0; z-index: 0 !important; .mb_YTPBar{ opacity: 0; height: 0; visibility: hidden; } } @media all and(max-width: 1024px){ .youtube-background{ display: none; } } .loading-indicator{ position: absolute !important; top: 50%; left: 50%; z-index: 99 !important; width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; background-color: #fff; border-radius: 100%; -webkit-animation: loading-spinner 1.0s infinite ease-in-out; animation: loading-spinner 1.0s infinite ease-in-out; .transition(0.3s,linear); } @-webkit-keyframes loading-spinner { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes loading-spinner { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; } } .video-cover{ position: relative; video{ max-width: 100%; } iframe{ background: @color-dark; } .background-image-holder{ z-index: 3; } .video-play-icon{ position: absolute; top: 50%; left: 50%; .translate3d(-50%,-50%,0); } .video-play-icon, .background-image-holder{ .transition(.3s,linear); } &.reveal-video{ .video-play-icon, .background-image-holder{ opacity: 0 !important; pointer-events: none; } } &[data-scrim-bottom],&[data-overlay],&[data-scrim-top]{ &:before{ .transition(0.3s,linear); z-index: 4; } } &.reveal-video{ &[data-scrim-bottom],&[data-overlay],&[data-scrim-top]{ &:before{ opacity: 0; pointer-events: none; } } } } .video-play-icon{ width: @play-icon-width-height; height: @play-icon-width-height; border-radius: 50%; position: relative; z-index: 4; display: inline-block; border: @play-icon-border; cursor: pointer; &.video-play-icon--sm{ width: @play-icon-width-height / 2; height: @play-icon-width-height / 2; &:before{ border-width: @play-icon-triangle/1.5 0 @play-icon-triangle/1.5 @play-icon-triangle * 1.5; } } &.video-play-icon--xs{ width: @play-icon-width-height / 4; height: @play-icon-width-height / 4; &:before{ border-width: @play-icon-triangle/2 0 @play-icon-triangle/2 @play-icon-triangle * 1; margin-left: -3px; } } &.bg--primary{ &:before{ border-color: transparent transparent transparent #fff; } } &when (@play-icon-filled = true){ background: @play-icon-default-color; } &:before{ position: absolute; top: 50%; margin-top: -@play-icon-triangle + 1; left: 50%; margin-left: -@play-icon-triangle + 2; content: ''; width: 0; height: 0; border-style: solid; border-width: @play-icon-triangle 0 @play-icon-triangle @play-icon-triangle*2; border-color: transparent transparent transparent @play-icon-default-color; &when (@play-icon-filled = true){ border-color: transparent transparent transparent darken(@play-icon-default-color,50%); } } &.video-play-icon--dark{ border-color: @color-dark; &:before{ border-color: transparent transparent transparent @color-dark; } &when (@play-icon-filled = true){ background: @color-dark; &:before{ border-color: transparent transparent transparent #fff; } } } } @media all and (max-width: 767px){ .video-play-icon{ width: @play-icon-width-height / 1.5; height: @play-icon-width-height / 1.5; } } .col-12:not([class*='col-lg']):not([class*='col-md']){ .video-cover{ iframe{ min-height: 550px; } } } @media all and (max-width: 990px){ div[class*='col-'][class*='-12']:not([class*='xs-12']){ .video-cover{ iframe{ min-height: 350px; } } } } div[class*='col-'][class*='-10']{ .video-cover{ iframe{ min-height: 450px; } } } div[class*='col-'][class*='-8']{ .video-cover{ iframe{ min-height: 400px; } } } div[class*='col-'][class*='-6']{ .video-cover{ iframe{ min-height: 350px; } } } @media all and (max-width: 1200px){ div[class*='col-'][class*='-6']{ .video-cover{ iframe{ min-height: 300px; } } } } @media all and (max-width: 990px){ div[class*='col-'][class*='-6']{ .video-cover{ iframe{ min-height: 220px; } } } } @media all and (max-width: 767px){ div[class*='col-']{ .video-cover{ iframe{ min-height: 220px !important; } } } } .modal-container{ video{ max-width: 100%; } }framework_components/newsletter-providers.less000066600000001204152442520560016113 0ustar00form[action*='createsend.com']{ *{ .transition(0.3s,linear); opacity: 0; } &.form--active{ *{ opacity: 1; } } .input-checkbox{ + br{ display: none; } } &.no-labels{ label{ display: none } } br{ display: none; } p{ > label{ &:first-child{ margin-bottom: @base-line-height / 2; } } } } form[action*='list-manage.com']{ h2{ .h4; } .input-group{ ul{ overflow: hidden; li{ float: left; } } } *{ .transition(0.3s,linear); opacity: 0; } &.form--active{ *{ opacity: 1; } } &.no-labels{ label{ display: none } } .small-meta{ font-size: 0.5em; } }framework_components/icons.less000066600000000247152442520560013025 0ustar00.icon{ line-height: 1em; font-size: @icon-md-size; } .icon--xs{ font-size: 1em; } .icon--sm{ font-size: @icon-sm-size; } .icon--lg{ font-size: @icon-lg-size; }framework_components/lightbox-images.less000066600000001175152442520560014776 0ustar00// MARKUP: // // <ul class="ligtbox-gallery gallery--gaps masonry" data-grid="6"> // <li> // <a href="big-image.jpg" data-lightbox="gallery name"> // <img /> // </a> // </li> // </ul> // // // MODIFIERS: // .gallery--gaps - make whitespace around each item // .masonry - arrange the items in a masonry layout // [data-grid] - how many items per row .lb-outerContainer{ border-radius: 0; .lb-container{ padding: 0; img{ margin: 0; } } } .lightbox-gallery{ overflow: hidden; li{ float: left; img{ margin: 0; width: 100%; } } &.gallery--gaps{ li{ padding: @default-gap-padding; } } }framework_components/helpers.less000066600000001327152442520560013354 0ustar00.clearfix{ overflow: hidden; } .clearfix-after{ &:after{ content: ""; display: table; clear: both; } } .allow-overflow{ overflow: visible; } .container{ .row--gapless{ padding-left: 15px; padding-right: 15px; > div[class*='col-']{ padding: 0; } } } @media all and (max-width: 767px){ .text-left-xs{ text-align: left; } } @media all and (max-width: 991px){ .text-left-sm{ text-align: left; } } section{ > .row--gapless{ padding-left: 0; padding-right: 0; > div[class*='col-']{ padding: 0; } } } div{ &.right{ float: right; } &.left{ float: left; } } section.text-right{ > .container:last-child > .row:only-child > div[class*='col-']:only-child{ float: right; } }framework_components/variables.less000066600000010671152442520560013664 0ustar00//////// Colours @color-bg-site: #fff; @color-primary: #3d9076; @color-primary-1: #383659; @color-primary-2: #353440; @color-dark: #222; @color-bg-secondary: #f4f4f4; @color-on-dark: #f5f5f5; @has-primary-1: true; @has-primary-2: true; //////// Typography @base-font-size: percentage(16/16); // change first value to pixel font size @base-font-size-px: 16px; // the first value from above; @base-font-size-mobile: percentage(14/16); // change first value to pixel font size @base-font-size-mobile-px: 14px; // the first value from above; @base-line-height: 1.6875em; @body-font: 'Helvetica Neue'; @heading-font: 'Helvetica Neue'; @button-font: 'Helvetica Neue'; @nav-item-font: 'Helvetica Neue'; @h1-size: 4.25em; @h2-size: 2.625em; @h3-size: 1.625em; @h4-size: 1em; @h5-size: 1em; @h6-size: 1em; @ligatures-active: true; @h1-line-height: 1.171875em; @h2-line-height: 0.9em; @h3-line-height: 1.171875em; @h4-line-height: 0.92em; @h5-line-height: 1em; @h6-line-height: 2.272272272em; @p-lead-size: 1.4375em; @p-lead-line-height: 0.92em; @blockquote-size: @h3-size; @blockquote-line-height: @h3-line-height; @fine-print-size: 1em; @ul-line-height: 2.34375em; @color-body: #666; @color-heading: #222; @heading-uppercase: false; @heading-weight: 600; @body-font-weight: 400; @strong-font-weight: 600; //////// Standard Space @standard-space-n: 5 * @base-line-height; @standard-space-s: 5 * @base-line-height; @standard-space-mobile: 2 * @base-line-height; //////// Boxed Layouts @boxed-layout-width: 1280px; //////// Buttons @buttons-uppercase: false; @button-radius: 0; @button-padding-n: @base-line-height * .5; @button-padding-s: @base-line-height * .6; @button-padding-e: @base-line-height; @button-padding-w: @base-line-height; @border-width: 1px; @button-text-size: 1em; @button-font-weight: 400; @button-spacing: @base-line-height/2; //////// Icon @icon-sm-size: 1em; @icon-md-size: @h3-size; @icon-lg-size: @h1-size; //////// Nav Bar @nav-uppercase-menu: false; @nav-bg-color: #fff; @navbar-height: 70px; // in pixels (not em) // for navs not constrained to container @nav-padding-e: @base-line-height * 2; @nav-padding-w: @base-line-height * 2; @nav-logo-size: 70%; // default 70%; @nav-item-padding: @base-line-height; // default 1em @nav-item-font-size: 1em; // default 1em @nav-item-font-weight: 400; // default 400 @nav-item-letter-spacing: 0px; // default 0 @nav-dropdown-width: 8 * @base-line-height; // default 12em @nav-dropdown-bottom-padding: @base-line-height; //////// Forms @input-label-font-size: 1em; @input-label-font-weight: 400; @inputs-have-border: true; @input-padding: 1em; @input-border-radius: 0; @input-border: 1px solid #ccc; @input-background-color: #fff; @input-placeholder-color: lighten(@color-body,20%); @input-placeholder-size: 1em; @checkbox-height: @base-line-height; @checkbox-width: @base-line-height; @checkbox-border-radius: 0; @checkbox-padding: @base-line-height/2; @radio-height: @base-line-height; @radio-width: @base-line-height; @radio-border-radius: 50%; @radio-padding: @base-line-height/2; //////// Accordions @accordion-title-padding: @base-line-height/2; @accordion-title-border: 1px solid; @accordion-title-bg: none; @accordion-title-bg-active: #eee; @accordion-content-padding: @base-line-height; //////// Breadcrumbs @breadcrumbs-uppercase: false; @breadcrumb-item-padding: @base-line-height; // space between breadcrumbs @breadcrumb-font-size: 1em; //////// Tabs @tab-title-padding: 0 @base-line-height; // space between tabs //////// Boxes @box-padding: @base-line-height * 2; @box-border: 1px solid #aaa; @box-shadow-level: 1; // value from 1 - 5, shallow - deep //////// Image Grid Settings @default-gap-padding: @base-line-height/4; //////// Sliders @slider-paging-alignment: center; @slider-paging-height: @base-line-height/2; @slider-paging-width: @base-line-height/2; @slider-paging-radius: @base-line-height/2; @slider-paging-bg: none; @slider-paging-bg-active: #fff; @slider-paging-border: 2px solid #fff; @slider-paging-spacing: @base-line-height/4; // space between each paging button @slider-arrow-font: 'Helvetica'; @slider-arrow-right: '\2192'; @slider-arrow-left: '\2190'; @slider-arrow-size: 2em; //////// Video Styling @play-icon-default-color: #fff; @play-icon-filled: true; @play-icon-width-height: @base-line-height*3; @play-icon-border: 2px solid @play-icon-default-color; @play-icon-triangle: 6px; //////// Modals @default-modal-padding: 0; //////// Notifications @default-notification-padding: 0; framework_components/typography.less000066600000004640152442520560014121 0ustar00html{ font-size: @base-font-size; } @media all and (max-width: 768px){ html{ font-size: @base-font-size-mobile; } } body { font-size: 1em; line-height: @base-line-height; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: @body-font, 'Helvetica', 'Arial', sans-serif; color: @color-body; font-weight: @body-font-weight; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family: @heading-font, 'Helvetica', 'Arial', sans-serif; color: @color-heading; font-weight: @heading-weight; &when (@heading-uppercase = true){ text-transform: uppercase; } &when(@ligatures-active = true){ font-variant-ligatures: common-ligatures; } margin-top: 0; margin-bottom: 0; } h1,.h1 { font-size: @h1-size; line-height: @h1-line-height; } h2,.h2 { font-size: @h2-size; line-height: @h2-line-height; } h3,.h3 { font-size: @h3-size; line-height: @h3-line-height; } h4,.h4 { font-size: @h4-size; line-height: @h4-line-height; } h5,.h5 { font-size: @h5-size; line-height: @h5-line-height; } h6,.h6 { font-size: @h6-size; line-height: @h6-line-height; } .lead{ font-size: @p-lead-size; line-height: @p-lead-line-height; } @media all and (max-width: 767px){ h1,.h1{ font-size: @h2-size; line-height: @h2-line-height; } h2,.h2{ font-size: @h3-size; line-height: @h3-line-height; } h3,.h3{ font-size: @h4-size; line-height: @h5-line-height; } .lead{ font-size: @h4-size; line-height: @h4-line-height; } } p, ul, ol, pre, table, blockquote { margin-bottom: @base-line-height; } ul,ol{ list-style: none; line-height: @ul-line-height; } ul.bullets{ list-style: inside; } ol{ list-style-type: upper-roman; list-style-position: inside; } blockquote{ font-size: @blockquote-size; line-height: @blockquote-line-height; padding: 0; margin: 0; border-left: 0; } strong{ font-weight: @strong-font-weight; } hr{ margin: @base-line-height 0; border-color: @color-bg-secondary; } a:hover,a:focus,a:active{ text-decoration: none; outline: none; } /*! Typography -- Helpers */ .type--fade{ opacity: .5; } .type--uppercase{ text-transform: uppercase; } .type--bold{ font-weight: bold; } .type--italic{ font-style: italic; } .type--fine-print{ font-size: @fine-print-size; } .type--strikethrough{ text-decoration: line-through; opacity: .5; } .type--underline{ text-decoration: underline; } .type--body-font{ font-family: @body-font, 'Helvetica'; } framework_components/progress-horizontal.less000066600000001035152442520560015741 0ustar00// MARKUP // // <div class="twitter-feed twitter-feed--slider"> // <div class="tweets-feed" data-widget-id="492085717044981760"></div> // </div> // // MODIFIERS: // .twitter-feed--slider - make each tweet a slide // [data-widget-id] - a uninque widget ID obtained from twitter .progress-horizontal{ .clearfix-after; .progress-horizontal__bar{ position: relative; overflow: hidden; } .progress-horizontal__progress{ position: absolute; top: 0; left: 0; height: 100%; } .progress-horizontal__label{ } }framework_components/buttons.less000066600000007474152442520560013421 0ustar00// MARKUP: // // <a class="btn" href="#"> // <span class="btn__text">Button Title</span> // </a> // // MODIFIERS: // .btn--sm - smaller button // .btn--lg - larger button // .btn--primary,-1,-2 - modify the background and text color of the button .btn{ font-family: @button-font, 'Helvetica', 'Arial', sans-serif; .transition(0.1s,linear); border-radius: @button-radius; padding-top: @button-padding-n; padding-bottom: @button-padding-s; padding-right: @button-padding-e; padding-left: @button-padding-w; border: 1px solid @color-dark; border-width: @border-width; font-size: inherit; line-height: @base-line-height; .btn__text,i{ color: @color-heading; border-color: @color-heading; font-weight: @button-font-weight; font-size: @button-text-size; } &when(@buttons-uppercase = true){ text-transform: uppercase; } &[class*='col-']{ margin-left: 0; margin-right: 0; } &:active{ box-shadow: none; -webkit-box-shadow: none; } &.bg--facebook, &.bg--twitter, &.bg--instagram, &.bg--googleplus, &.bg--pinterest, &.bg--dribbble, &.bg--behance, &.bg--dark{ .btn__text{ color: #fff; i{ color: #fff; } } border-color: rgba(0,0,0,0) !important; &:hover{ opacity: .9; } } &.bg--error{ background: @color-error; border-color: @color-error !important; &:hover{ background: lighten(@color-error, 5%); border-color: lighten(@color-error, 5%) !important; color: #fff !important; } .btn__text{ color: #fff; i{ color: #fff; } } } } @media all and (min-width: 768px){ .btn{ &+.btn{ margin-left: @button-spacing; } } } .btn:first-child{ margin-left: 0; } .btn:last-child{ margin-right: 0; } .btn--xs{ padding-top: 0; padding-bottom: 0; padding-right: @button-padding-e/2; padding-left: @button-padding-w/2; } .btn--sm{ padding-top: @button-padding-n/1.5; padding-bottom: @button-padding-s/1.5; padding-right: @button-padding-e/1.5; padding-left: @button-padding-w/1.5; } .btn--lg{ padding-top: @button-padding-n*1.25; padding-bottom: @button-padding-s*1.25; padding-right: @button-padding-e*1.25; padding-left: @button-padding-w*1.25; .btn__text{ font-size: @button-text-size*1.25; } } // Primary .btn--primary, .btn--primary:visited{ background: @color-primary; border-color: @color-primary; .btn__text{ color: #fff; i{ color: #fff; } } } .btn--primary:hover{ background: lighten(@color-primary,5%); } .btn--primary:active{ background: darken(@color-primary,5%); } // Primary 1 & when (@has-primary-1 = true){ .btn--primary-1, .btn--primary-1:visited{ background: @color-primary-1; border-color: @color-primary-1; .btn__text{ color: #fff; } } .btn--primary-1:hover{ background: lighten(@color-primary-1,5%); } .btn--primary-1:active{ background: darken(@color-primary-1,5%); } } // Primary 2 & when (@has-primary-2 = true){ .btn--primary-2, .btn--primary-2:visited{ background: @color-primary-2; border-color: @color-primary-2; .btn__text{ color: #fff; } } .btn--primary-2:hover{ background: lighten(@color-primary-2,5%); } .btn--primary-2:active{ background: darken(@color-primary-2,5%); } } .btn--secondary{ background: @color-bg-secondary; border-color: @color-bg-secondary; &:hover{ background: lighten(@color-bg-secondary,2%); } &:active{ background: darken(@color-bg-secondary,2%); } } .btn--white{ background: #fff; color: @color-heading; border-color: #fff; i{ color: @color-heading; } } .btn--transparent{ background: none; border-color: rgba(0,0,0,0); padding-left: 0; padding-right: 0; &.btn--white{ .btn__text{ color: #fff; } } } .btn--unfilled{ background: none; &.btn--white{ .btn__text{ color: #fff; } i{ color: #fff; } } } // Floating .btn--floating{ position: fixed; bottom: @base-line-height*2; right: @base-line-height*2; z-index: 10; } framework_components/boxes.less000066600000002044152442520560013027 0ustar00// DESCRIPTION: // An easy way to create 'card' like content // that appears inside a padded box. // // // MARKUP: // // <div class="boxed"> // ... // </div> // // MODIFIERS: // .boxed--lg - place more padding on the box // .boxed--sm - place less padding on the box // .boxed--border - place a border around the box // .bg--primary, .bg--primary-1 etc. - Change the BG colour of the box .boxed{ position: relative; overflow: hidden; padding: @box-padding; margin-bottom: 30px; &.boxed--lg{ padding: @box-padding * 1.5; } &.boxed--sm{ padding: @box-padding / 1.5; } &.boxed--border{ border: @box-border; } >div[class*='col-']:first-child:not(.boxed){ padding-left: 0; } >div[class*='col-']:last-child:not(.boxed){ padding-right: 0; } } img + .boxed{ margin-top: -@base-line-height; } @media all and (max-width: 767px){ .boxed{ padding: @box-padding/1.5; margin-bottom: 15px; &.boxed--lg{ padding: @box-padding/1.5; } div[class*='col-']:not(.boxed){ padding: 0; } &:last-child{ margin-bottom: 15px; } } }framework_components/notifications.less000066600000006240152442520560014562 0ustar00// MARKUP // // <div class="notification col-*" data-animation="from-*"> // ... // <a class="notification-close">Shut It Down</a> // </div> // // MODIFIERS: // .pos-right,top,left,bottom - position the notification // .col-* - control the width of the notification // [data-animation] - from top,bottom,left,right .notification{ .box-shadow(@box-shadow-level); position: fixed; z-index: 99; pointer-events: none; padding: @default-notification-padding; margin: 1em; &:not([class*='bg-']){ background: #fff; } &[class*='col-']{ min-width: 400px; } opacity: 0; .transition(0.3s,linear); .notification-close-cross{ position: absolute; top: 1em; z-index: 99; right: 1em; cursor: pointer; .transition(0.1s,linear); opacity: .7; &:before{ content: '\00D7'; font-size: 1.5em; } &:hover{ opacity: 1; } } &.notification--reveal{ z-index: 99; pointer-events: initial; &[data-animation="from-bottom"]{ .animation(from-bottom,.3s,linear,0s,forwards); } &[data-animation="from-top"]{ .animation(from-top,.3s,linear,0s,forwards); } &[data-animation="from-left"]{ .animation(from-left,.3s,linear,0s,forwards); } &[data-animation="from-right"]{ .animation(from-right,.3s,linear,0s,forwards); } } &.notification--dismissed{ .animation(fade-out,.4s,linear,0s,forwards) !important; pointer-events: none; } } .bg--dark + .notification-close-cross{ &:before{ color: #fff; } } a[data-notification-link]{ text-decoration: none; &:hover{ text-decoration: none; } } @media all and (max-width: 767px){ .notification{ &[class*='col-']{ min-width: 0; } } } @keyframes from-bottom{ from{ .translate3d(0,100%,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @-moz-keyframes from-bottom{ from{ .translate3d(0,100%,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes from-bottom{ from{ .translate3d(0,100%,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @keyframes from-top{ from{ .translate3d(0,-100%,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @-moz-keyframes from-top{ from{ .translate3d(0,-100%,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes from-top{ from{ .translate3d(0,-100%,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @keyframes from-left{ from{ .translate3d(-100%,0,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @-moz-keyframes from-left{ from{ .translate3d(-100%,0,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes from-left{ from{ .translate3d(-100%,0,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @keyframes from-right{ from{ .translate3d(100%,0,0); opacity: 1; } to{ .translate3d(0,0,0); opacity: 1; } } @-moz-keyframes from-right{ from{ .translate3d(100%,0,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes from-right{ from{ .translate3d(100%,0,0); opacity: 0; } to{ .translate3d(0,0,0); opacity: 1; } } @keyframes fade-out{ 0%{ opacity: 1; } 100%{ opacity: 0;} } @-webkit-keyframes fade-out{ 0%{ opacity: 1; } 100%{ opacity: 0;} } @-moz-keyframes fade-out{ 0%{ opacity: 1; } 100%{ opacity: 0; } } framework_components/granim.less000066600000000330152442520560013160 0ustar00[data-gradient-bg]{ position: relative; background: @color-dark; > canvas{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; +.background-image-holder{ opacity: .2 !important; } } }framework_components/masonry.less000066600000001507152442520560013402 0ustar00// MARKUP: // // <div class="masonry"> // <div class="masonry__item col-*"> // ... // </div> // </div> // // MODIFIERS: // .modal-trigger[data-modal-id] - use any element to trigger a modal using its ID // [data-autoshow] - place on '.modal-container' outside the main container for autoshow modals // [data-width][data-height] - place on modal content to control height in % .masonry{ .masonry__container{ &.masonry--active{ .masonry__item{ opacity: 1; pointer-events: all; } } .masonry__item{ opacity: 0; pointer-events: none; } } .masonry__filters{ li{ display: inline-block; cursor: pointer; text-transform: capitalize; .disable-select(); &.active{ cursor: default; } } } &.masonry--gapless{ .masonry__item{ padding: 0 !important; margin-bottom: 0; } } }framework_components/accordions.less000066600000002225152442520560014034 0ustar00// MARKUP: // // <ul class="accordion"> // <li> // <div class="accordion__title"> // <span>Title</span> // </div> // <div class="accordion__content"> // ... // </div> // </li> // </ul> // // MODIFIERS: // // .accordion--oneopen - means that only one panel can be open at once .accordion li{ .accordion__title, .accordion__content, .accordion__content *{ .transition(.3s,linear); } .accordion__title{ cursor: pointer; padding: @accordion-title-padding; border: @accordion-title-border; border-bottom: none; background: @accordion-title-bg; .disable-select; } &:last-child{ .accordion__title{ border-bottom: @accordion-title-border; } } .accordion__content{ opacity: 0; visibility: hidden; max-height: 0; >*{ display: none; } >*:first-child{ padding-top: @accordion-content-padding; } >*:last-child{ padding-bottom: @accordion-content-padding; } } } .accordion li.active{ .accordion__title{ background: @accordion-title-bg-active; border-bottom: @accordion-title-border; } .accordion__content{ opacity: 1; visibility: visible; max-height: 500px; >*{ display: inline-block; } } }theme-overrides.less000066600000005050152442520560010547 0ustar00// Core Elements (DO NOT REMOVE) @import "theme_components/customizers.less"; @import "theme_components/helpers.less"; @import "theme_components/animations.less"; @import "theme_components/sections.less"; @import "theme_components/typography.less"; @import "theme_components/colors.less"; @import "theme_components/links.less"; @import "theme_components/tables.less"; @import "theme_components/lists.less"; @import "theme_components/rules.less"; @import "theme_components/buttons.less"; @import "theme_components/images.less"; @import "theme_components/titles.less"; @import "theme_components/labels.less"; @import "theme_components/bars.less"; @import "theme_components/utilities.less"; // Modules (REMOVABLE) @import "theme_components/alerts.less"; @import "theme_components/navigation-menu-toggle.less"; @import "theme_components/navigation-utility.less"; @import "theme_components/navigation-stacked.less"; @import "theme_components/navigation-sidebar.less"; @import "theme_components/navigation-sidebar-column.less"; @import "theme_components/navigation-fullscreen.less"; @import "theme_components/dropdowns.less"; @import "theme_components/twitter.less"; @import "theme_components/instagram.less"; @import "theme_components/cards.less"; @import "theme_components/checkmarks.less"; @import "theme_components/icons.less"; @import "theme_components/tooltips.less"; @import "theme_components/boxes.less"; @import "theme_components/features-small.less"; @import "theme_components/features-large.less"; @import "theme_components/accordions.less"; @import "theme_components/tabs.less"; @import "theme_components/switchable.less"; @import "theme_components/cta.less"; @import "theme_components/videos.less"; @import "theme_components/modals.less"; @import "theme_components/notifications.less"; @import "theme_components/loader.less"; @import "theme_components/lightbox.less"; @import "theme_components/covers.less"; @import "theme_components/processes.less"; @import "theme_components/typed-text.less"; @import "theme_components/forms.less"; @import "theme_components/sliders.less"; @import "theme_components/radials.less"; @import "theme_components/pricing.less"; @import "theme_components/progress-horizontal.less"; @import "theme_components/maps.less"; @import "theme_components/testimonials.less"; @import "theme_components/masonry.less"; @import "theme_components/blog.less"; @import "theme_components/portfolio.less"; @import "theme_components/shop.less"; @import "theme_components/wizard.less"; @import "theme_components/footers.less";theme.less000066600000010160152442520560006545 0ustar00@import "framework_components/variables.less"; @import "theme-variables.less"; @import "framework_components/mixins.less"; /**!**************/ /**! Contents **/ /**! 01. Reset **/ /**! 02. Typography **/ /**! 03. Position **/ /**! 04. Element Size **/ /**! 05. Images **/ /**! 06. Buttons **/ /**! 07. Icons **/ /**! 08. Lists **/ /**! 09. Lightbox **/ /**! 10. Menus **/ /**! 11. Dropdowns **/ /**! 12. Form Elements **/ /**! 13. Accordions **/ /**! 14. Breadcrumbs **/ /**! 15. Radials **/ /**! 16. Tabs **/ /**! 17. Boxes **/ /**! 18. Sliders Flickity **/ /**! 19. Hover Elements **/ /**! 20. Masonry **/ /**! 21. Modals **/ /**! 22. Maps **/ /**! 23. Parallax **/ /**! 24. Notifications **/ /**! 25. Video **/ /**! 26. Colors **/ /**! 27. Image Blocks **/ /**! 28. MailChimp & Campaign Monitor **/ /**! 29. Twitter **/ /**! 30. Transitions **/ /**! 31. Switchable Sections **/ /**! 32. Typed Effect **/ /**! 33. Gradient BG **/ /**! 34. Bars **/ /**! 35. Navigation In Page **/ /**! 36. Helper Classes **/ /**! 37. Spacing **/ /**! 38. Boxed Layout **/ /**! 39. Wizard **/ /**! 40. Alerts **/ /**! 41. Progress - Horizontal **/ /**! 42. Theme Overrides **/ /**!**************/ /**!**************/ /**!**************/ /**! 01. Reset **/ @import "framework_components/reset.less"; /**! 02. Typography **/ @import "framework_components/typography.less"; /**! 03. Position **/ @import "framework_components/position.less"; /**! 04. Element Size **/ @import "framework_components/size.less"; /**! 05. Images **/ @import "framework_components/images.less"; /**! 06. Buttons **/ @import "framework_components/buttons.less"; /**! 07. Icons **/ @import "framework_components/icons.less"; /**! 08. Lists **/ @import "framework_components/lists.less"; /**! 09. Lightbox **/ @import "framework_components/lightbox-images.less"; /**! 10. Menus **/ @import "framework_components/menus.less"; /**! 11. Dropdowns **/ @import "framework_components/dropdowns.less"; /**! 12. Form Elements **/ @import "framework_components/forms-v2.less"; /**! 13. Accordions **/ @import "framework_components/accordions.less"; /**! 14. Breadcrumbs **/ @import "framework_components/breadcrumbs.less"; /**! 15. Pie Charts **/ @import "framework_components/radials.less"; /**! 16. Tabs **/ @import "framework_components/tabs.less"; /**! 17. Boxes **/ @import "framework_components/boxes.less"; /**! 18. Sliders Flickity **/ @import "framework_components/flickity.less"; /**! 19. Hover Elements **/ @import "framework_components/hover-elements.less"; /**! 20. Masonry **/ @import "framework_components/masonry.less"; /**! 21. Modals **/ @import "framework_components/modals.less"; /**! 22. Maps **/ @import "framework_components/maps.less"; /**! 23. Parallax **/ @import "framework_components/parallax.less"; /**! 24. Notifications **/ @import "framework_components/notifications.less"; /**! 25. Video **/ @import "framework_components/video.less"; /**! 26. Colors **/ @import "framework_components/colors.less"; /**! 27. Image Blocks **/ @import "framework_components/image-blocks.less"; /**! 28. MailChimp & Campaign Monitor **/ @import "framework_components/newsletter-providers.less"; /**! 29. Twitter **/ @import "framework_components/twitter.less"; /**! 30. Transitions **/ @import "framework_components/transitions.less"; /**! 31. Switchable Sections **/ @import "framework_components/switchable.less"; /**! 32. Typed Effect **/ @import "framework_components/typed-effect.less"; /**! 33. Gradient BG **/ @import "framework_components/granim.less"; /**! 34. Bars **/ @import "framework_components/bars.less"; /**! 35. Navigation InPage **/ @import "framework_components/navigation-inpage.less"; /**! 36. Helper Classes **/ @import "framework_components/helpers.less"; /**! 37. Spacing **/ @import "framework_components/spacing.less"; /**! 38. Boxed Layout **/ @import "framework_components/boxed-layout.less"; /**! 39. Wizard **/ @import "framework_components/wizard.less"; /**! 40. Alerts **/ @import "framework_components/alerts.less"; /**! 41. Progress - Horizontal **/ @import "framework_components/progress-horizontal.less"; /**! 42. Theme Overrides **/ @import "theme-overrides.less";theme-variables.less000066600000010436152442520560010521 0ustar00//////// Logo Width @logo-max-height: @base-line-height; // default @base-line-height, change to a pixel value (eg: 50px) for fine control //////// Colours @color-bg-site: #FFFFFF; @color-primary: #4A90E2; @color-primary-1: #31639C; @color-primary-2: #465773; @color-primary-3: #4A90E2; @color-dark: #252525; @color-bg-secondary: #FAFAFA; @color-on-dark: #FFFFFF; @has-primary-1: true; @has-primary-2: true; @color-error: #E23636; @color-success: #4EBF56; //////// Typography @base-font-size: percentage(14/16); // change first value to pixel font size @base-font-size-px: 14px; // the first value from above; @base-font-size-mobile: percentage(13/16); // change first value to pixel font size @base-font-size-mobile-px: 13px; // the first value from above; @base-line-height: 1.85714285714286em; @body-font: 'Open Sans'; @heading-font: 'Open Sans'; @button-font: 'Open Sans'; @nav-item-font: 'Open Sans'; @h1-size: 3.14285714285714em; @h2-size: 2.35714285714286em; @h3-size: 1.78571428571429em; @h4-size: 1.35714285714286em; @h5-size: 1em; @h6-size: 0.85714285714286em; @ligatures-active: true; @h1-line-height: 1.31818181818182em; @h2-line-height: 1.36363636363636em; @h3-line-height: 1.5em; @h4-line-height: 1.368421052631579em; @h5-line-height: @base-line-height; @h6-line-height: 2.16666666666667em; @p-lead-size: 1.35714285714286em; @p-lead-line-height: 1.68421052631579em; @blockquote-size: @h3-size; @blockquote-line-height: @h3-line-height; @fine-print-size: 0.85714285714286em; @ul-line-height: @base-line-height; @color-body: #666666; @color-heading: @color-dark; @heading-uppercase: false; @heading-weight: 300; @body-font-weight: 400; @strong-font-weight: 600; //////// Standard Space @standard-space-n: 4 * @base-line-height; @standard-space-s: 4 * @base-line-height; @standard-space-mobile: 3 * @base-line-height; //////// Boxed Layouts @boxed-layout-width: 1280px; //////// Buttons @buttons-uppercase: false; @button-radius: 6px; @button-padding-n: @base-line-height / 4; @button-padding-s: @base-line-height / 4; @button-padding-e: @base-line-height *1.5; @button-padding-w: @base-line-height *1.5; @border-width: 1px; @button-text-size: @h6-size; @button-font-weight: 700; @button-spacing: @base-line-height; //////// Icon @icon-sm-size: @h2-size; @icon-md-size: @h1-size; @icon-lg-size: 5.57142857142857em; //////// Forms @input-label-font-size: 1.14285714285714em; @input-label-font-weight: 400; @inputs-have-border: true; @input-padding: @base-line-height/4; @input-border-radius: 6px; @input-border: 1px solid #ECECEC; @input-background-color: #FCFCFC; @input-placeholder-color: lighten(@color-body, 30%); @input-placeholder-size: 1.14285714285714em; @checkbox-height: @base-line-height; @checkbox-width: @base-line-height; @checkbox-border-radius: 6px; @checkbox-padding: 0; @radio-height: @base-line-height; @radio-width: @base-line-height; @radio-border-radius: 50%; @radio-padding: 0; //////// Accordions @accordion-title-padding: @base-line-height/4 @base-line-height/2; @accordion-title-border: 1px solid #ECECEC; @accordion-title-bg: none; @accordion-title-bg-active: @color-primary; @accordion-content-padding: 0; //////// Breadcrumbs @breadcrumbs-uppercase: false; @breadcrumb-item-padding: @base-line-height/4; // space between breadcrumbs @breadcrumb-font-size: 1em; //////// Tabs @tab-title-padding: 0 @base-line-height; // space between tabs //////// Boxes @box-padding: @base-line-height; @box-border: 1px solid #ECECEC; @box-shadow-level: 1; // value from 1 - 5, shallow - deep //////// Image Grid Settings @default-gap-padding: @base-line-height/4; //////// Sliders @slider-paging-alignment: center; @slider-paging-height: 8px; @slider-paging-width: 8px; @slider-paging-radius: 50%; @slider-paging-bg: @color-dark; @slider-paging-bg-active: #fff; @slider-paging-border: none; @slider-paging-spacing: @base-line-height/4; // space between each paging button @slider-arrow-font: 'stack-interface'; @slider-arrow-right: "\e80c"; @slider-arrow-left: "\e80b"; @slider-arrow-size: 1em; //////// Video Styling @play-icon-default-color: #fff; @play-icon-filled: true; @play-icon-width-height: @base-line-height*4; @play-icon-border: 2px solid @play-icon-default-color; @play-icon-triangle: 6px; //////// Modals @default-modal-padding: 0; //////// Notifications @default-notification-padding: 0; theme_components/links.less000066600000000770152442520560012140 0ustar00/*! -- Stack Links -- */ a{ color: @color-primary; font-weight: 700; &:hover{ color: darken(@color-primary,10%); text-decoration: underline; } &.block{ font-weight: normal; text-decoration: none; color: @color-body; } } p a, span a, label a{ font-size: 1em; text-decoration: underline; font-weight: 400; line-height: @base-line-height; } p+a:not(.btn){ font-size: @h6-size; line-height: @h6-line-height; } .imagebg:not(.image--light){ a{ color: #fff; font-weight: 600; } }theme_components/loader.less000066600000001034152442520560012260 0ustar00/*! -- Stack Loader -- */ .loader{ border: 3px solid @color-primary; border-radius: 30px; height: 30px; left: 50%; margin: -15px 0 0 -15px; opacity: 0; position: fixed; z-index: 10; top: 50%; width: 30px; animation: pulsate .7s ease-out infinite; &.loader--fade{ opacity: 0; animation: none; } } @keyframes pulsate { 0% { transform: scale(.1); opacity: 0.0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }theme_components/cards.less000066600000003701152442520560012111 0ustar00/*! -- Stack Cards -- */ .card__top{ position: relative; overflow: hidden; } .card__action{ a{ color: @color-body; i{ color: @color-dark; font-size: 1em; } span{ position: relative; bottom: 2px; } text-decoration: none; .transition(0.3s,ease); &:not(:hover){ opacity: .5; } } } .card p a{ text-decoration: none; } .masonry__item{ .card.boxed{ margin-bottom: 0; } } .card-1{ .card__avatar{ img{ max-height: @base-line-height*1.5; margin-right: @base-line-height/4; margin-bottom: 0; } margin-bottom: @base-line-height/2; } .card__avatar, .card__meta{ display: inline-block; } .card__meta{ float: right; } .card__body{ img{ margin-bottom: @base-line-height/2; } h4{ margin-bottom: 0.342105263157895em; } border-bottom: 1px solid #ececec; padding-bottom: @base-line-height/2; margin-bottom: @base-line-height/2; } } .bg--dark{ .card-1{ .card__body{ border-color: lighten(@color-dark, 10%) } } } @media all and (max-width: 767px){ .card{ .list-inline:not(.social-list){ li{ display: inline-block; &:not(:first-child){ margin-left: @base-line-height/2; } } } } } .card-2{ .card__top{ img{ border-radius: 6px 6px 0 0; } } .card__body{ h4{ margin: 0; } p{ margin-top: @base-line-height/2; } border-bottom: 1px solid #ececec; padding-bottom: @base-line-height; } .card__bottom{ overflow: hidden; > div{ display: inline-block; width: 50%; float: left; } .h6{ margin-bottom: 0.541666666666667em; } } .card__body, .card__bottom{ padding: @base-line-height; border: 1px solid #ececec; } .card__body{ border-bottom: none; border-top: none; } .card__bottom{ border-radius: 0 0 6px 6px; padding: @base-line-height/2 @base-line-height; } .card__action{ i{ font-size: @h3-size; } } } .bg--dark{ .card-2{ .card__body, .card__bottom{ border-color: lighten(@color-dark, 10%) } } }theme_components/images.less000066600000003146152442520560012265 0ustar00/*! -- Stack Images -- */ img{ &:last-child{ margin-bottom: 0; } &.flag{ max-height: @base-line-height; } &.image--sm{ &:not(:last-child){ margin-bottom: @base-line-height/2; } } &.promo{ &.border--round{ border: 1px solid #ececec; } } } p.lead{ img{ max-height: 1.68421053em; } } .imagebg{ h1,h2,h3,h4,h5,h6{ position: relative; } &:not(.image--light){ span{ color: #fff; } } &.border--round{ overflow: hidden; } } section.parallax{ .row{ .background-image-holder{ transform: none !important; top: 0 !important; } } } .triptych{ &.border--round{ img{ position: relative; border-radius: 6px; width: 33.333333%; float: left; margin: 0; &:first-child,&:last-child{ } &:nth-child(2){ .scale(1.2); z-index: 2; .box-shadow-wide; } } } } .gallery{ >div[class*='col-']{ margin-bottom: 30px; } } .gallery-1{ overflow: hidden; position: relative; .gallery__image{ &:not(:last-child){ margin-bottom: 30px; } } > div[class*='col-']{ &:first-child{ > .gallery__image{ height: 800px; } } &:last-child{ > .gallery__image{ height: calc(800px/2 - 15); } } } } .gallery__image{ position: relative; overflow: hidden; } @media all and (max-width: 767px){ .gallery-1{ .gallery__image{ max-height: 300px; margin-bottom: 15px; &:not(:last-child){ margin-bottom: 15px; } } } } .section--ken-burns{ overflow: hidden; > .background-image-holder, > img:only-child{ animation: kenBurns 15s ease alternate infinite; -webkit-animation: kenBurns 15s ease alternate infinite; } }theme_components/boxes.less000066600000002354152442520560012140 0ustar00/*! -- Stack Boxes -- */ .boxed{ border-radius: 6px; .background-image-holder{ border-radius: 6px; } &:before{ border-radius: 6px; } &:not(:last-child){ margin-bottom: 30px; } &:not([class*='bg-']){ background: @color-bg-site; } &.bg--secondary{ .boxed{ background: @color-bg-secondary; } } } @media all and (min-width: 768px){ .switchable{ .imagebg{ .boxed{ padding-left: @base-line-height*3; } } } } .bg--dark,.imagebg:not(.image--light){ .boxed:not([class*='bg-']){ background: none; color: #fff; &.boxed--border{ border-color: lighten(@color-dark, 10%); } } .boxed{ &[class*='bg-']{ &.boxed--border{ border: none; } } } } .imagebg{ &:not(.image--light){ .boxed:not(.bg--white):not(.bg--none){ background: rgba(20,20,20,0.3); &.boxed--border{ border: none; } .boxed{ background: none; } } } } .bg--primary{ .boxed:not(.imagebg){ color: @color-body; p{ color: @color-body; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,i{ color: @color-dark; } a{ color: @color-primary; } .color--primary{ color: @color-primary !important; } } } @media all and (min-width: 768px){ .boxed{ &.boxed--emphasis{ .scale(1.075); } } }theme_components/navigation-menu-toggle.less000066600000000570152442520560015376 0ustar00/*! -- Stack Menu Toggle -- */ .menu-toggle{ .box-shadow; width: @base-line-height*2; height: @base-line-height*2; border-radius: 50%; text-align: center; background: #fff; display: inline-block; .transition(0.2s,ease); i{ font-size: @h3-size; position: relative; top: 13px; color: @color-dark; } &:hover{ .box-shadow-wide; .translate3d(0,-2px,0); } }theme_components/covers.less000066600000004620152442520560012317 0ustar00/*! -- Stack Covers -- */ .cover{ .typed-headline{ margin-bottom: @base-line-height*2; .type--bold{ font-weight: 400; } } .triptych{ margin-top: @base-line-height*2; } .btn{ +.modal-instance{ margin-top: @base-line-height; } } h3,.h3{ +form{ margin-top: @base-line-height*1.5; } } .lead{ +.boxed{ margin-top: @base-line-height*2; } } &.unpad--bottom{ overflow: hidden; } .modal-instance.block{ &:not(:first-child):not(:last-child){ margin: @base-line-height*1.5 0; } } .pos-bottom{ margin-bottom: @base-line-height; } } @media all and (min-width: 768px){ .cover{ .row{ .row{ &:last-child{ margin-top: @base-line-height*3; } } } } } @media all and (max-width: 767px){ .cover{ .pos-bottom.pos-absolute{ position: relative; margin-top: @base-line-height; } } } @media all and (max-width: 990px){ .cover{ .mt--3{ margin-top: 0; } } } @media all and (min-width: 768px){ .cover{ .triptych{ margin-top: @base-line-height*4; } } } .cover-fullscreen{ min-height: 100vh; &.slider[data-paging="true"]{ .slides{ .flickity-slider{ > li{ height: 100vh; } } } .pos-bottom{ bottom: @base-line-height*3; width: 100%; } h4{ margin: 0; } } } .cover-slider{ overflow: hidden; .slider{ position: relative; width: 100%; pointer-events: none; &:nth-child(1){ transform: translateY(-30%); } &:nth-child(2){ transform: translateY(-25%); } &:nth-child(3){ transform: translateY(-20%); } .slide{ opacity: .05; } } .typed-headline{ margin: 0; +.btn{ margin-top: @base-line-height/2; } } .slider-container{ transform: rotateZ(-30deg) translateY(-10%); -webkit-transform: rotateZ(-30deg) translateY(-10%); position: absolute; width: 100%; height: 100%; top: 0; } } // Desktop @media all and (min-width: 768px){ .cover-slider{ +.cta-4{ position: absolute; background: none; color: #fff; border-bottom: none !important; width: 100%; .translate3d(0,-100%,0); a{ color: #fff; font-weight: 600; } } } } .cover-features{ &.space--lg{ padding-bottom: @base-line-height * 2; } .row:nth-child(2){ margin-top: @base-line-height* 6; } } @media all and (max-width: 767px){ .cover-features{ &.space--lg{ padding-bottom: @base-line-height; } .row:nth-child(2){ margin-top: @base-line-height * 2; } } }theme_components/radials.less000066600000000543152442520560012435 0ustar00.radial{ margin-left: auto; margin-right: auto; .radial__label{ transition: opacity .3s ease; -webkit-transition: opacity .3s ease; } &:not(.radial--active){ .radial__label{ opacity: 0; } } &:not(:last-child){ margin-bottom: @base-line-height; } } @media all and (max-width: 767px){ .radial{ margin-bottom: @base-line-height; } }theme_components/tabs.less000066600000007276152442520560011761 0ustar00/*! -- Stack Tabs -- */ .tabs-container{ &.tabs--vertical{ overflow: hidden; .tabs{ width: 25%; float: left; li{ display: block; &:not(:last-child){ border-right: none; border-bottom: 1px solid #ECECEC; } } } .tabs-content{ width: 70%; float: right; margin-top: 0; > li{ &:not(.active){ .tab__content{ animation: fadeOutUp .5s ease forwards; -webkit-animation: fadeOutUp .5s ease forwards; } } &.active{ .tab__content{ animation: fadeInUp .5s ease forwards; -webkit-animation: fadeInUp .5s ease forwards; backface-visibility: hidden; } } } } &.tabs--icons{ .tabs{ width: 15%; text-align: center; } .tabs-content{ width: 80%; } } } } @media all and (max-width: 767px){ .tabs-container{ &.tabs--vertical{ .tabs,.tabs-content{ width: 100%; float: none; } .tabs{ margin-bottom: @base-line-height; } .tabs-content{ > li{ &:not(.active){ .tab__content{ animation: fadeOutRight .5s ease forwards; -webkit-animation: fadeOutRight .5s ease forwards; } } &.active{ .tab__content{ animation: fadeInLeft .5s ease forwards; -webkit-animation: fadeInLeft .5s ease forwards; backface-visibility: hidden; } } } } } } } .tabs{ display: inline-block; border: 1px solid #ECECEC; border-radius: 6px; margin-bottom: @base-line-height; li{ .transition(0.3s,ease); padding: @base-line-height/2 @base-line-height; &:not(:last-child){ border-right: 1px solid #ECECEC; } &.active{ opacity: 1; .tab__title{ color: @color-primary; span{ color: @color-primary; } } } &:not(.active){ opacity: .5; } &:hover{ opacity: 1; cursor: pointer; } } .tab__title{ .transition(0.3s,ease); &:not(.btn){ padding-right: 0; padding-left: 0; } i+span{ margin-top: @base-line-height/4; display: inline-block; margin-bottom: 0; } } } .bg--primary{ .tabs{ border-color: #fff; li{ &.active{ .tab__title{ color: #fff; span{ color: #fff; } } } &:not(:last-child){ border-color: #fff; } } } } @media all and (min-width: 768px){ .tabs{ &.tabs--spaced{ margin-bottom: @base-line-height*2; } } } .tabs-content{ position: relative; >li{ &:not(.active){ .tab__content{ position: absolute; left: 0; top: 0; display: block; opacity: 0; pointer-events: none; animation: fadeOutRight .5s ease forwards; -webkit-animation: fadeOutRight .5s ease forwards; } } &.active{ animation: fadeInLeft .5s ease forwards; -webkit-animation: fadeInLeft .5s ease forwards; backface-visibility: hidden; } } } @media all and (max-width: 767px){ .tabs{ li{ display: block; &:not(:last-child){ border-bottom: 1px solid #ECECEC; border-right: none; } } } } .tabs--folder{ .tabs{ overflow: hidden; margin-bottom: 0; border-radius: 6px 6px 0 0; border-bottom: none; > li{ border-top: 3px solid rgba(0,0,0,0); &.active{ border-top: 3px solid @color-primary; } } } .tabs-content{ overflow: hidden; position: relative; bottom: 8px; padding: @base-line-height; border: 1px solid #ECECEC; border-radius: 0 0 6px 6px; > li{ &:not(.active){ .tab__content{ top: @base-line-height; left: @base-line-height; } } } } .tab__title{ .h5{ margin: 0; display: inline-block; } .label{ position: relative; color: #fff !important; top: -2px; right: 0; margin-left: @base-line-height/4; min-width: 0; } } }theme_components/pricing.less000066600000006276152442520560012462 0ustar00/*! -- Stack Pricing -- */ .pricing{ .transition(0.3s,ease); position: relative; h3{ &:first-child{ margin: 0; } } .label{ top: @base-line-height*1.5; right: @base-line-height*1.5; } .h2{ margin-bottom: 0.3939393939394em; } ul{ li{ &:not(:last-child){ margin-bottom: @base-line-height/4; } .checkmark{ +span{ position: relative; bottom: 3px; } } } } &:hover{ .box-shadow; } .h1{ font-size: 4.21428571428571em; line-height: 1.10169491525424em; margin-bottom: 0.22033898305085em; .pricing__dollar{ font-size: 0.51020408163265em; position: relative; bottom: 20px; } } .feature-6{ p{ min-height: @base-line-height*3; } } } .pricing-1{ .btn{ &:last-child{ position: absolute; width: 100%; bottom: 0; left: 0; border-radius: 0 0 @button-radius @button-radius; padding: @base-line-height/2 0; margin: 0; &:hover{ transform: none !important; } } } ul{ margin-bottom: @base-line-height*3; } p{ &:first-of-type{ margin-top: @base-line-height; } &:last-of-type{ margin-bottom: @base-line-height*3; } min-height: @base-line-height*3; } img{ +p{ &:first-of-type{ margin-top: 0; } } } } @media all and (min-width: 991px){ .pricing-2{ ul{ &:first-child{ margin-top: @base-line-height*2.5; } } } } @media all and (max-width: 990px){ .pricing-2{ text-align: center; ul{ &:first-child{ margin-top: @base-line-height; } } } } .pricing-3{ border: 1px solid #ececec; border-radius: 6px; .pricing__head{ margin: 0; +.btn{ display: block; border-radius: 0; padding: @base-line-height/2 0; } border-bottom: 1px solid #ececec; } ul{ border-radius: 0 0 6px 6px; li{ padding: @base-line-height/2 0; &:not(:last-child){ border-bottom: 1px solid #ececec; margin: 0; } } &:last-child{ margin: 0; } } } @media all and (max-width: 990px){ .pricing-3{ margin-bottom: @base-line-height; } } @media all and (min-width: 768px){ .pricing-section-1{ .pricing{ &:not(.boxed--emphasis){ left: @base-line-height/2; } &.boxed--emphasis{ right: @base-line-height/2; } } } } @media all and (min-width: 990px){ .pricing-section-2{ div[class*='col-']{ padding: 0; &:not(:first-child):not(:last-child){ .pricing__head{ border-radius: 0; } } &:first-child{ .pricing{ border-radius: 6px 0 0 6px; .pricing__head{ border-radius: 6px 0 0 0; } } } &:last-child{ .pricing{ .pricing__head{ border-radius: 0 6px 0 0; } border-radius: 0 6px 6px 6px; border-right: 1px solid #ececec; } } } .pricing{ border: 1px solid #ececec; border-radius: 0 0 0 6px; border-right: none; &:hover{ box-shadow: none; } ul{ margin: 0; } } } } .pricing-section-2{ &.bg--dark{ .pricing, .pricing .pricing__head, .pricing ul li:not(:last-child), div[class*='col-']:last-child .pricing{ border-color: lighten(@color-dark, 10%); } } &.imagebg{ .pricing, .pricing .pricing__head, .pricing ul li:not(:last-child), div[class*='col-']:last-child .pricing{ border-color: rgba(255,255,255,.2); } } }theme_components/switchable.less000066600000001621152442520560013141 0ustar00/*! -- Stack Switchable Sections -- */ @media all and (min-width: 768px){ .switchable{ .container > .row{ flex-flow: row-reverse; } &.switchable--switch{ .container > .row{ flex-flow: row; } } } } .switchable{ .switchable__text{ margin-top: @base-line-height; } [class*='col-']{ &:first-child{ .switchable__text{ margin-bottom: @base-line-height*1.5; } } } } .section--overlap{ .row{ position: relative; margin-top: -@base-line-height*7; } } @media all and (max-width: 990px){ .switchable{ .switchable__text{ margin-top: 0; } } } @media all and (max-width: 767px){ .switchable{ .switchable__text{ margin-top: @base-line-height; } .imageblock__content[class*='col-']{ float: none !important; } .row{ > div[class*='col-']{ float: none !important; &:last-child:not(:only-child){ margin-top: @base-line-height; } } } } }theme_components/checkmarks.less000066600000000761152442520560013133 0ustar00/*! -- Stack Checkmarks & Crosses -- */ .checkmark{ display: inline-block; position: relative; width: @base-line-height/1.5; height: @base-line-height/1.5; border-radius: 50%; text-align: center; &:not([class*='bg-']){ background: @color-primary; } &:before{ content: '\2713'; color: #fff; font-size: 11px; position: absolute; width: 100%; left: 0; top: -4px; } &.checkmark--cross{ &:before{ content: '\2717'; } } &:not(:last-child){ margin-right: 13px; } }theme_components/instagram.less000066600000001033152442520560012776 0ustar00/*! -- Stack Instagram -- */ .instafeed{ a{ .transition(0.3s,ease); &:hover{ opacity: .75; } } &:not(.instafeed--gapless){ li{ padding: @base-line-height/4; } } &.instafeed--gapless{ li{ margin-bottom: -1px; } } +.btn{ margin-top: @base-line-height*1.5; } &[data-grid="1"][data-amount="8"]{ li{ display: inline-block; width: 12.5%; } } } .instagram{ position: relative; &.unpad{ .btn{ position: absolute; z-index: 2; top: 50%; .translate3d(-50%,-50%,0); margin: 0; } } }theme_components/icons.less000066600000001354152442520560012132 0ustar00/*! -- Stack Icons -- */ .icon{ &:not(.block){ display: inline-block; } &.icon--xs{ font-size: 1.14285714285714em; } } .text-block{ .icon{ +h4{ margin-top: 0.6842105263158em; } } } .imagebg{ .icon{ color: #fff; } } p{ .material-icons{ font-size: 1em; &:first-child{ margin-right: @base-line-height/6; } } } .material-icons{ font-family: 'Material Icons' !important; } .icon-circle{ position: relative; display: inline-block; width: @base-line-height*2; height: @base-line-height*2; border-radius: 50%; border: 1px solid #ececec; background: @color-bg-secondary; text-align: center; i{ font-size: 24px; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; left: 0; } }theme_components/modals.less000066600000002265152442520560012300 0ustar00/*! -- Stack Modals -- */ .modal-container .modal-content:not(.height--natural){ height: auto; width: auto; } .modal-instance{ &:not(.block){ display: inline-block; } &.block{ > .btn{ display: block; } } } @media all and (min-width: 768px){ .modal-instance{ +span{ &:last-child{ display: inline-block; margin-left: @base-line-height/2; } } } } .modal-container{ .modal-content{ max-height: 95%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); .feature:only-child{ margin-bottom: 0; .boxed{ margin-bottom: 0; } } .imagebg:not(.image--light){ .modal-close-cross{ &:before{ color: #fff; } } } .container{ width: 100vw; } } } @media all and (max-width: 767px){ .modal-container{ .modal-content{ >.modal-close-cross{ top: 3em; background: #222; width: 2em; height: 2em; text-align: center; border-radius: 50%; color: #fff; } } &:not(.modal-active){ .modal-content{ display: none; } } } } .modal-content{ -ms-overflow-style: none; } .modal-content::-webkit-scrollbar { display: none; }theme_components/footers.less000066600000005003152442520560012473 0ustar00/*! -- Stack Footers -- */ footer{ .type--fine-print{ &:not(p){ opacity: .5; } } a{ font-weight: normal; } &:not(.bg--primary):not(.bg--dark){ a{ color: @color-body; } } a.type--fine-print{ &:not(:first-child){ margin-left: @base-line-height; } } .logo{ max-height: @base-line-height*.9; } ul{ &:not(.list-inline):not(.slides){ > li{ line-height: @base-line-height*1.25 !important; } } } &.footer-2{ .row{ &:last-child{ margin-top: @base-line-height*2; } } } &.footer-5{ .row{ [class*='col-']{ >div{ &:nth-last-child(2){ margin: @base-line-height/2; .type--fine-print{ opacity: 1; } } } } } } &.footer-6{ .footer__lower{ background: @color-bg-secondary; margin-top: @base-line-height; padding: @base-line-height 0; } &.bg--dark{ .footer__lower{ background: darken(@color-dark, 5%); } } &.bg--secondary{ .footer__lower{ background: darken(@color-bg-secondary, 2%); } } &.bg--primary{ .footer__lower{ background: darken(@color-primary, 5%); } } } &.footer-7{ padding: @base-line-height 0; } } @media all and (min-width: 768px){ footer{ .list-inline{ +.btn{ position: relative; bottom: 4px; } } .logo{ margin: 0; &:not(:last-child){ margin-right: @base-line-height; } } &.footer-3{ .logo{ +ul{ position: relative; top: 5px; a{ color: @color-dark; } } } .social-list{ position: relative; top: 9px; } .row:last-child{ margin-top: @base-line-height; } } &.footer-4{ .logo{ +span{ position: relative; } } form{ position: relative; bottom: 4px; } .row{ &:last-child{ margin-top: @base-line-height; } } } &.imagebg:not(.image--light){ span,p,a{ color: #fff; } } } .footer-1{ .type--fine-print{ position: relative; top: 2px; } } } @media all and (max-width: 767px){ footer{ .social-list{ margin: @base-line-height 0; } } .footer-4{ form{ margin: @base-line-height 0; } .logo{ margin: 0; } } .footer-6{ .footer__lower{ .social-list{ margin-top: @base-line-height; } } } .footer-7{ .social-list{ margin-top: @base-line-height; } } .footer-1{ .social-list{ margin-top: @base-line-height; } .logo{ display: block; margin-top: @base-line-height; margin-bottom: @base-line-height/2; margin-left: auto; margin-right: auto; } } }theme_components/titles.less000066600000001213152442520560012315 0ustar00/*! -- Stack Titles -- */ .breadcrumbs{ list-style: none; li{ font-size: 0.85714285714286em; display: inline-block; &:not(:last-child){ margin-right: 1.08333333333334em; &:after{ content: '\00bb'; margin-left: 1.08333333333334em; } } a{ font-weight: normal; } } } .imagebg,.bg--primary{ .breadcrumbs{ color: #fff; a{ color: #fff; font-weight: 600; } } } .elements-title{ border-top: none !important; +.tabs-container,+section{ &:not(:nth-last-child(2)){ margin-bottom: @base-line-height*5; } } +section:not(.imagebg):not([class*='bg-']):not(.unpad){ padding-top: @base-line-height; } }theme_components/typed-text.less000066600000000437152442520560013127 0ustar00/*! -- Stack Typed Text -- */ span{ +.typed-text{ &.h2{ margin-left: 4px; } &.h1{ margin-left: 6px; } } } @media all and (max-width: 767px){ .typed-text{ display: block; } .typed-headline{ h1,.h1{ margin-bottom: 0; } margin-bottom: @base-line-height; } }theme_components/shop.less000066600000003237152442520560011772 0ustar00/*! -- Stack Shop -- */ .cart-form{ button{ &[type="submit"]{ margin-top: @base-line-height; } } } .cart-total{ > div{ overflow: hidden; } } @media all and (min-width: 768px){ .cart-total{ margin-top: @base-line-height*2; } .cart-customer-details{ margin-top: @base-line-height*4; } } @media all and (max-width: 767px){ .cart-total{ margin-top: @base-line-height; } } .cart-customer-details{ div[class*='col-']{ margin-top: @base-line-height/4; } .input-checkbox{ margin: @base-line-height 0; + span{ bottom: 38px; } } } .product{ margin-bottom: @base-line-height/2; img{ margin-bottom: @base-line-height/2; .transition(0.3s,ease); backface-visibility: hidden; } a:hover{ img{ .translate3d(0,-5px,0); } } .label+img{ margin-top: @base-line-height*1.5; } h5{ display: inline-block; margin-bottom: 0; margin-right: @base-line-height/4; } .h4{ &:first-child{ clear: left; } margin-bottom: 0; } .product__controls{ overflow: hidden; margin-bottom: @base-line-height/2; label, button{ position: relative; top: 6px; } } &.product--tile{ padding: @base-line-height; border-radius: 6px; } } @media all and(min-width: 1200px){ .product{ .btn--cart{ position: absolute; right: @base-line-height; bottom: @base-line-height; } } } .col-sm-6:not(.col-md-3){ .product{ text-align: center; } } .col-md-3{ .product--tile{ h5{ display: block; } } } .masonry--tiles{ padding: 10px; .masonry__item:not(:empty){ padding: 0 6px; margin-bottom: 12px; .product--tile{ margin: 0; .label{ top: @base-line-height; right: @base-line-height*1.5; } } } }theme_components/navigation-utility.less000066600000001356152442520560014661 0ustar00/*! -- Stack Nav Utility -- */ .nav-utility{ padding: @base-line-height/2 0; .nav-utility__module{ font-size: 0.85714285714286em; a{ color: @color-body; font-weight: normal; i{ .transition(0.3s,ease); display: inline-block; } &:hover{ i{ .scale(1.5); } } } &.right{ &:not(:last-child){ margin-left: 2.16666666666667em; } } } } .utility-toggle{ display: inline-block; cursor: pointer; width: 3px; height: 3px; position: relative; bottom: 8px; border-radius: 50%; background: @color-dark; &:before, &:after{ content: ''; width: 3px; height: 3px; border-radius: 50%; position: absolute; background: @color-dark; } &:before{ top: 6px; } &:after{ top: 12px; } }theme_components/lists.less000066600000004314152442520560012154 0ustar00/*! -- Stack Lists -- */ ul:not([class*='menu']){ li{ > a{ font-weight: normal; &:hover{ text-decoration: none; } } } } ol{ list-style-position: outside; list-style-type: decimal; li{ &:not(:last-child){ margin-bottom: @base-line-height; } } &.lead{ li{ &:not(:last-child){ margin-bottom: 1.26315789473684em; } } } } .list-inline{ margin-left: 0; display: inline-block; li{ display: inline-block; padding: 0; &:not(:last-child){ margin-right: @base-line-height; } } &:not(:last-child){ margin-right: @base-line-height; } } .list-inline--images{ img{ max-height: @base-line-height*1.5; } } @media all and (min-width: 768px){ .list-inline--images{ li{ &:not(:last-child){ margin-right: @base-line-height*3; } } } } @media all and (max-width: 767px){ .list-inline--images{ li{ &:not(:last-child){ margin-bottom: @base-line-height; } } } } .list--loose{ > li{ &:not(:last-child){ margin-bottom: @base-line-height/4; } } } .list--hover{ li{ .transition(0.2s,ease); &:not(:hover){ opacity: .6; } } } .social-list{ a{ color: @color-dark; } } .imagebg:not(.image--light){ .social-list{ a{ color: #fff; } } } .results-list{ > li > a:first-child{ display: flex; align-items: center; span{ display: inline-block; margin-left: @base-line-height/4; } h4{ display: inline-block; margin-bottom: 0; } &:hover{ h4,span{ text-decoration: underline; } } margin-bottom: @base-line-height/2; } > li{ &:not(:last-child){ margin-bottom: @base-line-height; padding-bottom: @base-line-height; border-bottom: 1px solid rgba(0,0,0,0.1); } } } @media all and (max-width: 767px){ .list-inline{ &:not(.social-list):not(.list-inline--images){ display: block; li{ display: block; margin: 0; &:not(:last-child){ margin-bottom: @base-line-height/4; } } } } } @media all and (max-width: 767px){ .list-inline{ min-width: 100%; } } .row--list{ span.h6{ margin-bottom: 0; } span.h3{ &:last-child{ margin-bottom: 0; } } } @media all and (max-width: 767px){ .row--list{ > li{ margin-bottom: @base-line-height/2; } } }theme_components/twitter.less000066600000003501152442520560012515 0ustar00/*! -- Stack Twitter Feeds -- */ .tweets-feed{ .interact{ display: none; } .user{ a{ &:hover{ text-decoration: none; } } img{ border-radius: 50%; } } } .tweets-feed-1{ border-radius: 6px; border: 1px solid #ececec; overflow: hidden; li{ overflow: hidden; padding: @base-line-height; padding-bottom: 0; &:not(:last-child){ border-bottom: 1px solid #ececec; } } .user{ width: 20%; float: left; img{ max-height: @base-line-height*2; margin-right: @base-line-height/4; } [data-scribe="element:name"],[data-scribe="element:screen_name"]{ display: none; } margin-bottom: @base-line-height/2; } .tweet,.timePosted{ width: 80%; float: right; } .tweet{ margin-bottom: @base-line-height/4; } .timePosted{ font-size: @h6-size; line-height: @h6-line-height; } &:not(:last-child){ +.btn{ margin-top: @base-line-height*1.5; } } } .imagebg,.bg--dark{ .tweets-feed-1{ border-color: rgba(255,255,255,.1); li{ &:not(:last-child){ border-color: rgba(255,255,255,.1); } } } } .tweets-feed-2{ .user{ display: none; } .timePosted{ display: none; } li{ &:before{ font-family: 'socicon'; content: "\e08d"; } overflow: hidden; .tweet{ width: 85%; float: right; } } } .tweets-feed.slider{ .user{ img{ display: inline-block; clear: both; margin-bottom: @base-line-height/2; } [data-scribe="element:name"]{ display: none; } [data-scribe="element:screen_name"]{ display: block; font-size: @h4-size; line-height: @h4-line-height; font-weight: normal; } } .tweet{ margin-top: 1.36842105263158em; margin-bottom: 0.68421052631579em; font-size: @h4-size; line-height: @h4-line-height; } .timePosted{ margin: 0; } &:not(:last-child){ +.btn{ margin-top: @base-line-height*1.5; } } }theme_components/features-large.less000066600000003414152442520560013724 0ustar00/*! -- Stack Features Large -- */ @media all and (min-width: 768px){ .staggered{ div[class*='col-']{ &:nth-child(2):last-child{ margin-top: @base-line-height*7; &:not(:last-child){ margin-bottom: @base-line-height*5; } } .feature{ &:not(:last-child){ margin-bottom: @base-line-height*5; } } } } } .feature-large{ h4{ &:first-child{ margin-bottom: 0.68421052631579em; } } .feature{ &:not(.boxed){ margin-bottom: 30px; } } .feature-3{ &.text-center{ p{ margin: 0 auto; } } } .lead{ +.feature-large__group{ margin-top: @base-line-height*2; } } .feature-large__group{ overflow: hidden; } } .feature-large-1{ .lead{ margin-bottom: 2.73684210526316em; } } @media all and (min-width: 768px){ .feature-large-2{ div[class*='col-']{ &:first-child{ margin-top: @base-line-height*3; } &:last-child{ margin-top: @base-line-height*4; } } } } @media all and (max-width: 767px){ .feature-large-2{ img{ margin: @base-line-height 0; } } } .feature-large-7{ &.switchable{ .boxed{ div[class*='col-']:only-child{ float: none; } } } } .feature-large-13{ p.lead +.text-block{ margin-top: @base-line-height * 2; } div[class*='col-']{ .text-block + .text-block{ margin-top: @base-line-height * 1.5; } } } @media all and (min-width: 1200px){ .feature-large-13:not(.text-center){ .text-block{ p{ max-width: @base-line-height * 14; } } } } .feature-large-14{ h5{ margin-bottom: @base-line-height/4; } .boxed{ margin-bottom: 0; &.boxed--border{ img{ border-radius: 6px; } } } } @media all and (min-width: 768px){ .feature-large-14{ &.switchable{ .switchable__text{ margin-top: @base-line-height*3; } } } }theme_components/utilities.less000066600000010577152442520560013041 0ustar00/*! -- Stack Utilties -- */ .hidden { display: none !important; visibility: hidden !important; } .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767px) { .visible-xs { display: block !important; } table.visible-xs { display: table; } tr.visible-xs { display: table-row !important; } th.visible-xs, td.visible-xs { display: table-cell !important; } } @media (max-width: 767px) { .visible-xs-block { display: block !important; } } @media (max-width: 767px) { .visible-xs-inline { display: inline !important; } } @media (max-width: 767px) { .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } table.visible-sm { display: table; } tr.visible-sm { display: table-row !important; } th.visible-sm, td.visible-sm { display: table-cell !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm-block { display: block !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm-inline { display: inline !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } table.visible-md { display: table; } tr.visible-md { display: table-row !important; } th.visible-md, td.visible-md { display: table-cell !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md-block { display: block !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md-inline { display: inline !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } table.visible-lg { display: table; } tr.visible-lg { display: table-row !important; } th.visible-lg, td.visible-lg { display: table-cell !important; } } @media (min-width: 1200px) { .visible-lg-block { display: block !important; } } @media (min-width: 1200px) { .visible-lg-inline { display: inline !important; } } @media (min-width: 1200px) { .visible-lg-inline-block { display: inline-block !important; } } @media (max-width: 767px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-lg { display: none !important; } } .visible-print { display: none !important; } @media print { .visible-print { display: block !important; } table.visible-print { display: table; } tr.visible-print { display: table-row !important; } th.visible-print, td.visible-print { display: table-cell !important; } } .visible-print-block { display: none !important; } @media print { .visible-print-block { display: block !important; } } .visible-print-inline { display: none !important; } @media print { .visible-print-inline { display: inline !important; } } .visible-print-inline-block { display: none !important; } @media print { .visible-print-inline-block { display: inline-block !important; } } @media print { .hidden-print { display: none !important; } } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } @media all and (min-width: 768px) and (max-width: 990px){ .text-left-sm{ text-align: left; } .text-right-sm{ text-align: right; } .text-center-sm{ text-align: center; } } @media all and (max-width: 767px){ .text-left-xs{ text-align: left; } .text-right-xs{ text-align: right; } .text-center-xs{ text-align: center; } }theme_components/dropdowns.less000066600000004571152442520560013042 0ustar00/*! -- Stack Dropdowns -- */ .dropdown{ > .dropdown__trigger{ &:after{ font-family: "stack-interface"; display: inline-block; font-size: 8px; position: relative; bottom: 2px; } .image--xxs{ margin-right: @base-line-height/4; } } .dropdown__content{ border-radius: 6px; box-shadow: 0 0 25px 0 rgba(0,0,0,0.08); -webkit-box-shadow: 0 0 25px 0 rgba(0,0,0,0.08); padding: @base-line-height/1.5 @base-line-height; h5{ &:not(:last-child){ margin-bottom: @base-line-height/2; } } .background-image-holder{ border-radius: 6px 0 0 6px; } >.pos-absolute[class*='col-']{ left: 0; top: 0; height: 100%; position: absolute !important; &[data-overlay]{ &:before{ border-radius: 6px 0 0 6px; } } } } } .menu-horizontal{ > .dropdown{ > .dropdown__trigger{ &:after{ content: '\e80a'; margin-left: 4px; } } } } .menu-vertical{ > .dropdown{ > .dropdown__trigger{ display: inline-block; width: 100%; } } } // Mobile @media all and (max-width: 767px){ .dropdown{ [class*='col-']+[class*='col-']{ margin-top: @base-line-height/2; } .dropdown__content{ &:not([class*='bg-']){ border: none; box-shadow: none; } } } } @media all and (max-width: 767px){ .dropdown__container{ left: 0 !important; } } .menu-vertical{ li{ .transition(0.3s,ease); &:not(:hover):not(.dropdown--active){ opacity: .75; } &:not(:last-child){ margin-bottom: @base-line-height/6; } &.dropdown{ position: relative; &:after{ content: '\e80c'; font-family: 'stack-interface'; right: 0; top: 0; position: absolute; .transition(0.3s,ease); display: inline-block; .translate3d(-10px,0,0); } &:hover{ &:after{ .translate3d(-5px,0,0); } } } &.separate{ border-top: 1px solid lighten(@color-body, 50%); margin-top: @base-line-height/2; padding-top: @base-line-height/2; &.dropdown{ &:after{ top: .92857143em; } } } } +h5{ margin-top: @base-line-height; } } .dropdown__container{ > .container{ width: 100vw; max-width: 1140px; } } // Mobile @media all and (max-width: 990px){ .menu-vertical{ .dropdown{ &.dropdown--active{ &:after{ opacity: 0; } } } } } @media all and (min-width: 991px){ .dropdown{ .dropdown__container{ &:before{ height: 18px; } } } }theme_components/colors.less000066600000000143152442520560012313 0ustar00/*! -- Stack Colours -- */ .bg--dark{ .bg--secondary{ background: lighten(@color-dark, 6%) } }theme_components/navigation.less000066600000012762152442520560013163 0ustar00/*! -- Stack Navigation -- */ .nav--fixed{ .box-shadow; } .menu-horizontal > li, .menu-vertical > li{ font-family: @nav-item-font, 'Roboto', 'Helvetica', Sans-Serif; } @media all and (min-width: 768px){ .nav-bar{ .menu-module{ position: relative; top: 6px; } } .logo{ position: relative; top: 6px; } } .nav--fixed{ animation: fadeInDown .3s ease forwards; -webkit-animation: fadeInDown .3s ease forwards; } .menu-horizontal{ > li{ > a, > span{ &:not(:hover){ opacity: .75; } } } } .nav-bar-1{ padding: @base-line-height/1.5 0; .menu-horizontal{ > li{ >a,>span{ text-transform: uppercase; font-size: @h6-size; font-weight: 600; letter-spacing: .5px; } } } } // Mobile @media all and (max-width: 990px){ .nav-bar-1{ .logo-module{ position: relative; left: @base-line-height/2; top: 7px; } .nav-mobile-toggle{ top: 7px; } } } .nav-bar-2{ .menu-horizontal{ > li{ > a, >span{ font-weight: 400; } } } } // Desktop @media all and (min-width: 768px){ .nav-bar-2{ .menu-module{ position: relative; top: 9px; } } } // Tablet @media all and (max-width: 990px){ .nav-bar-2{ .logo-module{ position: relative; bottom: 9px; } .nav-mobile-toggle{ top: 24px; } } } // Mobile @media all and (max-width: 767px){ .nav-bar-2{ .logo-module{ position: relative; bottom: 2px; } } } @media all and (min-width: 768px){ .nav-bar-fullscreen{ .logo-module{ position: relative; bottom: 10px; } } } // Desktop @media all and (min-width: 990px){ .nav-bar-fullscreen{ .logo-module{ text-align: center; } } } .menu-toggle{ user-select: none; > span{ display: inline-block; transform: scaleX(2.5) scaleY(1.2); .transition(0.2s,ease-out); &:hover{ transform: scaleX(2.5) scaleY(1.8); } } } .menu-fullscreen{ .logo{ max-height: @base-line-height*1.25; position: relative; margin-bottom: @base-line-height*2.5; } .modal-content{ .modal-close-cross{ top: 0; right: @base-line-height; &:before{ color: #fff; } } .pos-vertical-center{ .transition(0.3s,ease); } } .menu-vertical{ > li{ > a, > span{ font-size: @h2-size; font-weight: 300; text-decoration: none; } &:not(:last-child){ margin-bottom: @base-line-height; } } &:not(:last-child){ margin-bottom: @base-line-height*2; } } &:not(.modal-active){ .pos-vertical-center{ -webkit-filter: blur(5px); } } } .nav-bar-fullscreen{ a{ color: @color-dark; } } // Desktop @media all and (min-width: 990px){ .nav-bar-fullscreen.nav--transparent{ &:not(.nav--fixed){ a{ color: #fff; } } } } .nav-bar-sidebar{ z-index: 99; width: 100%; padding-top: @base-line-height; .logo{ max-height: @base-line-height; } &:not(.nav--fixed){ position: absolute; } &.nav--fixed{ .logo{ display: none !important; } .menu-toggle{ .box-shadow-wide; } } .menu-toggle{ position: fixed; .box-shadow-wide; width: @base-line-height*2; height: @base-line-height*2; .translate3d(-@base-line-height*2,0,0); line-height: @base-line-height*2; background: #fff; border-radius: 50%; text-align: center; cursor: pointer; right: 0; } .logo-module{ position: relative; top: 5px; } } .nav-bar-sidebar + .side-menu{ .pos-vertical-center{ > .menu-vertical{ .transition(.5s,ease); transition-delay: .2s; > li{ > a, > span{ .h3; text-decoration: none; &:hover{ text-decoration: none; } } &:not(:last-child){ margin-bottom: @base-line-height/2; } } } } &:not(.notification--reveal){ .pos-vertical-center{ .menu-vertical{ .translate3d(20px,0,0); opacity: 0; } } } } nav.notification--reveal{ +.main-container{ &:before{ opacity: 0; animation: fadeIn .3s ease forwards; content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 20; } } } .nav-bar-logo{ .logo{ margin-right: @base-line-height; } } .dropdown{ .dropdown__content{ border-radius: 6px; .box-shadow; padding: @base-line-height/1.5 @base-line-height; &:not([class*='bg-']){ border: 1px solid #ececec; } h5{ &:not(:last-child){ margin-bottom: @base-line-height/2; } } .background-image-holder{ border-radius: 6px 0 0 6px; } >.pos-absolute[class*='col-']{ left: 0; top: 0; height: 100%; position: absolute !important; &[data-overlay]{ &:before{ border-radius: 6px 0 0 6px; } } } } } .nav--transparent{ &:not(.nav--fixed){ .dropdown{ .dropdown__content--lg{ border: none; } } } } // Mobile @media all and (max-width: 990px){ .dropdown{ [class*='col-']+[class*='col-']{ margin-top: @base-line-height/2; } .dropdown__content{ &:not([class*='bg-']){ border: none; box-shadow: none; } } } } .menu-vertical{ li{ .transition(0.3s,ease); &:not(:hover){ opacity: .75; } &:not(:last-child){ margin-bottom: @base-line-height/6; } &.dropdown{ position: relative; &:after{ content: '\e80c'; font-family: 'stack-interface'; right: 0; position: absolute; .transition(0.3s,ease); display: inline-block; .translate3d(-10px,0,0); } &:hover{ &:after{ .translate3d(-5px,0,0); } } } &.separate{ border-top: 1px solid lighten(@color-body, 50%); margin-top: @base-line-height/2; padding-top: @base-line-height/2; } } +h5{ margin-top: @base-line-height; } } theme_components/rules.less000066600000000717152442520560012153 0ustar00/*! -- Stack Rules -- */ hr{ &:first-child{ margin-top: 0; } &.short{ width: @base-line-height*1.5; border-color: @color-primary; } &[data-title]{ margin: @base-line-height*1.5 0; text-align: center; &:before{ content: attr(data-title); background: @color-bg-site; position: relative; bottom:14px; padding: @base-line-height/2; font-style: italic; } } } .bg--dark,.imagebg,.bg--primary{ hr:not(.short){ opacity: .3; } }theme_components/testimonials.less000066600000002356152442520560013535 0ustar00/*! -- Stack Testimonials -- */ .testimonial{ position: relative; overflow: hidden; h5{ &:nth-last-child(2){ margin: 0; } } .testimonial__image{ margin-bottom: @base-line-height; } } @media all and (min-width: 1025px){ .testimonial-1{ .switchable__text{ margin-top: @base-line-height*4; } } } .testimonial-2{ float: none; width: 100%; .testimonial__image{ img{ max-height: @base-line-height*2; float: left; margin-right: @base-line-height; } } .boxed{ width: 100%; } } .bg--secondary{ .testimonial-2{ .boxed{ background: #fff; } } } @media all and (max-width: 990px){ .testimonial-2{ p{ min-height: @base-line-height*4; } } } @media all and (max-width: 767px){ .testimonial-2{ p{ min-height: 0; } } } @media all and (min-width: 768px){ .lead{ +.testimonial-2{ margin-top: @base-line-height*2; } } } @media all and (min-width: 768px){ .testimonials-1{ .list-inline{ position: relative; top: @base-line-height/2; li{ &:not(:last-child){ margin-right: @base-line-height*2; } } } } } @media all and (max-width: 767px){ .testimonials-1{ .list-inline{ margin-top: @base-line-height; li{ margin-bottom: @base-line-height; } } } }theme_components/sections.less000066600000003214152442520560012643 0ustar00/*! -- Stack Sections -- */ section{ &:not(.unpad):not(.imagebg):not([class*='bg--']):not(.imageblock):not(.unpad--bottom):not(.border--bottom):not(.space--xxs){ + section:not(.unpad):not(.imagebg):not([class*='bg--']):not(.imageblock):not(.border--bottom):not(.space--xxs){ padding-top: 0; } } &:not(.unpad):not(.imagebg):not([class*='bg--']):not(.imageblock):not(.unpad--bottom):not(.border--bottom){ +footer:not(.unpad):not(.imagebg):not([class*='bg--']):not(.imageblock):not(.unpad--bottom):not(.border--bottom){ padding-top: 0; } } &:not(.imagebg):not([class*='bg-']){ +section{ &.bg--secondary{ border-top: 1px solid darken(@color-bg-secondary, 6%); } } } &.bg--secondary{ &:not(.imagebg){ +section:not(.imagebg):not([class*='bg-']){ border-top: 1px solid darken(@color-bg-secondary, 6%); } } &:not(.unpad):not(.imageblock):not(.unpad--bottom):not(.border--bottom){ +section.bg--secondary{ padding-top: 0; } } +footer{ &:not(.bg--dark):not(.bg--secondary){ border-top: 1px solid darken(@color-bg-secondary, 6%); } } } &.bg--dark{ +section.bg--dark{ padding-top: 0; } &:last-of-type{ +footer.bg--dark{ background: darken(@color-dark, 4%) } } } &.border--bottom{ &:not([data-gradient-bg]){ border-bottom: 1px solid #ececec; } } &.unpad{ overflow: hidden; } &:not([class*='bg--']){ +footer{ &.bg--secondary{ border-top: 1px solid darken(@color-bg-secondary, 6%); } } } &.text-center{ div[class*='col-']{ &:first-child:last-child{ margin: 0 auto; float: none; } } } } .section--overlap{ z-index: 2; position: relative; }theme_components/wizard.less000066600000005373152442520560012324 0ustar00/*! -- Stack Wizard -- */ .wizard{ transition: opacity .3s ease; opacity: 0; &.active{ opacity: 1; } } .wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{ background: @color-primary; transition: all .3s ease; padding: @base-line-height/4 @base-line-height; font-size: 12px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; color: #fff; } .wizard > .steps .current a, .wizard > .steps .current a:hover, .wizard > .steps .current a:active{ background: none; color: @color-dark; } .wizard > .steps a{ position: relative; &:before{ content: ''; width: 15px; height: 15px; border-radius: 50%; position: absolute; left: 50%; margin-left: -10px; background: #eee; display: block; bottom: 0; transition: all .2s ease; } &:after{ content: ''; position: absolute; width: 100%; bottom: 7px; height: 2px; background: #eee; left: 0; transition: all .2s ease; } } .wizard > .steps li{ &:first-child{ a{ &:after{ width: 50%; left: 50%; } } } &:last-child{ a{ &:after{ width: 50%; } } } &.current{ a{ &:after, &:before{ background-color: @color-primary; } } } } .wizard > .steps a, .wizard > .steps a:hover{ padding-bottom: @base-line-height*1.5; } .wizard > .steps .done a, .wizard > .steps .done a:hover, .wizard > .steps .done a:active, .wizard > .steps .disabled a, .wizard > .steps .disabled a:hover, .wizard > .steps .disabled a:active{ background: none; color: @color-dark; } .wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active{ margin: 0; } .wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{ user-select: none; -moz-user-select: none; -webkit-user-select: none; } .wizard > .steps > ul, .wizard > .actions{ text-align: center; } .wizard > .steps > ul > li, .wizard > .actions > ul > li{ float: none; display: inline-block; } .wizard > section{ padding: 0; } .wizard > .content{ background: @color-bg-secondary; margin-top: @base-line-height; margin-bottom: @base-line-height; border: 1px solid #ececec; } .wizard > .content > .body{ padding: @base-line-height; width: 100%; height: 100%; } .wizard > .steps .number{ font-size: 1em; } @media all and (max-width: 767px){ .wizard > .steps .number{ display: block; } .wizard > .content{ min-height: 25em; } .wizard{ .pos-vertical-center{ top: 50%; transform: translateY(-50%); -wekbit-transform: translateY(-50%); } } } .wizard{ &.bg--white{ background: none !important; > .content{ background: #fff; } } > .content{ img{ max-height: 240px; } } } @media all and (max-width: 767px){ .wizard{ > .content{ img{ max-height: 120px; margin-bottom: @base-line-height/2; } } } }theme_components/progress-horizontal.less000066600000001307152442520560015050 0ustar00/*! -- Stack Progress Horizontal -- */ .progress-horizontal{ &:not(:last-child){ margin-bottom: @base-line-height; } &.progress-horizontal--lg{ .progress-horizontal__bar{ height: @base-line-height; } } &.progress-horizontal--sm{ .progress-horizontal__bar{ height: @base-line-height/4; } } } .progress-horizontal__bar{ height: @base-line-height/2; border-radius: 100px; background: @color-bg-secondary; border: 1px solid rgba(0,0,0,0.1); &:not(:last-child){ margin-bottom: @base-line-height/4; } } .progress-horizontal__progress{ background: @color-primary; border-radius: 100px; } .imagebg{ .progress-horizontal__bar{ background: rgba(20,20,20,0.2); border: none; } }theme_components/navigation-sidebar.less000066600000002317152442520560014565 0ustar00/*! -- Stack Nav Side Menu -- */ .notification.side-menu{ z-index: 9999; background: @color-bg-site; padding-top: @base-line-height; margin: 0; height: 100%; .box-shadow-wide; width: @base-line-height*15; .side-menu__module{ overflow: hidden; padding: @base-line-height*1.5; +hr{ &:not(:last-child){ margin: 0; } } } .menu-vertical{ li{ a{ font-size: @h4-size; line-height: @h4-line-height; &:hover{ text-decoration: none; } } } } .btn{ &:not(:last-child){ margin-bottom: @base-line-height; } + ul.list--loose{ margin-top: @base-line-height/2; } } .notification-close-cross{ top: @base-line-height/2; right: @base-line-height*1.5; margin-top: 8px; } .social-list{ &:not(:first-child){ margin-top: @base-line-height; } } } .menu-toggle.pos-fixed{ position: fixed; right: @base-line-height * 3; animation: fadeInDown .3s ease forwards; } @media all and (min-width: 768px){ .side-menu{ .side-menu__module{ span.type--fine-print{ position: relative; top: 8px; } } } } @media all and (max-width: 767px){ .side-menu{ width: 100%; .side-menu__module{ .float-right,.float-left{ display: block; } } } }theme_components/bars.less000066600000004147152442520560011751 0ustar00/*! -- Stack Bars -- */ .menu-horizontal > li, .menu-vertical > li{ font-family: @nav-item-font, 'Roboto', 'Helvetica', Sans-Serif; } .bar{ .logo{ max-height: @logo-max-height; max-width: none; } } .menu-horizontal{ > li{ > a, > .modal-instance > a{ font-weight: 500; } a{ &:hover{ text-decoration: none; } } } } .hamburger-toggle{ i{ color: @color-dark; } } // Desktop @media all and (min-width: 990px){ .menu-horizontal{ li{ &:not(:last-child){ margin-right: @base-line-height/1.5; } } } .bar__module{ &:not(:only-child){ .menu-horizontal{ top: 0; } } } } @media all and (min-width: 768px) and (max-width: 1023px){ .bar-2, .bar-1{ .menu-horizontal{ > li{ display: inline-block; &:not(:first-child){ margin-left: @base-line-height/2; } } } .bar__module{ margin-bottom: @base-line-height; } .row{ div[class*='col-']{ &:last-child{ .bar__module{ &:last-child{ margin-bottom: 0; } } } } } } } .bar-1{ .menu-horizontal{ > li{ > .dropdown__trigger, > a{ font-size: 0.857142857142857em; line-height: 2.166666666666667em; text-transform: uppercase; font-weight: 600; letter-spacing: .5px; } } } } // Desktop @media all and (min-width: 1024px){ .bar-1{ .bar__module{ +.bar__module{ margin-left: @base-line-height; } } } } @media all and (min-width: 991px){ .bar-2{ .logo{ position: absolute; left: 50%; transform: translateX(-50%); } } } .bar-3{ font-size: @fine-print-size; .menu-horizontal{ top: 0; } } @media all and (max-width: 990px){ .bar-3{ .menu-horizontal{ li{ display: inline-block; &:not(:last-child){ margin-right: @base-line-height/2; } } } } } // Desktop @media all and (min-width: 990px){ .bar-toggle{ .col-md-1{ .logo{ top: 10px; } } } } @media all and (max-width: 767px){ .bar-4{ .logo-light{ display: none; } .logo-dark{ margin-bottom: @base-line-height; } } .bar.bg--dark{ background: @color-dark; .hamburger-toggle i{ color: #fff; } } }theme_components/navigation-stacked.less000066600000000142152442520560014564 0ustar00/*! -- Stack Nav Stacked -- */ .bar-stacked{ .logo{ margin-bottom: @base-line-height*2; } } theme_components/customizers.less000066600000002350152442520560013403 0ustar00/*! -- Stack Customizers -- */ .box-shadow{ box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.04); } .box-shadow-shallow{ box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.06); } .box-shadow-wide{ box-shadow: 0 23px 40px rgba(0, 0, 0, 0.2); } .border--round{ border-radius: 6px; &:before{ border-radius: 6px; } .background-image-holder{ border-radius: 6px; } [data-scrim-top]:before,[data-scrim-bottom]:before,[data-overlay]:before{ border-radius: 6px; } } .imageblock.border--round{ .background-image-holder{ border-radius: 6px 0 0 6px; } } @media all and (max-width: 767px){ .imageblock.border--round{ .background-image-holder{ border-radius: 6px 6px 0 0; } } } .theme--square{ .border--round,.btn{ border-radius: 0px; } } .theme--bordered{ border: @base-line-height/2 solid @color-dark; } .main-container{ &.transition--fade{ &:not(.transition--active){ cursor: wait; } } } @media all and (min-width: (@boxed-layout-width)){ body.boxed-layout{ > section.bar-3:first-of-type{ border-radius: 6px 6px 0 0; } .main-container{ > footer{ &:last-child{ border-radius: 0 0 6px 6px; } } } } } body.boxed-layout{ .modal-container{ section:not([class*='bg-']){ background: none; } } }theme_components/blog.less000066600000015333152442520560011744 0ustar00/*! -- Stack Blog -- */ article{ .article__title{ >a{ display: block; &:hover{ text-decoration: none; opacity: .75; } } h2{ margin-bottom: 0.3939393939394em; } h1{ margin-bottom: 0.29545454545455em; } margin-bottom: @base-line-height*2; } .article__body{ img,iframe,.video-cover{ border-radius: 6px; &:not(:last-child){ margin-bottom: @base-line-height; } } > a{ &:first-child{ > img{ margin-bottom: @base-line-height; } } } p,ul{ .lead; +h5{ margin-top: @base-line-height*1.5; } } blockquote{ text-align: center; &:not(:last-child){ margin-top: 2.08em; margin-bottom: 2.08em; } } } .article__share{ margin-top: @base-line-height * 3; } &.imagebg{ padding: @base-line-height; overflow: hidden; &:before{ .transition(0.3s,ease); } &:hover{ &:before{ opacity: .6; } } .article__title{ margin: 0; position: absolute; bottom: 0; z-index: 2; span{ font-size: @fine-print-size; } max-width: 90%; } .label{ z-index: 2; top: @base-line-height; right: @base-line-height; } } &.feature-1{ h5{ min-height: @base-line-height*2; } a{ img{ .transition(0.3s,ease); } &:hover{ img{ opacity: .85; } } } } } figure[class*='col-']{ padding: 0 !important; } figure.pull-right{ margin-left: @base-line-height*1.5; } figure.pull-left{ margin-right: @base-line-height*1.5; } figure{ img{ &:not(:last-child){ margin-bottom: @base-line-height/4 !important; } } figcaption{ font-size: @h6-size; font-style: italic; } } section.unpad{ > article{ .imagebg + div{ padding: @base-line-height *3 0; } } } .article__author{ img{ max-height: @base-line-height*2; margin-bottom: @base-line-height/4; } padding-bottom: @base-line-height; } .slides--gapless{ article{ &.imagebg{ height: @base-line-height*15; } } } @masonry-item-height: 338px; .masonry-blog-magazine{ article, .masonry__promo{ height: @masonry-item-height; } .height--tall{ height: calc((@masonry-item-height*2) + 30px); } } @media all and (min-width: 991px){ .masonry__promo{ &.boxed--lg{ padding: @base-line-height*4; } } } @media all and (max-width: 990px){ .masonry-blog-magazine{ .height--tall{ height: @masonry-item-height; } } .masonry__promo{ .pos-vertical-center{ top: 0; transform: none; } } } @media all and (max-width: 1200px){ .masonry__promo{ &.boxed--lg{ padding: @base-line-height*2; } } } .pagination{ text-align: center; &:after{ content: ""; display: table; clear: both; } margin-top: @base-line-height; a{ font-weight: normal; } div[class*='col-']{ padding: 0; } ol{ margin-bottom: 0; display: inline-block; li{ display: inline-block; margin: 0; font-weight: 700; line-height: 23px; > a{ font-weight: 700; } &:not(:last-child){ margin-right: @base-line-height/4; } width: @base-line-height; height: @base-line-height; border-radius: 50%; border: 1px solid #ececec; &.pagination__current{ cursor: default; background: #ececec; color: #aaa; } } } } .pagination__prev, .pagination__next{ display: inline-block; } .pagination__next{ float: right; } .pagination__prev{ float: left; } .blog-article-wide{ &:not(:last-child){ border-bottom: 1px solid #ececec; margin-bottom: @base-line-height*2; } } .masonry-blog-list{ hr+.masonry__container{ margin-top: 0; } article{ border-bottom: 1px solid #ececec; padding-top: @base-line-height*1.5; margin-bottom: @base-line-height*3; .article__body{ padding-bottom: @base-line-height*3; } } } .masonry-blog-magazine{ .masonry__item{ a{ font-weight: normal; &:hover{ text-decoration: none; } } } } .masonry-filter-container{ > span{ position: relative; +.masonry-filter-holder{ margin-left: @base-line-height/2; } } margin-bottom: @base-line-height; } .comments__list{ li{ padding: @base-line-height; border: 1px solid #ececec; border-bottom: none; &:last-child{ border-bottom: 1px solid #ececec; } &:nth-child(odd){ background: darken(@color-bg-site, 1%); } &:nth-child(even){ background: darken(@color-bg-site, 2.5%); } &:first-child{ border-radius: 6px 6px 0 0; } &:last-child{ border-radius: 0 0 6px 6px; } } } .bg--secondary{ .comments__list{ li{ &:nth-child(even){ background: #fff; } } } } @media all and (min-width: 768px){ .comments__list{ li{ padding: @base-line-height*1.5; } } } .comment{ overflow: hidden; &:not(:last-child){ border-bottom: 1px solid #ececec; padding-bottom: @base-line-height; } .comment__avatar{ width: 15%; float: left; img{ max-height: @base-line-height*2; } } .comment__meta{ font-size: @fine-print-size; a{ display: inline-block; &:not(:first-child){ margin-left: 1.08333333333334em; } } +p{ margin-top: @base-line-height/2; } } .comment__body{ width: 85%; float: right; h5{ &.type--fine-print{ margin: 0; } } } +.comment{ margin-top: @base-line-height; padding-left: 15%; } } @media all and (min-width: 768px){ .comments{ +.comments-form{ margin-top: @base-line-height*2; } } } @media all and (min-width: 768px){ h3{ + .related-blog-list{ margin-top: @base-line-height*2; } } } .related-blog-list{ li{ &:not(:last-child){ margin-bottom: @base-line-height; } } article{ img{ border-radius: 6px; } .article__title{ margin-top: @base-line-height/2; margin-bottom: 0; .h4{ margin-bottom: 0.68421052631579em; } } } } @media all and (min-width: 991px){ .sidebar{ margin-top: @base-line-height*4; position: relative; bottom: 18px; } } .sidebar__widget{ > h5{ &:first-child{ margin-bottom: @base-line-height/2; } } &:not(:last-child){ margin-bottom: @base-line-height*2; } } .tag-cloud{ li{ display: inline-block; &:not(:last-child){ margin-right: @base-line-height/4; &:after{ content: ','; } } } } .conversation__head{ border-radius: 6px 6px 0 0; &.boxed:not(:last-child){ margin: 0; } h4{ margin: 0; } .conversation__avatar{ img{ max-height: @base-line-height; display: inline-block; margin-right: @base-line-height/4; margin-bottom: 0; } margin-top: @base-line-height/2; } } @media all and (min-width: 768px){ .conversation__avatar{ position: absolute; top: @base-line-height; right: @base-line-height*1.5; } } .conversation__reply{ border-top: none !important; border-bottom: none; border-radius: 0; &.boxed:not(:last-child){ margin-bottom: 0; } + .conversation__comments{ .comments__list{ li:first-child{ border-radius: 0; border-top: none; } } } }theme_components/alerts.less000066600000000237152442520560012310 0ustar00/*! -- Stack Alerts -- */ .alert{ border-radius: 6px; &:not(:last-child){ margin-bottom: @base-line-height; } .alert__close{ font-size: @h4-size; } }theme_components/portfolio.less000066600000003104152442520560013027 0ustar00/*! -- Stack Portfolio -- */ .project-thumb{ > a{ display: block; } &:not(.hover-element){ > a{ .transition(0.3s,ease); margin-bottom: @base-line-height; &:hover{ opacity: .85; } } } &.hover-element{ margin: 0; > a{ height: @base-line-height*13; text-decoration: none; font-weight: normal; } .background-image-holder{ .transition(0.5s,ease-out); } .hover-element__reveal{ .project-thumb__title{ padding: @base-line-height; z-index: 2; position: relative; color: #fff; h5{ margin: 0; } } } &.hover--active{ .transition(0.3s,ease); &:hover{ opacity: .85; } } &:not(.hover--active)[data-scrim-top]{ .hover-element__reveal{ .transition(0.5s,ease); .translate3d(0,-100px,0); } &:hover{ .hover-element__reveal{ .translate3d(0,0,0); } } } [data-scrim-top]{ &:before{ height: 100%; } } } h4{ margin-bottom: 0; } &.height-40{ min-height: 350px; } } @media all and (max-width: 767px){ .project-thumb{ &.height-40{ height: 350px; min-width: 100%; } } } @media all and (min-width: 768px){ .col-xs-12:not(.col-sm-6){ .project-thumb{ &.hover-element{ >a{ height: @base-line-height*25; } } } } } .project-thumb{ &.border--round{ .background-image-holder{ border-radius: 6px; } >a{ border-radius: 6px; overflow: hidden; } &:before{ border-radius: 6px; overflow: hidden; } } } .col-md-4{ .project-thumb{ > a{ &:not(.imagebg){ margin-bottom: @base-line-height/2; } } } }theme_components/maps.less000066600000001064152442520560011755 0ustar00/*! -- Stack Maps -- */ iframe[src*='google.com/maps']{ border: none; } .map-container{ min-height: 400px; &:not(:last-child){ margin-bottom: @base-line-height; } &.border--round{ overflow: hidden; z-index: 2; .gm-style{ border-radius: 6px; } } iframe{ left: 0; } } @media all and (min-width: 768px){ .background-image-holder, .imageblock__content{ .map-container{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; } } .map-container{ +div[class*='col-']{ margin-top: @base-line-height*2; } } }theme_components/animations.less000066600000003650152442520560013162 0ustar00/*! -- Stack Animations -- */ @keyframes fadeInUp{ from{ opacity: 0; .translate3d(0,50px,0); } to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } } @-webkit-keyframes fadeInUp{ from{ opacity: 0; .translate3d(0,50px,0); } to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } } @keyframes fadeInDown{ from{ opacity: 0; .translate3d(0,-100px,0); } to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } } @-webkit-keyframes fadeInDown{ from{ opacity: 0; .translate3d(0,-100px,0); } to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } } @keyframes fadeOutUp{ from{ opacity: 1; .translate3d(0,0,0); } to{ opacity: 0; .translate3d(0,-50px,0); -webkit-font-smoothing: antialiased; } } @-webkit-keyframes fadeOutUp{ from{ opacity: 1; .translate3d(0,0,0); } to{ opacity: 0; .translate3d(0,-50px,0); -webkit-font-smoothing: antialiased; } } @keyframes fadeOutRight{ from{ opacity: 1; .translate3d(0,0,0); } to{ opacity: 0; .translate3d(50px,0,0); -webkit-font-smoothing: antialiased; } } @-webkit-keyframes fadeOutRight{ from{ opacity: 1; .translate3d(0,0,0); } to{ opacity: 0; .translate3d(50px,0,0); -webkit-font-smoothing: antialiased; } } @keyframes fadeInLeft{ from{ opacity: 0; .translate3d(-50px,0,0); } to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } } @-webkit-keyframes fadeInLeft{ from{ opacity: 0; .translate3d(-50px,0,0); } to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } } @keyframes pulse{ 0%{ opacity: 0; .scale(1); } 50%{ opacity: 1; } 100%{ opacity: 0; .scale(2); } } @-webkit-keyframes pulse{ 0%{ opacity: 0; .scale(1); } 50%{ opacity: 1; } 100%{ opacity: 0; .scale(2); } } @keyframes kenBurns{ 0%{ transform: scale(1); } 100%{ transform: scale(1.1); } } @-webkit-keyframes kenBurns{ 0%{ transform: scale(1); } 100%{ transform: scale(1.1); } }theme_components/navigation-fullscreen.less000066600000000670152442520560015316 0ustar00/*! -- Stack Nav Fullscreen -- */ .menu-fullscreen{ .pos-absolute{ width: 100%; } color: #fff; a{ color: #fff; &:hover{ text-decoration: none; } } .social-list{ margin-right: 0; } &:before{ background: rgba(0,0,0,0.9); } .modal-content .modal-close-cross{ right: @base-line-height*2; top: 1em; } } // Mobile @media all and (max-width: 767px){ .menu-fullscreen{ .pos-bottom{ position: relative; } } }theme_components/cta.less000066600000002470152442520560011566 0ustar00/*! -- Stack CTA -- */ .cta{ .btn{ &:first-child{ &:not(:last-child){ margin-bottom: @base-line-height; } } } &.boxed{ &:last-child{ margin-bottom: 0; } } } @media all and (min-width: 768px){ .cta--horizontal{ h4,.lead,.btn{ margin: 0; } h4,.lead{ position: relative; top: 4px; } } .bg--dark,.imagebg{ .cta-1{ >div[class*='col-']{ &:last-child{ border-left: none; } } } } } @media all and (min-width: 1200px){ .cta-1{ &.boxed--border{ padding: 0; } >div[class*='col-']{ padding: @base-line-height/1.5 15px; &:last-child{ border-left: 1px solid #ECECEC; } } } } @media all and (max-width: 990px){ .cta-1{ text-align: center; >div[class*='col-']{ padding-left: 0; padding-right: 0; &:not(:last-child){ margin-bottom: @base-line-height/2; } &:last-child{ margin-top: @base-line-height; } } } } @media all and (max-width: 767px){ .cta{ .lead{ margin: 1.36842105263158em 0; } } } .cta-2{ .transition(0.3s,ease); h2{ margin: 1.57575757575758em 0; } &.bg--primary{ &:hover{ background: lighten(@color-primary, 3%) } } &:hover{ background: lighten(@color-bg-site, 3%) } } @media all and (min-width: 768px){ .cta-3{ .switchable__text{ margin-top: @base-line-height*3; } } }theme_components/videos.less000066600000003024152442520560012304 0ustar00/*! -- Stack Videos -- */ .video-play-icon{ &:before{ border-color: transparent transparent transparent @color-dark; margin-top: -3px; } } .modal-instance{ .video-play-icon{ +span{ position: relative; display: inline-block; margin-left: @base-line-height/2; white-space: nowrap; bottom: 22px; } &.video-play-icon--xs{ +span{ bottom: 8px; margin-left: @base-line-height/4; } } } } .video-cover{ background: @color-dark; &.border--round{ overflow: hidden; iframe{ border-radius: 6px; } } &:not(:last-child){ margin-bottom: @base-line-height; } +span.h4{ +span{ display: inline-block; margin-left: @base-line-height/2; } } } @media all and (min-width: 1025px){ .video-cover{ .video-play-icon{ .transition(0.2s,ease-out); &:hover{ .box-shadow-wide; .translate3d(-50%,-52%,0); } } } } .imagebg{ .video-cover{ .video-play-icon{ z-index: 10; } } } @media all and (min-width: 768px){ h2{ +.video-cover{ margin-top: @base-line-height*2; } } } @media all and (min-width: 768px){ .video-1{ .video-play-icon{ margin-right: @base-line-height; } h2{ display: inline-block; position: relative; bottom: 14px; } } div[class*='col-sm-6']{ .video-1{ h2{ bottom: 0; display: block; } .video-play-icon{ margin-bottom: @base-line-height/4; } } } } .video-1{ h2{ margin: 0; } } .imageblock__content{ .modal-instance{ position: absolute; top: 50%; left: 50%; .translate3d(-50%,-50%,0); } }theme_components/navigation-sidebar-column.less000066600000006527152442520560016067 0ustar00/*! -- Stack Nav Sidebar Column -- */ @sidebar-column-width: @base-line-height*11; .nav-container{ &.nav-container--sidebar{ + .main-container{ width: ~"calc(100vw - @{sidebar-column-width})"; float: right; } } } .nav-sidebar-column{ position: fixed; z-index: 3; left: 0; width: @sidebar-column-width; &:not([class*='bg-']){ background: @color-bg-site; } border-right: 1px solid #ececec; &.bg--dark{ border-right: 1px solid lighten(@color-dark, 10%); } height: 100vh; overflow-y:scroll; .disable-scroll-bars; padding: @base-line-height*1.5 @base-line-height; } .nav-sidebar-column{ .logo{ max-height: @base-line-height*1.25; margin-bottom: @base-line-height/2; } .text-block{ > p{ margin-bottom: @base-line-height/2; } } .menu-vertical{ li.dropdown:not(:hover){ &:after{ opacity: .35; } } a{ &:hover{ text-decoration: none; } } } .dropdown{ .dropdown__container, .dropdown__content{ left: 0 !important; position: relative; pointer-events: all; } .dropdown__container{ &:before{ height: 0; } } .dropdown__content{ transform: none !important; box-shadow: none; -webkit-box-shadow: none; padding-top: @base-line-height/4; padding-right: 0; padding-left: @base-line-height/4; background: none !important; } .menu-vertical{ li.dropdown{ &:after{ right: @base-line-height; } } } &:not(.dropdown--active){ .dropdown__container{ display: none; } } &.dropdown--hover{ &:hover{ > .dropdown__container{ display: block; } } } } .social-list{ margin-bottom: @base-line-height/2; } } body.dropdowns--hover{ .nav-sidebar-column{ .dropdown{ &:hover{ > .dropdown__container{ display: block; } } } } } .nav-sidebar-column-toggle{ transition: all .3s ease; left: 0; width: @base-line-height*2; height: @base-line-height*2; background: @color-bg-site; text-align: center; position: fixed; z-index: 4; cursor: pointer; border-radius: 0 0 6px 0; box-shadow: 2px 1px 4px rgba(0,0,0,0.1); > i{ transition: all .3s ease; font-size: @h3-size; position: relative; top: 11px; } &:not(.toggled-class){ > i{ opacity: .5; } } &.toggled-class{ i{ &:before{ content: '\e80b'; } } } } @media all and (max-width: 990px){ .nav-sidebar-column{ transition: all .3s ease; left: -@sidebar-column-width; box-shadow: 2px 0px 4px rgba(0,0,0,0); &.active{ left: 0; box-shadow: 2px 0px 4px rgba(0,0,0,0.1); } } .nav-sidebar-column-toggle{ &.toggled-class{ left: @sidebar-column-width; } } .nav-container{ &.nav-container--sidebar{ + .main-container{ width: 100%; float: none; } } } } .nav-container{ &.nav-container--right{ .nav-sidebar-column{ right: 0; left: auto; } +.main-container{ float: left; } .nav-sidebar-column-toggle{ left: auto; right: 0; border-radius: 0 0 0 6px; box-shadow: -2px 1px 4px rgba(0,0,0,0.1); } } } @media all and (max-width: 990px){ .nav-container{ &.nav-container--right{ .nav-sidebar-column{ right: -@sidebar-column-width; left: auto; &.active{ left: auto; right: 0; box-shadow: -2px 0px 4px rgba(0,0,0,0.1); } } .nav-sidebar-column-toggle{ &.toggled-class{ left: auto; right: @sidebar-column-width; } } } } }theme_components/typography.less000066600000005106152442520560013224 0ustar00/*! -- Stack Typography -- */ @media all and (max-width: 1024px){ html{ font-size: 80%; } } h1,.h1{ &:not(:last-child){ margin-bottom: 0.59090909090909em; } letter-spacing: -.01em; } @media all and (min-width: 768px){ h1,.h1{ &.h1--large{ font-weight: 200; font-size: 4.428571428571429em; line-height: 1.048387096774194em; &:not(:last-child){ margin-bottom: 0.419354838709677em; } &.type--uppercase{ letter-spacing: 10px; margin-right: -10px; } +p.lead{ margin-top: 2.052631578947368em; } } } } h2,.h2{ margin-bottom: 0.78787878787879em; } h3,.h3{ margin-bottom: 1.04em; strong{ font-weight: 400; } } blockquote{ &:not(:last-child){ margin-bottom: 1.04em; } font-family: 'Merriweather', serif; font-style: italic; font-weight: 300; > p{ font-size: 1em !important; } } h4,.h4{ margin-bottom: 1.36842105263158em; font-weight: 400; &.inline-block{ +.h4{ &.inline-block:not(.typed-text){ margin-left: 0.68421052631579em; } } } } h5,.h5{ font-weight: 600; &:not(:last-child){ margin-bottom: @base-line-height; } } h6,.h6{ &:not(:last-child){ margin-bottom: 2.16666666666667em; } font-weight: 700; &.type--uppercase{ letter-spacing: 1px; margin-right: -1px; } } span{ &.h1,&.h2,&.h3,&.h4,&.h5,&.h6{ &:not(.inline-block){ display: block; } } } b{ font-weight: 600; } hr{ border-color: #ECECEC; } .bg--dark{ hr{ border-color: lighten(@color-dark, 20%) } } [class*='bg-']:not(.bg--white):not(.bg--secondary), [class*='imagebg']:not(.image--light){ p{ opacity: .9; } } .lead{ font-weight: 400; color: lighten(@color-body, 10%); &:not(:last-child){ margin-bottom: 1.36842105263158em; } +.btn{ &:last-child{ margin-top: @base-line-height/2; } } } p{ &:last-child{ margin-bottom: 0; } strong{ color: @color-dark; } } pre{ padding: @base-line-height/2; background: @color-bg-secondary; border: 1px solid #ececec; border-radius: 6px; line-height: 20px; max-height: 500px; } .bg--secondary{ > pre{ background: darken(@color-bg-secondary, 2%); border-color: #ddd; } } .text-block{ margin-bottom: @base-line-height; h2,.h2{ margin-bottom: 0.3939393939394em; } h5,.h5{ margin: 0; } h4,.h4{ &:not(:last-child){ margin-bottom: 0.3421052631579em; } } h3,.h3{ margin-bottom: 0.52em; } } @media all and (min-width: 768px){ div[class*='col-']{ .text-block{ +.text-block{ margin-top: @base-line-height*2; } } } } .heading-block{ margin-bottom: @base-line-height*2; h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ margin-bottom: 0; } }theme_components/notifications.less000066600000001174152442520560013670 0ustar00/*! -- Stack Notifications -- */ .notification{ margin: @base-line-height; box-shadow: none; &:not([class*='bg--']){ background: none; } >.boxed{ margin: 0; } >.feature, .feature__body{ margin-bottom: 0; } } .search-box{ width: 100%; margin: 0; &.notification--reveal{ z-index: 9999; } padding: @base-line-height; .notification-close-cross{ top: @base-line-height*1.25; right: @base-line-height; } .box-shadow; } .notification-close-cross{ &.notification-close-cross--circle{ background: #222; width: 2em; height: 2em; text-align: center; border-radius: 50%; color: #fff; } }theme_components/sliders.less000066600000003166152442520560012467 0ustar00/*! -- Stack Sliders -- */ .flickity-prev-next-button{ .transition(0.3s,ease); border-radius: 0; background: @color-dark; width: @base-line-height*1.5; height: @base-line-height*3; &:not(:hover){ opacity: .5; } &:hover{ background: @color-dark; } &.previous{ left: 0; } &.next{ right: 0; } &:before{ color: #fff; } } .slider{ &.slider--inline-arrows{ .flickity-prev-next-button{ background: none; &:before{ font-size: @h3-size; color: @color-dark; content: '\e802'; } &.previous{ &:before{ content: '\e801'; } } } } &.slider--columns{ .previous{ left: 15px; } .next{ right: 15px; } } &.border--round{ .slides{ li{ border-radius: 6px; overflow: hidden; } } } &.boxed--border{ .slides{ li{ border: 1px solid #ececec; } } } .slides{ li{ .feature:not(.feature-9){ margin-bottom: 0; } } } } .slide{ .boxed{ &:last-child{ margin-bottom: 0; } } &:not([class*='col-']){ >img{ &:only-child{ width: 100%; } } } } .bg--dark,.bg--primary,.imagebg:not(.image--light){ .slider{ &.slider--inline-arrows{ .flickity-prev-next-button{ &:before{ color: #fff; } } } } } @media all and (max-width: 990px){ .flickity-prev-next-button{ display: none; } } @media all and (min-width: 768px){ h2+.slider,.h2+.slider{ margin-top: @base-line-height*2; } } .slider.slider--ken-burns:not(.parallax) .slide.is-selected{ > .background-image-holder, > img:only-child{ animation: kenBurns 15s ease alternate infinite; -webkit-animation: kenBurns 15s ease alternate infinite; } }theme_components/buttons.less000066600000006155152442520560012521 0ustar00/*! -- Stack Buttons -- */ .btn{ position: relative; &:not([class*='primary']){ border-color: #d3d3d3; &:hover{ border-color: @color-dark; } } &.type--uppercase{ letter-spacing: .5px; .btn__text{ letter-spacing: .5px; margin-right: -.5px; } } .label{ top: -@base-line-height/2; right: -@base-line-height*2; } &.btn--lg{ .btn__text{ font-weight: 600; } &.type--uppercase{ .btn__text{ letter-spacing: 1px; } } } +p.type--fine-print,+span.type--fine-print{ margin-top: 1.08333333333334em; } &.block{ margin-left: 0; +.btn.block{ margin-top: @base-line-height/2; } } &:hover{ .translate3d(0,-2px,0); } &.btn--sm{ +.btn--sm{ margin-left: @base-line-height/2; } } } p{ > .btn{ text-decoration: none; } } @media all and (max-width: 767px){ .btn{ &:not(:last-child){ margin-bottom: @base-line-height; } } } .btn--icon{ padding-left: @base-line-height*3; i{ position: absolute; height: 100%; left: 0; top: 0; background: rgba(0,0,0,.1); padding: 0 13px; border-radius: @button-radius 0 0 @button-radius; font-size: 16px; line-height: 41px; &.socicon{ line-height: 42px; } } } .btn--cart{ width: @base-line-height*2; height: @base-line-height*2; border: 2px solid @color-dark; display: block; text-align: center; border-radius: 6px; opacity: .4; padding: 0; &:hover{ opacity: 1; } .btn__text{ position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); font-size: 1.142857142857143em; } } .imagebg:not(.image--light){ .btn--icon{ &:not([class*='bg']):not([class*='primary']){ i{ color: #fff; background: rgba(255,255,255,.2); } } } } @media all and (min-width: 768px){ .btn-group{ .btn{ margin-bottom: 0 !important; margin-left: 0; +.btn{ margin-left: 0; } &:not(:first-child):not(:last-child){ border-radius: 0; } &:first-child{ border-radius: 6px 0 0 6px; } &:last-child{ border-radius: 0 6px 6px 0; } &:first-child:nth-last-child(2),&:last-child:nth-child(2){ width: 50%; } } } } .btn-group{ border: none; padding: 0; } @media all and (max-width: 767px){ .btn-group{ .btn{ display: block; } } } .bg--primary{ div:not([class*='feature']){ .btn--primary{ background: #fff; border-color: #fff; .btn__text{ color: @color-primary; } } } > .btn--primary{ background: #fff; border-color: #fff; .btn__text{ color: @color-primary; } } } .bg--dark{ .btn{ &:not(.btn--primary){ border-color: lighten(@color-dark, 10%); &:hover{ border-color: lighten(@color-dark, 25%); } } .btn__text{ color: #fff; } } } .imagebg:not(.image--light){ .btn{ &:not([class*='primary']){ border-color: rgba(255,255,255,0.3); &:hover{ border-color: #fff; } } } } .imagebg.image--light{ .btn{ &:not([class*='primary']){ border-color: @color-dark; background: rgba(255,255,255,.3); &:hover{ background: rgba(255,255,255,.5); } } } } h1,.h1{ +.btn{ margin-top: @base-line-height; } } h2,.h2{ +.btn{ margin-top: @base-line-height/2; } }theme_components/tables.less000066600000001605152442520560012270 0ustar00/*! -- Stack Tables -- */ table{ width: 100%; border-collapse: separate; th,td{ padding: @base-line-height/2; } th{ background: @color-bg-secondary; color: @color-dark; } tr{ &:not(:last-of-type){ border-bottom: 1px solid #ececec; } } &.border--round{ border-radius: 6px; border: 1px solid #ececec; } } .table--alternate-column{ th{ &:nth-child(odd){ background: none; } } td{ &:nth-child(even){ background: @color-bg-secondary; } } } .table--alternate-row{ tbody{ tr{ &:nth-child(even){ background: @color-bg-secondary; } } } } .bg--dark{ table{ &.border--round{ border-radius: 6px; border: 1px solid lighten(@color-dark, 10%); } th{ background: lighten(@color-dark, 10%); color: #fff; } } .table--alternate-row{ tbody{ tr{ &:nth-child(even){ background: lighten(@color-dark, 5%) } } } } }theme_components/masonry.less000066600000005626152442520560012515 0ustar00/*! -- Stack Masonry -- */ .masonry__item:not(:empty){ margin-bottom: 30px; article{ margin: 0; .boxed{ margin: 0; } } transform-style: preserve-3d; } .masonry__item:empty{ height: 0; min-height: 0; } .masonry{ hr{ +.masonry__container, +.row{ margin-top: @base-line-height*2.5; } } } .masonry-filter-holder:not(.masonry-filters--horizontal){ display: inline-block; cursor: pointer; height: @base-line-height*2; position: relative; z-index: 9; min-width: 143px; .masonry__filters{ cursor: pointer; .transition(0.3s,ease); z-index: 2; display: inline-block; position: absolute; left: 0; text-align: left; padding: @base-line-height/2 @base-line-height; border: 1px solid #ececec; background: @color-bg-site; border-radius: 6px; ul{ margin: 0; cursor: pointer; li{ .transition(0.3s,ease); display: block; color: @color-body; white-space: nowrap; &:not(:last-child){ margin-bottom: @base-line-height/2; } &.active{ color: @color-primary; cursor: pointer; &:after{ content: '\25bc'; font-size: 8px; margin-left: 6px; position: relative; bottom: 2px; display: inline-block; transform: scaleX(1.4) scaleY(0.9); .transition(0.2s,linear); } } &:hover{ color: @color-primary; } } &:hover{ li{ &.active{ &:after{ opacity: 0; } } } } } } &:not(:hover){ .masonry__filters{ ul{ max-height: @base-line-height; overflow: hidden; li{ &:not(.active){ display: none; } } } } } &:hover{ .masonry__filters{ .box-shadow; ul{ li{ &.active{ cursor: default; } } } } } } .masonry-filters--horizontal{ display: inline-block; .masonry__filters{ display: inline-block; position: relative; margin-left: @base-line-height/2; } .masonry__filters ul li{ transition: all .3s ease; cursor: pointer; display: inline-block; &:not(:last-child){ margin-right: @base-line-height; } &.active{ color: @color-primary; } &:not(.active){ opacity: .5; } &:hover{ opacity: 1; } } } .masonry-filter-holder{ +.masonry__container{ margin-top: @base-line-height*2; } } .bg--dark{ .masonry-filter-holder{ .masonry__filters{ background: lighten(@color-dark, 2%); border-color: lighten(@color-dark, 10%); li{ color: #fff; } } } } .masonry.masonry-demos{ .masonry__item{ &:not(:empty){ margin-bottom: @base-line-height*2; } h5{ margin-bottom: 0; } &:not([style]){ .hover-item{ min-height: 450px; background: lighten(@color-dark, 5%); border: 1px solid lighten(@color-dark, 10%); } } } .hover-item{ .transition(0.35s,ease-out); border-radius: 6px; overflow: hidden; &:hover{ transform: translateY(-10px); } } .masonry__container{ margin-top: @base-line-height*2; } }theme_components/lightbox.less000066600000001104152442520560012630 0ustar00/*! -- Stack Lightboxes -- */ .lb-close{ position: relative; top: 10px; &:before{ content: '\00D7'; color: #fff; font-size: 2.5em; font-weight: 400; } &:hover{ text-decoration: none; } } .lb-prev,.lb-next{ &:after{ font-family: 'stack-interface'; position: fixed; } } .lb-prev{ &:after{ content: '\e801'; left: @base-line-height; } } .lb-next{ &:after{ content: '\e802'; right: @base-line-height; } } .lb-data{ overflow: hidden; min-height: 30px; } a[data-lightbox]{ .transition(0.3s,ease); &:hover{ opacity: .8; cursor: zoom-in; } }theme_components/accordions.less000066600000002716152442520560013146 0ustar00/*! -- Stack Accordions -- */ .accordion{ .accordion__title{ .transition(0.5s,ease); opacity: .5; margin-bottom: @base-line-height/2; &:hover{ opacity: 1; } &:before{ font-family: "stack-interface"; content: '\e80d'; margin-right: 6px; color: @color-dark; } span{ display: inline-block; } } li{ &.active{ margin-bottom: @base-line-height/2; .accordion__title{ opacity: 1; &:before{ content: '\e80a'; } } .accordion__content{ animation: fadeUp .5s ease forwards; -webkit-animation: fadeUp .5s ease forwards; } } } } .accordion-1{ li{ &.active{ .accordion__title{ span{ color: #fff; } &:before{ color: #fff; } border-color: @color-primary; } } .accordion__title{ border-radius: 6px; border-bottom: 1px solid #ECECEC; } } } .accordion-2{ li{ .accordion__title{ border-left: none; border-right: none; border-top: none; border-bottom: 1px solid #ECECEC; padding-left: 0; } &.active{ .accordion__title{ background: none; border-bottom: 1px solid rgba(0,0,0,0); } } } } .bg--dark,.imagebg:not(.image--light), .bg--primary{ .accordion-2, .accordion-1{ li{ .accordion__title{ &:before{ color: #fff; } border-color: lighten(@color-dark, 15%) } } } } .imagebg:not(.image--light), .bg--primary{ .accordion{ li{ .accordion__title{ border-color: rgba(255,255,255,.3); } } } }theme_components/labels.less000066600000001423152442520560012256 0ustar00/*! -- Stack Labels -- */ .label{ &:not([class*='bg--']){ background: @color-primary-1; } display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .5px; color: #fff; text-transform: uppercase; height: 26px; min-width: 65px; padding: 0 10px; text-align: center; border-radius: 50px; position: absolute; z-index: 3; top: @base-line-height/1.5; right: @base-line-height/1.5; &.label--inline{ position: relative; top: 0; right: 0; &:not(:last-child){ margin-right: @base-line-height/2; } +span, +p{ position: relative; top: 1px; } } &.switchable-toggle{ left: 50%; right: auto; .translate3d(-50%,0,0); .box-shadow-shallow; } } .bg--primary-1{ .label{ &:not([class*='bg--']){ background: @color-primary-2; } } }theme_components/helpers.less000066600000001637152442520560012465 0ustar00/*! -- Stack Helpers -- */ @media all and (max-width: 767px){ .block--xs{ margin-top: @base-line-height/2; } } .container{ .container{ max-width: 100%; } } .switchable-toggle{ cursor: pointer; user-select: none; -webkit-user-select: none; } .back-to-top{ position: fixed; width: @base-line-height*2; height: @base-line-height*2; background: #fff; border-radius: 50%; text-align: center; right: @base-line-height; bottom: @base-line-height*2; padding-top: 12px; .box-shadow; z-index: 99; border: 1px solid #ececec; i{ color: @color-dark; } .transition(0.2s,ease-out); &:not(.active){ opacity: 0; .translate3d(0,20px,0); pointer-events: none; } &.active{ &:hover{ .translate3d(0,-5px,0); } } } .disable-scroll-bars{ -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } }theme_components/forms.less000066600000027610152442520560012150 0ustar00/*! -- Stack Forms -- */ @media screen and (-webkit-min-device-pixel-ratio:0) { select, textarea, input { font-size: 16px; } } form:before,form:after{ content: ''; } .bg--dark,.imagebg:not(.image--light){ input,textarea, select, .input-select:after{ color: @color-body; } label{ color: #fff; } } .bg--dark{ form.attempted-submit{ input.field-error{ background: #D84D4D; color: #fff; } } } form{ position: relative; >div[class*='col-'],>.row > div[class*='col-']{ &:not(:last-child){ margin-bottom: @base-line-height/2; } } .boxed{ &:last-child{ margin: 0; } } &.form--clearfix{ margin-left: -15px; } } @media all and (min-width: 768px){ div[class*='col-']{ >form{ div[class*='col-']{ &:last-child{ &:nth-child(2){ padding-right: 0; } } &:first-child{ &:nth-last-child(2){ padding-left: 0; } } } } } form{ &.form--horizontal{ >div[class*='col-']{ margin: 0; } } } } @media all and (max-width: 767px){ .row{ form{ > .row{ margin-left: 0; margin-right: 0; } } } } h2+form,.h2+form{ margin-top: @base-line-height*1.5; } h3+form,.h3+form,.lead+form{ margin-top: @base-line-height*1.5; } .cover{ .lead+form{ margin-top: @base-line-height*2; } } form{ +span.type--fine-print{ margin-top: 1.08333333333334em; display: inline-block; } } .form--inline{ >span.h4{ color: @color-body; } input,[class*='input-']{ display: inline-block; max-width: 200px; } >span,input,[class*='input-']{ &:not(:last-child){ margin-right: @base-line-height/2; } } button{ max-width: 200px; } } .bg--dark,.imagebg:not(.image--light){ .form--inline{ >span.h4{ color: #fff; } } } button, input[type="submit"]{ &.btn{ font-size: @h6-size; font-weight: 700; padding-left: 0; padding-right: 0; &.btn--primary{ color: #fff; } &.type--uppercase{ letter-spacing: .5px; margin-right: -.5px; } } height: 3.25000000000001em; &.checkmark{ &.checkmark--cross{ width: @base-line-height; height: @base-line-height; border: none; background: @color-error; &:before{ content: '\00d7'; font-size: 18px; top: -1px; } } } &[type="submit"]{ &.btn--loading{ &:after{ background: @color-primary; } } } } .bg--primary{ button{ &.btn{ border-color: rgba(255,255,255,.5); color: #fff; &:hover{ border-color: #fff; } &.btn--primary{ color: @color-primary; border-color: @color-primary; } &.btn--primary-1{ border-color: @color-primary-1; } } } } input,select{ height: @base-line-height*1.5; } input{ &.field-error{ border-color: #EBA8A8; } &[type]{ +input[type],+.input-checkbox,+button,+.input-select{ margin-top: @base-line-height/2; } } } input,[class*='input-'] label,select,textarea{ .transition(0.3s,ease); } input,select,.input-select,textarea,button[type="submit"]{ &:not([class*='col-']){ width: 100%; } } input[type],select,textarea{ padding-left: @base-line-height/2; &:focus{ border-color: lighten(@color-primary, 10%); } } input[type="image"]{ border: none; padding: none; width: auto; } label{ font-size: .85714286em; } .bg--primary, .bg--primary-1{ label{ color: #fff; } } .input-icon{ i{ top: 8px; left: 8px; } input{ padding-left: @base-line-height*1.5; } &.input-icon--right{ i{ left: auto; right: 8px; } input{ padding-right: @base-line-height*1.5; padding-left: .92857143em; } } } .text-center{ .input-checkbox, .input-radio{ label{ margin: 0 auto; } } } .input-checkbox label, .input-radio label{ font-size: 1em; } .input-checkbox{ margin-top: @base-line-height/4; &.field-error{ label{ border-color: #EBA8A8; } } label{ background: none; border: 1px solid #d3d3d3; text-align: center; position: relative; &:not(:last-child){ margin-right: @base-line-height/4; } &:hover{ border-color: @color-primary; } &:before{ content: ''; left: 0; border-radius: 6px; position: absolute; width: 100%; height: 100%; border: 1px solid @color-primary; opacity: 0; .transition(0.3s,ease); } } input:checked{ + label{ border-color: @color-primary; background: @color-primary; &:after{ content: 'L'; transform: rotateY(180deg) rotateZ(-45deg); color: #fff; position: absolute; width: 100%; left: 0; top: -2px; font-weight: 700; } &:before{ animation: pulse .45s ease forwards; -webkit-animation: pulse .45s ease forwards; } } } +span{ display: inline-block; position: relative; bottom: 10px; margin-left: @base-line-height/2; font-size: @fine-print-size; white-space: nowrap; } } .input-checkbox{ +button[type]{ margin-top: @base-line-height/2; } +span+button[type]{ margin-top: @base-line-height/2; } } .bg--dark{ .input-checkbox{ &:not(.checked){ label{ border-color: lighten(@color-dark, 50%); } } +span{ opacity: .75; } } } .input-checkbox.input-checkbox--switch{ label{ width: @base-line-height*2; border-radius: 60px; &:before{ width: 20px; height: 20px; border-radius: 50%; border-color: #d3d3d3; opacity: 1; left: 2px; top: 2px; } &:hover{ &:before{ border-color: @color-primary; } } } input:checked{ + label{ background: none; &:before{ animation: none !important; background: @color-primary; border-color: @color-primary; transform: translateX(@base-line-height); } &:after{ display: none; } } } } .input-radio{ &.field-error{ label{ border-color: #EBA8A8; } } .input__label{ font-size: .85714286em; display: inline-block; + label{ margin-top: @base-line-height/2; } } label{ position: relative; background: none; border: 1px solid #d3d3d3; &:hover{ border-color: @color-primary; } &:before{ content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid @color-primary; .transition(0.3s,ease); opacity: 0; left: 0; } } input:checked{ + label{ border-color: @color-primary; background-color: @color-primary; &:after{ content: ''; position: absolute; width: 10px; height: 10px; left: 7px; top: 7px; background-color: #fff; border-radius: 50%; } &:before{ animation: pulse .4s ease forwards; } } } } .input-radio--innerlabel{ label{ transition: all .3s ease; height: @base-line-height*1.5; line-height: @base-line-height*1.35; padding: 0 @base-line-height/2; border: 1px solid #ececec; border-radius: 6px; cursor: pointer; width: 100%; text-align: center; } &:hover{ border-color: @color-primary; } input:checked{ +label{ border-color: @color-primary; background: @color-primary; color: #fff; &:after{ display: none; } &:before{ animation: none; } } } } @media all and (max-width: 1024px){ .input-radio input:checked + label:after{ top: 6px; left: 6px; } } .bg--primary{ .input-radio--innerlabel{ border-color: lighten(@color-primary, 10%); &:hover{ border-color: #fff; } &.checked{ background: #fff; border-color: #fff; label{ color: @color-primary; } } } } .bg--primary-1{ .input-radio--innerlabel{ border-color: lighten(@color-primary-1, 10%); &:hover{ border-color: #fff; } &.checked{ background: #fff; border-color: #fff; label{ color: @color-primary-1; } } } } .input-select{ select{ -moz-appearance: none; -webkit-appearance: none; } select::-ms-expand{ display:none; } &:not(:last-child){ margin-bottom: @base-line-height/2; } position: relative; &:after{ position: absolute; right: 0; height: 100%; top: 0; font-size: 30px; content: '\2263'; pointer-events: none; padding:0 13px; border-left: 1px solid #ececec; line-height: 31px; } &.input-select--borderless{ &:after{ border-left: none; } } &:focus{ &:after{ border-color: @color-primary; } } select{ &:focus{ border-color: @color-primary; } } } .input-number{ position: relative; > input[type="number"]{ padding-left: .46428571em; &::-webkit-inner-spin-button{ display: none; } -moz-appearance: textfield; width: 100%; text-align: center; } .input-number__controls{ position: absolute; height: 100%; width: 100%; right: 0; top: 0; padding: 0 @base-line-height/2; > span{ position: absolute; display: block; width: 10%; min-width: @base-line-height*2; height: 100%; cursor: pointer; -webkit-user-select: none; user-select: none; text-align: center; padding-top: 6px; transition: all .3s ease; &:hover{ color: @color-primary; } } .input-number__increase{ right: 0; border-left: 1px solid #ececec; } .input-number__decrease{ left: 0; border-right: 1px solid #ececec; } } } input[type="image"]{ padding: 0; width: auto; border: none; } /*! -- Stack Subscribe Forms -- */ .subscribe-form-1{ h3{ margin-bottom: 0.52em; } &.boxed{ form{ margin: @base-line-height; } } } // Desktop @media all and (min-width: 991px){ .subscribe-form-2{ p{ top: 2px; position: relative; } input{ margin: 0; } form{ [class*='col-']{ margin: 0 !important; } } } } // Mobile @media all and (max-width: 990px){ .subscribe-form-2{ text-align: center; form{ margin-top: @base-line-height } } } /*! -- Stack Elaborate Forms -- */ @media all and (max-width: 767px){ .elaborate-form-1{ .pos-vertical-center{ padding-left: 15px; padding-right: 15px; } form{ .col-xs-6:nth-child(even){ padding-left: 15px; } .col-xs-6:nth-child(odd){ padding-right: 15px; } } .row form > .row{ margin-left: -15px; margin-right: -15px; } } } /* Stack Boxed Forms */ .boxed-form{ h4{ margin-bottom: 0.684210526315789em; } &:last-child{ margin-bottom: 0; } } /* Stack Datepicker Form */ .datepicker{ cursor: pointer; &.datepicker--fluid{ +.picker{ max-width: none; } } } .picker{ transition: all .3s ease; z-index: 10; max-width: 100%; -webkit-transition: all .3s ease; margin-top: @base-line-height/4; position: absolute; background: @color-bg-site; border: 1px solid #ececec; border-radius: 6px; padding: @base-line-height/2; .box-shadow-wide; .picker__header{ text-align: center; margin-bottom: @base-line-height/2; > div{ font-weight: 600; display: inline-block; color: @color-dark; &:not(:last-child){ margin-right: @base-line-height/4; } } .picker__nav--prev, .picker__nav--next{ height: 10px; width: 10px; cursor: pointer; &:after{ font-family: 'stack-interface'; } } .picker__nav--next{ float: right; &:after{ content: '\e80c'; } } .picker__nav--prev{ float: left; &:after{ content: '\e80b'; } } } .picker__day{ transition: all .3s ease; cursor: pointer; &.picker__day--highlighted{ color: @color-primary; font-weight: 600; } &:hover{ color: @color-primary; } } &:not(.picker--opened){ opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0); } .picker__holder{ outline: none !important; border: none !important; } table{ td{ padding: @base-line-height/4; padding-top: 0; } } .picker__footer{ text-align: center; } .picker__button--today{ float: left; } .picker__button--close{ float: right; } button{ transition: all .3s ease; height: auto; border: none; display: inline-block; &:not(:hover){ opacity: .5; } } } /* Stack Horizontal Forms */ .form-horizontal{ display: flex; > div[class*='col-'], >div[class*='col-']:not(:last-child){ margin-bottom: 0; display: flex; align-items: flex-end; flex-wrap: wrap; } .picker{ top: 100%; } } @media all and (max-width: 990px){ .form-horizontal{ display: block; } label{ margin-top: @base-line-height/4; } button{ margin-top: @base-line-height; } }theme_components/features-small.less000066600000011544152442520560013745 0ustar00/*! -- Stack Features Small -- */ .feature{ &:not(.boxed){ margin-bottom: 60px; } &.feature--featured{ &:after{ content: ''; position: absolute; bottom: 0; width: 100%; height: 4px; background: @color-primary; left: 0; } } h5{ margin: 0; } h4{ margin-bottom: 0.342105263157895em; + p{ max-width: @base-line-height*12; } } i+h5{ margin-top: @base-line-height; } i+h4{ margin-top: 0.68421052631579em; } i.icon--lg+h4{ margin-top: 1.36842105263158em; } i.icon--lg+.h5{ margin-top: @base-line-height/2; } img+.boxed{ border-radius: 0 0 6px 6px; border-top: none; } } a.feature{ display: block; text-decoration: none; font-weight: normal; color: @color-body; img:first-child:not(:last-child){ margin-bottom: @base-line-height/2; } } @media all and (max-width: 767px){ a.feature{ margin-bottom: @base-line-height/2 !important; } } .imagebg:not(.image--light){ .feature{ &.bg--white{ a:not(.btn){ color: @color-primary; } .label{ color: #fff; } } } } @media all and (max-width: 767px){ .feature{ .feature__body{ form{ .row{ margin-left: 0; margin-right: 0; } } } } } section.text-center .feature-6{ h4 + p{ margin: 0 auto; } } @media all and (min-width: 768px){ .row{ div[class*='col-']{ &:nth-child(1):nth-last-child(3),&:nth-child(2):nth-last-child(2),&:nth-child(3):last-child{ .feature{ margin-bottom: 0; } } } } } a.block{ >.feature{ .transition(0.3s,ease); } &:hover{ >.feature{ .box-shadow; } } } .feature-1{ min-height: @base-line-height*6; p{ margin: 0; } p.lead{ min-height: 5.05263157894737em; } > img{ &:first-child{ border-radius: 6px 6px 0 0; } } >a.block{ img{ border-radius: 6px 6px 0 0; } +.feature__body{ border-radius: 0 0 6px 6px; } } &[class*='box-shadow']{ border-radius: 6px; .transition(0.35s,ease-out); &:hover{ .translate3d(0,-10px,0); .box-shadow-wide; } } } .hover-shadow{ border-radius: 6px; backface-visibility: hidden; overflow: hidden; border: 1px solid #ececec; .transition(0.35s,ease-out); &:hover{ .translate3d(0,-10px,0); .box-shadow-wide; } } .bg--dark{ .hover-shadow{ border-color: #222; &:hover{ box-shadow: 0 23px 40px rgba(0, 0, 0, 1); } } } .feature-2{ overflow: hidden; .feature__body{ width: 75%; float: right; } h5{ margin-bottom: @base-line-height/4; } p{ &:last-child{ margin: 0; } } i{ width: 25%; float: left; } } .feature-large{ .feature-2{ + .feature-2{ &:last-child{ margin-bottom: 0; } } } } @media all and (max-width: 990px){ .feature-2{ .feature__body,i{ width: 100%; float: none; } p{ &:first-of-type{ margin-top:@base-line-height/2; } } } } .feature-3{ i{ margin-bottom: 0.16666666666667em; } p{ min-height: @base-line-height*4; } } .feature-4{ .btn{ position: absolute; width: 100%; bottom: 0; left: 0; border-radius: 0; padding: @base-line-height/2; &:hover{ transform: none; } } p{ min-height: @base-line-height*5; &:last-of-type{ margin-bottom: @base-line-height*2; } } } .feature-5{ i{ width: 25%; float: left; } .feature__body{ width: 75%; float: right; } p{ min-height: @base-line-height*3; &:last-of-type{ margin-bottom: @base-line-height/2; } } &:not([class*='bg-']){ color: @color-dark; } } .feature-6{ p{ min-height: @base-line-height*5; &:last-child{ margin: 0; } } } .feature-7{ height: @base-line-height*7; &[data-overlay]{ &:before{ border-radius: 6px; .transition(0.3s,ease); } &:hover{ &:before{ opacity: .75; } } } .background-image-holder{ border-radius: 6px; } h3{ margin: 0; } margin-bottom: 30px; } .row--gapless{ .feature-7{ margin: 0; border-radius: 0; .background-image-holder{ border-radius: 0; } &:before{ border-radius: 0; } } } @media all and (max-width: 767px){ .feature-7{ .pos-vertical-center{ top: 50%; .translate3d(0,-50%,0); } } } .feature-8{ &:not(.boxed){ margin-bottom: 0; } padding: @base-line-height*1.5 0 @base-line-height*2 0; .feature__body{ max-width: 70%; margin: 0 auto; } p{ min-height: @base-line-height*3; } } @media all and (max-width: 990px){ .feature-8{ .feature__body{ max-width: 85%; } } } @media all and (max-width: 767px){ .feature{ p{ min-height: auto; margin-left: auto; margin-right: auto; } &.boxed{ margin-bottom: 15px; } &:not(.boxed){ margin-bottom: 30px; } &.feature-8{ margin-bottom: 0; } } } .feature-8{ img{ max-height: @base-line-height*8; } } .feature-9{ h4{ margin: 0; } &:not(.boxed){ margin-bottom: 30px; } } @media all and (min-width: 768px){ .features-small-14{ .text-block{ margin-bottom: @base-line-height*2; } h4{ min-height: 2.736842105263158em; } } }theme_components/tooltips.less000066600000002536152442520560012677 0ustar00/*! -- Stack Tooltips -- */ .tooltip{ position: relative; top: 3px; display: inline-block; width: @base-line-height/1.5; height: @base-line-height/1.5; border-radius: 50%; background: @color-dark; text-align: center; cursor: pointer; .tooltip__anchor{ color: #fff; font-weight: 700; font-size: 11px; position: absolute; top: -5px; left: 6px; } .tooltip__text{ .transition(0.2s,ease); text-align: left; z-index: 10; position: absolute; width: 280px; background: @color-bg-secondary; border: 1px solid #ececec; padding: @base-line-height/3; left: @base-line-height/1.25; top: -@base-line-height/2; opacity: 0; pointer-events: none; cursor: default; .box-shadow; line-height: 20px; } &:hover{ .tooltip__text{ opacity: 1; } } &:last-child{ margin-left: @base-line-height/2; } } [data-tooltip]{ position: relative; overflow: visible; &:after{ transition: all .2s ease; content: attr(data-tooltip); position: absolute; top: -24px; left: 50%; transform: translateX(-50%); background: @color-dark; color: #fff; border: 1px solid #e7e7e7; padding: 2px 12px; pointer-events: none; white-space: nowrap; font-size: 11px; line-height: 18px; font-weight: 600; border-radius: 2px; z-index: 2; font-family: @body-font; } } [data-tooltip]:not(:hover){ &:after{ opacity: 0; } }theme_components/processes.less000066600000010042152442520560013017 0ustar00/*! -- Stack Processes -- */ .process-1{ padding: @base-line-height*2 0; position: relative; overflow: hidden; .process__item{ width: 50%; &:not(:last-child){ margin-bottom: @base-line-height; } } &:before{ content: ''; position: absolute; width: 2px; height: 100%; left: 50%; top: 0; background: @color-primary; } } .process__item{ position: relative; &:after{ content: ''; width: @base-line-height; height: @base-line-height; background: #fff; border: 2px solid @color-primary; border-radius: 50%; position: absolute; top: 0; margin-left: 1px; } } @media all and (min-width: 768px){ .process-1{ .process__item{ &:nth-child(odd){ text-align: right; padding-right: @base-line-height*2; &:after{ right: -@base-line-height/2; } } &:nth-child(even){ margin-left: 50%; padding-left: @base-line-height*2; &:after{ left: -@base-line-height/2; } } } } } @media all and (max-width: 767px){ .process-1,.process-2{ &:before{ left: @base-line-height/2; } .process__item{ width: 100%; padding-left: @base-line-height*2; &:after{ left: 0; } } } } .bg--dark, .imagebg{ .process-1, .process-2{ &:before{ background: #fff; } .process__item{ &:after{ background: #fff; } } } } .bg--dark{ .process-1, .process-2{ .process__item{ &:after{ border-color: @color-dark; } } } } .process-2{ position: relative; .process__item{ padding-top: @base-line-height*2; &:after{ display: inline-block; text-align: center; } } &:before{ content: ''; position: absolute; width: 100%; height: 2px; top: @base-line-height/2; left: 0; background: @color-primary; } } @media all and (max-width: 767px){ .process-2{ &:before{ height: 100%; width: 2px; left: @base-line-height; margin-left: 2px; } .process__item{ &:after{ top: @base-line-height*2; } } } } .process-3{ list-style: none; position: relative; li{ position: relative; z-index: 1; overflow: hidden; .process__number{ float: left; width: 15%; width: @base-line-height *2; height: @base-line-height * 2; border-radius: 50%; border: 2px solid @color-primary; background: #fff; text-align: center; span{ font-size: @h4-size; font-weight: bold; color: @color-primary; position: relative; top: 12px; } } .process__body{ width: 80%; float: right; h4{ margin-bottom: 0.342105263157895em; } } &:not(:last-child){ margin-bottom: @base-line-height * 2; } } &:before{ content: ''; position: absolute; height: 100%; width: 1px; left: @base-line-height; top: 0; border-left: 1px dashed #ddd; } } .bg--dark{ .process-3{ li{ .process__number{ background: @color-dark; } } &:before{ border-color: #aaa; } } } .process-stepper{ > li{ transition: all .3s ease; display: inline-block; float: left; text-align: center; position: relative; &:before{ transition: all .3s ease; content: ''; width: @base-line-height/2; height: @base-line-height/2; background: #ccc; border-radius: 50%; display: block; margin: 0 auto; margin-bottom: @base-line-height/2; } &:after{ transition: all .3s ease; content: ''; width: 100%; height: 2px; position: absolute; background: #ccc; top: 5px; left: 0; } &:first-child, &:last-child{ &:after{ width: 50%; } } &:first-child{ &:after{ left: 50%; } } &.active{ &:before, &:after{ background: @color-primary; } } > span{ cursor: default; } } &[data-process-steps="6"]{ > li{ width: 16.666666666666667%; } } &[data-process-steps="5"]{ > li{ width: 20%; } } &[data-process-steps="4"]{ > li{ width: 25%; } } &[data-process-steps="3"]{ > li{ width: 33.33333333%; } } &[data-process-steps="2"]{ > li{ width: 50%; } } } .bg--dark{ .process-stepper{ li{ &:not(.active){ &:before, &:after{ background: lighten(@color-dark, 20%) } } } } }
/home/atelierpru/provence/6bf95/../tmp/../52177/./less.tar