lq/hunli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新页面效果

Browse Source
This commit is contained in:
李琦
2026-08-01 09:15:40 +08:00
parent 4dcffcd500
commit 832be572cf
7 changed files with 95 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
vite-tailwindcss/package-lock.json generated
View File

@@ -10,11 +10,12 @@
"dependencies": {
"@ant-design-vue/pro-layout": "^3.2.5",
"@ant-design/icons-vue": "^7.0.1",
"@fontsource/great-vibes": "^5.3.0",
"@fontsource/ma-shan-zheng": "^5.3.0",
"@fortawesome/fontawesome-free": "^6.7.2",
"@tailwindcss/vite": "^4.1.4",
"@vueuse/head": "^2.0.0",
"ant-design-vue": "^4.1.1",
"aos": "^2.3.4",
"axios": "^1.6.2",
"lucide-vue-next": "^0.507.0",
"pinia": "^2.1.7",
@@ -575,6 +576,24 @@
"node": ">=18"
}
},
"node_modules/@fontsource/great-vibes": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@fontsource/great-vibes/-/great-vibes-5.3.0.tgz",
"integrity": "sha512-1w60cXzXnC9V4y943po8044O1mqRQBiTTK75h7OpZE+1VQtx+KlAAzoIyEE5KNzu05gUpxaCQg7cbL7ITSwegQ==",
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/ma-shan-zheng": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@fontsource/ma-shan-zheng/-/ma-shan-zheng-5.3.0.tgz",
"integrity": "sha512-3p0aUEYOFBa4mvHIRDksZZ9Uf35jQdq5mpwp6NZHiNYt/jDj/g83OwTAWjzy+9ZJAxYC9NLLobIKuW1BEcnv0Q==",
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "6.7.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
@@ -1757,17 +1776,6 @@
"vue": ">=3.2.0"
}
},
"node_modules/aos": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
"integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
"license": "MIT",
"dependencies": {
"classlist-polyfill": "^1.0.3",
"lodash.debounce": "^4.0.6",
"lodash.throttle": "^4.0.1"
}
},
"node_modules/array-tree-filter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
@@ -1827,12 +1835,6 @@
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/classlist-polyfill": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
"integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
"license": "Unlicense"
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2556,18 +2558,6 @@
"integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
"license": "MIT"
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
"license": "MIT"
},
"node_modules/lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
"license": "MIT"
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",

3
vite-tailwindcss/package.json
View File

@@ -11,11 +11,12 @@
"dependencies": {
"@ant-design-vue/pro-layout": "^3.2.5",
"@ant-design/icons-vue": "^7.0.1",
"@fontsource/great-vibes": "^5.3.0",
"@fontsource/ma-shan-zheng": "^5.3.0",
"@fortawesome/fontawesome-free": "^6.7.2",
"@tailwindcss/vite": "^4.1.4",
"@vueuse/head": "^2.0.0",
"ant-design-vue": "^4.1.1",
"aos": "^2.3.4",
"axios": "^1.6.2",
"lucide-vue-next": "^0.507.0",
"pinia": "^2.1.7",

43
vite-tailwindcss/pnpm-lock.yaml generated
View File

@@ -14,6 +14,12 @@ importers:
'@ant-design/icons-vue':
specifier: ^7.0.1
version: 7.0.1(vue@3.5.40)
'@fontsource/great-vibes':
specifier: ^5.3.0
version: 5.3.0
'@fontsource/ma-shan-zheng':
specifier: ^5.3.0
version: 5.3.0
'@fortawesome/fontawesome-free':
specifier: ^6.7.2
version: 6.7.2
@@ -26,9 +32,6 @@ importers:
ant-design-vue:
specifier: ^4.1.1
version: 4.2.6(vue@3.5.40)
aos:
specifier: ^2.3.4
version: 2.3.4
axios:
specifier: ^1.6.2
version: 1.18.1(debug@4.4.3)
@@ -272,6 +275,12 @@ packages:
cpu: [x64]
os: [win32]
'@fontsource/great-vibes@5.3.0':
resolution: {integrity: sha512-1w60cXzXnC9V4y943po8044O1mqRQBiTTK75h7OpZE+1VQtx+KlAAzoIyEE5KNzu05gUpxaCQg7cbL7ITSwegQ==}
'@fontsource/ma-shan-zheng@5.3.0':
resolution: {integrity: sha512-3p0aUEYOFBa4mvHIRDksZZ9Uf35jQdq5mpwp6NZHiNYt/jDj/g83OwTAWjzy+9ZJAxYC9NLLobIKuW1BEcnv0Q==}
'@fortawesome/fontawesome-free@6.7.2':
resolution: {integrity: sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==}
engines: {node: '>=6'}
@@ -681,9 +690,6 @@ packages:
peerDependencies:
vue: '>=3.2.0'
aos@2.3.4:
resolution: {integrity: sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==}
array-tree-filter@2.1.0:
resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==}
@@ -704,9 +710,6 @@ packages:
resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
engines: {node: '>= 20.19.0'}
classlist-polyfill@1.2.0:
resolution: {integrity: sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==}
combined-stream@1.0.8:
resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
engines: {node: '>= 0.8'}
@@ -945,12 +948,6 @@ packages:
lodash-es@4.18.1:
resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
lodash.debounce@4.0.8:
resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
lodash.throttle@4.1.1:
resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
lodash@4.18.1:
resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
@@ -1277,6 +1274,10 @@ snapshots:
'@esbuild/win32-x64@0.25.12':
optional: true
'@fontsource/great-vibes@5.3.0': {}
'@fontsource/ma-shan-zheng@5.3.0': {}
'@fortawesome/fontawesome-free@6.7.2': {}
'@jridgewell/gen-mapping@0.3.13':
@@ -1634,12 +1635,6 @@ snapshots:
vue-types: 3.0.2(vue@3.5.40)
warning: 4.0.3
aos@2.3.4:
dependencies:
classlist-polyfill: 1.2.0
lodash.debounce: 4.0.8
lodash.throttle: 4.1.1
array-tree-filter@2.1.0: {}
async-validator@4.2.5: {}
@@ -1665,8 +1660,6 @@ snapshots:
dependencies:
readdirp: 5.0.0
classlist-polyfill@1.2.0: {}
combined-stream@1.0.8:
dependencies:
delayed-stream: 1.0.0
@@ -1879,10 +1872,6 @@ snapshots:
lodash-es@4.18.1: {}
lodash.debounce@4.0.8: {}
lodash.throttle@4.1.1: {}
lodash@4.18.1: {}
loose-envify@1.4.0:

34
vite-tailwindcss/src/components/PhotoGallery.vue
View File

@@ -2,8 +2,8 @@
<div class="gallery">
<!-- 标题区 -->
<div v-reveal="'up'" class="text-center mb-5 px-4">
<span class="gallery-title text-xl text-[#a88c6b] tracking-[0.3em] font-light block mb-2">{{ page.title }}</span>
<span class="gallery-subtitle text-[9px] text-[#8A8680] uppercase tracking-[0.4em] block mb-4">{{ page.subtitle }}</span>
<span class="gallery-title calligraphy text-xl text-[#a88c6b] tracking-[0.3em] font-bold block mb-2">{{ page.title }}</span>
<span class="gallery-subtitle text-[9px] text-[#8A8680] first-letter:uppercase lowercase tracking-[0.4em] block mb-4">{{ page.subtitle }}</span>
<span class="gallery-desc text-[12px] text-[#6b6863] font-light leading-relaxed mx-auto max-w-[280px] tracking-widest block whitespace-pre-wrap">{{ page.desc }}</span>
</div>
@@ -37,14 +37,9 @@
</div>
<!-- 九宫格 -->
<div v-else-if="page.type === 'nine-grid'" class="nine-grid grid grid-cols-3 gap-1.5 px-4 mt-6">
<div v-else-if="page.type === 'nine-grid'" v-reveal="{ variant: 'up', delay: 80 }" class="nine-grid grid grid-cols-3 gap-1.5 px-4 mt-6">
<div v-for="(img, imgIdx) in page.images" :key="imgIdx"
data-aos="nine-grid-zoom"
:data-aos-delay="imgIdx * 200"
data-aos-duration="500"
data-aos-easing="ease-out-cubic"
data-aos-once="true"
class="nine-grid-reveal aspect-square relative" :class="frameClass">
class="aspect-square relative" :class="frameClass">
<img :src="img" loading="lazy" decoding="async" class="nine-grid-img" />
</div>
</div>
@@ -145,24 +140,13 @@ function polaroidTransform(i) {
<style scoped>
.gallery { width: 100%; font-family: var(--font-sans); }
.gallery-title { font-family: var(--font-serif); }
.gallery-subtitle { font-family: var(--font-display); }
.gallery-title {
font-family: var(--font-calligraphy);
font-weight: 700;
}
/*.gallery-subtitle { font-family: var(--font-display); }*/
.gallery-desc { font-family: var(--font-kai); }
.nine-grid-reveal {
opacity: 1;
transform: translate3d(0, 0, 0);
}
[data-aos='nine-grid-zoom'] {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.94);
transition-property: opacity, transform;
will-change: opacity, transform;
}
[data-aos='nine-grid-zoom'].aos-animate {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.nine-grid-img {
width: 100%;
height: 100%;

1
vite-tailwindcss/src/main.js
View File

@@ -4,7 +4,6 @@ import Antd from 'ant-design-vue'
import './style.css'
import './styles/animations.css'
import './styles/frames.css'
import 'aos/dist/aos.css'
import App from './App.vue'
import '@fortawesome/fontawesome-free/css/all.css' // 引入所有样式
// 注册路由

16
vite-tailwindcss/src/style.css
View File

@@ -1,4 +1,6 @@
@import "tailwindcss";
@import "@fontsource/great-vibes/400.css";
@import "@fontsource/ma-shan-zheng/400.css";
:root {
--font-sans: "Avenir Next", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
@@ -6,6 +8,7 @@
--font-display: "Didot", "Bodoni 72", "Cormorant Garamond", "Times New Roman", serif;
--font-kai: "Kaiti SC", "STKaiti", "KaiTi", "FangSong", serif;
--font-brush: "HanziPen SC", "STXingkai", "华文行楷", "FZKai-Z03S", "Kaiti SC", "STKaiti", "KaiTi", "FangSong", serif;
--font-calligraphy: "Great Vibes", "Ma Shan Zheng", cursive, serif;
--font-number: "Cochin", "Georgia", "Times New Roman", serif;
}
@@ -13,3 +16,16 @@ html,
body {
font-family: var(--font-sans);
}
.calligraphy {
font-family: var(--font-calligraphy) !important;
}
.gallery-subtitle {
font-family: var(--font-calligraphy) !important;
font-weight: bold;
}
.calligraphy-strong {
font-family: var(--font-calligraphy) !important;
font-weight: 700;
}

82
vite-tailwindcss/src/views/index/index.vue
View File

@@ -12,15 +12,15 @@
<span class="cover-filigree cover-filigree-top" aria-hidden="true"></span>
<span class="cover-filigree cover-filigree-bottom" aria-hidden="true"></span>
<div class="emblem-inner">
<span class="emblem-kicker">WEDDING INVITATION</span>
<span class="emblem-kicker first-letter:uppercase lowercase calligraphy">WEDDING INVITATION</span>
<div class="emblem-seal" aria-hidden="true">
<i class="fa-solid fa-feather-pointed"></i>
</div>
<div class="emblem-names">{{ data.groom }}<span class="amp">&amp;</span>{{ data.bride }}</div>
<div class="emblem-names calligraphy-strong">{{ data.groom }}<span class="amp">&amp;</span>{{ data.bride }}</div>
<div class="emblem-rule"></div>
<div class="emblem-date">{{ data.date }}</div>
<div class="emblem-invite-title">【岁序更替】</div>
<div class="emblem-invite-copy">始于初见，止于终老，时光煮雨，人事静好，盼与您分享我们的幸福时刻。</div>
<div class="emblem-date calligraphy">{{ data.date }}</div>
<div class="emblem-invite-title calligraphy-strong">岁序更替</div>
<div class="emblem-invite-copy calligraphy">始于初见，止于终老，时光煮雨，人事静好，盼与您分享我们的幸福时刻。</div>
<div class="emblem-hint"><span class="dot"></span>轻触开启请柬</div>
</div>
</div>
@@ -78,7 +78,7 @@
<div class="page-section" :class="data.scrollMode === 'snap' ? 'snap-start' : ''">
<div class="flex flex-col items-center justify-between py-12 h-full w-full relative border-[0.5px] border-[#a88c6b]/20 bg-white/40">
<div v-reveal="'down'" class="text-center mt-6 z-10">
<span class="cover-kicker text-[10px] tracking-[0.5em] uppercase text-[#a88c6b] font-light block">Wedding Invitation</span>
<span class="cover-kicker calligraphy text-[10px] tracking-[0.5em] uppercase text-[#a88c6b] font-bold block">Wedding Invitation</span>
<div class="w-6 h-[0.5px] bg-[#a88c6b] mx-auto opacity-50 mt-4"></div>
</div>
@@ -89,10 +89,10 @@
</div>
</div>
<div v-reveal="{ variant: 'up', delay: 200 }" class="text-center z-10 mb-10 space-y-4 px-4">
<div class="cover-names flex items-end justify-center gap-6 text-3xl font-light tracking-[0.2em]">
<div v-reveal="{ variant: 'up', delay: 200 }" class="text-center z-10 mb-10 space-y-4 px-4 mt-8">
<div class="cover-names calligraphy-strong flex items-end justify-center gap-6 text-3xl font-light tracking-[0.2em]">
<span>{{ data.groom }}</span>
<span class="text-[#a88c6b] text-xl pb-1 italic font-serif">&amp;</span>
<span class="text-[#a88c6b] text-xl pb-1 italic calligraphy">&amp;</span>
<span>{{ data.bride }}</span>
</div>
<div class="cover-date flex flex-col items-center text-[11px] text-[#8A8680] tracking-[0.2em] mt-4 uppercase">
@@ -111,9 +111,9 @@
<div v-reveal="'blur'" class="flex flex-col items-center w-full">
<div class="text-3xl opacity-60 mb-12 text-[#a88c6b] font-serif float-soft">❀</div>
<div class="formal-copy flex justify-center gap-9 h-[22rem] text-[#3A3A3A]">
<span class="vertical-text formal-main">{{ data.formalText1 }}</span>
<span class="vertical-text formal-main formal-main-offset">{{ data.formalText2 }}</span>
<span class="vertical-text formal-side ml-4 border-l-[0.5px] border-[#a88c6b]/30 pl-6 h-64 mt-8 tracking-[0.28em]">诚挚邀请您见证我们的幸福</span>
<span class="vertical-text formal-main calligraphy-strong">{{ data.formalText1 }}</span>
<span class="vertical-text formal-main formal-main-offset calligraphy-strong">{{ data.formalText2 }}</span>
<span class="vertical-text formal-side calligraphy ml-4 border-l-[0.5px] border-[#a88c6b]/30 pl-6 h-64 mt-8 tracking-[0.28em]">诚挚邀请您见证我们的幸福</span>
</div>
</div>
</div>
@@ -190,7 +190,7 @@
<!-- 婚礼流程 -->
<div class="page-section schedule-page px-6 z-10 justify-center relative" :class="data.scrollMode === 'snap' ? 'snap-start' : ''">
<div v-reveal="'up'" class="schedule-heading">
<span class="schedule-title">婚礼流程</span>
<span class="schedule-title calligraphy">婚礼流程</span>
<span class="schedule-kicker">Wedding Schedule</span>
</div>
<div class="schedule-list">
@@ -222,7 +222,7 @@
<img :src="endImage" class="w-full h-full bg-[#F7F6F2] object-cover" alt="婚礼尾页照片" />
</div>
<div v-reveal="{ variant: 'up', delay: 180 }" class="ending-copy">
<span class="ending-title">期待您的光临</span>
<span class="ending-title calligraphy">期待您的光临</span>
<span class="ending-names">{{ data.groom }} &amp; {{ data.bride }}</span>
<span class="ending-date">{{ data.date }}</span>
</div>
@@ -296,12 +296,11 @@
</template>
<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
import { getConfig, submitRsvp } from '@/api/wedding'
import { useAudio } from '@/composables/useAudio'
import CanvasEffects from '@/components/CanvasEffects.vue'
import PhotoGallery from '@/components/PhotoGallery.vue'
import AOS from 'aos'
const DEFAULTS = {
scrollMode: 'snap', petalEnabled: true, bubbleEnabled: true, introEnabled: true,
@@ -496,13 +495,6 @@ const syncPageScrollMode = () => {
document.documentElement.classList.toggle('page-scroll-snap', data.value.scrollMode === 'snap')
}
const refreshAos = () => {
requestAnimationFrame(() => {
AOS.refreshHard()
setTimeout(() => AOS.refresh(), 250)
})
}
const scheduleAutoScrollStart = () => {
clearTimeout(scrollStartTimer)
scrollStartTimer = setTimeout(() => startAutoScroll(), firstScreenDuration.value)
@@ -621,18 +613,6 @@ onMounted(async () => {
scheduleAutoScrollStart()
}
await nextTick()
AOS.init({
offset: 40,
duration: 500,
easing: 'ease-out-cubic',
once: true,
mirror: false,
throttleDelay: 120,
debounceDelay: 80,
disableMutationObserver: true,
})
refreshAos()
window.addEventListener('scroll', handleScroll, { passive: true })
handleScroll()
})
@@ -677,7 +657,7 @@ watch(freeScrollSignature, restartAutoScroll)
align-items: center;
}
.formal-main {
font-family: var(--font-brush);
font-family: var(--font-calligraphy);
font-size: 25px;
line-height: 1.9;
font-weight: 800;
@@ -689,7 +669,7 @@ watch(freeScrollSignature, restartAutoScroll)
padding-top: 3.25rem;
}
.formal-side {
font-family: var(--font-brush);
font-family: var(--font-calligraphy);
color: #806f5c;
font-size: 15px;
line-height: 1.8;
@@ -701,16 +681,18 @@ watch(freeScrollSignature, restartAutoScroll)
.cover-kicker,
.schedule-kicker {
font-family: var(--font-display);
font-family: var(--font-calligraphy);
}
.cover-names {
font-family: var(--font-serif);
font-family: var(--font-calligraphy);
font-weight: 700;
}
.cover-date {
font-family: var(--font-number);
}
.schedule-title {
font-family: var(--font-serif);
font-family: var(--font-calligraphy);
font-weight: 700;
}
/* ---------- 婚礼流程 ---------- */
@@ -732,7 +714,7 @@ watch(freeScrollSignature, restartAutoScroll)
}
.schedule-title {
display: block; color: #a88c6b; font-size: 26px; line-height: 1.25;
letter-spacing: 0.28em; padding-left: 0.28em; font-weight: 400;
letter-spacing: 0.28em; padding-left: 0.28em; font-weight: 700;
}
.schedule-kicker {
display: block; margin-top: 10px; color: #8A8680; font-size: 10px;
@@ -1042,7 +1024,7 @@ watch(freeScrollSignature, restartAutoScroll)
.cover-filigree-top { top: 42px; }
.cover-filigree-bottom { bottom: 42px; transform: translateX(-50%) rotate(180deg); }
.emblem-inner { position: relative; z-index: 1; width: 100%; text-align: center; color: #5b4a36; padding: 42px 16px 34px; }
.emblem-kicker { display: block; letter-spacing: 0.48em; font-size: 10px; color: #a88c6b; text-transform: uppercase; margin-bottom: 24px; padding-left: 0.48em; font-family: var(--font-display); }
.emblem-kicker { display: block; letter-spacing: 0.48em; font-size: 18px; color: #a88c6b; margin-bottom: 24px; padding-left: 0.48em; font-family: var(--font-calligraphy); font-weight: 700; }
.emblem-seal {
width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 9999px;
display: flex; align-items: center; justify-content: center;
@@ -1050,17 +1032,17 @@ watch(freeScrollSignature, restartAutoScroll)
background: rgba(255,255,255,0.34); box-shadow: inset 0 0 0 5px rgba(168,140,107,0.07);
}
.emblem-seal i { font-size: 18px; }
.emblem-names { font-family: var(--font-serif); font-size: clamp(31px, 8vw, 44px); line-height: 1.22; letter-spacing: 0.14em; font-weight: 500; color: #403527; }
.emblem-names .amp { font-style: italic; color: #b89a78; margin: 0 9px; font-family: var(--font-display); font-weight: 300; }
.emblem-names { font-family: var(--font-calligraphy); font-size: clamp(25px, 8vw, 35px); line-height: 1.22; letter-spacing: 0.14em; font-weight: 700; color: #403527; }
.emblem-names .amp { font-style: italic; color: #b89a78; margin: 0 9px; font-family: var(--font-calligraphy); font-weight: 700; }
.emblem-rule { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, #b89a78, transparent); margin: 22px auto 18px; }
.emblem-date { font-family: var(--font-number); font-size: 12px; letter-spacing: 0.34em; padding-left: 0.34em; color: #806a4d; }
.emblem-date { font-family: var(--font-calligraphy); font-size: 12px; letter-spacing: 0.34em; padding-left: 0.34em; color: #806a4d; }
.emblem-invite-title {
margin-top: 30px; color: #4a3f30; font-family: var(--font-brush);
margin-top: 30px; color: #4a3f30; font-family: var(--font-calligraphy);
font-size: 24px; line-height: 1.35; letter-spacing: 0.1em; font-weight: 800;
}
.emblem-invite-copy {
max-width: 276px; margin: 13px auto 0; color: #5f503d;
font-family: var(--font-kai); font-size: 15px; line-height: 2.05;
font-family: var(--font-calligraphy); font-size: 15px; line-height: 2.05;
letter-spacing: 0.09em; font-weight: 600;
}
.emblem-hint { margin-top: 30px; font-size: 12px; letter-spacing: 0.26em; color: #9b825e;
@@ -1090,7 +1072,7 @@ watch(freeScrollSignature, restartAutoScroll)
.ending-kicker {
display: flex; flex-direction: column; align-items: center; gap: 10px;
margin-bottom: 18px; color: #a88c6b; font-size: 10px; letter-spacing: 0.45em;
text-transform: uppercase; padding-left: 0.45em; font-family: var(--font-display);
text-transform: uppercase; padding-left: 0.45em; font-family: var(--font-calligraphy); font-weight: 700;
}
.ending-kicker i {
display: block; width: 34px; height: 1px;
@@ -1108,11 +1090,11 @@ watch(freeScrollSignature, restartAutoScroll)
}
.ending-title {
display: block; color: #a88c6b; font-size: 20px; line-height: 1.3;
letter-spacing: 0.28em; padding-left: 0.28em; font-weight: 300; font-family: var(--font-serif);
letter-spacing: 0.28em; padding-left: 0.28em; font-weight: 700; font-family: var(--font-calligraphy);
}
.ending-names {
display: block; margin-top: 10px; color: #3A3A3A; font-size: 14px;
letter-spacing: 0.16em; font-family: var(--font-display);
letter-spacing: 0.16em; font-family: var(--font-calligraphy); font-weight: 700;
}
.ending-date {
display: block; margin-top: 8px; color: #8A8680; font-size: 10px;