/* QA Automation Academy styles (prefix: qa-). Palette is theme-scoped: light is the default, dark applies when (see the site-wide toggle in theme.css). */ :root { --qa-radius: 12px; } :root, html[data-theme="light"] { --qa-bg: #f5f6f8; --qa-panel: #ffffff; --qa-panel-2: #eef0f4; --qa-border: #d9dde4; --qa-text: #1c2027; --qa-muted: #5b6470; --qa-accent: #c25a38; /* warm clay, deepened for light backgrounds */ --qa-accent-2: #a8472a; --qa-accent-soft: #f6e9e2; --qa-ok: #2f9e5e; --qa-bad: #cf4b3a; } html[data-theme="dark"] { --qa-bg: #0f1115; --qa-panel: #171a21; --qa-panel-2: #1e222b; --qa-border: #2a2f3a; --qa-text: #e7e9ee; --qa-muted: #9aa3b2; --qa-accent: #d97757; /* warm clay */ --qa-accent-2: #e8a07f; --qa-accent-soft: #2a2018; --qa-ok: #4caf6e; --qa-bad: #e0604f; } /* ── Shell ───────────────────────────────────────────────────────── */ .qa-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--qa-bg); color: var(--qa-text); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .qa-header { display: flex; align-items: center; gap: 20px; padding: 14px 28px; border-bottom: 1px solid var(--qa-border); background: var(--qa-panel); position: sticky; top: 0; z-index: 10; } .qa-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--qa-text); text-decoration: none; } .qa-brand-mark { font-size: 1.4rem; } .qa-topnav { margin-left: auto; display: flex; gap: 18px; } /* Language switcher */ .qa-langswitch { display: flex; align-items: center; gap: 6px; } .qa-lang-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--qa-border); background: var(--qa-panel-2); color: var(--qa-muted); font-size: .8rem; font-weight: 600; text-decoration: none; cursor: pointer; } .qa-lang-pill:hover:not(:disabled) { color: var(--qa-text); } .qa-lang-pill.active { background: var(--qa-accent); color: #1a120c; border-color: var(--qa-accent); } .qa-lang-pill:disabled { opacity: .5; cursor: default; } .qa-admin-langswitch { margin: 8px 0 16px; } /* Language chooser landing */ .qa-chooser { text-align: center; padding: 60px 0; } .qa-chooser-sub { color: var(--qa-muted); margin: 10px 0 30px; } .qa-lang-cards { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } .qa-lang-card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 160px; padding: 26px 18px; background: var(--qa-panel); border: 1px solid var(--qa-border); border-radius: var(--qa-radius); text-decoration: none; color: var(--qa-text); transition: border-color .15s ease, transform .15s ease; } .qa-lang-card:hover { border-color: var(--qa-accent); transform: translateY(-2px); } .qa-lang-code { font-size: 1.6rem; font-weight: 700; color: var(--qa-accent); letter-spacing: .05em; } .qa-lang-name { font-size: 1.05rem; } .qa-topnav a { color: var(--qa-muted); text-decoration: none; font-size: .92rem; } .qa-topnav a:hover { color: var(--qa-text); } .qa-body { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px; box-sizing: border-box; } .qa-footer { border-top: 1px solid var(--qa-border); padding: 18px 28px; color: var(--qa-muted); font-size: .82rem; text-align: center; } /* ── Common bits ─────────────────────────────────────────────────── */ .qa-h1 { font-size: 1.7rem; margin: 6px 0 10px; } .qa-muted { color: var(--qa-muted); } .qa-back { display: inline-block; color: var(--qa-muted); text-decoration: none; font-size: .9rem; margin-bottom: 12px; } .qa-back:hover { color: var(--qa-accent-2); } .qa-btn { display: inline-block; background: var(--qa-accent); color: #1a120c; border: none; border-radius: 8px; padding: 10px 18px; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; transition: filter .15s ease; } .qa-btn:hover:not(:disabled) { filter: brightness(1.08); } .qa-btn:disabled { opacity: .5; cursor: default; } .qa-btn-secondary { background: transparent; color: var(--qa-text); border: 1px solid var(--qa-border); } .qa-btn-small { padding: 6px 12px; font-size: .85rem; } .qa-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--qa-panel-2); border: 1px solid var(--qa-border); color: var(--qa-muted); font-size: .78rem; } .qa-badge-ok { color: var(--qa-ok); border-color: rgba(76,175,110,.4); } .qa-badge-warn { color: #f0c9a8; border-color: #5a3a22; background: #2a1e14; } .qa-alert { background: #2a1e14; border: 1px solid #5a3a22; color: #f0c9a8; padding: 12px 16px; border-radius: 8px; margin: 14px 0; font-size: .92rem; } .qa-alert code { background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 4px; } .qa-field { display: flex; gap: 10px; align-items: center; margin: 12px 0; } .qa-input { width: 100%; background: var(--qa-panel-2); border: 1px solid var(--qa-border); border-radius: 8px; color: var(--qa-text); padding: 10px 12px; font-size: .95rem; font-family: inherit; box-sizing: border-box; resize: vertical; } .qa-input:focus { outline: none; border-color: var(--qa-accent); } .qa-loading { text-align: center; padding: 60px 0; color: var(--qa-muted); } /* ── Home / tracks ───────────────────────────────────────────────── */ .qa-hero { text-align: center; padding: 24px 0 8px; } .qa-hero-title { font-size: 2.2rem; margin: 0 0 12px; } .qa-hero-sub { color: var(--qa-muted); max-width: 680px; margin: 0 auto; line-height: 1.6; } .qa-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 28px; } .qa-track-card { background: var(--qa-panel); border: 1px solid var(--qa-border); border-radius: var(--qa-radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; } .qa-track-card { border-top: 3px solid var(--qa-border); } .qa-track-basic { border-top-color: #4caf6e; } .qa-track-intermediary { border-top-color: #d9a23f; } .qa-track-higher { border-top-color: var(--qa-accent); } .qa-track-badge { align-self: flex-start; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--qa-muted); background: var(--qa-panel-2); border: 1px solid var(--qa-border); padding: 3px 9px; border-radius: 999px; } .qa-track-name { font-size: 1.2rem; margin: 4px 0 0; } .qa-track-aud { color: var(--qa-muted); font-size: .9rem; flex: 1; line-height: 1.5; } .qa-track-card .qa-btn { align-self: flex-start; margin-top: 6px; } /* ── Outline ─────────────────────────────────────────────────────── */ .qa-outline-head { margin-bottom: 22px; } .qa-progress-line { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .qa-progress-track { flex: 1; height: 8px; background: var(--qa-panel-2); border-radius: 999px; overflow: hidden; } .qa-progress-fill { height: 100%; background: var(--qa-ok); transition: width .3s ease; } .qa-progress-label { color: var(--qa-muted); font-size: .85rem; white-space: nowrap; } .qa-stage { background: var(--qa-panel); border: 1px solid var(--qa-border); border-radius: var(--qa-radius); padding: 18px 20px; margin-bottom: 16px; } .qa-stage-head { display: flex; align-items: center; gap: 12px; } .qa-stage-title { font-size: 1.15rem; margin: 0; flex: 1; } .qa-stage-summary { color: var(--qa-muted); font-size: .9rem; margin: 6px 0 12px; } .qa-lesson-list { list-style: none; padding: 0; margin: 0; } .qa-lesson-row { border-top: 1px solid var(--qa-border); } .qa-lesson-row a { display: flex; align-items: center; gap: 10px; padding: 10px 4px; color: var(--qa-text); text-decoration: none; } .qa-lesson-row a:hover { color: var(--qa-accent-2); } .qa-lesson-check { color: var(--qa-muted); width: 18px; text-align: center; } .qa-lesson-done .qa-lesson-check { color: var(--qa-ok); } .qa-lesson-done .qa-lesson-title { color: var(--qa-muted); } .qa-empty { text-align: center; padding: 50px 0; } /* ── Lesson reader ───────────────────────────────────────────────── */ .qa-reader { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; } @media (max-width: 900px) { .qa-reader { grid-template-columns: 1fr; } } .qa-reader-crumb { color: var(--qa-muted); font-size: .85rem; margin-bottom: 6px; } .qa-lesson-body { background: var(--qa-panel); border: 1px solid var(--qa-border); border-radius: var(--qa-radius); padding: 26px 30px; line-height: 1.7; } .qa-lesson-body h2 { font-size: 1.6rem; margin-top: 0; } .qa-lesson-body h3 { font-size: 1.2rem; margin-top: 1.6em; color: var(--qa-accent-2); } .qa-lesson-body p { margin: 0 0 1em; } .qa-lesson-body ul, .qa-lesson-body ol { padding-left: 1.4em; margin: 0 0 1em; } .qa-lesson-body li { margin: .3em 0; } /* Code blocks stay terminal-style (dark) in BOTH themes, so force a light text colour — otherwise in light mode the inherited dark --qa-text is invisible. */ .qa-lesson-body code { background: #0c0e12; color: #e7e9ee; border: 1px solid var(--qa-border); border-radius: 4px; padding: 1px 5px; font-size: .88em; font-family: "Cascadia Code", Consolas, monospace; } .qa-lesson-body pre { background: #0c0e12; color: #e7e9ee; border: 1px solid var(--qa-border); border-radius: 8px; padding: 14px 16px; overflow-x: auto; } .qa-lesson-body pre code { background: none; border: none; padding: 0; } .qa-lesson-body table { border-collapse: collapse; width: 100%; margin: 0 0 1em; } .qa-lesson-body th, .qa-lesson-body td { border: 1px solid var(--qa-border); padding: 8px 10px; text-align: left; } .qa-lesson-body a { color: var(--qa-accent-2); } .qa-lesson-body blockquote { border-left: 3px solid var(--qa-accent); margin: 0 0 1em; padding: 4px 14px; color: var(--qa-muted); } .qa-reader-footer { margin-top: 20px; } .qa-complete-toggle { display: flex; align-items: center; gap: 8px; color: var(--qa-muted); cursor: pointer; margin-bottom: 16px; } .qa-complete-toggle input { width: 16px; height: 16px; accent-color: var(--qa-ok); } .qa-reader-nav { display: flex; justify-content: space-between; gap: 12px; } /* ── Tutor chat ──────────────────────────────────────────────────── */ .qa-reader-aside { position: sticky; top: 80px; } .qa-tutor { background: var(--qa-panel); border: 1px solid var(--qa-border); border-radius: var(--qa-radius); display: flex; flex-direction: column; max-height: calc(100vh - 120px); } .qa-tutor-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--qa-border); font-weight: 600; } .qa-tutor-icon { font-size: 1.2rem; } .qa-tutor-empty { padding: 16px; } .qa-tutor-log { flex: 1; overflow-y: auto; padding: 14px 16px; min-height: 160px; } .qa-tutor-hint { color: var(--qa-muted); font-size: .88rem; line-height: 1.5; } .qa-tutor-q { background: var(--qa-accent-soft); border: 1px solid #3a2c1e; color: var(--qa-accent-2); padding: 8px 12px; border-radius: 10px 10px 2px 10px; margin: 10px 0 6px auto; max-width: 90%; width: fit-content; font-size: .9rem; } .qa-tutor-a { background: var(--qa-panel-2); border: 1px solid var(--qa-border); padding: 10px 13px; border-radius: 10px 10px 10px 2px; margin: 0 0 12px; font-size: .9rem; line-height: 1.55; } .qa-tutor-a p { margin: 0 0 .7em; } .qa-tutor-a p:last-child { margin-bottom: 0; } .qa-tutor-a pre { background: #0c0e12; color: #e7e9ee; border: 1px solid var(--qa-border); border-radius: 6px; padding: 10px; overflow-x: auto; } .qa-tutor-a code { font-family: "Cascadia Code", Consolas, monospace; font-size: .85em; } .qa-tutor-typing { display: inline-flex; gap: 4px; } .qa-tutor-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--qa-muted); animation: qa-blink 1.2s infinite both; } .qa-tutor-typing span:nth-child(2) { animation-delay: .2s; } .qa-tutor-typing span:nth-child(3) { animation-delay: .4s; } @keyframes qa-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } } .qa-tutor-error { margin: 0 16px; } .qa-tutor-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--qa-border); } .qa-tutor-input .qa-input { flex: 1; } /* ── Admin ───────────────────────────────────────────────────────── */ .qa-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; } .qa-admin-card { background: var(--qa-panel); border: 1px solid var(--qa-border); border-radius: var(--qa-radius); padding: 18px; } .qa-admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .qa-admin-card-head h2 { font-size: 1.15rem; margin: 0; } .qa-admin-aud { color: var(--qa-muted); font-size: .85rem; line-height: 1.5; margin: 8px 0 14px; } .qa-gen { margin-top: 8px; } .qa-gen-phase { font-size: .85rem; color: var(--qa-accent-2); margin-bottom: 6px; } .qa-gen-bar { height: 8px; background: var(--qa-panel-2); border-radius: 999px; overflow: hidden; } .qa-gen-bar-fill { height: 100%; background: var(--qa-accent); transition: width .3s ease; } .qa-gen-detail { font-size: .8rem; color: var(--qa-muted); margin-top: 6px; } /* ── Quiz ────────────────────────────────────────────────────────── */ .qa-quiz-intro { background: var(--qa-panel); border: 1px solid var(--qa-border); border-radius: var(--qa-radius); padding: 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .qa-quiz-best { color: var(--qa-muted); } .qa-quiz-running-title { margin-bottom: 16px; } .qa-quiz-perfect { text-align: center; color: var(--qa-ok); font-weight: 600; margin: 18px 0; } .qa-quiz-status { margin-bottom: 8px; } /* Cross-link injected into the CCA-F exam header (QuizLayout). */ .ql-academy-link { margin-left: auto; color: #d97757; text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap; } .ql-academy-link:hover { text-decoration: underline; } /* ── User cabinet ────────────────────────────────────────────────────── */ .qa-cabinet { max-width: 880px; margin: 0 auto; } .qa-cabinet-stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0 24px; } .qa-cabinet-stat { flex: 1; min-width: 120px; background: var(--qa-panel); border: 1px solid var(--qa-border); border-radius: var(--qa-radius); padding: 18px; text-align: center; } .qa-cabinet-stat-num { display: block; font-size: 1.6rem; font-weight: 800; color: var(--qa-accent); line-height: 1; } .qa-cabinet-stat-label { display: block; font-size: .78rem; color: var(--qa-muted); margin-top: 6px; } .qa-cabinet-card { background: var(--qa-panel); border: 1px solid var(--qa-border); border-radius: var(--qa-radius); padding: 22px 24px; margin-bottom: 20px; } .qa-cabinet-h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; color: var(--qa-text); } .qa-cabinet-field { margin: 12px 0; max-width: 420px; } .qa-cabinet-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 12px; } .qa-cabinet-table th { text-align: left; color: var(--qa-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--qa-border); } .qa-cabinet-table td { padding: 10px 10px; border-bottom: 1px solid var(--qa-border); color: var(--qa-text); vertical-align: middle; } .qa-mono { font-family: "Cascadia Code", Consolas, monospace; font-size: .8rem; color: var(--qa-muted); } .qa-refund-box { background: var(--qa-panel-2); border-radius: 8px; padding: 14px 16px; } .qa-refund-actions { display: flex; gap: 10px; margin-top: 10px; } .qa-refund-note { font-size: .8rem; margin: 10px 0 0; } .qa-refund-note a { color: var(--qa-accent-2); } .qa-footer-links { margin-top: 8px; } .qa-footer-links a { color: var(--qa-muted); text-decoration: none; } .qa-footer-links a:hover { color: var(--qa-accent-2); text-decoration: underline; } /* Email verification (in the cabinet) */ .qa-cabinet-h3 { font-size: .98rem; font-weight: 700; margin: 0 0 4px; color: var(--qa-text); } .qa-verify-wrap { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--qa-border); } .qa-verify .qa-cabinet-field { max-width: 320px; } .qa-verify-msg { color: var(--qa-bad); font-size: .85rem; margin: 10px 0 0; } .qa-verify-done { display: flex; align-items: center; gap: 10px; color: var(--qa-text); font-size: .92rem; } .qa-verify-badge { display: inline-block; background: var(--qa-accent-soft); color: var(--qa-ok); border: 1px solid rgba(76, 175, 110, .4); border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 600; }