/* 佛曰：三生三世现桃花 */ /* Theme Name: Imperial Theme URL: https://bootstrapmade.com/imperial-free-onepage-bootstrap-template/ Author: BootstrapMade Author URL: https://bootstrapmade.com */ /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ :root { /* —— 品牌色 · 明亮克制 (E 方案) —— */ --brand-50: #ECFEFF; /* 浅青底 */ --brand-100: #CFFAFE; --brand-500: #06B6D4; /* 主品牌青 cyan-500，与 Logo 同色 */ --brand-600: #0891B2; /* hover */ --brand-700: #0E7490; /* active */ /* —— 强调 · 成长绿 (用于跨境/增长语义数字) —— */ --accent-50: #ECFDF5; --accent-100: #D1FAE5; --accent-500: #10B981; /* emerald-500 */ --accent-600: #059669; /* —— 中性 (浅底/文字) —— */ --surface-0: #FFFFFF; /* 主底 */ --surface-1: #F8FAFC; --surface-2: #F1F5F9; --ink-900: #0F172A; /* 炭黑 */ --ink-700: #334155; --ink-500: #64748B; --ink-300: #CBD5E1; --ink-100: #E2E8F0; /* —— 语义色 —— */ --success-500: #10B981; --warning-500: #F59E0B; --danger-500: #EF4444; /* —— 阴影 (更柔更轻) —— */ --sh-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 4px rgba(15, 23, 42, 0.03); --sh-2: 0 4px 16px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04); --sh-3: 0 12px 32px rgba(6, 182, 212, 0.10), 0 4px 12px rgba(15, 23, 42, 0.04); /* —— 圆角 · 全部加大到 14px 阶梯 (更圆润) —— */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* —— 字号阶梯 —— */ --fs-display: 56px; --lh-display: 1.15; --fs-h1: 40px; --lh-h1: 1.2; --fs-h2: 28px; --lh-h2: 1.25; --fs-h3: 20px; --lh-h3: 1.3; --fs-body: 16px; --lh-body: 1.65; --fs-caption: 13px; --lh-caption: 1.5; /* —— 间距 (8px 网格) —— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 120px; /* —— 动效 —— */ --dur-micro: 120ms; --dur-short: 200ms; --dur-medium: 320ms; --dur-scroll: 850ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* —— header 高度 —— */ --header-h: 72px; /* —— 字体 (中文回退扩展) —— */ --font-sans: "Inter", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans CN", "Noto Sans CJK SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace; /* —— 兼容旧变量名 (Bootstrap 残留) —— */ --c-primary: var(--brand-500); --c-primary-h: var(--brand-600); --c-accent: var(--brand-600); --c-deep: var(--ink-900); --c-deep-2: #1E293B; --c-ink: var(--ink-900); --c-text-1: var(--ink-900); --c-text-2: var(--ink-700); --c-text-3: var(--ink-500); --c-bg-1: var(--surface-0); --c-bg-2: var(--surface-1); --c-bg-deep: var(--surface-0); --c-border: var(--ink-100); } nav ul { list-style: none; font: inherit; } html { scroll-behavior: smooth; } body { background: var(--surface-0); color: var(--ink-700); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "cv11", "ss01", "tnum"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--brand-600); transition: color var(--dur-micro) var(--ease-out); } a:hover, a:active, a:focus { color: var(--brand-700); outline: none; text-decoration: none; } /* —— focus-visible 全局键盘可达性 —— */ a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } /* —— 按钮通用类 · 明亮克制 —— */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 var(--sp-5); border: 0; border-radius: var(--r-md); background: var(--brand-500); color: #fff; font: 500 var(--fs-body)/1 var(--font-sans); letter-spacing: 0.01em; cursor: pointer; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } .btn:hover { background: var(--brand-600); transform: translateY(-1px) scale(1.01); box-shadow: var(--sh-2); } .btn:active { transform: translateY(0) scale(1); box-shadow: var(--sh-1); } .btn--ghost { background: transparent; color: var(--brand-600); border: 1.5px solid var(--brand-500); } .btn--ghost:hover { background: var(--brand-50); color: var(--brand-700); transform: translateY(-1px) scale(1.01); } .btn--accent { background: var(--brand-500); } .btn--accent:hover { background: var(--brand-600); } .btn--pill { border-radius: var(--r-pill); } .btn--lg { height: 52px; padding: 0 var(--sp-7); font-size: var(--fs-h3); } /* —— 表单通用类 —— */ .form-control { height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--ink-100); border-radius: var(--r-sm); background: var(--surface-0); color: var(--ink-900); font: 400 var(--fs-body)/1.4 inherit; transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); } textarea.form-control { height: auto; padding: var(--sp-3) var(--sp-4); } .form-control:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(6, 182, 212, .15); outline: none; } /* —— section 滚动偏移，避免被 sticky header 遮挡 —— */ section[id] { scroll-margin-top: calc(var(--header-h) + 16px); } p { padding: 0; margin: 0 0 var(--sp-5) 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--sp-4) 0; padding: 0; color: var(--ink-900); } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); } /* Prelaoder */ #preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #fff url("../img/preloader.svg") no-repeat center center; } /* Back to top button */ /* .back-to-top { position: fixed; display: none; background: rgba(0, 0, 0, 0.2); color: #fff; padding: 6px 12px 9px 12px; font-size: 16px; border-radius: var(--r-sm); right: 15px; bottom: 15px; transition: background 0.5s; } @media (max-width: 768px) { .back-to-top { bottom: 15px; } } .back-to-top:focus { background: rgba(0, 0, 0, 0.2); color: #fff; outline: none; } .back-to-top:hover { background: var(--brand-500); color: #fff; } */ /*-------------------------------------------------------------- # Welcome (Hero) · 明亮克制 --------------------------------------------------------------*/ #hero { display: table; width: 100%; min-height: min(100vh, 720px); margin-top: calc(-1 * var(--header-h)); background: radial-gradient(900px 500px at 18% 10%, rgba(6, 182, 212, .14), transparent 65%), radial-gradient(700px 400px at 88% 90%, rgba(16, 185, 129, .12), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, var(--surface-1) 100%); position: relative; color: var(--ink-900); overflow: hidden; } /* —— 第一层：浅光晕（淡青/淡绿斑块呼吸） —— */ #hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(220px 220px at 18% 28%, rgba(6, 182, 212, .14), transparent 70%), radial-gradient(180px 180px at 78% 18%, rgba(16, 185, 129, .10), transparent 70%), radial-gradient(260px 260px at 60% 78%, rgba(6, 182, 212, .08), transparent 70%); background-repeat: no-repeat; opacity: 1; animation: heroTwinkle 8s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } /* —— 第二层：底部品牌渐变带 —— */ #hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brand-500) 50%, transparent); opacity: .35; pointer-events: none; z-index: 1; } @keyframes heroOverlayPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes heroTwinkle { from { opacity: .85; transform: translateY(0); } to { opacity: 1; transform: translateY(-6px); } } /* hero 内容浮在光晕之上 */ .hero-content { position: relative; z-index: 3; } .hero-title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.02em; color: var(--ink-900); /* fallback for browsers without background-clip:text */ margin: 0 0 var(--sp-4) 0; animation: fadeInDown var(--dur-medium) var(--ease-out) both; background: linear-gradient(135deg, var(--ink-900) 0%, var(--brand-700) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle { color: var(--ink-700); font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0 0 var(--sp-5) 0; animation: fadeInUp var(--dur-medium) var(--ease-out) .3s both; } .hero-subtitle .typed { color: var(--brand-600); font-weight: 700; border-right: 2px solid var(--brand-500); padding-right: 4px; display: inline-block; min-width: 1ch; animation: heroCursor 1s steps(1) infinite; } .hero-subtitle .typed-prefix, .hero-subtitle .typed-suffix { color: var(--ink-500); } @keyframes heroCursor { 50% { border-color: transparent; } } .hero-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500)); margin: var(--sp-4) auto; animation: scaleIn var(--dur-medium) var(--ease-out) .6s both; border-radius: var(--r-pill); } @keyframes scaleIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } #hero .hero-logo { margin: 20px; } #hero .hero-logo img { max-width: 100%; width: 100px; } #hero .hero-container { display: table-cell; margin: 0; padding: 0; text-align: center; vertical-align: middle; } #hero h1 { margin: 0px 0 10px 0; font-weight: 700; line-height: 48px; text-transform: uppercase; color: var(--ink-900); } @media (max-width: 768px) { #hero h1 { font-size: 28px; line-height: 36px; } } #hero h4 { color: var(--ink-700); margin-bottom: 20px; } @media (max-width: 768px) { #hero h2 { font-size: 24px; line-height: 26px; margin-bottom: 30px; } #hero h2 .rotating { display: block; } } #hero .rotating > .animated { display: inline-block; } #hero .actions a { margin: var(--sp-2); } #hero .btn-get-started { margin: var(--sp-2); background: var(--brand-500); border: 0; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } #hero .btn-get-started:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: var(--sh-2); } #hero .btn-services { border: 1.5px solid var(--ink-300); color: var(--ink-700); background: transparent; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } #hero .btn-services:hover { background: var(--surface-1); border-color: var(--brand-500); color: var(--brand-700); transform: translateY(-1px); } /*-------------------------------------------------------------- # Header · 白底黑字 --------------------------------------------------------------*/ #header { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); padding: var(--sp-4) 0; height: var(--header-h); border-bottom: 1px solid var(--ink-100); } #header #logo { float: left; } #header #logo h1 { font-size: var(--fs-h3); margin: 0; padding: var(--sp-2) 0; line-height: 1; font-family: var(--font-sans); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } #header #logo h1 a, #header #logo h1 a:hover { color: var(--ink-900); } #header #logo img { padding: 0; margin: 0; max-height: 44px; } @media (max-width: 768px) { #header { height: 64px; } :root { --header-h: 64px; } #header #logo h1 { font-size: 18px; } #header #logo img { max-height: 36px; } } /* 滚动后 — 阴影增强,仍白底 */ .is-sticky #header { background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04); border-bottom-color: transparent; } /*-------------------------------------------------------------- # Navigation Menu --------------------------------------------------------------*/ /* Nav Menu Essentials */ .nav-menu, .nav-menu * { margin: 0; padding: 0; list-style: none; } .nav-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; } .nav-menu li { position: relative; white-space: nowrap; } .nav-menu > li { float: left; } .nav-menu li:hover > ul, .nav-menu li.sfHover > ul { display: block; } .nav-menu ul ul { top: 0; left: 100%; } .nav-menu ul li { min-width: 180px; } /* Nav Menu Arrows —— CSS 画箭头，只在真正有下拉的菜单项上加 */ /* 先关掉 Superfish 默认注入的 FontAwesome ::after 的字符（\f107 字符在没字体时变 tofu 方块） */ .sf-arrows .sf-with-ul:after { content: none; position: static; /* 重置掉旧 Superfish 的 position: absolute */ width: 0; height: 0; margin: 0; background: none; border: 0; font: inherit; line-height: inherit; } .sf-arrows ul .sf-with-ul:after { content: none; } /* 用 CSS 三角形作为下拉箭头 —— 只命中菜单里的 dropdown 父项 */ .sf-arrows > li.menu-has-children > a { padding-right: 32px; } .sf-arrows > li.menu-has-children > a::after { content: "" !important; display: inline-block !important; position: static !important; width: 0; height: 0; margin-left: var(--sp-2); vertical-align: 1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink-500); transition: transform var(--dur-short) var(--ease-out), border-top-color var(--dur-micro) var(--ease-out); } .sf-arrows > li.menu-has-children:hover > a::after, .sf-arrows > li.menu-has-children.sfHover > a::after { transform: rotate(180deg); border-top-color: var(--brand-500); } /* 二级菜单右箭头（如未来需要） */ .sf-arrows ul > li.menu-has-children > a { padding-right: 30px; } .sf-arrows ul > li.menu-has-children > a::after { content: "" !important; display: inline-block !important; position: static !important; width: 0; height: 0; margin-left: var(--sp-2); vertical-align: middle; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid var(--ink-500); } /* Nav Meu Container */ #nav-menu-container { float: right; margin: 0; } #nav-menu-container .nav-menu { display: flex; align-items: center; gap: var(--sp-2); } @media (max-width: 768px) { #nav-menu-container { display: none; } } /* Nav Meu Styling */ .nav-menu a { padding: var(--sp-3) var(--sp-4); text-decoration: none; display: inline-block; color: var(--ink-900); font-family: var(--font-sans); font-weight: 500; font-size: 15px; outline: none; transition: color var(--dur-micro) var(--ease-out); } .nav-menu a:hover { color: var(--brand-600); } .nav-menu > li.menu-active > a { color: var(--brand-600); font-weight: 600; } .nav-menu > li > a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: var(--brand-500); visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all var(--dur-short) var(--ease-in-out) 0s; transition: all var(--dur-short) var(--ease-in-out) 0s; } .nav-menu a:hover:before, .nav-menu li:hover > a:before, .nav-menu .menu-active > a:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .nav-menu ul { margin: var(--sp-1) 0 0 var(--sp-4); box-shadow: var(--sh-2); border: 1px solid var(--ink-100); border-radius: var(--r-md); overflow: hidden; } .nav-menu ul li { background: var(--surface-0); border-top: 0; } .nav-menu ul li:first-child { border-top: 0; } .nav-menu ul li:hover { background: var(--brand-50); } .nav-menu ul li a { color: var(--ink-700); } .nav-menu ul li a:hover { color: var(--brand-700); } .nav-menu ul ul { margin: 0; } /* Mobile Nav Toggle */ #mobile-nav-toggle { position: fixed; right: 0; top: 0; z-index: 999; margin: 20px 0px 0 0; border: 0; background: none; font-size: 24px; display: none; transition: all var(--dur-short) var(--ease-out); outline: none; } #mobile-nav-toggle i { color: var(--ink-900); display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: var(--r-md); background-color: var(--surface-1); border: 1px solid var(--ink-100); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } body.mobile-nav-active #mobile-nav-toggle i { transform: rotate(90deg); background-color: var(--brand-500); color: #fff; border-color: var(--brand-500); } @media (max-width: 768px) { #mobile-nav-toggle { display: inline; } } /* Mobile Nav Styling */ #mobile-nav { position: fixed; top: 0; padding-top: 18px; bottom: 0; z-index: 998; background: var(--surface-0); left: -260px; width: 240px; overflow-y: auto; transition: left var(--dur-medium) var(--ease-out); box-shadow: var(--sh-3); border-right: 1px solid var(--ink-100); } body.mobile-nav-active #mobile-nav { left: 0; } #mobile-nav ul { padding: 0; margin: 0; list-style: none; } #mobile-nav ul li { position: relative; } #mobile-nav ul li a { color: var(--ink-900); font-size: 16px; overflow: hidden; padding: 10px 22px 10px 15px; position: relative; text-decoration: none; width: 100%; display: block; outline: none; } #mobile-nav ul li a:hover { color: var(--brand-600); background: var(--brand-50); } #mobile-nav ul li li { padding-left: 30px; } #mobile-nav ul .menu-has-children i { position: absolute; right: 0; z-index: 99; padding: 15px; cursor: pointer; color: var(--ink-700); } #mobile-nav ul .menu-has-children i.fa-chevron-up { color: var(--brand-600); } #mobile-nav ul .menu-item-active { color: var(--brand-600); } #mobile-body-overly { width: 100%; height: 100%; z-index: 997; top: 0; left: 0; position: fixed; background: rgba(15, 23, 42, 0.4); display: none; } /* Mobile Nav body classes */ body.mobile-nav-active { overflow: hidden; } body.mobile-nav-active #mobile-nav { left: 0; } body.mobile-nav-active #mobile-nav-toggle { color: #fff; } /*-------------------------------------------------------------- # Sections --------------------------------------------------------------*/ /* Sections Common --------------------------------*/ .section-title { font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--ink-900); text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 var(--sp-3) 0; } .section-description { text-align: center; color: var(--ink-500); margin-bottom: var(--sp-7); } .section-title-divider { width: 50px; height: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500)); margin: 0 auto; margin-bottom: var(--sp-5); border-radius: var(--r-pill); } /* Get Started Section --------------------------------*/ #about { background: var(--surface-0); padding: var(--sp-9) 0; } /* about our image size */ #about .about-container { background-size: 580px 340px; height: auto; font-size: var(--fs-body); overflow: visible; } #about .about-content { background: var(--surface-0); } #about .about-title { color: var(--ink-900); font-weight: 700; font-size: var(--fs-h3); } #about .about-text { line-height: var(--lh-body); width: auto; height: auto; float: none; margin: 0 var(--sp-7) var(--sp-5) var(--sp-7); color: var(--ink-700); } #about .about-hero-img{ width: 100%; max-width: 540px; height: auto; max-height: none; display: block; float: none; border-radius: var(--r-md); } #about .about-text:last-child { margin-bottom: 0; } #about .about_row { color: var(--ink-900); width: 100%; height: auto; float: none; margin-left: 0; padding-top: var(--sp-5); line-height: 2.5em; overflow: visible; } #about .about_row img{ height: auto; max-height: none; } #about .about_row .welfare ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); list-style: none; padding: 0; } #about .about_row .welfare ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); list-style: none; padding: 0; } #about .about_row .welfare ul li { float: none; margin: 0; width: auto; height: auto; list-style: none; padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); box-shadow: var(--sh-2); display: flex; align-items: flex-start; gap: var(--sp-4); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); position: relative; overflow: hidden; } #about .about_row .welfare ul li::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0)); pointer-events: none; } #about .about_row .welfare ul li:hover { transform: translateY(-4px); box-shadow: var(--sh-3); } #about .about_row .welfare ul li .welfare-ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--r-md); background: rgba(255,255,255,0.5); color: var(--ink-900); display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; backdrop-filter: blur(4px); } #about .about_row .welfare ul li p { color: var(--ink-700); height: auto; text-align: left; font-size: var(--fs-body); margin: 0; line-height: 1.5; position: relative; z-index: 1; } #about .about_row .welfare ul li p strong { display: block; color: var(--ink-900); font-weight: 700; font-size: var(--fs-h3); margin-bottom: var(--sp-1); } #about .about_row .welfare ul li p span{ display: none; } /* 6 种低饱和度渐变配色循环 */ #about .about_row .welfare ul li:nth-child(1) { background: linear-gradient(135deg, #E8B4B8, #EAC7C7); } #about .about_row .welfare ul li:nth-child(2) { background: linear-gradient(135deg, #B4C7E7, #C7D5F0); } #about .about_row .welfare ul li:nth-child(3) { background: linear-gradient(135deg, #B5D5C5, #C8E6D0); } #about .about_row .welfare ul li:nth-child(4) { background: linear-gradient(135deg, #E8D5B7, #F0E4D0); } #about .about_row .welfare ul li:nth-child(5) { background: linear-gradient(135deg, #C7B8EA, #D9D0F0); } #about .about_row .welfare ul li:nth-child(6) { background: linear-gradient(135deg, #B8D4E8, #CCE0F0); } #about .about_row .welfare ul li:nth-child(7) { background: linear-gradient(135deg, #E8C7B7, #F0D9D0); } #about .about_row .welfare ul li:nth-child(8) { background: linear-gradient(135deg, #C5D5B5, #D8E6C8); } #about .about_row .welfare ul li:nth-child(9) { background: linear-gradient(135deg, #B8C8E8, #CCD8F0); } #about .about_row .welfare ul li:nth-child(10) { background: linear-gradient(135deg, #E8D5C7, #F0E4D9); } #about .about_row .welfare ul li:nth-child(11) { background: linear-gradient(135deg, #B8E0D2, #CCEBE0); } #about .about_row .welfare ul li:nth-child(12) { background: linear-gradient(135deg, #D5B8E8, #E4D0F0); } background-color: var(--surface-0); border-radius: 50% } /* Services Section --------------------------------*/ #services { background: var(--surface-1); padding: var(--sp-9) 0 var(--sp-7) 0; } #services .service-item { margin-bottom: var(--sp-5); padding-left: 80px; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); transform: translateY(0); } #services .service-item:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } #services .service-icon { height: 60px; width: 60px; float: left; background: var(--brand-500); padding: 17px; border-radius: 50%; transition: background-color var(--dur-short) var(--ease-out); border: 1px solid var(--brand-500); } #services .service-icon i { color: #fff; font-size: 24px; } #services .service-item:hover .service-icon { background: #fff; } #services .service-item:hover .service-icon i { color: var(--brand-500); } #services .service-title { margin-left: 80px; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; } #services .service-title a { color: var(--ink-900); } #services .service-description { margin-left: 80px; line-height: 24px; color: var(--ink-700); } /* Subscribe Section --------------------------------*/ #subscribe { background: linear-gradient(rgba(6, 182, 212, 0.85), rgba(16, 185, 129, 0.85)), url(../img/subscribe-bg.jpg) fixed center center; background-size: cover; padding: 80px 0; } #subscribe .subscribe-title { color: #fff; font-size: 28px; font-weight: 700; } #subscribe .subscribe-text { color: rgba(255, 255, 255, 0.92); } #subscribe .subscribe-btn-container { text-align: center; padding-top: 20px; } #subscribe .subscribe-btn { font-family: var(--font-sans); text-transform: uppercase; font-weight: 500; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 8px 20px; border-radius: var(--r-md); transition: 0.5s; margin: 10px; border: 2px solid #fff; color: #fff; } #subscribe .subscribe-btn:hover { background: #fff; border: 2px solid #fff; color: var(--brand-700); } /* Portfolio Section --------------------------------*/ #portfolio { background: var(--surface-0); padding: var(--sp-9) 0; } #portfolio .portfolio-item { background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; height: 260px; width: 100%; display: block; overflow: hidden; margin-bottom: var(--sp-5); border-radius: var(--r-md); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } #portfolio .portfolio-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left var(--dur-medium) var(--ease-out); z-index: 1; } #portfolio .portfolio-item:hover::before { left: 100%; } #portfolio .portfolio-item:hover { transform: translateY(-4px); box-shadow: var(--sh-3); } #portfolio .portfolio-item .details { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 182, 212, .92), rgba(14, 116, 144, .88)); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); text-align: center; border-radius: var(--r-md); } border-radius: var(--r-md); } #portfolio .portfolio-item .details h4 { font-size: var(--fs-h3); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); font-weight: 700; color: #fff; opacity: 0; } #portfolio .portfolio-item .details span { display: block; color: rgba(255, 255, 255, 0.85); font-size: var(--fs-caption); margin-top: var(--sp-2); transition: transform var(--dur-short) var(--ease-out) .1s, opacity var(--dur-short) var(--ease-out) .1s; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); opacity: 0; } #portfolio .portfolio-item:hover .details { opacity: 1; } #portfolio .portfolio-item:hover .details h4 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } #portfolio .portfolio-item:hover .details span { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } /* Testimonials Section --------------------------------*/ #testimonials { background: var(--surface-1); padding: 80px 0; } #testimonials .profile { text-align: center; } #testimonials .profile .pic { border-radius: 50%; border: 6px solid var(--surface-0); margin-bottom: 15px; overflow: hidden; height: 260px; width: 260px; box-shadow: var(--sh-2); } #testimonials .profile .pic img { max-width: 100%; } #testimonials .profile h4 { font-weight: 700; color: var(--brand-600); margin-bottom: 5px; } #testimonials .profile span { color: var(--ink-700); } #testimonials .quote { position: relative; background: var(--surface-0); padding: 60px; margin-top: 40px; font-size: 16px; font-style: italic; border-radius: var(--r-md); box-shadow: var(--sh-1); } #testimonials .quote b { display: inline-block; font-size: 22px; left: -9px; position: relative; top: -8px; } #testimonials .quote small { display: inline-block; right: -9px; position: relative; top: 4px; } /* Team Section --------------------------------*/ #team { background: var(--surface-1); padding: var(--sp-9) 0 var(--sp-7) 0; } #team .member { text-align: center; margin-bottom: var(--sp-5); } #team .member .pic { text-align: center; margin-bottom: var(--sp-5); overflow: hidden; height: 340px; width: 555px; border-radius: var(--r-md); position: relative; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } #team .member .pic::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent 0%, rgba(6, 182, 212, 0.18) 100%); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); } #team .member:hover .pic { transform: translateY(-6px); box-shadow: var(--sh-3); } #team .member:hover .pic::after { opacity: 1; } #team .member .pic img { width: 555px; height: 100%; transition: transform var(--dur-medium) var(--ease-out); } #team .member:hover .pic img { transform: scale(1.04); } #team .member h4 { font-weight: 700; margin-bottom: var(--sp-1); color: var(--ink-900); font-size: var(--fs-h3); line-height: var(--lh-h3); } #team .member span { font-style: normal; display: block; font-size: var(--fs-caption); color: var(--ink-500); line-height: var(--lh-caption); } #team .member .social { margin-top: var(--sp-4); } #team .member .social a { color: var(--ink-500); transition: color var(--dur-micro) var(--ease-out); } #team .member .social a:hover { color: var(--brand-600); } #team .member .social i { font-size: 18px; margin: 0 var(--sp-1); } /* Contact Section --------------------------------*/ #contact { background: var(--surface-1); padding: var(--sp-9) 0; } #contact .info { color: var(--ink-900); } #contact .info i { font-size: var(--fs-h2); color: var(--brand-600); float: left; } #contact .info p { width: 230px; padding: 0 0 var(--sp-2) 50px; line-height: 1.5; color: var(--ink-700); margin-bottom: var(--sp-3); } #contact .info .img{ float: left; height: 36px; width: 36px; } #contact .info .img1{ background: url(../img/icons/icon_all.png) 0 -167px no-repeat; } #contact .info .img2{ background: url(../img/icons/icon_all.png) -42px -167px no-repeat; } #contact .info .img3{ background: url(../img/icons/icon_all.png) -84px -167px no-repeat; } #contact .info .contact-ico { float: left; width: 28px; height: 28px; color: var(--brand-600); margin-right: var(--sp-3); } #contact .form{ height: 300px; width: 600px } #contact .form #sendmessage { color: var(--accent-600); border: 1px solid var(--accent-500); display: none; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; background: var(--accent-50); border-radius: var(--r-md); } #contact .form #errormessage { color: var(--danger-500); display: none; border: 1px solid var(--danger-500); text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; background: #FEF2F2; border-radius: var(--r-md); } #contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show { display: block; } #contact .form .validation { color: red; display: none; margin: 0 0 20px; font-weight: 400; font-size: 13px; } #contact .form input, #contact .form textarea { border-radius: 0; box-shadow: none; } #contact .form button[type="submit"] { background: var(--brand-500); border: 0; padding: 0 var(--sp-5); color: #fff; height: 44px; border-radius: var(--r-md); font-weight: 500; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } #contact .form button[type="submit"]:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: var(--sh-2); } /*Client*/ #client { margin-top: var(--sp-8); margin-bottom: var(--sp-8); text-align: center; padding: 0 var(--sp-5); } .logo-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding: var(--sp-4) 0; } .logo-marquee:hover .logo-track { animation-play-state: paused; } .logo-track { display: flex; gap: var(--sp-9); width: max-content; animation: logoScroll 36s linear infinite; } .logo-cell { flex: 0 0 auto; height: 80px; display: flex; align-items: center; justify-content: center; padding: 0 var(--sp-4); } .logo-cell img { max-height: 64px; max-width: 140px; filter: grayscale(100%); opacity: .55; transition: filter var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); } .logo-cell img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.06); } @keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } /* 18 cells = 2 sets of 9, so -50% = exactly one set */ } /*-------------------------------------------------------------- # Footer · 浅底深字 --------------------------------------------------------------*/ #footer { margin-top: 0; background: var(--surface-1); padding: var(--sp-7) 0; color: var(--ink-700); border-top: 1px solid var(--ink-100); } #footer .copyright { text-align: center; font-size: var(--fs-caption); color: var(--ink-500); padding-top: var(--sp-5); border-top: 1px solid var(--ink-100); margin-top: var(--sp-5); } #footer .credits { padding-top: var(--sp-2); text-align: center; font-size: var(--fs-caption); color: var(--ink-500); } #footer a { color: var(--ink-700); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); } #footer a:hover { color: var(--brand-600); } #footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); } #footer .footer-grid strong { color: var(--ink-900); font-weight: 600; } #footer .footer-grid a { text-decoration: none; } #footer .footer-grid small { display: block; line-height: 1.7; color: var(--ink-700); } #footer .footer-nav-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 6px; } #footer .footer-nav-grid a { display: block; white-space: nowrap; } #footer .footer-nav-grid a.full-row { grid-column: 1 / -1; } /*lianxifangshi */ .bottom-box { max-width: 1200px; margin: 0 auto; position: relative; padding: 2% 0; width: 100%; } .bottom-box p { color: #fff; font-size: 18px; float: left; width: 800px; } .bottom-ul { position: absolute; right: 100px; top: 15px; bottom: 15px; width: 40%; } .bottom-ul li { width: 40px; height: 75px; float: left; margin-left: 25px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-duration: .7s; transition-duration: .7s; position: relative } .bottom-ul li img { position: absolute; width: 100px; height: 100px; top: -120px; left: -30px; display: none; z-index: 100; } .bottom-ul li a { width: 40px; height: 40px; float: left; background: #fff url('../img/ur/b-img.png') center no-repeat; border-radius: 50% } .bottom-ul li:nth-child(1) a { background-position: 10px 10px } .bottom-ul li:nth-child(2) a { background-position: -22px 10px } .bottom-ul li:nth-child(3) a { background-position: -58px 10px } .bottom-ul li:nth-child(4) a { background-position: -90px 10px } .bottom-ul li:hover { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-duration: .7s; transition-duration: .7s } .bottom-ul li span { color: #FFF; text-align: center; display: block; line-height: 30px; font-size: 12px } .iad-top { display: none; color: #fff; background: var(--brand-500) url(../img/ur/f.png) center center no-repeat; border-radius: var(--r-pill); line-height: 105px; font-size: 20px; cursor: pointer; position: fixed; right: 10px; bottom: 50px; z-index: 10; text-align: center; width: 60px; height: 60px; transition: all var(--dur-short) var(--ease-out); box-shadow: var(--sh-2); } .iad-top:hover{ background-color: var(--brand-600); transform: translateY(-3px) scale(1.05); box-shadow: var(--sh-3); } /* x */ .col-sm-4{ margin-bottom: 30px; } #join .card { transition: all var(--dur-short) var(--ease-out); border: 1px solid var(--ink-100); box-shadow: var(--sh-1); height: 100%; border-radius: var(--r-md); overflow: hidden; background: var(--surface-0); } #join .card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--brand-500); } #join .card-body { padding: 30px; } #join .card-title { color: var(--ink-900); margin-bottom: 20px; font-size: var(--fs-h3); font-weight: 700; } #join .join-dot { list-style: none; padding: 0; margin: 0; } #join .join-dot li { padding: 10px 0; border-bottom: 1px solid var(--ink-100); transition: all var(--dur-short) var(--ease-out); color: var(--ink-700); font-size: var(--fs-caption); line-height: 1.6; } #join .join-dot li:last-child { border-bottom: 0; } #join .join-dot li:hover { padding-left: 10px; border-bottom-color: var(--brand-500); color: var(--ink-900); } .col-md-3{ width: 50%; } /* 停 */ .row-icon{ width: 66px; height: 66px; float: left; border-radius: 50%; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-style: preserve-3d; } #services .service-item:hover .row-icon { transform: rotateY(180deg) scale(1.1); } #services .service-item:hover .icon-1{ background: url(../img/icons/icon_all.png) 0 -83px no-repeat; } #services .service-item:hover .icon-2{ background: url(../img/icons/icon_all.png) -69px -82px no-repeat; } #services .service-item:hover .icon-3{ background: url(../img/icons/icon_all.png) -137px -82px no-repeat; } #services .service-item:hover .icon-4{ background: url(../img/icons/icon_all.png) -206px -83px no-repeat; } #services .service-item:hover .icon-5{ background: url(../img/icons/icon_all.png) -277px -83px no-repeat; } .icon-1{ transition: 0.3s; background: url(../img/icons/icon_all.png) 0 -5px no-repeat; } #services .row .service-item:hover .icon-1{ background: url(../img/icons/icon_all.png) 0 -83px no-repeat; } .icon-2{ transition: 0.3s; background: url(../img/icons/icon_all.png) -68px -4px no-repeat; } #services .row .service-item:hover .icon-2{ background: url(../img/icons/icon_all.png) -69px -82px no-repeat; } .icon-3{ transition: 0.3s; background: url(../img/icons/icon_all.png) -136px -4px no-repeat; } #services .row .service-item:hover .icon-3{ background: url(../img/icons/icon_all.png) -137px -82px no-repeat; } .icon-4{ transition: 0.3s; background: url(../img/icons/icon_all.png) -205px -5px no-repeat; } #services .row .service-item:hover .icon-4{ background: url(../img/icons/icon_all.png) -206px -83px no-repeat; } .icon-5{ transition: 0.3s; background: url(../img/icons/icon_all.png) -276px -5px no-repeat; } #services .row .service-item:hover .icon-5{ background: url(../img/icons/icon_all.png) -277px -83px no-repeat; } .col-md-8{ width: 100%; } @media (min-width: 1200px){ #about .about_row .welfare ul li:nth-child(1) p span{ background: url(../img/icons/welfare-icon.png) -206px 0 no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(2) p span{ background: url(../img/icons/welfare-icon.png) -69px -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(3) p span{ background: url(../img/icons/welfare-icon.png) -206px -156px no-repeat; background-size: 264px 230px; margin-left: 70px } #about .about_row .welfare ul li:nth-child(4) p span{ background: url(../img/icons/welfare-icon.png) -68px 0 no-repeat; background-size: 264px 230px; margin-left: 70px } #about .about_row .welfare ul li:nth-child(5) p span{ background: url(../img/icons/welfare-icon.png) 1px -156px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(6) p span{ background: url(../img/icons/welfare-icon.png) -221px -80px no-repeat; background-size: 280px 235px; } #about .about_row .welfare ul li:nth-child(7) p span{ background: url(../img/icons/welfare-icon.png) 0 -78px no-repeat; background-size: 264px 230px; margin-left: 70px } #about .about_row .welfare ul li:nth-child(8) p span{ background: url(../img/icons/welfare-icon.png) no-repeat; background-size: 264px 230px; margin-left: 70px } #about .about_row .welfare ul li:nth-child(9) p span{ background: url(../img/icons/welfare-icon.png) -159px -4px no-repeat; background-size: 300px 270px; } #about .about_row .welfare ul li:nth-child(10) p span{ background: url(../img/icons/welfare-icon.png) -137px -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(11) p span{ background: url(../img/icons/welfare-icon.png) -137px -155px no-repeat; background-size: 264px 230px; margin-left: 70px } #about .about_row .welfare ul li:nth-child(12) p span{ background: url(../img/icons/welfare-icon.png) -68px -156px no-repeat; background-size: 264px 230px; margin-left: 70px; } } @media (min-width: 992px) and (max-width:1199px) { #hero { display: table; width: 100%; height: 100vh; background: url("../img/bgimgs/hero-bg2.jpg") center center fixed; /* background-size: cover; */ background-repeat: no-repeat; background-size:100% 100%; } #services { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("../img/bgimgs") fixed center center; background-size: 100% 100%; padding: 80px 0 60px 0; } #header{ height: 80px; width: 100%; } #about .row .col-md-12{ padding: 0; } .container{ padding: 0; } #about{ height: auto; } #about .about-text{ width: 100%; margin: 0; font-size: 16px; height: auto; } #about img{ width: 100%; height: auto; } #about .about_row .col-md-12{ margin-left: -15px; padding: 0; } #about .about_row img{ /* display: block; */ height: auto; width: 100%; } #about .about_row .welfare ul{ margin-top: var(--sp-5); height: auto; width: 100%; padding: 0; } #about .about_row .welfare ul li{ width: 100%; float: none; margin: 0; } #about .about_row .welfare ul li:nth-child(1) p span{ background: url(../img/icons/welfare-icon.png) -206px 0 no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(2) p span{ background: url(../img/icons/welfare-icon.png) -69px -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(3) p span{ background: url(../img/icons/welfare-icon.png) -206px -156px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(4) p span{ background: url(../img/icons/welfare-icon.png) -68px 0 no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(5) p span{ background: url(../img/icons/welfare-icon.png) 1px -156px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(6) p span{ background: url(../img/icons/welfare-icon.png) -221px -80px no-repeat; background-size: 280px 235px; } #about .about_row .welfare ul li:nth-child(7) p span{ background: url(../img/icons/welfare-icon.png) 0 -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(8) p span{ background: url(../img/icons/welfare-icon.png) no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(9) p span{ background: url(../img/icons/welfare-icon.png) -159px -4px no-repeat; background-size: 300px 270px; } #about .about_row .welfare ul li:nth-child(10) p span{ background: url(../img/icons/welfare-icon.png) -137px -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(11) p span{ background: url(../img/icons/welfare-icon.png) -137px -155px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(12) p span{ background: url(../img/icons/welfare-icon.png) -68px -156px no-repeat; background-size: 264px 230px; } .col-md-4{ width: 50%; } #services .service-item{ padding-left: 60px; } #portfolio .portfolio-item img { width: 100%; height: 310px; } .col-md-3{ height: 310px; margin-bottom: 30px; } #team .member{ height: 100%; } #team .member .pic{ width: 100%; height: 100%;; } #team .member .pic img{ width: 100%; height: 100%; } .iad-top{ right: 35px; } } @media (min-width: 768px) and (max-width:991px){ #hero { display: table; width: 100%; height: 100vh; background: url("../img/bgimgs/hero-bg2.jpg") center center fixed; /* background-size: cover; */ background-repeat: no-repeat; background-size:100% 100%; } #services { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("../img/bgimgs") fixed center center; background-size: 100% 100%; padding: 80px 0 60px 0; } #header{ height: 80px; width: 100%; } #mobile-nav { background: rgba(0, 0, 0, 0.5); left: -260px; width: 260px; } #about .row .col-md-12{ padding: 0; } #about{ height: auto; } #about .about-text{ width: 100%; margin: 0; font-size: 16px; height: auto; } #about .about-container { height: auto; font-size: 15px; } #about img{ width: 100%; height: auto; } #about .about_row{ margin: 0; height: auto; } #about .about_row .col-md-12{ padding: 0; } #about .about_row img{ /* display: block; */ height: auto; width: 100%; } #services .service-item{ width: 50%; float: left; } #about .about_row .welfare{ margin-top: 630px; /* background-color: red; */ height: 800px; width: 100%; } #about .about_row .welfare ul{ margin-top: 280px; height: 100%; width: 100%; padding: 0; } #about .about_row .welfare ul li p{ font-size: 14px; width: 320px; } #about .about_row .welfare ul li:nth-child(2){ margin-left: 84px; } #about .about_row .welfare ul li:nth-child(4){ margin-left: 84px; } #about .about_row .welfare ul li:nth-child(6){ margin-left: 84px; } #about .about_row .welfare ul li:nth-child(8){ margin-left: 84px; } #about .about_row .welfare ul li:nth-child(10){ margin-left: 84px; } #about .about_row .welfare ul li:nth-child(12){ margin-left: 84px; } #about .about_row .welfare ul li:nth-child(1) p span{ background: url(../img/icons/welfare-icon.png) -206px 0 no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(2) p span{ background: url(../img/icons/welfare-icon.png) -69px -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(3) p span{ background: url(../img/icons/welfare-icon.png) -206px -156px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(4) p span{ background: url(../img/icons/welfare-icon.png) -68px 0 no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(5) p span{ background: url(../img/icons/welfare-icon.png) 1px -156px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(6) p span{ background: url(../img/icons/welfare-icon.png) -221px -80px no-repeat; background-size: 280px 235px; } #about .about_row .welfare ul li:nth-child(7) p span{ background: url(../img/icons/welfare-icon.png) 0 -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(8) p span{ background: url(../img/icons/welfare-icon.png) no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(9) p span{ background: url(../img/icons/welfare-icon.png) -159px -4px no-repeat; background-size: 300px 270px; } #about .about_row .welfare ul li:nth-child(10) p span{ background: url(../img/icons/welfare-icon.png) -137px -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(11) p span{ background: url(../img/icons/welfare-icon.png) -137px -155px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(12) p span{ background: url(../img/icons/welfare-icon.png) -68px -156px no-repeat; background-size: 264px 230px; } #services .service-item { padding-left: 40px } #portfolio .portfolio-item img { width: 100%; height: 480px; } #team .member .pic{ width: 100%; height: 400px; } #team .member .pic img{ width: 100%; height: 100%; } #team .row .col-md-3{ width: 100%; } #contact .info p{ font-size: 15px } .map{ width: 560px; } #contact .form{ height: 300px; width: 100%; } .iad-top:hover{ background-color: var(--brand-500) ; } #mobile-nav-toggle { margin: 20px 20px 0 0; } } @media (max-width: 767px) { #hero { display: table; width: 100%; /* height: 585px; */ background: url("../img/bgimgs/hero-bg2.jpg") top center; /* background-size: cover; */ background-repeat: no-repeat; background-size:100% 100%; } #services { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("../img/bgimgs") fixed center center; background-size: 100% 100%; padding: 80px 0 60px 0; } #about .row .col-md-12{ padding: 0; } #about{ height: auto; } #about .about-text{ width: 100%; margin: 0; font-size: 12px; height: auto; } #about img{ width: 100%; height: auto; } #about .about_row{ margin: 0; height: auto; } #about .about_row .col-md-12{ padding: 0; } #about .about_row img{ display: block; height: auto; } #about .about_row .welfare{ margin-top: var(--sp-5); height: auto; width: 100%; } #about .about_row .welfare ul{ margin-top: 0; height: auto; width: 100%; padding: 0; } #about .about_row .welfare ul li{ margin-right: 30px } #about .about_row .welfare ul li:nth-child(1) p span{ background: url(../img/icons/welfare-icon.png) -206px 0 no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(2) p span{ background: url(../img/icons/welfare-icon.png) -69px -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(3) p span{ background: url(../img/icons/welfare-icon.png) -206px -156px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(4) p span{ background: url(../img/icons/welfare-icon.png) -68px 0 no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(5) p span{ background: url(../img/icons/welfare-icon.png) 1px -156px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(6) p span{ background: url(../img/icons/welfare-icon.png) -221px -80px no-repeat; background-size: 280px 235px; } #about .about_row .welfare ul li:nth-child(7) p span{ background: url(../img/icons/welfare-icon.png) 0 -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(8) p span{ background: url(../img/icons/welfare-icon.png) no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(9) p span{ background: url(../img/icons/welfare-icon.png) -159px -4px no-repeat; background-size: 300px 270px; } #about .about_row .welfare ul li:nth-child(10) p span{ background: url(../img/icons/welfare-icon.png) -137px -78px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(11) p span{ background: url(../img/icons/welfare-icon.png) -137px -155px no-repeat; background-size: 264px 230px; } #about .about_row .welfare ul li:nth-child(12) p span{ background: url(../img/icons/welfare-icon.png) -68px -156px no-repeat; background-size: 264px 230px; } .portfolio-item{ width: 345px; } #services .service-item { margin-bottom: 20px; padding-left: 35px; } #portfolio{ padding: 20px 0; } #portfolio .portfolio-item img { width: 100%; } #team .member .pic{ width: 100%; height: 220px; } #team .member .pic img{ width: 100%; height: 100%; } #team .row .col-md-3{ width: 100%; } #contact .form{ height: 220px; width: 100%; } #client .col-sm-4 { width:50%; float: left; } #footer .copyright { font-size: 12px } #client { margin-bottom: 0px; } .iad-top { width: 40px; height:40px; } .iad-top:hover{ background-color: var(--brand-500) ; } #join .row .col-sm-4{ height: auto; margin-bottom: var(--sp-5); } #join .row .col-sm-4 .card{ height: auto; } } /*-------------------------------------------------------------- # Mobile small (≤480px) — Impeccable 响应式补全 --------------------------------------------------------------*/ @media (max-width: 480px) { :root { --fs-display: 36px; --fs-h1: 28px; --fs-h2: 22px; } #hero h1 { font-size: var(--fs-display); } #hero h4 { font-size: var(--fs-h2); } /* 团队卡片：移动端单列，避免 4-列挤压 */ #team .row .col-md-3 { width: 100%; float: none; } /* client logo：移动端 2 列整齐 */ #client .row .col-sm-4 { width: 50%; float: left; } /* 团队卡片图移动端更紧凑 */ #team .member .pic { width: 100%; height: 220px; } #team .member .pic img { width: 100%; height: 100%; } } /*-------------------------------------------------------------- # Footer grid 响应式收尾（>480 自动恢复 3 列，≤480 单列） --------------------------------------------------------------*/ @media (max-width: 480px) { #footer .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); } #footer .footer-nav-grid { grid-template-columns: 1fr 1fr; } } /*-------------------------------------------------------------- # Services 区重构 — 关键指标带 + 3 大核心能力 + 完整清单 --------------------------------------------------------------*/ .stat-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin: var(--sp-7) 0 var(--sp-9) 0; padding: var(--sp-7) var(--sp-6); background: linear-gradient(135deg, var(--surface-0) 0%, var(--surface-1) 100%); border-radius: var(--r-lg); box-shadow: var(--sh-2); position: relative; overflow: hidden; } .stat-bar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 50% 0%, rgba(14, 165, 233, .25), transparent 70%); pointer-events: none; } .stat { text-align: center; color: #fff; position: relative; } .stat-num { display: block; font-size: var(--fs-display); line-height: 1; font-weight: 600; letter-spacing: -0.02em; background: linear-gradient(180deg, #fff 0%, rgba(186, 230, 253, .9) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: var(--sp-2); } .stat-label { font-size: var(--fs-caption); color: rgba(255, 255, 255, .65); letter-spacing: 0.05em; } .capability-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .capability { width: 100%; max-width: 100%; min-width: 0; background-color: var(--c-bg-1); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right -20px top -20px; background-size: 220px 220px; border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: var(--sp-7) var(--sp-6) var(--sp-6) var(--sp-6); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-size var(--dur-medium) var(--ease-out); position: relative; overflow: hidden; } .capability:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--brand-500); background-size: 260px 260px; } .capability:nth-child(2) { /* 中间卡：智能订单 —— 抽象线条网格 */ background-image: url("data:image/svg+xml;utf8,"); background-color: #f0f9ff; border-color: var(--brand-500); } .capability:nth-child(3) { /* 右卡：全球履约 —— 抽象经纬球 */ background-image: url("data:image/svg+xml;utf8,"); background-position: right -30px top -10px; background-size: 240px 240px; } .capability-num { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; font-size: var(--fs-h3); color: var(--brand-500); font-weight: 600; margin-bottom: var(--sp-3); letter-spacing: 0.05em; } .capability-title { font-size: var(--fs-h2); color: var(--ink-900); font-weight: 600; margin-bottom: var(--sp-3); } .capability-desc { font-size: var(--fs-body); color: var(--ink-700); line-height: var(--lh-body); margin-bottom: var(--sp-5); } .capability-list { list-style: none; padding: 0; margin: 0; } .capability-list li { padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); position: relative; color: var(--ink-900); font-size: var(--fs-body); } .capability-list li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); } .all-features { margin-top: var(--sp-9); text-align: center; } .all-features-title { font-size: var(--fs-caption); color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: var(--sp-5); } .all-features-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4); } .all-features-grid span { display: inline-block; padding: var(--sp-2) var(--sp-4); background: var(--surface-0); border: 1px solid var(--ink-100); border-radius: var(--r-pill); font-size: var(--fs-caption); color: var(--ink-700); transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out); } .all-features-grid span:hover { color: var(--brand-500); border-color: var(--brand-500); transform: translateY(-2px); } @media (max-width: 992px) { .stat-bar { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); padding: var(--sp-5); } .stat-num { font-size: var(--fs-h1); } .capability-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .stat-bar { grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding: var(--sp-4); } .stat-num { font-size: var(--fs-h2); } .all-features-grid span { font-size: var(--fs-caption); padding: var(--sp-1) var(--sp-3); } } /* ============================================================ 优化补丁 · UI/UX Pro Max · 2026-07-21 覆盖范围：skip-link / dark mode / 响应式 / Hero CTA / 表单抽屉 / 招聘卡 / Team 文化墙 / Bento Services / 滚动同步 active / prefers-reduced-motion ============================================================ */ /* ---------- 1. (原补丁 token 块已废弃,统一使用顶部 :root) ---------- */ body, .section-description, .capability-desc, .join-dot li { transition: background-color var(--dur-medium) var(--ease-out), color var(--dur-medium) var(--ease-out), border-color var(--dur-medium) var(--ease-out); } /* ---------- 2. Skip link / 全局 A11y 增强 ---------- */ .skip-link { position: fixed; top: -100px; left: 8px; z-index: 9999; padding: 10px 16px; background: var(--ink-900); color: #fff; border-radius: var(--r-md); font-weight: 600; text-decoration: none; transition: top var(--dur-short) var(--ease-out); } .skip-link:focus, .skip-link:focus-visible { top: 8px; color: #fff; outline: 2px solid var(--brand-500); outline-offset: 2px; } /* ---------- 3. 主题切换按钮 (Header 右上) ---------- */ .theme-toggle { appearance: none; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; width: 36px; height: 36px; border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: var(--sp-3); transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); } .theme-toggle:hover { background: rgba(255,255,255,.08); border-color: var(--brand-500); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* 滚动后毛玻璃 header */ .is-sticky #header { background: rgba(11, 19, 43, 0.78) !important; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.06); } /* ---------- 4. Hero 双 CTA ---------- */ .hero-cta-row { display: inline-flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); } .hero-cta-row .btn--ghost.btn--lg { border-color: var(--brand-500); color: var(--brand-600); background: transparent; } .hero-cta-row .btn--ghost.btn--lg:hover { background: var(--brand-500); color: #fff; border-color: var(--brand-500); } /* Hero 高度：min(dvh, 720px) 解决 iOS 工具栏抖动 */ #hero { min-height: min(100vh, 720px); } @media (max-width: 768px) { #hero { min-height: min(100vh, 640px); } } /* ---------- 5. (原试用申请抽屉样式块已移除) ---------- */ /* ---------- 6. About 响应式 (放弃固定 500/540/340) ---------- */ #about .about-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-7); align-items: stretch; } #about .about-row img { width: 100%; height: 100%; max-height: 340px; object-fit: cover; float: none; border-radius: var(--r-md); } #about .about-text { width: auto; height: auto; float: none; margin: 0 0 var(--sp-5) 0; } @media (max-width: 768px) { #about .about-row { grid-template-columns: 1fr; } #about .about-row img { max-height: 240px; } } /* About 福利行：grid 而非 float+固定高 */ #about .about_row { width: 100%; height: auto; float: none; margin-left: 0; padding-top: var(--sp-5); line-height: 2.5em; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; } #about .about_row img { height: auto; max-height: 420px; width: 100%; object-fit: cover; float: none; } @media (max-width: 768px) { #about .about_row { grid-template-columns: 1fr; } } #about .about_row .welfare ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); } @media (max-width: 480px) { #about .about_row .welfare ul { grid-template-columns: 1fr; } } #about .about_row .welfare ul li { float: none; margin: 0; width: auto; height: auto; list-style: none; padding: var(--sp-2) var(--sp-3); background: var(--surface-1); border-radius: var(--r-md); border: 1px solid var(--ink-100); transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out); } #about .about_row .welfare ul li:hover { border-color: var(--brand-500); transform: translateX(2px); } #about .about_row .welfare ul li p { color: var(--ink-900); height: auto; text-align: left; font-size: var(--fs-caption); margin: 0; } /* ---------- 7. Team 文化墙 (替代 2 张人物卡) ---------- */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-7); } .team-value { background: var(--surface-0); border: 1px solid var(--ink-100); border-radius: var(--r-md); padding: var(--sp-5); text-align: center; transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } .team-value:hover { transform: translateY(-4px); border-color: var(--brand-500); box-shadow: var(--sh-2); } .team-value .ico { width: 48px; height: 48px; margin: 0 auto var(--sp-3); color: var(--brand-600); } .team-value h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-h3); color: var(--ink-900); } .team-value p { margin: 0; font-size: var(--fs-caption); color: var(--ink-700); } @media (max-width: 768px) { .team-grid { grid-template-columns: 1fr 1fr; } } .team-photos { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; gap: var(--sp-3); } .team-photos > a { border-radius: var(--r-md); overflow: hidden; position: relative; display: block; } .team-photos > a:nth-child(1) { grid-row: span 2; } .team-photos > a img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-medium) var(--ease-out); } .team-photos > a:hover img { transform: scale(1.04); } @media (max-width: 768px) { .team-photos { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 180px); } .team-photos > a:nth-child(1) { grid-row: span 2; } } /* ---------- 8. 招聘卡增强 ---------- */ .job-card { position: relative; } .job-card .job-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .job-card .job-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-caption); background: var(--brand-50); color: var(--brand-700); border: 1px solid color-mix(in srgb, var(--brand-500) 25%, transparent); } .job-card .job-tag svg { width: 12px; height: 12px; } .job-card .job-apply { margin-top: var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--brand-600); font-weight: 500; font-size: var(--fs-caption); } .job-card .job-apply:hover { color: var(--brand-700); } .job-card .job-apply svg { width: 14px; height: 14px; transition: transform var(--dur-short) var(--ease-out); } .job-card:hover .job-apply svg { transform: translateX(3px); } /* ---------- 9. stat-bar 倒计时动画 + 来源时间 ---------- */ .stat-bar { position: relative; } .stat-meta { text-align: center; font-size: var(--fs-caption); color: var(--ink-500); margin-top: var(--sp-4); } /* ---------- 10. Hero prefers-reduced-motion 降级 ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } #hero::before { display: none; } #hero::after { display: none; } } /* ---------- 11. 滚动同步 active 锚点 ---------- */ .nav-menu a { position: relative; } /* ---------- 12. 修复 col-md-3 副作用 (Bootstrap 默认 25%,这里被全局覆写 50%) ---------- */ /* 之前 .col-md-3 { width:50%; } 影响了 #team / #contact,这里只限定到 #join */ #join .col-sm-4 { margin-bottom: 30px; } /* ---------- 13. 移动端 hero subtitle 字号 ---------- */ @media (max-width: 480px) { .hero-title { font-size: var(--fs-h1); } .hero-subtitle { font-size: 16px; } .hero-cta-row .btn--lg { height: 48px; font-size: 15px; padding: 0 var(--sp-5); } } /* ---------- 14. Capability 卡 - 暗色适配 ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .capability { background-color: var(--c-bg-1); } :root:not([data-theme="light"]) .capability:nth-child(2) { background-color: color-mix(in srgb, var(--brand-500) 8%, var(--c-bg-1)); } } :root[data-theme="dark"] .capability { background-color: var(--c-bg-1); } :root[data-theme="dark"] .capability:nth-child(2) { background-color: color-mix(in srgb, var(--brand-500) 8%, var(--c-bg-1)); } /* ---------- 15. all-features 暗色适配 ---------- */ :root[data-theme="dark"] .all-features-grid span { background: var(--surface-1); color: var(--ink-700); } /* ---------- 16. stat-meta 暗色适配已由 token 自动覆盖 ---------- */ /* ---------- 17. 返回顶部按钮 - 触控目标 ≥ 44px ---------- */ .iad-top { width: 48px !important; height: 48px !important; right: 20px !important; bottom: 24px !important; display: inline-flex; align-items: center; justify-content: center; background-color: var(--brand-500); background-image: none !important; line-height: 1 !important; font-size: 0 !important; border-radius: var(--r-pill) !important; } .iad-top svg { width: 22px; height: 22px; } .iad-top:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; } /* ---------- 18. 图片缺失 alt 视觉占位 ---------- */ img:not([alt]) { outline: 2px dashed var(--warning-500); outline-offset: -2px; } /* ---------- 19. Logo + slogan in Header ---------- */ .header-brand { display: flex; align-items: center; gap: var(--sp-3); } .header-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .header-brand-text strong { color: var(--ink-900) !important; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.05em; -webkit-text-fill-color: var(--ink-900) !important; } .header-brand-text small { color: var(--ink-500) !important; font-size: 11px; letter-spacing: 0.03em; -webkit-text-fill-color: var(--ink-500) !important; } @media (max-width: 768px) { .header-brand-text { display: none; } } /* ---------- 20. CSS 字体回退已更新到 :root --font-sans，body 同步 ---------- */ body { font-family: var(--font-sans); } /* ---------- 20.5 关键组件兜底覆盖 · 防 Bootstrap / sticky 副作用 ---------- */ .stat-num { color: #0F172A !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 4px rgba(255,255,255,.4); } .stat-label { color: #334155 !important; font-weight: 600 !important; font-size: 14px !important; } .stat-bar { background: linear-gradient(135deg, #A5F3FC 0%, #6EE7B7 100%) !important; border: 1px solid #34D399; } .nav-menu > li > a { color: var(--ink-900) !important; } .nav-menu > li > a:hover { color: var(--brand-600) !important; } .nav-menu > li.menu-active > a { color: var(--brand-600) !important; font-weight: 600 !important; } #header { background: rgba(255, 255, 255, 0.92) !important; color: var(--ink-900) !important; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-bottom: 1px solid var(--ink-100) !important; } #header #logo h1 a, #header #logo h1 a:hover { color: var(--ink-900) !important; } #header.header-fixed, .is-sticky #header { background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); } /* 隐藏雪碧图 span */ #about .about_row .welfare ul li p span { display: none !important; } /* Header brand 文字颜色强制 */ .header-brand-text strong { color: var(--ink-900) !important; -webkit-text-fill-color: var(--ink-900) !important; } .header-brand-text small { color: var(--ink-500) !important; -webkit-text-fill-color: var(--ink-500) !important; } /* 企业福利 banner 图:居中 + 圆角 + 浅浮阴影 · 完整显示整张图 */ .welfare-banner { display: block; width: 100%; max-width: 1100px; height: auto !important; max-height: none !important; object-fit: contain !important; margin: 0 auto var(--sp-5); border-radius: var(--r-lg); box-shadow: var(--sh-2); transition: transform var(--dur-medium) var(--ease-out), box-shadow var(--dur-medium) var(--ease-out); } .welfare-banner:hover { transform: scale(1.01); box-shadow: var(--sh-3); } /* 合作平台 logo:确认 60% 灰 + 浅品牌青 tint */ .logo-cell img { max-height: 48px !important; max-width: 120px !important; filter: grayscale(60%) opacity(0.7) !important; transition: filter var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out) !important; } .logo-cell img:hover { filter: grayscale(0%) opacity(1) !important; transform: scale(1.06) !important; } .stat-label { color: #334155 !important; font-weight: 600 !important; font-size: 14px !important; } .nav-menu > li > a { color: var(--ink-900) !important; } .nav-menu > li > a:hover { color: var(--brand-600) !important; } .nav-menu > li.menu-active > a { color: var(--brand-600) !important; font-weight: 600 !important; } #header { background: rgba(255, 255, 255, 0.92) !important; color: var(--ink-900) !important; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-bottom: 1px solid var(--ink-100) !important; } #header #logo h1 a, #header #logo h1 a:hover { color: var(--ink-900) !important; } #header.header-fixed, .is-sticky #header { background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); } /* 隐藏雪碧图 span */ #about .about_row .welfare ul li p span { display: none !important; } /* Header brand 文字颜色强制 */ .header-brand-text strong { color: var(--ink-900) !important; -webkit-text-fill-color: var(--ink-900) !important; } .header-brand-text small { color: var(--ink-500) !important; -webkit-text-fill-color: var(--ink-500) !important; } /* ---------- 21. 复制邀请码按钮 · header 内可见按钮 ---------- */ .copy-code-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--sp-3); padding: 6px 12px; border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-700); border: 1px solid color-mix(in srgb, var(--brand-500) 30%, transparent); font-size: var(--fs-caption); font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out); } .copy-code-btn:hover { background: var(--brand-500); color: #fff; border-color: var(--brand-500); transform: translateY(-1px); } .copy-code-btn:active { transform: translateY(0); } .copy-code-btn svg { width: 14px; height: 14px; } @media (max-width: 768px) { .copy-code-btn span { display: none; } .copy-code-btn { padding: 6px 8px; } } /* ---------- 22. Hero 强排版 — 移动端避免换行凌乱 ---------- */ @media (max-width: 480px) { .hero-subtitle { white-space: normal; line-height: 1.5; } .hero-subtitle .typed { display: inline-block; } } /* ---------- 23. 左侧小工具组 ---------- */ .side-widget { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); z-index: 999; } .side-widget-list { list-style: none; margin: 0; padding: var(--sp-3); background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--ink-100); border-radius: var(--r-pill); box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: var(--sp-2); } .side-widget-item { position: relative; display: flex; align-items: center; cursor: pointer; } .side-widget-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--surface-0); color: var(--ink-700); border: 1px solid var(--ink-100); display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: opacity var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } .side-widget-ico svg { width: 18px; height: 18px; } .side-widget-label { position: absolute; left: 48px; top: 50%; transform: translateY(-50%) translateX(-4px); white-space: nowrap; padding: 6px 12px; background: var(--ink-900); color: #fff; font-size: var(--fs-caption); font-weight: 500; border-radius: var(--r-md); opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); } .side-widget-label::before { content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; background: var(--ink-900); } .side-widget-item:hover .side-widget-ico, .side-widget-item.is-active .side-widget-ico { opacity: 1; background: var(--brand-500); color: #fff; border-color: var(--brand-500); transform: scale(1.05); box-shadow: var(--sh-2); } .side-widget-item:hover .side-widget-label { opacity: 1; transform: translateY(-50%) translateX(0); } .side-widget-item.is-copied .side-widget-ico { background: var(--success-500); border-color: var(--success-500); color: #fff; opacity: 1; } /* 移动端:隐藏左侧工具组,用 FAB 替代 */ @media (max-width: 768px) { .side-widget { display: none; } } /* 移动端 FAB */ .side-widget-fab { display: none; position: fixed; right: 16px; bottom: 24px; z-index: 999; width: 48px; height: 48px; border-radius: var(--r-pill); background: var(--brand-500); color: #fff; border: 0; cursor: pointer; box-shadow: var(--sh-3); align-items: center; justify-content: center; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } .side-widget-fab:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(6, 182, 212, 0.4); } .side-widget-fab svg { width: 22px; height: 22px; } /* 复制反馈 Toast */ .copy-toast { position: fixed; left: 80px; top: 50%; transform: translateY(-50%) translateX(-8px); padding: var(--sp-3) var(--sp-5); background: var(--ink-900); color: #fff; font-size: var(--fs-caption); font-weight: 500; border-radius: var(--r-md); box-shadow: var(--sh-3); opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); z-index: 1000; white-space: nowrap; } .copy-toast.is-show { opacity: 1; transform: translateY(-50%) translateX(0); } .copy-toast.is-success { background: var(--success-500); } .copy-toast.is-error { background: var(--danger-500); } @media (max-width: 768px) { .side-widget-fab { display: flex; } }