/* * templates/orderforms/standard_cart/css/restyle-tokens.css * * 19P-149 / VANTDEV-35 — standard_cart order-form token layer. * * WHY THIS FILE EXISTS AND WHAT IT DOES NOT DO: * standard_cart is a separate Smarty template family * (templates/orderforms/standard_cart/) with its own hardcoded CSS * (style.css, css/{style,all,all.min}.css). It shares ZERO stylesheet * references with templates/twenty-one (verified by grep, no url()/href * cross-references) -- see .claude/manifests/portal-ui-audit/ * THEME-ARCHITECTURE.md section 5. * * HOWEVER: order-form pages (cart.php?a=view etc.) ARE still wrapped by * the active client theme's header.tpl/footer.tpl -- standard_cart has no * header.tpl/footer.tpl of its own on disk. Confirmed 2026-08-15 by a * live fetch of https://web.3vs.io/cart.php?a=view: the rendered * carries data-theme="strategic" (set by twenty-one/header.tpl), and * templates/twenty-one/css/report-tokens.css IS present in , loaded * via includes/hooks/vantage_report_tokens.php's ClientAreaHeadOutput * hook (priority 9999) -- which fires unconditionally on every * client-area page, order forms included. So the design-token custom * properties (--background, --primary, --border, ...) from * report-tokens.css ARE ALREADY IN SCOPE on every order-form page. * * The reason order forms still look unstyled/mismatched is NOT a missing * token layer -- it's that standard_cart's own CSS (css/all.min.css) uses * hardcoded literal colors (#fff, #f8f8f8, #333, #058, #5cb85c, ...) * instead of var(--*) tokens, AND -- confirmed by a live fetch after * this hook was first deployed -- css/all.min.css is injected by WHMCS * core (not the ClientAreaHeadOutput hook chain) and is therefore always * the LAST in , after every hook-injected stylesheet * including this one at priority 10000. Equal-specificity rules * (#order-standard_cart .foo, 1,1,0 both sides) resolve by source order, * so without a specificity bump css/all.min.css's literal colors would * still win despite loading "after" report-tokens.css in the recon. * * FIX APPLIED: every selector below repeats the ID * (#order-standard_cart#order-standard_cart .foo -- valid CSS, same * element matched twice), which raises specificity to two ID selectors * instead of one, unconditionally beating standard_cart's original * single-ID rules regardless of load order. No !important is used -- * if a future standard_cart edit itself uses two ID selectors or inline * styles, this file loses the tie loudly (visible mismatch) rather than * silently overriding via !important. * * THIS FILE therefore does NOT redefine a parallel palette. It re-maps * standard_cart's existing hardcoded colors onto the SAME custom * properties report-tokens.css already declares. That means: * - it inherits whichever data-theme is active automatically (strategic * dark/gold today, vantage-light if/when the theme picker is used) -- * no separate light/dark block needed here, ever; * - if report-tokens.css is retuned later, this file does not need a * matching edit, because it never hardcodes a color itself. * * Loader: includes/hooks/vantage_orderform_tokens.php (new, this pass). * Sequenced AFTER c17 (report-tokens.css) landing per the task brief -- * verified landed 2026-08-15 (templates/twenty-one/css/report-tokens.css, * mtime Aug 5 18:21, already live) before this file was written. */ /* ---- Page chrome / containers ---- */ #order-standard_cart#order-standard_cart .categories-collapsed, #order-standard_cart#order-standard_cart .products .product header, #order-standard_cart#order-standard_cart .domain-selection-options .option, #order-standard_cart#order-standard_cart .product-info, #order-standard_cart#order-standard_cart .summary-container, #order-standard_cart#order-standard_cart .view-cart-tabs .nav-tabs > li.active > a, #order-standard_cart#order-standard_cart .view-cart-tabs .tab-content, #order-standard_cart#order-standard_cart .field[disabled], #order-standard_cart#order-standard_cart .field[readonly] { background-color: var(--muted); } #order-standard_cart#order-standard_cart .categories-collapsed select, #order-standard_cart#order-standard_cart .products .product header span, #order-standard_cart#order-standard_cart .panel-addon .panel-body label, #order-standard_cart#order-standard_cart .order-summary .btn-continue-shopping { color: var(--foreground); } #order-standard_cart#order-standard_cart label, #order-standard_cart#order-standard_cart .products .product header .qty, #order-standard_cart#order-standard_cart .field-help-text, #order-standard_cart#order-standard_cart .order-summary .recurring-charges { color: var(--muted-foreground); } /* ---- Cards (products, panels) ---- */ #order-standard_cart#order-standard_cart .products .product, #order-standard_cart#order-standard_cart .view-cart-items .item, #order-standard_cart#order-standard_cart .view-cart-promotion-code, #order-standard_cart#order-standard_cart .field, #order-standard_cart#order-standard_cart .form-control { background: var(--card); color: var(--card-foreground); border-color: var(--border); } #order-standard_cart#order-standard_cart .view-cart-items .item:nth-child(even) { background-color: var(--muted); } #order-standard_cart#order-standard_cart .form-control:focus { border-color: var(--ring); } /* ---- Borders / dividers ---- */ #order-standard_cart#order-standard_cart .sub-heading, #order-standard_cart#order-standard_cart .order-summary .subtotal, #order-standard_cart#order-standard_cart .order-summary .bordered-totals, #order-standard_cart#order-standard_cart .order-summary .summary-totals, #order-standard_cart#order-standard_cart .view-cart-promotion-code { border-color: var(--border); } #order-standard_cart#order-standard_cart .sub-heading span { background-color: var(--background); color: var(--primary); } /* ---- Brand / primary accent (was #058 / #056 dark-teal literal) ---- */ #order-standard_cart#order-standard_cart .view-cart-items-header, #order-standard_cart#order-standard_cart .empty-cart .btn { background-color: var(--primary); color: var(--primary-foreground); } #order-standard_cart#order-standard_cart .view-cart-items { border-bottom-color: var(--primary); } #order-standard_cart#order-standard_cart .view-cart-items .item-domain { color: var(--primary); } /* ---- Success / add-to-cart accent (was Bootstrap #5cb85c literal) ---- */ #order-standard_cart#order-standard_cart .panel-addon .panel-add, #order-standard_cart#order-standard_cart .panel-addon-selected .panel-price { background-color: var(--v2-up-fg); color: var(--primary-foreground); } #order-standard_cart#order-standard_cart .panel-addon-selected { border-color: var(--v2-up-fg); } #order-standard_cart#order-standard_cart .domain-checker-available { color: var(--v2-up-fg); } /* ---- Danger / unavailable accent (was Bootstrap #d9534f / #a94442) ---- */ #order-standard_cart#order-standard_cart .domain-checker-unavailable { color: var(--destructive); } #order-standard_cart#order-standard_cart .btn-remove-from-cart:hover { color: var(--destructive); } #order-standard_cart#order-standard_cart .panel-addon-selected .panel-add { background-color: var(--v2-down-bg); color: var(--v2-down-fg); } /* ---- Order summary header block (was literal #666 dark-grey band) ---- */ #order-standard_cart#order-standard_cart .order-summary { background-color: var(--secondary); border-bottom-color: var(--border); } #order-standard_cart#order-standard_cart .order-summary h2 { color: var(--secondary-foreground); } #order-standard_cart#order-standard_cart .order-summary .loader { color: var(--muted-foreground); } /* ---- Misc small text accents ---- */ #order-standard_cart#order-standard_cart .products .product div.product-desc, #order-standard_cart#order-standard_cart .field-icon i, #order-standard_cart#order-standard_cart .btn-remove-from-cart { color: var(--muted-foreground); }