Spaces:
Running
Running
| .scroll-stack-container { | |
| position: relative; | |
| width: 100%; | |
| padding: 2rem 0 2rem; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| @media (min-width: 768px) { | |
| .scroll-stack-container { | |
| padding: 4rem 0 4rem; | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .scroll-stack-container { | |
| padding-left: 3rem; | |
| padding-right: 3rem; | |
| } | |
| } | |
| .scroll-stack-card { | |
| transform-origin: top center; | |
| will-change: transform; | |
| height: auto; | |
| min-height: 240px; | |
| width: 100%; | |
| max-width: 900px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding: 1.5rem 1.25rem; | |
| border-radius: 16px; | |
| box-sizing: border-box; | |
| position: sticky; | |
| /* Clean dark styling */ | |
| background: linear-gradient(145deg, | |
| rgba(25, 25, 25, 0.98) 0%, | |
| rgba(12, 12, 12, 1) 100%); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6); | |
| overflow: hidden; | |
| } | |
| @media (min-width: 768px) { | |
| .scroll-stack-card { | |
| min-height: 300px; | |
| padding: 2.5rem 3rem; | |
| border-radius: 20px; | |
| } | |
| } | |
| .scroll-stack-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| pointer-events: none; | |
| opacity: 0.5; | |
| } | |
| .scroll-stack-end { | |
| width: 100%; | |
| height: 1px; | |
| } | |
| /* Project card specific styles */ | |
| .project-card-content { | |
| position: relative; | |
| z-index: 10; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .project-number { | |
| position: absolute; | |
| top: -0.5rem; | |
| right: -0.25rem; | |
| font-size: 4rem; | |
| font-weight: 700; | |
| color: rgba(255, 255, 255, 0.03); | |
| line-height: 1; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| @media (min-width: 768px) { | |
| .project-number { | |
| top: -1rem; | |
| right: -0.5rem; | |
| font-size: 8rem; | |
| } | |
| } | |
| .project-category { | |
| display: inline-flex; | |
| padding: 0.375rem 0.75rem; | |
| background: rgba(255, 255, 255, 0.08); | |
| border-radius: 9999px; | |
| font-size: 0.65rem; | |
| font-weight: 500; | |
| color: rgba(255, 255, 255, 0.6); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| width: fit-content; | |
| margin-bottom: 1rem; | |
| } | |
| @media (min-width: 768px) { | |
| .project-category { | |
| padding: 0.5rem 1rem; | |
| font-size: 0.75rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| } | |
| .project-title { | |
| font-size: 1.5rem; | |
| font-weight: 300; | |
| color: rgba(255, 255, 255, 0.9); | |
| margin-bottom: 0.75rem; | |
| letter-spacing: -0.02em; | |
| } | |
| @media (min-width: 768px) { | |
| .project-title { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| } | |
| .project-description { | |
| font-size: 0.875rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| line-height: 1.6; | |
| max-width: 500px; | |
| margin-bottom: 1.5rem; | |
| } | |
| @media (min-width: 768px) { | |
| .project-description { | |
| font-size: 1rem; | |
| line-height: 1.7; | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| .project-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.375rem; | |
| margin-top: auto; | |
| } | |
| @media (min-width: 768px) { | |
| .project-tags { | |
| gap: 0.5rem; | |
| } | |
| } | |
| .project-tag { | |
| padding: 0.375rem 0.75rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 9999px; | |
| font-size: 0.7rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| @media (min-width: 768px) { | |
| .project-tag { | |
| padding: 0.5rem 1rem; | |
| font-size: 0.8rem; | |
| } | |
| } | |
| .project-year { | |
| position: absolute; | |
| bottom: 1.5rem; | |
| right: 1.25rem; | |
| font-size: 0.75rem; | |
| color: rgba(255, 255, 255, 0.3); | |
| font-weight: 500; | |
| } | |
| @media (min-width: 768px) { | |
| .project-year { | |
| bottom: 2.5rem; | |
| right: 2.5rem; | |
| font-size: 0.875rem; | |
| } | |
| } | |
| .project-link { | |
| position: absolute; | |
| top: 1.5rem; | |
| right: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| color: rgba(255, 255, 255, 0.7); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| @media (min-width: 768px) { | |
| .project-link { | |
| top: 2.5rem; | |
| right: 2.5rem; | |
| width: 3rem; | |
| height: 3rem; | |
| } | |
| } | |
| .project-link:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| transform: scale(1.1); | |
| } | |
| /* Gradient accents for each card */ | |
| .scroll-stack-card.card-1::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #3b82f6, #06b6d4); | |
| } | |
| .scroll-stack-card.card-2::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #8b5cf6, #ec4899); | |
| } | |
| .scroll-stack-card.card-3::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #10b981, #14b8a6); | |
| } | |
| .scroll-stack-card.card-4::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #f97316, #fbbf24); | |
| } | |
| /* Section header styles */ | |
| .scroll-stack-header { | |
| padding: 2rem 0 1.5rem; | |
| position: relative; | |
| z-index: 20; | |
| } | |
| @media (min-width: 768px) { | |
| .scroll-stack-header { | |
| padding: 4rem 0 2rem; | |
| } | |
| } | |
| .scroll-stack-header-label { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| color: rgba(255, 255, 255, 0.4); | |
| text-transform: uppercase; | |
| letter-spacing: 0.15em; | |
| margin-bottom: 0.75rem; | |
| } | |
| @media (min-width: 768px) { | |
| .scroll-stack-header-label { | |
| font-size: 0.875rem; | |
| margin-bottom: 1rem; | |
| } | |
| } | |
| .scroll-stack-header-title { | |
| font-size: 1.875rem; | |
| font-weight: 300; | |
| color: rgba(255, 255, 255, 0.9); | |
| letter-spacing: -0.02em; | |
| } | |
| @media (min-width: 768px) { | |
| .scroll-stack-header-title { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .scroll-stack-header-title { | |
| font-size: 3rem; | |
| } | |
| } |