.tzq-homepage {
position: relative;
background: var(--tzq-bg-primary);
margin-top: 0;
padding-top: 0;
width: 100%;
}
.tzq-homepage-section {
position: relative;
}
.tzq-section-full {
width: 100%;
max-width: 100%;
}
.tzq-main-wrapper {
display: flex;
gap: var(--tzq-spacing-xl);
padding: var(--tzq-spacing-xl) var(--tzq-container-padding);
margin: 0;
max-width: var(--tzq-content-max);
margin-left: auto;
margin-right: auto;
}
.tzq-content-area {
flex: 1;
min-width: 0;
}
.tzq-stats-section-modern {
width: 100%;
}
.tzq-stats-card-modern {
background: var(--tzq-bg-primary);
border-radius: var(--tzq-radius-md);
padding: var(--tzq-spacing-xl);
box-shadow: var(--tzq-shadow-sm);
}
.tzq-stats-icon-wrapper {
display: flex;
align-items: center;
gap: var(--tzq-spacing-md);
margin-bottom: var(--tzq-spacing-lg);
}
.tzq-stats-icon-bg {
width: 48px;
height: 48px;
background: var(--tzq-gradient-primary);
border-radius: var(--tzq-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--tzq-text-inverse);
box-shadow: 0 4px 12px color-mix(in srgb, var(--tzq-primary) 20%, transparent);
}
.tzq-stats-header-text {
flex: 1;
}
.tzq-stats-title-modern {
font-size: var(--tzq-text-xl);
font-weight: 700;
margin: 0 0 var(--tzq-spacing-xs) 0;
color: var(--tzq-text-primary);
}
.tzq-stats-subtitle-modern {
font-size: var(--tzq-text-sm);
color: var(--tzq-text-secondary);
margin: 0;
}
.tzq-stats-numbers-modern {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--tzq-spacing-lg);
}
.tzq-stat-item-modern {
text-align: center;
}
.tzq-classes-section {
margin-bottom: var(--tzq-spacing-lg);
}
.tzq-classes-header {
margin-bottom: var(--tzq-spacing-lg);
text-align: center;
}
.tzq-classes-title {
font-size: var(--tzq-text-2xl);
font-weight: 700;
margin-bottom: var(--tzq-spacing-sm);
color: var(--tzq-text-primary);
letter-spacing: -0.02em;
}
.tzq-classes-subtitle {
color: var(--tzq-text-secondary);
font-size: var(--tzq-text-base);
margin: 0;
}
.tzq-classes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--tzq-spacing-md);
}
@media (min-width: 640px) {
.tzq-classes-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--tzq-spacing-lg);
}
}
@media (min-width: 1024px) {
.tzq-classes-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.tzq-class-number {
display: block;
font-size: var(--tzq-text-3xl);
font-weight: 800;
line-height: 1;
text-shadow: 0 2px 8px
color-mix(in srgb, var(--tzq-text-primary) 20%, transparent);
letter-spacing: -0.02em;
}
.tzq-class-label {
display: block;
font-size: var(--tzq-text-xs);
font-weight: 700;
opacity: 0.95;
text-transform: uppercase;
letter-spacing: 0.15em;
text-shadow: 0 1px 4px
color-mix(in srgb, var(--tzq-text-primary) 15%, transparent);
}
.tzq-list-section {
background: var(--tzq-bg-primary);
border-radius: var(--tzq-radius-md);
margin-bottom: var(--tzq-spacing-lg);
overflow: hidden;
box-shadow: var(--tzq-shadow-sm);
}
.tzq-list-section:last-child {
margin-bottom: 0;
}
.tzq-list-header {
padding: var(--tzq-spacing-lg) var(--tzq-spacing-xl);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--tzq-bg-secondary);
}
.tzq-list-section .tzq-list-title {
font-size: var(--tzq-text-lg);
font-weight: 700;
color: var(--tzq-text-primary);
display: flex;
align-items: center;
gap: var(--tzq-spacing-sm);
margin: 0;
line-height: 1.4;
}
.tzq-list-section .tzq-list-title::before {
content: "";
width: 4px;
height: 20px;
background: var(--tzq-gradient-primary);
border-radius: var(--tzq-radius-md);
flex-shrink: 0;
}
.tzq-list-actions {
display: flex;
gap: var(--tzq-spacing-sm);
}
.tzq-list-action-btn {
padding: 0.625rem 1.25rem;
background: var(--tzq-bg-primary);
border-radius: var(--tzq-radius-md);
font-size: var(--tzq-text-sm);
cursor: pointer;
transition: var(--tzq-transition);
color: var(--tzq-text-primary);
font-weight: 500;
}
.tzq-list-action-btn:hover {
background: var(--tzq-primary);
color: var(--tzq-text-inverse);
transform: translateY(-2px);
box-shadow: var(--tzq-shadow-md);
}
.tzq-list-content {
padding: 0;
}
.tzq-list-item {
padding: var(--tzq-spacing-xl);
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: var(--tzq-spacing-xl);
align-items: center;
transition: var(--tzq-transition);
cursor: pointer;
position: relative;
}
.tzq-list-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--tzq-primary) 5%, transparent),
transparent
);
transition: width 0.3s;
}
.tzq-list-item:hover {
background: var(--tzq-bg-secondary);
padding-left: calc(var(--tzq-spacing-xl) + 4px);
}
.tzq-list-item:hover::before {
width: 4px;
}
.tzq-item-icon {
width: 64px;
height: 64px;
background: var(--tzq-gradient-primary);
border-radius: var(--tzq-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--tzq-text-2xl);
flex-shrink: 0;
box-shadow: var(--tzq-shadow-md);
transition: var(--tzq-transition);
}
.tzq-list-item:hover .tzq-item-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: var(--tzq-shadow-lg);
}
.tzq-item-content {
min-width: 0;
}
.tzq-item-title {
font-weight: 600;
margin-bottom: var(--tzq-spacing-sm);
color: var(--tzq-text-primary);
font-size: var(--tzq-text-base);
line-height: 1.4;
}
.tzq-item-meta {
display: flex;
gap: var(--tzq-spacing-lg);
font-size: var(--tzq-text-sm);
color: var(--tzq-text-secondary);
flex-wrap: wrap;
}
.tzq-item-meta span {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.5rem;
background: var(--tzq-bg-tertiary);
border-radius: var(--tzq-radius-md);
}
.tzq-item-badge {
padding: 0.625rem 1rem;
background: linear-gradient(
135deg,
var(--tzq-bg-blue-light),
color-mix(in srgb, var(--tzq-secondary) 10%, transparent)
);
color: var(--tzq-primary);
border-radius: var(--tzq-radius-md);
font-size: var(--tzq-text-sm);
font-weight: 600;
white-space: nowrap;
}
.tzq-item-action {
padding: 0.75rem 1.5rem;
background: var(--tzq-gradient-primary);
color: var(--tzq-text-inverse);
border: 1px solid var(--tzq-primary-light);
border-radius: var(--tzq-radius-md);
font-size: var(--tzq-text-sm);
font-weight: 600;
cursor: pointer;
transition: var(--tzq-transition);
box-shadow: 0 2px 8px color-mix(in srgb, var(--tzq-primary) 20%, transparent);
white-space: nowrap;
}
.tzq-item-action:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--tzq-primary) 30%, transparent);
}
.tzq-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--tzq-spacing-md);
margin-bottom: var(--tzq-spacing-lg);
}