/* ========================================================================== * Workshops, recepten en blog * * The Fire Station - child theme. Overgezet uit Customizer > Extra CSS * op 2026-09-17. Inhoud van dit bestand: * - Workshops, masterclasses en boekingen (15 regels) * - Recepten, blog en beveiligde pagina's (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. * ========================================================================== */ /* -------------------------------------------------------------------------- * Workshops, masterclasses en boekingen * -------------------------------------------------------------------------- */ .next-booking-date { padding: 6px 15px 6px 15px; background: rgba(255, 255, 255, 0.2); border: 1px solid #fff; border-radius: 30px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: block; width: fit-content; height: auto; position: absolute; top: 15px; text-transform: uppercase; line-height: 1; font-size: 0.9em; z-index: 9999; font-family: 'Manufaktur'; } .workshop-banner-date { font-size: 1em; line-height: 1; color: #ffffff; font-weight: 400; padding: 6px 10px 6px 10px; background: rgba(255, 255, 255, 0.2); border: 1px solid #fff; border-radius: 30px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .workshop-card .workshop-info { background: #181818; padding: 24px 20px; margin: 12px 0px; -webkit-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.4); box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.4); } .workshop-card .workshop-info .theme-button {vertical-align: middle;} .workshop-card .workshop-info p.price {margin-bottom: 0;} .workshops-row a.wpex-carousel-entry-img { padding-bottom: 100%; position: relative; display: block; height: 0; overflow: hidden; padding: 0 0 70% !important; } .workshops-row a.wpex-carousel-entry-img { padding-bottom: 100%; position: relative; display: block; height: 0; overflow: hidden; padding: 0 0 100%; } .product.product-type-booking #sticky-add-to-cart {display: none !important;} .merk-carousel a.wpex-carousel-entry-img {padding: 0 0 100% !important;} @media only screen and (min-width: 769px) { .workshop-card {min-height: 370px;} } @media only screen and (max-width: 768px) { .workshop-card {min-height: 340px;} .workshop-card .workshop-info {padding: 15px 0; margin: 15px 0; gap: 12px;} .workshop-card .workshop-info .next-booking-date {font-size: 0.85em; padding: 6px; width: auto;} } .wpex-post-cards-entry .workshop-card {transition: .3s linear;} .wpex-post-cards-entry .workshop-card:hover {box-shadow: 0 0 25px rgba(100, 100, 100, .3); -webkit-box-shadow: 0 0 25px rgba(100, 100, 100, .3);} /* -------------------------------------------------------------------------- * Recepten, blog en beveiligde pagina's * -------------------------------------------------------------------------- */ .recept-influencer { padding: 20px 20px 0px 20px; border-width: 3px; background: #272727; box-shadow: 0px 5px 10px 3px rgb(153 153 153 / 20%); -webkit-box-shadow: 0px 5px 10px 3px rgb(153 153 153 / 20%); } .recept-influencer img { width: 42%; display: block; margin: 0 auto; border-radius: 100px; border: 2px solid #585858; } .recept-influencer .vcex-teaser-heading strong {color: #CE9B4A;} .recept-influencer .vcex-teaser-button-wrap:after { content: 'Wil jij ook Guest Griller worden bij The Fire Station? Neem contact op!'; font-family: "Quattrocento Sans"; color: #fff; display: block; font-size: 18px; margin-top: 12px; line-height: 1.5em; } .recept-influencer .theme-button {transition: .3s; background: linear-gradient(72.44deg, #ff7a00 11.92%, #ff0169 51.56%, #d300c5 85.69%);} .recept-influencer .theme-button:hover {color: #ff7a00; background: #fff;} .password-protected-row {display: none;} .password-protection-wrapper {background: #181818; width: fit-content; margin-top: 24px; padding: 32px 48px;} .password-input-wrapper { position: relative; display: block; align-items: center; width: 100%; float: left; margin-right: 12px; height: 60px; } .toggle-password-visibility { position: absolute; top: 5px; right: 5px; background: none; border: none; cursor: pointer; padding: 5px; color: #666; display: flex; align-items: center; justify-content: center; transition: .3s; } .toggle-password-visibility:hover {color: #333;} .toggle-password-visibility .material-icons {font-size: 20px;} .password-protection-wrapper .unlock-button { padding: 10px 18px; font-size: 16px; font-family: 'Manufaktur'; text-transform: uppercase; background: #CE9B4A; color: white; border: none; cursor: pointer; transition: .3s; } .password-protection-wrapper button:hover {background: #b38a48;} .password-error {color: #DA3034; margin-top: 10px; display: none;} .recept-row .vc_col-sm-4>.vc_column-inner>.wpb_wrapper {padding: 30px; background: #181818;} .recept-row .vc_col-sm-8 .vc_col-sm-4>.vc_column-inner>.wpb_wrapper {padding: 0;} .recept-row .vc_col-sm-4>.vc_column-inner>.wpb_wrapper li {font-size: 16px;} .boodschappenlijstje {padding: 0 !important; margin-bottom: 24px;} .boodschappenlijstje ul:not(.none), .tools-benodigdheden ul {list-style: none !important; margin-left: 0px !important; position: relative; display: block !important;} .boodschappenlijstje ul:not(.none) li, .tools-benodigdheden ul li {position: relative; margin-bottom: 15px; padding-left: 30px;} .boodschappenlijstje ul:not(.none) li:before { content: ''; display: block; border: 1px solid #ccc; height: 15px; width: 15px; position: absolute; top: 8px; left: 0; } .boodschappenlijstje li:after { content: ''; display: block; height: 1px; width: 100%; background: #ccc; position: absolute; left: 0; bottom: -7.5px; opacity: 0.2; } .tools-benodigdheden ul li:before { content: ''; display: block; border: 1px solid #ccc; height: 15px; width: 15px; position: absolute; top: 8px; left: 0; } .tools-benodigdheden ul li:after { content: ''; display: block; height: 1px; width: 100%; background: #ccc; position: absolute; left: 0; bottom: -7.5px; opacity: 0.2; } .recept-card .recept-informatie { background: #181818; padding: 18px 18px 14px 18px; margin: 12px 0px; -webkit-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.4); box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.4); } .recept-card .recept-informatie .vcex-icon-wrap {padding: 12px;} .recept-card .recept-informatie .theme-button {vertical-align: middle;} .recept-card .recept-informatie .vc_col-sm-12>.vc_column-inner>.wpb_wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 24px; justify-content: space-between; } .recept-card .recept-informatie .vc_col-sm-12>.vc_column-inner>.wpb_wrapper .vcex-page-title {grid-column: span 2 / span 2;} .recept-card .recept-informatie .vc_col-sm-12>.vc_column-inner>.wpb_wrapper .vcex-custom-field {font-size: .9em;} .accessoires-row .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper {padding: 24px; background: #181818;} @media only screen and (min-width: 769px) { .header-recepten .wpex-flex {gap: 32px;} .title-separator-row .flexwrapper.vc_column_container>.vc_column-inner>.wpb_wrapper {display: flex; justify-content: space-between;} .recept-card {min-height: 350px;} } @media only screen and (max-width: 768px) { .password-protection-wrapper {background: #181818; width: auto; margin-top: 24px; padding: 24px;} .password-input-wrapper {width: 100%; margin: 0 auto; height: 40px;} .password-protection-wrapper .unlock-button {padding: 10px; margin-top: 12px;} .header-recepten .wpex-flex {align-items: center !important;} .recept-card {min-height: 340px;} .recept-card .recept-informatie {padding: 15px 0; margin: 15px 0; gap: 12px;} } .wpex-post-cards-entry .recept-card {transition: .3s linear;} .wpex-post-cards-entry .recept-card:hover {box-shadow: 0 0 25px rgba(100, 100, 100, .3); -webkit-box-shadow: 0 0 25px rgba(100, 100, 100, .3);} .kerst-recept-row {padding-top: 100px; padding-bottom: 20px;}