/** * Theme Name: Blocksy Child * Description: Blocksy Child theme * Author: Creative Themes * Template: blocksy * Text Domain: blocksy */ /** * Accessible hiding utility * * Append to blocksy-child/style.css * * Hides an element visually while keeping it in the DOM and the * accessibility tree. Apply via the block editor: * Advanced > Additional CSS class(es) > screen-reader-text * * Do not substitute display:none or visibility:hidden — both remove the * element from the accessibility tree, which defeats the purpose. */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* Visible again on keyboard focus, so skip links remain usable. */ .screen-reader-text:focus { background-color: #ffffff; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* ============================================================ iBreathe — Global font override Append to: blocksy-child/style.css ------------------------------------------------------------ Blocksy stores typography as bare font names with no stack. Its default for several module controls (header menu, breadcrumbs, WooCommerce product title/price) is Helvetica, which is not installed on Windows. Firefox does not alias Helvetica to Arial, so those elements fall back to Times. This block forces Arial sitewide and terminates the stack with sans-serif. ============================================================ */ :root { --theme-font-family: Arial, Helvetica, sans-serif; } body, body * { font-family: Arial, Helvetica, sans-serif; } /* --- Exceptions: icon fonts and monospace must be preserved --- */ /* Blocksy / WooCommerce icon font (star ratings, badges) */ .star-rating, .star-rating::before, .star-rating span::before, [class^="ct-woo-badge"], [class*=" ct-woo-badge"] { font-family: "woo" !important; } /* Monospace elements */ pre, code, kbd, samp, tt { font-family: monospace, monospace; } /* ========================================================================== ibr-account-btn -------------------------------------------------------------------------- Converts the Blocksy header Button element into an icon-only account link. Applied via the Button element's "CSS Class" field in the Customizer: Appearance > Customize > Header > Button > General > CSS Class Enter: ibr-account-btn Append this block to: blocksy-child/style.css The icon colour follows the Customizer's "Label Text Color" setting (Design tab) via currentColor, so colour remains staff-editable and per-device without touching this file. ========================================================================== */ .ibr-account-btn { /* Icon size. Override per breakpoint below. */ --ibr-account-icon-size: 22px; /* Strip the button chrome. */ background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px !important; min-height: 0 !important; min-width: 0 !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* Hide the label text without removing it from the accessibility tree. Screen readers still announce "My Account". The `*` selector catches Blocksy's inner label span, which may carry its own font-size from the Design tab. */ .ibr-account-btn, .ibr-account-btn * { font-size: 0 !important; letter-spacing: 0 !important; } /* The icon itself. Drawn as a CSS mask so it inherits currentColor rather than baking a colour into the data URI. */ .ibr-account-btn::before { content: ""; display: block; flex: 0 0 auto; width: var(--ibr-account-icon-size); height: var(--ibr-account-icon-size); background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Slightly larger tap target on mobile. */ @media (max-width: 999px) { .ibr-account-btn { --ibr-account-icon-size: 24px; padding: 6px !important; } } /* -------------------------------------------------------------------------- IF THE ICON DOES NOT APPEAR -------------------------------------------------------------------------- Blocksy may apply the CSS Class to a wrapper element rather than to the anchor itself. If nothing renders, inspect the header button in DevTools, find which element carries .ibr-account-btn, and check whether the anchor is a child of it. If the class lands on a wrapper, uncomment the block below instead of editing the rules above, and report back which case applies so this file can be tidied to the single correct selector. -------------------------------------------------------------------------- */ /* .ibr-account-btn > a { background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px !important; min-height: 0 !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .ibr-account-btn > a::before { content: ""; display: block; flex: 0 0 auto; width: var(--ibr-account-icon-size); height: var(--ibr-account-icon-size); background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } */ /* --------------------------------------------------------------- Move the offcanvas MENU close button to the left edge, so it sits under the hamburger trigger. Append to: blocksy-child/sections/ibr-megamenu/ibr-megamenu.css (or wherever you keep header overrides) Scoped to #offcanvas so the cart and search panels are unaffected. --------------------------------------------------------------- */ #offcanvas .ct-panel-actions { justify-content: flex-start !important; } #offcanvas .ct-toggle-close { margin-left: 0 !important; margin-right: auto !important; } /* ------------------------------------------------------------------ FOOTER WIDGET SPACING ------------------------------------------------------------------ Footer headings and their link lists are separate .ct-widget blocks. Block editor margin settings have no effect on the space between them. Adjust margin-top below to control that gap. ------------------------------------------------------------------ */ #footer .ct-widget { margin-bottom: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } #footer .ct-widget + .ct-widget { margin-top: 0.5rem !important; }