/* ========================================================= Silver Oak Exam Portal - Base theme + 3 distinct panel themes Add class="panel-student" / "panel-faculty" / "panel-owner" to to activate that panel's color scheme. ========================================================= */ :root { --primary: #0d47a1; --primary-light: #1565c0; --primary-dark: #08316b; --accent: #00acc1; --danger: #e53935; --success: #2e7d32; --bg: #ffffff; --card-bg: #ffffff; --border: #e6e9ef; --text: #1a1a2e; --text-muted: #6b7280; --radius: 14px; --shadow: 0 4px 24px rgba(13, 71, 161, 0.09); --font: 'Segoe UI', 'Poppins', Roboto, Arial, sans-serif; } /* ---- Panel themes ---- */ body.panel-student { --primary: #0d47a1; --primary-light: #1e88e5; --primary-dark: #072a5e; --accent: #00bcd4; --panel-bg-a: #e8f1ff; --panel-bg-b: #ffffff; } body.panel-faculty { --primary: #4527a0; --primary-light: #6a3fd6; --primary-dark: #2e1a6b; --accent: #ab47bc; --panel-bg-a: #f2ecff; --panel-bg-b: #ffffff; } body.panel-owner { --primary: #1b2a41; --primary-light: #2c4468; --primary-dark: #0d1826; --accent: #c9a227; --panel-bg-a: #eef1f6; --panel-bg-b: #ffffff; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ---- Navbar ---- */ .navbar { background: linear-gradient(100deg, var(--primary), var(--primary-light)); color: #fff; padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20; } .navbar h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: 0.2px; } .navbar .panel-tag { display: inline-block; background: rgba(255,255,255,0.18); padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; margin-left: 10px; vertical-align: middle; letter-spacing: 0.3px; } .navbar a { color: #fff; text-decoration: none; margin-left: 18px; font-size: 14px; opacity: 0.92; } .navbar a:hover { opacity: 1; text-decoration: underline; } .navbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .container { max-width: 1150px; margin: 40px auto; padding: 0 20px; } .center-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top left, var(--panel-bg-a, #eaf2ff), var(--panel-bg-b, #ffffff) 65%); } /* ---- Cards ---- */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; } .auth-card { width: 430px; max-width: 92vw; } .auth-card h2 { margin-top: 0; color: var(--primary); font-size: 24px; } .auth-card p.subtitle { color: var(--text-muted); margin-top: -8px; font-size: 14px; } /* ---- Forms ---- */ label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--text); } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea, input[type=file] { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; background: #fafbfe; transition: border 0.15s, box-shadow 0.15s; font-family: var(--font); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-light); background: #fff; box-shadow: 0 0 0 3px rgba(13,71,161,0.08); } /* ---- Buttons ---- */ .btn { display: inline-block; background: var(--primary); color: #fff; border: none; padding: 11px 22px; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; margin-top: 18px; transition: transform 0.1s, background 0.15s, box-shadow 0.15s; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .btn:hover { background: var(--primary-light); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn.danger { background: var(--danger); } .btn.success { background: var(--success); } .btn.block { width: 100%; text-align: center; } .btn.secondary { background: #eef2ff; color: var(--primary); box-shadow: none; } .btn.secondary:hover { background: #e0e8ff; } .btn.accent { background: var(--accent); } /* ---- Alerts ---- */ .alert { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; } .alert.error { background: #fdecea; color: var(--danger); border: 1px solid #f5c6cb; } .alert.success { background: #eafaf1; color: var(--success); border: 1px solid #c3e6cb; } .alert.info { background: #eaf2ff; color: var(--primary); border: 1px solid #cfe0ff; } /* ---- Tables ---- */ table { width: 100%; border-collapse: collapse; margin-top: 16px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; } th { background: linear-gradient(100deg, var(--primary), var(--primary-light)); color: #fff; font-weight: 600; } tr:hover td { background: #fafbff; } /* ---- Badges ---- */ .badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; } .badge.running { background: #e8f5e9; color: var(--success); } .badge.stopped { background: #fdecea; color: var(--danger); } .badge.not_started { background: #f1f3f5; color: var(--text-muted); } .badge.completed { background: #e8f5e9; color: var(--success); } .badge.flagged_cheating { background: #fdecea; color: var(--danger); } .badge.in_progress { background: #fff8e1; color: #f57f17; } /* ---- Grid / stat cards ---- */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 20px; } .stat-card { background: linear-gradient(145deg, #fff, var(--panel-bg-a, #f7f9ff)); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: transform 0.15s; } .stat-card:hover { transform: translateY(-3px); } .stat-card .num { font-size: 30px; font-weight: 800; color: var(--primary); } .stat-card .label { color: var(--text-muted); font-size: 13px; margin-top: 4px; } /* ---- Exam-taking screen ---- */ .exam-header { position: sticky; top: 0; background: #fff; border-bottom: 2px solid var(--border); padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; z-index: 10; } .timer { font-weight: 800; color: var(--danger); font-size: 19px; } .question-block { padding: 24px; max-width: 800px; margin: 0 auto; user-select: none; } .question-block .qnum { color: var(--text-muted); font-size: 13px; font-weight: 600; } .question-block .qtext { font-size: 18px; font-weight: 600; margin: 8px 0 20px; } .option-row { border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 16px; margin-bottom: 10px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: all 0.15s; } .option-row:hover { background: #f7f9ff; border-color: var(--primary-light); } .option-row.selected { border-color: var(--primary); background: #eaf2ff; } .cheat-lock { position: fixed; inset: 0; background: rgba(20,20,30,0.94); color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; z-index: 999; padding: 20px; } .cheat-lock h2 { color: #ff6b6b; } /* ---- Split login layout ---- */ .login-split { display: flex; min-height: 100vh; width: 100%; margin: 0; } .login-image-side { width: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--panel-bg-a, #eaf2ff), #fff); padding: 20px; box-sizing: border-box; position: relative; } .login-image-side img { max-width: 90%; max-height: 80vh; object-fit: contain; border-radius: 16px; } .login-image-side .brand-badge { position: absolute; top: 32px; left: 32px; font-weight: 800; color: var(--primary); font-size: 15px; letter-spacing: 0.3px; } .login-form-side { width: 50%; display: flex; align-items: center; justify-content: center; background: #fff; padding: 20px; box-sizing: border-box; } @media (max-width: 800px) { .login-split { flex-direction: column; } .login-image-side, .login-form-side { width: 100%; } .login-image-side { min-height: 220px; } } /* ---- Panel selector landing page ---- */ .panel-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; } .panel-choice-card { border-radius: var(--radius); padding: 26px 20px; text-align: center; color: #fff; box-shadow: var(--shadow); text-decoration: none; transition: transform 0.15s; display: block; } .panel-choice-card:hover { transform: translateY(-4px); } .panel-choice-card.student { background: linear-gradient(145deg, #0d47a1, #1e88e5); } .panel-choice-card.faculty { background: linear-gradient(145deg, #4527a0, #6a3fd6); } .panel-choice-card.owner { background: linear-gradient(145deg, #1b2a41, #2c4468); } .panel-choice-card .icon { font-size: 32px; margin-bottom: 8px; display: block; } .panel-choice-card .title { font-weight: 700; font-size: 16px; } .panel-choice-card .sub { font-size: 12px; opacity: 0.85; margin-top: 4px; } @media (max-width: 700px) { .panel-choice-grid { grid-template-columns: 1fr; } } /* ---- Filter bar ---- */ .filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 20px; background: #fff; padding: 16px; border-radius: var(--radius); box-shadow: var(--shadow); } .filter-bar > div { min-width: 140px; } .filter-bar label { margin: 0 0 6px; } footer { text-align: center; color: var(--text-muted); font-size: 12px; padding: 24px; }