Spaces:
Sleeping
Sleeping
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); | |
| gap: 28px; | |
| } | |
| .project-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| transition: all var(--transition-base); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-8px); | |
| border-color: var(--border-color); | |
| box-shadow: var(--shadow-lg), var(--shadow-glow); | |
| } | |
| .project-card-header { | |
| height: 200px; | |
| background: var(--bg-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .project-img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform var(--transition-base); | |
| } | |
| .project-card:hover .project-img { | |
| transform: scale(1.05); | |
| } | |
| .project-card-header span { | |
| position: relative; | |
| z-index: 1; | |
| font-size: 2.5rem; | |
| } | |
| .project-card-body { | |
| padding: 24px; | |
| } | |
| .project-card-body h3 { | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| color: var(--text-heading); | |
| margin-bottom: 10px; | |
| } | |
| .project-card-body p { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| margin-bottom: 16px; | |
| line-height: 1.7; | |
| } | |
| .project-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-bottom: 20px; | |
| } | |
| .project-tag { | |
| background: rgba(139, 92, 246, 0.1); | |
| color: var(--accent-primary); | |
| padding: 4px 14px; | |
| border-radius: var(--radius-full); | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| border: 1px solid rgba(139, 92, 246, 0.2); | |
| } | |
| .project-links { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .project-links a { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: var(--accent-primary); | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| transition: all var(--transition-fast); | |
| } | |
| .project-links a:hover { | |
| color: var(--accent-secondary); | |
| } | |
| .project-links a svg { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| @media (max-width: 992px) { | |
| .projects-grid { grid-template-columns: 1fr; } | |
| } | |