/* ========================================================================== Global Proletarian Alliance · 全球无产阶级联盟 — 主站设计系统 ========================================================================== 说明： - 本文件是两页（index.html / index.en.html）共享的唯一样式表。 - 设计语言：现代、干净、无产阶级主题 —— 深红旗主色 + 中性底色。 - 浅/深两套主题由 切换（见 gpa.js）。 - 无需外部 CDN / 字体，全部为系统字体栈。 ========================================================================== */ /* ===== 1. Reset-lite ===== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; } img, picture, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ul[class] { list-style: none; padding: 0; } a { color: inherit; } /* ===== 2. 设计变量 ===== */ /* 间距刻度 */ :root { --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* 字号 */ --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* 行高 */ --leading-tight: 1.2; --leading-normal: 1.65; /* 容器 / 形状 */ --container: 1120px; --container-pad: clamp(1rem, 4vw, 2rem); --header-h: 4rem; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-full: 0; /* 直角：全方形 */ --transition: 160ms cubic-bezier(.4, 0, .2, 1); /* 字体 */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; } /* ===== 3. 配色主题 ===== */ /* -- Light（默认） -- */ :root { --bg: #fbfbf9; /* 页面底色，微暖近白 */ --bg-alt: #f2f2ee; /* 交替区块底色 */ --surface: #ffffff; /* 卡片表面 */ --text: #1c1917; /* 正文，暖黑 */ --text-muted: #6b6560; /* 次要文字 */ --border: #e6e3de; /* 分隔线 / 描边 */ --brand: #b3121b; /* 深红旗 主色 */ --brand-strong: #8a0e13; /* hover/按压加深 */ --brand-soft: #faeaea; /* 红色浅底（hero 光晕、badge 底色） */ --brand-contrast: #ffffff;/* 主色上的文字 */ --brand-slogan: #e60f1f; /* 标语滚动条：鲜红 */ --ring: rgba(179, 18, 27, .30); /* :focus-visible 外环 */ --shadow-soft: 0 1px 2px rgba(28, 25, 23, .05), 0 8px 24px rgba(28, 25, 23, .06); } /* -- Dark -- */ html[data-theme="dark"] { --bg: #141414; --bg-alt: #1b1b1b; --surface: #202020; --text: #ece9e4; --text-muted: #9b968f; --border: #33302c; --brand: #e04343; /* 深底上提亮，保证对比度 */ --brand-strong: #ff6b6b; --brand-soft: #2b1717; --brand-contrast: #ffffff; --brand-slogan: #ff2b33; /* 标语滚动条：深底提亮鲜红 */ --ring: rgba(224, 67, 67, .40); --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .4); } /* ===== 4. 基础排版 ===== */ html { color-scheme: light dark; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: 700; letter-spacing: -.01em; } ::selection { background: var(--brand); color: var(--brand-contrast); } :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ===== 5. 工具类 ===== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-4); top: -100%; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--brand); color: var(--brand-contrast); border-radius: var(--radius-sm); text-decoration: none; transition: top var(--transition); } .skip-link:focus { top: var(--space-4); } /* ===== 6. 站点头部 ===== */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--brand); /* 导航栏：红底 */ border-bottom: 1px solid var(--border); } /* 红底上的对比色（白字为主，hover 用金黄） */ .site-header .brand__text { color: #ffffff; } .site-header .brand__mark { background: #ffffff; } .site-header .brand__mark span { color: var(--brand); } .site-header .nav__link { color: #ffffff; } .site-header .nav__link:hover { color: #ffd84d; } .site-header .lang-switch { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); } .site-header .lang-switch__link { color: #ffffff; } .site-header .lang-switch__link:hover { color: #ffd84d; } .site-header .lang-switch__link.is-active { background: #ffffff; color: var(--brand); } .site-header .btn-header--primary { background: #ffffff; color: var(--brand); } .site-header .btn-header--primary:hover { background: #ffd84d; } .site-header .btn-header--ghost { border-color: rgba(255, 255, 255, .5); color: #ffffff; } .site-header .btn-header--ghost:hover { border-color: #ffffff; color: #ffd84d; } .site-header .theme-toggle { border-color: rgba(255, 255, 255, .5); color: #ffffff; } .site-header .theme-toggle:hover { border-color: #ffffff; } .site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-6); } /* 品牌：红方块 + GPA 字标 */ .brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 800; font-size: var(--text-lg); letter-spacing: .02em; text-decoration: none; white-space: nowrap; } .brand__mark { width: 26px; height: 26px; background: var(--brand); border-radius: var(--radius-sm); display: inline-block; flex: none; } .brand__mark span { display: block; width: 100%; height: 100%; font-size: 14px; line-height: 26px; text-align: center; color: var(--brand-contrast); font-family: var(--font-mono); font-weight: 700; } /* 主导航 */ .nav { display: flex; gap: var(--space-6); margin-inline: auto; } .nav__link { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; padding-block: var(--space-2); border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition); } .nav__link:hover { color: var(--text); border-color: var(--brand); } /* 头部右侧：语言切换（中文/EN/RU 分段控件）+ 主题按钮 */ .header-actions { display: flex; align-items: center; gap: var(--space-3); } .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); transition: border-color var(--transition); } .lang-switch:hover { border-color: var(--brand); } .lang-switch__link { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); line-height: 1; white-space: nowrap; transition: background var(--transition), color var(--transition); } .lang-switch__link:hover { color: var(--brand); } /* 当前语言：红底白字高亮 */ .lang-switch__link.is-active { background: var(--brand); color: var(--brand-contrast); } .lang-switch__link.is-active:hover { color: var(--brand-contrast); } .theme-toggle { width: 36px; height: 36px; display: grid; place-items: center; font-size: var(--text-base); border: 1px solid var(--border); border-radius: var(--radius-full); transition: border-color var(--transition), background var(--transition); } .theme-toggle:hover { border-color: var(--brand); } /* 页头 CTA 按钮：加入联盟（红）+ 列宁文库跳转（描边），仿 comparty.by 页头按钮 */ .btn-header { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); white-space: nowrap; transition: background var(--transition), border-color var(--transition), color var(--transition); } .btn-header--primary { background: var(--brand); color: var(--brand-contrast); } .btn-header--primary:hover { background: var(--brand-strong); } .btn-header--ghost { border: 1px solid var(--border); color: var(--text); } .btn-header--ghost:hover { border-color: var(--brand); color: var(--brand); } /* ===== 7. Hero ===== */ .hero { position: relative; padding-block: var(--space-24) var(--space-16); text-align: center; overflow: hidden; } /* 品牌红光晕 */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(600px 300px at 50% -40px, var(--brand-soft), transparent 70%); pointer-events: none; } /* 标语滚动条：多行名言，一直向左匀速滚动 */ .hero__ticker { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: space-evenly; overflow: hidden; pointer-events: none; user-select: none; } .hero__ticker-row { overflow: hidden; white-space: nowrap; } .hero__ticker-track { display: inline-flex; align-items: center; width: max-content; /* 轨道宽=内容宽，-16.6667% 正好左移一组 */ gap: clamp(2rem, 5vw, 4rem); padding-inline: 2rem; font-size: clamp(.875rem, 1.8vw, 1.125rem); font-weight: 700; letter-spacing: .02em; color: var(--brand-slogan); will-change: transform; animation: ticker-scroll 18s linear infinite; } /* 各行不同恒速，错落有纵深；如需完全同步，把三行 duration 改成相同即可 */ .hero__ticker-row:nth-child(2) .hero__ticker-track { animation-duration: 24s; } .hero__ticker-row:nth-child(3) .hero__ticker-track { animation-duration: 30s; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-16.6667%); } /* 左移一组后无缝跳回，保持一直向左 */ } .ticker-dot { flex: none; width: .5em; height: .5em; background: var(--brand-slogan); border-radius: 2px; } /* 标语条目：中文主行 + 俄文/作者副行（中文页用），居中排布 */ .ticker-item { display: block; text-align: center; line-height: 1.4; } .ticker-item__sub { display: block; margin-top: .25em; font-size: .76em; font-weight: 600; letter-spacing: .02em; opacity: .8; } /* 标题/副标题/按钮的取景框：半透明磨砂底 + 红边，与背景滚动名言隔开 */ .hero__inner { position: relative; z-index: 1; max-width: min(760px, 100%); margin-inline: auto; padding-block: var(--space-8); background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Hero 横幅区：旗帜图片 + 介绍 置于标语滚动条之上（z-index:1），不透明表面把身后的标语遮住，避免混图 */ .hero__banner { position: relative; z-index: 1; margin-top: var(--space-8); max-width: min(860px, 100%); } .hero__banner-figure { margin: 0; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border)); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); } .hero__banner-img { display: block; width: 100%; height: auto; } .hero__banner-caption { padding: var(--space-4) var(--space-6) var(--space-5); font-size: var(--text-sm); line-height: 1.7; color: var(--text-muted); text-align: center; border-top: 1px solid var(--border); } /* 关键词大字横幅（仿 НАРОДОВЛАСТИЕ / СОЦИАЛИЗМ / СПРАВЕДЛИВОСТЬ） */ .keywords { background: color-mix(in srgb, var(--brand-soft) 55%, var(--bg)); border-block: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border)); padding-block: var(--space-12); } .keywords__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(var(--space-6), 6vw, var(--space-16)); } .keywords__item { font-size: clamp(2.5rem, 9vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--brand-slogan); text-align: center; } .keywords__sep { flex: none; width: .55em; height: .55em; background: var(--brand); border-radius: 2px; } .hero__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--space-6); } .hero__title { font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); max-width: 18ch; margin-inline: auto; } .hero__subtitle { margin-top: var(--space-6); font-size: var(--text-lg); color: var(--text-muted); max-width: 46ch; margin-inline: auto; } .hero__actions { margin-top: var(--space-10, 2.5rem); display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; } /* ===== 8. 按钮 ===== */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-md); text-decoration: none; transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition); } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--brand); color: var(--brand-contrast); } .btn--primary:hover { background: var(--brand-strong); } .btn--ghost { border: 1px solid var(--border); color: var(--text); } .btn--ghost:hover { border-color: var(--brand); color: var(--brand); } /* ===== 9. 区块 ===== */ .section { padding-block: var(--space-16); } .section--alt { background: var(--bg-alt); } .section__header { margin-bottom: var(--space-12); } .section__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--space-4); } .section__title { font-size: var(--text-3xl); text-transform: uppercase; /* 全大写，仿 comparty.by 的 О ПАРТИИ 风格 */ letter-spacing: .02em; } /* 标题下红条装饰 */ .section__title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: var(--space-4); background: var(--brand); border-radius: 2px; } .section__lede { margin-top: var(--space-4); color: var(--text-muted); max-width: 60ch; } /* ===== 10. 关于区块（双栏） ===== */ .about { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-12); align-items: start; } .about__body p + p { margin-top: var(--space-4); } .key-list { padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); } .key-list__item { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); font-size: var(--text-sm); } .key-list__item:last-child { border-bottom: none; } .key-list__marker { flex: none; width: 8px; height: 8px; margin-top: .5em; background: var(--brand); border-radius: 2px; } /* ===== 10.5 要闻双栏（左头条 + 右动态流，仿 comparty.by 新闻区） ===== */ .news-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-8); align-items: start; } .news-card { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .news-card:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 12px 32px rgba(28, 25, 23, .12); } .news-card__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--brand-soft); } .news-card__body { padding: var(--space-6); } .news-card__date { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); } .news-card__title { font-size: var(--text-xl); color: var(--text); transition: color var(--transition); } .news-card:hover .news-card__title { color: var(--brand); } .news-feed { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .news-feed__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); } .news-feed__item:last-child { border-bottom: none; } .news-feed__date { font-size: var(--text-xs); color: var(--text-muted); } .news-feed__link { font-size: var(--text-sm); font-weight: 600; color: var(--text); text-decoration: none; transition: color var(--transition); } .news-feed__link:hover { color: var(--brand); } /* ===== 11. 语言区卡片网格 ===== */ .region-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); } .region-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } /* 已上线区：红色顶条 + hover 上浮 */ .region-card--active { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); } .region-card--active::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .region-card--active:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(28, 25, 23, .1); border-color: var(--brand); } /* 未上线区：灰字 + 虚线描边 */ .region-card--soon { background: transparent; border-style: dashed; color: var(--text-muted); } .region-card__code { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .18em; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-full); align-self: flex-start; } .region-card--active .region-card__code { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand); } .region-card__name { font-size: var(--text-xl); margin-top: var(--space-2); } .region-card__desc { font-size: var(--text-sm); color: var(--text-muted); flex: 1; } .region-card__status { margin-top: var(--space-2); } .region-card__link { margin-top: var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--brand); text-decoration: none; transition: color var(--transition); } .region-card__link:hover { color: var(--brand-strong); } /* ===== 12. 徽章 ===== */ .badge { display: inline-block; font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--brand); color: var(--brand-contrast); } .badge--soon { background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border); } /* ===== 13. 页脚 ===== */ .site-footer { margin-top: var(--space-16); border-top: 1px solid var(--border); padding-block: var(--space-12); background: var(--bg-alt); } .site-footer__inner { display: flex; flex-direction: column; gap: var(--space-6); align-items: center; text-align: center; } .footer-nav { display: flex; gap: var(--space-8); flex-wrap: wrap; justify-content: center; } .footer-nav a { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; transition: color var(--transition); } .footer-nav a:hover { color: var(--brand); } .footer-copy { font-size: var(--text-xs); color: var(--text-muted); } /* ===== 14. 响应式 ===== */ @media (max-width: 720px) { .site-header__inner { gap: var(--space-3); } /* 页头加了 CTA 按钮，小屏折叠导航 */ .nav { display: none; } .brand__text { font-size: var(--text-base); } .lang-switch__link { padding-inline: var(--space-2); } .btn-header { padding-inline: var(--space-3); font-size: .72rem; } .hero { padding-block: var(--space-16) var(--space-12); } .hero__title { font-size: var(--text-3xl); } .about { grid-template-columns: 1fr; gap: var(--space-8); } .news-grid { grid-template-columns: 1fr; } .keywords__inner { gap: var(--space-8); } .keywords__item { font-size: clamp(2rem, 14vw, 3rem); } .region-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* 更小屏：只留「加入联盟」主按钮 */ .btn-header--ghost { display: none; } } /* 减弱动效偏好 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }