114 lines
4.0 KiB
CSS
114 lines
4.0 KiB
CSS
/* 호령 사주 v2 — 배경 + ornament + animation */
|
|
|
|
/* paper texture */
|
|
.saju-v2 .paper-bg {
|
|
background:
|
|
linear-gradient(rgba(247, 242, 232, 0.86), rgba(251, 247, 239, 0.92)),
|
|
url('/images/saju/horyung/background.png') center top / cover no-repeat,
|
|
radial-gradient(ellipse at top, rgba(212, 175, 55, 0.06), transparent 60%),
|
|
radial-gradient(ellipse at bottom, rgba(106, 76, 124, 0.04), transparent 60%),
|
|
linear-gradient(180deg, var(--ivory) 0%, var(--ivory-soft) 100%);
|
|
position: relative;
|
|
}
|
|
.saju-v2 .paper-bg::after {
|
|
content: '';
|
|
position: absolute; inset: 0; pointer-events: none;
|
|
background-image:
|
|
radial-gradient(circle at 20% 30%, rgba(180, 140, 80, 0.04) 0, transparent 40%),
|
|
radial-gradient(circle at 80% 70%, rgba(180, 140, 80, 0.04) 0, transparent 40%);
|
|
}
|
|
|
|
/* night sky */
|
|
.saju-v2 .night-bg {
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 30% 20%, rgba(232, 199, 107, 0.18), transparent 60%),
|
|
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(106, 76, 124, 0.3), transparent 60%),
|
|
linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, #1A2238 100%);
|
|
position: relative;
|
|
color: var(--ivory);
|
|
}
|
|
|
|
/* mountain wash (desktop hero) */
|
|
.saju-v2 .mt-wash {
|
|
position: relative;
|
|
background:
|
|
linear-gradient(rgba(251, 247, 239, 0.82), rgba(244, 236, 219, 0.9)),
|
|
url('/images/saju/horyung/background.png') center top / cover no-repeat,
|
|
radial-gradient(ellipse 70% 50% at 10% 80%, rgba(31, 42, 68, 0.06), transparent 65%),
|
|
radial-gradient(ellipse 60% 40% at 90% 70%, rgba(31, 42, 68, 0.05), transparent 65%),
|
|
radial-gradient(ellipse 100% 60% at 50% 100%, rgba(212, 175, 55, 0.04), transparent 70%),
|
|
linear-gradient(180deg, var(--ivory-soft) 0%, #F4ECDB 100%);
|
|
}
|
|
.saju-v2 .mt-wash::before,
|
|
.saju-v2 .mt-wash::after {
|
|
content: ''; position: absolute; pointer-events: none;
|
|
background-repeat: no-repeat; opacity: 0.35; background-size: contain;
|
|
}
|
|
.saju-v2 .mt-wash::before {
|
|
left: 0; bottom: 0; width: 320px; height: 160px;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160' fill='none' stroke='%231F2A44' stroke-width='1' opacity='0.45'><path d='M0 150 L40 90 L80 120 L130 60 L180 110 L220 80 L260 120 L310 70 L320 100 L320 160 L0 160 Z'/><path d='M30 130 L70 100 L110 130 L150 95 L200 120 L240 100 L280 120 L320 110' opacity='0.6'/></svg>");
|
|
}
|
|
.saju-v2 .mt-wash::after {
|
|
right: 0; bottom: 0; width: 380px; height: 180px;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 180' fill='none' stroke='%231F2A44' stroke-width='1' opacity='0.4'><path d='M0 160 L50 100 L100 140 L160 70 L220 130 L280 90 L330 140 L380 110 L380 180 L0 180 Z'/></svg>");
|
|
}
|
|
|
|
.saju-v2 .k-frame {
|
|
position: relative;
|
|
background: rgba(251, 247, 239, 0.9);
|
|
border: 1px solid rgba(31, 42, 68, 0.10);
|
|
border-radius: 14px;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 28px rgba(31, 42, 68, 0.05);
|
|
}
|
|
|
|
.saju-v2 .k-frame::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 6px;
|
|
border: 1px solid rgba(212, 175, 55, 0.16);
|
|
border-radius: 10px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.saju-v2 .k-frame.dark {
|
|
background: #1F2A44;
|
|
border: 1px solid rgba(212, 175, 55, 0.4);
|
|
color: #F7F2E8;
|
|
box-shadow: 0 1px 0 rgba(212, 175, 55, 0.2) inset, 0 12px 40px rgba(31, 42, 68, 0.2);
|
|
}
|
|
|
|
.saju-v2 .k-frame.dark::before {
|
|
border-color: rgba(212, 175, 55, 0.25);
|
|
}
|
|
|
|
/* screen entry */
|
|
@keyframes saju-screen-in {
|
|
from { transform: translateY(6px); opacity: 0.8; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
.saju-v2 .screen-in {
|
|
animation: saju-screen-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
/* paw bob */
|
|
@keyframes saju-paw-bob {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-2px); }
|
|
}
|
|
.saju-v2 .paw-bob {
|
|
animation: saju-paw-bob 2.4s ease-in-out infinite;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* page container */
|
|
.saju-v2 .page {
|
|
min-height: 100vh;
|
|
padding-bottom: var(--bottom-nav-h);
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.saju-v2 .page {
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
}
|
|
}
|