/* Team detail SFH2026 — portrait | bio split, then the grey video band */ .sfh-td { background: #fff; } .sfh-td-in { max-width: var(--cms2-max-width, 1280px); margin: 0 auto; } .sfh-td > .sfh-td-in { padding: clamp(40px, 5vw, 72px) 20px; } /* Photo owns column 1 across both rows, so the name sits beside its top edge. In the DOM the name comes first, which is the mobile order the design shows. */ .sfh-td-top { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: clamp(24px, 3.5vw, 56px); row-gap: 10px; align-items: start; } .sfh-td-photo { grid-column: 1; grid-row: 1 / span 2; } .sfh-td-name { grid-column: 2; grid-row: 1; } .sfh-td-copy { grid-column: 2; grid-row: 2; padding-top: 5px; } .sfh-td-photo { aspect-ratio: 3 / 4; overflow: hidden; background: #e8e8e8; /* The bio runs much longer than the portrait, so column 1 used to be a photo followed by a long stretch of nothing. Sticky keeps it alongside the text until its grid area (both rows of .sfh-td-top) runs out. Two things this depends on, both checked: no ancestor up to clips overflow — any `overflow` other than visible silently kills sticky — and the item is start-aligned, so it is shorter than its area and has somewhere to travel. */ position: sticky; top: var(--sfh-td-sticky-top, 101px); /* clears the 81px sticky header + 20 */ align-self: start; } .sfh-td-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); } .sfh-td-nophoto { display: none; } .sfh-td-name { margin: 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; line-height: 1.1; text-transform: uppercase; color: #000; } .sfh-td-name-accent { color: #be202e; } .sfh-td-text { font-size: 18px; line-height: 1.5; color: rgba(0,0,0,.7); } .sfh-td-text p { margin: 0 0 1.1em; } .sfh-td-text p:last-child { margin-bottom: 0; } .sfh-td-brand { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #000; } .sfh-td-brand img { width: auto; height: 28px; /* height-locked: marks vary in width */ display: block; } .sfh-td-cta { margin: 24px 0 0; } .sfh-td-btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 24px; border-radius: 100px; background: #be202e; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .sfh-td-btn:hover { background: #9d1a26; } /* sized here, not in hero/sfh2026.css — that file is not loaded on this page */ .sfh-td .sfh-btn-arrow { display: inline-flex; align-items: center; } .sfh-td .sfh-btn-arrow svg { width: 28px; height: 9px; display: block; } /* video band */ .sfh-td-videoband { background: #f4f4f4; } .sfh-td-videoband .sfh-td-in { padding: clamp(40px, 5vw, 72px) 20px; } .sfh-td-videoheading { margin: 0 0 32px; text-align: center; font-size: clamp(28px, 3.6vw, 48px); font-weight: 800; line-height: 1.15; text-transform: uppercase; color: #000; } .sfh-td-video { /* max-width: 1280px; */ /* max-height: 714.83px; */ margin: 0 auto; aspect-ratio: 16 / 9; background: #000; } .sfh-td-video iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 900px) { /* the theme shrinks its header to 65px here, so the photo may sit higher */ .sfh-td-photo { --sfh-td-sticky-top: 85px; } } @media (max-width: 820px) { /* one column: the DOM order (photo, name, copy) is the design's mobile stack */ .sfh-td-top { grid-template-columns: minmax(0, 1fr); } .sfh-td-photo, .sfh-td-name, .sfh-td-copy { grid-column: 1; grid-row: auto; } .sfh-td-name { margin-top: 20px; } /* Stacked, the photo is alone in its row, so its area is exactly its own height and there is nowhere to stick to. Turned off rather than left as a no-op, so a future change to this stack cannot pin it by accident. */ .sfh-td-photo { position: static; } .sfh-td-brand { font-size: 18px; margin-top: 24px; } .sfh-td-videoheading { margin-bottom: 24px; } }