/* ============================================================================ 05-excel-exercice.css RESULTS PAGE — ExcelLab exercises ONLY. To place in: /wp-content/themes/generatepress-child/css/exercice/05-excel-exercice.css Ported from the FR site (deploy/css/exercice/05-excel-exercice.css) — same mechanism, same charte colors (identical tokens on FR and EN — see charte-graphique.css). The "recommended courses" section from FR is not used on EN (no FoxLMS / course structure), so those rules are dropped. ⚠️ STRICT SEPARATION (same rule as FR): this CSS styles ONLY exercises. Quiz styling lives in css/quiz_ai/. Never mix the two. Activated by 05-excel-exercice.js: gets the .qai-ex-mode class. Model: a wrapper #excel-ai-exercice inserted at the top of .ays_quiz_results_page; accordion with a dedicated body .qai-acc-body, collapsed by default. The native review block (statement + ExcelLab grid + expected answer) is MOVED by the JS into the accordion body. ============================================================================ */ /* Hide AYS's native clutter: score message, average score, share buttons, progress bar and native "Restart" button (we render a nicer one). */ .qai-ex-mode .ays_score_message, .qai-ex-mode .ays_message, .qai-ex-mode .ays_average, .qai-ex-mode .ays-quiz-social-shares, .qai-ex-mode .ays-progress, .qai-ex-mode .ays_restart_button_p{ display:none !important; } /* Quiz FORM steps that AYS leaves visible in results mode (~5700px of blank space above our recap) + native review now emptied of its blocks → hide both. All our content lives in #excel-ai-exercice, inserted at the top of .ays_quiz_results_page. ⚠️ Exclude .ays_thank_you_fs: it's also a .step but it CONTAINS the results page — hiding it would make everything invisible. */ .qai-ex-mode .ays-quiz-form > .step:not(.ays_thank_you_fs), .qai-ex-mode .ays_quiz_results{ display:none !important; } /* Consistent reading width */ #excel-ai-exercice, .qai-ex-mode .qai-ex-secthead, .qai-ex-mode .qai-ex-after{ max-width:760px; margin-left:auto; margin-right:auto; font-family:'Inter',sans-serif; color:#36443e; } /* ---- "Exercise completed" hero ---- */ #excel-ai-exercice .qai-ex-hero{ text-align:center; background:#fff; border:1px solid #d4dcd7; border-radius:16px; padding:28px 24px; margin:0 0 18px; } #excel-ai-exercice .qai-ex-badge{ display:inline-block; font-size:13px;font-weight:600;letter-spacing:.02em; color:#107C41;background:#eaf4ee; border-radius:999px;padding:6px 14px;margin-bottom:14px; } #excel-ai-exercice .qai-ex-score{ font-size:18px;color:#36443e; } #excel-ai-exercice .qai-ex-num{ font-size:40px;font-weight:800;color:#0e1814;line-height:1; } #excel-ai-exercice .qai-ex-den{ font-size:24px;font-weight:700;color:#677571; } #excel-ai-exercice .qai-ex-bar{ height:12px;border-radius:999px;background:#eef1f0;overflow:hidden; margin:16px auto 14px;max-width:420px; } #excel-ai-exercice .qai-ex-bar > span{ display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,#ef4444 0%,#f59e0b 50%,#22c55e 100%); transition:width .9s cubic-bezier(.22,1,.36,1); } #excel-ai-exercice .qai-ex-msg{ font-size:22px;font-weight:600;line-height:1.45;padding-top:20px;color:#36443e;margin:0; } /* Validation message (pass): charte green, clearly visible */ #excel-ai-exercice .qai-ex-validated .qai-ex-msg{ color:#107C41;font-weight:700; } /* ---- "Detail" section title ---- */ .qai-ex-mode .qai-ex-secthead{ font-size:17px;font-weight:700;color:#0e1814;margin:4px 0 10px; } /* ---- Accordion: item, header, collapsed body ---- */ .qai-ex-mode .qai-acc-item{ border:1px solid #e3e8e6; border-left:4px solid #c9d2ce; border-radius:10px; margin:10px 0; overflow:hidden; background:#fff; } .qai-ex-mode .qai-acc-item.qai-correct{ border-left-color:#22c55e; } .qai-ex-mode .qai-acc-item.qai-wrong{ border-left-color:#ef4444; } /* Collapsed by default: only the header is visible; the body .qai-acc-body opens on click via the .qai-open class. */ .qai-ex-mode .qai-acc-head{ display:flex !important; } .qai-ex-mode .qai-acc-body{ display:none; } .qai-ex-mode .qai-acc-item.qai-open .qai-acc-body{ display:block; } /* Native elements of the moved block, always hidden (redundant or raw). */ .qai-ex-mode .qai-acc-item .ays-question-counter, .qai-ex-mode .qai-acc-item .ays_user_points_container, .qai-ex-mode .qai-acc-item .ays-quiz-question-validation-error, .qai-ex-mode .qai-acc-item .ays-quiz-additonal-box, .qai-ex-mode .qai-acc-item .ays-text-right-answer, .qai-ex-mode .qai-acc-item .ays-field, .qai-ex-mode .qai-acc-item .ays_check_answer, .qai-ex-mode .qai-acc-item .ays_buttons_div{ display:none !important; } /* Clickable header */ .qai-ex-mode .qai-acc-head{ align-items:center;gap:12px;width:100%; padding:14px 16px;background:#fafbfa;border:0; cursor:pointer;text-align:left;font:inherit;color:#2b3a35; transition:background .15s; } .qai-ex-mode .qai-acc-head:hover{ background:#f1f5f3; } .qai-ex-mode .qai-acc-icon{ flex:0 0 22px;width:22px;height:22px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;color:#fff;line-height:1; } .qai-ex-mode .qai-correct .qai-acc-icon{ background:#22c55e; } .qai-ex-mode .qai-wrong .qai-acc-icon{ background:#ef4444; } .qai-ex-mode .qai-acc-title{ flex:1 1 auto;font-size:14.5px;font-weight:600;line-height:1.35; } .qai-ex-mode .qai-acc-chevron{ flex:0 0 auto;color:#5b6b64;transition:transform .2s; font-size:22px;line-height:1;width:22px;text-align:center; } .qai-ex-mode .qai-open .qai-acc-chevron{ transform:rotate(180deg); } /* Accordion body: ExcelLab grid + detail */ .qai-ex-mode .qai-acc-body{ padding:0; } /* AYS hides div.step:not(:first-of-type) inside #ays_finish_quiz_*. Since we insert .qai-ex-detail (formula) BEFORE the step, the step becomes the 2nd div and AYS hides it. Force display:block + reset height. */ .qai-ex-mode .qai-acc-body > .step, .qai-ex-mode .qai-acc-body .ays-abs-fs{ display:block !important; height:auto !important; min-height:0 !important; } .qai-ex-mode .qai-acc-item .ays-abs-fs{ padding:2px 12px 8px !important; } .qai-ex-mode .qai-acc-item .ays_quiz_question{ font-size:14px;color:#36443e; } .qai-ex-mode .qai-acc-item .sheetskills-embed{ margin:6px auto !important; } /* The ExcelLab grid carries an inline 14px auto margin (set by excellab.php): tighten it here to bring the grid closer to the formula and reduce blanks. */ .qai-ex-mode .qai-acc-item .excellab-embed{ margin:4px auto !important; } /* Our "your formula" block, injected AT THE TOP of the body (above the grid) */ .qai-ex-mode .qai-ex-detail{ padding:12px 16px 8px;border-bottom:1px solid #eef1f0;margin-bottom:0; } .qai-ex-mode .qai-ex-userf, .qai-ex-mode .qai-ex-expected{ display:flex;align-items:center;gap:10px; font-size:19px;color:#677571; } .qai-ex-mode .qai-ex-userf code, .qai-ex-mode .qai-ex-expected code{ font-family:'Space Mono','Courier New',monospace;font-size:19px; color:#0e1814;background:#f4f7f5;border:1px solid #e3e8e6;border-radius:6px;padding:3px 8px; } /* "Expected answer" in PURPLE (same convention as FR, kept for consistency). */ .qai-ex-mode .qai-ex-expected code{ color:#561357;background:#f9eff8;border:2px solid #caa6ca; } .qai-ex-mode .qai-ex-userf.qai-ex-empty{ font-style:italic; } /* "Expected answer" injected BELOW the grid (end of body) — top border */ .qai-ex-mode .qai-ex-expected-box{ padding:10px 16px 12px;border-top:1px solid #eef1f0; } .qai-ex-mode .qai-ex-bodymsg{ margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#36443e; } /* ---- Footer: restart button ---- */ .qai-ex-mode .qai-ex-after{ margin-top:18px; } /* Centered via flex (immune to .ays-abs-fs.ays-end-page * { text-align:left !important }) */ .qai-ex-mode .qai-ex-actions{ display:flex !important; justify-content:center !important; margin:6px 0 4px; } .qai-ex-mode .qai-ex-restart{ font:inherit;font-size:15px;font-weight:600;color:#fff;background:#0e1814; border:0;border-radius:10px;padding:13px 26px;cursor:pointer;transition:background .2s ease; text-align:center !important; } .qai-ex-mode .qai-ex-restart:hover{ background:#0b5a2f; } @media (max-width:600px){ #excel-ai-exercice .qai-ex-num{ font-size:34px; } }