/* ========================================================= PYTHON QUIZ — CHAPTER 1 STORY 4 ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: #222; background: linear-gradient( 135deg, #fffdf8 0%, #fff8eb 55%, #f7efe0 100% ); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } /* ========================================================= PAGE ========================================================= */ .quiz-page { width: 100%; min-height: 100vh; padding-bottom: 22px; } /* ========================================================= HEADER ========================================================= */ .quiz-header { max-width: 1450px; margin: 0 auto; padding: 20px 25px 10px; display: grid; grid-template-columns: 90px 1fr 210px; align-items: center; gap: 18px; } .python-badge { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border: 3px solid #e0a83c; border-radius: 50%; background: #fff; color: #d28c19; font-size: 24px; font-weight: 800; } .header-titles { text-align: center; } .header-titles h1 { margin: 0; color: #b71919; font-size: clamp( 28px, 3vw, 43px ); line-height: 1.15; } .header-titles h2 { margin: 7px 0 0; color: #1858a6; font-size: clamp( 24px, 2.4vw, 36px ); } .header-score-card { padding: 11px 12px; border: 1px solid #dfbb76; border-radius: 13px; background: #fffdf8; text-align: center; } .level-label { color: #15529a; font-size: 14px; font-weight: 700; } .stars { margin: 4px 0; } .star { color: #c3b9a9; font-size: 31px; transition: transform 0.2s ease, color 0.2s ease; } .star.active { color: #f4ae08; } .header-score { font-size: 13px; } /* ========================================================= INTRO ========================================================= */ .intro-card { max-width: 850px; margin: 3px auto 15px; padding: 11px 18px; display: flex; align-items: center; justify-content: center; gap: 15px; border: 1px solid #e3b45e; border-radius: 11px; background: linear-gradient( 90deg, #fff8e8, #fffdf9 ); text-align: center; } .intro-card p { margin: 2px 0; font-size: 15px; } .intro-card .english { color: #12539b; } .intro-icon { font-size: 27px; } /* ========================================================= PROGRESS ========================================================= */ .progress-section { max-width: 1050px; margin: 0 auto 14px; } .progress-labels { margin-bottom: 6px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: #595148; } .progress-track { height: 11px; overflow: hidden; border-radius: 20px; background: #e8dfd1; } .progress-bar { width: 10%; height: 100%; border-radius: 20px; background: linear-gradient( 90deg, #1f9d80, #45b897 ); transition: width 0.35s ease; } /* ========================================================= MAIN GRID ========================================================= */ .quiz-layout { width: calc(100% - 32px); max-width: 1450px; margin: auto; display: grid; grid-template-columns: minmax(320px, 0.8fr) minmax(600px, 1.5fr); gap: 15px; } /* ========================================================= PANELS ========================================================= */ .learning-panel, .question-panel { overflow: hidden; border: 1px solid #e2d2b9; border-radius: 12px; background: rgba( 255, 255, 255, 0.72 ); } .panel-heading { min-height: 42px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; color: #fff; background: linear-gradient( 90deg, #188e79, #20a383 ); font-weight: 700; } /* ========================================================= LEFT PYTHON VISUAL ========================================================= */ .python-display { min-height: 590px; padding: 28px; display: flex; flex-direction: column; justify-content: center; } .computer-screen { overflow: hidden; border: 9px solid #30343b; border-radius: 12px; background: #17202a; box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.18 ); } .screen-top { min-height: 35px; padding: 8px 12px; display: flex; align-items: center; gap: 6px; background: #343b45; } .screen-dot { width: 10px; height: 10px; border-radius: 50%; background: #e9b349; } .screen-dot:nth-child(2) { background: #4eaf78; } .screen-dot:nth-child(3) { background: #d06458; } .screen-title { margin-left: 8px; color: #d9e1e8; font-size: 11px; } .screen-code { min-height: 220px; padding: 38px 24px; color: #f1f4f5; font-family: Consolas, Monaco, monospace; font-size: 17px; line-height: 2.2; } .code-function { color: #65b8ff; } .code-variable { color: #f4d36b; } .code-string { color: #8bdb9f; } /* ========================================================= PROGRAMMER MESSAGE ========================================================= */ .python-message { margin-top: 23px; padding: 14px; display: flex; align-items: center; gap: 14px; border: 1px solid #9fc8eb; border-radius: 10px; background: linear-gradient( 135deg, #eef8ff, #e1f1ff ); color: #124d91; } .python-message strong, .python-message span { display: block; } .python-message span { margin-top: 3px; } .message-icon { font-size: 38px; } /* ========================================================= TIP ========================================================= */ .learning-tip { margin-top: 18px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #e5bc68; border-radius: 9px; background: #fff8e9; } .learning-tip p { margin: 0; font-size: 13px; line-height: 1.45; } .learning-tip span { color: #555; } /* ========================================================= QUESTION PANEL ========================================================= */ .question-panel-heading { min-height: 42px; padding: 9px 15px; display: flex; align-items: center; gap: 10px; color: #fff; background: linear-gradient( 90deg, #6740b4, #8144bd ); font-size: 17px; font-weight: 700; } .question-symbol { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba( 255, 255, 255, 0.22 ); } /* ========================================================= QUIZ CONTENT ========================================================= */ .quiz-content { min-height: 590px; padding: 28px 35px; } .question-category { width: max-content; margin-bottom: 15px; padding: 6px 12px; border-radius: 20px; background: #eaf3ff; color: #15549b; font-size: 12px; font-weight: 700; } .question-ky { margin: 0 0 7px; color: #222; font-size: clamp( 21px, 2vw, 29px ); line-height: 1.35; } .question-en { margin: 0 0 18px; color: #16519c; font-size: 17px; line-height: 1.4; } /* ========================================================= CODE BOX ========================================================= */ .code-box { margin: 17px 0 22px; overflow: hidden; border-radius: 9px; background: #18222d; box-shadow: 0 5px 14px rgba( 0, 0, 0, 0.14 ); } .code-box.hidden { display: none; } .code-box-header { padding: 6px 13px; background: #313c47; color: #bcd2e4; font-size: 11px; } .code-box pre { margin: 0; padding: 20px; overflow-x: auto; color: #b6f2c4; font-family: Consolas, Monaco, monospace; font-size: 18px; white-space: pre-wrap; } /* ========================================================= ANSWERS ========================================================= */ .answers { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 13px; } .answer-button { min-height: 80px; padding: 13px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 11px; border: 1.5px solid #d7cab6; border-radius: 11px; background: #fff; cursor: pointer; text-align: left; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .answer-button:hover:not(:disabled) { transform: translateY(-2px); border-color: #448ed2; box-shadow: 0 5px 12px rgba( 40, 90, 145, 0.12 ); } .answer-letter { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #edf4fb; color: #145a9f; font-size: 16px; font-weight: 800; } .answer-text { line-height: 1.3; } .answer-ky { display: block; font-size: 14px; font-weight: 700; } .answer-en { display: block; margin-top: 3px; color: #555; font-size: 13px; } .answer-button.correct { border-color: #2fa55a; background: #ecfff2; } .answer-button.correct .answer-letter { background: #35a85d; color: white; } .answer-button.wrong { border-color: #df6255; background: #fff0ed; } .answer-button.wrong .answer-letter { background: #de6257; color: white; } .answer-button:disabled { cursor: default; } /* ========================================================= FEEDBACK ========================================================= */ .feedback { margin-top: 18px; padding: 13px 15px; display: none; align-items: center; gap: 13px; border-radius: 9px; } .feedback.show { display: flex; } .feedback.correct { border: 1px solid #8acb9b; background: #edfff2; color: #176c32; } .feedback.wrong { border: 1px solid #eca89f; background: #fff1ee; color: #9b3228; } .feedback-icon { font-size: 27px; } .feedback strong { display: block; } .feedback p { margin: 3px 0 0; font-size: 14px; line-height: 1.4; } /* ========================================================= NEXT BUTTON ========================================================= */ .next-button { width: 100%; margin-top: 17px; padding: 14px 20px; display: none; align-items: center; justify-content: center; gap: 15px; border: none; border-radius: 8px; background: linear-gradient( 90deg, #2167bb, #1454a4 ); color: white; font-size: 15px; font-weight: 800; cursor: pointer; } .next-button.show { display: flex; } /* ========================================================= RESULT SCREEN ========================================================= */ .result-screen { min-height: 590px; padding: 30px; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .result-screen.show { display: flex; } .result-stars { color: #f0ac09; font-size: 45px; letter-spacing: 5px; } .result-screen h2 { margin: 8px 0 2px; color: #b21e19; font-size: 33px; } .result-screen h3 { margin: 2px 0 20px; color: #1859a7; font-size: 25px; } .final-score-circle { width: 135px; height: 135px; margin: 5px 0 20px; display: flex; align-items: baseline; justify-content: center; padding-top: 38px; border: 7px solid #29a47f; border-radius: 50%; background: #f2fffa; color: #16785e; } .final-score-circle span { font-size: 43px; font-weight: 800; } .final-score-circle small { font-size: 17px; } .result-message { max-width: 620px; margin: 5px auto; line-height: 1.45; } .english-result { color: #15549c; } .result-summary { width: min( 400px, 100% ); margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .summary-card { padding: 13px; border: 1px solid #ddd1bd; border-radius: 10px; background: white; } .summary-card strong, .summary-card span, .summary-card small { display: block; } .summary-card strong { color: #125a9f; font-size: 27px; } .summary-card span { margin-top: 3px; font-weight: 700; } .summary-card small { margin-top: 2px; color: #666; } .restart-button { margin-top: 22px; padding: 13px 25px; border: none; border-radius: 8px; background: linear-gradient( #35a650, #258c3b ); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; } /* ========================================================= FOOTER ========================================================= */ .quiz-footer { margin-top: 17px; display: flex; justify-content: center; } .back-button { min-width: 420px; padding: 15px 28px; border: none; border-radius: 8px; background: linear-gradient( 90deg, #1263bb, #0d4fa2 ); color: white; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 10px rgba( 25, 75, 145, 0.17 ); } /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= PYTHON LEARNING RESOURCES ========================================================= */ .learning-resources { width: calc(100% - 32px); max-width: 1250px; margin: 20px auto 28px; padding: 24px; border: 1px solid #dfd2bd; border-radius: 16px; background: linear-gradient( 145deg, #fffdf8, #fff8ec ); box-shadow: 0 8px 22px rgba(70, 55, 35, 0.07); } /* ========================================================= RESOURCE TITLE ========================================================= */ .resources-top { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 18px; text-align: center; } .resources-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid #e1ab45; border-radius: 50%; background: #fff; color: #c58216; font-family: Consolas, Monaco, monospace; font-size: 17px; font-weight: 800; } .resources-top h2 { margin: 0; color: #b41f1b; font-size: 25px; } .resources-top h3 { margin: 4px 0 0; color: #1859a6; font-size: 20px; font-weight: 600; } /* ========================================================= WHY PYTHON ========================================================= */ .resources-intro { max-width: 980px; margin: 0 auto 21px; padding: 16px 19px; border-left: 4px solid #259379; border-radius: 5px 10px 10px 5px; background: #f0faf6; } .resources-intro p { margin: 0; font-size: 14px; line-height: 1.6; } .resources-intro p + p { margin-top: 9px; } .resources-intro strong { color: #176e5b; } .resources-english { color: #315f84; } /* ========================================================= RESOURCE CARDS ========================================================= */ .resources-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; } .resource-card { position: relative; padding: 19px; display: flex; gap: 14px; border: 1px solid #cbdcee; border-radius: 13px; background: linear-gradient( 145deg, #ffffff, #f3f8ff ); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .resource-card:hover { transform: translateY(-2px); border-color: #77a9d7; box-shadow: 0 7px 16px rgba(30, 80, 135, 0.10); } .resource-number { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 9px; background: #155ba5; color: #fff; font-size: 15px; font-weight: 800; } .resource-content { min-width: 0; } .resource-content h3 { margin: 1px 0 9px; color: #164e8b; font-size: 18px; } .resource-content p { margin: 5px 0; color: #333; font-size: 13px; line-height: 1.5; } .resource-content .resource-en { color: #5b6670; } .resource-button { width: max-content; max-width: 100%; margin-top: 13px; padding: 10px 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 7px; background: linear-gradient( 90deg, #1c67b7, #15539c ); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; transition: transform 0.15s ease, box-shadow 0.15s ease; } .resource-button:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(21, 83, 156, 0.20); } /* ========================================================= LANGUAGE SUPPORT ========================================================= */ .language-support-card { padding: 18px; display: flex; gap: 16px; border: 1px solid #e0c173; border-radius: 13px; background: linear-gradient( 135deg, #fffbee, #fff7df ); } .language-support-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 9px; background: #e6a52b; color: #fff; font-size: 19px; font-weight: 800; } .language-support-content { flex: 1; min-width: 0; } .language-support-content h3 { margin: 1px 0 10px; color: #8f5511; font-size: 18px; } .language-support-content h3 span { margin-left: 7px; color: #1e5a98; font-size: 16px; font-weight: 600; } .language-support-content > p { margin: 5px 0; font-size: 13px; line-height: 1.55; } .support-options { margin-top: 15px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .support-option { padding: 12px; border: 1px solid #ead7a7; border-radius: 9px; background: rgba(255, 255, 255, 0.78); } .support-option strong, .support-option span, .support-option small { display: block; } .support-option strong { margin-bottom: 6px; color: #155ba3; font-size: 14px; } .support-option span { color: #333; font-size: 12px; line-height: 1.45; } .support-option small { margin-top: 6px; color: #64717c; font-size: 11px; line-height: 1.4; } /* ========================================================= NOTE ========================================================= */ .resource-note { margin-top: 13px; padding: 10px 14px; border-radius: 8px; background: #f4f1eb; color: #574f45; font-size: 12px; line-height: 1.5; } .resource-note strong { color: #934d17; } .resource-note span { display: block; margin-top: 3px; color: #66717a; } /* ========================================================= TRANSITION TO QUIZ ========================================================= */ .ready-for-quiz { margin-top: 23px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; text-align: center; } .ready-for-quiz div { padding: 7px 12px; } .ready-for-quiz strong, .ready-for-quiz span { display: block; } .ready-for-quiz strong { color: #198369; font-size: 16px; } .ready-for-quiz span { margin-top: 3px; color: #1858a3; font-size: 14px; } .ready-line { height: 1px; background: linear-gradient( 90deg, transparent, #d5ad5c ); } .ready-line:last-child { background: linear-gradient( 90deg, #d5ad5c, transparent ); } /* ========================================================= RESOURCE RESPONSIVE ========================================================= */ @media (max-width: 850px) { .resources-grid { grid-template-columns: 1fr; } .support-options { grid-template-columns: 1fr; } } @media (max-width: 560px) { .learning-resources { width: calc(100% - 16px); padding: 17px 13px; } .resources-top { flex-direction: column; } .resources-top h2 { font-size: 21px; } .resources-top h3 { font-size: 17px; } .resource-card { flex-direction: column; } .language-support-card { flex-direction: column; } .language-support-content h3 span { display: block; margin: 4px 0 0; } .ready-for-quiz { grid-template-columns: 30px 1fr 30px; } } @media ( max-width: 1000px ) { .quiz-layout { grid-template-columns: 1fr; } .python-display { min-height: auto; } .question-panel { min-height: 620px; } } @media ( max-width: 720px ) { .quiz-header { grid-template-columns: 1fr; text-align: center; } .python-badge { margin: auto; } .header-score-card { width: 210px; margin: auto; } .intro-card { width: calc( 100% - 24px ); } .progress-section { width: calc( 100% - 28px ); } .quiz-content { padding: 22px 18px; } .answers { grid-template-columns: 1fr; } .back-button { width: 90%; min-width: auto; } } @media ( max-width: 450px ) { .quiz-layout { width: calc( 100% - 14px ); } .python-display { padding: 18px 12px; } .screen-code { padding: 25px 12px; font-size: 14px; } .answer-button { min-height: 70px; } } /* ========================================================= ACTIVITY8_STANDARD_ORANGE_BACK_BUTTON_V1 Standard Back to Chapter style used across activities. ========================================================= */ .chapter-back-row, .back-to-chapter-row, .activity-back-row { width: 100% !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; box-sizing: border-box !important; margin: 14px auto 18px !important; padding: 0 28px !important; position: relative !important; z-index: 20 !important; } .chapter-back-button, .back-to-chapter-button, .back-btn { width: auto !important; min-width: 0 !important; min-height: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 10px 20px !important; box-sizing: border-box !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient( 135deg, #f6ba63 0%, #eea64d 100% ) !important; color: #063c78 !important; text-decoration: none !important; text-align: center !important; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: 0 !important; box-shadow: 0 5px 12px rgba( 126, 82, 22, .16 ) !important; cursor: pointer !important; transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important; } .chapter-back-button:hover, .back-to-chapter-button:hover, .back-btn:hover { color: #063c78 !important; text-decoration: none !important; background: linear-gradient( 135deg, #ffc974 0%, #f2ad53 100% ) !important; transform: translateY(-1px) !important; box-shadow: 0 7px 15px rgba( 126, 82, 22, .20 ) !important; } .chapter-back-button:active, .back-to-chapter-button:active, .back-btn:active { transform: translateY(0) !important; box-shadow: 0 3px 8px rgba( 126, 82, 22, .15 ) !important; } .chapter-back-arrow, .back-arrow { color: #063c78 !important; font-size: 15px !important; line-height: 1 !important; font-weight: 800 !important; } @media ( max-width: 700px ) { .chapter-back-row, .back-to-chapter-row, .activity-back-row { padding: 0 16px !important; margin-top: 12px !important; } .chapter-back-button, .back-to-chapter-button, .back-btn { padding: 9px 16px !important; font-size: 13px !important; } } /* STANDARD_CHAPTER_BACK_BUTTON_V2_START */ /* ========================================================== STANDARD BOOK ACTIVITY BACK BUTTON Same compact warm-orange pill style as Activity 6. ========================================================== */ /* ---------------------------------------------------------- FOOTER POSITION ---------------------------------------------------------- */ .activity-footer, .quiz-footer { width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; margin: 10px auto 14px !important; padding: 0 22px !important; background: transparent !important; } /* ---------------------------------------------------------- BUTTON ---------------------------------------------------------- */ .back-button { width: auto !important; min-width: 0 !important; max-width: max-content !important; min-height: 0 !important; height: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 !important; padding: 10px 20px !important; box-sizing: border-box !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient( 135deg, #f6ba63 0%, #eea64d 100% ) !important; color: #063c78 !important; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: 0 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; box-shadow: 0 5px 12px rgba( 126, 82, 22, .16 ) !important; cursor: pointer !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important; } /* ---------------------------------------------------------- HOVER ---------------------------------------------------------- */ .back-button:hover { background: linear-gradient( 135deg, #ffc974 0%, #f2ad53 100% ) !important; color: #063c78 !important; transform: translateY(-1px) !important; box-shadow: 0 7px 15px rgba( 126, 82, 22, .20 ) !important; } /* ---------------------------------------------------------- CLICK ---------------------------------------------------------- */ .back-button:active { transform: translateY(0) !important; box-shadow: 0 3px 8px rgba( 126, 82, 22, .15 ) !important; } /* ---------------------------------------------------------- KEYBOARD ---------------------------------------------------------- */ .back-button:focus-visible { outline: 3px solid rgba( 238, 166, 77, .35 ) !important; outline-offset: 3px !important; } /* ---------------------------------------------------------- RESPONSIVE ---------------------------------------------------------- */ @media (max-width: 700px) { .activity-footer, .quiz-footer { padding: 0 12px !important; } .back-button { padding: 9px 16px !important; font-size: 12px !important; white-space: normal !important; } } /* STANDARD_CHAPTER_BACK_BUTTON_V2_END */ /* PYTHON_COMPACT_LANGUAGE_SUPPORT_V2_START */ /* ========================================================== LANGUAGE SUPPORT Keep all three useful tools. Remove unnecessary reading. ========================================================== */ .language-support-compact { max-width: 1120px !important; margin: 12px auto 10px !important; padding: 12px 16px !important; align-items: flex-start !important; } .language-support-compact .language-support-icon { flex: 0 0 auto; font-size: 23px !important; } .language-support-compact .language-support-content { width: 100% !important; } .language-support-compact h3 { margin: 0 0 4px !important; font-size: 16px !important; line-height: 1.2 !important; } .language-support-compact h3 span { margin-left: 7px !important; font-size: 14px !important; } .support-intro-ky, .support-intro-en { display: inline !important; margin: 0 !important; font-size: 12px !important; line-height: 1.25 !important; } .support-intro-en { margin-left: 8px !important; } /* ========================================================== THREE TOOL CARDS ========================================================== */ .language-support-compact .support-options { margin-top: 9px !important; display: grid !important; grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important; gap: 10px !important; } .language-support-compact .support-option { min-height: 0 !important; padding: 9px 11px !important; border-radius: 8px !important; } .language-support-compact .support-option strong { display: block !important; margin: 0 0 4px !important; font-size: 13px !important; line-height: 1.15 !important; } .language-support-compact .support-option span { display: block !important; margin: 0 !important; font-size: 11.5px !important; line-height: 1.25 !important; } .language-support-compact .support-option small { display: block !important; margin-top: 2px !important; font-size: 10.5px !important; line-height: 1.2 !important; color: #657080 !important; } /* ========================================================== NOTE ========================================================== */ .resource-note-short { max-width: 1120px !important; margin: 8px auto 10px !important; padding: 8px 13px !important; font-size: 11px !important; line-height: 1.25 !important; } .resource-note-short strong, .resource-note-short span { display: inline !important; } .resource-note-short .note-ky { margin-left: 4px !important; } .resource-note-short .note-en { margin-left: 8px !important; color: #55708e !important; } /* ========================================================== MOBILE ========================================================== */ @media ( max-width: 760px ) { .language-support-compact .support-options { grid-template-columns: 1fr !important; } .support-intro-ky, .support-intro-en { display: block !important; margin: 2px 0 !important; } .resource-note-short .note-en { display: block !important; margin: 3px 0 0 !important; } } /* PYTHON_COMPACT_LANGUAGE_SUPPORT_V2_END */ /* PYTHON_SHORT_RESOURCES_V1_START */ /* ========================================================== SHORT CHILD-FRIENDLY PYTHON RESOURCE PAGE ========================================================== */ /* ---------------------------------------------------------- WHOLE RESOURCE AREA ---------------------------------------------------------- */ .learning-resources { padding-top: 18px !important; padding-bottom: 14px !important; } /* ---------------------------------------------------------- TITLE ---------------------------------------------------------- */ .resources-top { margin-bottom: 12px !important; } .resources-top h2 { margin: 0 !important; font-size: 24px !important; line-height: 1.15 !important; } .resources-top h3 { margin: 3px 0 0 !important; font-size: 18px !important; line-height: 1.15 !important; } /* ---------------------------------------------------------- WHY PYTHON ---------------------------------------------------------- */ .resources-intro { max-width: 900px !important; margin: 0 auto 14px !important; padding: 10px 16px !important; } .resources-intro-short { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; } .resources-intro-short p { margin: 0 !important; font-size: 13px !important; line-height: 1.3 !important; } .resources-intro-short strong { display: block; margin-bottom: 2px; } /* ---------------------------------------------------------- RESOURCE CARDS ---------------------------------------------------------- */ .resources-grid { gap: 14px !important; margin-bottom: 12px !important; } .resource-card { min-height: 0 !important; padding: 14px 16px !important; } .resource-content h3 { margin: 0 0 7px !important; font-size: 17px !important; line-height: 1.2 !important; } .resource-content p { margin: 2px 0 !important; font-size: 12.5px !important; line-height: 1.3 !important; } .resource-en { margin-top: 2px !important; } /* ---------------------------------------------------------- RESOURCE BUTTONS ---------------------------------------------------------- */ .resource-button { margin-top: 9px !important; padding: 8px 14px !important; font-size: 12px !important; border-radius: 7px !important; } /* ---------------------------------------------------------- LANGUAGE HELP ---------------------------------------------------------- */ .language-support-short { max-width: 900px !important; margin: 10px auto !important; padding: 10px 14px !important; align-items: center !important; } .language-support-short .language-support-icon { font-size: 24px !important; } .language-support-short h3 { margin: 0 0 3px !important; font-size: 15px !important; line-height: 1.2 !important; } .language-support-short h3 span { margin-left: 7px; } .language-support-short p { margin: 1px 0 !important; font-size: 12px !important; line-height: 1.25 !important; } /* Old support option cards are no longer needed */ .language-support-short .support-options { display: none !important; } /* ---------------------------------------------------------- READY FOR QUIZ ---------------------------------------------------------- */ .ready-for-quiz { margin: 10px auto 4px !important; } .ready-for-quiz strong { font-size: 14px !important; } .ready-for-quiz span { font-size: 12px !important; } /* ---------------------------------------------------------- SMALL SCREEN ---------------------------------------------------------- */ @media ( max-width: 760px ) { .resources-intro-short { grid-template-columns: 1fr !important; gap: 5px !important; } } /* PYTHON_SHORT_RESOURCES_V1_END */ /* PYTHON_MATCHED_TITLES_V3_START */ /* ========================================================== PYTHON ACTIVITY TITLES Both sections now use the same visual hierarchy: KYRGYZ = large red title ENGLISH = large blue subtitle Decorative title icons removed. ========================================================== */ /* ---------------------------------------------------------- DEFENSIVE ICON REMOVAL Also hides them if an old cached template is shown. ---------------------------------------------------------- */ .resources-icon, .python-badge { display: none !important; } /* ---------------------------------------------------------- RESOURCE PAGE TITLE CONTAINER ---------------------------------------------------------- */ .resources-top { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin: 2px auto 16px !important; padding: 0 !important; text-align: center !important; } .resources-top > div { width: 100% !important; text-align: center !important; } /* ---------------------------------------------------------- FIRST KYRGYZ TITLE Match "Менин биринчи Python тестим". ---------------------------------------------------------- */ .resources-top h2 { margin: 0 !important; padding: 0 !important; color: #b7191c !important; font-size: 34px !important; line-height: 1.08 !important; font-weight: 800 !important; letter-spacing: 0 !important; text-align: center !important; } /* ---------------------------------------------------------- FIRST ENGLISH TITLE Match quiz English subtitle. ---------------------------------------------------------- */ .resources-top h3 { margin: 6px 0 0 !important; padding: 0 !important; color: #145aa6 !important; font-size: 27px !important; line-height: 1.08 !important; font-weight: 800 !important; letter-spacing: 0 !important; text-align: center !important; } /* ---------------------------------------------------------- QUIZ HEADER Re-center after removing its icon. ---------------------------------------------------------- */ .quiz-header { position: relative !important; } .header-titles { flex: 1 1 auto !important; width: 100% !important; text-align: center !important; padding-left: 0 !important; margin-left: 0 !important; } /* Keep its existing large title, but make hierarchy explicit */ .header-titles h1 { margin: 0 !important; color: #b7191c !important; font-size: 34px !important; line-height: 1.08 !important; font-weight: 800 !important; text-align: center !important; } .header-titles h2 { margin: 6px 0 0 !important; color: #145aa6 !important; font-size: 27px !important; line-height: 1.08 !important; font-weight: 800 !important; text-align: center !important; } /* ---------------------------------------------------------- IMPORTANT: Score card remains on the right without pushing the visual title away from the center. ---------------------------------------------------------- */ .header-score-card { flex: 0 0 auto !important; } /* ---------------------------------------------------------- LAPTOP / SCREENSHOT SIZE ---------------------------------------------------------- */ @media ( min-width: 1100px ) and ( max-height: 950px ) { .resources-top h2, .header-titles h1 { font-size: 32px !important; } .resources-top h3, .header-titles h2 { font-size: 25px !important; } .resources-top { margin-bottom: 13px !important; } } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media ( max-width: 760px ) { .resources-top h2, .header-titles h1 { font-size: 25px !important; } .resources-top h3, .header-titles h2 { font-size: 20px !important; } } /* PYTHON_MATCHED_TITLES_V3_END */ /* PYTHON_REAL_LOGO_V1_START */ /* ========================================================== OFFICIAL-STYLE PYTHON VISUAL Use the supplied Python image only where it provides useful visual recognition. ========================================================== */ /* Old decorative symbols */ .resources-icon, .python-badge { display: none !important; } /* ---------------------------------------------------------- BASE LOGO ---------------------------------------------------------- */ .python-logo { display: block !important; flex: 0 0 auto !important; width: auto !important; object-fit: contain !important; } /* ---------------------------------------------------------- EXPLORE PYTHON HEADER ---------------------------------------------------------- */ .resources-top { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 16px !important; } .python-logo-resources { width: 64px !important; height: 64px !important; } .resources-top > div { width: auto !important; text-align: left !important; } .resources-top h2, .resources-top h3 { text-align: left !important; } /* ---------------------------------------------------------- QUIZ HEADER ---------------------------------------------------------- */ .quiz-header { display: flex !important; align-items: center !important; gap: 18px !important; } .python-logo-quiz { width: 72px !important; height: 72px !important; margin-left: 12px !important; } .header-titles { text-align: left !important; } .header-titles h1, .header-titles h2 { text-align: left !important; } /* ---------------------------------------------------------- Keep logo from competing with text on smaller screens ---------------------------------------------------------- */ @media ( max-width: 760px ) { .python-logo-resources { width: 48px !important; height: 48px !important; } .python-logo-quiz { width: 52px !important; height: 52px !important; margin-left: 0 !important; } } /* PYTHON_REAL_LOGO_V1_END */ /* PROGRAMMER_PYTHON_LOGO_V1_START */ /* ========================================================== PROGRAMMER MESSAGE Replace decorative snake with recognizable Python identity. ========================================================== */ .python-message .message-icon { flex: 0 0 54px !important; width: 54px !important; height: 54px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; background: transparent !important; } .programmer-python-logo { display: block !important; width: 48px !important; height: 48px !important; max-width: 48px !important; object-fit: contain !important; } /* Keep text nicely aligned with logo */ .python-message { align-items: center !important; } .python-message strong { line-height: 1.15 !important; } .python-message span { line-height: 1.15 !important; } /* PROGRAMMER_PYTHON_LOGO_V1_END */ /* FOUR_CLICKABLE_LANGUAGE_TOOLS_V2_START */ /* ========================================================== LANGUAGE SUPPORT — FINAL FOUR-CARD LAYOUT Desktop: ChatGPT | Mate | Extension | Google Translate Keep all four cards on ONE horizontal row. ========================================================== */ /* ---------------------------------------------------------- CARD GRID Specific selector intentionally overrides the older 3-column .language-support-compact rule. ---------------------------------------------------------- */ .language-support-compact .support-options { width: 100% !important; margin-top: 9px !important; display: grid !important; grid-template-columns: repeat( 4, minmax(0, 1fr) ) !important; gap: 10px !important; align-items: stretch !important; } /* ---------------------------------------------------------- CLICKABLE CARD ---------------------------------------------------------- */ .language-support-compact .support-option-link { width: 100% !important; min-width: 0 !important; min-height: 72px !important; padding: 9px 11px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; box-sizing: border-box !important; border: 1px solid #ead7a7 !important; border-radius: 8px !important; background: rgba( 255, 255, 255, 0.82 ) !important; color: inherit !important; text-decoration: none !important; cursor: pointer !important; overflow: hidden !important; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important; } /* ---------------------------------------------------------- TITLE ---------------------------------------------------------- */ .language-support-compact .support-option-link strong { display: block !important; width: 100% !important; margin: 0 0 4px !important; color: #0b58a1 !important; font-size: 12.5px !important; line-height: 1.15 !important; font-weight: 800 !important; text-decoration: none !important; white-space: normal !important; } /* ---------------------------------------------------------- KYRGYZ DESCRIPTION ---------------------------------------------------------- */ .language-support-compact .support-option-link span { display: block !important; width: 100% !important; margin: 0 !important; color: #333 !important; font-size: 11px !important; line-height: 1.22 !important; text-decoration: none !important; } /* ---------------------------------------------------------- ENGLISH DESCRIPTION ---------------------------------------------------------- */ .language-support-compact .support-option-link small { display: block !important; width: 100% !important; margin-top: 2px !important; color: #657080 !important; font-size: 10px !important; line-height: 1.2 !important; text-decoration: none !important; } /* ---------------------------------------------------------- HOVER ---------------------------------------------------------- */ .language-support-compact .support-option-link:hover { transform: translateY(-2px) !important; border-color: #2b78c5 !important; background: #ffffff !important; box-shadow: 0 5px 14px rgba( 16, 75, 135, .12 ) !important; text-decoration: none !important; } /* ---------------------------------------------------------- KEYBOARD ACCESSIBILITY ---------------------------------------------------------- */ .language-support-compact .support-option-link:focus-visible { outline: 3px solid rgba( 37, 115, 190, .28 ) !important; outline-offset: 2px !important; } /* ========================================================== RESPONSIVE ========================================================== */ /* Medium screens — 2 x 2 */ @media ( min-width: 701px ) and ( max-width: 950px ) { .language-support-compact .support-options { grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; } } /* Phones — single column */ @media ( max-width: 700px ) { .language-support-compact .support-options { grid-template-columns: 1fr !important; gap: 7px !important; } .language-support-compact .support-option-link { min-height: 0 !important; padding: 8px 10px !important; } } /* FOUR_CLICKABLE_LANGUAGE_TOOLS_V2_END */ /* PYTHON_COMPACT_TRANSITION_FINAL_V3_START */ /* ========================================================== FINAL COMPACT TRANSITION Desired order: Language-help box ↓ 6px Ready for quiz ↓ 6px Main quiz No artificial vertical space. ========================================================== */ /* ---------------------------------------------------------- RESOURCE SECTION Force normal content-sized flow. ---------------------------------------------------------- */ .learning-resources { height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; align-content: normal !important; justify-content: normal !important; gap: 0 !important; row-gap: 0 !important; margin: 10px auto 6px !important; padding-bottom: 7px !important; overflow: visible !important; } /* ---------------------------------------------------------- LANGUAGE HELP No bottom gap after yellow box. ---------------------------------------------------------- */ .learning-resources .language-support-card, .learning-resources .language-support-compact { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; margin-bottom: 0 !important; } /* ---------------------------------------------------------- SUPPORT OPTIONS Four cards remain on one line. ---------------------------------------------------------- */ .learning-resources .language-support-compact .support-options { grid-template-columns: repeat( 4, minmax(0, 1fr) ) !important; margin-bottom: 0 !important; } /* ---------------------------------------------------------- REMOVE OLD NOTE COMPLETELY ---------------------------------------------------------- */ .learning-resources .resource-note, .learning-resources .resource-note-short { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* ---------------------------------------------------------- READY FOR QUIZ Directly after language support. ---------------------------------------------------------- */ .learning-resources .ready-for-quiz { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 6px 0 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; align-content: center !important; justify-content: normal !important; gap: 12px !important; position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; float: none !important; clear: none !important; } /* ---------------------------------------------------------- READY TEXT ---------------------------------------------------------- */ .learning-resources .ready-for-quiz > div { margin: 0 !important; padding: 2px 10px !important; min-height: 0 !important; } .learning-resources .ready-for-quiz strong { display: block !important; margin: 0 !important; padding: 0 !important; color: #198369 !important; font-size: 14px !important; line-height: 1.15 !important; } .learning-resources .ready-for-quiz > div > span { display: block !important; margin: 2px 0 0 !important; padding: 0 !important; color: #1858a3 !important; font-size: 12px !important; line-height: 1.15 !important; } /* ---------------------------------------------------------- LINES ---------------------------------------------------------- */ .learning-resources .ready-for-quiz .ready-line { display: block !important; width: 100% !important; height: 1px !important; min-height: 1px !important; margin: 0 !important; padding: 0 !important; } /* ---------------------------------------------------------- MAIN QUIZ Keep it immediately underneath. ---------------------------------------------------------- */ .learning-resources + .quiz-header, .quiz-header { margin-top: 0 !important; padding-top: 6px !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 950px) { .learning-resources .language-support-compact .support-options { grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; } } @media (max-width: 700px) { .learning-resources .language-support-compact .support-options { grid-template-columns: 1fr !important; } .learning-resources .ready-for-quiz { grid-template-columns: 28px minmax(0, 1fr) 28px !important; } } /* PYTHON_COMPACT_TRANSITION_FINAL_V3_END */ /* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_START */ /* ========================================================== GLOBAL E-BOOK ACTIVITY TYPOGRAPHY Unified Kyrgyz-friendly font rendering. Supports Kyrgyz Cyrillic clearly: Ө ө Ү ү Ң ң Intentionally protects programming / keyboard typography. ========================================================== */ :root { --ebook-kyrgyz-font: "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif; } /* ---------------------------------------------------------- BASE TEXT This becomes the normal inherited font for each activity. ---------------------------------------------------------- */ html, body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---------------------------------------------------------- MAIN EDUCATIONAL TEXT Override old Georgia / Times / decorative serif styles where they were being used for Kyrgyz text. ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, p, button, input, textarea, select, label, a, li, th, td, strong, small, em { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } /* ---------------------------------------------------------- COMMON ACTIVITY QUESTION / ANSWER ELEMENTS These selectors cover the different activity generations already used throughout the e-book. ---------------------------------------------------------- */ .question, .question-text, .question-title, .question-heading, .question-kicker, .question-ky, .question-kyrgyz, .ky-question, .challenge-question, .challenge-title, .prompt, .prompt-text, .instruction, .instructions, .instruction-text, .scenario, .feedback, .explanation, .answer, .answer-text, .answer-option, .option, .option-btn, .choice, .choice-btn, .quiz-question, .quiz-option, .task-title, .task-question, .result-title, .result-message, .card-title, .card-text, .game-title, .game-question { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } /* ---------------------------------------------------------- KYRGYZ TYPOGRAPHY DETAILS Slightly softer weight and natural spacing improve Cyrillic letters such as ө, ү and ң. ---------------------------------------------------------- */ h1, h2, h3, .question, .question-text, .question-title, .question-ky, .question-kyrgyz, .ky-question, .challenge-question, .quiz-question, .task-question { font-kerning: normal; font-variant-ligatures: common-ligatures; letter-spacing: .002em; word-spacing: .02em; text-rendering: optimizeLegibility; } /* ---------------------------------------------------------- QUESTION HEADINGS ---------------------------------------------------------- */ .question-ky, .question-kyrgyz, .ky-question, .question-text, .challenge-question, .quiz-question { font-weight: 750; } /* ---------------------------------------------------------- ANSWERS Keep Kyrgyz choices clean and readable rather than excessively heavy. ---------------------------------------------------------- */ .option-btn, .option, .answer-option, .choice, .choice-btn { font-weight: 650; } /* ---------------------------------------------------------- FEEDBACK / EXPLANATIONS ---------------------------------------------------------- */ .feedback, .explanation { line-height: 1.4; } /* ========================================================== DO NOT CHANGE PROGRAMMING / KEYBOARD / TECHNICAL FONTS ========================================================== */ code, pre, kbd, samp, .code, .code-block, .code-output, .console, .terminal, .keyboard-key, .key, .shortcut-key { font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace !important; } /* ========================================================== PROTECT COMMON ICON FONTS ========================================================== */ .material-icons, .material-symbols-outlined, .material-symbols-rounded, .fa, .fas, .far, .fal, .fab, [class^="fa-"], [class*=" fa-"] { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } /* ========================================================== EMOJI Browser will naturally fall back to the operating system emoji font where necessary. ========================================================== */ /* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_END */ /* FINAL_UNIFORM_ACTIVITY_FONT_V2_START */ /* FINAL UNIFORM E-BOOK ACTIVITY TYPOGRAPHY Standard typography: Arial, "Helvetica Neue", Helvetica, sans-serif Applies to normal Kyrgyz and English interface text, including Back to Chapter buttons. Font sizes, weights, colors, spacing and layouts are intentionally NOT changed. */ :root { --ebook-kyrgyz-font: Arial, "Helvetica Neue", Helvetica, sans-serif; --ebook-activity-font: Arial, "Helvetica Neue", Helvetica, sans-serif; } html, body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; } /* ---------------------------------------------------------- TITLES AND NORMAL TEXT ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, p, span, label, li, a, strong, b, em, small, th, td { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; } /* ---------------------------------------------------------- BUTTONS AND FORM ELEMENTS Includes every Back to Chapter button regardless of whether it is an or