→ tonal label chip
→ leading icon + accent rail
============================================================ */
.ckb {
/* Brand */
--coef-green:#7AC143; --coef-teal:#00B5AD; --coef-blue:#4A7B8D;
--coef-dark:#2b3338; --coef-light:#E5E5E5;
/* Roles */
--primary:#43707f; --primary-strong:#355c69; --on-primary:#fff;
--surface:#fff; --surface-1:#f6f8f8; --surface-2:#eef3f3;
--outline:#dde3e4; --outline-soft:#e8edee;
--on-surface:#2b3338; --on-surface-med:#586469; --muted:#6a767b;
/* Callout roles */
--info-bg:#e4f5f4; --info-acc:#00978f; --info-ink:#0c4f4b;
--note-bg:#e9f1f3; --note-acc:#43707f; --note-ink:#284851;
--tip-bg:#eef7e4; --tip-acc:#5f9e26; --tip-ink:#39611a;
--crit-bg:#fbeae3; --crit-acc:#d2542a; --crit-ink:#8a3415;
--accent:var(--coef-teal);
--r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
--e1:0 1px 2px rgba(33,49,54,.06),0 1px 1px rgba(33,49,54,.04);
--e2:0 2px 6px rgba(33,49,54,.07),0 1px 2px rgba(33,49,54,.05);
--pad:30px;
/* Defensive base — beats Echo customiser typography */
font-family:'Inter',system-ui,-apple-system,sans-serif;
font-size:16px; line-height:1.62; color:var(--on-surface);
}
.ckb, .ckb *, .ckb *::before, .ckb *::after { box-sizing:border-box; }
/* Accent swap helpers (optional per block) */
.ckb--green { --accent:var(--coef-green); }
.ckb--teal { --accent:var(--coef-teal); }
.ckb--blue { --accent:var(--coef-blue); }
/* ---------- CARD WRAPPER ---------- */
.ckb .kb-card{
background:var(--surface); border:1px solid var(--outline);
border-radius:var(--r-lg); box-shadow:var(--e1); overflow:clip;
}
.ckb .kb-body{ padding:var(--pad); }
/* ---------- BREADCRUMB / UTILITY BAR ---------- */
.ckb .kb-topbar{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
padding:12px 18px; border-bottom:1px solid var(--outline-soft); background:var(--surface);
}
.ckb .kb-alltopics{
display:inline-flex; align-items:center; gap:7px; cursor:pointer; text-decoration:none;
font:600 13px/1 'Inter'; color:var(--primary); background:var(--surface-2);
border:1px solid var(--outline); padding:8px 13px; border-radius:var(--r-pill);
}
.ckb .kb-alltopics:hover{ background:#e6eeef; }
.ckb .kb-alltopics svg{ width:14px; height:14px; }
.ckb .kb-crumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0;
font:500 13px/1 'Inter'; color:var(--muted); }
.ckb .kb-crumbs a{ color:var(--primary); text-decoration:none; }
.ckb .kb-crumbs a:hover{ text-decoration:underline; }
.ckb .kb-crumbs .sep{ color:#b9c3c5; }
.ckb .kb-crumbs .here{ color:var(--on-surface-med); font-weight:600; }
.ckb .kb-print{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
font:600 13px/1 'Inter'; color:var(--on-surface-med); background:var(--surface);
border:1px solid var(--outline); padding:8px 14px; border-radius:var(--r-pill); }
.ckb .kb-print:hover{ background:var(--surface-1); border-color:#cdd5d6; }
.ckb .kb-print svg{ width:15px; height:15px; }
/* ---------- HERO ---------- */
.ckb .kb-hero{
position:relative; overflow:hidden; border-radius:var(--r-lg); color:#fff;
background:linear-gradient(120deg,#1d2e36,#2b4a56 60%,#21333b);
padding:38px 40px; box-shadow:var(--e2);
}
.ckb .kb-hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
background:
repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 12px,transparent 12px 24px),
radial-gradient(120% 140% at 80% -10%,rgba(0,181,173,.28),transparent 55%); }
.ckb .kb-hero__strip{ position:absolute; top:-30px; right:-20px; width:220px; height:200px;
opacity:.5; pointer-events:none;
background:
linear-gradient(58deg,transparent 46%,var(--coef-green) 46% 52%,transparent 52%),
linear-gradient(58deg,transparent 60%,var(--coef-teal) 60% 65%,transparent 65%); }
.ckb .kb-hero__eyebrow{ position:relative; margin-bottom:12px;
font:600 12px/1 'Poppins'; letter-spacing:.14em; text-transform:uppercase; color:var(--coef-green); }
.ckb .kb-hero h1{ position:relative; margin:0; font-family:'Poppins',sans-serif;
font-weight:700; font-size:34px; line-height:1.12; letter-spacing:-.01em; }
.ckb .kb-hero p{ position:relative; margin:12px 0 0; max-width:60ch; color:#d7e2e5; font-size:16px; }
/* page title (hero-off) */
.ckb .kb-pagehead h1{ margin:0; font-family:'Poppins',sans-serif; font-weight:700;
font-size:30px; line-height:1.15; letter-spacing:-.015em; color:var(--coef-dark); }
.ckb .kb-pagehead p{ margin:8px 0 0; color:var(--muted); font-size:16px; max-width:62ch; }
/* ---------- BLOCK HEADER (compact heading system) ---------- */
.ckb .block__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; position:relative; }
.ckb .block__title{ margin:0; font-family:'Poppins',sans-serif; font-weight:600;
font-size:20px; line-height:1.25; letter-spacing:-.01em; color:var(--coef-dark); }
.ckb .block__head .ico{ flex:none; display:grid; place-items:center; width:34px; height:34px;
border-radius:9px; background:var(--surface-2); color:var(--primary); }
.ckb .block__head .ico svg{ width:18px; height:18px; }
.ckb .block__label{ display:none; font:600 11px/1 'Poppins'; letter-spacing:.1em;
text-transform:uppercase; color:var(--info-ink); background:var(--info-bg);
padding:5px 10px; border-radius:var(--r-pill); }
/* default = UNDERLINE */
.ckb .block__head .ico{ display:none; }
.ckb .block__head{ border-bottom:2px solid var(--outline-soft); padding-bottom:10px; }
.ckb .block__head::after{ content:""; position:absolute; left:0; bottom:-2px;
width:46px; height:2px; background:var(--accent); }
/* CHIP variant */
.ckb--chip .block__head{ flex-direction:column; align-items:flex-start; gap:7px;
border-bottom:none; padding-bottom:0; }
.ckb--chip .block__head::after{ display:none; }
.ckb--chip .block__label{ display:inline-block; }
/* ICON variant */
.ckb--icon .block__head{ border-bottom:none; padding-bottom:0; }
.ckb--icon .block__head::after{ display:none; }
.ckb--icon .block__head .ico{ display:grid; }
.ckb--icon .block__head::before{ content:""; flex:none; width:4px; align-self:stretch;
min-height:22px; border-radius:4px; background:var(--accent); }
/* sub-headings + eyebrow */
.ckb .h-sec{ font-family:'Poppins',sans-serif; font-weight:600; font-size:17px;
letter-spacing:-.005em; color:var(--coef-dark); margin:22px 0 8px; }
.ckb .h-sec:first-child{ margin-top:0; }
.ckb .eyebrow{ margin:0 0 6px; font:600 12px/1 'Poppins'; letter-spacing:.08em;
text-transform:uppercase; color:var(--primary); }
/* ---------- PROSE ---------- */
.ckb .prose p{ margin:0 0 12px; color:var(--on-surface); }
.ckb .prose p:last-child{ margin-bottom:0; }
.ckb .prose ul, .ckb ul.prose{ margin:6px 0 14px; padding:0; list-style:none; }
.ckb ul.prose{ margin:0; }
.ckb .prose li{ position:relative; padding-left:22px; margin:6px 0; color:var(--on-surface); }
.ckb .prose li::before{ content:""; position:absolute; left:4px; top:10px;
width:6px; height:6px; border-radius:2px; background:var(--accent); }
.ckb .prose strong{ font-weight:600; color:var(--coef-dark); }
.ckb .prose a{ color:var(--primary); text-decoration-color:#b7c6ca; text-underline-offset:2px; }
/* ---------- CALLOUTS ---------- */
.ckb .callout{ display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px 18px;
border-radius:var(--r-md); background:var(--note-bg);
border:1px solid color-mix(in srgb,var(--note-acc) 18%,transparent); }
.ckb .callout + .callout{ margin-top:12px; }
.ckb .callout__ico{ flex:none; width:30px; height:30px; border-radius:8px;
display:grid; place-items:center; color:#fff; background:var(--note-acc); }
.ckb .callout__ico svg{ width:17px; height:17px; }
.ckb .callout__body{ min-width:0; }
.ckb .callout__title{ margin:3px 0 6px; font:600 13px/1.2 'Poppins'; letter-spacing:.02em;
text-transform:uppercase; color:var(--note-ink); }
.ckb .callout__body p{ margin:0 0 8px; } .ckb .callout__body p:last-child{ margin-bottom:0; }
.ckb .callout__body ul, .ckb .callout__body ul.prose{ list-style:none; margin:0; padding:0; }
.ckb .callout__body li{ position:relative; padding-left:20px; margin:5px 0; color:var(--on-surface); }
.ckb .callout__body li::before{ content:""; position:absolute; left:2px; top:9px;
width:6px; height:6px; border-radius:2px; background:var(--note-acc); }
.ckb .callout--info{ background:var(--info-bg); border-color:color-mix(in srgb,var(--info-acc) 20%,transparent); }
.ckb .callout--info .callout__ico{ background:var(--info-acc); }
.ckb .callout--info .callout__title{ color:var(--info-ink); }
.ckb .callout--info .callout__body li::before{ background:var(--info-acc); }
.ckb .callout--tip{ background:var(--tip-bg); border-color:color-mix(in srgb,var(--tip-acc) 22%,transparent); }
.ckb .callout--tip .callout__ico{ background:var(--tip-acc); }
.ckb .callout--tip .callout__title{ color:var(--tip-ink); }
.ckb .callout--tip .callout__body li::before{ background:var(--tip-acc); }
.ckb .callout--crit{ background:var(--crit-bg); border-color:color-mix(in srgb,var(--crit-acc) 26%,transparent); }
.ckb .callout--crit .callout__ico{ background:var(--crit-acc); }
.ckb .callout--crit .callout__title{ color:var(--crit-ink); }
.ckb .callout--crit .callout__body li::before{ background:var(--crit-acc); }
/* ---------- MEDIA PLACEHOLDERS ---------- */
.ckb .media{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--outline); background:var(--surface-1); }
.ckb .ph{ position:relative; display:grid; place-items:center; color:var(--muted);
background:repeating-linear-gradient(135deg,#e7edee 0 14px,#eff3f4 14px 28px); }
.ckb .ph__tag{ font:500 12px/1.3 'Inter'; letter-spacing:.02em; color:var(--on-surface-med);
background:rgba(255,255,255,.82); border:1px solid var(--outline); padding:6px 11px; border-radius:var(--r-pill); }
.ckb .ph--video{ aspect-ratio:16/10; }
.ckb .ph--video .play{ position:absolute; width:56px; height:56px; border-radius:50%;
background:rgba(43,51,56,.62); display:grid; place-items:center; }
.ckb .ph--video .play::after{ content:""; border-style:solid; border-width:10px 0 10px 17px;
border-color:transparent transparent transparent #fff; margin-left:4px; }
.ckb .ph--video .ph__tag{ position:absolute; bottom:12px; }
.ckb .ph--shot{ aspect-ratio:4/3; }
/* ---------- SPLIT (text + media) ---------- */
.ckb .split{ display:grid; grid-template-columns:1fr .82fr; gap:22px; align-items:start; }
.ckb .split--media-left{ grid-template-columns:.82fr 1fr; }
.ckb .split--media-left .split__media{ order:-1; }
@media (max-width:720px){ .ckb .split,.ckb .split--media-left{ grid-template-columns:1fr; } }
/* ---------- STEP ---------- */
.ckb .step__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.ckb .step__badge{ flex:none; display:inline-flex; align-items:baseline; gap:5px;
background:var(--accent); color:#fff; border-radius:var(--r-pill); padding:7px 14px; box-shadow:var(--e1); }
.ckb .step__badge b{ font:700 12px/1 'Poppins'; letter-spacing:.12em; text-transform:uppercase; }
.ckb .step__badge i{ font:700 15px/1 'Poppins'; font-style:normal; }
.ckb .step__title{ margin:0; font-family:'Poppins',sans-serif; font-weight:600; font-size:19px; color:var(--coef-dark); }
/* ---------- META FOOTER ---------- */
.ckb .kb-meta{ display:flex; align-items:center; gap:18px 22px; flex-wrap:wrap;
padding:16px var(--pad); border-top:1px solid var(--outline-soft);
color:var(--muted); font-size:13px; background:var(--surface-1); border-radius:20px; }
.ckb .kb-meta .m{ display:inline-flex; align-items:center; gap:7px; }
.ckb .kb-meta .m svg{ width:14px; height:14px; color:#9aa6aa; }
.ckb .kb-meta .avatar{ width:22px; height:22px; border-radius:50%; background:var(--primary);
color:#fff; display:grid; place-items:center; font:600 10px/1 'Inter'; }
.ckb .kb-tags{ display:inline-flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.ckb .chip{ font:600 12px/1 'Inter'; color:var(--primary); background:var(--surface-2);
border:1px solid var(--outline); padding:6px 11px; border-radius:var(--r-pill); }
/* ---------- RELATED LIST ---------- */
.ckb .related__head{ display:flex; align-items:center; gap:10px; margin:0 2px 12px; }
.ckb .related__head .ico{ color:var(--accent); display:grid; place-items:center; }
.ckb .related__head .ico svg{ width:18px; height:18px; }
.ckb .related__head h2{ margin:0; font-family:'Poppins',sans-serif; font-weight:600; font-size:17px; color:var(--coef-dark); }
.ckb .related__list{ display:grid; gap:10px; }
.ckb .rel-item{ display:grid; grid-template-columns:40px 1fr auto; gap:14px; align-items:center;
padding:14px 16px; background:var(--surface); border:1px solid var(--outline);
border-radius:var(--r-md); text-decoration:none; color:inherit;
transition:border-color .15s,box-shadow .15s,transform .15s; }
.ckb .rel-item:hover{ border-color:#c6d0d2; box-shadow:var(--e2); transform:translateY(-1px); }
.ckb .rel-item__ico{ width:40px; height:40px; border-radius:10px; background:var(--surface-2);
display:grid; place-items:center; color:var(--primary); }
.ckb .rel-item__ico svg{ width:20px; height:20px; }
.ckb .rel-item__t{ margin:0 0 2px; font:600 15px/1.3 'Poppins'; color:var(--primary); }
.ckb .rel-item__d{ margin:0; font-size:13px; color:var(--muted); }
.ckb .rel-item__go{ color:#b3bec1; display:grid; place-items:center; }
.ckb .rel-item__go svg{ width:18px; height:18px; }
/* ---------- ICONS ---------- */
.ckb svg{ stroke-linecap:round; stroke-linejoin:round; }
@media print{
.ckb .kb-print,.ckb .kb-alltopics{ display:none !important; }
.ckb .kb-card,.ckb .kb-hero,.ckb .rel-item{ box-shadow:none !important; }
}
/* ============================================================
KB category / taxonomy archive — box up to match front page
Added 2026-07-04. Mirrors the front-page grey backdrop + white
rounded card, and rounds the blue search module.
------------------------------------------------------------ */
body.eckb-kb-template-category-page{ background:#eeeeee !important; }
body.eckb-kb-template-category-page #eckb-archive-page-container{
max-width:1200px !important;
margin:20px auto 40px !important;
padding:20px !important;
background:#ffffff !important;
border-radius:20px !important;
box-sizing:border-box !important;
display:block !important;
}
/* round the blue search module (front page + archive) */
#epkb-ml__module-search.eckb_search_on_main_page{
border-radius:20px !important;
/* overflow:hidden removed 2026-07-10 - it clipped the instant-search dropdown */
}
/* round the blue category panel on the KB main page */
#epkb-content-container{ border-radius:20px !important; }
/* Hide Echo KB native article-footer tags — redundant with custom .ckb .kb-meta bar (slick footer) */
#eckb-article-content-footer .eckb-tag-container{ display:none !important; }
/* ---------- SECTION SPACING ---------- */
/* Breathing room between ckb section blocks in the article body,
including sections accidentally nested inside another section.
Scoped so template chrome (hero, topbar) is unaffected. */
.elementor-widget-theme-post-content .ckb + .ckb,
.elementor-widget-theme-post-content .ckb .ckb,
.editor-styles-wrapper .ckb + .ckb,
.editor-styles-wrapper .ckb .ckb { margin-top: 36px; }
/* Headings or heading-patterns placed mid-content act as section breaks.
!important because Echo's article-body styles zero heading margins with heavier selectors. */
.ckb .prose h2:not(.block__title), .ckb .prose h3:not(.block__title) { margin-top: 36px !important; }
.ckb .prose h2:first-child, .ckb .prose h3:first-child { margin-top: 0 !important; }
.ckb .prose .block__head, .ckb .prose + .block__head { margin-top: 36px !important; }
/* Prose and callouts flowing after one another inside a section */
.ckb .prose + .callout { margin-top: 20px; }
.ckb .callout + .prose { margin-top: 20px; }
.ckb .callout + .block__head { margin-top: 36px !important; }
/* ---------- TABLES ---------- */
/* Core Table blocks inside articles pick up the brand look automatically.
Tip: turn on 'Header section' in the table block settings for the teal header row. */
.ckb .wp-block-table { margin: 14px 0 20px; border: 1px solid var(--outline); border-radius: 10px; overflow: hidden; }
.ckb .wp-block-table table { width: 100%; border-collapse: collapse; margin: 0; background: #fff; font-size: 14px; }
.ckb .wp-block-table th, .ckb .wp-block-table td { padding: 8px 12px; border: 1px solid var(--outline); text-align: left; vertical-align: top; }
.ckb .wp-block-table thead th, .ckb .wp-block-table tr:first-child th { background: var(--primary); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .01em; border-color: var(--primary-strong); }
.ckb .wp-block-table tbody tr:nth-child(even) td { background: var(--surface-1); }
.ckb .wp-block-table td:first-child, .ckb .wp-block-table tbody th { font-weight: 600; }
/* First column (descriptors) left, all other columns centred */
.ckb .wp-block-table th:not(:first-child), .ckb .wp-block-table td:not(:first-child) { text-align: center; }
.ckb .wp-block-table figcaption { font-size: 12.5px; color: #6b7679; margin-top: 6px; text-align: left; }
/* ---------- PANELS ---------- */
/* Wrapper for grouped table sets (e.g. pay-rate blocks per program type) */
.ckb .panel { background: var(--surface-1); border: 1px solid var(--outline-soft); border-radius: var(--r-lg); padding: 18px 20px; margin: 20px 0; }
.ckb .panel--green { background: var(--tip-bg); border-color: var(--tip-acc); }
.ckb .panel h3 { margin: 0 0 4px; }
.ckb .panel h4 { margin: 18px 0 8px; font-family: 'Poppins', sans-serif; }
.ckb .panel p { margin: 0 0 10px; }
.ckb .table--compact table { font-size: 12px; }
.ckb .table--compact th, .ckb .table--compact td { padding: 6px; }
/* Content accidentally placed directly in a callout (outside callout__body)
stacks full-width instead of scattering in the flex row */
.callout > p, .callout > ul, .callout > ol, .callout > figure,
.callout > .wp-block-group__inner-container > p,
.callout > .wp-block-group__inner-container > ul,
.callout > .wp-block-group__inner-container > ol,
.callout > .wp-block-group__inner-container > figure { flex: 0 0 100%; min-width: 0; }
/* 2026-07-13 heading colour on lessons - force KB blue on headings everywhere (Tutor lessons dropped the override) */
.ckb .block__head .block__title, .ckb .block__title{ color:var(--coef-blue,#4A7B8D); }