/* * ANDPRO semantic attention system G3. * Activation is opt-in: load last and add `ap-attention-v1` to . * One conversion primary per task; violet is reserved for context/selection. * Existing family CSS stays untouched and remains the rollback preimage. */ html.ap-attention-v1 { --ap-attention-primary-bg: #f6c15f; --ap-attention-primary-hover: #e7a92f; --ap-attention-primary-active: #cc8d13; --ap-attention-primary-fg: #222466; --ap-attention-secondary-bg: #ffffff; --ap-attention-secondary-hover: #eef0fb; --ap-attention-secondary-fg: #343a92; --ap-attention-secondary-border: #727bb5; --ap-attention-focus: #0067c5; --ap-attention-selection-bg: #eef0fb; --ap-attention-selection-border: #575fcf; --ap-attention-selection-fg: #222466; --ap-attention-success-bg: #eaf8f1; --ap-attention-success-border: #23845a; --ap-attention-success-fg: #136b43; --ap-attention-warning-bg: #fff4d6; --ap-attention-warning-border: #a66d00; --ap-attention-warning-fg: #704900; --ap-attention-error-bg: #fff0f1; --ap-attention-error-border: #b4232f; --ap-attention-error-fg: #98202a; --ap-attention-info-bg: #edf6ff; --ap-attention-info-border: #0f5f9a; --ap-attention-info-fg: #0b507f; --ap-attention-disabled-bg: #e9edf2; --ap-attention-disabled-border: #c0c6cf; --ap-attention-disabled-fg: #515a67; } /* One visible, accessible focus language across every family. */ html.ap-attention-v1 :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ap-attention-focus) !important; outline-offset: 3px !important; } /* Conversion primary: purchase, quote, order, payment recovery or service request. */ html.ap-attention-v1 :where( .ap-attention-primary, .catalog-card .card-btn.--buy, .itempage-content__buyblock .card-btn.--buy, .itempage-stickybar__buy, .cf-total-box__btn, .cfgsrv-cta, .nwheader-cart .cf-button.toorder, .order-page .--create-order, .content-block__order .--create-order, .andpro-payment-return__button, .ap-action--primary, .ap-services-action--primary, .contacts-action--primary, .abh-btn--yellow, .cf-button.--primary ) { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--ap-attention-primary-bg) !important; border-radius: 8px; background: var(--ap-attention-primary-bg) !important; color: var(--ap-attention-primary-fg) !important; font-weight: 800; box-shadow: none; opacity: 1; text-decoration: none; } html.ap-attention-v1 :where( .ap-attention-primary, .catalog-card .card-btn.--buy, .itempage-content__buyblock .card-btn.--buy, .itempage-stickybar__buy, .cf-total-box__btn, .cfgsrv-cta, .nwheader-cart .cf-button.toorder, .order-page .--create-order, .content-block__order .--create-order, .andpro-payment-return__button, .ap-action--primary, .ap-services-action--primary, .contacts-action--primary, .abh-btn--yellow, .cf-button.--primary ):hover { border-color: var(--ap-attention-primary-hover) !important; background: var(--ap-attention-primary-hover) !important; color: var(--ap-attention-primary-fg) !important; transform: none; } html.ap-attention-v1 :where( .ap-attention-primary, .catalog-card .card-btn.--buy, .itempage-content__buyblock .card-btn.--buy, .itempage-stickybar__buy, .cf-total-box__btn, .cfgsrv-cta, .nwheader-cart .cf-button.toorder, .order-page .--create-order, .content-block__order .--create-order, .andpro-payment-return__button, .ap-action--primary, .ap-services-action--primary, .contacts-action--primary, .abh-btn--yellow, .cf-button.--primary ):active { border-color: var(--ap-attention-primary-active) !important; background: var(--ap-attention-primary-active) !important; } /* Secondary/contextual actions are first-class, but never compete with conversion. */ html.ap-attention-v1 :where( .ap-attention-secondary, .cf-button.--default, .cf-button.--white-outline, .andpro-cart-kp, .ap-invoice-btn, .abh-btn--primary, .article-side__button, .ap-action--light, .ap-services-action--light, .contacts-action:not(.contacts-action--primary):not(.contacts-action--accent) ) { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--ap-attention-secondary-border) !important; border-radius: 8px; background: var(--ap-attention-secondary-bg) !important; color: var(--ap-attention-secondary-fg) !important; font-weight: 800; box-shadow: none; opacity: 1; text-decoration: none; } html.ap-attention-v1 :where( .ap-attention-secondary, .cf-button.--default, .cf-button.--white-outline, .andpro-cart-kp, .ap-invoice-btn, .abh-btn--primary, .article-side__button, .ap-action--light, .ap-services-action--light, .contacts-action:not(.contacts-action--primary):not(.contacts-action--accent) ):hover { border-color: var(--ap-attention-secondary-border) !important; background: var(--ap-attention-secondary-hover) !important; color: var(--ap-attention-secondary-fg) !important; transform: none; } /* Selection/current state: violet has a single job and always has a non-color cue. */ html.ap-attention-v1 :where( .catalog-head__filters li.--active a, .catalog-controls__btn.--active, .itempage-info__tab-link.--active, .itempage-specchips__chip[aria-selected="true"], .cfgsrv-chip[aria-pressed="true"], .cfgsrv-slot[data-active="1"], .cfgsrv-prod[data-selected="1"], .abh-chip--active, .blog-category a.--active, .page-side__link.selected, [aria-current="page"], .order-page__select-btn input:checked + .order-select ) { border-color: var(--ap-attention-selection-border) !important; background: var(--ap-attention-selection-bg) !important; color: var(--ap-attention-selection-fg) !important; } html.ap-attention-v1 :where( .catalog-head__filters li.--active a, .abh-chip--active, .blog-category a.--active )::before { content: "✓"; margin-right: 6px; font-weight: 900; } html.ap-attention-v1 :where(.abh-chip, .catalog-head__filters a, .blog-category a) { text-decoration: none; } html.ap-attention-v1 .cfgsrv-prod[data-selected="1"] .cfgsrv-prod__pick::before { content: "✓ "; font-weight: 900; } /* Editorial/navigation CTAs remain calm unless explicitly promoted. */ html.ap-attention-v1 :where(.abh-btn, .ap-action, .ap-services-action, .contacts-action) { text-decoration: none; } html.ap-attention-v1 .andpro-payment-return__link { min-height: 45px; color: var(--ap-attention-secondary-fg) !important; font-weight: 800; } html.ap-attention-v1 :where( .abh-btn:not(.abh-btn--yellow):not(.abh-btn--primary), .ap-action:not(.ap-action--primary):not(.ap-action--yellow):not(.ap-action--light), .ap-services-action:not(.ap-services-action--primary):not(.ap-services-action--yellow):not(.ap-services-action--light) ) { border-color: var(--ap-attention-secondary-border); background: var(--ap-attention-secondary-bg); color: var(--ap-attention-secondary-fg) !important; } /* Status colors are semantic, never decorative, and include symbols/text. */ html.ap-attention-v1 :where( .ap-attention-success, .card-stock, .cfgsrv-stockbadge, .nwheader-cart-item__bonus.--instock, .andpro-payment-return[data-state="paid"] .andpro-payment-return__eyebrow ) { border-color: var(--ap-attention-success-border) !important; background: var(--ap-attention-success-bg) !important; color: var(--ap-attention-success-fg) !important; } html.ap-attention-v1 :where( .ap-attention-success, .cfgsrv-stockbadge, .andpro-payment-return[data-state="paid"] .andpro-payment-return__eyebrow )::before { content: "✓ "; font-weight: 900; } html.ap-attention-v1 :where( .ap-attention-warning, .cfgsrv-orderbadge, .cfgsrv-slot__warn, .andpro-payment-return[data-state="pending"] .andpro-payment-return__eyebrow, .andpro-payment-return[data-state="incomplete"] .andpro-payment-return__eyebrow ) { border-color: var(--ap-attention-warning-border) !important; background: var(--ap-attention-warning-bg) !important; color: var(--ap-attention-warning-fg) !important; } html.ap-attention-v1 :where( .ap-attention-warning, .cfgsrv-orderbadge, .andpro-payment-return[data-state="pending"] .andpro-payment-return__eyebrow, .andpro-payment-return[data-state="incomplete"] .andpro-payment-return__eyebrow )::before { content: "! "; font-weight: 900; } html.ap-attention-v1 :where( .ap-attention-error, .form-error-text, .order-contact__error, .order-total__error, .error_add_coupon, .andpro-payment-return[data-state="cancelled"] .andpro-payment-return__eyebrow, .andpro-payment-return[data-state="failed"] .andpro-payment-return__eyebrow ) { border-color: var(--ap-attention-error-border) !important; background: var(--ap-attention-error-bg) !important; color: var(--ap-attention-error-fg) !important; } html.ap-attention-v1 :where( .ap-attention-error, .andpro-payment-return[data-state="cancelled"] .andpro-payment-return__eyebrow, .andpro-payment-return[data-state="failed"] .andpro-payment-return__eyebrow )::before { content: "× "; font-weight: 900; } html.ap-attention-v1 .ap-attention-info { border-color: var(--ap-attention-info-border); background: var(--ap-attention-info-bg); color: var(--ap-attention-info-fg); } html.ap-attention-v1 .ap-attention-info::before { content: "i "; font-weight: 900; } /* Invalid fields retain the same strong focus geometry, in error semantics. */ html.ap-attention-v1 :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--ap-attention-error-border) !important; box-shadow: 0 0 0 3px rgba(180, 35, 47, 0.14) !important; } /* Disabled is visually stable, readable and never faked through opacity alone. */ html.ap-attention-v1 :where( button:disabled, input:disabled, select:disabled, .cf-button[aria-disabled="true"], .form-radio-label.--disabled, .catalog-head__filters li.disabled a ) { border-color: var(--ap-attention-disabled-border) !important; background: var(--ap-attention-disabled-bg) !important; color: var(--ap-attention-disabled-fg) !important; cursor: not-allowed !important; opacity: 1 !important; } /* Commerce/touch controls use a render-safe 45px floor. */ html.ap-attention-v1 :where( .card-quant__btn, .nwheader-cart-item__btn, .cfgsrv-qty button, .cfgsrv-prod__pick, .cfgsrv-chip, .filter-btn, .order-page__select-btn, .cf-button, .ap-action, .ap-services-action, .contacts-action, .abh-btn ) { min-height: 45px; } html.ap-attention-v1 :where(.card-quant__btn, .nwheader-cart-item__btn, .cfgsrv-qty button) { min-width: 45px; } @media (max-width: 640px) { html.ap-attention-v1 :where( .ap-attention-primary, .catalog-card .card-btn.--buy, .itempage-content__buyblock .card-btn.--buy, .itempage-stickybar__buy, .cfgsrv-cta, .nwheader-cart .cf-button.toorder, .order-page .--create-order, .andpro-payment-return__button, .ap-services-action--primary, .cf-button.--primary ) { width: 100%; } } @media (prefers-reduced-motion: reduce) { html.ap-attention-v1 :where(a, button, input, select, textarea) { transition: none !important; } }