src/scss/before.scss
@import "compass/reset";
@import "base";
@include fontface("CorsicaLX", "corsicaramblerlx-book-webfont", normal, normal);
@include fontface("PTSans", "pts55f-webfont", normal, normal);
@include fontface("FontAwesome", "fontawesome-webfont", normal, normal);
* {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
html,
body,
.page,
.page__main,
.page__slide {
width: 100%;
height: 100%;
overflow: hidden;
}
.page {
position: relative;
font-family: "CorsicaLX", sans-serif;
@include fontsize(16px);
&__header,
&__footer {
position: fixed;
left: 0;
width: 100%;
}
&__header {
@include box-sizing(border-box);
padding: 40px;
}
&__header {
top: 0;
}
&__main {
background: inline-image("bg.jpg") center center no-repeat;
background-size: cover;
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin: 1em 0;
font-weight: normal;
}
h1, .h1 {
@include fontsize(200%);
margin: 0 0 4px 0;
}
h2, .h2 {
@include fontsize(175%);
}
h3, .h3 {
@include fontsize(150%);
}
h4, .h4 {
@include fontsize(125%);
}
h5, .h5 {
@include fontsize(100%);
}
h6, .h6 {
@include fontsize(75%);
}
p {
margin: 1em 0;
}
a {
text-decoration: none;
}
ul, ol {
margin: 1em 0;
text-align: left;
li {
padding: 0.5em 1em;
position: relative;
}
}
ul {
li {
&:before {
content: "\2022";
position: absolute;
left: 0;
top: 0.75em;
font-size: 100%;
line-height: 1;
}
}
}
ol {
li {
&:before {
}
}
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
p,
ol, ul {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
&__slide {
@include box-sizing(border-box);
padding: 40px;
color: #ffffff;
text-align: center;
overflow: hidden;
&:after {
@include inline-block;
vertical-align: middle;
content: "";
width: 0;
height: 100%;
}
&-content {
@include inline-block;
vertical-align: middle;
width: 100%;
max-width: 900px;
}
&--about {
}
&--position {
}
&--responsibilities {
}
&--requirements {
}
&--offer {
}
&--form {
}
}
&__footer {
bottom: 0;
text-align: center;
}
}
.logotype {
svg {
fill: #ffffff;
}
&--header {
cursor: pointer;
float: left;
svg {
position: relative;
height: 20px;
}
}
&--slide {
margin: 80px auto;
display: block;
text-align: center;
svg {
height: 100px;
}
}
}
.menu {
display: block;
float: right;
white-space: nowrap;
&__item {
margin: 0 0 0 40px;
float: left;
a {
@include inline-block;
vertical-align: top;
color: #ffffff;
text-decoration: none;
position: relative;
cursor: pointer;
&:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #ffffff;
opacity: 0;
@include transition-timing-function(ease);
@include transition-property(bottom, opacity);
@include transition-duration(.2s);
}
&:hover {
&:after {
bottom: -7px;
opacity: 1;
}
}
}
&--active {
a {
cursor: default;
&:after {
bottom: -7px;
opacity: 1;
}
}
}
}
}
.infographics {
color: #ffffff;
margin: 0 auto;
text-align: center;
@include display-flex;
@include flex-direction(row);
&__item {
@include inline-block;
@include flex(1 0);
vertical-align: top;
@include display-flex;
@include flex-direction(row);
}
&__number,
&__meaning {
@include box-sizing(border-box);
padding: 16px;
@include align-items(flex-start);
}
&__number {
@include inline-block;
@include flex(1 0);
vertical-align: top;
text-align: right;
font-size: 3em;
line-height: 1;
}
&__meaning {
@include inline-block;
@include flex(1 0);
vertical-align: top;
text-align: left;
font-size: 12px;
}
}
.button {
color: #ffffff;
height: 3em;
font-size: 100%;
line-height: 3em;
letter-spacing: 1.1px;
padding: 0 17px 0 25px;
position: relative;
@include inline-block;
@include border-radius(1.5em);
vertical-align: top;
text-decoration: none;
margin: 30px auto 0 auto;
cursor: pointer;
text-transform: uppercase;
@include transition-timing-function(ease);
@include transition-property(color);
@include transition-duration(.2s);
span {
position: relative;
z-index: 2;
}
&:after {
@include box-sizing(border-box);
@include border-radius(20px);
border: 1px solid #ffffff;
position: absolute;
z-index: 1;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
content: "";
@include transition-timing-function(ease);
@include transition-property(border);
@include transition-duration(.2s);
}
&:hover {
color: #000000;
&:after {
border: 1.5em solid #ffffff;
}
}
}
.share-meta-tags {
display: none;
}
.share-buttons {
@include inline-block;
&:after {
width: 100%;
height: 0;
content: "";
display: block;
clear: both;
}
&__items {
float: left;
width: 0;
height: 0;
padding: 26px;
cursor: pointer;
position: relative;
&:before {
@include inline-block;
text-align: center;
color: #FFFFFF;
font-family: "FontAwesome";
font-size: 1em;
line-height: 2em;
position: absolute;
left: 50%;
top: 50%;
margin: -1em 0 0 -1em;
width: 2em;
height: 2em;
}
&.share-buttons__items--vkontakte {
&:before {
content: "\f189";
}
}
&.share-buttons__items--odnoklassniki {
&:before {
content: "\f263";
}
}
&.share-buttons__items--facebook {
&:before {
content: "\f09a";
}
}
&.share-buttons__items--twitter {
&:before {
content: "\f099";
}
}
&.share-buttons__items--google {
&:before {
content: "\f0d5";
}
}
&.share-buttons__items--pinterest {
&:before {
content: "\f231";
}
}
}
}
.rub{
font-family: "PTSans";
}