/* ============================================================ ARGX 官网首页 —— 深色主题 ------------------------------------------------------------ 版式与取值来自 design/prototype/index.html（视觉真源）。 token 从 ../design/tokens.css 取，本文件不定义任何色值/间距字面量。 主题： 由 tokens.css 提供深色变量。 ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } html { scroll-behavior: smooth } body { background: var(--bg-app); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-lg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { text-decoration: none; color: inherit } button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit } a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm) } /* ============================================================ 1. 背景层 —— 单点冷调柔光 + 四角收敛 + 88px 网格 + 4.5% 噪点 全静态：零 rAF、零 canvas、零彩色渐变（配色方案 §6） ============================================================ */ .bg { position: fixed; inset: 0; z-index: var(--z-base); pointer-events: none; overflow: hidden; background: var(--bg-app); } /* 唯一一处光：顶部中央一束冷调柔光，像顶灯打在墙上 */ .bg-light { position: absolute; left: 50%; top: -38%; width: 150%; height: 108%; transform: translateX(-50%); background: radial-gradient(58% 56% at 50% 50%, rgba(228, 232, 238, .115), transparent 72%), radial-gradient(34% 34% at 50% 50%, rgba(238, 241, 245, .075), transparent 78%); } /* 光锥底部一条极淡的水平切线，给光一个落点 */ .bg-light::after { content: ""; position: absolute; left: 50%; bottom: 6%; width: min(62vw, 760px); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .075) 30%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .075) 70%, transparent); } /* 88px 细网格，径向 mask 收敛到中心 */ .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, .024) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .024) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(ellipse 82% 58% at 50% 28%, #000 6%, transparent 76%); mask-image: radial-gradient(ellipse 82% 58% at 50% 28%, #000 6%, transparent 76%); } /* 噪点：唯一的「材质」层，把大平面从死板纯色里救出来 */ .bg-noise { position: absolute; inset: 0; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 四角收敛：压住中心，注意力留在内容上 */ .bg-vignette { position: absolute; inset: 0; background: radial-gradient(128% 104% at 50% 42%, transparent 42%, rgba(0, 0, 0, .52) 100%), linear-gradient(180deg, rgba(0, 0, 0, .46) 0%, transparent 20%), linear-gradient(0deg, rgba(0, 0, 0, .50) 0%, transparent 24%); } /* ============================================================ 2. 开场动画层（首访播放 · 可跳过） ------------------------------------------------------------ 三词**永远在页面正中央原位替换**，不位移、不堆叠。 层内除三词与跳过按钮外**没有任何其他元素**——这是硬要求 （ARGX-04 §4.3：动画期间文字以外的元素不显示）。 ============================================================ */ #intro { position: fixed; inset: 0; z-index: var(--z-intro); background: var(--bg-app); display: grid; place-items: center; overflow: hidden; cursor: pointer; transition: opacity var(--dur-reveal) var(--ease-reveal), visibility var(--dur-reveal); } #intro.done { opacity: 0; visibility: hidden; pointer-events: none } /* 开场期间：页面主体与背景层一并从视觉上移除（避免一闪而过） */ body.intro-open .page-shell { visibility: hidden } body.intro-open .bg { visibility: hidden } body.intro-open { overflow: hidden } .intro-stage { position: relative; display: grid; place-items: center; width: 100%; height: 1.06em; font-size: clamp(54px, 9.2vw, 108px); line-height: 1.06; } .intro-word { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; line-height: 1.06; white-space: nowrap; font-size: inherit; font-weight: 800; letter-spacing: -.045em; color: var(--text-primary); opacity: 0; transform: translate(-50%, -50%) translateY(14px) scale(.985); transition: opacity var(--dur-intro-word) var(--ease-reveal), transform var(--dur-intro-word) var(--ease-reveal), color var(--dur-intro-word) var(--ease-out); will-change: opacity, transform; } .intro-word.on { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1) } /* 已过的词原地淡出、微微收缩 —— 不位移、不堆叠 */ .intro-word.past { opacity: 0; transform: translate(-50%, -50%) scale(.972); color: #585D65 } /* 逐字：每个字有自己的延迟，整词不是一块整体推上来 */ .intro-word .ch { display: inline-block; opacity: 0; transform: translateY(.3em); filter: blur(6px); transition: opacity var(--dur-intro-char) var(--ease-reveal), transform var(--dur-intro-char) var(--ease-reveal), filter var(--dur-intro-char) var(--ease-reveal); } .intro-word.on .ch { opacity: 1; transform: translateY(0); filter: blur(0) } /* 当前词底部扫过的一道光（中性白，不用彩色） */ .intro-word.on::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -.06em; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent); transform: scaleX(0); transform-origin: 50% 50%; animation: introUnderline 900ms var(--ease-out) 240ms forwards; } @keyframes introUnderline { 0% { transform: scaleX(0); opacity: 0 } 40% { opacity: 1 } 100% { transform: scaleX(1); opacity: .42 } } /* 跳过：开场期间唯一的其他元素 */ .intro-skip { position: absolute; bottom: var(--space-12); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-tertiary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid transparent; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .intro-skip:hover { color: var(--text-primary); border-color: var(--border-strong); background: rgba(255, 255, 255, .04); } .intro-skip kbd { font-family: var(--font-mono); font-size: var(--text-3xs); padding: 1px 5px; border-radius: var(--radius-xs); background: rgba(255, 255, 255, .07); border: 1px solid var(--border-default); color: var(--text-tertiary); } /* 首屏内容：由首帧脚本按需展开，避免闪一下再收起 */ .page-shell { position: relative; z-index: 1; visibility: hidden } body.ready .page-shell { visibility: visible } /* ============================================================ 3. 顶部导航（透明 → 滚动后吸附 + 毛玻璃） ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-8); border-bottom: 1px solid transparent; transition: background-color var(--dur-normal) var(--ease-out), backdrop-filter var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out); } .nav.scrolled { background: rgba(10, 11, 13, .70); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-bottom-color: var(--border-subtle); } .nav-brand { display: flex; align-items: center; gap: var(--space-3) } .brand-mark { width: 30px; height: 30px; border-radius: 9px; flex: none; border: 1.5px solid var(--text-primary); display: grid; place-items: center; font-size: var(--text-sm); font-weight: 800; transform: rotate(45deg); position: relative; transition: transform var(--dur-normal) var(--ease-out); } .brand-mark span { transform: rotate(-45deg) } .brand-mark:hover { transform: rotate(45deg) scale(1.06) } .nav-word { font-weight: 700; font-size: 17px; letter-spacing: -.01em } .nav-chip { font-size: var(--text-2xs); font-weight: 500; color: var(--text-tertiary); padding: 2px 9px; border-radius: var(--radius-full); border: 1px solid var(--border-default); background: rgba(255, 255, 255, .03); } .nav-center { display: flex; align-items: center; gap: var(--space-1); position: absolute; left: 50%; transform: translateX(-50%); } .nav-link { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--text-base); font-weight: 500; transition: background-color var(--dur-micro) ease-out, color var(--dur-micro) ease-out; } .nav-link:hover { background: rgba(255, 255, 255, .055); color: var(--text-primary) } .nav-right { display: flex; align-items: center; gap: var(--space-3) } /* ============================================================ 4. 按钮（深色主题：主/幽灵/亮色三变体） ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-base); font-weight: 500; line-height: 1; white-space: nowrap; border-radius: var(--radius-full); transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn--sm { height: 32px; padding: 0 var(--space-4); font-size: var(--text-sm) } .btn--md { height: 38px; padding: 0 var(--space-5) } .btn--lg { height: 46px; padding: 0 var(--space-6); font-size: var(--text-md); gap: var(--space-3) } .btn--primary { background: linear-gradient(180deg, #3B7BF0, #2563EB); color: #fff; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .16); } .btn--primary:hover { background: linear-gradient(180deg, #4A87F3, #2E6BEE); transform: translateY(-1px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .20); } .btn--primary:active { transform: translateY(0) } .btn--ghost { background: rgba(255, 255, 255, .045); color: var(--text-primary); border: 1px solid var(--border-default); box-shadow: var(--inner-top); } .btn--ghost:hover { background: rgba(255, 255, 255, .085); border-color: var(--border-strong); transform: translateY(-1px); } .btn--ghost:active { transform: translateY(0) } .btn .arrow { transition: transform var(--dur-fast) var(--ease-out) } .btn:hover .arrow { transform: translateX(3px) } /* ============================================================ 5. Hero：左文案 + 规格条 / 右代码卡 ============================================================ */ .hero { min-height: 100vh; display: flex; align-items: center; padding: var(--space-32) var(--space-8) var(--space-24); max-width: var(--content-max); margin: 0 auto; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; width: 100%; } .hero-left { max-width: 34rem } .hero h1 { font-size: clamp(40px, 4.6vw, 62px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; margin-bottom: var(--space-6); } /* 强调：中性亮色 + 一道发丝下划线（不用彩色渐变文字） */ .hero h1 em { font-style: normal; color: #FFFFFF; background-image: linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12)); background-repeat: no-repeat; background-size: 100% 1.5px; background-position: 0 100%; padding-bottom: .06em; } .hero-body { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-10) } .hero-lead { font-size: 17px; line-height: 1.62; color: var(--text-secondary); max-width: 32rem; } .hero-lead strong { color: var(--text-primary); font-weight: 500 } .hero-lead--sub { font-size: var(--text-md) } .hero-cta { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8) } .hero-cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap } /* 规格条：三项真实参数，发丝线分隔 */ .hero-specs { display: flex; align-items: stretch; gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); max-width: 34rem; } .spec { display: flex; flex-direction: column; gap: 3px; min-width: 0 } .spec-k { font-size: 24px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 1px; } .spec-k small { font-size: var(--text-sm); font-weight: 600; color: var(--text-tertiary); letter-spacing: 0 } .spec-v { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); display: flex; flex-direction: column; gap: 1px; } .spec-v small { font-size: 10.5px; font-weight: 400; color: var(--text-tertiary); font-family: var(--font-mono) } .spec-div { width: 1px; background: var(--border-subtle); flex: none } /* 右栏：tab 在卡外 + 终端风代码卡 */ .hero-right { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0 } .code-tabs { display: inline-flex; gap: 2px; align-self: flex-start; padding: 3px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .045); border: 1px solid var(--border-default); box-shadow: var(--inner-top); } .code-tab { padding: 6px var(--space-4); border-radius: 7px; font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .code-tab:hover { color: var(--text-secondary) } .code-tab.act { background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-xs) } .terminal { border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(180deg, #101114, #0C0D0F); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg), var(--inner-top); transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); } .terminal:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xl), var(--inner-top); transform: translateY(-2px); } .terminal-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgba(255, 255, 255, .055); background: rgba(255, 255, 255, .014); } .terminal-bar .dots { display: flex; gap: 6px } .terminal-bar .dots i { width: 10px; height: 10px; border-radius: 50%; display: block } .terminal-bar .dots i:nth-child(1) { background: #FF5F57 } .terminal-bar .dots i:nth-child(2) { background: #FEBC2E } .terminal-bar .dots i:nth-child(3) { background: #28C840 } .terminal-bar .fname { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); margin-left: auto; } .terminal-body { padding: var(--space-5); position: relative } .term-line { display: flex; align-items: flex-start; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.85; } .term-line + .term-line { margin-top: 2px } .term-line.gap { margin-top: var(--space-3) } .term-line .prompt { color: var(--accent-400); flex: none } .term-line .cmd { color: #D8DCE4 } .term-line .cmt { color: #4A4F58 } .term-copy { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; align-items: center; gap: 5px; padding: 4px var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-2xs); color: var(--text-tertiary); background: rgba(255, 255, 255, .05); border: 1px solid var(--border-default); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .terminal:hover .term-copy, .term-copy:focus-visible { opacity: 1 } .term-copy:hover { color: var(--text-primary) } /* ============================================================ 6. 通用区块 ============================================================ */ .section { padding: var(--space-24) var(--space-8); position: relative } .section--tight { padding-top: 0 } .section-inner { max-width: var(--content-max); margin: 0 auto } .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); } .reveal.on { opacity: 1; transform: translateY(0) } .section-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-3); margin-bottom: var(--space-5); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); border: 1px solid var(--border-default); box-shadow: var(--inner-top); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); } .section h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.028em; line-height: 1.14; max-width: 22em; } .section h2 .dim { color: var(--text-tertiary) } /* ---- 能力三卡 ---- */ .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-12); } .fcard { position: relative; overflow: hidden; padding: var(--space-6); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .012)); border: 1px solid var(--border-default); box-shadow: var(--inner-top); transition: transform var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out); } .fcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px 200px at 50% 0%, rgba(91, 141, 239, .10), transparent 72%); opacity: 0; transition: opacity var(--dur-normal) var(--ease-out); } .fcard:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-md), var(--inner-top); } .fcard:hover::after { opacity: 1 } .fcard .num { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .08em; color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); } .fcard .num::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-default), transparent); } .fcard .glyph { height: 112px; margin-bottom: var(--space-5); border-radius: var(--radius-md); background: radial-gradient(180px 92px at 50% 100%, rgba(91, 141, 239, .08), transparent 76%), var(--bg-sunken); border: 1px solid var(--border-subtle); display: grid; place-items: center; overflow: hidden; position: relative; } .fcard h3 { font-size: 17px; font-weight: 600; letter-spacing: -.012em; margin-bottom: var(--space-3) } .fcard p { font-size: var(--text-base); line-height: 1.62; color: var(--text-secondary) } /* ---- 仓库卡：与 .fcard 共用同一套底，换成「仓库名 + 要点 + 按钮」 ---- */ .rcard { display: flex; flex-direction: column } .rcard .repo-name { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); margin-bottom: var(--space-2); } .rcard .repo-line { font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); margin-bottom: var(--space-5) } .rcard .repo-points { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-2); } .rcard .repo-points li { position: relative; padding-left: var(--space-4); font-size: var(--text-sm); line-height: 1.5; color: var(--text-tertiary); } .rcard .repo-points li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); } .rcard .btn { align-self: flex-start; margin-top: auto } .repo-foot { margin-top: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--text-tertiary) } /* ---- 双入口大按钮 ---- */ .gates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) } .gate { position: relative; overflow: hidden; padding: var(--space-10) var(--space-8); border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .009)); border: 1px solid var(--border-default); box-shadow: var(--inner-top); display: flex; flex-direction: column; transition: transform var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out); } .gate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(560px 260px at 50% 0%, rgba(91, 141, 239, .15), transparent 72%); opacity: 0; transition: opacity var(--dur-normal) var(--ease-out); } .gate:hover { transform: translateY(-4px); border-color: var(--accent-400); box-shadow: var(--shadow-lg), var(--inner-top); } .gate:hover::after { opacity: 1 } .gate .g-no { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .1em; color: var(--text-tertiary); margin-bottom: var(--space-5); } .gate h3 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin-bottom: var(--space-3) } .gate .desc { font-size: var(--text-md); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-8); } .gate .btn { align-self: flex-start; margin-top: auto } /* ============================================================ 7. 页脚 ============================================================ */ .footer { position: relative; z-index: 1; padding: var(--space-24) var(--space-8) var(--space-12); text-align: center; border-top: 1px solid var(--border-subtle); } .footer-brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: var(--text-xl); margin-bottom: var(--space-6); } .footer-brand .brand-mark { width: 26px; height: 26px; border-radius: 8px; font-size: var(--text-2xs) } .footer-links { margin-top: var(--space-8); display: flex; gap: var(--space-6); justify-content: center; flex-wrap: wrap; } .footer-links a { color: var(--text-tertiary); font-size: var(--text-sm); transition: color var(--dur-micro) ease-out } .footer-links a:hover { color: var(--text-primary) } .footer-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-disabled) } /* ============================================================ 8. prefers-reduced-motion（CSS 全局兜底；JS 那侧还会再判一次） ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* 开场层整层不显示，直接进入页面 */ #intro { display: none !important } body.intro-open { overflow: auto !important } body.intro-open .page-shell { visibility: visible !important } body.intro-open .bg { visibility: visible !important } .intro-word { opacity: 1 !important; transform: translate(-50%, -50%) !important } .intro-word .ch { opacity: 1 !important; transform: none !important; filter: none !important } .reveal { opacity: 1 !important; transform: none !important } } /* ============================================================ 9. 响应式（本阶段只做桌面端；这里只保证不出现横向滚动条） ============================================================ */ @media (max-width: 1100px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-12) } .hero { min-height: auto; padding-top: var(--space-24) } .cards3 { grid-template-columns: 1fr } } @media (max-width: 820px) { .nav-center { display: none } .gates { grid-template-columns: 1fr } .hero, .section { padding-left: var(--space-6); padding-right: var(--space-6) } } @media (max-width: 640px) { .intro-stage { font-size: clamp(46px, 15vw, 72px) } .intro-skip { bottom: var(--space-8) } }