.tzq-section--page-header {
padding: 0;
max-width: 100%;
}
.tzq-page-header {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--tzq-spacing-md);
background:
radial-gradient(
circle at 10% 20%,
rgba(var(--tzq-primary-rgb), 0.28),
transparent 40%
),
radial-gradient(
circle at 80% 0%,
rgba(var(--tzq-primary-rgb), 0.24),
transparent 35%
),
var(--tzq-gradient-primary-dark-alt);
color: var(--tzq-text-inverse);
border-color: var(--tzq-primary-rgba-25);
border: 1px solid var(--tzq-primary-light);
border-radius: var(--tzq-radius-md);
padding: clamp(1rem, 2.5vw, 1.4rem);
box-shadow: var(--tzq-shadow-lg);
}
.tzq-page-header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--tzq-gradient-white-overlay);
pointer-events: none;
z-index: 0;
opacity: 1;
}
.tzq-page-header__content {
display: flex;
flex-direction: column;
gap: var(--tzq-spacing-md);
position: relative;
z-index: 2;
} .tzq-page-header--home {
background:
radial-gradient(
circle at 15% 25%,
rgba(var(--tzq-primary-rgb), 0.32),
transparent 45%
),
radial-gradient(
circle at 85% 10%,
rgba(var(--tzq-secondary-rgb), 0.28),
transparent 40%
),
radial-gradient(
circle at 50% 80%,
rgba(var(--tzq-accent-rgb), 0.22),
transparent 35%
),
var(--tzq-gradient-primary-home);
box-shadow: var(--tzq-shadow-primary-huge);
padding: clamp(2rem, 5vw, 3rem);
}
.tzq-page-header--home::before {
content: ""; position: absolute;
inset: 0;
background:
radial-gradient(
circle at 15% 25%,
rgba(255, 255, 255, 0.15),
transparent 40%
),
radial-gradient(
circle at 85% 10%,
rgba(255, 255, 255, 0.12),
transparent 35%
);
pointer-events: none;
z-index: 1;
}
.tzq-page-header--home::after {
background: var(--tzq-gradient-white-overlay-strong);
}
.tzq-page-header--home .tzq-page-header__icon {
font-size: var(--tzq-text-3xl);
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.15);
box-shadow: var(--tzq-shadow-black-overlay);
}
.tzq-page-header--home .tzq-page-header__title {
font-size: var(--tzq-text-3xl);
font-weight: 900;
}
.tzq-page-header--home .tzq-page-header__subtitle {
font-size: var(--tzq-text-lg);
max-width: 600px;
} .tzq-page-header .tzq-page-header__eyebrow,
.tzq-page-header__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--tzq-spacing-sm, 0.75rem);
padding: var(--tzq-spacing-xs, 0.5rem) var(--tzq-spacing-sm, 0.75rem);
background: rgba(255, 255, 255, 0.08); border: 1px solid var(--tzq-primary-light);
border-color: rgba(255, 255, 255, 0.18);
border-radius: var(--tzq-radius-md);
color: rgba(255, 255, 255, 0.9);
font-size: var(--tzq-text-sm);
letter-spacing: 0.02em;
}
.tzq-page-header .tzq-page-header__eyebrow-badge,
.tzq-page-header__eyebrow-badge {
padding: 2px 8px;
background: rgba(255, 255, 255, 0.15);
color: var(--tzq-text-inverse);
border-radius: var(--tzq-radius-md);
font-size: var(--tzq-text-xs);
font-weight: 700;
}
.tzq-page-header .tzq-page-header__eyebrow-note,
.tzq-page-header__eyebrow-note {
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
.tzq-page-header__title-row {
display: flex;
align-items: center;
gap: var(--tzq-spacing-sm);
flex-wrap: wrap;
background: rgb(255 255 255 / 11%);
border-color: rgba(255, 255, 255, 0.18);
border-radius: var(--tzq-radius-md);
padding: var(--tzq-spacing-md);
position: relative;
z-index: 2;
}
.tzq-page-header__titles {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--tzq-spacing-xs);
}
.tzq-page-header .tzq-page-header__icon,
.tzq-page-header__icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.12);
color: var(--tzq-text-inverse);
border: 1px solid var(--tzq-primary-light);
border-radius: var(--tzq-radius-md);
font-size: var(--tzq-text-xl);
box-shadow: var(--tzq-shadow-black-xl);
flex-shrink: 0;
}
.tzq-page-header .tzq-page-header__title-container {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: space-between;
}
.tzq-page-header .tzq-page-header__title,
.tzq-page-header__title {
font-family: var(--tzq-font-heading);
font-size: clamp(1.4rem, 2.4vw, 2rem);
font-weight: 800;
color: var(--tzq-text-inverse);
margin: 0;
line-height: 1.15;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
display: inline;
}
.tzq-page-header__subtitle-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.tzq-page-header .tzq-page-header__subtitle,
.tzq-page-header__subtitle {
margin: 0;
font-size: var(--tzq-text-xs);
color: rgba(255, 255, 255, 0.85);
line-height: 1.45;
max-width: 820px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.tzq-page-header__meta {
display: flex;
align-items: center;
gap: var(--tzq-spacing-md);
flex-wrap: wrap;
} .tzq-page-header__actions {
display: flex;
align-items: center;
gap: var(--tzq-spacing-md);
flex-wrap: wrap;
}
.tzq-page-header__cta {
display: inline-flex;
align-items: center;
gap: var(--tzq-spacing-sm);
padding: var(--tzq-spacing-sm) var(--tzq-spacing-lg);
background: #fff;
color: var(--tzq-primary-dark);
border-radius: var(--tzq-radius-md);
border: 1px solid var(--tzq-primary-light);
font-weight: var(--tzq-font-semibold);
text-decoration: none;
box-shadow: var(--tzq-shadow-md);
transition:
transform var(--tzq-transition-fast),
box-shadow var(--tzq-transition-fast),
background var(--tzq-transition-fast);
}
.tzq-page-header__cta:hover {
transform: translateY(-2px);
box-shadow: var(--tzq-shadow-black-3xl);
}
.tzq-page-header__cta--ghost {
background: transparent;
color: var(--tzq-text-inverse);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: none;
}
.tzq-page-header__cta--ghost:hover {
background: rgba(255, 255, 255, 0.1);
box-shadow: var(--tzq-shadow-sm);
}
.tzq-page-header__cta-group {
display: flex;
align-items: center;
gap: var(--tzq-spacing-sm);
flex-wrap: wrap;
}
.tzq-page-header__read-more {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
color: #fff;
text-decoration: none;
opacity: 0.8;
transition: all var(--tzq-transition-base);
border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}
.tzq-page-header__read-more:hover {
opacity: 1;
border-bottom-color: #fff;
}
.tzq-page-header__read-more::after {
content: "\2193";
display: inline-block;
animation: tzq-bounce-y 2s infinite ease-in-out;
margin-left: 2px;
}
@keyframes tzq-bounce-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
} .tzq-page-header__tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--tzq-spacing-sm);
}
.tzq-page-header .tzq-page-header__tag,
.tzq-page-header__tag {
padding: var(--tzq-spacing-xs) var(--tzq-spacing-sm);
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--tzq-primary-light);
border-radius: var(--tzq-radius-md);
color: rgba(255, 255, 255, 0.85);
font-size: var(--tzq-text-sm);
transition:
border-color var(--tzq-transition-fast),
color var(--tzq-transition-fast),
background var(--tzq-transition-fast);
}
.tzq-page-header__tag:hover {
border-color: #fff;
color: var(--tzq-text-inverse);
background: rgba(255, 255, 255, 0.14);
} .tzq-page-header .tzq-page-header__mobile-toggle {
display: inline-flex;
align-items: center;
width: 40px;
height: 40px;
padding: 0;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 20%;
color: #ffffff;
cursor: pointer;
margin-left: 0.75rem;
justify-content: center;
}
.tzq-page-header .tzq-page-header__mobile-toggle:hover {
background: rgba(255, 255, 255, 0.3);
}
.tzq-page-header .tzq-page-header__mobile-toggle[aria-expanded="true"] {
background: var(--tzq-secondary, #2563eb);
border-color: rgba(255,255,255,0.4);
}
.tzq-page-header .tzq-page-header__mobile-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.tzq-page-header .tzq-page-header__mobile-toggle svg {
width: 16px;
height: 16px;
} .tzq-page-header .tzq-page-header__stats {
margin: 0;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--tzq-radius-lg, 12px);
padding: 1rem;
display: none !important;
flex-wrap: wrap;
gap: 1rem;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.tzq-page-header .tzq-page-header__stats--visible {
display: flex !important;
}
.tzq-page-header .tzq-page-header__stat-item {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #ffffff !important;
padding: 0.6rem 1.25rem;
border-radius: var(--tzq-radius-md, 8px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 110px;
transition: all 0.2s ease;
flex: 1 0 auto;
}
.tzq-page-header .tzq-page-header__stat-item:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.tzq-page-header .tzq-page-header__stat-value {
font-weight: 800;
font-size: 1.25rem;
color: #ffffff !important;
line-height: 1;
margin-bottom: 4px;
}
.tzq-page-header .tzq-page-header__stat-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.8) !important;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
@media (max-width: 768px) {
.tzq-page-header .tzq-page-header__stat-item {
flex: 1 1 calc(50% - 0.5rem);
min-width: 0;
}
} .tzq-archive__header {
background:
radial-gradient(
circle at 10% 20%,
rgba(var(--tzq-primary-rgb), 0.28),
transparent 40%
),
radial-gradient(
circle at 80% 0%,
rgba(var(--tzq-primary-rgb), 0.24),
transparent 35%
),
var(--tzq-gradient-primary-dark);
color: var(--tzq-text-inverse);
border-color: var(--tzq-primary-rgba-25);
border-radius: var(--tzq-radius-md);
padding: var(--tzq-spacing-md);
margin: 0 auto;
max-width: var(--tzq-content-max, 1200px);
width: 100%;
box-sizing: border-box;
border: 1px solid var(--tzq-primary-light);
position: relative;
overflow: hidden;
}
.tzq-archive__header::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.15) 0%,
transparent 70%
);
border-radius: var(--tzq-radius-md);
pointer-events: none;
}
.tzq-archive__header::after {
content: "";
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.1) 0%,
transparent 70%
);
border-radius: var(--tzq-radius-md);
pointer-events: none;
}
.tzq-archive__header--primary {
background: var(--tzq-gradient-primary-dark);
}
.tzq-archive__header--primary .tzq-archive__title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.tzq-archive__header--primary .tzq-archive__description {
font-size: var(--tzq-text-base);
}
.tzq-archive__header--primary .tzq-archive__icon-wrapper {
width: 100px;
height: 100px;
min-width: 100px;
}
.tzq-archive__hero,
.tzq-archive-hero {
display: flex;
align-items: center;
justify-content: center;
gap: var(--tzq-spacing-md);
position: relative;
z-index: 1;
text-align: left;
} .tzq-archive-hero {
background: var(--tzq-primary);
border-radius: var(--tzq-radius-md);
margin: var(--tzq-spacing-md);
text-align: center;
color: white;
}
.tzq-archive__icon-wrapper {
width: 40px;
height: 40px;
border-radius: var(--tzq-radius-md);
background: rgba(255, 255, 255, 0.2);
border: 1px solid var(--tzq-primary-light);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--tzq-shadow-black-xl);
flex-shrink: 0;
position: relative;
z-index: 1;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.tzq-archive__icon {
font-size: 1.5rem;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.tzq-archive__icon svg {
width: 48px;
height: 48px;
stroke: white;
fill: none;
}
.tzq-archive__title-section,
.tzq-archive-title-section {
flex: 1;
min-width: 0;
}
.tzq-archive-title-section {
margin-bottom: var(--tzq-spacing-lg);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.tzq-archive__title,
.tzq-archive-title {
color: var(--tzq-text-inverse) !important;
margin: 0 0 var(--tzq-spacing-sm) 0;
line-height: var(--tzq-leading-tight);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
font-size: var(--tzq-text-3xl);
font-weight: 800;
}
.tzq-archive__description {
font-size: var(--tzq-text-lg);
color: rgba(255, 255, 255, 0.85);
margin: 0;
line-height: 1.7;
font-weight: var(--tzq-font-medium);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.tzq-archive__description p {
margin: 0;
}
.tzq-archive__actions,
.tzq-archive-actions {
display: flex;
align-items: center;
gap: var(--tzq-spacing-md);
margin-top: var(--tzq-spacing-lg);
flex-wrap: wrap;
}
.tzq-archive__cta,
.tzq-archive-test-btn {
display: inline-flex;
align-items: center;
gap: var(--tzq-spacing-sm);
padding: var(--tzq-spacing-sm) var(--tzq-spacing-xl);
background: var(--tzq-primary);
color: var(--tzq-text-inverse);
border-radius: var(--tzq-radius-md);
font-weight: var(--tzq-font-bold);
text-decoration: none;
box-shadow: var(--tzq-shadow-md);
transition: var(--tzq-transition-all);
border: 1px solid var(--tzq-primary-light);
cursor: pointer;
}
.tzq-archive__cta:hover,
.tzq-archive-test-btn:hover {
box-shadow: var(--tzq-shadow-lg);
color: var(--tzq-text-inverse);
transform: translateY(-2px);
background: var(--tzq-primary-dark);
}
.tzq-archive__cta svg,
.tzq-archive-test-btn svg {
margin-left: var(--tzq-spacing-xs);
}
.tzq-archive__back,
.tzq-back-to-home {
display: inline-flex;
align-items: center;
gap: var(--tzq-spacing-xs);
color: var(--tzq-text-secondary);
font-weight: 600;
text-decoration: none;
padding: var(--tzq-spacing-xs) var(--tzq-spacing-sm);
border-radius: var(--tzq-radius-md);
transition: var(--tzq-transition-base);
}
.tzq-archive__back:hover,
.tzq-back-to-home:hover {
color: var(--tzq-primary);
background: var(--tzq-primary-rgba-08);
}
.tzq-archive__stats,
.tzq-archive-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--tzq-spacing-lg);
position: relative;
z-index: 1;
}
.single-test .tzq-archive__hero {
justify-content: space-between;
}
.single-test .tzq-archive__actions {
margin-top: 0;
flex-shrink: 0;
gap: var(--tzq-spacing-sm);
} .tzq-breadcrumb,
.tzq-single-breadcrumb .tzq-breadcrumb {
padding: 0;
background: transparent;
border: none;
box-shadow: none;
margin-bottom: 0;
}
.tzq-breadcrumb-list {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.3em;
}
.tzq-breadcrumb-item {
display: inline-flex;
align-items: center;
gap: var(--tzq-spacing-2xs, 0.25rem);
}
.tzq-breadcrumb-item a,
.tzq-breadcrumb-item span {
color: var(--tzq-text-secondary);
font-size: 0.6rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.tzq-breadcrumb-item a:hover {
color: var(--tzq-primary);
text-decoration: none;
}
.tzq-breadcrumb-current {
display: inline-flex;
align-items: center;
gap: var(--tzq-spacing-2xs, 0.25rem);
padding: var(--tzq-spacing-2xs, 0.25rem) var(--tzq-spacing-sm);
border-radius: var(--tzq-radius-md);
text-decoration: none;
color: var(--tzq-primary);
background: var(--tzq-bg-primary);
border: 1px solid rgba(var(--tzq-primary-rgb), 0.5);
font-weight: var(--tzq-font-semibold);
transition:
border-color var(--tzq-transition-fast),
color var(--tzq-transition-fast),
box-shadow var(--tzq-transition-fast);
}
.tzq-breadcrumb-separator {
color: var(--tzq-text-muted);
font-size: 0.75rem; line-height: 1;
user-select: none;
padding: 0 var(--tzq-spacing-2xs, 0.25rem);
opacity: 0.6;
} .tzq-single-breadcrumb {
margin-bottom: var(--tzq-spacing-lg);
}
.tzq-single-breadcrumb.tzq-page-header__eyebrow-badge {
display: inline-block;
padding: var(--tzq-spacing-0-5) var(--tzq-spacing-sm);
background: rgba(255, 255, 255, 0.15);
color: var(--tzq-text-inverse);
border-radius: var(--tzq-radius-md);
font-weight: var(--tzq-font-semibold);
margin-bottom: var(--tzq-spacing-md);
}
.tzq-single-breadcrumb.tzq-page-header__eyebrow-badge .tzq-breadcrumb {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.tzq-single-breadcrumb.tzq-page-header__eyebrow-badge .tzq-breadcrumb-list {
font-size: var(--tzq-text-sm);
color: inherit;
}
.tzq-single-breadcrumb.tzq-page-header__eyebrow-badge .tzq-breadcrumb-item a,
.tzq-single-breadcrumb.tzq-page-header__eyebrow-badge .tzq-breadcrumb-current {
color: inherit;
background: transparent;
border: 1px solid var(--tzq-primary-light);
padding: 0;
}
.tzq-single-breadcrumb.tzq-page-header__eyebrow-badge
.tzq-breadcrumb-item
a:hover {
color: inherit;
opacity: 0.8;
border: 1px solid var(--tzq-primary-light);
box-shadow: none;
}
.tzq-single-breadcrumb.tzq-page-header__eyebrow-badge
.tzq-breadcrumb-separator {
color: inherit;
opacity: 0.7;
} body.tzq-dark-mode .tzq-page-header,
[data-theme="dark"] .tzq-page-header {
background:
radial-gradient(
circle at 8% 10%,
rgba(var(--tzq-primary-rgb), 0.25),
transparent 35%
),
linear-gradient(
135deg,
rgba(24, 41, 78, 0.95) 0%,
rgba(10, 15, 30, 0.95) 100%
);
border-color: var(--tzq-border-dark);
box-shadow: var(--tzq-shadow-black-4xl);
}
body.tzq-dark-mode .tzq-page-header__eyebrow,
[data-theme="dark"] .tzq-page-header__eyebrow {
background: rgba(255, 255, 255, 0.06);
border-color: var(--tzq-border-dark);
}
body.tzq-dark-mode .tzq-page-header__eyebrow-badge,
[data-theme="dark"] .tzq-page-header__eyebrow-badge {
background: rgba(var(--tzq-primary-rgb), 0.25);
color: var(--tzq-text-inverse);
}
body.tzq-dark-mode .tzq-page-header .tzq-page-header__tag,
[data-theme="dark"] .tzq-page-header .tzq-page-header__tag {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
}
body.tzq-dark-mode .tzq-page-header .tzq-page-header__stats,
[data-theme="dark"] .tzq-page-header .tzq-page-header__stats {
border-color: rgba(255, 255, 255, 0.2);
}
body.tzq-dark-mode .tzq-archive__header,
[data-theme="dark"] .tzq-archive__header {
background:
radial-gradient(
circle at 10% 20%,
rgba(var(--tzq-primary-rgb), 0.35),
transparent 40%
),
radial-gradient(
circle at 80% 0%,
rgba(var(--tzq-primary-rgb), 0.3),
transparent 35%
),
var(--tzq-gradient-primary-dark);
border-color: var(--tzq-primary-rgba-40);
}
body.tzq-dark-mode .tzq-breadcrumb,
[data-theme="dark"] .tzq-breadcrumb {
background: var(--tzq-gradient-primary-light-alt);
border-color: var(--tzq-border-dark);
}
body.tzq-dark-mode .tzq-breadcrumb-item a,
body.tzq-dark-mode .tzq-breadcrumb-item span,
[data-theme="dark"] .tzq-breadcrumb-item a,
[data-theme="dark"] .tzq-breadcrumb-item span {
color: rgba(255, 255, 255, 0.5);
}
body.tzq-dark-mode .tzq-breadcrumb-item a:hover,
[data-theme="dark"] .tzq-breadcrumb-item a:hover {
color: #ffffff;
}
body.tzq-dark-mode .tzq-single-breadcrumb.tzq-page-header__eyebrow-badge,
[data-theme="dark"] .tzq-single-breadcrumb.tzq-page-header__eyebrow-badge {
background: rgba(var(--tzq-primary-rgb), 0.25);
color: var(--tzq-text-inverse);
}