diff --git a/fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js b/fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js
index 46ce7965..b9e45934 100644
--- a/fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js
+++ b/fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js
@@ -134,14 +134,14 @@
stateContainer.innerHTML = `
Tap your card to clock in or out
diff --git a/fusion_clock/static/src/scss/nfc_kiosk.scss b/fusion_clock/static/src/scss/nfc_kiosk.scss
index 183313b3..9bd5928e 100644
--- a/fusion_clock/static/src/scss/nfc_kiosk.scss
+++ b/fusion_clock/static/src/scss/nfc_kiosk.scss
@@ -99,35 +99,43 @@ html:has(#nfc_kiosk_root) {
// ─────────────────────────────────────────────────────────────────────
// Header chrome — logo, time, date, location, settings
// ─────────────────────────────────────────────────────────────────────
+// Logo on a near-white glass pill so dark logos read against the dark page.
+// Positioned top-left so it doesn't collide with the time in the top-right.
.nfc-kiosk__logo {
position: absolute;
- top: 1.5rem;
- left: 50%;
- transform: translateX(-50%);
- max-height: 64px;
- max-width: 240px;
+ top: 1.25rem;
+ left: 1.5rem;
+ max-height: 56px;
+ max-width: 220px;
object-fit: contain;
- filter: drop-shadow(0 4px 20px rgba(0,0,0,0.4));
- opacity: 0.95;
+ background: rgba(255, 255, 255, 0.94);
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.85rem;
+ box-shadow:
+ 0 8px 32px rgba(0, 0, 0, 0.45),
+ inset 0 1px 0 rgba(255, 255, 255, 1);
+ box-sizing: content-box;
animation: nfc-logo-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes nfc-logo-in {
- from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.94); }
- to { opacity: 0.95; transform: translateX(-50%) translateY(0) scale(1); }
+ from { opacity: 0; transform: translateY(-12px) scale(0.94); }
+ to { opacity: 1; transform: translateY(0) scale(1); }
}
.nfc-kiosk__company {
position: absolute;
- top: 5.5rem;
- left: 50%;
- transform: translateX(-50%);
- font-size: 0.95rem;
+ top: 5.75rem;
+ left: 1.5rem;
+ font-size: 0.85rem;
color: var(--nfc-text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
}
+// When a logo is present, the company-name text is redundant — hide it.
+.nfc-kiosk__logo ~ .nfc-kiosk__company { display: none; }
+
.nfc-kiosk__time {
position: absolute;
top: 1.75rem;
@@ -227,8 +235,9 @@ html:has(#nfc_kiosk_root) {
}
.nfc-kiosk__icon-svg {
- width: 13rem;
- height: 13rem;
+ width: 14rem;
+ height: 14rem;
+ overflow: visible; // let waves expand past viewBox without clipping
color: hsl(var(--nfc-h), 80%, 65%);
filter: drop-shadow(0 0 30px hsla(var(--nfc-h), 80%, 55%, 0.6));
@@ -239,6 +248,7 @@ html:has(#nfc_kiosk_root) {
.nfc-wave {
transform-origin: center;
+ transform-box: fill-box; // scale around the wave's own center, not viewBox origin
opacity: 0;
animation: nfc-wave-emit 2.5s ease-out infinite;
}
@@ -249,13 +259,14 @@ html:has(#nfc_kiosk_root) {
@keyframes nfc-chip-pulse {
0%, 100% { transform: scale(1); }
- 50% { transform: scale(1.06); }
+ 50% { transform: scale(1.05); }
}
@keyframes nfc-wave-emit {
- 0% { transform: scale(0.5); opacity: 0; }
- 20% { opacity: 0.8; }
- 100% { transform: scale(1.4); opacity: 0; }
+ 0% { transform: scale(0.6); opacity: 0; }
+ 25% { opacity: 0.85; }
+ 80% { opacity: 0.25; }
+ 100% { transform: scale(1.35); opacity: 0; }
}
.nfc-kiosk__prompt {