.slider { position: relative; min-height: 100vh; min-height: 100dvh; } .slider__stage { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: linear-gradient(135deg, #9eb6d4, var(--blue-deep), var(--dark-blue)); } .slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); } .slider__slide.is-active { opacity: 1; } .slider__image { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: slider-pan 12s var(--ease) infinite alternate; } .slider__slide.is-active .slider__image { animation-play-state: running; } .slider__wash { position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(11, 42, 91, 0.82) 0%, rgba(31, 95, 168, 0.55) 48%, rgba(244, 246, 249, 0.18) 100% ), linear-gradient(180deg, rgba(11, 42, 91, 0.35) 0%, transparent 35%, rgba(11, 42, 91, 0.45) 100%); } .slider__content { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end; padding: calc(var(--header-h) + 2rem) 0 6.5rem; } .slider__copy { max-width: 40rem; color: var(--white); } .slider__brand { font-size: clamp(2rem, 6vw, 3.75rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-bottom: 1.1rem; animation: rise-in 0.8s var(--ease) both; } .slider__title { font-size: clamp(1.35rem, 2.8vw, 1.85rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; max-width: 18ch; margin-bottom: 0.85rem; animation: rise-in 0.75s var(--ease) 0.08s both; } .slider__subtitle { font-size: 1.05rem; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, 0.88); max-width: 34rem; margin-bottom: 1.75rem; animation: rise-in 0.75s var(--ease) 0.14s both; } .slider__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.35rem; animation: rise-in 0.75s var(--ease) 0.2s both; } .slider__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 1.35rem; border-radius: 0.4rem; background: var(--white); color: var(--dark-blue); font-weight: 600; font-size: 0.92rem; transition: transform 0.25s var(--ease); } .slider__cta:hover { transform: translateY(-2px); } .slider__link { font-size: 0.92rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding-bottom: 0.1rem; transition: border-color 0.2s ease; } .slider__link:hover { border-color: rgba(255, 255, 255, 0.9); } .slider__controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: 1.75rem; display: flex; align-items: center; justify-content: center; gap: 1rem; } .slider__arrow { width: 2.4rem; height: 2.4rem; border-radius: 0.4rem; display: inline-flex; align-items: center; justify-content: center; color: var(--white); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); transition: background 0.2s ease; } .slider__arrow:hover { background: rgba(255, 255, 255, 0.22); } .slider__dots { display: flex; gap: 0.5rem; } .slider__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: background 0.25s ease, transform 0.25s var(--ease); } .slider__dot.is-active { background: var(--white); transform: scale(1.25); } @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes slider-pan { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } } @media (max-width: 720px) { .slider__content { padding-bottom: 5.5rem; align-items: flex-end; } .slider__brand { margin-bottom: 0.85rem; } .slider__subtitle { font-size: 0.98rem; } }