/* * Global Stylesheet for MMC BCA Question Bank * * This file contains all common CSS styles applied across multiple pages. * It's built specifically for the HTML structures provided, starting with index.html. */ /* --- Google Fonts Import (Ensure these are linked in your HTML before this stylesheet) --- */ /* font-family: 'Inter', sans-serif; (for body text) */ /* font-family: 'Montserrat', sans-serif; (for headings) */ /* --- CSS Variables (Custom Properties) --- */ :root { /* Colors */ --primary-color: #4A90E2; /* A vibrant, professional blue */ --primary-dark: #357ABD; /* Darker blue for hover states */ --secondary-color: #50C878; /* A fresh green for success/upload */ --secondary-dark: #3DAF62; /* Darker green for hover */ --danger-color: #E25858; /* A clear red for delete/logout */ --danger-dark: #C94C4C; /* Darker red for hover */ --background-light: #F8F9FA; /* Very light grey/off-white background */ --card-background: #FFFFFF; /* Pure white for main content cards */ --text-color: #343A40; /* Dark charcoal for general text */ --light-text-color: #6C757D; /* Muted grey for secondary text */ --border-color: #E0E0E0; /* Light grey for general borders */ --accent-light-bg: #EAF4FF; /* Very light blue accent background */ --accent-dark-bg: #F0F5F8; /* Slightly darker light blue accent background */ --shadow-color: rgba(0, 0, 0, 0.08); /* Unified shadow color */ /* Spacing */ --spacing-xs: 8px; --spacing-sm: 12px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-xxl: 48px; /* Border Radius */ --border-radius-sm: 6px; --border-radius-md: 10px; --border-radius-lg: 16px; /* Box Shadows */ --box-shadow-light: 0 4px 12px var(--shadow-color); --box-shadow-medium: 0 8px 25px var(--shadow-color); --box-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.12); /* For interactive elements */ } /* --- Base Body & Typography Styles --- */ body { font-family: 'Inter', sans-serif; /* Modern sans-serif for body */ background-color: var(--background-light); color: var(--text-color); line-height: 1.7; /* Improved readability */ margin: 0; padding: 0; /* Remove padding from body as sections will handle it */ box-sizing: border-box; /* Ensures padding is included in element's total width/height */ overflow-x: hidden; /* Prevent horizontal scroll on small devices */ display: block; /* Ensure sections stack vertically */ min-height: 100vh; } /* --- Global Headings --- */ h1 { font-family: 'Montserrat', sans-serif; /* Distinct font for main heading */ color: var(--primary-color); margin-bottom: var(--spacing-xxl); font-size: 2.8em; /* Larger main heading */ font-weight: 700; /* Extra bold */ letter-spacing: -0.03em; /* Tighten letter spacing for headings */ text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Subtle text shadow */ text-align: center; /* Default center align headings */ } h2, h3 { font-family: 'Montserrat', sans-serif; /* Consistent heading font */ color: var(--primary-dark); margin-top: var(--spacing-xxl); margin-bottom: var(--spacing-md); border-bottom: 2px solid var(--border-color); /* Subtle separator */ padding-bottom: var(--spacing-sm); font-size: 2em; /* Larger sub-headings */ font-weight: 600; letter-spacing: -0.02em; text-align: center; /* Default center align headings */ } /* --- Common Button Styles (Used across all pages for consistency) --- */ .action-btn { display: inline-block; padding: var(--spacing-md) var(--spacing-xl); border: none; border-radius: var(--border-radius-sm); cursor: pointer; font-size: 1em; font-weight: 600; text-decoration: none; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; color: white; min-width: 140px; text-transform: uppercase; letter-spacing: 0.05em; box-sizing: border-box; /* Include padding/border in width */ } .action-btn:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-hover); } /* Specific button colors */ .primary-btn { background-color: var(--primary-color); } .primary-btn:hover { background-color: var(--primary-dark); } .secondary-btn { background-color: var(--secondary-color); } .secondary-btn:hover { background-color: var(--secondary-dark); } .danger-btn { background-color: var(--danger-color); } .danger-btn:hover { background-color: var(--danger-dark); } /* --- Header Section (index.html) --- */ .main-header { background-color: var(--card-background); box-shadow: var(--box-shadow-light); padding: var(--spacing-sm) var(--spacing-xxl); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 100; animation: slideDownFadeIn 0.8s ease-out forwards; width: 100%; /* Ensure header spans full width */ box-sizing: border-box; } @keyframes slideDownFadeIn { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } .header-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .logo { display: flex; align-items: center; margin-right: var(--spacing-xl); } .logo img { height: 50px; margin-right: var(--spacing-sm); border-radius: var(--border-radius-sm); } .logo h1 { font-family: 'Montserrat', sans-serif; font-size: 1.6em; color: var(--primary-dark); margin: 0; letter-spacing: -0.01em; text-shadow: none; text-align: left; /* Override global h1 center align */ } /* Main Navigation */ .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; } .main-nav ul li { margin: 0 var(--spacing-md); } .main-nav ul li:last-child { margin-right: 0; } .main-nav .nav-link { text-decoration: none; color: var(--text-color); font-weight: 500; font-size: 1em; padding: var(--spacing-xs) var(--spacing-sm); transition: color 0.3s ease, background-color 0.3s ease; border-radius: var(--border-radius-sm); } .main-nav .nav-link:hover { color: var(--primary-color); background-color: var(--accent-light-bg); } .main-nav .nav-button { margin-left: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-lg); font-size: 0.9em; min-width: unset; text-transform: capitalize; letter-spacing: normal; transform: none; box-shadow: none; } .main-nav .nav-button:hover { transform: none; box-shadow: none; opacity: 0.9; } /* --- Tagline Section (index.html - NEW) --- */ .tagline-section { background-color: var(--secondary-color); color: white; padding: var(--spacing-md) var(--spacing-lg); text-align: center; font-size: 1.3em; font-weight: 500; letter-spacing: 0.05em; box-shadow: var(--box-shadow-light); margin-top: var(--spacing-md); /* Space below header */ animation: fadeIn 1s ease-out forwards; } .tagline-section p { margin: 0; /* Remove default paragraph margin */ } /* --- Hero Section (index.html) --- */ .hero-section { display: flex; justify-content: center; align-items: center; padding: var(--spacing-xxl) var(--spacing-lg); background: linear-gradient(135deg, var(--primary-color) 0%, #6A5ACD 100%); color: white; text-align: left; min-height: 500px; gap: var(--spacing-xl); flex-wrap: wrap; animation: slideUpFadeIn 1s ease-out forwards; margin: var(--spacing-xxl) auto; max-width: 1200px; border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-medium); } @keyframes slideUpFadeIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .hero-text { flex: 1; min-width: 300px; max-width: 600px; padding-left: var(--spacing-lg); box-sizing: border-box; } .hero-text h1 { color: white; font-size: 3.5em; line-height: 1.2; margin-bottom: var(--spacing-md); text-shadow: 2px 2px 5px rgba(0,0,0,0.2); text-align: left; } .hero-text h2 { color: rgba(255, 255, 255, 0.9); font-size: 1.8em; font-weight: 500; margin-bottom: var(--spacing-lg); border-bottom: none; padding-bottom: 0; text-align: left; } .hero-text p { font-size: 1.2em; line-height: 1.8; margin-bottom: var(--spacing-xl); color: rgba(255, 255, 255, 0.8); } .hero-button { background-color: var(--secondary-color); padding: var(--spacing-md) var(--spacing-xl); font-size: 1.1em; font-weight: 700; border-radius: var(--border-radius-md); transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; } .hero-button:hover { background-color: var(--secondary-dark); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); } .hero-image { flex: 1; min-width: 300px; max-width: 500px; display: flex; justify-content: center; align-items: center; padding-right: var(--spacing-lg); box-sizing: border-box; } .hero-image img { max-width: 100%; height: auto; border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-medium); transition: transform 0.5s ease; } .hero-image img:hover { transform: scale(1.02); } /* --- Footer Section (index.html) --- */ .main-footer { background-color: var(--text-color); color: rgba(255, 255, 255, 0.7); padding: var(--spacing-xl) var(--spacing-lg); text-align: center; font-size: 0.9em; margin-top: var(--spacing-xxl); width: 100%; box-sizing: border-box; } .main-footer p { margin: var(--spacing-xs) 0; } /* --- Login Page Styles (login.php) --- */ /* Apply this class to the body tag of login.php: */ body.login-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, var(--primary-color) 0%, #6A5ACD 100%); /* Same gradient as hero */ padding: var(--spacing-lg); overflow-y: auto; /* Allow scroll if content is taller than viewport */ } .login-container { background-color: var(--card-background); padding: var(--spacing-xxl) var(--spacing-xl); /* Increased padding */ border-radius: var(--border-radius-lg); /* Larger border radius */ box-shadow: var(--box-shadow-medium); text-align: center; width: 100%; max-width: 480px; /* Slightly wider */ box-sizing: border-box; animation: fadeInScaleUp 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; /* More bouncy animation */ transition: box-shadow 0.3s ease; /* Smooth shadow transition */ } .login-container:hover { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Enhanced hover shadow */ } @keyframes fadeInScaleUp { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-container h2 { color: var(--primary-color); margin-bottom: var(--spacing-xl); font-size: 2.2em; /* Slightly larger heading */ font-weight: 700; /* Bolder heading */ border-bottom: none; padding-bottom: 0; text-align: center; } .form-group { margin-bottom: var(--spacing-lg); text-align: left; } .form-group label { display: block; margin-bottom: var(--spacing-xs); font-weight: 600; /* Bolder labels */ color: var(--text-color); font-size: 1em; /* Slightly larger font size */ } .form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"], .form-group input[type="tel"], .form-group select { width: 100%; padding: var(--spacing-md); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 1em; color: var(--text-color); background-color: var(--accent-dark-bg); /* Slightly darker background for inputs */ transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; box-sizing: border-box; } .form-group input[type="text"]:focus, .form-group input[type="password"]:focus, .form-group input[type="email"]:focus, .form-group input[type="tel"]:focus, .form-group select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--accent-light-bg); /* More prominent focus ring */ background-color: white; /* White background on focus */ } /* Apply primary button style to login submit button */ .form-group input[type="submit"] { width: 100%; margin-top: var(--spacing-md); background-color: var(--primary-color); color: white; text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; padding: var(--spacing-md) var(--spacing-xl); border-radius: var(--border-radius-sm); transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; } .form-group input[type="submit"]:hover { background-color: var(--primary-dark); transform: translateY(-3px); /* Match hero button lift */ box-shadow: var(--box-shadow-hover); } /* --- Message Container Styling (for server-side messages) --- */ .message-container { padding: 15px 20px; margin-top: var(--spacing-md); margin-bottom: var(--spacing-lg); border-radius: var(--border-radius-sm); font-size: 1em; line-height: 1.4; word-wrap: break-word; /* Ensures long messages wrap */ text-align: center; /* Center the message content */ } .message-container ul { margin: 0; padding: 0; list-style: none; /* Removes bullet points for a cleaner look */ } .message-container ul li { margin-bottom: 5px; padding-left: 0; /* Align text to the left */ } /* --- Error Message Specific Styling (for server-side error messages) --- */ .message-container.error-message { background-color: #ffe0e0; /* Light red background */ color: #cc0000; /* Dark red text */ border: 1px solid #ff4d4d; /* Red border */ animation: fadeIn 0.5s ease-out; /* Add animation for active state */ } /* Optional: Add an icon or symbol before error list items */ .message-container.error-message ul li::before { content: "✖ "; /* Red 'X' or other symbol */ color: #cc0000; font-weight: bold; margin-right: 8px; } /* --- Success Message Specific Styling (for server-side success messages) --- */ .message-container.success-message { background-color: #e0ffe0; /* Light green background */ color: #008000; /* Dark green text */ border: 1px solid #4dff4d; /* Green border */ font-weight: 500; animation: fadeIn 0.5s ease-out; } /* Optional: Add an icon or symbol before success list items */ .message-container.success-message p::before { content: "✓ "; /* Green checkmark or other symbol */ color: #008000; font-weight: bold; margin-right: 8px; } /* --- Styles for Client-Side Validation Feedback (Green/Red Ticks) --- */ /* These are the styles for your password/username guidance lists */ .password-guidance ul, .username-guidance ul { list-style: none; /* Remove default bullets */ padding: 0; margin: 5px 0 10px 0; /* Some spacing */ font-size: 0.9em; } .password-guidance ul li, .username-guidance ul li { padding-left: 20px; /* Space for the icon */ position: relative; /* For absolute positioning of the icon */ color: #555; /* Default text color */ margin-bottom: 3px; display: flex; /* Ensures icon and text are on the same line */ align-items: center; /* Vertically align icon and text */ } .password-guidance ul li::before, .username-guidance ul li::before { content: '•'; /* Default bullet, will be overridden by valid/invalid */ position: absolute; left: 0; color: #888; /* Default color for bullet */ font-weight: bold; } .password-guidance ul li.valid, .username-guidance ul li.valid { color: var(--secondary-dark); /* Green for valid criteria */ } .password-guidance ul li.invalid, .username-guidance ul li.invalid { color: var(--danger-dark); /* Red for invalid criteria */ } .password-guidance ul li.valid::before, .username-guidance ul li.valid::before { content: '✓'; /* Checkmark for valid */ color: var(--secondary-dark); } .password-guidance ul li.invalid::before, .username-guidance ul li.invalid::before { content: '✖'; /* X mark for invalid */ color: var(--danger-dark); } /* Styles for the "Confirm Passwords Don't Match" error */ /* This specific error message is shown by JavaScript directly next to the input */ .confirm-password-error-message { /* A more specific class name to avoid conflict */ color: var(--danger-dark); /* Red text */ font-size: 0.85em; margin-top: 5px; text-align: left; display: block; /* Ensure it's always visible if text is present */ } .signup-link { margin-top: var(--spacing-lg); font-size: 0.95em; color: var(--light-text-color); } .signup-link a { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .signup-link a:hover { color: var(--primary-dark); text-decoration: underline; } /* --- Register Page Styles (register.html or register.php) --- */ /* Apply this class to the body tag of register.html/register.php: */ body.register-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #6A5ACD 0%, var(--primary-color) 100%); /* Slightly different gradient for variety */ padding: var(--spacing-lg); overflow-y: auto; /* Allow scroll if content is taller than viewport, important for longer forms */ } .register-container { background-color: var(--card-background); padding: var(--spacing-xxl) var(--spacing-xl); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-medium); text-align: center; width: 100%; max-width: 550px; /* Slightly wider for more input fields */ box-sizing: border-box; animation: fadeInScaleUp 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; /* Same bouncy animation */ transition: box-shadow 0.3s ease; } .register-container:hover { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); } .register-container h2 { color: var(--primary-color); margin-bottom: var(--spacing-xl); font-size: 2.2em; font-weight: 700; border-bottom: none; padding-bottom: 0; text-align: center; } /* Reusing form-group, input, label styles from login page */ /* The styles for .form-group, input[type="text"], input[type="password"], etc., and .form-group input[type="submit"] are already defined globally or in the login section and will apply to the register form as well, ensuring consistency. */ .login-link { margin-top: var(--spacing-lg); font-size: 0.95em; color: var(--light-text-color); } .login-link a { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .login-link a:hover { color: var(--primary-dark); text-decoration: underline; } /* --- Dashboard Page Styles (dashboard.php) --- */ /* Apply this class to the body tag of dashboard.php: */ body.dashboard-body { display: flex; flex-direction: column; align-items: center; min-height: 100vh; /* --- MODIFIED: Changed background to match login page gradient --- */ background: linear-gradient(135deg, var(--primary-color) 0%, #6A5ACD 100%); padding: var(--spacing-xl); overflow-y: auto; } .dashboard-container { background-color: var(--card-background); padding: var(--spacing-xxl); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-medium); text-align: center; width: 100%; max-width: 900px; /* Wider for dashboard content */ margin: var(--spacing-xxl) auto; /* Top/bottom margin, auto left/right */ box-sizing: border-box; animation: fadeIn 0.8s ease-out forwards; /* Simple fade in */ } .dashboard-container h1 { font-size: 2.5em; /* Slightly smaller than hero h1 */ color: var(--primary-color); margin-bottom: var(--spacing-md); text-align: center; /* Override global h1 if necessary */ border-bottom: none; /* Remove border from dashboard h1 */ } .dashboard-container p { font-size: 1.1em; color: var(--light-text-color); margin-bottom: var(--spacing-xl); } .info-card { background-color: var(--accent-light-bg); /* Light blue background */ border: 1px solid var(--primary-color); border-radius: var(--border-radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-xxl); text-align: left; box-shadow: var(--box-shadow-light); animation: slideUpFadeIn 0.8s ease-out forwards; /* Subtle animation for info card */ animation-delay: 0.2s; /* Delay slightly after main container */ opacity: 0; /* Start hidden for animation */ } .info-card p { margin: var(--spacing-xs) 0; font-size: 1em; color: var(--text-color); } .info-card strong { color: var(--primary-dark); } .filter-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */ gap: var(--spacing-xl); /* Gap between sections */ margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px dashed var(--border-color); /* Separator */ text-align: left; /* Align filter groups left */ } .filter-group { margin-bottom: var(--spacing-md); } .filter-group label { display: block; margin-bottom: var(--spacing-xs); font-weight: 600; color: var(--text-color); font-size: 1.05em; } .filter-group select { width: 100%; padding: var(--spacing-md); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 1em; color: var(--text-color); background-color: var(--accent-dark-bg); transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; box-sizing: border-box; -webkit-appearance: none; /* Remove default arrow on select */ -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22%236C757D%22%20d%3D%22M208.5%2089.5L128%20169.1l-80.5-79.6c-4.7-4.7-12.3-4.7-17%200l-4.7%204.7c-4.7%204.7-4.7%2012.3%200%2017l80.5%2079.6c4.7%204.7%2012.3%204.7%2017%200l80.5-79.6c4.7-4.7%204.7-12.3%200-17l-4.7-4.7z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; } .filter-group select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--accent-light-bg); background-color: white; } /* Container for results */ #qb-results-container, #syllabus-results-container { background-color: var(--accent-dark-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); min-height: 120px; /* Min height to prevent jumping */ padding: var(--spacing-md); margin-top: var(--spacing-sm); display: flex; /* For centering initial text */ justify-content: center; /* For centering initial text */ align-items: center; /* For centering initial text */ flex-direction: column; /* For vertical stacking of initial text */ color: var(--light-text-color); font-style: italic; } #qb-results-container ul, #syllabus-results-container ul { list-style: none; padding: 0; margin: 0; width: 100%; /* Ensure list takes full width of container */ } .download-list-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) var(--spacing-xs); border-bottom: 1px dashed var(--border-color); transition: background-color 0.2s ease; flex-wrap: wrap; /* Allow wrapping on small screens */ } .download-list-item:last-child { border-bottom: none; } .download-list-item:hover { background-color: var(--accent-light-bg); } .download-list-item strong { color: var(--text-color); margin-right: var(--spacing-md); /* Space between name and button */ } .download-list-item a { background-color: var(--secondary-color); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); text-decoration: none; font-size: 0.9em; transition: background-color 0.3s ease, transform 0.2s ease; flex-shrink: 0; /* Prevent button from shrinking */ } .download-list-item a:hover { background-color: var(--secondary-dark); transform: translateY(-2px); } .checkbox-group { display: flex; align-items: center; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md); justify-content: center; /* Center the checkbox */ } .checkbox-group input[type="checkbox"] { margin-right: var(--spacing-xs); width: 18px; /* Standard size */ height: 18px; accent-color: var(--primary-color); /* Native checkbox color */ cursor: pointer; } .checkbox-group label { font-weight: 500; color: var(--text-color); cursor: pointer; } /* Syllabi section (initially hidden) */ #syllabus-section-wrapper { margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px dashed var(--border-color); text-align: left; } /* Dashboard action buttons */ .logout-btn { /* Reusing logout-btn for manage_questions as well */ display: inline-block; margin-top: var(--spacing-xxl); margin-left: var(--spacing-md); margin-right: var(--spacing-md); padding: var(--spacing-md) var(--spacing-xl); border-radius: var(--border-radius-sm); text-decoration: none; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; color: white; text-transform: uppercase; letter-spacing: 0.05em; min-width: 160px; /* Ensure buttons are a decent size */ } .logout-btn:first-of-type { /* Style for Manage Questions */ background-color: var(--primary-color); } .logout-btn:first-of-type:hover { background-color: var(--primary-dark); transform: translateY(-3px); box-shadow: var(--box-shadow-hover); } .logout-btn:last-of-type { /* Style for Logout */ background-color: var(--danger-color); } .logout-btn:last-of-type:hover { background-color: var(--danger-dark); transform: translateY(-3px); box-shadow: var(--box-shadow-hover); } /* --- Responsive Adjustments --- */ /* For screens smaller than 992px (e.g., tablets and smaller desktops) */ @media (max-width: 992px) { h1 { font-size: 2.2em; } h2, h3 { font-size: 1.8em; } /* Header */ .main-header { padding: var(--spacing-sm) var(--spacing-lg); } .header-content { flex-direction: column; align-items: center; } .logo { margin-bottom: var(--spacing-md); margin-right: 0; } .main-nav ul { margin-top: var(--spacing-sm); flex-direction: column; } .main-nav ul li { margin: var(--spacing-xs) 0; } .main-nav .nav-button { margin-left: 0; margin-top: var(--spacing-sm); } /* Hero Section */ .hero-section { flex-direction: column-reverse; /* Image above text on mobile */ text-align: center; padding: var(--spacing-xl) var(--spacing-md); min-height: auto; border-radius: var(--border-radius-md); margin: var(--spacing-xl) auto; } .hero-text { min-width: unset; max-width: 100%; padding-left: 0; } .hero-text h1 { font-size: 2.5em; text-align: center; } .hero-text h2 { font-size: 1.5em; text-align: center; } .hero-image { margin-bottom: var(--spacing-xl); max-width: 80%; padding-right: 0; } .hero-button { width: 80%; max-width: 300px; } /* Login & Register Pages */ .login-container, .register-container { padding: var(--spacing-xl); /* Reduce padding on smaller screens */ margin: var(--spacing-xl) auto; /* Adjust margin */ border-radius: var(--border-radius-md); } /* Dashboard */ .dashboard-container { padding: var(--spacing-xl); margin: var(--spacing-xl) auto; border-radius: var(--border-radius-md); } .filter-section { grid-template-columns: 1fr; /* Single column on smaller screens */ } .logout-btn { min-width: unset; /* Allow buttons to shrink */ width: 80%; /* Occupy more width */ margin: var(--spacing-md) auto; /* Center buttons */ display: block; /* Stack buttons vertically */ } } /* For screens smaller than 768px (e.g., larger phones and small tablets) */ @media (max-width: 768px) { body { padding: var(--spacing-xs); } /* Reduce overall body padding */ h1 { font-size: 1.8em; margin-bottom: var(--spacing-xl); } h2, h3 { font-size: 1.4em; margin-top: var(--spacing-xl); } .login-container, .register-container, .dashboard-container { padding: var(--spacing-lg); margin: var(--spacing-lg) auto; border-radius: var(--border-radius-md); } .form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"], .form-group input[type="tel"], .form-group select { padding: var(--spacing-sm); } .action-btn, .form-group input[type="submit"] { padding: var(--spacing-sm) var(--spacing-md); font-size: 0.9em; min-width: 100px; } .tagline-section { font-size: 1.1em; padding: var(--spacing-sm) var(--spacing-md); } } /* For very small screens (e.g., phones) */ @media (max-width: 480px) { .login-container, .register-container, .dashboard-container { padding: var(--spacing-md); } h1 { font-size: 1.6em; } h2, h3 { font-size: 1.2em; } .tagline-section { font-size: 1em; padding: var(--spacing-sm); } /* Hero Section */ .hero-text h1 { font-size: 2em; } .hero-text h2 { font-size: 1.2em; } .hero-text p { font-size: 1em; } .hero-button { font-size: 1em; padding: var(--spacing-sm) var(--spacing-lg); } /* Buttons */ .action-btn, .form-group input[type="submit"], .logout-btn { width: 100%; /* Full width buttons */ margin-bottom: var(--spacing-sm); margin-right: 0; margin-left: 0; } } /* --- About Page Styles (about.html) --- */ /* Apply this class to the body tag of about.html: */ body.about-body { display: flex; flex-direction: column; align-items: center; min-height: 100vh; /* --- MODIFIED: Changed background to match login page gradient --- */ background: linear-gradient(135deg, var(--primary-color) 0%, #6A5ACD 100%); padding: var(--spacing-xl); overflow-y: auto; } .about-container { background-color: var(--card-background); padding: var(--spacing-xxl); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-medium); text-align: center; width: 100%; max-width: 800px; /* Adjust width as needed */ margin: var(--spacing-xxl) auto; box-sizing: border-box; animation: fadeIn 0.8s ease-out forwards; } .about-container h1 { font-size: 2.5em; color: var(--primary-color); margin-bottom: var(--spacing-md); border-bottom: none; /* Remove border if you don't want it here */ text-align: center; } .about-container h2 { font-size: 1.6em; color: var(--primary-dark); margin-top: var(--spacing-sm); margin-bottom: var(--spacing-xl); border-bottom: 1px solid var(--border-color); padding-bottom: var(--spacing-sm); text-align: center; } .about-container p { font-size: 1.1em; color: var(--text-color); line-height: 1.8; text-align: left; /* Align paragraph text left for readability */ margin-bottom: var(--spacing-lg); } /* Responsive adjustments for about page */ @media (max-width: 768px) { .about-container { padding: var(--spacing-xl); margin: var(--spacing-xl) auto; } .about-container h1 { font-size: 2em; } .about-container h2 { font-size: 1.4em; } .about-container p { font-size: 1em; } } /* --- Contact Page Styles (contact.html) --- */ /* Apply this class to the body tag of contact.html: */ body.contact-body { display: flex; flex-direction: column; align-items: center; min-height: 100vh; /* --- MODIFIED: Changed background to match login page gradient --- */ background: linear-gradient(135deg, var(--primary-color) 0%, #6A5ACD 100%); padding: var(--spacing-xl); overflow-y: auto; } .contact-container { background-color: var(--card-background); padding: var(--spacing-xxl); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-medium); text-align: center; /* Center main content text */ width: 100%; max-width: 800px; /* Adjust width as needed */ margin: var(--spacing-xxl) auto; box-sizing: border-box; animation: fadeIn 0.8s ease-out forwards; } .contact-container h1 { font-size: 2.5em; color: var(--primary-color); margin-bottom: var(--spacing-md); border-bottom: none; /* Remove border if you don't want it here */ text-align: center; } .contact-intro { font-size: 1.1em; color: var(--light-text-color); line-height: 1.6; margin-bottom: var(--spacing-xl); max-width: 600px; margin-left: auto; margin-right: auto; } .contact-details { display: flex; flex-wrap: wrap; /* Allow items to wrap on smaller screens */ justify-content: center; /* Center contact items */ gap: var(--spacing-lg); /* Space between items */ margin-bottom: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px dashed var(--border-color); } .contact-item { background-color: var(--accent-light-bg); /* Light accent background for each item */ padding: var(--spacing-lg); border-radius: var(--border-radius-md); border: 1px solid var(--primary-color); box-shadow: var(--box-shadow-light); flex: 1; /* Allow items to grow/shrink */ min-width: 280px; /* Minimum width for each item */ text-align: left; /* Align text within each item to the left */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .contact-item:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-medium); }