Skip to content

Instantly share code, notes, and snippets.

@mvthul

mvthul/fixed_custom.css

Created August 21, 2026 09:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mvthul/95cf215df12ab1ba7c913595094cba58 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mvthul/95cf215df12ab1ba7c913595094cba58 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fixed_custom.css
/* =========================================================
HUIZE DOLVE - PREMIUM HOVER STATES & MICRO-INTERACTIONS
========================================================= */
/* 1. Global Background */
body, .elementor-page {
background-color: #FBF9F5 !important;
color: #1B2A22;
-webkit-font-smoothing: antialiased;
}
/* 2. Premium Button Hover */
.elementor-button, .btn-primary, button {
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.elementor-button:hover, .btn-primary:hover, button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(197, 168, 105, 0.25) !important;
background-color: #B49658 !important;
}
/* 3. Image Hover Zoom */
.elementor-widget-image img, .aspect-square img, .aspect-\[4\/3\] img {
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
will-change: transform;
}
.elementor-widget-image:hover img, .group:hover img {
transform: scale(1.04);
}
/* 4. Nav Underline */
.solace-extra-nav-menu a, .nav-link, nav a {
position: relative;
text-decoration: none !important;
}
.solace-extra-nav-menu a::after, .nav-link::after, nav a::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 0%;
height: 1px;
background-color: #C5A869;
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.solace-extra-nav-menu a:hover::after, .nav-link:hover::after, nav a:hover::after {
width: 100%;
}
/* =========================================================
HUIZE DOLVE - FOOTER BULLET REMOVAL & ALIGNMENT
========================================================= */
footer ul, .site-footer ul, [data-elementor-type="footer"] ul, #footer_container ul {
list-style: none !important;
list-style-type: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
footer ul li, .site-footer ul li, [data-elementor-type="footer"] ul li, #footer_container ul li {
list-style: none !important;
list-style-type: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
footer ul li::before, .site-footer ul li::before, [data-elementor-type="footer"] ul li::before {
content: none !important;
display: none !important;
}
/* =========================================================
OPTICAL ALIGNMENT FOR FOOTER HEADINGS
========================================================= */
#f_logo .elementor-heading-title, .elementor-element-f_logo h2 {
line-height: 1 !important;
margin-top: 0 !important;
display: block !important;
}
#f_nav_head .elementor-heading-title,
#f_links_head .elementor-heading-title,
#f_contact_head .elementor-heading-title {
margin-top: 8px !important;
line-height: 1 !important;
display: block !important;
}
/* =========================================================
CLICKABLE FOOTER CONTACT LINKS HOVER
========================================================= */
.elementor-element-f_contact_list a, #f_contact_list a, footer .elementor-icon-list-item a {
color: rgba(245, 242, 235, 0.8) !important;
text-decoration: none !important;
transition: color 0.3s ease, transform 0.3s ease !important;
display: inline-flex !important;
align-items: center !important;
}
.elementor-element-f_contact_list a:hover, #f_contact_list a:hover, footer .elementor-icon-list-item a:hover {
color: #C5A869 !important;
}
.elementor-element-f_contact_list a:hover .elementor-icon-list-icon i,
footer .elementor-icon-list-item a:hover .elementor-icon-list-icon i {
transform: scale(1.15) !important;
transition: transform 0.3s ease !important;
}
/* =========================================================
HOMEPAGE APARTMENT CARDS PERFECT ALIGNMENT & SIZING
========================================================= */
/* 1. Equal height on card containers */
.elementor-element-ccc25b9, .elementor-element-5bcafcd {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* 2. Unified Image Aspect Ratio & Cover */
.elementor-element-de48df3, .elementor-element-580eea3 {
position: relative !important;
width: 100% !important;
aspect-ratio: 16 / 10 !important;
overflow: hidden !important;
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important;
}
.elementor-element-de48df3 img, .elementor-element-580eea3 img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.elementor-element-ccc25b9:hover .elementor-element-de48df3 img,
.elementor-element-5bcafcd:hover .elementor-element-580eea3 img {
transform: scale(1.05) !important;
}
/* 3. Card Content Flexbox - Push Button to Bottom */
.elementor-element-b8b37a8, .elementor-element-a42e085 {
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
justify-content: space-between !important;
}
/* 4. Text & Features Container */
.elementor-element-4d944aa, .elementor-element-2c1caa7 {
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
}
/* 5. Descriptions min-height for uniform rhythm */
@media (min-width: 768px) {
.elementor-element-17de753, .elementor-element-4b79fa0 {
min-height: 110px !important;
}
}
/* 6. Buttons margin-top auto */
.elementor-element-0df1189, .elementor-element-04c660e {
margin-top: 24px !important;
width: 100% !important;
}
.elementor-element-0df1189 a, .elementor-element-04c660e a {
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
border: 1px solid rgba(27, 42, 34, 0.15) !important;
background: transparent !important;
transition: all 0.3s ease !important;
}
.elementor-element-0df1189 a:hover, .elementor-element-04c660e a:hover {
background: #1B2A22 !important;
color: #FBF9F5 !important;
border-color: #1B2A22 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(27, 42, 34, 0.1) !important;
}
/* =========================================================
HOMEPAGE ACCOMMODATIE CARDS PIXEL-PERFECT ALIGNMENT
========================================================= */
/* 1. Equal height row and cards */
.elementor-element-app_cards_row {
display: flex !important;
align-items: stretch !important;
}
.elementor-element-app_card_1,
.elementor-element-app_card_2 {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
align-self: stretch !important;
background: #FDFCF8 !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 10px 30px rgba(27, 38, 32, 0.05) !important;
}
/* 2. Image container & absolute img */
.elementor-element-app_card_1 .elementor-widget-image,
.elementor-element-app_card_2 .elementor-widget-image {
position: relative !important;
width: 100% !important;
aspect-ratio: 16 / 10 !important;
height: auto !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor-element-app_card_1 .elementor-widget-image .elementor-widget-container,
.elementor-element-app_card_2 .elementor-widget-image .elementor-widget-container {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.elementor-element-app_card_1 .elementor-widget-image img,
.elementor-element-app_card_2 .elementor-widget-image img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.elementor-element-app_card_1:hover .elementor-widget-image img,
.elementor-element-app_card_2:hover .elementor-widget-image img {
transform: scale(1.05) !important;
}
/* 3. Card Body Flexbox */
.elementor-element-card_1_body,
.elementor-element-card_2_body {
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
justify-content: flex-start !important;
padding: 32px !important;
}
/* 4. Headings */
.elementor-element-card_1_title,
.elementor-element-card_2_title {
margin-bottom: 12px !important;
}
.elementor-element-card_1_title h2,
.elementor-element-card_2_title h2 {
font-family: "Cormorant Garamond", serif !important;
font-size: 32px !important;
color: #1B2A22 !important;
margin: 0 !important;
}
/* 5. Description Text - Fixed uniform rhythm */
@media (min-width: 768px) {
.elementor-element-card_1_body .elementor-widget-text-editor,
.elementor-element-card_2_body .elementor-widget-text-editor {
min-height: 108px !important;
margin-bottom: 20px !important;
}
.elementor-element-card_1_body .elementor-widget-icon-list,
.elementor-element-card_2_body .elementor-widget-icon-list {
min-height: 88px !important;
margin-bottom: 24px !important;
}
}
/* 6. Push Button to bottom uniformly */
.elementor-element-card_1_body .elementor-widget-button,
.elementor-element-card_2_body .elementor-widget-button {
margin-top: auto !important;
width: 100% !important;
}
.elementor-element-card_1_body .elementor-button,
.elementor-element-card_2_body .elementor-button {
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
border: 1px solid rgba(27, 42, 34, 0.15) !important;
background: transparent !important;
color: #1B2A22 !important;
font-family: Manrope, sans-serif !important;
font-weight: 600 !important;
padding: 14px 24px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}
.elementor-element-card_1_body .elementor-button:hover,
.elementor-element-card_2_body .elementor-button:hover {
background: #1B2A22 !important;
color: #FBF9F5 !important;
border-color: #1B2A22 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(27, 42, 34, 0.1) !important;
}
/* =========================================================
HUIZE DOLVE - UI/UX PRO MAX POLISH & MICRO-INTERACTIONS
========================================================= */
/* 1. Navigatie: Actieve link & Hover effecten */
.nav-link.active,
.current-menu-item > a,
nav a[aria-current="page"] {
color: #C5A869 !important;
position: relative;
}
.nav-link.active::after,
.current-menu-item > a::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 2px;
background: #C5A869;
border-radius: 2px;
}
/* 2. Zig-Zag Appartement Foto Frames & Schaduwen */
article img,
section img,
.elementor-widget-image img {
box-shadow: 0 16px 36px -12px rgba(27, 42, 34, 0.08) !important;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease !important;
}
article:hover img,
section:hover img {
box-shadow: 0 24px 48px -12px rgba(27, 42, 34, 0.12) !important;
}
/* 3. Tarieven & Informatie 3-Kaarten Grid (Hover Elevatie) */
.grid article,
.elementor-widget-container article,
.bg-warm-cream.rounded-xl,
article.rounded-xl {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}
.grid article:hover,
.bg-warm-cream.rounded-xl:hover,
article.rounded-xl:hover {
transform: translateY(-4px) !important;
box-shadow: 0 20px 40px -10px rgba(27, 42, 34, 0.1) !important;
}
/* 4. Verfijnde Eyebrow Badges */
h1 ~ span,
.font-label-sm,
span.text-accent,
span[class*="text-amber"] {
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
}
/* 5. CTA Banner Witte Knop Hover Interactie */
a[href*="contact"].bg-white,
.bg-white.text-forest-deep,
.elementor-button.elementor-size-md.bg-white {
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
a[href*="contact"].bg-white:hover,
.bg-white.text-forest-deep:hover {
background-color: #C5A869 !important;
color: #141F19 !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(197, 168, 105, 0.3) !important;
}
/* 6. Icon List Feature Vinkjes (Muted Brass Accent) */
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg,
span.material-symbols-outlined {
color: #C5A869 !important;
}
/* =========================================================
APPARTEMENTEN (POST 75) - CONTAINER & IMAGE FIT FIX
========================================================= */
.elementor-element-app_hero_img_col,
.elementor-element-boven_img_col_r,
.elementor-element-midden_img_col_l {
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
border-radius: 20px !important;
}
.elementor-element-app_hero_img_native,
.elementor-element-boven_img_native,
.elementor-element-midden_img_native {
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 16px 36px -10px rgba(24, 40, 30, 0.12) !important;
aspect-ratio: 16 / 10 !important;
width: 100% !important;
position: relative !important;
}
.elementor-element-app_hero_img_native img,
.elementor-element-boven_img_native img,
.elementor-element-midden_img_native img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 20px !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
}
/* =========================================================
APPARTEMENTEN (POST 75) - CLEAN IMAGE FIT
========================================================= */
#midden-appartement img,
#boven-appartement img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 1rem !important;
}
.aspect-\[16\/10\] {
aspect-ratio: 16 / 10 !important;
position: relative !important;
overflow: hidden !important;
border-radius: 1rem !important;
}
.aspect-\[4\/3\] {
aspect-ratio: 4 / 3 !important;
position: relative !important;
overflow: hidden !important;
border-radius: 1rem !important;
}
/* =========================================================
GLOBAL CTA BUTTON CONTRAST & VISIBILITY FIX
========================================================= */
.btn-gold-primary,
a.btn-gold-primary {
background-color: #C5A869 !important;
color: #141F19 !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.btn-gold-primary:hover,
a.btn-gold-primary:hover {
background-color: #FBF9F5 !important;
color: #141F19 !important;
}
.btn-outline-light,
a.btn-outline-light {
background-color: transparent !important;
color: #FBF9F5 !important;
border: 1px solid rgba(251, 249, 245, 0.3) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.btn-outline-light:hover,
a.btn-outline-light:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #FFFFFF !important;
border-color: #FFFFFF !important;
}
/* Contact Page 1-to-1 Enhancements */
.page-id-78 {
background-color: #FAF8F5 !important;
}
/* WPForms 1-to-1 form field styling */
.page-id-78 .wpforms-container {
margin: 0 !important;
padding: 0 !important;
}
.page-id-78 .wpforms-form {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
}
.page-id-78 .wpforms-field-container {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
}
.page-id-78 .wpforms-field {
padding: 0 !important;
margin: 0 !important;
}
.page-id-78 .wpforms-field-label {
display: block !important;
font-family: Manrope, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: #1B2A22 !important;
margin-bottom: 8px !important;
}
.page-id-78 .wpforms-required-label {
color: #C5A869 !important;
margin-left: 2px !important;
}
/* Inputs - Grey Background */
.page-id-78 .wpforms-field input[type="text"],
.page-id-78 .wpforms-field input[type="email"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background-color: #EAEBF0 !important; /* Light Grey */
border: 1px solid transparent !important;
border-radius: 6px !important;
padding: 14px 16px !important;
font-family: Manrope, sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
line-height: 1.5 !important;
transition: all 0.2s ease-in-out !important;
}
/* Textarea - White Background */
.page-id-78 .wpforms-field textarea {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background-color: #FFFFFF !important; /* White */
border: 1px solid #EAEBF0 !important; /* Subtle border */
border-radius: 6px !important;
padding: 14px 16px !important;
font-family: Manrope, sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
line-height: 1.5 !important;
transition: all 0.2s ease-in-out !important;
min-height: 150px !important; /* Make it taller */
}
.page-id-78 .wpforms-field input:focus,
.page-id-78 .wpforms-field textarea:focus {
background-color: #FFFFFF !important;
border-color: #C5A869 !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(197, 168, 105, 0.2) !important;
}
.page-id-78 .wpforms-field input::placeholder,
.page-id-78 .wpforms-field textarea::placeholder {
color: #9CA3AF !important; /* Placeholder grey */
font-family: Manrope, sans-serif !important;
font-size: 14px !important;
}
.page-id-78 .wpforms-submit-container {
margin-top: 32px !important; /* Push button down */
padding: 0 !important;
}
.page-id-78 button.wpforms-submit {
width: 100% !important;
background-color: #141F19 !important;
color: #FBF9F5 !important;
font-family: Manrope, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 16px 32px !important;
border-radius: 8px !important;
border: none !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
box-shadow: 0 4px 12px rgba(20, 31, 25, 0.12) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
letter-spacing: 0.02em !important;
}
.page-id-78 button.wpforms-submit:hover {
background-color: #C5A869 !important;
color: #141F19 !important;
box-shadow: 0 6px 18px rgba(197, 168, 105, 0.25) !important;
}
/* Icon list icons */
.page-id-78 .elementor-icon-list-item {
font-family: Manrope, sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
display: flex !important;
align-items: center !important;
}
.page-id-78 .elementor-icon-list-item a {
color: #1B2A22 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.page-id-78 .elementor-icon-list-item a:hover {
color: #C5A869 !important;
}
.page-id-78 .elementor-icon-list-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #C5A869 !important;
margin-right: 12px !important;
}
.page-id-78 .elementor-icon-list-icon i {
color: #C5A869 !important;
font-size: 16px !important;
}
/* Map container iframe full width */
.page-id-78 .elementor-widget-google_maps,
.page-id-78 .elementor-widget-google_maps .elementor-custom-embed,
.page-id-78 .elementor-widget-google_maps iframe {
width: 100% !important;
height: 100% !important;
min-height: 280px !important;
border-radius: 16px !important;
display: block !important;
}
/* Ensure widget wrapper has no margin/padding */
.page-id-78 .elementor-widget-google_maps .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
/* Horizontale ruimte tussen linkerkolom en rechterkolom */
justify-content: center !important;
}
.page-id-78 .elementor-element-cnt_left_col {
width: 38% !important; /* Maak linker kolom iets smaller */
max-width: 38% !important;
gap: 24px !important; /* Verticale ruimte tussen gegevens en map */
display: flex !important;
flex-direction: column !important;
}
.page-id-78 .elementor-element-cnt_right_col {
width: 60% !important; /* Maak rechter formulier kolom breder */
max-width: 60% !important;
}
/* Zorg dat de cards in de linker kolom 100% breed zijn */
.page-id-78 .elementor-element-cnt_card_info,
.page-id-78 .elementor-element-cnt_card_map {
width: 100% !important;
max-width: 100% !important;
}
/* Tablet / Mobile Overrides */
@media (max-width: 1024px) {
.page-id-78 .elementor-element-cnt_grid {
flex-direction: column !important;
}
.page-id-78 .elementor-element-cnt_left_col,
.page-id-78 .elementor-element-cnt_right_col {
width: 100% !important;
max-width: 100% !important;
}
}
/* Layout Spacing Overrides - Tighter Spacing */
.page-id-78 .elementor-element-cnt_grid {
gap: 16px !important; /* Nog kleinere horizontale ruimte */
justify-content: center !important;
}
.page-id-78 .elementor-element-cnt_left_col {
width: 34% !important; /* Linker kolom iets smaller */
max-width: 34% !important;
gap: 16px !important; /* Nog kleinere verticale ruimte */
display: flex !important;
flex-direction: column !important;
}
.page-id-78 .elementor-element-cnt_right_col {
width: 64% !important; /* Rechter formulier kolom breder */
max-width: 64% !important;
}
/* Zorg dat de cards in de linker kolom 100% breed zijn */
.page-id-78 .elementor-element-cnt_card_info,
.page-id-78 .elementor-element-cnt_card_map {
width: 100% !important;
max-width: 100% !important;
}
/* Tablet / Mobile Overrides */
@media (max-width: 1024px) {
.page-id-78 .elementor-element-cnt_grid {
flex-direction: column !important;
}
.page-id-78 .elementor-element-cnt_left_col,
.page-id-78 .elementor-element-cnt_right_col {
width: 100% !important;
max-width: 100% !important;
}
}
/* Locatie Page 1-to-1 Fixes */
.page-id-77 .locatie-map-widget,
.page-id-77 .locatie-map-widget .elementor-widget-container,
.page-id-77 .locatie-map-widget .elementor-custom-embed,
.page-id-77 .locatie-map-widget iframe {
width: 100% !important;
height: 100% !important;
min-height: 420px !important;
border-radius: 16px !important;
display: block !important;
}
/* Fix column gaps if necessary */
.page-id-77 .elementor-widget-container {
margin: 0 !important;
}
/* Typography Overrides */
/* 1. Hero Grid */
/* 2. Map Grid */
/* Cards shared */
/* Remove default widget margins in cards */
/* 3. Routebeschrijvingen Grid */
/* Buttons */
/* Address Card Inner Text Spacing */
/* Mobile Overrides */
@media (max-width: 1024px) {
}
/* Typography Overrides */
/* 1. Hero Grid */
/* 2. Map Grid */
/* Cards shared */
/* 3. Routebeschrijvingen Grid */
/* Buttons */
/* Address Card Inner Text Spacing */
/* Mobile Overrides */
@media (max-width: 1024px) {
}
/* Base Wrapper */
body
/* Typography Overrides */
/* 1. Hero Grid */
/* 2. Map Grid */
/* Cards shared */
/* 3. Routebeschrijvingen Grid */
/* Buttons */
/* Address Card Inner Text Spacing */
/* Mobile Overrides */
@media (max-width: 1024px) {
}
/* Typography Overrides */
/* 1. Hero Grid */
/* Murlenbach, Vulkaaneifel label added via JSON */
/* 2. Map Grid */
/* Cards shared */
/* Light Cards */
/* Dark Cards */
/* Headings in cards */
/* Dark card text colors */
/* Paragraphs in Route Cards */
/* Fix strong text in light cards */
/* Lists in Route Cards */
/* 3. Routebeschrijvingen Section */
/* Buttons */
/* Mobile Overrides */
@media (max-width: 1024px) {
}
/* FIX 1: Container Padding - reduced side padding so hero title fits in 2 lines */
/* Typography Overrides */
/* 1. Hero Grid */
/* 2. Map Grid */
/* Cards shared */
/* Light Cards */
/* Dark Cards */
/* FIX 2: Icon Alignment using CSS pseudo-elements */
/* FIX 6: Padding in the Adres List - space-y-1 = 4px */
/* Dark card text colors */
/* FIX 4: Margins of route labels */
/* Paragraphs in Route Cards */
/* Bold text in light cards: dark color */
/* Bold text in dark card: inherit light color */
/* Dark card paragraph color override */
/* Lists in Route Cards */
/* Underlines in lists */
/* 3. Routebeschrijvingen Section */
/* FIX 5: Button styling with proper icon */
/* FIX 7: Emoji Rendering */
/* Mobile Overrides */
@media (max-width: 1024px) {
}
/* 1-to-1 Elementor Replica - Locatie Page V22 EXACT FOOTER DISTANCE (160PX) */
body.page-id-275 {
background-color: #FBF9F5 !important;
}
/* ============================================ */
/* ROOT CONTAINER & ELEMENTOR OVERRIDES */
/* ============================================ */
.page-id-275 .elementor-element-e8b6d9c {
max-width: 1280px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 2.5rem 3rem 10rem 3rem !important; /* pt-10 px-12 pb-40 = 40px 48px 160px 48px (160px to footer) */
display: flex !important;
flex-direction: column !important;
gap: 5rem !important; /* mb-20 = 80px */
box-sizing: border-box !important;
}
.page-id-275 .elementor-element-e8b6d9c > .e-con-inner {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 5rem !important;
}
.page-id-275 .elementor-element-3369c21,
.page-id-275 .elementor-element-5b22d16,
.page-id-275 .elementor-element-bfd4625,
.page-id-275 .elementor-element-bc53ae0 {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* ============================================ */
/* SECTION 1: HERO */
/* ============================================ */
.page-id-275 .elementor-element-3369c21 {
display: grid !important;
grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
gap: 3rem !important;
align-items: center !important;
}
.page-id-275 .elementor-element-28d4c61 {
grid-column: span 6 / span 6 !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 1.5rem !important; /* 24px */
}
/* Top Label */
.page-id-275 .elementor-element-label_top,
.page-id-275 .elementor-element-label_top span {
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 19.8px !important;
color: #C5A869 !important;
text-transform: uppercase !important;
display: inline-block !important;
}
/* H1 Heading */
.page-id-275 .elementor-element-6ee8ee8 .elementor-heading-title {
font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif !important;
font-size: 48px !important;
font-weight: 400 !important;
line-height: 48px !important;
letter-spacing: -0.72px !important;
color: #1B2A22 !important;
margin: 0 !important;
}
/* Gold Divider */
.page-id-275 .elementor-element-divider01 {
width: 48px !important;
margin: 0 !important;
padding: 0 !important;
}
.page-id-275 .elementor-element-divider01 .elementor-divider {
width: 48px !important;
margin: 0 !important;
padding: 0 !important;
}
.page-id-275 .elementor-element-divider01 .elementor-divider-separator {
border-top-color: #C5A869 !important;
border-top-width: 2px !important;
width: 48px !important;
margin: 0 !important;
}
/* Intro Paragraph */
.page-id-275 .elementor-element-d94b83a p {
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
color: #3B4D43 !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 29.7px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Badges */
.page-id-275 .elementor-element-badges01,
.page-id-275 .elementor-element-badges01 *,
.page-id-275 .elementor-element-badges01 span,
.page-id-275 .elementor-element-badges01 div {
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 20px !important;
color: #1B2A22 !important;
}
/* Hero Button: exact 40px distance from badges */
.page-id-275 .maps-button.elementor-widget-button,
.page-id-275 .elementor-element-2fd5970.elementor-widget-button {
margin-top: 1rem !important; /* +16px to gap-6 (24px) = 40px total distance */
margin-bottom: 0 !important;
padding: 0 !important;
}
.page-id-275 .maps-button .elementor-button,
.page-id-275 .elementor-element-2fd5970 .elementor-button {
text-transform: none !important;
font-family: Manrope, sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 26.4px !important;
letter-spacing: normal !important;
padding: 14px 24px !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important;
background-color: #1B2A22 !important;
color: #FBF9F5 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
transform: translateY(0) !important;
}
.page-id-275 .maps-button .elementor-button:hover,
.page-id-275 .elementor-element-2fd5970 .elementor-button:hover {
background-color: #C5A869 !important;
color: #141F19 !important;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
transform: translateY(-2px) !important;
}
/* Hero Image Right */
.page-id-275 .elementor-element-512cb7a {
grid-column: span 6 / span 6 !important;
border-radius: 1rem !important;
overflow: hidden !important;
box-shadow: 0 25px 50px -12px rgba(27,42,34, 0.25) !important;
aspect-ratio: 4 / 3 !important;
border: 1px solid rgba(27,42,34, 0.1) !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
cursor: pointer;
}
.page-id-275 .elementor-element-512cb7a img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1) !important;
}
.page-id-275 .elementor-element-512cb7a:hover img {
transform: scale(1.05) !important;
}
/* ============================================ */
/* SECTION 2: MAP & CARDS */
/* ============================================ */
.page-id-275 .elementor-element-5b22d16 {
display: grid !important;
grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
gap: 2rem !important;
align-items: stretch !important;
}
.page-id-275 .elementor-element-3c4de6f {
grid-column: span 7 / span 7 !important;
min-height: 420px !important;
height: 100% !important;
border-radius: 1rem !important;
overflow: hidden !important;
box-shadow: 0 10px 15px -3px rgba(0,0,0, 0.1) !important;
border: 1px solid rgba(27,42,34, 0.1) !important;
background-color: #F5F2EB !important;
padding: 0 !important;
margin: 0 !important;
}
.page-id-275 .elementor-element-3c4de6f iframe {
width: 100% !important;
height: 100% !important;
min-height: 420px !important;
display: block !important;
border: 0 !important;
}
.page-id-275 .elementor-element-0d2ae33 {
grid-column: span 5 / span 5 !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 1.5rem !important;
justify-content: space-between !important;
}
/* Address Card */
.page-id-275 .elementor-element-5506e26 {
padding: 2rem !important;
border-radius: 1rem !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 0 !important;
margin: 0 !important;
background-color: #FDFCF8 !important;
border: 1px solid rgba(27,42,34, 0.1) !important;
box-shadow: 0 4px 6px -1px rgba(0,0,0, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.page-id-275 .elementor-element-5506e26:hover {
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
}
/* Kylltal Card */
.page-id-275 .elementor-element-6bc2791 {
padding: 2rem !important;
border-radius: 1rem !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 0 !important;
margin: 0 !important;
background-color: #141F19 !important;
border: 1px solid rgba(197,168,105, 0.2) !important;
box-shadow: 0 10px 15px -3px rgba(0,0,0, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.page-id-275 .elementor-element-6bc2791:hover {
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
}
/* Card Heading Rows */
.page-id-275 .elementor-element-de29d2b {
padding: 0 !important;
margin: 0 0 1rem 0 !important; /* mb-4 = 16px */
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
width: 100% !important;
}
.page-id-275 .elementor-element-cad94f1 {
padding: 0 !important;
margin: 0 0 0.75rem 0 !important; /* mb-3 = 12px */
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
width: 100% !important;
}
.page-id-275 .elementor-element-61978a2,
.page-id-275 .elementor-element-75242ca,
.page-id-275 .adres-heading,
.page-id-275 .kylltal-heading {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* Card Heading Titles */
.page-id-275 .elementor-element-0d2ae33 .elementor-heading-title {
font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif !important;
font-size: 24px !important;
font-weight: 400 !important;
line-height: 32px !important;
letter-spacing: -0.36px !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.75rem !important;
}
.page-id-275 .elementor-element-5506e26 .elementor-heading-title {
color: #1B2A22 !important;
}
.page-id-275 .elementor-element-6bc2791 .elementor-heading-title {
color: #C5A869 !important;
}
.page-id-275 .adres-heading .elementor-heading-title::before {
content: "📍";
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
font-size: 20px;
margin-right: 0 !important;
}
.page-id-275 .kylltal-heading .elementor-heading-title::before {
content: "🌊";
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
font-size: 20px;
margin-right: 0 !important;
}
/* Address List */
.page-id-275 .elementor-element-590eef6,
.page-id-275 .elementor-element-590eef6 .elementor-widget-container {
padding: 0 !important;
margin: 0 0 1.5rem 0 !important; /* mb-6 = 24px */
gap: 0 !important;
}
.page-id-275 .elementor-element-590eef6 div,
.page-id-275 .elementor-element-590eef6 p {
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 16px !important;
line-height: 26.4px !important;
font-weight: 400 !important;
color: #3B4D43 !important;
}
.page-id-275 .elementor-element-590eef6 p:first-child {
font-weight: 700 !important;
font-size: 16px !important;
color: #1B2A22 !important;
margin-bottom: 4px !important;
}
/* "PLAN UW ROUTE ➔" Button */
.page-id-275 .elementor-element-59c237d.elementor-widget-button {
margin: 0 !important;
padding: 0 !important;
}
.page-id-275 .elementor-element-59c237d .elementor-button {
background-color: #1B2A22 !important;
color: #FBF9F5 !important;
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-transform: uppercase !important;
letter-spacing: 0.6px !important;
border-radius: 6px !important;
padding: 10px 20px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.page-id-275 .elementor-element-59c237d .elementor-button:hover {
background-color: #C5A869 !important;
color: #141F19 !important;
}
/* Kylltal Text */
.page-id-275 .elementor-element-6bc2791 .elementor-widget-text-editor,
.page-id-275 .elementor-element-6bc2791 .elementor-widget-text-editor * {
color: rgba(251,249,245, 0.8) !important;
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 14px !important;
line-height: 23.1px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ============================================ */
/* SECTION 3: ROUTE CARDS */
/* ============================================ */
.page-id-275 .elementor-element-bfd4625 {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.page-id-275 .elementor-element-46b883d {
text-align: center !important;
max-width: 42rem !important;
margin: 0 auto 3rem auto !important; /* mb-12 = 48px to cards */
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 1rem !important; /* EXACT 16px between H2 and Subtitel */
}
.page-id-275 .elementor-element-72c2c65 {
margin: 0 !important;
padding: 0 !important;
}
.page-id-275 .elementor-element-72c2c65 .elementor-heading-title {
font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif !important;
font-size: 36px !important;
font-weight: 400 !important;
line-height: 40px !important;
letter-spacing: -0.54px !important;
color: #1B2A22 !important;
margin: 0 !important;
padding: 0 !important;
}
.page-id-275 .elementor-element-f593220,
.page-id-275 .elementor-element-f593220 .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.page-id-275 .elementor-element-f593220 p {
font-size: 16px !important;
line-height: 26.4px !important;
color: #3B4D43 !important;
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
margin: 0 !important;
padding: 0 !important;
}
/* 3-Column Grid */
.page-id-275 .elementor-element-bc53ae0 {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 2rem !important;
align-items: stretch !important;
width: 100% !important;
}
/* Route Cards Base */
.page-id-275 .elementor-element-b257c9a,
.page-id-275 .elementor-element-e1045cb,
.page-id-275 .elementor-element-687ad46 {
padding: 2rem !important; /* p-8 = 32px */
border-radius: 1rem !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 0 !important;
margin: 0 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
transform: translateY(0) !important;
}
/* Light Route Cards (1 & 2) */
.page-id-275 .elementor-element-b257c9a,
.page-id-275 .elementor-element-e1045cb {
background-color: #FDFCF8 !important;
border: 1px solid rgba(27,42,34, 0.1) !important;
box-shadow: 0 4px 6px -1px rgba(0,0,0, 0.1) !important;
}
.page-id-275 .elementor-element-b257c9a:hover,
.page-id-275 .elementor-element-e1045cb:hover {
box-shadow: 0 20px 25px -5px rgba(0,0,0, 0.1), 0 10px 10px -5px rgba(0,0,0, 0.04) !important;
transform: translateY(-4px) !important;
}
/* Dark Route Card (3) */
.page-id-275 .elementor-element-687ad46 {
background-color: #141F19 !important;
border: 1px solid rgba(197,168,105, 0.2) !important;
box-shadow: 0 10px 15px -3px rgba(0,0,0, 0.1) !important;
}
.page-id-275 .elementor-element-687ad46:hover {
box-shadow: 0 25px 50px -12px rgba(0,0,0, 0.35) !important;
transform: translateY(-4px) !important;
}
/* Route Labels */
.page-id-275 .route-label {
margin: 0 0 0.75rem 0 !important; /* mb-3 = 12px */
padding: 0 !important;
}
.page-id-275 .route-label span {
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 18.15px !important;
letter-spacing: normal !important;
text-transform: uppercase !important;
color: #C5A869 !important;
display: block !important;
}
/* Route Headings */
.page-id-275 .elementor-element-bc53ae0 .elementor-widget-heading {
margin: 0 0 1rem 0 !important; /* mb-4 = 16px */
padding: 0 !important;
}
.page-id-275 .elementor-element-bc53ae0 .elementor-heading-title {
font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif !important;
font-size: 24px !important;
font-weight: 400 !important;
line-height: 32px !important;
letter-spacing: -0.36px !important;
margin: 0 !important;
}
.page-id-275 .elementor-element-b257c9a .elementor-heading-title,
.page-id-275 .elementor-element-e1045cb .elementor-heading-title {
color: #1B2A22 !important;
}
.page-id-275 .elementor-element-687ad46 .elementor-heading-title {
color: #C5A869 !important;
}
/* Route Intro Paragraph */
.page-id-275 .elementor-element-bc53ae0 .elementor-element-9580aae,
.page-id-275 .elementor-element-bc53ae0 .elementor-element-592fcfb,
.page-id-275 .elementor-element-bc53ae0 .elementor-element-994c653 {
margin: 0 0 1rem 0 !important; /* mb-4 = 16px */
padding: 0 !important;
}
.page-id-275 .elementor-element-bc53ae0 .elementor-widget-text-editor p {
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 12px !important;
line-height: 19.8px !important;
margin: 0 !important;
}
.page-id-275 .elementor-element-b257c9a .elementor-widget-text-editor p,
.page-id-275 .elementor-element-e1045cb .elementor-widget-text-editor p {
color: #3B4D43 !important;
}
.page-id-275 .elementor-element-687ad46 .elementor-widget-text-editor p {
color: rgba(251,249,245, 0.8) !important;
}
/* Route Lists */
.page-id-275 .elementor-element-bc53ae0 .elementor-widget-text-editor ol {
list-style-type: decimal !important;
list-style-position: inside !important;
padding: 0 !important;
margin: 0 !important;
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 16px !important;
line-height: 26.4px !important;
}
.page-id-275 .elementor-element-b257c9a .elementor-widget-text-editor ol,
.page-id-275 .elementor-element-e1045cb .elementor-widget-text-editor ol {
color: #3B4D43 !important;
}
.page-id-275 .elementor-element-687ad46 .elementor-widget-text-editor ol {
color: rgba(251,249,245, 0.8) !important;
}
.page-id-275 .elementor-element-bc53ae0 .elementor-widget-text-editor li {
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 16px !important;
line-height: 26.4px !important;
margin: 10px 0 0 0 !important;
}
.page-id-275 .elementor-element-bc53ae0 .elementor-widget-text-editor li:first-child {
margin-top: 0 !important;
}
.page-id-275 .elementor-element-bc53ae0 .elementor-widget-text-editor strong {
font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 26.4px !important;
}
.page-id-275 .elementor-element-b257c9a .elementor-widget-text-editor strong,
.page-id-275 .elementor-element-e1045cb .elementor-widget-text-editor strong {
color: #1B2A22 !important;
}
.page-id-275 .elementor-element-687ad46 .elementor-widget-text-editor strong {
color: rgba(251,249,245, 0.9) !important;
}
/* ============================================ */
/* RESPONSIVE DESIGN (TABLET & MOBILE) */
/* ============================================ */
/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
.page-id-275 .elementor-element-e8b6d9c {
padding: 2rem 2rem 5rem 2rem !important;
gap: 3.5rem !important;
}
.page-id-275 .elementor-element-e8b6d9c > .e-con-inner {
gap: 3.5rem !important;
}
.page-id-275 .elementor-element-3369c21 {
display: flex !important;
flex-direction: column !important;
gap: 2rem !important;
}
.page-id-275 .elementor-element-28d4c61 {
width: 100% !important;
}
.page-id-275 .elementor-element-512cb7a {
width: 100% !important;
}
.page-id-275 .elementor-element-5b22d16 {
display: flex !important;
flex-direction: column !important;
gap: 2rem !important;
}
.page-id-275 .elementor-element-3c4de6f {
width: 100% !important;
}
.page-id-275 .elementor-element-0d2ae33 {
width: 100% !important;
}
.page-id-275 .elementor-element-bc53ae0 {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
gap: 1.5rem !important;
}
}
/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
.page-id-275 .elementor-element-e8b6d9c {
padding: 1.5rem 1.25rem 4rem 1.25rem !important;
gap: 3rem !important;
}
.page-id-275 .elementor-element-e8b6d9c > .e-con-inner {
gap: 3rem !important;
}
.page-id-275 .elementor-element-6ee8ee8 .elementor-heading-title {
font-size: 36px !important;
line-height: 38px !important;
}
.page-id-275 .elementor-element-72c2c65 .elementor-heading-title {
font-size: 30px !important;
line-height: 34px !important;
}
.page-id-275 .elementor-element-5506e26,
.page-id-275 .elementor-element-6bc2791,
.page-id-275 .elementor-element-b257c9a,
.page-id-275 .elementor-element-e1045cb,
.page-id-275 .elementor-element-687ad46 {
padding: 1.5rem !important;
}
}
/* =========================================================
CONTACT PAGE WPFORMS 1-TO-1 VISUAL PARITY
========================================================= */
.page-id-78 .wpforms-container {
margin: 0 !important;
padding: 0 !important;
}
.page-id-78 .wpforms-form {
display: flex !important;
flex-direction: column !important;
gap: 1.25rem !important; /* space-y-5 */
}
.page-id-78 .wpforms-field-container {
display: flex !important;
flex-direction: column !important;
gap: 1.25rem !important;
}
.page-id-78 .wpforms-field {
padding: 0 !important;
margin: 0 !important;
}
.page-id-78 .wpforms-field-label {
display: block !important;
font-family: Manrope, sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: #1B2A22 !important;
margin-bottom: 8px !important;
}
.page-id-78 .wpforms-required-label {
color: #C5A869 !important;
margin-left: 2px !important;
}
.page-id-78 .wpforms-field input[type="text"],
.page-id-78 .wpforms-field input[type="email"] {
width: 100% !important;
box-sizing: border-box !important;
background-color: #FBF9F5 !important;
border: 1px solid rgba(27,42,34,0.15) !important;
border-radius: 8px !important;
padding: 14px 16px !important;
font-family: Manrope, sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
line-height: 1.5 !important;
transition: all 0.2s ease-in-out !important;
}
.page-id-78 .wpforms-field textarea {
width: 100% !important;
box-sizing: border-box !important;
background-color: #FBF9F5 !important;
border: 1px solid rgba(27,42,34,0.15) !important;
border-radius: 8px !important;
padding: 14px 16px !important;
font-family: Manrope, sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
line-height: 1.5 !important;
min-height: 140px !important;
transition: all 0.2s ease-in-out !important;
}
.page-id-78 .wpforms-field input:focus,
.page-id-78 .wpforms-field textarea:focus {
background-color: #FFFFFF !important;
border-color: #C5A869 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(197, 168, 105, 0.2) !important;
}
.page-id-78 .wpforms-submit-container {
margin-top: 8px !important;
padding: 0 !important;
}
.page-id-78 button.wpforms-submit,
.page-id-78 .wpforms-submit {
width: 100% !important;
background-color: #141F19 !important;
color: #FBF9F5 !important;
font-family: Manrope, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 16px 32px !important;
border-radius: 8px !important;
border: none !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
letter-spacing: normal !important;
}
.page-id-78 button.wpforms-submit:hover,
.page-id-78 .wpforms-submit:hover {
background-color: #C5A869 !important;
color: #141F19 !important;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
transform: translateY(-2px) !important;
}
/* =========================================================
CONTACT PAGE WPFORMS 1-TO-1 VISUAL PARITY
========================================================= */
.page-id-78 .wpforms-container {
margin: 0 !important;
padding: 0 !important;
}
.page-id-78 .wpforms-form {
display: flex !important;
flex-direction: column !important;
gap: 1.25rem !important;
}
.page-id-78 .wpforms-field-container {
display: flex !important;
flex-direction: column !important;
gap: 1.25rem !important;
}
.page-id-78 .wpforms-field {
padding: 0 !important;
margin: 0 !important;
}
.page-id-78 .wpforms-field-label {
display: block !important;
font-family: 'Manrope', sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: #1B2A22 !important;
margin-bottom: 8px !important;
}
.page-id-78 .wpforms-required-label {
color: #C5A869 !important;
margin-left: 2px !important;
}
.page-id-78 .wpforms-field input[type="text"],
.page-id-78 .wpforms-field input[type="email"] {
width: 100% !important;
box-sizing: border-box !important;
background-color: #FBF9F5 !important;
border: 1px solid rgba(27,42,34,0.15) !important;
border-radius: 8px !important;
padding: 14px 16px !important;
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
line-height: 1.5 !important;
transition: all 0.2s ease-in-out !important;
}
.page-id-78 .wpforms-field textarea {
width: 100% !important;
box-sizing: border-box !important;
background-color: #FBF9F5 !important;
border: 1px solid rgba(27,42,34,0.15) !important;
border-radius: 8px !important;
padding: 14px 16px !important;
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
line-height: 1.5 !important;
min-height: 140px !important;
transition: all 0.2s ease-in-out !important;
}
.page-id-78 .wpforms-field input:focus,
.page-id-78 .wpforms-field textarea:focus {
background-color: #FFFFFF !important;
border-color: #C5A869 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(197, 168, 105, 0.2) !important;
}
.page-id-78 .wpforms-submit-container {
margin-top: 8px !important;
padding: 0 !important;
}
.page-id-78 button.wpforms-submit,
.page-id-78 .wpforms-submit {
width: 100% !important;
background-color: #141F19 !important;
color: #FBF9F5 !important;
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
padding: 16px 32px !important;
border-radius: 8px !important;
border: none !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
letter-spacing: normal !important;
}
.page-id-78 button.wpforms-submit:hover,
.page-id-78 .wpforms-submit:hover {
background-color: #C5A869 !important;
color: #141F19 !important;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
transform: translateY(-2px) !important;
}
/* =========================================================
APPARTEMENTEN PAGE (POST 75) - REMOVE BULLETS KEEP CHECKMARKS
========================================================= */
.page-id-75 ul,
.page-id-75 li,
.page-id-75 .list-none {
list-style: none !important;
list-style-type: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.page-id-75 li::marker,
.page-id-75 ul li::marker {
display: none !important;
content: "" !important;
}
/* =========================================================
CLEAN LIST STYLING: POST 75 (APPARTEMENTEN) & POST 76 (PRIJZEN)
========================================================= */
.page-id-75 ul,
.page-id-75 li,
.page-id-76 ul,
.page-id-76 li {
list-style: none !important;
list-style-type: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.page-id-75 li::marker,
.page-id-75 ul li::marker,
.page-id-76 li::marker,
.page-id-76 ul li::marker {
display: none !important;
content: "" !important;
}
/* =========================================================
LOCATIE PAGE ROUTE CARDS PERFECT BASELINE ALIGNMENT
========================================================= */
.page-id-275 .elementor-element-017ee92 h3,
.page-id-275 .elementor-element-880ffba h3,
.page-id-275 .elementor-element-6d859fb h3,
.page-id-77 .elementor-element-017ee92 h3,
.page-id-77 .elementor-element-880ffba h3,
.page-id-77 .elementor-element-6d859fb h3 {
min-height: 64px !important;
line-height: 1.35 !important;
}
.page-id-275 .elementor-element-b61bbaa p,
.page-id-275 .elementor-element-dbf12fe p,
.page-id-275 .elementor-element-a92c25b p,
.page-id-77 .elementor-element-b61bbaa p,
.page-id-77 .elementor-element-dbf12fe p,
.page-id-77 .elementor-element-a92c25b p {
min-height: 48px !important;
line-height: 1.5 !important;
margin-bottom: 12px !important;
}
/* WPForms Contact Form Button & Inputs Styling */
.page-id-78 .wpforms-form button[type=submit],
.page-id-301 .wpforms-form, .page-id-410 .wpforms-form, .page-id-411 .wpforms-form,
.page-id-78 .wpforms-submit,
.page-id-301 .wpforms-submit, .page-id-410 .wpforms-submit, .page-id-411 .wpforms-submit{
background-color: #1B2A22 !important;
color: #FBF9F5 !important;
border: none !important;
border-radius: 8px !important;
font-family: "Manrope", sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
padding: 12px 28px !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.page-id-78 .wpforms-form button[type=submit]:hover,
.page-id-301 .wpforms-form, .page-id-410 .wpforms-form, .page-id-411 .wpforms-form,
.page-id-78 .wpforms-submit:hover,
.page-id-301 .wpforms-submit, .page-id-410 .wpforms-submit, .page-id-411 .wpforms-submit{
background-color: #C5A869 !important;
color: #141F19 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(197, 168, 105, 0.25) !important;
}
.page-id-78 .wpforms-form input[type=text],
.page-id-78 .wpforms-form input[type=email],
.page-id-78 .wpforms-form input[type=tel],
.page-id-78 .wpforms-form textarea,
.page-id-301 .wpforms-form, .page-id-410 .wpforms-form, .page-id-411 .wpforms-form,
.page-id-301 .wpforms-form, .page-id-410 .wpforms-form, .page-id-411 .wpforms-form,
.page-id-301 .wpforms-form, .page-id-410 .wpforms-form, .page-id-411 .wpforms-form,
.page-id-301 .wpforms-form, .page-id-410 .wpforms-form, .page-id-411 .wpforms-form{
border: 1px solid rgba(27, 42, 34, 0.15) !important;
border-radius: 8px !important;
background-color: #FFFFFF !important;
font-family: "Manrope", sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
padding: 10px 14px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.page-id-78 .wpforms-form input:focus,
.page-id-78 .wpforms-form textarea:focus,
.page-id-301 .wpforms-form, .page-id-410 .wpforms-form, .page-id-411 .wpforms-form,
.page-id-301 .wpforms-form, .page-id-410 .wpforms-form, .page-id-411 .wpforms-form{
border-color: #C5A869 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(197, 168, 105, 0.15) !important;
}
/* =========================================================
CONTACT PAGE 1-TO-1 PERFECT REPLICA STYLING (POST 78 & 301)
========================================================= */
.page-id-78, .page-id-301 {
background-color: #FAF8F5 !important;
}
.page-id-78 .wpforms-container, .page-id-301 .wpforms-container, .page-id-410 .wpforms-container, .page-id-411 .wpforms-container{
margin: 0 !important;
padding: 0 !important;
}
.page-id-78 .wpforms-form, .page-id-301 .wpforms-form, .page-id-410 .wpforms-form, .page-id-411 .wpforms-form{
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
}
.page-id-78 .wpforms-field-container, .page-id-301 .wpforms-field-container, .page-id-410 .wpforms-field-container, .page-id-411 .wpforms-field-container{
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
}
.page-id-78 .wpforms-field, .page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field{
padding: 0 !important;
margin: 0 !important;
}
.page-id-78 .wpforms-field-label, .page-id-301 .wpforms-field-label, .page-id-410 .wpforms-field-label, .page-id-411 .wpforms-field-label{
display: block !important;
font-family: 'Manrope', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: #1B2A22 !important;
margin-bottom: 8px !important;
}
.page-id-78 .wpforms-required-label, .page-id-301 .wpforms-required-label, .page-id-410 .wpforms-required-label, .page-id-411 .wpforms-required-label{
color: #C5A869 !important;
margin-left: 2px !important;
}
.page-id-78 .wpforms-field input[type="text"],
.page-id-78 .wpforms-field input[type="email"],
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field,
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field{
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background-color: #FFFFFF !important;
border: 1px solid rgba(27, 42, 34, 0.15) !important;
border-radius: 8px !important;
padding: 14px 16px !important;
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
line-height: 1.5 !important;
transition: all 0.2s ease-in-out !important;
}
.page-id-78 .wpforms-field textarea, .page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field{
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background-color: #FFFFFF !important;
border: 1px solid rgba(27, 42, 34, 0.15) !important;
border-radius: 8px !important;
padding: 14px 16px !important;
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
line-height: 1.5 !important;
transition: all 0.2s ease-in-out !important;
min-height: 140px !important;
}
.page-id-78 .wpforms-field input:focus,
.page-id-78 .wpforms-field textarea:focus,
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field,
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field{
background-color: #FFFFFF !important;
border-color: #C5A869 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(197, 168, 105, 0.2) !important;
}
.page-id-78 .wpforms-field input::placeholder,
.page-id-78 .wpforms-field textarea::placeholder,
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field,
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field{
color: #9CA3AF !important;
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
}
.page-id-78 .wpforms-submit-container, .page-id-301 .wpforms-submit-container, .page-id-410 .wpforms-submit-container, .page-id-411 .wpforms-submit-container{
margin-top: 16px !important;
padding: 0 !important;
width: 100% !important;
}
.page-id-78 button.wpforms-submit, .page-id-301 button.wpforms-submit, .page-id-410 button.wpforms-submit, .page-id-411 button.wpforms-submit{
width: 100% !important;
background-color: #141F19 !important;
color: #FBF9F5 !important;
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 14px 28px !important;
border-radius: 8px !important;
border: none !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
box-shadow: 0 4px 12px rgba(20, 31, 25, 0.12) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
letter-spacing: 0.02em !important;
}
.page-id-78 button.wpforms-submit:hover, .page-id-301 button.wpforms-submit, .page-id-410 button.wpforms-submit, .page-id-411 button.wpforms-submit{
background-color: #C5A869 !important;
color: #141F19 !important;
box-shadow: 0 6px 18px rgba(197, 168, 105, 0.25) !important;
}
/* Contact Card Hover and Shadow Micro-Interactions */
.page-id-78 .elementor-element-cnt_card_info,
.page-id-78 .elementor-element-cnt_col_right,
.page-id-78 .elementor-element-cnt_card_map,
.page-id-301 .elementor-element-cnt_card_info, .page-id-410 .elementor-element-cnt_card_info, .page-id-411 .elementor-element-cnt_card_info,
.page-id-301 .elementor-element-cnt_col_right, .page-id-410 .elementor-element-cnt_col_right, .page-id-411 .elementor-element-cnt_col_right,
.page-id-301 .elementor-element-cnt_card_map, .page-id-410 .elementor-element-cnt_card_map, .page-id-411 .elementor-element-cnt_card_map{
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
border: 1px solid rgba(27, 42, 34, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.page-id-78 .elementor-element-cnt_card_info:hover,
.page-id-78 .elementor-element-cnt_col_right:hover,
.page-id-78 .elementor-element-cnt_card_map:hover,
.page-id-301 .elementor-element-cnt_card_info, .page-id-410 .elementor-element-cnt_card_info, .page-id-411 .elementor-element-cnt_card_info,
.page-id-301 .elementor-element-cnt_col_right, .page-id-410 .elementor-element-cnt_col_right, .page-id-411 .elementor-element-cnt_col_right,
.page-id-301 .elementor-element-cnt_card_map, .page-id-410 .elementor-element-cnt_card_map, .page-id-411 .elementor-element-cnt_card_map{
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
border-color: rgba(27, 42, 34, 0.2) !important;
transform: translateY(-2px) !important;
}
/* WPForms Form Field Spacing and Margins */
.page-id-301 .wpforms-form, .page-id-410 .wpforms-form, .page-id-411 .wpforms-form, .page-id-78 .wpforms-form {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.page-id-301 .wpforms-field-container, .page-id-410 .wpforms-field-container, .page-id-411 .wpforms-field-container, .page-id-78 .wpforms-field-container {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field, .page-id-78 .wpforms-field {
padding: 0 !important;
margin: 0 !important;
}
.page-id-301 .wpforms-field-label, .page-id-410 .wpforms-field-label, .page-id-411 .wpforms-field-label, .page-id-78 .wpforms-field-label {
display: block !important;
font-family: 'Manrope', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: #1B2A22 !important;
margin-bottom: 6px !important;
}
.page-id-301 .wpforms-required-label, .page-id-410 .wpforms-required-label, .page-id-411 .wpforms-required-label, .page-id-78 .wpforms-required-label {
color: #C5A869 !important;
margin-left: 2px !important;
}
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field,
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field,
.page-id-78 .wpforms-field input[type="text"],
.page-id-78 .wpforms-field input[type="email"] {
width: 100% !important;
background-color: #FFFFFF !important;
border: 1px solid rgba(27, 42, 34, 0.15) !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
line-height: 1.5 !important;
box-sizing: border-box !important;
}
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field,
.page-id-78 .wpforms-field textarea {
width: 100% !important;
background-color: #FFFFFF !important;
border: 1px solid rgba(27, 42, 34, 0.15) !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
color: #1B2A22 !important;
line-height: 1.5 !important;
min-height: 130px !important;
box-sizing: border-box !important;
}
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field,
.page-id-301 .wpforms-field, .page-id-410 .wpforms-field, .page-id-411 .wpforms-field,
.page-id-78 .wpforms-field input:focus,
.page-id-78 .wpforms-field textarea:focus {
border-color: #C5A869 !important;
box-shadow: 0 0 0 3px rgba(197, 168, 105, 0.2) !important;
outline: none !important;
}
.page-id-301 .wpforms-submit-container, .page-id-410 .wpforms-submit-container, .page-id-411 .wpforms-submit-container,
.page-id-78 .wpforms-submit-container {
margin-top: 20px !important;
padding: 0 !important;
width: 100% !important;
}
.page-id-301 button.wpforms-submit, .page-id-410 button.wpforms-submit, .page-id-411 button.wpforms-submit,
.page-id-78 button.wpforms-submit {
width: 100% !important;
background-color: #141F19 !important;
color: #FBF9F5 !important;
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 14px 28px !important;
border-radius: 8px !important;
border: none !important;
cursor: pointer !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
transition: all 0.25s ease !important;
}
.page-id-301 button.wpforms-submit, .page-id-410 button.wpforms-submit, .page-id-411 button.wpforms-submit,
.page-id-78 button.wpforms-submit:hover {
background-color: #C5A869 !important;
color: #141F19 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment