/* ============================================================ 奇兔科技官网 · 全站公共样式（纯 CSS，无需构建） 主题：白色 + Logo 蓝（#3b82f6 → #2448d0） 依赖：Tailwind CSS（CDN 引入） 说明：本文件只存放 Tailwind 之外的组件类与动画， 主题色如需调整，请同步修改各页面 中 tailwind.config ============================================================ */ :root { --primary: #2f5ce8; --primary-light: #3b82f6; --primary-deep: #2448d0; --soft: #eef4ff; --line: #e3ebfb; } /* ---------- 基础 ---------- */ html { scroll-behavior: smooth; } ::selection { background: rgba(47, 92, 232, .18); color: #12266e; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f0f4fc; } ::-webkit-scrollbar-thumb { background: #b9cbf0; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #8fa9e2; } /* ---------- 按钮组件 ---------- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; padding: .8rem 1.7rem; line-height: 1.2; background: linear-gradient(135deg, var(--primary-light), var(--primary-deep)); color: #fff; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; box-shadow: 0 10px 26px -10px rgba(36, 72, 208, .45); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(36, 72, 208, .5); color: #fff; } .btn-primary:active { transform: translateY(0); } /* 浅色主题下的幽灵按钮 */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; padding: .8rem 1.7rem; line-height: 1.2; border: 1px solid #c9d8f2; background: #fff; color: var(--primary-deep); font-size: .9375rem; font-weight: 600; transition: all .25s ease; } .btn-ghost:hover { border-color: var(--primary); background: var(--soft); color: var(--primary-deep); transform: translateY(-2px); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; padding: .8rem 1.7rem; line-height: 1.2; border: 1px solid #d7e0f0; background: #fff; color: var(--primary-deep); font-size: .9375rem; font-weight: 600; transition: all .25s ease; } .btn-outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(47, 92, 232, .3); } .btn-lg { padding: 1rem 2.2rem; font-size: 1rem; border-radius: .9rem; } .btn-sm { padding: .55rem 1.15rem; font-size: .8125rem; border-radius: .6rem; } /* ---------- 顶部导航（白色玻璃 · 滚动加深） ---------- */ #site-header { background: rgba(255, 255, 255, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(13, 42, 110, .08); transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease; } #site-header.is-scrolled { background: rgba(255, 255, 255, .98); box-shadow: 0 10px 30px -14px rgba(13, 42, 110, .18); border-bottom-color: rgba(13, 42, 110, .1); } .nav-link { position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .75rem; font-size: .9375rem; font-weight: 500; color: #44536f; border-radius: .6rem; transition: color .2s ease, background .2s ease; white-space: nowrap; } .nav-link:hover { color: var(--primary-deep); background: var(--soft); } .nav-link.active { color: var(--primary-deep); background: var(--soft); font-weight: 600; } .nav-link.active::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--primary-light), var(--primary-deep)); } /* ---------- 桌面端下拉 ---------- */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { cursor: pointer; user-select: none; } .nav-dropdown-trigger .chevron { width: 14px; height: 14px; opacity: .7; transition: transform .25s ease, opacity .2s ease; flex: none; } .nav-dropdown.open .nav-dropdown-trigger .chevron, .nav-dropdown:hover .nav-dropdown-trigger .chevron { transform: rotate(180deg); opacity: 1; } .nav-dropdown-trigger:hover { color: var(--primary-deep); } .nav-dropdown-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 16px 40px -12px rgba(13, 42, 110, .2), 0 4px 16px -8px rgba(13, 42, 110, .12); padding: .4rem; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(6px); transition: opacity .22s ease, transform .22s ease, visibility .22s ease; z-index: 60; } .nav-dropdown-menu::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); } .nav-dropdown.open .nav-dropdown-menu, .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .85rem; border-radius: .7rem; font-size: .875rem; font-weight: 500; color: #44536f; transition: background .18s ease, color .18s ease; } .nav-dropdown-item:hover { background: var(--soft); color: var(--primary-deep); } .nav-dropdown-item.active { background: var(--soft); color: var(--primary-deep); font-weight: 600; } .nav-dropdown-item .item-icon { width: 30px; height: 30px; border-radius: .55rem; display: grid; place-items: center; font-size: 14px; background: #f1f5ff; color: #64748b; flex: none; transition: background .18s ease, color .18s ease; } .nav-dropdown-item:hover .item-icon { background: var(--primary-deep); color: #fff; } .nav-dropdown-item.active .item-icon { background: var(--primary-deep); color: #fff; } .nav-dropdown-trigger:focus-visible, .nav-dropdown-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ---------- 移动端菜单 ---------- */ .menu-btn span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #1e293b; transition: transform .3s ease, opacity .3s ease; } .menu-btn span + span { margin-top: 5px; } .menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-btn.is-open span:nth-child(2) { opacity: 0; } .menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } #mobile-menu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; } #mobile-menu.open { grid-template-rows: 1fr; } #mobile-menu > div { overflow: hidden; min-height: 0; } .mobile-link { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-radius: .75rem; color: #475569; font-size: .9375rem; font-weight: 500; transition: background .2s ease, color .2s ease; } .mobile-link:hover { background: var(--soft); color: var(--primary-deep); } .mobile-link.active { background: var(--soft); color: var(--primary-deep); font-weight: 600; } .mobile-group { border-radius: .75rem; overflow: hidden; } .mobile-group-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .8rem 1rem; border-radius: .75rem; color: #475569; font-size: .9375rem; font-weight: 500; background: transparent; border: none; cursor: pointer; text-align: left; transition: background .2s ease, color .2s ease; } .mobile-group-trigger:hover { background: var(--soft); color: var(--primary-deep); } .mobile-group.open .mobile-group-trigger { background: var(--soft); color: var(--primary-deep); } .mobile-group-trigger .chevron { width: 16px; height: 16px; opacity: .6; transition: transform .3s ease; flex: none; } .mobile-group.open .mobile-group-trigger .chevron { transform: rotate(180deg); } .mobile-group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; } .mobile-group.open .mobile-group-body { grid-template-rows: 1fr; } .mobile-group-body > div { overflow: hidden; min-height: 0; } .mobile-sub-link { display: flex; align-items: center; gap: .6rem; margin: 2px 0; padding: .6rem 1rem .6rem 2.2rem; border-radius: .6rem; font-size: .875rem; font-weight: 500; color: #64748b; transition: background .18s ease, color .18s ease; } .mobile-sub-link:hover { background: var(--soft); color: var(--primary-deep); } .mobile-sub-link.active { background: var(--soft); color: var(--primary-deep); font-weight: 600; } .mobile-sub-link .dot { width: 6px; height: 6px; border-radius: 50%; background: #b9cbf0; flex: none; } .mobile-sub-link.active .dot { background: var(--primary-deep); } /* ---------- 通用装饰 ---------- */ .bg-grid { background-image: linear-gradient(rgba(47, 92, 232, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 92, 232, .06) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 15%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 90% 80% at 50% 15%, #000 50%, transparent 100%); } .glass { background: rgba(255, 255, 255, .6); border: 1px solid rgba(201, 216, 242, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .section-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .95rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; color: var(--primary-deep); background: var(--soft); border: 1px solid rgba(47, 92, 232, .2); } .section-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .section-tag-light { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .95rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; color: var(--primary-deep); background: var(--soft); border: 1px solid rgba(47, 92, 232, .22); } .section-tag-light::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-light); } .text-gradient { background: linear-gradient(100deg, var(--primary-light) 0%, var(--primary-deep) 55%, #6a8bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-gradient-dark { background: linear-gradient(100deg, var(--primary) 0%, var(--primary-deep) 60%, #0ea5e9 120%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- 悬浮上浮卡片 ---------- */ .card-lift { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 44px -16px rgba(13, 42, 110, .16); } /* ---------- FAQ 折叠面板 ---------- */ .faq-item { border: 1px solid var(--line); border-radius: 1rem; background: #fff; transition: border-color .25s ease, box-shadow .25s ease; } .faq-item[open] { border-color: rgba(47, 92, 232, .4); box-shadow: 0 12px 30px -16px rgba(47, 92, 232, .22); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 1rem; color: #12224d; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .faq-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--primary-deep); transition: transform .3s ease; } .faq-item[open] summary .faq-icon { transform: rotate(45deg); } .faq-item .faq-body { padding: 0 1.4rem 1.3rem; color: #5a6b8c; line-height: 1.85; font-size: .9375rem; } /* ---------- 表单 ---------- */ .form-label { display: block; font-size: .875rem; font-weight: 600; color: #26334f; margin-bottom: .4rem; } .form-label .required { color: #e0245e; margin-left: 2px; } .form-input { width: 100%; border-radius: .75rem; border: 1px solid #dbe4f2; background: #fff; padding: .75rem 1rem; font-size: .9375rem; color: #1f2b47; transition: border-color .2s ease, box-shadow .2s ease; } .form-input::placeholder { color: #9aa9c6; } .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 92, 232, .14); } /* ---------- 图片占位（备用） ---------- */ .placeholder-img { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; overflow: hidden; border: 1px dashed #c9d6ec; border-radius: 1rem; background: linear-gradient(135deg, #f3f7ff 0%, #e9eefb 60%, #eef1f8 100%); color: #8aa0c8; font-size: .8125rem; letter-spacing: .05em; } .placeholder-img::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(47, 92, 232, .1) 1px, transparent 1px); background-size: 16px 16px; } .placeholder-img > * { position: relative; z-index: 1; } /* ---------- 列表筛选（新闻公告页） ---------- */ .filter-btn { padding: .45rem 1.1rem; border-radius: 999px; font-size: .875rem; font-weight: 500; color: #44536f; background: #fff; border: 1px solid #dbe4f2; transition: all .2s ease; cursor: pointer; } .filter-btn:hover { border-color: var(--primary); color: var(--primary); } .filter-btn.is-active { background: var(--primary-deep); border-color: var(--primary-deep); color: #fff; } /* ---------- 页脚（Logo 蓝渐变） ---------- */ .footer-title { font-size: .9375rem; font-weight: 600; color: #fff; margin-bottom: 1.1rem; } .footer-link { display: block; padding: .32rem 0; font-size: .875rem; color: rgba(255, 255, 255, .72); transition: color .2s ease, padding-left .2s ease; } .footer-link:hover { color: #fff; padding-left: 3px; } .footer-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px; font-size: 12px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); transition: all .2s ease; } .footer-chip:hover { border-color: rgba(255, 255, 255, .6); color: #fff; background: rgba(255, 255, 255, .22); } /* ---------- 进场动画（克制） ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .card-lift, .btn-primary, .btn-ghost, .btn-outline { transition: none; } }