/* ========================================================== VBC Framework Utilities Version: 0.1.0 ========================================================== */ /* * This file was referenced in the asset manifest but did not exist, * so wp_enqueue_style() was pointing at a 404. Seeding it with the * small set of generic helpers most component/page stylesheets in * this framework assume are available globally. */ .vbc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .vbc-clearfix::after { content: ""; display: table; clear: both; } .vbc-flex { display: flex; } .vbc-flex-center { display: flex; align-items: center; justify-content: center; } .vbc-hidden { display: none !important; } /* * Lightweight dependency-free icon set (CSS mask + inline SVG data URIs). * Inherits color via currentColor so hover/active states work for free. * Used across header, hero, footer, PDP and promo components. */ [class^="vbc-icon-"] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; vertical-align: -0.125em; } .vbc-icon-chevron-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M15 18L9 12L15 6'/%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='%23000' stroke-width='2'%3E%3Cpath d='M15 18L9 12L15 6'/%3E%3C/svg%3E"); } .vbc-icon-chevron-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M9 6L15 12L9 18'/%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='%23000' stroke-width='2'%3E%3Cpath d='M9 6L15 12L9 18'/%3E%3C/svg%3E"); } .vbc-icon-chevron-down { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9L12 15L18 9'/%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='%23000' stroke-width='2'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E"); } .vbc-icon-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20L17 17'/%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='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20L17 17'/%3E%3C/svg%3E"); } .vbc-icon-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20C4 16.5 7.5 14 12 14C16.5 14 20 16.5 20 20'/%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='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20C4 16.5 7.5 14 12 14C16.5 14 20 16.5 20 20'/%3E%3C/svg%3E"); } .vbc-icon-heart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 21L10.3 19.5C5.4 15.2 2 12.1 2 8.3C2 5.2 4.4 3 7.4 3C9.1 3 10.8 3.8 12 5.1C13.2 3.8 14.9 3 16.6 3C19.6 3 22 5.2 22 8.3C22 12.1 18.6 15.2 13.7 19.5L12 21Z'/%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='%23000' stroke-width='2'%3E%3Cpath d='M12 21L10.3 19.5C5.4 15.2 2 12.1 2 8.3C2 5.2 4.4 3 7.4 3C9.1 3 10.8 3.8 12 5.1C13.2 3.8 14.9 3 16.6 3C19.6 3 22 5.2 22 8.3C22 12.1 18.6 15.2 13.7 19.5L12 21Z'/%3E%3C/svg%3E"); } .vbc-icon-scale { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 3V21M7 6H17M4 6L2 12C2 14 4 15 5.5 15C7 15 9 14 9 12L7 6ZM17 6L15 12C15 14 17 15 18.5 15C20 15 22 14 22 12L20 6'/%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='%23000' stroke-width='2'%3E%3Cpath d='M12 3V21M7 6H17M4 6L2 12C2 14 4 15 5.5 15C7 15 9 14 9 12L7 6ZM17 6L15 12C15 14 17 15 18.5 15C20 15 22 14 22 12L20 6'/%3E%3C/svg%3E"); } .vbc-icon-grid { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='8' height='8'/%3E%3Crect x='13' y='3' width='8' height='8'/%3E%3Crect x='3' y='13' width='8' height='8'/%3E%3Crect x='13' y='13' width='8' height='8'/%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='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='8' height='8'/%3E%3Crect x='13' y='3' width='8' height='8'/%3E%3Crect x='3' y='13' width='8' height='8'/%3E%3Crect x='13' y='13' width='8' height='8'/%3E%3C/svg%3E"); } .vbc-icon-list { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='3.5' cy='6' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='3.5' cy='12' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='3.5' cy='18' r='1.2' fill='%23000' stroke='none'/%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='%23000' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='3.5' cy='6' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='3.5' cy='12' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='3.5' cy='18' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E"); } .vbc-icon-box { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 8L12 3L3 8V16L12 21L21 16V8Z'/%3E%3Cpath d='M3 8L12 13L21 8M12 13V21'/%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='%23000' stroke-width='2'%3E%3Cpath d='M21 8L12 3L3 8V16L12 21L21 16V8Z'/%3E%3Cpath d='M3 8L12 13L21 8M12 13V21'/%3E%3C/svg%3E"); } .vbc-icon-cart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='20' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='18' cy='20' r='1.4' fill='%23000' stroke='none'/%3E%3Cpath d='M3 4H5L7.2 15H19L21 7H8'/%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='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='20' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='18' cy='20' r='1.4' fill='%23000' stroke='none'/%3E%3Cpath d='M3 4H5L7.2 15H19L21 7H8'/%3E%3C/svg%3E"); } .vbc-icon-bike { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='5' cy='17' r='3'/%3E%3Ccircle cx='19' cy='17' r='3'/%3E%3Cpath d='M5 17L9 8H13L15 12H19M9 8H7M13 8L16 12'/%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='%23000' stroke-width='2'%3E%3Ccircle cx='5' cy='17' r='3'/%3E%3Ccircle cx='19' cy='17' r='3'/%3E%3Cpath d='M5 17L9 8H13L15 12H19M9 8H7M13 8L16 12'/%3E%3C/svg%3E"); } .vbc-icon-star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L14.9 8.6L22 9.3L16.7 14L18.2 21L12 17.4L5.8 21L7.3 14L2 9.3L9.1 8.6Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L14.9 8.6L22 9.3L16.7 14L18.2 21L12 17.4L5.8 21L7.3 14L2 9.3L9.1 8.6Z'/%3E%3C/svg%3E"); } .vbc-icon-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M4 12L9.5 17.5L20 6'/%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='%23000' stroke-width='2.5'%3E%3Cpath d='M4 12L9.5 17.5L20 6'/%3E%3C/svg%3E"); } .vbc-icon-play { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5V19L19 12Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5V19L19 12Z'/%3E%3C/svg%3E"); } .vbc-icon-rotate { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 12a8 8 0 1 1 2.6 5.9M4 12v5h5'/%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='%23000' stroke-width='2'%3E%3Cpath d='M4 12a8 8 0 1 1 2.6 5.9M4 12v5h5'/%3E%3C/svg%3E"); } .vbc-icon-truck { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 7H15V17H3V7ZM15 10H19L21 13V17H15'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='18' cy='18' r='1.8'/%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='%23000' stroke-width='2'%3E%3Cpath d='M3 7H15V17H3V7ZM15 10H19L21 13V17H15'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='18' cy='18' r='1.8'/%3E%3C/svg%3E"); } .vbc-icon-shield { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 3L20 7V12C20 17 16.5 20.5 12 22C7.5 20.5 4 17 4 12V7L12 3Z'/%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='%23000' stroke-width='2'%3E%3Cpath d='M12 3L20 7V12C20 17 16.5 20.5 12 22C7.5 20.5 4 17 4 12V7L12 3Z'/%3E%3C/svg%3E"); } .vbc-icon-gauge { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 13L16 9M8 13H16'/%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='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 13L16 9M8 13H16'/%3E%3C/svg%3E"); } .vbc-icon-lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%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='%23000' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); } .vbc-icon-headset { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 13a8 8 0 0 1 16 0'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%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='%23000' stroke-width='2'%3E%3Cpath d='M4 13a8 8 0 0 1 16 0'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%3E%3C/svg%3E"); } .vbc-icon-badge { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8 14.5L6.5 21L12 18L17.5 21L16 14.5'/%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='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8 14.5L6.5 21L12 18L17.5 21L16 14.5'/%3E%3C/svg%3E"); } .vbc-icon-menu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%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='%23000' stroke-width='2'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3C/svg%3E"); } .vbc-icon-close { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%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='%23000' stroke-width='2'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E"); } .vbc-icon-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 11L12 4L20 11V20H14V14H10V20H4V11Z'/%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='%23000' stroke-width='2'%3E%3Cpath d='M4 11L12 4L20 11V20H14V14H10V20H4V11Z'/%3E%3C/svg%3E"); } /* ========================================================== Bolted Corners ========================================================== Small rivet/bolt-head accents at each corner of a card -- the retro industrial workshop detail from the reference design. Usage: add class="vbc-bolted" to any position:relative-capable card, then include the 4 markers as its first children (see hero.php / featured-categories.php / promo-tiles.php for usage). ========================================================== */ .vbc-bolted{ position:relative; } .vbc-bolt{ position:absolute; z-index:2; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 32% 30%, #f2e2ba 0%, #c9a463 45%, #7a5a30 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); pointer-events:none; } /* The screw-head slot -- a thin recessed line across the bolt head, slightly rotated so it doesn't look mechanically identical on every bolt (matches how real slotted screws sit at random angles). */ .vbc-bolt::after{ content:""; position:absolute; top:50%; left:50%; width:70%; height:1.5px; background:rgba(0,0,0,.55); box-shadow:0 1px 0 rgba(255,255,255,.25); transform:translate(-50%, -50%) rotate(28deg); border-radius:1px; } .vbc-bolt--tr::after{ transform:translate(-50%, -50%) rotate(-24deg); } .vbc-bolt--bl::after{ transform:translate(-50%, -50%) rotate(-15deg); } .vbc-bolt--br::after{ transform:translate(-50%, -50%) rotate(20deg); } .vbc-bolt--tl{ top:10px; left:10px; } .vbc-bolt--tr{ top:10px; right:10px; } .vbc-bolt--bl{ bottom:10px; left:10px; } .vbc-bolt--br{ bottom:10px; right:10px; } /* On dark tiles (promo tiles) the bolt needs to sit above the gradient overlay, and reads better slightly brighter. */ .vbc-promo-tile .vbc-bolt{ background:radial-gradient(circle at 32% 30%, #fff3d9 0%, #d8b76a 45%, #8a6a38 100%); } /* Small tab pills need a smaller bolt to stay in proportion. */ .vbc-category-tabs__tab .vbc-bolt{ width:6px; height:6px; } .vbc-category-tabs__tab .vbc-bolt--tl{ top:6px; left:6px; } .vbc-category-tabs__tab .vbc-bolt--tr{ top:6px; right:6px; } .vbc-category-tabs__tab .vbc-bolt--bl{ bottom:6px; left:6px; } .vbc-category-tabs__tab .vbc-bolt--br{ bottom:6px; right:6px; }