/* ============================================================================= ACXPA REMEDIATION — plan item 9 | 8 September 2026 ----------------------------------------------------------------------------- Complete drop-in replacement. Upload over the existing file; nothing is appended, nothing is pasted in. (R-M6) WHAT CHANGED — 7 rgb()/rgba() colour literals in this file now resolve from acxpa-tokens.css. Nothing else was touched: 1010 declarations before, 1010 after, braces balanced, comments untouched. WHY color-mix() AND NOT A BARE var() Every literal converted here carries alpha < 1 — they are shadows, tints, rails and scrims, not solid fills. A bare var(--token) would drop the alpha and paint each one fully opaque. color-mix() keeps the exact rendered colour and makes the token the source of truth: rgba(15, 79, 92, .18) -> color-mix(in srgb, var(--acxpa-ds-teal-700) 18%, transparent) Baseline widely available since May 2023 (Chrome 111, Firefox 113, Safari/iOS 16.4). Four ACXPA stylesheets already used this pattern before today, so it is not new to this codebase. PROVEN, NOT ASSUMED Every substitution in this file was composited over white in a canvas and compared pixel by pixel against the literal it replaced. Every one is pixel-identical: same RGB, same alpha, same composite. Tokens referenced: --acxpa-ds-gold, --acxpa-ds-teal-700 ============================================================================= */ /* ============================================================================ ACXPA — Industry Knowledge Quizzes Landing page, single quiz pages, the AYS Quiz Maker plugin, result screens and the quiz/courses dashboards. Location: wp-content/themes/kleo-child/css/acxpa-industry-quizzes.css Enqueued: acxpa_iq_assets() in industry-quizzes/landing.php Standards: ACXPA Brand & Digital Standards v1.9 WHERE THIS CAME FROM Every rule here was previously in custom.css lines 6190-6966, under a private --ax-* palette. Section 18 counts that as one of ten private palettes on the site, and the same section puts feature CSS in css/.css, enqueued only on the pages that need it. The alias block is gone: nothing outside those lines referenced --ax-* , so the whole thing lifts out cleanly and every value below now reads a --acxpa-ds-* token directly. The plugin overrides in sections 1-5 are load-bearing and were verified against a live result screen when they were written. They are carried across unchanged apart from the token swap and the hover correction noted in section 4. Contrast pairs used, all from section 14: Teal 700 on White / Cloud 9.16 / 8.90 AAA Ink on Cloud 14.68 AAA Slate on White 5.18 AA Gold Deep on White / Cloud 4.99 / 4.85 AA Gold on Ink 8.49 AAA White on Teal 700 9.16 AAA Teal 200 on Teal 700 5.53 AA (muted-on-dark) Gold on Teal 700 4.92 AA ============================================================================ */ /* ============================================================================ 1 · AYS Quiz Maker — layout ============================================================================ */ /* Live progress bar. The plugin renders it absolute at top:-15px and it was escaping the box. It's the container's first child, so normal flow anchors it correctly without needing a positioned ancestor. */ .ays-quiz-container .ays-live-bar-wrap{position:relative!important;top:0!important;left:0!important; width:100%!important;overflow:hidden;border-radius:12px 12px 0 0} /* Let the box fit its content — this is what kills the empty start screen. Requires Quiz height to be blank in the Styles tab. */ .ays-quiz-container .ays-questions-container{height:auto!important} /* Hold a consistent height on question screens ONLY, so the box doesn't resize between a short question and a long one. */ .ays-quiz-container .step.active-step>.ays-abs-fs:not(.ays-start-page){min-height:430px!important} /* Questions were vertically centred in the box — the source of the dead space. */ .ays-quiz-container .step.active-step{align-items:flex-start!important;padding-top:26px} .ays-quiz-container .ays_quiz_question{margin-bottom:24px!important} .ays-quiz-container .ays-start-page{padding:14px 24px 24px} .ays-quiz-container .ays-field{border-radius:8px} /* The results screen has zero padding of its own, so the score tiles sat hard against the top border. Bottom spacing is carried entirely by the Restart button's own margin — measured on a live result screen at 30px above and 30px below, rather than guessed. */ .ays-quiz-container .ays_quiz_results_page{padding:32px 30px 0!important} .ays-quiz-container .ays-end-page, .ays-quiz-container .step.ays_thank_you_fs{padding-bottom:0!important} /* ============================================================================ 2 · Quiz start screen — typography The font was never wrong: the site is Open Sans and the quiz inherits it. What looked off was the weight — 28px uppercase at weight 400 goes flabby. ============================================================================ */ .ays-quiz-container .ays-fs-title{ font-size: var(--acxpa-ds-text-h3) !important; font-weight:800!important; letter-spacing:.045em!important; line-height: var(--acxpa-ds-leading-snug) !important; color:var(--acxpa-ds-teal-700)!important; margin:0 0 14px!important} .ays-quiz-container .ays-fs-subtitle, .ays-quiz-container .ays-fs-subtitle p{ font-size: var(--acxpa-ds-text-body) !important; line-height:1.68!important; color:var(--acxpa-ds-text-muted)!important} /* The start screen repeats the page H1 word for word. Uncomment to drop it. */ /* .qz-page .ays-quiz-container .ays-start-page .ays-fs-title{display:none!important} */ /* ============================================================================ 3 · Glossary auto-linker The per-post "Disable linkify" setting does NOT reach text rendered inside the quiz shortcode. The real fix is around the term in the quiz's own description field; this is the safety net. ============================================================================ */ .qz-page a.wpg-linkify, .ays-quiz-container a.wpg-linkify{ color:inherit!important; border-bottom:0!important; text-decoration:none!important; box-shadow:none!important} /* ============================================================================ 4 · Buttons The plugin emits per-quiz rules like #ays-quiz-container-11 input[type="button"]{color:#fff!important} An ID beats any number of classes, so !important on a class selector is not enough. `:not(#ax-no-such-id)` matches everything but contributes one ID's worth of specificity, which is what lets these rules land. Sep 2026: hovers were going White / Teal 700. Section 11 gives the whole site one hover colour — Gold Deep on White — because a hover has to clear dE 25 from the resting fill AND stay distinct from every other resting colour on the page. Gold Deep is the only value that does both. ============================================================================ */ /* --- Start ---------------------------------------------------------------- */ .ays-quiz-container input.start_button:not(#ax-no-such-id){ background:var(--acxpa-ds-gold)!important; color:var(--acxpa-ds-ink)!important; /* 8.49:1 - s15, Gold takes Ink */ border:2px solid var(--acxpa-ds-gold)!important; font-size:var(--acxpa-ds-text-h3)!important; font-weight:800!important; padding:19px 52px!important; border-radius:var(--acxpa-ds-radius-md)!important; letter-spacing:.01em; text-shadow:none!important; box-shadow:var(--acxpa-ds-shadow-md); animation:acxpaCtaGlow 2s linear infinite} .ays-quiz-container input.start_button:not(#ax-no-such-id):hover, .ays-quiz-container input.start_button:not(#ax-no-such-id):focus{ background:var(--acxpa-ds-gold-deep)!important; border-color:var(--acxpa-ds-gold-deep)!important; color:var(--acxpa-ds-white)!important; /* 4.99:1 - s15, Gold Deep takes White */ animation:none} /* An cannot carry a ::before, so the start control takes the glow without the sheen. The glow is the half that carries at a glance. */ /* --- Next / Prev / See Result --------------------------------------------- */ .ays-quiz-container input.ays_next:not(.start_button):not(#ax-no-such-id), .ays-quiz-container input.ays_previous:not(#ax-no-such-id){ background:var(--acxpa-ds-teal-700)!important; color:var(--acxpa-ds-text-on-dark)!important; border:2px solid var(--acxpa-ds-teal-700)!important; border-radius:var(--acxpa-ds-radius-md)!important; min-height:44px; font-weight:700!important} .ays-quiz-container input.ays_next:not(.start_button):not(#ax-no-such-id):hover, .ays-quiz-container input.ays_previous:not(#ax-no-such-id):hover, .ays-quiz-container input.ays_next:not(.start_button):not(#ax-no-such-id):focus, .ays-quiz-container input.ays_previous:not(#ax-no-such-id):focus{ background:var(--acxpa-ds-gold-deep)!important; border-color:var(--acxpa-ds-gold-deep)!important; color:var(--acxpa-ds-white)!important} /* --- Download certificate (plugin default is pink #f95d89) ---------------- */ .ays-quiz-container a.ays_download_certificate:not(#ax-no-such-id), .qd-group a.ays_download_certificate:not(#ax-no-such-id){ display:inline-block; background:var(--acxpa-ds-gold)!important; color:var(--acxpa-ds-ink)!important; border:2px solid var(--acxpa-ds-gold)!important; font-size:var(--acxpa-ds-text-body)!important; font-weight:800!important; padding:15px 38px!important; border-radius:var(--acxpa-ds-radius-md)!important; text-decoration:none!important; box-shadow:var(--acxpa-ds-shadow-md); animation:acxpaCtaGlow 2s linear infinite} .ays-quiz-container a.ays_download_certificate:not(#ax-no-such-id):hover, .ays-quiz-container a.ays_download_certificate:not(#ax-no-such-id):focus{ background:var(--acxpa-ds-gold-deep)!important; border-color:var(--acxpa-ds-gold-deep)!important; color:var(--acxpa-ds-white)!important; animation:none} /* Inside the Outstanding band it would be gold on gold — flip to teal. */ .acxpa-res--perfect a.ays_download_certificate:not(#ax-no-such-id){ background:var(--acxpa-ds-teal-700)!important; color:var(--acxpa-ds-text-on-dark)!important; border-color:var(--acxpa-ds-teal-700)!important; box-shadow:var(--acxpa-ds-shadow-md); animation:none} .acxpa-res--perfect a.ays_download_certificate:not(#ax-no-such-id):hover, .acxpa-res--perfect a.ays_download_certificate:not(#ax-no-such-id):focus{ background:var(--acxpa-ds-gold-deep)!important; color:var(--acxpa-ds-white)!important; border-color:var(--acxpa-ds-gold-deep)!important} /* Dashboard copy sits in a dense table — no glow there. */ .qd-group a.ays_download_certificate:not(#ax-no-such-id){ animation:none; font-size:var(--acxpa-ds-text-small)!important; padding:8px 18px!important; box-shadow:none} /* --- Restart quiz: tertiary action, so outline not solid ------------------ */ .ays-quiz-container input.ays_restart_button:not(#ax-no-such-id), .ays-quiz-container .ays_restart_button:not(#ax-no-such-id){ background:transparent!important; color:var(--acxpa-ds-teal-700)!important; border:2px solid var(--acxpa-ds-teal-700)!important; border-radius:var(--acxpa-ds-radius-md)!important; font-size:var(--acxpa-ds-text-body)!important; font-weight:700!important; min-height:44px; padding:12px 26px!important; margin:30px 0 30px!important; box-shadow:none!important; animation:none!important} .ays-quiz-container input.ays_restart_button:not(#ax-no-such-id):hover, .ays-quiz-container .ays_restart_button:not(#ax-no-such-id):hover, .ays-quiz-container input.ays_restart_button:not(#ax-no-such-id):focus, .ays-quiz-container .ays_restart_button:not(#ax-no-such-id):focus{ background:var(--acxpa-ds-gold-deep)!important; border-color:var(--acxpa-ds-gold-deep)!important; color:var(--acxpa-ds-white)!important} /* Section 11, every state change: with motion reduced the glow is suppressed, so the resting shadow is deepened to keep the control separated from its ground. */ @media(prefers-reduced-motion:reduce){ .ays-quiz-container input.start_button:not(#ax-no-such-id), .ays-quiz-container a.ays_download_certificate:not(#ax-no-such-id){ animation:none;box-shadow:var(--acxpa-ds-shadow-lg)}} /* ============================================================================ 5 · Loader The plugin has TWO loader wrappers. `.ays-loader` is the one you find by inspecting a resting page; `.ays-loader-text` is the one that actually appears when you press See Result. Both need styling or the old GIF comes back on submit. ============================================================================ */ .ays-quiz-container .ays-loader, .ays-quiz-container .ays-loader-text{ min-height:340px!important; padding:0!important; box-sizing:border-box; position:relative; text-align:center} .ays-quiz-container .ays-loader img.ays-loader-content, .ays-quiz-container .ays-loader-text img.ays-loader-content{display:none!important} .ays-quiz-container .ays-loader::before, .ays-quiz-container .ays-loader-text::before{ content:""; position:absolute; top:50%;left:50%; margin:-55px 0 0 -55px; width:110px;height:110px; border-radius:50%; border:8px solid var(--acxpa-ds-border-strong); border-top-color:var(--acxpa-ds-teal-700); border-right-color:var(--acxpa-ds-gold); animation:axSpin .9s linear infinite} @keyframes axSpin{to{transform:rotate(360deg)}} /* ──────────────────────────────────────────────────────────────────────────── Answer row states The selected answer fills; hover is only a tint, so hovering an unselected row never looks like the answer you picked. An old rule further up this file forces the plugin's selected background back to `inherit !important`, and the plugin writes per-quiz rules keyed on #ays-quiz-container-N — so these need !important AND an ID's worth of specificity to land. Hence :not(#ax-no-such-id). ──────────────────────────────────────────────────────────────────────────── */ .ays-quiz-container .ays-field input ~ label:hover:not(#ax-no-such-id){ background-color:var(--acxpa-ds-teal-50)!important; color:var(--acxpa-ds-ink)!important} .ays-quiz-container .ays-field.checked_answer_div:not(#ax-no-such-id){ border-color:var(--acxpa-ds-teal-700)!important; box-shadow:0 2px 8px color-mix(in srgb, var(--acxpa-ds-teal-700) 18%, transparent)} .ays-quiz-container .ays-field.checked_answer_div input:checked ~ label:not(#ax-no-such-id), .ays-quiz-container .ays-field.checked_answer_div input:checked ~ label:hover:not(#ax-no-such-id){ background-color:var(--acxpa-ds-teal-700)!important; color:var(--acxpa-ds-text-on-dark)!important} /* the radio dot sits in the label's ::before */ .ays-quiz-container .ays-field.checked_answer_div input:checked ~ label::before{ border-color:var(--acxpa-ds-bg)!important; background-color:var(--acxpa-ds-bg)!important} /* Keyboard focus should read as ACXPA, not as the browser default blue. */ .ays-quiz-container .ays-field:focus-within:not(#ax-no-such-id){ outline:2px solid var(--acxpa-ds-gold); outline-offset:2px} @media(prefers-reduced-motion:reduce){ .ays-quiz-container .ays-loader::before, .ays-quiz-container .ays-loader-text::before{animation-duration:2s}} /* ============================================================================ E · Score tiles Markup lives in the plugin's result fields as with two .acxpa-score cells. These stay deliberately LIGHT. A solid teal tile sitting directly above a coloured result band put two blocks of colour on top of each other and the eye had nowhere to land. Section 6 (a measured quantity takes no band): your score is a graded result and may carry a band value; the cohort average is a measured quantity and takes the neutral pair. That is why the two tiles do not match, and they should not be made to. ============================================================================ */ .acxpa-scores{border-collapse:separate;border-spacing:0;margin:0 auto var(--acxpa-ds-space-lg)} .acxpa-scores td{vertical-align:middle} .acxpa-scores .acxpa-score{min-width:138px;padding:14px 24px 16px;text-align:center; border-radius:var(--acxpa-ds-radius-lg);background:var(--acxpa-ds-white)} .acxpa-score--you{background:var(--acxpa-ds-teal-50);color:var(--acxpa-ds-teal-700); border:2px solid var(--acxpa-ds-teal-700);box-shadow:var(--acxpa-ds-shadow-sm)} .acxpa-score--avg{background:var(--acxpa-ds-white);color:var(--acxpa-ds-text-muted); border:1px solid var(--acxpa-ds-border-strong)} .acxpa-score__gap{width:var(--acxpa-ds-space-sm)} .acxpa-score__label{display:block;margin:0 0 4px;font-size:var(--acxpa-ds-text-caption); font-weight:700;letter-spacing:.12em;text-transform:uppercase} .acxpa-score--you .acxpa-score__label{color:var(--acxpa-ds-teal-600)} .acxpa-score--avg .acxpa-score__label{color:var(--acxpa-ds-text-muted)} /* Section 24: digits line up. tabular-nums on every numeric column — a score tile is a one-cell numeric column and reads ragged without it. */ .acxpa-score__val{display:block;font-size:var(--acxpa-ds-text-h2);font-weight:800; line-height:1.1;font-variant-numeric:tabular-nums} /* ============================================================================ F · Result bands Section 16.2: any component expressing a performance band uses the section 6 band tokens, and there is no second scale. The ladder here used to run light grey → slate → teal → amber, which was a fourth scale nobody had designed. It now reads off the band tokens, so if the band palette ever moves this moves with it. The four classes are the plugin's own score buckets and are unchanged: --perfect 100% -> Outstanding Gold / Ink 8.49:1 AAA --strong 71-90% -> Exceeds Teal 700 / White 9.16:1 AAA --fair 31-70% -> Meets Teal 200 / Ink 9.55:1 AAA --low 0-30% -> Below Warning Tint / Warning Deep 6.60:1 AA Poor / Error is not used: a quiz score is a knowledge check, not a failure state, and section 6 keeps the error value for genuine failure. ============================================================================ */ .acxpa-res{margin:0 0 var(--acxpa-ds-space-lg);padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-xl); border-radius:var(--acxpa-ds-radius-lg);text-align:center} .acxpa-res__eyebrow{display:block;margin:0 0 var(--acxpa-ds-space-sm); font-size:var(--acxpa-ds-text-eyebrow);font-weight:700; letter-spacing:var(--acxpa-ds-tracking-eyebrow);text-transform:uppercase} .acxpa-res__head{display:block;margin:0 0 var(--acxpa-ds-space-xs); font-size:var(--acxpa-ds-text-h3);font-weight:800;line-height:var(--acxpa-ds-leading-snug)} .acxpa-res__sub{display:block;margin:0;font-size:var(--acxpa-ds-text-body); line-height:var(--acxpa-ds-leading-body)} .acxpa-res a{font-weight:700;text-decoration:underline;text-underline-offset:.15em} /* 100% — Outstanding. The only place gold appears on a result screen. */ .acxpa-res--perfect{background:var(--acxpa-ds-band-outstanding); color:var(--acxpa-ds-band-outstanding-on);box-shadow:var(--acxpa-ds-shadow-lg)} .acxpa-res--perfect .acxpa-res__eyebrow{color:var(--acxpa-ds-band-outstanding-on)} .acxpa-res--perfect a:not(#ax-no-such-id){color:var(--acxpa-ds-band-outstanding-on)!important} /* 71–90% — Exceeds. */ .acxpa-res--strong{background:var(--acxpa-ds-band-exceeds);color:var(--acxpa-ds-band-exceeds-on)} .acxpa-res--strong .acxpa-res__eyebrow{color:var(--acxpa-ds-text-muted-on-dark)} .acxpa-res--strong a:not(#ax-no-such-id){color:var(--acxpa-ds-gold)!important} /* 4.92:1 on Teal 700 */ /* 31–70% — Meets. Teal 200 is a ground for Ink and never for White (18.4). */ .acxpa-res--fair{background:var(--acxpa-ds-band-meets);color:var(--acxpa-ds-band-meets-on)} .acxpa-res--fair .acxpa-res__eyebrow{color:var(--acxpa-ds-teal-700)} .acxpa-res--fair a:not(#ax-no-such-id){color:var(--acxpa-ds-teal-700)!important} /* 0–30% — Below. Attention without alarm; deliberately not the error value. */ .acxpa-res--low{background:var(--acxpa-ds-band-below);color:var(--acxpa-ds-band-below-on)} .acxpa-res--low .acxpa-res__eyebrow{color:var(--acxpa-ds-band-below-on)} .acxpa-res--low a:not(#ax-no-such-id){color:var(--acxpa-ds-band-below-on)!important} @media(max-width:600px){ .acxpa-res{padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-md)} .acxpa-scores .acxpa-score{min-width:116px;padding:12px 16px 14px} } /* ============================================================================ G · The heading above the question-by-question review Markup is inserted by industry-quizzes/review-heading.php once the plugin has painted the review. The CSS lived in that file until Sep 2026, carrying six brand hex values as var() fallbacks — section 16.1 allows a brand hex in acxpa-tokens.css and nowhere else, and section 15 rules out fallbacks. ============================================================================ */ .acxpa-rev:not(#ax-no-such-id){margin:var(--acxpa-ds-space-2xl) 0 0; padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-lg) var(--acxpa-ds-space-md); background:var(--acxpa-ds-cloud); border:1px solid var(--acxpa-ds-border-strong); border-top:3px solid var(--acxpa-ds-teal-700); border-radius:var(--acxpa-ds-radius-lg) var(--acxpa-ds-radius-lg) 0 0; text-align:center} .acxpa-rev__h:not(#ax-no-such-id){margin:0 0 var(--acxpa-ds-space-xs); font-size:var(--acxpa-ds-text-h3);font-weight:700; line-height:var(--acxpa-ds-leading-snug);letter-spacing:-.2px; color:var(--acxpa-ds-teal-700)} .acxpa-rev__p:not(#ax-no-such-id){margin:0 auto; font-size:var(--acxpa-ds-text-small);line-height:var(--acxpa-ds-leading-body); color:var(--acxpa-ds-text-muted)} .acxpa-rev + .ays_question_result:not(#ax-no-such-id){padding-top:var(--acxpa-ds-space-lg)} @media(max-width:600px){ .acxpa-rev:not(#ax-no-such-id){padding:var(--acxpa-ds-space-md);margin-top:var(--acxpa-ds-space-xl)} .acxpa-rev__h:not(#ax-no-such-id){font-size:var(--acxpa-ds-text-h4)} } /* ============================================================================ D · Single quiz page — shared template Markup lives in each quiz post's WPBakery text box. Everything below is a restyle of that existing markup: no post needs editing. Rebuilt Sep 2026. The page was white on white on white — a dark hero, then a white quiz box on a white page, then a white "where to next" band on the same white page, with nothing telling the eye where one thing ended and the next began. It now runs light hero → Cloud tray holding a white quiz card → Cloud tail. Three grounds, one temperature (section 4: never mix Cloud and Sand in one template). ============================================================================ */ /* KLEO prints its standard single-post byline above the article: author, category and comment count, rendered as
ACXPA |Industry Knowledge Quizzes |0 On a quiz that line is wrong three times over. The breadcrumb bar directly above it already says Home / Industry Knowledge Quizzes / [quiz name], so the byline repeats the category a few pixels below where it was just read; "ACXPA" links to /members/acxpa_admin/, which publishes the admin account to visitors; and the comment count is 0 on every quiz because comments are closed there. It also occupies 160px of the page above the hero. Scoped to the article's own category class, so it is hidden on the 24 quiz posts and nowhere else on the site. The element holds nothing but that one span — no heading, no thumbnail — so there is nothing else to lose. */ .category-industry-quizzes .article-meta{display:none} .qz-page{color:var(--acxpa-ds-ink)} .qz-page *{box-sizing:border-box} /* ---- hero ---------------------------------------------------------------- */ .qz-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(200px,.8fr); gap:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-2xl);align-items:start; padding:var(--acxpa-ds-space-xl); background:var(--acxpa-ds-cloud); border-radius:var(--acxpa-ds-radius-xl) var(--acxpa-ds-radius-xl) 0 0} /* The "← All ACXPA industry quizzes" kicker is hidden, not deleted. The breadcrumb bar above the hero now reads Home / Industry Knowledge Quizzes / [quiz name] (industry-quizzes/breadcrumb.php), which is the same journey in the place readers look for it — three back-links to one destination stacked on top of each other was the mess. The markup stays in each quiz post so this is one line to reverse, and nothing has to be re-edited across 24 posts. The crawl path to /industry-quizzes/ is kept by the breadcrumb link, so no internal link is lost. */ .qz-hero__kicker{display:none} .qz-hero__kicker--show{margin:0 0 var(--acxpa-ds-space-sm); font-size:var(--acxpa-ds-text-eyebrow);font-weight:700; letter-spacing:var(--acxpa-ds-tracking-eyebrow);line-height:var(--acxpa-ds-leading-eyebrow); text-transform:uppercase} .qz-hero__kicker--show a:not(#ax-no-such-id){color:var(--acxpa-ds-gold-deep);text-decoration:none; border-bottom:1px solid var(--acxpa-ds-gold-deep);padding-bottom:2px} .qz-hero__kicker--show a:not(#ax-no-such-id):hover, .qz-hero__kicker--show a:not(#ax-no-such-id):focus-visible{color:var(--acxpa-ds-teal-700); border-bottom-color:var(--acxpa-ds-teal-700)} .qz-hero h1{margin:0 0 var(--acxpa-ds-space-sm);font-size:var(--acxpa-ds-text-h1); font-weight:800;line-height:var(--acxpa-ds-leading-tight);letter-spacing:-.015em; color:var(--acxpa-ds-teal-700)} .qz-hero__lede{margin:0;font-size:var(--acxpa-ds-text-body); line-height:var(--acxpa-ds-leading-body);color:var(--acxpa-ds-ink)} .qz-hero__lede a:not(#ax-no-such-id){color:var(--acxpa-ds-link);font-weight:600; text-decoration:underline;text-underline-offset:.15em} .qz-hero__sub{margin:var(--acxpa-ds-space-md) 0 0;padding-top:var(--acxpa-ds-space-md); border-top:1px solid var(--acxpa-ds-border-strong); font-size:var(--acxpa-ds-text-small);line-height:var(--acxpa-ds-leading-body); color:var(--acxpa-ds-text-muted)} .qz-hero__sub a:not(#ax-no-such-id){color:var(--acxpa-ds-link);font-weight:700; text-decoration:underline;text-underline-offset:.15em} .qz-hero__sub a:not(#ax-no-such-id):hover, .qz-hero__sub a:not(#ax-no-such-id):focus-visible{color:var(--acxpa-ds-gold-deep)} .qz-hero__meta{list-style:none;margin:0;padding:0 0 0 var(--acxpa-ds-space-md); display:flex;flex-direction:column;gap:2px; border-left:3px solid var(--acxpa-ds-teal-700)} .qz-hero__meta li{margin:0;padding:6px 0;font-size:var(--acxpa-ds-text-small); line-height:1.4;font-weight:700;color:var(--acxpa-ds-ink)} .qz-hero__meta li b{display:block;margin-bottom:2px; font-size:var(--acxpa-ds-text-caption);font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--acxpa-ds-text-muted)} /* ---- access strip -------------------------------------------------------- */ /* Row gap only. A horizontal flex gap turns any stray text node — a trailing full stop, say — into its own flex item with 15px of air in front of it. */ .qz-access{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0; margin:0 0 var(--acxpa-ds-space-xl);padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg); background:var(--acxpa-ds-white); border:1px solid var(--acxpa-ds-border-strong);border-top:0; border-bottom:3px solid var(--acxpa-ds-teal-700); border-radius:0 0 var(--acxpa-ds-radius-xl) var(--acxpa-ds-radius-xl)} .qz-access b{display:inline-block;margin-right:var(--acxpa-ds-space-md); padding:6px 11px;border-radius:var(--acxpa-ds-radius-sm); background:var(--acxpa-ds-teal-700);color:var(--acxpa-ds-text-on-dark); font-size:var(--acxpa-ds-text-caption);font-weight:700;letter-spacing:.09em; text-transform:uppercase;white-space:nowrap} .qz-access span{flex:1 1 320px;font-size:var(--acxpa-ds-text-small); line-height:var(--acxpa-ds-leading-body);color:var(--acxpa-ds-ink)} .qz-access a:not(#ax-no-such-id){color:var(--acxpa-ds-link);font-weight:700; text-decoration:underline;text-underline-offset:.15em} /* ---- the quiz itself ----------------------------------------------------- */ /* The tray is what stops a white card disappearing into a white page. The card keeps White so the answer rows read as they always have. */ .qz-page .ays-quiz-wrap{padding:var(--acxpa-ds-space-xl); background:var(--acxpa-ds-cloud);border-radius:var(--acxpa-ds-radius-xl)} .qz-page .ays-quiz-container:not(#ax-no-such-id){ background:var(--acxpa-ds-white)!important; /* plugin sets a per-quiz background */ border:1px solid var(--acxpa-ds-border-strong); border-radius:var(--acxpa-ds-radius-lg); box-shadow:var(--acxpa-ds-shadow-lg); overflow:hidden} /* ---- where to next ------------------------------------------------------- */ /* Section 9: 4xl / 96px is the section gap. */ .qz-next{margin:var(--acxpa-ds-space-4xl) 0 0;padding:var(--acxpa-ds-space-2xl); background:var(--acxpa-ds-cloud);border-radius:var(--acxpa-ds-radius-xl)} .qz-next h2{margin:0 0 var(--acxpa-ds-space-2xs);font-size:var(--acxpa-ds-text-h2); font-weight:700;line-height:var(--acxpa-ds-leading-snug);color:var(--acxpa-ds-teal-700)} .qz-next>p{margin:0 0 var(--acxpa-ds-space-lg);font-size:var(--acxpa-ds-text-body); line-height:var(--acxpa-ds-leading-body);color:var(--acxpa-ds-text-muted)} .qz-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:var(--acxpa-ds-space-md)} /* Colour set on the card itself, not just the span — the card is an , so any description text not wrapped in a span inherits the theme's link blue. */ .qz-card:not(#ax-no-such-id){display:block;padding:var(--acxpa-ds-space-xl); background:var(--acxpa-ds-white); border:1px solid var(--acxpa-ds-border-strong); border-left:4px solid var(--acxpa-ds-teal-700); border-radius:var(--acxpa-ds-radius-lg); color:var(--acxpa-ds-text-muted);text-decoration:none; transition:border-left-color .16s ease,box-shadow .16s ease,transform .16s ease} .qz-card:not(#ax-no-such-id):hover, .qz-card:not(#ax-no-such-id):focus-visible{border-left-color:var(--acxpa-ds-gold-deep); box-shadow:var(--acxpa-ds-shadow-lg);transform:translateY(-2px)} .qz-card strong{display:block;margin:0 0 5px;font-size:var(--acxpa-ds-text-h4); font-weight:700;line-height:var(--acxpa-ds-leading-snug);color:var(--acxpa-ds-teal-700)} .qz-card span{display:block;font-size:var(--acxpa-ds-text-small); line-height:var(--acxpa-ds-leading-body);color:var(--acxpa-ds-text-muted)} @media(prefers-reduced-motion:reduce){.qz-card:not(#ax-no-such-id):hover{transform:none}} /* ---- business / vendor admin notice -------------------------------------- */ .qz-admin{margin:0 0 var(--acxpa-ds-space-xl);padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-xl); background:var(--acxpa-ds-info-tint); border:1px solid var(--acxpa-ds-info);border-left:5px solid var(--acxpa-ds-info); border-radius:var(--acxpa-ds-radius-lg)} .qz-admin h2{margin:0 0 var(--acxpa-ds-space-xs);font-size:var(--acxpa-ds-text-h3); font-weight:700;line-height:var(--acxpa-ds-leading-snug);color:var(--acxpa-ds-info-deep)} .qz-admin p{margin:0 0 var(--acxpa-ds-space-sm);font-size:var(--acxpa-ds-text-body); line-height:var(--acxpa-ds-leading-body);color:var(--acxpa-ds-ink)} .qz-admin p:last-child{margin:0} .qz-admin a:not(#ax-no-such-id){color:var(--acxpa-ds-info-deep);font-weight:700; text-decoration:underline;text-underline-offset:.15em} @media(max-width:900px){ .qz-hero{grid-template-columns:1fr;gap:var(--acxpa-ds-space-lg);padding:var(--acxpa-ds-space-lg)} .qz-hero__meta{flex-direction:row;flex-wrap:wrap;gap:0 var(--acxpa-ds-space-lg); border-left:0;border-top:3px solid var(--acxpa-ds-teal-700); padding-left:0;padding-top:var(--acxpa-ds-space-sm)} .qz-access{padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md)} .qz-page .ays-quiz-wrap{padding:var(--acxpa-ds-space-md)} .qz-next{padding:var(--acxpa-ds-space-lg)} .qz-admin{padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg)} } /* KLEO's dynamic.css sets .main-color h1/h2 to the retired green and loads last */ .qz-page .qz-hero h1{color:var(--acxpa-ds-teal-700)!important} /* beats kleo dynamic.css h1 */ .qz-page .qz-next h2{color:var(--acxpa-ds-teal-700)!important} /* beats kleo dynamic.css h2 */ .qz-page .qz-admin h2{color:var(--acxpa-ds-info-deep)!important} /* beats kleo dynamic.css h2 */ /* The panel that replaces a quiz for the two administrator audiences is the real acxpa-glart-upgrade-card component, emitted by tier-gate.php from the markup in PART 6 of the Gating Guide. Standards section 30: component CSS is global and a page-level override is a fork, so there is deliberately nothing for it here. acxpa-articles.css owns it and already loads on quiz pages. */ /* The "What you get with each level" table that closes a quiz page keeps its CSS inside its own Templatera template (119712), at Justin's instruction, so the template stays a single self-contained thing that can be edited in one place. It is written against the --acxpa-ds-* tokens, so it still has no private palette and no hand-typed brand hex — see the file header there. */ /* =========================================================================== Courses dashboard — 30 Jul 2026 The Details column is off now, so the certificate download is the only action left in the table and should read as the primary one rather than the plugin's default black. The discipline headings also needed to actually carry the grouping — they were the same weight as body copy. courses.css is not enqueued on this page, so these live here. =========================================================================== */ .qd-group > h3:not(#ax-no-such-id){ margin:38px 0 14px; padding:2px 0 10px 14px; font-size: var(--acxpa-ds-text-h3); font-weight:800; line-height:1.25; color:var(--acxpa-ds-teal-700); border-left:5px solid var(--acxpa-ds-gold); border-bottom:2px solid var(--acxpa-ds-border-strong); } .qd-group:first-of-type > h3:not(#ax-no-such-id){ margin-top:18px } /* Certificate download. The plugin ships this anchor as display:inline with 12px vertical padding, so the painted box is 44px tall inside a 33px row and overlaps the button in the row below. Black-on-black hid it; two amber ones merged into one slab. inline-block puts the padding back in the flow, and the margin guarantees a gap no matter how many consecutive rows earn a certificate. */ a.ays-quiz-user-d-cert:not(#ax-no-such-id){ display:inline-block!important; vertical-align:middle!important; padding:6px 18px!important; margin:4px 0!important; line-height:1.35!important; font-size: var(--acxpa-ds-text-eyebrow) !important; white-space:nowrap!important; background:var(--acxpa-ds-gold)!important; background-image:none!important; border:1px solid var(--acxpa-ds-gold)!important; color:var(--acxpa-ds-teal-800)!important; font-weight:800!important; border-radius:6px!important; box-shadow:none!important; transition:background .16s ease, border-color .16s ease; } a.ays-quiz-user-d-cert:hover:not(#ax-no-such-id), a.ays-quiz-user-d-cert:focus:not(#ax-no-such-id){ background:var(--acxpa-ds-gold-deep)!important; border-color:var(--acxpa-ds-gold)!important; color:var(--acxpa-ds-text-on-dark) /* s11 CTA hover is Gold Deep / WHITE, 4.99:1 */!important; } @media (max-width:860px){ .qd-group > h3:not(#ax-no-such-id){ font-size:19px; margin-top:28px } } /* =========================================================================== DataTables controls on the dashboards — 30 Jul 2026 AYS turns on DataTables once a table has 10+ rows. KLEO styles every select and input as display:block / full width, which breaks the plugin's inline controls: the length select stretched to 175px so "Show ... entries" wrapped around it, and the search input went block-level, leaving "Search:" stranded on its own line. These put the controls back on one line each. =========================================================================== */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter{ margin:0 0 12px; font-size: var(--acxpa-ds-text-small); color:var(--acxpa-ds-text-muted); } .dataTables_wrapper .dataTables_length{ float:left } .dataTables_wrapper .dataTables_filter{ float:right } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label{ display:flex; align-items:center; gap:8px; margin:0; font-weight:700; white-space:nowrap; color:var(--acxpa-ds-teal-700); } .dataTables_wrapper .dataTables_length select:not(#ax-no-such-id){ display:inline-block!important; width:auto!important; min-width:74px!important; height:auto!important; padding:5px 8px!important; margin:0!important; font-size: var(--acxpa-ds-text-small) !important; line-height: var(--acxpa-ds-leading-snug) !important; color:var(--acxpa-ds-ink)!important; background-color:var(--acxpa-ds-bg)!important; border:1px solid var(--acxpa-ds-border-strong)!important; border-radius:6px!important; box-shadow:none!important; } .dataTables_wrapper .dataTables_filter input:not(#ax-no-such-id){ display:inline-block!important; width:220px!important; max-width:100%!important; height:auto!important; padding:6px 10px!important; margin:0!important; font-size: var(--acxpa-ds-text-small) !important; line-height: var(--acxpa-ds-leading-snug) !important; background-color:var(--acxpa-ds-bg)!important; border:1px solid var(--acxpa-ds-border-strong)!important; border-radius:6px!important; box-shadow:none!important; } .dataTables_wrapper .dataTables_filter input:focus:not(#ax-no-such-id){ border-color:var(--acxpa-ds-gold)!important; outline:2px solid color-mix(in srgb, var(--acxpa-ds-gold) 35%, transparent)!important; outline-offset:1px!important; } /* the controls float, so the table and footer must clear them */ .dataTables_wrapper table{ clear:both } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate{ clear:both; font-size: var(--acxpa-ds-text-eyebrow); color:var(--acxpa-ds-text-muted) } .dataTables_wrapper .dataTables_info{ float:left; padding-top:12px } .dataTables_wrapper .dataTables_paginate{ float:right; padding-top:8px } .dataTables_wrapper::after{ content:""; display:table; clear:both } .dataTables_wrapper .dataTables_paginate .paginate_button:not(#ax-no-such-id){ padding:5px 11px!important; margin:0 2px!important; border:1px solid var(--acxpa-ds-border-strong)!important; border-radius:6px!important; background:var(--acxpa-ds-bg)!important; color:var(--acxpa-ds-teal-700)!important; cursor:pointer; } .dataTables_wrapper .dataTables_paginate .paginate_button.current:not(#ax-no-such-id){ background:var(--acxpa-ds-teal-700)!important; border-color:var(--acxpa-ds-teal-700)!important; color:var(--acxpa-ds-text-on-dark)!important; font-weight:800!important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:not(#ax-no-such-id){ opacity:.45!important; cursor:default; } @media (max-width:700px){ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter{ float:none; display:block } .dataTables_wrapper .dataTables_filter input:not(#ax-no-such-id){ width:100%!important } } /* ============================================================================ A · Industry Knowledge Quizzes — category landing page Rendered by [acxpa_iq_page] in kleo-child/industry-quizzes/landing.php. Rebuilt Sep 2026 against Brand & Digital Standards v1.9. What changed and why - The full-bleed Teal 700 hero is gone. Section 11 plans a journey so a section is not the same dark band on every page; this page now opens on Cloud with teal type, and the one dark band left is the access table, where the contrast is doing work rather than decorating. - Twenty-three quizzes under six headings scrolled as one wall. The list is now a tab set: one topic on screen at a time, every panel still in the HTML for search engines and for anyone without JavaScript. - Nothing here carries a brand hex or a var() fallback. Section 16.1 makes acxpa-tokens.css the only file allowed either, and the --ax-* alias block that used to sit above this (one of the ten private palettes section 18 counted) has gone with it. ============================================================================ */ /* Section 9: the section gap is 4xl / 96px, and section 19's fourth pre-launch check measures it. Panel padding stays on 2xl / 48px — the gap between sections is what the check is about, not the padding inside a card. */ .iq{padding:0 0 var(--acxpa-ds-space-4xl)} .iq *{box-sizing:border-box} /* ---- hero ---------------------------------------------------------------- */ /* Cloud ground, teal type. The artwork carries the only gold on the screen until the call to action, so the eye lands on the button. */ /* Two columns for the copy and the artwork, then the chips and the buttons across the full width underneath. The artwork centres on the paragraphs rather than on the whole panel, so it sits with the text it belongs to instead of floating beside a column of white space. */ .iq-hero{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(210px,.85fr); grid-template-areas:"main art" "facts facts" "cta cta"; gap:var(--acxpa-ds-space-xl) var(--acxpa-ds-space-4xl);align-items:center; margin:0 0 var(--acxpa-ds-space-4xl);padding:var(--acxpa-ds-space-2xl); background:var(--acxpa-ds-cloud);border-radius:var(--acxpa-ds-radius-xl)} .iq-hero__main{grid-area:main;min-width:0} .iq-hero__art{grid-area:art} .iq-facts{grid-area:facts} .iq-cta{grid-area:cta} /* Gold Deep, not Gold: section 5 and section 12 both. Gold on Cloud is 1.73:1. */ .iq-hero__kicker:not(#ax-no-such-id){margin:0 0 var(--acxpa-ds-space-sm); font-size:var(--acxpa-ds-text-eyebrow);font-weight:700; letter-spacing:var(--acxpa-ds-tracking-eyebrow);line-height:var(--acxpa-ds-leading-eyebrow); text-transform:uppercase;color:var(--acxpa-ds-gold-deep)} .iq-hero__title:not(#ax-no-such-id){margin:0 0 var(--acxpa-ds-space-md); font-size:var(--acxpa-ds-text-h1);font-weight:800;line-height:var(--acxpa-ds-leading-tight); letter-spacing:-.015em;color:var(--acxpa-ds-teal-700)} .iq-hero p{margin:0 0 var(--acxpa-ds-space-sm);color:var(--acxpa-ds-ink); font-size:var(--acxpa-ds-text-body);line-height:var(--acxpa-ds-leading-body)} .iq-hero p:last-of-type{margin-bottom:0} .iq-hero strong{color:var(--acxpa-ds-teal-700)} .iq-facts{display:flex;flex-wrap:wrap;gap:var(--acxpa-ds-space-xs); margin:0;padding:var(--acxpa-ds-space-lg) 0 0;list-style:none; border-top:1px solid var(--acxpa-ds-border-strong)} .iq-facts li{background:var(--acxpa-ds-white);border:1px solid var(--acxpa-ds-border-strong); border-radius:var(--acxpa-ds-radius-pill);padding:8px 16px; font-size:var(--acxpa-ds-text-small);font-weight:600;color:var(--acxpa-ds-ink); transition:border-color .16s ease,color .16s ease,box-shadow .16s ease} .iq-facts li:hover{border-color:var(--acxpa-ds-gold-deep);color:var(--acxpa-ds-gold-deep); box-shadow:var(--acxpa-ds-shadow-sm)} /* ---- call to action ------------------------------------------------------ */ /* Section 11: the site chrome is Teal 700, so a Teal 700 Primary measures dE 0.0 against its own surroundings. On this site the lead control takes the section 11 call to action — Gold on Ink, 8.49:1. */ .iq-cta{display:flex;flex-wrap:wrap;gap:var(--acxpa-ds-space-sm);margin:0} .iq-btn:not(#ax-no-such-id){display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:14px 30px;border-radius:var(--acxpa-ds-radius-md); font-size:var(--acxpa-ds-text-body);font-weight:700;text-decoration:none; border:2px solid transparent;transition:background .16s ease,color .16s ease,border-color .16s ease} .iq-btn--primary:not(#ax-no-such-id){background:var(--acxpa-ds-gold);color:var(--acxpa-ds-ink); border-color:var(--acxpa-ds-gold)} .iq-btn--ghost:not(#ax-no-such-id){background:var(--acxpa-ds-white);color:var(--acxpa-ds-teal-700); border-color:var(--acxpa-ds-teal-700)} /* One hover colour for every button on the site — section 11. */ .iq-btn:not(#ax-no-such-id):hover, .iq-btn:not(#ax-no-such-id):focus-visible{background:var(--acxpa-ds-gold-deep); color:var(--acxpa-ds-white);border-color:var(--acxpa-ds-gold-deep)} /* The glow-and-sheen used on the benchmarking landing pages. Two flashes then a rest, so it reads as an invitation rather than a strobe. */ .iq-btn--pulse:not(#ax-no-such-id){position:relative;overflow:hidden; box-shadow:var(--acxpa-ds-shadow-md);animation:acxpaCtaGlow 2s linear infinite} .iq-btn--pulse::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%; pointer-events:none;transform:skewX(-18deg); background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%); animation:acxpaCtaSheen 2s linear infinite} @keyframes acxpaCtaGlow{ 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--acxpa-ds-gold) 0%, transparent)} 8%{box-shadow:0 0 30px 8px color-mix(in srgb, var(--acxpa-ds-gold) 85%, transparent)} 17%{box-shadow:0 0 8px 2px color-mix(in srgb, var(--acxpa-ds-gold) 20%, transparent)} 27%{box-shadow:0 0 34px 10px color-mix(in srgb, var(--acxpa-ds-gold) 85%, transparent)} 42%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--acxpa-ds-gold) 0%, transparent)}} @keyframes acxpaCtaSheen{0%{left:-60%}20%{left:120%}100%{left:120%}} /* Section 11: a state that uses movement needs a signal that survives without it. The button keeps its shadow and its gold fill, both of which clear the floor on their own. */ @media(prefers-reduced-motion:reduce){ .iq-btn--pulse:not(#ax-no-such-id){animation:none;box-shadow:var(--acxpa-ds-shadow-lg)} .iq-btn--pulse::before{display:none}} .iq-hero__art{display:flex;justify-content:center;align-items:center} .iq-art{width:100%;height:auto;max-width:290px;display:block;overflow:visible} /* ---- shared explainer ---------------------------------------------------- */ .iq-what{margin:0 0 var(--acxpa-ds-space-4xl)} .iq-what h2:not(#ax-no-such-id){margin:0 0 var(--acxpa-ds-space-xs); font-size:var(--acxpa-ds-text-h2);font-weight:700;line-height:var(--acxpa-ds-leading-snug); color:var(--acxpa-ds-teal-700)} .iq-what>p{margin:0 0 var(--acxpa-ds-space-lg);color:var(--acxpa-ds-text-muted); font-size:var(--acxpa-ds-text-body);line-height:var(--acxpa-ds-leading-body)} .iq-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--acxpa-ds-space-md)} /* Section 9: card padding is xl / 32px. */ .iq-3>div{background:var(--acxpa-ds-white);border:1px solid var(--acxpa-ds-border-strong); border-top:3px solid var(--acxpa-ds-teal-700); border-radius:var(--acxpa-ds-radius-lg);padding:var(--acxpa-ds-space-xl)} /* .iq-3 span sets the body size and out-specifies a lone class, so the icon rule has to carry the parent too. */ .iq-3 .iq-3__ico{display:block;font-size:var(--acxpa-ds-text-h2);line-height:1; margin:0 0 var(--acxpa-ds-space-sm)} .iq-3 strong{display:block;margin:0 0 6px;font-size:var(--acxpa-ds-text-h4);font-weight:700; color:var(--acxpa-ds-teal-700);line-height:var(--acxpa-ds-leading-snug)} .iq-3 span{font-size:var(--acxpa-ds-text-small);line-height:var(--acxpa-ds-leading-body); color:var(--acxpa-ds-text-muted)} /* ============================================================================ B · What each account gets The one dark band on the page. Four columns; the reader's own column is marked with a rail, a fill and a written label — colour is never the only cue (section 5 and section 15). ============================================================================ */ .iq-tiers{margin:0 0 var(--acxpa-ds-space-4xl)} .iq-tiers h2:not(#ax-no-such-id){margin:0 0 var(--acxpa-ds-space-xs); font-size:var(--acxpa-ds-text-h2);font-weight:700;line-height:var(--acxpa-ds-leading-snug); color:var(--acxpa-ds-teal-700)} .iq-tiers>p{margin:0 0 var(--acxpa-ds-space-lg);color:var(--acxpa-ds-text-muted); font-size:var(--acxpa-ds-text-body);line-height:var(--acxpa-ds-leading-body)} /* Collapsed for anyone who already has every row — see landing.php.
because it needs no JavaScript and stays open to find-in-page and to print. */ .iq-tiers__box{margin:0} .iq-tiers__box[open]{margin:0} /* The marker is drawn rather than borrowed: Safari does not rotate the native triangle, and a control nobody can see is a control. */ .iq-tiers__summary{list-style:none;cursor:pointer; display:grid;grid-template-columns:1fr auto;align-items:center; gap:var(--acxpa-ds-space-md); padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg); background:var(--acxpa-ds-cloud); border:1px solid var(--acxpa-ds-border-strong); border-left:5px solid var(--acxpa-ds-harbour); border-radius:var(--acxpa-ds-radius-lg); transition:background .16s ease,border-color .16s ease} .iq-tiers__summary::-webkit-details-marker{display:none} .iq-tiers__summary::marker{content:""} .iq-tiers__chev{grid-row:1 / span 2;grid-column:2; display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:var(--acxpa-ds-radius-pill); background:var(--acxpa-ds-white);border:1px solid var(--acxpa-ds-border-strong); color:var(--acxpa-ds-harbour); transition:transform .18s ease,background .16s ease,border-color .16s ease} .iq-tiers__chev svg{width:16px;height:16px;display:block} .iq-tiers__box[open] .iq-tiers__chev{transform:rotate(180deg)} .iq-tiers__summary:hover .iq-tiers__chev{border-color:var(--acxpa-ds-gold-deep); color:var(--acxpa-ds-gold-deep)} @media(prefers-reduced-motion:reduce){.iq-tiers__chev{transition:none}} .iq-tiers__summary-h,.iq-tiers__summary-x{grid-column:1} .iq-tiers__summary:hover{border-left-color:var(--acxpa-ds-gold-deep)} .iq-tiers__summary:focus-visible{outline:3px solid var(--acxpa-ds-focus);outline-offset:2px} .iq-tiers__summary-h{display:block;font-size:var(--acxpa-ds-text-h4);font-weight:700; line-height:var(--acxpa-ds-leading-snug);color:var(--acxpa-ds-harbour)} .iq-tiers__summary-x{display:block;margin-top:3px;font-size:var(--acxpa-ds-text-small); line-height:var(--acxpa-ds-leading-body);color:var(--acxpa-ds-text-muted)} /* Open: the summary becomes the table's own head, so the two read as one block. Closed: it is a self-contained control. */ .iq-tiers__box[open] .iq-tiers__summary{border-radius:var(--acxpa-ds-radius-lg) var(--acxpa-ds-radius-lg) 0 0; border-bottom:0} /* The table itself is no longer here. It is defined once, in Templatera template 119712, which renders both under every quiz post and inside this accordion — see the note in landing.php. The template carries its own CSS, including how it sits inside .iq-tiers__box, so there is deliberately nothing for .iq-tt, .iq-yes, .iq-no, .iq-note or .iq-tiers__scroll here any more. Two files describing one table is what we just stopped doing. */ .iq-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ============================================================================ C · Choose a quiz — topic tabs Every panel is in the HTML. The tablist is only wired up once JS adds .is-enhanced, so without JS the reader gets six headed lists rather than one visible panel and five that never open. ============================================================================ */ /* --iq-anchor is the height of whatever is pinned across the top of the viewport plus 16px of air. The script measures it and writes it onto ; the 138px fallback here is the WordPress toolbar (32) plus the site header (90) plus that 16, so the anchor still lands correctly if the script has not run yet — NitroPack delays inline JS until the first interaction, and that first interaction is usually the very click that follows this link. scroll-margin-top is what makes a NATIVE hash jump land correctly with no JavaScript involved at all. The script's own scrollTo is a refinement on top of it, not the thing the anchor depends on. */ .iq-list{margin:0 0 var(--acxpa-ds-space-4xl); scroll-margin-top:var(--iq-anchor,138px)} .iq-list h2:not(#ax-no-such-id){margin:0 0 var(--acxpa-ds-space-2xs); font-size:var(--acxpa-ds-text-h2);font-weight:700;line-height:var(--acxpa-ds-leading-snug); color:var(--acxpa-ds-teal-700)} .iq-list>p{margin:0 0 var(--acxpa-ds-space-lg);color:var(--acxpa-ds-text-muted); font-size:var(--acxpa-ds-text-body);line-height:var(--acxpa-ds-leading-body)} /* ---- topic tabs ---------------------------------------------------------- */ /* These were text on white with a hairline under the selected one, which is not a navigation control — it is a caption that happens to be clickable. They are now filled controls with a resting fill, a border and a topic rail, so the strip reads as the menu it is before anybody hovers anything. COLOUR CODING. Section 15: vary the weight, not the brand — try a different step of teal before reaching for a new hue, and never put both secondaries on one page. Six topics therefore take four steps of the teal ramp plus the Harbour pair, which is one secondary accent used consistently. Every value below carries White at 5.41:1 or better (section 14). */ .iq-tabs{display:flex;flex-wrap:wrap;gap:var(--acxpa-ds-space-xs); margin:0 0 var(--acxpa-ds-space-lg);padding:0} .iq-tab:not(#ax-no-such-id){appearance:none;cursor:pointer; display:inline-flex;align-items:center;min-height:44px; padding:10px 16px 10px 14px; background:var(--acxpa-ds-cloud); border:1px solid var(--acxpa-ds-border-strong); border-left:5px solid var(--iq-topic,var(--acxpa-ds-teal-700)); border-radius:var(--acxpa-ds-radius-md); font-family:inherit;font-size:var(--acxpa-ds-text-small);font-weight:700; color:var(--acxpa-ds-ink);white-space:nowrap; transition:background .16s ease,color .16s ease,border-color .16s ease} .iq-tab .iq-tab__n{display:inline-block;margin-left:9px;padding:1px 8px; border-radius:var(--acxpa-ds-radius-pill); background:var(--acxpa-ds-white);border:1px solid var(--acxpa-ds-border-strong); color:var(--acxpa-ds-text-muted); font-size:var(--acxpa-ds-text-caption);font-weight:700; font-variant-numeric:tabular-nums} .iq-tab:not(#ax-no-such-id):hover{background:var(--acxpa-ds-gold-deep); color:var(--acxpa-ds-white);border-color:var(--acxpa-ds-gold-deep)} .iq-tab:not(#ax-no-such-id):hover .iq-tab__n{background:transparent; border-color:var(--acxpa-ds-white);color:var(--acxpa-ds-white)} /* Selected carries a fill, a weight and a written count — three cues, and the fill is the topic's own colour so the tab and the panel below it agree. */ .iq-tab[aria-selected="true"]:not(#ax-no-such-id){ background:var(--iq-topic,var(--acxpa-ds-teal-700)); border-color:var(--iq-topic,var(--acxpa-ds-teal-700)); color:var(--acxpa-ds-text-on-dark)} .iq-tab[aria-selected="true"] .iq-tab__n{background:transparent; border-color:var(--acxpa-ds-text-muted-on-dark);color:var(--acxpa-ds-text-on-dark)} /* ============================================================================ TOPIC PALETTE — the one place to edit quiz category colours ---------------------------------------------------------------------------- DELIBERATELY OUTSIDE acxpa-tokens.css, with Justin's sign-off (7 Sep 2026). The rest of this file takes every value from a token, as section 16.1 requires. These eight hexes are the documented exception: the standards give the site three cool light grounds, and six quiz categories need six that a reader can tell apart at a glance. Steps of teal cannot do that — it was tried, and Teal 50 against Cloud is a three-point difference nobody sees. The exception is contained on purpose: - it lives here, in the feature stylesheet, not in the token file - it is scoped to [data-topic], so nothing else on the site can pick it up - every pair below is measured, not chosen by eye TO CHANGE A CATEGORY COLOUR, edit the two values on its line and nothing else. Keep white-on-hue at 4.5:1 or better and Ink-on-ground at 4.5:1 or better; the measured figures are in the comment on each line. hue = tab fill, panel band, card rail, card title ground = the tray the cards sit on ============================================================================ */ /* topic hue ground white/hue ink/ground */ [data-topic="customer-experience"] {--iq-topic:#0F4F5C; --iq-ground:#E7F0F1} /* 9.16 13.66 · Teal 700, the brand anchor */ [data-topic="contact-centres"] {--iq-topic:#2C4880; --iq-ground:#E8ECF7} /* 8.95 13.38 · Harbour */ [data-topic="customer-service"] {--iq-topic:#1B6E52; --iq-ground:#E4F1EB} /* 6.18 13.62 · green — NOT --acxpa-ds-success, which section 5 reserves for feedback */ [data-topic="ai-and-automation"] {--iq-topic:#5A3E8E; --iq-ground:#EEE9F7} /* 8.35 13.28 · violet */ [data-topic="leadership-and-culture"]{--iq-topic:#9E4429; --iq-ground:#F8E9E3} /* 6.34 13.37 · rust, a shade off Clay */ [data-topic="the-acxpa-benchmarks"] {--iq-topic:#8A5A10; --iq-ground:#F8EFDC} /* 5.91 13.84 · bronze — the members-only set reads as the prize */ [data-topic="more-quizzes"] {--iq-topic:#155F6E; --iq-ground:#E7F0F1} /* 7.26 13.66 · Teal 600 */ .iq-group{margin:0 0 var(--acxpa-ds-space-xl); background:var(--iq-ground,var(--acxpa-ds-cloud)); border-radius:var(--acxpa-ds-radius-lg); overflow:hidden} .iq-tabs-on .iq-group{margin-bottom:0} .iq-tabs-on .iq-group[hidden]{display:none} /* The heading is the panel's colour band. Three things at once: it names the topic for a screen reader and for a reader with no JavaScript, it is the surface carrying the topic colour, and it is what changes when you switch tabs — the ground tints alone are too close to read as a change. It is no longer hidden when the tabs are on; a panel that announces itself is better than a panel that relies on the tab strip to have been read. */ .iq-group__h:not(#ax-no-such-id){margin:0; padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-xl); background:var(--iq-topic,var(--acxpa-ds-teal-700)); color:var(--acxpa-ds-text-on-dark); font-size:var(--acxpa-ds-text-h4);font-weight:700; line-height:var(--acxpa-ds-leading-snug); letter-spacing:.01em} /* No ch cap. Section 19: line length is a property of the layout, not a rule on the element — a max-width inside a full-width WPBakery box shunts the copy left and leaves a band of dead space down the right. */ .iq-group__blurb{margin:0; padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-xl) 0; font-size:var(--acxpa-ds-text-body);line-height:var(--acxpa-ds-leading-body); color:var(--acxpa-ds-ink)} /* 290px lands on three columns in the theme's content width, so the nine-quiz Customer Experience panel fills three clean rows instead of two and an orphan. */ .iq-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:var(--acxpa-ds-space-md); padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-xl) var(--acxpa-ds-space-xl)} .iq-card:not(#ax-no-such-id){display:flex;flex-direction:column; padding:var(--acxpa-ds-space-xl);background:var(--acxpa-ds-white); border:1px solid var(--acxpa-ds-border-strong); border-left:4px solid var(--iq-topic,var(--acxpa-ds-teal-700)); border-radius:var(--acxpa-ds-radius-lg);text-decoration:none;color:var(--acxpa-ds-text-muted); transition:border-left-color .16s ease,box-shadow .16s ease,transform .16s ease} .iq-card:not(#ax-no-such-id):hover, .iq-card:not(#ax-no-such-id):focus-visible{border-left-color:var(--acxpa-ds-gold-deep); box-shadow:var(--acxpa-ds-shadow-lg);transform:translateY(-2px)} .iq-card b{display:block;margin:0 0 6px;font-size:var(--acxpa-ds-text-h4);font-weight:700; line-height:var(--acxpa-ds-leading-snug);color:var(--iq-topic,var(--acxpa-ds-teal-700))} .iq-card span{display:block;flex:1 1 auto;font-size:var(--acxpa-ds-text-small); line-height:var(--acxpa-ds-leading-body);color:var(--acxpa-ds-text-muted)} /* Not the topic colour. The title already carries that, and two things in the same colour inside one card makes the link read as a second heading rather than the thing you click. Ink with an underline is unambiguously a link. */ .iq-card em{display:inline-block;margin:var(--acxpa-ds-space-md) 0 0;font-style:normal; font-size:var(--acxpa-ds-text-small);font-weight:600;color:var(--acxpa-ds-ink); text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px} .iq-card:not(#ax-no-such-id):hover em, .iq-card:not(#ax-no-such-id):focus-visible em{color:var(--acxpa-ds-gold-deep); text-decoration-thickness:2px} /* Motion is the decoration; the rail and shadow carry the state on their own. */ @media(prefers-reduced-motion:reduce){.iq-card:not(#ax-no-such-id):hover{transform:none}} /* ---- where to next ------------------------------------------------------- */ .iq-tail{padding:var(--acxpa-ds-space-2xl);background:var(--acxpa-ds-cloud); border-radius:var(--acxpa-ds-radius-xl)} .iq-tail h2:not(#ax-no-such-id){margin:0 0 var(--acxpa-ds-space-xs); font-size:var(--acxpa-ds-text-h2);font-weight:700;line-height:var(--acxpa-ds-leading-snug); color:var(--acxpa-ds-teal-700)} .iq-tail>p{margin:0 0 var(--acxpa-ds-space-lg);color:var(--acxpa-ds-ink); font-size:var(--acxpa-ds-text-body);line-height:var(--acxpa-ds-leading-body)} /* The one inline link in this band — "ACXPA" to the About page. Section 11: links take Link, and every interactive thing on this site goes to Gold Deep on hover. The theme's own anchor colour would otherwise show through. */ .iq-tail>p a:not(#ax-no-such-id){color:var(--acxpa-ds-link);font-weight:700; text-decoration:underline;text-underline-offset:.15em} .iq-tail>p a:not(#ax-no-such-id):hover, .iq-tail>p a:not(#ax-no-such-id):focus-visible{color:var(--acxpa-ds-gold-deep)} .iq-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--acxpa-ds-space-sm)} .iq-links a:not(#ax-no-such-id){display:block;padding:var(--acxpa-ds-space-lg); background:var(--acxpa-ds-white);border:1px solid var(--acxpa-ds-border-strong); border-radius:var(--acxpa-ds-radius-lg);text-decoration:none; transition:border-color .16s ease,box-shadow .16s ease} .iq-links a:not(#ax-no-such-id):hover, .iq-links a:not(#ax-no-such-id):focus-visible{border-color:var(--acxpa-ds-gold-deep); box-shadow:var(--acxpa-ds-shadow-md)} .iq-links .iq-links__ico{display:block;font-size:var(--acxpa-ds-text-h3);line-height:1;margin:0 0 10px} .iq-links strong{display:block;margin:0 0 4px;font-size:var(--acxpa-ds-text-body);font-weight:700; color:var(--acxpa-ds-teal-700);line-height:var(--acxpa-ds-leading-snug)} .iq-links__txt{display:block;font-size:var(--acxpa-ds-text-small); line-height:var(--acxpa-ds-leading-body);color:var(--acxpa-ds-text-muted)} /* ---- KLEO's dynamic.css sets .main-color headings to the retired green and loads last. Named here rather than shouted at with !important on the file. */ .iq .iq-hero__title,.iq .iq-what h2,.iq .iq-list h2,.iq .iq-tiers h2, .iq .iq-tail h2{color:var(--acxpa-ds-teal-700)!important} /* beats kleo dynamic.css h2 */ .iq .iq-group__h{color:var(--acxpa-ds-text-on-dark)!important} /* beats kleo dynamic.css h3 */ @media(max-width:900px){ .iq-group__h:not(#ax-no-such-id){padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg)} .iq-group__blurb{padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg) 0} .iq-cards{padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg) var(--acxpa-ds-space-lg)} .iq-hero{grid-template-columns:1fr;grid-template-areas:"main" "art" "facts" "cta"; padding:var(--acxpa-ds-space-xl);gap:var(--acxpa-ds-space-lg)} .iq-hero__art{justify-content:flex-start} .iq-art{max-width:190px} .iq-tail{padding:var(--acxpa-ds-space-xl)} } @media(max-width:600px){ .iq-hero{padding:var(--acxpa-ds-space-lg)} .iq-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .iq-tail{padding:var(--acxpa-ds-space-lg)} } /* ---- hero artwork -------------------------------------------------------- */ /* A finished quiz rather than an empty one: a stack of cards, a struck answer, a chosen answer and a score. Every fill is a token. Section 14 (non-text contrast): the card edges and the answer rows carry structure, so they take the 3:1 threshold — Teal 400 measures 3.50:1 on Cloud. The score badge is the only gold on the illustration, which is what makes the eye land there. */ .iq-art__back{fill:var(--acxpa-ds-teal-100);stroke:var(--acxpa-ds-border-strong);stroke-width:1.5} .iq-art__card{fill:var(--acxpa-ds-white);stroke:var(--acxpa-ds-border-strong);stroke-width:1.5} .iq-art__eyebrow{fill:var(--acxpa-ds-gold-deep)} .iq-art__rule{fill:var(--acxpa-ds-teal-600)} .iq-art__rule--short{fill:var(--acxpa-ds-teal-400)} .iq-art__row{fill:var(--acxpa-ds-cloud);stroke:var(--acxpa-ds-border-strong);stroke-width:1.5} .iq-art__dot{fill:var(--acxpa-ds-white);stroke:var(--acxpa-ds-border-strong);stroke-width:2} .iq-art__txt{fill:var(--acxpa-ds-teal-300)} .iq-art__row--on{fill:var(--acxpa-ds-teal-50);stroke:var(--acxpa-ds-teal-700);stroke-width:2} .iq-art__dot--on{fill:var(--acxpa-ds-teal-700);stroke:none} .iq-art__tick{fill:none;stroke:var(--acxpa-ds-white);stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} .iq-art__txt--on{fill:var(--acxpa-ds-teal-700)} .iq-art__score-ring{fill:var(--acxpa-ds-cloud)} .iq-art__score{fill:var(--acxpa-ds-gold)} .iq-art__score-n{fill:var(--acxpa-ds-ink); /* 8.49:1 on Gold - s15 */ font-family:var(--acxpa-ds-font);font-size:var(--acxpa-ds-text-lead, 20px);font-weight:800; font-variant-numeric:tabular-nums} /* ---- access table footnote ----------------------------------------------- */ /* .iq-tiers>p out-specifies a lone class on a

, and was repainting these Slate: 4.17:1 on Harbour Tint, under the 4.5 floor. Scope beats specificity here — no !important needed. */ .iq-tiers .iq-tiers__note{margin:var(--acxpa-ds-space-md) 0 0;padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md); background:var(--acxpa-ds-info-tint);border-left:4px solid var(--acxpa-ds-info); border-radius:var(--acxpa-ds-radius-sm); font-size:var(--acxpa-ds-text-small);line-height:var(--acxpa-ds-leading-body); color:var(--acxpa-ds-ink)} .iq-tiers .iq-tiers__note strong{color:var(--acxpa-ds-info-deep)} /* ---- panels -------------------------------------------------------------- */ .iq-panels:focus{outline:none} .iq-group:focus-visible{outline:3px solid var(--acxpa-ds-focus);outline-offset:4px; border-radius:var(--acxpa-ds-radius-sm)} /* =========================================================================== Question explanations — 30 Jul 2026 The "why" behind each answer, shown to members on the results review. Note the plugin's own class name carries a typo (questtion) - matching both spellings so this survives a plugin update that fixes it. =========================================================================== */ .ays_questtion_explanation:not(#ax-no-such-id), .ays_question_explanation:not(#ax-no-such-id){ display:block; margin:12px 0 4px; padding:14px 18px 14px 16px; background:var(--acxpa-ds-teal-50); border:1px solid var(--acxpa-ds-border-strong); border-left:4px solid var(--acxpa-ds-gold); border-radius:10px; color:var(--acxpa-ds-ink); font-size: var(--acxpa-ds-text-body); line-height: var(--acxpa-ds-leading-body); } .ays_questtion_explanation:not(#ax-no-such-id)::before, .ays_question_explanation:not(#ax-no-such-id)::before{ content:"Why"; display:block; margin:0 0 6px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--acxpa-ds-teal-700); } @media (max-width:640px){ .ays_questtion_explanation:not(#ax-no-such-id), .ays_question_explanation:not(#ax-no-such-id){padding:12px 14px;font-size: var(--acxpa-ds-text-small)} } /* ---- attempts-used message, replacing the red inline block ---- */ .acxpa-lim:not(#ax-no-such-id){margin:18px 0;padding:24px 26px;border:1px solid var(--acxpa-ds-border-strong);border-left:5px solid var(--acxpa-ds-gold);border-radius:14px;background:var(--acxpa-ds-teal-50);text-align:left;} .acxpa-lim__h:not(#ax-no-such-id){margin:0 0 10px;font-size:1.2rem;font-weight:700;color:var(--acxpa-ds-teal-700);} .acxpa-lim p:not(#ax-no-such-id){margin:0 0 12px;color:var(--acxpa-ds-ink);} .acxpa-lim__act:not(#ax-no-such-id){display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:16px 0;} .acxpa-lim__btn:not(#ax-no-such-id){display:inline-block;padding:12px 24px;border-radius:9px;background:var(--acxpa-ds-gold);color:var(--acxpa-ds-teal-800);font-weight:700;text-decoration:none;} .acxpa-lim__btn:not(#ax-no-such-id):hover{background:var(--acxpa-ds-gold-deep);} .acxpa-lim__link:not(#ax-no-such-id){color:var(--acxpa-ds-teal-600);font-weight:600;text-decoration:underline;} .acxpa-lim__foot:not(#ax-no-such-id){margin:14px 0 0;padding-top:12px;border-top:1px solid var(--acxpa-ds-border-strong);font-size:.92rem;color:var(--acxpa-ds-text-muted);} /* ===== ACXPA quiz result screen - trailing notes + section break (31 Jul 2026) ===== */ /* The score tile at the top already shows the average - hide the plugin's duplicate line. !important is required: the plugin sets display inline via JS. */ .ays_quiz_results_page p.ays_average:not(#ax-no-such-id){display:none!important;} /* The loose paragraphs after the result band read as fine print, under a hairline. !important is required: these paragraphs carry inline styles from the saved copy. */ .ays-quiz-interval-message-box > p:not(#ax-no-such-id){margin:0 auto 9px!important;max-width:660px!important;padding:0!important;font-size: var(--acxpa-ds-text-small) !important;line-height: var(--acxpa-ds-leading-body) !important;color:var(--acxpa-ds-text-muted)!important;text-align:left!important;} .ays-quiz-interval-message-box > p:not(#ax-no-such-id):first-of-type{margin-top:24px!important;padding-top:18px!important;border-top:1px solid var(--acxpa-ds-border-strong);} .ays-quiz-interval-message-box > p:not(#ax-no-such-id):last-of-type{margin-bottom:0!important;} .ays-quiz-interval-message-box > p:not(#ax-no-such-id) strong{color:var(--acxpa-ds-ink);} /* Air between the fine print and the restart button. */ .ays_quiz_results_page p.ays_restart_button_p:not(#ax-no-such-id){margin:28px 0 0!important;}