/** * BookingPress skin. * * Enqueued only when the suite's own CSS survived AssetScope's pass, so pages * without a booking form pay nothing for this file. See artsalon_enqueue_booking_skin(). * * BookingPress themes itself through custom properties written by its own * settings screen into wp-content/uploads/bookingpress/form-v3-custom.css. That * generated file still carries the pre-overhaul palette (navy #182949 text on * #DDDBD6). Rather than change plugin settings in the database, this file * redefines the same properties at matching specificity. It loads after the * generated one, so it wins the cascade; `!important` is used only where the * generated file uses it. * * Regenerating the BookingPress appearance settings will rewrite that file but * cannot remove these overrides. */ /* -------------------------------------------------------------------------- Palette BookingPress paints from three layers, and only the top one is reachable through its settings screen: 1. `--bp-v3-*` the Vue 3 layer, written by the appearance settings 2. `--bpa-dt-*`, `--bpa-gt-*`, `--bpa-app-*` a base scale biased blue-grey (`--bpa-dt-black-400: #202C45`) that the settings never touch 3. hardcoded literals with `!important` in the generated stylesheets, carrying whatever the palette was when they were last written -- here the pre-overhaul `#DDDBD6` / `#182949` / `#202C45` / `#1F1F1F` Overriding only layer 1 is what left barber names navy and, worse, put ink text on the still-black primary button: the generated rule takes the button's background from a literal and its colour from `--bp-v3-button-text`, so re-pointing that token alone turned white-on-black into black-on-black. All three layers are answered below. `!important` appears only where the generated CSS uses it, and the component selectors carry one class more than the vendor's so they win on specificity rather than on load order. -------------------------------------------------------------------------- */ .bpa-frontend-main-container.bpa-frontend-vue3 { /* Layer 1 -- Vue 3 */ --bp-v3-primary: #C08B3E; --bp-v3-primary-bg: rgba(192, 139, 62, 0.14); --bp-v3-bg: #FFFFFF; --bp-v3-footer-bg: #FFFFFF; --bp-v3-content: #0E0E0E; --bp-v3-label: #6E6A64; --bp-v3-sub-title: #6E6A64; /* Ink on brass is 6.5:1. White on brass is 2.5:1 and would fail. */ --bp-v3-button-text: #0E0E0E; --bp-v3-border: rgba(14, 14, 14, 0.14); /* Layer 2 -- the base scale, retinted from blue-grey to the warm neutrals. Contrast on white: ink 19.3:1, body 11.8:1, muted 5.4:1. */ --bpa-dt-black-400: #0E0E0E; --bpa-dt-black-400-darker: #000000; --bpa-dt-black-400-alpha-08: rgba(14, 14, 14, 0.08); --bpa-dt-black-300: #3A3733; --bpa-dt-black-200: #6E6A64; --bpa-dt-black-200-alpha-12: rgba(110, 106, 100, 0.12); --bpa-dt-black-100: #B5AFA6; --bpa-gt-gray-50: #FBFAF8; --bpa-gt-gray-100: #F2EFEA; --bpa-gt-gray-200: #E6E1D9; --bpa-gt-gray-300: #D8D2C8; --bpa-gt-gray-400: #C9C2B6; --bpa-gt-gray-10-a: rgba(14, 14, 14, 0.06); --bpa-app-heading: #0E0E0E; --bpa-app-text: #3A3733; --bpa-app-muted: #6E6A64; --bpa-app-subtle: #B5AFA6; --bpa-app-canvas: #F2EFEA; --bpa-app-surface: #FFFFFF; --bpa-app-surface-soft: #FBFAF8; --bpa-app-surface-muted: #F2EFEA; --bpa-app-surface-strong: #E6E1D9; --bpa-app-border: rgba(14, 14, 14, 0.14); --bpa-app-border-strong: rgba(14, 14, 14, 0.28); --bpa-app-primary-tint: rgba(192, 139, 62, 0.08); --bpa-app-primary-tint-strong: rgba(192, 139, 62, 0.14); --bpa-app-focus-ring: 0 0 0 3px rgba(192, 139, 62, 0.28); --bpa-app-shadow-xs: 0 1px 3px rgba(14, 14, 14, 0.07); --bpa-app-shadow-sm: 0 2px 8px rgba(14, 14, 14, 0.08); --bpa-app-shadow-md: 0 12px 32px rgba(14, 14, 14, 0.10); --bpa-app-shadow-lg: 0 18px 44px rgba(14, 14, 14, 0.14); } .bpa-frontend-vue3 .bpa-front-tabs { --bpa-pt-main-green: #C08B3E !important; --bpa-pt-main-green-darker: #A97832 !important; --bpa-pt-main-green-alpha-12: rgba(192, 139, 62, 0.12) !important; --bpa-pt-border-color: rgba(14, 14, 14, 0.14) !important; --bpa-pt-background-color: #FFFFFF !important; --bpa-pt-price-button-text-color: #0E0E0E !important; } /* -------------------------------------------------------------------------- Layer 3 -- the hardcoded literals The widget draws its own bordered panels, so the theme no longer wraps it in a card as well: three nested containers read as clutter, and a white slab on the sand band was the most conspicuous thing in the section. The panels themselves become the cards, matching the white-on-bone service cards elsewhere on the page. -------------------------------------------------------------------------- */ .asb-booking .bpa-frontend-main-container { background-color: transparent; border: 0; padding: 0; } /* The primary call to action. The generated rule pins `background: #1F1F1F` with `!important`, so the background has to be answered in kind or the ink label sits on near-black at 1.1:1. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-btn--primary, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-btn--primary:hover, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-btn--primary:focus { background: #C08B3E !important; background-color: #C08B3E !important; color: #0E0E0E !important; border-color: #C08B3E !important; } .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-btn--primary:hover { background: #D6A053 !important; background-color: #D6A053 !important; } /* Panels: paper surfaces with a hairline, not the old #DDDBD6 on navy. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tab-menu, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-default-card { background-color: #FFFFFF !important; border-color: rgba(14, 14, 14, 0.14) !important; } .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-fm-card, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-service-card { border-color: rgba(14, 14, 14, 0.14) !important; } /* Selected state reads as brass rather than navy. */ .bpa-frontend-main-container.bpa-frontend-vue3 .__bpa-is-selected .bpa-front-sm-card, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card.__bpa-is-selected { border-color: #C08B3E !important; background-color: rgba(192, 139, 62, 0.08) !important; } /* The "Bárki" (Anyone) tile. The vendor fills it at 12% of the primary colour, which against white cards reads as a disabled slab rather than an equal choice. A 5% wash plus the same hairline keeps it distinguishable from a named barber without demoting it. */ .bpa-frontend-main-container.bpa-frontend-vue3 .--bpa-sm-is-any-staff-col .bpa-front-sm-card, .bpa-frontend-main-container.bpa-frontend-vue3 .--bpa-sm-any-staff-col .bpa-front-sm-card { background-color: rgba(14, 14, 14, 0.05) !important; border-color: rgba(14, 14, 14, 0.14) !important; } /* Names and headings inside the widget. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card__body--name, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card__inner-body--name, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-cb__title, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--title { color: #0E0E0E !important; } /* The step rail. The vendor colours these from a five-class selector, so a three-class override loses however many `!important`s it carries; these match its depth. The set was found by sweeping every *visible* computed colour inside the widget for a blue bias -- worth re-running after a BookingPress upgrade, filtering to rendered elements, since the DOM also holds the markup for steps that have not been reached yet. State now reads as hierarchy rather than one flat colour: the step you are on is ink, the ones ahead are muted (5.4:1 on white, so still legible, not greyed out), and the brass underline marks the current position. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-tab-menu a.bpa-front-tab-menu--item, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-tab-menu a.bpa-front-tab-menu--item .bpa-front-tm--item-label, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-tab-menu a.bpa-front-tab-menu--item .bpa-front-tm--item-icon { color: #6E6A64 !important; border-color: rgba(14, 14, 14, 0.14) !important; } .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-tab-menu a.bpa-front-tab-menu--item.__bpa-is-active, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-tab-menu a.bpa-front-tab-menu--item.__bpa-is-active .bpa-front-tm--item-label, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-tab-menu a.bpa-front-tab-menu--item.__bpa-is-active .bpa-front-tm--item-icon { color: #0E0E0E !important; } /* The step icons are deliberately left alone. Each is an SVG whose glyph is knocked out of a filled background rect, so forcing `fill: currentColor` paints the rect and the glyph the same colour and the icon becomes a solid square. The vendor's own fills stay; only the labels are recoloured. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module-heading, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs--foot { color: #0E0E0E !important; border-color: rgba(14, 14, 14, 0.14) !important; } .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card__inner-body--bio, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-cb__item { color: #6E6A64 !important; border-color: rgba(14, 14, 14, 0.14) !important; } /* The vendor "Select" affordance on a staff card: navy at 30% opacity on a white card is neither legible nor on-palette. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bp-button, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card__inner-button { background-color: rgba(14, 14, 14, 0.06) !important; border: 1px solid rgba(14, 14, 14, 0.14) !important; color: #0E0E0E !important; } .bpa-frontend-main-container.bpa-frontend-vue3 .bp-button:hover, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card__inner-button:hover { background-color: rgba(192, 139, 62, 0.14) !important; border-color: #C08B3E !important; } /* -------------------------------------------------------------------------- The rest of layer 3: everything past the staff step The overrides above were found by sweeping the *staff* step. A sweep of the whole funnel -- every computed `color`, `fill`, `background-color` and painted border inside the widget, flagged where blue exceeds both red and green -- turns up the same three stale literals still winning further in: `#182949` on text and icon fills, `#202C45` on borders, and `rgba(32,44,69,0.1)` on disabled surfaces. The service name, its duration row, the category pills, the rules between service rows and the "Vissza" button were all still navy on production. They win because the generated file reaches six class-level components for some of them (`… .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si__card-body .bpa-front-si__card-body--heading`) with `!important` on top, so a three-class override never applied. Every selector below is the generated file's own selector with `.bpa-frontend-main-container` prefixed -- the same element, one class more -- so each wins on specificity. The teleported popovers (`.bp-picker-panel`, `.bp-select-dropdown`) render outside the widget and have no container to prefix; those match the generated selector exactly and win on load order, which the enqueue's dependency on the generated handle guarantees. State now reads as hierarchy instead of one flat navy: the thing you are choosing is ink, the value you are comparing is ink, and the label in front of it is muted. Contrast on white: ink 19.3:1, body 11.8:1, muted 5.4:1. -------------------------------------------------------------------------- */ /* Ink -- the thing being chosen, and the values a visitor compares. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si__card-body .bpa-front-si__card-body--heading, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si__card-body .bpa-front-si-cb__specs .bpa-front-si-cb__specs-item p strong, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-ci-pill.__bpa-is-active .bpa-front-ci-item-title, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front--dt__calendar .vc-title, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front--dt__calendar .vc-day .vc-day-content, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt-ts__sub-heading, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item span, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-form-control input, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-form-control .el-textarea__inner, .bpa-frontend-main-container.bpa-frontend-vue3 .bp-input__inner, .bpa-frontend-main-container.bpa-frontend-vue3 .bp-textarea__inner, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-module--booking-summary .bpa-front-module--bs-summary-content .bpa-front-module--bs-summary-content-item .bpa-front-bs-sm__item-val, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--bs-amount-details .bpa-fm--bs-amount-item .bpa-front-total-payment-amount-label, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tmc__head .bpa-front-tmc__title, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tmc__summary-content .bpa-front-tmc__sc-item .bpa-front-sc-item__val, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--add-to-calendar .bpa-fm--atc__heading, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--atc-wrapper .bpa-front-btn:hover, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control.--bpa-country-dropdown .vti__dropdown-item.highlighted strong, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control.--bpa-country-dropdown .vti__dropdown-item.highlighted span, .bpa-frontend-main-container.bpa-frontend-vue3 .bp-v3-step-title { color: #0E0E0E !important; } /* Body -- prose, labels that sit beside their own value, secondary actions. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--category .bpa-front-cat-items .bpa-front-ci-pill.el-tag, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs--foot .bpa-front-btn--borderless, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__ts-sm-back-btn label, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .el-form-item__label span, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-module--booking-summary .bpa-front-module--bs-summary-content .bpa-front-module--bs-summary-content-item span, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-module--booking-summary .bpa-front-module--bs-head p, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--payment-methods .bpa-front-module--pm-body .bpa-front-module--pm-body__item p, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--note-desc, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control--checkbox .el-checkbox__label, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-data-empty-view .bpa-front-dev__title, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tmc__booking-id .bpa-front-bi__label, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tmc__head p, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tmc__summary-content .bpa-front-tmc__sc-item .bpa-front-sc-item__label, .bpa-frontend-main-container.bpa-frontend-vue3 .bp-v3-subtitle { color: #3A3733 !important; } /* Muted -- the word in front of a value, and text that is not content. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si__card-body .bpa-front-si-cb__specs .bpa-front-si-cb__specs-item p, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si__card-body .bpa-front-si-cb__specs .bpa-front-si-cb__specs-item p, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front--dt__calendar .vc-weeks .vc-weekday, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control input::placeholder, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control .el-textarea__inner::placeholder, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control--file-upload .bpa-fu__placeholder, .bpa-frontend-main-container.bpa-frontend-vue3 input.bpa-front-form-control::placeholder, .bpa-frontend-main-container.bpa-frontend-vue3 textarea.bpa-front-form-control::placeholder, .bpa-frontend-main-container.bpa-frontend-vue3 .bp-input__inner::placeholder, .bpa-frontend-main-container.bpa-frontend-vue3 .bp-textarea__inner::placeholder { color: #6E6A64 !important; } /* Hairlines. The generated file paints these from `#202C45`, a blue-grey that reads as a drawn line rather than a division. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--service-items-row .bpa-front-module--service-item, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--category .bpa-front-cat-items .bpa-front-ci-pill.el-tag, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__time-slots, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar .vc-container, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar .vc-header, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar .vc-day, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control input, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control .el-textarea__inner, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control.--bpa-country-dropdown, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control.--bpa-country-dropdown .vti__dropdown, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control.--bpa-country-dropdown .vti__dropdown-list, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control--checkbox .el-checkbox__inner, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--booking-summary .bpa-front-module--bs-amount-details, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--booking-summary .bpa-front-module--bs-summary-content .bpa-front-module--bs-summary-content-item, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--booking-summary .bpa-is-coupon-module-enable .bpa-fm--bs__coupon-module-textbox, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--payment-methods .bpa-front-module--pm-body .bpa-front-module--pm-body__item, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-thankyou-module-container, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--add-to-calendar, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--atc-wrapper .bpa-front-btn, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs--vertical-left .bpa-front-tab-menu .bpa-front-tab-menu--item .bpa-front-tm--item-icon { border-color: rgba(14, 14, 14, 0.14) !important; } /* Unavailable, not unreachable: a warm 6% wash instead of a blue-grey 10%. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar .vc-day .vc-day-content.is-disabled, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__ts-body--item.__bpa-is-disabled, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__ts-body--item.__bpa-is-disabled:hover, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item.__bpa-is-disabled, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item.__bpa-is-disabled:hover { background-color: rgba(14, 14, 14, 0.06) !important; } /* The stock service icons. Unlike the step-rail glyphs above, these are a single filled path with no knocked-out background rect, so recolouring the fill darkens the drawing instead of turning it into a square. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si__default-img svg, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si__default-img svg path:not([fill="none"]) { fill: #0E0E0E !important; } /* Repository-owned service artwork: the URL predicate is deliberate. It leaves BookingPress uploads and placeholders untouched, and removing the payload override therefore restores their original circular presentation. The padding is the icons' detail budget, not decoration. `object-fit: contain` scales the 24-unit viewBox into the content box, so 6px of padding inside 56px leaves 44px and a 1.83px unit -- the size the marks are drawn for. At the 9px this tile used to carry, a 44px drawing was rendered at 38px and the finer geometry closed up. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card__left img[src*="/wp-content/plugins/artsalon-bookingpress-zapier-routing/assets/service-icons/"] { box-sizing: border-box; width: 56px; height: 56px; padding: 6px; border-radius: 10px; background-color: #E6E1D9; object-fit: contain; object-position: center; } /* -------------------------------------------------------------------------- Icons, and the second generated stylesheet The sweep above cleared the text and the hairlines but left every icon navy. They come from a *second* generated file -- `uploads/bookingpress/bookingpress_front_custom_.css`, 71 KB, the legacy front-end's customize sheet. It is still enqueued (the skin's own `$booking_handles` list names it) and its selectors carry no `.bpa-frontend-vue3` prefix, so it paints the Vue 3 form as well. Its rules duplicate the v3 file's at one class less, which is why the overrides above answered both at once -- but its `fill` and `stroke` rules have no v3 counterpart and were never answered at all. Between the two files, ~90 rules across ~480 selectors still carry the pre-overhaul literals. Most of them belong to features this site does not run (cart, service extras, deposits, recurring appointments, locations, reschedule, my-bookings), so this block covers what the booking funnel actually renders rather than mirroring the whole surface. The root fix is to regenerate both files from BookingPress's own appearance settings; that is a production settings change and is deliberately not done here. Icons that are a clean glyph take `currentColor`, so they follow the label they sit with and stay right if the palette moves again. The ones that are a glyph knocked out of a filled shape -- the step-rail badge in its active state, the default-avatar placeholder -- are left to the vendor: painting every child one colour turns those into a solid square. -------------------------------------------------------------------------- */ /* The step rail. `:not(.__bpa-is-active)` because the active item is a filled badge with a knocked-out white glyph, which the vendor paints itself. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tab-menu a.bpa-front-tab-menu--item:not(.__bpa-is-active) .bpa-front-tm--item-icon svg { fill: currentColor !important; } /* Secondary actions and their arrows. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs--foot .bpa-front-btn.bpa-front-btn--borderless, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--date-and-time.__sm .bpa-front--dt__ts-sm-back-btn .bpa-front-btn span svg, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control.--bpa-country-dropdown .vti__dropdown .vti__selection svg, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card .bpa-front-sm-card__inner-button svg path { fill: currentColor !important; } .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card__inner-item-icon svg path { stroke: currentColor !important; } /* Calendar chevrons and the stock service and payment glyphs: no label of their own to follow, so they take ink directly. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar .vc-arrows-container .vc-svg-icon path, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar .vc-nav-header .vc-nav-arrow .vc-svg-icon path, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si-card__left .bpa-front-si__default-img svg, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--payment-methods .bpa-front-module--pm-body .bpa-front-module--pm-body__item svg.bpa-front-pm-pay-local-icon { fill: #0E0E0E !important; } /* v-calendar brings its own theme, and the form mounts it as `vc-blue`. Almost all of it is inert -- BookingPress repaints the day cells, the weekday row and the selected-day highlight from its own tokens, which this file already points at brass -- but the month arrows keep v-calendar's slate-500, the one cool grey left in the widget. Nothing else in `vc-blue` reaches the eye, so nothing else is touched. Verified on the date step: selected day brass, disabled days unchanged. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar .vc-arrow, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar .vc-arrow svg { color: #3A3733; } /* v-calendar's slate-900 also sits on its wrappers as the inherited `color`. Nothing renders text from it today, so this changes nothing on screen -- it is here so "no cool grey anywhere in the widget" stays a property the sweep can assert, and so a future v-calendar element that does render text does not arrive slate. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar .vc-container { color: #0E0E0E; } /* The phone field's country list. The legacy file paints 240-odd rows navy and highlights the hovered one in the pre-overhaul sand. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control.--bpa-country-dropdown .vti__dropdown-item strong, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control.--bpa-country-dropdown .vti__dropdown-item span { color: #3A3733 !important; } .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-form-control.--bpa-country-dropdown .vti__dropdown-item.highlighted { background-color: rgba(14, 14, 14, 0.06) !important; } /* Toasts are the form's error surface, so they must not arrive in the old palette the one time a visitor sees them. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-toast-notification.--bpa-error, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-toast-notification.--bpa-success, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-thankyou-module-container .bpa-front-cc__error-toast-notification { background-color: #FFFFFF !important; border-color: rgba(14, 14, 14, 0.14) !important; } /* The "no free slots" and empty-state illustrations are drawn in the old sand. Retinted to the warm neutral the rest of the widget uses. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-data-empty-view .bpa-front-dev__form-bg, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-data-empty-view .bpa-front-dev__panel-bg, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front__no-timeslots-body svg .bpa-front-dev__form-bg, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front__no-timeslots-body svg .bpa-front-dev__panel-bg { fill: #E6E1D9 !important; } /* The teleported popovers. These render as children of , outside the widget, and the generated file still paints them in the pre-overhaul sand and navy -- so wherever one appears it arrives from the old design. No container to prefix; load order carries these. */ .bp-picker-panel, .bp-picker-panel .bp-picker-panel__footer, .bp-picker-panel .bp-time-panel, .bp-picker-panel .bp-date-picker__time-header .bp-input__wrapper, .bp-select-dropdown { background-color: #FFFFFF !important; border-color: rgba(14, 14, 14, 0.14) !important; } .bp-picker-panel .bp-picker-panel__footer { border-top-color: rgba(14, 14, 14, 0.14) !important; } .bp-picker-panel .bp-date-picker__time-header { border-bottom-color: rgba(14, 14, 14, 0.14) !important; } .bp-picker-panel .bp-time-panel__content::after, .bp-picker-panel .bp-time-panel__content::before, .bp-picker-panel .bp-time-panel__footer { border-color: rgba(14, 14, 14, 0.14) !important; } .bp-date-picker__header-label, .bp-picker-panel__content .bp-date-table th, .bp-picker-panel .bp-time-spinner__item, .bp-picker-panel__content .bp-date-table td span, .bp-picker-panel .bp-picker-panel__icon-btn, .bp-picker-panel .bp-date-picker__time-header .bp-input__inner { color: #0E0E0E !important; } /* -------------------------------------------------------------------------- Typography The variable override below only reaches components that read `--bpa-primary-font`. The suite's generated stylesheets set `font-family` directly, with `!important`, on most of the form's text, from the Customize "title font" setting. While that setting was Poppins the whole form rendered in Poppins whatever this file said. Since 2026-10-09 it is "Inherit Fonts" (Booking Form and Customer Panel), so the generated rules emit `font-family: inherit !important` and the form takes the body face. Switching it back to a named font brings that font back over all of this, and Poppins also re-enters the preload list that plugin 1.24.1 trims. -------------------------------------------------------------------------- */ .bpa-frontend-main-container.bpa-frontend-vue3 { --bpa-primary-font: var(--wp--preset--font-family--asb-body); --bpa-secondary-font: var(--wp--preset--font-family--asb-body); } .bpa-frontend-vue3 .bpa-front-module--title, .bpa-frontend-vue3 .bpa-front-cb__title, .bpa-frontend-vue3 .bpa-front-sm-card__body--name, .bpa-frontend-vue3 .bpa-front-sm-card__inner-body--name { font-family: var(--wp--preset--font-family--asb-display); letter-spacing: -0.01em; } /* Display face on the headings the generated file forces to `inherit`: the step heading, the service name, the calendar month and the primary button. Each selector is the generated one with `.bpa-frontend-main-container` prefixed, one class more, so it wins on specificity like the colour overrides below. Everything else in the form stays on the body face. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-module-heading, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si__card-body .bpa-front-si__card-body--heading, .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs .bpa-front--dt__calendar .vc-title { font-family: var(--wp--preset--font-family--asb-display) !important; letter-spacing: -0.01em; } .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs--foot .bpa-front-btn.bpa-front-btn--primary { font-family: var(--wp--preset--font-family--asb-display) !important; } /* The button's label is "Következő: Időpont". `strong` computes to `bolder`, which is 900 on a 700 button; Archivo has a 900, so the step name would print visibly heavier than its label. The suite's four Poppins files and this theme's Source Sans 3 both stop at 700, which is why this never showed before. */ .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs--foot .bpa-front-btn.bpa-front-btn--primary strong { font-weight: inherit; } /* -------------------------------------------------------------------------- Shape and buttons: align the widget with the site's sharp corners and uppercase display type instead of the vendor's 16px pills. -------------------------------------------------------------------------- */ .bpa-frontend-main-container.bpa-frontend-vue3 { --bpa-radius-16px: 4px; --bpa-radius-12px: 3px; --bpa-radius-8px: 3px; --bpa-radius-6px: 3px; } .bpa-frontend-vue3 .bpa-front-btn--primary, .bpa-frontend-vue3 .bpa-front-btn.bpa-front-btn--primary { font-family: var(--wp--preset--font-family--asb-display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 3px; } /* Focus must stay visible inside the widget too. */ .bpa-frontend-vue3 :is(button, a, input, select, textarea):focus-visible { outline: 2px solid #0E0E0E; outline-offset: 2px; } /* -------------------------------------------------------------------------- One scrollbar, not two The step panel is a fixed-height scroll box: the vendor's base rule pins `.bpa-front-tabs--panel-body .bpa-front-dc--body` to `max-height: 600px; overflow-y: auto`. On a phone the roster and the service list are both twice that, so the visitor gets a 600px window scrolling inside a scrolling page with no way to tell which one a swipe will move. BookingPress means to switch this off on small screens -- its own `@media (max-width: 576px)` rule says `max-height: unset` -- but that rule carries two classes and never wins against the unmediated `.bpa-front-tabs.--bpa-top .bpa-front-tabs--panel-body .bpa-front-dc--body { max-height: 600px }` three classes further up the same file. `--bpa-top` is the layout this site uses, so the cap survives at every width. Measured on production before this rule: staff step 1,253px of content in a 600px box, category step 1,086px. The cap goes at every width, not just on mobile: five barbers and thirteen services fit on a page, and a nested scroll region is no easier to operate with a mouse. `min-height` is left alone so the widget still reserves its height and steps do not jump as the visitor moves through them. Four classes, so this beats the vendor's three. -------------------------------------------------------------------------- */ .bpa-frontend-vue3 .bpa-front-tabs .bpa-front-tabs--panel-body .bpa-front-dc--body { max-height: none; overflow-y: visible; } /* The step rail was the second scroll region, for the same reason: the vendor switches it to `justify-content: space-between` below 577px but never clears the 40px right margin its `--bpa-top` rule puts on every item, so five 34px icons plus 160px of margin plus 56px of padding came to 386px inside 340px and the last step sat half off the edge. `!important` matches the vendor's own use of it on the padding. */ @media (max-width: 576px) { .bpa-frontend-vue3 .bpa-front-tabs.--bpa-top .bpa-front-tab-menu { padding-left: 16px !important; padding-right: 16px !important; } .bpa-frontend-vue3 .bpa-front-tabs.--bpa-top .bpa-front-tab-menu .bpa-front-tab-menu--item { margin-right: 0; } } /* -------------------------------------------------------------------------- Staff step on small screens: a photo and a name, and nothing that moves Three vendor behaviours are answered here, all of them below 577px. Above it the vendor's hover reveal is left alone: hover is deliberate with a pointer, and the reveal is also the only thing that brings the card's focusable control into view on a desktop, so cancelling it there would need the card rebuilt rather than restyled. 1. LAYOUT. The vendor drops to a single column and pins each card to a fixed 500px, so five barbers cost ~2,500px of scrolling before a choice can be made. Two columns sized by their own content put the whole roster in roughly a screen and a half: 735px of content against 1,253px, measured on production. Heights are no longer fixed. They were, to keep the vendor's expand/collapse animating against a known height -- but that toggle only appears when a bio overflows its 110px well, the bio is switched off, and the animation is gone from this step now anyway. Fixed heights are what left three fingers of white space under the name once the "Select" button was hidden. The vendor's `.bpa-front-sm--col-only-name` variant, which this file used to carry a shorter height for, is never emitted by the Vue 3 renderer -- only the legacy Vue 2 template in `appointment_step_staff_step.php` writes that class. Those rules were dead, which is why a bio-less card still reserved room for a bio. The avatar gets a 4:5 box rather than a pixel height: barber portraits are vertical, the crop is then the same on every phone width, and the rows stay even without a magic number to maintain. 2. THE HOVER ZOOM. `:hover`, `:focus-within` and `.__bpa-is-active` each shrink the avatar, fade the name out and slide a second copy of the name up from below the card. None of that is reachable by intent on a phone and none of it is escapable: a tap focuses the card (`tabindex="-1"` still takes focus on click) so `:focus-within` latches and stays latched, and iOS holds `:hover` on the last-tapped element as well. The vendor's own mobile block re-asserts a 260px avatar inside those state selectors, and at six class-level components it outranked this file's plain avatar height -- which is why the photo grew, the name left the card and the roster went ragged after the first tap. `:is()` counts as its most specific argument, so the state selectors below are seven and win on specificity rather than on load order. 3. THE "SELECT" BUTTON. It has no click handler of its own: selection happens because the click bubbles to the card's `@click="selectStaff(st)"`. The site plugin then advances to the service step on that same tap (`assets/staff-auto-advance.js`, plugin 1.15.0), so the button only ever shows a state the visitor has no time to read. It also renders broken here: the vendor pins its check icon at `right: 30px` of a 232px button and the mobile rule narrows the button to 95% of a half-width card, so the icon lands on top of the word. It is the only tabbable element in the card, though -- the card itself is `tabindex="-1"` -- so `display: none` would leave a keyboard visitor no way to choose a barber. The button is taken out of the layout the screen-reader way instead: clipped to a point, still focusable, still announced, with the card drawing the focus ring on its behalf. -------------------------------------------------------------------------- */ /* WCAG 2.4.7: the focused control must be visible. The button is clipped to a point below 577px, so the card it belongs to carries the indicator. Left unmediated -- above 577px the button is off-card until the vendor's reveal slides it in, and the ring marks which card that is. */ .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card:has(.bpa-front-sm-card__inner-button:focus-visible) { outline: 2px solid #0E0E0E; outline-offset: 2px; } @media (max-width: 576px) { /* Layout ------------------------------------------------------------- */ .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-module--staff-item-row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: -6px; margin-right: -6px; } /* Four classes: the vendor pins the height from `.bpa-front-module--staff-item-row .bpa-front-sm--col:not(.--bpa-sm-any-staff-col)`, which is three. Two classes here loses and the 500px card comes back. */ .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-module--staff-item-row .bpa-front-sm--col { padding-left: 6px; padding-right: 6px; height: auto; min-height: 0; max-height: none; overflow: visible; } .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm--col .bpa-front-sm-card { height: auto; padding: 10px; margin-bottom: 12px; } /* The named cards are sized by their content; the "Bárki" tile has no photo to size it, so it stretches to whatever the row became. */ .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm--col.--bpa-sm-any-staff-col .bpa-front-sm-card { height: calc(100% - 12px); } .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card .bpa-front-sm-card__inner-body { height: auto; } .bpa-front-sm-card .bpa-front-sm-card__body, .bpa-front-sm-card-sm__body-wrapper, .bpa-front-sm-card .bpa-front-sm-card__inner-body-wrapper { padding-left: 8px; padding-right: 8px; } .bpa-front-sm-card .bpa-front-cb__title, .bpa-front-sm-card .bpa-front-sm-card__body--name, .bpa-front-sm-card .bpa-front-sm-card__inner-body--name { font-size: 0.9375rem; line-height: 1.25; text-align: center; } /* "Bárki" keeps its name. The vendor hides `.bpa-front-sm-card__body` below 577px because every staff card carries a second copy of the name in `.bpa-front-sm-card__inner-body` -- but the "Any staff" card's template has no inner body at all, so it rendered as an unlabelled grey tile with an icon: the one choice a visitor who does not know the barbers is most likely to want. */ .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm--col.--bpa-sm-any-staff-col .bpa-front-sm-card__body { display: block; } /* The avatar box, in both the resting and the state-driven form ------- */ .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-module--staff-item-row .bpa-front-sm--col .bpa-front-sm-card:is(:hover, :focus, :focus-within, :active, .__bpa-is-active) .bpa-front-sm-card__left, .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card .bpa-front-sm-card__left { height: auto; aspect-ratio: 4 / 5; margin-top: 0; margin-left: 0; margin-bottom: 10px; } .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-module--staff-item-row .bpa-front-sm--col .bpa-front-sm-card:is(:hover, :focus, :focus-within, :active, .__bpa-is-active) .bpa-front-sm-card__left :is(.bpa-front-sm__avatar, .bpa-front-sm__default-avatar), .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card .bpa-front-sm-card__left :is(.bpa-front-sm__avatar, .bpa-front-sm__default-avatar) { width: 100%; height: 100%; } .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-module--staff-item-row .bpa-front-sm--col .bpa-front-sm-card:is(:hover, :focus, :focus-within, :active, .__bpa-is-active) .bpa-front-sm-card__left .bpa-front-sm__default-avatar svg, .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card .bpa-front-sm-card__left .bpa-front-sm__default-avatar svg { width: 100%; height: 100%; top: 0; } /* The "Bárki" tile's icon sizes itself; it must not be forced into the portrait ratio. */ .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm--col.--bpa-sm-any-staff-col .bpa-front-sm-card .bpa-front-sm-card__left { aspect-ratio: auto; height: auto; width: auto; margin-bottom: 8px; } /* The name stays put -------------------------------------------------- */ .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-module--staff-item-row .bpa-front-sm--col .bpa-front-sm-card:is(:hover, :focus, :focus-within, :active, .__bpa-is-active) .bpa-front-sm-card__body--name { opacity: 1; } /* Nothing left to animate; the transitions only delay the paint. */ .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card, .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card .bpa-front-sm-card__left, .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card .bpa-front-sm-card__left img, .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card .bpa-front-sm-card__body--name, .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card .bpa-front-sm-card__inner-body { transition: none; } /* The per-card "Select" button: out of the layout, still operable ----- */ .bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card .bpa-front-sm-card__inner-footer { height: 0; margin: 0 !important; padding: 0 !important; overflow: visible; } .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--staff .bpa-front-sm-card__inner-button { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0 !important; clip-path: inset(50%); white-space: nowrap; } }