/* ============================================================ Tech Talent Global - Technical Assessment Platform Single source of truth for all visual styling. Do not add inline styles to any HTML file. ============================================================ */ /* ============================================================ 1. GOOGLE FONTS IMPORT ============================================================ */ /* Google Fonts moved to tag in HTML for better caching and CORS */ /* ============================================================ 2. BRAND CUSTOM PROPERTIES ============================================================ */ :root { --cta-blue: #0050CC; --cta-blue-hover: #0058D4; --cta-blue-light: rgba(10, 110, 255, 0.08); --cta-blue-subtle: #EBF3FB; --charcoal-dark: #2B2B2B; --charcoal-mid: #4A4A4A; --charcoal-light: #555555; --border-grey: #E0E0E0; --border-grey-dark: #C4C4C4; --bg-light: #F5F7FA; --bg-white: #FFFFFF; --success-green: #007A4D; --success-green-light: rgba(0, 168, 107, 0.1); --warning-orange: #B86800; --warning-orange-light: rgba(255, 140, 0, 0.1); --danger-red: #C62828; --danger-red-light: rgba(229, 57, 53, 0.1); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --transition: all 0.2s ease; --transition-slow: all 0.3s ease; } /* ============================================================ 3. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Montserrat', Arial, sans-serif; background-color: var(--bg-light); color: var(--charcoal-dark); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { line-height: 1.7; } button, input, select, textarea { font-family: 'Montserrat', Arial, sans-serif; } img { display: block; max-width: 100%; } /* ============================================================ 4. NAVBAR ============================================================ */ .navbar { background-color: var(--charcoal-dark); border-radius: var(--radius-md); margin: 1rem 2rem 2.5rem 2rem; padding: 0.75rem 1.5rem; top: 1rem; z-index: 1000; box-shadow: var(--shadow-md); display: inline-flex; align-items: center; gap: 1rem; } .navbar-logo { height: 80px; display: block; } .navbar-badge { font-size: 0.6875rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.07em; } /* ============================================================ 5. STEP WRAPPER & TRANSITIONS ============================================================ */ .step { display: none; opacity: 0; transform: translateY(20px); max-width: 860px; margin: 2rem auto; padding: 0 1.5rem 4rem; } .step.active { display: block; opacity: 1; transform: translateY(0); animation: step-fade-in 0.3s ease both; } @keyframes step-fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 6. STEP PROGRESS INDICATOR ============================================================ */ .step-indicator { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; } .step-dot { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; transition: var(--transition); flex-shrink: 0; } .step-dot.future { background-color: var(--border-grey); color: var(--charcoal-light); } .step-dot.current { background-color: var(--cta-blue); color: var(--bg-white); box-shadow: 0 0 0 4px rgba(10, 110, 255, 0.2); } .step-dot.complete { background-color: var(--charcoal-dark); color: var(--bg-white); } .step-line { height: 2px; width: 24px; background-color: var(--border-grey); flex-shrink: 0; transition: var(--transition); } .step-line.complete { background-color: var(--cta-blue); } /* ============================================================ 7. TYPOGRAPHY ============================================================ */ .page-title { font-size: 2rem; font-weight: 800; color: var(--charcoal-dark); line-height: 1.2; margin-bottom: 0.5rem; } .page-subtitle { font-size: 1.125rem; color: var(--charcoal-light); font-weight: 400; margin-bottom: 2rem; line-height: 1.7; } .section-heading { font-size: 1.25rem; font-weight: 700; color: var(--charcoal-dark); margin-bottom: 1rem; } .label-text { font-size: 0.875rem; font-weight: 600; color: var(--charcoal-mid); margin-bottom: 0.375rem; display: block; } .section-eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cta-blue); margin-bottom: 0.375rem; display: block; } /* ============================================================ 7b. TERMS BOX (Step 1) ============================================================ */ .terms-box { background: #1E1E1E; border: 1px solid #333; border-radius: 10px; padding: 24px 28px; margin: 24px 0; text-align: left; } .terms-box-heading { margin: 0 0 16px; font-size: 1rem; color: #FFFFFF; } .terms-box-content { max-height: 200px; overflow-y: auto; padding-right: 12px; margin-bottom: 16px; font-size: 0.85rem; line-height: 1.7; color: #CCCCCC; } .terms-box-intro { margin: 0 0 12px; } .terms-box-list { margin: 0; padding-left: 20px; } .terms-box-list li { margin-bottom: 8px; } .terms-box-link { color: var(--cta-blue); } .terms-box-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.9rem; color: #FFFFFF; } .terms-box-checkbox { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--cta-blue); } .terms-box-error { margin-top: 8px; } /* ============================================================ 8. CARDS ============================================================ */ .card { background-color: var(--bg-white); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm); border: 2px solid var(--border-grey); transition: var(--transition); } .card:hover { box-shadow: var(--shadow-md); border-color: var(--border-grey-dark); } .card.selected { border: 2px solid var(--cta-blue); box-shadow: 0 0 0 4px rgba(10, 110, 255, 0.12); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } /* Landing screen - 3 info cards */ .info-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; } .info-card { background-color: var(--bg-white); border-radius: var(--radius-md); padding: 1.5rem 1rem; box-shadow: var(--shadow-sm); border: 1px solid var(--border-grey); text-align: center; transition: var(--transition); } .info-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-grey-dark); } .info-card-icon { font-size: 2rem; margin-bottom: 0.75rem; display: block; } .info-card-title { font-size: 1rem; font-weight: 700; color: var(--charcoal-dark); margin-bottom: 0.375rem; } .info-card-text { font-size: 0.875rem; color: var(--charcoal-light); line-height: 1.6; } /* ============================================================ 9. SENIORITY CARDS (Step 4) ============================================================ */ .seniority-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .seniority-card { background-color: var(--bg-white); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); border: 2px solid var(--border-grey); cursor: pointer; user-select: none; transition: var(--transition); } .seniority-card:hover { border-color: var(--cta-blue); background-color: var(--cta-blue-light); } .seniority-card.selected { border-color: var(--cta-blue); background-color: var(--cta-blue-light); box-shadow: 0 0 0 4px rgba(10, 110, 255, 0.12); } .seniority-card:focus-visible { outline: 2px solid var(--cta-blue); outline-offset: 2px; } .seniority-title { font-size: 1rem; font-weight: 700; color: var(--charcoal-dark); margin-bottom: 0.25rem; } .seniority-desc { font-size: 0.8125rem; color: var(--charcoal-light); line-height: 1.5; } /* ============================================================ 10. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; border-radius: var(--radius-sm); font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; border: none; transition: var(--transition); line-height: 1; white-space: nowrap; text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--cta-blue); outline-offset: 2px; } .btn-primary { background-color: var(--cta-blue); color: var(--bg-white); } .btn-primary:hover { background-color: var(--cta-blue-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background-color: transparent; color: var(--cta-blue); border: 2px solid var(--cta-blue); } .btn-secondary:hover { background-color: var(--cta-blue-light); } .btn-danger { background-color: var(--danger-red); color: var(--bg-white); } .btn-danger:hover { background-color: #C62828; } .btn-large { padding: 1rem 2.5rem; font-size: 1.125rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } .btn-group { display: flex; gap: 1rem; margin-top: 2rem; } /* ============================================================ 11. FORM ELEMENTS ============================================================ */ .form-group { margin-bottom: 1.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-input { width: 100%; padding: 0.75rem 1rem; min-height: 44px; border: 2px solid var(--border-grey); border-radius: var(--radius-sm); font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; color: var(--charcoal-dark); background-color: var(--bg-white); transition: border-color 0.2s ease; outline: none; appearance: none; } .form-input:focus { border-color: var(--cta-blue); } .form-input:focus-visible { outline: 2px solid var(--cta-blue); outline-offset: 2px; } .form-input.error { border-color: var(--danger-red); } /* Select inherits form-input but adds chevron */ .form-select { width: 100%; padding: 0.75rem 2.5rem 0.75rem 1rem; border: 2px solid var(--border-grey); border-radius: var(--radius-sm); font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; color: var(--charcoal-dark); background-color: var(--bg-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236B6B6B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; cursor: pointer; transition: border-color 0.2s ease; outline: none; appearance: none; -webkit-appearance: none; } .form-select:focus { border-color: var(--cta-blue); } .form-select:focus-visible { outline: 2px solid var(--cta-blue); outline-offset: 2px; } .form-select.error { border-color: var(--danger-red); } .form-error { font-size: 0.8125rem; color: var(--danger-red); margin-top: 0.375rem; font-weight: 500; display: none; } .form-error.visible { display: block; } .form-hint { font-size: 0.8125rem; color: var(--charcoal-light); margin-top: 0.375rem; line-height: 1.5; } .radio-group { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.25rem; } .radio-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9375rem; color: var(--charcoal-mid); font-weight: 500; user-select: none; } .radio-option input[type="radio"] { accent-color: var(--cta-blue); width: 18px; height: 18px; cursor: pointer; } .radio-option:focus-within { outline: 2px solid var(--cta-blue); outline-offset: 2px; border-radius: var(--radius-sm); } /* ============================================================ 12. ROLE SEARCH / SELECT (Step 3) ============================================================ */ .role-search-wrapper { position: relative; margin-bottom: 1rem; } .role-search-input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem; border: 2px solid var(--border-grey); border-radius: var(--radius-sm); font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; color: var(--charcoal-dark); background-color: var(--bg-white); transition: border-color 0.2s ease; outline: none; appearance: none; } .role-search-input:focus { border-color: var(--cta-blue); } .role-search-input:focus-visible { outline: 2px solid var(--cta-blue); outline-offset: 2px; } .role-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--charcoal-light); pointer-events: none; display: flex; align-items: center; } .role-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background-color: var(--bg-white); border: 2px solid var(--cta-blue); border-radius: var(--radius-sm); max-height: 320px; overflow-y: auto; z-index: 100; box-shadow: var(--shadow-lg); display: none; } .role-dropdown.open { display: block; } .role-group-header { padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 700; color: var(--charcoal-light); text-transform: uppercase; letter-spacing: 0.08em; background-color: var(--bg-light); position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--border-grey); } .role-option { padding: 0.75rem 1rem; font-size: 0.9375rem; color: var(--charcoal-dark); cursor: pointer; transition: background-color 0.15s ease; border-bottom: 1px solid var(--border-grey); } .role-option:last-child { border-bottom: none; } .role-option:hover { background-color: var(--cta-blue-subtle); } .role-option.selected { background-color: var(--cta-blue-subtle); color: var(--cta-blue); font-weight: 600; } .role-option:focus-visible { outline: 2px solid var(--cta-blue); outline-offset: -2px; } .role-selected-display { padding: 0.75rem 1rem; background-color: var(--cta-blue-subtle); border-radius: var(--radius-sm); border: 1px solid var(--cta-blue); font-size: 0.9375rem; color: var(--cta-blue); font-weight: 600; display: none; margin-top: 0.75rem; } .role-selected-display.visible { display: block; } /* ============================================================ 13. DISCLAIMER BOX ============================================================ */ .disclaimer-box { background-color: var(--cta-blue-subtle); border-left: 4px solid var(--cta-blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.25rem 1.5rem; margin: 2rem 0; font-size: 0.9375rem; color: var(--charcoal-mid); line-height: 1.7; } /* ============================================================ 14. BRIEFING SCREEN (Step 5) ============================================================ */ .briefing-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .briefing-stat { background-color: var(--bg-white); border-radius: var(--radius-md); padding: 1.25rem; box-shadow: var(--shadow-sm); border: 1px solid var(--border-grey); text-align: center; } .briefing-stat-label { font-size: 0.75rem; font-weight: 700; color: var(--charcoal-light); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.375rem; display: block; } .briefing-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--cta-blue); line-height: 1.2; display: block; } .rules-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; } .rules-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; color: var(--charcoal-mid); line-height: 1.6; padding: 0.75rem; background-color: var(--bg-light); border-radius: var(--radius-sm); } .rules-list li::before { content: "→"; color: var(--cta-blue); font-weight: 700; flex-shrink: 0; margin-top: 0.05em; } /* ============================================================ 15. ACTIVE TEST - STICKY TOP BAR (Step 6) ============================================================ */ .test-topbar { position: sticky; top: 0; background-color: var(--charcoal-dark); padding: 0.75rem 2rem; display: flex; align-items: center; justify-content: space-between; z-index: 500; box-shadow: var(--shadow-md); gap: 1rem; } .test-topbar-role { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); font-weight: 500; } .test-topbar-seniority { font-size: 0.875rem; color: var(--bg-white); font-weight: 700; } .test-topbar-meta { display: flex; flex-direction: column; gap: 0.125rem; } .test-timer { font-size: 1.25rem; font-weight: 800; color: var(--bg-white); font-variant-numeric: tabular-nums; transition: color 0.3s ease; letter-spacing: 0.02em; } .test-timer.warning { color: var(--danger-red); animation: timer-pulse 1s ease-in-out infinite; position: relative; } .test-timer.warning::after { content: " \26A0 LOW TIME"; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; vertical-align: middle; } @keyframes timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } .test-progress-text { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); } /* ============================================================ 16. PROGRESS BAR ============================================================ */ .progress-bar-track { height: 6px; background-color: var(--border-grey); border-radius: 3px; margin: 1.5rem 0; overflow: hidden; } .progress-bar-fill { height: 100%; background-color: var(--cta-blue); border-radius: 3px; transition: width 0.3s ease; } /* ============================================================ 17. QUESTION DISPLAY ============================================================ */ .question-container { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem; } .question-meta { display: flex; gap: 0.625rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; } .question-number { font-size: 0.875rem; font-weight: 700; color: var(--charcoal-light); text-transform: uppercase; letter-spacing: 0.06em; } .question-topic-tag { font-size: 0.75rem; font-weight: 600; color: var(--cta-blue); background-color: var(--cta-blue-subtle); padding: 0.25rem 0.75rem; border-radius: 100px; } .question-points-tag { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 100px; } .question-points-tag.points-1 { color: var(--charcoal-light); background-color: var(--bg-light); } .question-points-tag.points-2 { color: var(--warning-orange); background-color: var(--warning-orange-light); } .question-points-tag.points-3 { color: var(--cta-blue); background-color: var(--cta-blue-subtle); } .question-type-tag { font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.04em; } .question-type-tag.type-mcq { color: var(--success-green); background-color: var(--success-green-light); } .question-type-tag.type-short { color: var(--warning-orange); background-color: var(--warning-orange-light); } .question-type-tag.type-code { color: #6A2FC7; background-color: rgba(123, 63, 219, 0.1); } .question-text { font-size: 1.125rem; font-weight: 600; color: var(--charcoal-dark); line-height: 1.6; margin-bottom: 1.5rem; } .question-instruction { font-size: 0.875rem; color: var(--charcoal-light); font-style: italic; margin-bottom: 1rem; line-height: 1.6; } /* ============================================================ 18. MCQ OPTIONS ============================================================ */ .mcq-options { display: flex; flex-direction: column; gap: 0.75rem; } .mcq-option { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border: 2px solid var(--border-grey); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); background-color: var(--bg-white); user-select: none; } .mcq-option:hover { border-color: var(--cta-blue); background-color: var(--cta-blue-light); } .mcq-option.selected { border-color: var(--cta-blue); background-color: var(--cta-blue-subtle); position: relative; } .mcq-option.selected::before { content: "\2713"; position: absolute; top: 0.5rem; right: 0.75rem; font-size: 1rem; font-weight: 700; color: var(--cta-blue); } .mcq-option:focus-visible { outline: 2px solid var(--cta-blue); outline-offset: 2px; } .mcq-option-letter { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background-color: var(--border-grey); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; color: var(--charcoal-mid); transition: var(--transition); } .mcq-option.selected .mcq-option-letter { background-color: var(--cta-blue); color: var(--bg-white); } .mcq-option-text { font-size: 0.9375rem; color: var(--charcoal-dark); line-height: 1.5; padding-top: 0.1875rem; } /* ============================================================ 19. SHORT ANSWER TEXTAREA ============================================================ */ .short-answer-input { width: 100%; min-height: 160px; padding: 1rem; border: 2px solid var(--border-grey); border-radius: var(--radius-sm); font-family: 'Montserrat', Arial, sans-serif; font-size: 0.9375rem; color: var(--charcoal-dark); line-height: 1.7; resize: vertical; transition: border-color 0.2s ease; outline: none; background-color: var(--bg-white); } .short-answer-input:focus { border-color: var(--cta-blue); } .short-answer-input:focus-visible { outline: 2px solid var(--cta-blue); outline-offset: 2px; } /* ============================================================ 20. CODE ANSWER TEXTAREA ============================================================ */ .code-language-label { font-size: 0.75rem; font-weight: 700; color: var(--charcoal-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; display: block; } .code-answer-input { width: 100%; min-height: 240px; padding: 1.25rem; border: 2px solid var(--border-grey); border-radius: var(--radius-sm); font-family: 'Courier New', Courier, monospace; font-size: 0.9rem; line-height: 1.7; resize: vertical; background-color: #1E1E1E; color: #D4D4D4; tab-size: 2; outline: none; transition: border-color 0.2s ease; -webkit-font-smoothing: auto; } .code-answer-input:focus { border-color: var(--cta-blue); } .code-answer-input:focus-visible { outline: 2px solid var(--cta-blue); outline-offset: 2px; } /* ============================================================ 21. QUESTION NAVIGATION ============================================================ */ .question-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-grey); } .question-nav-dots { display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: center; } .question-nav-dot { width: 44px; height: 44px; border-radius: 50%; background-color: transparent; cursor: pointer; transition: var(--transition); border: none; padding: 0; flex-shrink: 0; position: relative; background: radial-gradient(circle, var(--border-grey) 5px, transparent 5px); } .question-nav-dot:hover { background: radial-gradient(circle, var(--border-grey-dark) 5px, transparent 5px); transform: scale(1.2); } .question-nav-dot.answered { background: radial-gradient(circle, var(--cta-blue) 5px, transparent 5px); } .question-nav-dot.current { background: radial-gradient(circle, var(--charcoal-dark) 6px, transparent 6px); transform: scale(1.3); } .question-nav-dot:focus-visible { outline: 2px solid var(--cta-blue); outline-offset: 2px; } /* ============================================================ 22. TOAST NOTIFICATIONS ============================================================ */ .toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background-color: var(--charcoal-dark); color: var(--bg-white); padding: 0.875rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; z-index: 9999; max-width: 360px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; line-height: 1.5; border-left: 4px solid transparent; } .toast.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .toast.warning { border-left-color: var(--warning-orange); } .toast.danger { border-left-color: var(--danger-red); } .toast.success { border-left-color: var(--success-green); } /* ============================================================ 23. ANTI-CHEAT WARNING BANNER ============================================================ */ .cheat-warning { background-color: var(--warning-orange-light); border: 1px solid var(--warning-orange); border-radius: var(--radius-sm); padding: 0.875rem 1.25rem; font-size: 0.875rem; color: var(--charcoal-dark); display: none; margin-bottom: 1rem; align-items: center; gap: 0.75rem; line-height: 1.5; font-weight: 500; } .cheat-warning.visible { display: flex; } .cheat-warning.serious { background-color: var(--danger-red-light); border-color: var(--danger-red); } /* ============================================================ 24. CONFIRMATION SCREEN (Step 7) ============================================================ */ .confirmation-icon { width: 72px; height: 72px; background-color: var(--success-green-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem; flex-shrink: 0; } .confirmation-details { background-color: var(--bg-white); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--border-grey); margin: 1.5rem 0; } .confirmation-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border-grey); font-size: 0.9375rem; gap: 1rem; } .confirmation-detail-row:last-child { border-bottom: none; } .confirmation-detail-label { color: var(--charcoal-light); font-weight: 500; } .confirmation-detail-value { color: var(--charcoal-dark); font-weight: 700; text-align: right; } .next-steps-box { background-color: var(--cta-blue-subtle); border-left: 4px solid var(--cta-blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.25rem 1.5rem; margin-top: 1.5rem; font-size: 0.9375rem; color: var(--charcoal-mid); line-height: 1.7; } /* BUG-021: Score display on confirmation screen */ .confirm-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8125rem; font-weight: 700; color: var(--bg-white); } .confirm-badge-strong { background-color: var(--success-green); } .confirm-badge-meets { background-color: var(--warning-orange); } .confirm-badge-below { background-color: var(--danger-red); } .confirm-badge-review { background-color: var(--charcoal-light); } .confirm-topic-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .confirm-topic-table th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--border-grey); font-weight: 700; color: var(--charcoal-mid); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } .confirm-topic-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-grey); } .confirm-topic-name { color: var(--charcoal-dark); font-weight: 500; } .confirm-topic-count { text-align: center; color: var(--charcoal-mid); } .confirm-topic-pct { text-align: center; font-weight: 700; color: var(--charcoal-dark); } /* ============================================================ 25. SESSION RECOVERY BANNER ============================================================ */ .recovery-banner { background-color: var(--warning-orange-light); border: 1px solid var(--warning-orange); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin: 1rem 2rem; display: none; align-items: center; gap: 1rem; justify-content: space-between; } .recovery-banner.visible { display: flex; } .recovery-banner-text { font-size: 0.9375rem; color: var(--charcoal-dark); font-weight: 500; line-height: 1.5; } .recovery-banner-actions { display: flex; gap: 0.75rem; flex-shrink: 0; } /* ============================================================ 26. TOAST CONTAINER (multiple toasts stacked) ============================================================ */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.625rem; max-width: 360px; pointer-events: none; } .toast-container .toast { position: relative; bottom: auto; right: auto; pointer-events: auto; } /* ============================================================ 27. UTILITY CLASSES ============================================================ */ .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .mt-xs { margin-top: 0.5rem; } .mt-sm { margin-top: 1rem; } .mt-md { margin-top: 1.5rem; } .mt-lg { margin-top: 2rem; } .mb-xs { margin-bottom: 0.5rem; } .mb-sm { margin-bottom: 1rem; } .mb-md { margin-bottom: 1.5rem; } .mb-lg { margin-bottom: 2rem; } .hidden { display: none !important; } .skip-to-content { position: absolute; top: -100px; left: 0; z-index: 10000; background: var(--cta-blue); color: var(--bg-white); padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 700; text-decoration: none; border-radius: 0 0 var(--radius-sm) 0; } .skip-to-content:focus { top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================ 28. RESPONSIVE - TABLET (max-width: 768px) ============================================================ */ @media (max-width: 1023px) { .navbar { margin: 0.5rem; border-radius: var(--radius-sm); padding: 0.75rem 1.25rem; } .step { padding: 0 1rem 3rem; } .info-card-grid { grid-template-columns: 1fr; } .seniority-grid { grid-template-columns: 1fr; } .briefing-summary { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .btn-group { flex-direction: column; } .btn-group .btn { width: 100%; justify-content: center; } .test-topbar { padding: 0.5rem 1rem; flex-wrap: wrap; gap: 0.5rem; } .question-container { padding: 1rem; } .page-title { font-size: 1.5rem; } .toast { right: 1rem; left: 1rem; max-width: none; } .toast-container { right: 1rem; left: 1rem; max-width: none; } .step-indicator { display: none; } .recovery-banner { flex-direction: column; align-items: flex-start; margin: 0.75rem 1rem; } .recovery-banner-actions { width: 100%; } .recovery-banner-actions .btn { flex: 1; justify-content: center; } } /* ============================================================ 30. CODE EXECUTION UI ============================================================ */ .code-editor-block { border: 2px solid var(--border-grey); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.2s ease; margin-bottom: 1rem; } .code-editor-block:focus-within { border-color: var(--cta-blue); } .code-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background-color: var(--charcoal-mid); gap: 1rem; } .code-toolbar-lang { font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Courier New', Courier, monospace; } .code-run-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.875rem; min-height: 44px; min-width: 44px; background-color: var(--success-green); color: var(--bg-white); border: none; border-radius: var(--radius-sm); font-family: 'Montserrat', Arial, sans-serif; font-size: 0.8125rem; font-weight: 700; cursor: pointer; transition: var(--transition); line-height: 1; } .code-run-btn:hover { background-color: #008C5A; } .code-run-btn:focus-visible { outline: 2px solid var(--bg-white); outline-offset: 2px; } .code-run-btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .code-editor-block .code-answer-input { border: none; border-radius: 0; display: block; } .test-cases-panel { margin-top: 1rem; border: 1px solid var(--border-grey); border-radius: var(--radius-sm); overflow: hidden; background-color: var(--bg-white); } .test-cases-header { padding: 0.625rem 1rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-grey); font-size: 0.8125rem; font-weight: 700; color: var(--charcoal-mid); text-transform: uppercase; letter-spacing: 0.06em; } .test-case-item { padding: 0.875rem 1rem; border-bottom: 1px solid var(--border-grey); } .test-case-item:last-child { border-bottom: none; } .test-case-desc { font-size: 0.875rem; font-weight: 600; color: var(--charcoal-dark); margin-bottom: 0.25rem; } .test-case-input-display { font-family: 'Courier New', Courier, monospace; font-size: 0.8125rem; color: var(--charcoal-light); background-color: var(--bg-light); padding: 0.375rem 0.75rem; border-radius: var(--radius-sm); margin-top: 0.25rem; white-space: pre-wrap; word-break: break-all; border: 1px solid var(--border-grey); } .test-case-result { margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--charcoal-light); } .test-case-result.pass { color: var(--success-green); } .test-case-result.fail { color: var(--danger-red); } .test-case-output { font-family: 'Courier New', Courier, monospace; font-size: 0.8125rem; background-color: var(--bg-light); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); margin-top: 0.375rem; white-space: pre-wrap; word-break: break-all; border: 1px solid var(--border-grey); color: var(--charcoal-dark); } .test-case-output.stderr { color: var(--danger-red); background-color: var(--danger-red-light); border-color: var(--danger-red); } /* ============================================================ 31. SUBMISSION OVERLAY ============================================================ */ .submission-overlay { position: fixed; inset: 0; background-color: rgba(43, 43, 43, 0.88); z-index: 9998; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; color: var(--bg-white); padding: 2rem; } .submission-overlay.visible { display: flex; } .submission-spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: var(--bg-white); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } .submission-overlay-text { font-size: 1.125rem; font-weight: 700; text-align: center; line-height: 1.5; } .submission-overlay-sub { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.65); text-align: center; line-height: 1.6; } /* ============================================================ 32. CONFIRM SUBMIT MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; background-color: rgba(43, 43, 43, 0.72); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 1.5rem; } .modal-overlay.visible { display: flex; } .modal-box { background-color: var(--bg-white); border-radius: var(--radius-lg); padding: 2rem; max-width: 440px; width: 100%; box-shadow: var(--shadow-lg); } .modal-title { font-size: 1.25rem; font-weight: 800; color: var(--charcoal-dark); margin-bottom: 0.75rem; } .modal-text { font-size: 0.9375rem; color: var(--charcoal-mid); line-height: 1.7; margin-bottom: 1.5rem; } .modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; } /* ============================================================ 33. EMPTY QUESTION BANK NOTICE ============================================================ */ .empty-bank-notice { text-align: center; padding: 3rem 2rem; background-color: var(--bg-white); border-radius: var(--radius-md); border: 1px solid var(--border-grey); box-shadow: var(--shadow-sm); } .empty-bank-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; } .empty-bank-title { font-size: 1.25rem; font-weight: 700; color: var(--charcoal-dark); margin-bottom: 0.5rem; } .empty-bank-text { font-size: 0.9375rem; color: var(--charcoal-light); line-height: 1.7; } /* ============================================================ 29. RESPONSIVE - MOBILE (max-width: 480px) ============================================================ */ @media (max-width: 480px) { .test-timer { font-size: 1rem; } .question-text { font-size: 1rem; } .mcq-option { padding: 0.75rem 1rem; } .page-title { font-size: 1.25rem; } .page-subtitle { font-size: 1rem; } .briefing-stat-value { font-size: 1.25rem; } .btn-large { padding: 0.875rem 1.75rem; font-size: 1rem; } .question-meta { gap: 0.375rem; } .confirmation-detail-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .confirmation-detail-value { text-align: left; } } /* ============================================================ MOBILE BLOCK SCREEN ============================================================ */ #mobileBlockScreen { display: none; } html.device-blocked body > *:not(#mobileBlockScreen) { display: none !important; } html.device-blocked #mobileBlockScreen { display: flex !important; } .mobile-block-screen { position: fixed; inset: 0; background-color: #2B2B2B; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; z-index: 99999; gap: 1.5rem; } .mobile-block-logo { height: 48px; width: auto; margin-bottom: 0.5rem; } .mobile-block-heading { color: #ffffff; font-size: 1.75rem; font-weight: 700; font-family: 'Montserrat', sans-serif; margin: 0; } .mobile-block-message { color: #cccccc; font-size: 1.0625rem; font-family: 'Montserrat', sans-serif; line-height: 1.7; max-width: 480px; margin: 0; } .mobile-block-note { color: #B0B0B0; font-size: 0.8125rem; font-family: 'Montserrat', sans-serif; margin: 0; } .mobile-block-note a { color: #7ab3ff; text-decoration: none; } /* ============================================================ PREFERS REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .test-timer.warning { animation: none; } .submission-spinner { animation: none; } .btn-primary:hover { transform: none; } .question-nav-dot:hover { transform: none; } .question-nav-dot.current { transform: none; } .step.active { animation: none; opacity: 1; transform: none; } }