/* Портфолио продуктового дизайнера. Палитра — токены в духе shadcn/ui (тема zinc): --background, --foreground, --card, --card-foreground, --muted, --muted-foreground, --border, --primary, --primary-foreground, --radius. Тема переключается сменой класса .dark на (см. инлайн-скрипт в ). */ /* ---------- Шрифты (self-hosted, без внешних CDN) ---------- */ @font-face { font-family: "Inter"; src: url("/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- Токены цвета и радиуса ---------- */ :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --border: 240 5.9% 90%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --radius: 0.5rem; --radius-4xl: 2rem; --spacing: 0.25rem; --status-positive: 142 71% 45%; --status-negative: 0 61% 52%; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --border: 240 3.7% 15.9%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; } /* ---------- Сброс и база ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background-color: hsl(var(--background)); } body { margin: 0; min-height: 100vh; background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* Видимые состояния фокуса — везде одинаковые */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; border-radius: calc(var(--radius) - 2px); } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.001ms !important; } } /* ---------- Контейнер и общие утилиты ---------- */ .container { width: 100%; max-width: 72rem; /* 1152px */ margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 640px) { .container { padding-inline: 2rem; } } @media (min-width: 1024px) { .container { padding-inline: 2.5rem; } } .section { padding-block: 3rem; } @media (min-width: 768px) { .section { padding-block: 4.5rem; } } h1 { font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); /* 36–48px */ letter-spacing: -0.02em; } h2 { font-size: clamp(1.75rem, 1.6rem + 0.5vw, 1.875rem); /* 28–30px */ letter-spacing: -0.01em; } .section-heading { margin-bottom: 2rem; scroll-margin-top: 4.5rem; } .muted { color: hsl(var(--muted-foreground)); font-size: 0.875rem; } /* ---------- Хиро ---------- */ .hero { padding-block: 3.5rem 3rem; } @media (min-width: 768px) { .hero { padding-block: 6rem 4rem; } } .hero__avatar { display: block; width: 6rem; height: 6rem; border-radius: min(var(--radius-4xl), 24px); object-fit: cover; margin-bottom: 1rem; } @media (min-width: 768px) { .hero__avatar { width: 8rem; height: 8rem; } } .status-badge { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.25rem; padding-inline: 0.5rem; margin-bottom: 1rem; border: 1px solid hsl(var(--border)); border-radius: 1rem; color: hsl(var(--foreground)); font-size: 0.75rem; font-weight: 500; } .status-badge__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: hsl(var(--status-positive)); } .hero__name { margin-bottom: 0.375rem; } .hero__role { max-width: 40rem; margin-bottom: 0.75rem; font-size: 1.125rem; color: hsl(var(--foreground)); } @media (min-width: 768px) { .hero__role { font-size: 1.25rem; } } .hero__process { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: 0.75rem; } .hero__process-tag { display: inline-flex; align-items: center; height: 1.25rem; padding-inline: 0.5rem; border: 1px solid hsl(var(--border)); border-radius: 1rem; color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 500; } .hero__process-arrow { color: hsl(var(--muted-foreground)); font-size: 0.75rem; } .hero__meta { margin-top: 0.25rem; margin-bottom: 1.25rem; } .hero__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 2rem; } .link { color: hsl(var(--foreground)); text-decoration: underline; text-decoration-color: hsl(var(--border)); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; } .link:hover { text-decoration-color: hsl(var(--foreground)); } .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; height: 1.9375rem; padding: 0 0.625rem; border-radius: 0.625rem; border: 1px solid transparent; font-size: 0.8rem; font-weight: 500; line-height: 1; text-decoration: none; transition: opacity 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 100ms ease; } .button:active { transform: translateY(1px); } .button svg { width: 1rem; height: 1rem; } .button--primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .button--primary:hover { opacity: 0.8; } .button--outline { border-color: hsl(var(--border)); color: hsl(var(--foreground)); } .button--outline:hover { background-color: hsl(var(--muted)); } /* ---------- Избранные кейсы ---------- */ .cases__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .cases__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cases__grid { grid-template-columns: repeat(3, 1fr); } } .case-card { height: 100%; } .case-card__card { display: flex; flex-direction: column; height: 100%; border: 1px solid hsl(var(--foreground) / 10%); border-radius: 0.75rem; background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); overflow: hidden; } .case-card__cover { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; object-position: top center; background-color: hsl(var(--muted)); } .case-card__cover--placeholder { display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; font-size: 0.9375rem; font-weight: 500; /* --muted-foreground на --muted даёт 4.39:1 в светлой теме (ниже нормы 4.5:1), поэтому здесь используем --foreground: контраст ≥ 4.5:1 в обеих темах. */ color: hsl(var(--foreground)); } .case-card__body { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.25rem; flex: 1; } .case-card__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; } .case-card__tag { display: inline-flex; align-items: center; height: 1.25rem; padding-inline: 0.5rem; border: 1px solid hsl(var(--border)); border-radius: 1rem; color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 500; } .case-card__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; } .case-card__desc { color: hsl(var(--muted-foreground)); font-size: 0.9375rem; line-height: 1.5; } .case-card__metric { margin-top: auto; font-size: 0.9375rem; font-weight: 600; } .case-card__footer { padding: 1rem 1.25rem; border-top: 1px solid hsl(var(--border)); background-color: hsl(var(--muted) / 50%); } .case-card__cta { width: 100%; } /* ---------- Обо мне ---------- */ .about__text { max-width: 68ch; font-size: 1rem; line-height: 1.6; color: hsl(var(--foreground)); } /* ---------- Опыт работы ---------- */ .experience__row { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.625rem; } @media (min-width: 640px) { .experience__row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; } } .experience__primary { margin-bottom: 2.5rem; } .experience__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; } .experience__role { font-size: 1.125rem; } .experience__position { font-size: 1rem; } .experience__period { white-space: nowrap; } .experience__desc { max-width: 68ch; font-size: 1rem; line-height: 1.6; color: hsl(var(--foreground)); } .experience__divider { height: 1px; margin-bottom: 2.5rem; background-color: hsl(var(--border)); } .experience__subheading { margin-bottom: 1.5rem; font-size: 1rem; font-weight: 600; color: hsl(var(--muted-foreground)); } .experience__list { display: flex; flex-direction: column; gap: 1.25rem; } .experience__item { padding-top: 1.25rem; border-top: 1px solid hsl(var(--border)); } .experience__item:first-child { padding-top: 0; border-top: none; } .experience__item-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; } .experience__item-role { font-size: 0.9375rem; font-weight: 600; } .experience__item-position { font-size: 0.8125rem; } .experience__item-period { font-size: 0.8125rem; white-space: nowrap; } .experience__item-desc { max-width: 60ch; font-size: 0.9375rem; line-height: 1.5; color: hsl(var(--muted-foreground)); } /* ---------- Верхняя шапка (иконки Telegram и переключателя темы) ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background-color: hsl(var(--background)); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.75rem; } /* На десктопе шапка и футер растягиваются на всю ширину экрана, а не ограничиваются шириной .container (72rem). */ @media (min-width: 1024px) { .site-header__inner, .site-footer__inner { max-width: none; } } .site-header__start { display: flex; align-items: center; gap: 0.5rem; } .site-nav { display: none; align-items: center; gap: 0.25rem; } @media (min-width: 640px) { .site-nav { display: flex; } } .site-nav a { display: inline-flex; align-items: center; height: 2rem; padding-inline: 0.75rem; border-radius: 0.625rem; color: hsl(var(--foreground)); font-size: 0.875rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color 150ms ease; } .site-nav a:hover { background-color: hsl(var(--muted)); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.625rem; color: hsl(var(--foreground)); transition: background-color 150ms ease; } .menu-toggle:hover { background-color: hsl(var(--muted)); } @media (min-width: 640px) { .menu-toggle { display: none; } } .menu-toggle__box { position: relative; width: 1.125rem; height: 1.125rem; } .menu-toggle__line { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background-color: currentColor; transition: transform 150ms ease, top 150ms ease; } .menu-toggle__line:first-child { top: 0.3rem; } .menu-toggle__line:last-child { top: 0.75rem; } .menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child { top: 0.53rem; transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child { top: 0.53rem; transform: rotate(-45deg); } .mobile-nav { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem 1.25rem 2rem; border-top: 1px solid hsl(var(--border)); background-color: hsl(var(--muted)); } .mobile-nav[hidden] { display: none; } .mobile-nav a { display: block; padding: 0.25rem 0.75rem; border-radius: 0.625rem; color: hsl(var(--foreground)); font-size: 1.25rem; font-weight: 500; line-height: 1.3; text-decoration: none; } .mobile-nav a:hover { color: hsl(var(--muted-foreground)); } .mobile-nav__label { margin-top: 1rem; padding: 0 0.75rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem; font-weight: 500; } .mobile-nav__label:first-child { margin-top: 0; } .mobile-nav__sublink { font-size: 1.25rem; font-weight: 500; } @media (min-width: 640px) { .mobile-nav { display: none !important; } } .site-header__actions { display: flex; align-items: center; gap: 0.5rem; } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.625rem; color: hsl(var(--foreground)); transition: background-color 150ms ease; } .icon-button:hover { background-color: hsl(var(--muted)); } .icon-button svg { width: 1.125rem; height: 1.125rem; } .header-link { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding-inline: 0.75rem; border: 1px solid transparent; border-radius: 0.625rem; background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 0.875rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: opacity 150ms ease; } .header-link:hover { opacity: 0.8; } .header-link svg { width: 1rem; height: 1rem; } .header-resume { display: none; align-items: center; height: 2rem; padding-inline: 0.75rem; border-radius: 0.625rem; background-color: hsl(var(--muted)); color: hsl(var(--foreground)); font-size: 0.875rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color 150ms ease; } @media (min-width: 480px) { .header-resume { display: inline-flex; } } .header-resume:hover { background-color: color-mix(in srgb, hsl(var(--muted)) 80%, hsl(var(--background)) 20%); } .header-separator { width: 1px; height: 1.25rem; margin-inline: 0.25rem; background-color: hsl(var(--border)); } .site-header__actions .header-separator:first-of-type { display: none; margin-left: calc(var(--spacing) * 2); } @media (min-width: 480px) { .site-header__actions .header-separator:first-of-type { display: block; } } .header-logo { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; transition: opacity 150ms ease; } .header-logo:hover { opacity: 0.85; } .header-logo svg { width: 1.75rem; height: 1.75rem; } /* ---------- Футер ---------- */ .site-footer__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding-block: 2rem; } @media (min-width: 640px) { .site-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; } } .site-footer__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: 0.9375rem; } .site-footer__meta { display: flex; align-items: center; gap: 1.25rem; } /* Показываем нужную иконку в зависимости от темы */ .theme-toggle__icon--dark { display: none; } .dark .theme-toggle__icon--light { display: none; } .dark .theme-toggle__icon--dark { display: block; } /* ---------- Шаблон страницы кейса ---------- */ .case-layout { width: 100%; max-width: none; margin-inline: auto; padding-inline: 1.25rem; padding-block: 1rem 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .case-main { max-width: 68ch; margin-inline: auto; width: 100%; } @media (min-width: 640px) { .case-layout { padding-inline: 2rem; } } @media (min-width: 1024px) { .case-layout { padding-inline: 2.5rem; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 3rem; align-items: start; } } @media (min-width: 1280px) { .case-layout { grid-template-columns: 15rem minmax(0, 1fr) 17rem; } } /* Левая колонка: навигация по разделам (только >=1024px) */ .case-toc { display: none; } @media (min-width: 1024px) { .case-toc { display: block; position: sticky; top: 4.5rem; width: calc(100% + 3rem); } /* Заголовок «Навигация по кейсу» — вне скролла, всегда на месте. Скроллится и гаснет по краям только список ниже него. */ .case-toc__scroll { position: relative; max-height: calc(100vh - 4.5rem - 6rem - 2.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* старый Edge */ } .case-toc__scroll::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .case-toc__scroll--overflowing { padding-bottom: 3rem; -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 3rem), transparent 100%); mask-image: linear-gradient(to bottom, black calc(100% - 3rem), transparent 100%); } /* Верхний фейд включаем только после начала прокрутки — иначе первый пункт списка не совпадал бы по уровню с заголовком кейса. */ .case-toc__scroll--overflowing.case-toc__scroll--scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 3rem, black calc(100% - 3rem), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, black 3rem, black calc(100% - 3rem), transparent 100%); } } .case-toc__title { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 1rem; color: hsl(var(--muted-foreground)); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: color 150ms ease; } .case-toc__title:hover { color: hsl(var(--foreground)); } .case-toc__title-kbd { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex-shrink: 0; border: 1px solid hsl(var(--border)); border-radius: 0.25rem; background-color: hsl(var(--muted)); font-family: inherit; } .case-toc__title-kbd svg { width: 0.625rem; height: 0.625rem; } .case-toc__list { display: flex; flex-direction: column; gap: 0.875rem; } .case-toc__sublist { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.375rem; padding-left: 1rem; } .case-toc__link { display: block; color: hsl(var(--muted-foreground)); font-size: 0.8125rem; text-decoration: none; transition: color 150ms ease; } .case-toc__link--sub { font-size: 0.75rem; } .case-toc__link:hover { color: hsl(var(--foreground)); } .case-toc__link--active { color: hsl(var(--foreground)); font-weight: 600; } /* Мобильная навигация по разделам (<1024px) */ .case-toc-mobile { margin-bottom: 2rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background-color: hsl(var(--card)); } .case-toc-mobile summary { padding: 0.75rem 1rem; list-style: none; color: hsl(var(--foreground)); font-size: 0.9375rem; font-weight: 500; cursor: pointer; } .case-toc-mobile summary::-webkit-details-marker { display: none; } .case-toc-mobile__list { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 1rem 1rem; border-top: 1px solid hsl(var(--border)); } .case-toc-mobile__list a { display: block; padding: 0.375rem 0; color: hsl(var(--muted-foreground)); font-size: 0.9375rem; text-decoration: none; } .case-toc-mobile__list a:hover { color: hsl(var(--foreground)); } @media (min-width: 1024px) { .case-toc-mobile { display: none; } } /* Шапка кейса: заголовок, роль/период/продукт, пагинация */ .case-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid hsl(var(--border)); scroll-margin-top: 4.5rem; } .case-header__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .case-header__title { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); } .case-meta { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.875rem; } .case-meta__item { font-size: 0.875rem; } .case-meta__label { color: hsl(var(--muted-foreground)); } .case-meta__value { color: hsl(var(--foreground)); font-weight: 500; } .case-pager { display: flex; flex-shrink: 0; gap: 0.5rem; } .case-pager .icon-button { background-color: hsl(var(--muted)); } .case-pager .icon-button:hover { background-color: color-mix(in srgb, hsl(var(--muted)) 80%, hsl(var(--background)) 20%); } /* TL;DR: заголовок над карточками результатов */ .case-tldr__intro { margin-bottom: 0.75rem; font-size: 1rem; font-weight: 600; } /* Ключевые результаты карточками: цвет обводки отражает знак метрики */ .case-metrics-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } @media (min-width: 30rem) { .case-metrics-grid { grid-template-columns: repeat(2, 1fr); } } /* На десктопе (появляется sticky-сайдбар TOC) — компактнее, в 2 колонки */ @media (min-width: 1024px) { .case-metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; } } .case-metric-card { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.25rem 1.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background-color: hsl(var(--muted) / 40%); } @media (min-width: 1024px) { .case-metric-card { gap: 0.25rem; padding: 0.875rem 1rem; min-height: 6rem; } } .case-metric-card--positive { border-color: hsl(var(--status-positive) / 40%); background-color: hsl(var(--status-positive) / 10%); } .case-metric-card--negative { border-color: hsl(var(--status-negative) / 40%); background-color: hsl(var(--status-negative) / 10%); } .case-metric-card--neutral { border-color: hsl(var(--border)); background-color: hsl(var(--muted) / 40%); } .case-metric-card__label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--muted-foreground)); } .case-metric-card__icon { font-size: 0.6875rem; line-height: 1; } .case-metric-card--positive .case-metric-card__icon { color: hsl(var(--status-positive)); } .case-metric-card--negative .case-metric-card__icon { color: hsl(var(--status-negative)); } .case-metric-card--neutral .case-metric-card__icon { color: hsl(var(--muted-foreground)); } .case-metric-card__value { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: hsl(var(--foreground)); } .case-metric-card__desc { font-size: 0.875rem; line-height: 1.5; color: hsl(var(--muted-foreground)); } @media (min-width: 1024px) { .case-metric-card__value { font-size: 1.0625rem; } .case-metric-card__desc { font-size: 0.75rem; line-height: 1.4; } } /* Обложка кейса */ .case-cover { margin: 0 0 2rem; } .case-cover img { width: 100%; border: 1px solid hsl(var(--border)); border-radius: var(--radius); } /* Тело кейса: типографика markdown-контента */ .case-content h2 { margin-top: 3rem; margin-bottom: 1rem; scroll-margin-top: 4.5rem; } .case-content h2:first-child { margin-top: 0; } .case-content h3 { margin-top: 2rem; margin-bottom: 0.75rem; scroll-margin-top: 4.5rem; font-size: 1.1875rem; } .case-content h4 { margin-top: 1.5rem; margin-bottom: 0.5rem; scroll-margin-top: 4.5rem; font-size: 1.0625rem; font-weight: 600; color: hsl(var(--foreground)); } .case-content p { margin-bottom: 1rem; max-width: 68ch; color: hsl(var(--foreground)); } .case-content ul, .case-content ol { margin: 0 0 1rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; } .case-content ul { list-style: disc; } .case-content ol { list-style: decimal; } .case-content li { max-width: 68ch; color: hsl(var(--foreground)); } .case-content strong { font-weight: 600; } .case-content code { padding: 0.125rem 0.375rem; border-radius: 0.25rem; background-color: hsl(var(--muted)); color: hsl(var(--foreground)); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; } .case-content pre { margin-bottom: 1.5rem; padding: 0.875rem 1rem; border-radius: 0.5rem; background-color: hsl(var(--muted)); overflow-x: auto; } .case-content pre code { padding: 0; border-radius: 0; background-color: transparent; } .case-table-wrap { margin-bottom: 1.5rem; overflow-x: auto; } .case-content table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 0.9375rem; } .case-content th { padding: 0.625rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 0.8125rem; font-weight: 600; text-align: left; } .case-content td { padding: 0.625rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; } .case-callout { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid hsl(var(--border)); border-radius: 0 var(--radius) var(--radius) 0; background-color: hsl(var(--muted) / 50%); } .case-callout p { margin-bottom: 0.5rem; } .case-callout p:last-child { margin-bottom: 0; } .case-content figure { margin: 0 0 2rem; } .case-content figure img { border: 1px solid hsl(var(--border)); border-radius: var(--radius); } .case-content figcaption { margin-top: 0.5rem; color: hsl(var(--muted-foreground)); font-size: 0.8125rem; text-align: center; } .case-image-placeholder { display: flex; align-items: center; justify-content: center; min-height: 12rem; padding: 2rem; border: 1px dashed hsl(var(--border)); border-radius: var(--radius); background-color: hsl(var(--muted) / 50%); /* Как и у .case-card__cover--placeholder: --muted-foreground на --muted не даёт 4.5:1 в светлой теме, поэтому текст-заглушка — на --foreground. */ color: hsl(var(--foreground)); font-size: 0.9375rem; font-weight: 500; text-align: center; } /* Плейсхолдер обложки кейса — на всю ширину контейнера */ .case-image-placeholder--cover { min-height: 16rem; } /* Правая колонка: другие кейсы + CTA. На <1280px — обычный блок в потоке документа под .case-content (в 2 колонки от 640px), на >=1280px — sticky-сайдбар. */ .case-aside { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 640px) and (max-width: 1279.98px) { .case-aside { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 1.5rem 2rem; } } @media (min-width: 1024px) and (max-width: 1279.98px) { .case-aside { grid-column: 2; } } @media (max-width: 1279.98px) { .case-aside { max-width: 68ch; margin-inline: auto; width: 100%; } .case-cta { order: -1; } } @media (min-width: 1280px) { .case-aside { display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 4.5rem; align-self: start; max-height: calc(100vh - 4.5rem); overflow-y: auto; overscroll-behavior: contain; } } .case-siblings__title { margin-bottom: 1rem; color: hsl(var(--muted-foreground)); font-size: 0.9375rem; font-weight: 500; } .case-siblings__list { display: flex; flex-direction: column; } .case-siblings__link { display: block; padding: 0.25rem 0; color: hsl(var(--foreground)); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: color 150ms ease; } .case-siblings__link:hover { color: hsl(var(--muted-foreground)); } .case-cta { padding: 1.5rem; border-radius: var(--radius); background-color: color-mix(in srgb, hsl(var(--muted)) 50%, hsl(var(--background)) 50%); color: hsl(var(--foreground)); } .case-cta__title { margin-bottom: 0.5rem; font-size: 1.0625rem; } .case-cta__text { margin-bottom: 1rem; color: hsl(var(--muted-foreground)); font-size: 0.9375rem; line-height: 1.5; } .case-cta .button--outline { background-color: hsl(var(--background)); } .case-cta .button--outline:hover { background-color: hsl(var(--muted)); } /* ---------- Страница-заглушка /resume.html ---------- */ .stub { min-height: calc(100vh - 4.5rem); display: flex; align-items: center; } .stub__inner { padding-block: 4rem; max-width: 40rem; } .stub__inner h1 { margin-bottom: 1rem; } .stub__inner p { color: hsl(var(--muted-foreground)); font-size: 1.0625rem; line-height: 1.6; } .stub__inner p + p { margin-top: 1.5rem; } .stub__back { display: inline-block; margin-top: 2rem; }