.tzq-card {
background: var(--tzq-bg-primary);
border-radius: var(--tzq-radius-md);
padding: var(--tzq-card-padding);
box-shadow: var(--tzq-card-shadow);
border: 1px solid var(--tzq-primary-light);
transition:
background-color var(--tzq-duration-300, 300ms) ease,
border-color var(--tzq-duration-300, 300ms) ease,
box-shadow var(--tzq-duration-300, 300ms) ease,
transform var(--tzq-duration-300, 300ms) ease;
position: relative;
overflow: hidden;
}
.tzq-card--flat {
box-shadow: 0 0 0 1px var(--tzq-border-light);
border: 1px solid var(--tzq-primary-light);
}
.tzq-card--elevated {
box-shadow: 0 0 0 1px var(--tzq-border-light);
}
.tzq-card--secondary {
background: var(--tzq-bg-secondary);
}
.tzq-card--compact {
padding: var(--tzq-card-padding-sm);
}
.tzq-card--spacious {
padding: var(--tzq-card-padding-lg);
}
.tzq-card--class {
position: relative;
min-height: 120px;
border-radius: var(--tzq-radius-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--tzq-text-inverse);
box-shadow: var(--tzq-shadow-md);
transition: var(--tzq-transition);
overflow: hidden;
padding: var(--tzq-spacing-lg);
background: var(--tzq-gradient-primary);
--class-color: var(--tzq-primary);
}
.tzq-card--class.tzq-card--error {
background: var(--tzq-gradient-error);
--class-color: var(--tzq-error);
}
.tzq-card--class.tzq-card--orange {
background: var(--tzq-gradient-orange);
--class-color: var(--tzq-color-orange);
}
.tzq-card--class.tzq-card--warning {
background: var(--tzq-gradient-warning);
--class-color: var(--tzq-warning);
}
.tzq-card--class.tzq-card--success {
background: var(--tzq-gradient-success);
--class-color: var(--tzq-success);
}
.tzq-card--class.tzq-card--secondary {
background: var(--tzq-gradient-secondary);
--class-color: var(--tzq-secondary);
}
.tzq-card--class.tzq-card--info {
background: linear-gradient(135deg, var(--tzq-info), var(--tzq-primary-dark));
--class-color: var(--tzq-info);
}
.tzq-card--class.tzq-card--primary {
background: var(--tzq-gradient-primary);
--class-color: var(--tzq-primary);
}
.tzq-card--class.tzq-card--primary-dark {
background: linear-gradient(
135deg,
var(--tzq-primary-dark),
var(--tzq-primary-darker)
);
--class-color: var(--tzq-primary-dark);
}
.tzq-card--class.tzq-card--default {
background: linear-gradient(
135deg,
var(--tzq-text-tertiary),
var(--tzq-text-secondary)
);
--class-color: var(--tzq-text-tertiary);
}
.tzq-card--class::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
color-mix(
in srgb,
var(--class-color, var(--tzq-primary)) 100%,
transparent
),
color-mix(in srgb, var(--class-color, var(--tzq-primary)) 80%, transparent)
);
opacity: 1;
transition: opacity 0.3s;
z-index: 0;
}
.tzq-card--class:hover {
transform: none;
box-shadow: 0 0 0 1px var(--tzq-border-light);
}
.tzq-card--class:hover::before {
opacity: 1;
}
.tzq-card__header {
padding: var(--tzq-spacing-md);
margin-bottom: var(--tzq-spacing-md);
border-bottom: 2px solid var(--tzq-border-light);
}
.tzq-card__title {
font-family: var(--tzq-font-heading);
font-size: var(--tzq-text-2xl);
font-weight: var(--tzq-font-bold);
color: var(--tzq-text-primary);
margin: 0;
}
.tzq-card__title--large {
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 16px;
}
.tzq-card__title--medium {
font-size: var(--tzq-text-xl);
font-weight: 700;
margin-bottom: var(--tzq-spacing-sm);
}
.tzq-card__icon {
font-size: 1.75rem;
margin-bottom: var(--tzq-spacing-md);
text-align: center;
}
.tzq-card__icon--box {
width: 64px;
height: 64px;
background: var(--tzq-bg-blue-light);
border-radius: var(--tzq-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--tzq-primary);
margin-bottom: 24px;
}
.tzq-card__icon--small {
font-size: 1.75rem;
margin-bottom: var(--tzq-spacing-xs);
}
.tzq-card__content {
font-size: var(--tzq-text-base);
line-height: 1.7;
color: var(--tzq-text-secondary);
}
.tzq-card__content--large {
font-size: 1rem;
line-height: 1.8;
}
.tzq-card__subtitle {
font-size: var(--tzq-text-sm);
color: var(--tzq-text-secondary);
margin-top: var(--tzq-spacing-1);
}
.tzq-card__description {
font-size: var(--tzq-text-base);
color: var(--tzq-text-secondary);
line-height: var(--tzq-leading-relaxed);
margin: 0;
}
.tzq-card__body {
color: var(--tzq-text-secondary);
line-height: var(--tzq-leading-relaxed);
}
.tzq-card__footer {
padding-top: var(--tzq-spacing-4);
border-top: 2px solid var(--tzq-border-light);
display: flex;
align-items: center;
gap: var(--tzq-gap-sm);
justify-content: space-evenly;
}