202 lines
2.8 KiB
SCSS
202 lines
2.8 KiB
SCSS
@import "../node_modules/bootstrap/scss/functions";
|
|
@import "../node_modules/bootstrap/scss/variables";
|
|
@import "../node_modules/bootstrap/scss/mixins";
|
|
@import "./_variables.scss";
|
|
@import url("https://use.typekit.net/pqm5uiz.css");
|
|
|
|
.page {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.svg-outline-white {
|
|
stroke: #fff;
|
|
stroke-miterlimit: 100;
|
|
fill: transparent;
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.svg-outline-blue {
|
|
stroke: $hp-blue;
|
|
stroke-miterlimit: 100;
|
|
fill: transparent;
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.cls-1,
|
|
.cls-2 {
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke: white;
|
|
stroke-width: 15px;
|
|
}
|
|
|
|
.cls-2 {
|
|
stroke-dasharray: 39.44 39.44;
|
|
}
|
|
|
|
.cls-3 {
|
|
fill: $white;
|
|
}
|
|
|
|
.landing-cls-1 {
|
|
fill: $white;
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 2rem;
|
|
font-family: circe, sans-serif;
|
|
font-weight: 800;
|
|
font-style: normal;
|
|
text-align: center;
|
|
}
|
|
|
|
h2 {
|
|
font-family: circe, sans-serif;
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
p {
|
|
font-family: circe, sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 1.3rem;
|
|
margin-bottom: 1rem;
|
|
|
|
a {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
p:last-child {
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
a {
|
|
font-family: circe, sans-serif;
|
|
// font-weight: 400;
|
|
font-style: normal;
|
|
text-decoration: none;
|
|
color: #555;
|
|
|
|
transition: color 0.2s ease-in;
|
|
}
|
|
|
|
.product_section {
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
section {
|
|
margin-top: 40%;
|
|
margin-bottom: 40%;
|
|
}
|
|
|
|
.sticky_history {
|
|
p {
|
|
color: rgba(0, 0, 0, 0.5);
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.bg-darkgrey {
|
|
background-color: $hp-dark_grey;
|
|
}
|
|
|
|
.products-img-shadow {
|
|
box-shadow: inset -20px 0px 50px 10px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.products-img-shadow.order-1 {
|
|
box-shadow: inset -20px 0px 50px 10px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.products-container {
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.products-small {
|
|
max-width: calc(100% / 10);
|
|
}
|
|
}
|
|
|
|
.background-image {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.icon-size {
|
|
svg {
|
|
max-width: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.min-height-100:first-of-type {
|
|
.products-img:first-of-type {
|
|
min-height: calc(200px);
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
min-height: calc(100vh - (200px - 49px));
|
|
|
|
.products-img:first-of-type {
|
|
min-height: calc(100vh - 49px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.description {
|
|
@include media-breakpoint-up(lg) {
|
|
padding: 50px;
|
|
}
|
|
}
|
|
|
|
.w-50 {
|
|
width: 50%;
|
|
}
|
|
|
|
.filter-grey {
|
|
filter: grayscale(100%);
|
|
transition: filter 500ms linear;
|
|
|
|
&:hover {
|
|
filter: grayscale(0%);
|
|
}
|
|
}
|
|
|
|
.h-100p {
|
|
height: 100%;
|
|
}
|
|
|
|
.pb-10p {
|
|
padding-bottom: calc(76.45px + 10%);
|
|
}
|
|
|
|
.productimg {
|
|
max-width: 60%;
|
|
}
|
|
|
|
.bg-white {
|
|
background-color: $white;
|
|
}
|
|
|
|
.minh-100vh {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.center-icon {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
justify-content: center;
|
|
} |