Файл: Luxe-Shop v6.0/assets/css/style.css
Строк: 581
@charset 'UTF-8';
@import url("font-awesome.min.css");
@import
url("http://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic");
body
{
background:
#F8F8F8;
}
body.is-loading *
{
-moz-transition: none
!important;
-webkit-transition: none !important;
-o-transition:
none !important;
-ms-transition: none !important;
transition: none
!important;
-moz-animation: none !important;
-webkit-animation:
none !important;
-o-animation: none !important;
-ms-animation: none
!important;
animation: none
!important;
}
body,input,textarea,select
{
font-family:
'Roboto', sans-serif;
font-weight: 300;
font-size:
17pt;
line-height: 1.75em;
color: #888;
-webkit-text-stroke:
0.1px;
}
h1,h2,h3,h4,h5,h6
{
color: #666;
margin: 0 0 1em
0;
font-weight: 100;
line-height: 1.5em;
}
h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a
{
color: inherit;
text-decoration:
none;
}
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark
h5,
.dark h6
{
color: #fff;
}
strong,
b
{
font-weight: 400;
color: inherit;
}
.dark strong, .dark
b
{
color: #fff;
color: rgba(255,255,255,0.85);
}
em,
i
{
font-style: italic;
}
a
{
color:
inherit;
text-decoration: none;
border-bottom: dotted 1px
rgba(0,0,0,0.25);
-moz-transition: border-bottom-color 0.25s
ease-in-out;
-webkit-transition: border-bottom-color 0.25s
ease-in-out;
-o-transition: border-bottom-color 0.25s
ease-in-out;
-ms-transition: border-bottom-color 0.25s
ease-in-out;
transition: border-bottom-color 0.25s
ease-in-out;
}
a:hover
{
border-bottom-color:
rgba(0,0,0,0);
}
.dark a
{
color:
#fff;
border-bottom-color: rgba(255,255,255,0.5);
}
.dark
a:hover
{
border-bottom-color:
rgba(255,255,255,0);
}
sub
{
position: relative;
top:
0.5em;
font-size: 0.8em;
}
sup
{
position: relative;
top:
-0.5em;
font-size: 0.8em;
}
hr
{
border: 0;
border-top:
solid 1px #e6e6e6;
margin: 2em 0 2em 0;
}
.dark
hr
{
border-top-color:
rgba(255,255,255,0.5);
}
blockquote
{
border-left: solid
0.25em #e6e6e6;
padding: 1em 0 1em 2em;
font-style:
italic;
}
.dark blockquote
{
border-left-color:
rgba(255,255,255,0.5);
}
p, ul, ol, dl, table
{
margin-bottom:
1em;
}
p
{
text-align:
justify;
}
header
{
margin-bottom: 1em;
}
header
h1,
header h2,
header h3,
header h4,
header h5,
header
h6
{
margin: 0;
}
header p
{
display:
block;
margin: 0;
padding: 0.25em 0 0.5em
0;
}
footer
{
padding-top:
1.5em;
}
br.clear
{
clear:
both;
}
.featured
{
text-align: center;
}
.featured
p
{
text-align: center;
}
/* Sections/Article
*/
section,
article
{
margin-bottom:
3em;
}
section > :last-child,
article >
:last-child
{
margin-bottom:
0;
}
section:last-child,
article:last-child
{
margin-bottom:
0;
}
.row > section,
.row >
article
{
margin-bottom: 0;
}
/* Image
*/
.image
{
position: relative;
display:
inline-block;
border: 0;
}
.image:after
{
content:
'';
position: absolute;
left: 0;
top: 0;
width:
100%;
height: 100%;
background:
url('images/overlay.png');
}
.image img
{
display:
block;
width: 100%;
border-radius:
0.5em;
}
.image.featured
{
display: block;
width:
100%;
margin: 0 0 2em 0;
}
.image.fit
{
display:
block;
width: 100%;
}
.image.left
{
float:
left;
margin: 0 2em 2em
0;
}
.image.centered
{
display: block;
margin: 0
0 2em 0;
}
.image.centered img
{
margin: 0
auto;
width: auto;
}
/* List
*/
ul.default
{
list-style: disc;
padding-left:
1em;
}
ul.default li
{
padding-left:
0.5em;
}
ul.icons
{
cursor:
default;
}
ul.icons li
{
display:
inline-block;
padding-left: 0.75em;
}
ul.icons
a
{
display: inline-block;
width: 2.75em;
height:
2.75em;
line-height: 2.8em;
text-align: center;
border:
0;
box-shadow: inset 0 0 0 1px #e6e6e6;
border-radius:
100%;
color: #aaa;
-moz-transition: background-color 0.25s
ease-in-out;
-webkit-transition: background-color 0.25s
ease-in-out;
-o-transition: background-color 0.25s
ease-in-out;
-ms-transition: background-color 0.25s
ease-in-out;
transition: background-color 0.25s
ease-in-out;
}
ul.icons a:hover
{
background:
rgba(0,0,0,0.025);
}
ul.menu
{
cursor:
default;
}
ul.menu li
{
display:
inline-block;
line-height: 1em;
border-left: solid 1px
#e6e6e6;
padding: 0 0 0 0.5em;
margin: 0 0 0
0.5em;
}
ul.menu li:first-child
{
border-left:
0;
padding-left: 0;
margin-left:
0;
}
ul.actions
{
cursor: default;
}
ul.actions
li
{
display: inline-block;
margin: 0 0 0
0.5em;
}
ul.actions li:first-child
{
margin-left:
0;
}
ol.default
{
list-style: decimal;
padding-left:
1.25em;
}
ol.default li
{
padding-left:
0.25em;
}
/* Form */
form
{
}
form
.actions
{
margin-bottom: 0;
}
form
label
{
display: block;
}
form
input[type="text"],
form
input[type="email"],
form
input[type="password"],
form select,
form
.select,
form textarea
{
display: block;
box-shadow:
inset 0 0 0 1px #e6e6e6;
background: #f8f8f8;
width:
100%;
padding: 0.85em 1em 0.85em 1em;
border-radius:
0.25em;
border: 0;
-moz-transition: all 0.25s
ease-in-out;
-webkit-transition: all 0.25s
ease-in-out;
-o-transition: all 0.25s
ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition:
all 0.25s ease-in-out;
-moz-appearance: none;
-webkit-appearance:
none;
-o-appearance: none;
-ms-appearance: none;
appearance:
none;
}
form input[type="text"]:focus,
form
input[type="email"]:focus,
form
input[type="password"]:focus,
form select:focus,
form
.select.focus,
form textarea:focus
{
outline:
0;
box-shadow: inset 0 0 0 1px #afd9e0;
background:
#fcfcfc;
}
form input[type="text"],
form
input[type="email"],
form
input[type="password"],
form select
{
line-height:
1.25em;
}
form textarea
{
min-height:
13em;
}
form select
{
position:
relative;
}
form select
option:not(:checked)
{
color: #000;
}
form
.select
{
position: relative;
padding: 0;
overflow-x:
hidden;
outline: 0;
}
form .select
select
{
width: calc(100% + 2em);
background: none
!important;
box-shadow: none !important;
border: 0
!important;
cursor: pointer;
}
form .select
select::-moz-focus-inner
{
border: 0;
outline:
0;
}
form .select:before
{
content:
'';
position: absolute;
top: 15%;
right:
1em;
width: 1.25em;
height: 75%;
background:
url('images/arrow.svg') center center no-repeat;
background-size:
contain;
z-index: 0;
}
form .select
select::-ms-expand
{
display: none;
}
.dark form
.select:before
{
background: url('images/dark-arrow.svg')
center center no-repeat;
background-size:
contain;
}
form ::-moz-focus-inner
{
border:
0;
}
form .formerize-placeholder { color: #555 !important;
}
form ::-webkit-input-placeholder { color: #aaa !important; }
form
:-moz-placeholder { color: #555 !important; }
form ::-moz-placeholder {
color: #555 !important; }
form :-ms-input-placeholder { color: #555
!important; }
.dark form
{
}
.dark form
input[type="text"],
.dark form
input[type="email"],
.dark form
input[type="password"],
.dark form select,
.dark form
.select,
.dark form textarea
{
background:
none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
color:
#fff;
}
.dark form
input[type="text"]:focus,
.dark form
input[type="email"]:focus,
.dark form
input[type="password"]:focus,
.dark form
select:focus,
.dark form .select.focus,
.dark form
textarea:focus
{
background:
rgba(255,255,255,0.1);
box-shadow: inset 0 0 0 1px
#fff;
}
.dark form .formerize-placeholder { color: #aaa
!important; color: rgba(255,255,255,0.85) !important; }
.dark form
::-webkit-input-placeholder { color: rgba(255,255,255,0.85) !important;
}
.dark form :-moz-placeholder { color: rgba(255,255,255,0.85)
!important; }
.dark form ::-moz-placeholder { color:
rgba(255,255,255,0.85) !important; }
.dark form :-ms-input-placeholder
{ color: rgba(255,255,255,0.85) !important; }
/* Table
*/
table
{
width:
100%;
}
table.default
{
width:
100%;
border-collapse: collapse;
}
table.default
tbody
{
}
table.default tbody tr
{
border:
solid 1px #e6e6e6;
}
table.default tbody
tr:nth-child(2n+2)
{
background:
#f8f8f8;
}
table.default td
{
padding: 0.5em 1em
0.5em 1em;
}
table.default th
{
text-align:
left;
padding: 0.5em 1em 1em 1em;
}
table.default
thead
{
}
table.default
tfoot
{
}
table.default tfoot
td
{
padding-top: 1em;
}
table.default
tbody
{
}
.dark table.default
{
}
.dark
table.default tbody
{
}
.dark table.default tbody
tr
{
border-color:
rgba(255,255,255,0.5);
}
.dark table.default tbody
tr:nth-child(2n+2)
{
background:
rgba(255,255,255,0.1);
}
/* Button
*/
input[type="button"],
input[type="submit"],
input[type="reset"],
.button
{
-webkit-appearance:
none;
position: relative;
display: inline-block;
background:
#3d3d3d;
padding: 0.85em 3em 0.85em 3em;
border-radius:
0.25em;
cursor: pointer;
border: 0;
color:
#fff;
text-align: center;
text-decoration:
none;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition:
all 0.25s ease-in-out;
-o-transition: all 0.25s
ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all
0.25s
ease-in-out;
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button:hover
{
background:
#4f4f4f;
}
input[type="button"].alt,
input[type="submit"].alt,
input[type="reset"].alt,
.button.alt
{
color:
inherit;
box-shadow: inset 0 0 0 1px #e6e6e6;
background:
none;
}
input[type="button"].alt:hover,
input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
.button.alt:hover
{
background:
rgba(0,0,0,0.025);
}
.dark
input[type="button"],
.dark
input[type="submit"],
.dark
input[type="reset"],
.dark .button
{
background:
rgba(255,255,255,0.15);
box-shadow: inset 0 0 0 1px #fff;
color:
#fff;
}
.dark
input[type="button"]:hover,
.dark
input[type="submit"]:hover,
.dark
input[type="reset"]:hover,
.dark
.button:hover
{
background: rgb(255, 255, 255);
color: black;
transform: scale(1.2);
transition: 0.25s;
transition-timing-function:
cubic-bezier(0.47,2.02,0.31,-0.36);
}
.dark
input[type="button"].alt,
.dark
input[type="submit"].alt,
.dark
input[type="reset"].alt,
.dark
.button.alt
{
background: none;
box-shadow: inset 0 0 0 1px
rgba(255,255,255,0.5);
}
.dark
input[type="button"].alt:hover,
.dark
input[type="submit"].alt:hover,
.dark
input[type="reset"].alt:hover,
.dark
.button.alt:hover
{
background:
rgba(255,255,255,0.15);
box-shadow: inset 0 0 0 1px
#fff;
}
/* Feature Icon */
.feature-icon
{
display:
inline-block;
position: relative;
padding-bottom:
5em;
margin-bottom: 2.75em;
cursor:
default;
}
.feature-icon .icon
{
display:
inline-block;
width: 2em;
height: 2em;
font-size:
4.5em;
border-radius: 100%;
box-shadow: inset 0 0 0 1px
#666;
color: #666;
line-height:
2.1em;
}
.feature-icon:before
{
content:
'';
background: #666;
position: absolute;
bottom:
0;
left: 50%;
margin-left: -0.325em;
width:
0.65em;
height: 0.65em;
display: block;
border-radius:
100%;
}
.feature-icon:after
{
content:
'';
position: absolute;
left: 50%;
bottom:
0.65em;
width: 1px;
height: 4.35em;
background:
#666;
margin-left: -0.5px;
}
.dark
.feature-icon
{
}
.dark .feature-icon
.icon
{
background: rgba(255,255,255,0.15);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.5);
color:
#fff;
}
.dark .feature-icon:before
{
background:
rgba(255,255,255,0.5);
}
.dark
.feature-icon:after
{
background:
rgba(255,255,255,0.5);
}
/* Dark */
.dark
{
color:
#aaa;
color:
rgba(255,255,255,0.65);
}
/*********************************************************************************/
/*
Icons
*/
/*********************************************************************************/
.icon
{
text-decoration: none;
}
.icon:before {
display:
inline-block;
font-family: FontAwesome;
font-size:
1.25em;
text-decoration: none;
font-style: normal;
font-weight:
normal;
line-height:
1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.icon
> .label {
display:
none;
}
/*********************************************************************************/
/*
Header
*/
/*********************************************************************************/
#header
{
position:
relative;
margin:
0;
background-image: url('img/fon.jpg'), url('../img/header.jpg');
background-size: auto, cover;
background-position: top
left, center
center;
background-repeat: repeat, no-repeat;
padding: 14em
0 14em 0;
text-align: center;
color: #fff;
}
#header
header
{
}
#header header h1
{
font-size:
2.25em;
line-height: 1.25em;
margin-bottom:
0;
}
#header header p
{
margin-top:
1.25em;
font-weight: 100;
padding: 0;
font-size:
1.25em;
line-height: 1.5em;
text-align:
center;
}
#header footer
{
padding-top:
1.5em;
}
/*********************************************************************************/
/*
Main Sections
*/
/*********************************************************************************/
.main
{
position:
relative;
margin: 0;
}
.main > header
{
background:
#fff;
text-align: center;
padding: 5em 0 5em 0;
margin:
0;
}
.main > header h2
{
font-size:
2.25em;
font-weight: 100;
margin-bottom: 0;
}
.main
> header p
{
margin: 2em 0 0 0;
padding:
0;
text-align: center;
}
.main >
.content
{
padding: 6em 0 6em 0;
}
.main > .content >
.container
{
}
.main > .content h3
{
font-size:
1.5em;
}
.main > .content.dark
{
background:
#433;
}
.main >
.content.style1
{
background: url('images/bgtr.svg') top right
no-repeat,
url('images/bgbl.svg') bottom left
no-repeat,
url('images/bgbl.svg') bottom left
no-repeat,
url('images/overlay.png'),
linear-gradient(45deg,
#7C08FF, #0E2864, #00FFB2);
}
.main >
.content.style2
{
background: url('images/bgtr.svg') top right
no-repeat,
url('images/bgbl.svg') bottom left
no-repeat,
url('images/overlay.png'),
linear-gradient(45deg,
#384955, #655361, #85505f);
}
.main >
.content.style3
{
background: url('images/bgtr.svg') top right
no-repeat,
url('images/bgbl.svg') bottom left
no-repeat,
url('images/overlay.png'),
linear-gradient(45deg,
#5f796b, #3a4e59, #2f394e);
}
.main >
.content.style4
{
padding-top: 0;
background:
#fff;
}
/*********************************************************************************/
/*
Footer
*/
/*********************************************************************************/
#footer
{
position:
relative;
margin: 0;
text-align: center;
padding: 4em 0 8em
0;
box-shadow: inset 0 1px 0 0 #e6e6e6;
}
#footer
.copyright
{
margin-top: 3em;
font-size: 0.8em;
color:
#aaa;
}
#footer .copyright a
{
color:
inherit;
}
#footer ul.icons
{
}
#footer ul.icons
li
{
}
#footer ul.icons a
{
box-shadow: inset
0 0 0 1px #d6d6d6;
}