/** * 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; } /* ========================================================================== ibr-nav-highlight Marks a single navigation link as standing out — a promotion, a new range, a clearance push. Colour only: no pill, no background, no animation. Works on any menu item at any level, in the desktop header and the mobile tray alike, inside a mega panel or outside one. -------------------------------------------------------------------------- TO APPLY Appearance > Menus, expand the item, and add to its CSS Classes field: ibr-nav-highlight Classes are space separated, so it can sit alongside others: ibr-megamenu-rule ibr-nav-highlight -------------------------------------------------------------------------- TO ADJUST Change the values under :root below. Two colours, because Blocksy's mobile tray is dark and a colour that reads on white often does not read on black. -------------------------------------------------------------------------- WHY IT LIVES HERE RATHER THAN IN ibr-megamenu.css It applies to the whole navigation, not just mega panels, so filing it in sections/ibr-megamenu/ would mean removing that section later would silently stop it working. -------------------------------------------------------------------------- WHY !important Blocksy sets menu link colours with its own rules, and the mega menu stylesheet sets them again for panel links. !important puts this above both without having to match their selector depth, which would otherwise have to be rewritten every time either changes. ========================================================================== */ :root { --ibr-nav-highlight-colour: #ff003c; --ibr-nav-highlight-colour-mobile: #ff3a51; --ibr-nav-highlight-weight: 600; } /* Desktop and tablet -------------------------------------------------------------------------- */ li.ibr-nav-highlight > .ct-menu-link, li.ibr-nav-highlight > .ct-menu-link:hover, li.ibr-nav-highlight > .ct-menu-link:focus { color: var(--ibr-nav-highlight-colour) !important; font-weight: var(--ibr-nav-highlight-weight) !important; } /* Mobile tray Blocksy's offcanvas panel is dark, so it takes its own colour. The breakpoint matches the one used by ibr-megamenu.css. -------------------------------------------------------------------------- */ @media (max-width: 999px) { li.ibr-nav-highlight > .ct-menu-link, li.ibr-nav-highlight > .ct-menu-link:hover, li.ibr-nav-highlight > .ct-menu-link:focus { color: var(--ibr-nav-highlight-colour-mobile) !important; } }