/* ========================================================= KYRGYZ EBOOK — GLOBAL ACTIVITY BRAND V1 Shared visual identity for all interactive activities. Book palette: Navy / Royal Blue Warm Gold Turquoise Warm Paper Kyrgyz ornamental footer ========================================================= */ :root { /* ----------------------------------------------------- PRIMARY BOOK COLORS ----------------------------------------------------- */ --ebook-navy: #173f73; --ebook-blue: #2452a4; --ebook-royal: #234b98; --ebook-gold: #e1a400; --ebook-gold-soft: #f6c844; --ebook-turquoise: #40b8c2; --ebook-mint: #dff4f0; --ebook-paper: #faf7ef; --ebook-paper-soft: #f5f1e7; --ebook-white: #ffffff; --ebook-text: #173a5d; --ebook-muted: #647789; --ebook-border: #d6e0e7; /* ----------------------------------------------------- COMPATIBILITY VARIABLES Many existing activities already use names such as --navy, --blue, --cyan, --gold. This gives them a shared palette wherever possible. ----------------------------------------------------- */ --navy: var(--ebook-navy); --blue: var(--ebook-blue); --cyan: var(--ebook-turquoise); --turquoise: var(--ebook-turquoise); --gold: var(--ebook-gold); --paper: var(--ebook-paper); --text: var(--ebook-text); --muted: var(--ebook-muted); --border: var(--ebook-border); } /* ========================================================= PAGE BRAND FRAME ========================================================= */ html { background: var(--ebook-paper); } body { position: relative; min-height: 100vh; color: var(--ebook-text); accent-color: var(--ebook-blue); } /* Thin book-blue identity line */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9998; pointer-events: none; background: linear-gradient( 90deg, var(--ebook-blue) 0%, var(--ebook-blue) 37%, var(--ebook-turquoise) 37%, var(--ebook-turquoise) 63%, var(--ebook-gold) 63%, var(--ebook-gold) 100% ); } /* ========================================================= KYRGYZ ORNAMENT FOOTER CSS-only motif: no image file required. ========================================================= */ body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 16px; z-index: 9998; pointer-events: none; border-top: 2px solid rgba( 225, 164, 0, .85 ); background-color: var(--ebook-navy); background-image: linear-gradient( 45deg, transparent 37%, var(--ebook-gold) 37%, var(--ebook-gold) 46%, transparent 46%, transparent 54%, var(--ebook-turquoise) 54%, var(--ebook-turquoise) 63%, transparent 63% ), linear-gradient( -45deg, transparent 37%, var(--ebook-gold) 37%, var(--ebook-gold) 46%, transparent 46%, transparent 54%, var(--ebook-turquoise) 54%, var(--ebook-turquoise) 63%, transparent 63% ); background-size: 30px 16px; background-position: 0 0, 15px 0; box-shadow: 0 -3px 10px rgba( 23, 63, 115, .08 ); } /* ========================================================= SHARED BUTTON QUALITY ========================================================= */ button, a { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba( 64, 184, 194, .38 ); outline-offset: 2px; } /* ========================================================= SHARED PRIMARY BUTTON CLASSES These only affect common activity class names, rather than changing every button in every game. ========================================================= */ .primary-btn, .start-btn, .next-btn, .submit-btn, .run-btn, .ai-action-btn { border-color: transparent; color: #ffffff; background: linear-gradient( 135deg, var(--ebook-blue), var(--ebook-navy) ); box-shadow: 0 7px 16px rgba( 23, 63, 115, .14 ); } .primary-btn:hover, .start-btn:hover, .next-btn:hover, .submit-btn:hover, .run-btn:hover, .ai-action-btn:hover { filter: brightness(1.06); } /* ========================================================= BACK TO CHAPTER BUTTONS ========================================================= */ .chapter-link, .back-btn, .back-to-chapter, .game-back-to-chapter-btn { color: var(--ebook-navy); } /* ========================================================= COMMON CARDS / PANELS ========================================================= */ .card, .panel, .tutorial-card { border-color: var(--ebook-border); } /* ========================================================= COMMON ENGLISH SECONDARY TEXT English remains readable but visually secondary. ========================================================= */ .en, .secondary, small { text-rendering: optimizeLegibility; } /* ========================================================= SCROLLBAR — SUBTLE BOOK BRAND ========================================================= */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #eef2f3; } ::-webkit-scrollbar-thumb { border-radius: 999px; background: #9bb6c7; } ::-webkit-scrollbar-thumb:hover { background: var(--ebook-blue); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 650px) { body::after { height: 12px; background-size: 24px 12px; background-position: 0 0, 12px 0; } } /* KYRGYZ_ACTIVITY_FRAME_V3_START */ /* ========================================================= KYRGYZ EBOOK ACTIVITY FRAME V3 Matches the visual language of the main e-book reader. Ornament source: ../images/kyrgyz-pattern.png ========================================================= */ :root { --book-navy: #173f73; --book-blue: #244d9b; --book-blue-deep: #173f7a; --book-gold: #e1a400; --book-gold-bright: #ffc21a; --book-turquoise: #42bcc4; --book-paper: #faf7ef; --book-white: #ffffff; --book-text: #173a5d; --book-border: #d6e0e7; } /* ========================================================= PAGE ========================================================= */ html { background: var(--book-paper); } body { position: relative; min-height: 100vh; /* Reserve space so fixed ornament bands do not cover activity content. */ padding-top: 38px !important; padding-bottom: 38px !important; } /* ========================================================= TOP KYRGYZ ORNAMENT ========================================================= */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 34px; z-index: 99999; pointer-events: none; /* Same white/cream treatment as the ornament printed across the top of the book pages. */ background-color: #fffdfa; background-image: url("/static/reader/images/kyrgyz-pattern.941f58d665e4.png"); background-repeat: repeat-x; background-position: center center; background-size: auto 27px; border-top: 5px solid var(--book-blue); border-bottom: 2px solid var(--book-gold); box-shadow: 0 3px 12px rgba( 23, 63, 115, .10 ); } /* ========================================================= BOTTOM KYRGYZ ORNAMENT ========================================================= */ body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 34px; z-index: 99999; pointer-events: none; background-color: #fffdfa; background-image: url("/static/reader/images/kyrgyz-pattern.941f58d665e4.png"); background-repeat: repeat-x; background-position: center center; background-size: auto 27px; border-top: 2px solid var(--book-gold); border-bottom: 5px solid var(--book-blue); box-shadow: 0 -3px 12px rgba( 23, 63, 115, .10 ); } /* ========================================================= GLOBAL BOOK BUTTON LANGUAGE ========================================================= */ .primary-btn, .start-btn, .next-btn, .submit-btn, .run-btn, .ai-action-btn { color: #ffffff; border-color: transparent; background: linear-gradient( 135deg, var(--book-blue), var(--book-navy) ); box-shadow: 0 6px 16px rgba( 23, 63, 115, .15 ); } /* ========================================================= BACK TO CHAPTER ========================================================= */ .chapter-link, .back-btn, .back-to-chapter, .game-back-to-chapter-btn { color: var(--book-navy); } /* ========================================================= ACCESSIBLE FOCUS ========================================================= */ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba( 66, 188, 196, .42 ); outline-offset: 2px; } /* ========================================================= MOBILE / SMALL SCREEN ========================================================= */ @media ( max-width: 700px ) { body { padding-top: 31px !important; padding-bottom: 31px !important; } body::before, body::after { height: 28px; background-size: auto 22px; } } /* KYRGYZ_ACTIVITY_FRAME_V3_END */ /* ========================================================= KYRGYZ_BOTTOM_ORNAMENT_INWARD_V3 The top ornament stays in its original orientation. The bottom ornament is rotated so both ornament bands visually face inward toward the activity content. ========================================================= */ body::after { transform: rotate(180deg) !important; transform-origin: center center !important; } /* Preserve the bottom bar across the full viewport */ html, body { overflow-x: hidden; } /* KYRGYZ_EBOOK_BRAND_POLISH_V4_START */ /* ========================================================= 1. SHARED TYPOGRAPHY Activity 1 typography becomes the standard visual language for all activities. Keep code/programming areas monospace. ========================================================= */ html, body, button, input, select { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; } /* Normal activity text */ h1, h2, h3, h4, h5, h6, p, span, label, a, strong, small, li { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } /* Consistent strong headings */ h1, h2, h3, .activity-title, .game-title, .page-title, .hero-title { letter-spacing: -0.015em; font-weight: 700; } /* English secondary text stays clean and readable */ .en, .secondary, .english, small { line-height: 1.35; } /* --------------------------------------------------------- IMPORTANT: preserve coding fonts in Vibe Coding Lab and other programming activities. --------------------------------------------------------- */ code, pre, kbd, samp, .code-editor, .editor-body textarea, #line-numbers, #code-editor, .code-area, .code-box { font-family: Consolas, "Courier New", monospace !important; } /* ========================================================= 2. BOTTOM KYRGYZ ORNAMENT BORDER ORDER body::after is rotated 180 degrees. Therefore its CSS borders must intentionally be declared in the opposite order so that the FINAL visible result is: GOLD ORNAMENT BLUE ========================================================= */ body::after { /* BEFORE rotation: blue on top, gold on bottom AFTER rotate(180deg): gold appears on top, blue appears on bottom. */ border-top: 5px solid var(--book-blue) !important; border-bottom: 2px solid var(--book-gold) !important; transform: rotate(180deg) !important; transform-origin: center center !important; } /* ========================================================= 3. TOP ORNAMENT Keep the top frame visually complementary: BLUE ORNAMENT GOLD ========================================================= */ body::before { border-top: 5px solid var(--book-blue) !important; border-bottom: 2px solid var(--book-gold) !important; } /* ========================================================= 4. BUTTON TYPOGRAPHY CONSISTENCY ========================================================= */ button, .primary-btn, .start-btn, .next-btn, .submit-btn, .run-btn, .ai-action-btn, .back-btn, .back-to-chapter, .game-back-to-chapter-btn { font-weight: 700; } /* ========================================================= 5. FORM TEXT Do not globally force monospace into ordinary text fields. ========================================================= */ input, select { font-size: inherit; } /* KYRGYZ_EBOOK_BRAND_POLISH_V4_END */ /* GLOBAL_ACTIVITY_BACK_BUTTON_V1_START */ /* ========================================================= GLOBAL BACK TO CHAPTER BUTTON Shared across all activity pages. Matches Activity 1 visual style. ========================================================= */ .back-btn, .back-to-chapter, .chapter-link, .game-back-to-chapter-btn, #back-btn, #back-to-chapter-btn, [id*="back-to-chapter"], [class*="back-to-chapter"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-height: 38px !important; padding: 8px 20px !important; border: 0 !important; border-radius: 999px !important; color: #173f73 !important; background: linear-gradient( 135deg, #efb368, #e8a45c ) !important; text-decoration: none !important; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; cursor: pointer !important; box-shadow: 0 6px 14px rgba( 23, 63, 115, .12 ) !important; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important; } /* --------------------------------------------------------- HOVER --------------------------------------------------------- */ .back-btn:hover, .back-to-chapter:hover, .chapter-link:hover, .game-back-to-chapter-btn:hover, #back-btn:hover, #back-to-chapter-btn:hover, [id*="back-to-chapter"]:hover, [class*="back-to-chapter"]:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 8px 18px rgba( 23, 63, 115, .16 ) !important; } /* --------------------------------------------------------- ACTIVE --------------------------------------------------------- */ .back-btn:active, .back-to-chapter:active, .chapter-link:active, .game-back-to-chapter-btn:active, #back-btn:active, #back-to-chapter-btn:active, [id*="back-to-chapter"]:active, [class*="back-to-chapter"]:active { transform: translateY(0); } /* --------------------------------------------------------- ARROW --------------------------------------------------------- */ .back-arrow, .game-back-arrow { color: #173f73 !important; font-size: 16px !important; font-weight: 800 !important; } /* --------------------------------------------------------- BILINGUAL STACK WHEN BUTTON HAS STRONG + SMALL --------------------------------------------------------- */ .back-btn strong, .back-to-chapter strong, .chapter-link strong, .game-back-to-chapter-btn strong { display: block; color: #173f73 !important; font-size: 12px !important; font-weight: 700 !important; } .back-btn small, .back-to-chapter small, .chapter-link small, .game-back-to-chapter-btn small { display: block; margin-top: 1px; color: rgba( 23, 63, 115, .78 ) !important; font-size: 9px !important; font-weight: 500 !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 650px) { .back-btn, .back-to-chapter, .chapter-link, .game-back-to-chapter-btn, #back-btn, #back-to-chapter-btn, [id*="back-to-chapter"], [class*="back-to-chapter"] { min-height: 34px !important; padding: 7px 15px !important; font-size: 12px !important; } } /* GLOBAL_ACTIVITY_BACK_BUTTON_V1_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: var(--ebook-kyrgyz-font) !important; -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: var(--ebook-kyrgyz-font) !important; } /* ---------------------------------------------------------- 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: var(--ebook-kyrgyz-font) !important; } /* ---------------------------------------------------------- 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: inherit; } /* ========================================================== EMOJI Browser will naturally fall back to the operating system emoji font where necessary. ========================================================== */ /* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_END */ /* FINAL_ACTIVITY_FONT_UNIFORMITY_V1_START */ /* ========================================================== FINAL ACTIVITY FONT UNIFORMITY Typography reference: Chapter I — Activity 1 / Digital Backpack Standard normal-text family: Arial, "Helvetica Neue", Helvetica, sans-serif Code / keyboard / terminal typography is intentionally left untouched. ========================================================== */ /* ---------------------------------------------------------- PAGE / GENERAL INTERFACE ---------------------------------------------------------- */ html, body, button, input, select, textarea { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; } /* ---------------------------------------------------------- NORMAL READING TEXT ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, p, label, li, th, td, .activity-title, .game-title, .quiz-title, .title, .subtitle, .description, .intro-text, .instruction, .instructions, .instruction-text, .question, .question-text, .question-title, .question-heading, .question-kicker, .question-ky, .question-kyrgyz, .ky-question, .challenge-question, .challenge-title, .quiz-question, .quiz-option, .prompt, .prompt-text, .scenario, .answer, .answer-text, .answer-option, .option, .option-btn, .choice, .choice-btn, .task-title, .task-question, .result-title, .result-message, .card-title, .card-text, .feedback, .explanation, .game-question { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; } /* ---------------------------------------------------------- NAVIGATION / ACTION BUTTON TEXT Includes all Back-to-Chapter variants currently used throughout the activities. ---------------------------------------------------------- */ .back-btn, .back-btn *, .back-to-chapter, .back-to-chapter *, .back-button, .back-button *, .chapter-back, .chapter-back *, .chapter-link, .chapter-link *, .activity-back, .activity-back *, .activity2-bottom-back, .activity2-bottom-back *, .game-back-to-chapter-btn, .game-back-to-chapter-btn *, #back-btn, #back-btn *, #back-to-chapter-btn, #back-to-chapter-btn *, [id*="back-to-chapter"], [id*="back-to-chapter"] *, [class*="back-to-chapter"], [class*="back-to-chapter"] * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; } /* ---------------------------------------------------------- PRESERVE PROGRAMMING / CODE TYPOGRAPHY These elements intentionally retain their own monospace fonts such as Consolas, Courier, Cascadia Code, etc. ---------------------------------------------------------- */ code, pre, kbd, samp, .code, .code *, .code-block, .code-block *, .editor, .editor *, .code-editor, .code-editor *, .terminal, .terminal *, .keyboard-key, .keyboard-key *, .shortcut-key, .shortcut-key *, .key, .key * { font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace !important; } /* FINAL_ACTIVITY_FONT_UNIFORMITY_V1_END */