/* ================================================================== KIG — WHY KIG (02) + WHO WE SERVE (03) Client-supplied component package (Kemet_Why_Who_Ready), integrated. Source: integration/sections.css. Structure, geometry, breakpoints, easing curves and every animation are the package's own. What changed here, and only here: 1. PALETTE. The package shipped #E4B243 / #EDC866 gold on #121212. This site's palette is read out of the supplied globe and is already established across every other band, so all package literals are remapped onto the site tokens (see the mapping table in the README). Nothing is picked by eye. 2. THEME. The site has a working light/dark toggle. Everything below resolves through var(--token), so both sections flip with the page. The handful of values that cannot be a site token (the un-filled half of the scroll-filled headline, the pre-roll command numeral, the decorative washes) are local --kig-* tokens with an explicit [data-theme="light"] override, each held at or above 4.5:1 on its own ground. 3. FONTS. The package's bundled BarlowCondensed-Bold.ttf and its @font-face are dropped — the site already self-hosts Oswald for display, Barlow for body and Roboto Mono for eyebrows, and adding a fourth family for two sections is a wasted request. Every `KIGCondensed` reference repoints to var(--f-display). 4. GREEN CAST. The package's near-blacks and greys were olive (#C7C7C0, #55554E, #52524A, #686860, #CFCFC7 — green >= red and green >= blue in each). All replaced with the site's warm tokens. 5. .wrap. The package's own .wrap rule is deleted rather than overridden, so these bands inherit the page's .wrap (max-width 1500 / --pad) and their left edge lines up with every other band. That also clears the 104px section rail at >=1650px without a dedicated media query: the wrap's content edge there is (vw-1500)/2 + 60 = 135px. 6. The preview "Replay" toolbar rules (.motion-preview) are dropped — the package's own point 6 says production omits that toolbar. 7. background-options.css is APPLIED (requested), remapped: the Who band loses its square grid for a soft corner wash, and .intro gains .kig-integration-background. Background treatment only. MOTION CONTRACT. The site's rule is that hidden pre-animation states exist only inside html.anim. The package's `.reveal` opacity:0 is gated on html.anim below; every other hidden state (.motion-ready, .motion-wait) is set by JS and so is already unreachable without it. ================================================================== */ /* The wrapper is display:contents so the two bands stay DIRECT children of
in the box tree. The section rail measures each band's computed background from `main > *` to decide whether to flip to its dark-on-light palette; a real wrapper box would have matched first, reported one background for both bands, and left the rail unreadable over the cream Who band. See the matching selector change in the page's rail script. */ #kig-sections{display:contents;} #kig-sections{ /* graphic golds — flip with the page */ --kig-gold:var(--gold); --kig-lit:var(--gold-lit); /* the un-filled half of the scroll-filled headline. 4.66:1 on --ink (#050608), so the headline is legible even at 0% fill. */ --kig-head-off:#8F7A5A; /* the command numeral before its stage is reached — 4.87:1 on --ink */ --kig-num-wait:#8A8067; --kig-glow:rgba(201,162,39,.085); /* pointer wash, Why band */ --kig-glow-who:rgba(201,162,39,.10); /* corner wash, Who band */ --kig-ghost:rgba(242,237,227,.026); /* the giant "KIG" watermark */ --kig-hair:rgba(242,237,227,.17); /* command rule */ --kig-hair-2:rgba(242,237,227,.12); /* between command columns */ --kig-hair-gold:rgba(201,162,39,.30); /* band top edge */ --kig-shadow-gold:rgba(201,162,39,.38); --kig-shadow-lit:rgba(232,199,101,.60); } [data-theme="light"] #kig-sections{ /* --kig-lit was the one graphic gold this block never overrode, so it kept resolving to --gold-lit (#E8C765) - about 1.2:1 on the warm stone ground. That is what drove BOTH the .reason.is-current headings and the background-clip:text fill on the "Trusted to deliver." headline, which is why they stayed washed out after the other yellows were fixed. --gold-display is the brightest yellow that clears the 3:1 large-text floor on this ground (3.14:1); see the token note in index.html. */ --kig-lit:var(--gold-display); /* --ink is a warm stone #E4DCC9 in light theme, so the two values that sit on it invert: 4.62:1 and 5.15:1 respectively. */ --kig-head-off:#8A6E14; --kig-num-wait:#63563A; --kig-glow:rgba(201,162,39,.14); --kig-glow-who:rgba(201,162,39,.13); --kig-ghost:rgba(22,24,28,.045); --kig-hair:rgba(22,24,28,.20); --kig-hair-2:rgba(22,24,28,.14); --kig-hair-gold:rgba(201,162,39,.45); --kig-shadow-gold:rgba(201,162,39,.38); --kig-shadow-lit:rgba(74,58,16,.45); } #kig-sections *{box-sizing:border-box;} #kig-sections .why-kig,#kig-sections .who{font-family:var(--f-body);} #kig-sections h2,#kig-sections h3,#kig-sections p{margin-top:0;} #kig-sections .condensed{font-family:var(--f-display);} /* the package's eyebrow, re-cut on the site's mono eyebrow face so it reads as the same label system as every other .sec-no on the page */ #kig-sections .eyebrow{ display:flex;align-items:center;gap:14px; font:500 var(--fs-mono,12px)/1 var(--f-mono); letter-spacing:.26em;text-transform:uppercase; } #kig-sections .eyebrow:after{content:"";width:70px;height:1px;background:var(--kig-gold);} /* ---------------- 02 — WHY KIG (dark band) ---------------- */ #kig-sections .why-kig{ position:relative;overflow:hidden; --mx:65%;--my:40%; background:radial-gradient(500px circle at var(--mx) var(--my),var(--kig-glow),transparent 75%),var(--ink); color:var(--sand); padding:clamp(80px,9vw,140px) 0; border-top:1px solid var(--kig-hair-gold); } #kig-sections .why-kig:after{ content:"KIG";position:absolute;right:-.03em;bottom:-.22em; color:var(--kig-ghost); font:700 clamp(250px,38vw,590px)/1 var(--f-display); letter-spacing:-.08em;pointer-events:none; } #kig-sections .why-head{ position:relative;z-index:1;display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:clamp(36px,8vw,120px);align-items:end;margin-bottom:clamp(64px,8vw,110px); } #kig-sections .why-kig .eyebrow{color:var(--kig-gold);margin-bottom:22px;} #kig-sections .why-kig h2{ /* SHARED SECTION-HEADING CONTRACT: --fs-3xl / 700 / -.018em / .94, matching .rule-head h2 in index.html. Sizes here ran 43-101px across six sections with two weights and five letter-spacings; they are one step of the type scale now. Colour stays per-band (light type on the ink bands, ink on the cream ones) with a single gold accent line - that is the format, not a single colour. */ font-size:var(--fs-3xl);line-height:.94;letter-spacing:-.018em;margin:0; font-weight:700;color:var(--band-head); } /* Scroll-linked headline fill. --title-fill defaults to 100%, so with JS off (or reduced motion) the line is simply fully lit — no hidden state. */ #kig-sections .why-kig h2 span{ display:inline; background:linear-gradient(90deg,var(--kig-lit) var(--title-fill,100%),var(--kig-head-off) var(--title-fill,100%)); background-clip:text;-webkit-background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } #kig-sections .why-intro{ font-size:clamp(17px,1.5vw,21px);line-height:1.6; color:var(--sand-dim);max-width:520px;margin-bottom:4px; } /* ---- the drawn command line ---- */ #kig-sections .command{ position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--kig-hair); } #kig-sections .command:before{ content:"";position:absolute;left:0;top:-1px;height:2px; width:var(--draw,0%); background:var(--kig-gold);box-shadow:0 0 15px var(--kig-shadow-gold); transition:width .12s linear; } #kig-sections .reason{ position:relative;min-height:245px;padding:30px 28px 24px 0; border-right:1px solid var(--kig-hair-2); } #kig-sections .reason:not(:first-child){padding-left:28px;} #kig-sections .reason:last-child{border-right:0;} #kig-sections .reason .number{ display:block;font:600 14px/1 var(--f-display);color:var(--kig-gold); letter-spacing:.12em;margin-bottom:48px; } #kig-sections .reason h3{ font:600 clamp(25px,2.4vw,38px)/1.02 var(--f-display);letter-spacing:.01em; color:var(--band-head);margin-bottom:16px; } #kig-sections .reason p{ font-size:14px;line-height:1.55;color:var(--sand-dim);max-width:240px;margin:0; } /* the diamond node on the command line — its fill is the band ground */ #kig-sections .reason:after{ content:"";position:absolute;left:0;top:-6px;width:11px;height:11px; border:1px solid var(--kig-gold);background:var(--ink);transform:rotate(45deg); transition:background .4s,box-shadow .4s; } #kig-sections .reason:not(:first-child):after{left:28px;} /* staged entrance, driven by scroll position (sections.js -> draw()) */ #kig-sections .reason h3, #kig-sections .reason p, #kig-sections .reason .number{ transition:opacity .45s,transform .65s var(--ease-io),color .35s; } #kig-sections .reason.motion-wait h3, #kig-sections .reason.motion-wait p{opacity:.2;transform:translateY(20px);} #kig-sections .reason.motion-wait .number{color:var(--kig-num-wait);} #kig-sections .reason.is-current h3{color:var(--kig-lit);} #kig-sections .reason.is-current:after{background:var(--kig-lit);box-shadow:0 0 24px var(--kig-shadow-lit);} /* ---------------- 03 — WHO WE SERVE (light band) ---------------- background-options.css applied: the 68px square grid is gone, replaced by the soft corner wash the package proposed, on the site's cream. */ #kig-sections .who{ position:relative;overflow:hidden; background:radial-gradient(ellipse at 100% 0%,var(--kig-glow-who),transparent 55%),var(--paper-2); padding:clamp(80px,9vw,135px) 0; border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line); } #kig-sections .who-inner{position:relative;} #kig-sections .who-head{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,7vw,100px); align-items:end;margin-bottom:clamp(50px,6vw,80px); } #kig-sections .who .eyebrow{color:var(--gold-ink);margin-bottom:20px;} #kig-sections .who h2{ /* shared section-heading contract - see .why-kig h2 above */ font-size:var(--fs-3xl);line-height:.94;letter-spacing:-.018em;margin:0; font-weight:700;color:var(--dark-txt); } /* Brand yellow, matching the yellow accents in the bands above - the olive --gold-ink here was the odd one out. Readability comes from --yellow-edge rather than from darkening the fill; see the token note in index.html. */ #kig-sections .who h2 span{color:var(--gold-display);text-shadow:var(--yellow-edge);} #kig-sections .who-intro{ font-size:clamp(17px,1.4vw,20px);line-height:1.6; color:var(--mid-txt);max-width:510px;margin-bottom:3px; } /* ---- the nine-tile audience grid ---- */ #kig-sections .serve-grid{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--paper-line);border-left:1px solid var(--paper-line); background:var(--paper); } #kig-sections .serve-item{ position:relative;min-height:225px;padding:25px 26px; border-right:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line); overflow:hidden;background:var(--paper);isolation:isolate; --entry-x:50%;--entry-y:100%; } /* directional gold reveal — the circle opens from wherever the pointer crossed the edge (sections.js sets --entry-x/--entry-y) */ #kig-sections .serve-item:before{ content:"";position:absolute;inset:0;background:var(--kig-gold); clip-path:circle(0% at var(--entry-x) var(--entry-y)); transition:clip-path .65s cubic-bezier(.22,1,.36,1); } #kig-sections .serve-item:hover:before, #kig-sections .serve-item:focus-within:before, #kig-sections .serve-item.is-open:before{clip-path:circle(150% at var(--entry-x) var(--entry-y));} #kig-sections .serve-item>*{position:relative;z-index:1;} #kig-sections .serve-item .num{ display:flex;justify-content:space-between;align-items:center; font:600 13px/1 var(--f-display);color:var(--gold-ink);letter-spacing:.14em; transition:color .28s; } #kig-sections .serve-item .num:after{ content:"\2197";font:20px/1 var(--f-body);transition:transform .4s; } #kig-sections .serve-item h3{ font:600 clamp(24px,2.2vw,34px)/1.04 var(--f-display);color:var(--dark-txt); margin:30px 0 0;max-width:95%; transition:transform .5s cubic-bezier(.22,1,.36,1),color .28s; } #kig-sections .serve-item p{ font-size:13px;line-height:1.45;color:var(--mid-txt);margin:8px 0 0; opacity:0;transform:translateY(15px); transition:opacity .4s .1s,transform .5s .06s,color .28s; } #kig-sections .serve-item:hover h3, #kig-sections .serve-item:focus-within h3, #kig-sections .serve-item.is-open h3{transform:translateY(-14px);} #kig-sections .serve-item:hover p, #kig-sections .serve-item:focus-within p, #kig-sections .serve-item.is-open p{opacity:1;transform:none;} #kig-sections .serve-item:hover .num:after, #kig-sections .serve-item.is-open .num:after{transform:rotate(45deg);} /* Type sitting ON the gold fill. The package left it dark, which works while gold is #C9A227 but inverts in light theme, where --gold is held down to #6B5320 for AA. --gold-fg is the site's "type on a gold fill" token and is already ink/cream per theme: 10.2:1 dark, 6.7:1 light. */ #kig-sections .serve-item:hover h3,#kig-sections .serve-item:hover p,#kig-sections .serve-item:hover .num, #kig-sections .serve-item:focus-within h3,#kig-sections .serve-item:focus-within p,#kig-sections .serve-item:focus-within .num, #kig-sections .serve-item.is-open h3,#kig-sections .serve-item.is-open p,#kig-sections .serve-item.is-open .num{ color:var(--gold-fg); } #kig-sections .serve-item button{ position:absolute;inset:0;border:0;background:transparent;cursor:pointer; width:100%;height:100%;z-index:2; } /* Outside the tile, not inset: an inset ring would land on the gold fill, which is dark in light theme and light in dark theme, so it could not be one colour. On the band ground --gold-ink is 5.1:1 (dark theme token) / 6.0:1 (light) and never depends on the fill state. */ #kig-sections .serve-item button:focus-visible{ outline:3px solid var(--gold-ink);outline-offset:2px; } #kig-sections .serve-item button span{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); } #kig-sections .serve-footer{ display:flex;justify-content:space-between;gap:30px;align-items:center; margin-top:28px;color:var(--mid-txt);font-size:13px; } #kig-sections .serve-footer strong{ color:var(--gold-ink);font-size:12px;letter-spacing:.12em;text-transform:uppercase; } /* ---------------- entrances ---------------- Hidden states gated on html.anim, per the page's motion contract: with JS off or IntersectionObserver missing, everything is visible and in place. Nothing here changes layout — opacity and transform only. */ #kig-sections .reveal{transition:opacity .7s var(--ease),transform .7s cubic-bezier(.2,.8,.2,1);} html.anim #kig-sections .reveal{opacity:0;transform:translateY(24px);} html.anim #kig-sections .in .reveal{opacity:1;transform:none;} #kig-sections .delay{transition-delay:.12s;} html.anim #kig-sections .serve-item.motion-ready{opacity:0;transform:translateY(35px);} html.anim #kig-sections .serve-item.motion-ready.is-visible{ opacity:1;transform:none; transition:opacity .7s var(--tile-delay),transform .9s cubic-bezier(.22,1,.36,1) var(--tile-delay); } /* ---------------- responsive ---------------- */ @media (min-width:901px){ #kig-sections .why-head>div{position:relative;} #kig-sections .why-kig{padding-bottom:110px;} #kig-sections .why-head{margin-bottom:110px;} #kig-sections .reason{min-height:285px;} } @media (max-width:900px){ #kig-sections .why-head,#kig-sections .who-head{grid-template-columns:1fr;} #kig-sections .command{grid-template-columns:1fr 1fr;} #kig-sections .command:before{display:none;} #kig-sections .reason{ border-bottom:1px solid var(--kig-hair-2); border-top:1px solid var(--kig-hair-gold); } #kig-sections .reason:nth-child(2){border-right:0;} #kig-sections .reason.is-current{border-top-color:var(--kig-lit);} #kig-sections .serve-grid{grid-template-columns:1fr 1fr;} #kig-sections .serve-item{min-height:220px;} #kig-sections .who h2{font-size:74px;} } /* THE NINTH TILE. Diplomatic Missions is the ninth of nine, so in the two-column layout it is a lone :last-child on an odd index — it spans the full row instead of leaving a hole. Called out by the package as a deliberate fix; the whole expanded tile stays interactive because the