/* ========================================================================== About / "Обо мне" — Instagram-style profile + certificates grid Standalone module (like css/schedule.css). Fonts (Jost, Vollkorn) come from the page . Lightbox uses the template's Magnific Popup. Dark mode mirrors css/style.css: surface #1c1d1e, text #ccc, head #fff. ========================================================================== */ .about-irina { --ai-ink: #2d2d2a; --ai-muted: #6b6b66; --ai-line: rgba(45, 45, 42, 0.16); --ai-surface: #fff; } .about-irina .ai-inner { max-width: 1100px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } /* -------------------------------------------------------------------------- Instagram-style profile header -------------------------------------------------------------------------- */ .ig-profile { display: flex; align-items: center; gap: 3rem; } .ig-profile__avatar { flex: 0 0 auto; width: 350px; height: 350px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, #d9b8a4, #b9c4b1 55%, #c9b6cf); } .ig-profile__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--ai-surface); } .ig-profile__info { flex: 1 1 auto; min-width: 0; } .ig-profile__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 1.25rem; } .ig-profile__name { font-family: 'Vollkorn', Georgia, serif; font-size: 2rem; font-weight: 400; color: var(--ai-ink); margin: 0; } .ig-profile__handle { font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1rem; font-weight: 500; color: var(--ai-muted); text-decoration: none; } .ig-profile__handle:hover { color: var(--ai-ink); } .ig-profile__stats { display: flex; flex-wrap: wrap; gap: 0.4rem 2.25rem; list-style: none; margin: 1rem 0 0; padding: 0; } .ig-profile__stats li { font-size: 0.95rem; color: var(--ai-muted); } .ig-profile__stats strong { color: var(--ai-ink); font-weight: 600; } .ig-profile__role { font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 500; color: var(--ai-muted); margin: 0 0 0.5rem; } .ig-profile__bio p { font-size: 18px; line-height: 1.6; color: var(--ai-ink); margin: 0 0 0.6rem; } .ig-profile__bio p:last-child { margin-bottom: 0; } .ig-profile__actions { margin-top: 1.25rem; } .ig-profile__actions ul { display: flex; gap: 0.6rem; list-style: none; margin: 0; padding: 0; } .ig-profile__actions a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .ig-profile__actions a:hover { transform: translateY(-2px); } /* -------------------------------------------------------------------------- Certificates grid -------------------------------------------------------------------------- */ .cert-head { margin: 3.5rem 0 1.75rem; text-align: center; } .cert-head .section-id { font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ai-muted); } .cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; } /* DOM order: certificate → title → caption. Left-aligned, equal height. */ .cert-card { display: flex; flex-direction: column; margin: 0; text-align: left; } /* Uniform frame so every card is the same size (no jumping). object-fit:contain keeps each certificate fully visible. */ .cert-link { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 5px; background: #fff; border: 1px #efefef solid; overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease; } @media (prefers-reduced-motion: no-preference) { .cert-card:hover .cert-link { transform: translateY(-3px); } } .cert-card:hover .cert-link { box-shadow: 0 14px 34px rgba(45, 45, 42, 0.14); } .cert-card__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* Hover overlay with a CSS magnifier badge (no icon-font dependency) */ .cert-link::after { content: ""; position: absolute; inset: 0; background: rgba(45, 45, 42, 0.34); opacity: 0; transition: opacity 0.25s ease; } .cert-link::before { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(#fff, #fff) center/16px 2px no-repeat, linear-gradient(#fff, #fff) center/2px 16px no-repeat; transform: translate(-50%, -50%) scale(0.7); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 1; } .cert-link:hover::after, .cert-link:focus-visible::after { opacity: 1; } .cert-link:hover::before, .cert-link:focus-visible::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .cert-link:focus-visible { outline: 2px solid rgba(45, 45, 42, 0.45); outline-offset: 3px; } /* Title under the certificate — Russian, bold */ .cert-card__head { margin-top: 1.25rem; } .cert-card__title { font-family: 'Jost', sans-serif; font-size: 1rem; line-height: 1.3; font-weight: 400; color: var(--ai-ink); margin: 0; } .cert-card__sub { font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 400; color: var(--ai-muted); margin: 0.35rem 0 0; } /* Caption — smaller than the body text */ .cert-card__desc { font-size: 0.8125rem; line-height: 1.6; color: var(--ai-muted); margin: 0.85rem 0 0; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } .ig-profile { gap: 2rem; } } @media (max-width: 767.98px) { .ig-profile { flex-direction: column; text-align: left; gap: 1.25rem; } .ig-profile__avatar { width: 250px; height: 250px; } .ig-profile__top, .ig-profile__stats, .ig-profile__actions ul { justify-content: left; gap: 10px; } .cert-grid { grid-template-columns: 1fr; gap: 2.5rem; } } /* -------------------------------------------------------------------------- Dark mode (site toggles body.theme--dark) -------------------------------------------------------------------------- */ body.theme--dark .about-irina { --ai-ink: #f2f2f0; --ai-muted: #9a9a93; --ai-line: rgba(255, 255, 255, 0.12); --ai-surface: #1c1d1e; background: #1a1b1c; } body.theme--dark .ig-profile__name { color: #fff; } body.theme--dark .ig-profile__avatar img { border-color: #1c1d1e; } body.theme--dark .ig-profile__actions a:hover { background: #fff; color: #1c1d1e; } body.theme--dark .cert-link { background: #232425; } body.theme--dark .cert-card:hover .cert-link { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); } body.theme--dark .cert-card__title { color: #fff; } body.theme--dark .cert-link:focus-visible { outline-color: rgba(255, 255, 255, 0.4); }