/home/vianto5/tcorporation.com/sass
Edit: /home/vianto5/tcorporation.com/sass/style-essential-bonus.scss (15866B)
/*
* iSOON - Ideal Coming Soon Template
* Release Date: April 2017
* Last Update: August 2018
* Author: Madeon08
* Copyright (C) 2017 Madeon08
* This is a premium product available exclusively here : http://themeforest.net/user/Madeon08/portfolio
*/
/* TABLE OF CONTENTS
---------------------------
*. @Import (SASS) & Reset
.. Loading
.. Generic styles
.. Fullpage core
.. Navigation
.. Canvas
.. Main content
.. Contact form
.. Swipebox gallery
.. Accessories
.. Horizontal Nav
.. Pictures
.. Media Queries
*/
/* ------------------------------------- */
/* *. @Import (SASS) & Reset ........... */
/* ------------------------------------- */
// http://bourbon.io/ Sass Mixin Library
@import "bourbon";
// colors, fonts, sizes etc...
@import "vars";
// custom mixins
@import "mixins";
/* custom CSS files */
@import "font-awesome.min.css";
@import "bootstrap.min.css";
@import "animate.css";
@import "ionicons.min.css";
/* Google Fonts */
@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700|Lora:400,400i,700,700i|Raleway:300,400,500,700");
/*
* http://meyerweb.com/eric/tools/css/reset/
* v2.0 | 20110126
* License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
border: 0;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/* ------------------------------------- */
/* Loading ............................. */
/* ------------------------------------- */
#loading {
background-color: $shark;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
span {
position: absolute;
top: calc(50% + 30px);
width: 100%;
text-align: center;
left: 0;
color: $white;
font-weight: $bold;
text-transform: none;
}
}
.loader {
display: flex;
flex-direction: column;
align-items: center;
.loader__row {
display: flex;
}
}
.loader__arrow {
width: 0;
height: 0;
margin: 0 (-$size / 2);
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: ($size * 1.8) solid $electric;
animation: wink ($time + s) infinite;
&.down {
transform: rotate(180deg);
}
@for $i from 1 through 6 {
&.inner-#{$i} {
animation-delay: -($time / 6) * $i + s;
}
}
}
@keyframes wink {
0% {
opacity: 0.1;
}
30% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
/* ------------------------------------- */
/* Generic styles ...................... */
/* ------------------------------------- */
html {
font-size: 62.5%;
}
body {
font-family: $raleway-font;
font-size: 1.4rem;
font-weight: normal;
font-weight: $normal;
font-style: normal;
line-height: 1.8;
position: absolute;
height: 100%;
letter-spacing: 0;
color: $white;
background: $shark;
transition: all $average-transition ease;
@include font-smoothing(on);
}
body,
html {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a {
cursor: pointer;
text-decoration: none;
color: $white;
transition: all $slow-transition ease-in-out;
&:hover {
text-decoration: none !important;
color: darken($electric, 5%);
outline: none !important;
}
&:active,
&:focus {
text-decoration: none !important;
color: $white;
outline: none !important;
}
}
button {
cursor: pointer;
transition: all $slow-transition ease-in-out;
&:hover,
&:active,
&:focus {
text-decoration: none !important;
color: $white;
outline: none !important;
}
}
strong,
b {
font-weight: $bold;
}
em,
i {
font-style: italic;
}
p {
font-family: $raleway-font;
font-size: 1.5rem;
font-weight: $normal;
line-height: 1.8;
margin: 0;
color: $white;
&.subtitle {
margin-top: 3rem;
}
}
img {
transition: all $fast-transition ease-in-out;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $montserrat-font;
font-weight: $normal;
line-height: 1;
margin: 0 0 1.5rem 0;
color: $white;
a {
text-decoration: none;
color: inherit;
}
small {
font-family: $lora-family;
font-size: 1.6rem;
font-style: italic;
display: block;
margin-top: .8rem;
color: rgba($white, 0.5);
}
}
h1 {
font-size: 10rem;
font-weight: $bold;
text-transform: uppercase;
color: $white;
span {
color: $electric;
}
}
h2 {
font-size: 7rem;
font-weight: $bold;
}
h3 {
font-size: 2.3rem;
}
h4 {
font-size: 1.8rem;
}
h5 {
font-size: 1.6rem;
}
h6 {
font-size: 1.2rem;
}
sub {
font-size: .8em;
position: relative;
top: .5em;
}
sup {
font-size: .8em;
position: relative;
top: -.5em;
}
.clear {
clear: both;
}
.display-none {
display: none !important;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.no-margin-bottom {
margin-bottom: 0;
}
.opacity-0 {
visibility: hidden !important;
opacity: 0 !important;
}
.opacity-03 {
opacity: .3 !important;
}
.opacity-1 {
visibility: visible !important;
opacity: 1 !important;
}
.index-999 {
z-index: -999 !important;
}
/* ------------------------------------- */
/* FULLPAGE CORE ....................... */
/* ------------------------------------- */
#fullpage {
left: 0;
width: 100vw;
height: 100vh;
position: relative;
transition: all 0.7s $ease-out-cubic;
.section {
height: 100%;
}
}
.inside-section {
position: relative;
display: table;
width: 100%;
height: 100%;
border-radius: 0;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
&.project-type {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white;
a {
text-decoration: none;
color: inherit;
}
small {
color: inherit;
}
}
p.subtitle {
color: $white;
}
.ibtn {
overflow: hidden;
position: relative;
&:before {
transition: all $slow-transition ease-in-out;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: $electric;
z-index: -2;
}
&:hover {
&:before {
left: 0;
right: 0;
opacity: 1;
}
}
}
}
}
/* ------------------------------------- */
/* CANVAS .............................. */
/* ------------------------------------- */
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&.triangle {
background: $torch-red;
}
}
/* ------------------------------------- */
/* MAIN CONTENT ........................ */
/* ------------------------------------- */
.brand-logo {
position: absolute;
top: 30px;
left: 30px;
max-width: 140px;
}
.inside-split-text {
position: relative;
z-index: 10;
left: 0;
visibility: visible;
width: 100%;
max-width: 800px;
padding: 0 100px;
text-align: left;
}
/* ------------------------------------- */
/* ACCESSORIES ......................... */
/* ------------------------------------- */
.social-nav {
position: relative;
z-index: 100;
display: inline-block;
margin-top: 30px;
opacity: 1;
ul {
margin: 0;
padding: 0;
li {
position: relative;
display: block;
float: left;
margin: 0 5px 0;
text-align: center;
transition: all $slow-transition cubic-bezier(0, 0, 0.58, 1);
a {
font-size: .9em;
line-height: 35px !important;
position: relative;
display: inline-block;
width: 35px;
height: 35px;
margin: 0 5px;
text-align: center;
color: $white;
transition: all $slow-transition cubic-bezier(0, 0, 0.58, 1);
-webkit-backface-visibility: hidden;
&:before {
font-size: 1.5em;
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 100%;
height: 100%;
content: '';
border: 1px solid rgba($white, 0.3);
background: transparent;
border-radius: 2px;
transition: all $slow-transition cubic-bezier(0, 0, 0.58, 1);
transform: rotate(45deg);
}
&:hover {
color: $electric;
&:before {
border: 1px solid rgba($electric, 1);
background: transparent;
transform: rotate(135deg);
}
}
i {
position: relative;
top: 0;
left: 0;
}
}
}
}
&.social-footer {
position: absolute;
bottom: 32px;
left: 36px;
transition: all 0.6s ease;
}
}
.copyright {
position: absolute;
z-index: 60;
right: 40px;
bottom: 1rem;
p {
font-family: $montserrat-font;
font-size: 1.1rem;
color: lighten($raven, 30%);
a {
color: $white;
&:hover {
color: lighten($electric, 5%);
}
}
}
}
/* ------------------------------------- */
/* Media Queries ....................... */
/* ------------------------------------- */
/* Large Devices, Wide Screens @media only screen and (max-width: 1600px) */
@include desktop {}
/* Notebook devices @media only screen and (max-width: 1280px) */
@include notebook {}
/* Medium Devices, Desktops @media only screen and (max-width: 1024px) */
@include medium {
body, html {
overflow: auto;
}
#fullpage {
width: 100%;
height: auto;
.section {
padding: 150px 20px 0;
}
}
.copyright {
position: relative;
right: auto;
bottom: auto;
width: 100%;
text-align: center;
margin: 10px 0 20px;
}
.social-nav.social-footer {
top: auto;
bottom: auto;
left: auto;
width: 100%;
position: relative;
margin: 4rem auto 2rem;
text-align: center;
ul {
display: inline-block;
}
}
}
/* Small Devices, Tablets @media only screen and (max-width: 768px) */
@include tablet {}
/* Extra Small Devices, Phones @media only screen and (max-width: 480px) */
@include phone {
.inside-section {
display: block;
}
.brand-logo {
position: relative;
top: auto;
left: 40px;
margin-bottom: 20px;
}
.fp-section {
height: auto !important;
}
.fp-section.fp-table, .fp-slide.fp-table {
height: auto !important;
padding: 100px 0 0;
}
.fp-tableCell {
display: block;
vertical-align: baseline;
width: 100%;
height: auto !important;
border: none;
}
#section0 {
padding: 40px 0 100px;
}
.inside-split-text {
padding: 0 40px;
.align-center {
text-align: left;
}
}
h1 {
font-size: 5rem;
}
h2 {
font-size: 4rem;
}
}
/* Only for tablet in landscape mode @media only screen and (max-device-width: 1024px) and (orientation: landscape) */
/* @include landscape-tablet {} */
/* Only for phone in landscape mode @media screen and (max-device-width: 667px) and (orientation: landscape) */
@include landscape-phone {
.inside-section {
display: block;
}
.brand-logo {
position: relative;
top: auto;
left: 40px;
margin-bottom: 20px;
}
.fp-section {
height: auto !important;
}
.fp-section.fp-table, .fp-slide.fp-table {
height: auto !important;
padding: 100px 0 0;
}
.fp-tableCell {
display: block;
vertical-align: baseline;
width: 100%;
height: auto !important;
border: none;
}
#section0 {
padding: 40px 0 100px;
}
.inside-split-text {
padding: 0 40px;
.align-center {
text-align: left;
}
}
h1 {
font-size: 5rem;
}
h2 {
font-size: 4rem;
}
.copyright {
position: relative;
right: auto;
bottom: auto;
width: 100%;
text-align: center;
margin: 10px 0 20px;
}
.social-nav.social-footer {
top: auto;
bottom: auto;
left: auto;
width: 100%;
position: relative;
margin: 1rem auto 4rem;
text-align: center;
ul {
display: inline-block;
}
}
}