/** * NWBUS Vehicle Specs * * Brand colour #499d90 and body colour #555 mirror $orange / $text-color in * the theme's library/scss/partials/_variables.scss. * * SPECIFICITY NOTE: WooCommerce styles its tabs and attribute tables through * `.woocommerce div.product .woocommerce-tabs …`, and `.woocommerce` sits on the * . Anything here that overrides core must therefore carry at least as many * classes — hence the long `body.woocommerce.nwbus-specs-tabs div.product …` * prefix. It is verbose, but it beats core on specificity alone and so does not * depend on stylesheet order, which WP Rocket is free to change. */ /* --------------------------------------------------------------------------- * Tab bar * * The theme hides it outright (`.wc-tabs { display: none }`, * library/scss/breakpoints/_base.scss:1172) because Additional Information used * to be the only tab. With extra tabs that leaves their panels unreachable, so * we bring the bar back — but ONLY on listings that have extra tabs, via the * `nwbus-specs-tabs` body class. Listings without a spec set are untouched. * * Core's default look (rounded pill tabs drawn with pseudo-elements) clashes * badly with this theme, so it is stripped back to flat underlined tabs. * ------------------------------------------------------------------------- */ body.nwbus-specs-tabs .woocommerce-tabs { margin-top: 1.75em; } body.woocommerce.nwbus-specs-tabs div.product .woocommerce-tabs ul.wc-tabs { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 1.25em; padding: 0; overflow: visible; border-bottom: 2px solid #e3e3e3; list-style: none; } /* Core draws the bar's underline with ::before and the rounded tab corners with li::before / li::after. None of that suits a flat underline. */ body.woocommerce.nwbus-specs-tabs div.product .woocommerce-tabs ul.wc-tabs::before, body.woocommerce.nwbus-specs-tabs div.product .woocommerce-tabs ul.wc-tabs li::before, body.woocommerce.nwbus-specs-tabs div.product .woocommerce-tabs ul.wc-tabs li::after { display: none; } body.woocommerce.nwbus-specs-tabs div.product .woocommerce-tabs ul.wc-tabs li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; white-space: normal; } body.woocommerce.nwbus-specs-tabs div.product .woocommerce-tabs ul.wc-tabs li a { display: block; padding: 9px 14px; margin-bottom: -2px; border-bottom: 2px solid transparent; color: #767676; font-size: 0.85em; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; text-shadow: none; } body.woocommerce.nwbus-specs-tabs div.product .woocommerce-tabs ul.wc-tabs li a:hover { color: #499d90; } body.woocommerce.nwbus-specs-tabs div.product .woocommerce-tabs ul.wc-tabs li.active a { color: #2c2c2c; border-bottom-color: #499d90; } /* The panel heading now repeats the tab label directly above it. */ body.nwbus-specs-tabs #tab-additional_information > h2 { display: none; } /* --------------------------------------------------------------------------- * Panel disclaimer * * Sits at the top of both the Specs and Standard Features panels. Deliberately * quiet — #767676 is the same muted grey as an inactive tab label — because it * is a qualifier on the content below it, not a warning. * * One class is enough here: this is the plugin's own markup and nothing in core * or the theme targets it, so there is no specificity fight to win. * ------------------------------------------------------------------------- */ .nwbus-specs__disclaimer { margin: 0 0 1.25em; font-size: 0.85em; font-style: normal; line-height: 1.45; color: #767676; } /* --------------------------------------------------------------------------- * Specs tab * ------------------------------------------------------------------------- */ .nwbus-specs__group + .nwbus-specs__group { margin-top: 1.75em; } .nwbus-specs__group-title, .nwbus-features__title { margin: 0 0 0.5em; padding-bottom: 0.35em; border-bottom: 2px solid #499d90; font-size: 1.05em; font-weight: 600; line-height: 1.3; color: #2c2c2c; text-transform: uppercase; letter-spacing: 0.02em; } .nwbus-specs__table { width: 100%; margin: 0; table-layout: fixed; } .woocommerce div.product .nwbus-specs__table th.nwbus-specs__label { width: 42%; padding: 4px 8px 4px 0; font-weight: 600; line-height: 1.4; color: #555; vertical-align: top; word-wrap: break-word; overflow-wrap: break-word; } .woocommerce div.product .nwbus-specs__table td.nwbus-specs__value { padding: 0; font-style: normal; line-height: 1.4; color: #555; vertical-align: top; word-wrap: break-word; overflow-wrap: break-word; } .woocommerce div.product .nwbus-specs__table td.nwbus-specs__value p { margin: 0; padding: 4px 5px; } /* --------------------------------------------------------------------------- * Features tab * ------------------------------------------------------------------------- */ .nwbus-features__list + .nwbus-features__list { margin-top: 1.75em; } .nwbus-features__items { margin: 0 0 0 1.25em; padding: 0; list-style-type: disc; } .nwbus-features__items li { margin-bottom: 0.35em; line-height: 1.45; color: #555; } /* --------------------------------------------------------------------------- * Attribute tables on phones * * WooCommerce's small-screen stylesheet stacks each row into label-over-value * blocks, but the theme leaves the label at `padding: 0` while values keep * `padding: 2px 5px` — so the two halves of a row sit at different indents and * the zebra striping reads as broken bars rather than one block per spec. * * These rules unify the padding, drop the divider that ran between a label and * its own value, and make the striping explicit. Applied to every * `shop_attributes` table on a product page, so the Additional Information table * and the Specs tab look identical. * * 768px matches WooCommerce's own small-screen breakpoint. * ------------------------------------------------------------------------- */ @media only screen and (max-width: 768px) { body.single-product table.shop_attributes { border-top: 0; } body.single-product table.shop_attributes tr { border-bottom: 1px solid #e5e5e5; } body.single-product table.shop_attributes tr th, body.single-product table.shop_attributes tr td { padding: 0 10px; border-bottom: 0; } body.single-product table.shop_attributes tr th { padding-top: 8px; font-size: 0.82em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #767676; } body.single-product table.shop_attributes tr td { padding-bottom: 8px; font-style: normal; } body.single-product table.shop_attributes tr td p { margin: 0; padding: 0; } /* One background per row, covering both halves, so a spec reads as a block. */ body.single-product table.shop_attributes tr:nth-child(odd) th, body.single-product table.shop_attributes tr:nth-child(odd) td { background: #f6f6f6; } body.single-product table.shop_attributes tr:nth-child(even) th, body.single-product table.shop_attributes tr:nth-child(even) td { background: transparent; } /* Narrow columns need every pixel — tighten the tab bar to match. */ body.woocommerce.nwbus-specs-tabs div.product .woocommerce-tabs ul.wc-tabs li a { padding: 9px 9px; font-size: 0.78em; letter-spacing: 0.02em; } } /* --------------------------------------------------------------------------- * Print — the theme wraps single products in .print-content, so make sure both * tab panels appear on a printed spec sheet. * ------------------------------------------------------------------------- */ @media print { #tab-nwbus_specs, #tab-nwbus_features { display: block !important; page-break-inside: avoid; } .nwbus-specs__group, .nwbus-features__list { page-break-inside: avoid; } }