diff --git a/css/pages/_about.css b/css/pages/_about.css index 2247e830..d26dee9a 100644 --- a/css/pages/_about.css +++ b/css/pages/_about.css @@ -467,8 +467,9 @@ ========================================================================== */ .about-hero { position: relative; left: 50%; transform: translateX(-50%); - width: 100vw; height: clamp(280px, 42vw, 520px); - overflow: hidden; margin: 4px 0 8px; + width: 100vw; min-height: clamp(440px, 60vw, 640px); + display: flex; align-items: center; justify-content: center; text-align: center; + overflow: hidden; margin: 0 0 8px; } .about-hero-slide { position: absolute; inset: 0; z-index: 1; @@ -478,7 +479,26 @@ .about-hero-slide.is-active { opacity: 1; } .about-hero-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; - background: linear-gradient(180deg, rgba(45, 115, 140, 0.52) 0%, rgba(28, 84, 105, 0.60) 100%); + background: linear-gradient(180deg, rgba(45, 115, 140, 0.58) 0%, rgba(24, 74, 94, 0.66) 100%); +} +/* Title + text overlaid on the rotating images (like the landing hero) */ +.about-hero-content { + position: relative; z-index: 3; + max-width: 900px; padding: 64px 24px; color: #FFFFFF; +} +.about-hero-eyebrow { + display: inline-block; text-transform: uppercase; letter-spacing: 0.08em; + font-size: 14px; font-weight: 700; color: #FFCBB0; margin-bottom: 14px; + text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); +} +.about-hero-content h1 { + font-size: clamp(30px, 5vw, 48px); line-height: 1.15; font-weight: 700; + color: #FFFFFF; margin: 0 0 18px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32); +} +.about-hero-lead { + font-size: clamp(16px, 2vw, 19px); line-height: 1.5; + color: rgba(255, 255, 255, 0.92); margin: 0 auto; max-width: 680px; + text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28); } @media (prefers-reduced-motion: reduce) { .about-hero-slide { transition: none; } diff --git a/en/about-us/index.html b/en/about-us/index.html index a69aac4d..d60a34ca 100644 --- a/en/about-us/index.html +++ b/en/about-us/index.html @@ -76,7 +76,7 @@