/* Test-taking screen shared by the practice tests, Featured Tests and the free test. Laid out like the real LNAT: a top bar with the timer and question count, the passage and the question side by side, and a bottom bar with the navigation. The whole test fits the window, so the page itself never scrolls; the passage and the question each scroll on their own. On phones the passage and the question share the screen through two tabs. Pages add class="exam-screen" to and load this file after their own styles. */ body.exam-screen { --exam-navy: #14243d; --exam-navy-soft: #1f3352; --exam-gold: #d69e2e; --exam-bar-tint: #e9eef5; --exam-line: #d5dde8; --exam-text: #1a202c; --exam-muted: #4a5568; --exam-top-h: 60px; --exam-sub-h: 46px; --exam-foot-h: 64px; background: #fff; color: var(--exam-text); font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } /* ---------- Top bar ---------- */ body.exam-screen .test-header { position: fixed; top: 0; left: 0; right: 0; height: var(--exam-top-h); padding: 0; background: var(--exam-navy); color: #fff; border-bottom: 3px solid var(--exam-gold); z-index: 1000; } body.exam-screen .exam-topbar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; } body.exam-screen .exam-title { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 1.05rem; font-weight: 600; } body.exam-screen .exam-brand { color: var(--exam-gold); font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; flex-shrink: 0; } body.exam-screen .exam-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } body.exam-screen .exam-title .featured-badge { flex-shrink: 0; } body.exam-screen .user-test-info { color: rgba(255,255,255,0.8); } body.exam-screen .exam-status { display: flex; align-items: center; gap: 22px; flex-shrink: 0; font-weight: 600; white-space: nowrap; } body.exam-screen .exam-clock { display: flex; align-items: center; gap: 8px; } body.exam-screen .exam-time-label { font-weight: 500; opacity: 0.85; } body.exam-screen .exam-clock:has(.timer.untimed) .exam-time-label { display: none; } body.exam-screen .timer { background: transparent; color: #fff; padding: 2px 0; border-radius: 6px; font-family: 'Consolas', 'Courier New', monospace; font-size: 1.05rem; font-weight: 700; animation: none; } body.exam-screen .timer.warning { background: var(--exam-gold); color: var(--exam-navy); padding: 2px 10px; } body.exam-screen .timer.untimed { background: transparent; } body.exam-screen .question-counter { color: #fff; font-weight: 600; } /* ---------- Bar under the top bar: phone tabs, notices, Flag for review ---------- */ body.exam-screen .exam-subbar { position: fixed; top: var(--exam-top-h); left: 0; right: 0; height: var(--exam-sub-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; background: var(--exam-bar-tint); border-bottom: 1px solid var(--exam-line); z-index: 900; } body.exam-screen .exam-notice { flex: 1; min-width: 0; font-size: 0.88rem; color: var(--exam-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.exam-screen .exam-notice a { color: var(--exam-navy); font-weight: 600; } body.exam-screen .exam-tabs { display: none; } body.exam-screen .btn-flag { margin-left: auto; flex-shrink: 0; background: transparent; color: var(--exam-navy); border: 1px solid transparent; border-radius: 6px; padding: 6px 12px; font-weight: 600; font-size: 0.95rem; cursor: pointer; } body.exam-screen .btn-flag:hover { background: #fff; border-color: var(--exam-line); } body.exam-screen .btn-flag.flagged { background: var(--exam-gold); border-color: var(--exam-gold); color: var(--exam-navy); } /* ---------- Passage and question ---------- */ body.exam-screen .test-content { margin: 0; padding: 0; } body.exam-screen .question-content { position: fixed; top: calc(var(--exam-top-h) + var(--exam-sub-h)); bottom: var(--exam-foot-h); left: 0; right: 0; height: auto; display: flex; background: #fff; } body.exam-screen .passage-panel, body.exam-screen .question-panel { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fff; border: none; display: block; box-shadow: none; border-radius: 0; } body.exam-screen .passage-panel { width: 60%; padding: 28px 36px 40px; border-right: 4px solid var(--exam-navy); } body.exam-screen .question-panel { width: 40%; padding: 28px 32px 40px; } body.exam-screen .passage, body.exam-screen .question-section { height: auto; display: block; overflow: visible; background: transparent; border: none; padding: 0; } body.exam-screen #passageTitle { position: static; margin: 0 0 18px; padding: 0; border: none; background: transparent; text-align: center; font-size: 1.12rem; font-weight: 700; color: var(--exam-text); } body.exam-screen .passage-text, body.exam-screen #passageText { font-size: 1.05rem; line-height: 1.75; text-align: left; overflow: visible; padding: 0; max-width: 75ch; margin: 0 auto; } body.exam-screen #passageText p { margin: 0 0 1em; } body.exam-screen .question-text, body.exam-screen #questionText { font-size: 1.08rem; font-weight: 600; line-height: 1.55; color: var(--exam-text); margin: 0 0 22px; padding: 0; border: none; } /* Answer options: a radio-style circle with the letter, then the text. */ body.exam-screen .options, body.exam-screen #optionsContainer { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; } body.exam-screen .option { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; margin: 0; border: 1px solid var(--exam-line); border-radius: 8px; background: #fff; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } body.exam-screen .option:hover { background: #f5f8fb; border-color: #9fb1c8; transform: none; } body.exam-screen .option.selected { background: #eef3f9; border-color: var(--exam-navy); } body.exam-screen .option-label { flex: 0 0 28px; width: 28px; height: 28px; min-width: 0; border-radius: 50%; border: 2px solid #8a9bb2; color: var(--exam-navy); font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; margin-top: 1px; } body.exam-screen .option.selected .option-label { background: var(--exam-navy); border-color: var(--exam-navy); color: #fff; } body.exam-screen .option-text { flex: 1; line-height: 1.55; padding-top: 3px; } /* ---------- Bottom bar ---------- */ body.exam-screen .exam-footer { position: fixed; bottom: 0; left: 0; right: 0; height: var(--exam-foot-h); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px; background: var(--exam-navy); z-index: 900; } body.exam-screen .exam-footer-group { display: flex; gap: 10px; align-items: center; } body.exam-screen .exam-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff; font-weight: 600; font-size: 0.95rem; cursor: pointer; white-space: nowrap; } body.exam-screen .exam-btn:hover:not(:disabled) { background: var(--exam-navy-soft); } body.exam-screen .exam-btn:disabled { opacity: 0.4; cursor: not-allowed; } body.exam-screen .exam-btn-primary { background: var(--exam-gold); border-color: var(--exam-gold); color: var(--exam-navy); } body.exam-screen .exam-btn-primary:hover:not(:disabled) { background: #e5b04a; } body.exam-screen *:focus-visible { outline: 3px solid var(--exam-gold); outline-offset: 2px; } /* ---------- Review screen ---------- */ .exam-review .modal-header { background: var(--exam-navy, #14243d); color: #fff; } .exam-review .modal-title { font-weight: 700; } .exam-review-summary { font-size: 1rem; margin-bottom: 14px; color: #1a202c; } .exam-review-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .exam-review-filters button { border: 1px solid #cbd5e0; background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 0.9rem; font-weight: 600; color: #14243d; cursor: pointer; } .exam-review-filters button.active { background: #14243d; border-color: #14243d; color: #fff; } .exam-review-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.85rem; color: #4a5568; margin-bottom: 16px; } .exam-review-legend span { display: inline-flex; align-items: center; gap: 6px; } .exam-review-legend i.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 2px solid #b8c4d4; background: #fff; } .exam-review-legend i.swatch.answered { background: #14243d; border-color: #14243d; } .exam-review-legend i.swatch.current { border-color: #d69e2e; box-shadow: 0 0 0 2px #d69e2e; } .exam-review .question-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 10px; } .exam-review .question-btn { position: relative; width: 100%; height: 48px; border: 2px solid #b8c4d4; border-radius: 8px; background: #fff; color: #14243d; font-weight: 700; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transform: none; box-shadow: none; } .exam-review .question-btn:hover { border-color: #14243d; } .exam-review .question-btn.answered { background: #14243d; border-color: #14243d; color: #fff; } .exam-review .question-btn.current { box-shadow: 0 0 0 3px #d69e2e; } .exam-review .question-btn.flagged::after { content: "\f024"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: -8px; right: -6px; font-size: 0.7rem; color: #14243d; background: #d69e2e; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .exam-review .question-btn.review-hidden { display: none; } .exam-review-empty { color: #4a5568; text-align: center; padding: 18px 0 6px; margin: 0; } .exam-review-hint { color: #4a5568; font-size: 0.85rem; margin: 16px 0 0; } .exam-review .modal-footer { justify-content: space-between; } /* ---------- Tablets ---------- */ @media (max-width: 1024px) { body.exam-screen .passage-panel { width: 55%; padding: 22px 24px 32px; } body.exam-screen .question-panel { width: 45%; padding: 22px 22px 32px; } body.exam-screen .user-test-info { display: none !important; } } /* ---------- Phones: passage and question as tabs ---------- */ @media (max-width: 767.98px) { body.exam-screen { --exam-top-h: 52px; --exam-sub-h: 48px; --exam-foot-h: 60px; } body.exam-screen .exam-topbar { padding: 0 12px; gap: 10px; } body.exam-screen .exam-title { font-size: 0.95rem; gap: 8px; } body.exam-screen .exam-title .featured-badge, body.exam-screen .exam-time-label { display: none; } body.exam-screen .exam-status { gap: 12px; font-size: 0.92rem; } body.exam-screen .exam-subbar { padding: 0 8px 0 12px; } body.exam-screen .exam-notice { display: none; } body.exam-screen .exam-tabs { display: inline-flex; background: #fff; border: 1px solid var(--exam-line); border-radius: 8px; padding: 3px; } body.exam-screen .exam-tabs button { border: none; background: transparent; color: var(--exam-navy); font-weight: 600; font-size: 0.9rem; padding: 5px 14px; border-radius: 6px; } body.exam-screen .exam-tabs button.active { background: var(--exam-navy); color: #fff; } body.exam-screen .btn-flag { padding: 6px 10px; font-size: 0.88rem; } /* Icon only on phones; the words stay available to screen readers. */ body.exam-screen .btn-flag .flag-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.exam-screen .btn-flag i { margin-right: 0 !important; } body.exam-screen .question-content { display: block; } body.exam-screen .passage-panel, body.exam-screen .question-panel { position: absolute; inset: 0; width: 100%; border: none; padding: 18px 16px 28px; } /* The hidden tab keeps its place in the text: it is hidden, not removed. */ body.exam-screen .question-content.show-question .passage-panel, body.exam-screen .question-content:not(.show-question) .question-panel { visibility: hidden; } body.exam-screen .exam-footer { padding: 0 10px; gap: 6px; } body.exam-screen .exam-footer-group { gap: 6px; } body.exam-screen .exam-btn { padding: 0 12px; height: 40px; font-size: 0.9rem; } /* Submitting is done from the review screen on phones, to save space. */ body.exam-screen .exam-submit-btn { display: none; } } /* Demo-mode note shown in the bar under the top bar. */ body.exam-screen .exam-demo-note { display: inline; } /* Hidden until the page has loaded the questions (the page then shows it). */ body.exam-screen #testContent { display: none; } /* ---------- Pop-ups during a test (practice mode, submit, demo access, review) ---------- */ body.exam-screen :is(#timingModeModal, #submitModal, #guestAccessModal, #reviewModal) .modal-header { background: var(--exam-navy) !important; color: #fff !important; border-bottom: 3px solid var(--exam-gold); } body.exam-screen :is(#timingModeModal, #submitModal, #guestAccessModal, #reviewModal) :is(.btn-primary, .btn-danger, .btn-success) { --bs-btn-color: #fff; --bs-btn-bg: var(--exam-navy); --bs-btn-border-color: var(--exam-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--exam-navy-soft); --bs-btn-hover-border-color: var(--exam-navy-soft); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--exam-navy-soft); --bs-btn-active-border-color: var(--exam-navy-soft); --bs-btn-focus-shadow-rgb: 214, 158, 46; } body.exam-screen :is(#timingModeModal, #submitModal, #guestAccessModal, #reviewModal) :is(.btn-outline-primary, .btn-outline-secondary, .btn-secondary) { --bs-btn-color: var(--exam-navy); --bs-btn-bg: #fff; --bs-btn-border-color: var(--exam-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--exam-navy); --bs-btn-hover-border-color: var(--exam-navy); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--exam-navy); --bs-btn-active-border-color: var(--exam-navy); --bs-btn-focus-shadow-rgb: 214, 158, 46; } body.exam-screen #guestAccessModal .text-primary { color: var(--exam-navy) !important; } body.exam-screen #guestAccessModal .premium-option { border-color: var(--exam-navy) !important; background: #f5f8fb; } body.exam-screen #timingModeModal .fa-clock, body.exam-screen #timingModeModal .fa-infinity { color: inherit; } body.exam-screen #submitModal .alert-info { background: #eef3f9; border-color: var(--exam-line); color: var(--exam-text); }