/* ─── FOUC Prevention (Dark Mode) ──────────────────────────────────────────── */ /* Этот блок выносится в через inline-скрипт (см. assets.php) */ /* ─── CSS Custom Properties ─────────────────────────────────────────────────── */ :root { /* Colors */ --sc-primary: #2563eb; --sc-primary-dark: #1d4ed8; --sc-accent: #3b82f6; --sc-success: #059669; --sc-warning: #d97706; --sc-danger: #dc2626; /* Background / Surface */ --sc-bg: #ffffff; --sc-surface: #f8fafc; --sc-surface-2: #f1f5f9; /* Text */ --sc-text: #0f172a; --sc-text-muted: #64748b; --sc-text-light: #94a3b8; /* Border */ --sc-border: #e2e8f0; --sc-border-2: #cbd5e1; /* Shadows */ --sc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); /* Spacing */ --sc-space-1: 0.25rem; --sc-space-2: 0.5rem; --sc-space-3: 0.75rem; --sc-space-4: 1rem; --sc-space-5: 1.25rem; --sc-space-6: 1.5rem; --sc-space-8: 2rem; --sc-space-12: 3rem; --sc-space-16: 4rem; /* Radius */ --sc-radius-sm: 0.375rem; --sc-radius: 0.5rem; --sc-radius-lg: 0.75rem; --sc-radius-xl: 1rem; /* Typography */ --sc-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sc-font-mono: 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace; /* Transitions */ --sc-transition: 0.2s ease; /* Container */ --sc-container-max: 1200px; --sc-container-px: clamp(1rem, 4vw, 2rem); } /* ─── Dark Mode ─────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --sc-bg: #0f172a; --sc-surface: #1e293b; --sc-surface-2: #334155; --sc-text: #f1f5f9; --sc-text-muted: #94a3b8; --sc-text-light: #64748b; --sc-border: #334155; --sc-border-2: #475569; --sc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4); --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5); } /* ─── Reading Progress Bar ───────────────────────────────────────────────────── */ .sc-progress-track { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 200; pointer-events: none; } .sc-progress { height: 100%; width: 0%; background: linear-gradient(90deg, var(--sc-primary), var(--sc-accent)); transition: width 0.1s linear; will-change: width; } /* Прогресс показываем только на одиночных постах */ body:not(.single-post) .sc-progress-track { display: none; } /* ─── Reset / Base ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--sc-bg); color: var(--sc-text); font-family: var(--sc-font-sans); font-size: 1rem; line-height: 1.7; transition: background-color var(--sc-transition), color var(--sc-transition); margin: 0; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--sc-primary); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--sc-primary-dark); } h1, h2, h3, h4, h5, h6 { color: var(--sc-text); font-weight: 700; line-height: 1.3; margin-top: 0; } code, pre { font-family: var(--sc-font-mono); font-size: 0.875em; } code { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); padding: 0.125em 0.375em; } pre { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); overflow-x: auto; padding: var(--sc-space-4); } pre code { background: none; border: none; padding: 0; } blockquote { border-left: 4px solid var(--sc-primary); background: var(--sc-surface); margin: var(--sc-space-6) 0; padding: var(--sc-space-4) var(--sc-space-6); border-radius: 0 var(--sc-radius) var(--sc-radius) 0; } /* ─── Layout ─────────────────────────────────────────────────────────────────── */ .sc-main { min-height: 60vh; max-width: var(--sc-container-max); margin-inline: auto; padding: var(--sc-space-8) var(--sc-container-px); } /* ─── Header ─────────────────────────────────────────────────────────────────── */ .sc-header { background: var(--sc-bg); border-bottom: 1px solid var(--sc-border); position: sticky; top: 0; z-index: 100; transition: background-color var(--sc-transition); } .sc-header__inner { max-width: var(--sc-container-max); margin: 0 auto; padding: var(--sc-space-4) var(--sc-container-px); gap: var(--sc-space-6); } .sc-logo a { font-weight: 700; font-size: 1.25rem; color: var(--sc-text); text-decoration: none; } .sc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sc-space-6); } .sc-nav a { color: var(--sc-text-muted); text-decoration: none; font-weight: 500; transition: color var(--sc-transition); } .sc-nav a:hover, .sc-nav .current-menu-item a, .sc-nav a[aria-current="page"] { color: var(--sc-primary); } /* WP Block Navigation — submenu dropdown */ .sc-nav .wp-block-navigation__submenu-container { background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-lg); padding: var(--sc-space-2) 0; min-width: 180px; } .sc-nav .wp-block-navigation__submenu-container a { padding: var(--sc-space-2) var(--sc-space-4); display: block; } /* WP Block Navigation — mobile overlay */ .sc-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--sc-bg); } .sc-nav .wp-block-navigation__responsive-container-open svg, .sc-nav .wp-block-navigation__responsive-container-close svg { stroke: var(--sc-text-muted); } /* WP Block Navigation — submenu toggle arrow */ .sc-nav .wp-block-navigation__submenu-icon svg { stroke: var(--sc-text-muted); } /* ─── Dark Mode Toggle ───────────────────────────────────────────────────────── */ .sc-theme-toggle { background: none; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); cursor: pointer; color: var(--sc-text-muted); padding: var(--sc-space-2); display: flex; align-items: center; justify-content: center; transition: color var(--sc-transition), border-color var(--sc-transition); } .sc-theme-toggle:hover { color: var(--sc-primary); border-color: var(--sc-primary); } [data-theme="dark"] .sc-icon-sun { display: block; } [data-theme="dark"] .sc-icon-moon { display: none; } .sc-icon-sun { display: none; } .sc-icon-moon { display: block; } /* ─── Hero ───────────────────────────────────────────────────────────────────── */ .sc-hero { background: linear-gradient(135deg, var(--sc-primary) 0%, #1d4ed8 100%); border-radius: var(--sc-radius-xl); color: #ffffff; padding: var(--sc-space-16) var(--sc-space-8); text-align: center; margin-bottom: var(--sc-space-12); } .sc-hero__title { color: #ffffff; font-size: clamp(1.75rem, 4vw, 3rem); margin-bottom: var(--sc-space-4); } .sc-hero__subtitle { color: rgba(255,255,255,0.9); font-size: 1.125rem; max-width: 600px; margin: 0 auto var(--sc-space-8); } /* ─── Posts Grid ─────────────────────────────────────────────────────────────── */ .sc-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sc-space-6); } /* ─── Card ───────────────────────────────────────────────────────────────────── */ .sc-card { background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); overflow: hidden; transition: transform var(--sc-transition), box-shadow var(--sc-transition); } .sc-card:hover { transform: translateY(-2px); box-shadow: var(--sc-shadow-lg); } .sc-card__image img, .sc-card__image .sc-svg-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .sc-card__body { padding: var(--sc-space-4); } .sc-card__cat a { background: var(--sc-surface); border-radius: var(--sc-radius-sm); color: var(--sc-primary); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; padding: var(--sc-space-1) var(--sc-space-2); text-decoration: none; text-transform: uppercase; } .sc-card__title { font-size: 1.125rem; margin: var(--sc-space-2) 0; } .sc-card__title a { color: var(--sc-text); text-decoration: none; } .sc-card__title a:hover { color: var(--sc-primary); } .sc-card__excerpt { color: var(--sc-text-muted); font-size: 0.875rem; margin: 0 0 var(--sc-space-3); } .sc-card__date { color: var(--sc-text-light); font-size: 0.8125rem; } /* ─── Single Post ─────────────────────────────────────────────────────────────── */ .sc-single__hero { margin-bottom: var(--sc-space-8); } .sc-single__cat a { background: var(--sc-surface); border-radius: var(--sc-radius-sm); color: var(--sc-primary); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; padding: var(--sc-space-1) var(--sc-space-2); text-decoration: none; text-transform: uppercase; } .sc-single__title { font-size: clamp(1.5rem, 4vw, 2.5rem); margin: var(--sc-space-4) 0; } .sc-single__meta { gap: var(--sc-space-4); color: var(--sc-text-muted); font-size: 0.875rem; } .sc-single__image { display: none; } .sc-single__content { max-width: 740px; } .sc-single__content .wp-block-post-content { font-size: 1.0625rem; line-height: 1.8; } .sc-single__content .wp-block-post-content > * { margin-bottom: var(--sc-space-6); } .sc-meta__reading-time { display: inline-flex; align-items: center; gap: var(--sc-space-1); color: var(--sc-text-muted); font-size: 0.875rem; } .sc-meta__reading-time svg { flex-shrink: 0; } .sc-single__body { gap: var(--sc-space-8); align-items: flex-start; } .sc-tags { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); margin-top: var(--sc-space-6); } .sc-tags a { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); color: var(--sc-text-muted); font-size: 0.8125rem; padding: var(--sc-space-1) var(--sc-space-3); text-decoration: none; transition: color var(--sc-transition), border-color var(--sc-transition); } .sc-tags a:hover { color: var(--sc-primary); border-color: var(--sc-primary); } .sc-single__nav { border-top: 1px solid var(--sc-border); margin-top: var(--sc-space-8); padding-top: var(--sc-space-6); } .sc-single__nav a { text-decoration: none; font-weight: 500; color: var(--sc-primary); } /* ─── Sidebar ─────────────────────────────────────────────────────────────────── */ .sc-sidebar { flex-shrink: 0; width: 300px; position: sticky; top: 80px; } .sc-sidebar__widget { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); padding: var(--sc-space-4); margin-bottom: var(--sc-space-4); } .sc-sidebar__title { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sc-text-muted); margin: 0 0 var(--sc-space-3); } /* ─── Archive / Category ─────────────────────────────────────────────────────── */ .sc-archive__header { background: var(--sc-surface); border-radius: var(--sc-radius-xl); padding: var(--sc-space-8); margin-bottom: var(--sc-space-8); } .sc-archive__title { font-size: 2rem; margin: 0 0 var(--sc-space-3); } .sc-archive__desc { color: var(--sc-text-muted); margin: 0; } /* ─── Search ─────────────────────────────────────────────────────────────────── */ .sc-search__header { margin-bottom: var(--sc-space-8); } .sc-search__title { font-size: 1.75rem; margin-bottom: var(--sc-space-4); } .sc-search__results { display: flex; flex-direction: column; gap: var(--sc-space-4); } /* ─── 404 ─────────────────────────────────────────────────────────────────────── */ .sc-404 { text-align: center; padding: var(--sc-space-16) var(--sc-space-4); } .sc-404__code { color: var(--sc-primary); font-size: clamp(5rem, 15vw, 8rem); line-height: 1; margin-bottom: 0; } .sc-404__title { font-size: 1.75rem; } .sc-404__text { color: var(--sc-text-muted); margin-bottom: var(--sc-space-6); } /* ─── Pagination ─────────────────────────────────────────────────────────────── */ .sc-pagination { margin-top: var(--sc-space-8); gap: var(--sc-space-2); } .sc-pagination .page-numbers { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); color: var(--sc-text); display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 var(--sc-space-3); text-decoration: none; transition: background-color var(--sc-transition), color var(--sc-transition); } .sc-pagination .page-numbers:hover, .sc-pagination .page-numbers.current { background: var(--sc-primary); border-color: var(--sc-primary); color: #ffffff; } /* ─── Footer ─────────────────────────────────────────────────────────────────── */ .sc-footer { background: var(--sc-secondary, #1e293b); color: var(--sc-text-light); padding: var(--sc-space-12) var(--sc-container-px) var(--sc-space-6); margin-top: var(--sc-space-16); } /* WP constrained layout uses contentSize (740px) for direct children — override footer children to span the full 1200px container */ .sc-footer .sc-footer__grid, .sc-footer .sc-footer__bottom { max-width: var(--sc-container-max); } [data-theme="dark"] .sc-footer { background: #0a0f1a; } .sc-footer__brand { color: #ffffff; font-size: 1.25rem; font-weight: 700; text-decoration: none; } .sc-footer__tagline { color: var(--sc-text-light); font-size: 0.875rem; margin-top: var(--sc-space-2); } .sc-footer__heading { color: #94a3b8; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 var(--sc-space-3); } .sc-footer__cats, .sc-footer__recent { list-style: none; margin: 0; padding: 0; } .sc-footer__cats a, .sc-footer__recent a { color: #94a3b8; font-size: 0.875rem; text-decoration: none; } .sc-footer__cats a:hover, .sc-footer__recent a:hover { color: #ffffff; } .sc-footer__grid { gap: var(--sc-space-8); padding-bottom: var(--sc-space-8); border-bottom: 1px solid #334155; } .sc-footer__bottom { padding-top: var(--sc-space-6); } .sc-footer__copy, .sc-footer__links { font-size: 0.8125rem; color: #64748b; margin: 0; } .sc-footer__links a { color: #64748b; text-decoration: none; } .sc-footer__links a:hover { color: #94a3b8; } /* ─── Breadcrumbs ─────────────────────────────────────────────────────────────── */ .sc-breadcrumbs { margin-bottom: var(--sc-space-4); font-size: 0.875rem; } .sc-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-space-2); align-items: center; } .sc-breadcrumbs li:not(:last-child)::after { content: '›'; color: var(--sc-text-light); margin-left: var(--sc-space-2); } .sc-breadcrumbs a { color: var(--sc-text-muted); text-decoration: none; } .sc-breadcrumbs a:hover { color: var(--sc-primary); } .sc-breadcrumbs [aria-current="page"] { color: var(--sc-text); } /* ─── SVG Thumbnails ─────────────────────────────────────────────────────────── */ .sc-svg-thumb { line-height: 0; } .sc-svg-thumb svg { display: block; width: 100%; } /* ─── Buttons ─────────────────────────────────────────────────────────────────── */ .wp-block-button .wp-element-button, .wp-block-button__link { background: var(--sc-primary); border: none; border-radius: var(--sc-radius); color: #ffffff; cursor: pointer; font-family: var(--sc-font-sans); font-size: 1rem; font-weight: 600; padding: var(--sc-space-3) var(--sc-space-6); text-decoration: none; transition: background-color var(--sc-transition), transform var(--sc-transition); } .wp-block-button .wp-element-button:hover, .wp-block-button__link:hover { background: var(--sc-primary-dark); transform: translateY(-1px); } /* ─── Search Form ─────────────────────────────────────────────────────────────── */ .wp-block-search .wp-block-search__inside-wrapper { display: flex; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); overflow: hidden; background: var(--sc-bg); } .wp-block-search__input { background: transparent; border: none; color: var(--sc-text); flex: 1; font-family: var(--sc-font-sans); font-size: 0.9375rem; outline: none; padding: var(--sc-space-3) var(--sc-space-4); } .wp-block-search__button { background: var(--sc-primary); border: none; color: #ffffff; cursor: pointer; font-weight: 600; padding: var(--sc-space-3) var(--sc-space-4); transition: background-color var(--sc-transition); } .wp-block-search__button:hover { background: var(--sc-primary-dark); } .sc-hero__search .wp-block-search .wp-block-search__inside-wrapper { border: none; border-radius: var(--sc-radius-lg); max-width: 480px; margin: 0 auto; } /* ─── Related Posts ─────────────────────────────────────────────────────────── */ .sc-related { border-top: 1px solid var(--sc-border); margin-top: var(--sc-space-12); padding-top: var(--sc-space-8); } .sc-related__title { font-size: 1.5rem; margin-bottom: var(--sc-space-6); } .sc-related__query .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-space-4); } @media (max-width: 900px) { .sc-related__query .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .sc-related__query .wp-block-post-template { grid-template-columns: 1fr; } } /* ─── Privacy Page ───────────────────────────────────────────────────────────── */ .sc-privacy__updated { color: var(--sc-text-muted); font-size: 0.875rem; margin-bottom: var(--sc-space-8); } /* ─── Contact Form ───────────────────────────────────────────────────────────── */ .sc-contact { padding: var(--sc-space-8) 0; } .sc-contact-form { display: flex; flex-direction: column; gap: var(--sc-space-4); margin-top: var(--sc-space-6); } .sc-form-group { display: flex; flex-direction: column; gap: var(--sc-space-1); } .sc-form-group label { color: var(--sc-text); font-size: 0.9375rem; font-weight: 500; } .sc-form-group input, .sc-form-group textarea { background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); color: var(--sc-text); font-family: var(--sc-font-sans); font-size: 1rem; outline: none; padding: var(--sc-space-3) var(--sc-space-4); transition: border-color var(--sc-transition), box-shadow var(--sc-transition); width: 100%; } .sc-form-group input:focus, .sc-form-group textarea:focus { border-color: var(--sc-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15); } .sc-form-group textarea { resize: vertical; min-height: 160px; } /* Honeypot hidden */ .sc-hp { display: none !important; visibility: hidden; } .sc-btn { align-self: flex-start; background: var(--sc-primary); border: none; border-radius: var(--sc-radius); color: #ffffff; cursor: pointer; font-family: var(--sc-font-sans); font-size: 1rem; font-weight: 600; padding: var(--sc-space-3) var(--sc-space-8); transition: background-color var(--sc-transition), transform var(--sc-transition); } .sc-btn:hover:not(:disabled) { background: var(--sc-primary-dark); transform: translateY(-1px); } .sc-btn:disabled { opacity: 0.6; cursor: not-allowed; } .sc-form-status { border-radius: var(--sc-radius); font-size: 0.9375rem; padding: var(--sc-space-3) var(--sc-space-4); } .sc-form-status:empty { display: none; } .sc-form-status--success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .sc-form-status--error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } [data-theme="dark"] .sc-form-status--success { background: #14532d; color: #86efac; border-color: #166534; } [data-theme="dark"] .sc-form-status--error { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; } /* ─── Responsive ─────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .sc-home__content, .sc-single__body { flex-direction: column; } .sc-sidebar { width: 100%; position: static; } .sc-posts-grid { grid-template-columns: 1fr; } .sc-hero { padding: var(--sc-space-8) var(--sc-space-4); } .sc-header__inner { flex-wrap: wrap; } } @media (max-width: 600px) { .sc-footer__grid { grid-template-columns: 1fr 1fr; } /* Скрыть поиск в шапке — на мобиле оверлей-меню, поиск в сайдбаре/архиве */ .sc-search-inline { display: none; } } @media (max-width: 480px) { /* Prev/Next навигация в статье — переносить на новую строку */ .sc-single__nav { flex-wrap: wrap; gap: var(--sc-space-3); } .sc-single__nav .wp-block-post-navigation-link { flex: 1 1 100%; } /* Заголовок архива */ .sc-archive__title { font-size: clamp(1.25rem, 5vw, 1.75rem); } } @media (max-width: 400px) { .sc-footer__grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ HOMEPAGE — 5-section layout ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Shared ──────────────────────────────────────────────────────────────── */ .sc-homepage { min-height: 60vh; } .sc-home-section { padding: var(--sc-space-16) var(--sc-container-px); border-bottom: 1px solid var(--sc-border); } .sc-home-section:last-child { border-bottom: none; } .sc-section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-text-muted); margin: 0 0 var(--sc-space-4); } .sc-label-cat { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-primary); text-decoration: none; } .sc-label-cat:hover { text-decoration: underline; } /* ─── 1. Позиция ──────────────────────────────────────────────────────────── */ .sc-position { background: linear-gradient(150deg, var(--sc-primary) 0%, var(--sc-primary-dark) 100%); } [data-theme="dark"] .sc-position { background: linear-gradient(150deg, var(--sc-primary-dark) 0%, #1e3a8a 100%); } .sc-position__inner { max-width: var(--sc-container-max); margin-inline: auto; } .sc-position__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-primary); margin: 0 0 var(--sc-space-4); } .sc-position__statement { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #fff; max-width: 720px; margin: 0 0 var(--sc-space-4); } .sc-position__sub { font-size: 1.0625rem; color: rgba(255, 255, 255, 0.6); line-height: 1.7; max-width: 620px; margin: 0 0 var(--sc-space-8); } .sc-position__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sc-space-2); } .sc-position__tags li { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--sc-radius); padding: var(--sc-space-2) var(--sc-space-3); line-height: 1; } /* ─── 2. Структура ────────────────────────────────────────────────────────── */ .sc-clusters { background: var(--sc-surface); } .sc-clusters__inner { max-width: var(--sc-container-max); margin-inline: auto; } .sc-clusters__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sc-space-4); margin-top: var(--sc-space-4); } /* Per-card accent hues — each topic gets a distinct identity */ .sc-cluster-card { --card-hue: 221 83% 53%; /* default: primary blue */ display: flex; flex-direction: column; gap: var(--sc-space-2); padding: var(--sc-space-6) var(--sc-space-5); background: hsl(var(--card-hue)); border: 1px solid transparent; border-radius: var(--sc-radius-lg); text-decoration: none; color: #fff; transition: box-shadow var(--sc-transition), transform var(--sc-transition), filter var(--sc-transition); } .sc-cluster-card:nth-child(1) { --card-hue: 221 83% 53%; } /* Blue */ .sc-cluster-card:nth-child(2) { --card-hue: 258 74% 58%; } /* Violet */ .sc-cluster-card:nth-child(3) { --card-hue: 160 68% 36%; } /* Emerald */ .sc-cluster-card:nth-child(4) { --card-hue: 25 90% 48%; } /* Orange */ .sc-cluster-card:nth-child(5) { --card-hue: 199 89% 40%; } /* Sky/Cyan */ .sc-cluster-card:hover { filter: brightness(1.12); box-shadow: 0 8px 28px hsl(var(--card-hue) / 0.45); transform: translateY(-3px); } .sc-cluster-card__count { font-size: 0.675rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); } .sc-cluster-card__name { font-size: 0.9375rem; font-weight: 700; color: #fff; line-height: 1.3; } .sc-cluster-card__desc { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); line-height: 1.55; flex: 1; margin: 0; } .sc-cluster-card__cta { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.9); font-weight: 600; margin-top: var(--sc-space-2); } /* ─── 3. Отбор ────────────────────────────────────────────────────────────── */ .sc-featured { background: linear-gradient(180deg, rgba(37, 99, 235, 0.05) 0%, var(--sc-bg) 60%); } [data-theme="dark"] .sc-featured { background: linear-gradient(180deg, rgba(37, 99, 235, 0.12) 0%, var(--sc-bg) 60%); } .sc-featured__inner { max-width: var(--sc-container-max); margin-inline: auto; } .sc-featured__head { display: flex; flex-direction: column; margin-bottom: var(--sc-space-6); } .sc-featured__note { font-size: 0.875rem; color: var(--sc-text-muted); } .sc-featured__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sc-space-4); } .sc-featured__card { --card-hue: 221 83% 53%; display: flex; flex-direction: column; gap: var(--sc-space-3); padding: var(--sc-space-6); background: var(--sc-bg); border: 2px solid hsl(var(--card-hue)); border-radius: var(--sc-radius-lg); transition: box-shadow var(--sc-transition), filter var(--sc-transition); } .sc-featured__card:nth-child(1) { --card-hue: 221 83% 53%; } .sc-featured__card:nth-child(2) { --card-hue: 258 74% 58%; } .sc-featured__card:nth-child(3) { --card-hue: 160 68% 36%; } .sc-featured__card:hover { filter: brightness(0.97); box-shadow: 0 6px 20px hsl(var(--card-hue) / 0.2); } .sc-featured__title { font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sc-featured__card--lead .sc-featured__title { font-size: 1.3125rem; -webkit-line-clamp: 3; } .sc-featured__title a { color: var(--sc-text); text-decoration: none; } .sc-featured__title a:hover { color: var(--sc-primary); } .sc-featured__excerpt { font-size: 0.875rem; color: var(--sc-text-muted); line-height: 1.65; flex: 1; margin: 0; } .sc-featured__meta { display: flex; gap: var(--sc-space-3); font-size: 0.75rem; color: var(--sc-text-light); margin-top: auto; } /* ─── 4. Динамика ─────────────────────────────────────────────────────────── */ .sc-latest { background: var(--sc-bg); } .sc-latest__inner { max-width: var(--sc-container-max); margin-inline: auto; } .sc-latest__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sc-space-2); } .sc-latest__all { font-size: 0.875rem; font-weight: 600; color: var(--sc-primary); text-decoration: none; } .sc-latest__all:hover { text-decoration: underline; } .sc-latest__list { list-style: none; padding: 0; margin: 0; } .sc-latest__item { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: var(--sc-space-4); padding: var(--sc-space-4) 0; border-bottom: 1px solid var(--sc-border); } .sc-latest__item:last-child { border-bottom: none; } .sc-latest__num { display: flex; align-items: center; justify-content: center; } .sc-latest__num::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--sc-primary); flex-shrink: 0; } .sc-latest__item:nth-child(1) .sc-latest__num::before { background: hsl(221 83% 53%); } .sc-latest__item:nth-child(2) .sc-latest__num::before { background: hsl(258 74% 58%); } .sc-latest__item:nth-child(3) .sc-latest__num::before { background: hsl(160 68% 36%); } .sc-latest__item:nth-child(4) .sc-latest__num::before { background: hsl(25 90% 48%); } .sc-latest__item:nth-child(5) .sc-latest__num::before { background: hsl(199 89% 40%); } .sc-latest__content { display: flex; flex-direction: column; gap: 0.2rem; } .sc-latest__title { font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.4; } .sc-latest__title a { color: var(--sc-text); text-decoration: none; } .sc-latest__title a:hover { color: var(--sc-primary); } .sc-latest__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; font-size: 0.75rem; color: var(--sc-text-light); white-space: nowrap; min-width: 6rem; } /* ─── 5. Личность ─────────────────────────────────────────────────────────── */ .sc-author-bio { background: var(--sc-surface); } .sc-author-bio__inner { max-width: var(--sc-container-max); margin-inline: auto; display: grid; grid-template-columns: auto 1fr; gap: var(--sc-space-12); align-items: start; } .sc-author-bio__avatar { width: 88px; height: 88px; background: var(--sc-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; flex-shrink: 0; user-select: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); } .sc-author-bio__name { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--sc-text); margin: var(--sc-space-2) 0 var(--sc-space-1); } .sc-author-bio__role { font-size: 0.875rem; color: var(--sc-text-muted); margin: 0 0 var(--sc-space-5); } .sc-author-bio__text { font-size: 1rem; color: var(--sc-text-muted); line-height: 1.75; max-width: 620px; margin: 0 0 var(--sc-space-5); } .sc-author-bio__creds { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); margin-bottom: var(--sc-space-6); } .sc-author-bio__creds span { --cred-hue: 221 83% 53%; font-size: 0.75rem; font-weight: 600; color: hsl(var(--cred-hue)); background: hsl(var(--cred-hue) / 0.08); border: 1px solid hsl(var(--cred-hue) / 0.25); border-radius: var(--sc-radius-sm); padding: var(--sc-space-1) var(--sc-space-3); } .sc-author-bio__creds span:nth-child(1) { --cred-hue: 221 83% 53%; } .sc-author-bio__creds span:nth-child(2) { --cred-hue: 258 74% 58%; } .sc-author-bio__creds span:nth-child(3) { --cred-hue: 160 68% 36%; } .sc-author-bio__creds span:nth-child(4) { --cred-hue: 25 90% 48%; } /* ─── sc-btn --outline variant ────────────────────────────────────────────── */ .sc-btn--outline { display: inline-flex; align-items: center; gap: var(--sc-space-2); padding: var(--sc-space-3) var(--sc-space-5); background: transparent; border: 1.5px solid var(--sc-primary); border-radius: var(--sc-radius); font-size: 0.875rem; font-weight: 600; color: var(--sc-primary); text-decoration: none; transition: background var(--sc-transition), color var(--sc-transition); } .sc-btn--outline:hover { background: var(--sc-primary); color: #fff; } /* ─── Homepage responsive ─────────────────────────────────────────────────── */ @media (max-width: 1024px) { .sc-clusters__grid { grid-template-columns: repeat(3, 1fr); } .sc-featured__grid { grid-template-columns: 1fr 1fr; } .sc-featured__card--lead { grid-column: 1 / -1; } } @media (max-width: 768px) { .sc-home-section { padding: var(--sc-space-12) var(--sc-container-px); } .sc-clusters__grid { grid-template-columns: repeat(2, 1fr); } .sc-featured__grid { grid-template-columns: 1fr; } .sc-author-bio__inner { grid-template-columns: 1fr; } .sc-author-bio__avatar { width: 64px; height: 64px; font-size: 1.25rem; } .sc-latest__item { grid-template-columns: 2.5rem 1fr; } .sc-latest__meta { display: none; } } @media (max-width: 550px) { /* ── Featured slider ── */ .sc-featured__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: var(--sc-space-4); padding-bottom: var(--sc-space-2); scrollbar-width: none; -ms-overflow-style: none; } .sc-featured__grid::-webkit-scrollbar { display: none; } .sc-featured__card { flex: 0 0 82vw; max-width: 340px; scroll-snap-align: start; } .sc-featured__card--lead { flex: 0 0 82vw; max-width: 340px; } /* dots */ .sc-featured__dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--sc-space-4); } .sc-featured__dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: var(--sc-border); cursor: pointer; padding: 0; transition: background 0.25s, transform 0.25s; } .sc-featured__dot.is-active { background: var(--sc-primary); transform: scale(1.35); } } @media (max-width: 480px) { .sc-clusters__grid { grid-template-columns: 1fr; } .sc-position__statement { font-size: 1.5rem; } } /* ─── Back to Top ──────────────────────────────────────────────────────────── */ .sc-back-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 900; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--sc-primary); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background 0.2s; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); } .sc-back-to-top:hover { background: var(--sc-primary-dark); transform: translateY(-2px); } .sc-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 480px) { .sc-back-to-top { bottom: 1rem; right: 1rem; } }