/** * The one button style. * * Three different button layers were rendering on this site: * * brand gold the WooCommerce block buttons, the theme's own CTAs and the * Fluent Forms submit - "Към плащане", "Завърши поръчката", * "Изпрати запитване", "Филтри", "Виж резултатите" * plugin grey every classic WooCommerce button - "Влизане" on the account * page, and, more importantly, "Добавяне в количката" and "Още" * on the catalogue, which are the shop's primary actions * * The grey ones are WooCommerce's own default (#E9E6ED), showing through * because nothing in the theme ever styled that layer. * * Contrast, measured: * #16130E on #C9A24B = 7.72:1 rest * #16130E on #A07E32 = 4.87:1 hover * The white label the gold buttons used before was 2.40:1 and failed the 4.5:1 * floor everywhere it appeared, so the label colour moves with the unification * rather than being spread to more buttons. * * Elementor's own .elementor-button is deliberately left alone: those are * styled per widget in the page designs and are not part of this layer. */ .wc-block-components-button:not(.is-link), body button.ezi-cta__button, body a.ezi-cta__button, body form.frm-fluent-form .ff-btn.ff-btn-submit, body.woocommerce a.button, body.woocommerce button.button, body.woocommerce input.button, body.woocommerce-page a.button, body.woocommerce-page button.button, body.woocommerce-page input.button, body.woocommerce .woocommerce-Button, body.woocommerce-page .woocommerce-Button, body.woocommerce-page button.woocommerce-button, body.woocommerce-page input[type="submit"].woocommerce-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; background: var(--ezi-btn-bg); border: var(--ezi-border-frame) solid var(--ezi-btn-bg); border-radius: var(--ezi-radius-sm); color: var(--ezi-btn-ink); font-family: var(--ezi-font-body); font-weight: var(--ezi-fw-body-black); font-size: var(--ezi-t-caption); line-height: 1; letter-spacing: var(--ezi-ls-button); text-transform: uppercase; text-decoration: none; cursor: pointer; /* Not in the component spec: it sets `white-space: nowrap`, which assumes short English labels. Bulgarian ones like «ДОБАВЯНЕ В КОЛИЧКАТА» are long and these sit in a 160px product card, so they are allowed to wrap. */ min-height: 2.75rem; /* the 44px touch floor, on top of the brand padding */ transition: background var(--ezi-dur-fast) var(--ezi-ease-standard), color var(--ezi-dur-fast) var(--ezi-ease-standard), border-color var(--ezi-dur-fast) var(--ezi-ease-standard), transform var(--ezi-dur-fast) var(--ezi-ease-standard); } .wc-block-components-button:not(.is-link):hover, .wc-block-components-button:not(.is-link):focus-visible, body button.ezi-cta__button:hover, body button.ezi-cta__button:focus-visible, body form.frm-fluent-form .ff-btn.ff-btn-submit:hover, body form.frm-fluent-form .ff-btn.ff-btn-submit:focus-visible, body.woocommerce a.button:hover, body.woocommerce button.button:hover, body.woocommerce input.button:hover, body.woocommerce-page a.button:hover, body.woocommerce-page button.button:hover, body.woocommerce-page input.button:hover, body.woocommerce .woocommerce-Button:hover, body.woocommerce-page .woocommerce-Button:hover, body.woocommerce-page button.woocommerce-button:hover, body.woocommerce-page button.woocommerce-button:focus-visible { background: var(--ezi-btn-bg-hover); border-color: var(--ezi-btn-bg-hover); color: var(--ezi-btn-ink); } /* A visible keyboard ring, since the hover colour alone is not focus. */ .wc-block-components-button:not(.is-link):focus-visible, body button.ezi-cta__button:focus-visible, body form.frm-fluent-form .ff-btn.ff-btn-submit:focus-visible, body.woocommerce-page a.button:focus-visible, body.woocommerce-page button.button:focus-visible, body.woocommerce-page button.woocommerce-button:focus-visible { /* The brand's focus treatment: a 3px soft-gold halo over a deep-gold border. The transparent outline is there only so the ring survives Windows forced-colors mode, where box-shadow is dropped. */ box-shadow: var(--ezi-focus-halo); border-color: var(--ezi-gold-deep); outline: 2px solid transparent; outline-offset: 2px; } /* Press and disabled, from the brand's state rules: press scales rather than flashing a colour, disabled drops to 0.45 opacity. */ .wc-block-components-button:not(.is-link):not(:disabled):active, body button.ezi-cta__button:not(:disabled):active, body form.frm-fluent-form .ff-btn.ff-btn-submit:not(:disabled):active, body.woocommerce-page a.button:active, body.woocommerce-page button.button:not(:disabled):active, body.woocommerce-page button.woocommerce-button:not(:disabled):active { transform: scale(0.975); } .wc-block-components-button:not(.is-link):disabled, body button.ezi-cta__button:disabled, body form.frm-fluent-form .ff-btn.ff-btn-submit:disabled, body.woocommerce-page button.button:disabled, body.woocommerce-page button.woocommerce-button:disabled { opacity: 0.45; cursor: not-allowed; } /* The larger of the two sizes in the kit, for the cart and checkout CTAs. */ .wc-block-components-button:not(.is-link) { padding: 17px 38px; font-size: 14px; } /* -------------------------------------------------------------------------- * The secondary control the kit swallowed. * * The catalogue's "Филтри" toggle is styled by the theme as a quiet ivory * control, but `.elementor-kit-11 button` (0,1,1) outranks the theme's single * class (0,1,0), so the kit's global gold button won and the toggle rendered * as a primary call to action - in white on gold, at 2.40:1. * * Restoring what the theme asked for puts the hierarchy back (one gold CTA in * the sheet, a quiet toggle outside it) and reads at 16.97:1. * ------------------------------------------------------------------------ */ body button.ezi-filterbar__toggle { background: var(--ezi-ivory-2); color: var(--ezi-ink); border: 1px solid var(--ezi-rule); } @media (hover: hover) { body button.ezi-filterbar__toggle:hover { background: var(--ezi-ivory); border-color: var(--ezi-gold-deep); } }