/* Theme Name: Gaastra Beaver Builder Child Theme Theme URI: Parent Theme: https://www.wpbeaverbuilder.com Author: Dennis Gaastra - Gaastra GmbH Author URI: https://www.gaastra.gmbh Template: bb-theme Description: Gaastra Customized Child Theme for Beaver Builder Parent Theme Version: 2.0.0 License: (c) Gaastra GmbH - All Rights Reverved Images License: (c) Gaastra GmbH / Beaver Bulder - All Rights Reverved Edited by: Dennis Gaastra - Gaastra GmbH - www.gaastra.info */ /* --- [start] GOOGLE FONTS LOCAL - MODERN - PUT ME IN PLUGIN ---------------------------------------- */ /* Idworx ExtraBold - made by Dennis */ @font-face { font-family: 'Idworx'; font-style: normal; font-weight: 800; src: local('Idworx ExtraBold'), url('fonts/idworx-v1-extrabold.woff2') format('woff2'); font-display: swap; } /* Roboto */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/roboto-v20-latin-100.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 100; src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url('fonts/roboto-v20-latin-100italic.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url('fonts/roboto-v20-latin-300.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 300; src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url('fonts/roboto-v20-latin-300italic.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url('fonts/roboto-v20-latin-regular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: local('Roboto Italic'), local('Roboto-Italic'), url('fonts/roboto-v20-latin-italic.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/roboto-v20-latin-500.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 500; src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url('fonts/roboto-v20-latin-500italic.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/roboto-v20-latin-700.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('fonts/roboto-v20-latin-700italic.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; src: local('Roboto Black'), local('Roboto-Black'), url('fonts/roboto-v20-latin-900.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 900; src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url('fonts/roboto-v20-latin-900italic.woff2') format('woff2'); font-display: swap; } /* Roboto Mono */ @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 100; src: local('Roboto Mono Thin'), local('RobotoMono-Thin'), url('fonts/roboto-mono-v7-latin-100.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto Mono'; font-style: italic; font-weight: 100; src: local('Roboto Mono Thin Italic'), local('RobotoMono-ThinItalic'), url('fonts/roboto-mono-v7-latin-100italic.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 300; src: local('Roboto Mono Light'), local('RobotoMono-Light'), url('fonts/roboto-mono-v7-latin-300.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto Mono'; font-style: italic; font-weight: 300; src: local('Roboto Mono Light Italic'), local('RobotoMono-LightItalic'), url('fonts/roboto-mono-v7-latin-300italic.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; src: local('Roboto Mono'), local('RobotoMono-Regular'), url('fonts/roboto-mono-v7-latin-regular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto Mono'; font-style: italic; font-weight: 400; src: local('Roboto Mono Italic'), local('RobotoMono-Italic'), url('fonts/roboto-mono-v7-latin-italic.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 500; src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), url('fonts/roboto-mono-v7-latin-500.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto Mono'; font-style: italic; font-weight: 500; src: local('Roboto Mono Medium Italic'), local('RobotoMono-MediumItalic'), url('fonts/roboto-mono-v7-latin-500italic.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 700; src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url('fonts/roboto-mono-v7-latin-700.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Roboto Mono'; font-style: italic; font-weight: 700; src: local('Roboto Mono Bold Italic'), local('RobotoMono-BoldItalic'), url('fonts/roboto-mono-v7-latin-700italic.woff2') format('woff2'); font-display: swap; } /* Salsa */ @font-face { font-family: 'Salsa'; font-style: normal; font-weight: 400; src: local('Salsa-Regular'), url('fonts/salsa-v9-latin-regular.woff2') format('woff2'); font-display: swap; } /* --- N A V I G A T I O N --------------------------------------------------------------- */ /* F I X E D - T O P */ /* Undecorate Menu Items and allow less space between them */ nav.fl-page-nav a { text-decoration: none !important; padding-left:6px !important; padding-right:6px !important; } /* Spread out menu items to both sides */ nav.fl-page-nav .fl-page-nav-collapse{ display:block !important; } nav.fl-page-nav .fl-page-nav-collapse > ul { float:none; width:100%; display:flex; justify-content:space-between; } /* For not-small menu, put 'Bikes' first menu item more to the left */ @media (min-width: 769px) { nav.fl-page-nav .navbar-nav > li:first-child { margin-left: max(calc(50cqw - 50vw), -55px) !important; } } /* Social Icons for facebook and instagram as menue item */ a.nav-link[href*="facebook.com"]::after { content: url('data:image/svg+xml;utf8,'); width: 20px; height: 20px; top: 5px; position: relative; margin-bottom:-5px; } a.nav-link[href*="instagram.com"]:after { content: url('data:image/svg+xml;utf8, " />'); width: 20px; height: 20px; top: 5px; position: relative; margin-bottom:-5px; } li:has(> a.nav-link[href*="facebook.com"]) { transform: translateX(1.8cqw); } li:has(> a.nav-link[href*="instagram.com"]) { transform: translateX(-1.8cqw); } header.fl-page-header-fixed .fl-page-nav .navbar-nav > li:has(> a[href*="facebook.com"]), header.fl-page-header-fixed .fl-page-nav .navbar-nav > li:has(> a[href*="instagram.com"]) { display: none !important; } /* WMPL Flag is too high in menu */ nav.fl-page-nav img.wpml-ls-flag { padding-top:4px; margin-bottom:-4px; } .menu-item-language .sub-menu { width:60px !important; } /* Mini Cart Menu Item */ .fl-page-nav a.cart-contents{ margin-top:0px; height:100%; min-width:112.783px !important; background-image:url('/wp-content/themes/gaastra-bb-child/images/configurator/my-configurations-icon.svg'); background-repeat:no-repeat; background-position:center; } @media (max-width: 768px) { nav.fl-page-nav a.cart-contents { background-position: left center; } } .fl-page-nav a.cart-contents:hover, .fl-page-nav a.cart-contents:focus{ filter:drop-shadow(0 0 1px #fff); } /* Position Search icon proplerly */ .fl-page-nav-search { right:-30px;top:7px; } /* Recover Search for this range */ @media (min-width: 769px) and (max-width: 992px) { .fl-page-nav-collapse .fl-page-nav-search { display: flex !important; align-items: center; } } /* Keep header and dropdown menus above maps, fan, AR overlays */ .fl-page-header-fixed, .fl-page-header .fl-page-nav .sub-menu { z-index: 100000 !important; } /*--- S T I C K Y H E A D E R - W H E N S C R O L L I N G D O W N ------------ */ /* optimize logo/nav proportions - submenu position */ .fl-page-header-fixed .fl-page-header-row > .fl-page-logo-wrap{width:15%;} .fl-page-header-fixed .fl-page-header-row > .fl-page-fixed-nav-wrap{width:85%;} .fl-page-header-fixed .fl-page-nav .navbar-nav > li > .sub-menu{ margin-top:8px; } /* Sticky header: extend desktop layout down to 768–991 Beaver only does this from 992+ by default */ @media (min-width: 768px) and (max-width: 991px) { /* Force same row layout as desktop */ .fl-page-header-fixed.fl-page-nav-right .fl-page-header-row { display: table !important; } /* Make logo + nav sit side-by-side */ .fl-page-header-fixed.fl-page-nav-right .fl-page-logo-wrap, .fl-page-header-fixed.fl-page-nav-right .fl-page-fixed-nav-wrap { display: table-cell; float: none; vertical-align: middle; } .fl-page-header-fixed.fl-page-nav-right .fl-page-nav-wrap { border:unset; background:unset; } /* Fix logo spacing/alignment */ .fl-page-header-fixed.fl-page-nav-right .fl-page-header-logo { padding: 0; } } /* --- F O O T E R --------------------------------------------------------------------------- */ /* --- C O N T E N T ------------------------------------------------------------------------ */ /* H E A D I N G S */ /* Use our special idworx font for Headings 1-3 */ h1, h2, h3 { font-family: 'Idworx', sans-serif; font-weight: 800; } /* P A G E H E A D E R */ /* Make Page Title 20 from the top instead of 40, make it right-aligned, and remove bottom margin */ .fl-post-header { padding-top:20px !important; } .fl-post-header h1 { text-align: right; margin-bottom: 0; } /* News Posts; make text smaller and align left */ .single-post h1 { font-size:24px;text-align:left; } /* White letters over white background */ .white-on-white { background-color: rgba(0,0,0,0.5); } /* B I K E C A T A L O G P A G E S */ /* Reduce bloat */ .woocommerce ul.products, .woocommerce ul.products li.product { padding:0; margin:0;text-align: center; } /* Remove border around product images */ .woocommerce ul.products li.product a img { border: 0 !important; } /* Hide Procuct prices in DE+NL */ .woocommerce ul.products li.product.product-type-composite .price { display:none; } /* CATALOG PAGE: Top-align this column inside bottom-aligned Beaver Builder rows. */ .bb-top-align-column { align-self: flex-start; } /* SHOP PAGE: Use flex layout for each WooCommerce product list row. */ .woocommerce .page-description ul.products { display: flex; flex-wrap: wrap; align-items: stretch; } /* SHOP PAGE: Convert each product card into a vertical flex container. */ .woocommerce .page-description ul.products li.product { float: none; display: flex; flex-direction: column; justify-content: flex-end; } /* SHOP PAGE: Restore normal block layout for the product link wrapper. */ .woocommerce .page-description ul.products li.product .woocommerce-LoopProduct-link { display: block; } /* SHOP PAGE: Ensure product images behave consistently inside flex cards. */ .woocommerce .page-description ul.products li.product img { display: block; width: 100%; height: auto; } /* SHOP PAGE: Center-align product titles. */ .woocommerce .page-description ul.products li.product .woocommerce-loop-product__title { text-align: center; } /* SHOP PAGE: Prevent Configure buttons from stretching full width. */ .woocommerce .page-description ul.products li.product .button { align-self: center; width: auto; } /* C L I C K A B L E C O L U M S - PUT US IN A PLUGIN */ /* NOTE: JS has to be stored in Beaver Builder Editor -> Global Settings -> Javascript /* Clickable column hover effect */ .clickable-col .fl-col-content { transition: all .4s ease-in-out; overflow:hidden; } .clickable-col .fl-col-content:hover { transform: translateY(-8px); box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.7); } /* To stop the hover on child column */ .no-effect .fl-col-content:hover { transform: none; box-shadow: none; } /* Bottom-aligned buttons */ .equal-height-buttons { align-content: flex-end; flex: 1 1 0; display: grid; } /* Transparent photos in BB get a white background */ .white-bg-img img { background-color: white; border-radius: 30px; padding: 10px; } /* Bio Style Divs for BB columns */ .bio-div-green .fl-col-content { background-image: radial-gradient(at left bottom, #2d4200 0%, #008200 100%);border-radius: 30px; color:white;margin:20px;} .bio-div-blue .fl-col-content { background-image: radial-gradient(at left bottom, #2d0062 0%, #004d82 100%);border-radius: 30px; color:white;margin:20px;} .bio-div-silver .fl-col-content { background-image: radial-gradient(at left bottom, #d4d2d0 0%, #f0f2f4 100%);border-radius: 30px; color:black;margin:20px;} .bio-div-orange .fl-col-content { background-image: radial-gradient(at left bottom, #c174db 0%, #fbab4e 100%);border-radius: 30px; color:white;margin:20px;} .bio-div-nested .fl-col-content { background-image: none; border-radius: 0px; color:none;margin:0px;} /* --- R E D M E T A L L I C T U B E B U T T O N S (global) -------- */ :is( #copy-btn, button.gc-print-launch, p.buttons.noprint > button:not(.gc-print-launch), button.single_add_to_cart_button.composite_add_to_cart_button, a.button.product_type_composite.add_to_cart_button, .woocommerce-mini-cart__buttons.buttons > button, .woocommerce p.return-to-shop button, .woocommerce .button.wc-forward, button.fl-button ) { -webkit-appearance: none; appearance: none; display: inline-block; position: relative; overflow: hidden; text-decoration: none !important; cursor: pointer; border: 1px solid #5e0d0d !important; border-radius: 7px !important; padding: 12px 24px !important; color: #fff7f7 !important; font-weight: 600; letter-spacing: .35px; transition: background .2s ease, box-shadow .2s ease, border-color .2s ease; background: linear-gradient(to bottom, #2a0000 0%, #650000 10%, #a80000 24%, #e03232 42%, #ff6b6b 50%, #d61e1e 58%, #8d0000 76%, #350000 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 6px 8px rgba(255,255,255,.04), inset 0 -6px 10px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.18) !important; &::before, &::after { content: none !important; display: none !important; } &:hover { border-color: #8f1515 !important; background: linear-gradient(to bottom, #3a0000 0%, #950000 10%, #e00000 24%, #ff5a5a 42%, #ff9a9a 50%, #ff3a3a 58%, #b50000 76%, #4a0000 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 6px 8px rgba(255,255,255,.06), inset 0 -6px 10px rgba(0,0,0,.26), 0 4px 10px rgba(0,0,0,.22) !important; } &:active { background: linear-gradient(to bottom, #250000 0%, #6a0000 10%, #b00000 24%, #e02a2a 42%, #ff5c5c 50%, #c81818 58%, #820000 76%, #2f0000 100% ) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.25), inset 0 8px 14px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.16) !important; } img.emoji { height: 1em; vertical-align: middle; } } /* flatten Beaver Builder send button inner layer only */ button.fl-button :is(.fl-button-text, span, span.fl-button-text) { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; color: inherit !important; &::before, &::after { content: none !important; display: none !important; } } /* --- M I N I C A R T ------------------------------------------------------------------ */ /* Required for right: calculation for below are reference */ .fl-page-nav-container { container-type: inline-size; } /* Provide it same properies as sub-menu class */ .fl-page-nav .menu-item-cart .site-header-cart-dropdown { display:none; position:fixed; right: calc(50vw - 50cqw - 59px); top:auto; background-clip: padding-box; background-color: #333; border-top: 3px solid #999; font-size: 14px; float: none; list-style: none; padding: 10px 0 0 0; width: 300px; max-height: calc(100vh - 90px); overflow-y: auto; z-index: 1001; box-shadow: 0 1px 20px rgba(0,0,0,0.15); } .fl-page-nav .menu-item-cart:hover .site-header-cart-dropdown{display:block;} /* Adjust for scrolling header (> 992px, no search there) */ @media (min-width: 993px) { .fl-page-header-fixed .menu-item-cart .site-header-cart-dropdown { right: calc(50vw - 556px); text-align: center; margin-top: 8px; } } /* Circle around configurations count */ .fl-page-nav a.cart-contents .count{ padding-top: 2px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-width:24px; height:24px; line-height:20px; border-radius:50%; text-align:center; font-size:20px; color:#fff; background:#c62828; /* RED by default (0 bikes) */ } /* Green cirlce when configured bikes exist */ .fl-page-nav li.menu-item-cart.has-configurations a.cart-contents .count{ background:#2e7d32; } /* Hide for initial HTML load */ .fl-page-nav a.cart-contents .count:empty { display: none; } /* --- T A B L E S : E L E G A N T D A T A (global) ------------------------------------------- */ table.gear-ratio-chart { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; table-layout: auto; width: max-content; max-width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5rem 0 2rem; font-size: inherit; line-height: 1.35; background: #fff; border: 1px solid #d9dde2; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.06); } /* Optional but recommended: prevents layout jitter */ table.gear-ratio-chart { table-layout: auto; } /* Top heading row */ table.gear-ratio-chart thead th{ padding:.9rem .8rem; background:linear-gradient(to bottom, #343a40 0%, #25292e 100%); color:#fff; font-weight:700; text-align:center; border-right:1px solid rgba(255,255,255,.08); border-bottom:0; letter-spacing:.02em; white-space:nowrap; } table.gear-ratio-chart thead th:first-child{ text-align:left; padding-left:1rem; min-width:11.5rem; background:linear-gradient(to bottom, #2b3137 0%, #1f2328 100%); } /* Left heading cells */ table.gear-ratio-chart tbody th{ padding:.9rem 1rem; text-align:left; font-weight:700; color:#1f2a37; background:linear-gradient(to right, #f7f8fa 0%, #eef1f4 100%); border-right:1px solid #d9dde2; border-bottom:1px solid #e7eaee; white-space:nowrap; } /* Section-based variant: top-align rowspan section headings */ table.gear-ratio-chart.section-based tbody th[rowspan]{ vertical-align:top; } /* Data cells */ table.gear-ratio-chart tbody td{ padding:.85rem .75rem; text-align:center; color:#27313a; background:#fff; border-bottom:1px solid #e7eaee; border-right:1px solid #eef1f4; font-variant-numeric:tabular-nums; } /* Zebra striping */ table.gear-ratio-chart tbody tr:nth-child(even) td{ background:#eef2f6; /* ONLY CHANGE: was #fafbfc */ } /* Section-based variant: thick divider before each new section */ table.gear-ratio-chart.section-based tbody tr.section-start th, table.gear-ratio-chart.section-based tbody tr.section-start td{ border-top:4px solid #25292e; } /* No divider above the first section */ table.gear-ratio-chart.section-based tbody tr.section-start:first-child th, table.gear-ratio-chart.section-based tbody tr.section-start:first-child td{ border-top:0; } /* Section-based variant: left-align data columns (2, 3, …) */ table.gear-ratio-chart.section-based tbody td{ text-align:left; } /* Subtle hover */ table.gear-ratio-chart tbody tr:hover td, table.gear-ratio-chart tbody tr:hover th{ background:#f3f7fa; transition:background-color .14s ease; } /* Clean outer edges */ table.gear-ratio-chart thead th:last-child, table.gear-ratio-chart tbody td:last-child{ border-right:0; } table.gear-ratio-chart tbody tr:last-child th, table.gear-ratio-chart tbody tr:last-child td{ border-bottom:0; } /*--- S P E A K T O G E R R I T (global) ------------------------------------------ */ .header-widget-region { height:0px; } #speakto { width: 150px; margin-left: auto; margin-right: auto; } #speakto a { z-index: 900; position: fixed; bottom: -12px; text-align: center; color: white; background-color: #111; border: 3px solid white; border-radius: 4px; padding: 4px 6px 12px 6px; -webkit-box-shadow: 4px 4px 8px 4px rgba(0,0,0,0.41); -moz-box-shadow: 4px 4px 8px 4px rgba(0,0,0,0.41); box-shadow: 4px 4px 8px 4px rgba(0,0,0,0.41); } #speakto a:hover { bottom: -4px; } /*--- U N A L L O C A T E D ? -----------------------------------------------------------*/