, which ships with Bootstrap's light-grey header background. Something upstream already sets client-area headings to white for the dashboard cards, so on this *unthemed* header the name goes white-on-light-grey -> invisible. Worst issue; fixed structurally in 10.1/10.2 by theming the header surface itself rather than patching the text colour alone. 2. The product image column is WHMCS's stock "no image" placeholder: a light-grey box with a white circular icon, unthemed. 10.3 wraps it in an intentional dark frame instead of trying to recolour raster/SVG placeholder content (which would risk mis-colouring a real product photo too). 3. The meta column (Registration Date, First Payment Amount, Recurring Amount, Quantity, Billing Cycle, Next Due Date, Payment Method) is the stock `.row.text-center > [col-*]` pattern -- each stat a centred
label
value
pair. 10.4 re-flows it into a left-aligned, themed label/value stack. 4. None of it inherits the dark Vantage surface tokens the dashboard cards use. 10.1/10.5 apply the same card/table/list-group re-skin already used for order forms (section 9) to #main-content generally, so services, invoices, quotes and the ticket view get the same fix for the same class of light-on-light regression without needing page-specific selectors. Everything here is scoped to #main-content, so it cannot reach the admin area, and is additive (removing the in includes/head.tpl restores the previous, broken appearance exactly). Hedges both the Bootstrap 3 `.panel*` and Bootstrap 4 `.card*` idioms because Twenty-One's stock templates mix vocabulary across pages. ========================================================================== */ /* ---- 10.1 Panel / card surfaces -> dark Vantage card ---- */ #main-content .panel, #main-content .card, #main-content .well { background: var(--vantage-background-card, var(--card)); border: 1px solid var(--vantage-border, var(--border)); color: var(--vantage-text, var(--foreground)); border-radius: 10px; } #main-content .panel-heading, #main-content .card-header { /* Stage C 2026-07-31 layout restyle: was `--vantage-secondary`, a tinted bar. Now matches the card body so the heading reads as a hairline- separated band, consistent with the base .card-header/.panel-heading change in custom.css. This ID-specificity rule is what actually WINS on every in-content panel -- the class-level rule in custom.css cannot beat it -- so the restyle is incomplete without changing it here too (confirmed live on cart.php: headings still measured rgb(26,26,37)). The explicit `color` is retained: 10.2 exists to guarantee legibility regardless of what the page ships, and that requirement is unchanged. */ background: var(--vantage-background-card, var(--card)); border-bottom: 1px solid var(--vantage-border, var(--border)); color: var(--vantage-text, var(--foreground)); } /* ---- 10.2 Requirement 1: the heading must never depend on an image or a light background for legibility. Force it onto the themed header above in high-contrast text (WCAG AA), regardless of any inline style or utility class shipped by the page. ---- */ #main-content .panel-heading .panel-title, #main-content .panel-heading h1, #main-content .panel-heading h2, #main-content .panel-heading h3, #main-content .panel-heading h4, #main-content .card-header .card-title, #main-content .card-header h1, #main-content .card-header h2, #main-content .card-header h3, #main-content .card-header h4 { color: var(--vantage-text, var(--foreground)) !important; background: transparent !important; text-shadow: none; font-weight: 600; } /* Status badges in the header keep their own semantic colour (success/ danger/warning), but Bootstrap's neutral `.label-default`/`.badge-secondary` is grey-on-grey against the new dark header and needs a themed floor. */ #main-content .panel-heading .label-default, #main-content .card-header .label-default, #main-content .panel-heading .badge-secondary, #main-content .card-header .badge-secondary { background: var(--vantage-secondary, var(--secondary)); color: var(--vantage-text, var(--foreground)); border: 1px solid var(--vantage-border, var(--border)); } /* ---- 10.3 Requirement 2: product image / status block ---- */ /* Give the image's own grid column an intentional themed frame so a bare placeholder reads as a designed panel rather than a broken light box. The :has() selector targets only a column whose sole content is the image (so columns that mix an image with other content are left alone); browsers without :has() get the broader, still-non-destructive fallback below. */ #main-content .card-body > .row > [class*="col-"]:has(> img.img-responsive:only-child), #main-content .panel-body > .row > [class*="col-"]:has(> img.img-responsive:only-child) { background: var(--vantage-secondary, var(--secondary)); border: 1px solid var(--vantage-border, var(--border)); border-radius: 10px; padding: 16px; display: flex; align-items: center; justify-content: center; } #main-content img.img-responsive { border-radius: 8px; max-width: 100%; } @supports not selector(:has(*)) { #main-content .card-body > .row > [class*="col-"], #main-content .panel-body > .row > [class*="col-"] { background: var(--vantage-secondary, var(--secondary)); border-radius: 10px; } } /* ---- 10.4 Requirement 3: meta column -> left-aligned themed definition list ---- */ /* Stock markup: `.row.text-center > [col-*]`, each column a centredlabel
value
pair. Re-flow into a left-aligned label/value stack with clear hierarchy -- muted uppercase label, bold value -- matching the dashboard's stat-card rhythm, with tabular figures so amounts line up. */ #main-content .card-body .row.text-center, #main-content .panel-body .row.text-center { text-align: left; row-gap: 16px; } #main-content .card-body .row.text-center > [class*="col-"], #main-content .panel-body .row.text-center > [class*="col-"] { text-align: left; padding: 12px 16px; border-left: 2px solid var(--vantage-border, var(--border)); } #main-content .card-body .row.text-center > [class*="col-"] p:first-child, #main-content .panel-body .row.text-center > [class*="col-"] p:first-child { margin: 0 0 4px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vantage-text-muted, var(--muted-foreground)); } #main-content .card-body .row.text-center > [class*="col-"] p:last-child, #main-content .panel-body .row.text-center > [class*="col-"] p:last-child { margin: 0; font-size: 1rem; font-weight: 600; color: var(--vantage-text, var(--foreground)); font-variant-numeric: tabular-nums; } /* ---- 10.5 Requirement 4: body copy, tables and list-groups inherit the dark surface (services, invoices, quotes, ticket view) ---- */ #main-content .panel-body, #main-content .card-body, #main-content .well { color: var(--vantage-text, var(--foreground)); } #main-content .table, #main-content .table > * { color: var(--vantage-text, var(--foreground)); } #main-content .table > tbody > tr > td, #main-content .table > tbody > tr > th, #main-content .table-list > tbody > tr > td { border-color: var(--vantage-border, var(--border)); } #main-content .list-group-item { background: transparent; border-color: var(--vantage-border, var(--border)); color: var(--vantage-text, var(--foreground)); } /* Scoped to inline body copy inside the re-skinned surfaces, not the whole of #main-content -- an ID-level `#main-content a` rule would outrank the .vantage-btn button classes used throughout the dashboard/sidebar (ID beats class in specificity) and could repaint button text to match its own background, re-introducing the same low-contrast defect this section fixes. .vantage-btn is excluded explicitly as a second guard. */ #main-content .panel-body a:not(.vantage-btn), #main-content .card-body a:not(.vantage-btn), #main-content .well a:not(.vantage-btn) { color: var(--vantage-link); } #main-content .text-muted { color: var(--vantage-text-muted, var(--muted-foreground)) !important; } /* Amounts inside these re-skinned surfaces (invoice/quote line items, ticket metadata) get the same one-line, right-aligned, tabular treatment as the dashboard cards in section 3. */ #main-content .card-body .vantage-amount, #main-content .card-body .vantage-price, #main-content .table .text-right { font-variant-numeric: tabular-nums; } /* ---- 10.6 Vantage KB launch action ---- */ /* Rendered only where modules/addons/vantage_kb/hooks.php publishes $vantage_kb_launch_url via the ClientAreaPage hook (see clientareahome.tpl); the {if} guard there means the anchor is simply absent otherwise, so no CSS-side hiding is required. This rule only ensures it reads as the primary Vantage action alongside the theme's other .vantage-btn instances. */ .vantage-welcome-actions .vantage-btn.vantage-btn-primary[target="_blank"] { order: -1; } /* ---- 10.7 Print ---- */ @media print { #main-content .panel, #main-content .card { background: #ffffff !important; color: var(--foreground) !important; border-color: var(--border) !important; } #main-content .panel-heading, #main-content .card-header { background: #f5f5f5 !important; color: var(--foreground) !important; } #main-content .panel-heading h1, #main-content .panel-heading h2, #main-content .panel-heading h3, #main-content .card-header h1, #main-content .card-header h2, #main-content .card-header h3 { color: var(--foreground) !important; } } /* ---- 10.8 Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { #main-content .card, #main-content .panel { transition: none; } } /* ---- 10.9 Product-details REAL-DOM corrections ------------------------------- Verified against the live clientareaproductdetails.tpl on web.3vs.io (WHMCS 8.7.3 Twenty-One). There is NO .card-header on this page: the product name is `.product-icon > h3`, the group name is `.product-icon > h4`, and the meta column is `.col-md-6.text-center` with