/* ============================================================ MOBILE CSS — index.html & login.html Add to both pages inside AFTER existing CSS links: ============================================================ */ @media (max-width: 768px) { /* ── Welcome / Index page ─────────────────────────────── */ .placeholder { flex-direction: column !important; justify-content: center !important; align-items: center !important; min-height: 100vh !important; overflow: hidden !important; } .back { object-fit: cover !important; object-position: center !important; } .figure { position: absolute !important; height: 22vh !important; bottom: auto !important; top: 8vh !important; left: 50% !important; transform: translateX(-50%) !important; } .text { position: absolute !important; bottom: auto !important; top: 32vh !important; left: 50% !important; transform: translateX(-50%) !important; height: auto !important; width: 70vw !important; } .logo { height: 8vh !important; top: 0.5rem !important; right: 0.5rem !important; } .ia { bottom: 22vh !important; width: 70vw !important; font-size: 1rem !important; height: 52px !important; border-radius: 26px !important; } .iaa { bottom: 12vh !important; width: 70vw !important; font-size: 0.85rem !important; height: 52px !important; border-radius: 26px !important; } /* ── Login page ───────────────────────────────────────── */ @media (max-width: 768px) { .lback { position: fixed !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; background: rgba(88, 21, 21, 1) !important; /* solid dark red */ background-image: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; z-index: 100 !important; } .ltext { position: relative !important; top: auto !important; left: auto !important; font-size: 1.6rem !important; text-align: center !important; margin-bottom: 20px !important; height: auto !important; color: white !important; } .Llogo { position: relative !important; top: auto !important; left: auto !important; width: 80px !important; height: auto !important; margin-bottom: 8px !important; } .lh1 { position: relative !important; top: auto !important; left: auto !important; width: auto !important; font-size: 2rem !important; color: white !important; text-align: center !important; margin-bottom: 16px !important; } .login-form { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; width: 100% !important; padding: 0 24px !important; box-sizing: border-box !important; position: relative !important; } .lusername, .lpassword { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: 52px !important; font-size: 1rem !important; box-sizing: border-box !important; background: rgba(255,255,255,0.15) !important; border: 2px solid rgba(255,255,255,0.5) !important; color: white !important; } .lusername::placeholder, .lpassword::placeholder { color: rgba(255,255,255,0.7) !important; } .lbutton { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: 52px !important; font-size: 1rem !important; border-radius: 26px !important; margin-top: 4px !important; background: white !important; color: rgba(88, 21, 21, 1) !important; font-weight: 700 !important; border: none !important; } } /* ── Login modal ──────────────────────────────────────── */ .modal-box { width: 88% !important; max-width: 340px !important; } .modal-header h2 { font-size: 1.1rem !important; } .modal-close-btn { padding: 10px 24px !important; font-size: 0.9rem !important; } } /* Extra small (iPhone SE, Galaxy A series) */ @media (max-width: 380px) { .figure { height: 18vh !important; top: 6vh !important; } .text { top: 27vh !important; width: 80vw !important; } .ia, .iaa { width: 80vw !important; font-size: 0.85rem !important; height: 48px !important; } .ia { bottom: 24vh !important; } .iaa { bottom: 14vh !important; } .lh1 { font-size: 1.6rem !important; } .ltext { font-size: 1.1rem !important; } }