diff --git a/fusion_clock/static/src/scss/nfc_kiosk.scss b/fusion_clock/static/src/scss/nfc_kiosk.scss index 51ad317d..64e0fd6c 100644 --- a/fusion_clock/static/src/scss/nfc_kiosk.scss +++ b/fusion_clock/static/src/scss/nfc_kiosk.scss @@ -99,14 +99,15 @@ html:has(#nfc_kiosk_root) { // ───────────────────────────────────────────────────────────────────── // Header chrome — logo, time, date, location, settings // ───────────────────────────────────────────────────────────────────── -// Logo on a subtle frosted-glass pill — just enough lift to keep dark logos -// readable against the dark gradient, without looking like a glaring sticker. +// 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: 1.5rem; + left: 50%; + transform: translateX(-50%); max-height: 52px; - max-width: 200px; + max-width: 220px; object-fit: contain; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(24px) saturate(180%); @@ -122,8 +123,8 @@ html:has(#nfc_kiosk_root) { } @keyframes nfc-logo-in { - from { opacity: 0; transform: translateY(-12px) scale(0.94); } - to { opacity: 1; transform: translateY(0) scale(1); } + from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.94); } + to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } .nfc-kiosk__company { @@ -139,9 +140,10 @@ html:has(#nfc_kiosk_root) { // 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.75rem; + top: 6.25rem; // sits below the logo (logo bottom ≈ 90px) left: 50%; transform: translateX(-50%); font-size: 2.5rem; @@ -165,10 +167,10 @@ html:has(#nfc_kiosk_root) { .nfc-kiosk__date { position: absolute; - top: 5.25rem; + top: 9.75rem; // sits below the time left: 50%; transform: translateX(-50%); - font-size: 0.9rem; + font-size: 0.85rem; color: var(--nfc-text-muted); letter-spacing: 0.05em; text-transform: uppercase;