/****** FILE: themes/gamry/css/pages/Bio.css *****/ .bio_leftcol { width:250px; float:left; padding:0 25px 0 0; border-right:1px solid #eaeaea; } .bio_leftcol img { border:1px solid #eaeaea; padding:2px; max-width:100%; } .bio_information { margin-left:275px; } #bioContactInfo { list-style:none; margin:0; padding:0; } #bioContactInfo strong { font-size:0.95em; display:block; color:#8191ac; line-height:0.85em; } #bioContactInfo li { padding:3px 0; } .bioTitle { } @media(max-width:600px){ .bio_leftcol { float:none; margin:0 auto; padding:0; border:none; min-height:0px !important; } .bio_information { margin:20px 0 0; padding:20px 0 0; border-top:1px solid #eaeaea; } .bio_information > h1:first-of-type, .bioTitle { text-align:center; } } /* ========================================================================== Redesigned team bio + team index (2026-08) Legacy rules above are left in place: they are scoped to .bio_leftcol / .bio_information, which the new templates no longer emit, so nothing collides. They still serve MinisitePage.ss and the BioContent include. Photo sizing note: every team photo in the library is 200-250px wide (216x238 typical). Requests use FitMax so nothing upscales, and the CSS display sizes stay well under native so they stay sharp on 2x screens. Higher-resolution team photos are a content gap, not a template one. ========================================================================== */ .rd-bio { background: var(--gm-bg, #fbfbfa); } .rd-bio-head { background: var(--gm-surface, #fff); border-bottom: 1px solid var(--gm-border, #e6eaec); padding: 26px 40px 22px; } .rd-bio-headmax { max-width: 1120px; margin-inline: auto; } .rd-bio-head .rd-breadcrumb { width: 100%; margin: 0; } .rd-bio-body { display: grid; grid-template-columns: 1fr; gap: 34px; max-width: 1120px; margin-inline: auto; padding: 40px 40px 0; box-sizing: border-box; } /* ---------- Photo + contact ---------- */ .rd-bio-aside { min-width: 0; } .rd-bio-photo { width: 100%; max-width: 216px; aspect-ratio: 1 / 1.1; border-radius: 16px; overflow: hidden; background: var(--gm-tint, #f4f7fa); border: 1px solid var(--gm-border, #e6eaec); } .rd-bio-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .rd-bio-photo--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a3a52, #0f2231); border: 0; } .rd-bio-photo--ph span { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.72); padding: 0 16px; text-align: center; } .rd-bio-contact { margin-top: 24px; max-width: 260px; background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 14px; padding: 18px 20px; } .rd-bio-contact-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gm-faint, #6c7981); margin-bottom: 12px; } .rd-bio-contact-list { margin: 0; } .rd-bio-contact-list dt { font-size: 12px; font-weight: 500; color: var(--gm-muted, #5f6b72); margin: 10px 0 2px; } .rd-bio-contact-list dt:first-child { margin-top: 0; } .rd-bio-contact-list dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--gm-ink, #17242b); } /* Extensions make these long; break rather than overflow the card. */ .rd-bio-contact-list dd { overflow-wrap: anywhere; } .rd-bio-contact-list dd a { color: var(--gm-navy, #003e69); font-weight: 500; } .rd-bio-contact-list dd a:hover { color: var(--gm-navy-hover, #00567f); text-decoration: underline; } /* ---------- Name + prose ---------- */ .rd-bio-main { min-width: 0; } .rd-bio-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-navy, #003e69); margin-bottom: 12px; } .rd-bio-name { font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px, 3.1vw, 41px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.07; color: var(--gm-ink, #17242b); margin: 0; text-wrap: balance; } .rd-bio-role { font-family: 'Space Grotesk', sans-serif; font-size: 17.5px; font-weight: 500; color: var(--gm-navy, #003e69); margin: 10px 0 0; } .rd-bio-prose { margin-top: 26px; max-width: 60em; } .rd-bio-prose p { font-size: 17px; line-height: 1.72; color: var(--gm-body, #47535b); margin: 0 0 16px; } .rd-bio-prose p:last-child { margin-bottom: 0; } .rd-bio-prose p:empty { display: none; } .rd-bio-prose a { color: var(--gm-navy, #003e69); font-weight: 500; } .rd-bio-prose a:hover { color: var(--gm-navy-hover, #00567f); text-decoration: underline; } .rd-bio-prose h2, .rd-bio-prose h3 { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 26px 0 10px; } .rd-bio-prose ul, .rd-bio-prose ol { font-size: 17px; line-height: 1.72; color: var(--gm-body, #47535b); margin: 0 0 16px; padding-left: 1.4em; } .rd-bio-prose li { margin: 0 0 7px; } .rd-bio-prose strong { color: var(--gm-ink, #17242b); } /* ...but NOT inside a link. Editors bold links in the CMS, which nests in ; the rule above then repaints them ink and they stop looking like links. Same defect found and fixed on .rd-cp-prose (see GamryContentPage.css). */ .rd-bio-prose a strong, .rd-bio-prose a b { color: inherit; } .rd-bio-prose img { max-width: 100%; height: auto; border-radius: 10px; } .rd-bio-back { display: flex; justify-content: center; padding: 52px 40px 60px; } .rd-bio-back a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--gm-border-ctl, #d5dcdf); background: var(--gm-surface, #fff); color: var(--gm-navy, #003e69); font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; } .rd-bio-back a:hover { border-color: var(--gm-navy, #003e69); background: var(--gm-tint, #f4f7fa); text-decoration: none; } /* ========================================================================== Team index ========================================================================== */ .rd-team-head { padding-bottom: 34px; } .rd-team-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-top: 26px; } .rd-team-headmain { min-width: 0; } .rd-team-title { font-size: clamp(31px, 3.3vw, 44px); } .rd-team-intro { margin-top: 18px; max-width: 56em; } .rd-team-intro p { font-size: 18px; line-height: 1.65; color: var(--gm-body, #47535b); margin: 0 0 12px; } .rd-team-intro p:last-child { margin-bottom: 0; } .rd-team-intro p:empty { display: none; } .rd-team-intro a { color: var(--gm-navy, #003e69); font-weight: 500; } .rd-team-count { flex: 0 0 auto; text-align: right; } .rd-team-count-n { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 700; line-height: 1; color: var(--gm-navy, #003e69); font-variant-numeric: tabular-nums; } .rd-team-count-l { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gm-faint, #6c7981); margin-top: 6px; } .rd-team-gridwrap { padding: 40px 40px 0; } .rd-team-gridmax { max-width: 1120px; margin-inline: auto; } /* 208px columns keep each photo at ~208px displayed against a 250px source. */ .rd-team-grid { grid-template-columns: repeat(auto-fill, minmax(min(208px, 100%), 1fr)); } .rd-team-card { display: flex; flex-direction: column; } .rd-team-card-photo { display: block; aspect-ratio: 1 / 1.05; background: var(--gm-tint, #f4f7fa); overflow: hidden; } .rd-team-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .rd-team-card-photo--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a3a52, #0f2231); } .rd-team-card-ph-label { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; color: rgba(255,255,255,0.72); padding: 0 14px; text-align: center; } .rd-team-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; } .rd-team-card-name { display: block; margin-bottom: 4px; } .rd-team-card-role { display: block; flex: 1 1 auto; font-size: 13.5px; line-height: 1.45; color: var(--gm-body, #47535b); margin-bottom: 14px; } .rd-team-card-link { display: block; margin-top: auto; } .rd-team-card:hover { border-color: var(--gm-navy, #003e69); box-shadow: 0 18px 40px rgba(23,36,43,0.12); transform: translateY(-3px); text-decoration: none; } @media (prefers-reduced-motion: reduce) { .rd-team-card { transition: none; } .rd-team-card:hover { transform: none; } } .rd-team { padding-bottom: 8px; } /* ========================================================================== Responsive ========================================================================== */ @media (min-width: 900px) { .rd-bio-body { grid-template-columns: 216px minmax(0, 1fr); gap: 48px; align-items: start; } .rd-bio-aside { grid-column: 1; position: sticky; top: 24px; } .rd-bio-main { grid-column: 2; } } @media (max-width: 899px) { .rd-bio-body { padding: 32px 24px 0; gap: 26px; } .rd-bio-head { padding: 22px 24px 20px; } .rd-team-head { padding-bottom: 28px; } .rd-team-gridwrap { padding: 32px 24px 0; } /* Photo and contact card sit side by side above the prose rather than stacking into a tall column of nearly-empty boxes. */ .rd-bio-aside { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px; } .rd-bio-photo { max-width: 168px; flex: 0 0 auto; } .rd-bio-contact { margin-top: 0; flex: 1 1 240px; } .rd-bio-back { padding: 40px 24px 52px; } } @media (max-width: 620px) { .rd-bio-head { padding: 18px 18px 18px; } .rd-bio-body { padding: 26px 18px 0; } .rd-bio-name { font-size: 28px; } .rd-bio-role { font-size: 16px; } .rd-bio-prose p, .rd-bio-prose ul, .rd-bio-prose ol { font-size: 16.5px; } .rd-bio-photo { max-width: 132px; } .rd-bio-contact { flex-basis: 100%; } .rd-team-headrow { flex-direction: column; gap: 18px; margin-top: 20px; } .rd-team-count { text-align: left; } .rd-team-count-n { font-size: 32px; } .rd-team-title { font-size: 28px; } .rd-team-gridwrap { padding: 26px 18px 0; } .rd-team-grid { grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr)); gap: 16px; } .rd-bio-back { padding: 34px 18px 46px; } } /* Careers CTA at the foot of the team page (2026-08). "Join Us" was removed from the About Us dropdown on request, so this is now its primary route in. */ .rd-team-join { padding: 44px 40px 0; } .rd-team-join-inner { max-width: 1120px; margin-inline: auto; background: var(--gm-ink, #17242b); border-radius: 18px; padding: 34px 38px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .rd-team-join-copy { min-width: 0; flex: 1 1 320px; } .rd-team-join-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-sky, #7bb8dd); margin-bottom: 10px; } .rd-team-join-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(21px, 2.1vw, 27px); font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 0 0 8px; text-wrap: balance; } .rd-team-join-text { font-size: 15.5px; line-height: 1.6; color: #c3cdd2; margin: 0; max-width: 46em; } .rd-team-join-btn { flex: 0 0 auto; display: inline-flex; align-items: center; background: #fff; color: var(--gm-ink, #17242b); font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 15.5px; padding: 14px 26px; border-radius: 10px; } .rd-team-join-btn:hover { background: var(--gm-sky, #7bb8dd); color: var(--gm-ink, #17242b); text-decoration: none; } @media (max-width: 899px) { .rd-team-join { padding: 34px 24px 0; } } @media (max-width: 620px) { .rd-team-join { padding: 28px 18px 0; } .rd-team-join-inner { padding: 26px 22px; border-radius: 14px; } .rd-team-join-btn { width: 100%; justify-content: center; } } /****** FILE: themes/gamry/css/pages/OurTeam.css *****/ #employee_listing { list-style:none; margin:40px 0 0 0; padding:0; } #employee_listing:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } #employee_listing li { float:left; width:20%; margin:0 6.5% 2.5%; } #employee_listing li a { display:block; padding:8px; } #employee_listing li a:hover { text-decoration:none; background:#ECECEC; } #employee_listing li img { display:block; border:1px solid #eaeaea; padding:2px; max-width:100%; margin:0 auto; } #employee_listing li h3 { margin:5px 0 0 0; clear:both; font-size:20px; text-align:center; } #employee_listing li h3 span { display:block; font-size:0.9em; font-style:italic; color:#333; font-weight:normal; } #employee_listing li a { -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .bio-content { max-width:1200px; } @media(min-width:801px){ #employee_listing li:nth-child(3n+1) { clear:left; } } @media(max-width:800px){ #employee_listing li { width:28%; margin-left:2.5%; margin-right:2.5%; } } @media(min-width:351px) and (max-width:500px){ #employee_listing li:nth-child(2n+1) { clear:left; } #employee_listing li { width:45%; } } @media(max-width:350px){ #employee_listing li { width:95%; } }