/* ============================================================ 云创空间官网 —— 版式方向扩展样式 + 科技感细节建立在 site.css（模板基础）与设计系统 token 之上。 ============================================================ */ /* 版式方向通过切换 */ /* 密度通过 --density-scale 微调 section 间距 */ :root { --density-scale: 1; } .yc-section { padding: calc(var(--section-y) * var(--density-scale)) 0; } /* ---------- 通用网格补充 ---------- */ .yc-grid--2 { grid-template-columns: repeat(2, 1fr); } .yc-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .yc-grid--4 { grid-template-columns: 1fr 1fr; } .yc-grid--2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .yc-grid--4 { grid-template-columns: 1fr; } } /* ---------- 科技感：点阵底纹工具 ---------- */ .yc-dotgrid { background-image: radial-gradient(var(--hairline-2) 1px, transparent 1.4px); background-size: 22px 22px; background-position: -1px -1px; } /* 单字 mono 眉标（科技方向） */ .yc-eyebrow--mono { font-family: var(--font-mono, ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace); font-feature-settings: "tnum" 1; } /* ============================================================ 方向二 · 科技 —— 居中 Hero + 点阵 + 节点连线 ============================================================ */ .yc-hero--tech { position: relative; padding: var(--space-24) 0 var(--space-20); background: radial-gradient(80% 60% at 50% -10%, var(--gold-050) 0%, transparent 60%), var(--white); overflow: hidden; } .yc-hero--tech::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(var(--hairline-2) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%); opacity: .6; } .yc-hero--tech .yc-hero__center { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; } .yc-hero--tech .yc-hero__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(40px, 6vw, var(--fs-display)); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: var(--space-4) 0 var(--space-5); } .yc-hero--tech .yc-hero__lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: var(--lh-normal); max-width: 38em; margin: 0 auto; } .yc-hero--tech .yc-hero__actions { justify-content: center; } /* 能力 chips */ .yc-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: var(--space-10); } .yc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-2); background: var(--white); font-size: 13px; font-weight: 600; color: var(--ink-700); box-shadow: var(--shadow-sm); } .yc-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); } /* 节点连线条带 */ .yc-nodes { position: relative; z-index: 1; margin-top: var(--space-16); display: flex; align-items: center; justify-content: center; gap: 0; } .yc-node { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--hairline-2); box-shadow: var(--shadow-sm); color: var(--gold-700); } .yc-node i { width: 24px; height: 24px; } .yc-node-link { width: clamp(28px, 6vw, 72px); height: 2px; background: linear-gradient(90deg, var(--gold-100), var(--gold-500), var(--gold-100)); } /* ============================================================ 方向三 · 编辑 —— 左对齐巨标题 + 编号列表 ============================================================ */ .yc-hero--editorial { padding: var(--space-24) 0 var(--space-16); background: var(--white); } .yc-hero--editorial .yc-hero__inner { display: block; } .yc-hero--editorial .yc-hero__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(48px, 8vw, 88px); line-height: 1.02; letter-spacing: var(--ls-tight); margin: var(--space-5) 0 var(--space-6); max-width: 14ch; } .yc-hero--editorial .yc-hero__lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: var(--lh-normal); max-width: 36em; } .yc-hero--editorial .yc-hero__actions { margin-top: var(--space-8); } /* 凭证/经营范围条带 */ .yc-credstrip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-16); border-top: 1px solid var(--hairline); } .yc-cred { padding: var(--space-6) var(--space-6) 0 0; } .yc-cred + .yc-cred { border-left: 1px solid var(--hairline); padding-left: var(--space-6); } .yc-cred__k { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 12px; letter-spacing: .14em; color: var(--gold-700); } .yc-cred__v { display: block; margin-top: 8px; font-size: 15px; color: var(--ink-700); font-weight: 500; line-height: 1.5; } @media (max-width: 900px) { .yc-credstrip { grid-template-columns: 1fr 1fr; } .yc-cred:nth-child(3) { border-left: none; padding-left: 0; } } @media (max-width: 560px) { .yc-credstrip { grid-template-columns: 1fr; } .yc-cred + .yc-cred { border-left: none; padding-left: 0; } } /* 编号服务列表 */ .yc-servlist { margin-top: var(--space-12); border-top: 1px solid var(--hairline); } .yc-servrow { display: grid; grid-template-columns: 96px 1.1fr 1.3fr auto; align-items: center; gap: var(--space-6); padding: var(--space-8) 0; border-bottom: 1px solid var(--hairline); transition: background var(--dur-2, .16s) var(--ease-standard, cubic-bezier(.4,0,.2,1)); } .yc-servrow:hover { background: var(--gold-050); } .yc-servrow__idx { font-family: var(--font-serif); font-size: 40px; font-weight: 700; color: var(--gold-700); line-height: 1; } .yc-servrow__t { font-size: var(--fs-h3); font-weight: 700; color: var(--ink-900); margin: 0; } .yc-servrow__d { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; line-height: var(--lh-normal); } .yc-servrow__ic { width: 24px; height: 24px; color: var(--ink-400); justify-self: end; } .yc-servrow:hover .yc-servrow__ic { color: var(--gold-700); } @media (max-width: 768px) { .yc-servrow { grid-template-columns: 64px 1fr; row-gap: 8px; } .yc-servrow__idx { font-size: 30px; } .yc-servrow__d { grid-column: 2; } .yc-servrow__ic { display: none; } } /* ============================================================ 产品 —— 科技方向的非对称布局 ============================================================ */ .yc-prodgrid--asym { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: stretch; } .yc-prodgrid--asym .yc-product--feature { grid-row: span 2; } .yc-prodgrid--asym .yc-product--big { display: flex; flex-direction: column; justify-content: center; } @media (max-width: 900px) { .yc-prodgrid--asym { grid-template-columns: 1fr; } .yc-prodgrid--asym .yc-product--feature { grid-row: auto; } } /* 即将上线状态徽标 */ .yc-soon { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-500); } .yc-soon::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); } .yc-product__link--soon { color: var(--ink-400); } /* 关于 —— 科技/编辑方向的值横排 */ .yc-values-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-12); } @media (max-width: 900px) { .yc-values-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .yc-values-row { grid-template-columns: 1fr; } } /* about 居中（科技方向） */ .yc-about--center { display: block; text-align: center; max-width: 760px; margin: 0 auto; } .yc-about--center .yc-about__p { margin-left: auto; margin-right: auto; max-width: 44em; } /* 让模板的圆点占位 hero 卡片更具科技感（叠加细网格） */ .yc-hero__card { position: relative; overflow: hidden; } .yc-hero__card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 28px 28px; opacity: .5; -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%); mask-image: linear-gradient(135deg, #000, transparent 70%); } /* 移动端节点条带收紧 */ @media (max-width: 560px) { .yc-node { width: 46px; height: 46px; } .yc-node i { width: 20px; height: 20px; } } /* ---------- Tweak：标题字体（衬线/无衬线） ---------- */ body.display-sans .yc-hero__title, body.display-sans .yc-hero--tech .yc-hero__title, body.display-sans .yc-hero--editorial .yc-hero__title { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.025em; } /* ---------- Tweak：科技底纹开关 ---------- */ body.no-texture .yc-hero--tech::before, body.no-texture .yc-hero__card::after { display: none; } body.no-texture .yc-nodes { display: none; } /* ============================================================ 一屏一板块 —— 整屏高度，滚动强制吸附到下一页（不停在一半）关键：吸附口 = 视口 = 100vh = 板块高度（不缩 scroll-padding），内容垂直居中，顶部留白由半透明导航覆盖，吸附才能稳住整页。 ============================================================ */ /* 整屏分页由 JS（index.html 的 fullpage 滚轮接管）驱动：一次滚动直接翻一整页、不回弹、不停在一半。这里只负责让每个板块占满整屏并垂直居中。 */ @media (min-width: 1000px) { main > section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } main > section > .yc-container { width: 100%; } /* 适度上下内边距，保证内容装进一屏、翻页时不被截断（仍受「区块密度」微调） */ .yc-section, .yc-hero, .yc-hero--tech, .yc-hero--editorial { padding-block: calc(clamp(56px, 8vh, 104px) * var(--density-scale)); } } /* ------------------------------------------------------------ 矮屏适配：收紧 hero（最高的板块），保证它也 ≤ 一屏，这样强制吸附在首屏同样稳住、不会停在一半。 ------------------------------------------------------------ */ @media (min-width: 768px) and (max-height: 820px) { .yc-chips { margin-top: var(--space-6); } .yc-nodes { margin-top: var(--space-8); } } @media (min-width: 768px) and (max-height: 720px) { .yc-section, .yc-hero, .yc-hero--tech, .yc-hero--editorial { padding-block: clamp(32px, 5vh, 64px); } .yc-hero--tech .yc-hero__title, .yc-hero--editorial .yc-hero__title { font-size: clamp(32px, 6.4vh, 46px); } .yc-hero__lead { font-size: var(--fs-body); } .yc-hero--tech .yc-nodes { display: none; } .yc-chips { margin-top: var(--space-5); } .yc-credstrip { margin-top: var(--space-8); } }