/* ============================================================ Vertex Design System — flat CSS (light default, dark toggle) Нативный CSS-nesting. Тема переключается классом на . ============================================================ */ /* ---------- Tokens: база (шрифты, отступы, радиусы) ---------- */ :root { --font-display: 'Spectral', Georgia, 'Times New Roman', serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --fs-display-2xl: 72px; --lh-display-2xl: 1.02; --fs-display-xl: 56px; --lh-display-xl: 1.04; --fs-display-l: 40px; --lh-display-l: 1.07; --fs-display-m: 30px; --lh-display-m: 1.12; --fs-title-l: 24px; --lh-title-l: 1.22; --fs-title-m: 20px; --lh-title-m: 1.3; --fs-body-l: 18px; --lh-body-l: 1.7; --fs-body-m: 16px; --lh-body-m: 1.7; --fs-body-s: 14px; --lh-body-s: 1.6; --fs-caption: 12.5px; --lh-caption: 1.4; --fs-label: 11px; --fs-mono: 13.5px; --lh-mono: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-label: 0.16em; --tracking-mono: 0.02em; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --container-max: 1200px; --container-text: 680px; --gutter: 24px; --radius-xs: 6px; --radius-sm: 9px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; } /* ---------- Light theme (default) ---------- */ :root, .light { --bg-base: #F7F8F4; --bg-sunken: #ECEEE6; --surface-1: #FFFFFF; --surface-2: #F1F3EC; --surface-3: #E6E9DF; --border-subtle: rgba(0,0,0,.07); --border-default: rgba(0,0,0,.12); --border-strong: rgba(0,0,0,.20); --accent: #C9F23F; --accent-hover: #D6F95C; --accent-press: #B4DE2E; --accent-dim: #6E8C2E; --accent-soft: rgba(201,242,63,.20); --accent-contrast: #0B0C0A; --accent-ink: #3F5E12; --text-strong: #14160F; --text-default: #2C2F25; --text-muted: #5C6056; --text-faint: #8C9182; --text-on-accent: #0B0C0A; --success: #1F8F66; --success-soft: rgba(31,143,102,.14); --warning: #9A6A12; --warning-soft: rgba(154,106,18,.14); --danger: #C0392B; --danger-soft: rgba(192,57,43,.12); --info: #2D6CDF; --info-soft: rgba(45,108,223,.12); --text-link: var(--accent-ink); --focus-ring: rgba(201,242,63,.50); --code-keyword: #4F7A12; --code-string: #9A6A12; --code-comment: #8C9182; --code-text: #2C2F25; --shadow-sm: 0 1px 2px rgba(0,0,0,.08); --shadow-md: 0 10px 30px -14px rgba(0,0,0,.18); --shadow-lg: 0 30px 70px -30px rgba(0,0,0,.22); --glow-accent: 0 0 0 1px rgba(201,242,63,.45), 0 8px 40px -12px rgba(201,242,63,.50); --ring-accent: 0 0 0 3px rgba(201,242,63,.45); } /* ---------- Dark theme ---------- */ .dark { --bg-base: #0B0C0A; --bg-sunken: #070806; --surface-1: #121410; --surface-2: #181B14; --surface-3: #20241B; --border-subtle: rgba(255,255,255,.07); --border-default: rgba(255,255,255,.12); --border-strong: rgba(255,255,255,.20); --accent: #C9F23F; --accent-hover: #D6F95C; --accent-press: #B4DE2E; --accent-dim: #6E8C2E; --accent-soft: rgba(201,242,63,.14); --accent-contrast: #0B0C0A; --accent-ink: #C9F23F; --text-strong: #F1F3EC; --text-default: #C5C9BC; --text-muted: #8C9182; --text-faint: #5C6056; --text-on-accent: #0B0C0A; --success: #5BD0A0; --success-soft: rgba(91,208,160,.14); --warning: #E4B85C; --warning-soft: rgba(228,184,92,.14); --danger: #F2685C; --danger-soft: rgba(242,104,92,.14); --info: #74A8FF; --info-soft: rgba(116,168,255,.14); --text-link: var(--accent); --focus-ring: rgba(201,242,63,.42); --code-keyword: #C9F23F; --code-string: #E4B85C; --code-comment: #7E8473; --code-text: #C5C9BC; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 10px 30px -14px rgba(0,0,0,.55); --shadow-lg: 0 30px 70px -30px rgba(0,0,0,.65); --glow-accent: 0 0 0 1px rgba(201,242,63,.20), 0 8px 40px -12px rgba(201,242,63,.28); --ring-accent: 0 0 0 3px rgba(201,242,63,.38); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg-base); color: var(--text-default); font-family: var(--font-body); font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .2s ease, color .2s ease; } ::selection { background: var(--accent); color: var(--accent-contrast); } a { color: var(--text-link); text-decoration: none; transition: color .15s ease; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: none; box-shadow: var(--ring-accent); border-radius: var(--radius-xs); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-strong); letter-spacing: var(--tracking-display); font-weight: var(--fw-semibold); line-height: 1.15; margin: 0 0 var(--space-4); } h1 { font-size: var(--fs-display-l); } h2 { font-size: var(--fs-display-m); } h3 { font-size: var(--fs-title-l); letter-spacing: var(--tracking-tight); } h4 { font-size: var(--fs-title-m); letter-spacing: var(--tracking-tight); } h5, h6 { font-size: var(--fs-body-l); letter-spacing: var(--tracking-tight); } p { margin: 0 0 var(--space-4); } img { max-width: 100%; height: auto; } hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-10) 0; } code, pre, kbd { font-family: var(--font-mono); } :not(pre) > code { background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); padding: 2px 6px; font-size: var(--fs-mono); color: var(--code-text); } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .container--text { max-width: var(--container-text); } .v-muted { color: var(--text-muted); } .v-mono { font-family: var(--font-mono); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Header ---------- */ .v-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg-base) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border-subtle); } .v-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 64px; min-width: 0; } .v-header__nav { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .v-header__nav a { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-s); color: var(--text-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); letter-spacing: var(--tracking-tight); white-space: nowrap; } .v-header__nav a:hover { color: var(--text-strong); background: var(--surface-2); text-decoration: none; } /* Бургер — скрыт на десктопе, виден на мобильных */ .v-burger { display: none; } @media (max-width: 640px) { .v-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 40px; height: 40px; padding: 0; margin-left: auto; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer; flex: none; } .v-burger span { display: block; width: 18px; height: 2px; background: var(--text-strong); border-radius: 2px; transition: transform .2s, opacity .2s; } .v-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .v-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .v-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Навигация уходит в выпадающую панель */ .v-header__nav { position: absolute; top: 100%; right: var(--gutter); left: var(--gutter); flex-direction: column; align-items: stretch; gap: var(--space-1); padding: var(--space-3); margin-top: 6px; background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: 0 18px 40px rgba(0,0,0,.28); display: none; } .v-header__nav.is-open { display: flex; } .v-header__nav .v-lang { justify-content: center; padding: var(--space-1) 0; } .v-header__nav .v-theme-toggle { width: 100%; justify-content: center; padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } } .v-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-default); color: var(--text-default); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .v-theme-toggle:hover { color: var(--text-strong); border-color: var(--border-strong); } .v-theme-toggle svg { width: 18px; height: 18px; } /* Переключатель языков */ .v-lang { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--space-1); } .v-lang__btn { font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); padding: 4px 7px; border-radius: var(--radius-xs); transition: color .15s, background .15s; } .v-lang__btn:hover { color: var(--text-strong); background: var(--surface-2); text-decoration: none; } .v-lang__btn.is-active { color: var(--accent-ink); background: var(--accent-soft); } /* ---------- Logo ---------- */ .v-logo { display: inline-flex; align-items: center; gap: 0; text-decoration: none; } .v-logo:hover { text-decoration: none; } .v-logo__mark { width: 46px; height: 38px; flex: none; display: block; } .v-logo__text { display: flex; flex-direction: column; line-height: 1.05; margin-left: 4px; } .v-logo__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title-l); color: var(--text-strong); letter-spacing: var(--tracking-display); } .v-logo__tag { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-caption); color: var(--text-muted); letter-spacing: var(--tracking-label); text-transform: lowercase; } /* ---------- Profile ---------- */ .v-profile { text-align: center; padding: var(--space-20) 0 var(--space-12); } .v-profile__avatar { width: 112px; height: 112px; border-radius: var(--radius-pill); object-fit: cover; border: 2px solid var(--border-strong); box-shadow: var(--shadow-md); margin-bottom: var(--space-5); } .v-profile__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-m); color: var(--text-strong); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-3); } .v-profile__bio { max-width: var(--container-text); margin: 0 auto var(--space-6); color: var(--text-muted); font-size: var(--fs-body-l); line-height: var(--lh-body-l); } .v-profile__social { display: flex; gap: var(--space-3); justify-content: center; } .v-profile__social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-default); color: var(--text-default); transition: color .15s, border-color .15s, transform .15s; } .v-profile__social a:hover { color: var(--accent-ink); border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .v-profile__social svg { width: 20px; height: 20px; } /* ---------- School banner ---------- */ .v-school-banner { display: flex; align-items: center; gap: var(--space-5); background: var(--accent-soft); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); margin: 0 0 var(--space-16); } .v-school-banner__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-contrast); } .v-school-banner__icon svg { width: 24px; height: 24px; } .v-school-banner__body { flex: 1; } .v-school-banner__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title-l); color: var(--text-strong); margin: 0 0 2px; } .v-school-banner__text { color: var(--text-muted); font-size: var(--fs-body-s); margin: 0; } .v-school-banner__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-contrast); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body-s); padding: 10px 18px; border-radius: var(--radius-sm); border: none; cursor: pointer; box-shadow: var(--glow-accent); transition: background .15s; } .v-school-banner__cta:hover { background: var(--accent-hover); text-decoration: none; color: var(--accent-contrast); } /* ---------- Section / grid ---------- */ .v-section-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title-l); color: var(--text-strong); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-6); display: flex; align-items: center; gap: var(--space-3); } .v-section-title::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); } .v-posts-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: var(--space-16); } /* ---------- Card ---------- */ .v-card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .v-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .v-card__cover { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); display: block; overflow: hidden; } .v-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; } .v-card:hover .v-card__cover img { transform: scale(1.03); } .v-card__body { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .v-card__meta { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-mono); color: var(--text-faint); text-transform: uppercase; } .v-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title-m); color: var(--text-strong); letter-spacing: var(--tracking-tight); margin: 0; } .v-card__title a { color: inherit; } .v-card__title a:hover { color: var(--accent-ink); text-decoration: none; } .v-card__excerpt { color: var(--text-muted); font-size: var(--fs-body-s); line-height: var(--lh-body-s); margin: 0; flex: 1; } /* ---------- Article ---------- */ .v-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-12); align-items: start; max-width: 980px; margin-inline: auto; } .v-article { max-width: var(--container-text); } .v-article-header { margin-bottom: var(--space-8); } .v-article-cover { display: block; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-6); background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); } .v-article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-article-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-m); color: var(--text-strong); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-4); } .v-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-mono); color: var(--text-faint); text-transform: uppercase; } .v-article-content { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--text-default); } .v-article-content > * { max-width: var(--container-text); } .v-breadcrumbs { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-mono); color: var(--text-faint); text-transform: uppercase; margin-bottom: var(--space-6); } .v-breadcrumbs a { color: var(--text-muted); } .v-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); } /* ---------- TOC ---------- */ .v-toc { position: sticky; top: 88px; font-size: var(--fs-body-s); } .v-toc__title { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-3); } .v-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-subtle); } .v-toc li a { display: block; padding: 4px 0 4px var(--space-4); color: var(--text-muted); border-left: 2px solid transparent; margin-left: -1px; } .v-toc li a:hover, .v-toc li a.is-active { color: var(--accent-ink); border-left-color: var(--accent); text-decoration: none; } /* ---------- Footer ---------- */ .v-footer { border-top: 1px solid var(--border-subtle); margin-top: var(--space-20); padding: var(--space-10) 0; color: var(--text-muted); font-size: var(--fs-body-s); } .v-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; } .v-footer a { color: var(--text-muted); } .v-footer a:hover { color: var(--accent-ink); } /* ---------- Pagination ---------- */ .v-pagination { display: flex; gap: var(--space-2); justify-content: center; margin: var(--space-12) 0; } .v-pagination a, .v-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--surface-1); color: var(--text-default); font-size: var(--fs-body-s); } .v-pagination a:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; } .v-pagination .is-current { background: var(--accent); color: var(--accent-contrast); border-color: transparent; font-weight: 600; } /* ---------- Alert / Admonition ---------- */ .v-alert, .v-admonition { border: 1px solid var(--border-default); border-left: 3px solid var(--info); background: var(--surface-1); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0; } .v-alert__head, .v-admonition summary { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: var(--space-2); } .v-alert__body, .v-admonition__body { color: var(--text-default); } .v-alert__body > :last-child, .v-admonition__body > :last-child { margin-bottom: 0; } /* Admonition = кликабельный аккордеон */ .v-admonition { padding: 0; overflow: hidden; } .v-admonition summary { cursor: pointer; list-style: none; user-select: none; padding: var(--space-4) var(--space-5); margin: 0; background: var(--surface-1); transition: background .15s; } .v-admonition summary:hover { background: var(--surface-2); } .v-admonition summary::-webkit-details-marker { display: none; } .v-admonition summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s ease; flex: none; } .v-admonition[open] summary::after { transform: rotate(-135deg); } .v-admonition__body { padding: 0 var(--space-5) var(--space-4); } .v-admonition__icon { flex: none; } .v-alert--info, .v-admonition--info, .v-alert--note { border-left-color: var(--info); } .v-alert--info .v-alert__icon, .v-admonition--info .v-admonition__icon { color: var(--info); } .v-alert--success, .v-admonition--success, .v-alert--tip { border-left-color: var(--success); } .v-alert--success .v-alert__icon, .v-admonition--success .v-admonition__icon { color: var(--success); } .v-alert--warning, .v-admonition--warning, .v-alert--important { border-left-color: var(--warning); } .v-alert--warning .v-alert__icon, .v-admonition--warning .v-admonition__icon { color: var(--warning); } .v-alert--danger, .v-admonition--danger, .v-alert--caution { border-left-color: var(--danger); } .v-alert--danger .v-alert__icon, .v-admonition--danger .v-admonition__icon { color: var(--danger); } .v-alert--accent, .v-admonition--accent { border-left-color: var(--accent); background: var(--accent-soft); } .v-alert--accent .v-alert__icon, .v-admonition--accent .v-admonition__icon { color: var(--accent-ink); } /* ---------- Badge ---------- */ .v-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-xs); line-height: 1; } .v-badge--neutral { background: var(--surface-2); color: var(--text-muted); } .v-badge--accent { background: var(--accent-soft); color: var(--accent-ink); } .v-badge--solid { background: var(--accent); color: var(--accent-contrast); } .v-badge--success { background: var(--success-soft); color: var(--success); } .v-badge--warning { background: var(--warning-soft); color: var(--warning); } .v-badge--danger { background: var(--danger-soft); color: var(--danger); } .v-badge--info { background: var(--info-soft); color: var(--info); } /* ---------- Accordion (очевидно кликабельный) ---------- */ .v-accordion { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-6) 0; } .v-accordion__item + .v-accordion__item { border-top: 1px solid var(--border-subtle); } .v-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--surface-1); color: var(--text-strong); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-m); text-align: left; padding: var(--space-4) var(--space-5); border: none; cursor: pointer; transition: background .15s; } .v-accordion__trigger:hover { background: var(--surface-2); } .v-accordion__trigger::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s ease; } .v-accordion__trigger[aria-expanded="true"]::after { transform: rotate(-135deg); } .v-accordion__panel { padding: var(--space-4) var(--space-5); color: var(--text-default); border-top: 1px solid var(--border-subtle); } .v-accordion__panel[hidden] { display: none; } /* ---------- Tabs ---------- */ .v-tabs { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-6) 0; } .v-tabs__nav { display: flex; gap: 2px; background: var(--surface-2); border-bottom: 1px solid var(--border-default); padding: 4px; flex-wrap: wrap; } .v-tabs__tab { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-s); padding: 8px 14px; border-radius: var(--radius-sm); transition: background .15s, color .15s; } .v-tabs__tab:hover { color: var(--text-strong); } .v-tabs__tab.is-active { background: var(--surface-1); color: var(--accent-ink); box-shadow: inset 0 -2px 0 var(--accent); } .v-tabs__panel { padding: var(--space-5); } .v-tabs__panel[hidden] { display: none; } /* ---------- Timeline ---------- */ .v-timeline { list-style: none; margin: var(--space-6) 0; padding: 0; border-left: 2px solid var(--border-default); } .v-timeline__item { position: relative; padding: 0 0 var(--space-8) var(--space-6); } .v-timeline__item:last-child { padding-bottom: 0; } .v-timeline__dot { position: absolute; left: calc(-1 * var(--space-6) - 5px); top: 4px; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .v-timeline__date { display: block; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-mono); color: var(--text-faint); text-transform: uppercase; margin-bottom: 4px; } .v-timeline__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title-m); color: var(--text-strong); margin: 0 0 var(--space-2); } .v-timeline__body { color: var(--text-default); } /* ---------- Chart ---------- */ .v-chart { margin: var(--space-6) 0; max-width: 100%; overflow-x: auto; } .v-chart__title { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-3); } .v-chart canvas { max-width: 100%; } /* ---------- Gist ---------- */ .v-gist { margin: var(--space-6) 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; } /* ---------- KaTeX ---------- */ .v-katex-inline, .v-katex-block { color: var(--text-strong); } .v-katex-block { overflow-x: auto; padding: var(--space-4) 0; } /* ---------- Mermaid ---------- */ .v-mermaid { margin: var(--space-6) 0; padding: var(--space-5); background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); text-align: center; max-width: 100%; overflow-x: auto; } .v-mermaid svg { max-width: 100%; height: auto; } /* ---------- YouTube lite ---------- */ .v-yt-lite { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background-image: var(--yt-poster); background-size: cover; background-position: center; margin: var(--space-6) 0; cursor: pointer; border: 1px solid var(--border-default); } .v-yt-lite::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,10,.05), rgba(11,12,10,.45)); } .v-yt-lite__btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--radius-pill); border: none; background: var(--accent); color: var(--accent-contrast); cursor: pointer; box-shadow: var(--glow-accent); transition: transform .15s, background .15s; } .v-yt-lite__btn:hover { background: var(--accent-hover); transform: translate(-50%,-50%) scale(1.06); } .v-yt-lite__play { width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--accent-contrast); margin-left: 4px; } .v-yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* нативный embed по ссылке (youtube/youtu.be) — не раздувать */ .v-yt-embed { max-width: 100%; } .v-yt-embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--radius-lg); } /* Нативный embed по ссылке (youtube/youtu.be) */ .v-yt-embed { position: relative; aspect-ratio: 16/9; margin: var(--space-6) 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-default); } .v-yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- Embedded article ---------- */ .v-embed-article { border: 1px dashed var(--border-default); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-6) 0; background: var(--surface-1); } .v-embed-article__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title-m); margin: 0 0 var(--space-2); } .v-embed-article__desc { color: var(--text-muted); margin: 0 0 var(--space-3); } .v-embed-article__more { font-weight: var(--fw-semibold); } /* ---------- Icons / errors ---------- */ [data-icon] { display: inline-flex; align-items: center; } .v-alert__icon svg, .v-admonition__icon svg { width: 18px; height: 18px; } .v-error { color: var(--danger); font-family: var(--font-mono); font-size: var(--fs-body-s); background: var(--danger-soft); border-radius: var(--radius-sm); padding: var(--space-3); } /* ---------- Chroma (code colors) ---------- */ .v-article-content pre, pre { margin: var(--space-6) 0; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); } .v-article-content pre code, pre code { background: none; border: none; padding: 0; color: var(--code-text); font-size: inherit; } /* Chroma token map → дизайн-система Vertex */ .v-article-content .chroma, .chroma { color: var(--code-text); background: transparent; } .chroma .x { color: var(--code-text); } .chroma .err { color: var(--danger); } .chroma .k, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt, .chroma .kc { color: var(--code-keyword); font-weight: 600; } .chroma .s, .chroma .s1, .chroma .s2, .chroma .sx, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .si { color: var(--code-string); } .chroma .c, .chroma .c1, .chroma .cm, .chroma .cp, .chroma .cs, .chroma .ch { color: var(--code-comment); font-style: italic; } .chroma .nf, .chroma .nx, .chroma .fm, .chroma .nc, .chroma .nn { color: var(--accent-ink); } .chroma .o, .chroma .ow { color: var(--text-muted); } .chroma .m, .chroma .mi, .chroma .mf, .chroma .mh, .chroma .il, .chroma .mo { color: var(--code-string); } .chroma .nt { color: var(--accent-ink); } .chroma .na { color: var(--code-text); } .chroma .nl { color: var(--code-keyword); } .chroma .no, .chroma .nd, .chroma .ne { color: var(--accent-ink); } .chroma .ss, .chroma .se { color: var(--code-string); } .chroma .gd { color: var(--danger); } .chroma .gi { color: var(--success); } .chroma .gh, .chroma .gu { color: var(--text-muted); font-weight: 600; } /* ---------- Code block w/ header ---------- */ .v-codeblock { margin: var(--space-6) 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); } .v-codeblock__bar { display: flex; align-items: center; gap: var(--space-3); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-4); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-mono); color: var(--text-faint); } .v-codeblock__lang { color: var(--accent-ink); text-transform: uppercase; font-weight: 600; } .v-codeblock__file { color: var(--text-muted); } .v-codeblock__copy { margin-left: auto; background: transparent; border: 1px solid var(--border-default); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-label); padding: 4px 10px; border-radius: var(--radius-xs); cursor: pointer; transition: color .15s, border-color .15s; } .v-codeblock__copy:hover { color: var(--text-strong); border-color: var(--border-strong); } .v-codeblock__copy.is-done { color: var(--success); border-color: var(--success); } .v-codeblock__body { margin: 0; background: var(--bg-sunken); } .v-codeblock__body pre { margin: 0; border: none; border-radius: 0; } .v-codeblock__body pre code { color: var(--code-text); } /* ---------- Images in articles ---------- */ .v-figure { margin: var(--space-8) 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-1); } .v-figure img { display: block; width: 100%; height: auto; } .v-figure figcaption { padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-faint); border-top: 1px solid var(--border-subtle); } /* обычные картинки в контенте (markdown ![alt](src)) */ .v-article-content img, .v-article-content svg { max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); margin: var(--space-6) 0; } .v-article-content figure { margin: var(--space-8) 0; } .v-article-content figure img { margin: 0; } .v-article-content figcaption { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-faint); } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .v-article-layout { grid-template-columns: 1fr; } .v-toc { display: none; } .v-school-banner { flex-direction: column; align-items: flex-start; } .v-school-banner__cta { width: 100%; justify-content: center; } } /* Мобильные (телефоны) */ @media (max-width: 640px) { :root { --gutter: 16px; } /* убираем горизонтальный скролл от переполнений */ html, body { overflow-x: hidden; } /* защита контента статьи от вылета за экран на узких экранах */ .v-article, .v-article-content { max-width: 100%; overflow-x: auto; } .v-article-content > * { max-width: 100%; } .v-article-content img, .v-article-content svg, .v-article-content canvas, .v-article-content iframe, .v-article-content table, .v-article-content pre, .v-mermaid, .v-chart, .v-gist, .v-yt-lite, .v-yt-embed, .v-codeblock { max-width: 100% !important; } .v-mermaid svg { max-width: 100%; height: auto; } /* Компактная шапка: лого + нав + тема в одну строку без переполнения */ .v-header__inner { height: 56px; gap: var(--space-2); } .v-logo__mark { width: 38px; height: 32px; } .v-logo__name { font-size: 18px; } .v-logo__tag { display: none; } .v-header__nav { gap: 0; } .v-header__nav a { padding: var(--space-1) var(--space-2); font-size: var(--fs-body-s); } /* Профиль */ .v-profile { padding: var(--space-12) 0 var(--space-8); } .v-profile__avatar { width: 88px; height: 88px; } .v-profile__name { font-size: var(--fs-display-m); } .v-profile__bio { font-size: var(--fs-body-s); padding-inline: var(--space-2); } /* Заголовки статей */ .v-article-title { font-size: var(--fs-display-m); } h1 { font-size: var(--fs-display-m); } h2 { font-size: var(--fs-title-l); } /* Карточки — одна колонка с меньшими отступами */ .v-posts-grid { gap: var(--space-4); } .v-card__body { padding: var(--space-4); } /* Школа-баннер already column; уменьшаем паддинги */ .v-school-banner { padding: var(--space-5); gap: var(--space-4); } /* Gist может быть шире экрана — даём скролл внутри */ .v-gist { overflow-x: auto; } /* Код: чуть меньше шрифт, чтобы не скроллить слишком много */ .v-codeblock__body pre, pre { font-size: 12.5px; padding: var(--space-3) var(--space-4); } /* Таймлайн */ .v-timeline { margin-left: 32px; } } /* ---------- Reading progress bar ---------- */ .v-reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: transparent; pointer-events: none; } .v-reading-progress__bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); transition: width .1s linear; } /* ---------- Share (копировать ссылку + соцсети) ---------- */ .v-share { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); } .v-share__copy { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-body-s); font-weight: var(--fw-medium); color: var(--text); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .v-share__copy:hover { background: var(--surface-3); border-color: var(--border-default); } .v-share__copy svg { width: 15px; height: 15px; } .v-share__link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-pill); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); transition: color .15s ease, background .15s ease; } .v-share__link:hover { color: var(--text); background: var(--surface-3); } .v-share__link svg { width: 16px; height: 16px; } /* ---------- Post navigation (← предыдущая / следующая →) ---------- */ .v-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-8); } .v-postnav__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-1); text-decoration: none; transition: border-color .15s ease, background .15s ease; } .v-postnav__item:hover { border-color: var(--accent); background: var(--accent-soft); } .v-postnav__item--next { text-align: right; } .v-postnav__dir { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); } .v-postnav__title { font-weight: var(--fw-semibold); color: var(--text); } .v-postnav__item--placeholder { visibility: hidden; } /* ---------- Related posts ---------- */ .v-related { margin-top: var(--space-12); } /* ---------- Terms (список тегов) ---------- */ .v-terms { display: flex; flex-wrap: wrap; gap: var(--space-3); } .v-terms__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text); text-decoration: none; transition: border-color .15s ease, background .15s ease; } .v-terms__item:hover { border-color: var(--accent); background: var(--accent-soft); } .v-terms__name { font-weight: var(--fw-semibold); } .v-terms__count { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-faint); background: var(--surface-3); border-radius: var(--radius-pill); padding: 1px var(--space-2); } /* ---------- Archive (по годам) ---------- */ .v-archive-year { margin-bottom: var(--space-10); } .v-archive-year__title { font-family: var(--font-mono); color: var(--accent-dim); font-size: var(--fs-title-m); margin-bottom: var(--space-4); } .v-archive-list { list-style: none; margin: 0; padding: 0; } .v-archive-item { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); } .v-archive-item__date { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-faint); flex: 0 0 48px; } .v-archive-item__link { color: var(--text); text-decoration: none; font-weight: var(--fw-medium); } .v-archive-item__link:hover { color: var(--accent-dim); } /* ---------- Search (модалка) ---------- */ .v-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .v-search-toggle:hover { color: var(--text); border-color: var(--border-default); } .v-search-toggle svg { width: 18px; height: 18px; } .v-search { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .v-search[hidden] { display: none; } .v-search__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); } .v-search__panel { position: relative; width: min(560px, 92vw); max-height: 70vh; overflow: hidden; background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.28); display: flex; flex-direction: column; } .v-search__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); } .v-search__input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: var(--fs-body-l); color: var(--text); } .v-search__close { background: transparent; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; line-height: 1; } .v-search__results { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; } .v-search__item a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); } .v-search__item a:hover { background: var(--accent-soft); } .v-search__item-title { font-weight: var(--fw-semibold); } .v-search__item-desc { font-size: var(--fs-body-s); color: var(--text-muted); } .v-search__empty { padding: var(--space-6); text-align: center; color: var(--text-faint); } /* ---------- 404 ---------- */ .v-404 { text-align: center; padding: var(--space-24) var(--space-4); } .v-404__code { font-family: var(--font-mono); font-size: var(--fs-display-2xl); color: var(--accent); margin: 0; line-height: 1; } .v-404__title { font-family: var(--font-display); font-size: var(--fs-display-l); margin: var(--space-4) 0 var(--space-2); } .v-404__text { color: var(--text-muted); margin-bottom: var(--space-8); } .v-404__home { display: inline-block; padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast); font-weight: var(--fw-semibold); text-decoration: none; } .v-404__home:hover { background: var(--accent-hover); } /* ---------- Heading anchor (#) ---------- */ .v-heading-anchor { position: relative; } .v-heading-anchor__link { position: absolute; left: -1.1em; top: 50%; transform: translateY(-50%); opacity: 0; color: var(--text-faint); text-decoration: none; font-weight: var(--fw-regular); transition: opacity .12s ease; padding: 0 var(--space-1); } .v-heading-anchor:hover .v-heading-anchor__link { opacity: 1; } .v-heading-anchor__link:hover { color: var(--accent-dim); }