/* ============================================================ Vibe blog — vc-style design system Карточная лента в стиле vc.ru + все функциональные блоки (погода, курсы, подписка, прогресс чтения, auth, account). Тёмная тема через . ============================================================ */ :root { --bg: #f4f5f7; --surface: #ffffff; --surface-2: #fafbfc; --border: #e6e8eb; --text: #1a1b1e; --text-soft: #5c6370; --text-mute: #9aa1ad; --accent: #ff543a; --accent-soft: #fff0ed; --link: #2a6df4; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04); --shadow-hover: 0 6px 22px rgba(16,24,40,.10); --header-h: 56px; --maxw: 1200px; --font: "Roboto", -apple-system, "Segoe UI", system-ui, "Helvetica Neue", sans-serif; } html[data-theme="dark"] { --bg: #0f1115; --surface: #181b21; --surface-2: #1f232b; --border: #2a2f38; --text: #e8eaed; --text-soft: #a8afba; --text-mute: #6b7280; --accent: #ff6a52; --accent-soft: #2a1814; --link: #6aa6ff; --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-hover: 0 6px 22px rgba(0,0,0,.45); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.55; transition: background .2s, color .2s; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } h1,h2,h3,h4 { margin: 0; } /* ---------- Header ---------- */ .supbar { background: linear-gradient(90deg, var(--accent), #ff7a45); color: #fff; font-size: 13px; text-align: center; padding: 6px; } .bar--top { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); height: var(--header-h); backdrop-filter: saturate(180%) blur(8px); } .header__layout { max-width: var(--maxw); margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 16px; padding: 0 16px; } .header__logo { font-weight: 800; font-size: 21px; color: var(--accent); letter-spacing: -.5px; } .header__logo:hover { text-decoration: none; } .header__main { flex: 1; display: flex; gap: 6px; align-items: center; } .header__search { flex: 1; max-width: 440px; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; color: var(--text-mute); } .header__search input { border: 0; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--text); font-family: var(--font); } .header-actions { display: flex; gap: 8px; align-items: center; } .btn { border: 0; cursor: pointer; font-family: var(--font); font-size: 14px; border-radius: 999px; padding: 8px 16px; font-weight: 500; transition: .15s; } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: #e8432b; text-decoration: none; } .btn--ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn--ghost:hover { background: var(--border); } .auth-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 500; } .auth-btn:hover { background: var(--surface-2); text-decoration: none; } .icon-btn { background: transparent; border: 1px solid var(--border); border-radius: 50%; width: 38px; height: 38px; cursor: pointer; color: var(--text-soft); font-size: 16px; } /* ---------- Progress bar ---------- */ .progress-bar { position: fixed; top: var(--header-h); left: 0; height: 2px; width: 0; background: var(--accent); z-index: 49; transition: width .1s; } /* ---------- Layout ---------- */ .layout-wrapper { min-height: 100vh; } .layout { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0,1fr) 320px; gap: 20px; padding: 20px 16px; align-items: start; } @media (max-width: 1024px) { .layout { grid-template-columns: minmax(0,1fr) 300px; } .aside--left { display: none; } } @media (max-width: 760px) { .layout { grid-template-columns: 1fr; padding: 12px 10px; } .aside--right { display: none; } } .aside--left, .aside--right { position: sticky; top: calc(var(--header-h) + 16px); } .island { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 16px; } /* ---------- Left nav ---------- */ .nav-menu { display: flex; flex-direction: column; gap: 2px; } .nav-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-soft); font-weight: 500; font-size: 14px; } .nav-menu__item:hover { background: var(--surface-2); text-decoration: none; color: var(--text); } .nav-menu__item--active { background: var(--accent-soft); color: var(--accent); } .nav-menu__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* ---------- Feed sorting tabs ---------- */ .feed-sorting { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; } .tabs { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .tabs__tab { padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-soft); border: 0; background: transparent; cursor: pointer; font-family: var(--font); } .tabs__tab--active { background: var(--accent); color: #fff; } /* ---------- Hero ---------- */ .hero { background: linear-gradient(120deg, #ff543a, #ff8a4c); color: #fff; border-radius: var(--radius); padding: 30px 28px; margin-bottom: 18px; box-shadow: var(--shadow); } .hero h1 { font-size: 28px; line-height: 1.2; margin-bottom: 8px; } .hero p { margin: 0; opacity: .95; font-size: 15px; max-width: 640px; } /* ---------- Entry card ---------- */ .content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 14px; transition: box-shadow .15s, transform .15s; } .content:hover { box-shadow: var(--shadow-hover); } .content-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .author { display: flex; align-items: center; gap: 10px; } .author__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#ffd0c4,#ff543a); flex: none; overflow: hidden; } .author__avatar img { width: 100%; height: 100%; object-fit: cover; } .author__name { font-weight: 600; font-size: 14px; color: var(--text); } .author__details { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mute); flex-wrap: wrap; } .content-header__topic { color: var(--accent); font-weight: 500; } .content__body { cursor: pointer; display: block; color: inherit; } .content__body:hover { text-decoration: none; } .block-wrapper--media { margin: 0 0 12px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); } .block-wrapper--media img { width: 100%; height: 220px; object-fit: cover; } .content-title { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--text); } .content__body:hover .content-title { color: var(--accent); } .content__excerpt { color: var(--text-soft); font-size: 15px; margin: 0; } .content-footer { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .content-footer-button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--text-soft); cursor: pointer; font-family: var(--font); transition: .15s; } .content-footer-button:hover { background: var(--surface-2); color: var(--text); } .content-footer-button--active { color: var(--accent); border-color: var(--accent); } .content-footer__spacer { flex: 1; } /* ---------- Right column widgets ---------- */ .widget__title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-mute); margin: 0 0 12px; font-weight: 700; } .news-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: flex-start; } .news-item:last-child { border-bottom: 0; } .news-item__num { color: var(--accent); font-weight: 700; font-size: 15px; min-width: 18px; } .news-item__title { font-size: 14px; color: var(--text); line-height: 1.35; } .news-item__title:hover { color: var(--accent); } .mini-blog { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .mini-blog__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#ffd0c4,#ff543a); flex: none; } .mini-blog__name { font-weight: 600; font-size: 14px; } .mini-blog__subs { font-size: 12px; color: var(--text-mute); } .tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--text-soft); } .tag:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; } /* Weather / currency widgets (functional hooks) */ .widget-loading { font-size: .75rem; color: var(--text-mute); } .weather-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .weather-icon { font-size: 26px; } .weather-temp { font-weight: 700; font-size: 16px; } .weather-desc { font-size: 12px; color: var(--text-mute); } .currency-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px dashed var(--border); } .currency-row:last-child { border-bottom: 0; } .currency-pair { color: var(--text-soft); } .currency-rate { font-weight: 600; } /* Subscribe */ .subscribe-card h4 { margin: 0 0 6px; font-size: 15px; } .subscribe-card p { font-size: 13px; color: var(--text-soft); margin: 0 0 10px; } .subscribe-card form { display: flex; gap: 6px; flex-direction: column; } .subscribe-card input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-family: var(--font); font-size: 14px; background: var(--surface); color: var(--text); } .subscribe-card button { border: 0; background: var(--accent); color: #fff; border-radius: var(--radius-sm); padding: 9px; font-weight: 500; cursor: pointer; font-family: var(--font); } .subscribe-ok { display: none; color: var(--accent); font-size: 13px; font-weight: 600; margin-top: 8px; } /* Ad banners */ .ad-banner { background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 20px; text-align: center; color: var(--text-mute); margin-bottom: 14px; } .ad-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-mute); margin-bottom: 4px; } /* ---------- Article page ---------- */ .article-page { max-width: 760px; margin: 0 auto; } .article-page .content { padding: 0; overflow: hidden; } .article-hero { width: 100%; height: 380px; object-fit: cover; } .article-inner { padding: 24px 28px; } .article-h1 { font-size: 32px; line-height: 1.2; margin: 0 0 12px; font-weight: 800; } .article-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; color: var(--text-mute); font-size: 13px; } .article-body { font-size: 17px; line-height: 1.75; color: var(--text); } .article-body h2 { font-size: 23px; margin: 28px 0 10px; line-height: 1.3; } .article-body h3 { font-size: 19px; margin: 22px 0 8px; } .article-body p { margin: 0 0 16px; } .article-body blockquote { border-left: 3px solid var(--accent); margin: 20px 0; padding: 8px 18px; color: var(--text-soft); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; } .article-body li { margin-bottom: 6px; } .article-body pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; overflow: auto; font-size: 14px; } .article-body code { background: var(--surface-2); padding: 2px 6px; border-radius: 5px; font-size: 14px; } .article-body img { border-radius: var(--radius-sm); margin: 8px 0; } .article-body .article-image, .article-body .article-video { margin: 18px 0; } .article-body .article-image img { width: 100%; border-radius: var(--radius-sm); } .article-body .img-caption, .article-body .video-caption { font-size: 13px; color: var(--text-mute); text-align: center; margin-top: 6px; } .article-body .callout { border-radius: var(--radius-sm); padding: 14px 16px; margin: 18px 0; border: 1px solid var(--border); } .article-body .callout-warn { background: #fff8e6; border-color: #ffe08a; } .article-body .callout-tip { background: var(--accent-soft); border-color: #ffc4ba; } .article-body .callout-label { font-weight: 700; font-size: 13px; display: block; margin-bottom: 4px; } .article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; } .reactions { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; } /* ---------- Comments ---------- */ .comments { margin-top: 30px; border-top: 1px solid var(--border); padding-top: 20px; } .comment { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); } .comment:first-of-type { border-top: 0; } .comment__avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#ffd0c4,#ff543a); flex: none; } .comment__name { font-weight: 600; font-size: 14px; } .comment__text { font-size: 15px; color: var(--text-soft); margin: 2px 0 0; } .comment-form { display: flex; gap: 10px; margin: 16px 0; } .comment-form textarea { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; font-family: var(--font); font-size: 14px; resize: vertical; min-height: 64px; background: var(--surface); color: var(--text); } /* ---------- Category hero ---------- */ .cat-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow); } .cat-hero__icon { width: 56px; height: 56px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; font-size: 28px; flex: none; } .cat-hero__title { font-size: 24px; font-weight: 800; } .cat-hero__desc { color: var(--text-soft); margin: 4px 0 0; font-size: 14px; } /* ---------- Search ---------- */ .search-hero { display: flex; gap: 10px; margin-bottom: 18px; } .search-hero input { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 16px; font-family: var(--font); background: var(--surface); color: var(--text); } .search-result { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); } .search-result__title { font-size: 18px; font-weight: 600; } .search-result__snippet { color: var(--text-soft); font-size: 14px; margin: 6px 0 0; } /* ---------- Author card ---------- */ .author-card { text-align: center; } .author-card__avatar { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 12px; background: linear-gradient(135deg,#ffd0c4,#ff543a); overflow: hidden; } .author-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .author-card__name { font-size: 20px; font-weight: 800; } .author-card__bio { color: var(--text-soft); font-size: 14px; margin: 8px 0 14px; } .author-card__stats { display: flex; justify-content: center; gap: 20px; margin-bottom: 14px; } .author-card__stat b { display: block; font-size: 18px; } .author-card__stat span { font-size: 12px; color: var(--text-mute); } /* ---------- Auth page ---------- */ .auth-page { max-width: 440px; margin: 40px auto; padding: 0 16px; } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); } .auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; } .auth-tab { flex: 1; padding: 10px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--text-soft); } .auth-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } .auth-form { display: none; } .auth-form.active { display: block; } .auth-form h2 { font-size: 20px; margin-bottom: 4px; } .auth-desc { color: var(--text-soft); font-size: 14px; margin: 0 0 16px; } .auth-form label { display: block; font-size: 13px; color: var(--text-soft); margin: 10px 0 4px; } .auth-form input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; font-family: var(--font); font-size: 14px; background: var(--surface); color: var(--text); } .auth-submit { width: 100%; margin-top: 16px; border: 0; background: var(--accent); color: #fff; border-radius: var(--radius-sm); padding: 12px; font-weight: 600; cursor: pointer; font-family: var(--font); font-size: 15px; } .auth-submit:hover { background: #e8432b; } .auth-error { display: none; color: #e8432b; font-size: 13px; margin-top: 10px; background: var(--accent-soft); padding: 8px 12px; border-radius: var(--radius-sm); } .auth-success { display: none; color: var(--accent); font-size: 14px; font-weight: 600; margin-top: 12px; background: var(--accent-soft); padding: 10px 14px; border-radius: var(--radius-sm); } .oauth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-mute); font-size: 13px; } .oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .oauth-buttons { display: flex; flex-direction: column; gap: 10px; } .oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 500; transition: .15s; } .oauth-btn:hover { background: var(--surface-2); } .oauth-btn .oauth-icon { font-size: 18px; } /* ---------- Account page ---------- */ .account-page { max-width: 520px; margin: 40px auto; padding: 0 16px; } .account-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); } .account-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .account-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg,#ffd0c4,#ff543a); display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 700; flex: none; } .account-info h3 { font-size: 20px; } .account-info p { color: var(--text-mute); font-size: 14px; margin: 2px 0 0; } .account-section { padding: 16px 0; border-top: 1px solid var(--border); } .account-section h4 { font-size: 15px; margin-bottom: 12px; } .account-section label { display: block; font-size: 13px; color: var(--text-soft); margin: 8px 0 4px; } .account-section input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; font-family: var(--font); font-size: 14px; background: var(--surface); color: var(--text); } .account-btn { border: 0; background: var(--accent); color: #fff; border-radius: var(--radius-sm); padding: 11px 18px; font-weight: 600; cursor: pointer; font-family: var(--font); font-size: 14px; margin-top: 10px; } .account-btn.danger { background: transparent; color: #e8432b; border: 1px solid #e8432b; } .account-btn.danger:hover { background: var(--accent-soft); } /* ---------- Footer ---------- */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: 30px; padding: 34px 16px 20px; } .footer-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; } .footer-brand .logo-text { font-size: 20px; font-weight: 800; color: var(--accent); } .footer-brand p { color: var(--text-soft); font-size: 14px; max-width: 320px; } .footer-col h4 { font-size: 14px; margin-bottom: 12px; } .footer-col a { display: block; color: var(--text-soft); font-size: 14px; padding: 4px 0; } .footer-col a:hover { color: var(--accent); } .footer-bottom { max-width: var(--maxw); margin: 24px auto 0; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; font-size: 13px; color: var(--text-mute); flex-wrap: wrap; gap: 10px; } .footer-socials { display: flex; gap: 12px; margin-top: 10px; } .footer-socials a { color: var(--text-soft); font-size: 16px; } @media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr 1fr; } } /* ---------- Back to top ---------- */ .back-top { position: fixed; right: 18px; bottom: 74px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 20px; color: var(--text-soft); opacity: 0; pointer-events: none; transition: .2s; z-index: 48; } .back-top.visible { opacity: 1; pointer-events: auto; } .back-top:hover { color: var(--accent); text-decoration: none; } /* ---------- Mobile bottom tabbar ---------- */ .bar--bottom { display: none; } @media (max-width: 760px) { .bar--bottom { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--border); height: 56px; justify-content: space-around; align-items: center; padding-bottom: env(safe-area-inset-bottom); } .tabbar__item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-mute); font-size: 10px; flex: 1; padding: 6px 0; } .tabbar__item--active { color: var(--accent); } .tabbar__icon { font-size: 18px; } body { padding-bottom: 56px; } } /* Google translate hidden widget */ #google_translate_element { display: none; } .goog-te-banner-frame { display: none !important; } body { top: 0 !important; }