@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,500;0,700;1,500&display=swap'); .tanox-app{background:var(–canvas);color:var(–ink);font-family:var(–sans);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;width:100vw;max-width:100vw;margin-left:calc(50% + -50vw);} /* ============================================================ 设计令牌（锁定）：墨蓝 + 香槟金 · 奢旅风 主色 墨蓝 #0E2A47 / 强调 香槟金 #C6A15B / 暖白 #FAF8F4 ============================================================ */ .tanox-app { –navy: #0E2A47; –navy-deep: #081626; –gold: #C6A15B; –gold-soft: #D8BE8A; –ink: #1C1B19; –charcoal: #45413C; –slate: #8C877E; –hairline: #E5E1D8; –canvas: #FAF8F4; –surface: #F3EFE7; –r-photo: 32px; –r-card: 20px; –r-pill: 100px; –sp-1: 4px; –sp-2: 8px; –sp-3: 16px; –sp-4: 24px; –sp-5: 40px; –sp-6: 64px; –sp-7: 96px; –serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif; –sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; –display: "Playfair Display", Georgia, "Times New Roman", serif; –shadow: 0 24px 60px -28px rgba(8,22,40,.45); } .tanox-app * { box-sizing: border-box; margin: 0; padding: 0; } .tanox-app { scroll-behavior: smooth; } .tanox-app { font-family: var(–sans); color: var(–ink); background: var(–canvas); line-height: 1.7; -webkit-font-smoothing: antialiased; } .tanox-app a { color: inherit; text-decoration: none; } .tanox-app img { max-width: 100%; } .tanox-app :focus-visible { outline: 2px solid var(–gold); outline-offset: 3px; border-radius: 4px; } /* ———- 通用 ———- */ .tanox-app .wrap { width: min(1200px, 92vw); margin: 0 auto; } .tanox-app .eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(–charcoal); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .tanox-app .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(–gold); display: inline-block; } .tanox-app .section-title { font-family: var(–serif); font-weight: 700; font-size: clamp(28px, 4vw, 40px); color: var(–navy); line-height: 1.25; margin: 14px 0 18px; } .tanox-app .section-sub { color: var(–charcoal); max-width: 640px; font-weight: 300; } .tanox-app section { padding: var(–sp-7) 0; } .tanox-app .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(–r-pill); padding: 14px 30px; font-weight: 500; font-size: 15px; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; cursor: pointer; border: 1px solid transparent; } .tanox-app .btn-primary { background: var(–navy); color: #fff; } .tanox-app .btn-primary:hover { background: var(–navy-deep); transform: translateY(-2px); box-shadow: var(–shadow); } .tanox-app .btn-gold { background: var(–gold); color: var(–navy-deep); } .tanox-app .btn-gold:hover { background: var(–gold-soft); transform: translateY(-2px); } .tanox-app .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .tanox-app .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); } /* ———- 导航 ———- */ .tanox-app .nav { position: sticky; top: 0; z-index: 50; background: rgba(250,248,244,.86); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease; } .tanox-app .nav.scrolled { border-color: var(–hairline); box-shadow: 0 8px 30px -22px rgba(8,22,40,.5); } .tanox-app .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .tanox-app .brand { display: flex; flex-direction: column; line-height: 1.1; } .tanox-app .brand b { font-family: var(–serif); font-size: 20px; font-weight: 700; color: var(–navy); letter-spacing: 1px; } .tanox-app .brand span { font-size: 10px; letter-spacing: 3px; color: var(–gold); text-transform: uppercase; } .tanox-app .nav-links { display: flex; align-items: center; gap: 34px; } .tanox-app .nav-links a { font-size: 15px; color: var(–navy); font-weight: 500; position: relative; } .tanox-app .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(–gold); transition: width .25s ease; } .tanox-app .nav-links a:hover::after { width: 100%; } .tanox-app .nav-cta { margin-left: 8px; } .tanox-app .nav-toggle { display: none; background: none; border: 0; font-size: 26px; color: var(–navy); cursor: pointer; } /* 导航下拉：业务 */ .tanox-app .nav-item { position: relative; } .tanox-app .nav-trigger { font-family: inherit; font-size: 15px; color: var(–navy); font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; position: relative; } .tanox-app .nav-trigger::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(–gold); transition: width .25s ease; } .tanox-app .nav-item:hover .nav-trigger::after, .tanox-app .nav-item:focus-within .nav-trigger::after { width: 100%; } .tanox-app .nav-trigger .caret { font-size: 9px; opacity: .6; transition: transform .2s ease; } .tanox-app .nav-item:hover .caret, .tanox-app .nav-item:focus-within .caret { transform: rotate(180deg); } .tanox-app .nav-dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 188px; background: var(–canvas); border: 1px solid var(–hairline); border-radius: 16px; box-shadow: 0 18px 44px -22px rgba(8,22,40,.55); padding: 10px; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60; } .tanox-app .nav-dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .tanox-app .nav-item:hover .nav-dropdown, .tanox-app .nav-item:focus-within .nav-dropdown, .tanox-app .nav-item.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .tanox-app .nav-dropdown a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(–navy); font-weight: 500; transition: background .15s ease, color .15s ease; } .tanox-app .nav-dropdown a:hover { background: var(–surface); color: var(–navy-deep); } .tanox-app .nav-dropdown a::after { display: none; } /* ———- Hero 轮播 ———- */ .tanox-app .hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; } .tanox-app .hero-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, #163A5E, var(–navy)); } .tanox-app .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: scale(1.08); transition: opacity 1.6s ease; will-change: opacity, transform; } .tanox-app .hero-slide.active { opacity: 1; } /* Ken Burns 呼吸：每张图持续缓慢推近 + 平移，周期与方向按序号错开。 旧版只在切换的 7s 内做一次 scale，画面大部分时间是静止的； 改成长周期 alternate 动画后，背景任何时刻都在缓慢移动。 */ @media (prefers-reduced-motion: no-preference) { .tanox-app .hero-slide { animation: heroKBa 26s ease-in-out -2s infinite alternate; } .tanox-app .hero-slide:nth-child(2) { animation: heroKBb 30s ease-in-out -6s infinite alternate; } .tanox-app .hero-slide:nth-child(3) { animation: heroKBc 34s ease-in-out -10s infinite alternate; } .tanox-app .hero-slide:nth-child(4) { animation: heroKBb 28s ease-in-out -4s infinite alternate; } .tanox-app .hero-slide:nth-child(5) { animation: heroKBa 32s ease-in-out -12s infinite alternate; } } @keyframes heroKBa{from{transform:scale(1.06) translate3d(-1.4%,.8%,0)}to{transform:scale(1.22) translate3d(1.6%,-1.4%,0)}} @keyframes heroKBb{from{transform:scale(1.20) translate3d(1.4%,-1%,0)}to{transform:scale(1.06) translate3d(-1.6%,1.2%,0)}} @keyframes heroKBc{from{transform:scale(1.08) translate3d(1%,1.2%,0)}to{transform:scale(1.24) translate3d(-1.2%,-1%,0)}} .tanox-app .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,22,40,.82) 0%, rgba(8,22,40,.55) 45%, rgba(8,22,40,.2) 100%), linear-gradient(0deg, rgba(8,22,40,.75) 0%, rgba(8,22,40,0) 55%); } .tanox-app .hero-content { position: relative; z-index: 2; color: #fff; width: min(1200px, 92vw); margin: 0 auto; } .tanox-app .hero-eyebrow { color: var(–gold-soft); letter-spacing: 4px; text-transform: uppercase; font-size: 13px; font-weight: 500; } .tanox-app .hero-eyebrow::before { content: ""; width: 36px; height: 1px; background: var(–gold); display: inline-block; margin-right: 12px; vertical-align: middle; } .tanox-app .hero-title { font-family: var(–serif); font-weight: 700; font-size: clamp(38px, 6vw, 68px); line-height: 1.18; margin: 22px 0 20px; max-width: 14ch; color: #fff; text-wrap: balance; text-shadow: 0 2px 16px rgba(0,0,0,.45); } .tanox-app .hero-sub { font-weight: 300; font-size: clamp(15px, 1.6vw, 19px); color: rgba(255,255,255,.92); max-width: 46ch; text-shadow: 0 1px 10px rgba(0,0,0,.4); } .tanox-app .hero-cta { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; } /* Hero 文字入场动效：错位淡入上移；reduced-motion 下全局 animation:none 自动停用，元素保持默认可见 */ .tanox-app .hero-content > * { animation: heroRise .9s cubic-bezier(.22,.61,.36,1) both; } .tanox-app .hero-content > *:nth-child(1){animation-delay:.12s} .tanox-app .hero-content > *:nth-child(2){animation-delay:.26s} .tanox-app .hero-content > *:nth-child(3){animation-delay:.40s} .tanox-app .hero-content > *:nth-child(4){animation-delay:.54s} @keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} /* 进度点 hover 与键盘聚焦态 */ .tanox-app .hero-dots button:hover{background:rgba(255,255,255,.6)} .tanox-app .hero-dots button:focus-visible{outline:2px solid var(–gold);outline-offset:4px} .tanox-app .hero-dots { position: absolute; left: max(4vw, calc((100vw + -1200px) / 2 + 4vw)); bottom: 42px; z-index: 3; display: flex; gap: 12px; } .tanox-app .hero-dots button { width: 36px; height: 4px; border: 0; border-radius: 4px; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; transition: background .3s ease, width .3s ease; } .tanox-app .hero-dots button.active { background: var(–gold); width: 56px; } /* ———- 公司介绍 ———- */ .tanox-app .intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(–sp-6); align-items: center; } .tanox-app .intro-story p { color: var(–charcoal); margin-top: 8px; } .tanox-app .intro-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(–sp-4); } .tanox-app .stat { background: var(–surface); border-radius: var(–r-card); padding: 28px 26px; border: 1px solid var(–hairline); } .tanox-app .stat .num { font-family: var(–display); font-weight: 700; font-size: clamp(34px, 4vw, 46px); color: var(–navy); line-height: 1; } .tanox-app .stat .label { color: var(–charcoal); margin-top: 8px; font-size: 14px; } .tanox-app .note { font-size: 12px; color: var(–slate); margin-top: 18px; } /* ———- 核心业务 ———- */ .tanox-app .services-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: var(–sp-5); } .tanox-app .biz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(–sp-4); } .tanox-app .biz-card { display:block; text-decoration:none; color:inherit; background: #fff; border: 1px solid var(–hairline); border-radius: var(–r-card); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .tanox-app .biz-card:hover { transform: translateY(-6px); box-shadow: var(–shadow); border-color: var(–gold); } .tanox-app .biz-thumb { aspect-ratio: 4/3; position: relative; overflow: hidden; background: linear-gradient(135deg, #163A5E, var(–navy)); } .tanox-app .biz-thumb img.biz-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); } .tanox-app .biz-card:hover .biz-thumb img.biz-ph { transform: scale(1.07); } .tanox-app .biz-thumb .biz-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,42,71,0) 28%, rgba(14,42,71,.5) 100%); } .tanox-app .biz-thumb .ph-label { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: 11px; letter-spacing: 1px; color: #fff; background: rgba(14,42,71,.5); padding: 3px 10px; border-radius: 100px; backdrop-filter: blur(3px); } .tanox-app .biz-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 8px; } .tanox-app .biz-tag { font-size: 12px; letter-spacing: 1px; color: var(–navy); font-weight: 600; } .tanox-app .biz-body h3 { font-family: var(–serif); font-size: 21px; font-weight: 700; color: var(–navy); } .tanox-app .biz-body p { font-size: 14px; color: var(–charcoal); font-weight: 300; } .tanox-app .biz-toggle { align-self: flex-start; margin-top: 4px; font-size: 12px; color: var(–gold); border: 1px solid var(–hairline); border-radius: 100px; padding: 4px 12px; background: transparent; cursor: pointer; } .tanox-app .biz-card.inbound { grid-column: span 2; } .tanox-app .biz-card.inbound .biz-thumb { aspect-ratio: 16/7; } /* ———- 实力背书 ———- */ .tanox-app .backing { background: var(–surface); } .tanox-app .cred-row { display: flex; flex-wrap: wrap; gap: 14px; margin: var(–sp-4) 0 var(–sp-6); } .tanox-app .cred { background: #fff; border: 1px solid var(–hairline); border-radius: 100px; padding: 10px 22px; font-size: 14px; color: var(–navy); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; } .tanox-app .cred::before { content: "✓"; color: var(–gold); font-weight: 700; } .tanox-app .partners { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: var(–sp-5); } .tanox-app .partner { aspect-ratio: 3/2; border-radius: 14px; background: #fff; border: 1px solid var(–hairline); display: flex; align-items: center; justify-content: center; color: var(–slate); font-size: 13px; font-weight: 500; text-align: center; padding: 8px; } .tanox-app .band { background: var(–navy); border-radius: var(–r-card); padding: var(–sp-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(–sp-4); color: #fff; } .tanox-app .band .b-num { font-family: var(–display); font-size: clamp(36px, 5vw, 56px); font-weight: 700; color: var(–gold); line-height: 1; } .tanox-app .band .b-label { color: rgba(255,255,255,.78); margin-top: 10px; font-size: 15px; } /* ———- 定制流程 ———- */ .tanox-app .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(–sp-4); margin-top: var(–sp-5); } .tanox-app .step { background: #fff; border: 1px solid var(–hairline); border-radius: var(–r-card); padding: 30px 26px; position: relative; } .tanox-app .step .idx { font-family: var(–display); font-size: 40px; font-weight: 700; color: var(–gold); line-height: 1; } .tanox-app .step h4 { font-family: var(–serif); font-size: 19px; color: var(–navy); margin: 14px 0 8px; } .tanox-app .step p { font-size: 14px; color: var(–charcoal); font-weight: 300; } /* ———- 精选案例 ———- */ .tanox-app .cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(–sp-4); margin-top: var(–sp-5); } .tanox-app .case { position: relative; border-radius: var(–r-photo); overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; background: linear-gradient(135deg, #163A5E, var(–navy)); } .tanox-app .case img.case-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); } .tanox-app .case:hover img.case-ph { transform: scale(1.05); } .tanox-app .case .case-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,42,71,0) 35%, rgba(14,42,71,.62) 100%); } .tanox-app .case .case-label { position: relative; z-index: 2; margin: var(–sp-4); color: #fff; font-family: var(–serif); font-size: 22px; font-weight: 700; } .tanox-app .case .case-label small { display: block; font-family: var(–sans); font-weight: 300; font-size: 13px; color: rgba(255,255,255,.8); letter-spacing: 1px; margin-top: 4px; } /* ———- CTA + 页脚 ———- */ .tanox-app .cta { text-align: center; } .tanox-app .cta-box { background: var(–navy); border-radius: var(–r-photo); padding: var(–sp-7) var(–sp-5); color: #fff; position: relative; overflow: hidden; } .tanox-app .cta-box h2 { font-family: var(–serif); font-size: clamp(28px, 4vw, 42px); font-weight: 700; } .tanox-app .cta-box p { color: rgba(255,255,255,.8); font-weight: 300; margin: 14px auto 30px; max-width: 52ch; } .tanox-app .footer { background: var(–navy-deep); color: rgba(255,255,255,.7); padding: var(–sp-6) 0 var(–sp-5); } .tanox-app .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(–sp-5); } .tanox-app .footer h5 { color: #fff; font-size: 15px; margin-bottom: 16px; font-weight: 600; } .tanox-app .footer a { display: block; color: rgba(255,255,255,.6); font-size: 14px; padding: 5px 0; transition: color .2s ease; } .tanox-app .footer a:hover { color: var(–gold-soft); } .tanox-app .footer .brand b { color: #fff; } .tanox-app .footer .divider { height: 1px; background: linear-gradient(90deg, transparent, var(–gold), transparent); margin: var(–sp-5) 0 var(–sp-4); opacity: .5; } .tanox-app .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: rgba(255,255,255,.45); } /* ———- 响应式 ———- */ @media (max-width: 1024px) { .tanox-app .biz-grid { grid-template-columns: repeat(3, 1fr); } .tanox-app .biz-card.inbound { grid-column: span 3; } .tanox-app .biz-card.inbound .biz-thumb { aspect-ratio: 16/6; } .tanox-app .partners { grid-template-columns: repeat(3, 1fr); } .tanox-app .steps { grid-template-columns: repeat(2, 1fr); } .tanox-app .intro-grid { grid-template-columns: 1fr; } .tanox-app .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .tanox-app .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(–canvas); flex-direction: column; padding: 18px 6vw 24px; gap: 16px; border-bottom: 1px solid var(–hairline); } .tanox-app .nav-links.open { display: flex; } .tanox-app .nav-toggle { display: block; } .tanox-app .biz-grid { grid-template-columns: 1fr; } .tanox-app .biz-card.inbound { grid-column: span 1; } .tanox-app .biz-card.inbound .biz-thumb { aspect-ratio: 16/9; } .tanox-app .intro-stats { grid-template-columns: 1fr 1fr; } .tanox-app .partners { grid-template-columns: repeat(2, 1fr); } .tanox-app .steps { grid-template-columns: 1fr; } .tanox-app .cases-grid { grid-template-columns: 1fr; } .tanox-app .band { grid-template-columns: 1fr; gap: var(–sp-4); text-align: center; } .tanox-app .footer-grid { grid-template-columns: 1fr; } .tanox-app .nav-item { width: 100%; } .tanox-app .nav-trigger { font-size: 16px; } .tanox-app .nav-trigger .caret { display: none; } .tanox-app .nav-dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; border-left: 2px solid var(–hairline); border-radius: 0; padding: 2px 0 2px 12px; min-width: 0; background: transparent; } .tanox-app .nav-dropdown a { padding: 7px 0; } .tanox-app .nav-dropdown a:hover { background: transparent; color: var(–gold); } .tanox-app .hero-dots { left: 6vw; } } @media (prefers-reduced-motion: reduce) { .tanox-app * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } .tanox-app .hero-slide { transition: opacity .4s ease; transform: none; } } /* Getwid 适配：section 去默认内边距/背景，由源 CSS 类控制；整段破出主题限宽 */ .tanox-app .wp-block-getwid-section{background:transparent;padding:var(–sp-7) 0;} .tanox-app .wp-block-getwid-section__content{padding:0;} .tanox-app .wp-block-getwid-section__inner-wrapper{max-width:100%;} .tanox-app .wp-block-getwid-section__inner-content{width:100%;} /* 首页 Hero（Getwid section 作为轮播容器）：背景层绝对铺满，文案层垂直居中 */ .tanox-app .tanox-hero{position:relative;overflow:hidden;min-height:92vh;padding:0;} .tanox-app .tanox-hero .wp-block-getwid-section__inner-content{position:relative;min-height:92vh;display:flex;align-items:center;} /* Hero 背景层破出到整屏 100vw：覆盖 .tanox-app .hero-bg 的 inset:0 左右，避免被 __inner-content 限宽；不动 .hero-slide 的 transform 动画 */ .tanox-app .tanox-hero .hero-bg{position:absolute;left:calc(50% + -50vw);width:100vw;right:auto;} .tanox-app .tanox-hero .hero-slide{position:absolute;left:calc(50% + -50vw);width:100vw;right:auto;} .tanox-app .tanox-hero .hero-overlay{position:absolute;left:calc(50% + -50vw);width:100vw;right:auto;} .tanox-app .tanox-hero .hero-aurora, .tanox-app .tanox-hero .hero-grain, .tanox-app .tanox-hero .hero-glow{position:absolute;left:calc(50% + -50vw);width:100vw;right:auto;top:0;height:100%;} /* ============================================================ 首页动效层（2026-09-02）：Hero 呼吸感 + 全页灵动 只用 transform / opacity / filter；prefers-reduced-motion 下全部停用 ============================================================ */ /* — 1. Hero 极光光斑：三团柔光缓慢漂移，给大图“活”的空气感 — */ .tanox-app .hero-aurora{z-index:1;overflow:hidden;pointer-events:none;opacity:.6; transform:translate3d(var(–px,0px),var(–py,0px),0);} .tanox-app .hero-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform;} .tanox-app .hero-aurora i:nth-child(1){width:46vw;height:46vw;left:-6vw;top:-10vw; background:radial-gradient(circle at 50% 50%, rgba(198,161,91,.55), rgba(198,161,91,0) 68%);} .tanox-app .hero-aurora i:nth-child(2){width:54vw;height:54vw;right:-12vw;top:4vw; background:radial-gradient(circle at 50% 50%, rgba(38,96,150,.55), rgba(38,96,150,0) 68%);} .tanox-app .hero-aurora i:nth-child(3){width:38vw;height:38vw;left:30vw;bottom:-16vw; background:radial-gradient(circle at 50% 50%, rgba(216,190,138,.45), rgba(216,190,138,0) 70%);} @media (prefers-reduced-motion: no-preference){ .tanox-app .hero-aurora i:nth-child(1){animation:aurora1 26s ease-in-out infinite alternate;} .tanox-app .hero-aurora i:nth-child(2){animation:aurora2 34s ease-in-out infinite alternate;} .tanox-app .hero-aurora i:nth-child(3){animation:aurora3 30s ease-in-out infinite alternate;} } @keyframes aurora1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vw,0) scale(1.18)}} @keyframes aurora2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-7vw,3vw,0) scale(.92)}} @keyframes aurora3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(4vw,-5vw,0) scale(1.2)}} /* — 2. 细颗粒：给大面积照片一点胶片质感（静态，不闪烁） — */ .tanox-app .hero-grain{z-index:1;pointer-events:none;opacity:.14; background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px);background-size:3px 3px; transform:translate3d(calc(var(–px,0px) * -.5), calc(var(–py,0px) * -.5), 0);} /* — 3. 指针柔光：鼠标处的金色微光，随指针缓慢跟随 — */ .tanox-app .hero-glow{z-index:1;pointer-events:none;opacity:0;transition:opacity .6s ease; background:radial-gradient(420px circle at var(–mx,50%) var(–my,50%), rgba(216,190,138,.22), rgba(216,190,138,0) 62%);} .tanox-app .tanox-hero:hover .hero-glow{opacity:1;} /* — 4. 滚动提示：细线循环下坠，提示下方还有内容 — */ .tanox-app .hero-cue{position:absolute;left:50%;bottom:32px;z-index:4;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none; color:rgba(255,255,255,.72);font-size:11px;letter-spacing:3px;} .tanox-app .hero-cue em{display:block;width:1px;height:42px;font-style:normal;position:relative;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));} .tanox-app .hero-cue em::after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(–gold-soft);} @media (prefers-reduced-motion: no-preference){ .tanox-app .hero-cue em::after{animation:cueRun 1.9s cubic-bezier(.6,.05,.3,.95) infinite;} } @keyframes cueRun{0%{transform:translateY(-16px);opacity:0}35%{opacity:1}100%{transform:translateY(44px);opacity:0}} /* — 5. 进度点 → 进度条：金色填充 5.5s 走满，与轮播节奏同步 — */ .tanox-app .hero-dots button{position:relative;overflow:hidden;background:rgba(255,255,255,.3);} /* 覆盖上方 .hero-dots button.active 的整条金色：改为“白底 + 金色进度填充”，走满后视觉与原来一致 */ .tanox-app .hero-dots button.active{background:rgba(255,255,255,.28);} .tanox-app .hero-dots button::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(–gold);border-radius:4px;} @media (prefers-reduced-motion: no-preference){ .tanox-app .hero-dots button.active::after{animation:dotFill 5.5s linear forwards;} } @media (prefers-reduced-motion: reduce){ .tanox-app .hero-dots button.active::after{width:100%;} } @keyframes dotFill{from{width:0}to{width:100%}} /* — 6. 滚动揭示：进入视口才上浮淡入（.reveal 由 JS 动态添加，脚本失效时内容照常可见） — */ .tanox-app .reveal{opacity:0;transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);} .tanox-app .reveal.in{opacity:1;transform:none;} @media (prefers-reduced-motion: reduce){.tanox-app .reveal{opacity:1;transform:none;}} /* — 7. 卡片微交互：抬升更高 + 金色描边光晕 + 图片推近更快 — */ .tanox-app .biz-card:hover{transform:translateY(-10px);border-color:var(–gold); box-shadow:0 30px 64px -32px rgba(8,22,40,.5), 0 0 0 1px rgba(198,161,91,.35);} .tanox-app .biz-card:hover .biz-thumb img.biz-ph{transform:scale(1.12);} .tanox-app .biz-card:hover .biz-thumb .ph-label{background:rgba(198,161,91,.85);color:var(–navy-deep);} .tanox-app .biz-thumb .ph-label{transition:background .35s ease,color .35s ease;} .tanox-app .case:hover img.case-ph{transform:scale(1.1);} .tanox-app .case .case-label{transition:transform .5s cubic-bezier(.22,.61,.36,1);} .tanox-app .case:hover .case-label{transform:translateY(-8px);} .tanox-app .case .case-scrim{transition:opacity .5s ease;opacity:1;} .tanox-app .case:hover .case-scrim{background:linear-gradient(180deg,rgba(14,42,71,0) 22%,rgba(14,42,71,.78) 100%);} /* — 8. 按钮流光：hover 时一道高光扫过 — */ .tanox-app .btn{position:relative;overflow:hidden;} .tanox-app .btn::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;pointer-events:none; background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));transform:skewX(-18deg);} .tanox-app .btn:hover::after{left:135%;transition:left .8s ease;} .tanox-app .btn:not(:hover)::after{transition:none;} /* — 9. 数据卡：hover 时顶部金色细线展开 — */ .tanox-app .stat{position:relative;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;} .tanox-app .stat:hover{transform:translateY(-5px);border-color:var(–gold);box-shadow:0 18px 44px -28px rgba(8,22,40,.5);} .tanox-app .stat::after{content:"";position:absolute;left:26px;right:26px;top:0;height:2px;background:var(–gold); transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.61,.36,1);} .tanox-app .stat:hover::after{transform:scaleX(1);} /* — 10. 小标题金线：区块 hover 时金线延展 — */ .tanox-app .eyebrow::before{transition:width .45s cubic-bezier(.22,.61,.36,1);} .tanox-app .wp-block-getwid-section:hover .eyebrow::before{width:60px;} /* — 11. CTA 区块：金色/墨蓝柔光缓慢流动 — */ .tanox-app .cta-box::before{content:"";position:absolute;inset:-45%;z-index:0;pointer-events:none;filter:blur(18px); background:radial-gradient(42% 42% at 22% 28%, rgba(198,161,91,.30), transparent 66%), radial-gradient(46% 46% at 78% 72%, rgba(38,96,150,.38), transparent 66%);} .tanox-app .cta-box > *{position:relative;z-index:1;} @media (prefers-reduced-motion: no-preference){ .tanox-app .cta-box::before{animation:ctaFlow 22s ease-in-out infinite alternate;} } @keyframes ctaFlow{from{transform:translate3d(-3%,2%,0) scale(1)}to{transform:translate3d(4%,-3%,0) scale(1.12)}} /* — 12. 移动端降载：光斑虚化半径收小、隐藏滚动提示（避免与进度点挤在一起） — */ @media (max-width: 768px){ .tanox-app .hero-aurora{opacity:.42;} .tanox-app .hero-aurora i{filter:blur(48px);} .tanox-app .hero-cue{display:none;} .tanox-app .cta-box::before{filter:blur(12px);} } /* ============================================================ 首页动效层 · 增补（2026-09-02）：更多灵动与趣味性 全部仅用 transform / opacity；prefers-reduced-motion 由全局规则统一停用 ============================================================ */ /* 全幅装饰层：金尘（覆盖整屏，自下而上漂浮） */ .tanox-app .tanox-hero .hero-particles{position:absolute;left:calc(50% + -50vw);width:100vw;right:auto;top:0;height:100%;pointer-events:none;} /* 右上角小航线环（非全幅，固定角标） */ .tanox-app .tanox-hero .hero-orbit{position:absolute;right:5vw;top:15%;width:clamp(120px,16vw,220px);aspect-ratio:1;height:auto;pointer-events:none;} /* 底部目的地漂流字带（全幅、锚定底部） */ .tanox-app .tanox-hero .hero-words{position:absolute;left:calc(50% + -50vw);width:100vw;right:auto;bottom:90px;top:auto;height:auto;pointer-events:none;} /* L1. 漂浮金尘：缓慢上升的微光点，给 hero 注入“空气感” */ .tanox-app .hero-particles{z-index:1;overflow:hidden;} .tanox-app .hero-particles i{position:absolute;bottom:-14px;border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(230,204,150,.95), rgba(230,204,150,0) 70%); opacity:0;will-change:transform,opacity;animation:floatUp linear infinite;} .tanox-app .hero-particles i:nth-child(1){left:7%;width:5px;height:5px;animation-duration:14s;animation-delay:0s;} .tanox-app .hero-particles i:nth-child(2){left:16%;width:3px;height:3px;animation-duration:19s;animation-delay:3s;} .tanox-app .hero-particles i:nth-child(3){left:24%;width:6px;height:6px;animation-duration:16s;animation-delay:6s;} .tanox-app .hero-particles i:nth-child(4){left:33%;width:4px;height:4px;animation-duration:21s;animation-delay:1.5s;} .tanox-app .hero-particles i:nth-child(5){left:41%;width:5px;height:5px;animation-duration:15s;animation-delay:8s;} .tanox-app .hero-particles i:nth-child(6){left:49%;width:3px;height:3px;animation-duration:23s;animation-delay:4s;} .tanox-app .hero-particles i:nth-child(7){left:57%;width:6px;height:6px;animation-duration:17s;animation-delay:10s;} .tanox-app .hero-particles i:nth-child(8){left:65%;width:4px;height:4px;animation-duration:20s;animation-delay:2s;} .tanox-app .hero-particles i:nth-child(9){left:73%;width:5px;height:5px;animation-duration:18s;animation-delay:7s;} .tanox-app .hero-particles i:nth-child(10){left:80%;width:3px;height:3px;animation-duration:22s;animation-delay:5s;} .tanox-app .hero-particles i:nth-child(11){left:87%;width:6px;height:6px;animation-duration:16s;animation-delay:11s;} .tanox-app .hero-particles i:nth-child(12){left:93%;width:4px;height:4px;animation-duration:24s;animation-delay:3.5s;} .tanox-app .hero-particles i:nth-child(13){left:12%;width:4px;height:4px;animation-duration:20s;animation-delay:9s;} .tanox-app .hero-particles i:nth-child(14){left:70%;width:5px;height:5px;animation-duration:15s;animation-delay:12s;} @keyframes floatUp{0%{transform:translateY(0) scale(.5);opacity:0}12%{opacity:.85}88%{opacity:.4}100%{transform:translateY(-92vh) scale(1);opacity:0}} /* L2. 旅行航线环：虚线环 + 环绕的金色小飞机（呼应“定制每一次出发”，增加趣味） */ .tanox-app .hero-orbit{z-index:2;opacity:.72;} .tanox-app .hero-orbit .ring{position:absolute;inset:0;border:1px dashed rgba(216,190,138,.45);border-radius:50%;} .tanox-app .hero-orbit .spin{position:absolute;inset:0;animation:spin 28s linear infinite;will-change:transform;} .tanox-app .hero-orbit .plane{position:absolute;top:-13px;left:calc(50% + -13px);width:26px;height:26px; display:flex;align-items:center;justify-content:center;font-size:17px;color:var(–gold-soft); text-shadow:0 1px 6px rgba(0,0,0,.55);animation:spin 28s linear infinite reverse;will-change:transform;} @keyframes spin{to{transform:rotate(360deg)}} /* L3. 目的地漂流字：极淡的目的地名字缓慢横向流动，增加编辑式趣味 */ .tanox-app .hero-words{z-index:2;opacity:.26;overflow:hidden;} .tanox-app .hero-words .mw{display:flex;gap:0;white-space:nowrap;width:max-content;animation:marquee 40s linear infinite;} .tanox-app .hero-words .mw span{font-family:var(–serif);font-size:13px;letter-spacing:6px;color:rgba(255,255,255,.7);padding:0 26px;} .tanox-app .hero-words .mw span::after{content:"·";margin-left:26px;color:var(–gold-soft);} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* L4. 标题金线：载入后一道金色下划线自左展开，收束视觉焦点 */ .tanox-app .hero-title{position:relative;} .tanox-app .hero-title::after{content:"";position:absolute;left:0;bottom:-12px;height:2px;width:0;border-radius:2px; background:linear-gradient(90deg,var(–gold),var(–gold-soft));animation:titleRule 1.1s cubic-bezier(.22,.61,.36,1) .7s forwards;} @keyframes titleRule{to{width:128px}} @media (max-width: 768px){ .tanox-app .hero-orbit{opacity:.45;width:clamp(96px,26vw,150px);top:10%;} .tanox-app .hero-words{display:none;} }