/* Theme Name: Bootscore Child Description: Bootscore Child Theme Author: Bootscore Author URI: https://bootscore.me Template: bootscore Version: 6.0.0 Requires at least: 5.0 Tested up to: 6.6 Requires PHP: 7.4 License: MIT License License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE Text Domain: bootscore */ /* * Global / layout / header — child theme presentation. * Shop card UI: assets/css/shop-filters.css (and similar feature CSS as needed). * Bootstrap tokens from SCSS: assets/scss/_bootscore-variables.scss → compile main.css. */ :is(#content, .editor-styles-wrapper) { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background-color: var(--bs-primary-bg); } ::selection, ::-moz-selection { background-color: var(--bs-secondary); color: var(--bs-body-color); } /* Masthead: dark bar */ .site-header { background-color: var(--bs-header-bg); color: var(--bs-body-bg); border-bottom-color: var(--bs-secondary); border-bottom-width: 2px; border-bottom-style: solid; } .site-header .navbar .nav-link { color: rgba(var(--bs-body-bg-rgb), 0.88); } .site-header .navbar .nav-link:hover, .site-header .navbar .nav-link:focus { color: var(--bs-body-bg); } .site-header .navbar-brand { color: var(--bs-body-bg); } #footer { border-top-color: var(--bs-secondary); border-top-width: 2px; border-top-style: solid; margin-top: 4rem; } /* ------------------------- Cut the corners of the cards ---------------------------------------- */ .woocommerce-result-count, .mobile-filter-button-container{ color: var(--bs-body-bg); } .woocommerce-result-count, .mobile-filter-button{ background: var(--bs-body-bg); margin:0px !important; color:var(--bs-body-color); padding: 5px; height:100%; } .card-cut-lg{ /* Set the size of the corner cut (e.g., 15px) */ --cut-size: 1.1rem; } .card-cut-sm{ /* Set the size of the corner cut (e.g., 15px) */ --cut-size: 0.625rem; } .card-cut-all{ /*cut all 4 corners of the card */ border-radius:0 !important; border:none !important; /* Define the 8 vertices of the octagon */ clip-path: polygon( var(--cut-size) 0, /* Top Left Start */ calc(100% - var(--cut-size)) 0, /* Top Right Start */ 100% var(--cut-size), /* Top Right End */ 100% calc(100% - var(--cut-size)), /* Bottom Right Start */ calc(100% - var(--cut-size)) 100%, /* Bottom Right End */ var(--cut-size) 100%, /* Bottom Left Start */ 0 calc(100% - var(--cut-size)), /* Bottom Left End */ 0 var(--cut-size) /* Top Left End */ ); overflow: hidden; /* Recommended to keep content in shape */ } .card-cut-bottom{ /* add a bottom corner sharp cut to the card */ border-radius:0 !important; border:none !important; /* Define the 8 vertices of the octagon */ clip-path: polygon( 0 0, /* Top Left Start */ 100% 0, /* Top Right Start */ 100% var(--cut-size), /* Top Right End */ 100% calc(100% - var(--cut-size)), /* Bottom Right Start */ calc(100% - var(--cut-size)) 100%, /* Bottom Right End */ var(--cut-size) 100%, /* Bottom Left Start */ 0 calc(100% - var(--cut-size)), /* Bottom Left End */ 0 var(--cut-size) /* Top Left End */ ); overflow: hidden; /* Recommended to keep content in shape */ } .card-cut-top{ /* cut the top off */ border-radius:0 !important; border:none !important; clip-path: polygon( var(--cut-size) 0, /* Top Left Start */ calc(100% - var(--cut-size)) 0, /* Top Right Start */ 100% var(--cut-size), /* Top Right End */ 100% 100%, /* Bottom Right Start */ calc(100% - var(--cut-size)) 100%, /* Bottom Right End */ 0 100%, /* Bottom Left Start */ 0 calc(100% - var(--cut-size)), /* Bottom Left End */ 0 var(--cut-size) /* Top Left End */ ); overflow: hidden; } /* 2. Apply a sharp, angular cut to the card */ .card-cut-topright { /* cut only the top right corner of the card */ border-radius: 0; /* We'll make a single top-right bevel cut by 20px */ clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, 0 100%); /* Optional: Ensure any overflow matches the new shape */ overflow: hidden; } .shop-card-frame{ background-color: var(--bs-accent); padding:1px; } .card-cut-bg{ background-color: var(--bs-accent); padding: 2px; } .bg-header-accent{ background-color: var(--bs-header-accent, var(--bs-secondary)) !important; } .shop-filters-form{ background-color: var(--bs-accent); padding: 1px 0px 1px 0px; } .shop-filters-group{ margin:1px 2px 1px 2px; } /* ---------------------- One off tweaks and fixes ------------------------- */ .offcanvas-body, .offcanvas-header{ background-color: var(--bs-header-bg, var(--bs-body-color)); color: var(--bs-header-accent, var(--bs-secondary)) !important; span{ color: var(--bs-header-accent, var(--bs-secondary)) !important; } button{ background-color: var(--bs-header-accent, var(--bs-secondary)); } } .site-header .menu-div, .site-header .btn-outline-secondary{ background-color: var(--bs-header-bg, var(--bs-body-color)); a{ color: var(--bs-header-accent, var(--bs-secondary)) !important; } } .site-header .menu-div:hover, .site-header .btn-outline-secondary:hover{ background-color: var(--bs-header-accent, var(--bs-secondary)) !important; border:none !important; a{ color: var(--bs-header-bg, var(--bs-body-color)) !important; border:none !important; } } .nav-link{ padding-right: var(--bs-navbar-nav-link-padding-x) !important; padding-left: var(--bs-navbar-nav-link-padding-x) !important; } :is(#content, .editor-styles-wrapper) .nav-item .active{ color: var(--bs-body-color) !important; } :is(#content, .editor-styles-wrapper) .nav-item{ background-color: var(--bs-body-color); color: var(--bs-secondary) !important; a{ color: var(--bs-secondary) !important; } } :is(#content, .editor-styles-wrapper) .nav-item:hover{ background-color: var(--bs-secondary) !important; border:none !important; a{ color: var(--bs-body-color) !important; border:none !important; } } .nav-tabs .nav-link:hover,.nav-tabs .nav-link:focus{ border: none !important; } .nav-tabs { border: none; } .bright-text{ color: var(--bs-body-bg) } .orderby{ border: none !important; } .results_count_container{ height:100%; } /* Section wrapper */ .entry-header { position: relative; padding-top: 0.5rem; /* reserve a little room for overlap */ } /* Heading that sits into top edge */ .entry-header > .entry-title { display: inline-block; background: var(--bs-primary-bg); /* same as page bg */ margin: 0 0 0.25rem; padding-right: 0.5rem; /* tiny color patch behind text */ line-height: 1.05; transform: translateY(0.3em); /* small screens */ color: var(--bs-accent) !important; } @media (min-width: 992px) { .entry-header > .entry-title { transform: translateY(0.25em); /* lg and up */ } }