New: Model template
This commit is contained in:
@@ -82,12 +82,24 @@ $headings-color: #212121;
|
||||
background-color: $van-emous-blue !important;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.8em;;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6,
|
||||
[class^="display-"] {
|
||||
@@ -126,7 +138,7 @@ h6 {
|
||||
p {
|
||||
font-family: $mukta-font;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
line-height: 1.8em !important;
|
||||
font-weight: normal;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
@@ -137,6 +149,14 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color:#212121;
|
||||
}
|
||||
|
||||
.numbers {
|
||||
font-size: 1.15em;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: 40px;
|
||||
@@ -164,6 +184,10 @@ p {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.py-10 {
|
||||
padding: 4em 0 12em 0;
|
||||
}
|
||||
|
||||
.rounded-img {
|
||||
border-radius: 20px;;
|
||||
}
|
||||
@@ -214,6 +238,15 @@ p {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-aos="zoom-in"] {
|
||||
transform: scale(0.9) !important;
|
||||
transition-property: transform, opacity;
|
||||
|
||||
&.aos-animate {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: none;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
@@ -306,6 +339,46 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
.hero-image-single {
|
||||
width: 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 40px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
|
||||
min-height: 200px;
|
||||
max-height: 200px;
|
||||
height: 200px;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-height: 300px;
|
||||
max-height: 300px;
|
||||
height: 300px;
|
||||
aspect-ratio: 21 / 9;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-image-model {
|
||||
width: 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 40px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
|
||||
min-height: 300px;
|
||||
max-height: 300px;
|
||||
height: 300px;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-height: 400px;
|
||||
max-height: 400px;
|
||||
height: 400px;
|
||||
aspect-ratio: 21 / 9;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.btn-cta {
|
||||
display: inline-block;
|
||||
@@ -335,10 +408,11 @@ p {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
color: #ffffff !important;
|
||||
padding-right: 80px;
|
||||
|
||||
&::after {
|
||||
@@ -413,6 +487,22 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
|
||||
transform: translateY(-10px) rotate(.5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.card-secondary {
|
||||
background-color: $van-emous-blue;
|
||||
border-radius:30px;
|
||||
min-height:200px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.modellen-sectie {
|
||||
.model-card {
|
||||
min-height: 480px;
|
||||
@@ -562,6 +652,342 @@ p {
|
||||
}
|
||||
|
||||
// Scrollstops
|
||||
#vergunningscheck {
|
||||
#vergunningscheck,
|
||||
#modellen {
|
||||
scroll-margin-top: 100px;
|
||||
}
|
||||
|
||||
#map canvas {
|
||||
touch-action: pan-y !important;
|
||||
}
|
||||
|
||||
.info-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
transition: transform .6s cubic-bezier(.165,.84,.44,1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// SVG
|
||||
.modellen-sectie {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-bg-container {
|
||||
// position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.drawing-line {
|
||||
stroke-dasharray: 10000;
|
||||
stroke-dashoffset: 10000;
|
||||
transition: stroke-dashoffset 10s ease-in, opacity 1s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.is-visible .drawing-line,
|
||||
.is-visible.drawing-line {
|
||||
stroke-dashoffset: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Forms
|
||||
.form-control:focus {
|
||||
border-color: #b95913;
|
||||
box-shadow: 0 0 0 0.25rem rgba(185, 89, 19, 0.25);
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
border: 1px solid #999 !important;
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: #b95913;
|
||||
border-color: #b95913 !important;
|
||||
}
|
||||
|
||||
.form-check-input:focus {
|
||||
border-color: #b95913 !important;
|
||||
box-shadow: 0 0 0 0.25rem rgba(185, 89, 19, 0.25);
|
||||
}
|
||||
|
||||
#contactModal .btn-primary {
|
||||
background-color: #b95913;
|
||||
border-color: #b95913;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contactModal .btn-primary:hover,
|
||||
#contactModal .btn-primary:active {
|
||||
background-color: #964810;
|
||||
border-color: #964810;
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
// Slider
|
||||
#model-splide {
|
||||
padding-bottom: 3rem;
|
||||
|
||||
.splide__pagination {
|
||||
bottom: 0;
|
||||
|
||||
&__page {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: darken($van-emous-blue, 20%);
|
||||
border: none;
|
||||
margin: 0 6px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.is-active {
|
||||
background: $van-emous-orange;
|
||||
transform: scale(1.4);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: $van-emous-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
.splide__track {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.splide__list {
|
||||
cursor: grab;
|
||||
&:active { cursor: grabbing; }
|
||||
}
|
||||
}
|
||||
|
||||
#gallery-splide {
|
||||
overflow: hidden; // Zorgt dat alles wat buiten de slider valt onzichtbaar is
|
||||
padding-bottom: 40px;
|
||||
.splide__slide {
|
||||
transition: transform 0.3s ease;
|
||||
&:hover {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.splide__arrow {
|
||||
background: $van-emous-orange;
|
||||
color: white;
|
||||
opacity: 1;
|
||||
&:hover { background: darken($van-emous-orange, 10%); }
|
||||
}
|
||||
|
||||
.splide__pagination {
|
||||
|
||||
|
||||
&__page {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: $van-emous-blue;
|
||||
border: none;
|
||||
margin: 0 6px;
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.is-active {
|
||||
background: $van-emous-orange;
|
||||
transform: scale(1.4);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: $van-emous-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
.splide__track {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.splide__list {
|
||||
cursor: grab;
|
||||
&:active { cursor: grabbing; }
|
||||
}
|
||||
}
|
||||
|
||||
#lightboxModal {
|
||||
.modal-content {
|
||||
background: transparent;
|
||||
}
|
||||
.modal-backdrop.show {
|
||||
opacity: 0.9; // Lekker donker zodat de foto knalt
|
||||
}
|
||||
#lightboxImage {
|
||||
max-height: 90vh; // Voorkomt dat de foto buiten beeld valt op kleine schermen
|
||||
box-shadow: 0 0 50px rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-trigger {
|
||||
transition: opacity 0.3s ease;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-lightbox-close {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
z-index: 1060;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background-color: $van-emous-orange; // Je primary kleur
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s;
|
||||
&:hover { transform: scale(1.1); color: #fff; }
|
||||
}
|
||||
|
||||
#lightbox-splide {
|
||||
.splide__arrow {
|
||||
background-color: $van-emous-orange !important;
|
||||
color: #fff !important;
|
||||
opacity: 1;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
svg { fill: #fff; } // Als je de standaard Splide pijltjes gebruikt
|
||||
i { font-size: 1.5rem; } // Als je Bootstrap Icons gebruikt
|
||||
}
|
||||
|
||||
.splide__track {
|
||||
overflow: visible; // Zorgt dat pijltjes buiten de foto kunnen vallen indien gewenst
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
opacity: .5;
|
||||
border-radius: 10px;
|
||||
color: $van-emous-orange;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
||||
|
||||
i {
|
||||
font-size: 2em;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// FAQ
|
||||
.faq-accordion {
|
||||
.accordion-item {
|
||||
border-radius: 25px !important;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
padding: 2rem 3rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #212121;
|
||||
background-color: #fff;
|
||||
box-shadow: none;
|
||||
transition: background-color 0.3s, border-radius 0.3s;
|
||||
|
||||
&::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212121'%3e%3cpath d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z'/%3e%3c/svg%3e");
|
||||
background-size: 1.25rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
background-color: $van-emous-orange;
|
||||
color: #fff;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
|
||||
&::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: rgba(0,0,0,.125);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
background-color: $van-emous-orange;
|
||||
color: #fff;
|
||||
padding: 0 3rem 2rem 3rem;
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
|
||||
a {
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.accordion-button {
|
||||
font-size: 1.5rem !important;
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.contact-icon-circle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: $van-emous-orange; // Gebruik je variabele
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0; // Voorkomt dat de cirkel platgedrukt wordt bij lange tekst
|
||||
|
||||
i, img {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
width: 24px; // Mocht je SVG's gebruiken
|
||||
}
|
||||
}
|
||||
|
||||
#contact-info {
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
color: #212121;
|
||||
}
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user