/* ========================================================================== Fascode Games — /games/ 游戏总览页样式 -------------------------------------------------------------------------- 字体与游戏美术直接复用 /aquakeeper/assets/，本目录只保留样式与页面本身， 避免二进制资源重复拷贝。 i18n：，配合 .l-ja / .l-en / .l-zh 三种标记切换。 ========================================================================== */ @font-face{font-family:"Baloo 2";src:url("/aquakeeper/assets/fonts/baloo2-extrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:"Baloo 2";src:url("/aquakeeper/assets/fonts/baloo2-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} :root{ --deep:#04202f; --deep-2:#06344a; --ocean:#0a5570; --aqua:#12a4a0; --aqua-soft:#35d6c4; --sky:#4fc3f7; --sun:#ffb43d; --sun-deep:#f08a1d; --coral:#ff7a59; --ink:#0d2231; --ink-soft:#4a6273; --line:#dbeaef; --bg:#f2f9fb; --card:#ffffff; --radius:26px; --maxw:1160px; --shadow:0 14px 34px rgba(4,32,47,.09); --shadow-lg:0 26px 60px rgba(4,32,47,.20); --brand:"Baloo 2",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Sans GB","Noto Sans JP","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Hiragino Sans","Hiragino Sans GB","Noto Sans JP","Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--ink);font-family:var(--body); font-size:16.5px;line-height:1.75;-webkit-text-size-adjust:100%;overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:#0b7c8c;text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4,.brand-font{font-family:var(--brand);font-weight:800;letter-spacing:.2px;color:#083143;line-height:1.22} :focus-visible{outline:3px solid var(--aqua-soft);outline-offset:3px;border-radius:8px} /* ---------- i18n ---------- */ html[data-lang="ja"] :is(.l-en,.l-zh){display:none !important} html[data-lang="en"] :is(.l-ja,.l-zh){display:none !important} html[data-lang="zh"] :is(.l-ja,.l-en){display:none !important} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} /* 锚点跳转时避开吸顶导航 */ section[id]{scroll-margin-top:84px} .skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 14px;z-index:99;border-radius:0 0 12px 0} .skip:focus{left:0} /* ========================================================================== Header ========================================================================== */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(4,32,47,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.12); } .site-header .wrap{display:flex;align-items:center;gap:14px;min-height:66px;padding-top:8px;padding-bottom:8px} .brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;text-decoration:none} .brand:hover{text-decoration:none} /* Fascode 品牌标识：透明底的 mark + wordmark，见 /static/picture/ */ .brand .brand-mark{width:46px;height:auto;flex:0 0 46px;display:block} .brand .brand-text{display:flex;flex-direction:column;gap:3px;min-width:0} .brand .brand-word{width:132px;height:auto;display:block} .brand .brand-text small{ font-family:var(--brand);font-weight:700;font-size:10px;letter-spacing:.34em; color:#7fd8cf;line-height:1; } .site-nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap} .site-nav a{ color:#d8f2f8;font-family:var(--brand);font-weight:700;font-size:15.5px; padding:7px 13px;border-radius:999px;text-decoration:none;white-space:nowrap; } .site-nav a:hover{background:rgba(255,255,255,.13);text-decoration:none} .lang-switch{display:flex;gap:3px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:3px;border-radius:999px;flex:0 0 auto} .lang-switch button{ appearance:none;border:0;background:transparent;color:#dff6fb;cursor:pointer; font:inherit;font-family:var(--brand);font-weight:700;font-size:13.5px;padding:5px 11px;border-radius:999px; transition:background .15s ease,color .15s ease; } .lang-switch button[aria-pressed="true"]{background:#eafcff;color:#07374a} .lang-switch button:hover{background:rgba(255,255,255,.16)} .lang-switch button[aria-pressed="true"]:hover{background:#fff} .header-cta{ font-family:var(--brand);font-weight:800;font-size:15px;line-height:1; padding:11px 18px;border-radius:999px;text-decoration:none;white-space:nowrap; background:linear-gradient(180deg,#ffd166,var(--sun));color:#5a3200; box-shadow:0 6px 16px rgba(240,138,29,.4),inset 0 -3px 0 rgba(0,0,0,.14); transition:transform .12s ease; } .header-cta:hover{transform:translateY(-2px);text-decoration:none} @media (max-width:900px){ .site-nav{display:none} } @media (max-width:560px){ .brand .brand-word{width:118px} .header-cta{display:none} .site-header .wrap{gap:10px} .lang-switch{margin-left:auto} } /* 窄屏（iPhone SE 等）：压缩品牌与语言切换，避免换行 */ @media (max-width:420px){ .site-header .wrap{padding-left:14px;padding-right:14px;gap:8px} .brand{gap:7px} .brand .brand-mark{width:38px;flex:0 0 38px} .brand .brand-word{width:102px} .brand .brand-text small{font-size:9px;letter-spacing:.28em} .lang-switch{padding:2px} .lang-switch button{font-size:12px;padding:5px 8px} } /* ========================================================================== Buttons ========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--brand);font-weight:800;font-size:17px;line-height:1; padding:15px 26px;min-height:50px;border-radius:999px;border:0;cursor:pointer;text-decoration:none; background:linear-gradient(180deg,var(--aqua-soft),var(--aqua)); color:#04303f;box-shadow:0 8px 20px rgba(18,164,160,.34),inset 0 -4px 0 rgba(0,0,0,.16); transition:transform .12s ease,box-shadow .12s ease,filter .12s ease; } .btn:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 13px 26px rgba(18,164,160,.42),inset 0 -4px 0 rgba(0,0,0,.16)} .btn:active{transform:translateY(2px);box-shadow:0 4px 12px rgba(18,164,160,.34),inset 0 -2px 0 rgba(0,0,0,.16)} .btn.small{font-size:15.5px;padding:12px 20px;min-height:44px} /* 商店按钮：深色游戏机身质感 */ .btn.store{ background:linear-gradient(180deg,#122c3c,#08161f); color:#f2fbff;box-shadow:0 10px 22px rgba(4,32,47,.34),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -4px 0 rgba(0,0,0,.45); } .btn.store:hover{box-shadow:0 14px 28px rgba(4,32,47,.42),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -4px 0 rgba(0,0,0,.45)} .btn.store:active{box-shadow:0 5px 14px rgba(4,32,47,.34),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.45)} .btn.store .store-ico{width:20px;height:20px;flex:0 0 20px} .btn.ghost{background:rgba(255,255,255,.12);color:#eafcff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)} .btn.ghost:hover{background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)} .btn.ghost-dark{background:#fff;color:#0a4257;box-shadow:inset 0 0 0 2px var(--line)} .btn.ghost-dark:hover{background:#f4fbfd} .btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .btn-row.center{justify-content:center} .text-link{ font-family:var(--brand);font-weight:800;font-size:16px;color:#9de8de; display:inline-flex;align-items:center;gap:6px; } .text-link:hover{color:#fff;text-decoration:none} .text-link svg{width:16px;height:16px;transition:transform .15s ease} .text-link:hover svg{transform:translateX(3px)} /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative;overflow:hidden;color:#eafcff; background: radial-gradient(900px 460px at 6% 4%,rgba(53,214,196,.40),transparent 62%), radial-gradient(760px 420px at 94% 0%,rgba(79,195,247,.34),transparent 60%), radial-gradient(600px 500px at 70% 110%,rgba(18,164,160,.30),transparent 66%), linear-gradient(168deg,#04202f 0%,#06344a 46%,#0b5266 100%); padding:clamp(38px,5vw,64px) 0 clamp(66px,7vw,92px); } .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center} @media (max-width:940px){ .hero-grid{grid-template-columns:minmax(0,1fr);gap:34px} } .kicker{ display:inline-flex;align-items:center;gap:8px; font-family:var(--brand);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase; color:#bff0ea;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22); padding:6px 14px;border-radius:999px;margin-bottom:16px; } .kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--aqua-soft);box-shadow:0 0 0 4px rgba(53,214,196,.22)} .hero h1{ margin:0 0 10px;font-size:clamp(35px,5.6vw,60px);line-height:1.06;color:#fff; text-shadow:0 5px 22px rgba(0,0,0,.32); } .hero h1 .hl{ background:linear-gradient(180deg,#ffe08a,#ffb43d 62%,#f08a1d); -webkit-background-clip:text;background-clip:text;color:transparent; -webkit-text-fill-color:transparent; } .hero p.lead{font-size:clamp(16.5px,1.6vw,18.5px);color:#d3eef6;margin:0;max-width:33em} .hero .btn-row{margin-top:26px} .hero .trust{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none} .hero .trust li{ display:flex;align-items:center;gap:7px;font-size:14.5px;color:#c8ebf3;font-weight:600; background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14); padding:7px 13px 7px 10px;border-radius:999px; } .hero .trust svg{width:16px;height:16px;flex:0 0 16px} .hero .note{margin:14px 0 0;font-size:14px;color:#9ec9d6} /* 展示台 */ .showcase{position:relative;justify-self:center;padding:16px 30px 26px} .phone{ position:relative;z-index:2;width:min(272px,62vw);margin:0 auto;border-radius:40px;padding:10px; background:linear-gradient(160deg,#0d4a61,#052836); box-shadow:0 34px 70px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.18); } .phone img{border-radius:32px;width:100%} .phone::after{ content:"";position:absolute;inset:10px;border-radius:32px;pointer-events:none; background:linear-gradient(200deg,rgba(255,255,255,.30),transparent 42%); mix-blend-mode:screen; } .float-pet{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 16px 26px rgba(0,0,0,.42))} .pet-whale{left:-26px;bottom:-6px;width:min(210px,42vw);animation:floaty 6.5s ease-in-out infinite} .pet-dolphin{right:-34px;top:6px;width:min(146px,30vw);animation:floaty 7.6s ease-in-out infinite .9s} .pet-penguin{right:-14px;bottom:44px;width:min(104px,22vw);animation:floaty 6.9s ease-in-out infinite 1.7s} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @media (max-width:940px){ .showcase{padding:10px 12px 20px} .pet-whale{left:-10px;width:150px} .pet-dolphin{right:-8px;width:104px} .pet-penguin{right:-4px;bottom:26px;width:76px} } .free-badge{ position:absolute;z-index:4;left:2px;top:14px; width:92px;height:92px;border-radius:50%; background:linear-gradient(170deg,#ffd977,var(--sun) 55%,var(--sun-deep)); color:#5a3200;font-family:var(--brand);font-weight:800; display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1; transform:rotate(-11deg);box-shadow:0 14px 30px rgba(240,138,29,.45),inset 0 -4px 0 rgba(0,0,0,.16); border:3px solid rgba(255,255,255,.7); animation:floaty 5.4s ease-in-out infinite .4s; } .free-badge b{font-size:23px;letter-spacing:.02em} .free-badge span{font-size:10.5px;letter-spacing:.1em;margin-top:3px;opacity:.85} @media (max-width:940px){ .free-badge{width:74px;height:74px;left:0;top:6px} .free-badge b{font-size:18px} .free-badge span{font-size:9px} } /* 气泡 */ .bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1} .bubbles i{ position:absolute;bottom:-90px;border-radius:50%; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),rgba(160,235,255,.34) 42%,rgba(120,210,240,.10) 70%); border:1px solid rgba(255,255,255,.32); animation:rise linear infinite; } @keyframes rise{ 0%{transform:translateY(0) translateX(0);opacity:0} 12%{opacity:.85} 85%{opacity:.7} 100%{transform:translateY(-118vh) translateX(var(--drift,14px));opacity:0} } /* ========================================================================== Sections ========================================================================== */ .section{padding:clamp(50px,6.4vw,86px) 0} .section.alt{background:#fff} .section-head{max-width:46em;margin:0 0 30px} .section-head.center{margin-left:auto;margin-right:auto;text-align:center} .section-head h2{margin:0 0 8px;font-size:clamp(26px,3.6vw,38px)} .section-head p{margin:0;color:var(--ink-soft);font-size:17px} .eyebrow{ display:block;font-family:var(--brand);font-weight:800;font-size:12.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--aqua);margin-bottom:8px; } /* ---------- 游戏卡片 ---------- */ /* 游戏架：自适应 1~N 列，加新游戏只要再放一张 game-card */ .game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px} .game-card{ display:flex;flex-direction:column; background:var(--card);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease; } .game-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(4,32,47,.16)} .cover{ position:relative;overflow:hidden;aspect-ratio:16/10;min-height:230px; background: radial-gradient(420px 260px at 78% 6%,rgba(79,195,247,.55),transparent 62%), radial-gradient(360px 300px at 6% 96%,rgba(53,214,196,.42),transparent 60%), linear-gradient(158deg,#062f45,#0a5570 52%,#0c6b7e); display:flex;align-items:center;justify-content:center;padding:26px; } /* Aqua Keeper：棋盘纹理 */ .cover .cover-grid{ position:absolute;inset:-14%;opacity:.30;mix-blend-mode:soft-light; background:url("/aquakeeper/assets/img/board.webp") center/62% no-repeat; transform:rotate(-8deg); } /* Gem Blast：紫色宝石盘 + 方格网格 */ .cover.gem{ background: radial-gradient(420px 260px at 80% 4%,rgba(255,130,225,.36),transparent 62%), radial-gradient(380px 300px at 4% 98%,rgba(120,200,255,.32),transparent 60%), linear-gradient(158deg,#2c1250,#5b2fa8 52%,#8a2be2); } .cover .cover-grid.tiles{ inset:0;opacity:.17;mix-blend-mode:soft-light;transform:none; background:none; background-image: linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px); background-size:46px 46px; } .cover .cover-logo{position:relative;z-index:2;width:min(78%,340px);filter:drop-shadow(0 14px 26px rgba(0,0,0,.42))} .cover .gem-logo{width:min(80%,410px)} .cover .cover-pet{position:absolute;z-index:3;right:-16px;bottom:-10px;width:min(46%,190px);filter:drop-shadow(0 14px 22px rgba(0,0,0,.4))} .cover .cover-tag{ position:absolute;z-index:4;left:18px;top:18px; font-family:var(--brand);font-weight:800;font-size:12.5px;letter-spacing:.14em; background:linear-gradient(180deg,#ffd977,var(--sun));color:#5a3200; padding:7px 14px;border-radius:999px;box-shadow:0 8px 18px rgba(240,138,29,.4); } .cover .cover-bubbles i{position:absolute;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85),rgba(160,235,255,.22) 60%,transparent 72%);animation:floaty 7s ease-in-out infinite} .game-info{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;justify-content:center} .game-info h3{margin:0 0 4px;font-size:clamp(24px,2.6vw,30px)} .game-info .hook{margin:0 0 16px;color:var(--ink-soft);font-size:16.5px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none} .chips li{ font-family:var(--brand);font-weight:700;font-size:13.5px;color:#0a5570; background:#e6f6f8;border:1px solid #cde9ee;border-radius:999px;padding:6px 13px;line-height:1.3; } .chips li.hot{background:linear-gradient(180deg,#fff2d6,#ffe3ad);border-color:#f7d38f;color:#7a4500} .game-info .btn-row{margin-top:auto} /* ---------- 新作占位 ---------- */ .soon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin-top:18px} .soon{ border:2px dashed #c6dfe6;border-radius:var(--radius);background:rgba(255,255,255,.6); padding:26px 24px;display:flex;gap:16px;align-items:flex-start; } .soon .ico{ flex:0 0 46px;width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center; background:linear-gradient(160deg,#eaf7fa,#d8eef6);color:#5d8f9e; } .soon .ico svg{width:24px;height:24px} .soon h3{margin:0 0 4px;font-size:19px;color:#2c4a58} .soon p{margin:0;color:#6a8794;font-size:15.4px} /* ---------- 海洋朋友跑马灯 ---------- */ .friends{ position:relative;overflow:hidden;color:#eafcff;padding:34px 0 38px; background:linear-gradient(160deg,#06344a,#0b4c62 58%,#0f6b7c); } .friends::after{ content:"";position:absolute;inset:0;opacity:.14;pointer-events:none; background:url("/aquakeeper/assets/img/board.webp") center/320px repeat;mix-blend-mode:overlay; } .friends .cap{ position:relative;z-index:2;text-align:center;margin:0 0 18px; font-family:var(--brand);font-weight:800;font-size:15px;letter-spacing:.06em;color:#a8e2e6; } .marquee{position:relative;z-index:2;display:flex;width:100%;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);} .marquee-track{display:flex;align-items:center;gap:52px;padding-right:52px;flex:0 0 auto;animation:slide 34s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}} .marquee img{height:86px;width:auto;filter:drop-shadow(0 12px 20px rgba(0,0,0,.4))} @media (max-width:640px){ .marquee-track{gap:34px;padding-right:34px;animation-duration:26s} .marquee img{height:64px} } /* ---------- 为什么 ---------- */ .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px} .why{ background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px 22px; box-shadow:0 10px 26px rgba(4,32,47,.06);transition:transform .18s ease,box-shadow .18s ease; } .why:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(4,32,47,.12)} .why .ico{ width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center; background:linear-gradient(160deg,#e2f8f6,#cdeefb);margin-bottom:14px; } .why .ico svg{width:27px;height:27px} .why h3{margin:0 0 6px;font-size:19px} .why p{margin:0;color:var(--ink-soft);font-size:15.6px} /* ---------- FAQ ---------- */ .faq{max-width:840px;margin:0 auto} details.q{ background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:12px; box-shadow:0 6px 18px rgba(4,32,47,.05);overflow:hidden; } details.q > summary{ cursor:pointer;list-style:none;padding:18px 54px 18px 20px;position:relative; font-family:var(--brand);font-weight:800;font-size:17.5px;color:#0a3b51; } details.q > summary::-webkit-details-marker{display:none} details.q > summary::after{ content:"";position:absolute;right:22px;top:50%;width:11px;height:11px; border-right:3px solid var(--aqua);border-bottom:3px solid var(--aqua); transform:translateY(-70%) rotate(45deg);transition:transform .18s ease; } details.q[open] > summary::after{transform:translateY(-30%) rotate(-135deg)} details.q[open] > summary{background:#f3fbfc} details.q .a{padding:4px 20px 18px;color:var(--ink-soft);font-size:15.9px;border-top:1px solid var(--line)} details.q .a p{margin:12px 0 0} /* ---------- CTA ---------- */ .cta{ position:relative;overflow:hidden;border-radius:30px;padding:clamp(28px,3.6vw,46px); background: radial-gradient(520px 320px at 88% 0%,rgba(53,214,196,.38),transparent 62%), linear-gradient(160deg,#06344a,#0b4c62 55%,#0f6b7c); color:#eafcff;box-shadow:var(--shadow-lg); display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center; } @media (max-width:820px){ .cta{grid-template-columns:minmax(0,1fr)} } .cta h2{color:#fff;margin:0 0 8px;font-size:clamp(24px,3.2vw,34px)} .cta p{margin:0;color:#cfeaf2;max-width:34em} .cta .cta-art{position:absolute;right:-10px;bottom:-22px;width:210px;opacity:.22;pointer-events:none} @media (max-width:820px){ .cta .cta-art{display:none} } /* ========================================================================== Footer ========================================================================== */ footer.site{background:#04202f;color:#a9cfdb;padding:40px 0 44px;font-size:15px} footer.site .wrap{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center} footer.site .brand .brand-mark{width:42px;flex:0 0 42px} footer.site .brand .brand-word{width:120px} footer.site a{color:#cfeaf2} footer.site .links{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto} footer.site .fine{width:100%;color:#7fa8b6;font-size:13.4px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin:6px 0 0;line-height:1.7} @media (max-width:700px){ footer.site .links{margin-left:0} } /* 底部常驻下载条会盖住页脚，留出安全距离 */ @media (max-width:760px){ footer.site{padding-bottom:104px} } /* ========================================================================== 移动端常驻下载条 ========================================================================== */ .sticky-cta{ position:fixed;left:12px;right:12px;bottom:12px;z-index:70; display:none;align-items:center;gap:12px; background:rgba(6,40,56,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.16);border-radius:20px; padding:10px 10px 10px 14px;box-shadow:0 18px 40px rgba(0,0,0,.42); transform:translateY(150%);transition:transform .3s cubic-bezier(.22,1,.36,1); } .sticky-cta.is-visible{transform:translateY(0)} .sticky-cta img{width:42px;height:42px;border-radius:12px;flex:0 0 42px;background:#0a5570} .sticky-cta .t{flex:1 1 auto;min-width:0} .sticky-cta .t b{display:block;font-family:var(--brand);font-weight:800;font-size:15px;color:#eafcff;line-height:1.2} .sticky-cta .t small{display:block;font-size:12.4px;color:#9ec9d6;line-height:1.3} .sticky-cta .go{ flex:0 0 auto;font-family:var(--brand);font-weight:800;font-size:14.5px;line-height:1; padding:13px 18px;border-radius:14px;text-decoration:none;color:#04303f; background:linear-gradient(180deg,var(--aqua-soft),var(--aqua)); box-shadow:inset 0 -3px 0 rgba(0,0,0,.16); } .sticky-cta .go:hover{text-decoration:none} @media (max-width:760px){ .sticky-cta{display:flex} } /* ========================================================================== 入场动画 ========================================================================== */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .reveal{opacity:1;transform:none} .sticky-cta{transition:none} } @media print{ .site-header,.lang-switch,.sticky-cta,footer.site,.marquee{display:none} body{background:#fff} .hero{color:#000;background:#fff} .hero h1,.hero p.lead{color:#000} }