mark/msos
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes.txt #9.2 & #9.4: team hero + members/friends appreciation

Browse Source 
#9.2 Full-width auto-rotating team hero (crossfade every 4.5s, transparent blue
overlay) directly under the About Us title — 11 landscape photos supplied by MSOS.

#9.4 "Our members & friends" appreciation section after Mission & Vision: a
contained photo carousel + name chips. Photos and names are PLACEHOLDERS
(names in "First L." format) pending the full members list.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-05 16:41:28 +02:00
1 parent 195a48205c
commit 0bbc06c6bc
16 files changed
+186 -1
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/pages/_about.css
+46 -1
View File
@@ -461,4 +461,49 @@
.faq-cta-container { padding: 32px; }
.faq-cta-container h3 { font-size: 18px; }
.faq-cta-container p { font-size: 16px; line-height: 24px; }
}
}
/* ==========================================================================
Full-bleed auto-rotating team hero (under the About Us title)
========================================================================== */
.about-hero {
position: relative; left: 50%; transform: translateX(-50%);
width: 100vw; height: clamp(280px, 42vw, 520px);
overflow: hidden; margin: 4px 0 8px;
}
.about-hero-slide {
position: absolute; inset: 0; z-index: 1;
background-size: cover; background-position: center;
opacity: 0; transition: opacity 1.4s ease;
}
.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%);
}
@media (prefers-reduced-motion: reduce) {
.about-hero-slide { transition: none; }
}
/* ==========================================================================
Appreciation to members & friends (photo carousel + names)
========================================================================== */
.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; }
.appreciation-section > .page-header-section { margin-bottom: 36px; padding: 0; background: transparent; }
.appreciation-section h2 { font-size: 36px; font-weight: 600; color: #101828; margin: 0 0 12px; }
.appr-lead { font-size: 18px; line-height: 28px; color: #667085; max-width: 720px; margin: 0 auto; }
/* Contained variant of the crossfade hero (overrides the full-bleed .about-hero) */
.appreciation-hero {
position: relative; left: auto; transform: none;
width: 100%; max-width: 1000px; margin: 0 auto 34px;
height: clamp(220px, 32vw, 380px); border-radius: 18px; overflow: hidden;
}
.appreciation-names {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
max-width: 900px; margin: 0 auto;
}
.appr-name {
display: inline-block; padding: 8px 16px; border-radius: 999px;
background: #F2F7F9; border: 1px solid #E1ECF0; color: #2D5F72;
font-size: 15px; font-weight: 600;
}
.appreciation-note { font-size: 13px; color: #98A2B3; margin: 26px auto 0; font-style: italic; }