:root { --brand-blue: #1874ff; --brand-light: #abe1e8; } /* Make sure nothing overflows sideways and height behaves on mobile */ html, body { min-height: 100%; height: auto; overflow-x: hidden; } /* Shared full-page surface (apply to ) */ .app-surface, .auth-bg, .app-bg { min-height: 100svh; /* small-viewport height: best for iOS/Android */ position: relative; } /* Radial gradient that fills the viewport on every device */ .app-surface::before, .auth-bg::before, .app-bg::before { content: ""; position: fixed; /* fixed → no cuts while scrolling */ inset: 0; z-index: 0; background: radial-gradient( circle at bottom right, var(--brand-light) 0%, var(--brand-blue) 70% ); /* Prevent subtle 1px seams on some GPUs */ transform: translateZ(0); will-change: transform; } /* Big faded logo, always anchored to safe bottom-right of the screen */ .bg-logo-fixed { position: fixed; right: max(0px, env(safe-area-inset-right)); /* respects notches */ bottom: max(0px, env(safe-area-inset-bottom)); width: clamp(220px, 28vw, 520px); /* scales across phones → desktop */ height: auto; aspect-ratio: 1 / 1; background: url("/attendance/public/assets/img/logobg.jpg") no-repeat right bottom / contain; opacity: 0.12; /* subtle watermark */ pointer-events: none; z-index: 0; /* behind content */ } /* Content always above background */ .page-content, main, .auth-card, .app-header, .student-header, .student-sidebar, .student-bottom-nav { position: relative; z-index: 1; } /* Form cosmetics kept (shared) */ .form-control { background: #f8fafc; border-color: #e7e6e6; border-radius: 12px; } .input-group-text { background: #f8fafc; border-color: #e7e6e6; border-right: 0; border-radius: 12px 0 0 12px; } .input-group .form-control { border-left: 0; } .btn-eye { border-color: #e7e6e6; background: #f8fafc; border-left: 0; border-radius: 0 12px 12px 0; display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem 0.6rem; } .btn-eye img { width: 20px; height: 20px; } /* Responsive tweak for very small phones */ @media (max-width: 480px) { .bg-logo-fixed { width: clamp(180px, 38vw, 320px); /* slightly smaller on tiny screens */ opacity: 0.16; } } /* Utility: make cards/images never overflow their containers */ img, svg, canvas, video { max-width: 100%; height: auto; } .card, .container, .container-fluid { max-width: 100%; }