lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: left-to-right fade animations on sovereign phases + match close button to film modal

Browse Source 
- NAH! text now slides in from the left with a scale punch and glow
- Own your privacy phase slides in from the left with a smooth fade
- Close button restyled to match ContentDetailModal (circular, glassmorphism, blur)

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-13 22:47:56 +00:00
parent 19e8186a30
commit 37b0bc654a
2 changed files with 51 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@@ -20,7 +20,7 @@ services:
context: .
dockerfile: Dockerfile
args:
CACHEBUST: "24"
CACHEBUST: "25"
VITE_USE_MOCK_DATA: "false"
VITE_CONTENT_ORIGIN: ${FRONTEND_URL}
VITE_INDEEHUB_API_URL: /api

67
src/components/AuthModal.vue
View File

@@ -3,9 +3,9 @@
<div v-if="isOpen" class="auth-modal-overlay" @click.self="closeModal">
<div class="auth-modal-container">
<div class="auth-modal-content">
<!-- Close Button -->
<button @click="closeModal" class="absolute top-4 right-4 text-white/60 hover:text-white transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<!-- Close Button — matches film detail modal -->
<button @click="closeModal" class="auth-close-btn">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
@@ -645,13 +645,36 @@ declare global {
opacity: 0.85;
}
/* ── NAH! Phase ── */
/* ── Close Button — matches film detail modal ── */
.auth-close-btn {
position: absolute;
top: 16px;
right: 16px;
z-index: 20;
padding: 8px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 9999px;
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
transition: all 0.2s ease;
}
.auth-close-btn:hover {
color: white;
background: rgba(0, 0, 0, 0.8);
border-color: rgba(255, 255, 255, 0.15);
}
/* ── NAH! Phase — left-to-right reveal ── */
.sovereign-nah {
display: flex;
align-items: center;
justify-content: center;
min-height: 280px;
animation: nahEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
overflow: hidden;
}
.nah-text {
@@ -664,36 +687,46 @@ declare global {
color: transparent;
text-shadow: none;
filter: drop-shadow(0 0 40px rgba(255, 0, 0, 0.3));
animation: nahPulse 0.8s ease-in-out;
/* Left-to-right fade-slide with a slight scale punch */
animation:
nahSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
nahGlow 0.9s ease-in-out 0.3s;
}
@keyframes nahEntrance {
@keyframes nahSlideIn {
0% {
transform: scale(0.3) rotate(-5deg);
opacity: 0;
transform: translateX(-60px) scale(0.85);
filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0));
}
50% {
transform: scale(1.15) rotate(2deg);
70% {
opacity: 1;
transform: translateX(8px) scale(1.05);
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
transform: translateX(0) scale(1);
filter: drop-shadow(0 0 40px rgba(255, 0, 0, 0.3));
}
}
@keyframes nahPulse {
@keyframes nahGlow {
0%, 100% { filter: drop-shadow(0 0 40px rgba(255, 0, 0, 0.3)); }
50% { filter: drop-shadow(0 0 80px rgba(255, 0, 0, 0.6)); }
}
/* ── Own Your Privacy Phase ── */
/* ── Own Your Privacy Phase — left-to-right fade ── */
.sovereign-own-privacy {
min-height: 280px;
display: flex;
align-items: center;
justify-content: center;
animation: privacyFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
overflow: hidden;
}
.sovereign-own-privacy > div {
animation: privacySlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.own-privacy-heading {
@@ -706,14 +739,14 @@ declare global {
color: transparent;
}
@keyframes privacyFadeIn {
@keyframes privacySlideIn {
0% {
transform: translateY(20px) scale(0.95);
opacity: 0;
transform: translateX(-40px);
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
transform: translateX(0);
}
}