/* ============================================================ CAMPUS CENTRAL - MOBILE RESPONSIVE OVERRIDES Load this LAST in after all other CSS ============================================================ */ /* ===== BREAKPOINT: TABLETS & MOBILE ===== */ @media (max-width: 768px) { /* --- GLOBAL RESETS --- */ body { font-size: 14px; padding: 0; margin: 0; overflow-x: hidden; width: 100%; } /* --- HEADER --- */ header { padding: 0.4rem 0.8rem !important; } .nav-container { flex-direction: column !important; gap: 0.4rem !important; align-items: center !important; } .logo { align-items: center !important; text-align: center !important; } .logo-main { font-size: 1rem !important; } .brand-parent { font-size: 0.4rem !important; } nav { width: 100% !important; text-align: center !important; } nav ul { justify-content: center !important; gap: 0.2rem !important; flex-wrap: wrap !important; } nav a { font-size: 0.6rem !important; padding: 0.2rem 0.35rem !important; } .header-buttons { justify-content: center !important; gap: 0.3rem !important; width: 100% !important; } .header-buttons .btn-outline, .header-buttons .btn-primary { font-size: 0.55rem !important; padding: 0.15rem 0.5rem !important; } #userMenu { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.3rem !important; width: 100% !important; } #userName { font-size: 0.6rem !important; } /* --- DROPDOWN --- */ .dropdown-content { min-width: 200px !important; max-height: 60vh !important; right: 0 !important; left: auto !important; position: fixed !important; top: auto !important; bottom: 0 !important; width: 100% !important; border-radius: 20px 20px 0 0 !important; max-height: 70vh !important; box-shadow: 0 -10px 40px rgba(0,0,0,0.2) !important; padding: 0.5rem 0 1rem !important; } .dropdown-content .group-header { font-size: 0.6rem !important; padding: 4px 12px !important; } .dropdown-content a { font-size: 0.6rem !important; padding: 4px 12px 4px 28px !important; } /* --- HERO SECTION --- */ .hero { padding: 1rem 1rem 0.8rem !important; } .hero h1 { font-size: 1.3rem !important; line-height: 1.3 !important; } .hero p { font-size: 0.8rem !important; } .hero-buttons { flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; } .hero-buttons .btn-primary { width: 100% !important; max-width: 260px !important; font-size: 0.75rem !important; padding: 0.5rem !important; text-align: center !important; } .surprise-badge { font-size: 0.65rem !important; padding: 0.2rem 0.6rem !important; } .offer-badge { font-size: 0.6rem !important; padding: 0.15rem 0.6rem !important; } /* --- STATS GRID --- */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.4rem !important; padding: 0 0.5rem !important; } .stat-card { padding: 0.4rem !important; border-radius: 16px !important; } .stat-number { font-size: 1.4rem !important; } .stat-card p { font-size: 0.6rem !important; } /* --- SECTION TITLES --- */ .section { padding: 0.5rem 0.8rem !important; } .section-title h2 { font-size: 1.2rem !important; } .section-title p { font-size: 0.7rem !important; } /* --- FEATURES GRID --- */ .features-grid { grid-template-columns: 1fr !important; gap: 0.6rem !important; } .feature-card { padding: 0.8rem !important; border-radius: 16px !important; } .feature-card i { font-size: 1.5rem !important; } .feature-card h3 { font-size: 0.9rem !important; } .feature-card p { font-size: 0.7rem !important; } /* --- HOW IT WORKS --- */ .how-it-works { flex-direction: column !important; align-items: center !important; gap: 0.6rem !important; } .step { min-width: auto !important; width: 100% !important; max-width: 280px !important; } .step-number { width: 36px !important; height: 36px !important; font-size: 1rem !important; } .step h3 { font-size: 0.85rem !important; } .step p { font-size: 0.7rem !important; } /* --- TWO COLUMN WRAPPER --- */ .two-column-wrapper { flex-direction: column !important; gap: 0.8rem !important; } .two-column-left, .two-column-right { min-width: auto !important; width: 100% !important; } .info-message { font-size: 0.75rem !important; padding: 0.8rem !important; } .slogan-home-box { padding: 0.8rem !important; } .slogan-home-text { font-size: 0.85rem !important; } /* --- TESTIMONIALS --- */ .testimonial-grid { grid-template-columns: 1fr !important; gap: 0.6rem !important; } .testimonial-card { padding: 0.8rem !important; border-radius: 16px !important; } .testimonial-text { font-size: 0.75rem !important; } .testimonial-card strong { font-size: 0.8rem !important; } .testimonial-card p { font-size: 0.65rem !important; } /* --- CTA SECTION --- */ .cta-section { padding: 0.8rem 1rem !important; border-radius: 24px !important; margin: 0.5rem 0.8rem !important; } .cta-section h2 { font-size: 1.1rem !important; } .cta-section p { font-size: 0.7rem !important; } .cta-section .btn-primary { width: 100% !important; max-width: 280px !important; font-size: 0.75rem !important; padding: 0.4rem !important; margin: 0.2rem auto !important; display: block !important; } /* --- FOOTER --- */ footer { padding: 0.8rem 1rem !important; margin-top: 0.5rem !important; } .footer-content { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; } .footer-content h3 { font-size: 0.7rem !important; } .footer-content ul li, .footer-content p { font-size: 0.55rem !important; } .copyright { font-size: 0.5rem !important; padding-top: 0.4rem !important; margin-top: 0.6rem !important; } /* --- BUTTONS (Touch-friendly) --- */ .btn-primary, .btn-outline, .coffee-button, .dev-btn-primary, .dev-btn-secondary { min-height: 40px !important; padding: 0.4rem 1rem !important; font-size: 0.7rem !important; border-radius: 30px !important; } /* --- FORMS & INPUTS --- */ input, textarea, select, button { font-size: 16px !important; border-radius: 12px !important; padding: 0.5rem !important; } input:focus, textarea:focus, select:focus { font-size: 16px !important; } /* --- CARDS & CONTAINERS --- */ .game-container, .form-container, .dev-banner { padding: 0.8rem 1rem !important; border-radius: 20px !important; height: auto !important; max-height: 98vh !important; overflow-y: auto !important; } html, body { overflow-y: auto !important; height: auto !important; min-height: 100vh !important; } /* --- TEACHER GROUP PAGES - FIX EMPTY SPACE --- */ .form-container, .game-container { justify-content: flex-start !important; padding: 0.6rem 0.8rem !important; min-height: auto !important; } .form-body, .game-body { overflow-y: visible !important; padding-right: 0 !important; flex: none !important; } #step1 { flex: none !important; } .step1-content { flex: none !important; justify-content: flex-start !important; } .friends-input-area { padding: 0.4rem !important; margin-bottom: 0.3rem !important; } .friends-list-container { max-height: 50px !important; min-height: 30px !important; } .friend-tag { font-size: 0.55rem !important; padding: 0.1rem 0.4rem !important; } .friend-count { font-size: 0.55rem !important; } .friend-feedback { font-size: 0.5rem !important; min-height: 0.8rem !important; } .add-friend-row input { flex: 1 1 60% !important; min-width: 100px !important; font-size: 0.65rem !important; padding: 0.25rem 0.4rem !important; } .add-friend-row button { flex: 1 1 30% !important; min-width: 70px !important; font-size: 0.6rem !important; padding: 0.25rem 0.5rem !important; } .form-group input { font-size: 0.7rem !important; padding: 0.3rem 0.5rem !important; } .form-group label { font-size: 0.65rem !important; } .teacher-name-group label { font-size: 0.65rem !important; } .input-with-mic input { font-size: 0.7rem !important; padding: 0.3rem 0.5rem !important; } .input-with-mic { flex-wrap: wrap !important; } .input-with-mic input { flex: 1 1 65% !important; min-width: 100px !important; } .input-with-mic .mic-btn { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; font-size: 0.7rem !important; } .info-message { font-size: 0.65rem !important; padding: 0.3rem 0.5rem !important; margin-bottom: 0.3rem !important; } .subhead { font-size: 0.6rem !important; margin-bottom: 0.3rem !important; padding-bottom: 0.2rem !important; } .step-progress { gap: 0.2rem !important; padding: 0.15rem 0.4rem !important; margin-bottom: 0.3rem !important; } .step-dot { width: 22px !important; height: 22px !important; font-size: 0.5rem !important; } .step-line { width: 16px !important; } .step-label { font-size: 0.4rem !important; } .btn-primary, .reveal-btn { margin-top: 0.6rem !important; padding: 0.4rem !important; font-size: 0.75rem !important; } .game-header h2 { font-size: 1.2rem !important; } .back-btn { font-size: 0.6rem !important; padding: 0.15rem 0.4rem !important; } /* --- SLIDING PANEL (teacher game) --- */ #slidingPanel { padding: 0.3rem 0.6rem 0.4rem !important; border-radius: 20px 20px 0 0 !important; bottom: 0 !important; top: auto !important; transform: translateY(100%) !important; max-height: 85vh !important; } #slidingPanel.active { transform: translateY(0) !important; } .lottery-ball { width: 80px !important; height: 80px !important; } .ball-number { font-size: 1.8rem !important; } /* --- MODALS --- */ .extra-modal-content, .gift-modal-content, .success-modal-content { padding: 1.2rem !important; border-radius: 20px !important; width: 95% !important; max-height: 90vh !important; overflow-y: auto !important; } /* --- CHAT --- */ .chat-messages { height: 120px !important; } .chat-input-area { flex-wrap: wrap !important; } .chat-input-area input { flex: 1 1 70% !important; min-width: 120px !important; } .chat-input-area button { flex: 1 1 25% !important; min-width: 60px !important; font-size: 0.65rem !important; } /* --- INVITE LINK --- */ .invite-link-box { flex-direction: column !important; gap: 0.3rem !important; } .invite-link-box input { width: 100% !important; font-size: 0.6rem !important; } .copy-link-btn { width: 100% !important; font-size: 0.6rem !important; padding: 0.3rem !important; } /* --- QR CODE --- */ #qrcode img { width: 60px !important; height: 60px !important; } /* --- PHOTO PREVIEW --- */ .photo-preview-item { width: 44px !important; height: 44px !important; } /* --- PANEL ACTIONS --- */ .panel-actions { flex-direction: column !important; gap: 0.3rem !important; } .btn-tryagain, .btn-lock { width: 100% !important; padding: 0.4rem !important; font-size: 0.7rem !important; } /* --- RESULT ROW --- */ .result-row { flex-direction: column !important; align-items: center !important; gap: 0.3rem !important; } .result-box { width: 100% !important; max-width: 100% !important; } .result-amount { font-size: 1.2rem !important; } /* --- PAYMENT SECTION --- */ .payment-section { padding: 0.6rem !important; } .payment-title { font-size: 0.85rem !important; } .payment-amount { font-size: 1.4rem !important; } .razorpay-pay-btn { font-size: 0.75rem !important; padding: 0.5rem !important; } /* --- GROUP INFO --- */ .group-info { padding: 0.4rem !important; } .group-name-display { font-size: 0.75rem !important; } .member-count-display { font-size: 0.65rem !important; } /* --- WHATSAPP BUTTON --- */ .whatsapp-backup-btn { font-size: 0.65rem !important; padding: 0.4rem !important; } /* --- SUCCESS MESSAGE --- */ .success-msg { padding: 0.4rem !important; font-size: 0.75rem !important; } .success-msg h3 { font-size: 0.9rem !important; } /* --- PRIVACY CHECKBOX --- */ .privacy-checkbox { padding: 0.3rem !important; font-size: 0.7rem !important; } .privacy-checkbox label { font-size: 0.7rem !important; } .privacy-checkbox small { font-size: 0.55rem !important; } /* --- PHOTO UPLOAD --- */ .photo-upload-area { padding: 0.5rem !important; } .photo-upload-area i { font-size: 1.2rem !important; } .photo-upload-area p { font-size: 0.6rem !important; } .photo-upload-area small { font-size: 0.5rem !important; } /* --- TOOLTIP --- */ .tooltip-icon { font-size: 0.6rem !important; } /* --- REVEAL BUTTON --- */ .reveal-btn { font-size: 0.75rem !important; padding: 0.5rem !important; } /* --- COMING SOON PAGE --- */ .container { margin: 1rem auto !important; padding: 0 0.8rem !important; min-height: 50vh !important; } .dev-banner { padding: 1.2rem 1rem !important; border-radius: 20px !important; } .dev-icon { font-size: 2.5rem !important; } .dev-title { font-size: 1.4rem !important; } .dev-tagline { font-size: 0.9rem !important; } .dev-message { font-size: 0.75rem !important; } .dev-features { gap: 0.4rem !important; } .dev-feature-item { font-size: 0.6rem !important; padding: 0.3rem 0.7rem !important; } .dev-cta { flex-direction: column !important; align-items: center !important; } .dev-btn-primary, .dev-btn-secondary { width: 100% !important; text-align: center !important; font-size: 0.7rem !important; padding: 0.4rem !important; } .dev-notify { font-size: 0.65rem !important; padding: 0.3rem 0.8rem !important; flex-wrap: wrap !important; justify-content: center !important; } } /* ===== EXTRA SMALL SCREENS (<= 480px) ===== */ @media (max-width: 480px) { .logo-main { font-size: 0.85rem !important; } .brand-parent { font-size: 0.35rem !important; } nav a { font-size: 0.5rem !important; padding: 0.15rem 0.25rem !important; } .hero h1 { font-size: 1.1rem !important; } .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 0.3rem !important; } .stat-number { font-size: 1.2rem !important; } .section-title h2 { font-size: 1rem !important; } .footer-content { grid-template-columns: 1fr 1fr !important; gap: 0.4rem !important; } .game-container { padding: 0.4rem 0.6rem !important; border-radius: 16px !important; } .game-header h2 { font-size: 1rem !important; } .lottery-ball { width: 60px !important; height: 60px !important; } .ball-number { font-size: 1.4rem !important; } .extra-modal-content { padding: 0.8rem !important; } .gift-modal-content { padding: 0.8rem !important; } .dev-title { font-size: 1.1rem !important; } .dev-tagline { font-size: 0.75rem !important; } }