/* ══════════ 0917b · knowledge-centre.html — client feedback batch 3 (track "kc")
K1 hero CTA · K2 #featured card on gold · K3 #explore arrows left/right · K4 #resources "Start Here" as a shelf of books
G1 gold tone on the page's photography. Every selector is scoped to an id on this page.
Brief: .claude/CLIENT-FEEDBACK-0917b.md
══════════ */
/* ───────────────────────── G1 · golden overlay on the page's photography ───────────────────────── */
#top .hero__bg img{ filter: var(--gold-photo) contrast(1.04); }
#featured .lt__fig img{ filter: var(--gold-photo); }
#library-slides .sqz__panel:not(.is-open) .sqz__img{ filter: var(--gold-photo-mono) contrast(1.06) brightness(.7); }
#library-slides .sqz__panel.is-open .sqz__img{ filter: var(--gold-photo) contrast(1.05) brightness(1.06); }
#subscribe .close-band__bg img{ filter: var(--gold-photo-mono) brightness(.4); }
/* ───────────────────────── K1 · hero CTA ───────────────────────── */
#top .kchero__cta{
display: flex; justify-content: center;
margin-top: clamp(22px, 2.8vw, 34px);
}
#top .kchero__btn{ padding: 16px 30px; }
#top .kchero__arr{ display: inline-block; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
#top .kchero__btn:hover .kchero__arr,
#top .kchero__btn:focus-visible .kchero__arr{ transform: translateY(4px); }
#explore{ scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce){ #top .kchero__arr{ transition: none; } }
/* ───────────────────────── K2 · #featured — the card on GOLD, text in ink ───────────────────────── */
#featured .lt{
background: var(--accent-sheen), var(--accent-grad);
background-color: var(--accent);
border-color: rgba(10,10,11,.18);
position: relative;
}
/* the homepage gold panel's swirl, kept very quiet so the gold still reads as a plain field */
#featured .lt__panel{ position: relative; isolation: isolate; }
#featured .lt__panel::before{
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: rgba(10,10,11,.05);
-webkit-mask: url('../assets/img/pattern-swirl.webp') no-repeat 78% 40%;
mask: url('../assets/img/pattern-swirl.webp') no-repeat 78% 40%;
-webkit-mask-size: 120% auto; mask-size: 120% auto;
}
#featured .lt__tag{
color: var(--accent-on); -webkit-text-fill-color: currentColor;
border-color: rgba(10,10,11,.42);
background: rgba(255,255,255,.08);
}
#featured .lt__lede{
background: none; -webkit-text-fill-color: currentColor;
color: var(--accent-on);
}
#featured .lt__note{ color: rgba(10,10,11,.72); }
/* the comet border turns ink so it still travels on the gold */
#featured .lt.gring::before{
background: conic-gradient(from var(--gring-a),
transparent 0deg, transparent 236deg,
rgba(10,10,11,.25) 282deg, rgba(10,10,11,.7) 316deg, rgba(10,10,11,.2) 344deg, transparent 360deg);
opacity: .6;
}
/* ───────────────────────── K3 · #explore — previous LEFT, next RIGHT ───────────────────────── */
#library-slides .kclib__stage{
display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center; gap: clamp(12px, 1.6vw, 22px);
}
#library-slides .kclib__arrow{ width: 52px; height: 52px; }
#library-slides .kclib__arrow svg{ width: 18px; height: 18px; }
#library-slides .kclib__arrow:focus-visible{ outline: 2px solid var(--accent-hov); outline-offset: 3px; }
/* the copy lines up with the images, not with the arrows */
@media (min-width: 881px){
#library-slides .sqz__copy{ padding-inline: calc(52px + clamp(12px, 1.6vw, 22px)); }
}
@media (max-width: 880px){
#library-slides .kclib__stage{ grid-template-columns: minmax(0, 1fr); position: relative; }
#library-slides .kclib__arrow{
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 42px; height: 42px;
}
#library-slides .kclib__arrow--prev{ left: 8px; }
#library-slides .kclib__arrow--next{ right: 8px; }
/* K3: the open panel is ~175px wide on phones: let the label wrap inside it */
#library-slides .sqz__tag{
white-space: normal; left: 12px; right: 12px;
font-size: .62rem; letter-spacing: .12em; line-height: 1.3;
}
}
/* ───────────────────────── K4 · #resources "Start Here" — the shelf ─────────────────────────
Six resources as six bound volumes standing on a shelf, each turned to show its spine.
Hover / focus pulls a volume off the line and turns its cover to face you. Every cover is its own
piece of art in the site's language: metallic gold + swirl, ink + gold arcs, gold-toned photography,
paper + gold tiles, gilt + ink hatch. Built after 21st.dev "Book" (designali-in #1758, shugar #3715). */
#resources.kshelf{
position: relative; overflow: hidden; isolation: isolate;
background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F4 46%, #F3EEE3 100%);
padding-bottom: clamp(80px, 8.4vw, 124px);
}
#resources .kshelf__ground{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#resources .kshelf__ground::before{
content: ''; position: absolute; inset: 0;
background:
radial-gradient(46% 38% at 50% 64%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%),
radial-gradient(30% 26% at 6% 12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
#resources .kshelf__swirl{
position: absolute; inset: -10% -6%;
background: var(--accent); opacity: .075;
-webkit-mask: url('../assets/img/pattern-swirl.webp') no-repeat 50% 60%;
mask: url('../assets/img/pattern-swirl.webp') no-repeat 50% 60%;
-webkit-mask-size: 118% auto; mask-size: 118% auto;
}
#resources .kshelf__head{ margin-bottom: clamp(44px, 5.6vw, 84px); }
#resources .kshelf__stage{ position: relative; --d: 30px; }
#resources .kshelf__rack{
list-style: none; margin: 0; padding: 0 clamp(8px, 2vw, 28px);
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(22px, 2.8vw, 46px); align-items: end;
position: relative; z-index: 2;
}
#resources .kshelf__slot{ position: relative; min-width: 0; }
/* the shelf itself */
#resources .kshelf__ledge{
position: relative; z-index: 1; height: 18px; margin-top: -2px;
background: linear-gradient(180deg, #EDE5D4 0%, #E2D7C1 60%, #CFC2A8 100%);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,.9),
inset 0 2px 0 0 var(--accent),
0 34px 44px -26px rgba(40,30,10,.45),
0 6px 10px -6px rgba(40,30,10,.3);
}
#resources .kshelf__ledge::after{ /* the front lip */
content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
background: linear-gradient(180deg, #BDAE90, #A8987A);
}
/* ── the volume ── */
#resources .kbook{
display: block; position: relative; text-decoration: none; color: inherit;
perspective: 1500px; perspective-origin: 50% 40%;
-webkit-tap-highlight-color: transparent;
outline: none;
}
#resources .kbook__obj{
position: relative; display: block; width: 100%; aspect-ratio: 3 / 4.3;
transform-style: preserve-3d;
transform: rotateY(var(--ry, 30deg));
transform-origin: 50% 100%;
transition: transform .75s cubic-bezier(.2,.8,.2,1);
}
#resources .kbook__cover,
#resources .kbook__spine,
#resources .kbook__pages{ position: absolute; top: 0; height: 100%; }
#resources .kbook__cover{
left: 0; width: 100%; overflow: hidden;
display: grid; grid-template-rows: 47% 1fr;
background: #FAF7F0;
box-shadow: 0 1px 0 0 rgba(10,10,11,.08), inset 0 0 0 1px rgba(10,10,11,.08);
transform: translateZ(0);
}
/* the hinge: the crease a bound cover carries a few mm in from the spine */
#resources .kbook__cover::before{
content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 14px; z-index: 3; pointer-events: none;
background: linear-gradient(90deg, rgba(10,10,11,.22) 0%, rgba(255,255,255,.18) 38%, rgba(10,10,11,.14) 62%, rgba(10,10,11,0) 100%);
}
#resources .kbook__spine{
left: calc(-1 * var(--d)); width: var(--d);
transform-origin: 100% 50%; transform: rotateY(-90deg);
background: linear-gradient(90deg, rgba(10,10,11,.18), transparent 48%, rgba(10,10,11,.22)), var(--accent-sheen), var(--accent-grad);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#resources .kbook__spinet{
writing-mode: vertical-rl; transform: rotate(180deg);
font-family: var(--font-display); font-weight: 600; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
white-space: nowrap; color: rgba(10,10,11,.78); max-height: 86%; overflow: hidden;
}
#resources .kbook__pages{
left: 100%; width: calc(var(--d) - 4px); top: 3px; height: calc(100% - 6px);
transform-origin: 0 50%; transform: rotateY(90deg);
background: repeating-linear-gradient(90deg, #F4EFE3 0 2px, #E4DBC8 2px 3px);
}
/* art half */
#resources .kbook__art{ position: relative; display: block; overflow: hidden; }
#resources .kbook__motif{ position: absolute; inset: 0; }
#resources .kbook__img{
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s ease;
}
/* text half */
#resources .kbook__body{
position: relative; display: flex; flex-direction: column; min-height: 0;
padding: clamp(12px, 1.15vw, 18px) clamp(12px, 1.15vw, 18px) clamp(11px, 1vw, 15px) clamp(18px, 1.6vw, 24px);
}
#resources .kbook__ix{
font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .22em;
color: var(--accent-deep);
}
#resources .kbook__t{
margin-top: 6px;
font-family: var(--font-display); font-weight: 600;
font-size: clamp(.9rem, 1.12vw, 1.1rem); line-height: 1.16; letter-spacing: -.018em;
color: #0B0C0E;
}
#resources .kbook__foot{
margin-top: auto; padding-top: 8px;
display: flex; align-items: center; justify-content: space-between;
}
#resources .kbook__ic{ width: 18px; height: 18px; display: block; color: var(--accent-deep); }
#resources .kbook__ic svg{ width: 100%; height: 100%; display: block; }
#resources .kbook__mark{
font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .02em; color: rgba(10,10,11,.55);
}
#resources .kbook__mark b{ color: var(--accent-deep); font-weight: 700; }
/* the light that crosses the cover as it turns */
#resources .kbook__sheen{
position: absolute; inset: 0; z-index: 4; pointer-events: none;
background: linear-gradient(105deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.34) 47%, rgba(255,255,255,0) 62%);
transform: translateX(-120%);
transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
/* the book's own shadow on the shelf */
#resources .kbook__shadow{
position: absolute; left: 4%; right: -8%; bottom: -8px; height: 18px; z-index: -1;
background: radial-gradient(50% 50% at 50% 50%, rgba(40,30,10,.38), rgba(40,30,10,0) 72%);
transition: transform .75s cubic-bezier(.2,.8,.2,1), opacity .75s ease;
}
/* ── the six covers ── */
/* 01 gold + swirl */
#resources .kbook--gold .kbook__art{ background: var(--accent-sheen), var(--accent-grad); }
#resources .kbook--gold .kbook__motif{
background: rgba(10,10,11,.3);
-webkit-mask: url('../assets/img/pattern-swirl.webp') no-repeat 40% 30%;
mask: url('../assets/img/pattern-swirl.webp') no-repeat 40% 30%;
-webkit-mask-size: 190% auto; mask-size: 190% auto;
}
/* 02 ink + gold arcs */
#resources .kbook--ink .kbook__cover{ background: #0E0F12; }
#resources .kbook--ink .kbook__art{ background: #0E0F12; }
#resources .kbook--ink .kbook__motif{
background: repeating-radial-gradient(circle at 0% 100%, transparent 0 15px, var(--accent) 15px 16px);
opacity: .78;
-webkit-mask: linear-gradient(35deg, #000 20%, rgba(0,0,0,.15) 90%);
mask: linear-gradient(35deg, #000 20%, rgba(0,0,0,.15) 90%);
}
#resources .kbook--ink .kbook__spine,
#resources .kbook--night .kbook__spine{ background: linear-gradient(90deg, #050607, #1A1B1F 50%, #050607); }
#resources .kbook--ink .kbook__spinet,
#resources .kbook--night .kbook__spinet{ color: var(--accent); }
/* 03 gold-toned photograph */
#resources .kbook--photo .kbook__img{ filter: var(--gold-photo-mono) contrast(1.08) brightness(.96); object-position: 50% 40%; }
#resources .kbook--photo .kbook__art::after{
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 34%, transparent));
mix-blend-mode: multiply;
}
#resources .kbook--photo .kbook__spine{ background: linear-gradient(90deg, #E6DDCB, #F4EEE2 50%, #DCD1BB); }
/* 04 paper + gold tiles */
#resources .kbook--cream .kbook__cover{ background: #F2ECDF; }
#resources .kbook--cream .kbook__art{ background: #F2ECDF; }
#resources .kbook--cream .kbook__motif{
background:
radial-gradient(circle at 0 0, transparent 0 33px, var(--accent) 33px 34px, transparent 35px) 0 0 / 34px 34px,
linear-gradient(90deg, var(--accent) 1px, transparent 1px) 0 0 / 34px 34px,
linear-gradient(180deg, var(--accent) 1px, transparent 1px) 0 0 / 34px 34px;
opacity: .85;
}
#resources .kbook--cream .kbook__spine{ background: linear-gradient(90deg, #E6DDCB, #F4EEE2 50%, #DCD1BB); }
/* 05 gilt all over + ink hatch */
#resources .kbook--gilt .kbook__cover{ background: var(--accent-grad); }
#resources .kbook--gilt .kbook__art{ background: transparent; }
#resources .kbook--gilt .kbook__motif{
background: repeating-linear-gradient(135deg, rgba(10,10,11,.5) 0 1px, transparent 1px 9px);
-webkit-mask: linear-gradient(200deg, #000 0%, rgba(0,0,0,.05) 88%);
mask: linear-gradient(200deg, #000 0%, rgba(0,0,0,.05) 88%);
}
#resources .kbook--gilt .kbook__body{ border-top: 1px solid rgba(10,10,11,.28); }
#resources .kbook--gilt .kbook__ix,
#resources .kbook--gilt .kbook__ic{ color: var(--accent-on); }
#resources .kbook--gilt .kbook__mark,
#resources .kbook--gilt .kbook__mark b{ color: rgba(10,10,11,.7); }
/* 06 night photograph */
#resources .kbook--night .kbook__cover{ background: #0E0F12; }
#resources .kbook--night .kbook__img{ filter: var(--gold-photo) brightness(.82) contrast(1.06); object-position: 50% 35%; }
#resources .kbook--night .kbook__art::after{
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(14,15,18,0) 55%, #0E0F12 100%);
}
/* dark covers: light type, gold details */
#resources .kbook--ink .kbook__t,
#resources .kbook--night .kbook__t{ color: #F4F2EC; }
#resources .kbook--ink .kbook__ix,
#resources .kbook--night .kbook__ix,
#resources .kbook--ink .kbook__ic,
#resources .kbook--night .kbook__ic,
#resources .kbook--ink .kbook__mark b,
#resources .kbook--night .kbook__mark b{ color: var(--accent); }
#resources .kbook--ink .kbook__mark,
#resources .kbook--night .kbook__mark{ color: rgba(244,242,236,.6); }
#resources .kbook--ink .kbook__cover::before,
#resources .kbook--night .kbook__cover::before{
background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(255,255,255,.1) 38%, rgba(0,0,0,.4) 62%, rgba(0,0,0,0) 100%);
}
/* ── pull a volume off the shelf ── */
@media (hover: hover) and (pointer: fine){
#resources .kbook:hover .kbook__obj{ transform: translateY(-18px) translateZ(40px) rotateY(0deg); }
#resources .kbook:hover .kbook__sheen{ transform: translateX(120%); }
#resources .kbook:hover .kbook__img{ transform: scale(1.06); }
#resources .kbook:hover .kbook__shadow{ transform: scaleX(.8); opacity: .55; }
#resources .kshelf__rack:hover .kbook:not(:hover) .kbook__obj{ --ry: 38deg; }
}
#resources .kbook:focus-visible .kbook__obj{ transform: translateY(-18px) translateZ(40px) rotateY(0deg); }
#resources .kbook:focus-visible .kbook__sheen{ transform: translateX(120%); }
#resources .kbook:focus-visible .kbook__cover{ outline: 2px solid var(--accent-deep); outline-offset: 4px; }
/* ── arrival: the volumes are placed on the shelf one after another ── */
#resources .kshelf__stage.is-armed .kshelf__slot{
opacity: 0; transform: translateY(46px);
transition: opacity .7s ease, transform 1s cubic-bezier(.2,.8,.2,1);
transition-delay: calc(var(--i) * 90ms);
}
#resources .kshelf__stage.is-armed .kshelf__slot .kbook__obj{ --ry: 78deg; transition-delay: calc(var(--i) * 90ms + 120ms); }
#resources .kshelf__stage.is-armed.is-in .kshelf__slot{ opacity: 1; transform: none; }
#resources .kshelf__stage.is-armed.is-in .kshelf__slot .kbook__obj{ --ry: 30deg; }
#resources .kshelf__stage.is-settled .kshelf__slot .kbook__obj{ transition-delay: 0s; }
/* ── tablet: three to a shelf, each on its own plinth ── */
@media (max-width: 1099px){
#resources .kshelf__rack{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 70px; padding-inline: clamp(16px, 5vw, 60px); }
#resources .kshelf__ledge{ display: none; }
#resources .kshelf__slot::after{
content: ''; display: block; height: 12px; margin: 0 -18px; position: relative; z-index: -1;
background: linear-gradient(180deg, #EDE5D4 0%, #D9CDB4 100%);
box-shadow: inset 0 2px 0 0 var(--accent), 0 22px 26px -18px rgba(40,30,10,.45);
}
#resources .kbook__t{ font-size: clamp(.95rem, 2vw, 1.12rem); }
}
/* ── phone: two to a shelf ── */
@media (max-width: 640px){
#resources .kshelf__stage{ --d: 22px; }
#resources .kshelf__rack{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 52px; padding-inline: 12px; }
#resources .kbook__obj{ --ry: 20deg; }
#resources .kshelf__stage.is-armed.is-in .kshelf__slot .kbook__obj{ --ry: 20deg; }
#resources .kbook__body{ padding: 10px 10px 9px 15px; }
#resources .kbook__t{ font-size: .86rem; line-height: 1.14; margin-top: 4px; }
#resources .kbook__ix{ font-size: .56rem; }
#resources .kbook__ic{ width: 15px; height: 15px; }
#resources .kbook__mark{ font-size: .6rem; }
#resources .kshelf__slot::after{ margin: 0 -12px; height: 10px; }
}
@media (prefers-reduced-motion: reduce){
#resources .kbook__obj,
#resources .kbook__sheen,
#resources .kbook__img,
#resources .kbook__shadow{ transition: none; }
#resources .kshelf__stage.is-armed .kshelf__slot{ opacity: 1; transform: none; transition: none; }
}
/* ══════════ 2026-09-18b · CLIENT: "put the text in the Knowledge Centre hero
section to the center horizontally and vertically" ══════════
.hero--full already centres its flex child, but its padding is asymmetric
(top clamp(120px,15vh,190px) vs bottom clamp(48px,7vh,90px)), which pushed
the whole stack visually low. Equal padding + centred stack = true centre.
The top value still clears the fixed header. */
#top.kchero{
/* the sub-page hero is a COLUMN flex box with justify-content:flex-end — that
bottom-anchoring is what made the copy "look down". Centre it on both axes. */
flex-direction: column;
justify-content: center;
align-items: center;
padding-block: clamp(104px, 12vh, 156px);
}
#top.kchero .hero__inner{
display: flex; align-items: center; justify-content: center;
width: 100%; text-align: center;
}
#top.kchero .kchero__stack{ margin-inline: auto; text-align: center; }
#top.kchero .kchero__cta{ justify-content: center; }
/* ══════════ 2026-09-19 (fix round) · K2 + QUALITY — the replacement photography ══════════
Five frames were re-sourced from Unsplash because the previous set answered a
cheaper version of "realistic stock that fits what is being said":
· kc-lib-articles-newspaper.jpg replaces kc-lib-articles-reading.jpg
(teal/green striped garment, 28.3% cyan vs 22.1% gold in the rendered crop,
and its subject read as "woman with coffee", not articles)
· kc-lib-research-report.jpg replaces kc-lib-research-reports.jpg
· kc-book-investor-docs.jpg replaces kc-book-investor-review.jpg
(those two were the SAME shoot — one "2015 European Private Equity Activity"
report twice on one page, carrying the Invest Europe logo and the
PEREP_Analytics credit, with teal charts that survived the gold filter)
· kc-lib-capitalq-product.jpg replaces kc-lib-capitalq-terminal.jpg
(a TradingView BTCUSD candlestick terminal standing in for a product update;
the new frame is cropped above the laptop's maker mark)
· kc-featured-exec.jpg replaces cl-desk-balcony.jpg
(waxy skin, textureless blazer, incoherent glass mullions, impossible desk
leg, repeating planters — the AI look the client has now raised twice)
Measured in the live render with each image's own computed filter applied on a
canvas (saturated pixels, s>0.18 v>0.12): gold(20-60°) leads every frame and
teal/blue(150-240°) is 5.5 / 3.5 / 3.7 / 0.2 / 1.3 % across the five library
panels, 0.1% on #featured and 1.5% on book 06.
style.css's `#featured .lt__fig img[src*="cl-desk-balcony"]` scale/translate
re-frame is keyed to the OLD filename, so it stops applying on its own — the
new frame needs no transform, only .lt__fig's existing overflow:hidden. */
#library-slides .sqz__img[src*="kc-lib-articles-newspaper"]{ object-position: 50% 88%; }
/* ══════════ 2026-09-21 (batch 8) · #keep-informed — the Knowledge Centre form ══════════
Client: "There's meant to be a form for this Knowledge Centre section, and I think it
should come before the footer." Six questions, gold accent, square corners, .glow,
same endpoint + validation as the contact form. Scoped to #keep-informed. */
#keep-informed{
position: relative;
isolation: isolate;
background: var(--bg);
border-top: 1px solid var(--line-soft);
overflow: hidden;
}
/* a very quiet gold ground — the client asked for the homepage swirl to be REDUCED where
it fights copy, so this sits at 5% under a card that carries its own glass fill */
#keep-informed .kcf__ground{
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(120% 70% at 50% 0%, rgba(226,178,76,.13), transparent 62%),
radial-gradient(90% 60% at 50% 108%, rgba(226,178,76,.07), transparent 66%);
}
#keep-informed .kcf__swirl{
position: absolute; inset: -6% -4% auto -4%; height: 96%;
background: var(--accent);
opacity: .04;
-webkit-mask: url('../assets/img/pattern-swirl.webp') no-repeat 50% 18%;
mask: url('../assets/img/pattern-swirl.webp') no-repeat 50% 18%;
-webkit-mask-size: 78% auto; mask-size: 78% auto;
}
#keep-informed .kcf__head{ max-width: 44rem; margin-inline: auto; }
#keep-informed .kcf__h{ font-size: clamp(1.9rem, 3.5vw, 3.1rem); }
#keep-informed .kcf__sub{ margin-top: 14px; }
#keep-informed .kcf__lede{
margin-top: 16px; color: var(--txt);
font-size: clamp(.96rem, 1.1vw, 1.06rem); line-height: 1.66;
}
/* ── the card ── */
#keep-informed .kcf__card{
margin-top: clamp(34px, 4vw, 54px);
margin-inline: auto;
max-width: 1000px;
padding: clamp(24px, 3.4vw, 46px);
background: rgba(244,248,251,.035);
border: 1px solid var(--line);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#keep-informed .kcf__honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
#keep-informed .kcf__set{
border: 0; padding: 0; margin: clamp(26px, 3vw, 38px) 0 0;
border-top: 1px solid var(--line-soft); padding-top: clamp(22px, 2.6vw, 30px);
}
#keep-informed .kcf__leg{
/* float + full width takes the legend out of the fieldset border box, so the
hairline rule sits ABOVE the question instead of cutting under it */
float: left; width: 100%; display: block; padding: 0; margin-bottom: 16px;
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1rem, 1.3vw, 1.16rem); letter-spacing: -.012em;
color: var(--txt-hi);
}
#keep-informed .kcf__leg i{ color: var(--accent); font-style: normal; }
#keep-informed .kcf__hint{
display: inline-block; margin-left: 6px;
font-family: var(--font-base); font-weight: 400;
font-size: .78rem; letter-spacing: .02em; color: var(--txt-dim);
}
/* ── option chips (radio for Q3, checkbox for Q4/Q5) ── */
#keep-informed .kcf__opts{ clear: both; display: flex; flex-wrap: wrap; gap: 9px; }
#keep-informed .kcf__opt{ display: inline-flex; cursor: pointer; }
#keep-informed .kcf__opt input{
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
#keep-informed .kcf__opt span{
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 15px;
border: 1px solid var(--line);
background: rgba(244,248,251,.04);
font-size: .855rem; line-height: 1.25; color: var(--txt);
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
#keep-informed .kcf__opt span::before{
content: ''; flex: 0 0 auto; width: 9px; height: 9px;
border: 1px solid rgba(215,226,234,.38);
transition: background-color .2s ease, border-color .2s ease;
}
#keep-informed .kcf__opt:hover span{
border-color: rgba(226,178,76,.55); color: var(--txt-hi);
background: rgba(226,178,76,.06);
}
#keep-informed .kcf__opt input:checked + span{
background: var(--accent-sheen), var(--accent-grad);
background-color: var(--accent);
border-color: transparent;
color: var(--accent-on); font-weight: 500;
}
#keep-informed .kcf__opt input:checked + span::before{
background: var(--accent-on); border-color: var(--accent-on);
}
#keep-informed .kcf__opt input:focus-visible + span{
outline: 2px solid var(--accent); outline-offset: 2px;
}
/* ── Q6 + footer ── */
#keep-informed .kcf__q6{ margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--line-soft); }
#keep-informed .kcf__q6 .fld__lbl{
font-family: var(--font-display); font-weight: 500; text-transform: none;
letter-spacing: -.012em; font-size: clamp(1rem, 1.3vw, 1.16rem);
color: var(--txt-hi); margin-bottom: 14px;
}
#keep-informed .kcf__area{ min-height: 108px; }
#keep-informed .fld__in:focus{ border-color: var(--accent); }
#keep-informed .kcf__foot{
display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
margin-top: clamp(26px, 3vw, 36px);
}
#keep-informed .kcf__btn{ padding: 16px 30px; }
#keep-informed .kcf__note{
flex: 1 1 18rem; min-width: 0;
font-size: .82rem; line-height: 1.6; color: var(--txt-dim);
}
/* ── validation ──
The client asked for "the same validation as the contact form", so an invalid field here
must LOOK identical to one on contact.html. That is style.css:383
`.is-bad .fld__in, .fld__in.is-bad{ border-color: rgba(248,113,113,.6) }` — reused verbatim
below (a bespoke salmon #F0A58C was overriding it in v13) and extended to the chip sets,
which contact.html has no equivalent of. The message text, which contact.html does not have
at all, takes the same red at full strength. */
#keep-informed .kcf__err{
margin-top: 8px; font-size: .8rem; line-height: 1.5;
color: #F87171;
}
#keep-informed .kcf__err--form{ margin-top: 16px; }
#keep-informed .fld__in.is-bad,
#keep-informed .kcf__set.is-bad .kcf__opt span{ border-color: rgba(248,113,113,.6); }
/* ── success state ── */
#keep-informed .kcf__done{ text-align: center; padding: clamp(18px, 3vw, 40px) 0; }
#keep-informed .kcf__tick{
display: inline-grid; place-items: center; width: 54px; height: 54px;
background: var(--accent-sheen), var(--accent-grad);
background-color: var(--accent); color: var(--accent-on);
box-shadow: 0 0 34px var(--accent-glow);
}
#keep-informed .kcf__tick svg{ width: 26px; height: 26px; }
#keep-informed .kcf__doneh{
margin-top: 20px;
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.018em; color: var(--txt-hi);
}
#keep-informed .kcf__donep{
margin: 12px auto 0; max-width: 46ch;
font-size: .96rem; line-height: 1.66; color: var(--txt);
}
@media (max-width: 880px){
#keep-informed .kcf__card{ padding: 22px 18px; }
#keep-informed .kcf__opts{ gap: 8px; }
#keep-informed .kcf__opt span{ padding: 9px 13px; font-size: .82rem; }
#keep-informed .kcf__foot{ gap: 14px; }
#keep-informed .kcf__btn{ width: 100%; justify-content: center; }
#keep-informed .kcf__note{ flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce){
#keep-informed .kcf__opt span{ transition: none; }
}
/* ══════════ 2026-09-21 (batch 8, FIX 2) · the two outstanding batch-7 photographs ══════════
CapitalQ™ Updates: kc-lib-capitalq-product-team.jpg. Third frame for this slot.
· kc-lib-capitalq-terminal.jpg — a BTCUSD candlestick terminal (rejected: a trading chart).
· kc-lib-capitalq-product.jpg — a cream studio backdrop, no screen, a monogram on a shirt.
· kc-lib-capitalq-build.jpg — a café/bar table with an empty pilsner glass standing in the
top right, and the darkest tile in the row. It read as freelancers at a pub, not a team
shipping a platform, which is not what "new features, product releases, platform
enhancements" says. Both old files are kept on disk until this one is signed off.
The frame now shipping: three professionals at a white meeting-room table, the middle one
talking through what is open on the laptops, bright daylight interior, no drinkware, no
legible brand mark on any lid (Unsplash, UK Black Tech, free licence — the Unsplash+
candidates and every frame carrying an Apple / Dell / POCIT mark were rejected).
THE CROP IS BAKED INTO THE FILE, not into object-position. The source was cut to an exact
16:9 (1600×900) with the speaker on the centre line, because .sqz__img is a fixed-width
16:9 box centred in the panel with transform: translateX(-50%) — a CLOSED panel therefore
shows the MIDDLE vertical strip of the frame, not the left of it. object-position is left
at 50% 50% so the desktop box (also 16:9) shows the file exactly as cropped. On a phone the
panel measures 175×220 open and 32 wide closed, so cover crops HORIZONTALLY there — 50% on
X is what keeps the speaker and the open laptop in the 45% of the frame a 390 tile shows.
MEASURED, not intended. Method: at 1440, each CLOSED panel's visible strip (140×340) is
redrawn on a canvas with that panel's own computed filter, then its ::after black plate
(.34) and its .sqz__shade gradient, and the Rec.709 mean of the result is taken. On that
one scale the closed tiles now read
videos 28.0 · CAPITALQ 30.1 · news 32.6 · research 40.3
— CapitalQ sits inside the row instead of under it. The rejected kc-lib-capitalq-build.jpg
measured 26.2 on the same scale, below every neighbour. Getting there took a gamma 0.74
lift on the file (the source is a flat, slightly under-exposed interior); the frame is
otherwise untouched.
#featured KEPT (kc-featured-exec.jpg) — judged real photography at 1:1, not AI. Note what
the file actually is before touching this rule again: the SOURCE PHOTOGRAPH ITSELF clips
the bun — hair runs off its own row 0 (pixel minima of 10-16 across x 500-800 at y = 0).
No object-position can put air above a crown the file does not contain, so 50% 0% would
not help; it only reproduces the file's own edge. What 50% 16% does buy is the removal of
the TANGENT: at 8% the shaved top of the bun kissed the card edge, at 16% the edge passes
through hair mass and reads as a deliberate tight portrait, with the face lower and more
centred. Verified at 1440 (box 557×279, 136 css px of vertical excess, 55 source rows cut).
AT 390 THIS RULE IS INERT: the box measures 348×259, ratio 1.344 against the file's 1.342,
so cover crops nothing and the file's own clipped top edge is what shows. Only re-sourcing
kc-featured-exec.jpg can give real air above the head — flagged, not done this round. */
/* 2026-09-22 (O-9) · the slot now carries kc-lib-capitalq-wireframe.jpg (see the note at the
end of this file). Same 1600x900 baked crop, so the rule below is unchanged in effect. */
#library-slides .sqz__img[src*="kc-lib-capitalq-wireframe"]{ object-position: 50% 50%; }
#featured .lt__fig img[src*="kc-featured-exec"]{ object-position: 50% 16%; }
/* ══════════ 2026-09-22 (batch 12 · K-1…K-4) · #keep-informed — TWO STAGES ══════════
Stage 1 (name · email · phone · a real dropdown · agree-to-terms) then Next; stage 2
(the two multi-selects as TILES, not a checkbox list) then Keep Me Informed. The old
.kcf__opt chip rules above are now unused — the markup no longer emits them — and are
left in place only as the revert path. Square corners, gold accent, .glow on the card
and the primary buttons, 60/30/10 respected: the accent appears on the live step, on a
selected tile's hairline + tick, and on the two solid buttons. Scoped to #keep-informed. */
/* ── the two-step rail ── */
/* display:flex beats the [hidden] UA rule, so the thank-you state needs this explicitly */
#keep-informed .kcf__rail[hidden]{ display: none !important; }
#keep-informed .kcf__rail{
display: flex; align-items: center; gap: 14px;
margin: 0 0 clamp(22px, 2.6vw, 32px);
padding: 0 0 clamp(20px, 2.4vw, 26px);
border-bottom: 1px solid var(--line-soft);
list-style: none;
}
#keep-informed .kcf__rstep{
display: inline-flex; align-items: center; gap: 10px;
font-size: .86rem; letter-spacing: .01em; color: var(--txt-dim);
transition: color .25s ease;
}
#keep-informed .kcf__rnum{
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; flex: 0 0 26px;
border: 1px solid var(--line);
font-family: var(--font-display); font-weight: 500; font-size: .8rem;
color: var(--txt-dim);
transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
#keep-informed .kcf__rline{
flex: 1 1 auto; height: 1px; background: var(--line-soft); min-width: 18px;
}
#keep-informed .kcf__rstep.is-on{ color: var(--txt-hi); }
#keep-informed .kcf__rstep.is-on .kcf__rnum{
background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 600;
}
#keep-informed .kcf__rstep.is-done{ color: var(--txt); }
#keep-informed .kcf__rstep.is-done .kcf__rnum{
border-color: rgba(226,178,76,.55); color: var(--accent);
}
/* ── the stages ── */
#keep-informed .kcf__stage[hidden]{ display: none !important; }
#keep-informed .kcf__stage.is-on{ display: block; }
#keep-informed .kcf__stage > .frow:first-child{ margin-top: 0; }
#keep-informed .kcf__stage[data-kc-stage="2"] > .kcf__set:first-of-type{
margin-top: 0; padding-top: 0; border-top: 0;
}
/* ── stage 1: the dropdown ── */
#keep-informed .kcf__sel{ color-scheme: dark; }
#keep-informed .kcf__sel option{ background: #101114; color: #E8EDF2; }
#keep-informed .kcf__sel:focus{ border-color: var(--accent); }
#keep-informed .fld__caret{ color: var(--accent); font-size: 1rem; right: 15px; }
/* ── stage 1: agree to terms ── */
#keep-informed .kcf__agree{
margin-top: clamp(20px, 2.4vw, 26px);
padding-top: clamp(18px, 2.2vw, 24px);
border-top: 1px solid var(--line-soft);
}
#keep-informed .kcf__terms{
align-items: flex-start; gap: 12px;
font-size: .9rem; line-height: 1.6; color: var(--txt);
max-width: 62ch;
}
#keep-informed .kcf__terms input{
flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px;
accent-color: var(--accent);
}
#keep-informed .kcf__agree.is-bad .kcf__terms span{ color: #FCA5A5; }
#keep-informed .kcf__agree.is-bad .kcf__terms input{ outline: 1px solid rgba(248,113,113,.75); outline-offset: 2px; }
/* ── stage 2: TILES, not a checkbox list ──
"there's a better way to design it rather than this checkbox whatever" — each option is a
full tile with its own hairline and a tick plate at the right; selected fills the plate
gold and lights the hairline, so the selected state reads across the whole grid. */
#keep-informed .kcf__tiles{
/* clear:both is LOAD-BEARING. .kcf__leg is float:left;width:100% (that float is what puts the
fieldset's hairline ABOVE the question instead of through it). A grid container establishes
its own formatting context, so without clear it is laid out BESIDE the 100%-wide float and
collapses to a single column pinned to the right edge — measured at 1440 before this line. */
clear: both;
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
#keep-informed .kcf__tile{ display: block; cursor: pointer; }
#keep-informed .kcf__tile input{
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
#keep-informed .kcf__tilein{
display: flex; align-items: center; gap: 12px; height: 100%;
min-height: 58px; padding: 13px 14px;
border: 1px solid var(--line);
background: rgba(244,248,251,.035);
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#keep-informed .kcf__tilet{
flex: 1 1 auto;
font-size: .9rem; line-height: 1.35; color: var(--txt);
transition: color .2s ease;
}
#keep-informed .kcf__tickbox{
flex: 0 0 auto; width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(215,226,234,.32);
color: transparent;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
#keep-informed .kcf__tickbox svg{ width: 13px; height: 13px; }
#keep-informed .kcf__tile:hover .kcf__tilein{
border-color: rgba(226,178,76,.5); background: rgba(226,178,76,.055);
}
#keep-informed .kcf__tile:hover .kcf__tilet{ color: var(--txt-hi); }
#keep-informed .kcf__tile:hover .kcf__tickbox{ border-color: rgba(226,178,76,.65); }
#keep-informed .kcf__tile input:checked + .kcf__tilein{
border-color: var(--accent);
background: rgba(226,178,76,.11);
box-shadow: inset 3px 0 0 0 var(--accent);
}
#keep-informed .kcf__tile input:checked + .kcf__tilein .kcf__tilet{
color: var(--txt-hi); font-weight: 500;
}
#keep-informed .kcf__tile input:checked + .kcf__tilein .kcf__tickbox{
background: var(--accent); border-color: var(--accent); color: var(--accent-on);
}
#keep-informed .kcf__tile input:focus-visible + .kcf__tilein{
outline: 2px solid var(--accent); outline-offset: 2px;
}
/* ── the feet ── */
#keep-informed .kcf__back{
padding: 15px 24px;
border: 1px solid var(--line);
background: transparent; color: var(--txt);
}
#keep-informed .kcf__back:hover{ border-color: var(--accent); color: var(--txt-hi); }
#keep-informed .btn__arr--back{ margin-right: 6px; margin-left: 0; }
@media (max-width: 620px){
#keep-informed .kcf__rail{ gap: 9px; }
#keep-informed .kcf__rstep{ font-size: .78rem; gap: 8px; }
#keep-informed .kcf__rnum{ width: 23px; height: 23px; flex-basis: 23px; font-size: .74rem; }
#keep-informed .kcf__tiles{ grid-template-columns: 1fr; gap: 8px; }
#keep-informed .kcf__tilein{ min-height: 50px; padding: 12px 13px; }
#keep-informed .kcf__tilet{ font-size: .875rem; }
#keep-informed .kcf__terms{ font-size: .85rem; }
#keep-informed .kcf__back{ width: 100%; justify-content: center; order: 2; }
#keep-informed .kcf__foot .kcf__btn{ order: 1; }
#keep-informed .kcf__foot .kcf__note{ order: 3; }
}
@media (prefers-reduced-motion: reduce){
#keep-informed .kcf__tilein, #keep-informed .kcf__tickbox,
#keep-informed .kcf__rnum, #keep-informed .kcf__rstep{ transition: none; }
}
/* ══════════ 2026-09-22 (O-9) · the CapitalQ™ Updates photograph — FOURTH frame ══════════
The line the tile sits behind: "new features, product releases, platform enhancements, and
the future of intelligent investment discovery." The slot's history, newest last:
kc-lib-capitalq-terminal.jpg a BTCUSD candlestick terminal — a trading chart, not product work.
kc-lib-capitalq-product.jpg a cream studio backdrop, no screen at all.
kc-lib-capitalq-build.jpg a café/bar table with an empty pilsner glass (the batch-8 reject).
kc-lib-capitalq-product-team.jpg three professionals at a meeting table with laptops. Clean, but it
reads MEETING, not product/software work — it illustrates "we met",
not "we shipped". Kept on disk as the revert path.
NOW SHIPPING kc-lib-capitalq-wireframe.jpg — a hand with a stylus drawing UI wireframes (layout grids,
a loading-spinner spec, annotated screens) on a tablet on a warm wooden desk. Unsplash photo
1586717791821-3f44a563fa4c, free licence, pulled at ?w=1800&q=80 and cropped to an exact 16:9
1600x900 (box 513,192 → 1800,916 of the 1800x1201 source). THE CROP IS LOAD-BEARING: the source
frame's upper left carries an Apple Magic Mouse with its logo and an Apple keyboard, and the house
rule is that NO third-party brand or product UI appears in frame. The crop starts at 28.5% across,
right of the mouse pad, so not one branded object survives; the sketching app's own chrome is generic
("Capas / Exportar / Importar / Zoom"), no product name anywhere. Same 1600x900 as the file it
replaces, so the object-position rule above is unchanged.
LUMINANCE, MEASURED not intended. A CLOSED panel shows the middle vertical strip (140 of the 557-wide
16:9 box), so the mean Rec.709 luminance of that centre strip is what decides whether the tile sits in
the row. Outgoing file 154.34 · NEW FILE 154.07 — a difference of 0.27, so the tile lands exactly where
the slot was already tuned, and no gamma lift was needed. The rest of the row on the same scale:
videos 135.76 · news 153.94 · articles 150.81 · research 197.58.
REJECTED this round, with reasons:
1629904853893 two engineers at code monitors — ASUS and HDMI marks on the bezels, a third-party
IDE's chrome filling the screen, cold blue cast.
1623479322729 night coder — a Coca-Cola can front and centre.
1575089976121 developer at a desk — LG logo on the monitor, a MacBook and an Apple Watch in frame,
portrait orientation.
1610563166150 screen-only still — VS Code title bar and an OS dock of recognisable app icons; the
code itself names a third-party product.
1607799279861 laptop with code — purple/blue LED gamer cast that fights the gold, framework names
(VueRouter, bootstrap) readable.
1748256622734 open-plan floor — AOC monitor logos, company-branded staff hoodies, flat fluorescent
light; reads call centre.
1759884247144 two people with laptops — a hackathon slogan T-shirt, a sofa, a drinking glass: the
same "freelancers at a pub" failure that got the batch-8 frame rejected.
1642957323739 living-room team — a Facebook/TikTok ads UI on the TV and a LOUIS VUITTON book on the
shelf, i.e. both failure modes the brief names by name.
1599585113438 whiteboard session — a US flag in the window and a third-party design firm's name
written on the board.
1532622785990 two people sketching a UI on a whiteboard — the best of the rejects, but a near-white
field that would have been the brightest tile in the row by a wide margin, and the
marker barrels carry a legible stationery brand.
1787647561979 / 1787647562031 / 1787839253728 not downloaded: near-sequential ids with generated-
sounding alt text ("A diverse group of five people collaborating…") — one synthetic set.
every premium_photo-* id Unsplash+, not free-licence. */
/* ══════════ 2026-09-22 (FIX round · K-3) · stage 2 stops being a checkbox list ══════════
The reviewer failed the previous build and he was right: every tile still carried an
always-visible empty 22x22 square at its right edge, the label was pinned left, and the
tiles sat in a rigid equal-width 3-column grid (295px each at 1440) that collapsed to ONE
column at 390 — 14 + 9 = 23 consecutive label-left / empty-box-right rows. That is the
literal thing the client asked to be redesigned ("there's a better way to design it rather
than this checkbox whatever"), with a border round it.
Rebuilt as CHIPS:
· the empty box is gone entirely — an unselected chip is just its label in a hairline
pill-less square. The tick only exists when the chip is ON, and it is a bare gold
check-mark, no surrounding square.
· the row is a flex wrap, so every chip hugs its own label instead of being stretched to
a column width. "Videos" is now 88px wide and "Africa -> Arabia / Cross-Border
Investment" takes the width it needs; at 390 they wrap two and three to a line instead
of stacking 23 rows deep.
· the label is centred in the chip (padding 12px 18px, no space-between), so it reads as
a chip and not as a settings row.
These rules come after the 0917b block above and override it. */
/* the row: a wrap of chips, not a grid of cells.
clear:both is still LOAD-BEARING — .kcf__leg is float:left;width:100%, and a flex
container establishes its own formatting context exactly as the grid did, so without
clear it lays out BESIDE the 100%-wide float and collapses to one column at the right. */
#keep-informed .kcf__tiles{
clear: both;
display: flex; flex-wrap: wrap; gap: 10px;
grid-template-columns: none; /* retire the old rigid track list */
}
#keep-informed .kcf__tile{
flex: 0 0 auto;
max-width: 100%; /* a long label wraps inside the chip, never past the container */
}
#keep-informed .kcf__tilein{
display: inline-flex; align-items: center; justify-content: center;
gap: 0; height: auto; min-height: 0;
padding: 12px 18px;
border: 1px solid var(--line);
background: rgba(244,248,251,.035);
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#keep-informed .kcf__tilet{
flex: 0 1 auto; text-align: center;
font-size: .9rem; line-height: 1.3; color: var(--txt);
}
/* the tick: nothing at all until the chip is on — no box, no border, no reserved gap */
#keep-informed .kcf__tickbox{
flex: 0 0 auto;
width: 0; height: 14px; margin-left: 0;
border: 0; background: none; opacity: 0; overflow: hidden;
color: var(--accent);
transition: width .18s ease, margin-left .18s ease, opacity .18s ease;
}
#keep-informed .kcf__tickbox svg{ width: 14px; height: 14px; }
#keep-informed .kcf__tile:hover .kcf__tilein{
border-color: rgba(226,178,76,.5); background: rgba(226,178,76,.055);
}
#keep-informed .kcf__tile:hover .kcf__tickbox{ border-color: transparent; }
/* ON: gold hairline, gold-tinted fill, and the bare gold check appears. No left rail —
that inset bar was the last thing making a chip read as a list row. */
#keep-informed .kcf__tile input:checked + .kcf__tilein{
border-color: var(--accent);
background: rgba(226,178,76,.11);
box-shadow: none;
}
#keep-informed .kcf__tile input:checked + .kcf__tilein .kcf__tickbox{
width: 14px; margin-left: 9px; opacity: 1;
background: none; border: 0; color: var(--accent);
}
#keep-informed .kcf__tile input:focus-visible + .kcf__tilein{
outline: 3px solid var(--accent); outline-offset: 2px;
}
/* 390. Hugging alone is not enough here: the copy is verbatim and long
("Africa -> Arabia / Cross-Border Investment"), so at a 312px content width a pure
hug still stacked 21 of the 23 chips one to a line — measured — which would still
scroll as a column. Capping a chip at half the row makes the long labels wrap INSIDE
the chip instead of eating the line: 23 chips now land on 12 lines, two up, and the
group is 516px tall instead of 638. The label stays at 13.6px — the type is not shrunk
to buy the packing, because this client has already failed one item for 8.8px type.
justify-content:center leaves each group's last line centred, so the ragged widths
read as a set of chips rather than as rows in a table. */
@media (max-width: 620px){
#keep-informed .kcf__tiles{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#keep-informed .kcf__tile{ max-width: calc(50% - 4px); }
#keep-informed .kcf__tilein{ min-height: 0; padding: 11px 13px; }
#keep-informed .kcf__tilet{ font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce){
#keep-informed .kcf__tickbox{ transition: none; }
}
/* ══════════ 2026-09-22 (FIX round · QUALITY) · the header must read over this hero ══════════
Same defect the client already failed as O-3 on Talent Capital, here landing on the nav item
that marks the current page. style.css:3586 sets .kchero .hero__scrim to
linear-gradient(0deg, .92 0%, .62 26%, .12 52%, .06 100%) — 0deg means bottom-to-top, so the
TOP of the hero is only 6% ink, and kc-hero-forum.jpg puts a bright cream ceiling and a lit
pendant exactly behind the bar. Measured at 1440: the gold "Knowledge Centre" link and the
white "Africa -> Arabia" both sat on near-white; at 390 the burger and "CAPITAL PARTNERS"
washed out on the same panel.
Two parts, both scoped to this hero only (#top.kchero beats the .kchero rules in style.css
on specificity; the shared .hdr2 rules are another track's and are NOT touched):
1. the scrim keeps its dark floor and dark middle but comes back up to 55% at the top;
2. a short ::before strip, 0 to 120px, sits under the header so the bar always has ink
behind it whatever the photograph does. z-index 2 puts it above the scrim (z1); the
hero's own .hero__inner is z-index 2 and later in DOM order, so the copy still wins. */
#top.kchero .hero__scrim{
background: linear-gradient(0deg,
rgba(8,9,12,.92) 0%,
rgba(8,9,12,.62) 26%,
rgba(8,9,12,.30) 52%,
rgba(8,9,12,.55) 100%);
}
#top.kchero::before{
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120px;
z-index: 2; pointer-events: none;
background: linear-gradient(180deg, rgba(8,9,12,.72) 0%, rgba(8,9,12,.42) 55%, rgba(8,9,12,0) 100%);
}
@media (max-width: 880px){
#top.kchero::before{ height: 104px; }
}
/* ══════════ 2026-09-22 (FIX round · QUALITY) · two photographs in the rejected register ══════════
#featured kc-featured-exec.jpg was a generic young woman at a laptop in a sticky-note
startup office — the junior register the client has now objected to three times,
sitting behind "Explore our latest thinking on fundraising, investment readiness,
venture capital, private markets".
NOW kc-featured-session-0922.jpg: four senior professionals working a deal
session — bound reports open on the table, a document being handed across,
laptops, a city floor. The register of kc-hero-forum.jpg, which the reviewer
confirmed is the right one. Sourced from this repo's own library (biz-shift-2.jpg,
referenced by no page), copied to a kc-* name so neither slot can move the other.
2000x1116. In the 485x279 slot cover is HEIGHT-bound (279/1116 = .25 > 485/2000
= .2425), so the full frame height survives and only 15px of width is cropped —
nothing can be cut off the tops of the heads; 50% 45% keeps the table centred.
The gold tone is unchanged: #featured .lt__fig img already carries var(--gold-photo).
book 03 kc-book-duediligence-notes.jpg was a vintage-look monochrome window portrait —
a woman in a t-shirt writing in a notebook outdoors, which depicts nothing about
investor due diligence. NOW kc-book-duediligence-docs-0922.jpg: two people going
through printed documents at a desk, pen in hand, figures and a laptop in frame —
papers actually under review. Also from the repo's own library (bg-confidence.jpg,
referenced by no page). 1920x1282. .kbook--photo's gold-mono filter and the gold
multiply plate over the art half are untouched, so it still sits in the row; the
object-position pulls the window down onto the documents rather than the shoulder. */
#featured .lt__fig img[src*="kc-featured-session-0922"]{ object-position: 50% 45%; }
#resources .kbook--photo .kbook__img[src*="kc-book-duediligence-docs-0922"]{ object-position: 56% 62%; }
/* ══ 2026-09-23 · batch 14 · B-11 ═════════════════════════════════════════
Client: "find a better way to design these options rather than me just
clicking them… a drop-down that lets you select more than one, keep
adding." Both option sets are now one multi-select control: a field that
opens a panel, and every choice lands back in it as a removable chip. The
underlying checkboxes are untouched, so what the form posts is unchanged. */
#keep-informed .kcms{ position: relative; }
#keep-informed .kcms__control{
width: 100%; min-height: 58px; display: flex; align-items: center; gap: 12px;
padding: 11px 16px; cursor: pointer; text-align: left;
background: rgba(255,255,255,.04);
border: 1px solid rgba(244,248,251,.20);
color: var(--txt-hi); font: inherit;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#keep-informed .kcms__control:hover{ border-color: rgba(226,178,76,.55); }
#keep-informed .kcms.is-open .kcms__control{
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(226,178,76,.25), 0 14px 40px -26px var(--accent-glow);
}
#keep-informed .kcms__chips{
flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
#keep-informed .kcms__ph{ color: rgba(244,248,251,.44); font-size: .95rem; }
#keep-informed .kcms__chip{
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 9px 5px 11px;
background: rgba(226,178,76,.14); border: 1px solid rgba(226,178,76,.42);
color: var(--txt-hi); font-size: .83rem; line-height: 1.25; font-weight: 500;
}
#keep-informed .kcms__x{
font-size: 1rem; line-height: 1; color: var(--accent); cursor: pointer;
padding: 0 1px;
}
#keep-informed .kcms__caret{ flex: 0 0 auto; color: var(--accent); transition: transform .24s ease; }
#keep-informed .kcms.is-open .kcms__caret{ transform: rotate(180deg); }
#keep-informed .kcms__panel{
position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
max-height: 330px; overflow-y: auto;
padding: 8px;
background: #101114; border: 1px solid rgba(226,178,76,.34);
box-shadow: 0 30px 70px -30px rgba(0,0,0,.9);
display: grid; gap: 2px;
}
#keep-informed .kcms__panel .kcf__tile{
display: block; width: 100%; margin: 0; cursor: pointer;
}
#keep-informed .kcms__panel .kcf__tilein{
display: flex; align-items: center; gap: 11px;
padding: 11px 12px; border: 0; background: transparent;
transition: background .16s ease;
}
#keep-informed .kcms__panel .kcf__tile:hover .kcf__tilein{ background: rgba(255,255,255,.055); }
#keep-informed .kcms__panel .kcf__tilein::before{
content: ""; flex: 0 0 auto; width: 17px; height: 17px;
border: 1px solid rgba(244,248,251,.34); background: transparent;
transition: background .16s ease, border-color .16s ease;
}
#keep-informed .kcms__panel .kcf__tile input:checked + .kcf__tilein::before{
background: var(--accent); border-color: var(--accent);
box-shadow: inset 0 0 0 3px #101114;
}
#keep-informed .kcms__panel .kcf__tile input:focus-visible + .kcf__tilein{
outline: 2px solid var(--accent); outline-offset: -2px;
}
#keep-informed .kcms__panel .kcf__tilet{ font-size: .95rem; font-weight: 500; }
@media (max-width: 600px){
#keep-informed .kcms__panel{ max-height: 264px; }
#keep-informed .kcms__chip{ font-size: .78rem; }
}
/* `display:grid` above beats the [hidden] attribute's display:none, so a
closed panel was still painting — and the tile styles centre their text. */
#keep-informed .kcms__panel[hidden]{ display: none; }
#keep-informed .kcms__panel .kcf__tile,
#keep-informed .kcms__panel .kcf__tilein,
#keep-informed .kcms__panel .kcf__tilet{ text-align: left; justify-content: flex-start; }
#keep-informed .kcms__control{ text-align: left; }