/* ============================================================ HailouTec · theme.css — 全息果凍實驗室（科技 + 3D + 果凍） 全站共享主題：首頁 / 內容頁 / 博客 / 工具頁 / 根域落地頁 共用 自 index.html 重構而來，並補齊各頁面所需類別。 ============================================================ */ :root{ --pink:#FF6FA5; --pink-d:#DB3A78; --grape:#A78BFA; --grape-d:#7C5CE0; --cyan:#38E1FF; --mint:#2DD4BF; --lemon:#FBBF24; --sky:#38BDF8; --ink:#ECE9FF; --muted:#9C93C4; --glass:rgba(255,255,255,.055); --glass-bd:rgba(167,139,250,.30); --radius:24px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei","PingFang TC",sans-serif; color:var(--ink); line-height:1.7; min-height:100vh; overflow-x:hidden; background: radial-gradient(1100px 620px at 8% -6%, rgba(255,111,165,.28), transparent 55%), radial-gradient(1000px 560px at 95% 2%, rgba(56,225,255,.22), transparent 52%), radial-gradient(900px 700px at 50% 108%, rgba(124,92,224,.30), transparent 55%), #07061a; } /* ---- 流動極光背景 ---- */ .aurora{position:fixed; inset:-20% -20% -20% -20%; z-index:-3; filter:blur(60px); opacity:.55; pointer-events:none;} .aurora i{position:absolute; border-radius:50%; mix-blend-mode:screen; animation:drift 18s ease-in-out infinite;} .aurora i:nth-child(1){width:42vw;height:42vw;left:-6vw;top:-8vw;background:radial-gradient(circle,#FF6FA5,transparent 65%);} .aurora i:nth-child(2){width:38vw;height:38vw;right:-4vw;top:6vw;background:radial-gradient(circle,#38E1FF,transparent 65%);animation-delay:-6s;} .aurora i:nth-child(3){width:46vw;height:46vw;left:30vw;bottom:-18vw;background:radial-gradient(circle,#7C5CE0,transparent 65%);animation-delay:-11s;} @keyframes drift{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(6vw,4vh) scale(1.15);}66%{transform:translate(-4vw,-3vh) scale(.92);}} /* ---- 透視網格地面 ---- */ .grid-floor{position:fixed; left:50%; bottom:-2vh; width:240vw; height:60vh; transform:translateX(-50%) perspective(420px) rotateX(68deg); background-image:linear-gradient(rgba(56,225,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.16) 1px,transparent 1px); background-size:64px 64px; z-index:-2; opacity:.5; pointer-events:none; animation:floor 6s linear infinite;} @keyframes floor{from{background-position:0 0;}to{background-position:0 64px;}} /* ---- 噪點質感 ---- */ .grain{position:fixed; inset:0; z-index:-1; opacity:.05; pointer-events:none; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* ---- 游標聚光暈 ---- */ .spotlight{position:fixed; width:520px; height:520px; border-radius:50%; left:0; top:0; z-index:0; pointer-events:none; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(167,139,250,.16),transparent 60%); mix-blend-mode:screen; transition:opacity .3s;} /* ---------- 頂部導航 ---------- */ .site-nav{display:flex; align-items:center; gap:18px; padding:14px clamp(16px,5vw,54px); background:rgba(10,8,30,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--glass-bd); position:sticky; top:0; z-index:50;} .site-nav .brand{font-weight:900; font-size:21px; letter-spacing:.3px; text-decoration:none; color:var(--ink); margin-right:auto; text-shadow:0 0 18px rgba(255,111,165,.55);} .site-nav .brand span{color:var(--pink);} .site-nav nav{display:flex; gap:clamp(6px,2vw,20px); flex-wrap:wrap;} .site-nav nav a{text-decoration:none; color:var(--muted); font-weight:700; font-size:14.5px; padding:6px 12px; border-radius:999px; transition:.25s;} .site-nav nav a:hover{color:var(--ink); background:var(--glass); box-shadow:0 0 0 1px var(--glass-bd);} .site-nav nav a.active{color:#07061a; background:linear-gradient(120deg,var(--cyan),var(--grape)); box-shadow:0 0 22px rgba(56,225,255,.5);} /* 根域落地頁的 nav 為