hugo-stanley/assets/css/style.css

387 lines
6.3 KiB
CSS
Raw Normal View History

2020-03-03 18:56:59 +01:00
/**
* Template Name: Stanley
* Template URL: https://templatemag.com/stanley-bootstrap-freelancer-template/
* Author: TemplateMag.com
* License: https://templatemag.com/license/
*/
body {
background-color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
color: #555;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
/* Titles */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #333;
}
h1 {
font-size: 35px;
margin-top: 30px;
margin-bottom: 30px;
}
/* Paragraph & Typographic */
p {
line-height: 28px;
margin-bottom: 25px;
font-size: 16px;
}
.centered {
text-align: center;
}
/* Links */
a {
color: #1abc9c;
word-wrap: break-word;
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
a:hover, a:focus {
color: #7b7b7b;
text-decoration: none;
outline: 0;
}
a:before, a:after {
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.navbar {
text-transform: uppercase;
margin-bottom: 0px;
}
.navbar-inverse {
padding: 30px 0;
}
@media (max-width: 768px ) {
.navbar-inverse {
padding: 15px 0;
}
}
.navbar-inverse {
background-color: #1abc9c;
border-color: #16a085;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #222222;
}
.navbar-brand {
font-weight: 700;
font-size: 20px;
letter-spacing: 2px;
}
.navbar-inverse .navbar-brand {
color: white;
}
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
.progress-bar-theme {
background-color: #1abc9c;
}
/* Helpers */
.mt {
margin-top: 40px;
margin-bottom: 40px;
}
.pt {
padding-top: 50px;
padding-bottom: 50px;
}
/* +++++ WRAP SECTIONS +++++ */
#ww {
padding-top: 70px;
padding-bottom: 70px;
background-color: #f2f2f2;
}
#footer {
background-color: #2f2f2f;
padding-top: 50px;
padding-bottom: 50px;
}
#footer p {
color: white;
}
#footer h4 {
color: white;
text-transform: uppercase;
padding-bottom: 20px;
}
/* +++++ Color Wraps / Blog Page +++++ */
#grey {
padding-top: 60px;
padding-bottom: 60px;
background-color: #f2f2f2;
}
#white {
padding-top: 60px;
padding-bottom: 60px;
background-color: #ffffff;
}
/* Blog Date*/
bd {
font-size: 12px;
text-transform: uppercase;
color: #d2d2d2;
font-weight: 700;
}
/* Blog Author*/
ba {
font-size: 12px;
text-transform: uppercase;
}
/* Blog Quote */
.bq {
font-size: 22px;
padding-top: 30px;
}
/* Blog Tags */
bt {
font-size: 12px;
2020-04-28 16:50:15 +02:00
display: inline-block;
}
ul.tag-list {
list-style: none;
display: inline-block;
padding: 0;
}
ul.tag-list li {
display: inline-block;
}
ul.tag-list li:not(:last-child):after {
content: ", ";
margin-right: 3px;
2020-03-03 18:56:59 +01:00
}
/* ================== PORTFOLIO IMAGES HOVER EFFECT ================== */
/* Effects also are controled by hover.zoom.js */
.zoom {
display: block;
position: relative;
overflow: hidden;
background: transparent url(../img/loader.gif) no-repeat center;
}
.zoomOverlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
background-image: url(../img/zoom.png);
background-repeat: no-repeat;
background-position: center;
}
.zoom2 {
opacity: 1;
}
.zoom2:hover {
opacity: 0.5;
}
/* glyphicon Configuration */
.glyphicon {
font-size: 40px;
color: #1abc9c;
}
/* Contact Form */
#contact {
padding: 40px 0;
}
.contact-form {}
.contact-form label {
color: #999;
}
.contact-form input, .contact-form textarea {
padding: 10px 12px;
border-radius: 0;
box-shadow: none;
font-size: 14px;
height: auto;
}
.contact-form .form-send {
text-align: center;
}
.contact-form .form-send button {
background: #1abc9c;
border: 0;
padding: 10px 30px;
color: #fff;
transition: 0.4s;
cursor: pointer;
}
.contact-form .form-send button:hover {
background: #1de0ba;
}
.contact-form .validate {
display: none;
color: red;
margin: 0 0 15px 0;
font-weight: 400;
font-size: 13px;
}
.contact-form .loading {
display: none;
color: #555;
background: #fff;
text-align: center;
padding: 15px;
margin: 15px 0;
}
.contact-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
border: 3px solid #18d26e;
border-top-color: #eee;
-webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite;
}
@-webkit-keyframes animate-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes animate-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.contact-form .error-message {
display: none;
color: #fff;
background: #ed3c0d;
text-align: center;
padding: 15px;
font-weight: 600;
margin: 15px 0;
}
.contact-form .sent-message {
display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
font-weight: 600;
margin: 15px 0;
}
/* Copyrights */
#copyrights {
background: #222222;
padding: 20px 0;
text-align: center;
}
#copyrights p {
margin-bottom: 5px;
color: #fff;
}
#copyrights a {
color: #1abc9c;
}
.credits {
color: #999;
}