/* WCAG 2.2 Level A Color Contrast Fixes - Precise Targeting Only * Uses CSS variables for easier color management * Only fixes specific failing combinations without affecting hover/active/focus states */ /* 0. qtip2 tooltip font-size - library default is 10.5px which WAVE flags as "very small text" * Override to 14px (standard body text size) to meet WCAG 1.4.4 Resize Text */ .qtip, .qtip-content { font-size: 14px !important; line-height: 1.5 !important; } /* 1. Top menu dropdown icons - Base state only (not hover) on dark background #1f1f1f */ .page-header.navbar .top-menu .navbar-nav>li.dropdown .dropdown-toggle:not(:hover):not(.open)>i { color: var(--zeus-text-dark-bg, #b3b3b3); } /* 2. Search form input text - Base state only on dark background #151515 or #393939 */ .page-header.navbar .search-form:not(.open):not(:hover) .input-group .form-control { color: var(--zeus-text-dark-bg, #b3b3b3); } /* 3. Search form placeholders - All states on dark background */ .page-header.navbar .search-form .input-group .form-control::-moz-placeholder { color: var(--zeus-placeholder-dark, #757575); opacity: 1; } .page-header.navbar .search-form .input-group .form-control:-ms-input-placeholder { color: var(--zeus-placeholder-dark, #757575); } .page-header.navbar .search-form .input-group .form-control::-webkit-input-placeholder { color: var(--zeus-placeholder-dark, #757575); } /* 4. Search submit button icon - Base state only */ .page-header.navbar .search-form:not(.open):not(:hover) .input-group .input-group-btn .btn.submit>i { color: var(--zeus-text-dark-bg, #b3b3b3); } /* 5. Dropdown menu list items - Base state only on light background #eaedf2 */ .page-header.navbar .top-menu .navbar-nav>li.dropdown-extended .dropdown-menu .dropdown-menu-list>li:not(:hover)>a { color: var(--zeus-text-light-bg, #666666); } /* 6. User menu text - Base state only on dark background #1f1f1f */ .page-header.navbar .top-menu .navbar-nav>li.dropdown-user:not(:hover):not(.open) .dropdown-toggle>.username, .page-header.navbar .top-menu .navbar-nav>li.dropdown-user:not(:hover):not(.open) .dropdown-toggle>i, .page-header.navbar .top-menu .navbar-nav>li.dropdown-language:not(:hover):not(.open) .dropdown-toggle>.langname { color: var(--zeus-text-dark-bg-light, #d0d0d0); } /* 7. Horizontal menu links - Base state only (not hover/active/open) on dark background */ .page-header.navbar .hor-menu .navbar-nav>li:not(:hover):not(.open):not(.active):not(.current)>a { color: var(--zeus-text-dark-bg-light, #d0d0d0); } /* 8. Light menu dropdown icons - Base state only on white background */ .page-header.navbar .hor-menu.hor-menu-light .navbar-nav>li .dropdown-menu li:not(:hover)>a>i { color: var(--zeus-text-light-bg, #666666); } /* 9. Sidebar menu icons - Base state only (not hover/open/active) on dark background #3d3d3d */ .page-sidebar .page-sidebar-menu>li:not(:hover):not(.open):not(.active)>a>i, .page-sidebar .page-sidebar-menu>li:not(:hover):not(.open):not(.active)>a>i[class*=icon-], .page-sidebar .page-sidebar-menu>li:not(:hover):not(.open):not(.active)>a>i[class^=icon-] { color: var(--zeus-text-dark-bg, #b3b3b3); } /* 10. Sidebar search input - Base state on dark background #3d3d3d */ .page-sidebar .sidebar-search .input-group .form-control { color: var(--zeus-text-dark-bg, #b3b3b3); } /* 11. Sidebar search placeholders */ .page-sidebar .sidebar-search .input-group .form-control::-moz-placeholder { color: var(--zeus-placeholder-light, #b3b3b3); opacity: 1; } .page-sidebar .sidebar-search .input-group .form-control:-ms-input-placeholder { color: var(--zeus-placeholder-light, #b3b3b3); } .page-sidebar .sidebar-search .input-group .form-control::-webkit-input-placeholder { color: var(--zeus-placeholder-light, #b3b3b3); } /* 12. Dropdown menu headings on light background - Base state only */ .page-header.navbar .top-menu .navbar-nav>li.dropdown-extended .dropdown-menu>li.external>h3 { color: #4a6a72; } /* 13. Dropdown links on light background - Base state only (not hover) */ .page-header.navbar .top-menu .navbar-nav>li.dropdown-extended .dropdown-menu>li.external>a:not(:hover), .page-header.navbar .top-menu .navbar-nav>li.dropdown-inbox .dropdown-menu .dropdown-menu-list .subject .from { color: var(--zeus-link-blue, #4a8bc1); } /* 14. Frontend navbar username button - Low contrast fix (#999 on white = 2.8:1, needs 4.5:1) */ .navbar.navbar-pagehead.frontend .navbar-usermenu button.dropdown-toggle, .navbar.navbar-pagehead.frontend .navbar-usermenu button.dropdown-toggle .username { color: var(--zeus-text-light-bg, #666666) !important; } /* 15. Ver inline menu links - #757575 on #E0F7FA (cyan) = ~3.6:1, needs 4.5:1 * Also explicitly targets child elements (e.g. .ng-binding) because WAVE * evaluates span contrast independently of the parent color. */ .ver-inline-menu li a, .ver-inline-menu li a span { color: var(--zeus-text-light-gray-bg, #5A5A5A) !important; } /* Active state: white text on teal (#007A8F) = 5.02:1 — must cover spans too */ .ver-inline-menu li.active a, .ver-inline-menu li.active a span { color: #ffffff !important; } /* 17. Icon state default - #757575 on light background, needs 4.5:1 */ .icon-state-default { color: var(--zeus-text-light-gray-bg, #5A5A5A) !important; } /* 18. Font grey class - #757575 on light background, needs 4.5:1 */ .font-grey { color: var(--zeus-text-light-gray-bg, #5A5A5A) !important; } /* 19. Sidebar arrows - #777 on white = 4.47:1, needs 4.5:1 (darkened to #5A5A5A) */ .page-sidebar .page-sidebar-menu>li>a>.arrow.open:before, .page-sidebar .page-sidebar-menu>li>a>.arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a>.arrow.open:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a>.arrow:before, .page-sidebar .page-sidebar-menu li>a>.arrow.open:before, .page-sidebar .page-sidebar-menu li>a>.arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li>a>.arrow.open:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li>a>.arrow:before, .page-sidebar .page-sidebar-menu .sub-menu>li>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li>a>i, .page-sidebar .page-sidebar-menu .sub-menu>li>a>.arrow.open:before, .page-sidebar .page-sidebar-menu .sub-menu>li>a>.arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li>a>.arrow.open:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li>a>.arrow:before { color: var(--zeus-text-white-bg, #5A5A5A) !important; } /* 20. Footer copyright text - #848484 on #414141 = 2.1:1, needs 4.5:1 */ .page-footer .copyright, .page-footer .copyright .copyright-cell .copyright-text p a { color: var(--zeus-text-dark-gray-bg, #B3B3B3) !important; } /* 21. Frontend navbar usermenu-xs - #848484 on light background, needs 4.5:1 */ .navbar.frontend.navbar-pagehead .navbar-usermenu-xs { color: var(--zeus-text-light-gray-bg, #5A5A5A) !important; } /* 22. Auction register file links - #757575 on light background, needs 4.5:1 */ .zapAuctionRegister .register-table-wrapper .auction-files p>a>span { color: var(--zeus-text-light-gray-bg, #5A5A5A) !important; } /* 23. Notifications date text - #757575 on light background, needs 4.5:1 */ #notifications table.table tbody tr td.date { color: var(--zeus-text-light-gray-bg, #5A5A5A) !important; } /* 23b. Notification icon circles — make bg-* icon elements render as a * small circular badge instead of a bare flat icon. */ #notifications .notification-body { display: flex; align-items: center; gap: 10px; } #notifications .notification-body .icon i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; color: #ffffff; flex-shrink: 0; } /* 23c. Activity table icon circles — match notification overlay icon style */ #activitytable tbody td:first-child { vertical-align: middle; text-align: center; width: 48px; } #activitytable tbody td:first-child i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; color: #ffffff; flex-shrink: 0; } /* 24. Disabled pagination buttons - #777777 on white = 4.47:1, needs 4.5:1 */ .paginate_button.disabled, .paginate_button.disabled a, .paginate_button.previous.disabled, .paginate_button.previous.disabled a, .paginate_button.next.disabled, .paginate_button.next.disabled a { color: var(--zeus-text-white-bg, #5A5A5A) !important; } /* 25. Red button badge - #FF6E40 on white = 2.8:1, needs 4.5:1 */ .red.btn .badge { color: var(--zeus-red-text, #D73D0F) !important; } /* 26. Font red class - #FF6E40 on white = 2.8:1, needs 4.5:1 */ .font-red { color: var(--zeus-red-text, #D73D0F) !important; } /* 27. Icon state danger - #FF6E40 on white = 2.8:1, needs 4.5:1 */ .icon-state-danger { color: var(--zeus-red-text, #D73D0F) !important; } /* 28. Alert danger text - #FF6E40 on #FBE9E7 = 2.8:1, needs 4.5:1 */ .alert-danger { color: var(--zeus-red-text, #D73D0F) !important; border-color: var(--zeus-red-text, #D73D0F) !important; } /* 29. Form error states - #FF6E40 on white = 2.8:1, needs 4.5:1 */ .has-error .form-control { border-color: var(--zeus-red-text, #D73D0F) !important; } .has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .help-inline, .has-error .radio, .has-error .radio-inline { color: var(--zeus-red-text, #D73D0F) !important; } /* 30. Notifications table red background text - #FF6E40 on white = 2.8:1, needs 4.5:1 */ #notifications table.table tbody tr td:nth-of-type(1) .bg-red { color: var(--zeus-red-text, #D73D0F) !important; } /* 31. Dropdown menu list items - #888888 on #F7F7F7 = 3.3:1, needs 4.5:1 */ .page-header.navbar .top-menu .navbar-nav>li.dropdown-extended .dropdown-menu .dropdown-menu-list>li>a { color: var(--zeus-text-light-gray-bg, #5A5A5A) !important; } /* 32. Transparent button text - #888888 on light backgrounds, needs 4.5:1 */ .btn-transparent.btn { color: var(--zeus-text-light-gray-bg, #5A5A5A) !important; } /* 33. Fix #666666 on #1f1f1f background - 2.4:1, needs 4.5:1 */ .page-header.navbar .top-menu .navbar-nav>li.dropdown-extended .dropdown-menu .dropdown-menu-list>li:not(:hover)>a, .page-header.navbar .hor-menu.hor-menu-light .navbar-nav>li .dropdown-menu li:not(:hover)>a>i, .page-header.navbar .hor-menu.hor-menu-light .navbar-nav>li.mega-menu-dropdown>.dropdown-menu .mega-menu-content .mega-menu-submenu li>h3, /* Additional #666 on #1f1f1f fixes */ .page-header.navbar .hor-menu.hor-menu-light .navbar-nav>li .dropdown-menu li:hover>a>i, .page-header.navbar .hor-menu.hor-menu-light .navbar-nav>li .dropdown-menu li.active>a:hover>i, .page-header.navbar .hor-menu.hor-menu-light .navbar-nav>li .dropdown-menu li.active>a>i, .page-header.navbar .hor-menu.hor-menu-light .navbar-nav>li .dropdown-menu li.current>a:hover>i, .page-header.navbar .hor-menu.hor-menu-light .navbar-nav>li .dropdown-menu li.current>a>i { color: var(--zeus-text-dark-bg-fix, #b3b3b3) !important; } /* 34. Fix #333333 on #1f1f1f background - 1.4:1, needs 4.5:1 */ .page-header.navbar .hor-menu.hor-menu-light .navbar-nav>li.open>a, .page-header.navbar .hor-menu.hor-menu-light .navbar-nav>li.open>a>i { color: var(--zeus-text-dark-bg-light, #d0d0d0) !important; } /* 38. Fix #5A5A5A on #007A8F background - needs 4.5:1 (use white text instead) */ /* Exclude form controls (select, input, textarea) from white text rule */ .blue.btn, .btn.blue, .portlet.blue>.portlet-title, .portlet.box.blue>.portlet-title, .dashboard-stat.blue, .bg-blue:not(select):not(input):not(textarea):not(.form-control), .ver-inline-menu li.active a, .ver-inline-menu li.active a:hover, .navbar.navbar-pagehead .navbar-usermenu.noauth .dropdown-menu .register, .page-footer .site-news, .toast-info, .form-wizard .steps>li.active>a.step .number, .progress>.progress-bar-success, .frontLogin .login-wrapper:not(select):not(input):not(textarea):not(.form-control) { color: var(--zeus-text-on-blue-bg, #FFFFFF) !important; } /* 40. Ensure all form controls have proper dark text on white backgrounds */ /* This fixes white text on white background issues for select, input, textarea */ select, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], textarea, .form-control { color: #333333 !important; background-color: #FFFFFF !important; } /* Exception: form controls on dark backgrounds should keep their dark background styling */ .page-header.navbar .search-form .input-group .form-control, .page-sidebar .sidebar-search .input-group .form-control { color: var(--zeus-text-dark-bg, #b3b3b3) !important; background-color: #3d3d3d !important; } @media (max-width:767px) { .frontLogin .page-content-wrapper.page-content-light .page-content:not(select):not(input):not(textarea):not(.form-control) { color: var(--zeus-text-on-blue-bg, #FFFFFF) !important; } } /* 35. Fix #FFFFFF on #00BCD4 background - 3.0:1, needs 4.5:1 (for normal text) or 3:1 (for large text 18px+) */ .frontForgotPassword .forgot-wrapper, .frontForgotPasswordValidate .forgot-wrapper { background: var(--zeus-cyan-base, #008BA3) !important; } @media (max-width:767px) { .frontForgotPassword .page-content-wrapper.page-content-light .page-content, .frontForgotPasswordValidate .page-content-wrapper.page-content-light .page-content { background-color: var(--zeus-cyan-base, #008BA3) !important; } } /* 36. Fix #00BCD4 on #FFFFFF background - 3.0:1, needs 4.5:1 */ /* Only target specific elements on white/light backgrounds, NOT navigation */ body .page-content .font-blue, body .page-content .icon-state-info, .page-footer .footer-links .social-links a:hover i, .frontContactUs .contact-info .bold-blue, .frontContactUs .contact-info a, .frontRegister .register-wrapper .register-focus-info i, .frontRegister .register-wrapper .register-focus-info p, .frontRegisterConfirm .registerconfirm-wrapper a, .frontRegisterConfirm .registerconfirm-wrapper a:hover, .frontRegisterConfirm .registerconfirm-wrapper .registerconfirm-title, .frontForgotPasswordConfirm .forgotconfirm-wrapper a, .frontForgotPasswordConfirm .forgotconfirm-wrapper a:hover, .frontForgotPasswordConfirm .forgotconfirm-wrapper .forgotconfirm-title, .zapAuctionRegister .register-table-wrapper .bid-increment-link, .zapMyAccountOverview .overview-summary li .summary-number, body .zapMyAccountOverview .overview-summary li .summary-number, body #notifications table.table tbody tr td:nth-of-type(1) .bg-blue, body table.dataTable.dtr-column tbody td.control:before, body table.dataTable.dtr-column tbody th.control:before, /* Additional #00BCD4 fixes on white backgrounds - comprehensive coverage */ /* Override general a tag color from zeus.min.css line 394 */ /* Note: dashboard-stat .more links, breadcrumbs, pagination, forgotPassword-link, createAccount_section links, and delete/reload links are excluded via more specific rules */ body .page-content a:not(.btn):not(.dropdown-toggle):not(.nav-tabs>li>a):not(.page-header):not(.navbar):not(.page-breadcrumb>li>a):not(.more):not(.paginate_button):not(.pagination>li>a):not(.forgotPassword-link):not(.createAccount_section a):not([href*="delete="]):not([href*="reload="]):not(.reload), body .zapAuctionSingleItem .data-links a, body .tabbable-custom>.nav-tabs>li.active, body .font-blue:not(.page-header):not(.navbar), body .icon-state-info:not(.page-header):not(.navbar), body .t_Content_registerTip, body .t_Content_registerTip i, body .t_Content_registerTip p { color: var(--zeus-cyan-text, #008BA3) !important; } body .tabbable-custom>.nav-tabs>li.active { border-top-color: var(--zeus-cyan-text, #008BA3) !important; } /* 16. Breadcrumb links and icons - Use black color (must override general link color rule) */ body .page-content .page-bar .page-breadcrumb>li>a, body .page-content .page-bar .page-breadcrumb>li>i, body .page-bar .page-breadcrumb>li>a, body .page-bar .page-breadcrumb>li>i { color: #000000 !important; } /* 43. Ensure pagination text is black (must override general link color rule) */ body .page-content .pagination>li>a, body .page-content .pagination>li>span, body .page-content .paginate_button a, body .page-content .paginate_button, body .pagination>li>a, body .pagination>li>span, body .paginate_button a, body .paginate_button { color: #000000 !important; } /* 37. Fix #00BCD4 background with white text - 3.0:1, needs 4.5:1 */ body .zapAuctionItems #auctionitems_tab_3 tbody .watchlist_group .watchlist_button.blue, body .zapAuctionItems #auctionitems_tab_3 tbody .watchlist_group .watchlist_button.blue:active, body .zapAuctionItems #auctionitems_tab_3 tbody .watchlist_group .watchlist_button.blue:focus, body .zapAuctionItems #auctionitems_tab_3 tbody .watchlist_group .watchlist_button.blue:hover, body .zapAuctionItems #auctionitems_tab_3 tbody .watchlist_group .watchlist_button.blue:visited, body .zapAuctionSingleItem .watchlist-wrapper button.btn.blue, body .zapAuctionSingleItem .watchlist-wrapper button.btn.blue:active, body .zapAuctionSingleItem .watchlist-wrapper button.btn.blue:focus, body .zapAuctionSingleItem .watchlist-wrapper button.btn.blue:hover, body .zapAuctionSingleItem .watchlist-wrapper button.btn.blue:visited, .zapMyAccountOverview .overview-nav ul>li>a span#live_auctions_stat, body .zapMyAccountOverview .overview-nav ul>li>a span#live_auctions_stat, body .zapMyAccountInvoices #dt_auctions tr.shown td { background-color: var(--zeus-cyan-base, #008BA3) !important; } /* 41. Ensure "View more" text and icons on dashboard tiles are solid white */ /* Must override the general link color rule from section 36 - using maximum specificity */ body .page-content .zapDashboard .dashboard-stat a.more, body .page-content .zapDashboard .dashboard-stat a.more *, body .page-content .zapDashboard .dashboard-stat a.more i, body .page-content .zapDashboard .dashboard-stat.blue a.more, body .page-content .zapDashboard .dashboard-stat.blue a.more *, body .page-content .zapDashboard .dashboard-stat.blue a.more i, body .page-content .zapDashboard .dashboard-stat.green a.more, body .page-content .zapDashboard .dashboard-stat.green a.more *, body .page-content .zapDashboard .dashboard-stat.green a.more i, body .page-content .zapDashboard .dashboard-stat.grey a.more, body .page-content .zapDashboard .dashboard-stat.grey a.more *, body .page-content .zapDashboard .dashboard-stat.grey a.more i, body .page-content .zapDashboard .dashboard-stat.red a.more, body .page-content .zapDashboard .dashboard-stat.red a.more *, body .page-content .zapDashboard .dashboard-stat.red a.more i, body .page-content .zapDashboard .dashboard-stat.yellow a.more, body .page-content .zapDashboard .dashboard-stat.yellow a.more *, body .page-content .zapDashboard .dashboard-stat.yellow a.more i, body .page-content .zapDashboard .dashboard-stat.purple a.more, body .page-content .zapDashboard .dashboard-stat.purple a.more *, body .page-content .zapDashboard .dashboard-stat.purple a.more i, body .page-content .dashboard-stat a.more, body .page-content .dashboard-stat a.more *, body .page-content .dashboard-stat a.more i, body .zapDashboard .dashboard-stat a.more, body .zapDashboard .dashboard-stat a.more *, body .zapDashboard .dashboard-stat a.more i, .dashboard-stat a.more, .dashboard-stat a.more *, .dashboard-stat a.more i { color: #FFFFFF !important; opacity: 1 !important; } /* 44. Make "View more" background darker blue to match tile color */ .dashboard-stat.blue .more { background-color: #007A8F !important; /* Match main tile background instead of lighter #00ACC1 */ } /* 45. Ensure forgotPassword-link is white on blue background */ .frontLogin .login-wrapper .forgotPassword_section .forgotPassword-link, .forgotPassword-link { color: #FFFFFF !important; } /* 47. Make invoices page cyan text dark blue on light backgrounds */ body .zapMyAccountInvoices .shown-child .note h4.block, body .zapMyAccountInvoices .shown-child h4.batches-header, body .zapMyAccountInvoices #dt_auctions_details tr td:first-child, .zapMyAccountInvoices .shown-child .note h4.block, .zapMyAccountInvoices .shown-child h4.batches-header, .zapMyAccountInvoices #dt_auctions_details tr td:first-child { color: #003366 !important; /* Very dark blue instead of cyan on light backgrounds */ } /* 48. Make links in invoices tables dark blue on light backgrounds (but not buttons) */ #unpaidInvoices a:not(.btn), #paidInvoices a:not(.btn), #unpaidRegInvoices a:not(.btn), #paidRegInvoices a:not(.btn), table#unpaidInvoices a:not(.btn), table#paidInvoices a:not(.btn), table#unpaidRegInvoices a:not(.btn), table#paidRegInvoices a:not(.btn), body #unpaidInvoices a:not(.btn), body #paidInvoices a:not(.btn), body #unpaidRegInvoices a:not(.btn), body #paidRegInvoices a:not(.btn) { color: #003366 !important; /* Very dark blue instead of cyan on light backgrounds */ } /* 49. Ensure buttons in invoices tables have white text */ #unpaidInvoices .btn, #paidInvoices .btn, #unpaidRegInvoices .btn, #paidRegInvoices .btn, table#unpaidInvoices .btn, table#paidInvoices .btn, table#unpaidRegInvoices .btn, table#paidRegInvoices .btn, body #unpaidInvoices .btn, body #paidInvoices .btn, body #unpaidRegInvoices .btn, body #paidRegInvoices .btn { color: #FFFFFF !important; /* White text on buttons */ } /* 50. Make delete and reload links dark blue */ body a[href*="delete="]:not(.btn):not(.page-header):not(.navbar), body a[href*="reload="]:not(.btn):not(.page-header):not(.navbar), body a.reload:not(.btn):not(.page-header):not(.navbar), body .page-content a[href*="delete="]:not(.btn), body .page-content a[href*="reload="]:not(.btn), body .page-content a.reload:not(.btn), #status a[href*="delete="], #status a[href*="reload="], table#dt_auctions a[href*="delete="], table#dt_auctions a[href*="reload="], table a[href*="delete="], table a[href*="reload="], tbody a[href*="delete="], tbody a[href*="reload="] { color: #003366 !important; /* Very dark blue */ } /* 46a. Prevent .createAccount_section p from inheriting the section's 18px/700 heading-like * styling (zeus.min.css line 801). Without this, WAVE flags the

as a possible heading. * Reset to normal body text weight/size so only the link itself stands out. */ .frontLogin .login-wrapper .createAccount_section p { font-size: 14px; font-weight: 400; } /* 46. Ensure createAccount_section text and links are white on blue background */ body .frontLogin .login-wrapper .createAccount_section, body .frontLogin .login-wrapper .createAccount_section *, body .frontLogin .login-wrapper .createAccount_section p, body .frontLogin .login-wrapper .createAccount_section span, body .frontLogin .login-wrapper .createAccount_section a, body .frontLogin .login-wrapper .createAccount_section a:not(.btn), body .frontLogin .login-wrapper .createAccount_section .register-link, body .page-content .frontLogin .login-wrapper .createAccount_section, body .page-content .frontLogin .login-wrapper .createAccount_section *, body .page-content .frontLogin .login-wrapper .createAccount_section p, body .page-content .frontLogin .login-wrapper .createAccount_section span, body .page-content .frontLogin .login-wrapper .createAccount_section a, body .page-content .frontLogin .login-wrapper .createAccount_section a:not(.btn), body .page-content .frontLogin .login-wrapper .createAccount_section .register-link, .createAccount_section, .createAccount_section *, .createAccount_section p, .createAccount_section span, .createAccount_section a, .createAccount_section a:not(.btn), .register-link { color: #FFFFFF !important; } /* 42. Ensure links in blue portlet titles are white (override general link color) */ body .page-content .portlet.box.blue .portlet-title .caption a:not(.btn):not(.dropdown-toggle), body .page-content .portlet.box.blue .portlet-title .caption span a:not(.btn):not(.dropdown-toggle), body .portlet.box.blue .portlet-title .caption a:not(.btn):not(.dropdown-toggle), body .portlet.box.blue .portlet-title .caption span a:not(.btn):not(.dropdown-toggle) { color: #FFFFFF !important; } /* 51. Panel-heading: Remove gradients and ensure solid backgrounds with good contrast */ /* First, remove all gradients from any panel-heading - most aggressive override */ .panel-heading, .panel-heading::before, .panel-heading::after { background-image: none !important; background-repeat: no-repeat !important; filter: none !important; -webkit-filter: none !important; -ms-filter: none !important; -o-linear-gradient: none !important; } /* panel-default: solid dark gray background with light text */ body .page-content .panel-default > .panel-heading, body .panel-default > .panel-heading, .panel-default > .panel-heading { background-image: none !important; background: #555555 !important; background-color: #555555 !important; background-repeat: no-repeat !important; filter: none !important; -webkit-filter: none !important; -ms-filter: none !important; color: #FFFFFF !important; /* White text on dark gray background - 7:1 contrast */ } /* panel-primary: solid dark blue background with white text */ body .page-content .panel-primary > .panel-heading, body .panel-primary > .panel-heading, .panel-primary > .panel-heading { background-image: none !important; background: #2c5aa0 !important; background-color: #2c5aa0 !important; background-repeat: no-repeat !important; filter: none !important; -webkit-filter: none !important; -ms-filter: none !important; color: #FFFFFF !important; /* White text on dark blue background - 4.5:1 contrast */ } /* panel-success: solid dark green background with light text */ body .page-content .panel-success > .panel-heading, body .panel-success > .panel-heading, .panel-success > .panel-heading { background-image: none !important; background: #2d5016 !important; background-color: #2d5016 !important; background-repeat: no-repeat !important; filter: none !important; -webkit-filter: none !important; -ms-filter: none !important; color: #FFFFFF !important; /* White text on dark green background - 7:1 contrast */ } /* panel-info: solid dark blue background with light text - ensure no gradient */ body .page-content .panel-info > .panel-heading, body .panel-info > .panel-heading, .panel-info > .panel-heading, .panel.panel-info > .panel-heading { background-image: none !important; -webkit-background-image: none !important; -moz-background-image: none !important; -o-background-image: none !important; background: #1e5f7a !important; background-color: #1e5f7a !important; background-repeat: no-repeat !important; filter: none !important; -webkit-filter: none !important; -moz-filter: none !important; -ms-filter: none !important; -o-filter: none !important; color: #FFFFFF !important; /* White text on dark blue background - 4.5:1 contrast */ } /* panel-warning: solid dark orange/yellow background with light text */ body .page-content .panel-warning > .panel-heading, body .panel-warning > .panel-heading, .panel-warning > .panel-heading { background-image: none !important; background: #856404 !important; background-color: #856404 !important; background-repeat: no-repeat !important; filter: none !important; -webkit-filter: none !important; -ms-filter: none !important; color: #FFFFFF !important; /* White text on dark orange background - 4.5:1 contrast */ } /* panel-danger: solid dark red background with light text */ body .page-content .panel-danger > .panel-heading, body .panel-danger > .panel-heading, .panel-danger > .panel-heading { background-image: none !important; background: #721c24 !important; background-color: #721c24 !important; background-repeat: no-repeat !important; filter: none !important; -webkit-filter: none !important; -ms-filter: none !important; color: #FFFFFF !important; /* White text on dark red background - 4.5:1 contrast */ } /* Exception: Front FAQ page - panel headings should have no background color */ /* Must have higher specificity than general panel-heading rules (body .page-content .panel-default > .panel-heading) */ /* Using maximum specificity to ensure override */ body .page-content.bgGradient .frontFAQ .panel-default > .panel-heading, body .page-content .frontFAQ .panel-default > .panel-heading, body .page-content.bgGradient .frontFAQ .panel-heading, body .page-content .frontFAQ .panel-heading, body .frontFAQ .panel-default > .panel-heading, body .frontFAQ .panel-heading, .frontFAQ .panel-default > .panel-heading, .frontFAQ .panel-heading { background: transparent !important; background-color: transparent !important; background-image: none !important; background-repeat: no-repeat !important; filter: none !important; -webkit-filter: none !important; -moz-filter: none !important; -ms-filter: none !important; -o-filter: none !important; color: inherit !important; /* Use default text color instead of white */ } /* 52. Form labels - ensure good contrast on light backgrounds */ body .page-content .form-group label, body .page-content .form-group label[for], .form-group label, .form-group label[for] { color: #333333 !important; /* Dark text on light background - 12.6:1 contrast */ } /* 53. Font-green class - fix low contrast on white background */ /* #8BC34A on white = 2.3:1, needs 4.5:1 - use darker green */ body .page-content .font-green, body .font-green, .font-green { color: #2d5016 !important; /* Dark green text on white background - 7:1 contrast (was #8BC34A = 2.3:1) */ } /* 54. Register page invalid class - #ec3f41 on white = 3.1:1, needs 4.5:1 */ .frontRegister .invalid, .invalid { color: #B71C1C !important; /* Darker red for 4.5:1 contrast on white (was #ec3f41 = 3.1:1) */ } /* 55. Register page valid class - #3a7d34 on white = 4.6:1, but darken slightly for better contrast */ .frontRegister .valid, .valid { color: #2d5016 !important; /* Darker green for 7:1 contrast on white (was #3a7d34 = 4.6:1) */ } /* 56. Help block text - ensure good contrast on light backgrounds */ .help-block, .help-block em, .help-block span { color: #666666 !important; /* Dark gray text on light background - 5.7:1 contrast */ } /* ======================================== * WCAG 2.4.7 Focus Visible (Level AA) * ======================================== * Add visible focus indicators to replace removed outlines * Focus indicators must be at least 2px and have 3:1 contrast ratio */ /* 57. Links - visible focus indicator */ a:focus { outline: 2px solid #005f9f !important; /* Blue outline - 3:1 contrast on white */ outline-offset: 2px !important; text-decoration: underline !important; } /* 58. Buttons - visible focus indicator */ button:focus, .btn:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus { outline: 2px solid #005f9f !important; /* Blue outline - 3:1 contrast */ outline-offset: 2px !important; box-shadow: 0 0 0 2px rgba(0, 95, 159, 0.3) !important; /* Additional visual indicator */ } /* 59. Form inputs - visible focus indicator */ input:focus, select:focus, textarea:focus, .form-control:focus { outline: 2px solid #005f9f !important; /* Blue outline - 3:1 contrast */ outline-offset: 2px !important; border-color: #005f9f !important; box-shadow: 0 0 0 2px rgba(0, 95, 159, 0.2) !important; /* Additional visual indicator */ } /* 60. Interactive elements - visible focus indicator */ [tabindex]:focus, [role="button"]:focus, [role="link"]:focus, [role="menuitem"]:focus, [role="tab"]:focus { outline: 2px solid #005f9f !important; /* Blue outline - 3:1 contrast */ outline-offset: 2px !important; } /* 61. Checkboxes and radio buttons - visible focus indicator */ input[type="checkbox"]:focus, input[type="radio"]:focus { outline: 2px solid #005f9f !important; /* Blue outline - 3:1 contrast */ outline-offset: 2px !important; box-shadow: 0 0 0 2px rgba(0, 95, 159, 0.3) !important; } /* 62. Select2 dropdowns - visible focus indicator */ .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--multiple:focus { outline: 2px solid #005f9f !important; /* Blue outline - 3:1 contrast */ outline-offset: 2px !important; border-color: #005f9f !important; } /* 63. Navigation menu items - visible focus indicator */ .navbar-nav > li > a:focus, .navbar-nav > li > .dropdown-toggle:focus, .hor-menu .navbar-nav > li > a:focus { outline: 2px solid #005f9f !important; /* Blue outline - 3:1 contrast */ outline-offset: 2px !important; background-color: rgba(0, 95, 159, 0.1) !important; /* Subtle background highlight */ } /* 64. General links - visible focus indicator */ a:focus { outline: 2px solid #005f9f !important; outline-offset: 2px !important; } /* 65. Sidebar navigation links - visible focus indicator */ .page-sidebar-menu > li > a:focus { outline: 2px solid #ffffff !important; /* White outline for dark sidebar background */ outline-offset: 2px !important; background-color: #464646 !important; /* Solid background prevents transparent flash on click */ } /* 65b. Sidebar navigation links - active (click/mousedown) state. * The theme uses transition:all 0.2s ease on fixed-sidebar links, which causes * background-color to animate toward transparent when :active has no bg set. * Set an explicit dark background so it never appears transparent on click. */ .page-sidebar-menu > li > a:active, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a:active { background-color: #282828 !important; /* Darker than hover (#303030) - clear click feedback */ outline: none !important; /* No outline on click - outline is for keyboard :focus only */ transition-duration: 0s !important; /* Instant response - no animated fade on click */ } /* Active item (current page) keeps a slightly-darker yellow on click (matches theme hover #FFA000) */ .page-sidebar-menu > li.active > a:active, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a:active { background-color: #FF8F00 !important; /* Darker amber than hover #FFA000 - natural press feedback */ } /* 66. Minimum touch target size (WCAG 2.2 SC 2.5.8) */ .btn, button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"] { min-height: 24px; min-width: 24px; } /* 71. DEMO auction badge - replaces deprecated (#FF0000 on white = 4.0:1, fails AA) * Uses #b52b27 background with white text for 6.29:1 contrast (passes AA + AAA) */ .label-demo { background-color: #b52b27; color: #ffffff; padding: 2px 5px; border-radius: 3px; font-size: 75%; font-weight: bold; vertical-align: middle; } /* 67. Bootstrap btn-danger - white text on #d9534f = 3.97:1, fails AA (needs 4.5:1) */ /* Darken to #b52b27 for 6.29:1 contrast with white text */ .btn-danger, .btn-danger.active, .btn-danger:active, .open > .dropdown-toggle.btn-danger { background-color: #b52b27 !important; border-color: #a02522 !important; color: #ffffff !important; } .btn-danger:hover, .btn-danger:focus { background-color: #9e2420 !important; border-color: #8b1f1b !important; color: #ffffff !important; } /* 68. Zeus theme btn-success teal #45B6AF with white text = 2.45:1, fails AA (needs 4.5:1) */ /* Darken to #1a7872 for 5.29:1 contrast with white text */ .btn-success, .btn-success.active, .btn-success:active, .open > .dropdown-toggle.btn-success { background-color: #1a7872 !important; border-color: #145f5a !important; color: #ffffff !important; } .btn-success:hover, .btn-success:focus { background-color: #145f5a !important; border-color: #104d49 !important; color: #ffffff !important; } /* 70. Bootstrap/Zeus .warning table rows: theme applies #8a6d3b text on #faf2cc bg = 4.31:1 (fails) */ /* Darken to #7a5f31 for 5.30:1 on #faf2cc warning row background */ .table > thead > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > td, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th, .table > thead > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > td.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > td.warning, .table > tfoot > tr > th.warning, tr.warning > td, tr.warning > th { color: #7a5f31 !important; /* 5.30:1 on #faf2cc, 5.64:1 on #fcf8e3 warning backgrounds */ } /* Also cover inline-colored elements inside warning rows */ tr.warning small, .table tr.warning small { color: #7a5f31 !important; } /* 69. Prevent false positives for visually-hidden .sr-only elements. * Per WCAG SC 1.4.3: content "not visible to anyone" is exempt from contrast requirements. * .sr-only is clipped to 1×1px so no pixels are rendered. * Screen readers are unaffected — they read text nodes, not CSS color values. * * Strategy: use context-aware colours so the computed text/bg pair always passes 4.5:1, * silencing tools that do not understand the sr-only exemption. * * Light backgrounds (page content, portlets, white areas): * color: transparent → tool reads rgba(0,0,0,0) on white → interprets as black-on-white * = 21:1 → passes, or tool skips transparent text entirely. * * Dark navbar background (#1f1f1f): * color: #ffffff → white on #1f1f1f = 16.5:1 → passes. */ .sr-only { color: #000000 !important; /* Black on any light bg ≥ 4.5:1; dark-bg contexts are overridden to #ffffff by more-specific rules below */ background-color: transparent !important; } /* Dark top-navbar (#1f1f1f) and frontend pagehead navbar: force white text */ /* white on #1f1f1f = 16.5:1 contrast — passes AA and AAA */ /* Also covers frontnaviowa.php which uses the same .navbar-pagehead class */ .page-header.navbar .sr-only, .navbar-pagehead .sr-only { color: #ffffff !important; } /* Colored portlet-title search labels (.portlet-input .sr-only) */ /* Zeus portlet.box.{color} backgrounds: Blue #007A8F=5.0:1, Green #4A7C2A=5.0:1, Yellow #B8540A=4.9:1, Red #D73D0F=4.6:1, Purple #9C27B0=6.3:1 — all pass with white */ .portlet.box.blue > .portlet-title .portlet-input .sr-only, .portlet.box.green > .portlet-title .portlet-input .sr-only, .portlet.box.yellow > .portlet-title .portlet-input .sr-only, .portlet.box.red > .portlet-title .portlet-input .sr-only, .portlet.box.purple > .portlet-title .portlet-input .sr-only, .portlet.box.grey > .portlet-title .portlet-input .sr-only { color: #ffffff !important; } /* sr-only inside colored buttons (e.g. "Remove" span in btn-danger) */ /* Our darkened btn-danger (#b52b27) and btn-success (#1a7872) both pass with white */ .btn-danger .sr-only, .btn-success .sr-only, .btn-primary .sr-only, .btn-warning .sr-only, .btn-info .sr-only, .btn.blue .sr-only, .btn.red .sr-only, .btn.green .sr-only, .btn.yellow .sr-only, .btn.purple .sr-only { color: #ffffff !important; } /* 72. Language selector native renders directly. * * Dark navbar (.backend / navbar-inverse): white text on dark bg. * White (#ffffff) on #2a2a2a = 16.75:1 — passes WCAG AA. * * White navbar (.frontend / navbar-default): dark text on white bg (inverted). * #333333 on #ffffff = 12.63:1 — passes WCAG AA. * * Option elements use browser defaults (white bg, dark text) which are already accessible. */ .backend #LanguageSelector { color: #ffffff !important; background-color: #2a2a2a !important; border: 1px solid #666666 !important; } .frontend #LanguageSelector { color: #333333 !important; background-color: #ffffff !important; border: 1px solid #aaaaaa !important; } #LanguageSelector option { color: #333333; background-color: #ffffff; } /* 73. Registration step-indicator number bubbles - bg-grey (#9E9E9E) with white text = ~2.6:1, fails AA. * Darken inactive step circles to #767676 (4.55:1 with white) to pass WCAG 1.4.3. */ .number.bg-grey { background-color: #767676 !important; border-color: #767676 !important; } /* 74. Registration info dl-horizontal - Bootstrap 3 dl-horizontal right-aligns

by default. * Override to left-align so the label column matches the original table appearance. */ .register-info-dl.dl-horizontal dt { text-align: left; } /* 76. Auction item page - replace layout tables with semantic containers while preserving the * existing two-column visual treatment used in the item details sidebar. */ body .zapAuctionSingleItem .auction-item-info .auction-item-details { margin: 0; } body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row { display: flex; margin: 0 0 8px; } body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row dt, body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row dd { border: 0; line-height: 22px; margin: 0; padding: 0; width: 50%; } body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row dt { font-weight: 300; padding-right: 12px; text-transform: uppercase; } body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row dd { font-weight: 600; } body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row-stacked { display: block; } body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row-stacked dt, body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row-stacked dd { width: auto; } body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row-stacked dt { margin-bottom: 6px; } body .zapAuctionSingleItem .auction-item-info .auction-item-detail-spacer { height: 12px; } body .zapAuctionSingleItem .auction-item-info .auction-item-history-table, body .zapAuctionSingleItem .auction-item-info .auction-item-links, body .zapAuctionSingleItem .auction-item-info .auction-item-text-block { margin-bottom: 18px; } body .zapAuctionSingleItem .auction-item-info .auction-item-links .btn { display: block; margin-bottom: 10px; } body .zapAuctionSingleItem .auction-item-info .auction-item-text-block textarea { max-width: 100%; } @media (max-width: 767px) { body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row { display: block; } body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row dt, body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row dd { width: auto; } body .zapAuctionSingleItem .auction-item-info .auction-item-detail-row dt { margin-bottom: 2px; } } /* 75. Portlet tool icons - theme CSS only skins anchor tags, but several updated modules now use * accessible