; the browser closes the
before it and leaves an empty one after it. */ body.login #login form p:empty { display: none; } body.login form .asenha-2fa-resend-btn { justify-content: center; margin: 0 !important; width: 100%; } /* Messages above the form (errors, "check your e-mail"): in line with the form, the field's radius, the site's text; the information mark in the site's colour (errors and success keep core's red and green). */ body.login #login :is(#login_error, .message, .notice, .success) { border-radius: var(--bk-field-border-radius); box-shadow: none; color: inherit !important; font-size: var(--bk-font-size-xs); margin: var(--bk-card-padding-block) var(--bk-card-padding-inline) 0; } body.login #login :is(.message, .notice-info) { border-left-color: var(--contrast); } /* Links under the form: the site's text links, underlined. Also ASE's "Having problems?" block on the two-factor screens. */ body.login #login :is(#nav, #backtoblog, .privacy-policy-page-link, .backup-methods-wrap) { font-size: var(--bk-font-size-xs); margin: 0 0 var(--bk-field-margin-bottom) !important; padding: 0 var(--bk-card-padding-inline); text-align: center; } body.login #login :is(#nav, #backtoblog, .privacy-policy-page-link, .backup-methods-wrap):last-child { margin-bottom: 0 !important; } body.login #login :is(#nav, #backtoblog, .privacy-policy-page-link, .backup-methods-wrap) a { color: inherit !important; text-decoration: var(--bk-link-text-decoration) !important; text-decoration-thickness: var(--bk-link-text-decoration-thickness); text-underline-offset: var(--bk-link-text-underline-offset); } /* ASE's "Having problems?" block: no box of its own (ASE sets it with !important), its question in the label weight. */ body.login #login .backup-methods-wrap { background: transparent !important; border-radius: 0 !important; padding: 0 var(--bk-card-padding-inline) !important; row-gap: var(--bk-field-margin-bottom); } /* The question and each link one line apart, as the links under it (ASE stacks them in flex columns). */ body.login #login .backup-methods-wrap ul { row-gap: var(--bk-field-margin-bottom); } body.login #login .backup-methods-wrap > p { font-weight: var(--bk-label-font-weight); margin: 0; } body.login #login .backup-methods-wrap :is(ul, li) { margin: 0; } /* The Style Book's ul and ol rules would give the list a text size of its own: it takes the block's. */ body.login #login .backup-methods-wrap ul { font: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; } /* Global WPForms list reset for checkbox and radio style fields */ .wpforms-container .wpforms-form .wpforms-field :is(ul, ol) { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* Reset list items as well */ .wpforms-container .wpforms-form .wpforms-field li { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* WPForms order summary: room for the quantity */ .wpforms-container .wpforms-order-summary-container table.wpforms-order-summary-preview tr th.wpforms-order-summary-item-quantity { width: 12ch; } /* Links in WPForms HTML fields and in choice labels: the text colour, underlined */ div.wpforms-container .wpforms-form .wpforms-field-html a, div.wpforms-container .wpforms-form .wpforms-field-label-inline a { color: inherit; text-decoration: underline; } /* WPForms star ratings */ .wpforms-field-rating-items { opacity: 1 !important; fill: var(--bk-field-rating-color) !important; } /* WooCommerce single-product add to basket form. Rendered by [bk_add_to_cart_form] in snippet 51147. The add-to-basket button itself is already covered by the button base rule above via .woocommerce button.button, so only the attribute picker is styled here. Declarations mirror the WPForms control rule, following the same duplication pattern used for the Choices.js fields. */ /* Woo renders the attribute picker as a legacy table. Flatten it so the label and the dropdown stack like every other field on the site. */ .woocommerce .variations_form table.variations, .woocommerce .variations_form table.variations tbody, .woocommerce .variations_form table.variations tr, .woocommerce .variations_form table.variations th.label, .woocommerce .variations_form table.variations td.value { display: block !important; width: 100% !important; border: none !important; padding: 0 !important; text-align: left !important; } .woocommerce .variations_form table.variations { margin: 0 0 var(--bk-field-margin-bottom) !important; } /* Attribute label, matched to .wpforms-field-label */ .woocommerce .variations_form table.variations th.label label { background-color: var(--bk-field-label-background-color) !important; border: none !important; color: var(--bk-field-label-color) !important; display: block !important; font-family: inherit !important; font-size: var(--bk-field-font-size) !important; line-height: var(--bk-field-line-height) !important; padding: 0 !important; margin-bottom: var(--bk-field-margin-bottom) !important; } /* Attribute dropdown */ .woocommerce .variations_form select { background-color: var(--bk-field-background-color) !important; border-width: var(--bk-field-border-width) !important; border-style: var(--bk-field-border-style) !important; border-color: var(--bk-field-border-color) !important; border-radius: var(--bk-field-border-radius) !important; color: var(--bk-field-color) !important; font-family: inherit !important; font-size: var(--bk-field-font-size) !important; font-weight: var(--bk-field-font-weight) !important; line-height: var(--bk-field-line-height) !important; font-style: var(--bk-field-font-style) !important; letter-spacing: var(--bk-field-letter-spacing) !important; text-decoration: var(--bk-field-text-decoration) !important; padding: var(--bk-field-padding-block) var(--bk-field-padding-inline) !important; width: 100% !important; max-width: 100% !important; } /* "Clear" reset link, shown once an option is chosen */ .woocommerce .variations_form .reset_variations { color: var(--bk-field-label-color) !important; display: inline-block !important; font-size: var(--bk-field-font-size) !important; line-height: var(--bk-field-line-height) !important; margin-top: var(--bk-field-gap) !important; } /* Selected-variation panel: price and availability */ .woocommerce .variations_form .single_variation_wrap .woocommerce-variation { margin-bottom: var(--bk-field-margin-bottom) !important; } /* Field hover: the tokens hold the resting values on this site, so a next project can change them here. */ .bkq-configurator__field :is(input, select, textarea):hover, div.wpforms-container .wpforms-form :is(input[type="email"], input[type="number"], input[type="tel"], input[type="text"], input[type="url"], select, textarea):hover { background-color: var(--bk-field-background-color-hover) !important; border-color: var(--bk-field-border-color-hover) !important; color: var(--bk-field-color-hover) !important; } /* Placeholders: brand dark grey instead of the browser default (readable on the copper footer too) */ .wpforms-container input::placeholder, .wpforms-container textarea::placeholder, .bkq-configurator__field :is(input, textarea)::placeholder { color: var(--bk-field-placeholder-color) !important; opacity: 1; } /* Buying buttons (product page, cart, checkout) read the tertiary colour set, the filled button. Only the primary colour tokens are remapped; the button base rule above does the work. */ :is(.single_add_to_cart_button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button) { --bk-button-color: var(--bk-button-color-tertiary); --bk-button-color-hover: var(--bk-button-color-tertiary-hover); --bk-button-background-color: var(--bk-button-background-color-tertiary); --bk-button-background-color-hover: var(--bk-button-background-color-tertiary-hover); --bk-button-border-color: var(--bk-button-border-color-tertiary); --bk-button-border-color-hover: var(--bk-button-border-color-tertiary-hover); } /* WooCommerce's layout CSS loads only on its own pages (account) and its ".woocommerce-page img" beats the Global Style .bk-header__logo: the same two values, one class stronger. */ :is(.woocommerce, .woocommerce-page) .bk-header__logo { height: var(--bk-size-250-125); max-width: none; } /* Complianz obfuscates e-mail addresses with a hidden decoy that only its own document CSS hides. */ .cmplz-fmail-domain { display: none !important; } /* Cookie Policy (Complianz): long cookie names may break, or they stretch the column and the page once a dropdown is open. */ .cmplz-document .cookies-per-purpose * { overflow-wrap: anywhere; } /* Account buttons (Thijs 30/10/2026): the secondary set, which the account section (style .bk-section--account) gives a dark border at rest; an arrow before the label, like the "→ " of the other buttons. */ .bk-account__woocommerce :is(.woocommerce-Button, .woocommerce a.button, .woocommerce-address-fields p button.button) { --bk-button-color: var(--bk-button-color-secondary); --bk-button-color-hover: var(--bk-button-color-secondary-hover); --bk-button-background-color: var(--bk-button-background-color-secondary); --bk-button-background-color-hover: var(--bk-button-background-color-secondary-hover); --bk-button-border-color: var(--bk-button-border-color-secondary); --bk-button-border-color-hover: var(--bk-button-border-color-secondary-hover); } .bk-account__woocommerce :is(.woocommerce-Button, .woocommerce a.button, .woocommerce-address-fields p button.button)::before { content: "→" / ""; } /* Account notices with a button (Thijs 30/10/2026): text first, the button after it (beside the text when it fits, else below) instead of WooCommerce's float, and the label may wrap, so on a phone neither squeezes the text nor overflows. The clearfix ::after would be an empty flex item. */ .bk-account__woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error):has(> a.button) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bk-row-gap) var(--bk-column-gap); } .bk-account__woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error):has(> a.button)::after { display: none; } .bk-account__woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) > a.button { order: 1; float: none; white-space: normal !important; text-wrap: wrap !important; } /* Account form headings and spacing (Thijs 30/10/2026): WooCommerce's fieldset legend ("Wachtwoordwijziging") takes the h2 typography, like the account h2s, and a new section's distance; the submit row keeps the row gap from the last field. */ .bk-account__woocommerce form fieldset { margin-top: var(--bk-heading-margin-bottom); } .bk-account__woocommerce form legend { font-family: var(--bk-heading-font-family); font-size: var(--bk-font-size-xxl); letter-spacing: var(--bk-heading-letter-spacing); line-height: var(--bk-heading-line-height); margin-bottom: var(--bk-heading-margin-bottom); } .bk-account__woocommerce form > p:has(> button[type="submit"]) { margin-top: var(--bk-row-gap); } .bk-account__woocommerce form .form-row label { line-height: var(--bk-field-line-height); margin-bottom: var(--bk-field-margin-bottom); } /* Text links in running text are underlined, so they read as links. Menus and buttons keep their own styling. */ :is(.bk-section__text, .woocommerce-MyAccount-content, .woocommerce-info, .woocommerce-message, .woocommerce-error, .wc-block-components-notice-banner, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-privacy-policy-text, .wc-block-checkout__terms) a:not([class*="button"]) { text-decoration: var(--bk-link-text-decoration); text-decoration-thickness: var(--bk-link-text-decoration-thickness); text-underline-offset: var(--bk-link-text-underline-offset); } /* Audit 29/10/2026, B6. Paste at the end of ASE snippet 51143 (BK Design System). */ /* Buttons may wrap on narrow screens (STR-11-a): at 320 px nowrap labels with wide letter spacing pushed home and the returns page to 337 and 352 px. Upstream gbp-* styles stay untouched; a:is() outranks their single class. */ @media (max-width: 399px) { a:is(.gbp-button--primary, .gbp-button--secondary, .gbp-button--tertiary) { white-space: normal; text-wrap: wrap; } } /* Visible keyboard focus (STR-11-b, CSS-12-a): the rings used currentColor, nearly invisible on the filled button. */ /* Scrolling to a focused item leaves room for the fixed header (STR-11-c). Section anchors are not in this list, so they land as before. */ :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]) { scroll-margin-top: var(--bk-focus-scroll-margin-top); } :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible { outline: var(--bk-border-xs) solid var(--bk-focus-color) !important; outline-offset: var(--bk-border-xs); } /* Page to page, on the whole site (front end, wp-admin, login). Off below for reduced motion. */ @view-transition { navigation: auto; } /* Less motion when the visitor asks for it (CSS-12-a). */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* WooCommerce show-password button: at least 24 x 24 px (STR-25-a, WCAG 2.5.8). */ .show-password-input { min-width: 24px; min-height: 24px; } /* Forms: WPForms, Search & Filter Pro and WooCommerce share one field and dropdown style (CSS-20-a, STR-26-a; taken unchanged from veico.nl's 51143 of 09/10/2026). Values come from the --bk-field-* and --bk-field-option-* tokens in the Design Tokens. */ /* Search & Filter Pro reads its own variables: point them at the field tokens. .search-filter-base is on every field and on the dropdown popover. */ .search-filter-base { --search-filter-scale-font-size: var(--bk-field-font-size) !important; --search-filter-input-color: var(--bk-field-color) !important; --search-filter-input-background-color: var(--bk-field-background-color) !important; --search-filter-input-placeholder-color: var(--bk-field-color) !important; --search-filter-input-border-width: var(--bk-field-border-width) !important; --search-filter-input-border-style: var(--bk-field-border-style) !important; --search-filter-input-border-color: var(--bk-field-border-color) !important; --search-filter-input-border-hover-color: var(--bk-field-border-color-hover) !important; --search-filter-input-border-focus-color: var(--bk-field-border-color) !important; --search-filter-input-border-radius: var(--bk-field-border-radius) !important; --search-filter-input-border-radius-top-left: var(--bk-field-border-radius) !important; --search-filter-input-border-radius-top-right: var(--bk-field-border-radius) !important; --search-filter-input-border-radius-bottom-right: var(--bk-field-border-radius) !important; --search-filter-input-border-radius-bottom-left: var(--bk-field-border-radius) !important; --search-filter-input-padding-top: var(--bk-field-padding-block) !important; --search-filter-input-padding-bottom: var(--bk-field-padding-block) !important; --search-filter-input-padding-left: var(--bk-field-padding-inline) !important; --search-filter-input-padding-right: var(--bk-field-padding-inline) !important; --search-filter-input-option-padding-top: var(--bk-field-option-padding-block) !important; --search-filter-input-option-padding-bottom: var(--bk-field-option-padding-block) !important; --search-filter-input-selection-background-color: var(--bk-field-option-background-color-hover) !important; --search-filter-input-selection-color: var(--bk-field-option-color-hover) !important; --search-filter-token-color-base-accent: var(--bk-field-accent-color) !important; --search-filter-token-color-contrast-accent: var(--bk-field-accent-contrast-color) !important; --search-filter-token-color-contrast-1: var(--bk-field-color) !important; --search-filter-token-color-contrast-2: var(--bk-field-color) !important; } /* Transparent fields: the dropdown popover needs the page colour behind its options. */ .search-filter-component-popover { background-color: var(--bk-field-popover-background-color) !important; } /* Search & Filter typed and selected text: the field's font */ .search-filter-input-text__input, .search-filter-component-combobox .search-filter-component-combobox__selection, .search-filter-component-combobox__selection-placeholder, .search-filter-component-combobox .search-filter-component-combobox__actions-input { font-family: inherit !important; font-size: var(--bk-field-font-size) !important; font-weight: var(--bk-field-font-weight) !important; line-height: var(--bk-field-line-height) !important; letter-spacing: var(--bk-field-letter-spacing) !important; } /* Search & Filter dropdown field: padding on the selection, none on its search input, the field's inline padding */ .search-filter-component-combobox .search-filter-component-combobox__actions .search-filter-component-combobox__selection { padding-top: var(--bk-field-padding-block) !important; padding-bottom: var(--bk-field-padding-block) !important; } .search-filter-component-combobox .search-filter-component-combobox__actions-input { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } .search-filter-component-combobox:not(.search-filter-component-combobox--mode-multiple) .search-filter-component-combobox__actions { min-height: var(--bk-field-min-height) !important; } .search-filter-component-combobox.search-filter-component-combobox--mode-multiple { padding-left: var(--bk-field-padding-inline) !important; } /* WPForms choices field: the same padding and height as a text field */ div.wpforms-container .wpforms-form .wpforms-field .choices[data-type] .choices__inner { padding: var(--bk-field-padding-block) var(--bk-field-padding-inline) !important; min-height: 0 !important; font-weight: var(--bk-field-font-weight) !important; } div.wpforms-container .wpforms-form .choices__list--single { padding: 0 !important; } /* Dropdown options: WPForms choices, Search & Filter, WooCommerce select2 */ div.wpforms-container .wpforms-form .choices__list--dropdown .choices__item, .search-filter-component-combobox-base__listbox-option, .select2-results__option { font-family: inherit !important; font-size: var(--bk-field-option-font-size) !important; font-weight: var(--bk-field-option-font-weight) !important; line-height: var(--bk-field-line-height) !important; color: var(--bk-field-color) !important; padding-block: var(--bk-field-option-padding-block) !important; padding-inline: var(--bk-field-option-padding-inline) !important; } /* Option under the pointer or the keyboard */ div.wpforms-container .wpforms-form .choices__list--dropdown .choices__item--selectable.is-highlighted, .search-filter-component-combobox-base__listbox-option--selected:not(.search-filter-component-combobox-base__listbox-option--active), .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background-color: var(--bk-field-option-background-color-hover) !important; color: var(--bk-field-option-color-hover) !important; } /* The chosen option in a Search & Filter list keeps S&F's selected colours (white on contrast) */ .search-filter-component-combobox-base__listbox-option--active { color: var(--search-filter-input-selected-color) !important; } /* Rotating words (home page headings): the words share one grid cell and take turns. Screen readers get the full sentence from a .screen-reader-text span next to the aria-hidden visual. overflow: clip (not hidden) keeps the text baseline, so a word in the label font sits on the heading's baseline. */ .bk-rotator { display: inline-grid; vertical-align: baseline; overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; } .bk-rotator__word { /* Longhands: ASE's SCSS compile turns the shorthand with a slash into one value, and the words go side by side. */ grid-row: 1; grid-column: 1; opacity: 0; animation: bk-rotator 9s ease-in-out -0.5s infinite both; } .bk-rotator__word:nth-child(2) { animation-delay: 2.5s; } .bk-rotator__word:nth-child(3) { animation-delay: 5.5s; } @keyframes bk-rotator { 0% { opacity: 0; transform: translateY(0.6em); } 4%, 30% { opacity: 1; transform: translateY(0); } 34%, 100% { opacity: 0; transform: translateY(-0.6em); } } @media (prefers-reduced-motion: reduce) { .bk-rotator__word { animation: none; } .bk-rotator__word:first-child { opacity: 1; } } /* Rotating words, five-word variant (home page "What we offer"): 3 s per word on a 15 s cycle */ .bk-rotator--5 .bk-rotator__word { animation-name: bk-rotator-5; animation-duration: 15s; } .bk-rotator--5 .bk-rotator__word:nth-child(4) { animation-delay: 8.5s; } .bk-rotator--5 .bk-rotator__word:nth-child(5) { animation-delay: 11.5s; } @keyframes bk-rotator-5 { 0% { opacity: 0; transform: translateY(0.6em); } 2.4%, 18% { opacity: 1; transform: translateY(0); } 20.4%, 100% { opacity: 0; transform: translateY(-0.6em); } } /* WooCommerce prints an empty page header around the title the template replaces (STR-17-b). */ .woocommerce-products-header { display: none; } /* Target size, 24 px minimum (STR-25-a). */ .cmplz-cookiebanner .cmplz-close { min-height: var(--bk-target-size-min) !important; min-width: var(--bk-target-size-min) !important; } #cmplz-document summary, .cmplz-document summary { min-height: var(--bk-target-size-min); } /* The captcha loads late (PRF-03-a): its room is kept, so nothing moves when it arrives. */ .h-captcha { min-height: var(--bk-captcha-min-height); } /* Complianz lets the logo fill the banner below 768 px, up against its close button. */ .cmplz-cookiebanner .cmplz-logo img { height: auto !important; width: var(--bk-cookie-banner-logo-width) !important; } /* Target size for links that are a whole list item (STR-25-a): the legal list and the sitemap. */ .wp-block-page-list a, .wp-block-list > li > a:only-child { align-items: center; display: inline-flex; min-height: var(--bk-target-size-min); }