리버스 프록시 관리자
Reverse proxy manager
개발 리소스 저장소
Development resource repository
Custom API Server
개인화 API 서버
반다이 남코의 TCG 'Union Arena'의 덱 빌더
Deck builder for the TCG 'Union Arena' by Bandai Namco
소리 스튜디오(Sori Studio)의 공식 마스토돈 인스턴스입니다.운영자 zenn의 개인적인 기록과 소소한 이야기를 공유하는 독립적인 공간입니다.
This is the official Mastodon instance of Sori Studio.It is an diff --git a/script.js b/script.js index 8c06df6..abd70e2 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,21 @@ +// Focus dot animation +const dot = document.querySelector('.dot-point'); + + function updateDotState() { + const isActive = + document.visibilityState === 'visible' && + document.hasFocus(); + + dot.classList.toggle('is-active', isActive); + } + + document.addEventListener('visibilitychange', updateDotState); + window.addEventListener('focus', updateDotState); + window.addEventListener('blur', updateDotState); + + // 최초 실행 + updateDotState(); + // ping async function checkStatus() { const cards = document.querySelectorAll(".card"); @@ -81,7 +99,7 @@ window.addEventListener("load", () => { setTimeout(startBoltAction, 2000); }); -// 나사 랜덤 각도 부연 +// 나사 랜덤 각도 부연` document.querySelectorAll('.card').forEach((card, cardIndex) => { card.querySelectorAll('.card__decor').forEach((decor, decorIndex) => { @@ -140,4 +158,82 @@ window.addEventListener('keydown', (e) => { console.log(`Current Theme: ${nextTheme}`); } -}); \ No newline at end of file +}); + +const logo = document.querySelector('header h1'); +// const themes = ['semi-nova', 'nova', 'semi-solaris', 'solaris']; +// const STORAGE_KEY = 'selected-theme'; + +let startX = 0; +let isDragging = false; +const SWIPE_THRESHOLD = 40; // px + +function getCurrentThemeIndex() { + return themes.findIndex(t => document.body.classList.contains(t)); +} + +function applyTheme(index) { + themes.forEach(t => document.body.classList.remove(t)); + document.body.classList.add(themes[index]); + localStorage.setItem(STORAGE_KEY, themes[index]); + +const dot = document.querySelector('.dot-point'); + +if (dot) { + dot.classList.remove('blink-alert'); + void dot.offsetWidth; // 애니메이션 리셋 + dot.classList.add('blink-alert'); +} +} + +logo.addEventListener('pointerdown', (e) => { + startX = e.clientX; + isDragging = true; + logo.classList.add('is-sliding'); +}); + +logo.addEventListener('pointerup', (e) => { + if (!isDragging) return; + + const deltaX = e.clientX - startX; + + if (Math.abs(deltaX) > SWIPE_THRESHOLD) { + let index = getCurrentThemeIndex(); + if (index === -1) index = 0; + + if (deltaX > 0) { + // 👉 오른쪽 + index = (index + 1) % themes.length; + } else { + // 👈 왼쪽 + index = (index - 1 + themes.length) % themes.length; + } + + applyTheme(index); + } + + reset(); +}); + +logo.addEventListener('pointerleave', reset); +logo.addEventListener('pointercancel', reset); + +function reset() { + isDragging = false; + logo.classList.remove('is-sliding'); +} +// Focus dot animation + function updateDotState() { + const isActive = + document.visibilityState === 'visible' && + document.hasFocus(); + + dot.classList.toggle('is-active', isActive); + } + + document.addEventListener('visibilitychange', updateDotState); + window.addEventListener('focus', updateDotState); + window.addEventListener('blur', updateDotState); + + // 최초 실행 + updateDotState(); \ No newline at end of file diff --git a/style.css b/style.css index 960565d..bed53cc 100644 --- a/style.css +++ b/style.css @@ -1,500 +1,215 @@ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css"); - @import url("https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@800&family=Staatliches&family=Tenor+Sans&display=swap"); - -@font-face { - font-family: "nova"; - src: url("./font/NovaBySoristudio-Regular.otf") format("opentype"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "solaris"; - src: url("./font/Solaris-3-Script.otf") format("opentype"); - font-weight: normal; - font-style: normal; -} +@font-face { font-family: "nova"; src: url("./font/NovaBySoristudio-Regular.otf") format("opentype"); font-weight: normal; font-style: normal; } +@font-face { font-family: "solaris"; src: url("./font/Solaris-3-Script.otf") format("opentype"); font-weight: normal; font-style: normal; } /* Nova: Stella Sora, Solaris: Wuthering Waves */ .glyph { font-family: "solaris"; } -.nova *, .nova *::before, .nova *::after { font-family: "nova" !important; } + +.nova *, .nova *::before, .nova *::after { font-family: "nova"; } .semi-nova .glyph { font-family: "nova"; } -.solaris *, .solaris *::before, .solaris *::after { font-family: "solaris" !important; } + +.solaris *, .solaris *::before, .solaris *::after { font-family: "solaris"; } .semi-solaris .glyph { font-family: "solaris"; } +/* initial */ +h2 { margin: 0; padding: 0; } +/* utility classes */ +.m-0 { margin: 0 } +.mx-auto { margin-left: auto; margin-right: auto; } +.mt-6 { margin-top: 1.5rem; } +.mb-6 { margin-bottom: 1.5rem; } +.p-0 { padding: 0 } +.pt-5 { padding-top: 1.25rem; } +.pt-20 { padding-top: 5rem; } +.pl-1 { padding-left: 1rem; } +.pb-10 { padding-bottom: 2.5rem; } +.pb-12 { padding-bottom: 3rem; } +.px-4 { padding-left: 1rem; padding-right: 1rem; } +.w-full { width: 100%; } +.max-w-full { max-width: 100%; } +.min-w-0 { min-width: 0; } +.h-6 { height: 1.5rem; } +.h-20 { height: 5rem; } +.flex { display: flex } +.flex-column { flex-direction: column } +.justify-center { justify-content: center; } +.align-center { align-items: center } +.keep-all { word-break: keep-all; } +.text-center { text-align: center; } +.text-ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } +.overflow-hidden { overflow: hidden; } +.pointer { cursor: pointer; } +.grid { display: grid; } +.grid-col-3 { grid-template-columns: repeat(3, 1fr); } +.gap-6 { gap: 1.5rem; } +/* scrollbar styles */ +* { scrollbar-width: thin; scrollbar-color: #333 #050505; } +::-webkit-scrollbar { width: 8px; height: 8px; } +::-webkit-scrollbar-track { background: #050505; } +::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #333, #222); border-radius: 10px; border: 2px solid #050505; } +::-webkit-scrollbar-thumb:hover { background: #444; border-color: #050505; } +::-webkit-scrollbar-thumb:active { background: #00ff88; box-shadow: 0 0 10px #00ff88; } + +/* body styles */ body { - margin: 0; - padding: 0; background-color: #050505; background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #050505 100%); color: #e0e0e0; font-family: "Pretendard", system-ui, sans-serif; min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - word-break: keep-all; } -.nova { - font-family: "nova"; -} +/* header styles */ +.header-title { font-size:3.5rem; font-weight:900; letter-spacing:4px; text-transform:lowercase; cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:pan-y; background:linear-gradient(to bottom, #ffffff 30%, #a1a1a1 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } +.header-title.is-sliding { opacity: 0.85; } +.header-title .dot-point { display:inline-block; margin:0 2px; background:none; -webkit-background-clip:initial; -webkit-text-fill-color:initial; color:linear-gradient(120deg, rgba(255,255,255,0.12), rgba(255,255,255,0.25), rgba(255,255,255,0.12)); } +.header-title .dot-point.is-active { color:#00ff88; animation:pulse-dot 2s infinite; } +.header-title.is-pressing .dot-point { animation-duration: 0.4s; } +.header-title .dot-point.blink-alert { animation: blink-red 0.9s ease-in-out; } +.solaris .header-title { font-size: 2.25rem; margin-top: 1.5rem; } -header { - padding: 80px 0 50px; - text-align: center; -} - -header h1 { - /* font-family: "Tenor Sans", sans-serif; */ - font-family: "Nova", "Tenor Sans", sans-serif; - font-size: 3.5rem; - font-weight: 900; - letter-spacing: 4px; - text-transform: lowercase; - margin: 0; - - background: linear-gradient(to bottom, #ffffff 30%, #a1a1a1 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); -} -.solaris header h1, .semi-solaris header h1 { font-size: 2.5rem; margin-top:30px;} - -header h1 .dot-point { - background: none; - -webkit-background-clip: initial; - -webkit-text-fill-color: initial; - - color: #00ff88; - display: inline-block; - - text-shadow: 0 0 8px rgba(0, 255, 136, 0.8); - - animation: pulse-dot 2s infinite; - margin: 0 2px; -} - -@keyframes pulse-dot { - - 0%, - 100% { - opacity: 0.5; - text-shadow: 0 0 8px rgba(0, 255, 136, 0.8); - } - - 50% { - opacity: 1; - text-shadow: 0 0 2px rgba(0, 255, 136, 0.2); - } -} - -/* [1] 공통 섹션 레이아웃 */ -.category-section { - width: 95%; - max-width: 1440px; - margin: 0 auto 60px; - /* 중앙 정렬 유지 */ -} - -/* [2] 섹션 타이틀 (반응형 대응) */ -.section-title { - font-family: 'Tenor Sans', sans-serif; - font-size: 1.25rem; - color: #666; - margin: 1rem 0 1.5rem; - text-transform: uppercase; - letter-spacing: 3px; - padding-left: 1rem; - margin-bottom: 25px; - border-left: 3px solid #00ff88; - /* 나사 불빛과 맞춘 포인트 컬러 추천 */ - display: flex; - align-items: center; -} +/* section styles */ +.category-section { width: 95%; max-width: 1440px; } +.section-title { font-size:1.25rem; letter-spacing:3px; text-transform:uppercase; color:#666; border-left:3px solid #00ff88; } .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, #333, transparent); - margin-left: 20px; + margin-left: 1.25rem; } -/* [3] 그리드 컨테이너 (부모 폭에 맞춤) */ -.container { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1.5rem; - /* padding 제거 (부모인 category-section에서 폭 제어) */ - width: 100%; -} - -/* --- 반응형 구간 설정 --- */ - -/* 1. 태블릿 (1200px 이하) */ @media (max-width: 1200px) { - .category-section { - max-width: 900px; - /* 2열 카드 폭에 맞춤 */ - } - - .container { - grid-template-columns: repeat(2, 1fr); - } + .category-section { max-width: 900px; } + .container { grid-template-columns: repeat(2, 1fr); } } -/* 2. 모바일 (768px 이하) */ @media (max-width: 768px) { - .category-section { - max-width: 500px; - /* 1열 카드 폭에 맞춤 */ - margin-bottom: 40px; - } - - .container { - grid-template-columns: 1fr; - gap: 1.25rem; - } - - .section-title { - font-size: 1rem; - /* 모바일에서 타이틀 살짝 축소 */ - letter-spacing: 2px; - } - - header h1 { - font-size: 2.5rem; - } + .category-section { max-width: 500px; margin-bottom: 40px; } + .container { grid-template-columns: 1fr; gap: 1.25rem; } + .section-title { font-size: 1rem; letter-spacing: 2px; } } -.card { - position: relative; - display: flex; - flex-direction: column; - gap: 0.5rem; +/* card styles */ +.card { position: relative; display: flex; flex-direction: column; gap: 1.5rem; background: linear-gradient(145deg, #242424 0%, #111111 100%); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid #222222; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05); border-radius: 24px; padding: 3rem 1.5rem; text-decoration: none; color: inherit; transition: all 0.4s ease; } +.card:hover { transform: translateY(-8px); background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%); border-color: #333333; } - background: linear-gradient(145deg, #242424 0%, #111111 100%); - backdrop-filter: blur(40px); - -webkit-backdrop-filter: blur(40px); +/* card title */ +.card__title { height: 2rem; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; line-height: 1; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5); } - border: 1px solid #222222; - - box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05); - - border-radius: 24px; - padding: 30px; - text-decoration: none; - color: inherit; - transition: all 0.4s ease; +.nova .card__title, +.semi-nova .card__title { + font-size: 2.5rem; } -.card:hover { - transform: translateY(-8px); - background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%); - border-color: #333333; +/* card subtitle */ +.card__subtitle { height: 1rem; max-width: 100%; min-width: 0; font-size: 12px; font-weight: 700; color: #eaeaea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } + +.solaris .card__subtitle, +.nova .card__subtitle { + position:relative; + color:transparent } -.card__decor { - position: absolute; - width: 1rem; - height: 1rem; - background: linear-gradient(135deg, #777 0%, #333 100%); - border-radius: 50%; - border: 1px solid #111; +.solaris .card__subtitle::after, .nova .card__subtitle::after { + content:""; position:absolute; display:block; top:0; left:0; width:100%; height:1rem; opacity:0.25; background:linear-gradient(120deg, rgba(255,255,255,0.12), rgba(255,255,255,0.25), rgba(255,255,255,0.12)); background-size:200% 100%; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 12px rgba(0,0,0,0.08); animation:glass-skeleton 1.6s ease-in-out infinite; } -.card__decor--tl { - top: 1rem; - left: 1rem; -} -.card__decor--tr { - top: 1rem; - right: 1rem; -} - -.card__decor--bl { - bottom: 1rem; - left: 1rem; -} - -.card__decor--br { - bottom: 1rem; - right: 1rem; -} - -.card__decor::before { - content: ""; - position: absolute; - top: 50%; - left: 50%; - - width: 64%; - height: 1.5px; - border-radius: 4px; - - background: #222; - - /* 핵심: 회전값은 CSS 변수 */ - transform: translate(-50%, -50%) rotate(var(--r, 0deg)); - transition: transform 0.3s ease, background 0.3s ease; -} - -/* 작동 상태 */ -.card__decor.card__decor-acting::before { - transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 45deg)); - background: #000; -} - -.card__decor[data-rotate="45"]::before { - transform: translate(-50%, -50%) rotate(45deg); -} - -.card__decor[data-rotate="160"]::before { - transform: translate(-50%, -50%) rotate(160deg); -} - -.card__decor[data-rotate="-20"]::before { - transform: translate(-50%, -50%) rotate(-20deg); -} - -.card__decor[data-rotate="100"]::before { - transform: translate(-50%, -50%) rotate(100deg); -} - -.card__header { - width: 100%; - min-width: 0; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - overflow: hidden; -} - -.card__title { - max-width: 100%; - min-width: 0; - - font-size: 2rem; - line-height: 1; - -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5); - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: center; -} - -.nova .card__title, .semi-nova .card__title {font-size: 2.5rem;} - -.card__subtitle { - max-width: 100%; - min-width: 0; - - font-family: "Pretendard", sans-serif; - font-size: 12px; - font-weight: 700; +.solaris .card:hover .card__subtitle, +.nova .card:hover .card__subtitle { + display: block; color: #eaeaea; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: center; -} - -.card__body { - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: center; - min-width: 0; -} - -.card__meta--url { - margin: 1.25rem 0 0.25rem; - font-size: 1.125rem; - font-weight: 700; - color: #acacac; - - text-transform: lowercase; - letter-spacing: -0.3px; - text-align: center; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1; font-family: "Pretendard", sans-serif; } -.nova .card__meta--url { - margin: 0.5rem 0 0 ; -} -.card__desc { - margin: 0.25rem 0 0; - color: #888888; - font-size: 0.85rem; - font-weight: 400; - color: #666666; - text-align: center; -} - -.card__desc[data-lang="en"] { +.solaris .card:hover .card__subtitle:after, +.nova .card:hover .card__subtitle:after { display: none; } -.status-online { - background-color: #00ff88; - box-shadow: 0 0 10px #00ff88; - animation: pulse 2s infinite; + +/* card body */ +.card__body { display:flex; flex-direction:column; justify-content:center; flex-grow:1; min-width:0; } + +.card__meta--url { display:flex; flex:1; justify-content:center; align-items:center; height:1.5rem; min-height:1.5rem; max-height:1.5rem; font-size:1.125rem; font-weight:700; letter-spacing:-0.3px; text-transform:lowercase; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#acacac; } +.solaris .card__meta--url { font-size: 1rem; } +.nova .card__meta--url { font-size: 1.5rem; } + +.card__desc { display:flex; justify-content:center; align-items:center; margin:0; min-height:1.125rem; font-size:0.85rem; line-height:1.125rem; font-weight:400; text-align:center; color:#666666; } +.card__desc[data-lang="en"] { display: none; } + + + +.status-online { background-color:#00ff88; box-shadow:0 0 10px #00ff88; animation:pulse 2s infinite; } +.status-offline { background-color:#ff4444; box-shadow:0 0 10px #ff4444; animation:none; } + + + + + +.card__decor-acting::before { animation: bolt-spin-return 16s cubic-bezier(0.65, 0, 0.35, 1) forwards; } + +.solaris .section-title { font-size: 1.25rem; } +.nova .section-title { font-size: 1.75rem; } +.solaris .card__desc[data-lang="ko"], +.nova .card__desc[data-lang="ko"] { display:none; } +.solaris .card__desc[data-lang="ko"], +.nova .card__desc[data-lang="ko"] { display:none; } +.solaris .card__desc[data-lang="en"] { display:block; margin:0; font-size:0.875rem; } +.nova .card__desc[data-lang="en"] { display:block; margin:0; font-size:1.25rem; } + + +/* card decor */ +.card__decor-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } +.card__decor { position: absolute; width: 1rem; height: 1rem; background: linear-gradient(135deg, #777 0%, #333 100%); border-radius: 50%; border: 1px solid #111; } + +.card__decor--tl { top: 1rem; left: 1rem; } +.card__decor--tr { top: 1rem; right: 1rem; } +.card__decor--bl { bottom: 1rem; left: 1rem; } +.card__decor--br { bottom: 1rem; right: 1rem; } + +.card__decor::before { content: ""; position: absolute; top: 50%; left: 50%; width: 64%; height: 1.5px; border-radius: 4px; background: #222; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); transition: all 0.3s ease; } +.card__decor.card__decor-acting::before { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 45deg)); background: #000; } + + +/* keyframes */ +@keyframes blink-red { + 0%, 100% { color: currentColor; opacity: 1; text-shadow: none; } + 20%, 60% { color: #ff3b3b; text-shadow: 0 0 6px rgba(255, 59, 59, 0.9); } + 40%, 80% { color: currentColor; text-shadow: none; } } -.status-offline { - background-color: #ff4444; - box-shadow: 0 0 10px #ff4444; - animation: none; +header h1 .dot-point.pulse-once { + animation: pulse-alert 0.5s ease-out !important; +} + +@keyframes pulse-once { + 0% { transform: scale(1); opacity: 0.7; text-shadow: 0 0 6px rgba(0, 255, 136, 0.6); } + 40% { transform: scale(5); opacity: 1; text-shadow: 0 0 14px rgba(0, 255, 136, 1); } + 100% { transform: scale(1); opacity: 0.9; text-shadow: 0 0 8px rgba(0, 255, 136, 0.8); } } @keyframes pulse { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); - } - 70% { - transform: scale(1); - box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); - } - 100% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); - } + 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); } + 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } + 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } } -@media (max-width: 768px) { - .container { - grid-template-columns: 1fr; - } +@keyframes pulse-dot { + 0%, 100% { opacity: 0.5; text-shadow: 0 0 8px rgba(0, 255, 136, 0.8); } + 50% { opacity: 1; text-shadow: 0 0 2px rgba(0, 255, 136, 0.2); } } @keyframes bolt-spin-return { 0% { transform: translate(-50%, -50%) rotate(var(--r)); } - 60% { - transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg)); - } - 70% { - transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg)); - } - 100% { - transform: translate(-50%, -50%) rotate(var(--r)); - } -} - -.card__decor-acting::before { - animation: bolt-spin-return 16s cubic-bezier(0.65, 0, 0.35, 1) forwards; -} - - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-track { - background: #050505; -} - -::-webkit-scrollbar-thumb { - background: linear-gradient(to bottom, #333, #222); - border-radius: 10px; - border: 2px solid #050505; -} - -::-webkit-scrollbar-thumb:hover { - background: #444; - border-color: #050505; -} - -::-webkit-scrollbar-thumb:active { - background: #00ff88; - box-shadow: 0 0 10px #00ff88; -} - -* { - scrollbar-width: thin; - scrollbar-color: #333 #050505; -} - - -.solaris .section-title, .nova .section-title { - font-size: 1.75rem; - margin: 1rem 0 1.5rem; -} - -.solaris .card__subtitle, .nova .card__subtitle { - display: none; -} - -.solaris .card__title::after, .nova .card__title::after { - content: ""; - display: block; - width: 100%; - height: 1rem; - opacity: 0.25; - - /* Glass base */ - background: linear-gradient(120deg, - rgba(255, 255, 255, 0.12), - rgba(255, 255, 255, 0.25), - rgba(255, 255, 255, 0.12)); - - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); - - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.25), - 0 4px 12px rgba(0, 0, 0, 0.08); - - background-size: 200% 100%; - animation: glass-skeleton 1.6s ease-in-out infinite; -} - -.solaris .card__meta--url { - font-size: 1rem; - margin-bottom: 0; -} - -.nova .card__meta--url { - font-size: 1.5rem; -} - -.solaris .card__desc[data-lang="ko"], -.nova .card__desc[data-lang="ko"] { - display: none; -} - -.solaris .card__desc[data-lang="ko"], -.nova .card__desc[data-lang="ko"] { - display: none; -} - -.solaris .card__desc[data-lang="en"] { - font-size: 0.875rem; - display: block; - margin: 0; -} - -.nova .card__desc[data-lang="en"] { - font-size: 1.25rem; - display: block; - margin: 0; + 60% { transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg)); } + 70% { transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg)); } + 100% { transform: translate(-50%, -50%) rotate(var(--r)); } } @keyframes glass-skeleton {