diff --git a/css/style.css b/css/style.css
index 6b7d477..d7adb6c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -378,22 +378,39 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
top: 0; right: 0;
width: 230px; height: 300px;
background: linear-gradient(160deg, var(--sf-coral), #8B2A2A);
- transform: rotate(6deg);
z-index: 3;
+ animation: card-sway-1 4.2s ease-in-out infinite alternate;
}
.sfB-stack-card.c2 {
top: 60px; right: 200px;
width: 200px; height: 260px;
background: linear-gradient(160deg, var(--sf-teal), var(--sf-teal-deep));
- transform: rotate(-8deg);
z-index: 2;
+ animation: card-sway-2 5.1s ease-in-out infinite alternate;
+ animation-delay: -2.3s;
}
.sfB-stack-card.c3 {
top: 220px; right: 80px;
width: 220px; height: 220px;
background: linear-gradient(160deg, var(--sf-orange), #B85A1F);
- transform: rotate(3deg);
z-index: 4;
+ animation: card-sway-3 3.7s ease-in-out infinite alternate;
+ animation-delay: -1.1s;
+}
+.sfB-stack-card.c1:hover { animation-duration: 1.6s; }
+.sfB-stack-card.c2:hover { animation-duration: 1.9s; }
+.sfB-stack-card.c3:hover { animation-duration: 1.4s; }
+@keyframes card-sway-1 {
+ from { transform: rotate(4deg) translateY(2px); }
+ to { transform: rotate(8deg) translateY(-10px); }
+}
+@keyframes card-sway-2 {
+ from { transform: rotate(-10deg) translateY(-3px); }
+ to { transform: rotate(-6deg) translateY(-13px); }
+}
+@keyframes card-sway-3 {
+ from { transform: rotate(1deg) translateY(0px); }
+ to { transform: rotate(5deg) translateY(-9px); }
}
.sfB-stack-card .ph {
position: absolute;
@@ -629,9 +646,15 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
background-clip: text;
color: transparent;
}
+.sfB-tcard .day-date {
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 14px;
+ letter-spacing: 0;
+ vertical-align: middle;
+}
.sfB-tcard .when {
font-family: 'JetBrains Mono', monospace;
- font-size: 10px;
+ font-size: 13px;
letter-spacing: 1px;
color: rgba(255,255,255,0.5);
margin-top: 4px;
@@ -644,6 +667,14 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
line-height: 1.1;
letter-spacing: -0.3px;
}
+.sfB-tcard .organizer {
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 10px;
+ letter-spacing: 0.5px;
+ color: rgba(255,255,255,0.38);
+ margin-top: 4px;
+ text-transform: uppercase;
+}
.sfB-tcard .at { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 5px; }
.sfB-tcard .chips { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
diff --git a/js/main.js b/js/main.js
index bb7acdb..50eb827 100644
--- a/js/main.js
+++ b/js/main.js
@@ -113,23 +113,36 @@ function renderScheduleTeaser() {
const container = document.getElementById('sfB-coming-row');
if (!container) return;
+ const now = new Date();
const today = getTodayName();
const startIdx = DAYS_ORDER.indexOf(today);
const order = [...DAYS_ORDER.slice(startIdx), ...DAYS_ORDER.slice(0, startIdx)];
+ const dayOffset = {};
+ DAYS_ORDER.forEach(name => {
+ dayOffset[name] = (DAYS_ORDER.indexOf(name) - startIdx + 7) % 7;
+ });
+
const sorted = [...SCHEDULE].sort(
(a, b) => order.indexOf(a.day) - order.indexOf(b.day)
);
- container.innerHTML = sorted.slice(0, 4).map(row => `
+ container.innerHTML = sorted.slice(0, 4).map(row => {
+ const offset = dayOffset[row.day];
+ const date = new Date(now);
+ date.setDate(now.getDate() + offset);
+ const dayNum = `${date.getDate()}/${date.getMonth() + 1}`;
+ return `
- ${row.day}
+ ${dayNum} ${row.day}
${row.when || ''}
${row.social}
+ ${row.organizer}
@ ${row.venue} · ${row.city}
${musicToChips(row.music)}
- `).join('');
+ `;
+ }).join('');
}
// ---- Filter pills (studios.html / classes.html) ----
diff --git a/studios.html b/studios.html
index 5079929..e0ec48b 100644
--- a/studios.html
+++ b/studios.html
@@ -90,15 +90,15 @@
📍
- 292 Vo Nguyen Giap, Bac My Phu, Ngu Hanh Son, Da Nang
-
-
👥
- Luu Nhat Phuong, Phong & Shai
+ Luu Nhat Phuong & Shai
+
+