, so this wrapper only
* needs to be a neutral block. Do NOT give it padding — the outer .site-main
* already owns the vertical rhythm of the page.
* -------------------------------------------------------------------------- */
.va-tek-page-body {
display: block;
}
/* ----- Hero ----- */
.va-archive-hero {
background:
radial-gradient(1200px 420px at 78% -10%, rgba(26, 86, 219, 0.35), transparent 70%),
linear-gradient(160deg, #0F172A 0%, #1E3A5F 100%);
color: var(--color-text-inverse);
padding: var(--space-16) 0 var(--space-12);
}
.va-archive-hero .va-tek-breadcrumb,
.va-archive-hero .va-tek-breadcrumb a,
.va-archive-hero .va-tek-breadcrumbs a {
color: rgba(255, 255, 255, 0.66);
}
.va-archive-hero .va-tek-breadcrumb [aria-current] {
color: rgba(255, 255, 255, 0.92);
}
.va-archive-hero__title {
color: var(--color-text-inverse);
font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
font-weight: var(--font-weight-extrabold);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 var(--space-4);
max-width: 18ch;
}
.va-archive-hero__lead {
font-size: var(--font-size-lg);
line-height: 1.7;
color: rgba(255, 255, 255, 0.82);
max-width: 62ch;
margin: 0 0 var(--space-8);
}
.va-archive-hero__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.va-archive-stat {
display: inline-flex;
align-items: baseline;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.07);
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.85);
}
.va-archive-stat strong {
font-weight: var(--font-weight-bold);
color: #fff;
}
.va-archive-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
/* ----- Category jump bar (sticky under the header) ----- */
.va-archive-jump {
position: sticky;
top: 0;
z-index: 60;
background: rgba(248, 250, 252, 0.94);
backdrop-filter: saturate(1.4) blur(10px);
border-bottom: 1px solid var(--color-border);
}
.va-archive-jump__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: var(--space-3) 0;
overflow-x: auto;
scrollbar-width: thin;
}
.va-archive-jump__list a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-card);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
white-space: nowrap;
transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.va-archive-jump__list a:hover,
.va-archive-jump__list a:focus-visible {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.va-archive-jump__count {
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
color: var(--color-text-light);
}
/* Scroll target offset so the sticky bar doesn't cover the heading. */
.va-archive-cat {
padding: var(--space-16) 0 var(--space-4);
scroll-margin-top: 84px;
}
.va-archive-cat--alt {
background: var(--color-card);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--space-16);
margin-bottom: var(--space-4);
}
.va-archive-cat__head {
max-width: 74ch;
margin-bottom: var(--space-8);
}
.va-archive-cat__eyebrow {
display: inline-block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--space-2);
}
.va-archive-cat__desc {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-text-secondary);
margin: 0;
}
.va-archive-cat__desc + .va-archive-cat__desc {
margin-top: var(--space-3);
}
/* ----- Closer / sister-brand band ----- */
.va-archive-sister {
padding: var(--space-12) 0;
}
.va-archive-sister__card {
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-lg);
background: var(--color-card);
padding: var(--space-8);
}
.va-archive-sister__card h2 {
font-size: var(--font-size-xl);
margin: 0 0 var(--space-3);
}
.va-archive-sister__card p {
color: var(--color-text-secondary);
line-height: 1.7;
margin: 0 0 var(--space-5);
max-width: 72ch;
}
@media (max-width: 767px) {
.va-archive-hero {
padding: var(--space-10) 0 var(--space-8);
}
.va-archive-cat,
.va-archive-cat--alt {
padding-top: var(--space-10);
}
.va-archive-jump {
top: 0;
}
}
/* ==========================================================================
SECTION 18: Print Styles
========================================================================== */
@media print {
*,
*::before,
*::after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
body {
font-size: 12pt;
line-height: 1.5;
}
/* Hide non-content elements */
.site-header,
.site-footer,
.top-bar,
.whatsapp-btn,
.back-to-top,
.product-cta-sticky,
.mobile-nav-panel,
.mobile-nav-overlay,
.header-search-panel,
.hero-cta-group,
.btn,
.pagination,
.post-tags,
.footer-newsletter,
.footer-social-icons,
.language-switcher,
nav {
display: none !important;
}
/* Full width content */
.container {
max-width: 100%;
padding: 0;
margin: 0;
}
/* Links: show full URL */
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
font-weight: normal;
color: #666;
}
a[href^="#"]::after,
a[href^="javascript:"]::after,
a[href^="mailto:"]::after {
content: "";
}
/* Images */
img {
max-width: 100% !important;
page-break-inside: avoid;
}
/* Avoid orphans */
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
/* Tables */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}
/* Hero */
.hero {
background: none !important;
min-height: auto;
padding: 20px 0;
color: #000 !important;
}
.hero-title,
.hero-subtitle {
color: #000 !important;
}
}