/* Bogard Team — grid + bio modal, styled to match the portfolio. */ .bteam { --bt-text: #1a1a1a; --bt-text-2: #5f5e5a; --bt-text-3: #888780; --bt-surface: #f7f5ef; --bt-border: rgba( 0, 0, 0, 0.10 ); --bt-border-2: rgba( 0, 0, 0, 0.18 ); --bt-accent: #DE541E; --bt-radius: 10px; --bteam-cols: 5; max-width: 1310px; margin: 0 auto; color: var( --bt-text ); box-sizing: border-box; } .bteam *, .bteam *::before, .bteam *::after { box-sizing: border-box; } /* Grid */ .bteam-grid { display: grid; grid-template-columns: repeat( var( --bteam-cols ), 1fr ); gap: 24px; } .bteam-card { display: flex; flex-direction: column; align-items: stretch; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; } .bteam-photo { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var( --bt-radius ); overflow: hidden; background: var( --bt-surface ); } .bteam-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier( 0.16, 1, 0.3, 1 ); } .bteam-card:hover { transform: scale( 1.012 ); } .bteam-card:hover .bteam-photo img { transform: scale( 1.05 ); } .bteam-name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 21px; margin-top: 12px; line-height: 1.2; } .bteam-role { font-size: 13px; color: var( --bt-text-3 ); margin-top: 2px; } /* Modal shell */ /* Anchored below the header (never centered, so it can't slide under the fixed header and its top stays put when switching members). */ /* The overlay is moved to , outside .bteam, so it must carry the same custom properties or var(--bt-accent) etc. won't resolve inside the modal. */ .bteam-modal-overlay { --bt-text: #1a1a1a; --bt-text-2: #5f5e5a; --bt-text-3: #888780; --bt-surface: #f7f5ef; --bt-border: rgba( 0, 0, 0, 0.10 ); --bt-border-2: rgba( 0, 0, 0, 0.18 ); --bt-accent: #DE541E; --bt-radius: 10px; position: fixed; inset: 0; z-index: 999999; background: rgba( 0, 0, 0, 0.5 ); display: flex; align-items: flex-start; justify-content: center; padding: 145px 24px 30px; } /* Share Bio button (modal only). */ .bteam-share { display: block; width: fit-content; margin: 16px auto 0; padding: 10px 18px; border-radius: 999px; border: 1px solid var( --bt-border-2 ); background: #fff; color: var( --bt-text ); font: inherit; font-size: 14px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .bteam-share:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } .bteam-modal-overlay[hidden] { display: none; } .bteam-modal { position: relative; background: #fff; border-radius: 14px; overflow: hidden; width: min( 1120px, 96vw ); max-height: calc( 100vh - 175px ); display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba( 0,0,0,0.35 ); } /* Fixed top bar: Back to team (left) + prev/next/close (right) */ .bteam-modal-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var( --bt-border ); } .bteam-modal-back { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 4px; font-family: "myriad-pro-semi-condensed", "Arial Narrow", sans-serif; font-size: 15px; color: var( --bt-text-2 ); cursor: pointer; } .bteam-modal-back:hover { color: var( --bt-accent ); } .bteam-grid-icon { fill: currentColor; flex: 0 0 auto; } .bteam-modal-nav { display: flex; align-items: center; gap: 8px; } .bteam-modal-close { border: 0; background: #f0f0f1; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; color: #555; cursor: pointer; transition: background 0.2s, color 0.2s; } .bteam-modal-close:hover { background: #1a1a1a; color: #fff; } .bteam-modal-body { flex: 1 1 auto; overflow: auto; padding: 30px 36px 36px; transition: opacity 0.18s ease; } /* Two-column content */ .bteam-modal-grid { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; } .bteam-modal-aside { align-self: start; } /* translateZ isolates the photo on its own raster layer, preventing the intermittent compositing "tear" Chrome can show for a large image inside a scrolling, rounded modal. */ .bteam-modal-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; display: block; transform: translateZ( 0 ); backface-visibility: hidden; } .bteam-email-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 16px; padding: 12px 20px; border-radius: 999px; background: #1a1a1a; color: #fff; text-decoration: none; font-size: 14px; transition: background 0.2s; } .bteam-email-btn:hover { background: var( --bt-accent ); color: #fff; } /* Aside quote (matches the project testimonial style) */ /* Match the project (non-case-study) testimonial: serif quote with an orange bottom rule, no left border. !important beats the theme's blockquote styling (background, left border, italics) that would otherwise win. */ .bteam-quote { margin: 22px 0 0; padding: 18px 20px !important; border: 0 !important; border-bottom: 3px solid var( --bt-accent ) !important; background: #E7EDF1 !important; border-radius: 8px 8px 0 0; } .bteam-quote blockquote { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-style: italic !important; font-weight: 500 !important; font-size: 19px !important; line-height: 1.4 !important; color: var( --bt-text ) !important; } .bteam-quote figcaption { margin-top: 12px; padding-left: 0; font-size: 13px; color: var( --bt-text-3 ); } /* Main column */ .bteam-modal-name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 34px; margin: 0; line-height: 1.1; } .bteam-modal-role { color: var( --bt-text-3 ); margin: 4px 0 16px; font-size: 15px; } .bteam-modal-bio { color: var( --bt-text-2 ); line-height: 1.7; font-size: 16px; } .bteam-modal-bio p { margin: 0 0 12px; } /* Education / Certifications as tidy labeled lists */ .bteam-modal-section { margin: 0; padding: 12px 0; border-top: 1px solid var( --bt-border-2 ); } .bteam-section-title { font-family: "Inter", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var( --bt-accent ); margin: 0 0 4px; } .bteam-section-body p { margin: 0; padding: 1px 0; color: var( --bt-text-2 ); font-size: 12px; line-height: 1.4; } .bteam-section-body p:last-child { border-bottom: 0; } .bteam-section-body a { color: var( --bt-accent ); text-decoration: none; } /* Single member page — same card as the modal, minus the overlay. */ .bteam-single-wrap { max-width: 1120px; margin: 50px auto; padding: 0 24px; } .bteam-single { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba( 0, 0, 0, 0.12 ); } .bteam-single-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var( --bt-border ); } .bteam-single-top .bteam-modal-back { text-decoration: none; } .bteam-single-top .bteam-modal-prev, .bteam-single-top .bteam-modal-next { text-decoration: none; } .bteam-single-body { padding: 30px 36px 36px; } /* Prev / next member nav */ .bteam-modal-prev, .bteam-modal-next { border: 1px solid var( --bt-border-2 ); background: #fff; border-radius: 999px; padding: 8px 14px; font-family: "myriad-pro-semi-condensed", "Arial Narrow", sans-serif; font-size: 14px; color: var( --bt-text ); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .bteam-modal-prev:hover, .bteam-modal-next:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } /* Responsive */ @media ( max-width: 1100px ) { .bteam-grid { grid-template-columns: repeat( 4, 1fr ); } } @media ( max-width: 860px ) { .bteam-grid { grid-template-columns: repeat( 3, 1fr ); } .bteam-modal-overlay { padding: 80px 16px 20px; } .bteam-modal { max-height: calc( 100vh - 100px ); } .bteam-modal-grid { grid-template-columns: 1fr; gap: 22px; } .bteam-modal-aside { position: static; max-width: 260px; } } @media ( max-width: 560px ) { .bteam-grid { grid-template-columns: repeat( 2, 1fr ); } }