/* ============================================================ Sea Mastery — quiz.css Add to quiz.php and quiz_result.php , AFTER existing links: ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap'); /* ------------------------------------------------------------ CSS variables ------------------------------------------------------------ */ .quiz-page { --q-navy: #0a2540; --q-blue: #185FA5; --q-blue-light: #EBF3FD; --q-blue-mid: #B5D4F4; --q-green: #0F6E56; --q-green-light: #E1F5EE; --q-coral: #993C1D; --q-coral-light: #FAECE7; --q-border: rgba(0,0,0,0.09); --q-text: #1a1a1a; --q-text2: #555; --q-text3: #888; --q-surface: #ffffff; --q-radius: 10px; } /* ------------------------------------------------------------ Banner / nav ------------------------------------------------------------ */ .quiz-page .banner { background-color: var(--q-navy) !important; padding: 0 !important; } .quiz-page nav { background-color: var(--q-navy) !important; max-width: 100% !important; padding: 0 16px !important; } .quiz-page .nav-site-name { font-family: 'DM Serif Display', serif; font-size: 18px; color: #ffffff; margin-left: 14px; letter-spacing: 0.01em; flex: 1; } /* ------------------------------------------------------------ Main ------------------------------------------------------------ */ .quiz-page main { background-color: #F5F7FA !important; border: none !important; box-shadow: none !important; max-width: 680px !important; width: 94% !important; padding: 24px 16px 80px !important; margin: 24px auto !important; } /* ------------------------------------------------------------ Progress line — "Question X of Y" ------------------------------------------------------------ */ .quiz-page main > p:first-child { font-size: 12.5px; color: var(--q-text3); margin-bottom: 12px !important; display: flex; align-items: center; gap: 10px; } .q-progress-bar { flex: 1; height: 3px; background: #E0E4EC; border-radius: 99px; overflow: hidden; display: inline-block; } .q-progress-fill { height: 100%; width: var(--progress-width, 0%); background: var(--q-blue); border-radius: 99px; transition: width 0.4s ease; display: block; } /* ------------------------------------------------------------ Question card ------------------------------------------------------------ */ .q-card { background: var(--q-surface); border: 0.5px solid var(--q-border); border-radius: 12px; padding: 20px 22px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .q-question-text { font-family: 'DM Serif Display', serif !important; font-size: 18px !important; line-height: 1.55 !important; color: var(--q-text) !important; margin: 0 !important; border: none !important; background: none !important; box-shadow: none !important; } /* ------------------------------------------------------------ Answer options ------------------------------------------------------------ */ .q-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .q-option { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0.5px solid var(--q-border); border-radius: var(--q-radius); background: var(--q-surface); cursor: pointer; transition: border-color 0.12s, background 0.12s; -webkit-tap-highlight-color: transparent; user-select: none; margin: 0; width: 100%; box-sizing: border-box; } .q-option:hover { border-color: #0e7490; background: #ecfeff; } /* Hide native radio button */ .q-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .q-option-letter { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; border: 0.5px solid #ccc; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 500; color: var(--q-text2); transition: background 0.12s, border-color 0.12s, color 0.12s; } .q-option-text { font-size: 14px; color: var(--q-text); line-height: 1.45; } /* Selected state */ .q-option.is-selected { border-color: #0a2540; background: #dbeafe; } .q-option.is-selected .q-option-letter { background: #0a2540; border-color: #0a2540; color: #fff; } /* Wrong state */ .q-option.is-wrong { border-color: var(--q-coral) !important; background: var(--q-coral-light) !important; cursor: default; } .q-option.is-wrong .q-option-letter { background: var(--q-coral) !important; border-color: var(--q-coral) !important; color: #fff !important; } /* Correct state — must come after is-wrong */ .q-option.is-correct { border-color: var(--q-green) !important; background: var(--q-green-light) !important; cursor: default; } .q-option.is-correct .q-option-letter { background: var(--q-green) !important; border-color: var(--q-green) !important; color: #fff !important; } /* Locked — other options after submit */ .q-option.is-locked { opacity: 0.5; cursor: default; pointer-events: none; } /* ------------------------------------------------------------ Explanation box ------------------------------------------------------------ */ .q-explanation { display: none; background: #EBF3FD; border: 0.5px solid #B5D4F4; border-radius: var(--q-radius); padding: 14px 16px; font-size: 13.5px; line-height: 1.65; color: #1e3a5f; margin-bottom: 16px; } .q-explanation.is-visible { display: block; } /* ------------------------------------------------------------ Buttons — Submit and Next Question ------------------------------------------------------------ */ .quiz-page #submit_answer, .quiz-page button[name="submit_answer"], .quiz-page #next_question, .quiz-page button[name="next_question"] { background: var(--q-blue) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 11px 24px !important; font-family: 'Roboto', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; width: 100% !important; cursor: pointer; transition: background 0.15s; margin-top: 4px; display: block; } .quiz-page #submit_answer:hover, .quiz-page button[name="submit_answer"]:hover, .quiz-page #next_question:hover, .quiz-page button[name="next_question"]:hover { background: #0c447c !important; } .quiz-page #submit_answer:disabled, .quiz-page button[name="submit_answer"]:disabled { background: var(--q-blue-mid) !important; cursor: default; } /* ------------------------------------------------------------ Timer ------------------------------------------------------------ */ .quiz-page #timer { font-size: 12.5px; color: var(--q-text3); margin-top: 12px; text-align: right; } /* ------------------------------------------------------------ Footer ------------------------------------------------------------ */ .quiz-page footer { font-size: 12px; background-color: var(--q-navy) !important; } /* ------------------------------------------------------------ Results page ------------------------------------------------------------ */ .quiz-page main h1 { font-family: 'DM Serif Display', serif !important; font-size: 24px !important; color: var(--q-text) !important; font-weight: 400 !important; margin-bottom: 4px !important; box-shadow: none !important; border: none !important; background: none !important; } .q-results-card { background: var(--q-surface); border: 0.5px solid var(--q-border); border-radius: 12px; padding: 20px 22px; margin: 16px 0 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .q-results-card p { font-size: 14px !important; color: var(--q-text2) !important; margin: 0 0 12px !important; padding-bottom: 12px !important; border-bottom: 0.5px solid var(--q-border) !important; display: flex !important; justify-content: space-between !important; box-shadow: none !important; } .q-results-card p:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; } .q-results-card p.is-score { font-size: 17px !important; color: var(--q-blue) !important; font-weight: 500 !important; } .q-results-card p strong { color: var(--q-text); font-weight: 500; } .quiz-page main a.block { background: var(--q-blue) !important; color: #fff !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important; padding: 12px 24px !important; transition: background 0.15s !important; text-decoration: none; display: block; text-align: center; margin-top: 0 !important; } .quiz-page main a.block:hover { background: #0c447c !important; } /* ------------------------------------------------------------ Mobile — 600px and below ------------------------------------------------------------ */ @media (max-width: 600px) { .quiz-page main { width: 96% !important; padding: 16px 12px 100px !important; margin: 12px auto !important; } .q-question-text { font-size: 16px !important; } .q-option { padding: 13px 14px; } .q-submit-wrap { position: fixed; bottom: 0; left: 0; right: 0; background: var(--q-surface); border-top: 0.5px solid var(--q-border); padding: 12px 16px; z-index: 100; box-shadow: 0 -2px 8px rgba(0,0,0,0.07); } .quiz-page #submit_answer, .quiz-page button[name="submit_answer"], .quiz-page #next_question, .quiz-page button[name="next_question"] { margin-top: 0 !important; } .quiz-page #timer { text-align: left; } }