.page-hero {
padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
background: linear-gradient(180deg, var(--color-primary-bg) 0%, var(--color-bg) 100%);
text-align: center;
}
.page-hero-title {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
line-height: 1.2;
color: var(--color-text);
margin-bottom: var(--space-md);
}
.page-hero-desc {
font-size: 1.1rem;
color: var(--color-text-secondary);
max-width: 600px;
margin: 0 auto var(--space-xl);
line-height: 1.6;
}
.page-hero-actions {
display: flex;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.qa-listing {
padding: var(--space-md) 0 var(--space-3xl);
background: var(--color-bg-alt);
}
.qa-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--space-2xl);
align-items: start;
}
.qa-categories {
display: flex;
gap: var(--space-sm);
margin: var(--space-lg) 0;
flex-wrap: wrap;
}
.qa-main {
min-width: 0;
}
.qa-cat-pill {
display: inline-block;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-secondary);
background: var(--color-bg);
border: 1px solid var(--color-border);
padding: 0.45rem 1rem;
border-radius: var(--radius-full);
text-decoration: none;
transition: all var(--transition-fast);
cursor: pointer;
white-space: nowrap;
}
.qa-cat-pill:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.qa-cat-pill--active {
color: #fff;
background: var(--color-primary);
border-color: var(--color-primary);
}
.qa-cat-pill--active:hover {
color: #fff;
background: var(--color-primary-hover);
}
.qa-grid {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.qa-card {
background: var(--color-bg);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-lg);
transition: all var(--transition-base);
display: flex;
gap: var(--space-lg);
position: relative;
overflow: hidden;
min-width: 0;
}
.qa-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: var(--color-border);
transition: background var(--transition-base);
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.qa-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border);
transform: translateY(-2px);
}
.qa-card:hover::before {
background: var(--color-primary);
}
.qa-card--solved::before {
background: var(--color-accent);
}
.qa-card--solved:hover::before {
background: var(--color-accent);
}
.qa-card--hot {
border-color: rgba(231,76,60,0.2);
}
.qa-card--hot::before {
background: var(--color-red);
}
.qa-card-content {
flex: 1;
min-width: 0;
}
.qa-card-header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
flex-wrap: wrap;
min-width: 0;
}
.qa-card-tag {
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
white-space: nowrap;
}
.qa-card-tag--1 { color: var(--color-primary); background: var(--color-primary-light); }
.qa-card-tag--2 { color: #7C3AED; background: #F3E8FF; }
.qa-card-tag--3 { color: #059669; background: #D1FAE5; }
.qa-card-tag--4 { color: #D97706; background: #FEF3C7; }
.qa-card-tag--5 { color: var(--color-text-secondary); background: var(--color-bg-alt2); }
.qa-card-answers {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
padding: 0.15rem 0.5rem;
border-radius: var(--radius-full);
transition: color var(--transition-fast), background var(--transition-fast);
min-width: 0;
color: #e37500;
background: #FFF8E6;
}
.qa-card-answers > svg {
width: 13px !important;
height: 13px !important;
min-width: 0;
max-width: 13px;
flex-shrink: 0;
}
.qa-card-title {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.4;
margin-bottom: var(--space-sm);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.qa-card-title a {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast);
}
.qa-card-title a:hover {
color: var(--color-primary);
}
.qa-card-excerpt {
font-size: 0.88rem;
color: var(--color-text-secondary);
line-height: 1.6;
margin-bottom: var(--space-md);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.qa-card-meta {
display: flex;
align-items: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.qa-card-author {
display: flex;
align-items: center;
gap: 0.5rem;
}
.qa-card-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 0.65rem;
font-weight: 700;
flex-shrink: 0;
}
.qa-card-author-name {
font-size: 0.82rem;
font-weight: 600;
color: var(--color-text);
}
.qa-card-date {
font-size: 0.78rem;
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 0.35rem;
}
.qa-card-date svg {
width: 0.85rem;
height: 0.85rem;
}
.qa-card-last-reply {
font-size: 0.78rem;
color: var(--color-text-muted);
}
.qa-card-last-reply strong {
color: var(--color-primary);
font-weight: 600;
}
.qa-sidebar {
position: sticky;
top: calc(var(--header-height) + var(--space-lg));
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.qa-sidebar-widget {
background: var(--color-bg);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-xs);
}
.qa-sidebar-widget h4 {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--color-primary-light);
}
.qa-ask-cta {
text-align: center;
background: linear-gradient(135deg, var(--color-primary-bg) 0%, var(--color-bg) 100%);
border: 2px dashed var(--color-primary);
}
.qa-ask-cta p {
font-size: 0.85rem;
color: var(--color-text-secondary);
line-height: 1.6;
margin-bottom: var(--space-md);
}
.qa-service-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.qa-service-item {
display: block;
padding: 0.6rem 0.75rem;
border-radius: var(--radius-md);
border-left: 3px solid transparent;
background: var(--color-bg-alt);
transition: all var(--transition-fast);
text-decoration: none;
}
.qa-service-item:hover {
background: var(--color-bg);
border-color: var(--color-border-light);
box-shadow: var(--shadow-xs);
}
.qa-service-item:nth-child(1) { border-left-color: var(--color-primary); }
.qa-service-item:nth-child(2) { border-left-color: var(--color-accent); }
.qa-service-item:nth-child(3) { border-left-color: #9545BA; }
.qa-service-item:nth-child(4) { border-left-color: #E9A82C; }
.qa-service-item:nth-child(5) { border-left-color: #4F46E5; }
.qa-service-name {
display: block;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 0.1rem;
transition: color var(--transition-fast);
}
.qa-service-item:hover .qa-service-name {
color: var(--color-primary);
}
.qa-service-desc {
display: block;
font-size: 0.7rem;
color: var(--color-text-muted);
line-height: 1.4;
margin-bottom: 0.25rem;
}
.qa-service-price {
display: block;
font-size: 0.7rem;
color: var(--color-text-secondary);
}
.qa-service-price strong {
font-family: var(--font-heading);
font-weight: 700;
color: var(--color-text);
font-size: 0.85rem;
}
.qa-service-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
margin-top: var(--space-md);
padding: 0.55rem 1rem;
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
color: #fff;
background: var(--color-primary);
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition-fast);
}
.qa-service-cta:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.qa-service-cta svg {
width: 14px;
height: 14px;
}
.qa-hot-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.qa-hot-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: 0.5rem 0.5rem;
border-radius: var(--radius-md);
transition: background var(--transition-fast);
}
.qa-hot-item:hover {
background: var(--color-bg-alt);
}
.qa-hot-ranking {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 800;
color: var(--color-primary);
width: 24px;
text-align: center;
flex-shrink: 0;
line-height: 1.3;
}
.qa-hot-item:nth-child(1) .qa-hot-ranking { color: var(--color-red); }
.qa-hot-item:nth-child(2) .qa-hot-ranking { color: #F59E0B; }
.qa-hot-item:nth-child(3) .qa-hot-ranking { color: var(--color-primary); }
.qa-hot-info {
flex: 1;
min-width: 0;
}
.qa-hot-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.2rem;
transition: color var(--transition-fast);
}
.qa-hot-item:hover .qa-hot-title {
color: var(--color-primary);
}
.qa-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
padding-top: var(--space-xl);
margin-top: var(--space-md);
border-top: 1px solid var(--color-border-light);
}
.qa-pagination .pages {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border-light);
}
.qa-pagination a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-secondary);
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
cursor: pointer;
border: 1px solid var(--color-border);
background: var(--color-bg);
}
.qa-pagination a:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.qa-pagination .pagination {
display: flex;
gap: 0.35rem;
}
.qa-pagination .pages a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-secondary);
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
cursor: pointer;
border: 1px solid var(--color-border);
background: var(--color-bg);
}
.qa-pagination .pages a:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.qa-pagination .pages strong {
display: inline-flex;
align-items: center;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
color: #fff;
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
background: var(--color-primary);
border: 1px solid var(--color-primary);
}
.qa-empty {
text-align: center;
padding: var(--space-3xl) var(--space-xl);
}
.qa-empty-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-bg-alt2);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-lg);
}
.qa-empty-icon svg {
width: 28px;
height: 28px;
color: var(--color-text-muted);
}
.qa-empty-title {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.qa-empty-desc {
font-size: 0.92rem;
color: var(--color-text-secondary);
margin-bottom: var(--space-xl);
}
@media (max-width: 1023px) {
.qa-layout {
grid-template-columns: 1fr;
}
.qa-sidebar {
position: static;
}
}
@media (max-width: 767px) {
.page-hero {
padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-xl);
}
.qa-card {
flex-direction: column;
gap: var(--space-md);
padding: var(--space-md);
}
.qa-card::before {
top: 0;
left: 0;
right: 0;
bottom: auto;
width: 100%;
height: 4px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.qa-card-meta {
gap: var(--space-sm);
flex-direction: column;
align-items: flex-start;
}
.qa-pagination .pages a,
.qa-pagination a {
padding: 0.4rem 0.7rem;
font-size: 0.8rem;
}
}
@media (max-width: 420px) {
.qa-card-title {
font-size: 0.92rem;
}
.qa-card-excerpt {
font-size: 0.8rem;
}
.qa-sidebar-widget {
padding: var(--space-md);
}
.qa-card-header {
gap: var(--space-xs);
}
.qa-card-tag {
white-space: normal;
text-align: center;
}
.qa-card-answers {
flex-shrink: 1;
white-space: normal;
}
.qa-cat-pill {
white-space: normal;
text-align: center;
padding: 0.35rem 0.65rem;
}
.qa-pagination .pages {
gap: var(--space-sm);
}
.qa-pagination .pages a,
.qa-pagination a {
padding: 0.35rem 0.5rem;
font-size: 0.75rem;
}
.qa-pagination .pages strong {
padding: 0.35rem 0.5rem;
font-size: 0.75rem;
}
.pagination-label {
display: none;
}
}
@media (max-width: 360px) {
.qa-card-title {
font-size: 0.88rem;
}
.qa-card-excerpt {
font-size: 0.78rem;
}
}
.qa-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,.55);
backdrop-filter: blur(3px);
align-items: center;
justify-content: center;
padding: var(--space-md);
}
.qa-modal-overlay.active {
display: flex;
}
.qa-modal {
background: #fff;
border-radius: 12px;
max-width: 520px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: var(--space-xl);
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,.2);
animation: qaModalIn .25s ease;
}
@keyframes qaModalIn {
from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }
}
.qa-modal h3 {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.15rem;
margin-bottom: var(--space-lg);
color: var(--color-heading);
}
.qa-modal-close {
position: absolute;
top: 12px;
right: 16px;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--color-text-muted);
line-height: 1;
padding: 4px 8px;
border-radius: 6px;
}
.qa-modal-close:hover {
background: #f1f5f9;
color: var(--color-text);
}
.qa-modal-field {
margin-bottom: var(--space-md);
}
.qa-modal-field label {
display: block;
font-weight: 600;
font-size: 0.88rem;
margin-bottom: 4px;
color: var(--color-text);
}
.qa-modal-field input,
.qa-modal-field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 0.95rem;
font-family: inherit;
transition: border-color .2s;
box-sizing: border-box;
}
.qa-modal-field input:focus,
.qa-modal-field textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.qa-modal-hint {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.78rem;
color: var(--color-text-muted);
margin-top: 4px;
}
.qa-modal-submit {
width: 100%;
margin-top: var(--space-sm);
}
.qa-ask-btn {
cursor: pointer;
}
.qa-ask-cta .qa-ask-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
width: 100%;
font-size: 0.88rem;
font-weight: 600;
color: #fff;
background: var(--color-primary);
padding: 0.65rem 1rem;
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition-fast);
border: none;
}
.qa-ask-cta .qa-ask-btn:hover {
background: var(--color-primary-dark);
}
@media (max-width: 480px) {
.qa-modal {
padding: var(--space-lg);
}
}