Created
January 19, 2015 12:11
-
-
Save jonaslsl/5d399a06aded3dc54f1a to your computer and use it in GitHub Desktop.
LESS Boilerplate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
LESS CSS BOILERPLATE | |
*/ | |
@import "lesshat.less"; | |
@import url(http://fonts.googleapis.com/css?family=Arvo:400,700); | |
/* RESET */ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h3, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, font, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td { | |
border: 0; | |
font-family: inherit; | |
font-size: 100%; | |
font-style: inherit; | |
font-weight: inherit; | |
margin: 0; | |
outline: 0; | |
padding: 0; | |
vertical-align: baseline; | |
} | |
/* PATTERNS */ | |
html { | |
font-size:62.5%; | |
-webkit-text-size-adjust: none; | |
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ | |
-moz-box-sizing: border-box; /* Firefox, other Gecko */ | |
box-sizing: border-box; /* Opera/IE 8+ */ | |
/* Prevent Mobile Browser Click Delay */ | |
-ms-touch-action: manipulation; | |
touch-action: manipulation; | |
/* determina o tamanho máximo da tela e centraliza o site */ | |
/*max-width: 1480px;*/ | |
margin: 0 auto; | |
} | |
/* Prevent Mobile Browser Click Delay */ | |
a, input, button { | |
-ms-touch-action: none !important; | |
} | |
@viewport { | |
width: device-width; | |
zoom: 1; | |
} | |
body { | |
background: #FFF; /* Old browsers */ | |
font-family: 'Raleway', Arial, Helvetica, sans-serif; | |
height:100%; | |
font-style:normal; | |
} | |
*{ | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
text-decoration: none; | |
&:hover { | |
-webkit-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
-ms-transition: all 0.3s ease-in-out; | |
-o-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
} | |
} | |
/* Tira o "X" dos inputs no IE */ | |
input::-ms-clear { | |
display: none; | |
} | |
/* Class para centralização vertical, através de JS */ | |
.vertical { | |
margin-top: auto; | |
top:0; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
* { | |
zoom: 1; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
} | |
a { | |
text-decoration: none; | |
outline: none; | |
color: black; | |
img { | |
border: none; | |
&:hover { | |
border: none; | |
} | |
} | |
} | |
/* AQUI COMEÇA A PADRONIZAÇÃO DO THEMA */ | |
/* COLORS */ | |
@gray: #999999; | |
@black: #000000; | |
@red: #ee2e24; | |
@white: #ffffff; | |
@d_red: #b20e10; | |
@d_red_2: #74020c; | |
@l_blue: #3b5998; | |
@blue: #00aced; | |
@d_green: #48be7f; | |
@d_gray: #b7b7b7; | |
@d_orange: #e31417; | |
@orange: #d14836; | |
@l_black: #313131; | |
@l_gray:#eeeeee; | |
.gray{ color: @gray; } | |
.black{ color: @black; } | |
.red{ color: @red; } | |
.white{ color: @white; } | |
.d_red { color: @d_red_2; } | |
.red_bkg{ background-color: @red; } | |
.d_red_bkg{ background-color: @d_red; } | |
.l_blue_bkg{ background-color: @l_blue; } | |
.blue_bkg{ background-color: @blue; } | |
.d_green_bkg{ background-color: @d_green; } | |
.d_gray_bkg{ background-color: @d_gray; } | |
.d_orange_bkg{ background-color: @d_orange; } | |
.orange_bkg{ background-color: @orange; } | |
.black_bkg{ background-color: @black; } | |
.l_black_bkg{ background-color: @l_black; } | |
.l_gray_bkg{ background-color: @l_gray; } | |
.white_bkg{ background-color: @white; } | |
/* FONTS */ | |
/* @font-face kit by Fonts2u (http://www.fonts2u.com) */ | |
/*@font-face { | |
font-family:"Mathlete-Bulky"; | |
src:url("fonts/mathlete/Mathlete-Bulky.eot?") format("eot"), | |
url("fonts/mathlete/Mathlete-Bulky.woff") format("woff"), | |
url("fonts/mathlete/Mathlete-Bulky.ttf") format("truetype"), | |
url("fonts/mathlete/Mathlete-Bulky.svg#Mathlete-Bulky") format("svg"); | |
font-weight:normal; | |
font-style:normal; | |
}*/ | |
@main_font: "Raleway", Helvetica, Arial, sans-serif; | |
@sec_font: "Arvo", Helvetica, Arial, sans-serif; | |
@font_weight: 100; | |
@font_size: 1rem; | |
@line_height: 1rem; | |
h1, h2, h3, h4, h5, h6, p { | |
-webkit-font-smoothing: antialiased;/* Better Font Rendering =========== */ | |
-moz-osx-font-smoothing: grayscale;/* Better Font Rendering =========== */ | |
color: @black; | |
} | |
h1, h2, h3, h4, h6{ | |
font-family: @main_font; | |
font-weight: 900; | |
} | |
h5, p, a { | |
font-family: @sec_font; | |
font-weight: normal; | |
} | |
/* quem somos */ | |
h1{ | |
font-size: 18px; | |
font-size: @font_size*1.8; | |
} | |
/*o que fazemos */ | |
h2{ | |
font-size: 17px; | |
font-size: @font_size*1.7; | |
text-transform: uppercase; | |
} | |
/* nomes equipe e título contato*/ | |
h3{ | |
font-size: 13px; | |
font-size: @font_size*1.3; | |
} | |
/* copyright */ | |
h4{ | |
font-size: 11px; | |
font-size: @font_size*1.1; | |
} | |
/* contato */ | |
h5{ | |
font-size: 14px; | |
font-size: @font_size*1.4; | |
} | |
/* nome profissional */ | |
h6{ | |
font-size: 30px; | |
font-size: @font_size*3.0; | |
} | |
p{ | |
font-size: 14px; | |
font-size: @font_size*1.4; | |
} | |
a{ | |
font-size: 16px; | |
font-size: @font_size*1.6; | |
line-height: 23px; | |
} | |
nav a{ | |
font-family: @main_font; | |
font-weight: 900; | |
color: @black; | |
text-transform: uppercase; | |
} | |
/* ICON FONT - ICOMOON.COM */ | |
@font-face { | |
font-family: 'icomoon'; | |
src:url('fonts/icons/icomoon.eot?kn2mp9'); | |
src:url('fonts/icons/icomoon.eot?#iefixkn2mp9') format('embedded-opentype'), | |
url('fonts/icons/icomoon.woff?kn2mp9') format('woff'), | |
url('fonts/icons/icomoon.ttf?kn2mp9') format('truetype'), | |
url('fonts/icons/icomoon.svg?kn2mp9#icomoon') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
[class^="icon-"], [class*=" icon-"] { | |
font-family: 'icomoon'; | |
speak: none; | |
font-style: normal; | |
font-weight: normal; | |
font-variant: normal; | |
text-transform: none; | |
line-height: 1; | |
/* Better Font Rendering =========== */ | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.icon-tw:before { | |
content: "\63"; | |
} | |
.icon-gp:before { | |
content: "\64"; | |
} | |
.icon-in:before { | |
content: "\72"; | |
} | |
.icon-fb:before { | |
content: "\65"; | |
} | |
.social{ | |
font-size: 20px; | |
float: left; | |
margin: 0px 5px; | |
} | |
.social_wrapper{ | |
margin: @r3 @r3 0; | |
} | |
.fb:hover{ color: @l_blue; } | |
.tw:hover{ color: @blue; } | |
.gp:hover{ color: @orange; } | |
.in:hover{ color: @d_orange; } | |
/* DEFINE OS ATRIBUTOS DE BOLD E STRONG */ | |
.bold { | |
font-weight: (@font_weight * 7); | |
} | |
strong { | |
font-weight: (@font_weight * 7); | |
} | |
/* BOTÕES | |
.btn { | |
color: white; | |
text-decoration: none; | |
box-sizing: border-box; | |
padding: 10px 18px; | |
font-family: @main_font; | |
font-weight: (@font_weight * 9); | |
text-transform: uppercase; | |
font-size: 12px; | |
line-height: 30px; | |
line-height: (@line_height * 3); | |
letter-spacing: .05em; | |
text-align: left; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
display: block; | |
[class*="i"]{ | |
margin: 3px 0px 0px 18px; | |
font-size: 23px; | |
float: right; | |
color:white; | |
display: inline-block; | |
font-weight: bold; | |
padding: 0; | |
} | |
} | |
.btn-large{ width: 200px; padding: 7px 18px; } | |
.btn-medium{ width: 180px; } | |
.btn-small{ width: 150px; } | |
.btn-tiny{ width: 80px; } | |
.red_btn{ | |
background-color: @red; | |
&:hover { background-color: @l_black; } | |
&:active{ background-color: @black; } | |
} | |
.d_red_btn{ background-color: @d_red; } | |
.l_blue_btn{ background-color: @l_blue; } | |
.blue_btn{ background-color: @blue; } | |
.d_green_btn{ background-color: @d_green; } | |
.d_gray_btn{ background-color: @d_gray; } | |
.d_orange_btn{ background-color: @d_orange; } | |
.orange_btn{ background-color: @orange; } | |
.black_btn{ background-color: @black; } | |
.l_black_btn{ | |
background-color: @l_black; | |
&:hover { | |
background-color: @red; | |
} | |
&:active { | |
background-color: @d_red; | |
} | |
} | |
.l_gray_btn{ | |
background-color: @l_gray; | |
[class*="i"]{ | |
background-color: @red; | |
width: 50px; | |
margin: -10px -18px 0px 0px; | |
height: 50px; | |
padding: 12px; | |
text-align: center; | |
} | |
&:hover { | |
text-decoration: underline; | |
} | |
&:active { | |
text-decoration: underline; | |
color: @black; | |
} | |
} | |
.white_btn{ | |
background-color: @white; | |
border: 3px solid @black; | |
color: black; | |
[class*="i"]{ color: black; } | |
&:hover { | |
background-color: @red; | |
border: 3px solid @red; | |
color: @white; | |
[class*="i"]{ color: @white; } | |
} | |
&:active{ | |
background-color: @d_red; | |
border: 3px solid @d_red; | |
color: @white; | |
[class*="i"]{ color: @white; } | |
} | |
}*/ | |
*:focus { outline:none; } | |
a [class*="i"]{ | |
float: left; | |
padding: 0 @r3/2; | |
} | |
/* INPUTS */ | |
input{ | |
height: 50px; | |
padding-left: 18px; | |
border: 2px @l_gray solid; | |
font-family: @sec_font; | |
font-size: 14px; | |
} | |
input.active{ | |
border: 2px @d_green solid; | |
} | |
input.alert{ | |
border: 2px @red solid; | |
} | |
input.disabled{ | |
background-color: @l_gray; | |
} | |
/* GLOBAL VARIABLES */ | |
/* STRUCTURE - contains only structural elements like heder, footer, main_container and page_container */ | |
@page_width: 100%; | |
@page_max: 1280px; | |
@main_width: 1280px; | |
@main_max_width: 1280px; | |
@main_padding: 10px; | |
@col_padding: 20px; | |
/* Div que engloba tudo no tamanho da tela, evita espaços brancos nas laterais */ | |
header{ | |
position: fixed; | |
z-index: 10; | |
background-color: @white; | |
width: 100%; | |
} | |
.page{ | |
width: @page_width; | |
} | |
/* usada para limitar o tamanho do conteudo principal*/ | |
.main{ | |
width: @main_width; | |
max-width: @main_max_width; | |
clear: both; | |
min-height: 50px; | |
margin: auto; | |
box-sizing: border-box; | |
padding: 0px @main_padding; | |
} | |
/* bloco de conteudo principal */ | |
.content{ | |
width: 100%; | |
display: inline-block; | |
position: relative; | |
} | |
.row{ | |
overflow: hidden; | |
clear: both; | |
} | |
.page_wrapper{ | |
position: relative; | |
} | |
/* MENU */ | |
@menu_transition_time: 1s; | |
@menu_link_padding: 11px 141px 11px 37px; | |
@menu_desktop_margin: 0 25px; | |
/* MENU MOBILE */ | |
@menu_min_height_mobile: 100%; | |
@menu_width_mobile: 80%; | |
/* MENU TABLET */ | |
@menu_min_height_tablet: 100%; | |
@menu_width_tablet: 40%; | |
/* MEDIA QUERIES */ | |
@mobile_min_size: 0px; | |
@mobile_max_size: 520px; | |
@tablet_min_size: 521px; | |
@tablet_max_size: 960px; | |
@desktop_min_size: 961px; | |
@desktop_max_size: 1220px; | |
@bigdesktop_min_size: 1221px; | |
@mobile: ~"screen and (min-width: @{mobile_min_size}) and (max-width: @{mobile_max_size})"; | |
@tablet: ~"screen and (min-width: @{tablet_min_size}) and (max-width: @{tablet_max_size})"; | |
@desktop: ~"screen and (min-width: @{desktop_min_size}) and (max-width: @{desktop_max_size})"; | |
@bigdesktop: ~"screen and (min-width: @{bigdesktop_min_size})"; | |
/* FORM */ | |
@form_width: 50%; | |
@send_btn_width: 100px; | |
@send_btn_height: 30px; | |
@input_height: 55px; | |
@input_margin_bottom: 12px; | |
@input_border_radius: 5px; | |
@input_border: solid 1px black; | |
@input_padding_left: 8px; | |
@box_shadow_x: 0px; | |
@box_shadow_y: 0px; | |
@box_shadow_blur: 8px; | |
@box_shadow_color: #FFF; | |
@focus_border: solid 1px black; | |
@textarea_height: 200px; | |
@textarea_padding: 10px 0px 0px 8px; | |
@textarea_margin: 0px 0px 5px; | |
/* RITMO */ | |
@r1: 60px; | |
@r2: 30px; | |
@r3: 15px; | |
/* RITMO LATERAL */ | |
@rl:15px; | |
/* Column */ | |
@col_size: 144px; | |
.lft { | |
float: left !important; | |
} | |
.rgt { | |
float: right !important; | |
} | |
.inline{ | |
display: inline; | |
} | |
/* GRID */ | |
.mixin-col { | |
border:0px solid rgba(0,0,0,0); | |
float:left; | |
-webkit-box-sizing:border-box; | |
-moz-box-sizing:border-box; | |
box-sizing:border-box; | |
-moz-background-clip:padding-box !important; | |
-webkit-background-clip:padding-box !important; | |
background-clip:padding-box !important; | |
} | |
.col { | |
.mixin-col; | |
} | |
.mixin-span(@num, @gutter_pc, @gutter_px) { | |
width: (@gutter_px * @num) + (@gutter_pc * (@num - 1)); | |
//border-left-width:@gutter_px; | |
//padding:@padding; | |
//margin-left:@gutter_pc; | |
} | |
.mixin-span_first { | |
margin-left:0; | |
} | |
.row .col:first-child { | |
.mixin-span_first; | |
} | |
/* TAMANHO DAS COLUNAS - ADICIONAR OS ELEMENTOS NESTAS CLASSES */ | |
.col { | |
/*margin-left:0%; | |
padding:0 0%;*/ | |
margin: 0px 0px 0px @rl; | |
} | |
.row .col:first-child { | |
margin-left:0; | |
} | |
.span_1 { | |
.mixin-span(1, @rl, @col_size); | |
} | |
.span_2 { | |
.mixin-span(2, @rl, @col_size); | |
} | |
.span_3 { | |
.mixin-span(3, @rl, @col_size); | |
} | |
.span_4 { | |
.mixin-span(4, @rl, @col_size); | |
} | |
.span_5 { | |
.mixin-span(5, @rl, @col_size); | |
} | |
.span_6 { | |
.mixin-span(6, @rl, @col_size); | |
} | |
.span_7 { | |
.mixin-span(7, @rl, @col_size); | |
} | |
.span_8 { | |
.mixin-span(8, @rl, @col_size); | |
} | |
/* CONTENT */ | |
.demo{ | |
background-color: @l_gray; | |
} | |
.top{ | |
max-height: 60px; | |
padding: @r3 0px; | |
a{ | |
color: @red; | |
} | |
} | |
/* NAV */ | |
.top-nav{ | |
width: 100%; | |
height: 40px; | |
.lang_selector { | |
font-size: 1.2em; | |
} | |
} | |
.en{ | |
margin: @r3 !important; | |
} | |
.logo{ | |
margin-top: -10px; | |
position: absolute; | |
z-index: 1; | |
left: 50%; | |
margin-left: -26px; | |
img { | |
width: 52px; | |
box-shadow: 0 4px 4px -4px #000; | |
} | |
} | |
nav{ | |
margin-top: -46px; | |
} | |
nav li{ | |
float: left; | |
display: inline; | |
margin: @r2 39px 0; | |
&:first-child { | |
margin-left: 18px; | |
} | |
} | |
nav li a{ | |
font-size: 1.2rem; | |
padding-bottom: 12px; | |
display: inline-block; | |
} | |
nav li a:hover{ | |
// color: @red; | |
} | |
.menu_wrapper{ | |
overflow: hidden; | |
margin: 0 auto; | |
width: 967px; | |
} | |
ul.row{ | |
box-shadow: 0px 2px 3px #888888; | |
} | |
#menu-link{ | |
float: right; | |
padding: @r3; | |
cursor: pointer; | |
display: none; | |
} | |
.logo_mobile{ | |
display: none; | |
} | |
/* STRUCTURE */ | |
main{ | |
/*margin-top: -50px;*/ | |
} | |
.page_wrapper{ | |
overflow: hidden; | |
} | |
.bkg{ | |
height: 100%; | |
background-repeat: no-repeat; | |
background-size: 100%; | |
z-index: -1; | |
} | |
.hide{ | |
display: none; | |
} | |
/* HOME */ | |
.home img{ | |
width: 100%; | |
z-index: -9999; | |
position: relative; | |
} | |
.home{ | |
padding-top: 59px; | |
} | |
.home p{ | |
position: absolute; | |
right: @r1; | |
bottom: @r2; | |
} | |
/* Quem somos */ | |
.quem{ | |
position: relative; | |
#slideshowwho{ | |
position: relative; | |
} | |
#slideshowwho > div { | |
position: absolute; | |
} | |
.img_bkg{ | |
width: 100%; | |
position: relative; | |
} | |
.txt-wrapper{ | |
position: absolute; | |
top: @r1; | |
//transform: translateY(-12%); | |
em { | |
font-size: 1.2em; | |
} | |
} | |
.title{ | |
margin: @r3 0 0 @r1; | |
text-align: center; | |
} | |
.since{ | |
width: 275px; | |
position: absolute; | |
bottom: @r2; | |
} | |
.red_line{ | |
border-top: 2px solid @red; | |
width: 300px; | |
} | |
.subtitle{ | |
display: inline-block; | |
padding: @r3/2 @r1*2; | |
position: absolute; | |
bottom: @r2; | |
right: 0px; | |
} | |
} | |
/* O que fazemos */ | |
.oque{ | |
.main{ | |
margin: @r1 auto @r1; | |
} | |
.col{ | |
margin: 0 auto !important; | |
float: none; | |
width: 1100px; | |
} | |
.img_wrapper{ | |
width: 333px; | |
height: 361px; | |
position: relative; | |
margin: 0 @r3 @r2; | |
float: left; | |
cursor: pointer; | |
} | |
img{ | |
position: absolute; | |
} | |
.bl{ | |
position: relative; | |
top: 25%; | |
width: 160px; | |
height: 160px; | |
width: 160px; | |
background-color: rgba(0,0,0,0.5); | |
margin: 0 auto; | |
text-align: center; | |
cursor: pointer; | |
-webkit-transition: opacity 0.2s ease-in-out; | |
-moz-transition: opacity 0.2s ease-in-out; | |
-ms-transition: opacity 0.2s ease-in-out; | |
-o-transition: opacity 0.2s ease-in-out; | |
transition: opacity 0.2s ease-in-out; | |
} | |
.bl h2{ | |
margin: 0; | |
position: absolute; | |
top:50%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
line-height: 100%; | |
opacity: 1; | |
} | |
.info{ | |
opacity: 0; | |
position: absolute; | |
width: 100%; | |
background-color: rgba(0,0,0,0.9); | |
height: 100%; | |
top: 0; | |
padding: @r1 @r2; | |
cursor: pointer; | |
-webkit-transition: opacity 0.4s ease-in-out; | |
-moz-transition: opacity 0.4s ease-in-out; | |
-ms-transition: opacity 0.4s ease-in-out; | |
-o-transition: opacity 0.4s ease-in-out; | |
transition: opacity 0.4s ease-in-out; | |
h2{ | |
padding-bottom: @r3; | |
} | |
ul li { | |
list-style: disc; | |
color: #fff; | |
} | |
p { | |
font-size: 1.5em !important; | |
line-height: 150%; | |
} | |
} | |
.service_link{ | |
padding-top: @r2; | |
display: inline-block; | |
} | |
} | |
.contato{ | |
padding-top: @r1*2; | |
img, .address{ | |
float: left; | |
margin: 0 0 @r2; | |
text-align: center; | |
} | |
.address{ | |
width: 50%; | |
} | |
iframe{ | |
max-width: 702px; | |
margin-bottom: @r1; | |
width: 49.5%; | |
} | |
span{ | |
width: @r3; | |
display: inline-block; | |
} | |
.ft{ | |
float: right; | |
margin: 0px @r2 @r2; | |
} | |
.sp{ | |
text-align: right; | |
padding-right: 10px; | |
} | |
.rj { | |
text-align: left; | |
padding-left: 10px; | |
border-left: 1px solid | |
} | |
} | |
.clientes{ | |
width: 100%; | |
max-width: 1480px; | |
.nav{ | |
background-color: rgba(0,0,0,0.8); | |
text-transform: uppercase; | |
text-align: center; | |
padding: @r1*2 0; | |
margin: 0 @r3 0 0; | |
height: 1000px; | |
width: 10%; | |
max-width: 145px; | |
min-width: 96px; | |
box-sizing: border-box; | |
a{ | |
position: relative; | |
font-family: @main_font; | |
font-size: 1.2rem; | |
margin: @r3 0; | |
display: inherit; | |
color: @white; | |
&:hover{ | |
// color: rgba(238,46,36,0.7); | |
color: #fff; | |
&:after{ | |
content: '◄'; | |
position: absolute; | |
right: -3px; | |
font-size: 20px; | |
} | |
} | |
} | |
a.active:after{ | |
content: '◄'; | |
position: absolute; | |
right: -3px; | |
font-size: 20px; | |
color: #fff; | |
} | |
} | |
.wrapper{ | |
float: left; | |
max-width: 1150px; | |
width: 88%; | |
margin: @r2 0 @r1; | |
} | |
.outside_view{ | |
position: absolute; | |
overflow: hidden; | |
width: 100%; | |
min-height: 865px; | |
} | |
.inside_view{ | |
position: absolute; | |
left: 0; | |
min-height: 1000px; | |
width: 100%; | |
overflow: hidden; | |
width: 2800px; | |
} | |
.img_col{ | |
float: left; | |
transition: all 0.5s ease; | |
} | |
img{ | |
display: inherit; | |
width: 199px; | |
padding: 0 !important; | |
} | |
.rgt_nav{ | |
background: url('img/rgt-arrow.png') no-repeat; | |
background-color: @white; | |
background-position: 50% 50%; | |
position: absolute; | |
right: 0; | |
width: 80px; | |
cursor: pointer; | |
z-index: 10; | |
} | |
.rgt_nav{ | |
height: 930px; | |
} | |
.image { | |
position:relative; | |
width: 198px; | |
height: 279px; | |
margin: 0 10px 10px 0; | |
} | |
.image { | |
width: 198px; | |
height: 279px; | |
display: inline-block; | |
} | |
.image img { | |
width:100%; | |
vertical-align:top; | |
} | |
.image:after, .image:before { | |
position:absolute; | |
opacity:0; | |
transition: all 0.5s; | |
-webkit-transition: all 0.5s; | |
} | |
.image:after { | |
content:'\A'; | |
width:100%; | |
height:100%; | |
top:0; left:0; | |
background:rgba(0,0,0,0.8); | |
} | |
.image:before { | |
content: attr(data-content); | |
width:100%; | |
color: @white; | |
z-index:1; | |
padding-top: 68%; | |
font-size: 1.1rem; | |
text-align:center; | |
box-sizing:border-box; | |
-moz-box-sizing:border-box; | |
} | |
.image:hover:after, .image:hover:before { | |
opacity:1; | |
cursor: pointer; | |
} | |
} | |
.equipe{ | |
margin: @r1 0 @r1; | |
.names { | |
float: right; | |
margin-right: @r1; | |
} | |
.names p{ | |
text-align: right; | |
clear: both; | |
line-height: 2rem; | |
cursor: pointer; | |
} | |
.names p.active-name{ | |
color: @red; | |
} | |
.person{ | |
display: none; | |
cursor: pointer; | |
position: relative; | |
} | |
.info .bottom, .info .top{ | |
background-color: rgba(0,0,0,0.8); | |
} | |
.info .bottom{ | |
height: @r1*2; | |
margin-top: -@r1*2; | |
position: relative; | |
padding: @r2 @r1; | |
} | |
.info .top{ | |
display: none; | |
min-height: 686px; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
padding: @r1*8 @r1 0; | |
h2{ | |
font-size: 37px; | |
font-size: 3.7rem; | |
} | |
.descr{ | |
width: 200px; | |
} | |
} | |
.info .bottom p, .info .bottom h3, | |
.info .top p, .info .top h2{ | |
color: @white; | |
padding: 0 0 @r3/2; | |
float: right; | |
clear: both; | |
} | |
.info .bottom h3, .info .top h2{ | |
text-transform: uppercase; | |
} | |
} | |
.reel{ | |
margin: 0; | |
position: relative; | |
img{ | |
width: 100%; | |
box-shadow: 0px 0px 10px #888888; | |
} | |
h2 { | |
position: absolute; | |
top: 339px; | |
width: 100%; | |
text-align: center; | |
text-transform: uppercase; | |
font-family: @sec_font; | |
font-size: 1.5em; | |
color: #fff; | |
} | |
} | |
@media @mobile{ | |
.top-nav{ | |
display: none; | |
} | |
nav{ | |
display: none; | |
} | |
#menu-link{ | |
display: inline-block; | |
} | |
.menu_wrapper{ | |
width: 100%; | |
position: relative; | |
} | |
nav li:first-child{ | |
margin: @r3/2 0; | |
} | |
nav li:nth-child(4){ | |
display: none; | |
} | |
nav li { | |
display: inline-block; | |
margin: @r3/2 0; | |
width: 100%; | |
text-align: center; | |
} | |
nav li a{ | |
padding: 0; | |
} | |
.logo_mobile{ | |
text-align: center; | |
display: inherit; | |
} | |
.logo_mobile img{ | |
width: 40px; | |
position: relative; | |
margin: 10px 0 0 70px; | |
box-sizing: border-box; | |
} | |
.contato{ | |
.address{ | |
width: 100%; | |
} | |
img{ | |
display: none; | |
} | |
} | |
.clientes{ | |
.nav{ | |
width: 100%; | |
height: 300px; | |
padding: @r2; | |
max-width: 100%; | |
} | |
.wrapper{ | |
width: 100%; | |
} | |
.inside_view{ | |
width: 230px; | |
margin: 0 auto; | |
} | |
} | |
} | |
@media @tablet{ | |
.top-nav{ | |
display: none; | |
} | |
nav{ | |
display: none; | |
} | |
#menu-link{ | |
display: inline-block; | |
} | |
.menu_wrapper{ | |
width: 100%; | |
position: relative; | |
} | |
nav li:first-child{ | |
margin: @r3/2 0; | |
} | |
nav li:nth-child(4){ | |
display: none; | |
} | |
nav li { | |
display: inline-block; | |
margin: @r3/2 0; | |
width: 100%; | |
text-align: center; | |
} | |
nav li a{ | |
padding: 0; | |
} | |
.logo_mobile{ | |
text-align: center; | |
display: inherit; | |
} | |
.logo_mobile img{ | |
width: 40px; | |
position: relative; | |
margin: 10px 0 0 70px; | |
box-sizing: border-box; | |
} | |
.contato{ | |
.address{ | |
width: 100%; | |
} | |
img{ | |
display: none; | |
} | |
iframe{ | |
width: 100%; | |
} | |
} | |
.clientes{ | |
.wrapper{ | |
width: 70%; | |
} | |
} | |
} | |
/* RETINA */ | |
/* retina.less*/ | |
/* A helper mixin for applying high-resolution background images (http://www.retinajs.com) */ | |
.at2x(@path, @w: auto, @h: auto) { | |
background-image: url(@path); | |
@at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`; | |
@media all and (-webkit-min-device-pixel-ratio : 1.5) { | |
background-image: url(@at2x_path); | |
background-size: @w @h; | |
} | |
} | |
/* LIGHT BOX */ | |
#lightbox { | |
position: absolute; | |
top: 0; | |
left: 50%; | |
width: 500px; | |
margin-left: -250px; | |
background: #fff; | |
z-index: 1001; | |
display: none; | |
} | |
#lightbox-shadow { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: #000; | |
filter: alpha(opacity=75); | |
-moz-opacity: 0.75; | |
-khtml-opacity: 0.75; | |
opacity: 0.75; | |
z-index: 1000; | |
display: none; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment