/*
* Cassiopeia 用户样式（仅优化 Joomla 首页视觉，不涉及 /ai-generator 应用页）。
* 顶栏深色 + 毛玻璃导航：全站 body.site 生效。
* 整页深色 + 背景光晕：含 .zc-home-hero 的页面、Featured 首页（view-featured.com-content）、
* 或菜单项页面类 zc-joomla-home。标题若非 h1 可用 span.zc-home-title 包一层以应用渐变字。
* 大卡片右侧登录：.zc-home-hero__layout + {loadmoduleid}，见 deploy/joomla-home-hero-with-login.html。
* 快速入口：正式/开发可在 / zc-quick-link--dev 区分。
* 部署：sudo cp deploy/joomla-cassiopeia-user.css /var/www/html/media/templates/site/cassiopeia/css/user.css
*
* 清单核对（1–11）：样式在本文件；Footer HTML 见 deploy/joomla-footer-home.html；
* 第 9 条中「Main Menu / 我在哪里」若在 main-top 自定义模块内，首页会隐藏整块 main-top（可改模块位置或取消页面类）。
*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Sora:wght@500;600;700;800&display=swap");
/* ========== 全站基础（内页仍可阅读）========== */
body.site {
font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
-webkit-font-smoothing: antialiased;
}
body.site h1,
body.site h2,
body.site h3,
body.site .h1,
body.site .h2,
body.site .h3 {
font-family: "Sora", "DM Sans", sans-serif;
letter-spacing: -0.02em;
}
/* 顶栏：全站深邃底 + 粘性 + 导航区毛玻璃（解决首页仍显示白顶栏） */
body.site .header.container-header {
background: #0b0f19;
position: sticky;
top: 0;
z-index: 1030;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: none;
}
body.site .navbar-brand .brand-logo {
text-decoration: none;
transition: opacity 0.2s ease;
}
body.site .navbar-brand .brand-logo:hover {
opacity: 0.88;
}
body.site .site-description {
color: #9ca3af;
font-size: 0.9rem;
}
body.site .container-nav {
padding-top: 0.35rem;
padding-bottom: 0.5rem;
margin-left: clamp(8px, 2vw, 16px);
margin-right: clamp(8px, 2vw, 16px);
margin-bottom: 0.35rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}
body.site .container-nav .nav-link {
color: #e5e7eb;
}
body.site .container-nav .nav-link:hover,
body.site .container-nav .nav-link:focus {
color: #fff;
}
body.site .container-nav .nav-link.active {
color: #93c5fd;
}
/* ========== 顶栏导航槽：主菜单 + 登录/登出 同一行（模块需改到「menu」位置，见 deploy/joomla-header-menu-login.txt）========== */
body.site .header.container-header .container-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
}
/* 主菜单：dropdown / collapse 两种布局 */
body.site .header.container-header .container-nav > ul.mod-menu,
body.site .header.container-header .container-nav > nav.navbar {
flex: 1 1 auto;
min-width: 0;
margin-bottom: 0 !important;
}
body.site .header.container-header .container-nav > ul.mod-menu {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
width: 100%;
}
body.site .header.container-header .container-nav > ul.mod-menu > li.item-106 {
margin-left: auto;
}
body.site .header.container-header .container-nav > ul.mod-menu > li.item-106 > a {
border: 1px solid rgba(147, 197, 253, 0.35);
border-radius: 10px;
background: rgba(59, 130, 246, 0.12);
}
body.site .header.container-header .container-nav > ul.mod-menu > li.item-106 > a:hover,
body.site .header.container-header .container-nav > ul.mod-menu > li.item-106 > a:focus {
background: rgba(59, 130, 246, 0.2);
}
body.site .header.container-header .container-nav > nav.navbar .navbar-collapse {
flex-grow: 1;
}
body.site .header.container-header .container-nav .navbar-toggler {
border-color: rgba(255, 255, 255, 0.35);
color: #e5e7eb;
}
/* 登录表单 / 登出：靠右；小屏单独占一行 */
body.site .header.container-header .container-nav > form.mod-login,
body.site .header.container-header .container-nav > form.mod-login-logout {
flex: 0 0 auto;
margin-left: auto;
margin-bottom: 0;
}
@media (max-width: 991.98px) {
body.site .header.container-header .container-nav > form.mod-login,
body.site .header.container-header .container-nav > form.mod-login-logout {
flex: 1 1 100%;
margin-left: 0;
order: 12;
}
}
/* 顶栏内登录表单：深色底（与导航栏一致） */
body.site .header.container-header .container-nav .mod-login .form-control {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.22);
color: #f3f4f6;
}
body.site .header.container-header .container-nav .mod-login .form-control::placeholder {
color: #6b7280;
}
body.site .header.container-header .container-nav .mod-login .input-group-text {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.22);
color: #9ca3af;
}
body.site .header.container-header .container-nav .mod-login .btn-secondary {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
color: #e5e7eb;
}
body.site .header.container-header .container-nav .mod-login .form-check-label {
color: #d1d5db;
font-size: 0.875rem;
}
body.site .header.container-header .container-nav .mod-login .pretext,
body.site .header.container-header .container-nav .mod-login .posttext {
color: #9ca3af;
font-size: 0.8125rem;
}
body.site .header.container-header .container-nav .mod-login .btn-primary {
background: linear-gradient(to right, #2563eb, #3b82f6);
border: none;
color: #fff;
}
@media (min-width: 768px) {
body.site .header.container-header .container-nav .mod-login .userdata {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.5rem 0.65rem;
}
body.site .header.container-header .container-nav .mod-login .mod-login__username,
body.site .header.container-header .container-nav .mod-login .mod-login__password {
margin-bottom: 0;
}
body.site .header.container-header .container-nav .mod-login .mod-login__username .input-group,
body.site .header.container-header .container-nav .mod-login .mod-login__password .input-group {
min-width: 9rem;
max-width: 12rem;
}
body.site .header.container-header .container-nav .mod-login .mod-login__submit {
margin-bottom: 0;
}
}
/* 已登录：问候语 + 退出 */
body.site .header.container-header .container-nav .mod-login-logout {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1rem;
margin-bottom: 0;
}
body.site .header.container-header .container-nav .mod-login-logout .login-greeting {
margin: 0;
color: #e5e7eb;
font-size: 0.875rem;
}
body.site .header.container-header .container-nav .mod-login-logout .btn-primary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #f3f4f6;
padding: 0.35rem 0.85rem;
font-size: 0.875rem;
}
body.site .header.container-header .container-nav .mod-login-logout .btn-primary:hover {
background: rgba(255, 255, 255, 0.16);
color: #fff;
}
/* 自定义 HTML 放在「menu」位置时的首页链接（示例：） */
body.site .header.container-header .container-nav .zc-header-home {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.85rem;
color: #e5e7eb;
text-decoration: none;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.18);
font-weight: 600;
font-size: 0.9375rem;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.site .header.container-header .container-nav .zc-header-home:hover,
body.site .header.container-header .container-nav .zc-header-home:focus {
color: #fff;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.3);
}
/* 可选：把登录放在「topbar」位置时，条带与顶栏同色 */
body.site .header.container-header .container-topbar {
background: #0a0d16;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.site .header.container-header .container-topbar,
body.site .header.container-header .container-topbar a:not(.btn) {
color: #d1d5db;
}
body.site .header.container-header .container-topbar .mod-login .form-control {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.22);
color: #f3f4f6;
}
body.site .header.container-header .container-topbar .mod-login .btn-primary {
background: linear-gradient(to right, #2563eb, #3b82f6);
border: none;
color: #fff;
}
body.site .container-component main {
max-width: 72rem;
margin-left: auto;
margin-right: auto;
}
body.site .container-component main .blog-item,
body.site .container-component main .com-content-article__body {
line-height: 1.75;
color: #334155;
}
body.site .container-component main a {
text-underline-offset: 0.2em;
}
body.site .card .card-body {
border-radius: 12px;
}
/* ========== Joomla 首页：整页深色 + 斜向光晕（含 :has(.zc-home-hero) 与 Featured / 页面类）========== */
body.site:has(.zc-home-hero),
body.site.view-featured.com-content,
body.site.zc-joomla-home {
background-color: #0b0f19;
color: #e5e7eb;
}
body.site:has(.zc-home-hero)::before,
body.site.view-featured.com-content::before,
body.site.zc-joomla-home::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
to bottom right,
rgba(30, 58, 138, 0.18) 0%,
#0b0f19 42%,
rgba(88, 28, 135, 0.16) 100%
);
}
body.site:has(.zc-home-hero) .site-grid,
body.site.view-featured.com-content .site-grid,
body.site.zc-joomla-home .site-grid {
position: relative;
z-index: 1;
background-color: transparent;
}
/* 首页自定义 HTML 常在 top-a：去掉白卡片壳，避免大块白底 */
body.site:has(.zc-home-hero) .container-top-a .card,
body.site.view-featured.com-content .container-top-a .card,
body.site.zc-joomla-home .container-top-a .card {
background: transparent;
border: none;
box-shadow: none;
}
body.site:has(.zc-home-hero) .container-top-a .card-body,
body.site.view-featured.com-content .container-top-a .card-body,
body.site.zc-joomla-home .container-top-a .card-body {
background: transparent;
padding-left: 0;
padding-right: 0;
}
/* 首页 top-a 内部工具提示条（升级后补建模块 class: .zc-internal-notice） */
body.site .container-top-a .zc-internal-notice {
margin: 0 0 14px 0;
padding: 8px 14px;
text-align: center;
font-size: 13px;
line-height: 1.45;
font-weight: 600;
letter-spacing: 0.2px;
color: #f8d7e3;
background: linear-gradient(90deg, rgba(84, 22, 42, 0.9), rgba(66, 18, 34, 0.9));
border: 1px solid rgba(255, 160, 190, 0.28);
border-radius: 0;
}
body.site:has(.zc-home-hero) .container-top-b .card,
body.site.view-featured.com-content .container-top-b .card,
body.site.zc-joomla-home .container-top-b .card {
background: transparent;
border: none;
box-shadow: none;
}
body.site:has(.zc-home-hero) .container-top-b .card-body,
body.site.view-featured.com-content .container-top-b .card-body,
body.site.zc-joomla-home .container-top-b .card-body {
background: transparent;
padding-left: 0;
padding-right: 0;
}
/* 首页：弱化默认组件区浅底（模块里的 .zc-* 自成一体） */
body.site.view-featured.com-content .container-component main .blog-item,
body.site.view-featured.com-content .container-component main .com-content-article__body,
body.site.zc-joomla-home .container-component main .blog-item,
body.site.zc-joomla-home .container-component main .com-content-article__body {
color: #9ca3af;
}
/* 首页：去掉面包屑、组件标题块（避免「Home / 我在哪里」等噪音；其余请在后台关模块标题） */
body.site.view-featured.com-content .mod-breadcrumbs,
body.site.zc-joomla-home .mod-breadcrumbs {
display: none !important;
}
body.site.view-featured.com-content main > header,
body.site.view-featured.com-content .blog-featured__header {
display: none !important;
}
/* 首页隐藏 main-top 位置的卡片模块（常见为「我在哪里」等；需保留时请改模块到其它位置或取消首页页面类） */
body.site.view-featured.com-content .container-component .main-top.card,
body.site.zc-joomla-home .container-component .main-top.card {
display: none !important;
}
/* 禁止首页误用衬线/打字机等展示站名导航文案（保留图标与无障碍 hidden 文本） */
body.site.view-featured.com-content .container-component,
body.site.zc-joomla-home .container-component {
font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
body.site.view-featured.com-content .container-component .font-monospace,
body.site.zc-joomla-home .container-component .font-monospace {
font-family: inherit;
}
/* 首页 Footer 区（与深色页融合，叠在整页光晕之上） */
body.site:has(.zc-home-hero) .footer.container-footer,
body.site.view-featured.com-content .footer.container-footer,
body.site.zc-joomla-home .footer.container-footer {
position: relative;
z-index: 1;
background: #0b0f19;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #9ca3af;
margin-top: 0;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
/*
* Cassiopeia 页脚：footer > .grid-child 默认为 flex + space-between，
* 仅有一个自定义 HTML 模块时会把整块内容挤到左侧（与宽度 max-width 无关）。
* 首页下改为水平居中并让内层占满可用宽。
*/
body.site:has(.zc-home-hero) .footer.container-footer > .grid-child,
body.site.view-featured.com-content .footer.container-footer > .grid-child,
body.site.zc-joomla-home .footer.container-footer > .grid-child,
body.site.itemid-101 .footer.container-footer > .grid-child {
justify-content: center;
align-items: center;
width: 100%;
max-width: 100%;
}
/* 自定义 HTML 页脚：见 deploy/joomla-footer-home.html */
body.site .zc-site-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 72rem;
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 24px);
}
/* 首页：整组纵向排列并居中（须写在通用规则之后以覆盖 justify-content） */
body.site:has(.zc-home-hero) .zc-site-footer,
body.site.view-featured.com-content .zc-site-footer,
body.site.zc-joomla-home .zc-site-footer,
body.site.itemid-101 .zc-site-footer {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
max-width: 72rem;
box-sizing: border-box;
}
body.site .zc-site-footer__copy {
margin: 0;
font-size: 0.875rem;
color: #6b7280; /* text-gray-500 */
}
body.site .zc-site-footer__links {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
list-style: none;
margin: 0;
padding: 0;
}
body.site .zc-site-footer__links a {
font-size: 0.875rem;
color: #6b7280; /* text-gray-500 */
text-decoration: none;
transition: color 0.2s ease; /* transition-colors */
}
body.site .zc-site-footer__links a:hover {
color: #d1d5db; /* text-gray-300 */
}
/* 首页：链接行在栏内居中（与 column 页脚一致） */
body.site:has(.zc-home-hero) .zc-site-footer__links,
body.site.view-featured.com-content .zc-site-footer__links,
body.site.zc-joomla-home .zc-site-footer__links,
body.site.itemid-101 .zc-site-footer__links {
justify-content: center;
}
body.site:has(.zc-home-hero) .zc-site-footer__copy,
body.site.view-featured.com-content .zc-site-footer__copy,
body.site.zc-joomla-home .zc-site-footer__copy,
body.site.itemid-101 .zc-site-footer__copy {
width: 100%;
text-align: center;
}
/* 内嵌在 top-a 自定义 HTML 底部的页脚（与主内容区留白、顶部分割） */
body.site .zc-site-footer.zc-site-footer--inline {
margin-top: clamp(2.5rem, 8vw, 4rem);
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
max-width: none;
}
/* ICP / 公安联网备案（见 deploy/joomla-footer-home.html）；备案区仅在首页展示，子页保留版权与链接 */
body.site .zc-site-footer__beian {
flex-basis: 100%;
width: 100%;
margin-top: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: none;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.35rem;
font-size: 0.8125rem;
line-height: 1.5;
}
body.site:has(.zc-home-hero) .zc-site-footer__beian,
body.site.view-featured.com-content .zc-site-footer__beian,
body.site.zc-joomla-home .zc-site-footer__beian,
body.site.itemid-101 .zc-site-footer__beian {
display: flex;
}
body.site .zc-site-footer__beian-row {
margin: 0;
width: 100%;
text-align: center;
}
body.site .zc-site-footer__beian a {
color: #2563eb;
text-decoration: underline;
text-underline-offset: 2px;
}
body.site .zc-site-footer__beian a:hover,
body.site .zc-site-footer__beian a:focus {
color: #1d4ed8;
}
body.site .zc-site-footer__beian-psb {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
body.site .zc-site-footer__beian-psb img {
flex-shrink: 0;
width: 20px;
height: 20px;
vertical-align: middle;
object-fit: contain;
}
/* ========== ZC 首页区块（自定义 HTML 模块中的 class）========== */
.zc-home-hero {
position: relative;
border-radius: 20px;
padding: clamp(28px, 5vw, 48px) clamp(24px, 4vw, 40px);
background-color: #0b0f19;
color: #fff;
overflow: hidden;
margin-bottom: clamp(20px, 3vw, 28px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.zc-home-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom right,
rgba(30, 58, 138, 0.2) 0%,
#0b0f19 45%,
rgba(88, 28, 135, 0.2) 100%
);
pointer-events: none;
}
.zc-home-hero::after {
display: none;
}
/* 未使用 __layout 时：保持原单列文案区 */
.zc-home-hero__content {
position: relative;
z-index: 1;
max-width: 42rem;
}
/* 大卡片左右分栏：左文案 + 右登录（需在 HTML 中加 .zc-home-hero__layout，见 deploy/joomla-home-hero-with-login.html） */
.zc-home-hero__layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: clamp(22px, 4vw, 36px);
align-items: stretch;
}
@media (min-width: 992px) {
.zc-home-hero__layout {
grid-template-columns: minmax(0, 1.15fr) minmax(260px, 340px);
align-items: center;
}
}
.zc-home-hero__layout .zc-home-hero__content {
max-width: none;
}
.zc-home-hero__auth {
background: rgba(255, 255, 255, 0.06);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 16px;
padding: clamp(18px, 2.5vw, 24px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}
.zc-home-hero__auth-label {
margin: 0 0 14px;
font-size: 0.9375rem;
font-weight: 600;
color: #e5e7eb;
letter-spacing: 0.02em;
}
/* 包裹 {loadmoduleid}，减轻可视化编辑器合并行时的结构错乱；内部表单样式仍由 .zc-home-hero__auth .mod-login 控制 */
.zc-home-login-embed {
display: block;
margin: 0;
}
.zc-home-hero__auth .mod-login,
.zc-home-hero__auth .mod-login-logout {
margin: 0;
}
.zc-home-hero__auth .mod-login .pretext,
.zc-home-hero__auth .mod-login .posttext {
color: #9ca3af;
font-size: 0.8125rem;
margin-bottom: 0.75rem;
}
.zc-home-hero__auth .mod-login .userdata .form-group {
margin-bottom: 0.65rem;
}
.zc-home-hero__auth .mod-login .form-control {
background: rgba(11, 15, 25, 0.45);
border-color: rgba(255, 255, 255, 0.2);
color: #f3f4f6;
border-radius: 10px;
font-size: 0.9375rem;
}
.zc-home-hero__auth .mod-login .form-control::placeholder {
color: #6b7280;
}
.zc-home-hero__auth .mod-login .input-group-text {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
color: #93c5fd;
border-radius: 0 10px 10px 0;
}
.zc-home-hero__auth .mod-login .input-group .form-control {
border-radius: 10px 0 0 10px;
}
.zc-home-hero__auth .mod-login .btn-secondary {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.22);
color: #e5e7eb;
}
.zc-home-hero__auth .mod-login .form-check-label {
color: #d1d5db;
font-size: 0.8125rem;
}
.zc-home-hero__auth .mod-login .btn-primary {
width: 100%;
margin-top: 4px;
padding: 0.55rem 1rem;
font-weight: 600;
border-radius: 10px;
background: linear-gradient(to right, #2563eb, #3b82f6);
border: none;
color: #fff;
box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35);
}
.zc-home-hero__auth .mod-login .btn-primary:hover {
box-shadow: 0 0 16px rgba(59, 130, 246, 0.45);
}
.zc-home-hero__auth .mod-login__options {
margin: 10px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.zc-home-hero__auth .mod-login__options a {
color: #93c5fd;
font-size: 0.8125rem;
text-decoration: none;
}
.zc-home-hero__auth .mod-login__options a:hover {
color: #bfdbfe;
text-decoration: underline;
}
.zc-home-hero__auth .mod-login-logout {
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.zc-home-hero__auth .mod-login-logout .login-greeting {
margin: 0;
color: #e5e7eb;
font-size: 0.875rem;
line-height: 1.5;
}
.zc-home-hero__auth .mod-login-logout .btn-primary {
width: 100%;
padding: 0.5rem 1rem;
font-weight: 600;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #f3f4f6;
}
.zc-home-hero__auth .mod-login-logout .btn-primary:hover {
background: rgba(255, 255, 255, 0.16);
color: #fff;
}
/* 大卡片内已有登录表单时，隐藏顶栏重复实例（避免双表单） */
body.site:has(.zc-home-hero__auth form.mod-login) .header.container-header .container-nav > form.mod-login,
body.site:has(.zc-home-hero__auth form.mod-login-logout) .header.container-header .container-nav > form.mod-login-logout {
display: none !important;
}
.zc-home-kicker {
margin: 0 0 10px;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #93c5fd;
opacity: 0.9;
}
.zc-home-hero h1,
.zc-home-title {
margin: 0 0 14px;
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.12;
font-weight: 800;
/* 一体化图像生成器：渐变字 from-blue-400 to-cyan-300 */
background: linear-gradient(to right, #60a5fa, #67e8f4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.zc-home-title {
display: block;
}
.zc-home-subtitle {
margin: 0;
font-size: clamp(0.95rem, 1.5vw, 1.05rem);
line-height: 1.75;
max-width: 36rem;
color: #9ca3af;
}
.zc-home-actions {
margin-top: 24px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.zc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 12px;
padding: 12px 22px;
font-size: 0.9375rem;
font-weight: 600;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease,
filter 0.2s ease, opacity 0.2s ease; /* 等价 transition-all 常用属性 */
}
.zc-btn:focus-visible {
outline: 2px solid #93c5fd;
outline-offset: 3px;
}
.zc-btn--primary {
background: linear-gradient(to right, #2563eb, #3b82f6);
color: #fff;
border: none;
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.35);
}
.zc-btn--primary:hover {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 8px 24px rgba(37, 99, 235, 0.4);
transform: translateY(-1px);
}
.zc-btn--primary:active {
transform: scale(0.95);
}
.zc-btn--green {
background: linear-gradient(to right, #10b981, #059669);
color: #fff;
border: none;
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
}
.zc-btn--green:hover {
box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 8px 24px rgba(5, 150, 105, 0.4);
transform: translateY(-1px);
}
.zc-btn--green:active {
transform: scale(0.95);
}
.zc-btn--ghost {
border: 1px solid rgba(255, 255, 255, 0.35);
color: #e5e7eb;
background: rgba(255, 255, 255, 0.06);
}
.zc-btn--ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.5);
}
.zc-btn--ghost:active {
transform: scale(0.95);
}
.zc-btn--ironwork {
border: 1px solid rgba(249, 115, 22, 0.45);
color: #fff7ed;
background: linear-gradient(135deg, rgba(120, 53, 15, 0.96) 0%, rgba(180, 83, 9, 0.94) 52%, rgba(234, 88, 12, 0.92) 100%);
box-shadow: 0 6px 22px rgba(180, 83, 9, 0.28), inset 0 0 0 1px rgba(255, 237, 213, 0.08);
}
.zc-btn--ironwork:hover {
border-color: rgba(251, 146, 60, 0.62);
box-shadow: 0 0 22px rgba(249, 115, 22, 0.28), 0 10px 28px rgba(124, 45, 18, 0.36);
transform: translateY(-1px);
filter: saturate(1.06);
}
.zc-btn--ironwork:active {
transform: scale(0.95);
}
.zc-home-tip {
margin-top: 14px;
font-size: 0.8125rem;
color: #9ca3af;
line-height: 1.5;
}
.zc-feature-wrap {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 2vw, 18px);
margin-bottom: clamp(20px, 3vw, 28px);
}
/* 展示卡片：渐变底、无上浮（角色一键随机 / 多风格模板等） */
.zc-feature-card {
position: relative;
background: linear-gradient(145deg, #1c2840 0%, #151c2e 38%, #1a1530 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: clamp(16px, 2.5vw, 22px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
cursor: default;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.zc-feature-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, transparent 42%, rgba(147, 51, 234, 0.08) 100%);
pointer-events: none;
}
.zc-feature-card > * {
position: relative;
z-index: 1;
}
.zc-feature-card:hover {
transform: none;
border-color: rgba(59, 130, 246, 0.35);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.12);
}
.zc-feature-card h3 {
margin: 0 0 10px;
font-size: 1.0625rem;
font-weight: 700;
color: #f3f4f6;
}
.zc-feature-card p {
margin: 0;
color: #9ca3af;
line-height: 1.7;
font-size: 0.875rem;
}
.zc-quick-entry {
position: relative;
background: linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, #161d2e 40%, #141528 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: clamp(18px, 3vw, 24px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.zc-quick-entry:hover {
transform: translateY(-0.25rem);
border-color: rgba(59, 130, 246, 0.5);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1),
0 25px 50px -12px rgba(30, 58, 138, 0.2);
}
.zc-quick-entry h2 {
margin: 0 0 16px;
font-size: 1.25rem;
font-weight: 700;
color: #f3f4f6;
}
.zc-quick-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.zc-quick-link {
position: relative;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 16px;
color: inherit;
background: linear-gradient(145deg, #1e2a44 0%, #161b2c 45%, #1c1834 100%);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.zc-quick-link::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(120deg, rgba(56, 189, 248, 0.08) 0%, transparent 50%, rgba(168, 85, 247, 0.06) 100%);
pointer-events: none;
}
.zc-quick-link > * {
position: relative;
z-index: 1;
}
.zc-quick-link:hover {
transform: translateY(-0.25rem);
border-color: rgba(59, 130, 246, 0.5);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1),
0 25px 50px -12px rgba(30, 58, 138, 0.2);
}
.zc-quick-link:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* 正式环境：稳定感（青绿/蓝细边） */
.zc-quick-link--prod {
border-color: rgba(34, 197, 94, 0.25);
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}
.zc-quick-link--prod:hover {
border-color: rgba(52, 211, 153, 0.45);
}
/* 开发环境：测试感（橙/灰） */
.zc-quick-link--dev {
border-color: rgba(251, 146, 60, 0.35);
}
.zc-quick-link--dev:hover {
border-color: rgba(251, 146, 60, 0.55);
}
.zc-quick-link--dev .zc-quick-link__title {
color: #fdba74;
}
.zc-quick-link--dev .zc-quick-link__desc {
color: #9ca3af; /* 描述保持灰，暗示测试环境 */
}
.zc-quick-link__title {
display: block;
font-weight: 700;
margin-bottom: 6px;
color: #f3f4f6;
}
.zc-quick-link__desc {
display: block;
color: #9ca3af;
font-size: 0.875rem;
line-height: 1.5;
}
@media (max-width: 992px) {
.zc-feature-wrap {
grid-template-columns: 1fr;
}
.zc-quick-grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.zc-btn,
.zc-feature-card,
.zc-quick-entry,
.zc-quick-link {
transition: none;
}
.zc-btn--primary:hover,
.zc-btn--primary:active,
.zc-btn--green:hover,
.zc-btn--green:active,
.zc-btn--ghost:active,
.zc-btn--ironwork:hover,
.zc-btn--ironwork:active,
.zc-feature-card:hover,
.zc-quick-entry:hover,
.zc-quick-link:hover {
transform: none;
}
}