/* ===================================================================== hub-home.css — the Knowledge Hub homepage ('/') and the Hub index (/knowledge-hub) (redesign SPEC §7, §5.1; the CRCGS Website Design Guide, homepage). Loaded by layouts/hub.php on every Hub page after crcgs.css, so EVERY rule here is scoped under .hh (the homepage) or .hh-page (/knowledge-hub) and touches nothing else. Colours: the kit's --ck- tokens; the few extra shades the drawings and grounds need are the --hh- tokens in section 0 — no colour is written anywhere else. --ck-blue and --ck-orange are used as text only on navy (7:1 and 8.6:1); on light grounds the blue is --ck-blue-text and the orange is a highlight under navy text. Motion: every animation here is switched off under prefers-reduced-motion (section 10); the scripts (hub-home.js, hub-globe.js) also check it and leave everything in its final state. Sections: 0 tokens · 1 shared · 2 hero · 3 Knowledge Hub cards · 4 Country Profiles · 5 Certification · 6 Events · 7 Team · 8 section menu · 9 /knowledge-hub · 10 reduced motion ===================================================================== */ /* ---- 0. Extra shades (drawings, grounds, controls on the hero) ---- */ .hh,.hh-page{ --hh-navy-2:#0A2A7A; /* the far end of the navy grounds */ --hh-navy-glow:rgba(0,180,216,.22); --hh-cyan-soft:#90E0EF; --hh-cyan-pale:#CAF0F8; --hh-cream-2:#FDEBD3; --hh-orange-soft:#FFD7A1; --hh-ink-soft:rgba(3,4,94,.10); --hh-ink-line:rgba(3,4,94,.22); --hh-ink-mid:rgba(3,4,94,.5); /* inactive slide dots on light grounds (3:1 for a control) */ --hh-blue-deep:#00608F; /* small blue text on tinted grounds (AA where --ck-blue-text is not) */ --hh-white-06:rgba(255,255,255,.06); --hh-white-14:rgba(255,255,255,.14); --hh-white-45:rgba(255,255,255,.45); --hh-white-80:rgba(255,255,255,.8); --hh-shadow-deep:0 14px 34px rgba(2,3,63,.32); --hh-glass:rgba(3,4,94,.9); --hh-ring:rgba(0,180,216,.28); --hh-radius:18px; /* The navy veil over a slide's photo (team review 2026-10-18; lighter after the review, so the photo shows): at least --hh-veil-text wherever the words sit. Over the brightest photo (white) that is #454588: white 8.5:1, --ck-on-navy 7.1:1 (the body text, and the small eyebrow on a photo), the heading's blue and orange words (large text) 3.5:1 and 4.2:1. Thinner towards the drawing's side (soft) and, on phones, behind the drawing (mid). --hh-veil-ctl is a soft extra shade behind the slide controls, so their dots and the orange focus ring keep 3:1 where the photo shows most */ --hh-veil-strong:rgba(3,4,94,.8); --hh-veil-text:rgba(3,4,94,.74); --hh-veil-mid:rgba(3,4,94,.6); --hh-veil-soft:rgba(3,4,94,.3); --hh-veil-ctl:rgba(3,4,94,.45); } /* ---- 1. Shared ---- */ .hh .hh-h2,.hh-page .hh-h2{margin:0 0 .45em;font:700 clamp(2rem,1.35rem + 1.9vw,3rem)/1.1 var(--ck-font-head);color:var(--ck-navy);letter-spacing:-.015em} .hh .hh-lead,.hh-page .hh-lead{margin:0 0 1.5em;max-width:36em;font-size:clamp(1.03rem,.98rem + .25vw,1.15rem);line-height:1.65;color:var(--ck-muted)} .hh .hh-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:var(--hh-blue-deep)} .hh .hh-eyebrow::before{content:"";flex:0 0 auto;width:28px;height:3px;border-radius:2px;background:var(--ck-orange)} .hh .hh-btn-lg{min-height:52px;padding:0 26px;font-size:16px} .hh .hh-line{display:block} .hh .hh-accent--1{color:var(--ck-blue-text)} .hh .hh-accent--2{color:var(--ck-navy);background:linear-gradient(var(--ck-orange),var(--ck-orange)) 0 90%/100% .2em no-repeat; -webkit-box-decoration-break:clone;box-decoration-break:clone} .hh section{position:relative} /* ---- 2. Hero slides ---- Without JavaScript: a strip of slides side by side that scrolls sideways (the first shows). With it, the slides are stacked in one place from the very first frame (html.ck-js is set before the page is drawn, crcgs-early.js) and the first slide shows complete, text and drawing — nothing waits for an animation or moves when hub-home.js arrives. hub-home.js then adds .is-ready (slides change by fading) and, from the first change on, .has-turned: the text of the slide coming in drops in from above and its drawing rises. */ .hh-hero{isolation:isolate;background:var(--ck-navy); --hh-ctl:var(--ck-navy);--hh-ctl-line:var(--hh-ink-line);--hh-ctl-bg:var(--hh-white-80);--hh-dot:var(--hh-ink-mid)} .hh-hero[data-tone="dark"]{--hh-ctl:var(--ck-white);--hh-ctl-line:var(--hh-white-45);--hh-ctl-bg:var(--hh-white-06);--hh-dot:var(--hh-white-45)} .hh-hero__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin} /* The height leaves room for the homepage's header (top bar + main row, about 116px, no menu row) — a fixed figure, not the header height crcgs.js measures later, so the slides never change height */ .hh-slide{position:relative;flex:0 0 100%;display:flex;align-items:center;overflow:hidden;scroll-snap-align:start; min-height:clamp(540px,calc(100vh - 164px),680px)} .ck-js .hh-hero__track{display:grid;overflow:visible} .ck-js .hh-slide{grid-area:1/1;z-index:0} .ck-js .hh-slide:not(.is-active){visibility:hidden;opacity:0} /* A cross-fade: the new slide — photo, words and drawing together — fades in over the old one (.8s, hub-home.js keeps the old one .is-leaving a little longer); none under "reduce motion" (section 10) */ .hh-hero.is-ready .hh-slide{transition:opacity .8s ease,visibility 0s linear .8s} /* the slide going out stays whole underneath while the new one fades in on top (no navy showing through) */ .hh-hero.is-ready .hh-slide.is-leaving{z-index:1;visibility:visible;opacity:1;transition:none} .hh-hero.is-ready .hh-slide.is-active{z-index:2;visibility:visible;opacity:1;transition:opacity .8s ease} /* Each drawing has its own ground; 'network' slides are navy */ .hh-slide--knowledge{background:radial-gradient(60% 70% at 78% 40%,var(--ck-white) 0%,transparent 70%),linear-gradient(160deg,var(--ck-light) 0%,var(--hh-cyan-pale) 100%)} .hh-slide--globe{background:radial-gradient(55% 75% at 20% 50%,var(--ck-white) 0%,transparent 72%),linear-gradient(180deg,var(--ck-white) 0%,var(--ck-light) 100%)} .hh-slide--certificate{background:radial-gradient(60% 70% at 25% 45%,var(--ck-white) 0%,transparent 70%),linear-gradient(160deg,var(--ck-cream) 0%,var(--hh-cream-2) 100%)} .hh-slide.hh-tone-dark{color:var(--ck-on-navy); background:radial-gradient(55% 80% at 82% 45%,var(--hh-navy-glow) 0%,transparent 70%),linear-gradient(115deg,var(--ck-navy-deep) 0%,var(--ck-navy) 45%,var(--hh-navy-2) 100%)} .hh-slide::before{content:"";position:absolute;z-index:0;top:50%;right:-12%;width:min(62vw,820px);aspect-ratio:1;border-radius:50%; transform:translateY(-50%);background:radial-gradient(circle,var(--hh-ink-soft) 0%,transparent 62%);pointer-events:none} .hh-slide--visual-left::before{right:auto;left:-12%} .hh-slide.hh-tone-dark::before{background:radial-gradient(circle,var(--hh-white-06) 0%,transparent 62%)} /* A slide with a photo (home_slides.image_path, team review 2026-10-18): the photo fills the slide behind the words and the drawing (an , object-fit:cover — no inline style), under a navy veil that is strongest behind the words. Such a slide is always 'dark' (HubHomeData::slides()), so it takes the navy ground above while the photo loads and white words on top. A slide without a photo is unchanged. */ .hh-slide__photo{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;pointer-events:none} .hh-slide.hh-slide--photo::before{display:none} /* The veil: the words always sit in their own half (they end by 48.5% of the width from their side), so it is at full --hh-veil-text strength there and thins out across the drawing's half. On top of it, a soft oval of --hh-veil-ctl centred on the slide controls (52px from the bottom), wide and tall enough for every dot and button, and their focus rings, at every width */ .hh-slide--photo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(640px 200px at 50% 100%,var(--hh-veil-ctl) 50%,transparent), linear-gradient(90deg,var(--hh-veil-strong) 0%,var(--hh-veil-text) 50%,var(--hh-veil-soft) 100%)} .hh-slide--photo.hh-slide--visual-left::after{background:radial-gradient(640px 200px at 50% 100%,var(--hh-veil-ctl) 50%,transparent), linear-gradient(270deg,var(--hh-veil-strong) 0%,var(--hh-veil-text) 50%,var(--hh-veil-soft) 100%)} /* Only the showing slide's photo and the next one's are fetched (loading="lazy" skips a picture that is not displayed); hub-home.js marks the next slide (.is-next) and, once someone reaches for the controls, all of them (.is-primed), so a photo is there before its slide fades in. Without JavaScript the slides sit side by side and the browser fetches each photo as it scrolls into view. */ .ck-js .hh-hero:not(.is-primed) .hh-slide:not(.is-active):not(.is-next):not(.is-leaving) .hh-slide__photo{display:none} /* Words and drawing in two equal halves of the page's width (team review 2026-10-18: "balanced"): each drawing is centred in its half, so the space between the words and the drawing matches the space outside them, at every width */ .hh-slide__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center; gap:clamp(24px,3.5vw,56px);width:100%;padding-top:48px;padding-bottom:108px} .hh-slide--visual-left .hh-slide__visual{order:-1} .hh-slide__text{max-width:600px} .hh .hh-slide__eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--hh-blue-deep);font:600 13px/1.35 var(--ck-font-body);letter-spacing:.16em;text-transform:uppercase;text-wrap:balance} .hh .hh-slide__eyebrow::before{content:"";flex:0 0 auto;width:32px;height:3px;border-radius:2px;background:var(--ck-orange)} .hh .hh-slide__title{margin:0 0 20px;font:700 clamp(2.15rem,1.25rem + 2.75vw,3.6rem)/1.08 var(--ck-font-head);color:var(--ck-navy);letter-spacing:-.018em;text-wrap:balance} .hh .hh-slide__body{margin:0 0 30px;max-width:34em;color:var(--ck-muted);font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);line-height:1.6} .hh .hh-slide__cta{margin:0} .hh .hh-tone-dark .hh-slide__eyebrow{color:var(--ck-blue)} .hh .hh-tone-dark .hh-slide__title{color:var(--ck-white)} .hh .hh-tone-dark .hh-slide__body{color:var(--ck-on-navy)} .hh .hh-tone-dark .hh-accent--1{color:var(--ck-blue)} .hh .hh-tone-dark .hh-accent--2{color:var(--ck-orange);background:none} .hh .hh-tone-dark :focus-visible{outline-color:var(--ck-orange);box-shadow:none} /* on a photo the small line above the heading is light rather than blue: small text, AA on the lighter veil */ .hh .hh-slide--photo .hh-slide__eyebrow{color:var(--ck-on-navy)} .hh-slide__visual{position:relative;width:100%;max-width:600px;justify-self:center} .hh-vis svg{display:block;width:100%;height:auto;overflow:visible} /* Coming in (a slide shown after a change, .has-turned): text from above, one line after another; the drawing rises. The slide the page opens on is drawn at rest, so its heading — the largest text on the page — is readable in the first frame, even where animations never run (a background tab, a busy phone, a link-preview renderer). */ @keyframes hh-drop{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}} @keyframes hh-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}} .hh-hero.has-turned .hh-slide.is-active .hh-in{animation:hh-drop .75s var(--ck-ease) both;animation-delay:calc(var(--n,0) * 95ms + 120ms)} .hh-hero.has-turned .hh-slide.is-active .hh-slide__visual{animation:hh-rise .9s var(--ck-ease) both .15s} /* The drawings' parts (hub-illustrations/hero-*.svg): tiles pop in one after another and lines draw on a slide coming in (as above); cards float and pins pulse on whichever slide is showing — those loops start from the drawing at rest */ @keyframes hv-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}} @keyframes hv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes hv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes hv-pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}} @keyframes hv-uncover{from{transform:scaleX(1)}to{transform:scaleX(0)}} @keyframes hv-blink{0%,100%{opacity:.35}50%{opacity:1}} .hh-vis .hv-pop,.hh-vis .hv-float,.hh-vis .hv-pulse,.hh-vis .hv-cover{transform-box:fill-box;transform-origin:center} .hh-vis .hv-draw{stroke-dasharray:1 1;stroke-dashoffset:0} .hh-vis .hv-cover{transform:scaleX(0);transform-origin:right center} .hh-hero.has-turned .hh-slide.is-active .hv-pop{animation:hv-pop .55s var(--ck-ease) both;animation-delay:calc(var(--i,0) * 32ms + 280ms)} .hh-slide.is-active .hv-float{animation:hv-float 6.5s ease-in-out infinite;animation-delay:var(--d,0s)} .hh-hero.has-turned .hh-slide.is-active .hv-draw{animation:hv-draw 1.8s cubic-bezier(.45,.05,.35,1) both;animation-delay:var(--d,.9s)} .hh-slide.is-active .hv-pulse{animation:hv-pulse 2.6s ease-out infinite;animation-delay:var(--d,0s)} .hh-hero.has-turned .hh-slide.is-active .hv-cover{animation:hv-uncover 1.5s cubic-bezier(.45,.05,.35,1) both .45s} .hh-slide.is-active .hv-blink{animation:hv-blink 2.4s ease-in-out infinite;animation-delay:var(--d,0s)} .hh-hero.is-offscreen .hh-slide *{animation-play-state:paused} /* out of view: the drawings rest (hub-home.js) */ /* Controls (shown by hub-home.js): previous · a dot per slide · next · pause/play */ .hh-hero__controls{position:absolute;left:0;right:0;bottom:30px;z-index:3;pointer-events:none} .hh-hero__bar{display:flex;align-items:center;justify-content:center;gap:10px} .hh-hero__bar > *{pointer-events:auto} .hh .hh-hero__btn{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1.5px solid var(--hh-ctl-line);border-radius:50%; background:var(--hh-ctl-bg);color:var(--hh-ctl);cursor:pointer;transition:background-color var(--ck-dur) ease,border-color var(--ck-dur) ease,color var(--ck-dur) ease,transform var(--ck-dur) ease} .hh .hh-hero__btn:hover{border-color:var(--hh-ctl);transform:scale(1.06)} .hh .hh-hero__play{margin-left:6px} .hh-hero__play .hh-i-play,.hh-hero__play.is-stopped .hh-i-pause{display:none} .hh-hero__play.is-stopped .hh-i-play{display:block} .hh-hero__dots{display:flex;align-items:center;gap:2px} .hh .hh-hero__dot{position:relative;display:grid;place-items:center;width:30px;height:30px;margin:0;padding:0;border:0;background:none;cursor:pointer} .hh .hh-hero__dot::before{content:"";width:10px;height:10px;border-radius:999px;background:var(--hh-dot);transition:width .35s var(--ck-ease),background-color .2s ease} .hh .hh-hero__dot:hover::before{background:var(--hh-ctl)} .hh .hh-hero__dot[aria-current]{width:52px} .hh .hh-hero__dot[aria-current]::before{width:40px;background:var(--hh-dot)} .hh-hero__fill{position:absolute;top:50%;left:6px;height:10px;width:0;border-radius:999px;background:var(--ck-orange);transform:translateY(-50%)} .hh .hh-hero__dot[aria-current] .hh-hero__fill{width:40px} .hh-hero.is-playing .hh-hero__dot[aria-current] .hh-hero__fill{animation:hh-fill var(--hh-delay,7s) linear both} .hh-hero.is-playing.is-paused .hh-hero__dot[aria-current] .hh-hero__fill{animation-play-state:paused} @keyframes hh-fill{from{width:10px}to{width:40px}} .hh-hero[data-tone="dark"] :focus-visible{outline-color:var(--ck-orange);box-shadow:none} @media (max-width:900px){ .hh-slide{align-items:flex-start;min-height:0} .hh-slide__in{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:36px;padding-bottom:96px} .hh-slide--visual-left .hh-slide__visual{order:0} .hh-slide__text{max-width:none} .hh-slide__visual{max-width:460px} .hh-slide::before{top:auto;bottom:-20%;right:-30%;width:120vw;transform:none} .hh-slide--visual-left::before{left:auto;right:-30%} /* one column: the words on top (they end by 58% of the slide's height, even at 320px), the drawing under them, the slide controls at the bottom — the veil is at full strength behind the words, thinner behind the drawing, and the oval behind the controls stays */ .hh-slide--photo::after,.hh-slide--photo.hh-slide--visual-left::after{ background:radial-gradient(640px 200px at 50% 100%,var(--hh-veil-ctl) 50%,transparent), linear-gradient(180deg,var(--hh-veil-strong) 0%,var(--hh-veil-text) 62%,var(--hh-veil-mid) 80%)} } @media (max-width:520px){ .hh .hh-slide__eyebrow{font-size:12px;letter-spacing:.12em;margin-bottom:12px} .hh .hh-slide__body{margin-bottom:22px} .hh-slide__in{padding-bottom:88px} .hh-hero__controls{bottom:22px} } /* Touch screens: the slide dots are 44 × 44px to tap (the dot drawn inside stays small; review R3-07); the buttons already are. On phones the controls sit closer together to keep one row. */ @media (pointer:coarse){ .hh-hero__dots{gap:0} .hh .hh-hero__dot{width:44px;height:44px} } @media (pointer:coarse) and (max-width:520px){ .hh-hero__bar{gap:4px} } /* ---- 3. Knowledge Hub: five cards, at most one open ---- Wide screens: one row; the cards start closed and all the same size (team review 2026-10-18). The open card takes --hh-kh-grow shares of the row's width (the others one each) and its text unfolds under its name; widths, height and text change together, smoothly. Tablets: three, then two to a row. Phones: a list. hub-home.js adds .is-ready (only then are cards closed) and moves .is-open. */ .hh-kh{padding:clamp(60px,7vw,100px) 0;background:var(--ck-pink)} .hh-kh__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:end;gap:12px 56px;margin:0 0 clamp(28px,3.5vw,44px)} .hh-kh__head .hh-h2{margin:0} .hh .hh-kh__intro{margin:0;max-width:40em;color:var(--ck-text);font-size:1.08rem;line-height:1.65} .hh-kh__list{--hh-kh-grow:2.6;display:flex;align-items:stretch;gap:16px;margin:0;padding:0;list-style:none} .hh-kh__item{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;overflow:hidden; background:var(--ck-white);border:1px solid var(--hh-ink-soft);border-radius:var(--hh-radius);box-shadow:var(--ck-shadow); transition:flex-grow .65s cubic-bezier(.45,0,.2,1),box-shadow .3s ease,transform .3s ease,border-color .3s ease} .hh-kh.is-ready .hh-kh__item.is-open{flex-grow:var(--hh-kh-grow)} .hh-kh__item:hover{transform:translateY(-5px);box-shadow:var(--ck-shadow-lg);border-color:var(--hh-ink-line)} .hh-kh__item.is-open{border-color:var(--hh-ink-line)} .hh-kh__art{position:relative;flex:0 0 auto;height:156px;overflow:hidden;background:var(--ck-light)} .hh-kh__art svg{position:absolute;inset:0;width:100%;height:100%;display:block} .hh-kh__art .ka-lift{transition:transform .5s var(--ck-ease)} .hh-kh__item:hover .ka-lift,.hh-kh__item.is-open .ka-lift{transform:translateY(-6px)} .hh-kh__art .ka-tilt{transform-box:fill-box;transform-origin:center;transition:transform .6s var(--ck-ease)} .hh-kh__item:hover .ka-tilt,.hh-kh__item.is-open .ka-tilt{transform:rotate(-6deg)} .hh-kh__body{display:flex;flex-direction:column;flex:1 1 auto;padding:18px 20px 70px} .hh .hh-kh__title{margin:0;font:inherit} .hh .hh-kh__toggle{display:block;width:100%;margin:0;padding:0 0 0;border:0;background:none;text-align:left;cursor:pointer; color:var(--ck-navy);font:700 1.22rem/1.22 var(--ck-font-head);letter-spacing:-.005em} .hh .hh-kh__toggle::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--hh-radius)} /* the whole card opens it */ .hh .hh-kh__toggle:focus-visible{outline:none;box-shadow:none} .hh .hh-kh__toggle:focus-visible::after{outline:3px solid var(--ck-navy);outline-offset:-3px;box-shadow:inset 0 0 0 6px var(--ck-focus-halo)} .hh-kh__icon{position:absolute;right:16px;bottom:16px;z-index:0;box-sizing:content-box;width:18px;height:18px;padding:8px;border-radius:50%; border:1.5px solid var(--ck-line-strong);color:var(--ck-navy);background:var(--ck-white);transition:transform .4s var(--ck-ease),background-color .25s ease,border-color .25s ease} .hh-kh__item:hover .hh-kh__icon{border-color:var(--ck-navy)} .hh-kh__item.is-open .hh-kh__icon{transform:rotate(45deg);background:var(--ck-navy);border-color:var(--ck-navy);color:var(--ck-white)} .hh-kh:not(.is-ready) .hh-kh__icon{display:none} .hh .hh-kh__count{margin:8px 0 0;color:var(--ck-muted);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums} .hh .hh-kh__count.is-soon{color:var(--ck-orange-text);font-weight:600} .hh-kh__panel{position:relative;z-index:2;display:grid;grid-template-rows:1fr;opacity:1; transition:grid-template-rows .6s cubic-bezier(.45,0,.2,1),opacity .4s ease .2s,visibility 0s linear 0s} .hh-kh.is-ready .hh-kh__item:not(.is-open) .hh-kh__panel{grid-template-rows:0fr;opacity:0;visibility:hidden; transition:grid-template-rows .45s cubic-bezier(.45,0,.2,1),opacity .15s ease,visibility 0s linear .45s} .hh-kh__panel-in{min-height:0;overflow:hidden} .hh-kh.is-ready .hh-kh__text{min-width:230px} /* no re-wrapping while the card widens */ .hh .hh-kh__text{margin:14px 0 18px;color:var(--ck-text);font-size:15px;line-height:1.6} .hh .hh-kh__panel .ck-btn{position:relative;z-index:2} .hh .hh-kh__all{margin:28px 0 0;text-align:right} .hh-kh:not(.is-ready) .hh-kh__body{padding-bottom:22px} /* One row: where a closed card is narrow enough for its name to take two lines (while another card is open, and on screens under 1200px), every closed card keeps room for two, so the counts line up */ @media (min-width:1000px){ .hh-kh.is-ready .hh-kh__title{transition:min-height .5s cubic-bezier(.45,0,.2,1)} .hh-kh.has-open .hh-kh__item:not(.is-open) .hh-kh__title{min-height:2.98rem} } @media (min-width:1000px) and (max-width:1199px){ .hh-kh.is-ready .hh-kh__item:not(.is-open) .hh-kh__title{min-height:2.98rem} } @media (max-width:999px){ .hh-kh__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:18px} .hh-kh__item:hover{transform:none} .hh-kh.is-ready .hh-kh__text{min-width:0} } @media (max-width:780px){ .hh-kh__head{grid-template-columns:minmax(0,1fr)} .hh-kh__list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .hh-kh__list{grid-template-columns:minmax(0,1fr);gap:12px} .hh-kh__item{display:grid;grid-template-columns:96px minmax(0,1fr);border-radius:14px} .hh-kh__art{height:auto;min-height:92px;max-height:112px;align-self:stretch} .hh-kh__body{padding:16px 56px 16px 16px} .hh-kh:not(.is-ready) .hh-kh__body{padding:16px} .hh .hh-kh__toggle{font-size:1.12rem} .hh .hh-kh__toggle::after{border-radius:14px} .hh-kh__icon{top:22px;bottom:auto;right:14px;padding:6px} .hh .hh-kh__text{margin:10px 0 14px} .hh .hh-kh__all{text-align:left} } /* ---- 4. Country Profiles: text left, the forming globe right, then the interactive globe ---- */ .hh-cp{overflow:hidden;padding:clamp(64px,8vw,112px) 0; background:radial-gradient(42% 60% at 78% 50%,var(--ck-light) 0%,transparent 75%),var(--ck-white)} .hh-cp__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;gap:clamp(32px,5vw,72px)} .hh-cp__links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none} .hh .hh-cp__links .ck-chip{background:var(--ck-white);box-shadow:inset 0 0 0 1px var(--ck-line-strong);padding:6px 14px} .hh .hh-cp__links .ck-chip:hover{background:var(--ck-light);box-shadow:inset 0 0 0 1px var(--ck-blue)} .hh .hh-cp__cta{margin:0} .hh-globe{position:relative;width:min(100%,560px);aspect-ratio:1;margin:0 auto} .hh-globe::after{content:"";position:absolute;left:18%;right:18%;bottom:-3%;height:7%;border-radius:50%;background:radial-gradient(closest-side,var(--hh-ink-soft),transparent);z-index:-1} .hh-globe__still{position:absolute;inset:0;width:100%;height:100%;display:block} .hh-globe__canvas{position:absolute;top:-15%;left:-15%;width:130%;height:130%;max-width:none;display:block;opacity:0;pointer-events:none} /* room for the drifting tiles (hub-globe.js PAD); max-width:none beats the kit's canvas{max-width:100%}, which squeezed it into an oval */ .hh-globe.is-live .hh-globe__canvas{opacity:1} .hh-globe.is-live .hh-globe__still{visibility:hidden} /* The interactive globe (globe.js, globe.css) shares the box: hidden until hub-globe.js hands over to it once the tiles have landed, then it fades in over the tiles (hub-globe.js HANDOVER = .9s). The tiles stay fully drawn underneath until it is opaque, so the globe never looks washed out halfway through. */ .hh .gl--hub{width:100%;margin:0} .hh .gl__stage.hh-globe{max-width:560px} .hh .hh-globe .gl__canvas{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s} .hh .gl.is-revealed.is-ready .hh-globe .gl__canvas{opacity:1;visibility:visible;transition:opacity .9s ease} .hh .gl.is-revealed.is-ready .hh-globe__still{visibility:hidden} .hh .hh-globe.is-handed .hh-globe__canvas{opacity:0;transition:opacity .2s linear .9s} .hh .gl--hub .gl__aside{width:100%} /* From 1200px up the section uses more of the width (team review 2026-10-18): the text keeps the page's left edge (the one every section shares) and a wider column (the heading takes two lines from about 1900px), the globe's side reaches halfway into the right margin and the globe grows with it (to 640px). Nothing sits under the globe but its link any more, so the text and the globe are centred on each other. The edges never come closer than the page's gutter (a window just over 1200px, less its scrollbar, is narrower than the 1200px wrap), and the globe's column never narrows below 560px (the globe's size under 1200px), so the globe does not shrink as the window crosses 1200px. */ @media (min-width:1200px){ .hh-cp__in{max-width:none;margin:0;grid-template-columns:minmax(0,1.15fr) minmax(560px,1fr);gap:clamp(40px,3.5vw,72px); padding-left:max(var(--ck-gutter),calc((100% - var(--ck-wrap)) / 2 + var(--ck-gutter))); padding-right:max(var(--ck-gutter),calc((100% - var(--ck-wrap)) / 4 + var(--ck-gutter)))} .hh .hh-cp .hh-lead{max-width:40em} .hh-globe{width:min(100%,640px)} .hh .gl__stage.hh-globe{max-width:640px} } @media (max-width:900px){ .hh-cp__in{grid-template-columns:minmax(0,1fr)} .hh-globe{width:min(100%,420px)} .hh .gl__stage.hh-globe{max-width:420px} } /* ---- 5. Certification: engraved-line ground, text left, the journey right ---- */ .hh-cert{overflow:hidden;padding:clamp(72px,8vw,116px) 0;color:var(--ck-on-navy); background:url("/assets/img/hub-illustrations/cert-pattern.svg") right top/cover no-repeat, radial-gradient(50% 70% at 12% 15%,var(--hh-navy-glow) 0%,transparent 70%), linear-gradient(135deg,var(--ck-navy-deep) 0%,var(--ck-navy) 50%,var(--hh-navy-2) 100%)} .hh-cert__in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(32px,5vw,72px)} .hh .hh-cert .hh-h2{color:var(--ck-white)} .hh .hh-cert .hh-accent--2{color:var(--ck-orange);background:none} .hh .hh-cert .ck-eyebrow{color:var(--ck-blue)} .hh .hh-cert .hh-lead{color:var(--ck-on-navy)} .hh .hh-cert__cta{margin:0} .hh .hh-cert :focus-visible{outline-color:var(--ck-orange);box-shadow:none} .hh-journey{position:relative} .hh-journey__line{position:absolute;left:0;top:46px;width:100%;height:auto;transform:translateY(-50%);overflow:visible;pointer-events:none} .hh-journey__rail{stroke:var(--hh-white-14);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 9} .hh-journey__path{stroke:var(--ck-orange);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 9} .hh-journey__draw{stroke-dasharray:1;stroke-dashoffset:0} .hh-journey.is-ready .hh-journey__draw{stroke-dashoffset:1} .hh-journey.is-ready.is-on .hh-journey__draw{stroke-dashoffset:0;transition:stroke-dashoffset 2.1s cubic-bezier(.45,.05,.35,1) .15s} .hh-journey__steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;text-align:center} .hh-journey__step{display:flex;flex-direction:column;align-items:center} .hh-journey.is-ready .hh-journey__step{opacity:0;transform:translateY(16px) scale(.85)} .hh-journey.is-ready.is-on .hh-journey__step{opacity:1;transform:none; transition:opacity .5s ease,transform .7s var(--ck-ease);transition-delay:calc(var(--i,0) * 460ms + .1s)} .hh-journey__dot{display:grid;place-items:center;width:92px;height:92px;margin:0 0 18px;border-radius:50%;background:var(--ck-light);color:var(--ck-navy); box-shadow:0 0 0 8px var(--hh-white-06),var(--hh-shadow-deep);transition:transform .35s var(--ck-ease),box-shadow .35s ease} .hh-journey__step:nth-child(even) .hh-journey__dot{background:var(--hh-orange-soft)} .hh-journey__dot .hh-fill{fill:var(--ck-orange);stroke:none} .hh-journey__dot .hh-on-fill{stroke:var(--ck-navy)} .hh-journey__step:hover .hh-journey__dot{transform:translateY(-5px) scale(1.05);box-shadow:0 0 0 10px var(--hh-ring),var(--hh-shadow-deep)} .hh .hh-journey__num{color:var(--ck-blue);font:600 12px/1.3 var(--ck-font-body);letter-spacing:.14em;text-transform:uppercase} .hh .hh-journey__name{margin:6px 0 6px;color:var(--ck-white);font:700 1.16rem/1.25 var(--ck-font-head)} .hh .hh-journey__text{max-width:15em;color:var(--ck-on-navy-muted);font-size:14px;line-height:1.5} @media (max-width:1079px){ .hh-cert__in{grid-template-columns:minmax(0,1fr)} .hh-cert__text{max-width:640px} } @media (max-width:700px){ .hh-cert{background-size:760px auto,auto,auto;background-position:right -52px top -25px,0 0,0 0} /* the edge of the rosette in the corner, clear of the text */ .hh-journey__line{display:none} .hh-journey__steps{grid-template-columns:minmax(0,1fr);gap:0;text-align:left} .hh-journey__step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px;align-items:start;padding-bottom:26px} .hh-journey__dot{grid-row:1/span 3;width:64px;height:64px;margin:0} .hh-journey__dot svg{width:28px;height:28px} .hh .hh-journey__num{margin-top:6px} .hh .hh-journey__name{margin:2px 0 4px} .hh .hh-journey__text{max-width:none} .hh-journey__step:not(:last-child)::before{content:"";position:absolute;left:31px;top:72px;bottom:6px;width:2px; background:repeating-linear-gradient(var(--ck-orange) 0 7px,transparent 7px 14px);transform-origin:top} .hh-journey.is-ready .hh-journey__step:not(:last-child)::before{transform:scaleY(0)} .hh-journey.is-ready.is-on .hh-journey__step:not(:last-child)::before{transform:none;transition:transform .5s ease;transition-delay:calc(var(--i,0) * 460ms + .4s)} } /* ---- 6. Upcoming Events: the event box left, the text right ---- */ .hh-ev{padding:clamp(64px,8vw,112px) 0;background:linear-gradient(180deg,var(--ck-light) 0%,var(--ck-white) 100%)} .hh-ev__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(32px,5vw,72px)} .hh-ev__box{order:-1;position:relative;overflow:hidden;background:var(--ck-white);border:1px solid var(--hh-ink-soft);border-radius:22px;box-shadow:var(--ck-shadow-lg)} .hh-ev__art{position:relative;aspect-ratio:16/7;overflow:hidden;background:linear-gradient(135deg,var(--ck-navy) 0%,var(--hh-navy-2) 100%)} .hh-ev__art svg{position:absolute;inset:0;width:100%;height:100%;display:block} .hh-ev__card{display:flex;gap:22px;padding:24px 28px 28px} .hh-ev__date{position:relative;z-index:1;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:86px;height:96px;margin-top:-62px; border-top:5px solid var(--ck-orange);border-radius:14px;background:var(--ck-white);box-shadow:var(--ck-shadow-lg);color:var(--ck-navy)} .hh-ev__day{font:700 2.1rem/1 var(--ck-font-head)} .hh-ev__month{margin-top:4px;font:600 13px/1.2 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase} .hh-ev__year{color:var(--ck-muted);font-size:12px} .hh-ev__main{min-width:0;flex:1 1 auto} .hh .hh-ev__tags{margin:0 0 8px} .hh .hh-ev__title{margin:0 0 14px;font:700 clamp(1.3rem,1.15rem + .5vw,1.55rem)/1.25 var(--ck-font-head);color:var(--ck-navy)} .hh .hh-ev__title a{color:inherit;text-decoration:none} .hh .hh-ev__title a:hover{color:var(--ck-blue-text);text-decoration:underline} .hh .hh-ev__facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 22px;padding:0;list-style:none;color:var(--ck-text);font-size:15px} .hh .hh-ev__facts li{display:flex;align-items:center;gap:8px} .hh .hh-ev__facts svg{flex:0 0 auto;color:var(--ck-blue-text)} .hh .hh-ev__go{margin:0} .hh .hh-ev__empty{margin:0 0 6px;color:var(--ck-muted);font-size:1.05rem} .hh-ev__card--empty{padding-top:26px} .hh .hh-ev__cta{margin:0} @media (max-width:900px){ .hh-ev__in{grid-template-columns:minmax(0,1fr)} .hh-ev__box{order:0} } @media (max-width:520px){ .hh-ev__card{flex-direction:column;gap:12px;padding:20px} .hh-ev__date{flex-direction:row;gap:8px;width:auto;height:auto;align-self:flex-start;padding:10px 14px;margin-top:-46px} .hh-ev__month{margin-top:0} .hh-ev__day{font-size:1.5rem} } /* ---- 7. Our Team (only with published people): overlapping circles on cream ---- */ .hh-team{overflow:hidden;padding:clamp(64px,8vw,112px) 0;background:var(--ck-cream)} .hh-team::before,.hh-team::after{content:"";position:absolute;border-radius:50%;pointer-events:none} .hh-team::before{right:-6%;top:-18%;width:420px;height:420px;background:radial-gradient(circle,var(--hh-cyan-pale) 0%,transparent 68%)} .hh-team::after{right:28%;bottom:-22%;width:300px;height:300px;background:radial-gradient(circle,var(--hh-cyan-pale) 0%,transparent 68%)} .hh-team__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(32px,5vw,64px)} .hh .hh-team__cta{margin:8px 0 0} .hh-team__people{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;margin:0;padding:0 0 12px;list-style:none} /* one row on wide screens: the circles shrink to fit up to seven */ .hh-team__person{flex:0 1 156px;min-width:0;display:flex;flex-direction:column;align-items:center;margin:0 -9px;text-align:center} .hh-team__person:nth-child(even){margin-top:54px} .hh-team__photo{position:relative;display:grid;place-items:center;width:100%;max-width:156px;aspect-ratio:1;overflow:hidden;border:5px solid var(--ck-white);border-radius:50%; background:var(--ck-light);box-shadow:var(--ck-shadow-lg);text-decoration:none;transition:transform .35s var(--ck-ease),box-shadow .35s ease} .hh-team__person:nth-child(3n+2) .hh-team__photo{background:var(--hh-cyan-pale)} .hh-team__person:nth-child(3n) .hh-team__photo{background:var(--hh-orange-soft)} .hh-team__photo img{width:100%;height:100%;object-fit:cover;display:block} .hh-team__person:hover .hh-team__photo{transform:translateY(-6px) scale(1.04);box-shadow:0 0 0 6px var(--hh-ring),var(--ck-shadow-lg);z-index:2} .hh .hh-team__initials{color:var(--ck-navy);font:700 clamp(1.6rem,1rem + 1.4vw,2.5rem)/1 var(--ck-font-head)} .hh .hh-team__name{max-width:86%;margin-top:12px;color:var(--ck-navy);font:600 14.5px/1.3 var(--ck-font-body)} .hh .hh-team__role{max-width:86%;margin-top:2px;color:var(--ck-muted);font-size:13px;line-height:1.4} @keyframes hh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .hh-team__person{animation:hh-float 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.4s)} .hh-team.is-offscreen .hh-team__person{animation-play-state:paused} @media (max-width:900px){ .hh-team__in{grid-template-columns:minmax(0,1fr)} .hh-team__people{justify-content:flex-start} } @media (max-width:520px){ .hh-team__people{flex-wrap:wrap;row-gap:12px} .hh-team__person{flex:0 0 33.333%;margin:0} .hh-team__photo{max-width:112px;border-width:4px} .hh-team__person:nth-child(even){margin-top:0} .hh-team__person:nth-child(3n+2){margin-top:28px} .hh .hh-team__initials{font-size:2rem} } /* ---- 8. The bottom section menu ---- A sticky strip of no height at the end of .hh: the menu floats at the bottom of the screen while .hh is on screen and leaves with it, before the footer — even without JavaScript. hub-home.js hides it over the hero and once the end of the sections comes into view (.is-hidden), and marks the section in view (aria-current). With JavaScript it starts hidden (html.ck-js, set before the page is drawn) until hub-home.js has placed it (.is-ready), so it never flashes over the hero. Not on phones. */ .hh-dock-wrap{position:sticky;bottom:0;z-index:30;height:0;pointer-events:none} .hh-dock{position:absolute;left:50%;bottom:20px;max-width:calc(100vw - 32px);padding:6px;border:1px solid var(--hh-white-14);border-radius:var(--ck-radius-pill); background:var(--hh-glass);box-shadow:var(--hh-shadow-deep);transform:translateX(-50%);pointer-events:auto; transition:opacity .3s ease,transform .35s var(--ck-ease),visibility 0s linear 0s} @supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){ .hh-dock{-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)} } .hh-dock.is-hidden,html.ck-drawer-open .hh-dock{opacity:0;visibility:hidden;transform:translate(-50%,18px); transition:opacity .25s ease,transform .3s ease,visibility 0s linear .3s} .ck-js .hh-dock:not(.is-ready){opacity:0;visibility:hidden;transition:none} .hh-dock__list{display:flex;gap:2px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none} .hh-dock__list::-webkit-scrollbar{display:none} .hh .hh-dock__link{display:block;padding:9px 16px;border-radius:var(--ck-radius-pill);color:var(--ck-on-navy);font:500 14px/1.2 var(--ck-font-body); text-decoration:none;white-space:nowrap;transition:background-color var(--ck-dur) ease,color var(--ck-dur) ease} .hh .hh-dock__link:hover{background:var(--ck-on-navy-hover);color:var(--ck-white)} .hh .hh-dock__link[aria-current]{background:var(--ck-orange);color:var(--ck-navy);font-weight:600} .hh .hh-dock :focus-visible{outline:3px solid var(--ck-orange);outline-offset:1px;box-shadow:none} @media (max-width:700px){ .hh-dock-wrap{display:none} } /* Tab never leaves the focused link or card under the menu: the browser keeps it this far above the bottom of the screen (the menu's height, its 20px gap and a margin) */ @media (min-width:701px){ :root:has(.hh-dock){scroll-padding-bottom:110px} } /* The page ends with the last section's own spacing, which also holds the top half of the footer's seal (56px, crcgs.css section 6) — so the footer drops its usual top margin here. Without JavaScript the menu rides along to the very end of the sections, so there the last section keeps room for it and the footer keeps its margin, clear of the seal. */ .hh > section:last-of-type{padding-bottom:calc(clamp(64px,8vw,112px) + 56px)} .ck:has(.hh) .ck-footer{margin-top:0} @media (min-width:701px){ html:not(.ck-js) .hh > section:last-of-type{padding-bottom:clamp(104px,10vw,136px)} html:not(.ck-js) .ck:has(.hh) .ck-footer{margin-top:var(--ck-space-9)} } @media (prefers-reduced-motion:no-preference){ :root:has(.hh){scroll-behavior:smooth} } /* ---- 9. /knowledge-hub: the glossary's A–Z (the rest of the page: the block "Knowledge Hub landing page 2026-10-20" at the end) ---- */ .hh-page .hh-az{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0;list-style:none} .hh-page .hh-az a,.hh-page .hh-az span{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;font:700 1.05rem/1 var(--ck-font-head);text-decoration:none} .hh-page .hh-az a{background:var(--ck-white);color:var(--ck-navy);box-shadow:inset 0 0 0 1px var(--ck-line-strong);transition:background-color var(--ck-dur) ease,color var(--ck-dur) ease} .hh-page .hh-az a:hover{background:var(--ck-navy);color:var(--ck-white)} .hh-page .hh-az span{color:var(--ck-muted);background:transparent;box-shadow:inset 0 0 0 1px var(--ck-line);opacity:.75} @media (max-width:600px){ .hh-page .hh-az a,.hh-page .hh-az span{width:38px;height:38px} } @media (pointer:coarse){ /* 44px tap targets (review R3-07) */ .hh-page .hh-az a,.hh-page .hh-az span{width:44px;height:44px} } /* ---- 10. Reduced motion: everything in its final place, nothing moves ---- */ @media (prefers-reduced-motion:reduce){ .hh *,.hh *::before,.hh *::after,.hh-page *{animation:none !important;transition:none !important} .hh-kh__item:hover,.hh-team__person:hover .hh-team__photo,.hh-journey__step:hover .hh-journey__dot,.hh .hh-hero__btn:hover{transform:none} } /* ---------- Team review round 2 (m1): the revolving Knowledge Hub row and the section entrances ---------- Owner, 2026-10-19: the cards looked static — they now "slowly revolve from one side to the other", so the section looks lively and visitors' attention goes to every section. A. The revolving row (hub/home/_knowledge.php; hub-home.js section 2b). Without JavaScript, and with reduced motion, nothing in A applies: the five cards stand still in section 3's layout. With JavaScript (html.ck-js, set before the page is drawn) and motion allowed, the row is one line of equal cards from the first frame — a strip that can be scrolled or swiped, settling on a card (scroll-snap) — so nothing jumps when the script starts it (.is-moving): the strip is then clipped, the copies either side of the real cards show, and the script moves the belt with a transform. Edges fade (--hh-kh-fade); the open card widens to --hh-kh-wo (set by the script) while the row stands still; on phones the row runs to the screen's edges. B. The section entrances (hub-home.js section 5): headings and content fade in and rise 24px as they come into view, once, lightly staggered (--rv, 90ms apart) — like the certification steps. A part is held back only under html.ck-js and once the script has set .has-entrances (it does so only with an IntersectionObserver and motion allowed), so visitors without JavaScript and search engines always see everything. */ .hh-kh{--hh-kh-fade:40px;--hh-kh-gap:18px} @media (max-width:560px){ .hh-kh{--hh-kh-fade:var(--ck-gutter);--hh-kh-gap:12px} } .hh .hh-kh__copy[hidden]{display:none} @media (prefers-reduced-motion:no-preference){ .ck-js .hh-kh__row{container-type:inline-size;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; scroll-padding-inline:var(--hh-kh-fade);scrollbar-width:none;padding:30px 0 64px;margin:-30px 0 -64px; -webkit-mask-image:linear-gradient(90deg,transparent,var(--ck-navy) var(--hh-kh-fade),var(--ck-navy) calc(100% - var(--hh-kh-fade)),transparent); mask-image:linear-gradient(90deg,transparent,var(--ck-navy) var(--hh-kh-fade),var(--ck-navy) calc(100% - var(--hh-kh-fade)),transparent)} .ck-js .hh-kh__row::-webkit-scrollbar{display:none} .ck-js .hh-kh__belt{display:flex;align-items:stretch;width:max-content;padding:0 var(--hh-kh-fade)} .ck-js .hh-kh__list{display:flex;flex:none;align-items:stretch;gap:var(--hh-kh-gap);margin:0;padding:0} /* every card the same width: about four and a half in view (220–270px) */ .ck-js .hh-kh__item{flex:0 0 240px;flex:0 0 clamp(220px,calc((100cqw - 4 * var(--hh-kh-gap)) / 4.4),270px);scroll-snap-align:start; transition:flex-basis .65s cubic-bezier(.45,0,.2,1),box-shadow .3s ease,transform .3s ease,border-color .3s ease} /* the widths stay put when a card opens, so the names keep one line and the counts line up */ .ck-js .hh-kh.is-ready .hh-kh__item:not(.is-open) .hh-kh__title,.ck-js .hh-kh.has-open .hh-kh__item:not(.is-open) .hh-kh__title{min-height:0} /* started: clipped — clip, so the browser can never scroll it to a focused card (hidden where clip is unknown; hub-home.js folds any such scroll back into its offset) — the copies shown, the belt moved by the script; up-and-down on the row stays the page's scroll and two fingers still zoom the page (pinch-zoom) */ .ck-js .hh-kh.is-moving .hh-kh__row{overflow:hidden;overflow:clip;scroll-snap-type:none;touch-action:pan-y pinch-zoom} .ck-js .hh-kh.is-moving .hh-kh__belt{padding:0;will-change:transform} .ck-js .hh-kh.is-moving .hh-kh__list{padding-right:var(--hh-kh-gap)} /* each set: five cards and five gaps, so the sets repeat exactly */ .ck-js .hh-kh.is-moving .hh-kh__item.is-open{flex-basis:var(--hh-kh-wo,480px);flex-grow:0} .ck-js .hh-kh.is-moving .hh-kh__text{min-width:calc(var(--hh-kh-wo,480px) - 40px)} /* no re-wrapping while it widens */ } @media (prefers-reduced-motion:no-preference) and (max-width:560px){ .ck-js .hh-kh__row{margin:-30px calc(-1 * var(--ck-gutter)) -64px} .ck-js .hh-kh__item{display:flex;flex:0 0 clamp(220px,72cqw,270px);border-radius:var(--hh-radius)} .ck-js .hh-kh__art{height:132px;min-height:0;max-height:none;align-self:auto} .ck-js .hh-kh__body{padding:16px 18px 64px} .ck-js .hh-kh:not(.is-ready) .hh-kh__body{padding:16px 18px 20px} .ck-js .hh-kh__icon{top:auto;bottom:14px;right:14px;padding:7px} .ck-js .hh .hh-kh__toggle::after{border-radius:var(--hh-radius)} } /* The heading and the foot sit above the row: the row's room for the cards' lift and shadow (padding, pulled back by a negative margin) reaches over them */ .hh .hh-kh__head,.hh .hh-kh__foot{position:relative;z-index:1} /* The Pause / Play button under the row (shown by the script while the row can move; WCAG 2.2.2). Owner, 2026-10-19: the sign only, centred under the row — the middle of three columns, so "Everything in the Knowledge Hub" keeps the right; a "Join as an Author" button is to join the sign in the middle group later. Phones: one column, centred. */ .hh .hh-kh__foot{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px 20px;margin:28px 0 0} .hh .hh-kh__controls{grid-column:2;display:flex;align-items:center;justify-content:center;gap:12px} .hh .hh-kh__foot .hh-kh__all{grid-column:3;justify-self:end;margin:0;text-align:right} .hh .hh-kh__play{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1.5px solid var(--hh-ink-line); border-radius:50%;background:var(--ck-white);color:var(--ck-navy);cursor:pointer; transition:border-color var(--ck-dur) ease,box-shadow var(--ck-dur) ease} .hh .hh-kh__play:hover{border-color:var(--ck-navy);box-shadow:var(--ck-shadow)} .hh .hh-kh__play[hidden]{display:none} .hh-kh__play .hh-i-play,.hh-kh__play.is-stopped .hh-i-pause{display:none} .hh-kh__play.is-stopped .hh-i-play{display:block} /* Its name: read by screen readers always; seen as a tooltip under the sign on keyboard focus, and on hover only where a mouse can point (a tap on a phone leaves no words behind: the owner asked for the sign only). Styled once and kept visually hidden (not display:none, so the name stays) until shown. The pointer can move onto it: it is part of the button and its ::before spans the gap. Escape hides it (hub-home.js); WCAG 1.4.13. */ .hh .hh-kh__tip{position:absolute;z-index:2;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;border-radius:var(--ck-radius-sm);background:var(--ck-navy);color:var(--ck-white); font:600 13px/1.2 var(--ck-font-body);box-shadow:var(--ck-shadow)} .hh .hh-kh__tip::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:8px} .hh .hh-kh__play:focus-visible .hh-kh__tip{width:auto;height:auto;margin:0;padding:6px 10px;overflow:visible;clip:auto} @media (hover:hover) and (pointer:fine){ .hh .hh-kh__play:hover .hh-kh__tip{width:auto;height:auto;margin:0;padding:6px 10px;overflow:visible;clip:auto} } .hh .hh-kh__play.is-tip-off .hh-kh__tip{width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0)} @media (max-width:560px){ .hh .hh-kh__foot{grid-template-columns:minmax(0,1fr)} .hh .hh-kh__controls,.hh .hh-kh__foot .hh-kh__all{grid-column:1;justify-self:center;text-align:center} /* the link sits under the sign here: the tooltip shows above it instead */ .hh .hh-kh__tip{top:auto;bottom:calc(100% + 8px)} .hh .hh-kh__tip::before{top:100%;bottom:auto} } /* B. The section entrances */ .ck-js .hh.has-entrances [data-hh-rv]:not(.is-in){opacity:0;transform:translate3d(0,24px,0)} .ck-js .hh.has-entrances [data-hh-rv].is-in{transition:opacity .6s ease,transform .8s var(--ck-ease);transition-delay:calc(var(--rv,0) * 90ms)} /* Reduced motion: nothing moves or waits — the row is the still one above (the script never starts it), every part is there */ @media (prefers-reduced-motion:reduce){ .ck-js .hh [data-hh-rv]{opacity:1 !important;transform:none !important} .hh .hh-kh__belt{transform:none !important} .hh .hh-kh__copy{display:none !important} } /* ---------- Owner feedback 2026-10-19 (g1): the newsletter as its own homepage section ---------- "Newsletter section is now clubbed with Events. Shouldn't they appear separate?" (hub/home/_newsletter.php): a calm cream band after Upcoming Events, its heading and line on the left and the sign-up on the right, one under the other below 900px. The form is the shared partial without its own frame (.hub-nl--bare; its field and button styles are hub-forms.css). A team section after it starts with a hairline, so the two cream bands part. */ .hh-nl{padding:clamp(56px,7vw,96px) 0;background:var(--ck-cream);border-top:1px solid var(--ck-line)} .hh-nl__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px)} .hh .hh-nl .hh-lead{margin-bottom:0} .hh-nl__form{min-width:0} .hh .hh-nl + .hh-team{border-top:1px solid var(--ck-line)} @media (max-width:900px){ .hh-nl__in{grid-template-columns:minmax(0,1fr)} } /* ---------- Join as an Author 2026-10-19: the button beside the Pause sign under the Knowledge Hub row ---------- Owner, 2026-10-19: "In the left side create a button 'Join as a Author'". The group under the row holds "Join as an Author" (a navy button: a link to /join-as-an-author, opened as the pop-up by hub-join.js), then the Pause / Play sign; the two are centred together under the row — the button alone while the row stands still (no JavaScript, reduced motion), when the sign is hidden. Up to 900px the foot is one column, as on phones: the pair centred, "Everything in the Knowledge Hub" centred under it (beside the wider group it would wrap), and the sign's tooltip shown above it, clear of that link. */ .hh .hh-kh__join{flex:0 0 auto;white-space:nowrap} @media (max-width:900px){ .hh .hh-kh__foot{grid-template-columns:minmax(0,1fr)} .hh .hh-kh__controls,.hh .hh-kh__foot .hh-kh__all{grid-column:1;justify-self:center;text-align:center} .hh .hh-kh__tip{top:auto;bottom:calc(100% + 8px)} .hh .hh-kh__tip::before{top:100%;bottom:auto} } /* ---------- Owner feedback 2026-10-20: "Join as an Author" at the left of the row; a fresher newsletter band ---------- The foot is three columns: the button on the left, the Pause sign in the middle, "Everything in the Knowledge Hub" on the right; up to 900px one column, centred (button, sign, link). The newsletter band ("seems a little dusty"): white with a soft light-blue wash and two pale brand circles, the form in a white card with a blue top rule. */ .hh .hh-kh__joinp{grid-column:1;justify-self:start;margin:0} @media (max-width:900px){ .hh .hh-kh__joinp{grid-column:1;justify-self:center} } .hh-nl{position:relative;overflow:hidden;border-top:0; background:radial-gradient(circle at 92% 18%,var(--ck-blue-pale) 0,var(--ck-blue-pale) 90px,transparent 91px), radial-gradient(circle at 4% 88%,var(--ck-cream) 0,var(--ck-cream) 140px,transparent 141px), linear-gradient(180deg,var(--ck-light) 0,var(--ck-white) 100%)} .hh-nl__in{position:relative;z-index:1} .hh-nl__form{padding:clamp(20px,3vw,32px);background:var(--ck-white);border:1px solid var(--ck-line);border-top:4px solid var(--ck-blue); border-radius:var(--ck-radius);box-shadow:var(--ck-shadow)} /* ---------- Knowledge Hub landing page 2026-10-20 ---------- /knowledge-hub as the owner agreed it (the mock of 2026-10-20; hub/home/knowledge_hub.php): the hero (search with the header's suggestions, "Jump to" chips, the drawing with two counts), the featured post overlapping the hero, "New in every section" (three cards and the Latest News strip), "Browse by topic", the word of the day beside the glossary, and the "Join as an Author" navy panel. Every rule is under .hh-page; colours are the kit's --ck- tokens and section 0's --hh- shades only (soft washes mix a token with transparent). Blue text on the tinted grounds is --ck-blue-text-deep (AA); orange is a fill, never text on a light ground. Nothing moves but hover shades (switched off under reduced motion by section 10). Up to 1024px two cards a row; up to 900px one column; on phones every part stays, each shorter. */ .hh-page .khx-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 12px;color:var(--hh-blue-deep);font:600 13px/1.3 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase} .hh-page .khx-eyebrow::before{content:"";flex:0 0 auto;width:28px;height:3px;border-radius:2px;background:var(--ck-orange)} .hh-page .khx-h2{margin:0 0 .25em;font:700 clamp(1.9rem,1.35rem + 1.5vw,2.5rem)/1.12 var(--ck-font-head);color:var(--ck-navy);letter-spacing:-.015em} .hh-page .khx-sub{margin:0;max-width:40em;color:var(--ck-muted);font-size:1.05rem;line-height:1.6} .hh-page .khx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 32px;margin:0 0 22px} .hh-page .khx-head .khx-h2{margin:0} .hh-page .khx-head .khx-sub{padding-bottom:6px} .hh-page .khx-btn-lg{min-height:52px;padding:0 26px;font-size:16px} .hh-page .khx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;color:var(--ck-muted);font-size:14px} .hh-page .khx-meta strong,.hh-page .khx-meta a{color:var(--ck-navy);font-weight:600} .hh-page .khx-meta .sep{opacity:.6} .hh-page .khx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px} .hh-page .khx-empty{margin:0 0 12px;color:var(--ck-muted);font-size:15px;line-height:1.55} /* 1. the hero */ .hh-page .khx-hero{position:relative;overflow-x:clip;padding:clamp(28px,3vw,44px) 0 clamp(120px,9vw,136px);background:var(--ck-pink); background:radial-gradient(38% 60% at 82% 38%,color-mix(in srgb,var(--ck-blue) 16%,transparent) 0%,transparent 70%), radial-gradient(30% 40% at 4% 0%,color-mix(in srgb,var(--ck-orange) 10%,transparent) 0%,transparent 70%), linear-gradient(180deg,var(--ck-pink) 0%,var(--ck-white) 100%)} .hh-page .khx-hero--alone{padding-bottom:clamp(40px,5vw,64px)} .hh-page .khx-hero__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(24px,4vw,64px)} .hh-page .khx-hero h1{margin:0 0 14px;font-size:clamp(2.6rem,1.7rem + 2.7vw,3.9rem);line-height:1.04;letter-spacing:-.02em} .hh-page .khx-hl{background:linear-gradient(var(--ck-orange),var(--ck-orange)) 0 90%/100% .2em no-repeat} .hh-page .khx-hero__lead{margin:0 0 24px;max-width:32em;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.6;color:var(--ck-muted)} .hh-page .khx-search{position:relative;display:flex;align-items:center;gap:8px;max-width:610px;margin:0;padding:6px 6px 6px 18px;background:var(--ck-white); border:1px solid var(--ck-input-line);border-radius:var(--ck-radius-pill);box-shadow:var(--ck-shadow)} .hh-page .khx-search--hero{z-index:5} /* its suggestions open over the featured card */ .hh-page .khx-search:focus-within{border-color:var(--ck-navy);box-shadow:0 0 0 3px var(--ck-focus-halo)} .hh-page .khx-search > svg{flex:0 0 auto;color:var(--ck-navy)} .hh-page .khx-search input{flex:1 1 auto;min-width:0;min-height:44px;margin:0;padding:10px 4px;border:0;border-radius:0;background:transparent;box-shadow:none; font:400 16px/1.3 var(--ck-font-body);color:var(--ck-text);outline:0} .hh-page .khx-search input::placeholder{color:var(--ck-muted);opacity:1} .hh-page .khx-search .ck-btn{flex:0 0 auto;min-height:46px;border-radius:var(--ck-radius-pill)} .hh-page .khx-search .ck-btn:focus-visible{outline:3px solid var(--ck-navy);outline-offset:2px} .hh-page .khx-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;max-height:min(70vh,36rem);overflow-y:auto;overscroll-behavior:contain; padding:var(--ck-space-2) 0;border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius);background:var(--ck-white);box-shadow:var(--ck-shadow-lg); color:var(--ck-text);text-align:left} .hh-page .khx-suggest[hidden]{display:none} .hh-page .khx-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:20px 0 0} .hh-page .khx-jump__label{margin:0;color:var(--ck-muted);font-size:14px} .hh-page .khx-jump ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .hh-page .khx-jump__link{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:5px 8px 5px 12px;border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius-pill); background:var(--ck-white);color:var(--ck-navy);font:600 14px/1.2 var(--ck-font-body);text-decoration:none;transition:border-color var(--ck-dur) ease,box-shadow var(--ck-dur) ease} .hh-page .khx-jump__link:hover{border-color:var(--ck-navy);box-shadow:var(--ck-shadow);color:var(--ck-navy)} .hh-page .khx-jump .ck-badge,.hh-page .khx-lane__name .ck-badge,.hh-page .khx-news__name .ck-badge{font-variant-numeric:tabular-nums} .hh-page .khx-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--khx-c,var(--ck-blue))} .hh-page .khx-c--latest-news{--khx-c:var(--ck-blue-text)} .hh-page .khx-c--knowledge-articles{--khx-c:var(--ck-blue)} .hh-page .khx-c--case-studies{--khx-c:var(--ck-navy);--khx-q:var(--ck-neutral)} .hh-page .khx-c--opinion-insights{--khx-c:var(--ck-orange);--khx-q:var(--ck-cream)} .hh-page .khx-c--glossary{--khx-c:var(--ck-orange-text)} .hh-page .khx-hero__art{position:relative;justify-self:center;width:min(100%,440px)} .hh-page .khx-hero__art > img{display:block;width:100%;height:auto} .hh-page .khx-stat{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;background:var(--ck-white);border-radius:14px;box-shadow:var(--ck-shadow-lg)} .hh-page .khx-stat i{flex:0 0 auto;width:8px;height:38px;border-radius:4px;background:var(--ck-blue)} .hh-page .khx-stat--2 i{background:var(--ck-orange)} .hh-page .khx-stat b{display:block;font:700 1.75rem/1 var(--ck-font-head);color:var(--ck-navy);font-variant-numeric:tabular-nums} .hh-page .khx-stat span{display:block;max-width:7.5em;margin-top:3px;color:var(--ck-muted);font-size:13px;line-height:1.25} .hh-page .khx-stat--1{left:-6%;bottom:6%} .hh-page .khx-stat--2{right:-4%;top:2%} /* 2. the featured post, over the hero's foot */ .hh-page .khx-feature{position:relative;z-index:2;margin-top:-96px;padding:0 0 clamp(48px,5vw,64px)} .hh-page .khx-feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);overflow:hidden;background:var(--ck-white);border:1px solid var(--ck-line); border-radius:22px;box-shadow:var(--ck-shadow-lg)} .hh-page .khx-feat__img{position:relative;min-height:330px;overflow:hidden;background:var(--ck-cream)} .hh-page .khx-feat__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hh-page .khx-feat--drawn .khx-feat__img{background:var(--ck-light)} .hh-page .khx-feat__flag{position:absolute;left:20px;top:20px;display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 14px 8px 12px;border-radius:var(--ck-radius-pill); background:var(--ck-orange);color:var(--ck-navy);font:700 13px/1 var(--ck-font-body);letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--ck-shadow)} .hh-page .khx-feat__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,40px) clamp(24px,3.2vw,44px)} .hh-page .khx-feat__kicker{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .hh-page .khx-feat h2{margin:0 0 10px;font-size:clamp(1.6rem,1.2rem + 1.1vw,2.05rem);line-height:1.15} .hh-page .khx-feat h2 a{color:var(--ck-navy);text-decoration:none} .hh-page .khx-feat h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px} .hh-page .khx-feat__sum{margin:0 0 14px;color:var(--ck-text);font-size:1.03rem;line-height:1.62} .hh-page .khx-feat .khx-quote{margin-bottom:16px} .hh-page .khx-feat .khx-meta{margin:0 0 14px} .hh-page .khx-feat__topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none} /* 3. new in every section, and the Latest News strip */ .hh-page .khx-fresh{padding:clamp(44px,4.5vw,56px) 0;background:var(--ck-neutral);border-top:1px solid var(--ck-line);--ck-blue-text:var(--ck-blue-text-deep)} .hh-page .khx-hero--alone + .khx-fresh{border-top:0} .hh-page .khx-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none} .hh-page .khx-lanes > li{scroll-margin-top:calc(var(--ck-sticky-top) + 16px)} .hh-page .khx-lane{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--ck-white);border:1px solid var(--ck-line);border-radius:18px;box-shadow:var(--ck-shadow)} .hh-page .khx-lane__art{position:relative;height:92px;overflow:hidden;border-bottom:4px solid var(--khx-c);background:var(--ck-light)} .hh-page .khx-lane__art img{display:block;width:100%;height:100%;object-fit:cover} .hh-page .khx-lane__body{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 22px 18px} .hh-page .khx-lane__name{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;font:700 1.3rem/1.2 var(--ck-font-head);color:var(--ck-navy)} .hh-page .khx-lane__name a{color:inherit;text-decoration:none} .hh-page .khx-lane__name a:hover{text-decoration:underline} .hh-page .khx-lane__name .ck-badge{flex:0 0 auto} .hh-page .khx-latest{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 6px;color:var(--ck-muted);font-size:13px} .hh-page .khx-latest b{color:var(--ck-navy);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px} .hh-page .khx-item__title{margin:0 0 8px;font:700 1.16rem/1.3 var(--ck-font-head)} .hh-page .khx-item__title a{color:var(--ck-navy);text-decoration:none} .hh-page .khx-item__title a:hover{text-decoration:underline} .hh-page .khx-item__sum{display:-webkit-box;margin:0 0 12px;overflow:hidden;color:var(--ck-text);font-size:14.5px;line-height:1.6;-webkit-line-clamp:3;-webkit-box-orient:vertical} .hh-page .khx-quote{position:relative;margin:2px 0 14px;padding:12px 14px 12px 16px;border-left:4px solid var(--khx-c,var(--ck-blue));border-radius:0 12px 12px 0; background:var(--khx-q,var(--ck-light));color:var(--ck-navy);font:italic 400 1.04rem/1.5 var(--ck-font-head)} .hh-page .khx-quote p{display:-webkit-box;margin:0;overflow:hidden;-webkit-line-clamp:7;-webkit-box-orient:vertical} .hh-page .khx-also{margin:0 0 12px;padding:10px 0 0;border-top:1px dashed var(--ck-line-strong)} .hh-page .khx-also__h{margin:0 0 6px;color:var(--ck-muted);font:600 11.5px/1.3 var(--ck-font-body);letter-spacing:.1em;text-transform:uppercase} .hh-page .khx-also ul{margin:0;padding:0;list-style:none} .hh-page .khx-also li{margin:0 0 8px;font-size:14.5px;line-height:1.4} .hh-page .khx-also a{color:var(--ck-navy);font-weight:600;text-decoration:none} .hh-page .khx-also a:hover{text-decoration:underline} .hh-page .khx-also time{margin-left:4px;color:var(--ck-muted);font-size:12.5px;font-weight:400;white-space:nowrap} .hh-page .khx-lane__foot{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--ck-line)} .hh-page .khx-news{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:14px 24px;margin:18px 0 0;padding:12px 26px 12px 12px; border:1.5px dashed var(--ck-line-strong);border-radius:18px;background:var(--ck-white);scroll-margin-top:calc(var(--ck-sticky-top) + 16px)} .hh-page .khx-news__art{align-self:start;height:62px;overflow:hidden;border-radius:12px;background:var(--ck-light)} .hh-page .khx-news__art img{display:block;width:100%;height:100%;object-fit:cover} .hh-page .khx-news__name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 4px;font:700 1.2rem/1.2 var(--ck-font-head)} .hh-page .khx-news__name a{color:var(--ck-navy);text-decoration:none} .hh-page .khx-news__name a:hover{text-decoration:underline} .hh-page .khx-news__none{margin:0;color:var(--ck-muted);font-size:14.5px;line-height:1.5} .hh-page .khx-news__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 22px;margin:6px 0 0;padding:0;list-style:none} .hh-page .khx-news__item{min-width:0} .hh-page .khx-news__meta{display:flex;flex-wrap:wrap;gap:2px 8px;margin:0 0 2px;color:var(--ck-muted);font-size:12.5px} .hh-page .khx-news__link{color:var(--ck-navy);font-weight:600;font-size:14.5px;line-height:1.4;text-decoration:none} .hh-page .khx-news__link:hover{text-decoration:underline} .hh-page .khx-away{margin-left:4px;vertical-align:-1px} .hh-page .khx-news .hub-news-warn{margin:4px 0 0;font-size:13px} .hh-page .khx-news__more{white-space:nowrap} /* 4. browse by topic */ .hh-page .khx-topics{padding:clamp(32px,3.4vw,40px) 0;background:var(--ck-light);border-top:1px solid var(--ck-line);border-bottom:1px solid var(--ck-line);--ck-blue-text:var(--ck-blue-text-deep)} .hh-page .khx-topics__in{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);align-items:center;gap:18px 44px} .hh-page .khx-topics .khx-h2{font-size:clamp(1.6rem,1.3rem + .8vw,2rem)} .hh-page .khx-topics .khx-sub{font-size:15px} .hh-page .khx-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none} .hh-page .khx-chip{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:6px 7px 6px 16px;border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius-pill); background:var(--ck-white);color:var(--ck-navy);font:600 15px/1.2 var(--ck-font-body);text-decoration:none;box-shadow:var(--ck-shadow);transition:border-color var(--ck-dur) ease,background-color var(--ck-dur) ease} .hh-page .khx-chip:hover{border-color:var(--ck-navy);color:var(--ck-navy)} .hh-page .khx-chip__n{min-width:28px;padding:4px 8px;border-radius:var(--ck-radius-pill);background:var(--ck-light);font:700 12.5px/1.1 var(--ck-font-body);text-align:center;font-variant-numeric:tabular-nums} .hh-page .khx-chip--area{background:var(--ck-navy);border-color:var(--ck-navy);color:var(--ck-white)} .hh-page .khx-chip--area:hover{background:var(--ck-navy-deep);color:var(--ck-white)} .hh-page .khx-chip--area .khx-chip__n{background:var(--ck-orange);color:var(--ck-navy)} /* 5. the word of the day and the glossary */ .hh-page .khx-word{padding:clamp(44px,4.5vw,56px) 0 clamp(52px,5vw,64px);background:var(--ck-cream);--ck-blue-text:var(--ck-blue-text-deep);scroll-margin-top:var(--ck-sticky-top)} .hh-page .khx-word__in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(32px,5vw,80px)} .hh-page .khx-word__in--alone{grid-template-columns:minmax(0,1fr);max-width:720px} .hh-page .khx-wcard{position:relative;margin:0 0 20px;padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,36px);background:var(--ck-white);border:1px solid var(--ck-line);border-radius:22px; box-shadow:0 10px 0 -4px var(--hh-cream-2),0 20px 0 -8px var(--hh-orange-soft),var(--ck-shadow-lg)} .hh-page .khx-wcard__top{display:flex;align-items:center;gap:16px;margin:0 0 12px} .hh-page .khx-letter{display:grid;place-items:center;flex:0 0 auto;width:60px;height:60px;border-radius:14px;background:var(--ck-orange);color:var(--ck-navy);font:700 2rem/1 var(--ck-font-head)} .hh-page .khx-wcard__label{margin:0;color:var(--hh-blue-deep);font:600 13px/1.3 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase} .hh-page .khx-wcard__date{margin:3px 0 0;color:var(--ck-muted);font-size:14px} .hh-page .khx-wcard__term{margin:0 0 10px;color:var(--ck-navy);font:700 clamp(2.3rem,1.8rem + 1.7vw,3rem)/1.02 var(--ck-font-head);letter-spacing:-.02em;overflow-wrap:anywhere} .hh-page .khx-wcard__def{margin:0 0 16px;color:var(--ck-text);font-size:1.06rem;line-height:1.66} .hh-page .khx-wcard__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:16px;border-top:1px solid var(--ck-line)} .hh-page .khx-wcard__note{margin:0;color:var(--ck-muted);font-size:13.5px} .hh-page .khx-search--gloss{max-width:none;margin:18px 0;box-shadow:none} .hh-page .khx-gbtn{min-height:42px;padding:0 18px} .hh-page .khx-gloss .hh-az a,.hh-page .khx-gloss .hh-az span{width:38px;height:38px} /* 6. join as an author */ .hh-page .khx-author{padding:clamp(44px,4.5vw,56px) 0 12px;background:var(--ck-white)} .hh-page .khx-apanel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(28px,4vw,64px); padding:clamp(28px,3.4vw,44px) clamp(30px,4.4vw,56px);border-radius:28px;color:var(--ck-on-navy);box-shadow:var(--ck-shadow-lg); background:url("/assets/img/hub-illustrations/cert-pattern.svg") right top/cover no-repeat, radial-gradient(50% 70% at 8% 10%,var(--hh-navy-glow) 0%,transparent 70%), linear-gradient(135deg,var(--ck-navy-deep) 0%,var(--ck-navy) 50%,var(--hh-navy-2) 100%)} .hh-page .khx-apanel .khx-eyebrow{color:var(--ck-blue)} .hh-page .khx-apanel h2{margin:0 0 12px;color:var(--ck-white);font:700 clamp(2.1rem,1.5rem + 1.8vw,2.8rem)/1.08 var(--ck-font-head);letter-spacing:-.015em} .hh-page .khx-apanel h2 em{font-style:normal;color:var(--ck-orange)} .hh-page .khx-apanel__lead{margin:0 0 22px;max-width:34em;color:var(--ck-on-navy);font-size:1.06rem;line-height:1.62} .hh-page .khx-authors{padding:20px;border:1px solid var(--hh-white-14);border-radius:20px;background:var(--hh-white-06)} .hh-page .khx-authors__h{margin:0 0 12px;color:var(--ck-white);font:700 1.15rem/1.3 var(--ck-font-head)} .hh-page .khx-people{margin:0;padding:0;list-style:none} .hh-page .khx-person{display:flex;align-items:center;gap:14px;margin:0 0 10px;padding:10px 14px;border-radius:14px;background:var(--ck-white);color:var(--ck-text)} .hh-page .khx-person .hub-avatar{flex:0 0 auto;width:48px;height:48px;font-size:18px} .ck .hh-page .khx-person a.khx-person__name{display:block;color:var(--ck-navy);font:700 1.05rem/1.25 var(--ck-font-head);text-decoration:none} .ck .hh-page .khx-person a.khx-person__name:hover{text-decoration:underline} .ck .hh-page .khx-person a.khx-person__name:focus-visible{outline:3px solid var(--ck-navy);outline-offset:3px;border-radius:2px} .hh-page .khx-person b{display:block;color:var(--ck-navy);font:700 1.05rem/1.25 var(--ck-font-head)} .hh-page .khx-person small{display:block;color:var(--ck-muted);font-size:13.5px} .hh-page .khx-person--you{margin:0;background:transparent;border:1.5px dashed var(--hh-white-45);color:var(--ck-on-navy)} .hh-page .khx-person--you b{color:var(--ck-white)} .hh-page .khx-person--you small{color:var(--ck-on-navy-muted)} .hh-page .khx-ph{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border:1.5px dashed var(--hh-white-80);border-radius:50%;color:var(--ck-white)} .hh-page.khx > section:last-of-type{padding-bottom:clamp(44px,5vw,64px)} @media (max-width:1024px){ .hh-page .khx-lanes{grid-template-columns:repeat(2,minmax(0,1fr))} .hh-page .khx-lanes > li:last-child{grid-column:1 / -1} .hh-page .khx-news__list{grid-template-columns:minmax(0,1fr)} } @media (max-width:900px){ .hh-page .khx-hero__in{grid-template-columns:minmax(0,1fr)} .hh-page .khx-hero__art{display:none} .hh-page .khx-feat{grid-template-columns:minmax(0,1fr)} .hh-page .khx-feat__img{min-height:0;aspect-ratio:16/9} .hh-page .khx-topics__in{grid-template-columns:minmax(0,1fr)} .hh-page .khx-word__in{grid-template-columns:minmax(0,1fr)} .hh-page .khx-apanel{grid-template-columns:minmax(0,1fr)} .hh-page .khx-news{grid-template-columns:96px minmax(0,1fr)} .hh-page .khx-news__more{grid-column:1 / -1} } /* phones: every part stays, each one shorter */ @media (max-width:640px){ .hh-page .khx-eyebrow{margin-bottom:8px;font-size:12px} .hh-page .khx-head{margin-bottom:18px} .hh-page .khx-sub{font-size:15px} .hh-page .khx-hero{padding:24px 0 96px} .hh-page .khx-hero--alone{padding-bottom:36px} .hh-page .khx-hero h1{margin-bottom:10px;font-size:2.55rem} .hh-page .khx-hero__lead{margin-bottom:18px;font-size:1.02rem} .hh-page .khx-search{padding-left:14px} .hh-page .khx-search--hero .ck-btn{width:46px;padding:0} .hh-page .khx-btn-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .hh-page .khx-jump{gap:6px;margin-top:16px} .hh-page .khx-jump__label{display:none} .hh-page .khx-jump ul{gap:6px} .hh-page .khx-jump__link{padding:5px 6px 5px 10px;font-size:13px;gap:6px} .hh-page .khx-feature{margin-top:-72px;padding-bottom:40px} .hh-page .khx-feat__flag{left:12px;top:12px;padding:6px 11px 6px 9px;font-size:12px} .hh-page .khx-feat__body{padding:20px 20px 24px} .hh-page .khx-feat h2{font-size:1.5rem} .hh-page .khx-feat__sum{display:-webkit-box;overflow:hidden;font-size:15.5px;-webkit-line-clamp:3;-webkit-box-orient:vertical} .hh-page .khx-feat__topics{display:none} .hh-page .khx-cta{gap:12px} .hh-page .khx-cta .ck-btn{width:100%} .hh-page .khx-fresh{padding:36px 0} .hh-page .khx-fresh .khx-head .khx-sub{display:none} .hh-page .khx-lanes{grid-template-columns:minmax(0,1fr);gap:12px} .hh-page .khx-lanes > li:last-child{grid-column:auto} .hh-page .khx-lane{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:start;border-left:5px solid var(--khx-c);border-radius:16px} .hh-page .khx-lane__art{width:64px;height:64px;margin:14px 0 0 12px;border:0;border-radius:12px} .hh-page .khx-lane__body{padding:12px 14px 14px 12px} .hh-page .khx-lane__name{margin-bottom:6px;font-size:1.12rem} .hh-page .khx-item__title{margin-bottom:6px;font-size:1.04rem} .hh-page .khx-lane .khx-item__sum,.hh-page .khx-lane .khx-quote,.hh-page .khx-also{display:none} .hh-page .khx-lane__foot{padding-top:6px;border-top:0} .hh-page .khx-news{grid-template-columns:minmax(0,1fr);margin-top:12px;padding:14px 16px;gap:6px} .hh-page .khx-news__art{display:none} .hh-page .khx-news__list{gap:10px} .hh-page .khx-topics{padding:32px 0} .hh-page .khx-topics__in{gap:14px} .hh-page .khx-chips{gap:7px} .hh-page .khx-chip{gap:7px;min-height:36px;padding:5px 5px 5px 11px;font-size:13.5px} .hh-page .khx-chip__n{min-width:24px;padding:3px 6px;font-size:11.5px} .hh-page .khx-chips li:nth-child(n+9){display:none} .hh-page .khx-word{padding:36px 0 40px} .hh-page .khx-gloss .khx-sub{display:none} .hh-page .khx-word__in{gap:28px} .hh-page .khx-wcard{margin-bottom:16px;padding:20px} .hh-page .khx-wcard__top{margin-bottom:10px} .hh-page .khx-letter{width:48px;height:48px;font-size:1.6rem} .hh-page .khx-wcard__term{font-size:2.3rem} .hh-page .khx-wcard__def{margin-bottom:14px;font-size:1rem;line-height:1.62} .hh-page .khx-wcard__foot{flex-direction:column;align-items:flex-start;gap:4px;padding-top:12px} .hh-page .khx-search--gloss{margin:14px 0} .hh-page .khx-gloss .hh-az{gap:5px;margin-bottom:16px} .hh-page .khx-author{padding:36px 0 4px} .hh-page .khx-apanel{gap:22px;padding:28px 20px;border-radius:22px} .hh-page .khx-apanel h2{font-size:2.1rem} .hh-page .khx-apanel__lead{font-size:1rem} .hh-page .khx-authors{padding:12px 12px 10px} .hh-page .khx-authors__h{margin-bottom:8px;font-size:1rem} .hh-page .khx-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .hh-page .khx-person{flex-direction:column;justify-content:flex-start;gap:6px;margin:0;padding:10px 6px;text-align:center} .ck .hh-page .khx-person a.khx-person__name,.hh-page .khx-person b{font-size:.86rem;line-height:1.2} .hh-page .khx-person small{font-size:11.5px;line-height:1.3} .hh-page .khx-person .hub-avatar,.hh-page .khx-ph{width:40px;height:40px;font-size:15px} } @media (pointer:coarse){ /* 44px tap targets */ .hh-page .khx-jump__link,.hh-page .khx-chip{min-height:44px} } @media (forced-colors:active){ .hh-page .khx-suggest .hub-suggest__opt.is-active{outline:2px solid CanvasText;outline-offset:-2px} } /* ---------- Search across both sites: the suggestions' hooks renamed (hub-search.js became crcgs-search.js) 2026-10-20 ---------- */ /* The list's options are .ck-suggest__opt now (.hub-suggest__opt above is no longer used); the chosen one keeps its outline in forced colours. */ @media (forced-colors:active){ .hh-page .khx-suggest .ck-suggest__opt.is-active{outline:2px solid CanvasText;outline-offset:-2px} } /* ---------- Team and authors 2026-10-24 ---------- */ /* "Our Authors" (owner, 2026-10-24; hub/home/_authors.php, hub-home.js section 6): a slim white strip between the Knowledge Hub and Country Profiles sections. The heading and "Meet our authors" on one line; then one row of authors, each a round photo (or initials in a navy circle) with the name and designation under it, the whole item a link to the author's page. Without JavaScript, and with reduced motion, the row stands still: centred when it fits (the list is as wide as its authors and sits in the middle), a strip that scrolls sideways when it does not. With JavaScript and motion allowed, a row that does not fit is clipped (.is-moving), the copies after the real list show, and the script moves the belt with a transform; its edges fade (--hh-au-fade). .is-fitting (set by the script): everything fits, nothing moves and no button shows. The Pause / Play button is the Knowledge Hub row's round sign (its name read by screen readers). The homepage's team section (section 7 above) is no longer drawn: the team has its own page, /our-team (styles in hub-forms.css). */ .hh-au{--hh-au-fade:32px;--hh-au-gap:28px;padding:clamp(40px,5vw,64px) 0;background:var(--ck-white);border-bottom:1px solid var(--ck-line)} .hh .hh-au__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin:0 0 20px} .hh .hh-au__title{margin:0;color:var(--ck-navy);font:700 clamp(1.5rem,1.2rem + 1vw,2rem)/1.15 var(--ck-font-head)} .hh .hh-au__more{font-weight:600} .hh .hh-au__row{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:6px 0 10px;scrollbar-width:thin} .hh .hh-au__belt{position:relative;display:flex;width:max-content;min-width:100%} .hh .hh-au__list{display:flex;flex:none;gap:var(--hh-au-gap);margin:0 auto;padding:0;list-style:none} .hh .hh-au__copy[hidden]{display:none} .hh .hh-au__item{flex:0 0 132px;min-width:0} .hh .hh-au__link{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 8px;border-radius:var(--ck-radius);color:var(--ck-navy);text-align:center;text-decoration:none} .hh .hh-au__pic{display:grid;place-items:center;width:88px;height:88px;margin-bottom:8px;overflow:hidden;border:3px solid var(--ck-white);border-radius:50%; background:var(--ck-navy);box-shadow:0 0 0 1px var(--ck-line),var(--ck-shadow);transition:transform var(--ck-dur) var(--ck-ease),box-shadow var(--ck-dur) ease} .hh .hh-au__img{width:100%;height:100%;object-fit:cover;display:block} .hh .hh-au__initials{color:var(--ck-white);font:700 1.6rem/1 var(--ck-font-head)} .hh .hh-au__name{font:600 15px/1.3 var(--ck-font-body);color:var(--ck-navy)} .hh .hh-au__role{font-size:13px;line-height:1.4;color:var(--ck-muted)} .hh .hh-au__link:hover .hh-au__name{text-decoration:underline;text-underline-offset:3px} .hh .hh-au__link:hover .hh-au__pic{transform:translateY(-3px);box-shadow:0 0 0 2px var(--ck-blue),var(--ck-shadow-lg)} .hh .hh-au__link:focus-visible{outline:3px solid var(--ck-orange);outline-offset:2px} .hh .hh-au__controls{display:flex;justify-content:center;margin-top:12px} .hh .hh-au__play{display:inline-grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1.5px solid var(--ck-line-strong);border-radius:50%; background:var(--ck-white);color:var(--ck-navy);cursor:pointer;transition:border-color var(--ck-dur) ease,box-shadow var(--ck-dur) ease} .hh .hh-au__play:hover{border-color:var(--ck-navy);box-shadow:var(--ck-shadow)} .hh .hh-au__play[hidden]{display:none} .hh-au__play .hh-i-play,.hh-au__play.is-stopped .hh-i-pause{display:none} .hh-au__play.is-stopped .hh-i-play{display:block} /* moving: clipped (the script brings a focused author into view), the copies shown, the edges faded */ @media (prefers-reduced-motion:no-preference){ .ck-js .hh-au.is-moving .hh-au__row{overflow:hidden;overflow:clip;touch-action:pan-y pinch-zoom; -webkit-mask-image:linear-gradient(90deg,transparent,var(--ck-navy) var(--hh-au-fade),var(--ck-navy) calc(100% - var(--hh-au-fade)),transparent); mask-image:linear-gradient(90deg,transparent,var(--ck-navy) var(--hh-au-fade),var(--ck-navy) calc(100% - var(--hh-au-fade)),transparent)} .ck-js .hh-au.is-moving .hh-au__belt{min-width:0;padding-left:var(--hh-au-fade);will-change:transform} .ck-js .hh-au.is-moving .hh-au__list{margin:0;padding-right:var(--hh-au-gap)} /* each set: the authors and their gaps, so the sets repeat exactly */ } @media (max-width:560px){ .hh-au{--hh-au-fade:var(--ck-gutter);--hh-au-gap:16px} .hh .hh-au__item{flex-basis:112px} .hh .hh-au__pic{width:72px;height:72px} .hh .hh-au__initials{font-size:1.3rem} .ck-js .hh .hh-au.is-moving .hh-au__row{margin:0 calc(-1 * var(--ck-gutter))} } @media (prefers-reduced-motion:reduce){ .hh .hh-au__belt{transform:none !important} .hh .hh-au__copy{display:none !important} .hh .hh-au__link:hover .hh-au__pic{transform:none} } @media (forced-colors:active){ .hh .hh-au__pic{border-color:CanvasText} }