www.rezo-rm.fr/less/creative.less

362 lines
7 KiB
Text
Raw Normal View History

2021-06-29 20:37:59 +00:00
@import "variables.less";
@import "mixins.less";
// Global Components
html,
body {
height: 100%;
width: 100%;
}
.bg-primary a {
color: white;
}
body {
.serif-font;
}
hr {
border-color: @theme-primary;
border-width: 3px;
max-width: 50px;
}
hr.light {
border-color: white;
}
a {
.transition-all;
color: @theme-primary;
&:hover,
&:focus {
color: darken(@theme-primary, 10%);
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
.sans-serif-font;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.bg-primary {
background-color: @theme-primary;
}
.bg-dark {
background-color: @theme-dark;
color: white;
}
.text-faded {
color: fade(white, 70%);
}
section {
padding: 100px 0;
}
aside {
padding: 50px 0;
}
.no-padding {
padding: 0;
}
// Navigation
.navbar-default {
background-color: white;
border-color: fade(@theme-dark, 5%);
.sans-serif-font;
.transition-all;
.navbar-header .navbar-brand {
color: @theme-primary;
.sans-serif-font;
font-weight: 700;
text-transform: uppercase;
&:hover,
&:focus {
color: darken(@theme-primary, 10%);
}
}
.nav {
> li {
> a,
> a:focus {
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: @theme-dark;
&:hover {
color: @theme-primary;
}
}
&.active {
> a,
> a:focus {
color: @theme-primary !important;
background-color: transparent;
&:hover {
background-color: transparent;
}
}
}
}
}
@media (min-width: 768px) {
background-color: black;
opacity: 0.9;
border-color: fade(white, 30%);
.navbar-header .navbar-brand {
color: fade(white, 70%);
&:hover,
&:focus {
color: white;
}
}
.nav > li > a,
.nav > li > a:focus {
color: fade(white, 70%);
&:hover {
color: white;
}
}
&.affix {
background-color: white;
border-color: fade(@theme-dark, 5%);
.navbar-header .navbar-brand {
color: @theme-primary;
font-size: 14px;
&:hover,
&:focus {
color: darken(@theme-primary, 10%);
}
}
.nav > li > a,
.nav > li > a:focus {
color: @theme-dark;
&:hover {
color: @theme-primary;
}
}
}
}
}
// Homepage Header
header {
position: relative;
width: 100%;
min-height: auto;
.background-cover;
background-position: center;
background-image: url('../img/header.jpg');
text-align: center;
color: white;
.header-content {
position: relative;
text-align: center;
padding: 100px 15px 100px;
background-color: white;
color: black;
opacity: 0.8;
width: 100%;
.header-content-inner {
margin-top: 20px;
margin-bottom: 20px;
h1 {
font-weight: 700;
font-variant: small-caps;
margin-top: 0;
margin-bottom: 0;
}
hr {
margin: 30px auto;
}
p {
font-weight: 300;
font-size: 16px;
margin-bottom: 50px;
}
}
}
@media (min-width: 768px) {
min-height: 100%;
.header-content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding: 0 50px;
.header-content-inner {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
p {
font-size: 18px;
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
}
}
}
}
footer.footer {
background-color: #111111;
padding: 20px 40px;
}
// Sections
.section-heading {
margin-top: 0;
}
.service-box {
max-width: 400px;
margin: 50px auto 0;
@media (min-width: 992px) {
margin: 20px auto 0;
}
p {
margin-bottom: 0;
}
}
.portfolio-box {
position: relative;
display: block;
max-width: 650px;
margin: 0 auto;
.portfolio-box-caption {
color: white;
opacity: 0;
display: block;
background: fade(@theme-primary, 90%);
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 100%;
.transition-all;
.portfolio-box-caption-content {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
.project-category,
.project-name {
.sans-serif-font;
padding: 0 15px;
}
.project-category {
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
}
.project-name {
font-size: 18px;
}
}
}
&:hover {
.portfolio-box-caption {
opacity: 1;
}
}
@media (min-width: 768px) {
.portfolio-box-caption {
.portfolio-box-caption-content {
.project-category {
font-size: 16px;
}
.project-name {
font-size: 22px;
}
}
}
}
}
.call-to-action {
h2 {
margin: 0 auto 20px;
}
}
// Bootstrap Overrides
.text-primary {
color: @theme-primary;
}
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
// Button Styles
.btn-default {
.button-variant(@theme-dark;white;white);
}
.btn-primary {
.button-variant(white;@theme-primary;@theme-primary);
}
.btn {
.sans-serif-font;
border: none;
border-radius: 300px;
font-weight: 700;
text-transform: uppercase;
}
.btn-xl {
padding: 15px 30px;
}
// Extras
// -- Highlight Color Customization
::-moz-selection {
color: white;
text-shadow: none;
background: @theme-dark;
}
::selection {
color: white;
text-shadow: none;
background: @theme-dark;
}
img::selection {
color: white;
background: transparent;
}
img::-moz-selection {
color: white;
background: transparent;
}
body {
webkit-tap-highlight-color: @theme-dark;
}