/* ========================================================= 50-pages/who-am-i.css Who Am I page only Page-specific layout refinements and visual treatment ========================================================= */ /* ========================= PAGE WRAPPER Apply with: ========================= */ .page-who-am-i main { padding-bottom: var(--space-10); } .page-who-am-i .who-am-i-content { max-width: var(--content-max); } /* ========================= HEADER / INTRO ========================= */ .page-who-am-i header h1, .page-who-am-i .site-header h1 { margin-bottom: var(--space-1); } .page-who-am-i .subtitle { max-width: 900px; margin-inline: auto; } /* ========================= PAGE-SPECIFIC H3 STYLE ========================= */ .page-who-am-i h3 { font-size: clamp(1.1rem, 3vw, 1.4rem); color: var(--color-brand); margin: 25px 0 15px 0; line-height: 1.4; border-left: 3px solid var(--color-brand); padding-left: 15px; } /* ========================= PROFILE IMAGE ========================= */ .page-who-am-i .profile-img { margin-bottom: var(--space-8); } /* ========================= BIO CONTENT ========================= */ .page-who-am-i .bio-section { margin-bottom: 35px; } .page-who-am-i .bio-section:last-child { margin-bottom: 0; } .page-who-am-i .bio-section p { line-height: var(--line-height-relaxed); } .page-who-am-i .bio-section p:last-child { margin-bottom: 0; } .page-who-am-i .bio-section .highlight { color: var(--color-brand); font-weight: var(--font-weight-bold); } /* ========================= WHO-AM-I PAGE LAYOUT Structure only ========================= */ .who-am-i-content { width: min(100% - 2rem, var(--content-max)); margin-inline: auto; padding: 40px 20px; } .profile-img { max-width: var(--profile-image-max); width: 100%; height: auto; margin: 0 auto 30px; display: block; border: var(--border-width-base) solid var(--color-brand); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .bio-section { margin-bottom: 35px; } .two-column { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin-bottom: 35px; } .two-column .text { flex: 2 1 320px; min-width: 250px; } .two-column .image-side { flex: 1 1 220px; min-width: 200px; display: flex; /* ← ADD THIS */ flex-direction: column; /* ← ADD THIS */ justify-content: center; /* ← THIS centers vertically */ align-items: center; /* ← keeps image centered horizontally */ text-align: center; } .two-column .image-side p { margin-top: 8px; margin-bottom: 0; } .two-column.reverse { flex-direction: row-reverse; } /* ========================= TWO-COLUMN STORY BLOCKS ========================= */ .page-who-am-i .two-column { align-items: flex-start; } .page-who-am-i .two-column .text > *:last-child { margin-bottom: 0; } .page-who-am-i .two-column .image-side { position: relative; } .page-who-am-i .two-column .image-side img { display: block; margin-inline: auto; } .page-who-am-i .two-column .image-side p { max-width: var(--side-image-max); margin-left: auto; margin-right: auto; } .page-who-am-i .two-column.reverse .text, .page-who-am-i .two-column.reverse .image-side { text-align: inherit; } /* ========================= QUOTE BLOCK ========================= */ .page-who-am-i .quote-block { max-width: 920px; margin-left: auto; margin-right: auto; line-height: 1.4; } /* ========================= SIGNATURE ========================= */ .page-who-am-i .signature { margin-top: var(--space-8); } .page-who-am-i .signature.signature--right, .page-who-am-i .signature.is-right { max-width: 320px; margin-left: auto; } /* ========================= IMAGE PLACEHOLDERS ========================= */ .page-who-am-i .image-placeholder { min-height: 220px; } /* ========================= BUTTON GROUPS ========================= */ .page-who-am-i .btn-group { margin-top: var(--space-8); margin-bottom: var(--space-5); } /* ========================= SPACING REFINEMENTS ========================= */ .page-who-am-i .profile-img + .bio-section, .page-who-am-i .profile-img + .two-column { margin-top: var(--space-2); } .page-who-am-i .quote-block + .bio-section, .page-who-am-i .quote-block + .two-column { margin-top: var(--space-8); } /* ========================= TABLET ========================= */ @media (max-width: 1024px) { .page-who-am-i .quote-block { max-width: 100%; } } /* ========================= MOBILE ========================= */ @media (max-width: 768px) { .page-who-am-i main { padding-bottom: var(--space-8); } .page-who-am-i .who-am-i-content { padding-top: 20px; padding-bottom: 20px; } .page-who-am-i h3 { font-size: 1.2rem; margin: 22px 0 12px; padding-left: 12px; } .page-who-am-i .profile-img { margin-bottom: var(--space-6); } .page-who-am-i .quote-block { font-size: 1.1rem; padding: 20px; } .page-who-am-i .signature.signature--right, .page-who-am-i .signature.is-right { max-width: 100%; text-align: right; } .page-who-am-i .image-placeholder { min-height: 180px; } } /* ========================= SMALL MOBILE ========================= */ @media (max-width: 480px) { .page-who-am-i .who-am-i-content { padding-left: 14px; padding-right: 14px; } .page-who-am-i .quote-block { padding: 18px 16px; font-size: 1rem; } .page-who-am-i h3 { font-size: 1.1rem; } .page-who-am-i .image-placeholder { min-height: 160px; padding: 16px; } }