fix(fusion_clock): NFC kiosk header — center logo at top, stack clock+date below

Visual rewrite of the NFC kiosk page:
- Animated mesh gradient background (drifts on a 28s loop)
- Glass-panel state cards with backdrop-filter blur
- Animated SVG NFC icon (concentric waves emanate from a chip)
- Company logo pulled from res.company.logo, displayed in header
- Dominant-hue extraction from logo sets --nfc-h CSS var; entire
  palette interpolates from that one HSL hue
- Success burst (green glow + scale), error shake, smooth state fades
- Reduced-motion fallback respects prefers-reduced-motion
- Glass numpad + employee picker in Enroll Mode

CRITICAL FIX: scoped all kiosk styles under :has(#nfc_kiosk_root) so
they no longer leak into other frontend pages. Previous version applied
html/body overflow:hidden + display:none on header/footer globally,
breaking website scrolling and chrome on every frontend page.

fusion_clock/controllers/clock_nfc_kiosk.py

@@ -74,9 +74,13 @@ class FusionClockNfcKiosk(http.Controller):
 
         company = request.env.company
         location = company.x_fclk_nfc_kiosk_location_id
+        company_logo_url = (
+            '/web/image/res.company/%s/logo' % company.id if company.logo else ''
+        )
         values = {
             'page_name': 'nfc_kiosk',
             'company_name': company.name,
+            'company_logo_url': company_logo_url,
             'location_name': location.name if location else 'No location configured',
             'location_configured': bool(location),
             'photo_required': ICP.get_param('fusion_clock.nfc_photo_required', 'True') == 'True',

fusion_clock/models/res_config_settings.py

@@ -253,11 +253,13 @@ class ResConfigSettings(models.TransientModel):
              "Leave empty to fall back to manager-group membership only.",
     )
     fclk_nfc_kiosk_debug = fields.Boolean(
-        string='Enable Mock-Tap Debug',
+        string='Debug Mode (overlay + mock-tap)',
         config_parameter='fusion_clock.nfc_kiosk_debug',
         default=False,
-        help="Enables a Ctrl+Shift+T keyboard shortcut on the kiosk page for "
+        help="Enables two dev/troubleshooting features on the NFC kiosk page: "
-             "simulating a tap with a configurable UID. Off in production.",
+             "(1) a green-text debug overlay at the top of the screen logging every NFC and tap event in real time, "
+             "and (2) a Ctrl+Shift+T keyboard shortcut that simulates a tap with a configurable UID. "
+             "Turn OFF in production — the overlay is intrusive for end users.",
     )
     fclk_nfc_kiosk_location_id = fields.Many2one(
         related='company_id.x_fclk_nfc_kiosk_location_id',

fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js

@@ -16,6 +16,103 @@
     const debugEnabled = root.dataset.debugEnabled === "1";
     const locationConfigured = root.dataset.locationConfigured === "1";
 
+    // ──────────────────────────────────────────────────────────────
+    // Debug overlay (visible only when fusion_clock.nfc_kiosk_debug = True)
+    // ──────────────────────────────────────────────────────────────
+    let _debugOverlayEl = null;
+    function debugLog(msg) {
+        try { console.log("[nfc-kiosk-debug]", msg); } catch (e) {}
+        if (!debugEnabled) return;
+        if (!_debugOverlayEl) {
+            _debugOverlayEl = document.createElement("div");
+            _debugOverlayEl.style.cssText = "position:fixed;top:0;left:0;right:0;background:rgba(0,0,0,0.9);color:#0f0;font-family:monospace;font-size:11px;padding:0.5rem;max-height:35vh;overflow-y:auto;z-index:9999;line-height:1.3;border-bottom:1px solid #0f0;";
+            document.body.appendChild(_debugOverlayEl);
+        }
+        const line = document.createElement("div");
+        const ts = new Date().toLocaleTimeString();
+        line.textContent = "[" + ts + "] " + msg;
+        _debugOverlayEl.appendChild(line);
+        while (_debugOverlayEl.childNodes.length > 40) {
+            _debugOverlayEl.removeChild(_debugOverlayEl.firstChild);
+        }
+        _debugOverlayEl.scrollTop = _debugOverlayEl.scrollHeight;
+    }
+    debugLog("page loaded; debugEnabled=" + debugEnabled + " photoRequired=" + photoRequired + " NDEFReader=" + ("NDEFReader" in window));
+
+    // ──────────────────────────────────────────────────────────────
+    // Dominant-hue extraction from company logo
+    // Sets the CSS variable --nfc-h on <html> so SCSS can interpolate
+    // the entire palette from the brand color. Falls back to default
+    // (220 = aurora-blue) if no logo or extraction fails.
+    // ──────────────────────────────────────────────────────────────
+    function rgbToHue(r, g, b) {
+        const rN = r / 255, gN = g / 255, bN = b / 255;
+        const max = Math.max(rN, gN, bN), min = Math.min(rN, gN, bN);
+        const d = max - min;
+        if (d === 0) return null; // grayscale, no hue info
+        let h;
+        if (max === rN)      h = ((gN - bN) / d) % 6;
+        else if (max === gN) h = (bN - rN) / d + 2;
+        else                 h = (rN - gN) / d + 4;
+        h = Math.round(h * 60);
+        if (h < 0) h += 360;
+        return h;
+    }
+
+    function extractDominantHue(img) {
+        try {
+            const c = document.createElement("canvas");
+            const w = c.width = Math.min(img.naturalWidth, 200);
+            const h = c.height = Math.min(img.naturalHeight, 200);
+            const ctx = c.getContext("2d", { willReadFrequently: true });
+            ctx.drawImage(img, 0, 0, w, h);
+            const data = ctx.getImageData(0, 0, w, h).data;
+            let r = 0, g = 0, b = 0, count = 0;
+            for (let i = 0; i < data.length; i += 4) {
+                const a = data[i + 3];
+                if (a < 128) continue;                           // skip transparent
+                const red = data[i], green = data[i + 1], blue = data[i + 2];
+                const lum = (red + green + blue) / 3;
+                if (lum > 235 || lum < 25) continue;             // skip near-white/near-black
+                const range = Math.max(red, green, blue) - Math.min(red, green, blue);
+                if (range < 25) continue;                        // skip near-grays
+                r += red; g += green; b += blue; count++;
+            }
+            if (count < 50) {
+                debugLog("hue extraction: too few colored pixels (" + count + "), using default");
+                return null;
+            }
+            const avgR = Math.round(r / count), avgG = Math.round(g / count), avgB = Math.round(b / count);
+            const hue = rgbToHue(avgR, avgG, avgB);
+            debugLog("hue extracted: rgb(" + avgR + "," + avgG + "," + avgB + ") → h=" + hue);
+            return hue;
+        } catch (e) {
+            debugLog("hue extraction failed: " + e.message);
+            return null;
+        }
+    }
+
+    function applyBrandHue(hue) {
+        if (hue == null) return;
+        document.documentElement.style.setProperty("--nfc-h", String(hue));
+    }
+
+    const logoImg = document.getElementById("nfc_company_logo");
+    if (logoImg) {
+        const tryExtract = () => {
+            const hue = extractDominantHue(logoImg);
+            applyBrandHue(hue);
+        };
+        if (logoImg.complete && logoImg.naturalWidth) {
+            tryExtract();
+        } else {
+            logoImg.addEventListener("load", tryExtract);
+            logoImg.addEventListener("error", () => debugLog("logo failed to load"));
+        }
+    } else {
+        debugLog("no company logo on page; using default hue");
+    }
+
     // ──────────────────────────────────────────────────────────────
     // State machine
     // ──────────────────────────────────────────────────────────────
@@ -36,7 +133,16 @@
     function renderIdle() {
         stateContainer.innerHTML = `
             <div class="nfc-kiosk__idle">
-                <div class="nfc-kiosk__icon">⌐■</div>
+                <svg class="nfc-kiosk__icon-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+                    <circle class="nfc-wave nfc-wave-3" cx="100" cy="100" r="98"
+                            stroke="currentColor" stroke-width="4" fill="none"/>
+                    <circle class="nfc-wave nfc-wave-2" cx="100" cy="100" r="78"
+                            stroke="currentColor" stroke-width="4" fill="none"/>
+                    <circle class="nfc-wave nfc-wave-1" cx="100" cy="100" r="58"
+                            stroke="currentColor" stroke-width="4" fill="none"/>
+                    <rect class="nfc-chip" x="68" y="68" width="64" height="64"
+                          rx="11" fill="currentColor"/>
+                </svg>
                 <div class="nfc-kiosk__prompt">Tap your card to clock in or out</div>
             </div>
         `;
@@ -44,7 +150,10 @@
 
     function renderProcessing() {
         stateContainer.innerHTML = `
-            <div class="nfc-kiosk__processing">Reading card…</div>
+            <div class="nfc-kiosk__processing">
+                <span>Reading card</span>
+                <span class="dots"><span></span><span></span><span></span></span>
+            </div>
         `;
     }
 
@@ -256,16 +365,23 @@
     }
 
     // ──────────────────────────────────────────────────────────────
-    // Clock display (top-right time + date)
+    // Clock display (centered top: time with AM/PM + date)
     // ──────────────────────────────────────────────────────────────
     function updateClock() {
         const now = new Date();
-        const hh = String(now.getHours()).padStart(2, "0");
+        let hours = now.getHours();
+        const ampm = hours >= 12 ? "PM" : "AM";
+        hours = hours % 12;
+        if (hours === 0) hours = 12;            // 0 → 12 in 12-hour clock
+        const hh = String(hours).padStart(2, "0");
         const mm = String(now.getMinutes()).padStart(2, "0");
         const dateStr = now.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
         const timeEl = document.getElementById("nfc_clock_time");
         const dateEl = document.getElementById("nfc_clock_date");
-        if (timeEl) timeEl.textContent = `${hh}:${mm}`;
+        if (timeEl) {
+            // Render hh:mm + AM/PM as separate spans so SCSS can style them differently
+            timeEl.innerHTML = `${hh}:${mm}<span class="ampm">${ampm}</span>`;
+        }
         if (dateEl) dateEl.textContent = dateStr;
     }
     updateClock();
@@ -281,49 +397,68 @@
     let nfcReady = false;
 
     async function startNfcReader() {
+        debugLog("startNfcReader: NDEFReader in window = " + ("NDEFReader" in window));
         if (!("NDEFReader" in window)) {
             throw new Error("Web NFC not supported on this browser/device. Use Chrome on Android.");
         }
         ndefReader = new NDEFReader();
+        debugLog("startNfcReader: ndefReader created, calling scan()...");
         await ndefReader.scan();
+        debugLog("startNfcReader: scan() resolved ✓");
         ndefReader.addEventListener("reading", onNfcReading);
-        ndefReader.addEventListener("readingerror", () => {
+        ndefReader.addEventListener("readingerror", (ev) => {
+            debugLog("readingerror event fired");
             console.warn("[nfc-kiosk] reading error; reader still active");
         });
         nfcReady = true;
+        debugLog("startNfcReader: listeners attached, nfcReady=true");
     }
 
     function onNfcReading(event) {
         // event.serialNumber is the card UID — works for raw MIFARE access cards
-        const uid = (event.serialNumber || "").toUpperCase();
+        const rawSerial = event.serialNumber || "";
-        if (!uid) return;
+        const uid = rawSerial.toUpperCase();
+        const recCount = (event.message && event.message.records) ? event.message.records.length : 0;
+        debugLog("reading event: serialNumber=" + JSON.stringify(rawSerial) + " (len=" + rawSerial.length + ") records=" + recCount + " state=" + currentState);
+        if (!uid) {
+            debugLog("  → IGNORED: empty serialNumber");
+            return;
+        }
         if (currentState === STATE.ENROLL) {
-            // Enroll Mode handles taps differently (wired up in Task 18)
+            debugLog("  → routing to _onEnrollTap");
             window.__nfcKiosk._onEnrollTap && window.__nfcKiosk._onEnrollTap(uid);
             return;
         }
-        if (currentState !== STATE.IDLE) return; // ignore taps mid-result
+        if (currentState !== STATE.IDLE) {
+            debugLog("  → IGNORED: not in IDLE (state=" + currentState + ")");
+            return;
+        }
+        debugLog("  → calling handleTap(" + uid + ")");
         handleTap(uid);
     }
 
     async function handleTap(uid) {
+        debugLog("handleTap: uid=" + uid);
         setState(STATE.PROCESSING);
         let photoB64 = "";
         try {
             photoB64 = await capturePhoto();
+            debugLog("handleTap: photo captured, size=" + photoB64.length);
         } catch (e) {
+            debugLog("handleTap: photo capture failed: " + e.message);
             console.warn("[nfc-kiosk] camera capture failed", e);
-            // Server enforces photo_required if needed
         }
         try {
+            debugLog("handleTap: POST /fusion_clock/kiosk/nfc/tap...");
             const result = await postJson("/fusion_clock/kiosk/nfc/tap", { card_uid: uid, photo_b64: photoB64 });
+            debugLog("handleTap: response = " + JSON.stringify(result).slice(0, 200));
             if (result.error === "debounce") {
-                // silent — back to IDLE
                 setState(STATE.IDLE);
                 return;
             }
             setState(STATE.RESULT, result);
         } catch (e) {
+            debugLog("handleTap: POST failed: " + e.message);
             setState(STATE.RESULT, { error: "network", message: "No connection. Please try again." });
         }
     }
@@ -368,20 +503,62 @@
         return canvasEl.toDataURL("image/jpeg", 0.7);
     }
 
+    // ──────────────────────────────────────────────────────────────
+    // Wake Lock — keeps the screen on while the kiosk page is active.
+    // Released automatically on tab close/navigation; re-acquired on
+    // visibilitychange when the page comes back to the foreground.
+    // ──────────────────────────────────────────────────────────────
+    let wakeLock = null;
+
+    async function acquireWakeLock() {
+        if (!("wakeLock" in navigator)) {
+            debugLog("wakeLock: API not supported on this browser");
+            return;
+        }
+        if (wakeLock) {
+            debugLog("wakeLock: already held, skipping");
+            return;
+        }
+        try {
+            wakeLock = await navigator.wakeLock.request("screen");
+            debugLog("wakeLock: acquired ✓ (screen will stay on)");
+            wakeLock.addEventListener("release", () => {
+                debugLog("wakeLock: released by browser/OS");
+                wakeLock = null;
+            });
+        } catch (e) {
+            debugLog("wakeLock: request failed: " + (e && e.message));
+        }
+    }
+
+    document.addEventListener("visibilitychange", async () => {
+        if (document.visibilityState === "visible") {
+            debugLog("visibility: visible — re-acquiring wakeLock");
+            await acquireWakeLock();
+        } else {
+            debugLog("visibility: " + document.visibilityState);
+        }
+    });
+
     // ──────────────────────────────────────────────────────────────
     // Setup wizard activation
     // ──────────────────────────────────────────────────────────────
     const setupBtn = document.getElementById("nfc_setup_start");
     if (setupBtn) {
         setupBtn.addEventListener("click", async () => {
+            debugLog("setup button clicked");
             try {
                 await startNfcReader();
+                debugLog("setup: NFC ready, starting camera...");
                 try {
                     await startCamera();
+                    debugLog("setup: camera ready ✓");
                 } catch (camErr) {
+                    debugLog("setup: camera failed: " + camErr.message);
                     if (photoRequired) throw camErr;
                     console.warn("[nfc-kiosk] camera unavailable, continuing (photo not required)", camErr);
                 }
+                await acquireWakeLock();
                 setState(STATE.IDLE);
             } catch (e) {
                 stateContainer.innerHTML = `

fusion_clock/static/src/scss/nfc_kiosk.scss

@@ -1,31 +1,53 @@
-// NFC Clock Kiosk — always-dark, high-contrast.
+// NFC Clock Kiosk — premium glass + animated mesh, always-dark.
-// Per CLAUDE.md: shop-floor kiosks need explicit hex (no var(--bs-*) which drift)
+//
-// and we deliberately do NOT branch on $o-webclient-color-scheme — this is a
+// CRITICAL: All styles in this file are scoped under `:has(#nfc_kiosk_root)`
-// frontend bundle (not backend), and the kiosk is intentionally always dark
+// to prevent leaking into other frontend pages. The previous version applied
-// regardless of the user's color scheme preference.
+// `html,body { overflow:hidden; height:100vh }` and `header,footer{display:none}`
+// globally, which broke website scrolling and chrome on every frontend page.
+//
+// The single CSS custom property `--nfc-h` (hue, 0–360) is set by JS after
+// extracting the dominant color from the company logo. All colors interpolate
+// from that hue via HSL, so the entire palette adapts to the customer brand.
 
-$nfc-bg:            #0b0d10;
+// ─────────────────────────────────────────────────────────────────────
-$nfc-panel:         #15191f;
+// Defaults (overridden by JS once logo dominant-hue is extracted)
-$nfc-text:          #ffffff;
+// ─────────────────────────────────────────────────────────────────────
-$nfc-text-muted:    #9ba3ad;
+:root {
-$nfc-success:       #18a957;
+    --nfc-h: 220;                  // fallback aurora-blue hue
-$nfc-error:         #d9374e;
+    --nfc-bg: #0b0d10;
-$nfc-accent:        #3b82f6;
+    --nfc-text: #ffffff;
-$nfc-border:        #2a3038;
+    --nfc-text-muted: #9ba3ad;
-
+    --nfc-success: #18a957;
-html, body {
+    --nfc-error: #d9374e;
-    background: $nfc-bg !important;
-    color: $nfc-text;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    height: 100vh;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
-.o_main_navbar, header, footer { display: none !important; }
+// ─────────────────────────────────────────────────────────────────────
+// Page-level styling — ONLY when the kiosk is on the page
+// ─────────────────────────────────────────────────────────────────────
+html:has(#nfc_kiosk_root) {
+    overflow: hidden;
+    height: 100%;
 
+    body {
+        overflow: hidden;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        background: var(--nfc-bg) !important;
+        color: var(--nfc-text);
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    }
+
+    // Hide site chrome on the kiosk page only
+    .o_main_navbar, header, footer, .o_header_standard, .o_footer { display: none !important; }
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Kiosk root container with animated mesh gradient background
+// ─────────────────────────────────────────────────────────────────────
 .nfc-kiosk {
+    position: fixed;
+    inset: 0;
     width: 100vw;
     height: 100vh;
     display: flex;
@@ -36,99 +58,342 @@ html, body {
     box-sizing: border-box;
     user-select: none;
     -webkit-tap-highlight-color: transparent;
+    overflow: hidden;
+    background: var(--nfc-bg);
+
+    // Animated mesh gradient (drifts behind everything)
+    &::before {
+        content: "";
+        position: absolute;
+        inset: -15%;
+        background:
+            radial-gradient(circle at 20% 30%, hsla(var(--nfc-h), 75%, 40%, 0.55) 0%, transparent 45%),
+            radial-gradient(circle at 80% 20%, hsla(calc(var(--nfc-h) + 40), 65%, 35%, 0.50) 0%, transparent 50%),
+            radial-gradient(circle at 70% 75%, hsla(calc(var(--nfc-h) - 25), 70%, 35%, 0.45) 0%, transparent 55%),
+            radial-gradient(circle at 15% 85%, hsla(calc(var(--nfc-h) + 80), 60%, 30%, 0.40) 0%, transparent 50%);
+        filter: blur(60px) saturate(140%);
+        animation: nfc-mesh-drift 28s ease-in-out infinite alternate;
+        z-index: 0;
+        will-change: transform;
+    }
+
+    // Subtle vignette on top so edges don't feel washed out
+    &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%);
+        z-index: 1;
+        pointer-events: none;
+    }
+
+    > * { position: relative; z-index: 2; }
+}
+
+@keyframes nfc-mesh-drift {
+    0%   { transform: translate(0%, 0%)   rotate(0deg)  scale(1); }
+    50%  { transform: translate(3%, -2%)  rotate(2deg)  scale(1.05); }
+    100% { transform: translate(-3%, 3%)  rotate(-1deg) scale(0.98); }
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Header chrome — logo, time, date, location, settings
+// ─────────────────────────────────────────────────────────────────────
+// Logo centered at the top, on a subtle frosted-glass pill — just enough lift
+// to keep dark logos readable on the dark gradient.
+.nfc-kiosk__logo {
+    position: absolute;
+    top: 1.25rem;
+    left: 50%;
+    transform: translateX(-50%);
+    max-height: 52px;
+    max-width: 220px;
+    object-fit: contain;
+    background: rgba(255, 255, 255, 0.20);
+    backdrop-filter: blur(24px) saturate(180%);
+    -webkit-backdrop-filter: blur(24px) saturate(180%);
+    padding: 0.5rem 0.85rem;
+    border-radius: 0.85rem;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    box-shadow:
+        0 6px 24px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.25);
+    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: 1;  transform: translateX(-50%) translateY(0) scale(1); }
 }
 
 .nfc-kiosk__company {
     position: absolute;
-    top: 1.5rem;
+    top: 5.75rem;
-    left: 50%;
+    left: 1.5rem;
-    transform: translateX(-50%);
+    font-size: 0.85rem;
-    font-size: 1.25rem;
+    color: var(--nfc-text-muted);
-    color: $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; }
+
+// Clock + date stack vertically below the logo, all centered.
 .nfc-kiosk__time {
     position: absolute;
-    top: 1.5rem;
+    top: 6.25rem;            // sits below the logo (logo bottom ≈ 90px)
-    right: 2rem;
+    left: 50%;
-    font-size: 2rem;
+    transform: translateX(-50%);
-    font-weight: 600;
+    font-size: 2.5rem;
-    color: $nfc-text;
+    font-weight: 300;
+    color: var(--nfc-text);
     font-variant-numeric: tabular-nums;
+    letter-spacing: -0.02em;
+    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
+    display: flex;
+    align-items: baseline;
+    gap: 0.45rem;
+    white-space: nowrap;
+
+    .ampm {
+        font-size: 1rem;
+        font-weight: 500;
+        color: var(--nfc-text-muted);
+        letter-spacing: 0.08em;
+    }
 }
 
 .nfc-kiosk__date {
     position: absolute;
-    top: 4.5rem;
+    top: 9.75rem;            // sits below the time
-    right: 2rem;
+    left: 50%;
-    font-size: 1rem;
+    transform: translateX(-50%);
-    color: $nfc-text-muted;
+    font-size: 0.85rem;
+    color: var(--nfc-text-muted);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
 }
 
 .nfc-kiosk__location {
     position: absolute;
     bottom: 1.5rem;
-    left: 2rem;
+    left: 1.5rem;
-    font-size: 0.95rem;
+    font-size: 0.85rem;
-    color: $nfc-text-muted;
+    color: var(--nfc-text-muted);
+    background: rgba(255,255,255,0.04);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255,255,255,0.08);
+    padding: 0.5rem 1rem;
+    border-radius: 999px;
 }
 
 .nfc-kiosk__settings {
     position: absolute;
-    bottom: 1rem;
+    bottom: 1.5rem;
-    right: 1rem;
+    right: 1.5rem;
-    width: 2.5rem;
+    width: 2.75rem;
-    height: 2.5rem;
+    height: 2.75rem;
     border-radius: 50%;
-    background: transparent;
+    background: rgba(255,255,255,0.04);
-    color: $nfc-text-muted;
+    backdrop-filter: blur(20px);
-    border: 1px solid $nfc-border;
+    -webkit-backdrop-filter: blur(20px);
+    color: var(--nfc-text-muted);
+    border: 1px solid rgba(255,255,255,0.08);
     cursor: pointer;
     font-size: 1.2rem;
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
 
-    &:hover { color: $nfc-text; }
+    &:hover, &:active {
+        color: var(--nfc-text);
+        border-color: rgba(255,255,255,0.2);
+        transform: scale(1.05);
+    }
 }
 
+// ─────────────────────────────────────────────────────────────────────
+// Reusable glass panel
+// ─────────────────────────────────────────────────────────────────────
+%nfc-glass {
+    background: rgba(255,255,255,0.05);
+    backdrop-filter: blur(24px) saturate(160%);
+    -webkit-backdrop-filter: blur(24px) saturate(160%);
+    border: 1px solid rgba(255,255,255,0.1);
+    box-shadow:
+        0 20px 60px rgba(0,0,0,0.5),
+        inset 0 1px 0 rgba(255,255,255,0.08);
+    border-radius: 1.5rem;
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// State container — base fade-in for whatever child renders
+// ─────────────────────────────────────────────────────────────────────
+#nfc_state_container > * {
+    animation: nfc-state-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes nfc-state-in {
+    from { opacity: 0; transform: scale(0.96) translateY(10px); }
+    to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// IDLE — large NFC icon + prompt
+// ─────────────────────────────────────────────────────────────────────
 .nfc-kiosk__idle {
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
 }
 
-.nfc-kiosk__icon {
+.nfc-kiosk__icon-svg {
-    font-size: 8rem;
+    width: 14rem;
-    color: $nfc-accent;
+    height: 14rem;
-    animation: nfc-pulse 2s ease-in-out infinite;
+    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));
+
+    .nfc-chip {
+        animation: nfc-chip-pulse 2.5s ease-in-out infinite;
+        transform-origin: center;
+    }
+
+    .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;
+    }
+    .nfc-wave-1 { animation-delay: 0s; }
+    .nfc-wave-2 { animation-delay: 0.6s; }
+    .nfc-wave-3 { animation-delay: 1.2s; }
 }
 
-@keyframes nfc-pulse {
+@keyframes nfc-chip-pulse {
-    0%, 100% { opacity: 0.85; transform: scale(1); }
+    0%, 100% { transform: scale(1); }
-    50%      { opacity: 1.0;  transform: scale(1.06); }
+    50%      { transform: scale(1.05); }
+}
+
+@keyframes nfc-wave-emit {
+    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 {
-    font-size: 2rem;
+    font-size: 2.25rem;
-    font-weight: 500;
+    font-weight: 300;
-    margin-top: 2rem;
+    letter-spacing: -0.01em;
+    color: var(--nfc-text);
+    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
 }
 
+// ─────────────────────────────────────────────────────────────────────
+// PROCESSING — pulsing dots
+// ─────────────────────────────────────────────────────────────────────
 .nfc-kiosk__processing {
+    @extend %nfc-glass;
+    padding: 2.5rem 3.5rem;
     text-align: center;
     font-size: 1.5rem;
-    color: $nfc-text-muted;
+    color: var(--nfc-text);
+    display: inline-flex;
+    align-items: center;
+    gap: 1rem;
+
+    .dots {
+        display: inline-flex;
+        gap: 0.4rem;
+
+        span {
+            width: 0.6rem;
+            height: 0.6rem;
+            border-radius: 50%;
+            background: hsl(var(--nfc-h), 80%, 65%);
+            animation: nfc-dot-bounce 1.2s ease-in-out infinite;
+
+            &:nth-child(2) { animation-delay: 0.15s; }
+            &:nth-child(3) { animation-delay: 0.3s; }
+        }
+    }
 }
 
+@keyframes nfc-dot-bounce {
+    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
+    40%           { transform: scale(1.0); opacity: 1.0; }
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// RESULT — glass card with avatar + name + action
+// ─────────────────────────────────────────────────────────────────────
 .nfc-kiosk__result {
-    width: min(80vw, 700px);
+    @extend %nfc-glass;
+    width: 80vw;
+    max-width: 720px;
     padding: 2.5rem 3rem;
-    border-radius: 1rem;
     display: flex;
     align-items: center;
     gap: 2rem;
+    position: relative;
 
-    &--success { background: $nfc-success; }
+    &--success {
-    &--error   { background: $nfc-error; }
+        border-color: rgba(24,169,87,0.55);
+        box-shadow:
+            0 20px 60px rgba(0,0,0,0.5),
+            0 0 80px rgba(24,169,87,0.35),
+            inset 0 1px 0 rgba(255,255,255,0.1);
+        animation: nfc-success-burst 700ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    &--error {
+        border-color: rgba(217,55,78,0.55);
+        box-shadow:
+            0 20px 60px rgba(0,0,0,0.5),
+            0 0 60px rgba(217,55,78,0.3),
+            inset 0 1px 0 rgba(255,255,255,0.1);
+        animation: nfc-shake 350ms ease-in-out, nfc-state-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+}
+
+@keyframes nfc-success-burst {
+    0% {
+        opacity: 0;
+        transform: scale(0.88);
+        box-shadow:
+            0 20px 60px rgba(0,0,0,0.5),
+            0 0 0 rgba(24,169,87,0),
+            inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+    50% {
+        box-shadow:
+            0 20px 60px rgba(0,0,0,0.5),
+            0 0 140px rgba(24,169,87,0.7),
+            inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+        box-shadow:
+            0 20px 60px rgba(0,0,0,0.5),
+            0 0 80px rgba(24,169,87,0.35),
+            inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+}
+
+@keyframes nfc-shake {
+    0%, 100% { transform: translateX(0); }
+    20%      { transform: translateX(-10px); }
+    40%      { transform: translateX(10px); }
+    60%      { transform: translateX(-6px); }
+    80%      { transform: translateX(6px); }
 }
 
 .nfc-kiosk__avatar {
@@ -137,52 +402,91 @@ html, body {
     border-radius: 50%;
     background-size: cover;
     background-position: center;
-    background-color: rgba(255,255,255,0.2);
+    background-color: rgba(255,255,255,0.15);
     flex-shrink: 0;
+    border: 2px solid rgba(255,255,255,0.2);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+    animation: nfc-avatar-in 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes nfc-avatar-in {
+    from { opacity: 0; transform: scale(0.4); }
+    to   { opacity: 1; transform: scale(1); }
 }
 
 .nfc-kiosk__result-text {
     flex: 1;
 
-    .name { font-size: 2rem; font-weight: 700; }
+    .name   { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.02em; }
-    .action { font-size: 1.5rem; margin-top: 0.5rem; }
+    .action { font-size: 1.5rem; margin-top: 0.5rem; opacity: 0.95; font-weight: 400; }
-    .hours { font-size: 1.1rem; opacity: 0.9; margin-top: 0.25rem; }
+    .hours  { font-size: 1.05rem; opacity: 0.75; margin-top: 0.5rem; }
 }
 
+// ─────────────────────────────────────────────────────────────────────
+// SETUP wizard
+// ─────────────────────────────────────────────────────────────────────
 .nfc-kiosk__setup {
+    @extend %nfc-glass;
     text-align: center;
     max-width: 600px;
+    padding: 3.5rem 3rem;
 
-    h2 { font-size: 2rem; margin-bottom: 1rem; }
+    h2 { font-size: 2rem; margin-bottom: 1rem; font-weight: 300; letter-spacing: -0.01em; }
-    p  { color: $nfc-text-muted; margin-bottom: 2rem; }
+    p  { color: var(--nfc-text-muted); margin-bottom: 2rem; line-height: 1.5; }
 
     button {
-        font-size: 1.5rem;
+        font-size: 1.25rem;
-        padding: 1rem 3rem;
+        padding: 1rem 2.5rem;
-        background: $nfc-accent;
+        background: hsl(var(--nfc-h), 80%, 55%);
         color: white;
         border: none;
-        border-radius: 0.5rem;
+        border-radius: 999px;
         cursor: pointer;
+        font-weight: 500;
+        box-shadow: 0 8px 32px hsla(var(--nfc-h), 80%, 50%, 0.4);
+        transition: transform 200ms ease, box-shadow 200ms ease;
+
+        &:hover, &:active {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 36px hsla(var(--nfc-h), 80%, 50%, 0.5);
+        }
     }
 }
 
+// ─────────────────────────────────────────────────────────────────────
+// ENROLL Mode overlay — glass panel with numpad / search / tap-prompt
+// ─────────────────────────────────────────────────────────────────────
 .nfc-kiosk__enroll-overlay {
-    position: fixed; inset: 0;
+    position: fixed;
-    background: rgba(0,0,0,0.85);
+    inset: 0;
+    background: rgba(0,0,0,0.7);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
     z-index: 1000;
-    display: flex; align-items: center; justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     padding: 2rem;
+    animation: nfc-overlay-in 250ms ease-out;
+}
+
+@keyframes nfc-overlay-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
 }
 
 .nfc-kiosk__enroll-panel {
-    background: $nfc-panel;
+    @extend %nfc-glass;
-    border: 1px solid $nfc-border;
-    border-radius: 1rem;
     padding: 2.5rem;
-    width: min(80vw, 700px);
+    width: 80vw;
+    max-width: 720px;
 
-    h2 { font-size: 1.5rem; margin: 0 0 1.5rem; }
+    h2 {
+        font-size: 1.5rem;
+        margin: 0 0 1.5rem;
+        font-weight: 400;
+        color: var(--nfc-text);
+    }
 
     .numpad {
         display: grid;
@@ -191,27 +495,45 @@ html, body {
         margin: 1rem 0;
 
         button {
-            font-size: 2rem; padding: 1.5rem 0;
+            font-size: 2rem;
-            background: $nfc-bg; color: $nfc-text;
+            padding: 1.5rem 0;
-            border: 1px solid $nfc-border; border-radius: 0.5rem;
+            background: rgba(255,255,255,0.05);
+            color: var(--nfc-text);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 0.75rem;
             cursor: pointer;
+            transition: background 150ms ease, transform 100ms ease;
+            font-weight: 300;
+
+            &:hover  { background: rgba(255,255,255,0.1); }
+            &:active { background: rgba(255,255,255,0.15); transform: scale(0.96); }
         }
     }
 
     .pin-display {
-        font-size: 2.5rem; letter-spacing: 0.5rem;
+        font-size: 2.5rem;
-        text-align: center; margin: 1rem 0;
+        letter-spacing: 0.5rem;
+        text-align: center;
+        margin: 1rem 0 1.5rem;
         font-variant-numeric: tabular-nums;
+        min-height: 3rem;
+        color: hsl(var(--nfc-h), 80%, 70%);
     }
 
     .employee-search {
         width: 100%;
-        padding: 0.75rem 1rem;
+        padding: 1rem 1.25rem;
-        font-size: 1.25rem;
+        font-size: 1.15rem;
-        background: $nfc-bg; color: $nfc-text;
+        background: rgba(255,255,255,0.05);
-        border: 1px solid $nfc-border;
+        color: var(--nfc-text);
-        border-radius: 0.5rem;
+        border: 1px solid rgba(255,255,255,0.1);
+        border-radius: 0.75rem;
         margin-bottom: 1rem;
+        box-sizing: border-box;
+        outline: none;
+
+        &:focus { border-color: hsl(var(--nfc-h), 80%, 55%); }
+        &::placeholder { color: var(--nfc-text-muted); }
     }
 
     .employee-list {
@@ -219,24 +541,53 @@ html, body {
         overflow-y: auto;
 
         .employee-row {
-            padding: 0.75rem 1rem;
+            padding: 0.85rem 1rem;
-            border-bottom: 1px solid $nfc-border;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
             cursor: pointer;
-            font-size: 1.1rem;
+            font-size: 1.05rem;
+            border-radius: 0.5rem;
+            transition: background 150ms ease;
 
-            &:hover { background: $nfc-bg; }
+            &:hover, &:active { background: rgba(255,255,255,0.06); }
         }
     }
 
     .actions {
-        display: flex; gap: 1rem; justify-content: flex-end;
+        display: flex;
+        gap: 1rem;
+        justify-content: flex-end;
         margin-top: 1.5rem;
 
         button {
-            font-size: 1rem; padding: 0.75rem 1.5rem;
+            font-size: 1rem;
-            border-radius: 0.5rem; cursor: pointer; border: none;
+            padding: 0.85rem 1.75rem;
+            border-radius: 999px;
+            cursor: pointer;
+            border: none;
+            font-weight: 500;
+            transition: transform 150ms ease, opacity 150ms ease;
+
+            &:hover, &:active { transform: scale(0.97); }
+        }
+        .cancel  { background: rgba(255,255,255,0.08); color: var(--nfc-text); }
+        .confirm {
+            background: hsl(var(--nfc-h), 80%, 55%);
+            color: white;
+            box-shadow: 0 4px 20px hsla(var(--nfc-h), 80%, 50%, 0.4);
         }
-        .cancel  { background: $nfc-border; color: $nfc-text; }
-        .confirm { background: $nfc-accent; color: white; }
     }
 }
+
+// ─────────────────────────────────────────────────────────────────────
+// Reduced-motion fallback — respect users who prefer no animation
+// ─────────────────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+    .nfc-kiosk::before { animation: none; }
+    .nfc-kiosk__icon-svg .nfc-wave,
+    .nfc-kiosk__icon-svg .nfc-chip,
+    #nfc_state_container > *,
+    .nfc-kiosk__logo,
+    .nfc-kiosk__result--success,
+    .nfc-kiosk__result--error,
+    .nfc-kiosk__avatar { animation: none; }
+}

fusion_clock/views/kiosk_nfc_templates.xml

@@ -12,7 +12,16 @@
             <div id="nfc_kiosk_root" class="nfc-kiosk"
                  t-att-data-photo-required="'1' if photo_required else '0'"
                  t-att-data-debug-enabled="'1' if debug_enabled else '0'"
-                 t-att-data-location-configured="'1' if location_configured else '0'">
+                 t-att-data-location-configured="'1' if location_configured else '0'"
+                 t-att-data-company-logo-url="company_logo_url or ''">
+
+                <!-- Company logo (also drives the dominant-hue palette via JS) -->
+                <img t-if="company_logo_url"
+                     class="nfc-kiosk__logo"
+                     id="nfc_company_logo"
+                     t-att-src="company_logo_url"
+                     crossorigin="anonymous"
+                     alt="Company logo"/>
 
                 <!-- Static chrome (always visible) -->
                 <div class="nfc-kiosk__company" t-esc="company_name"/>
@@ -24,9 +33,9 @@
                 </div>
                 <button class="nfc-kiosk__settings" id="nfc_settings_btn" title="Enroll Mode">⚙</button>
 
-                <!-- Dynamic state container (JS swaps inner HTML) -->
+                <!-- Dynamic state container (JS swaps inner HTML based on state) -->
                 <div id="nfc_state_container">
-                    <!-- Initially: One-time setup wizard step 1 -->
+                    <!-- Initial: One-time setup wizard -->
                     <div class="nfc-kiosk__setup">
                         <h2>Welcome to Fusion Clock NFC Kiosk</h2>
                         <p>Tap the button below to enable the NFC reader and camera. This is a one-time setup for this device.</p>
@@ -34,7 +43,7 @@
                     </div>
                 </div>
 
-                <!-- Hidden video element for camera feed -->
+                <!-- Hidden video + canvas for camera capture -->
                 <video id="nfc_camera_feed" autoplay="autoplay" playsinline="playsinline" muted="muted"
                        style="position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;"/>
                 <canvas id="nfc_camera_canvas" style="display:none;"/>

fusion_clock/views/res_config_settings_views.xml

@@ -263,7 +263,7 @@
                                     <field name="fclk_nfc_enroll_password" password="True"/>
                                 </div>
                                 <div class="row mt8">
-                                    <label for="fclk_nfc_kiosk_debug" string="Mock-Tap Debug" class="col-lg-5 o_light_label"/>
+                                    <label for="fclk_nfc_kiosk_debug" string="Debug Overlay" class="col-lg-5 o_light_label"/>
                                     <field name="fclk_nfc_kiosk_debug"/>
                                 </div>
                             </div>