feat(tarot): 랜딩 상단 nav + account 제거, ARCANA TAROT brand만 유지
topbar wrapper 제거, brand가 hero-content 직속 첫 자식이 됨. nav(오늘의 카드/타로 리딩/스프레드/가이드/마이 페이지) + account(프리미엄/로그인) 모두 제거 — brand 단독으로 좌상단 표시. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,12 +1,13 @@
|
||||
/* Tarot Lab — 다크 보라+금 톤 */
|
||||
.tarot {
|
||||
--tarot-bg-1: #0a0420;
|
||||
--tarot-bg-2: #1a0d2e;
|
||||
--tarot-bg-3: #2a1648;
|
||||
--tarot-gold: #d4af37;
|
||||
--tarot-gold-dim: rgba(212, 175, 55, .35);
|
||||
--tarot-text: #e9e2ff;
|
||||
--tarot-text-dim: rgba(233, 226, 255, .7);
|
||||
--tarot-bg-1: #06030f;
|
||||
--tarot-bg-2: #140921;
|
||||
--tarot-bg-3: #281247;
|
||||
--tarot-gold: #f1d891;
|
||||
--tarot-gold-deep: #c3943d;
|
||||
--tarot-gold-dim: rgba(241, 216, 145, .42);
|
||||
--tarot-text: #fff6df;
|
||||
--tarot-text-dim: rgba(255, 246, 223, .78);
|
||||
--tarot-card-w: 100px;
|
||||
--tarot-card-h: 150px;
|
||||
|
||||
@@ -19,7 +20,15 @@
|
||||
|
||||
.tarot--landing {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 166px);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(241, 216, 145, .2);
|
||||
border-radius: 22px;
|
||||
background: #05020c;
|
||||
box-shadow:
|
||||
0 28px 80px rgba(0, 0, 0, .48),
|
||||
0 0 0 1px rgba(255, 255, 255, .03) inset,
|
||||
0 0 48px rgba(113, 67, 170, .15);
|
||||
}
|
||||
|
||||
.tarot__hero-poster {
|
||||
@@ -31,137 +40,465 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tarot__hero-video {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tarot__hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(10,4,32,.92) 0%, rgba(10,4,32,.55) 35%, rgba(10,4,32,.12) 60%, rgba(10,4,32,0) 100%),
|
||||
linear-gradient(180deg, rgba(10,4,32,0) 0%, rgba(10,4,32,.55) 100%);
|
||||
z-index: 2;
|
||||
linear-gradient(90deg, rgba(4, 3, 12, .9) 0%, rgba(8, 4, 20, .72) 33%, rgba(11, 5, 26, .22) 62%, rgba(6, 3, 14, .08) 100%),
|
||||
linear-gradient(180deg, rgba(5, 2, 13, .38) 0%, rgba(5, 2, 13, .08) 46%, rgba(5, 2, 13, .72) 100%);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tarot__corner {
|
||||
position: absolute;
|
||||
bottom: -92px;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border: 1px solid rgba(241, 216, 145, .28);
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
opacity: .6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tarot__corner::before,
|
||||
.tarot__corner::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 28px;
|
||||
border: 1px solid rgba(241, 216, 145, .22);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tarot__corner::after {
|
||||
inset: 68px;
|
||||
}
|
||||
|
||||
.tarot__corner--left {
|
||||
left: -112px;
|
||||
}
|
||||
|
||||
.tarot__corner--right {
|
||||
top: 116px;
|
||||
right: -168px;
|
||||
bottom: auto;
|
||||
opacity: .34;
|
||||
}
|
||||
|
||||
.tarot__hero-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
padding: 40px clamp(24px, 4vw, 80px) 80px;
|
||||
max-width: 1600px;
|
||||
display: flex;
|
||||
min-height: calc(100vh - 166px);
|
||||
flex-direction: column;
|
||||
padding: 20px clamp(18px, 2.6vw, 34px) 28px;
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tarot__topbar {
|
||||
display: flex;
|
||||
min-height: 74px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-bottom: clamp(40px, 6vw, 80px);
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
padding: 10px 18px;
|
||||
border: 1px solid rgba(241, 216, 145, .25);
|
||||
border-radius: 20px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(8, 5, 20, .78), rgba(8, 5, 20, .42)),
|
||||
rgba(8, 5, 20, .44);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 246, 223, .08) inset,
|
||||
0 0 0 1px rgba(0, 0, 0, .18);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.tarot__brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 14px;
|
||||
font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
|
||||
font-size: 18px;
|
||||
letter-spacing: 4px;
|
||||
font-size: clamp(18px, 1.7vw, 27px);
|
||||
letter-spacing: .18em;
|
||||
color: var(--tarot-gold);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tarot__brand-mark {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(241, 216, 145, .72);
|
||||
border-radius: 50%;
|
||||
color: var(--tarot-gold);
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 16px rgba(241, 216, 145, .48);
|
||||
}
|
||||
|
||||
.tarot__brand-mark::before,
|
||||
.tarot__brand-mark::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -7px;
|
||||
border: 1px solid rgba(241, 216, 145, .34);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tarot__brand-mark::after {
|
||||
inset: 9px;
|
||||
border-color: rgba(241, 216, 145, .2);
|
||||
}
|
||||
|
||||
.tarot__brand-spark {
|
||||
color: #fff0bd;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 14px rgba(241, 216, 145, .6);
|
||||
}
|
||||
|
||||
.tarot__brand-name {
|
||||
text-shadow: 0 2px 22px rgba(241, 216, 145, .24);
|
||||
}
|
||||
|
||||
.tarot__nav {
|
||||
display: flex;
|
||||
gap: clamp(16px, 2vw, 32px);
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: clamp(18px, 2vw, 36px);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--tarot-text-dim);
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tarot__nav a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color .18s ease, text-shadow .18s ease;
|
||||
}
|
||||
|
||||
.tarot__nav a:hover {
|
||||
color: var(--tarot-gold);
|
||||
text-shadow: 0 0 14px rgba(241, 216, 145, .35);
|
||||
}
|
||||
|
||||
.tarot__account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tarot__premium {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--tarot-gold);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tarot__login {
|
||||
display: inline-flex;
|
||||
min-width: 82px;
|
||||
height: 46px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(241, 216, 145, .42);
|
||||
border-radius: 12px;
|
||||
background: rgba(20, 11, 40, .6);
|
||||
color: var(--tarot-text);
|
||||
font-weight: 700;
|
||||
transition: border-color .18s ease, background .18s ease, color .18s ease;
|
||||
}
|
||||
|
||||
.tarot__login:hover {
|
||||
border-color: rgba(241, 216, 145, .8);
|
||||
background: rgba(37, 22, 64, .76);
|
||||
color: var(--tarot-gold);
|
||||
}
|
||||
|
||||
.tarot__hero-copy {
|
||||
width: min(700px, 52%);
|
||||
padding-left: clamp(16px, 4vw, 72px);
|
||||
padding-top: clamp(54px, 7vw, 108px);
|
||||
}
|
||||
|
||||
.tarot__h1 {
|
||||
font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
|
||||
font-size: clamp(40px, 6vw, 84px);
|
||||
line-height: 1.05;
|
||||
margin: clamp(40px, 6vw, 80px) 0 20px;
|
||||
font-size: clamp(46px, 5.8vw, 92px);
|
||||
font-weight: 700;
|
||||
line-height: 1.18;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
color: var(--tarot-text);
|
||||
max-width: 16ch;
|
||||
text-shadow:
|
||||
0 2px 0 rgba(83, 55, 20, .5),
|
||||
0 0 24px rgba(241, 216, 145, .22);
|
||||
}
|
||||
|
||||
.tarot__ornament {
|
||||
display: grid;
|
||||
width: min(100%, 610px);
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin: 22px 0 28px;
|
||||
color: var(--tarot-gold);
|
||||
}
|
||||
|
||||
.tarot__ornament span {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(241, 216, 145, .72), transparent);
|
||||
}
|
||||
|
||||
.tarot__ornament b {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
text-shadow: 0 0 16px rgba(241, 216, 145, .6);
|
||||
}
|
||||
|
||||
.tarot__sub {
|
||||
font-size: clamp(15px, 1.1vw, 18px);
|
||||
color: var(--tarot-text-dim);
|
||||
max-width: 44ch;
|
||||
margin-bottom: 36px;
|
||||
line-height: 1.55;
|
||||
margin: 0 0 30px;
|
||||
color: var(--tarot-text-dim);
|
||||
font-size: clamp(15px, 1.1vw, 18px);
|
||||
line-height: 1.8;
|
||||
text-shadow: 0 2px 14px rgba(0, 0, 0, .58);
|
||||
}
|
||||
|
||||
.tarot__cta-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 60px;
|
||||
gap: 18px;
|
||||
margin-bottom: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tarot__cta {
|
||||
display: inline-flex;
|
||||
min-width: 196px;
|
||||
height: 58px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
border: 1px solid var(--tarot-gold);
|
||||
border-radius: 6px;
|
||||
background: rgba(212, 175, 55, .08);
|
||||
color: var(--tarot-gold);
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 0 24px;
|
||||
border: 1px solid rgba(81, 53, 16, .7);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #ffe9a9 0%, #d6ad59 100%);
|
||||
color: #25160d;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
letter-spacing: 1px;
|
||||
transition: background .2s;
|
||||
font-size: 19px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
box-shadow:
|
||||
0 12px 32px rgba(0, 0, 0, .3),
|
||||
0 1px 0 rgba(255, 255, 255, .6) inset,
|
||||
0 0 0 2px rgba(91, 63, 25, .25) inset;
|
||||
transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
|
||||
}
|
||||
|
||||
.tarot__cta:hover {
|
||||
background: rgba(212, 175, 55, .18);
|
||||
color: #25160d;
|
||||
filter: brightness(1.06);
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 16px 36px rgba(0, 0, 0, .36),
|
||||
0 1px 0 rgba(255, 255, 255, .62) inset,
|
||||
0 0 0 2px rgba(91, 63, 25, .28) inset;
|
||||
}
|
||||
|
||||
.tarot__cta-arrow {
|
||||
margin-left: 10px;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tarot__card-icon {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--tarot-gold);
|
||||
border-radius: 4px;
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
|
||||
.tarot__card-icon::before {
|
||||
content: '✶';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--tarot-gold);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tarot__cta--secondary {
|
||||
border-color: rgba(233, 226, 255, .25);
|
||||
border-color: rgba(241, 216, 145, .54);
|
||||
background: linear-gradient(180deg, rgba(30, 17, 54, .72), rgba(16, 9, 33, .72));
|
||||
color: var(--tarot-text);
|
||||
box-shadow:
|
||||
0 12px 32px rgba(0, 0, 0, .26),
|
||||
0 0 0 2px rgba(241, 216, 145, .16) inset;
|
||||
}
|
||||
|
||||
.tarot__cta--secondary:hover {
|
||||
background: linear-gradient(180deg, rgba(45, 27, 76, .82), rgba(19, 11, 38, .82));
|
||||
color: var(--tarot-gold);
|
||||
}
|
||||
|
||||
.tarot__tier-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: clamp(16px, 1.5vw, 28px);
|
||||
margin-top: clamp(40px, 5vw, 72px);
|
||||
max-width: 980px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
width: min(820px, 62%);
|
||||
margin-top: auto;
|
||||
margin-left: clamp(12px, 3.5vw, 54px);
|
||||
border: 1px solid rgba(241, 216, 145, .28);
|
||||
border-radius: 28px;
|
||||
background: linear-gradient(180deg, rgba(36, 20, 55, .5), rgba(12, 8, 30, .48));
|
||||
box-shadow:
|
||||
0 22px 52px rgba(0, 0, 0, .28),
|
||||
0 1px 0 rgba(255, 246, 223, .07) inset;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.tarot__tier {
|
||||
padding: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, .08);
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, .03);
|
||||
transition: transform .2s, border-color .2s;
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 190px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 22px 24px;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
transition: background .18s ease, transform .18s ease;
|
||||
}
|
||||
.tarot__tier:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--tarot-gold-dim);
|
||||
|
||||
.tarot__tier + .tarot__tier {
|
||||
border-left: 1px solid rgba(241, 216, 145, .28);
|
||||
}
|
||||
.tarot__tier h3 {
|
||||
font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
|
||||
font-size: 20px;
|
||||
|
||||
.tarot__tier + .tarot__tier::before {
|
||||
content: '✦';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -7px;
|
||||
color: var(--tarot-gold);
|
||||
margin-bottom: 8px;
|
||||
font-size: 15px;
|
||||
text-shadow: 0 0 12px rgba(241, 216, 145, .45);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.tarot__tier:hover {
|
||||
background: rgba(255, 246, 223, .04);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.tarot__tier-icon {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
margin-bottom: 12px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(241, 216, 145, .36);
|
||||
border-radius: 50%;
|
||||
background: rgba(12, 7, 27, .34);
|
||||
color: var(--tarot-gold);
|
||||
}
|
||||
|
||||
.tarot__tier-icon::before,
|
||||
.tarot__tier-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tarot__tier-icon--sun::before {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid var(--tarot-gold);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 8px rgba(241, 216, 145, .08), 0 0 18px rgba(241, 216, 145, .35);
|
||||
}
|
||||
|
||||
.tarot__tier-icon--sun::after {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background: repeating-conic-gradient(from 0deg, var(--tarot-gold) 0 8deg, transparent 8deg 22deg);
|
||||
mask: radial-gradient(circle, transparent 0 22px, #000 23px 27px, transparent 28px);
|
||||
}
|
||||
|
||||
.tarot__tier-icon--cards::before {
|
||||
width: 24px;
|
||||
height: 36px;
|
||||
border: 1px solid var(--tarot-gold);
|
||||
border-radius: 4px;
|
||||
box-shadow: -14px 4px 0 -1px rgba(12, 7, 27, 1), -14px 4px 0 0 var(--tarot-gold), 14px 4px 0 -1px rgba(12, 7, 27, 1), 14px 4px 0 0 var(--tarot-gold);
|
||||
}
|
||||
|
||||
.tarot__tier-icon--cards::after {
|
||||
content: '✶';
|
||||
color: var(--tarot-gold);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tarot__tier-icon--moon::before {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
box-shadow: -9px 0 0 0 var(--tarot-gold);
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.tarot__tier-icon--moon::after {
|
||||
content: '✦';
|
||||
top: 18px;
|
||||
right: 17px;
|
||||
color: var(--tarot-gold);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.tarot__tier h3 {
|
||||
margin: 0 0 6px;
|
||||
color: var(--tarot-gold);
|
||||
font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
|
||||
font-size: 23px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.tarot__tier p {
|
||||
margin: 0;
|
||||
color: rgba(255, 246, 223, .7);
|
||||
font-size: 14px;
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.tarot__scroll-cue {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 20px;
|
||||
color: rgba(255, 231, 173, .8);
|
||||
font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
|
||||
font-size: 12px;
|
||||
letter-spacing: .16em;
|
||||
}
|
||||
|
||||
.tarot__scroll-cue b {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ===== Reading page (3-step) ===== */
|
||||
@@ -582,6 +919,21 @@
|
||||
.tarot-reading {
|
||||
grid-template-columns: 280px minmax(0, 1fr) 320px;
|
||||
}
|
||||
.tarot__topbar {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tarot__brand {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
.tarot__nav {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.tarot__hero-copy {
|
||||
width: min(720px, 60%);
|
||||
}
|
||||
.tarot__tier-row {
|
||||
width: min(760px, 72%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@@ -589,11 +941,23 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.tarot__hero-content {
|
||||
padding: 32px 24px 64px;
|
||||
padding: 18px 20px 28px;
|
||||
}
|
||||
.tarot__hero-copy {
|
||||
width: min(680px, 78%);
|
||||
padding-top: 58px;
|
||||
}
|
||||
.tarot__tier-row {
|
||||
width: min(720px, 92%);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.tarot--landing,
|
||||
.tarot__hero-content {
|
||||
min-height: calc(100vh - 138px);
|
||||
}
|
||||
.tarot-reading {
|
||||
padding: 24px 16px 32px;
|
||||
}
|
||||
@@ -602,10 +966,80 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tarot-reading-steps__sep { display: none; }
|
||||
.tarot__cta-row { flex-wrap: wrap; }
|
||||
.tarot__topbar { gap: 16px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.tarot__hero-video { display: none; }
|
||||
.tarot__topbar {
|
||||
gap: 14px;
|
||||
border-radius: 16px;
|
||||
padding: 14px;
|
||||
}
|
||||
.tarot__brand {
|
||||
gap: 10px;
|
||||
font-size: 18px;
|
||||
letter-spacing: .12em;
|
||||
}
|
||||
.tarot__brand-spark {
|
||||
display: none;
|
||||
}
|
||||
.tarot__brand-mark {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.tarot__nav {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
gap: 14px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.tarot__account {
|
||||
margin-left: auto;
|
||||
gap: 10px;
|
||||
}
|
||||
.tarot__premium {
|
||||
display: none;
|
||||
}
|
||||
.tarot__login {
|
||||
min-width: 66px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.tarot__hero-copy {
|
||||
width: 100%;
|
||||
padding: 44px 2px 0;
|
||||
}
|
||||
.tarot__h1 {
|
||||
font-size: clamp(40px, 12vw, 58px);
|
||||
}
|
||||
.tarot__sub {
|
||||
font-size: 14px;
|
||||
}
|
||||
.tarot__cta {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 54px;
|
||||
font-size: 17px;
|
||||
}
|
||||
.tarot__tier-row {
|
||||
grid-template-columns: 1fr;
|
||||
width: 100%;
|
||||
margin-top: 38px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.tarot__tier {
|
||||
min-height: 148px;
|
||||
}
|
||||
.tarot__tier + .tarot__tier {
|
||||
border-top: 1px solid rgba(241, 216, 145, .28);
|
||||
border-left: 0;
|
||||
}
|
||||
.tarot__tier + .tarot__tier::before {
|
||||
top: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.tarot__scroll-cue {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,68 +1,72 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Tarot.css';
|
||||
|
||||
export default function Tarot() {
|
||||
const videoRef = useRef(null);
|
||||
useEffect(() => {
|
||||
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
const saveData = navigator.connection?.saveData;
|
||||
if ((reduced || saveData) && videoRef.current) {
|
||||
videoRef.current.pause();
|
||||
videoRef.current.style.display = 'none';
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="tarot tarot--landing">
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="tarot__hero-video"
|
||||
src="/videos/tarot_hero.mp4"
|
||||
autoPlay loop muted playsInline preload="metadata"
|
||||
poster="/images/tarot_background.png"
|
||||
/>
|
||||
<img className="tarot__hero-poster" src="/images/tarot_background.png" alt="" aria-hidden />
|
||||
<div className="tarot__hero-overlay" />
|
||||
<div className="tarot__corner tarot__corner--left" aria-hidden />
|
||||
<div className="tarot__corner tarot__corner--right" aria-hidden />
|
||||
|
||||
<div className="tarot__hero-content">
|
||||
<div className="tarot__topbar">
|
||||
<header className="tarot__brand">
|
||||
<span>✦</span>
|
||||
<span>ARCANA TAROT</span>
|
||||
<header className="tarot__brand" aria-label="Arcana Tarot">
|
||||
<span className="tarot__brand-spark" aria-hidden>✦</span>
|
||||
<span className="tarot__brand-mark" aria-hidden>A</span>
|
||||
<span className="tarot__brand-name">ARCANA TAROT</span>
|
||||
<span className="tarot__brand-spark" aria-hidden>✦</span>
|
||||
</header>
|
||||
|
||||
<nav className="tarot__nav" aria-label="Tarot navigation">
|
||||
<Link to="/tarot/today">오늘의 카드</Link>
|
||||
<Link to="/tarot/reading">타로 리딩</Link>
|
||||
<Link to="/tarot/history">히스토리</Link>
|
||||
</nav>
|
||||
<section className="tarot__hero-copy" aria-labelledby="tarot-landing-title">
|
||||
<h1 id="tarot-landing-title" className="tarot__h1">
|
||||
당신의<br />
|
||||
오늘을 비추는 타로
|
||||
</h1>
|
||||
<div className="tarot__ornament" aria-hidden>
|
||||
<span />
|
||||
<b>✶</b>
|
||||
<span />
|
||||
</div>
|
||||
|
||||
<h1 className="tarot__h1">당신의 오늘을<br />비추는 타로</h1>
|
||||
<p className="tarot__sub">
|
||||
카드를 펼쳐, 당신만의 인사이트를 받아보세요.
|
||||
라이더-웨이트 덱과 Claude Sonnet 4.6 해석이 함께합니다.
|
||||
카드를 뽑고, 당신만을 위한 인사이트를 받아보세요.<br />
|
||||
운명은 이미 당신 안에 있습니다.
|
||||
</p>
|
||||
|
||||
<div className="tarot__cta-row">
|
||||
<Link to="/tarot/reading" className="tarot__cta">지금 시작하기 →</Link>
|
||||
<Link to="/tarot/today" className="tarot__cta tarot__cta--secondary">오늘의 카드</Link>
|
||||
<Link to="/tarot/reading" className="tarot__cta">
|
||||
<span aria-hidden>✦</span>
|
||||
지금 시작하기
|
||||
<span className="tarot__cta-arrow" aria-hidden>→</span>
|
||||
</Link>
|
||||
<Link to="/tarot/today" className="tarot__cta tarot__cta--secondary">
|
||||
<span className="tarot__card-icon" aria-hidden />
|
||||
오늘의 카드
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="tarot-guide" className="tarot__tier-row" aria-label="Tarot features">
|
||||
<article className="tarot__tier">
|
||||
<span className="tarot__tier-icon tarot__tier-icon--sun" aria-hidden />
|
||||
<h3>오늘의 운세</h3>
|
||||
<p>매일 한 장의 카드로<br />오늘의 흐름을 확인하세요.</p>
|
||||
</article>
|
||||
<article className="tarot__tier">
|
||||
<span className="tarot__tier-icon tarot__tier-icon--cards" aria-hidden />
|
||||
<h3>3장 스프레드</h3>
|
||||
<p>과거·현재·미래를 통해<br />더 깊은 해답을 얻어보세요.</p>
|
||||
</article>
|
||||
<article className="tarot__tier">
|
||||
<span className="tarot__tier-icon tarot__tier-icon--moon" aria-hidden />
|
||||
<h3>AI 해석</h3>
|
||||
<p>AI가 전하는 통찰로<br />나만의 리딩을 완성하세요.</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div className="tarot__tier-row">
|
||||
<article className="tarot__tier">
|
||||
<h3>🌙 오늘의 운세</h3>
|
||||
<p>매일 1장의 카드로 오늘의 흐름을 확인하세요.</p>
|
||||
</article>
|
||||
<article className="tarot__tier">
|
||||
<h3>🃏 3장 스프레드</h3>
|
||||
<p>과거·현재·미래의 흐름을 한눈에 읽어봅니다.</p>
|
||||
</article>
|
||||
<article className="tarot__tier">
|
||||
<h3>✨ AI 해석</h3>
|
||||
<p>Claude Sonnet 4.6이 카드 의미·위치·상호작용을 근거로 풀어줍니다.</p>
|
||||
</article>
|
||||
<div className="tarot__scroll-cue" aria-hidden>
|
||||
<span>SCROLL TO DISCOVER</span>
|
||||
<b>⌄</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user