/* ============================================================================
* vwa-common.css
* ----------------------------------------------------------------------------
* VWA brand system — Cross-page common patterns.
*
* Rules where multiple page-specific selectors share IDENTICAL bodies —
* extracted as multi-selector rules to dedupe without any markup changes.
*
* Loads AFTER vwa-bootstrap-overrides.css and vwa-components.css,
BEFORE
* vwa-pages.css (so page-specific rules can still override common patterns).
*
* link order:
*
*
*
* ← this file
*
*
* Each rule's selector list shows where the pattern appears across the
* system. Edits propagate to all instances simultaneously.
*
* Last updated: April 2026 (created in v4.14 Pattern-3 extraction)
* ============================================================================ */
/* === HERO BASE — full-bleed dark hero block (padding overridden per page) === */
.hero {
background: var(--vwa-navy);
color: #ffffff;
position: relative;
overflow: hidden;
}
/* === HERO GRID OVERLAY (::before) — used on all hero variants === */
.hero::before,
.specmatch-fallback::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(201, 169, 97, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 169, 97, 0.04) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
}
.hero .eyebrow::before,
.eyebrow-brass::before {
content: "";
width: 32px;
height: 1px;
background: var(--vwa-brass);
}
.doc-section-num::before,
.sect-num::before {
content: "";
width: 24px;
height: 1px;
background: var(--vwa-brass);
}
/* === HERO CONTAINER POSITIONING — applies inside any *-hero === */
.hero > .container,
.cover .container,
.specmatch-fallback > .container {
position: relative;
z-index: 1;
}
/* === HERO HEADLINE TYPE — full-bleed h1 inside *-hero === */
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 0.95;
color: #ffffff;
letter-spacing: 0.005em;
margin: 0.5rem 0 1.25rem;
}
/* === HERO LEDE PARAGRAPHS — large-text intro inside *-hero === */
.hero p.lede {
color: #a8bcd1;
font-size: 1.125rem;
font-weight: 300;
line-height: 1.55;
max-width: 38rem;
margin: 0;
}
/* === HERO BLOCKS — bare hero element styles === */
.hero {
background: var(--vwa-navy);
color: #ffffff;
padding: 3rem 0 3.5rem;
position: relative;
overflow: hidden;
}
.hero-attr-label,
.key-fact-label {
font-family: var(--bs-font-monospace);
font-size: 0.5625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--vwa-brass);
margin-bottom: 0.25rem;
}
.hero-attr-value,
.key-fact-value {
font-family: "Barlow Condensed", sans-serif;
font-weight: 700;
font-size: 1rem;
color: #ffffff;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.brand-stat,
.cart-hero-meta {
font-family: var(--bs-font-monospace);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
}
/* === CARD TILES — bordered cards used in grid layouts === */
.brand-card-featured,
.material-card,
.subcat-card {
display: flex;
flex-direction: column;
height: 100%;
background: #ffffff;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--vwa-navy);
transition:
border-color 0.15s ease,
transform 0.15s ease;
}
.material-card-skucount,
.subcat-card-count {
font-family: var(--bs-font-monospace);
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--vwa-brass-800);
}
.compliance-card,
.standard-card {
background: #ffffff;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius-lg);
padding: 1.25rem 1.5rem;
}
/* === CARD HEADINGS — h3 inside cards === */
.article-result h3,
.line-item h3 {
font-family: "Barlow", sans-serif;
font-weight: 600;
font-size: 1rem;
text-transform: none;
letter-spacing: 0;
line-height: 1.2;
margin: 0 0 0.5rem;
}
.compliance-card h3,
.standard-card h3 {
font-family: "Barlow", sans-serif;
font-weight: 600;
font-size: 0.9375rem;
text-transform: none;
letter-spacing: 0;
margin: 0;
}
/* === HOVER LIFT EFFECT — applied to interactive cards/tiles === */
.article-card:hover,
.article-result:hover,
.brand-card-compact:hover,
.brand-card-featured:hover,
.featured-card:hover,
.material-card:hover,
.subcat-card:hover {
border-color: var(--vwa-brass);
transform: translateY(-2px);
color: var(--vwa-navy);
}
.brand-result:hover,
.brand-tile:hover,
.glossary-result:hover,
.related-card:hover,
.sibling-card:hover {
border-color: var(--vwa-brass);
color: var(--vwa-navy);
}
.article-body a:hover,
.compliance-card a:hover,
.section-link:hover,
.term-pointer:hover {
color: var(--vwa-brass-800);
border-bottom-color: var(--vwa-brass-800);
}
.cat-filter a:hover,
.category-chip:hover,
.jump-nav a:hover {
background: var(--vwa-brass-300);
border-color: var(--vwa-brass);
color: var(--vwa-navy);
}
/* === RADIO/CHECK INPUTS — inside option / item containers === */
.backorder-option input,
.check-item input,
.delivery-option input,
.payment-option input {
margin-top: 0.125rem;
accent-color: var(--vwa-navy);
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* === RADIO/CHECK OPTION CONTAINERS === */
.delivery-option,
.payment-option {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 1rem 1.125rem;
background: var(--vwa-porcelain);
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
cursor: pointer;
min-height: 44px;
}
.check-item:hover,
.delivery-option:hover,
.field input:focus-visible,
.page-trade-application .field select:focus-visible,
.page-trade-application .field textarea:focus-visible,
.field input:hover,
.page-trade-application .field select:hover,
.page-trade-application .field textarea:hover,
.gallery-thumb[aria-current="true"],
.payment-option:hover,
.product-row:hover {
border-color: var(--vwa-navy);
}
/* === MONO NUMERIC EMPHASIS — in technical-data contexts === */
.brand-card-compact-foot strong,
.brand-card-stock strong,
.cat-card-stock,
.cat-meta-bar strong,
.featured-meta strong,
.line-item-meta strong,
.material-card-skucount strong,
.product-meta-row strong,
.product-specs li span:last-child,
.results-count strong,
.sort-bar-count strong,
.subcat-card-count strong {
color: var(--vwa-navy);
font-weight: 500;
}
.delivery-option-content strong,
.payment-option-content strong {
display: block;
font-family: "Barlow Condensed", sans-serif;
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--vwa-navy);
margin-bottom: 0.25rem;
}
.benefit-text strong,
.check-item-content strong {
display: block;
font-family: "Barlow Condensed", sans-serif;
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--vwa-navy);
margin-bottom: 0.125rem;
}
.cart-hero-meta strong,
.code-block .c-key,
.continue-shopping:hover,
.hero .brass-break,
.doc-sidebar nav a.active::before,
.hero-title .brass-break,
.summary-card a,
.summary-fineprint a {
color: var(--vwa-brass);
}
.article-foot strong,
.demo-panel--trade .demo-panel-tag,
.product-stock,
.section-card-summary strong,
.shipment-block-eta strong,
.subcat-card-from,
.view-toggle button:not(.active):hover {
color: var(--vwa-navy);
}
/* === SPEC TABLE CAPTIONS === */
.spec-table caption,
.specs-table caption {
caption-side: top;
padding: 1rem 1.25rem;
background: var(--vwa-navy);
color: #ffffff;
font-family: "Barlow Condensed", sans-serif;
font-weight: 600;
font-size: 0.8125rem;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: left;
}
/* === SPEC TABLE HEADER CELLS === */
.spec-table th,
.specs-table th {
font-family: var(--bs-font-monospace);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bs-tertiary-color);
font-weight: normal;
width: 35%;
}
/* === MATERIAL SWATCHES — colour primitives shared across surfaces === */
.facet-chip-swatch.stainless-steel,
.filter-swatch.stainless-steel,
.material-swatch.stainless-steel,
.related-swatch.stainless-steel {
background: linear-gradient(135deg, #b8bdc1 0%, #7d8489 100%);
}
.facet-chip-swatch.carbon-steel,
.filter-swatch.carbon-steel,
.material-swatch.carbon-steel,
.related-swatch.carbon-steel {
background: linear-gradient(135deg, #4a4744 0%, #2a2826 100%);
}
.facet-chip-swatch.brass,
.filter-swatch.brass,
.material-swatch.brass {
background: linear-gradient(135deg, #c9a961 0%, #b08e3f 100%);
}
.facet-chip-swatch.ductile-iron,
.material-swatch.ductile-iron,
.related-swatch.ductile-iron {
background: linear-gradient(135deg, #5a5552 0%, #2f2c2a 100%);
}
.facet-chip-swatch.pp,
.material-swatch.pp,
.related-swatch.pp {
background: linear-gradient(135deg, #c5c0b3 0%, #8e8a7c 100%);
}
.facet-chip-swatch.ny-glass,
.filter-swatch.ny-glass,
.material-swatch.ny-glass {
background: linear-gradient(135deg, #968b78 0%, #635a4d 100%);
}
.facet-chip-swatch.aluminium,
.filter-swatch.aluminium,
.material-swatch.aluminium {
background: linear-gradient(135deg, #d4d6d8 0%, #93989c 100%);
}
.facet-chip-swatch.pvc,
.material-swatch.pvc {
background: linear-gradient(135deg, #d8d6cc 0%, #b1ada0 100%);
}
.facet-chip-swatch.nylon,
.material-swatch.nylon {
background: linear-gradient(135deg, #cfc4b0 0%, #9a8e76 100%);
}
.facet-chip-swatch.galvanised,
.material-swatch.galvanised {
background: linear-gradient(135deg, #b8b6b0 0%, #807e78 100%);
}
/* === MISCELLANEOUS PATTERNS === */
.pagination-summary,
.price-gst,
.section-card-summary,
.shipment-block-eta {
font-family: var(--bs-font-monospace);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bs-tertiary-color);
}
.doc-section-num,
.sect-num {
font-family: var(--bs-font-monospace);
font-size: 0.6875rem;
letter-spacing: 0.25em;
color: var(--bs-tertiary-color);
text-transform: uppercase;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 12px;
}
.cat-filter a[aria-current="true"],
.page-item.active .page-link,
.step-list li[aria-current="step"] {
background: var(--vwa-navy);
border-color: var(--vwa-navy);
color: #ffffff;
}
.product-card-sku,
.product-sku {
font-family: var(--bs-font-monospace);
font-size: 0.6875rem;
letter-spacing: 0.1em;
color: var(--bs-tertiary-color);
margin-bottom: 0.25rem;
}
.facet-chip:hover,
.page-btn[aria-current="page"],
.quickpick-chip:hover {
background: var(--vwa-navy);
color: #ffffff;
border-color: var(--vwa-navy);
}
.cat-card:hover .cat-arrow,
.compare-table .material-name a:hover,
.edu-intro a,
.line-item h3 a:hover,
.material-card-arrow,
.subcat-card-arrow,
.totals-table tr.discount td:last-child,
.voice-col--do .voice-col-head {
color: var(--vwa-brass-800);
}
.certs,
.product-tabs-section,
.related-products {
background: var(--vwa-porcelain);
border-top: 1px solid var(--bs-border-color);
padding: 4rem 0;
}
.content-section h2,
.section-heading {
font-size: clamp(1.5rem, 2.5vw, 2rem);
margin: 0 0 0.5rem;
}
.line-item-meta,
.timeline-when {
font-family: var(--bs-font-monospace);
font-size: 0.625rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bs-tertiary-color);
margin-bottom: 0.25rem;
}
.glossary-term,
.term-name {
font-family: "Barlow Condensed", sans-serif;
font-weight: 700;
font-size: 1.25rem;
text-transform: uppercase;
color: var(--vwa-navy);
margin: 0;
line-height: 1.15;
}
.form-fieldset .section-eyebrow,
.help-callout-eyebrow {
font-family: var(--bs-font-monospace);
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--vwa-brass-800);
margin-bottom: 0.5rem;
}
.article-card-illus,
.product-illus {
background: var(--vwa-porcelain);
border-bottom: 1px solid var(--bs-border-color);
height: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.gallery-badge.brass,
.step-list li[aria-current="step"] .step-num {
background: var(--vwa-brass);
color: var(--vwa-navy);
}
.form-check-input:focus,
.form-control:focus,
.page-brand-guidelines .form-select:focus,
.page-catalogue .form-select:focus {
border-color: var(--vwa-navy);
box-shadow: 0 0 0 0.2rem rgba(10, 31, 46, 0.1);
}
.approval p:last-child,
.demo-panel p:last-child,
.edu-intro p:last-child,
.glossary-def p:last-child,
.help-callout p:last-of-type,
.product-row .row-info .product-sku,
.sample p:last-child,
.shipment-block:last-child,
.story-aside p:last-child,
.term-def p:last-child {
margin-bottom: 0;
}
.material-attr-label,
.sibling-meta {
font-family: var(--bs-font-monospace);
font-size: 0.5625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-tertiary-color);
}
.related-articles h2,
.related-products h2,
.related-section h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
margin-bottom: 1.5rem;
}
.filter-checks .filter-count,
.type-tag-right {
font-family: var(--bs-font-monospace);
font-size: 0.6875rem;
color: var(--bs-tertiary-color);
letter-spacing: 0.05em;
}
.spec-table th,
.page-material-brass .spec-table td,
.specs-table th,
.page-product-detail .specs-table td {
text-align: left;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--bs-border-color);
vertical-align: top;
}
.product-card-price,
.product-price {
font-family: "Barlow Condensed", sans-serif;
font-weight: 700;
font-size: 1.0625rem;
color: var(--vwa-navy);
}
.sort-bar,
.step-nav {
background: var(--vwa-porcelain);
border-bottom: 1px solid var(--bs-border-color);
padding: 1rem 0;
}