/* ========================================================================== * Basis, header en navigatie * * The Fire Station - child theme. Overgezet uit Customizer > Extra CSS * op 2026-09-17. Inhoud van dit bestand: * - Basis - typografie, knoppen en hulpklassen (54 regels) * - Header, topbar, mega-menu en kruimelpad (56 regels) * - Homepagina (5 regels) * - Snelnavigatie, sticky knoppen en USP-blokken (44 regels) * * LET OP: deze bestanden laden laat in de , op exact de plek waar de * oude "Extra CSS" stond. Ze overschrijven daarom zowel het Total-thema als * style.css en de andere stylesheets van dit child theme. Zet nieuwe regels * bij voorkeur in style.css; gebruik dit bestand alleen om te overschrijven. * ========================================================================== */ /* -------------------------------------------------------------------------- * Basis - typografie, knoppen en hulpklassen * -------------------------------------------------------------------------- */ ul.none {list-style: none !important; margin-left: 0px !important; position: relative; display: block !important;} ul.none li {position: relative; padding-left: 25px; padding-bottom: 5px;} ul.none li:before { content: ''; display: block; width: 15px; height: 1px; background: #333; position: absolute; left: 0px; top: 10px; } ul.none li a {text-decoration: underline !important; color: #333;} ul.none ul li {padding-left: 0;} ul.none ul li:before {display: none;} body.wp-core-ui #chat-widget-container {display: none !important;} .wobble-on-scroll img {transition: transform 0.2s ease-out; will-change: transform;} .theme-button {transition: .3s;} body:not(.admin-bar) .admin-block {display: none;} .icon-btn {padding: 6px 6px 6px 16px; transition: .3s;} .icon-btn > .theme-button-inner {gap: 8px;} .icon-btn .theme-button-icon-right {height: 30px; width: 30px; border-radius: 30px; border: 2px solid #fff;} .icon-btn .theme-button-icon-right span { margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon-btn svg {transition: .3s;} .icon-btn:hover svg {fill: #27abc3;} .icon-only-btn .theme-button-inner {font-size: 0; gap: 0 !important;} .icon-only-btn .theme-button-icon-right span {font-size: 16px;} .icon-only-btn {padding: 6px 16px 6px 16px; vertical-align: middle; float: right;} .vcex-ib-button-inner.theme-button {position: absolute; right: 50px; bottom: 50px;} .sep-heading h2 { margin: 0 0 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; line-height: normal; } .sep-heading h2:after { content: ""; height: 3px; background: #CE9B4A; display: block; flex-grow: 1; } .sep-heading h3 { margin: 0 0 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; line-height: normal; } .sep-heading h3:after { content: ""; height: 3px; background: #CE9B4A; display: block; flex-grow: 1; } h3.sep-heading:before { content: ""; height: 3px; background: #CE9B4A; display: block; flex-grow: 0.5; } h3.sep-heading { margin: 0 0 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; line-height: normal; } h3.sep-heading:after { content: ""; height: 3px; background: #CE9B4A; display: block; flex-grow: 0.5; } ul.usp-list {list-style: none !important; margin: 0;} ul.usp-list li { position: relative; font-family: 'Manufaktur'; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; color: #CE9B4A; } ul.usp-list li:before {content: '🔥';} ul.usp-list li a {text-decoration: underline !important; color: #333 !important;} ul.usp-list ul li {padding-left: 0;} ul.usp-list ul li:before {display: none;} ul.manufaktur { list-style: none !important; margin-left: 0px !important; position: relative; display: block !important; font-family: 'Manufaktur'; text-transform: uppercase; letter-spacing: 0.5px; } ul.manufaktur li {position: relative; padding-left: 25px; padding-bottom: 5px;} ul.manufaktur li:before { content: ''; display: block; width: 15px; height: 2px; background: #fff; position: absolute; left: 0px; top: 15px; } ul.manufaktur li a {text-decoration: underline !important; color: #333 !important;} ul.manufaktur ul li {padding-left: 0;} ul.manufaktur ul li:before {display: none;} @media only screen and (min-width: 769px) { .page-subheading {margin-bottom: 40px; font-size: 1em;} .page-subheading h2 {font-size: 35px; line-height: 1; margin-top: 0;} } @media only screen and (max-width: 768px) { .offerteknop {margin-left: 0; margin-top: 12px;} .usp-list {text-align: left !important;} .usp-list li {min-height: 40px !important; text-align: left !important;} .usp-list li:before {float: left !important; min-height: 40px !important; margin-left: 12px !important;} } body:not(.admin-bar) .offerteknop {display: none;} .fixed-position {margin: 0; height: 100%; overflow: hidden;} @media only screen and (max-width: 768px) { .tekst-button-row {margin-top: 0 !important;} .page-subheading h2 {font-size: 24px !important;} .page-subheading {margin-bottom: 0 !important;} .page-subheading p {font-size: 16px !important;} } .alert_container {width: 50%;} @media (max-width: 1000px) { body {padding-top: 0px;} } .title-row {margin-top: 0;} /* -------------------------------------------------------------------------- * Header, topbar, mega-menu en kruimelpad * -------------------------------------------------------------------------- */ #ocs-voorwaarden-levering-montage {z-index: 9999999;} /* CSS for the searchform input */ .searchform--classic .searchform-input.has-animated-placeholder::placeholder {color: transparent;} .searchform--classic .animated-placeholder-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; padding-left: 16px; padding-right: 16px; color: #fff; font-size: inherit; font-family: inherit; white-space: nowrap; overflow: hidden; pointer-events: none; z-index: 1; width: 85%; font-size: 17px; } .searchform--classic .animated-placeholder-text {animation: smoothSlide 8s infinite ease-in-out;} .mega-menu-item.manufaktur .mega-menu-link {font-family: 'Manufaktur' !important;} .mega-menu-item:not(.mega-menu-item-has-children) .mega-menu-link {font-family: 'Manufaktur' !important;} .ocs-slidebar .wpb_text_column ul {list-style: inside;} .sfm-menu-item.sfm-submenu-visible > a span {color: #CE9B4A !important;} .page-header-title h1 {margin-top: 0;} .dfd-mobile {z-index: 9999999999 !important;} .breadcrumbs-product-cat {display: none;} .home .header-row h2.header-slogan:before { content: '' !important; background: url(/wp-content/uploads/2025/01/The-Fire-Station-Logo-bovenkant-01.svg) no-repeat center center; background-size: contain; display: block; width: auto; height: 35px; margin-bottom: 12px; } .home .header-row h2.header-slogan {margin-top: 0 !important;} .home .header-section .vcex-teaser h2 {transition: .3s;} .home .header-section .vcex-teaser:hover h2 {color: #CE9B4A;} .home .header-section .vcex-teaser-content {padding: 0 !important;} .home .header-section .vcex-teaser-media { height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .home .header-section .header-cat-cta-row {top: 24px;} .breadcrumb-trail {font-size: 1.2em;} .sfm-rollback {z-index: 899998;} .menu-container {display: flex; flex-direction: column; align-items: center; transition: all 0.4s ease-in-out;} .toggle-menu { position: absolute; left: 0; top: -25px; background: #181818; border: none; font-size: 20px; cursor: pointer; color: #fff; line-height: normal; transition: all 0.3s ease-in-out; } .collapsed .menu-container {display: block; width: 65px;} .collapsed .toggle-menu { position: relative; right: unset; top: unset; font-family: 'Manufaktur'; text-transform: uppercase; font-size: 18px; } .btns-menu-mobile { position: sticky; position: -webkit-sticky; bottom: 0; left: 0; z-index: 999999999; } @media only screen and (min-width: 769px) { .home .header-row h2.header-slogan {font-size: 2em !important;} .page-header-title h1 {font-size: 55px; margin-bottom: 15px !important;} } @media only screen and (max-width: 768px) { .home .header-row .vcex-shortcode.visible-phone {width: 90%; margin: 0 auto;} .home .header-row .vcex-shortcode.visible-phone .wpex-icon svg {fill: #fff;} .home .header-section .vcex-teaser h2 {font-size: 22px !important;} .toggle-menu {right: unset; top: 3px; left: 50%; transform: translatex(-50%);} } .header2024-topbar { text-align: center; font-family: 'Manufaktur'; text-transform: uppercase; font-size: 15px; line-height: normal; padding: 6px 0px; } .header2024-topbar .theme-txt-link {position: relative; top: 4px;} .header2024-logo_mobile .vcex-image-img {width: 178px;} #sfm-sidebar .sfm-menu li.sfm-menu-item-47600 {background: #C51000;} #sfm-sidebar .sfm-menu li.sfm-menu-item-47600 a {color: #fff !important;} #sfm-sidebar .sfm-menu li.sfm-menu-item-47600 a::before { content: '' !important; background: url(/wp-content/uploads/2024/03/Group-10-1.png) no-repeat center center; background-size: cover; position: absolute; display: block; width: 40px; height: 40px; z-index: 1; right: 0; } #sfm-sidebar .sfm-menu li.sfm-menu-item-59947::after { content: 'Nieuw!'; display: block; width: fit-content; height: auto; padding: 4px 8px; background: #63B909; position: absolute; left: 110px; top: 14px; text-transform: uppercase; line-height: 1; font-size: 0.8em; color: #fff; font-family: 'Manufaktur'; } .sfm-body-pushed {margin: 0; height: 100%; overflow: hidden;} @media only screen and (min-width: 769px) { .header2024-logo_mobile {display: none;} .mobile_menu-toggle {display: none;} .header2024-logo_desktop {display: block;} } @media only screen and (max-width: 768px) { .header2024-logo_mobile {display: block;} .mobile_menu-toggle {position: absolute;} .header2024-logo_desktop {display: none;} .home .header-row {padding-top: 24px !important; padding-bottom: 0 !important; min-height: 230px !important;} .header2024 .vc_col-sm-1 {width: fit-content; position: absolute; right: 10%;} .header2024-inner {top: -10px; max-height: 60px;} .page-header-title h1 {font-size: 36px !important;} } /* Top-bar USP */ .logged-in #top-bar .cb-top-bar-flex-container { width: 100%; display: contents; position: fixed; top: 0; left: 0; z-index: 999999999; padding-top: 8px; padding-bottom: 14px; line-height: 20px; } /* Top-bar USP */ #top-bar .cb-top-bar-flex-container { width: 100%; display: flex; position: fixed; top: 0; left: 0; z-index: 999999999; padding-top: 8px; padding-bottom: 14px; line-height: 20px; } .cb-top-bar-flex-container>div {margin: 0; width: 100dvw;} .wpex-fs-overlay .wpex-close {right: 0 !important;} @media (max-width: 1000px) { #top-bar .cb-top-bar-flex-container {display: none;} .cb-top-bar-plugin-center {display: none;} } .vcex-breadcrumbs {display: none;} /* -------------------------------------------------------------------------- * Homepagina * -------------------------------------------------------------------------- */ .home_merken-slider img {height: 250px; width: 250px;} .home_merken-slider .wpex-carousel-entry-media {box-shadow: unset; margin-bottom: 0;} .home_merken-slider .wpex-carousel-entry-media a { display: block; position: relative; width: 100%; height: 100%; z-index: 1; } .home_merken-slider .wpex-carousel-slide:hover:after {transform: rotate(-20deg);} .home_merken-slider .wpex-carousel-slide:after { content: ''; background: url(/wp-content/uploads/2025/03/Group-1357.svg) no-repeat center center; background-size: contain; height: 40px; width: 40px; border-radius: 30px; display: block; position: absolute; right: 20px; bottom: 20px; transition: .3s; z-index: 0; } /* -------------------------------------------------------------------------- * Snelnavigatie, sticky knoppen en USP-blokken * -------------------------------------------------------------------------- */ /* ** MINI MENU LINKSONDER - STICKY BUTTONS ** */ body:not(.parent-pageid-25112) .sticky-buttons {display: none;} .sticky-buttons .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper {display: grid; gap: 8px; grid-template-columns: auto;} .sticky-buttons { position: fixed; bottom: 50%; transform: translateY(50%); left: 0; display: flex; flex-direction: column; align-items: center; padding: 6px; background: #181818; float: left; z-index: 899999; transition: all 0.4s ease-in-out; } .sticky-buttons a {font-size: 14px; padding: 8px;} .sticky-buttons a#site-scroll-top-alt {display: block; width: 28px; height: 41px; text-align: center;} .sticky-buttons a#site-scroll-top-alt .wpex-icon {position: absolute; top: 50%; transform: translate(-50%, -50%);} .sticky-buttons .wpex-template-shortcode {display: flex; flex-direction: column; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;} .collapsed { width: auto; height: auto; padding: 6px; background: #181818; opacity: 1; border-right: 4px solid #CE9B4A; left: 0; } .collapsed .wpex-template-shortcode {opacity: 0; visibility: hidden; height: 0; overflow: hidden;} #sticky-buttons {position: sticky; top: 500px; z-index: 9999999999; display: inline-block;} #sticky-buttons .vcex-flex-container {padding: 24px; background: #181818;} /* * / ** ANDERE MODELLEN ONDERAAN ** */ .snel-naar-nav {background: #181818; padding: 24px;} .snel-naar-nav h2 {border-block-end: 3px solid #CE9B4A !important; color: #CE9B4A;} .snel-naar-nav .wpex-carousel .owl-prev, .snel-naar-nav .wpex-carousel .owl-next {background-color: transparent !important; height: 20px; width: 20px; line-height: 20px;} .snel-naar-nav-card {padding: 12px; background: #181818;} .snel-naar-nav-card, .snel-naar-nav-card h3 {transition: .3s;} .snel-naar-nav-card:hover {background: #0B0B0B;} .snel-naar-nav-card:hover h3 {color: #CE9B4A;} .mogelijkheden-row .mogelijkheden-col > .vc_column-inner > .wpb_wrapper {display: flex; flex-direction: column; gap: 12px;} .mogelijkheden-row-alt .mogelijkheden-col > .vc_column-inner > .wpb_wrapper {display: flex; flex-direction: column; gap: 12px;} .mogelijkheden-row-alt .mogelijkheden-col > .vc_column-inner > .wpb_wrapper p {color: #fff;} .mogelijkheden-row .vcex-flex-container, .mogelijkheden-row-alt .vcex-flex-container {flex-wrap: wrap;} .mogelijkheden-row .vcex-teaser {background: #0B0B0B;} .mogelijkheden-row-alt .vcex-teaser {background: #3e3e3e;} .mogelijkheden-row-alt .vcex-teaser p {color: #fff;} .mogelijkheden-row .vcex-teaser, .mogelijkheden-row-alt .vcex-teaser {padding: 24px; flex: 1 0 23%;} .mogelijkheden-row.five-col .vcex-teaser, .mogelijkheden-row-alt.five-col .vcex-teaser {padding: 24px; flex: 1 0 18%;} .mogelijkheden-row .vcex-teaser .vcex-teaser-heading, .mogelijkheden-row-alt .vcex-teaser .vcex-teaser-heading {color: #CE9B4A; font-size: 26px;} .mogelijkheden-row .vcex-teaser h6, .mogelijkheden-row-alt .vcex-teaser h6 {margin-top: 12px;} .naar-winkel-blok { background: #181818; padding: 64px; margin-top: 30px; position: relative; color: #fff; margin-left: 0; margin-right: 0; } .naar-winkel-blok::before { position: absolute; content: ''; display: block; top: 32px; left: 32px; bottom: 32px; right: 32px; border: solid 4px #ce9b4a; opacity: .7; } .naar-winkel-blok h4 { font-family: 'Manufaktur'; font-style: italic; color: #CE9B4A; width: fit-content; padding: 12px 12px 12px 0; margin-bottom: 8px !important; font-size: 1.1em; } @media (max-width: 959px) { .naar-winkel-blok {padding: 40px;} .naar-winkel-blok::before {top: 20px; left: 20px; bottom: 20px; right: 20px;} .naar-winkel-blok .vc_col-sm-9 {margin-bottom: 12px;} } @media only screen and (min-width: 769px) { .sticky-buttons .wpb_raw_html {display: none;} .snel-naar-nav h2 {width: 25%;} } @media only screen and (max-width: 768px) { .mogelijkheden-row, .mogelijkheden-row-alt {flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory;} .mogelijkheden-row .mogelijkheden-col, .mogelijkheden-row-alt .mogelijkheden-col {flex: 0 0 82%; scroll-snap-align: start;} .mogelijkheden-row .vcex-teaser .vcex-teaser-heading, .mogelijkheden-row-alt .vcex-teaser .vcex-teaser-heading {font-size: 30px !important;} .sticky-buttons {bottom: 0; width: 100%; padding: 36px 12px 16px 12px;} .sticky-buttons .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper {grid-template-columns: auto auto auto auto; align-items: center;} .sticky-buttons.collapsed { width: auto; bottom: 12px; right: 0; left: unset; padding: 8px; border-right: 0; border-left: 4px solid #CE9B4A; } .snel-naar-nav h2 {font-size: 24px !important;} }