/* ------------------------------------------------------------------ Rolls-Royce Surplus / Internal Redeployment — site chrome Colours ported from the original Apex Auctions theme (bidlogix.min.css); styling given a restrained, modern-skeuomorphic (OS X Yosemite) finish: soft gradients, hairline borders, subtle bevels + shadows, frosted glass. ------------------------------------------------------------------ */ :root { --rr-blue: #004990; /* rgb(0,73,144) — navbar / footer / buttons */ --rr-blue-dark: #002f5d; /* rgb(0,47,93) — hover / active */ --rr-blue-link: #004181; /* rgb(0,65,129) — link hover */ --rr-blue-border: #00386f; /* rgb(0,56,111) — navbar border */ --rr-text: #444444; /* rgb(68,68,68) — body text */ --rr-bg: #ffffff; /* Skeuomorphic finish: gradient stops + layered shadows */ --rr-blue-top: #0a5aa6; /* header gradient — light edge */ --rr-nav-top: #00529a; /* nav gradient — top */ --rr-nav-bottom: #003a72; /* nav gradient — bottom */ --hairline: rgba(0, 0, 0, 0.10); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.14); --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.18); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.42857; color: var(--rr-text); /* Subtle "desktop" gradient so floating panels read with depth */ background-color: #eceef1; background-image: linear-gradient(180deg, #f4f5f7 0%, #e7e9ed 100%); background-attachment: fixed; display: flex; flex-direction: column; min-height: 100vh; /* iOS 6 / pre-flat rendering: heavier subpixel smoothing (not the crisp grayscale "antialiased" look) for that richer, solid Helvetica Neue text. */ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; } a { color: var(--rr-text); text-decoration: none; } a:hover, a:focus { color: var(--rr-blue-link); text-decoration: underline; } .container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 15px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: linear-gradient(to bottom, var(--rr-blue-top), var(--rr-blue)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); /* Headroom: slide out of view when scrolling down, back in when scrolling up (toggled by .is-pinned-hidden from nav.js). */ transition: transform 0.25s ease; will-change: transform; } .site-header.is-pinned-hidden { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } .site-header .header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 15px; } /* Account + Menu button grouped on the right. On desktop the Menu button is hidden, so this is effectively just the account area. */ .header-controls { display: flex; align-items: center; gap: 12px; } /* The Log Out entry inside the dropdown is for small screens only; on desktop Log Out is the standalone button beside the user menu. */ .dropdown-logout-item { display: none; } /* ---------- Header account area (BidJS auth hooks) ---------- BidJS toggles the `hidden` class on .x-bidlogix--authenticated-show / -hide and writes the display name into .x-bidlogix--templated-user whenever the user logs in or out. */ .hidden { display: none !important; } /* Anti-flash: an inline script adds `.bidjs-authed` to before first paint when our persisted auth flag is present, so the header renders in its logged-in state immediately instead of flashing "Log In" on every page load. BidJS still corrects this authoritatively on boot (and sets the name). These rules must be !important + more specific than `.hidden` to win. */ html.bidjs-authed .x-bidlogix--authenticated-hide { display: none !important; } html.bidjs-authed .x-bidlogix--authenticated-show { display: flex !important; } /* Pre-paint the remembered username (set as --rr-user by the inline script) so it doesn't flash empty on navigation. `:empty` means this only shows until BidJS writes the real text node — then it disappears, no dupe. */ html.bidjs-authed .x-bidlogix--templated-user:empty::before { content: var(--rr-user, ""); } /* Scoped to .site-header: BidJS renders its own bare `.account` block on the account page (BEM parent of .account__actions), so we must NOT style it. */ .site-header .account { display: flex; align-items: center; gap: 14px; font-size: 14px; } .account-menu { display: flex; align-items: center; gap: 14px; } /* White "raised" buttons (Log In / Log Out) */ .account-login, .account-logout { display: inline-block; background: linear-gradient(to bottom, #ffffff, #eef0f2); color: var(--rr-blue); font-weight: 600; padding: 7px 16px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 6px; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.85); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.04s ease; } .account-login:hover, .account-login:focus, .account-logout:hover, .account-logout:focus { background: linear-gradient(to bottom, #ffffff, #e4e7ea); color: var(--rr-blue-dark); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.9); text-decoration: none; } .account-login:active, .account-logout:active { background: linear-gradient(to bottom, #e6e8eb, #f1f3f5); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22); transform: translateY(1px); } /* My Account dropdown — toggle is a translucent "glass" button on the blue bar */ .account-dropdown { position: relative; } .account-toggle { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.10)); border: 1px solid rgba(255, 255, 255, 0.40); border-radius: 6px; color: #fff; font: inherit; font-weight: 600; cursor: pointer; padding: 7px 12px; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.30); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.04s ease; } .account-toggle:hover, .account-toggle:focus { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)); text-decoration: none; } /* iOS 6-style press: the button looks pushed into a well — gradient inverts (darker at the top), a deep inset shadow falls from the top edge, and a faint bottom-inner highlight catches light on the lower lip. Text engraves slightly. */ .account-toggle:active, .account-dropdown.open .account-toggle { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.12) 55%, rgba(255, 255, 255, 0.05)); border-color: rgba(0, 0, 0, 0.22); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.10); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.35); } .account-toggle .account-icon { display: block; flex: none; width: 18px; height: 18px; } .account-toggle::after { content: "\25BE"; margin-left: 2px; font-size: 0.85em; opacity: 0.9; } /* Frosted-glass dropdown panel */ .account-dropdown-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; margin: 0; padding: 6px; list-style: none; background: rgba(252, 252, 253, 0.86); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 10px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.7); z-index: 1000; } .account-dropdown.open .account-dropdown-menu { display: block; } .account-dropdown-menu li a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--rr-text); white-space: nowrap; } .account-dropdown-menu li a:hover, .account-dropdown-menu li a:focus { background: linear-gradient(to bottom, var(--rr-blue-link), var(--rr-blue)); color: #fff; text-decoration: none; } @media (max-width: 767px) { /* Small screens, logged in: Log Out moves into the dropdown; the standalone button is hidden, leaving just the user-menu toggle beside the Menu button. */ .dropdown-logout-item { display: block; } .account-logout { display: none; } } .site-header .logo img { display: block; width: 236px; max-width: 100%; height: auto; /* subtle lift so the white mark sits on the blue with a touch of depth */ filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22)); } @media (max-width: 767px) { /* Shrink the logo so it shares the top row with the user menu + Menu button. */ .site-header .logo img { width: 160px; } } /* ---------- Primary navigation ---------- */ .site-nav { background: linear-gradient(to bottom, var(--rr-nav-top), var(--rr-nav-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .site-nav li a { display: block; color: #fff; padding: 12px 18px; font-size: 14px; font-weight: 500; border-right: 1px solid rgba(255, 255, 255, 0.07); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); transition: background 0.15s ease; } .site-nav li a:hover, .site-nav li a:focus { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); color: #fff; text-decoration: none; } .site-nav li a.active { background: linear-gradient(to bottom, var(--rr-blue-dark), #00305f); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35); color: #fff; } /* mobile nav toggle — glass button */ .nav-toggle { display: none; position: relative; align-items: center; margin: 8px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)); color: #fff; border: 1px solid rgba(255, 255, 255, 0.40); border-radius: 6px; padding: 9px 16px 9px 40px; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.25); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); transition: background 0.15s ease, box-shadow 0.15s ease; } /* hamburger when closed */ .nav-toggle::before { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; transition: opacity 0.2s ease; } /* chevron-up when open */ .nav-toggle::after { content: ""; position: absolute; left: 15px; top: 50%; width: 10px; height: 10px; margin-top: -1px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity 0.2s ease; } .nav-toggle:hover, .nav-toggle:focus { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.14)); } /* iOS 6-style press — pushed into a well (matches the account button). Applied while held down and while the menu is open. */ .nav-toggle:active, .nav-toggle.open { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.12) 55%, rgba(255, 255, 255, 0.05)); border-color: rgba(0, 0, 0, 0.22); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.10); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.35); } .nav-toggle.open::before { opacity: 0; } .nav-toggle.open::after { opacity: 1; } @media (max-width: 767px) { /* Menu button shows inline beside the user menu (it lives in .header-controls). */ .nav-toggle { display: flex; margin: 0; } /* Nav bar is now empty until opened (the toggle moved up to the header row), so drop its divider/shadow to avoid a thin blue sliver under the header. */ .site-nav { border-top: 0; box-shadow: none; } .site-nav li a { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-nav ul { flex-direction: column; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; } .site-nav ul.open { max-height: 70vh; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .site-nav ul, .nav-toggle::before, .nav-toggle::after, .account-login, .account-logout, .account-toggle { transition: none; } } /* ---------- Main content ---------- */ /* Flex chain so the white card stretches to fill the viewport down to the footer (minus the card's own bottom margin) on short pages, regardless of content. */ main { flex: 1 0 auto; display: flex; flex-direction: column; } main > .container { flex: 1 0 auto; display: flex; flex-direction: column; } main > .container > .content { flex: 1 0 auto; } /* Static content pages (help / contact) sit in a floating white panel */ .content { background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.08); padding: 26px 32px 34px; margin: 28px 0 0px; min-height: 400px; } .content h2 { font-weight: 600; font-size: 27px; color: var(--rr-blue-dark); margin: 4px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); /* iOS 6 letterpress: light shadow below the glyphs = engraved on the card */ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); } .content h3 { font-weight: 600; font-size: 20px; color: var(--rr-text); margin-top: 22px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); } .content ul { padding-left: 20px; } .content li { margin-bottom: 6px; } @media (max-width: 767px) { .content { padding: 20px 18px 26px; margin: 18px 0 30px; } } /* Contact cards — two skeuomorphic panels with a grouped-table-view body (mirrors original pageLeft / pageRight; iOS 6 / Yosemite finish). */ .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; margin-top: 18px; } .contact-card { border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 5px; overflow: hidden; /* Tight drop shadow to match the BidJS listing/panel cards. */ box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2); background: #fff; /* Column layout so the details body stretches to the bottom of the card. */ display: flex; flex-direction: column; } /* Brand-blue gradient title bar — the same finish as the nav/header. Fixed min-height keeps both cards' headers aligned regardless of org lines. */ .contact-card__head { display: flex; flex-direction: column; justify-content: center; min-height: 78px; padding: 12px 18px; background: linear-gradient(to bottom, var(--rr-blue-top), var(--rr-blue)); border-bottom: 1px solid var(--rr-blue-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); } /* .content scope needed to beat the global `.content h3` colour rule. */ .content .contact-card__name { margin: 0 0 2px; font-size: 18px; font-weight: 600; color: #fff; /* Engraved-on-blue letterpress (matches the dark-button text-shadow). */ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .contact-card__org { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22); } /* Grouped-table-view body: light panel, engraved row separators. flex:1 makes it fill the remaining height down to the card's bottom edge. */ .contact-card__details { margin: 0; flex: 1; background: linear-gradient(180deg, #fbfcfd 0%, #f2f4f6 100%); } .contact-card__row { display: grid; grid-template-columns: 64px 1fr; gap: 4px 14px; padding: 11px 18px; /* Classic iOS 6 engraved hairline: dark line + 1px white below it. */ border-bottom: 1px solid rgba(0, 0, 0, 0.09); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } .contact-card__row:last-child { border-bottom: 0; box-shadow: none; } .contact-card__row dt { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rr-blue); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); padding-top: 2px; } .contact-card__row dd { margin: 0; font-size: 14px; line-height: 1.4; color: var(--rr-text); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); } .contact-card a { color: var(--rr-blue-link); word-break: break-word; } .contact-card a:hover, .contact-card a:focus { text-decoration: underline; } /* ---------- BidJS host ---------- */ /* No padding-top here: the card's own margin-top sets the gap below the header, exactly like the static pages. (Adding host padding stacked on that margin and pushed the BidJS card ~15px lower than contact/help.) */ .bidjs-host { padding-top: 0; } /* App pages sit in the same floating white card as the static pages. Match the static card's top padding, but trim the sides since BidJS sets its own gutters. */ .content--bidjs { padding: 26px 24px 28px; } .content--bidjs > #bidjs { min-height: 360px; } @media (max-width: 767px) { .content--bidjs { padding: 20px 12px 20px; } } /* ---------- Footer ---------- */ /* Plain text on the page background — no gradient, shadow, or fill. */ .site-footer { flex-shrink: 0; margin-top: 25px; background: none; color: var(--rr-text); padding: 40px 0; } .site-footer p { margin: 0; } .site-footer a { color: var(--rr-blue-link); text-decoration: underline; } /* ================================================================== BidJS app theme overlay (added 2026-06-16) BidJS renders into #bidjs in the SAME DOM (no iframe), using Bootstrap 3 classes (.btn, .panel, .form-control, .pagination …) plus its own BEM classes (.lot__…, .listing__…). Its stylesheet is injected at runtime, so we scope under #bidjs / .bidlogix-app and lean on that specificity to carry the site's Yosemite-style finish into the auction UI. The login modal mounts under .bidlogix-app (#bidlogix-modal), so button/form/modal rules include that scope. All class names verified against bidjs--full.min.css — re-check after a BidJS version bump (we track latest 5.x loosely). ================================================================== */ /* ----- Buttons (app + login modal) ----- */ #bidjs .btn:not(.btn-link), .bidlogix-app .modal-content .btn:not(.btn-link) { border-radius: 6px; /* border: 1px solid rgba(0, 0, 0, 0.18); */ box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.25); font-weight: 600; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.04s ease; } #bidjs .btn:not(.btn-link):active, .bidlogix-app .modal-content .btn:not(.btn-link):active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22); } /* default / secondary — white raised (matches the header buttons) */ #bidjs .btn-default, .bidlogix-app .modal-content .btn-default { background: linear-gradient(to bottom, #ffffff, #eef0f2); color: var(--rr-blue); } #bidjs .btn-default:hover, #bidjs .btn-default:focus, .bidlogix-app .modal-content .btn-default:hover, .bidlogix-app .modal-content .btn-default:focus { background: linear-gradient(to bottom, #ffffff, #e4e7ea); color: var(--rr-blue-dark); } /* primary / bid / success — brand blue gradient */ #bidjs .btn-primary, #bidjs .btn-success, #bidjs .btn-webcast--bid, .bidlogix-app .modal-content .btn-primary, .bidlogix-app .modal-content .btn-success { background: linear-gradient(to bottom, var(--rr-blue-top), var(--rr-blue)); border-color: var(--rr-blue-border); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.22); } #bidjs .btn-primary:hover, #bidjs .btn-primary:focus, #bidjs .btn-success:hover, #bidjs .btn-success:focus, #bidjs .btn-webcast--bid:hover, .bidlogix-app .modal-content .btn-primary:hover, .bidlogix-app .modal-content .btn-primary:focus { background: linear-gradient(to bottom, #0c63b3, #00478d); color: #fff; } /* ----- Button groups (segmented controls, e.g. listing state filters) ----- Our blanket border-radius on .btn rounds every button; inside a .btn-group the inner edges must be square so they join, with only the outer ends rounded. */ #bidjs .btn-group > .btn { border-radius: 0; margin-left: -1px; /* collapse the doubled border between buttons */ } #bidjs .btn-group > .btn:first-child { margin-left: 0; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } #bidjs .btn-group > .btn:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /* Selected filter — pressed-in brand blue so the active state is obvious */ #bidjs .btn-group > .btn-default.active { background: linear-gradient(to bottom, var(--rr-blue), var(--rr-blue-dark)); border-color: var(--rr-blue-border); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28); z-index: 1; /* keep the active button's full border above its neighbours */ } #bidjs .btn-group > .btn-default.active:hover, #bidjs .btn-group > .btn-default.active:focus { background: linear-gradient(to bottom, var(--rr-blue), var(--rr-blue-dark)); color: #fff; } /* ----- Auction results toolbar (count + view toggle | state filters) ----- The "Showing N lots" count with its gallery/list toggle and the state filters live in a Bootstrap .row whose floated cols sit at different heights. Make the row a vertically-centred flex bar so everything lines up on one tidy line. */ #bidjs .row:has(> .col-md-8 > .auction__results-count) { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; margin-bottom: 14px; } /* Count text + view toggle, inline and centred */ #bidjs .auction__results-count { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; font-weight: 600; } /* Right-align the state filters to meet the count across the bar */ #bidjs .filters__container { display: flex; justify-content: flex-end; align-items: center; } /* Taller buttons across the toolbar (view toggle + state filters) so the bar reads with a bit more presence and both groups match in height. */ #bidjs .auction-view__toggle, #bidjs .timed-auction__filters--state > .btn { padding-top: 5px; padding-bottom: 5px; } /* Flex the filter buttons so the count badge aligns via the flexbox instead of sitting in the text line box (where its inline-block height made the badged buttons taller than the plain "All" button). */ #bidjs .timed-auction__filters--state > .btn { display: inline-flex; align-items: center; justify-content: center; } /* View-toggle icon buttons — compact, square FA icons */ #bidjs .auction-view__toggle { display: inline-flex; align-items: center; justify-content: center; padding-left: 12px; padding-right: 12px; } #bidjs .auction-view__toggle .svg-inline--fa { width: 15px; height: 15px; vertical-align: middle; } @media (max-width: 767px) { /* Stack and left-align on narrow screens instead of squashing */ #bidjs .filters__container { justify-content: flex-start; } } /* ----- Filter count badges (pill counters on the state buttons) ----- */ /* Scoped with .label so these win over the general #bidjs .label rules (same specificity otherwise) and stay compact instead of inheriting label sizing. */ #bidjs .filters__badge.label { display: inline-block; min-width: 17px; margin-left: 6px; padding: 0 6px; border-radius: 999px; /* pill */ font-size: 12px; font-weight: 700; line-height: 15px; letter-spacing: 0; text-transform: none; text-align: center; vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } #bidjs .filters__badge--starred.label-warning { background: linear-gradient(to bottom, #f0b53e, #d9920f); border-color: #b97e0c; color: #fff; } #bidjs .filters__badge--winning.label-success { background: linear-gradient(to bottom, #3cb054, #228a38); border-color: #1c7a30; color: #fff; } #bidjs .filters__badge--losing.label-default { background: linear-gradient(to bottom, #fbfbfc, #e2e5e9); border-color: rgba(0, 0, 0, 0.18); color: var(--rr-text); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } /* On the active (blue) button, give badges a raised translucent-white chip so they stay legible against the blue fill. */ #bidjs .btn-group > .btn-default.active .filters__badge { background: linear-gradient(to bottom, #ffffff, #eef0f2); border-color: rgba(0, 0, 0, 0.22); color: var(--rr-blue-dark); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } /* Drop BidJS's stray bottom margin on the lot status / quantity rows. Their `.bidjs-app .lot__bid-status` rule adds margin-bottom: .25rem that reads as an odd gap; our #bidjs (id) selector outranks it. */ #bidjs .lot__bid-status, #bidjs .lot__info--quantity { margin-bottom: 0; } /* ----- "Clear filters" reset (btn-link) — tidy ghost button ----- */ #bidjs .auction__filters--reset.btn-link { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; color: var(--rr-blue); font-weight: 600; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } #bidjs .auction__filters--reset.btn-link::before { content: "\00D7"; /* × */ font-size: 15px; line-height: 1; font-weight: 700; } #bidjs .auction__filters--reset.btn-link:hover, #bidjs .auction__filters--reset.btn-link:focus { background: rgba(0, 73, 144, 0.08); color: var(--rr-blue-dark); text-decoration: none; } #bidjs .auction__filters--reset.btn-link:active { background: rgba(0, 73, 144, 0.14); } /* ----- Lot action footer (Bid / Autobid buttons) ----- */ /* Stack the two btn-block actions with an even gap instead of flush, and pad the muted footer cleanly. The "Bid" primary leads; "Place Autobid" becomes a real outlined secondary button rather than a weak text link. */ #bidjs .lot__actions { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #f7f8fa; border-top: 1px solid var(--hairline); } #bidjs .lot__actions .btn-block { margin: 0; /* BS3 adds top margin between stacked btn-blocks; gap handles it */ } /* Promote the autobid text-link into an outlined secondary button */ #bidjs .lot__action--auto-bid.btn-link { background: #fff; border: 1px solid var(--rr-blue-border); border-radius: 6px; color: var(--rr-blue); font-weight: 600; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.04s ease; } #bidjs .lot__action--auto-bid.btn-link:hover, #bidjs .lot__action--auto-bid.btn-link:focus { background: linear-gradient(to bottom, #ffffff, #eef0f2); color: var(--rr-blue-dark); text-decoration: none; } #bidjs .lot__action--auto-bid.btn-link:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18); } /* Make the primary Bid button the clear lead action */ #bidjs .lot__action--bid.btn-primary { font-size: 15px; padding-top: 9px; padding-bottom: 9px; } /* ----- Form controls (app + login modal) ----- */ #bidjs .form-control, .bidlogix-app .modal-content .form-control { border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.18); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); } #bidjs .form-control:focus, .bidlogix-app .modal-content .form-control:focus { border-color: var(--rr-blue-link); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(10, 90, 166, 0.18); } /* ----- Timed-auction filters panel ----- The "Filters" collapsible (.timed-auction__filter.list-group) ships as a flat Bootstrap .bg-muted list-group. Reskin it as a floating white card with a gradient heading bar — matching .panel / .panel-heading above. */ #bidjs .timed-auction__filter.list-group { margin-bottom: 18px; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 6px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2); } /* No overflow:hidden here — it clips the Categories react-select dropdown (the menu renders inline, not portalled). Round the inner pieces individually so corners stay crisp without trapping the menu. */ #bidjs .timed-auction__filter > .list-group-item.bg-muted { margin: 0; padding: 0; border: 0; border-radius: 5px; background: #fff; } /* Heading toggle = the gradient bar (same fill as .panel-heading). */ #bidjs .timed-auction__filter .a11y__interactive--button { padding: 11px 16px; border-radius: 5px; background: linear-gradient(to bottom, #fbfbfc, #eef0f2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } /* When expanded, flatten the heading's bottom edge so it meets the form body. */ #bidjs .timed-auction__filter .a11y__interactive--button:has(+ .collapse.in) { border-radius: 5px 5px 0 0; } #bidjs .timed-auction__filter .a11y__interactive--button strong { color: var(--rr-blue-dark); font-size: 14px; letter-spacing: 0.02em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); } #bidjs .timed-auction__filter--icon { margin-top: 3px; color: var(--rr-blue); } /* Form body: divider above + comfortable padding. */ #bidjs .timed-search-form { padding: 16px; border-top: 1px solid var(--hairline); } /* Categories react-select — match the .form-control height/finish so it lines up with the Search input. NOTE: react-select's own classes are hashed (emotion), so target the container's control wrapper structurally; re-check after a BidJS/react-select bump. */ #bidjs #categories > div[class*="control"] { min-height: 34px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.18); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); } /* "show live lots only" — nudge down so the checkbox baseline aligns with the labelled inputs in the same row (its own label is empty). */ #bidjs .timed-search-form__input--check.checkbox { margin-top: 6px; } /* ----- Panels / wells / listing + list tiles — floating white cards ----- */ #bidjs .panel, #bidjs .well, #bidjs .listing__card--partial, #bidjs .list-item { background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 6px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2); } #bidjs .panel-heading { background: linear-gradient(to bottom, #fbfbfc, #eef0f2); border-bottom: 1px solid var(--hairline); border-radius: 10px 10px 0 0; font-weight: 600; color: var(--rr-blue-dark); } /* soften lot imagery corners */ #bidjs .lot__media, #bidjs .lot__media img { border-radius: 6px; } /* ----- Pagination ----- */ #bidjs .pagination > li > a, #bidjs .pagination > li > span { color: var(--rr-blue); } #bidjs .pagination > .active > a, #bidjs .pagination > .active > span, #bidjs .pagination > .active > a:hover { background: linear-gradient(to bottom, var(--rr-blue-top), var(--rr-blue)); border-color: var(--rr-blue-border); } /* ----- Tables, badges, labels, links ----- */ #bidjs .table > thead > tr > th { border-bottom: 1px solid var(--hairline); color: var(--rr-blue-dark); } /* Status labels (lot bid status, reserve, etc.) — same skeuomorphic finish as the filter badges: hairline border, top-edge highlight, soft drop, gradient fill per variant. (.filters__badge rules above are more specific and win for the segmented-filter pills.) */ #bidjs .label { display: inline-block; padding: 3px 9px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.4); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; vertical-align: middle; } #bidjs .label-success { background: linear-gradient(to bottom, #3cb054, #228a38); border-color: #1c7a30; } #bidjs .label-warning { background: linear-gradient(to bottom, #f0b53e, #d9920f); border-color: #b97e0c; } #bidjs .label-danger { background: linear-gradient(to bottom, #e0584f, #c5362d); border-color: #ad2f27; } #bidjs .label-info { background: linear-gradient(to bottom, #46a9d6, #2486b5); border-color: #1f769e; } #bidjs .label-primary { background: linear-gradient(to bottom, var(--rr-blue-top), var(--rr-blue)); border-color: var(--rr-blue-border); } #bidjs .label-default { background: linear-gradient(to bottom, #fbfbfc, #e2e5e9); border-color: rgba(0, 0, 0, 0.18); color: var(--rr-text); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } #bidjs .badge { border-radius: 5px; background-color: var(--rr-blue); } #bidjs a { color: var(--rr-blue-link); } /* ----- Login / dialog modal shell (mounted under .bidlogix-app) ----- */ .bidlogix-app .modal-content { border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: var(--shadow-lg); overflow: hidden; } .bidlogix-app .modal-header { background: linear-gradient(to bottom, #fbfbfc, #eef0f2); border-bottom: 1px solid var(--hairline); }