|
|
|
|
|
|
|
|
:root { |
|
|
--primary-color: #4F46E5; |
|
|
--secondary-color: #7C3AED; |
|
|
--accent-color: #EC4899; |
|
|
--text-color: #1F2937; |
|
|
--text-light: #6B7280; |
|
|
--bg-color: #F9FAFB; |
|
|
--card-bg: #FFFFFF; |
|
|
--border-color: #E5E7EB; |
|
|
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
|
|
|
.site-header { |
|
|
text-align: center; |
|
|
padding: 3rem 2rem; |
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); |
|
|
color: white; |
|
|
border-radius: 12px; |
|
|
margin-bottom: 2rem; |
|
|
box-shadow: var(--shadow-lg); |
|
|
} |
|
|
|
|
|
.site-header h1 { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 800; |
|
|
margin-bottom: 0.5rem; |
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.site-description { |
|
|
font-size: 1.25rem; |
|
|
margin-bottom: 0.5rem; |
|
|
opacity: 0.95; |
|
|
} |
|
|
|
|
|
.site-author { |
|
|
font-size: 1rem; |
|
|
opacity: 0.85; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.social-links a { |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
margin: 0 0.5rem; |
|
|
opacity: 0.9; |
|
|
transition: opacity 0.2s; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.social-links a:hover { |
|
|
opacity: 1; |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
|
|
|
.section-title { |
|
|
font-size: 1.75rem; |
|
|
font-weight: 700; |
|
|
margin-top: 2rem; |
|
|
margin-bottom: 1.5rem; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
|
|
|
.categories-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.category-card { |
|
|
background: var(--card-bg); |
|
|
border: 2px solid var(--border-color); |
|
|
border-radius: 12px; |
|
|
padding: 2rem; |
|
|
text-align: center; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.category-card:hover { |
|
|
transform: translateY(-4px); |
|
|
box-shadow: var(--shadow-lg); |
|
|
border-color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.category-icon { |
|
|
font-size: 3rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.category-card h3 { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 0.5rem; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.category-card p { |
|
|
color: var(--text-light); |
|
|
font-size: 0.95rem; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
|
|
|
.items-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.item-card { |
|
|
background: var(--card-bg); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 12px; |
|
|
padding: 1.5rem; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: var(--shadow); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.item-card:hover { |
|
|
transform: translateY(-4px); |
|
|
box-shadow: var(--shadow-lg); |
|
|
border-color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.item-card h3 { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 0.75rem; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.card-description { |
|
|
color: var(--text-light); |
|
|
font-size: 0.95rem; |
|
|
line-height: 1.6; |
|
|
margin-bottom: 1rem; |
|
|
flex-grow: 1; |
|
|
} |
|
|
|
|
|
.card-size { |
|
|
display: inline-block; |
|
|
background: var(--bg-color); |
|
|
color: var(--text-light); |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 6px; |
|
|
font-size: 0.85rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.75rem; |
|
|
} |
|
|
|
|
|
.card-tags { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 0.5rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.tag { |
|
|
display: inline-block; |
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
|
|
color: white; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 6px; |
|
|
font-size: 0.8rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.card-links { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 0.75rem; |
|
|
margin-top: auto; |
|
|
padding-top: 1rem; |
|
|
border-top: 1px solid var(--border-color); |
|
|
} |
|
|
|
|
|
.card-link { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
padding: 0.5rem 1rem; |
|
|
background: var(--primary-color); |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
border-radius: 8px; |
|
|
font-size: 0.9rem; |
|
|
font-weight: 600; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.card-link:hover { |
|
|
background: var(--secondary-color); |
|
|
transform: scale(1.05); |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.no-items { |
|
|
text-align: center; |
|
|
color: var(--text-light); |
|
|
font-size: 1.1rem; |
|
|
padding: 3rem; |
|
|
background: var(--bg-color); |
|
|
border-radius: 8px; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
|
|
|
.tabs { |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.site-header h1 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.site-description { |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.categories-grid, |
|
|
.items-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.category-card, |
|
|
.item-card { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: var(--bg-color); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: var(--primary-color); |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: var(--secondary-color); |
|
|
} |
|
|
|
