537 lines
10 KiB
CSS
537 lines
10 KiB
CSS
.projectsSection {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-top: 3.75rem;
|
||
padding-bottom: 5rem;
|
||
}
|
||
|
||
.headerRow {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
margin-bottom: 2.75rem;
|
||
}
|
||
|
||
.arrowButtons {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
padding-top: 2px;
|
||
}
|
||
|
||
.navButton {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: var(--size-icon-button);
|
||
height: var(--size-icon-button);
|
||
padding: 0;
|
||
border: 2px solid var(--color-blue-600);
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
transition:
|
||
color var(--motion-duration-fast) ease,
|
||
background-color var(--motion-duration-fast) ease,
|
||
border-color var(--motion-duration-fast) ease,
|
||
transform var(--motion-duration-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
.navButtonPrevious,
|
||
.navButtonNext {
|
||
background: transparent;
|
||
color: var(--color-blue-600);
|
||
}
|
||
|
||
.navButton svg {
|
||
transition: transform var(--motion-duration-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
.navButton:focus-visible {
|
||
outline: 3px solid var(--focus-ring);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
.navButton:disabled {
|
||
cursor: default;
|
||
opacity: 0.36;
|
||
}
|
||
|
||
[data-theme="dark"] .navButton {
|
||
border-color: var(--color-blue-white);
|
||
background: transparent;
|
||
color: var(--color-blue-white);
|
||
}
|
||
|
||
.navButton:active:not(:disabled) {
|
||
border-color: var(--color-blue-700);
|
||
background: var(--color-blue-600);
|
||
color: var(--color-blue-white);
|
||
transform: scale(0.96);
|
||
}
|
||
|
||
[data-theme="dark"] .navButton:active:not(:disabled) {
|
||
border-color: var(--color-blue-white);
|
||
background: var(--color-blue-white);
|
||
color: var(--color-blue-950);
|
||
}
|
||
|
||
.carouselViewport {
|
||
position: relative;
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
cursor: grab;
|
||
scrollbar-width: none;
|
||
overscroll-behavior-inline: contain;
|
||
touch-action: pan-y;
|
||
user-select: none;
|
||
container-type: inline-size;
|
||
container-name: carousel;
|
||
}
|
||
|
||
.carouselViewport::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.carouselViewport:focus-visible {
|
||
border-radius: var(--radius-lg);
|
||
outline: 3px solid var(--focus-ring);
|
||
outline-offset: 4px;
|
||
}
|
||
|
||
.dragging {
|
||
cursor: grabbing;
|
||
scroll-snap-type: none !important;
|
||
scroll-behavior: auto !important;
|
||
user-select: none;
|
||
}
|
||
|
||
.carouselTrack {
|
||
display: flex;
|
||
align-items: stretch;
|
||
width: max-content;
|
||
gap: 1.25rem;
|
||
padding: 0.25rem 0 0.5rem;
|
||
}
|
||
|
||
.card {
|
||
display: flex;
|
||
flex: 0 0 clamp(18.75rem, 24vw, 21.25rem);
|
||
flex-shrink: 0;
|
||
flex-direction: column;
|
||
width: clamp(18.75rem, 24vw, 21.25rem);
|
||
min-height: 28.75rem;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
border: 1px solid var(--border-default);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--bg-raised);
|
||
scroll-snap-align: start;
|
||
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
|
||
}
|
||
|
||
.mediaContainer {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 16 / 10;
|
||
overflow: hidden;
|
||
background: var(--color-blue-900);
|
||
}
|
||
|
||
.projectImage {
|
||
object-fit: cover;
|
||
object-position: center;
|
||
pointer-events: none;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.cardBody {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
padding: 1.125rem 1rem;
|
||
}
|
||
|
||
.cardTitleRow {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4375rem;
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
.cardTitle {
|
||
color: var(--text-primary);
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.titleLinkIcon {
|
||
flex: 0 0 auto;
|
||
color: var(--color-blue-500);
|
||
transition: transform var(--motion-duration-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
[data-theme="dark"] .titleLinkIcon {
|
||
color: var(--accent-default);
|
||
}
|
||
|
||
.cardDate {
|
||
margin-bottom: 0.625rem;
|
||
color: var(--text-muted);
|
||
font-size: 0.6875rem;
|
||
font-weight: 700;
|
||
line-height: var(--line-height-label-small);
|
||
letter-spacing: var(--letter-spacing-eyebrow);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.cardDesc {
|
||
display: -webkit-box;
|
||
margin-bottom: 1rem;
|
||
overflow: hidden;
|
||
color: var(--text-primary);
|
||
font-size: 0.84375rem;
|
||
font-weight: 400;
|
||
line-height: 1.55;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
white-space: normal;
|
||
word-break: normal;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.tagList {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.375rem;
|
||
margin-bottom: 1.125rem;
|
||
}
|
||
|
||
.tagBadge {
|
||
padding: 0.3125rem 0.75rem;
|
||
border: 0;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--color-blue-200);
|
||
color: var(--color-blue-700);
|
||
font-size: var(--font-size-label-small);
|
||
font-weight: 500;
|
||
line-height: var(--line-height-label-small);
|
||
}
|
||
|
||
[data-theme="dark"] .tagBadge {
|
||
background: var(--bg-subtle);
|
||
color: var(--color-blue-100);
|
||
}
|
||
|
||
.cardFooter {
|
||
margin-top: auto;
|
||
}
|
||
|
||
.caseStudyLink {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.625rem;
|
||
color: var(--color-blue-500);
|
||
font-size: var(--font-size-body-small);
|
||
font-weight: 600;
|
||
transition: color 0.2s ease, gap 0.2s ease;
|
||
min-height: 2.75rem;
|
||
}
|
||
|
||
.caseStudyLink svg {
|
||
transition: transform var(--motion-duration-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
.caseStudyLink:focus-visible {
|
||
border-radius: 2px;
|
||
outline: 3px solid var(--focus-ring);
|
||
outline-offset: 4px;
|
||
}
|
||
|
||
[data-theme="dark"] .caseStudyLink {
|
||
color: var(--accent-default);
|
||
}
|
||
|
||
.scrollbarWrapper {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 2.5rem;
|
||
}
|
||
|
||
.scrollbarTrack {
|
||
position: relative;
|
||
width: 30rem;
|
||
max-width: 100%;
|
||
height: 0.375rem;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--color-blue-200);
|
||
cursor: pointer;
|
||
touch-action: none;
|
||
}
|
||
|
||
.scrollbarTrack::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -0.75rem 0;
|
||
}
|
||
|
||
.scrollbarTrack:focus-visible {
|
||
outline: 3px solid var(--focus-ring);
|
||
outline-offset: 0.5rem;
|
||
}
|
||
|
||
.scrollbarThumb {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
height: 100%;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--color-blue-400);
|
||
cursor: grab;
|
||
will-change: transform;
|
||
}
|
||
|
||
.scrollbarDragging .scrollbarThumb {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
[data-theme="dark"] .scrollbarTrack {
|
||
background: var(--color-blue-800);
|
||
}
|
||
|
||
[data-theme="dark"] .scrollbarThumb {
|
||
background: var(--color-blue-300);
|
||
}
|
||
|
||
/* ================================================================
|
||
LAPTOP 1101px – 1440px
|
||
Comfortable ~290px-330px cards (~3 to 4 visible)
|
||
================================================================ */
|
||
@media (max-width: 1440px) and (min-width: 1101px) {
|
||
.carouselTrack {
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.card {
|
||
flex: 0 0 clamp(18.125rem, 23vw, 20.625rem);
|
||
width: clamp(18.125rem, 23vw, 20.625rem);
|
||
}
|
||
|
||
.scrollbarTrack {
|
||
width: min(30rem, 50vw);
|
||
}
|
||
}
|
||
|
||
/* ================================================================
|
||
TABLET 651px – 1100px
|
||
Comfortable ~310px-350px cards (~2 cards visible)
|
||
================================================================ */
|
||
@media (max-width: 1100px) and (min-width: 651px) {
|
||
.projectsSection {
|
||
padding-top: var(--space-8);
|
||
padding-bottom: var(--space-9);
|
||
}
|
||
|
||
.headerRow {
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.carouselViewport {
|
||
scroll-snap-type: x mandatory;
|
||
scroll-padding-inline: 0;
|
||
}
|
||
|
||
.carouselTrack {
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.card {
|
||
flex: 0 0 clamp(19.375rem, 42vw, 21.875rem);
|
||
width: clamp(19.375rem, 42vw, 21.875rem);
|
||
min-height: 28rem;
|
||
box-sizing: border-box;
|
||
scroll-snap-align: start;
|
||
}
|
||
|
||
.mediaContainer {
|
||
aspect-ratio: 16 / 10;
|
||
}
|
||
|
||
.cardBody {
|
||
padding: 1.125rem 1rem;
|
||
}
|
||
|
||
.cardTitle {
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
.cardDesc {
|
||
font-size: 0.84375rem;
|
||
line-height: 1.55;
|
||
margin-bottom: 0.875rem;
|
||
-webkit-line-clamp: 3;
|
||
white-space: normal;
|
||
word-break: normal;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.tagList {
|
||
gap: 0.375rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.tagBadge {
|
||
padding: 0.25rem 0.5625rem;
|
||
font-size: 0.6875rem;
|
||
}
|
||
|
||
.scrollbarWrapper {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.scrollbarTrack {
|
||
width: min(22.5rem, 60vw);
|
||
}
|
||
}
|
||
|
||
/* ================================================================
|
||
MOBILE ≤ 650px
|
||
Clean 1-column layout: 1 card visible at a time with page gutter
|
||
================================================================ */
|
||
@media (max-width: 650px) {
|
||
.projectsSection {
|
||
padding-top: 3rem;
|
||
padding-bottom: 4rem;
|
||
}
|
||
|
||
.headerRow {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.arrowButtons {
|
||
display: none;
|
||
}
|
||
|
||
.carouselViewport {
|
||
width: 100%;
|
||
margin-inline: 0;
|
||
padding-inline: 0;
|
||
scroll-padding-inline: 0;
|
||
scroll-snap-type: x mandatory;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.carouselTrack {
|
||
gap: 1rem;
|
||
width: max-content;
|
||
}
|
||
|
||
.card {
|
||
flex: 0 0 calc(100vw - (2 * var(--layout-page-gutter)));
|
||
flex: 0 0 100cqw;
|
||
width: calc(100vw - (2 * var(--layout-page-gutter)));
|
||
width: 100cqw;
|
||
min-width: calc(100vw - (2 * var(--layout-page-gutter)));
|
||
min-width: 100cqw;
|
||
max-width: 100%;
|
||
min-height: 26.25rem;
|
||
box-sizing: border-box;
|
||
scroll-snap-align: start;
|
||
scroll-snap-stop: always;
|
||
}
|
||
|
||
.mediaContainer {
|
||
aspect-ratio: 16 / 10;
|
||
}
|
||
|
||
.cardBody {
|
||
padding: 1.125rem 1rem;
|
||
}
|
||
|
||
.cardTitle {
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
.cardDesc {
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
margin-bottom: 0.875rem;
|
||
white-space: normal;
|
||
word-break: normal;
|
||
overflow-wrap: break-word;
|
||
-webkit-line-clamp: 3;
|
||
}
|
||
|
||
.tagList {
|
||
gap: 0.375rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.tagBadge {
|
||
padding: 0.375rem 0.625rem;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.scrollbarWrapper {
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.scrollbarTrack {
|
||
width: min(12.5rem, 60vw);
|
||
}
|
||
}
|
||
|
||
@media (hover: hover) and (pointer: fine) {
|
||
.navButton:hover:not(:disabled) {
|
||
border-color: var(--color-blue-700);
|
||
background: var(--color-blue-600);
|
||
color: var(--color-blue-white);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.card:hover {
|
||
border-color: var(--border-strong);
|
||
box-shadow: 0 10px 24px var(--shadow-color);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.card:hover .projectImage {
|
||
transform: scale(1.035);
|
||
}
|
||
|
||
.card:hover .titleLinkIcon {
|
||
transform: translate(2px, -2px);
|
||
}
|
||
|
||
.caseStudyLink:hover {
|
||
gap: 14px;
|
||
color: var(--color-blue-700);
|
||
}
|
||
|
||
[data-theme="dark"] .caseStudyLink:hover {
|
||
color: var(--color-blue-100);
|
||
}
|
||
|
||
[data-theme="dark"] .navButton:hover:not(:disabled) {
|
||
border-color: var(--color-blue-white);
|
||
background: var(--color-blue-white);
|
||
color: var(--color-blue-950);
|
||
}
|
||
|
||
|
||
.caseStudyLink:hover svg {
|
||
transform: translateX(3px);
|
||
}
|
||
|
||
.navButtonPrevious:hover:not(:disabled) svg {
|
||
transform: translateX(-2px);
|
||
}
|
||
|
||
.navButtonNext:hover:not(:disabled) svg {
|
||
transform: translateX(2px);
|
||
}
|
||
}
|