/* ========================================================= Upon Star — assets/base.css 响应式设计系统:设计令牌 + 本地字体 + 基础组件 约定:本文件位于 assets/,字体相对 ../_shared/fonts/ 解析 规格要求:无外部依赖、深色奢华主题、375/768/1024 响应式断点 ========================================================= */ /* ---------- 字体(本地 TTF,零外部依赖) ---------- */ @font-face{font-family:'Italiana';src:url('../_shared/fonts/Italiana-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'Crimson Pro';src:url('../_shared/fonts/CrimsonPro-Regular.ttf') format('truetype');font-weight:400;font-display:swap;} @font-face{font-family:'Crimson Pro';src:url('../_shared/fonts/CrimsonPro-Bold.ttf') format('truetype');font-weight:700;font-display:swap;} @font-face{font-family:'Outfit';src:url('../_shared/fonts/Outfit-Regular.ttf') format('truetype');font-weight:400;font-display:swap;} @font-face{font-family:'Outfit';src:url('../_shared/fonts/Outfit-Bold.ttf') format('truetype');font-weight:700;font-display:swap;} @font-face{font-family:'Poiret One';src:url('../_shared/fonts/PoiretOne-Regular.ttf') format('truetype');font-weight:400;font-display:swap;} /* ---------- 设计令牌 ---------- */ :root{ /* 色板(深色奢华) */ --bg:#040408; --surface:#0c0c14; --surface-2:#14141f; --gold:#c8a45c; --gold-light:#e0c078; --gold-dim:#8a7040; --east:#b06040; /* 东方暖色·赤陶 */ --west:#5078a0; /* 西方冷色·深青蓝 */ --fusion:#7858a0; /* 融合·紫 */ --green:#6aad7a; /* 免费 / 微信 */ --text:#f0ece4; --text-dim:#a09888; --line:rgba(200,164,92,0.22); --on-accent:#040408; /* 强调色填充上的文字色(深底用深字,西/浅底用浅字) */ /* 字体:拉丁装饰字体在前,简体中文字体在后(标题/正文/装饰分别兜底) */ --font-display:'Italiana','Songti SC','STSong','Source Han Serif SC','Noto Serif SC',serif; --font-serif:'Crimson Pro','Songti SC','STSong','SimSun',serif; --font-sans:'Outfit','PingFang SC','Microsoft YaHei','Source Han Sans SC','Noto Sans SC',sans-serif; --font-decor:'Poiret One','Outfit','PingFang SC','Microsoft YaHei',sans-serif; /* 间距 / 圆角 */ --space-xs:8px; --space-sm:14px; --space-md:22px; --space-lg:36px; --space-xl:60px; --radius:14px; --radius-sm:8px; --maxw:1200px; /* 层级 */ --z-nav:100; --z-light:1; --z-modal:200; } /* ---------- reset / base ---------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;} img{max-width:100%;display:block;} a{color:var(--gold-light);text-decoration:none;} button{font-family:inherit;cursor:pointer;} h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:.04em;margin:0 0 .4em;line-height:1.2;} p{margin:0 0 1em;} /* ---------- 圣光(fixed 光晕层) ---------- */ .sacred-light{position:fixed;inset:0;pointer-events:none;z-index:var(--z-light); background: radial-gradient(120% 80% at 50% -10%, rgba(200,164,92,0.16), transparent 60%), radial-gradient(80% 60% at 82% 112%, rgba(120,88,160,0.12), transparent 60%); animation:lightPulse 8s ease-in-out infinite;} @keyframes lightPulse{0%,100%{opacity:1;}50%{opacity:.7;}} /* ---------- 容器 ---------- */ .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--space-md);} /* ---------- 金线分隔 ---------- */ .gold-line{height:1px;border:0;margin:var(--space-xl) 0; background:linear-gradient(90deg,transparent,var(--gold),transparent);} /* ---------- 顶部导航 ---------- */ .site-nav{position:sticky;top:0;z-index:var(--z-nav); display:flex;align-items:center;justify-content:space-between;gap:var(--space-md); padding:12px var(--space-md); background:rgba(4,4,8,0.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);} .site-nav .brand{font-family:var(--font-display);font-size:1.35rem;color:var(--text);letter-spacing:.08em;line-height:1;} .site-nav .brand small{display:block;font-family:var(--font-decor);font-size:.55rem;color:var(--gold-dim);letter-spacing:.32em;margin-top:3px;} .nav-tabs{display:flex;gap:6px;} .nav-tabs a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--text-dim);font-size:.85rem;transition:.25s;white-space:nowrap;} .nav-tabs a:hover,.nav-tabs a.active{color:var(--on-accent);background:var(--gold);border-color:var(--gold);} /* ---------- 可收起分类导航 ---------- site-util.js 给 header.site-nav 注入 .nav-toggle 开关并挂 .nav-collapsible; 默认收起(.nav-open 展开)。JS 失效 → 两个 class 都不存在 → 导航常显,不丢入口。 */ .nav-toggle{display:none;align-items:center;gap:10px;margin-left:auto; padding:10px 18px;border:1px solid var(--line);border-radius:999px; background:transparent;color:var(--text-dim);cursor:pointer; font-family:var(--font-sans);font-size:.78rem;letter-spacing:.22em;transition:.25s;} .nav-toggle:hover{color:var(--gold-light);border-color:var(--gold);} .nav-toggle i{display:block;position:relative;width:15px;height:2px;background:currentColor;border-radius:1px;} .nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:15px;height:2px; background:currentColor;border-radius:1px;transition:top .25s,transform .25s;} .nav-toggle i::before{top:-5px;} .nav-toggle i::after{top:5px;} .nav-toggle[aria-expanded="true"] i{background:transparent;} .nav-toggle[aria-expanded="true"] i::before{top:0;transform:rotate(45deg);} .nav-toggle[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg);} .site-nav.nav-collapsible .nav-tabs{display:none;} .site-nav.nav-collapsible.nav-open .nav-tabs{ display:flex;flex-direction:column;gap:6px; position:absolute;top:100%;right:var(--space-md); margin:0;padding:10px;min-width:132px; background:rgba(4,4,8,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid var(--line);border-radius:var(--radius); box-shadow:0 18px 44px -18px rgba(0,0,0,.9); animation:navDrop .22s ease both;} .site-nav.nav-collapsible.nav-open .nav-tabs a{text-align:center;} .site-nav.nav-collapsible .nav-toggle{display:inline-flex;} @keyframes navDrop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){ .site-nav.nav-collapsible.nav-open .nav-tabs{animation:none;} } .daily-seal{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center; border:1px solid var(--gold);color:var(--gold-light);font-family:var(--font-decor);font-size:.5rem;text-align:center;line-height:1.05; background:radial-gradient(circle, rgba(200,164,92,0.14), transparent);} /* ---------- 按钮 ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:999px; border:1px solid var(--gold);background:transparent;color:var(--gold-light); font-family:var(--font-sans);font-size:.95rem;letter-spacing:.04em;transition:.25s;} .btn:hover{background:var(--gold);color:var(--on-accent);box-shadow:0 0 24px rgba(200,164,92,.35);} .btn--solid{background:var(--gold);color:var(--on-accent);} .btn--solid:hover{background:var(--gold-light);} /* ---------- 卡片 ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:var(--space-md);transition:.3s;} .card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.5);} /* ---------- 通用区块 ---------- */ .section{padding:var(--space-xl) 0;position:relative;z-index:2;} .section-title{font-size:clamp(1.6rem,4vw,2.4rem);text-align:center;color:var(--text);} .section-sub{text-align:center;color:var(--text-dim);max-width:560px;margin:0 auto var(--space-lg);} /* ---------- Hero(星点动画 + 氛围光) ---------- */ .hero{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden; background:url('../assets/hero-bg.webp') center/cover no-repeat,var(--bg);} .hero::before{content:"";position:absolute;inset:0; background: radial-gradient(ellipse at 30% 40%, rgba(176,96,64,.10) 0%, transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(80,120,160,.08) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(120,88,160,.05) 0%, transparent 60%), linear-gradient(180deg, rgba(4,4,8,.42), rgba(4,4,8,.86));} .hero>*{position:relative;z-index:2;} .stars{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;} .star{position:absolute;width:2px;height:2px;background:var(--text);border-radius:50%;opacity:0;animation:twinkle 4s infinite ease-in-out;} @keyframes twinkle{0%,100%{opacity:0;transform:scale(.5);}50%{opacity:.8;transform:scale(1);}} .hero h1{font-size:clamp(2.6rem,9vw,5.4rem);margin:0;color:var(--text);text-shadow:0 2px 30px rgba(0,0,0,.6);} .hero h1 .gold{color:var(--gold);} .hero .tagline{font-family:var(--font-decor);letter-spacing:.4em;color:var(--gold-light);margin:var(--space-sm) 0 var(--space-lg);font-size:clamp(.78rem,2vw,1.1rem);} .scroll-indicator{margin-top:var(--space-lg);color:var(--gold-dim);font-size:1.4rem;animation:bob 2s ease-in-out infinite;cursor:pointer;} @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}} /* ---------- 全幅三栏融合选择器(沉浸式面板,移植 fusion-preview 排版) ---------- */ .fusion-section{padding:var(--space-xl) var(--space-md);position:relative;z-index:2;} .fusion-header{text-align:center;margin-bottom:var(--space-lg);} .fusion-header h2{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--text);} .fusion-header p{font-family:var(--font-serif);color:var(--text-dim);margin-top:8px;letter-spacing:.04em;} .fusion-selector{display:grid;grid-template-columns:1fr;gap:var(--space-sm);width:100%;max-width:1040px;margin:0 auto;position:relative;} .fusion-panel{position:relative;min-height:200px;cursor:pointer;text-decoration:none;color:inherit;overflow:hidden; display:flex;flex-direction:column;padding:22px 22px 18px;border:1px solid rgba(200,164,92,.12);border-radius:var(--radius); transition:transform .35s ease,opacity .4s ease-out,filter .4s,border-color .3s,box-shadow .3s;} .fusion-panel:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 38px rgba(0,0,0,.45);} /* 面板氛围背景 */ .fusion-panel[data-category="east"]{background:radial-gradient(ellipse at 50% 70%,rgba(176,96,64,.15) 0%,transparent 60%),linear-gradient(135deg,#1a1008,#0c0604 55%,#1a0e06);} .fusion-panel[data-category="east"]::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 3px,rgba(176,96,64,.03) 3px 4px);pointer-events:none;} .fusion-panel[data-category="west"]{background:radial-gradient(ellipse at 50% 30%,rgba(80,120,160,.12) 0%,transparent 60%),linear-gradient(160deg,#060810,#0a0c14 55%,#080a12);} .fusion-panel[data-category="west"]::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 25%,rgba(240,236,228,.04) 0,transparent 2%),radial-gradient(circle at 45% 15%,rgba(240,236,228,.03) 0,transparent 1.5%),radial-gradient(circle at 75% 35%,rgba(240,236,228,.05) 0,transparent 2%),radial-gradient(circle at 85% 20%,rgba(240,236,228,.03) 0,transparent 1.5%),radial-gradient(circle at 60% 60%,rgba(240,236,228,.02) 0,transparent 2%),radial-gradient(circle at 15% 70%,rgba(240,236,228,.03) 0,transparent 2%);pointer-events:none;} .fusion-panel[data-category="fusion"]{background:radial-gradient(ellipse at 50% 50%,rgba(120,88,160,.1) 0,transparent 55%),linear-gradient(145deg,#0a0810,#0c0a12 55%,#0a0810);} .fusion-panel[data-category="fusion"]::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent 0 8px,rgba(200,164,92,.015) 8px 9px);pointer-events:none;} /* 人格 / 我的 / 配对 面板氛围背景(Phase 2 紧凑卡片) */ .fusion-panel[data-category="mbti"]{background:radial-gradient(ellipse at 50% 90%,rgba(200,164,92,.14) 0,transparent 60%),linear-gradient(135deg,#16120a,#0c0a06 55%,#16120a);} .fusion-panel[data-category="user"]{background:radial-gradient(ellipse at 50% 90%,rgba(120,130,150,.12) 0,transparent 60%),linear-gradient(135deg,#0a0c12,#080a10 55%,#0a0c12);} .fusion-panel[data-category="pair"]{background:radial-gradient(ellipse at 50% 90%,rgba(120,88,160,.14) 0,transparent 60%),linear-gradient(135deg,#100a14,#0c0a12 55%,#100a14);} .fusion-panel[data-category="today"]{background:radial-gradient(ellipse at 50% 90%,rgba(200,164,92,.16) 0,transparent 60%),linear-gradient(135deg,#14110a,#0c0a06 55%,#14110a);} .fusion-panel[data-category="today"]:hover{box-shadow:0 12px 40px rgba(200,164,92,.28);} .fusion-panel[data-category="today"]:hover .fusion-vertical-title{color:var(--gold-light);} .fusion-panel[data-category="today"] .panel-symbol{color:var(--gold-light);} /* 悬停内发光 */ .fusion-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(200,164,92,.06) 0,transparent 70%);opacity:0;transition:opacity .4s ease-out;pointer-events:none;z-index:1;} .fusion-panel:hover::after{opacity:1;} /* 装饰符号 */ .fusion-selector .fusion-panel .panel-symbol{position:absolute;top:14px;right:14px;width:32px;height:32px;opacity:.18;color:var(--text);pointer-events:none;z-index:1;transition:opacity .35s;} .fusion-selector .fusion-panel:hover .panel-symbol{opacity:.34;} .fusion-selector .fusion-panel .panel-symbol svg{width:32px;height:32px;display:block;} /* 分类标签(小 kicker) */ .panel-kicker{font-family:var(--font-sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);opacity:.85;margin-bottom:6px;position:relative;z-index:3;} /* 标题(24px,横向) */ .fusion-vertical-title{position:relative;font-family:var(--font-display);font-size:24px;color:var(--text);letter-spacing:.1em;text-shadow:0 2px 12px rgba(0,0,0,.5);margin:0 0 8px;z-index:3;transition:color .3s;} .fusion-panel[data-category="east"]:hover .fusion-vertical-title{color:var(--east);} .fusion-panel[data-category="west"]:hover .fusion-vertical-title{color:#6a9ad0;} .fusion-panel[data-category="fusion"]:hover .fusion-vertical-title{color:var(--gold-light);} /* 一行描述 */ .panel-desc{font-family:var(--font-serif);font-size:13px;color:var(--text-dim);line-height:1.55;margin-bottom:auto;position:relative;z-index:3;max-width:92%;} /* 紧凑 CTA 胶囊 */ .fusion-pill{position:relative;margin-top:16px;align-self:flex-start;background:rgba(240,236,228,.95);color:var(--on-accent);padding:8px 20px;border-radius:20px;font-family:var(--font-sans);font-size:12.5px;font-weight:500;letter-spacing:.04em;border:none;z-index:3;display:inline-flex;align-items:center;gap:8px;transition:background .25s,color .25s,box-shadow .3s,transform .3s;pointer-events:none;} .fusion-pill svg{width:14px;height:14px;transition:transform .3s;} .fusion-panel:hover .fusion-pill{background:var(--gold);color:var(--on-accent);box-shadow:0 4px 20px rgba(200,164,92,.4);transform:translateY(-2px);} .fusion-panel:hover .fusion-pill svg{transform:translateX(4px);} /* 底部数量标签已移除(Phase 2 紧凑卡片) */ /* 悬停其余面板变暗 */ .fusion-selector.has-hover .fusion-panel:not(:hover){opacity:.55;filter:brightness(.75);} /* ---------- 功能卡网格 ---------- */ .feature-grid{display:grid;grid-template-columns:1fr;gap:var(--space-md);} .feature-card{display:flex;flex-direction:column;gap:8px;min-height:100%;} a.feature-card{transition:.3s;color:inherit;} a.feature-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.5);} .feature-card .ico{font-family:var(--font-decor);font-size:1.7rem;color:var(--gold);} .feature-card h3{font-size:1.25rem;margin:0;} .feature-card p{color:var(--text-dim);font-size:.92rem;margin:0 0 var(--space-sm);flex:1;} .tag{font-size:.7rem;letter-spacing:.15em;padding:3px 10px;border-radius:999px;align-self:flex-start;} .tag--east{background:rgba(176,96,64,.22);color:#d98a6a;} .tag--west{background:rgba(80,120,160,.22);color:#8fb6dd;} .tag--fusion{background:rgba(120,88,160,.22);color:#b79ad6;} .tag--free{background:rgba(106,173,122,.18);color:var(--green);} /* ---------- 分类落地页(Phase 2 网关页) ---------- */ .breadcrumb{font-size:.78rem;color:var(--text-dim);letter-spacing:.05em;margin-bottom:var(--space-md);} .breadcrumb a{color:var(--text-dim);} .breadcrumb a:hover{color:var(--gold-light);} .category-hero{position:relative;padding:calc(var(--space-xl) + 16px) var(--space-md) var(--space-lg);text-align:center;overflow:hidden;} .category-hero::before{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;} .cat-east .category-hero::before{background:radial-gradient(ellipse at 50% 130%, rgba(176,96,64,.30), transparent 60%);} .cat-west .category-hero::before{background:radial-gradient(ellipse at 50% 130%, rgba(80,120,160,.30), transparent 60%);} .cat-fusion .category-hero::before{background:radial-gradient(ellipse at 50% 130%, rgba(120,88,160,.30), transparent 60%);} .category-hero .kicker{position:relative;font-family:var(--font-decor);letter-spacing:.32em;color:var(--gold-light);font-size:.8rem;text-transform:uppercase;} .category-hero h1{position:relative;font-size:clamp(2.4rem,7vw,4rem);margin:8px 0 6px;} .category-hero .lead{position:relative;font-family:var(--font-serif);color:var(--text-dim);max-width:600px;margin:0 auto;line-height:1.85;} .status-pill{display:inline-block;align-self:flex-start;font-size:.7rem;letter-spacing:.1em;padding:3px 10px;border-radius:999px;background:rgba(200,164,92,.14);color:var(--gold-light);margin-top:auto;} /* ---------- 页脚 ---------- */ .site-footer{border-top:1px solid var(--line);padding:var(--space-xl) 0 var(--space-lg);margin-top:var(--space-xl); background:linear-gradient(180deg,transparent,rgba(12,12,20,.6));position:relative;z-index:2;} .site-footer .links{display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center;margin-bottom:var(--space-md);} .site-footer .links a{color:var(--text-dim);font-size:.9rem;} .site-footer .links a:hover{color:var(--gold-light);} .site-footer .disclaimer{max-width:680px;margin:0 auto;font-size:.76rem;color:var(--text-dim);text-align:center;line-height:1.7;} /* 页脚免责声明折叠(Phase 2.5) */ .footer-legal{margin-top:var(--space-md);} .footer-legal details{border:1px solid var(--line);border-radius:var(--radius);max-width:680px;margin:0 auto;background:var(--surface);} .footer-legal summary{cursor:pointer;padding:12px 18px;font-family:var(--font-sans);font-size:.82rem;color:var(--gold-light);letter-spacing:.04em;list-style:none;} .footer-legal summary::-webkit-details-marker{display:none;} .footer-legal summary::before{content:"▸ ";color:var(--text-dim);} .footer-legal details[open] summary::before{content:"▾ ";} .footer-legal .legal-body{max-height:200px;overflow:auto;padding:0 18px 16px;font-size:.74rem;color:var(--text-dim);line-height:1.7;text-align:left;} /* 配对向导(Phase 2.3) */ .wizard-steps{display:flex;justify-content:center;max-width:480px;margin:var(--space-lg) auto 0;} .wstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;color:var(--text-dim);font-size:.8rem;} .wstep::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0;} .wstep:first-child::before{display:none;} .wstep .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--line);font-size:.72rem;z-index:1;transition:.3s;} .wstep.active .dot{background:var(--gold);border-color:var(--gold);color:var(--on-accent);} .wstep.active{color:var(--gold-light);} .wstep.done .dot{border-color:var(--gold);color:var(--gold);} .wizard-step{display:none;max-width:480px;margin:var(--space-lg) auto 0;animation:stepIn .35s ease;} .wizard-step.show{display:block;} @keyframes stepIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} .wizard-card{padding:var(--space-md);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);} .wstep-title{font-family:var(--font-display);color:var(--gold-light);font-size:1.3rem;margin:0 0 16px;text-align:center;} .wizard-nav{display:flex;justify-content:space-between;gap:12px;margin-top:var(--space-md);} .wiz-next,.wiz-back{padding:11px 26px;border-radius:999px;font-family:var(--font-sans);font-size:.92rem;cursor:pointer;transition:.25s;border:1px solid var(--line);background:transparent;color:var(--text);} .wiz-next{border-color:var(--gold);background:var(--gold);color:var(--on-accent);} .wiz-next:hover{background:var(--gold-light);} .wiz-back:hover{border-color:var(--gold-light);color:var(--gold-light);} /* 星座速配快速版(Phase 2.3 引导,复用 PairEngine.zodiac) */ .quick-link{text-align:center;margin-top:14px;font-family:var(--font-serif);color:var(--text-dim);font-size:.9rem;} .quick-link a{color:var(--gold-light);text-decoration:underline;cursor:pointer;} .quick-match{display:none;max-width:480px;margin:var(--space-md) auto 0;padding:var(--space-md);border:1px dashed rgba(200,164,92,.4);border-radius:var(--radius);background:rgba(200,164,92,.05);} .quick-match.show{display:block;} .quick-match h3{font-family:var(--font-display);color:var(--gold-light);font-size:1.1rem;margin:0 0 12px;text-align:center;} .quick-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .quick-row select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:.92rem;} .quick-result{margin-top:14px;text-align:center;font-family:var(--font-serif);color:var(--text);} .quick-result .qnum{font-family:var(--font-display);font-size:2.4rem;color:var(--gold-light);display:block;line-height:1.1;} @media (max-width:600px){ .wizard-steps{margin-top:var(--space-md);} .quick-row{grid-template-columns:1fr;} } /* ---------- 可访问性 / 动效降级 ---------- */ :focus-visible{outline:2px solid var(--gold);outline-offset:3px;} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}} /* ========================================================= Upon Star — 主题皮肤:东(暖朱砂) / 西(梦幻薰衣草) / 中性(金紫) 入口:在 上加 .theme-east / .theme-west / .theme-neutral 首页与 fusion 默认中性,不写 class 即可;east.html 写 theme-east。 ========================================================= */ /* ---------- 东方·暖朱砂(朱砂红印 + 宣纸深棕) ---------- */ body.theme-east{ --bg:#0e0604; --surface:#1a0c06; --surface-2:#221008; --gold:#e8a878; /* 主金 → 暖橙金 */ --gold-light:#f4c89c; --gold-dim:#a06848; --accent:#d96a4a; /* 朱砂红(hero/按钮强调) */ --accent-soft:rgba(217,106,74,.22); --tag-text:#f0b48c; --line:rgba(232,168,120,.22); } body.theme-east .sacred-light{ background: radial-gradient(120% 80% at 50% -10%, rgba(232,168,120,.18), transparent 60%), radial-gradient(80% 60% at 20% 112%, rgba(217,106,74,.16), transparent 60%); } body.theme-east .category-hero::before{ background:radial-gradient(ellipse at 50% 130%, rgba(232,168,120,.32), transparent 60%); } body.theme-east .feature-card .ico{color:var(--gold);} body.theme-east .tag--east{background:var(--accent-soft);color:var(--tag-text);} /* ---------- 西方·梦幻薰衣草(晨雾花园 · 极淡薰衣草紫→淡粉 · 毛玻璃 · 淡金描边) ---------- */ body.theme-west{ --bg:#F5E8F0; /* 备用实色:淡粉(变量文本兜底) */ --surface:rgba(255,255,255,0.55); /* 半透明白 · 毛玻璃 */ --surface-2:rgba(255,255,255,0.72); --gold:#C85A7A; /* 主金 → 玫瑰粉(强调色) */ --gold-light:#D98AA3; /* 柔玫瑰(hover/链接/次级强调) */ --gold-dim:#C9B68C; /* 淡金(装饰文字) */ --accent:#C85A7A; /* 玫瑰粉 */ --accent-soft:rgba(200,90,122,.14); /* 玫瑰淡染(标签/选中) */ --tag-text:#B14A6B; /* 深玫瑰(标签文字,浅底可读) */ --line:rgba(232,213,168,0.6); /* 极细淡金线 #E8D5A8 */ --west:#A07BB8; /* 淡薰衣草(slot 标签) */ --text:#5A5066; /* 柔雾紫灰(非纯黑) */ --text-dim:#8A8194; /* 雾灰 */ --on-accent:#FBF4F8; /* 玫瑰填充上的浅色文字 */ } /* 背景:极淡薰衣草紫 → 淡粉 柔和渐变 + 晨雾光晕(fixed 满屏) */ body.theme-west{ background: radial-gradient(120% 90% at 16% -8%, rgba(255,255,255,.55), transparent 55%), radial-gradient(90% 70% at 88% 6%, rgba(231,214,240,.45), transparent 60%), radial-gradient(80% 80% at 50% 120%, rgba(245,220,232,.55), transparent 60%), linear-gradient(165deg, #F8F5FA 0%, #F5E8F0 55%, #F3E6EF 100%); background-attachment:fixed; min-height:100vh; } /* 毛玻璃卡片 */ body.theme-west .card, body.theme-west .feature-card, body.theme-west .panel{ backdrop-filter:blur(14px) saturate(1.12); -webkit-backdrop-filter:blur(14px) saturate(1.12); box-shadow:0 8px 30px rgba(150,120,160,.14); } body.theme-west a.feature-card:hover{ box-shadow:0 12px 40px rgba(150,120,160,.22); } /* 顶部导航:淡金玻璃 */ body.theme-west .site-nav{ background:rgba(255,255,255,.5); backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1); border-bottom:1px solid var(--line); } body.theme-west .site-nav .brand{color:var(--text);} body.theme-west .nav-tabs a{color:var(--text-dim);border:1px solid var(--line);} body.theme-west .nav-tabs a.active{color:var(--on-accent);background:var(--gold);border-color:var(--gold);} body.theme-west .daily-seal{border:1px solid var(--gold);color:var(--gold-light);background:radial-gradient(circle, rgba(200,90,122,.12), transparent);} /* 页脚:淡粉玻璃 */ body.theme-west .site-footer{ background:linear-gradient(180deg,transparent,rgba(245,232,240,.55)); border-top:1px solid var(--line); } body.theme-west .site-footer .links a{color:var(--text-dim);} body.theme-west .site-footer .links a:hover{color:var(--gold-light);} /* 晨雾光晕(取代原深蓝神圣光) */ body.theme-west .sacred-light{ background: radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.5), transparent 60%), radial-gradient(70% 60% at 82% 112%, rgba(231,200,224,.32), transparent 60%), radial-gradient(60% 50% at 12% 60%, rgba(214,200,236,.28), transparent 60%); animation:lightPulse 9s ease-in-out infinite; } body.theme-west .category-hero::before{ background:radial-gradient(ellipse at 50% 130%, rgba(200,160,224,.30), transparent 60%); } body.theme-west .feature-card .ico{color:var(--gold);} body.theme-west .tag--west{background:var(--accent-soft);color:var(--tag-text);} /* ---------- 融合·中性金紫(与首页同调) ---------- */ body.theme-fusion, body.theme-neutral{ /* 沿用 :root 默认,不重写,保持金紫主调 */ } /* ---------- 类别覆盖(兼容旧 .cat-* 写法,并保留 hero 径向光) ---------- */ .cat-east.category-hero::before{background:radial-gradient(ellipse at 50% 130%, rgba(232,168,120,.32), transparent 60%);} .cat-west.category-hero::before{background:radial-gradient(ellipse at 50% 130%, rgba(106,160,224,.32), transparent 60%);} .cat-fusion.category-hero::before{background:radial-gradient(ellipse at 50% 130%, rgba(120,88,160,.30), transparent 60%);} /* ---------- 响应式断点(mobile-first,min-width 增强) ---------- */ @media (min-width:768px){ .site-nav .brand{font-size:1.6rem;} .daily-seal{width:52px;height:52px;font-size:.58rem;} .fusion-selector{grid-template-columns:repeat(3,1fr);} .feature-grid{grid-template-columns:repeat(2,1fr);} } @media (min-width:1024px){ .container{padding:0 var(--space-lg);} .feature-grid{grid-template-columns:repeat(4,1fr);} } /* ========================================================= Upon Star — 卡片式分享卡(取代连结分享 · 右下角微信二维码占位) ========================================================= */ .share-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center; min-height:100vh;min-height:100dvh;padding:20px; padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background:rgba(4,4,8,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;} .share-overlay.show{opacity:1;visibility:visible;} .share-card{position:relative;width:min(380px,100%);max-height:90vh;max-height:90dvh;overflow:auto; background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 80px rgba(0,0,0,.6); transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.2,.7,.3,1);} .share-overlay.show .share-card{transform:none;} .sc-close{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;background:transparent;color:var(--text-dim);font-size:1.6rem;line-height:1;cursor:pointer;z-index:3;} .sc-close:hover{color:var(--gold-light);} .sc-head{padding:22px 22px 10px;border-bottom:1px solid var(--line);} .sc-brand{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.22em;color:var(--gold);} .sc-tag{font-family:var(--font-decor);font-size:.68rem;letter-spacing:.28em;color:var(--text-dim);margin-top:4px;text-transform:uppercase;} .sc-body{padding:18px 22px;} .sc-title{font-size:1.35rem;margin:0 0 4px;color:var(--text);} .sc-sub{font-family:var(--font-serif);color:var(--text-dim);margin:0 0 12px;font-size:.95rem;} .sc-badge{display:inline-block;font-size:.72rem;letter-spacing:.1em;padding:3px 10px;border-radius:999px; background:var(--accent-soft,rgba(200,164,92,.16));color:var(--gold-light);margin-bottom:12px;} .sc-lines{display:flex;flex-direction:column;gap:8px;} .sc-line{display:flex;gap:12px;align-items:baseline;padding:8px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(200,164,92,.12);border-radius:10px;} .sc-label{flex:0 0 auto;font-size:.72rem;letter-spacing:.08em;color:var(--gold-light);min-width:42px;} .sc-value{font-size:.95rem;color:var(--text);} .sc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:14px 22px 6px;border-top:1px solid var(--line);} .sc-foot-left{flex:1;} .sc-slogan{font-family:var(--font-serif);font-size:.82rem;color:var(--text-dim);line-height:1.6;margin:0;} /* 微信二维码(卡片右下角,使用真实图片 assets/wechat-qr.jpg) */ .sc-qr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;} .sc-qr-box{width:84px;height:84px;border-radius:8px;background:#fff;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.35);} .sc-qr-img{display:block;width:100%;height:100%;object-fit:contain;border-radius:3px;} .sc-qr-text{font-size:.66rem;letter-spacing:.06em;color:var(--text-dim);} .sc-actions{display:flex;gap:10px;padding:16px 22px 22px;} .sc-btn{flex:1;padding:11px 16px;border-radius:999px;font-family:var(--font-sans);font-size:.9rem;letter-spacing:.04em;cursor:pointer;border:1px solid var(--gold);transition:.25s;} .sc-btn--ghost{background:transparent;color:var(--gold-light);} .sc-btn--ghost:hover{background:rgba(200,164,92,.12);} .sc-btn--solid{background:var(--gold);color:var(--on-accent);} .sc-btn--solid:hover{background:var(--gold-light);} /* toast(分享 / 通用轻提示) */ .share-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);z-index:calc(var(--z-modal) + 10); background:rgba(12,12,20,.94);border:1px solid var(--gold);color:var(--gold-light);padding:11px 22px;border-radius:999px; font-size:.88rem;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 10px 30px rgba(0,0,0,.5);} .share-toast.show{opacity:1;transform:translateX(-50%) translateY(0);} /* 分享卡片:手机/小屏适配(iPhone SE/Android 小屏优先) */ @media (max-width:420px){ .share-card{width:100%;} .sc-head{padding:18px 18px 10px;} .sc-body{padding:16px 18px;} .sc-foot{padding:12px 18px 6px;} .sc-actions{padding:14px 18px 18px;} .sc-title{font-size:1.2rem;} .sc-line{flex-wrap:wrap;gap:4px 10px;} .sc-actions{flex-direction:column;} .sc-btn{width:100%;} } @media (max-width:380px){ .sc-foot{flex-direction:column;align-items:flex-start;} .sc-qr{align-self:flex-end;margin-top:8px;} .sc-qr-box{width:78px;height:78px;} } /* ========================================================= Upon Star — MBTI 个性化提示条(运势页通用) ========================================================= */ .mbti-tip{ margin:10px auto 0;max-width:680px;padding:9px 16px; font-family:var(--font-serif);font-size:.84rem;line-height:1.7;color:var(--text-dim); background:rgba(200,164,92,.06);border:1px dashed var(--line);border-radius:10px;text-align:center; } .mbti-tip.on{ color:var(--text);background:linear-gradient(180deg,rgba(200,164,92,.12),rgba(200,164,92,.03)); border:1px solid rgba(200,164,92,.35);border-style:solid; box-shadow:0 0 18px rgba(200,164,92,.12); } .mbti-tip a{color:var(--gold-light);text-decoration:underline;font-weight:600;} /* 用户页 / 档案通用 */ .user-wrap{max-width:860px;margin:var(--space-lg) auto 0;display:flex;flex-direction:column;gap:var(--space-md);} .user-card{padding:var(--space-md);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);} .user-card h3.panel-h{margin-bottom:var(--space-sm);} .user-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;} .user-grid label{display:block;font-family:var(--font-decor);font-size:.7rem;letter-spacing:.16em;color:var(--gold-dim);text-transform:uppercase;margin-bottom:8px;} .user-grid input,.user-grid select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font-family:var(--font-serif);font-size:.92rem;transition:border-color .2s,box-shadow .2s;} .user-grid input:focus,.user-grid select:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(200,164,92,.22),0 0 14px rgba(200,164,92,.18);} .user-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--space-sm);} .user-actions .mini-btn{font-family:var(--font-sans);font-size:.86rem;padding:9px 18px;border-radius:999px;border:1px solid var(--gold);cursor:pointer;transition:.2s;} .user-actions .mini-btn.primary{background:var(--gold);color:var(--bg);} .user-actions .mini-btn.ghost{background:transparent;color:var(--gold-light);} .user-actions .mini-btn:hover{box-shadow:0 0 14px rgba(200,164,92,.35);} .user-mbti-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;} .mbti-pick{display:inline-flex;gap:6px;flex-wrap:wrap;} .mbti-pick .opt{font-family:var(--font-sans);font-size:.8rem;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text-dim);cursor:pointer;transition:.2s;} .mbti-pick .opt.active{border-color:var(--gold);color:var(--gold-light);background:rgba(200,164,92,.14);} .profile-summary{padding:var(--space-md);border:1px solid var(--gold);border-radius:var(--radius);background:linear-gradient(160deg,rgba(200,164,92,.08),rgba(8,8,14,.5));} .profile-summary .ps-code{font-family:var(--font-display);font-size:2.2rem;letter-spacing:.14em;color:var(--gold-light);} .profile-summary .ps-name{font-family:var(--font-display);font-size:1.3rem;color:var(--text);margin-top:2px;} .profile-summary .ps-advice{font-family:var(--font-serif);font-size:.9rem;line-height:1.8;color:var(--text-dim);margin-top:8px;} .rec-list{display:flex;flex-direction:column;gap:10px;} .rec-item{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(8,8,14,.5);} .rec-item .rec-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;} .rec-item .rec-kind{font-family:var(--font-decor);font-size:.72rem;letter-spacing:.12em;color:var(--gold-light);text-transform:uppercase;} .rec-item .rec-date{font-family:var(--font-serif);font-size:.74rem;color:var(--text-dim);} .rec-item .rec-summary{font-family:var(--font-serif);font-size:.88rem;color:var(--text);line-height:1.6;margin-top:4px;} .rec-empty{text-align:center;color:var(--text-dim);font-family:var(--font-serif);font-style:italic;padding:var(--space-md);} .analysis-box{padding:var(--space-md);border:1px solid var(--line);border-radius:var(--radius);background:rgba(8,8,14,.4);} .analysis-box p{font-family:var(--font-serif);font-size:.9rem;line-height:1.85;color:var(--text);margin:0 0 8px;} .analysis-box p:last-child{margin-bottom:0;} .analysis-box .hl{color:var(--gold-light);font-weight:600;} /* 缘分指数面板 */ .compat-wrap{max-width:860px;margin:var(--space-lg) auto 0;display:flex;flex-direction:column;gap:var(--space-md);} .compat-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);} @media (max-width:620px){.compat-cols{grid-template-columns:1fr;}} .compat-side{padding:var(--space-md);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);} .compat-side h4{margin:0 0 10px;font-family:var(--font-decor);font-size:.74rem;letter-spacing:.16em;color:var(--gold-light);text-transform:uppercase;} .compat-side select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font-family:var(--font-serif);font-size:.92rem;} .compat-result{padding:var(--space-md);border:1px solid var(--gold);border-radius:var(--radius);background:linear-gradient(160deg,rgba(200,164,92,.08),rgba(8,8,14,.5));text-align:center;} .compat-index{font-family:var(--font-display);font-size:3.4rem;letter-spacing:.04em;color:var(--gold-light);line-height:1;} .compat-index small{font-size:1.1rem;color:var(--text-dim);} .compat-tier{font-family:var(--font-decor);font-size:.9rem;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-top:4px;} .compat-dims{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0;} .compat-dims .cd{font-family:var(--font-sans);font-size:.78rem;padding:4px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text-dim);} .compat-dims .cd.match{color:var(--gold-light);border-color:rgba(200,164,92,.5);background:rgba(200,164,92,.1);} .compat-dims .cd.diff{color:#9cc0e8;border-color:rgba(156,192,232,.4);background:rgba(156,192,232,.08);} .compat-text{font-family:var(--font-serif);font-size:.92rem;line-height:1.85;color:var(--text);padding:var(--space-sm) var(--space-md);background:rgba(8,8,14,.45);border-left:3px solid var(--gold);border-radius:6px;text-align:left;} /* 星盘 · 元素 / 模式分布 */ .dist-card{padding:var(--space-md);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);} .dist-card h3{font-family:var(--font-decor);font-size:.82rem;letter-spacing:.2em;color:var(--gold-light);text-transform:uppercase;margin:0 0 10px;text-align:center;} .dist-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;} .dist-row .dl{flex:0 0 48px;font-family:var(--font-decor);font-size:.72rem;letter-spacing:.1em;color:var(--gold-dim);text-transform:uppercase;} .dist-row .dt{font-family:var(--font-sans);font-size:.82rem;padding:4px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text);} .dist-row .dt.zero{color:var(--text-dim);opacity:.55;border-style:dashed;} .dist-note{font-family:var(--font-serif);font-size:.88rem;line-height:1.8;color:var(--text-dim);margin:6px 0 0;padding-top:8px;border-top:1px dashed var(--line);} .dist-note .hl{color:var(--gold-light);font-weight:600;} /* ========================================================= Upon Star — 全局通用组件(assets/site-util.js) 顶部滚动进度条 + 右下返回顶部按钮 ========================================================= */ .scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:9999;background:transparent;pointer-events:none;} .scroll-progress-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-light));transition:width .12s ease-out;box-shadow:0 0 8px rgba(200,164,92,.5);} .back-to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(200,164,92,.4);background:rgba(12,12,20,.9);color:var(--gold-light);display:grid;place-items:center;cursor:pointer;z-index:9999;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s,box-shadow .3s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} .back-to-top svg{width:20px;height:20px;} .back-to-top.show{opacity:.85;transform:none;pointer-events:auto;} .back-to-top:hover{opacity:1;box-shadow:0 0 18px rgba(200,164,92,.4);border-color:var(--gold);} .back-to-top:focus-visible{opacity:1;outline:2px solid var(--gold);outline-offset:2px;} @media (max-width:480px){.back-to-top{right:12px;bottom:12px;}} /* ========================================================= Upon Star — 用户证言(首页) ========================================================= */ .testimonials{max-width:1080px;margin:var(--space-xl) auto 0;padding:0 var(--space-md);} .testimonials-head{text-align:center;margin-bottom:var(--space-lg);} .testimonials-head .kicker{font-family:var(--font-decor);letter-spacing:.32em;color:var(--gold-light);font-size:.8rem;text-transform:uppercase;} .testimonials-head h2{font-family:var(--font-display);color:var(--text);font-size:clamp(1.6rem,4vw,2.2rem);margin:6px 0 0;} .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);} .testimonial{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);padding:var(--space-md);display:flex;flex-direction:column;gap:12px;} .testimonial .t-stars{color:var(--gold-light);letter-spacing:.14em;font-size:.95rem;} .testimonial p{font-family:var(--font-serif);font-style:italic;color:var(--text);font-size:.95rem;line-height:1.85;margin:0;flex:1;} .testimonial .t-who{font-family:var(--font-decor);font-size:.72rem;letter-spacing:.14em;color:var(--gold-dim);text-transform:uppercase;} @media (max-width:760px){.testi-grid{grid-template-columns:1fr;}} /* ===== 合规提示(深度交流模组) ===== */ .premium-note{max-width:520px;margin:var(--space-sm) auto 0;padding:10px 14px; font-family:var(--font-serif);font-size:.76rem;line-height:1.75;color:var(--text-dim); background:rgba(200,164,92,.06);border-left:2px solid var(--gold);border-radius:4px;text-align:left;}