/* ═══════════════════════════════════════════════════════════════════════════ Interaction Modes — Touch, Pointer, Kiosk Pointer-first by default (desktop/laptop). Touch and Kiosk are additive overrides applied to via InteractionModeProvider. Bootstrap 5.3 handles responsive breakpoints. This handles input behavior. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Touch Mode ──────────────────────────────────────────────────────── */ /* Larger hit targets, no hover-dependent interactions */ .interaction-touch .btn { min-height: 44px; min-width: 44px; padding: 0.5rem 1rem; } .interaction-touch .form-control, .interaction-touch .form-select { min-height: 44px; font-size: 1rem; } .interaction-touch .nav-link { padding: 0.75rem 1rem; min-height: 44px; } .interaction-touch .list-group-item { padding: 0.75rem 1rem; } .interaction-touch .dropdown-item { padding: 0.5rem 1rem; min-height: 44px; } .interaction-touch .hover-only { display: none !important; } .interaction-touch .touch-hide { display: none !important; } /* Increase spacing for touch scrolling */ .interaction-touch .container, .interaction-touch .container-fluid { padding-bottom: env(safe-area-inset-bottom, 1rem); } /* ── Kiosk Mode ──────────────────────────────────────────────────────── */ /* Large fonts, no cursor, auto-advance friendly, remote/D-pad navigation */ .interaction-kiosk { font-size: 1.25rem; cursor: none; overflow: hidden; } .interaction-kiosk .btn { font-size: 1.25rem; padding: 0.75rem 1.5rem; min-height: 56px; min-width: 56px; } .interaction-kiosk .btn:focus-visible { outline: 4px solid var(--bs-primary, #0d6efd); outline-offset: 2px; } .interaction-kiosk .form-control, .interaction-kiosk .form-select { font-size: 1.25rem; min-height: 56px; } .interaction-kiosk .nav-link { font-size: 1.25rem; padding: 1rem 1.5rem; } .interaction-kiosk .card { font-size: 1.15rem; } .interaction-kiosk h1 { font-size: 2.5rem; } .interaction-kiosk h2 { font-size: 2rem; } .interaction-kiosk h3 { font-size: 1.75rem; } /* Hide scrollbars in kiosk mode — auto-advance only */ /* WebKit (Chrome, Safari, Edge) */ .interaction-kiosk ::-webkit-scrollbar { display: none; } /* IE / Legacy Edge */ .interaction-kiosk { -ms-overflow-style: none; } /* Auto-advance carousel in kiosk mode */ .interaction-kiosk .carousel { transition: opacity 0.5s ease-in-out; } /* ── Pointer Mode (default) ──────────────────────────────────────────── */ /* Fine-grained controls, hover states — this is Bootstrap's default */ .interaction-pointer .touch-only { display: none !important; } .interaction-pointer .btn:hover { transform: translateY(-1px); transition: transform 0.15s ease; } /* ── Cross-mode utilities ────────────────────────────────────────────── */ /* Show on all touch-capable devices (touch + kiosk) */ .interaction-touch .touch-show, .interaction-kiosk .touch-show { display: block !important; } /* Hide on touch-capable devices */ .interaction-touch .touch-hide, .interaction-kiosk .touch-hide { display: none !important; }