.container {
max-width: var(--container-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
width: 100%;
} .section {
padding: var(--spacing-section) 0;
}
.section--dark {
background-color: var(--color-bg-primary);
}
.section--card {
background-color: var(--color-bg-card);
}
.section--alt {
background-color: var(--color-bg-card-alt);
} .section--light {
background-color: var(--color-light-bg);
color: var(--color-light-text-primary);
}
.section--light-alt {
background-color: var(--color-light-bg-alt);
color: var(--color-light-text-primary);
} .section--light h1,
.section--light h2,
.section--light h3,
.section--light h4,
.section--light h5,
.section--light h6,
.section--light-alt h1,
.section--light-alt h2,
.section--light-alt h3,
.section--light-alt h4,
.section--light-alt h5,
.section--light-alt h6 {
color: var(--color-light-text-primary);
}
.section--light p,
.section--light-alt p {
color: var(--color-light-text-secondary);
}
.section--light .section-label,
.section--light-alt .section-label {
color: var(--color-accent);
}
.section--light .section-title,
.section--light-alt .section-title {
color: var(--color-light-text-primary);
}
.section--light .section-subtitle,
.section--light-alt .section-subtitle {
color: var(--color-light-text-muted);
}
.section--light .text-muted,
.section--light-alt .text-muted {
color: var(--color-light-text-muted);
}
.section--light .text-secondary,
.section--light-alt .text-secondary {
color: var(--color-light-text-secondary);
} .section--light .card,
.section--light-alt .card {
background-color: var(--color-light-bg);
border-color: var(--color-light-border);
}
.section--light .card:hover,
.section--light-alt .card:hover {
border-color: var(--color-light-border-hover);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.section--light .card-title,
.section--light .card-title a,
.section--light-alt .card-title,
.section--light-alt .card-title a {
color: var(--color-light-text-primary);
}
.section--light .card-title a:hover,
.section--light-alt .card-title a:hover {
color: var(--color-accent);
}
.section--light .card-text,
.section--light-alt .card-text {
color: var(--color-light-text-secondary);
} .section--light .accordion-item,
.section--light-alt .accordion-item {
background-color: var(--color-light-bg-alt);
border-color: var(--color-light-border);
}
.section--light .accordion-item.is-active,
.section--light-alt .accordion-item.is-active {
border-color: rgba(194, 109, 40, 0.3);
}
.section--light .accordion-trigger,
.section--light-alt .accordion-trigger {
color: var(--color-light-text-primary);
}
.section--light .accordion-body,
.section--light-alt .accordion-body {
color: var(--color-light-text-secondary);
} .section--light .form-input,
.section--light .form-select,
.section--light .form-textarea,
.section--light-alt .form-input,
.section--light-alt .form-select,
.section--light-alt .form-textarea {
background-color: var(--color-light-bg-alt);
border-color: var(--color-light-border-hover);
color: var(--color-light-text-primary);
}
.section--light .form-label,
.section--light-alt .form-label {
color: var(--color-light-text-secondary);
} .section--light .related-links li,
.section--light-alt .related-links li {
border-bottom-color: var(--color-light-border);
}
.section--light .related-links a,
.section--light-alt .related-links a {
color: var(--color-light-text-secondary);
}
.section--light .related-links a:hover,
.section--light-alt .related-links a:hover {
color: var(--color-accent);
} .section--light .pagination .page-numbers,
.section--light-alt .pagination .page-numbers {
color: var(--color-light-text-secondary);
background-color: var(--color-light-bg);
border-color: var(--color-light-border);
}
.section--light .pagination .page-numbers:hover,
.section--light-alt .pagination .page-numbers:hover {
border-color: var(--color-light-border-hover);
color: var(--color-light-text-primary);
}
.section--light .pagination .page-numbers.current,
.section--light-alt .pagination .page-numbers.current {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-text-primary);
} .section--light .btn-outline,
.section--light-alt .btn-outline {
color: var(--color-light-text-primary);
border-color: var(--color-light-text-primary);
}
.section--light .btn-outline:hover,
.section--light-alt .btn-outline:hover {
background-color: var(--color-light-text-primary);
color: var(--color-text-primary);
} .section-header {
text-align: center;
margin-bottom: var(--spacing-2xl);
}
.section-label {
display: inline-block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: var(--spacing-md);
}
.section-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-md);
}
.section-subtitle {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
max-width: 640px;
margin-left: auto;
margin-right: auto;
} .grid {
display: grid;
gap: var(--spacing-lg);
}
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
} .flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-center {
align-items: center;
justify-content: center;
}
.flex-between {
align-items: center;
justify-content: space-between;
}
.flex-start {
align-items: flex-start;
}
.flex-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-sm {
gap: var(--spacing-sm);
}
.gap-md {
gap: var(--spacing-md);
}
.gap-lg {
gap: var(--spacing-lg);
}
.gap-xl {
gap: var(--spacing-xl);
} .content-area {
padding: var(--spacing-section) 0;
}
.content-with-sidebar {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--spacing-2xl);
align-items: start;
} .text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-accent {
color: var(--color-accent);
}
.text-muted {
color: var(--color-text-muted);
}
.text-secondary {
color: var(--color-text-secondary);
} .mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); } .narrow-container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
} .page-content-wrapper {
max-width: 900px;
margin-left: auto;
margin-right: auto;
} .hero-actions.justify-center {
justify-content: center;
} .section .hero-actions {
margin-top: var(--spacing-xl);
} .posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
}