hueman/assets/front/css/_parts/0_1_base_styles.css
nikeo dc0fb2da81 topnav made default
default colors changed
js front : topnav toggle arrow if higher than 50px
2017-04-04 09:46:19 +02:00

297 lines
No EOL
14 KiB
CSS

/* ------------------------------------------------------------------------- *
* Base Styles
/* ------------------------------------------------------------------------- */
html { -webkit-font-smoothing: antialiased; /* safari font rendering issue fix */ }
body { background: #eaeaea; font-size: 1rem; line-height: 1.5em; color: #666; font-weight: 300; }
::selection { background: #16cfc1; color: #fff; }
::-moz-selection { background: #16cfc1; color: #fff; }
a { color: #16cfc1; text-decoration: none; outline: 0; }
a:hover { color: #444; }
img { max-width: 100%; height: auto; }
a,
a:before,
a:after {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
a img {
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease; }
address,cite,em { font-style: italic; }
strong { font-weight: 600; }
.left,.alignleft { float: left; }
.right,.alignright { float: right; }
.aligncenter { margin-left: auto; margin-right: auto; }
/* base : clear
/* ------------------------------------ */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.group:before, .group:after { content: ""; display: table; }
.group:after { clear: both; }
.group { zoom: 1; }
/* base : font awesome square size
/* ------------------------------------ */
.fa { width: 1em; text-align: center; }
/* base : fonts
/* ------------------------------------ */
body { font-family: "Titillium", Arial, sans-serif; }
@font-face {
font-family: 'Titillium';
src: url('../fonts/titillium-light-webfont.eot');
src: url('../fonts/titillium-light-webfont.svg#titillium-light-webfont') format('svg'),
url('../fonts/titillium-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/titillium-light-webfont.woff') format('woff'),
url('../fonts/titillium-light-webfont.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Titillium';
src: url('../fonts/titillium-lightitalic-webfont.eot');
src: url('../fonts/titillium-lightitalic-webfont.svg#titillium-lightitalic-webfont') format('svg'),
url('../fonts/titillium-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/titillium-lightitalic-webfont.woff') format('woff'),
url('../fonts/titillium-lightitalic-webfont.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Titillium';
src: url('../fonts/titillium-regular-webfont.eot');
src: url('../fonts/titillium-regular-webfont.svg#titillium-regular-webfont') format('svg'),
url('../fonts/titillium-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/titillium-regular-webfont.woff') format('woff'),
url('../fonts/titillium-regular-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Titillium';
src: url('../fonts/titillium-regularitalic-webfont.eot');
src: url('../fonts/titillium-regularitalic-webfont.svg#titillium-regular-webfont') format('svg'),
url('../fonts/titillium-regularitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/titillium-regularitalic-webfont.woff') format('woff'),
url('../fonts/titillium-regularitalic-webfont.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Titillium';
src: url('../fonts/titillium-semibold-webfont.eot');
src: url('../fonts/titillium-semibold-webfont.svg#titillium-semibold-webfont') format('svg'),
url('../fonts/titillium-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/titillium-semibold-webfont.woff') format('woff'),
url('../fonts/titillium-semibold-webfont.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
/* base : forms
/* ------------------------------------ */
input, textarea, button, select, label { font-family: inherit; }
.themeform input,
.themeform select,
.themeform textarea,
.themeform button,
.themeform label { font-size: 0.875em; }
.themeform input::-moz-focus-inner,
.themeform button::-moz-focus-inner { border: 0; padding: 0; }
.themeform input[type="text"],
.themeform input[type="password"],
.themeform input[type="email"],
.themeform input[type="url"],
.themeform input[type="tel"],
.themeform input[type="number"],
/* woocommerce */
.themeform .woocommerce #respond input#submit,
.themeform .woocommerce a.button,
.themeform .woocommerce button.button,
.themeform .woocommerce input.button,
/* end woocommerce */
.themeform input[type="submit"],
.themeform select,
.themeform button,
.themeform textarea { margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0; border-radius: 0; }
.themeform input,
.themeform select,
.themeform textarea,
.themeform button { -moz-appearance: none; -webkit-appearance: none; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .2s ease; }
.themeform input[type="checkbox"] { -moz-appearance: checkbox; -webkit-appearance: checkbox; }
.themeform input[type="radio"] { -moz-appearance: radio; -webkit-appearance: radio; }
.themeform label { font-weight: 600; color: #444; }
.themeform input[type="text"],
.themeform input[type="password"],
.themeform input[type="email"],
.themeform input[type="url"],
.themeform input[type="tel"],
.themeform input[type="number"],
.themeform select,
.themeform textarea { background: #fff; border: 2px solid #ddd; color: #777; display: block; max-width: 100%; outline: none; padding: 7px 8px; }
.themeform input[type="text"]:focus,
.themeform input[type="password"]:focus,
.themeform input[type="email"]:focus,
.themeform input[type="url"]:focus,
.themeform input[type="tel"]:focus,
.themeform input[type="number"]:focus,
.themeform select:focus,
.themeform textarea:focus { border-color: #ccc; color: #444; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1); box-shadow: 0 0 3px rgba(0,0,0,0.1); }
.themeform label .required { color: #16cfc1; }
.themeform input[type="submit"],
.themeform button[type="submit"] { background: #16cfc1; color: #fff; padding: 8px 14px; font-weight: 600; display: inline-block; border: none; cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px; }
/* woocommerce */
/* secondary color for the normal buttons */
.themeform .woocommerce #respond input#submit,
.themeform .woocommerce a.button,
.themeform .woocommerce button.button,
.themeform .woocommerce input.button { background: #efb93f; color: #fff; padding: 8px 14px; font-weight: 600; display: inline-block; border: none; cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px;
}
/* primary color for the important buttons (Buy) */
.themeform .woocommerce #respond input#submit.alt,
.themeform .woocommerce a.button.alt,
.themeform .woocommerce button.button.alt,
.themeform .woocommerce input.button.alt { background: #16cfc1; }
/* end woocommerce */
/* woocommerce: background and color on hover */
.themeform .woocommerce #respond input#submit:hover,
.themeform .woocommerce a.button:hover,
.themeform .woocommerce button.button:hover,
.themeform .woocommerce input.button:hover,
.themeform .woocommerce #respond input#submit.alt:hover,
.themeform .woocommerce a.button.alt:hover,
.themeform .woocommerce button.button.alt:hover,
.themeform .woocommerce input.button.alt:hover
/* end woocommerce */
.themeform input[type="submit"]:hover,
.themeform button[type="submit"]:hover { background: #444; color: #fff; }
/* woocommerce checkout button specific */
.themeform #add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .themeform .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .themeform .wc-proceed-to-checkout a.checkout-button { display: block; padding: 1em; }
/* end woocommerce */
.themeform.searchform div { position: relative; }
.themeform.searchform div input { padding-left: 26px; line-height: 20px; }
.themeform.searchform div:after { color: #ccc; line-height: 1.714em; font-size: 0.875em; content: "\f002"; position: absolute; left: 10px; top: 6px; font-family: FontAwesome; }
/* base : entry
/* ------------------------------------ */
.entry { font-size: 1.125em; line-height: 1.6em; }
.entry p,
.entry dd { margin-bottom: 1em; }
.entry dt { color: #444; }
.entry ol,
.entry ul { margin: 0 0 15px 30px; }
.entry ol ol,
.entry ol ul,
.entry ul ul,
.entry ul ol { margin-bottom: 0; }
.entry li { margin: 0; }
.entry ul li,
.entry ol ul li { list-style: square; }
/* woocommerce */
.woocommerce .entry #reviews #comments ol.commentlist li,
.entry .woocommerce ul li { list-style: none; }
/* end woocommerce */
.entry ol li,
.entry ol ul ol li { list-style: decimal; }
.entry dt { font-weight: 600;}
.entry address { margin-bottom: 1em; }
.entry blockquote { position: relative; color: #777; font-style: italic; margin: 0 0 20px 0; padding-left: 50px; }
.entry blockquote p { margin-bottom: 0.75em; }
.entry blockquote:before { content: "\f10d"; color: #ccc; font-size: 32px; font-style: normal; font-family: FontAwesome; text-align: center; position: absolute; left: 0; top: 0; }
.entry blockquote.twitter-tweet:before { content: "\f099"; }
.comment code, .entry code, .entry pre { font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 0.6875em; }
.entry pre { background: url(../img/pre.png) repeat top; padding: 18px 20px; margin: 30px 0; border: 1px solid #ddd; line-height: 19px; white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; overflow-y: hidden; }
.comment code, .entry code { background: #eee; padding: 0 3px; }
.entry ins { background: #fff486; }
.entry sub,
.entry sup { font-size: 62.5%; }
.entry sub { vertical-align: sub; }
.entry sup { vertical-align: super; }
/* image position & caption */
.entry img.size-auto,
.entry img.size-large,
.entry img.size-medium,
.entry attachment img { max-width: 100%; height: auto; }
.entry img.alignleft { margin: 18px 20px 18px 0; }
.entry img.alignright { margin: 18px 0 18px 20px; }
.entry img.aligncenter { margin: 18px auto; clear: both; display: block; }
.entry img .size-full { width: 100%!important; }
.entry .gallery img, .entry img.wp-smiley { margin: 0; }
.entry .wp-caption { background: #f1f1f1; max-width: 100%; margin-bottom: 14px; padding-top: 5px; text-align: center; }
.entry .wp-caption-text { font-style: italic; }
.entry .wp-caption a { border-bottom: none; }
.entry .wp-caption img { margin: 0; max-width: 100%; height: auto; }
.entry .wp-caption.alignleft { margin-right: 20px; }
.entry .wp-caption.alignright { margin-left: 20px; }
.entry .wp-caption.alignnone { width: 100%!important; overflow: hidden; }
.entry .wp-caption.alignnone img { margin: 0 auto; max-width: 100%!important; }
.entry .wp-caption-text { color: #999; font-size: 0.8125em; padding: 0 0 8px 0; margin: 0; }
/* table */
.entry table { font-size: 0.875em; margin-bottom: 1.5em; width: 100%; text-align: center; }
.entry table tr.alt { background: #f1f1f1; }
.entry table td { border-bottom: 1px solid #f1f1f1; text-align: center; padding: 5px; vertical-align: middle; }
.entry table th { font-weight: 600; text-align: center; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; padding: 10px 5px; }
/* default gallery */
.entry .gallery { clear: both; overflow: hidden; width: 100%; margin: 15px 0!important; }
.entry .gallery img { display: block; width: 100%; height: auto; border-width: 1px 2px!important; border-color: transparent!important; }
.entry .gallery .gallery-item { position: relative; overflow: hidden; border-color: transparent; margin-top: 0!important; }
.entry .gallery .gallery-caption { background: rgba(255,255,255,0.8); color: #333; font-size: 0.8125em; line-height: 1.4em; padding: 10px 0; text-align: left; text-indent: 10px; font-style: normal; margin: 0; bottom: -44px; left: 2px; right: 2px; overflow: hidden; position: absolute; text-overflow: ellipsis; white-space: nowrap; width: 100%;
transition: all .2s ease;
-o-transition: all .2s ease;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease; }
.entry .gallery .gallery-item:hover .gallery-caption { bottom: 0; }
.entry .gallery-columns-5 .gallery-caption,
.entry .gallery-columns-6 .gallery-caption,
.entry .gallery-columns-7 .gallery-caption,
.entry .gallery-columns-8 .gallery-caption,
.entry .gallery-columns-9 .gallery-caption { display: none!important; }
/* base : headings
/* ------------------------------------ */
h1, h2, h3, h4, h5, h6 { color: #444; font-weight: 600; -ms-word-wrap: break-word; word-wrap: break-word; }
.entry h1 span, .entry h2 span, .entry h3 span, .entry h4 span, .entry h5 span, .entry h6 span { color: #bbb; }
/* woocommerce */
.woocommerce div.product h1.product_title,
.woocommerce-Tabs-panel.entry-content h2,
.woocommerce .cross-sells h2,
.woocommerce .upsells.products h2,
.woocommerce .related.products h2,
/* end woocommerce */
.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6 { margin-bottom: 14px; font-weight: 400; line-height: 1.3em; }
/* woocommerce */
.woocommerce div.product h1.product_title,
/* end woocommerce */
.entry h1 { font-size: 2.375em; letter-spacing: -1px; }
.entry h2 { font-size: 2.125em; letter-spacing: -0.7px; }
.entry h3 { font-size: 1.75em; letter-spacing: -0.5px; }
/* woocommerce */
.woocommerce-Tabs-panel.entry-content h2 { margin-top: 20px;}
.woocommerce-Tabs-panel.entry-content h2,
.woocommerce .cross-sells h2,
.woocommerce .upsells.products h2,
.woocommerce .related.products h2,
/* woocommerce */
.entry h4 { font-size: 1.5em; letter-spacing: -0.3px; }
.entry h5 { font-size: 1.25em; font-weight: 600; }
.entry h6 { font-size: 1.125em; font-weight: 600; text-transform: uppercase; }
.heading,
/* woocommerce */
.woocommerce #reviews h3,
#reply-title { font-weight: normal; font-size: 1.125em; text-transform: uppercase; font-weight: 600; margin-bottom: 1em; }
.heading i { font-size: 1.375em; margin-right: 6px; }