diff --git a/index.html b/index.html index f743676..3943a42 100644 --- a/index.html +++ b/index.html @@ -147,12 +147,42 @@

Career

diff --git a/style.css b/style.css index 5b917e5..c3298c6 100644 --- a/style.css +++ b/style.css @@ -120,8 +120,9 @@ body { } .image-carousel { + --carousel-gap: 1.5rem; display: flex; - gap: 1.5rem; + gap: var(--carousel-gap); overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; @@ -146,6 +147,8 @@ body { aspect-ratio: 16 / 9; background: transparent; border-radius: 0; + position: relative; + overflow: hidden; display: flex; align-items: center; justify-content: center; @@ -166,6 +169,82 @@ body { pointer-events: none; } +.carousel-overlay { + position: absolute; + left: var(--carousel-gap); + bottom: var(--carousel-gap); + padding: clamp(1rem, 2.5vw, 1.75rem); + max-width: min(24rem, 80%); + background: rgba(6, 9, 16, 0.82); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 0; + box-shadow: 0 18px 35px rgba(3, 5, 10, 0.45); + display: flex; + flex-direction: column; + gap: 0.35rem; + color: #f8f9fb; + pointer-events: none; +} + +.overlay-label { + font-size: 0.7rem; + letter-spacing: 0.24em; + text-transform: uppercase; + font-weight: 600; + color: rgba(255, 255, 255, 0.7); + margin: 0; +} + +.overlay-title { + font-size: clamp(1.1rem, 2.2vw, 1.55rem); + font-weight: 700; + line-height: 1.2; + margin: 0; +} + +.overlay-subtitle, +.overlay-date, +.overlay-description { + font-size: clamp(0.85rem, 1.6vw, 0.95rem); + line-height: 1.5; + margin: 0; + font-weight: 400; +} + +.overlay-date { + font-weight: 600; + color: rgba(255, 255, 255, 0.85); +} + +.overlay-description { + margin-top: 0.35rem; + max-width: none; +} + +@media (max-width: 640px) { + .carousel-item { + flex: 0 0 85vw; + max-width: 85vw; + } + + .image-carousel { + --carousel-gap: clamp(0.75rem, 4vw, 1.25rem); + } + + .carousel-overlay { + left: var(--carousel-gap); + right: var(--carousel-gap); + max-width: none; + border-radius: 0; + padding: clamp(0.85rem, 4vw, 1.25rem); + } + + .overlay-label { + font-size: 0.65rem; + letter-spacing: 0.22em; + } +} + .image-carousel.is-free-scroll { scroll-snap-type: none; } @@ -528,6 +607,17 @@ body { aspect-ratio: auto; } + .carousel-overlay { + inset: 0; + padding: clamp(1rem, 6vw, 2.5rem); + gap: 0.5rem; + background: linear-gradient(180deg, rgba(5, 8, 15, 0.9) 0%, rgba(5, 8, 15, 0.7) 65%, rgba(5, 8, 15, 0) 100%); + } + + .overlay-description { + max-width: 100%; + } + .scroll-wrapper { padding-top: 0; }