/* Theme Name: Blocksy Child Theme URI: https://circuitauction.com Description: Child theme of Blocksy for hosting the Circuit Auction app without CSS conflicts. Author: Yoav Kremener Template: blocksy Version: 1.0.0 */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600;700&display=swap'); /* Isolate the Circuit Auction app from theme styles */ #circuit-auction-app { all: revert; } /* ========================================================================== Circuit Auction — sale-page lot-card grid (JSA brand) -------------------------------------------------------------------------- Ported from silverstorm-child/circuit-overrides.css and adapted to the NEWER app markup, where each grid card nests its content inside section.item-page__card > div.item-page__body (the old CSS assumed flat children of .item-page). Scoped to .item-page[data-display-mode="grid"] so it is independent of the (possibly renamed) grid wrapper. Elements absent from the rendered DOM — "Live" badge, favorite heart, the "CURRENT BID / SOLD FOR" two-column — cannot be created with CSS and are intentionally not attempted. Status: v1 / iterate against a live screenshot. ========================================================================== */ :root { --jsa-green-accent: #00A651; /* highlighted price values */ --jsa-gray-pill: #f2f2f2; /* secondary pill bg (View Details) */ --jsa-page-bg: #d1d3d4; /* light-gray page background behind cards */ --jsa-radius: 14px; --jsa-font-head: 'Montserrat', 'Open Sans', sans-serif; --jsa-font-body: 'Open Sans', sans-serif; } /* Light-gray page background behind the cards (matches the mockup) */ body { background-color: var(--jsa-page-bg) !important; } /* NOTE: the Circuit app (Chakra/Emotion) injects its styles into after this stylesheet and frequently sets layout via inline style="" attributes, which beat normal rules. Structural declarations therefore carry !important so they win the cascade — same approach the silverstorm overrides relied on. */ /* ---- Each lot card ------------------------------------------------------- */ .item-page[data-display-mode="grid"] { display: flex !important; flex-direction: column !important; background: #fff !important; border-radius: var(--jsa-radius) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .08) !important; padding: 16px 16px 18px !important; height: 100% !important; font-family: var(--jsa-font-body); } /* Flatten the app's card/body wrappers AND the header so their children become direct flex items we can reorder into the mockup sequence: lot# -> image -> title/desc -> price -> button. */ .item-page[data-display-mode="grid"] .item-page__card, .item-page[data-display-mode="grid"] .item-page__body, .item-page[data-display-mode="grid"] .item-header, .item-page[data-display-mode="grid"] .item-pricing-bid-wrapper { display: contents !important; } .item-page[data-display-mode="grid"] .item-header > a.item-lot-info { order: 1 !important; margin-bottom: 10px; } .item-page[data-display-mode="grid"] .item-gallery { order: 2 !important; } .item-page[data-display-mode="grid"] .item-header > a:not(.item-lot-info) { order: 3 !important; } .item-page[data-display-mode="grid"] .item-pricing { order: 4 !important; margin-top: auto !important; } .item-page[data-display-mode="grid"] .item-grid-link { order: 5 !important; } /* ---- Header: bold uppercase lot number ----------------------------------- */ .item-page[data-display-mode="grid"] .item-lot-number { font-family: var(--jsa-font-head); font-weight: 700; font-size: 16px; color: #111; text-transform: uppercase; } /* Title doubles as the description line: muted, clamped to two lines */ .item-page[data-display-mode="grid"] .item-title { font-size: 13px !important; font-weight: 400 !important; color: #666 !important; line-height: 1.45 !important; margin: 6px 0 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Image box: fixed area, contained, light placeholder ----------------- */ .item-page[data-display-mode="grid"] .item-gallery { background: #f3f4f5 !important; border-radius: 10px !important; height: 170px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; margin: 0 0 12px !important; } .item-page[data-display-mode="grid"] .item-gallery img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } /* Mute the gallery's own carousel chrome inside the small card */ .item-page[data-display-mode="grid"] .item-gallery .images-count, .item-page[data-display-mode="grid"] .item-gallery .chakra-button[aria-label$="image"] { display: none !important; } /* ---- Price row: small uppercase label, accent-green value ---------------- */ .item-page[data-display-mode="grid"] .item-pricing { border-top: 1px solid #e3e3e3 !important; padding: 12px 0 0 !important; margin: 0 !important; } .item-page[data-display-mode="grid"] .item-price-opening > span:first-child { text-transform: uppercase; letter-spacing: .05em; font-size: 10px; color: #777; } .item-page[data-display-mode="grid"] .item-price-opening-value { color: var(--jsa-green-accent); font-weight: 700; } /* ---- "View more details" — gray pill, full-width row --------------------- */ .item-page[data-display-mode="grid"] .item-grid-link { margin-top: 14px !important; text-align: center !important; } /* The app's own rule is identical specificity AND uses `color:#fff !important` (styles.scss: .circuit-user-ui .item-page[data-display-mode="grid"] .item-grid-link .chakra-link), and loads after this file — so to win we must out-specify it. The card carries id="item-page", so using #item-page raises specificity to (1,4,0) > the app's (0,5,0). */ .circuit-user-ui #item-page[data-display-mode="grid"] .item-grid-link .chakra-link, .circuit-user-ui #item-page[data-display-mode="grid"] .item-grid-link .chakra-link a { color: #000 !important; } .circuit-user-ui #item-page[data-display-mode="grid"] .item-grid-link .chakra-link { display: inline-flex !important; width: fit-content !important; background: var(--jsa-gray-pill) !important; border-radius: 999px !important; padding: 9px 26px !important; font-weight: 700 !important; font-size: 13px !important; text-decoration: none !important; } .circuit-user-ui #item-page[data-display-mode="grid"] .item-grid-link .chakra-link:hover { filter: brightness(.95); color: #000 !important; } /* ---- Hide card noise not present in the mockup --------------------------- */ .item-page[data-display-mode="grid"] .item-place-bid, .item-page[data-display-mode="grid"] .item-sale-wrapper { display: none !important; } /* ========================================================================== SEARCH / FILTER BAR — replace the gold/cream palette with a neutral black-outline + black-text + white-background look. The app's rules here (styles.scss) are NOT !important, so a .circuit-user-ui scoped !important override wins without needing the #id specificity bump. ========================================================================== */ /* Search (primary) + Reset (secondary) buttons */ .circuit-user-ui .btn-primary-action, .circuit-user-ui .btn-secondary-action { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; box-shadow: none !important; } .circuit-user-ui .btn-primary-action:hover:not(:disabled), .circuit-user-ui .btn-secondary-action:hover { background: #f2f2f2 !important; border-color: #000 !important; color: #000 !important; box-shadow: none !important; } .circuit-user-ui .btn-primary-action:focus-visible, .circuit-user-ui .btn-secondary-action:focus-visible { outline: 2px solid #000 !important; outline-offset: 2px; } /* "Show Advanced Filters" toggle — gold text -> black */ .circuit-user-ui .sale-page__advanced-toggle, .circuit-user-ui .sale-page__advanced-toggle:hover { color: #000 !important; } /* "Items Per Page" dropdown trigger */ .circuit-user-ui .circuit-dropdown__trigger { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; } .circuit-user-ui .circuit-dropdown__trigger:hover, .circuit-user-ui .circuit-dropdown.is-open .circuit-dropdown__trigger { background: #fff !important; border-color: #000 !important; } .circuit-user-ui .circuit-dropdown__trigger:focus-visible { outline: 2px solid #000 !important; outline-offset: 2px; } /* Lot Number / Search Text inputs — white field, black border, black focus */ .circuit-user-ui .chakra-input { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; } .circuit-user-ui .chakra-input:focus, .circuit-user-ui .chakra-input:focus-visible { border-color: #000 !important; box-shadow: 0 0 0 1px #000 !important; outline: none !important; } /* ---- List / Grid view toggle -------------------------------------------- */ .circuit-user-ui .view-toggle { background: #fff !important; border: 1px solid #000 !important; } .circuit-user-ui .view-toggle__btn { background: transparent !important; color: #000 !important; box-shadow: none !important; } .circuit-user-ui .view-toggle__btn:hover { color: #000 !important; } /* Active mode = solid black fill (replaces the gold-tinted active state) */ .circuit-user-ui .view-toggle__btn.is-active { background: #000 !important; color: #fff !important; box-shadow: none !important; } /* ---- Pagination (.favorites-pagination__btn, used by .sale-pagination) --- */ .circuit-user-ui .favorites-pagination__btn { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; } .circuit-user-ui .favorites-pagination__btn:hover:not(:disabled) { background: #f2f2f2 !important; border-color: #000 !important; color: #000 !important; } /* Current page = solid black fill (replaces the gold gradient) */ .circuit-user-ui .favorites-pagination__btn.is-active { background: #000 !important; border-color: #000 !important; color: #fff !important; } /* ========================================================================== ITEM VIEW (full detail + teaser/list) — remove all gold, use black. The app's gold palette is driven by CSS custom properties defined at the .circuit-user-ui root. Redefining them on the item-view container makes every `var(--gold…)` reference inside that subtree resolve to black — a single sweep instead of per-element overrides. Gold backgrounds/borders become black (text/accents) or a faint neutral tint (surfaces). ========================================================================== */ .circuit-user-ui .item-page[data-display-mode="full"], .circuit-user-ui .item-page[data-display-mode="teaser"] { --gold: #000 !important; --gold-dim: #000 !important; --cream-gold: #000 !important; --gold-border: #000 !important; --gold-bg: rgba(0, 0, 0, .06) !important; } .circuit-user-ui .sale-page .category-header { color: black; } .circuit-user-ui .sale-page{ padding: 0 !important } .circuit-user-ui .featured-items{ padding: 0 !important } .facets-wrapper .facet-tabs > :nth-child(2) { display:none !important } .facet-tabs button { background-color: #f2f2f2 !important } .circuit-user-ui .sale-page .facets-wrapper p.facet-empty { border-radius: 0 10px 10px 10px !important; background-color: #f2f2f2 !important } .circuit-user-ui .facet-tabs { border-bottom: none !important } /*JSA modifications*/ /* div.circuit-dropdown.circuit-dropdown--compact { display:none !important } */ .card-head{ background-color: #E6E7E8 !important; background-image: none !important; } .acct-tabs{ background-color: #f2f2f2 !important; background-image: none !important; } .field-input { background-color: #f2f2f2 !important; background-image: none !important; } .interests-search-card{ background-color: #E6E7E8 !important; background-image: none !important; } .chakra-table.circuit-wxo6pg thead { background-color: #E6E7E8 !important; background-image: none !important; } .field-textarea{ background-color: #f2f2f2 !important; background-image: none !important; } .sale-summary{ background-color: #E6E7E8 !important; background-image: none !important; } .acct-subtab is-active{ background-color: #f2f2f2 !important; background-image: none !important; } .bid-limit-row.credit-request-row{ background-color: #E6E7E8 !important; background-image: none !important; } .bid-limit-row{ background-color: #E6E7E8 !important; background-image: none !important; } .sale-info__about-trigger{ background-color: #f2f2f2 !important; background-image: none !important; } ul.sub-menu li.menu-item{ background-color: #006738 !important; background-image: none !important; color: #ffffff !important } a.ct-menu-link{ color: #ffffff !important } div.facets-wrapper div.facet-tabs button{ background-color: #f2f2f2 !important; background-image: none !important; } div.facets-wrapper p.facet-empty{ background-color: #f2f2f2 !important; background-image: none !important; } div.facets-wrapper div.facet-panel{ background-color: #f2f2f2 !important; background-image: none !important; } div.facets-wrapper div.facet-panel div.facet-grid{ background-color: #f2f2f2 !important; background-image: none !important; } .facet-link__count{ background-color: #E6E7E8 !important; background-image: none !important; } div.address-form__override{ background-color: #E6E7E8 !important; background-image: none !important; } #af-namePrefix{ background-color: #f2f2f2 !important; background-image: none !important; } select#af-province{ background-color: #f2f2f2 !important; background-image: none !important; } select#af-country{ background-color: #f2f2f2 !important; background-image: none !important; } select#name_prefix{ background-color: #f2f2f2 !important; background-image: none !important; } input.PhoneInputInput{ background-color: #f2f2f2 !important; background-image: none !important; } input.react-datepicker-ignore-onclickoutside{ background-color: #f2f2f2 !important; background-image: none !important; } div.react-datepicker__input-container input{ background-color: #f2f2f2 !important; background-image: none !important; } .item-lot-navigation__btn{ background-color: #f2f2f2 !important; background-image: none !important; } .item-sale-accordion__summary{ background-color: #f2f2f2 !important; background-image: none !important; } .sale-about-modal__head{ background-color: #E6E7E8 !important; background-image: none !important; } .sale-about-modal__dates{ background-color: #f2f2f2 !important; background-image: none !important; } div.circuit-agvpui div.circuit-0 div.circuit-dropdown.circuit-dropdown--compact{ height:40px !important } div.circuit-dropdown.circuit-dropdown--compact button.circuit-dropdown__trigger{ font-size:15px !important } div.sale-page div#ca-featured-items{ min-height:20px !important } div.item-place-bid.circuit-pp5ht2{ width:100% !important } div.item-place-bid.circuit-pp5ht2 div.item-prelive-sale.circuit-0{ width:100% !important } button.chakra-button.submit-bid.circuit-ly26a{ width:100% !important; max-width:300px !important; margin-left:auto !important; margin-right:auto !important } button.chakra-button.submit-bid.buy-now-btn.circuit-uspp98{ width:100% !important; max-width:300px !important; margin-left:auto !important; margin-right:auto !important } div.circuit-agvpui div.circuit-0 input.chakra-input{ width:150px !important } div.item-favorite.circuit-0{ position:relative !important; top:0 !important; left:0 !important; margin-left:auto !important } div.item-page__body div.item-header.circuit-14d4rkt{ width:100% !important; padding-right:0 !important; min-width:0 !important } .circuit-nkiezo{ margin-top: 20px !important; } div.inner-thumb-grid.circuit-1tfgbfa div.active.circuit-1xrfmt2{ border:none !important } #main.site-main.hfeed div#ca-sale-page{ max-width:1290px !important; margin-left:auto !important; margin-right:auto !important } div.entry-content.is-layout-constrained{ width:100% !important } div#my-interests.circuit-user-ui{ width:100% !important } div#my-account.circuit-user-ui{ width:100% !important } div#my-favorites.circuit-user-ui{ width:100% !important } div#my-bids.circuit-user-ui{ width:100% !important } div#register.circuit-user-ui{ width:100% !important } div#login.circuit-user-ui{ width:100% !important } div.interests-additional__actions{ width:100% !important } div.interests-additional__actions button.bid-limit-submit{ width:100% !important } div.address-tab div button.btn-primary-action{ width:100% !important } div.card-actions button.btn-primary-action{ width:100% !important } .circuit-user-ui .circuit-dropdown--wide .circuit-dropdown__trigger{ min-width: 300px !important; } .circuit-user-ui .btn-primary-action .circuit-user-ui .btn-secondary-action { width: 300px !important; } .circuit-user-ui .my-favorites .favorites-toolbar__view { margin-left: 0 !important;; } .circuit-user-ui .favorites-search .favorites-search__input { width: 300px !important; } nav.acct-subtabs.my-bids-sale-tabs button.acct-subtab{ background-color: #f2f2f2 !important; background-image: none !important; } div.circuit-xw16kl button{ width: 100% !important; } div.bid-block.place-bid.circuit-0, div.bid-block.agent.circuit-0{ background-color: #f2f2f2 !important; background-image: none !important; } button.chakra-button.submit-bid{ background:#006738 !important } div.bidder-card-header{ background-color: #f2f2f2 !important; background-image: none !important; }