/* CloudExamPro Exam Engine — front-end stylesheet Design system carried over from the original simulator (color palette, card shapes, animation language) so the visual identity you already validated with users is preserved; interaction model updated for large touch-friendly option cards, dark mode, and a mobile bottom-sheet navigator per the approved UX spec. */ .cep-root { --cep-bg: #F0F4F8; --cep-surface: #FFFFFF; --cep-border: #E2E8F0; --cep-border-strong: #CBD5E1; --cep-text: #0F172A; --cep-text-secondary: #475569; /* WCAG AA fix: #94A3B8 on white/#FFF8EC only reached 2.56:1 — this text color is used at small sizes (.7-.85rem) throughout (domain %, replay timestamps, chip labels), well under the "large text" exemption, so it needs the full 4.5:1 minimum. */ --cep-text-muted: #64748B; --cep-accent: #FF9900; /* WCAG AA fix: #E68A00 on --cep-accent-bg only reached 2.49:1 — this is the domain badge shown on every single question, the highest-visibility failure in the sheet. */ --cep-accent-dark: #9C5D00; --cep-accent-bg: #FFF8EC; --cep-accent-border: #FFD899; /* WCAG AA fix: #059669 on --cep-success-bg only reached 3.58:1. */ --cep-success: #047857; --cep-success-bg: #ECFDF5; --cep-success-border: #6EE7B7; /* WCAG AA fix: #DC2626 on --cep-danger-bg reached 4.41:1 — just under the 4.5:1 minimum for the exam countdown timer's critical-state text. */ --cep-danger: #B91C1C; --cep-danger-bg: #FEF2F2; --cep-danger-border: #FCA5A5; /* WCAG AA fix: #D97706 on --cep-warning-bg only reached 3.07:1 — used for the countdown timer's warning state and the flagged-question outline. */ --cep-warning: #B45309; --cep-warning-bg: #FFFBEB; --cep-warning-border: #FCD34D; /* Separate, theme-constant color for the one place warning is used as a solid fill behind white text (.cep-btn-flag.cep-active) rather than as text on a tint — that use case needs a darker value than the dark-mode text case does, so a single shared variable can't satisfy both; kept fixed across themes the same way .cep-btn-primary/.cep-btn-danger's gradients already are. */ --cep-warning-solid: #B45309; --cep-r-md: 14px; --cep-r-lg: 20px; --cep-r-xl: 28px; --cep-shadow-sm: 0 2px 8px rgba(15,23,42,.08); --cep-shadow-md: 0 8px 24px rgba(15,23,42,.10); /* Premium-polish additions — purely additive, nothing above this line is changed, so nothing that already reads --cep-shadow-sm/md or the radius tokens is affected. --cep-shadow-lift is for the resting elevation of the question card (subtler than --cep-shadow-md, which stays reserved for its original callers); --cep-shadow-lift-hover is its hover-state counterpart. --cep-ease is the single easing curve used for every new micro-interaction transition added in this pass. */ --cep-shadow-lift: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.06); --cep-shadow-lift-hover: 0 2px 4px rgba(15,23,42,.05), 0 10px 24px rgba(15,23,42,.09); --cep-ease: cubic-bezier(.22,.61,.36,1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--cep-text); background: var(--cep-bg); border-radius: var(--cep-r-lg); padding: 16px; } .cep-root.cep-dark { --cep-bg: #0F172A; --cep-surface: #1E293B; --cep-border: #334155; --cep-border-strong: #475569; --cep-text: #F1F5F9; --cep-text-secondary: #CBD5E1; /* WCAG AA fix: the previous dark-mode override (#64748B) was *darker* than the light-mode default, which is backwards for a dark background — it only reached 3.07:1 against the dark surface. The lighter tone (which was the plugin's original light-mode value, before the fix above) is what actually passes here (5.71:1). */ --cep-text-muted: #94A3B8; --cep-accent-bg: #2A1F0F; --cep-success-bg: #052E22; --cep-danger-bg: #2D0F0F; --cep-warning-bg: #2A1F0A; /* WCAG AA fix: the light-mode-tuned darker values above (accent-dark, success, danger) read as text on these near-black tinted backgrounds and need the opposite adjustment — lighter, not darker — to stay above 4.5:1. --cep-warning is the one exception that already passes here at its original (pre-fix) value, so it's restored rather than re-lightened. */ --cep-accent-dark: #E68A00; --cep-success: #10B981; --cep-danger: #F87171; --cep-warning: #D97706; } .cep-root * { box-sizing: border-box; } .cep-boot-loading, .cep-boot-error { padding: 48px; text-align: center; color: var(--cep-text-secondary); } .cep-boot-error { color: var(--cep-danger); } /* SSR content (ExamShortcode::render_picker_ssr_html()/render_single_ssr_html(), v1.19.8) — the real, crawlable markup rendered server-side into the mount point in place of the old bare "Loading…" text. Left visible only until exam-engine.js's boot() overwrites #cep-exam-root's innerHTML with the interactive picker/player, which it always did unconditionally on every page load regardless of what was in there before — see that method's docblock. Styled plainly so it reads as real page content for that brief window and for any visitor with JavaScript disabled, without trying to visually match the JS-rendered cards it's replaced by moments later. */ .cep-ssr-content { padding: 24px 0; } .cep-ssr-content h1 { font-size: 1.75rem; font-weight: 700; color: var(--cep-text); margin: 0 0 8px; } .cep-ssr-content h2 { font-size: 1.15rem; font-weight: 700; color: var(--cep-text); margin: 24px 0 8px; } .cep-ssr-content p, .cep-ssr-content li { color: var(--cep-text-secondary); line-height: 1.6; } .cep-ssr-provider { font-weight: 600; color: var(--cep-accent-dark); margin: 0 0 16px; } .cep-ssr-exam-list, .cep-ssr-domain-list { list-style: disc; padding-left: 1.25em; margin: 0; } .cep-ssr-exam-list li, .cep-ssr-domain-list li { margin-bottom: 6px; } /* Boot-sequence progress bar (beginAttempt()/renderModeSelection() in exam-engine.js) — replaces the old plain "Loading exam…" text with a centered, Udemy-style animated bar + bold percentage while the /start and mode-list REST calls are in flight. */ .cep-boot-progress { max-width: 320px; margin: 0 auto; } .cep-boot-progress-label { font-size: .95rem; font-weight: 600; color: var(--cep-text); margin-bottom: 14px; } .cep-boot-progress-pct { display: inline-block; min-width: 2.6em; font-weight: 700; color: var(--cep-accent-dark); } .cep-boot-progress-track { height: 8px; background: var(--cep-border); border-radius: 99px; overflow: hidden; } .cep-boot-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--cep-accent), #FFB84D); border-radius: 99px; transition: width .25s ease; } /* Exam-taking screen — scoped so these overrides never leak into the mode picker or results screens. Compact, calm, distraction-free: header, progress bar, question and options all reduced in height/padding so the whole attempt fits one screen at 1366x768 and 1920x1080 without the student needing to scroll past chrome to reach the question. */ .cep-exam-screen { --cep-x-accent: #2563EB; --cep-x-accent-dark: #1D4ED8; --cep-x-accent-bg: #EFF6FF; --cep-x-accent-border: #BFDBFE; } .cep-exam-screen .cep-cert-header { margin-bottom: 0; } .cep-exam-screen .cep-cert-logo { width: 28px; height: 28px; } .cep-exam-screen .cep-cert-name { font-size: .82rem; } .cep-exam-header { position: sticky; top: 0; z-index: 20; background: var(--cep-surface); border: 1px solid var(--cep-border); border-radius: 12px; padding: 10px 16px; display: flex; align-items: center; gap: 16px; margin-bottom: 12px; box-shadow: var(--cep-shadow-lift); } .cep-exam-header-mid { flex: 1; min-width: 0; font-size: .85rem; font-weight: 700; letter-spacing: .01em; color: var(--cep-text-secondary); } .cep-exam-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .cep-exam-screen .cep-progress-track { height: 5px; margin-bottom: 12px; } .cep-exam-screen .cep-progress-fill { background: linear-gradient(90deg, var(--cep-x-accent), #60A5FA); box-shadow: 0 0 8px rgba(37,99,235,.35); } .cep-exam-screen .cep-timer { font-size: .95rem; padding: 5px 12px; } .cep-exam-screen .cep-btn { padding: 6px 12px; font-size: .8rem; min-height: 34px; } .cep-exam-screen .cep-btn-primary, .cep-exam-screen .cep-btn-danger { background: var(--cep-x-accent); color: #fff; } .cep-exam-screen .cep-btn-primary:hover, .cep-exam-screen .cep-btn-danger:hover { background: var(--cep-x-accent-dark); box-shadow: 0 3px 10px rgba(29,78,216,.32); } .cep-exam-screen .cep-btn-flag.cep-active, .cep-exam-screen .cep-btn-bookmark.cep-active { background: var(--cep-x-accent); color: #fff; border-color: var(--cep-x-accent); box-shadow: 0 2px 6px rgba(37,99,235,.28); } /* Layout */ .cep-exam-screen .cep-body { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .cep-exam-screen .cep-main { flex: 1; min-width: 0; } .cep-exam-screen .cep-sidebar { width: 178px; flex-shrink: 0; } @media (max-width: 900px) { .cep-exam-screen .cep-sidebar { width: 100%; order: 2; } .cep-exam-screen .cep-main { order: 1; } } /* ------------------------------------------------------------------ NATIVE IN-FLOW LAYOUT (v1.19.3) v1.19.1's "Focus Mode Isolation" promoted .cep-exam-screen into a `position: fixed; inset: 0; z-index: 999900` full-viewport layer and forcibly hid #wpadminbar whenever an attempt was active. That is exactly the class of theme-hiding hack this release removes: on real themes it produced overlapping/transparent chrome and broken footer stacking, trading one visual bug (header bleed-through) for a worse one (a corrupted page layout). .cep-exam-screen is deliberately a plain in-flow block again — it renders inside the shortcode's own `.cep-exam-wrapper`/#cep-exam-root mount point exactly where the theme placed it, and never reaches into / or touches the site's header/footer/admin bar. `.cep-exam-header` keeps its own `position: sticky; top: 0;` (below) so it still stays visible while scrolling *within* the page's normal flow, without ever needing to sit above the rest of the site. */ /* Question card — the focal point of the page */ .cep-exam-screen .cep-q-card { background: var(--cep-surface); border: 1px solid var(--cep-border); border-radius: 14px; box-shadow: var(--cep-shadow-lift); padding: 18px 20px; margin-bottom: 10px; transition: box-shadow .2s var(--cep-ease); } .cep-exam-screen .cep-q-meta { margin-bottom: 12px; } .cep-exam-screen .cep-q-badge { background: var(--cep-x-accent-bg); color: var(--cep-x-accent-dark); border-color: var(--cep-x-accent-border); font-size: .68rem; padding: 4px 10px; letter-spacing: .03em; text-transform: uppercase; } .cep-exam-screen .cep-q-text { font-size: 1.125rem; font-weight: 600; line-height: 1.6; margin-bottom: 16px; color: var(--cep-text); letter-spacing: -.005em; } .cep-exam-screen .cep-options { gap: 8px; } .cep-exam-screen .cep-option { padding: 13px 14px; border-radius: 11px; min-height: 46px; gap: 12px; /* Border-width is intentionally the same (2px) in every state below — only its color/background/shadow change on hover/select. Udemy-style "thick border" selection needs to read as a state change, not a resize: a border that grows from 1.5px to 3px on click nudges every other option down/up by a pixel and reads as a layout glitch rather than a selection. The box-shadow ring added on .cep-selected below is what supplies the extra visual weight instead. */ border: 2px solid var(--cep-border); background: var(--cep-bg); transition: border-color .18s var(--cep-ease), background-color .18s var(--cep-ease), box-shadow .18s var(--cep-ease); } .cep-exam-screen .cep-option:hover:not(.cep-locked):not(.cep-at-cap) { border-color: var(--cep-x-accent-border); background: var(--cep-x-accent-bg); transform: none; box-shadow: 0 2px 8px rgba(37,99,235,.14); } .cep-exam-screen .cep-option.cep-selected { border-color: var(--cep-x-accent); background: var(--cep-x-accent-bg); /* The "thick border" look: a solid 2px border plus a soft outer ring (box-shadow, not a wider border — see the note above) reading as a 3-4px band of color around the option, plus a subtle lift shadow so a selected option visibly sits above the rest of the list. */ box-shadow: 0 0 0 3px var(--cep-x-accent-border), 0 3px 10px rgba(37,99,235,.18); } /* Specificity fix: .cep-option:hover:not(.cep-locked):not(.cep-at-cap) above has 5 class/pseudo-class selectors, which outranked the 4 this rule used to have — so hovering a just-clicked option (the cursor is still sitting on it right after the click) silently fell back to the plain unselected-hover style, making the selection look like it never registered. The extra :not() clauses here don't change what this rule matches (a selected option is never simultaneously .cep-locked or .cep-at-cap), they only raise its specificity to 6 so it reliably wins regardless of source order. */ .cep-exam-screen .cep-option.cep-selected:hover:not(.cep-locked):not(.cep-at-cap) { background: #DBEAFE; border-color: var(--cep-x-accent); box-shadow: 0 0 0 3px var(--cep-x-accent-border), 0 3px 10px rgba(37,99,235,.22); } .cep-exam-screen .cep-option:focus-visible { outline: 3px solid var(--cep-x-accent); outline-offset: 2px; } .cep-exam-screen .cep-option-letter { min-width: 27px; height: 27px; border-radius: 9px; font-size: .82rem; box-shadow: inset 0 0 0 1px rgba(15,23,42,.03); transition: background-color .18s var(--cep-ease), color .18s var(--cep-ease), box-shadow .18s var(--cep-ease); } /* Selected option's letter/number chip fills solid instead of just the card border changing — same "this one, unmistakably" signal Udemy's filled radio/checkbox glyph gives, adapted to this UI's lettered-chip style instead of a separate radio input. */ .cep-exam-screen .cep-option.cep-selected .cep-option-letter { background: var(--cep-x-accent); color: #fff; box-shadow: 0 1px 3px rgba(37,99,235,.35); } .cep-exam-screen .cep-option-text { font-size: .9375rem; font-weight: 500; line-height: 1.5; } .cep-exam-screen .cep-nav { margin-top: 10px; } .cep-exam-screen .cep-nav .cep-btn { flex: 1; justify-content: center; min-height: 42px; font-size: .85rem; } /* Content protection (casual-copy deterrent only — see bindContentProtection()'s docblock in exam-engine.js for what this does and doesn't actually stop). Scoped to the live exam-taking screen's question card/text/options — nav buttons, flag/bookmark, timer, and the question map are untouched and stay fully selectable/interactive. Also covers the post-submit Results screen (.cep-results-container) and its embedded Review list (buildReviewCardsHtml()'s .cep-review-card markup, which is what #cep-review-section is actually built from) — same question text/options/explanation content the exam screen already protects, just being read back afterward instead of answered live. Exception: the Question Discussions & Instructor Notes panel (.cep-discussion-panel) — the comment composer, the search-style inputs it contains, and every already-posted comment — is explicitly carved back out to `text`/`auto` further down, on both screens, so paid students can keep reading, selecting, and typing there normally. */ .cep-exam-screen .cep-q-card, .cep-exam-screen .cep-q-text, .cep-exam-screen .cep-option, .cep-results-container .cep-official-card, .cep-results-container .cep-review-card, .cep-review-card, .cep-results-container .cep-q-text, .cep-review-card .cep-q-text, .cep-results-container .cep-option, .cep-review-card .cep-option, .cep-results-container .cep-explanation, .cep-review-card .cep-explanation { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Carve the Discussion panel back out of the protection above — applies regardless of which of the two selector groups above put it in a no-select ancestor. */ .cep-discussion-panel, .cep-discussion-panel input, .cep-discussion-panel textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } @media print { /* The shortcode's actual mount point is #cep-exam-root, carrying both .cep-root (shared base styling) and .cep-exam-wrapper (the plain native container — see ExamShortcode.php render_picker_mount()/ render_single_mount()). This hides the mode-picker and results screens from printing too, not just the exam-taking screen — deliberate, since Ctrl+P/"Save as PDF" is exactly as capable of capturing a results/review screen's question review (See Answers) as the live exam screen itself. */ #cep-exam-root { display: none !important; } } /* Question palette — compact, circular, five columns, always visible (never hidden behind a "Question Map" toggle on any screen size) */ .cep-exam-screen .cep-q-map { display: grid; grid-template-columns: repeat(5, 30px); gap: 5px; justify-content: start; } @media (max-width: 900px) { .cep-exam-screen .cep-q-map { grid-template-columns: repeat(10, 30px); } } @media (max-width: 480px) { .cep-exam-screen .cep-q-map { grid-template-columns: repeat(6, 30px); } } .cep-exam-screen .cep-q-map-btn { width: 30px; height: 30px; border-radius: 50%; font-size: .68rem; border: 1.5px solid var(--cep-border-strong) !important; background: var(--cep-surface) !important; padding: 0; color: var(--cep-text) !important; font-weight: 700 !important; } .cep-exam-screen .cep-q-map-btn.cep-current { background: var(--cep-x-accent) !important; border-color: var(--cep-x-accent) !important; color: #fff !important; } .cep-exam-screen .cep-q-map-btn.cep-answered { background: var(--cep-x-accent-bg) !important; border-color: var(--cep-x-accent-border) !important; color: var(--cep-text) !important; } .cep-exam-screen .cep-q-map-btn.cep-flagged { outline: 2px solid var(--cep-warning); } /* Visual progress bar — mirrors the "Question X of Y" text label above it (#cep-progress-fill's width is set in JS every time that label updates), reproducing the original HTML tool's fill bar. Deliberately has no max-width media query hiding it on mobile, unlike .cep-sidebar — it must render identically on both. */ .cep-progress-track { height: 6px; background: var(--cep-border); border-radius: 99px; overflow: hidden; margin-bottom: 16px; } .cep-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--cep-accent), #FFB84D); border-radius: 99px; transition: width .35s ease; } /* Certification header — logo + name, shown at the top of the mode-selection, exam-taking, and results screens (buildCertHeaderHtml()). object-fit:contain preserves the uploaded image's aspect ratio/quality at any of these sizes rather than stretching or cropping it. */ .cep-cert-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .cep-cert-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--cep-surface); border: 1px solid var(--cep-border); flex-shrink: 0; } .cep-cert-name { font-weight: 700; font-size: 1rem; color: var(--cep-text); } @media (max-width: 480px) { .cep-cert-logo { width: 34px; height: 34px; } .cep-cert-name { font-size: .85rem; } } .cep-timer { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: 1.1rem; padding: 6px 14px; border-radius: 8px; background: var(--cep-bg); border: 1px solid var(--cep-border); } .cep-timer.cep-warn { background: var(--cep-warning-bg); border-color: var(--cep-warning-border); color: var(--cep-warning); } .cep-timer.cep-crit { background: var(--cep-danger-bg); border-color: var(--cep-danger-border); color: var(--cep-danger); animation: cepPulse 1s ease-in-out infinite; } @keyframes cepPulse { 0%,100%{opacity:1} 50%{opacity:.6} } .cep-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; padding: 8px 16px; border-radius: 9px; border: 1.5px solid var(--cep-border); background: var(--cep-surface); color: var(--cep-text); cursor: pointer; transition: border-color .15s var(--cep-ease), background-color .15s var(--cep-ease), box-shadow .15s var(--cep-ease), transform .15s var(--cep-ease); min-height: 40px; } .cep-btn:hover:not(:disabled) { border-color: var(--cep-accent); box-shadow: var(--cep-shadow-lift); } .cep-btn:active:not(:disabled) { transform: translateY(1px); } .cep-btn:focus-visible { outline: 3px solid var(--cep-accent); outline-offset: 2px; } .cep-btn:disabled { opacity: .5; cursor: not-allowed; } .cep-btn-primary { background: linear-gradient(135deg,#FF9900,#E68A00); color: #fff; border: none; } .cep-btn-primary:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(230,138,0,.32); } .cep-btn-danger { background: linear-gradient(135deg,#DC2626,#B91C1C); color: #fff; border: none; } .cep-btn-danger:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(185,28,28,.32); } .cep-btn-flag.cep-active { background: var(--cep-warning-solid); color: #fff; border-color: var(--cep-warning-solid); } .cep-btn-bookmark.cep-active { background: #7C3AED; color: #fff; border-color: #7C3AED; } .cep-btn-ghost { background: transparent; } .cep-btn-sm { padding: 6px 12px; font-size: .78rem; min-height: 32px; } .cep-btn-lg { padding: 12px 24px; font-size: .95rem; min-height: 48px; } .cep-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: .65rem; font-weight: 700; } .cep-badge-green { background: var(--cep-success-bg); color: var(--cep-success); } .cep-badge-blue { background: var(--cep-accent-bg); color: var(--cep-accent-dark); } /* Layout */ .cep-body { display: flex; gap: 16px; align-items: flex-start; } .cep-main { flex: 1; min-width: 0; } .cep-sidebar { width: 220px; flex-shrink: 0; } /* Question card */ .cep-q-card { background: var(--cep-surface); border: 1px solid var(--cep-border); border-radius: var(--cep-r-xl); box-shadow: var(--cep-shadow-md); padding: 24px; margin-bottom: 16px; } .cep-q-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; } .cep-q-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; background: var(--cep-accent-bg); color: var(--cep-accent-dark); border: 1px solid var(--cep-accent-border); } .cep-q-text { font-size: 1.05rem; font-weight: 500; line-height: 1.7; margin-bottom: 20px; } /* Large, touch-friendly option cards (NOT small radio buttons, per spec) */ .cep-options { display: flex; flex-direction: column; gap: 12px; } .cep-option { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: var(--cep-r-md); border: 2px solid var(--cep-border); background: var(--cep-bg); cursor: pointer; transition: all .15s ease-in-out; min-height: 56px; } .cep-option:hover:not(.cep-locked):not(.cep-at-cap) { border-color: var(--cep-accent); background: var(--cep-accent-bg); transform: translateX(2px); } .cep-option.cep-at-cap { cursor: not-allowed; opacity: .55; } .cep-option.cep-at-cap:hover { transform: none; } .cep-option:focus-visible { outline: 3px solid var(--cep-accent); outline-offset: 2px; } .cep-option.cep-selected { border-color: var(--cep-accent); background: var(--cep-accent-bg); } /* Same specificity fix as .cep-exam-screen .cep-option.cep-selected:hover above: without this rule, .cep-option:hover:not(.cep-locked):not(.cep-at-cap) (4 selectors) silently overrode .cep-selected (2 selectors) while the option was hovered, which is exactly the moment right after a click. transform is pinned to none so an already-selected option doesn't also get the unselected-hover translateX(2px) nudge. */ .cep-option.cep-selected:hover:not(.cep-locked):not(.cep-at-cap) { border-color: var(--cep-accent); background: var(--cep-accent-bg); transform: none; } .cep-option.cep-correct { border-color: var(--cep-success); background: var(--cep-success-bg); } .cep-option.cep-wrong { border-color: var(--cep-danger); background: var(--cep-danger-bg); } .cep-option-letter { min-width: 32px; height: 32px; border-radius: 8px; background: rgba(15,23,42,.08); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cep-option-text { flex: 1; line-height: 1.6; } /* Material-style tap ripple (see spawnOptionRipple() in exam-engine.js). Deliberately NOT a child of .cep-option: toggleOption() re-renders the entire #cep-options container synchronously on every click (to update selection state), which would destroy an option-child ripple before it ever got a chance to paint. Instead exam-engine.js lazily creates one shared #cep-ripple-layer overlay (position: fixed, full-viewport, pointer-events: none) attached directly to document.body — outside #cep-main entirely, so it's completely unaffected by any question re-render — and every ripple is one absolutely-positioned span placed at the actual click/tap coordinates within it. One implementation, reused for every option, animated purely via `transform`/`opacity` (both compositor-only, so this never triggers layout or paint on its own) — smooth on mobile without extra work. Selection color (border/background) is handled entirely by .cep-option.cep-selected above and is unaffected by — and outlasts — this animation, per spec ("selected state should remain clearly visible after the ripple animation finishes"). */ #cep-ripple-layer { position: fixed; inset: 0; pointer-events: none; z-index: 999999; overflow: hidden; } .cep-option-ripple { position: absolute; border-radius: 50%; background: var(--cep-accent); opacity: .30; transform: translate(-50%, -50%) scale(0); animation: cep-ripple-expand .45s ease-out forwards; } @keyframes cep-ripple-expand { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cep-option-ripple { animation: none; display: none; } } .cep-explanation { margin-top: 18px; padding: 16px 20px; border-left: 4px solid var(--cep-accent); background: var(--cep-accent-bg); border-radius: 0 12px 12px 0; } .cep-explanation strong { display: block; margin-bottom: 6px; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cep-text-secondary); } /* Standardized "The Correct Answer is A." / "The Correct Answers are A and C." lead-in (see buildCorrectAnswerHeader() in exam-engine.js) — deliberately overrides .cep-explanation strong's block/uppercase/small styling above (meant for the "EXPLANATION" label, not this), since this sits inline directly ahead of the explanation paragraph's own text. */ .cep-explanation strong.cep-explanation-answer { display: inline; text-transform: none; letter-spacing: normal; font-size: inherit; margin-bottom: 0; color: var(--cep-accent-dark); } /* Prominent reference CTA — the source link is intentionally presented as a distinct premium-style action rather than an easy-to-miss inline word. */ .cep-reference-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 14px 14px 14px 16px; border: 1px solid rgba(245, 197, 66, .72); border-left: 4px solid #F5C542; border-radius: 10px; background: linear-gradient(110deg, #111827 0%, #263449 100%); box-shadow: 0 5px 15px rgba(15, 23, 42, .25); } .cep-reference-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .cep-reference-kicker { display: flex; align-items: center; gap: 7px; margin: 0 !important; font-size: .78rem !important; font-weight: 900; letter-spacing: .14em !important; text-transform: uppercase !important; color: #F5C542 !important; } .cep-reference-icon { font-size: .95rem; line-height: 1; letter-spacing: normal; } .cep-reference-label { display: inline-flex; align-items: center; margin: 0 !important; font-size: .86rem !important; font-weight: 700; letter-spacing: .01em !important; text-transform: none !important; color: #FFF !important; } .cep-reference-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 13px; border-radius: 7px; box-sizing: border-box; background: linear-gradient(180deg, #F5C542 0%, #D6A72C 100%) !important; color: #111827 !important; font-size: .78rem; font-weight: 800; line-height: 1.2; text-decoration: none !important; box-shadow: 0 2px 5px rgba(0, 0, 0, .28); transition: filter .15s ease, transform .15s ease; } .cep-reference-link:hover, .cep-reference-link:focus-visible { background: linear-gradient(180deg, #FFD866 0%, #E4B634 100%) !important; color: #111827 !important; filter: brightness(1.05); transform: translateY(-1px); } @media (max-width: 480px) { .cep-reference-box { align-items: stretch; flex-direction: column; gap: 11px; margin-top: 16px; padding: 13px 13px 13px 14px; } .cep-reference-link { width: 100%; justify-content: center; box-sizing: border-box; } } /* ------------------------------------------------------------------ QUESTION DISCUSSIONS & INSTRUCTOR NOTES Rendered directly beneath .cep-explanation in both Practice Mode (renderQuestion()) and Exam Review (buildReviewCardsHtml()) — see buildDiscussionPanelHtml() in exam-engine.js. Collapsed by default; comments load lazily on first expand. ------------------------------------------------------------------ */ .cep-discussion-panel { margin-top: 14px; border: 1.5px solid var(--cep-border); border-radius: var(--cep-r-md); overflow: hidden; background: var(--cep-surface); } .cep-discussion-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: transparent; border: none; cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--cep-text); text-align: left; } .cep-discussion-toggle:hover { background: var(--cep-bg); } .cep-discussion-toggle:focus-visible { outline: 3px solid var(--cep-accent); outline-offset: -3px; } .cep-discussion-chevron { transition: transform .15s var(--cep-ease); color: var(--cep-text-muted); font-size: .8rem; } .cep-discussion-toggle[aria-expanded="true"] .cep-discussion-chevron { transform: rotate(180deg); } .cep-discussion-body { padding: 4px 16px 16px; border-top: 1px solid var(--cep-border); } .cep-discussion-body.cep-hidden { display: none; } .cep-discussion-status { font-size: .85rem; color: var(--cep-text-muted); padding: 12px 2px; margin: 0; } .cep-discussion-error { color: var(--cep-danger); } .cep-discussion-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .cep-discussion-item { padding: 12px 14px; border-radius: 10px; background: var(--cep-bg); border: 1px solid var(--cep-border); } .cep-discussion-item-instructor { background: var(--cep-accent-bg); border: 1px solid var(--cep-accent-border); border-left: 3px solid var(--cep-accent); } .cep-discussion-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } .cep-discussion-author { font-weight: 700; font-size: .82rem; color: var(--cep-text); } .cep-discussion-date { font-size: .74rem; color: var(--cep-text-muted); margin-left: auto; } .cep-discussion-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; background: var(--cep-accent-dark); color: #fff; } .cep-discussion-text { margin: 0 0 8px; font-size: .87rem; line-height: 1.5; color: var(--cep-text-secondary); white-space: pre-wrap; word-break: break-word; } .cep-discussion-upvote { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--cep-border); background: var(--cep-surface); color: var(--cep-text-secondary); font-size: .78rem; font-weight: 600; cursor: pointer; } .cep-discussion-upvote:hover:not(:disabled) { border-color: var(--cep-accent-border); background: var(--cep-accent-bg); } .cep-discussion-upvote:disabled { cursor: default; } .cep-discussion-upvote.cep-discussion-upvoted { border-color: var(--cep-accent); color: var(--cep-accent-dark); } /* Paid/logged-in composer */ .cep-discussion-composer { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--cep-border); } .cep-discussion-input { width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--cep-border); background: var(--cep-bg); color: var(--cep-text); font-family: inherit; font-size: .85rem; resize: vertical; box-sizing: border-box; } .cep-discussion-input:focus { outline: none; border-color: var(--cep-accent); } .cep-discussion-composer .cep-discussion-post-btn { margin-top: 8px; } .cep-discussion-form-error { color: var(--cep-danger); } /* Guest-mode conversion trigger */ .cep-discussion-guest-cta-btn { margin-top: 14px; } /* Guest conversion CTA modal — appended to document.body by openDiscussionGuestCtaModal(), same fixed-overlay pattern as .cep-pause-overlay. Deliberately informational only: closing it never affects exam state. */ .cep-discussion-cta-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: flex; align-items: center; justify-content: center; /* Appended straight to document.body — must clear the WP admin bar (z-index: 99999) regardless of whether this is opened from inside an active attempt or from the Student Dashboard/Review with no active attempt at all. Kept below #cep-ripple-layer (999999), which always stays topmost. */ z-index: 999950; padding: 16px; } .cep-discussion-cta-box { position: relative; background: var(--cep-surface); border-radius: var(--cep-r-xl); padding: 32px; max-width: 420px; width: 100%; text-align: center; box-shadow: var(--cep-shadow-md); } .cep-discussion-cta-box h3 { margin: 0 0 10px; font-size: 1.1rem; color: var(--cep-text); } .cep-discussion-cta-box p { margin: 0 0 20px; font-size: .9rem; line-height: 1.55; color: var(--cep-text-secondary); } .cep-discussion-cta-close { position: absolute; top: 12px; right: 12px; border: none; background: transparent; font-size: 1rem; line-height: 1; color: var(--cep-text-muted); cursor: pointer; padding: 6px; } .cep-discussion-cta-actions { display: flex; flex-direction: column; gap: 10px; } .cep-discussion-cta-actions .cep-btn { width: 100%; justify-content: center; } /* ------------------------------------------------------------------ "READY TO SUBMIT?" CONFIRMATION MODAL Replaces the native confirm() previously shown by confirmFinish() in exam-engine.js. Same fixed-overlay pattern as .cep-pause-overlay / .cep-discussion-cta-overlay, plus a backdrop blur and a fade/scale-in entrance so it reads as an intentional, on-brand moment rather than a browser chrome dialog. NOTE: openSubmitConfirmModal() appends this overlay directly to document.body (not inside .cep-root), so none of the --cep-* custom properties defined on .cep-root are in scope here — that's why the box previously had no background (`background: var(--cep-surface)` silently resolved to nothing outside .cep-root). Every color below is therefore a hardcoded value, not a --cep-* var, so this component renders correctly regardless of where in the DOM it's mounted. ------------------------------------------------------------------ */ .cep-submit-confirm-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; /* Same rationale as .cep-discussion-cta-overlay above — this is always opened from inside an active attempt (confirmFinish()), so it must clear the WP admin bar (z-index: 99999), while staying below #cep-ripple-layer (999999). */ z-index: 999960; padding: 16px; animation: cep-submit-confirm-fade-in .18s cubic-bezier(.22,.61,.36,1); } @keyframes cep-submit-confirm-fade-in { from { opacity: 0; } to { opacity: 1; } } .cep-submit-confirm-box { position: relative; background: #ffffff; border-radius: 16px; padding: 32px; max-width: 480px; width: 100%; margin: 0 auto; text-align: center; box-shadow: 0 20px 25px -5px rgba(0,0,0,.15); border-top: 4px solid #2563EB; animation: cep-submit-confirm-pop-in .22s cubic-bezier(.22,.61,.36,1); } .cep-submit-confirm-box-warning { border-top-color: #EF4444; } @keyframes cep-submit-confirm-pop-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .cep-submit-confirm-overlay, .cep-submit-confirm-box { animation: none; } } .cep-submit-confirm-box h3 { margin: 0 0 12px; font-size: 21px; font-weight: 700; color: #111827; line-height: 1.3; } .cep-submit-confirm-box .cep-submit-confirm-count { margin: 0 0 12px; font-size: .92rem; color: #111827; background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 10px; padding: 10px 14px; } .cep-submit-confirm-box .cep-submit-confirm-count strong { color: #DC2626; font-weight: 800; } .cep-submit-confirm-box .cep-submit-confirm-body { margin: 0 0 24px; font-size: 14px; line-height: 1.55; color: #4B5563; } .cep-submit-confirm-actions { display: flex; gap: 12px; justify-content: center; } .cep-submit-confirm-actions .cep-btn { flex: 1 1 0; justify-content: center; min-height: 46px; } @media (max-width: 400px) { .cep-submit-confirm-actions { flex-direction: column-reverse; } } /* Button colors — hardcoded for the same DOM-scope reason as the box above. "Return to Exam" carries no .cep-btn-primary class in the JS (see openSubmitConfirmModal()), so it's styled directly by its own .cep-submit-confirm-cancel class rather than relying on that. Kept as a subtle/secondary style (not the blue primary look) so it doesn't visually compete with the actual submit action next to it. */ .cep-submit-confirm-box .cep-submit-confirm-cancel { background: #F3F4F6; border: none; color: #374151; } .cep-submit-confirm-box .cep-submit-confirm-cancel:hover { background: #E5E7EB; } .cep-submit-confirm-box .cep-btn-danger { background: #EF4444; border: none; color: #ffffff; } .cep-submit-confirm-box .cep-btn-danger:hover { background: #DC2626; box-shadow: 0 3px 10px rgba(220,38,38,.32); } .cep-submit-confirm-box .cep-btn-primary { background: #2563EB; border: none; color: #ffffff; } .cep-submit-confirm-box .cep-btn-primary:hover { background: #1D4ED8; box-shadow: 0 3px 10px rgba(37,99,235,.32); } .cep-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; } /* Question navigator (desktop sidebar / mobile bottom sheet) */ .cep-q-map { display: flex; flex-wrap: wrap; gap: 6px; } .cep-q-map-btn { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--cep-border); background: var(--cep-surface); font-size: .72rem; font-weight: 700; cursor: pointer; } .cep-q-map-btn:focus-visible { outline: 3px solid var(--cep-accent); outline-offset: 2px; } .cep-q-map-btn.cep-current { background: var(--cep-accent); border-color: var(--cep-accent); color: #fff; } .cep-q-map-btn.cep-answered { background: var(--cep-accent-bg); border-color: var(--cep-accent-border); } .cep-q-map-btn.cep-flagged { outline: 2px solid var(--cep-warning); } /* Reduced motion: honor the OS-level preference for anyone sensitive to animation (vestibular disorders, migraine triggers) — the countdown pulse and hover/selection transitions are cosmetic, never load-bearing for understanding exam state, so disabling them costs nothing functionally. */ @media (prefers-reduced-motion: reduce) { .cep-timer.cep-crit { animation: none; } .cep-btn, .cep-option, .cep-domain-fill, .cep-progress-fill, .cep-boot-progress-fill { transition: none; } } /* Results */ /* Results screen header row — pins Retake Exam / View Session Replay to the top-right, on the same row as the score/Pass-Fail card, so both primary actions are visible immediately without scrolling. */ .cep-results-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .cep-results-header-row .cep-official-card { flex: 1 1 420px; margin-bottom: 0; } .cep-results-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; width: 220px; } .cep-results-actions .cep-btn { width: 100%; justify-content: center; white-space: nowrap; } @media (min-width: 860px) { .cep-results-actions { position: sticky; top: 12px; } } @media (max-width: 640px) { .cep-results-header-row { flex-direction: column; } .cep-results-actions { width: 100%; flex-direction: row; } .cep-results-actions .cep-btn { flex: 1; } } /* Share / download row — sits directly below the results card row above. Reuses .cep-btn as its base so it inherits existing button styling; these rules only add layout + brand-colored hover accents. */ .cep-results-share-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; } .cep-results-share-bar .cep-share-btn { flex: 1 1 200px; justify-content: center; white-space: nowrap; } .cep-share-fb:hover:not(:disabled) { border-color: #1877F2; box-shadow: 0 3px 10px rgba(24,119,242,.28); } .cep-share-li:hover:not(:disabled) { border-color: #0A66C2; box-shadow: 0 3px 10px rgba(10,102,194,.28); } .cep-share-dl:hover:not(:disabled) { border-color: var(--cep-accent); } @media (max-width: 640px) { .cep-results-share-bar { flex-direction: column; } .cep-results-share-bar .cep-share-btn { flex: 1 1 auto; } } /* Official-style summary card — visual reference: the printed AWS "Notice of Exam Results" page (logo top-left, centered cert name/title, bordered candidate/score table, pass/fail message). Deliberately fixed light colors regardless of the site's light/dark theme — like a printed official document, this section looks the same everywhere; the CloudExamPro-styled sections below it (domain analysis, review cards, etc.) still follow the site theme normally via the --cep-* variables. */ .cep-official-card { background: #ffffff; color: #1a1a1a; border: 1px solid #d0d0d0; border-radius: 6px; padding: 32px 40px; margin-bottom: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .cep-official-brand-row { margin-bottom: 20px; } .cep-official-brand { font-family: Sora, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: #0B1F4B; } .cep-official-title { text-align: center; font-size: 1.15rem; font-weight: 700; margin: 0 0 6px; color: #1a1a1a; } .cep-official-subtitle { text-align: center; font-size: 1rem; font-weight: 700; margin: 0 0 24px; color: #1a1a1a; } .cep-official-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; } .cep-official-table td { border: 1px solid #999999; padding: 12px 16px; font-size: .92rem; color: #1a1a1a; width: 50%; vertical-align: top; } .cep-official-label { font-weight: 400; color: #1a1a1a; } .cep-official-pass { color: #067d43; } .cep-official-fail { color: #b91c1c; } .cep-official-message { font-weight: 700; font-size: .95rem; color: #1a1a1a; margin: 0; line-height: 1.6; } @media (max-width: 560px) { .cep-official-card { padding: 20px; } .cep-official-table, .cep-official-table tbody, .cep-official-table tr, .cep-official-table td { display: block; width: 100%; } .cep-official-table tr { border: 1px solid #999999; border-radius: 4px; margin-bottom: 8px; } .cep-official-table td { border: none; border-bottom: 1px solid #dddddd; } .cep-official-table tr td:last-child { border-bottom: none; } } .cep-review-card { background: var(--cep-surface); border: 1px solid var(--cep-border); border-radius: var(--cep-r-lg); padding: 24px 26px; margin-bottom: 18px; box-shadow: var(--cep-shadow-sm); transition: box-shadow .15s ease, transform .15s ease; } .cep-review-card:hover { box-shadow: var(--cep-shadow-md); transform: translateY(-2px); } .cep-review-card.cep-wrong { border-top: 3px solid var(--cep-danger); } .cep-review-card.cep-correct { border-top: 3px solid var(--cep-success); } .cep-review-card.cep-skipped { border-top: 3px solid var(--cep-text-muted); } .cep-review-card.cep-review-highlight { box-shadow: 0 0 0 3px var(--cep-accent); } @media (max-width: 480px) { .cep-review-card { padding: 18px 16px; } .cep-review-head { margin-bottom: 12px; padding-bottom: 12px; } } /* Review screen — per-question "Question N" + status badge header, and the per-option correct/incorrect feedback line underneath a reviewed answer. Colors reuse the same --cep-success/--cep-danger/--cep-text-muted tokens the review card's left-border accent (.cep-review-card.cep-correct/ .cep-wrong/.cep-skipped, above) already uses — this only adds a second, more readable presentation of the same server-computed verdict. */ .cep-review-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--cep-border); } .cep-review-qnum { font-size: 1.15rem; font-weight: 800; color: var(--cep-text); } .cep-review-status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; padding: 6px 16px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; } .cep-review-status-correct { color: var(--cep-success); background: var(--cep-success-bg); border-color: var(--cep-success-border); } .cep-review-status-wrong { color: var(--cep-danger); background: var(--cep-danger-bg); border-color: var(--cep-danger-border); } .cep-review-status-skipped { color: var(--cep-text-muted); background: var(--cep-bg); border-color: var(--cep-border); } .cep-review-card .cep-q-text { line-height: 1.7; } /* Per-option check/x glyph (cep-option-icon) — purely decorative marker layered on the already-existing .cep-option.cep-correct/.cep-wrong border+background treatment; no new state introduced. */ .cep-review-card .cep-option { position: relative; } .cep-option-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: .75rem; font-weight: 700; flex-shrink: 0; color: #fff; } .cep-option-icon-correct { background: var(--cep-success); } .cep-option-icon-wrong { background: var(--cep-danger); } /* Domain block — relocated below the explanation panel per the certification-platform-style layout; same var(--cep-domain-tag) styling as before, just introduced by a small uppercase label above it. */ .cep-review-domain { margin-top: 16px; display: flex; align-items: center; gap: 10px; } .cep-review-domain-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cep-text-muted); } .cep-review-card .cep-option-body { flex: 1; display: flex; flex-direction: column; gap: 4px; } .cep-review-card .cep-option-text { flex: none; } .cep-option-feedback { display: flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; line-height: 1.4; } .cep-option-feedback-correct { color: var(--cep-success); } .cep-option-feedback-wrong { color: var(--cep-danger); } .cep-option-feedback-skipped { color: var(--cep-text-muted); margin-top: 10px; font-size: .85rem; } /* ------------------------------------------------------------------ PAUSE MODAL Shown over the live exam screen (see pauseExam()/resumeExam() in exam-engine.js) — deliberately kept small and calm rather than alarming: pausing is a routine, expected action, and progress really is already saved server-side by the time this shows (pauseExam() syncs before revealing the overlay), so the copy and visuals both lean reassuring instead of urgent. ------------------------------------------------------------------ */ .cep-pause-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; } .cep-pause-box { background: var(--cep-surface); border-radius: 16px; padding: 32px 24px; text-align: center; max-width: 340px; width: 100%; box-shadow: var(--cep-shadow-md); } .cep-pause-icon { font-size: 32px; line-height: 1; margin-bottom: 14px; } /* 22-24px depending on viewport — 1.4rem sits right in that range off this stylesheet's 16px base, and scales with the user's font-size settings rather than a hardcoded px value. Short heading text now ("Exam Paused"), so this no longer wraps into several stacked lines the way the old single long sentence used to. */ .cep-pause-box h3 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 700; color: var(--cep-text); line-height: 1.25; } .cep-pause-subtitle { margin: 0 0 24px; font-size: .875rem; line-height: 1.5; color: var(--cep-text-secondary); } /* Overrides .cep-btn-primary's default orange gradient (the picker/results-screen brand color) with the exam-taking screen's own blue (--cep-x-accent) — the pause modal only ever appears inside .cep-exam-screen, so it should read as part of that blue-branded UI, the same override .cep-exam-screen .cep-btn-danger already applies to the Finish button for the same reason. */ .cep-pause-box .cep-pause-resume-btn { width: 100%; padding: 12px 32px; font-size: .95rem; font-weight: 700; min-height: 48px; border-radius: 10px; border: none; background: var(--cep-x-accent); color: #fff; } .cep-pause-box .cep-pause-resume-btn:hover:not(:disabled) { background: var(--cep-x-accent-dark); box-shadow: 0 4px 14px rgba(37,99,235,.35); } .cep-pause-box .cep-pause-resume-btn:focus-visible { outline: 3px solid var(--cep-x-accent-border); outline-offset: 2px; } /* Practice Mode "Untimed" chip — replaces the MM:SS countdown in .cep-exam-screen's header whenever the attempt is a Practice Mode session (see drawTimer()). Reuses .cep-timer's box but never gets the .cep-warn/.cep-crit color states, since there's nothing counting down. */ .cep-timer.cep-timer-practice { background: var(--cep-accent-bg); border-color: var(--cep-accent-border); color: var(--cep-accent-dark); font-family: inherit; letter-spacing: .01em; } /* Practice vs. Real Exam mode-selection SCREEN -- shown for Premium exams only, right before Start (see renderExamStartScreen() in exam-engine.js). This used to be a `position: fixed` overlay appended straight to document.body (a popup/dialog on top of the picker screen). It is now a normal full-width screen rendered directly into #cep-exam-root the same way every other screen in this file is (root.innerHTML = ...), so it lives inside .cep-root/.cep-picker-screen's own DOM subtree like everything else -- no more separate positioning context to get wrong, and no more body-appended element cut off from the rest of the plugin's styling. Bug fix: every color-bearing declaration below now carries !important, matching the exact same defensive pattern already used everywhere else in this file for host-page collisions (see .cep-mode-btn, .cep-exam-card, var(--cep-p-ink) !important, etc.). Without it, a theme/page-builder stylesheet with higher specificity than a plain class selector (a global `.entry-content button`/`a` rule, a dark-mode/purple accent theme, etc.) can and did win the cascade -- that's what produced the reported bug: dark/purple card backgrounds with low-contrast dark-on-dark text and a barely-visible selected state, instead of this block's own intended light background + high-contrast dark text + a strong blue selected border. Every color here is still a literal hex value rather than a var(--cep-p-*/--cep-*) reference, for the same "guaranteed correct regardless of the site's own theme variables" reasoning as before -- !important alone doesn't help if the value it's enforcing was itself pulled from a var() the theme could still redefine. */ .cep-examstart-screen { width: 100%; box-sizing: border-box; padding: 8px 4px 4px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: transparent !important; } .cep-examstart-screen * { box-sizing: border-box; } .cep-examstart-header { text-align: center; max-width: 640px; margin: 0 auto 32px; } /* Title/subtitle hierarchy: a bold, near-black headline and a clearly secondary (but still readable, never low-contrast) muted subtitle -- both forced to stand out over the page background regardless of theme. */ .cep-examstart-h1 { margin: 0 0 10px; font-size: 1.75rem; font-weight: 800; line-height: 1.25; color: #0F172A !important; } .cep-examstart-sub { margin: 0; font-size: .95rem; font-weight: 500; line-height: 1.5; color: #475569 !important; } /* Card grid: 2 cards spanning the full container width on desktop, stacked on narrow viewports. */ .cep-examstart-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto 32px; } @media (max-width: 640px) { .cep-examstart-cards { grid-template-columns: 1fr; } } /* Unselected card: clean white background, crisp near-black text, a subtle light-grey border -- never a dark or tinted background. Selected card: background stays light (a very light blue tint, not white-on-white with no other change) and gets a strong, standard-width vibrant-blue border plus a matching shadow, so "selected" is unmistakable at a glance rather than a faint background shift. */ .cep-examstart-card { position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%; min-height: 168px; padding: 26px 24px 22px; border-radius: 16px; border: 2px solid #E2E8F0 !important; background: #FFFFFF !important; cursor: pointer; font-family: inherit; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .1s ease; } .cep-examstart-card:hover { border-color: #93C5FD !important; box-shadow: 0 8px 20px rgba(37,99,235,.12); transform: translateY(-2px); } .cep-examstart-card:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; } .cep-examstart-card.cep-examstart-selected { border-color: #2563EB !important; background: #EFF6FF !important; box-shadow: 0 0 0 1px #2563EB, 0 8px 20px rgba(37,99,235,.2); } /* Radio-check indicator, top-right of each card -- empty ring by default, filled solid blue with a clear white checkmark once selected. */ .cep-examstart-card-check { position: absolute; top: 18px; right: 18px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #CBD5E1 !important; background: #FFFFFF !important; transition: border-color .15s ease, background-color .15s ease; flex-shrink: 0; } .cep-examstart-card.cep-examstart-selected .cep-examstart-card-check { border-color: #2563EB !important; background: #2563EB !important; } .cep-examstart-card.cep-examstart-selected .cep-examstart-card-check::after { content: ''; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #FFFFFF; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .cep-examstart-card-icon { display: block; font-size: 1.9rem; line-height: 1; margin-bottom: 2px; padding-right: 32px; /* keeps the icon clear of the check indicator */ } .cep-examstart-card-title { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: #0F172A !important; padding-right: 32px; } .cep-examstart-card-desc { display: block; font-size: .88rem; font-weight: 500; line-height: 1.55; color: #334155 !important; } .cep-examstart-footer { display: flex; justify-content: center; align-items: center; gap: 14px; max-width: 900px; margin: 0 auto; padding-top: 4px; } @media (max-width: 480px) { .cep-examstart-footer { flex-direction: column-reverse; align-items: stretch; } .cep-examstart-footer .cep-examstart-back-btn, .cep-examstart-footer .cep-examstart-start-btn { width: 100%; justify-content: center; } } /* Self-contained button styles -- deliberately NOT reusing .cep-btn/ .cep-btn-start's own var()-based coloring (see the block-level comment above for why: guaranteed contrast independent of a given site's theme variables). Structural properties (padding, radius, font-weight) are duplicated from .cep-btn on purpose. */ .cep-examstart-back-btn, .cep-examstart-start-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-weight: 700; font-size: .95rem; padding: 0 24px; min-height: 48px; min-width: 140px; border-radius: 10px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .cep-examstart-back-btn { border: 1.5px solid #E2E8F0 !important; background: #FFFFFF !important; color: #1E293B !important; } .cep-examstart-back-btn:hover { border-color: #CBD5E1 !important; background: #F8FAFC !important; } .cep-examstart-start-btn { border: none !important; background: #2563EB !important; color: #FFFFFF !important; min-width: 160px; box-shadow: 0 2px 10px rgba(37,99,235,.25); } .cep-examstart-start-btn:hover { background: #1D4ED8 !important; box-shadow: 0 4px 14px rgba(37,99,235,.32); } .cep-examstart-start-btn.cep-btn-loading { opacity: .7; cursor: default; } .cep-examstart-start-btn:focus-visible, .cep-examstart-back-btn:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; } .cep-hidden { display: none !important; } /* Visually hidden but still announced by screen readers — used for the timer's threshold-crossing announcements (see drawTimer()). */ .cep-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Domain bar primitives — shared by the picker screen's read-only domain distribution and by the Performance Analysis dashboard's Domain Performance list below. */ .cep-domain-track { flex: 1; height: 10px; border-radius: 6px; background: var(--cep-border); overflow: hidden; } .cep-domain-fill { height: 100%; border-radius: 6px; } .cep-domain-fill.cep-domain-bar-good { background: var(--cep-success); } .cep-domain-fill.cep-domain-bar-mid { background: var(--cep-warning); } .cep-domain-fill.cep-domain-bar-weak { background: var(--cep-danger); } .cep-domain-tag { display: inline-block; font-size: .7rem; font-weight: 600; color: var(--cep-text-muted); background: var(--cep-accent-bg); border-radius: 6px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; } /* --------------------------------------------------------------------- PERFORMANCE ANALYSIS DASHBOARD (results screen) --------------------------------------------------------------------- */ .cep-perf-dashboard { margin-bottom: 24px; } .cep-perf-heading { font-size: 1.1rem; font-weight: 800; margin: 0 0 14px; } .cep-perf-section { background: var(--cep-surface); border: 1px solid var(--cep-border); border-radius: var(--cep-r-lg); padding: 20px; margin-bottom: 16px; } .cep-perf-section-title { font-size: .95rem; font-weight: 700; margin: 0 0 14px; } /* Overall Score */ .cep-perf-overview { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--cep-surface); border: 1px solid var(--cep-border); border-radius: var(--cep-r-lg); padding: 24px; margin-bottom: 16px; } .cep-perf-score-ring { flex-shrink: 0; width: 128px; height: 128px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 6px solid var(--cep-border); } .cep-perf-score-ring.cep-perf-ring-pass { border-color: var(--cep-success); background: var(--cep-success-bg); } .cep-perf-score-ring.cep-perf-ring-fail { border-color: var(--cep-danger); background: var(--cep-danger-bg); } .cep-perf-score-num { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--cep-text); } .cep-perf-score-tag { margin-top: 4px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; } .cep-perf-ring-pass .cep-perf-score-tag { color: var(--cep-success); } .cep-perf-ring-fail .cep-perf-score-tag { color: var(--cep-danger); } .cep-perf-overview-stats { display: flex; gap: 12px; flex: 1; min-width: 220px; flex-wrap: wrap; } /* Shared metric card — Accuracy Summary + Time Analysis both use this. */ .cep-perf-stat-card { flex: 1; min-width: 100px; background: var(--cep-bg); border: 1px solid var(--cep-border); border-radius: var(--cep-r-md); padding: 14px; text-align: center; } .cep-perf-stat-value { display: block; font-size: 1.3rem; font-weight: 800; color: var(--cep-text); } .cep-perf-stat-label { display: block; margin-top: 2px; font-size: .72rem; font-weight: 600; color: var(--cep-text-muted); text-transform: uppercase; letter-spacing: .03em; } .cep-perf-stat-correct .cep-perf-stat-value { color: var(--cep-success); } .cep-perf-stat-incorrect .cep-perf-stat-value { color: var(--cep-danger); } .cep-perf-stat-skipped .cep-perf-stat-value { color: var(--cep-text-muted); } .cep-perf-cards { display: flex; gap: 12px; flex-wrap: wrap; } /* Weakest / Strongest Domain highlight cards */ .cep-perf-highlight-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .cep-perf-highlight { flex: 1; min-width: 220px; border-radius: var(--cep-r-lg); padding: 18px 20px; border: 1.5px solid; } .cep-perf-highlight-weak { background: var(--cep-danger-bg); border-color: var(--cep-danger-border); } .cep-perf-highlight-strong { background: var(--cep-success-bg); border-color: var(--cep-success-border); } .cep-perf-highlight-tag { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; } .cep-perf-highlight-weak .cep-perf-highlight-tag { color: var(--cep-danger); } .cep-perf-highlight-strong .cep-perf-highlight-tag { color: var(--cep-success); } .cep-perf-highlight-name { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--cep-text); } .cep-perf-highlight-score { margin: 0 0 6px; font-size: .82rem; color: var(--cep-text-secondary); } .cep-perf-highlight-tip { margin: 0; font-size: .82rem; font-weight: 600; color: var(--cep-text); } /* Domain Performance list (weakest domain first) */ .cep-perf-domain-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; } .cep-perf-domain-label { width: 160px; flex-shrink: 0; font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cep-perf-domain-pct { width: 110px; flex-shrink: 0; text-align: right; font-size: .8rem; color: var(--cep-text-muted); } /* Confidence Level pill */ .cep-perf-confidence { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 99px; font-size: .9rem; font-weight: 800; } .cep-perf-conf-excellent { background: var(--cep-success-bg); color: var(--cep-success); } .cep-perf-conf-good { background: var(--cep-success-bg); color: var(--cep-success); } .cep-perf-conf-mid { background: var(--cep-warning-bg); color: var(--cep-warning); } .cep-perf-conf-risk { background: var(--cep-danger-bg); color: var(--cep-danger); } /* Study Recommendation */ .cep-perf-recommend-lead { margin: 0 0 8px; font-size: .88rem; font-weight: 600; color: var(--cep-text); } .cep-perf-recommend-list { margin: 0 0 10px; padding-left: 20px; } .cep-perf-recommend-list li { font-size: .88rem; font-weight: 600; color: var(--cep-text); margin-bottom: 4px; } .cep-perf-recommend-pct { font-weight: 600; color: var(--cep-text-muted); } /* Free-Exam-results Upgrade Banner — see renderUpgradeBanner() in exam-engine.js for the gating rules (Free Exam only, and only when an Upgrade URL is configured). Deliberately styled as the visual high point of the whole results screen (gradient tint, accent border, its own drop shadow) — unlike the neutral-surface .cep-perf-section cards above it, this is the one section on the page meant to actually stand out. */ .cep-upgrade-banner { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; background: linear-gradient(120deg, var(--cep-accent-bg) 0%, var(--cep-surface) 55%, var(--cep-surface) 100%); border: 1px solid var(--cep-accent-border); border-left: 4px solid var(--cep-accent); border-radius: var(--cep-r-lg); padding: 24px 28px; margin-bottom: 16px; box-shadow: var(--cep-shadow-lift, var(--cep-shadow-sm)); } .cep-upgrade-banner-ico { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; line-height: 1; /* Optical nudge: emoji glyph metrics (esp. 🚀 in Apple Color Emoji / Segoe UI Emoji / Noto Color Emoji) sit slightly high within their own em-box, so pure flex-centering alone still reads as misaligned against the headline baseline next to it — this small vertical offset corrects for that without touching layout/DOM. */ padding-top: 2px; background: linear-gradient(150deg, var(--cep-accent-bg), var(--cep-surface)); border: 1.5px solid var(--cep-accent-border); box-shadow: 0 2px 6px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.5); } .cep-upgrade-banner-body { flex: 1; min-width: 240px; } .cep-upgrade-banner-headline { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--cep-text); } .cep-upgrade-banner-text { margin: 0; font-size: .9rem; font-weight: 500; line-height: 1.65; color: var(--cep-text-secondary); max-width: 56ch; } .cep-upgrade-banner-text strong { color: var(--cep-text); font-weight: 800; } .cep-upgrade-banner-cta { flex-shrink: 0; white-space: nowrap; text-decoration: none; background: linear-gradient(135deg, #FFB84D, var(--cep-accent) 55%, #E68A00); box-shadow: 0 4px 14px rgba(230,138,0,.32), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .18s var(--cep-ease, ease-in-out), box-shadow .18s var(--cep-ease, ease-in-out); } .cep-upgrade-banner-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(230,138,0,.42), inset 0 1px 0 rgba(255,255,255,.3); } .cep-upgrade-banner-cta:active { transform: translateY(-1px); } @media (max-width: 640px) { .cep-upgrade-banner { flex-direction: column; align-items: stretch; text-align: center; padding: 22px 20px; gap: 16px; } .cep-upgrade-banner-ico { margin: 0 auto; } .cep-upgrade-banner-cta { width: 100%; justify-content: center; } } /* Review CTAs */ .cep-perf-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .cep-perf-cta-row .cep-btn { flex: 1; min-width: 190px; justify-content: center; } /* "Review Incorrect Questions" filter — hides everything except the wrong cards inside #cep-review-section without touching data/order. */ #cep-review-section.cep-review-section-filtered .cep-review-card:not(.cep-wrong) { display: none; } @media (max-width: 700px) { .cep-perf-overview { flex-direction: column; text-align: center; } .cep-perf-overview-stats { width: 100%; } } @media (max-width: 600px) { .cep-perf-domain-label { width: 100px; font-size: .78rem; } .cep-perf-domain-pct { width: 80px; font-size: .72rem; } } /* --------------------------------------------------------------------- EXAM HOME / MODE SELECTION SCREEN (certification-level [cep_exam certification="..."]) Complete ground-up redesign, scoped entirely to this screen's own classes — nothing here touches .cep-root's shared tokens or any exam-taking / results-screen selector, so this is presentation-only: no exam logic, API, repository, service, or scoring code was touched to produce it. Design direction: premium SaaS learning platform (Tutorials Dojo / AWS Skill Builder register) rather than a WordPress-plugin admin screen — clean white/light-gray surface, a single blue (#2563EB) accent used consistently and nowhere else, no purple, no decorative gradients or shadows, tight vertical rhythm so the whole flow — Choose Practice Mode → Select Exam/Domains → Start Exam — reads as one continuous, uncluttered screen instead of a stacked pile of cards. Every rule below is scoped under `!important` only where the surrounding WordPress/Elementor theme is known to override basic properties (background/color/border/box-shadow) on generic elements like