:root { --ink: #100607; --panel: #1d0d0e; --panel-light: #291313; --red: #a8252a; --red-bright: #e04b3f; --gold: #eac27b; --gold-light: #fff0bd; --muted: #b89c8b; --line: rgba(234,194,123,.24); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #fff7e8; background: var(--ink); font-family: 'Space Grotesk','Microsoft YaHei',sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.page-shell { min-height: 100vh; overflow: hidden; position: relative; background: radial-gradient(circle at 74% 10%, rgba(150,34,34,.3), transparent 28%), linear-gradient(135deg,#100607 0%,#180809 48%,#100607 100%); }
.page-shell::before { content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.ambient { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px); opacity: .18; pointer-events: none; background: var(--red-bright); }
.ambient-one { top: 220px; left: -260px; } .ambient-two { right: -240px; top: 880px; background: var(--gold); }
.site-header, main, .site-footer { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding-left: 34px; padding-right: 34px; }
.site-header { height: 94px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; } .brand-seal { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; background: var(--gold); font-family: 'Noto Serif SC',serif; font-weight: 900; box-shadow: 0 0 22px rgba(234,194,123,.28); } .brand strong,.brand small { display: block; } .brand strong { font-family: 'Noto Serif SC',serif; font-size: 15px; letter-spacing: .16em; } .brand small { color: var(--muted); font-size: 10px; margin-top: 3px; letter-spacing: .08em; } .header-note { color: #c9aaa0; font-size: 11px; letter-spacing: .12em; }
.hero-section { min-height: 500px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 50px; padding-top: 48px; padding-bottom: 80px; } .eyebrow,.section-kicker { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .28em; } .eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; } .eyebrow span { width: 22px; height: 1px; background: var(--red-bright); } h1,h2 { font-family: 'Noto Serif SC','Songti SC',serif; } h1 { margin: 0; font-size: clamp(42px,6vw,78px); line-height: 1.07; letter-spacing: -.045em; } h1 em { color: var(--gold-light); font-style: normal; text-shadow: 0 0 28px rgba(234,194,123,.12); } .hero-desc { color: var(--muted); font-size: 15px; line-height: 2; margin: 24px 0 0; } .hero-stamp { width: 76px; height: 76px; margin-top: 32px; display: grid; place-content: center; text-align: center; color: var(--red-bright); border: 1px solid rgba(224,75,63,.72); border-radius: 50%; transform: rotate(-10deg); font-family: 'Noto Serif SC',serif; font-size: 13px; line-height: 1.3; } .hero-stamp b { font-size: 10px; font-weight: 600; }
.hero-visual { position: relative; min-height: 390px; display: grid; place-items: center; } .halo { position: absolute; border-radius: 50%; border: 1px solid rgba(234,194,123,.38); transform: rotate(-18deg); } .halo::after { content: ''; position: absolute; inset: 18px; border-radius: inherit; border: 1px dashed rgba(224,75,63,.48); } .halo-large { width: 330px; height: 330px; box-shadow: 0 0 90px rgba(168,37,42,.19), inset 0 0 70px rgba(168,37,42,.12); } .halo-small { width: 238px; height: 238px; border-color: rgba(224,75,63,.55); transform: rotate(36deg); } .orbital-core { width: 144px; height: 144px; display: grid; place-content: center; text-align: center; color: var(--gold-light); border: 1px solid var(--gold); border-radius: 50%; background: radial-gradient(circle,#5f2020,#240e0f 68%); box-shadow: 0 0 50px rgba(224,75,63,.3), inset 0 0 35px rgba(234,194,123,.2); } .orbital-core span { font-size: 43px; font-weight: 300; line-height: .8; } .orbital-core small { margin-top: 12px; color: var(--gold); font: 12px/1.35 'Noto Serif SC',serif; letter-spacing: .2em; } .orbit { position: absolute; width: 330px; height: 330px; border-radius: 50%; animation: spin 18s linear infinite; } .orbit-two { width: 238px; height: 238px; animation-direction: reverse; animation-duration: 13s; } .orbit i { position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 15px var(--gold); } .orbit span { position: absolute; top: 10px; right: 11px; color: var(--gold); font-family: 'Noto Serif SC',serif; font-size: 18px; }
.offerings { padding: 40px 0 96px; } .section-heading { text-align: center; } h2 { margin: 12px 0 8px; font-size: clamp(28px,4vw,42px); letter-spacing: -.03em; } .section-heading p { color: var(--muted); margin: 0; font-size: 13px; } .offering-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 38px; } .offering-card { min-height: 230px; position: relative; overflow: hidden; padding: 24px; color: #fff7e8; border: 1px solid var(--line); border-radius: 16px; text-align: left; cursor: pointer; background: linear-gradient(145deg,rgba(45,20,20,.94),rgba(24,11,12,.92)); transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease; } .offering-card:hover,.offering-card.is-selected { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 18px 40px rgba(0,0,0,.32),0 0 28px rgba(234,194,123,.1); } .offering-card.is-selected::after { content: '已选'; position: absolute; top: 0; right: 0; padding: 7px 14px; color: var(--ink); background: var(--gold); font-size: 10px; border-radius: 0 0 0 12px; } .card-index { color: var(--red-bright); font-size: 10px; letter-spacing: .2em; } .amount { display: flex; gap: 7px; align-items: baseline; margin: 22px 0 2px; color: var(--gold-light); } .amount b { font-size: 52px; line-height: 1; letter-spacing: -.08em; } .amount small { color: var(--gold); font-size: 14px; } .card-title { display: block; color: var(--gold); font: 600 17px 'Noto Serif SC',serif; } .card-detail { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.8; } .card-mark { position: absolute; right: 23px; bottom: 17px; color: var(--red-bright); font-size: 22px; }
.payment-section { display: grid; grid-template-columns: 1fr 360px; align-items: center; gap: 65px; margin: 0 0 70px; padding: 54px 68px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(112deg,rgba(96,27,29,.64),rgba(31,13,14,.88)); box-shadow: 0 22px 80px rgba(0,0,0,.26); } .payment-copy h2 { margin-top: 14px; } .payment-copy p { color: var(--muted); font-size: 14px; } .payment-copy p strong { color: var(--gold-light); font-size: 20px; } .pray-button { margin-top: 18px; padding: 14px 22px; border: 0; border-radius: 999px; color: var(--ink); background: var(--gold); font-weight: 700; cursor: pointer; box-shadow: 0 8px 25px rgba(234,194,123,.18); transition: transform .2s ease,background .2s ease; } .pray-button:hover { transform: translateY(-2px); background: var(--gold-light); } .pray-button span { margin-left: 18px; font-size: 18px; } .payment-points { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 28px; color: #d4b7a4; font-size: 11px; } .payment-points span::before { content: '✦'; margin-right: 6px; color: var(--gold); } .qr-frame { padding: 15px 15px 18px; text-align: center; border-radius: 18px; background: #fffaf1; color: #2b1615; box-shadow: 0 12px 34px rgba(0,0,0,.24); transform: rotate(1deg); } .qr-label { padding: 3px 0 12px; color: #1987ec; font-size: 13px; font-weight: 700; } .qr-frame img { display: block; width: 100%; height: auto; border-radius: 8px; } .qr-caption { padding-top: 12px; font: 12px 'Noto Serif SC',serif; }
.site-footer { padding-top: 0; padding-bottom: 42px; color: #a78d81; text-align: center; font: 12px 'Noto Serif SC',serif; letter-spacing: .08em; } .site-footer span { margin: 0 10px; color: var(--gold); } .back-top { position: fixed; right: 24px; bottom: 24px; z-index: 3; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); background: rgba(29,13,14,.86); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .2s ease; } .back-top.is-visible { opacity: 1; pointer-events: auto; } .toast { position: fixed; left: 50%; bottom: 34px; z-index: 4; padding: 13px 20px; border: 1px solid rgba(234,194,123,.55); border-radius: 999px; color: var(--gold-light); background: rgba(33,14,15,.96); box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translate(-50%,15px); transition: opacity .25s ease,transform .25s ease; font-size: 13px; } .toast.is-visible { opacity: 1; transform: translate(-50%,0); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; } }
@media (max-width: 760px) { .site-header,main,.site-footer { padding-left: 20px; padding-right: 20px; } .site-header { height: 78px; } .header-note { display: none; } .hero-section { min-height: auto; display: block; padding-top: 54px; padding-bottom: 72px; } h1 { font-size: clamp(38px,12vw,58px); } .hero-desc { font-size: 13px; } .hero-visual { min-height: 300px; margin-top: 16px; transform: scale(.82); } .offerings { padding-bottom: 70px; } .offering-grid { grid-template-columns: 1fr; gap: 12px; } .offering-card { min-height: 182px; padding: 20px; } .amount { margin-top: 14px; } .amount b { font-size: 44px; } .payment-section { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; padding: 30px 22px; } .qr-frame { max-width: 300px; margin: 0 auto; } .toast { width: calc(100% - 40px); text-align: center; } }