elements are the only
children of that grid cell — keep it that way in the renderer. Discipline title/desc get their own scale (see block 4 comment). */ .nc-page--about .nc-a-lead { border: 1px solid var(--card-border); border-radius: 18px; padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: 240px 1fr; gap: clamp(22px, 3vw, 36px); align-items: start; box-shadow: 0 18px 50px rgba(31,56,100,0.08); } .nc-page--about .nc-a-lead__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; display: block; } .nc-page--about .nc-a-lead__ph { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; background: linear-gradient(155deg, #E8EDF5, #F7F9FE); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; } .nc-page--about .nc-a-lead__initial { width: 72px; height: 72px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-head); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; } .nc-page--about .nc-a-lead__name { font-family: var(--f-head); font-weight: 800; font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -0.02em; margin: 0 0 4px; color: var(--ink); line-height: 1.15; } .nc-page--about .nc-a-lead__role { font-size: 14px; font-weight: 600; color: var(--slate); margin-bottom: 16px; } .nc-page--about .nc-a-lead__bio { font-size: 15.5px; line-height: 1.65; color: #3a4250; margin: 0 0 14px; } .nc-page--about .nc-a-lead__bio:last-of-type { margin-bottom: 20px; } .nc-page--about .nc-a-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; } .nc-page--about .nc-a-tag { font-size: 12.5px; font-weight: 600; color: var(--navy); background: var(--surface); padding: 6px 13px; border-radius: 999px; } .nc-page--about .nc-a-disc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(14px, 1.6vw, 20px); } .nc-page--about .nc-a-disc { border: 1px solid var(--card-border); border-radius: 14px; padding: 22px 24px; } .nc-page--about .nc-a-disc__tile { width: 38px; height: 38px; border-radius: 10px; background: var(--tile); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .nc-page--about .nc-a-disc__title { font-family: var(--f-head); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); line-height: 1.3; } .nc-page--about .nc-a-disc__desc { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; } /* ---- 7) Why NeuralChainAI: differentiator rows + tinted check on navy ---- Outer split reuses .nc-d-split (:53); the navy card reuses .nc-d-claim / __bg / __in / __h3 / __body / __points (:62-68). .nc-d-prow (:59) is a numbered flex row and .nc-d-cnavy (:69) is centre-aligned with a bare svg, hence both new variants; the `strong` rule mirrors .nc-d-crow__t strong (:80). .nc-a-diff CONSUMES its pal via the left accent, so the pal plumbed through about-data → NC_AW_Why → migrate script → nc_pal_vars() is not dead. .nc-a-facts is a second class on the SAME element as .nc-d-claim__points so the 12px design gap (prototype line 239) beats the doc library's 10px (:68) without redefining a .nc-d-* rule. */ .nc-page--about .nc-a-diffs { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .nc-page--about .nc-a-diff { background: #fff; border-left: 3px solid var(--c); border-radius: 12px; padding: 18px 20px; } .nc-page--about .nc-a-diff__t { font-size: 15px; line-height: 1.6; color: #3a4250; margin: 0; } .nc-page--about .nc-a-diff__t strong { color: var(--ink); } .nc-page--about .nc-a-facts { gap: 12px; } .nc-page--about .nc-a-fact { display: flex; align-items: flex-start; gap: 11px; } .nc-page--about .nc-a-fact__ic { width: 20px; height: 20px; border-radius: 50%; background: rgba(91,224,176,0.18); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; } .nc-page--about .nc-a-fact__t { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.9); } /* ---- 8) Final CTA: no new CSS — reuses .nc-d-cta / __bg / __inner / __h2 / __p / __btns (sections.css:113-118) with a single .nc-btn--white button. ---- */ /* ========================================================================== Responsive — ~768px (same breakpoint as site.css:151 / sections.css:147). The .nc-d-* grids this page borrows (hero, --3/--4, .nc-d-two + its sticky left column, .nc-d-split) already collapse in sections.css:148-153 — do not restate them here. Only the .nc-a-* rules need mobile work. ========================================================================== */ @media (max-width: 768px) { /* Mobile header: logo 52px (site.css:152) + .nc-header__inner 16px x2 + 1px border = 85; + 12 = 97, matching site.js headerOffset() on mobile. */ .nc-page--about .nc-a-anchor { scroll-margin-top: 97px; } .nc-page--about .nc-a-grid2 { grid-template-columns: 1fr; } .nc-page--about .nc-a-span2 { grid-column: auto; } .nc-page--about .nc-a-phase { grid-template-columns: 1fr; } .nc-page--about .nc-a-lead { grid-template-columns: 1fr; } /* Cap the headshot: once .nc-a-lead is 1fr, width:100% + aspect-ratio 1/1 would give a 390px viewport a ~354px square (a third of the fold) for the real 800x800 photo D2 ships. The prototype tolerated it only because that cell held a dashed placeholder. */ .nc-page--about .nc-a-lead__photo, .nc-page--about .nc-a-lead__ph { max-width: 220px; } .nc-page--about .nc-a-disc-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .nc-page--about .nc-a-pcard { transition: none !important; } } /* ========================================================================== APPENDIX — verification notes (audit trail; delete nothing without re-checking) Tokens: --navy, --navy-hover, --ink, --slate, --surface, --muted, --card-border, --f-head are all declared on body.nc-site at site.css:20-30. --c / --tint / --tile / --sh come from the inline nc_pal_vars() attr (_helpers.php:27-29), so .nc-a-stat, .nc-a-pcard, .nc-a-phase, .nc-a-ind, .nc-a-disc and .nc-a-diff each REQUIRE that style attr from the renderer. Zero .nc-d-* selectors appear in this file; site.css and sections.css are untouched, so $doc_ver stays '0.2.2' and the 35 live doc pages keep their cached CSS. Mobile un-sticking of the Who-We-Are left column is already free: sections.css:151 sets .nc-page--doc .nc-d-two__intro { position: static; } and the About page carries nc-page--doc. Restating it would be a forbidden .nc-d-* override. D9 honoured: no text-wrap declaration anywhere. The prototype's text-wrap: nowrap on three H2s ("About Us.dc.html":142, 167, 186) is simply never ported; .nc-h2 (site.css:62) has no text-wrap, so those headings wrap normally at 390px with zero CSS work. Prototype deltas deliberately accepted by reusing the .nc-d-* library (line refs are sections.css unless noted): HERO grid 1.15fr/0.85fr vs 1.1/0.9 (:14) · sub max-width 56ch vs 60ch (:19) · badge margin-bottom 26 vs 22 (:16) · ctarow gap 16 vs 12 (:20) · trust text 14.5px var(--muted) vs 15px #3a4250 (:79) · check puck offset 1px vs 2px (:78) S2/S3 icard padding clamp(24,2.6vw,32) vs clamp(20,2.4vw,26) (:31) · icon tile 46px / margin-bottom 20 vs 44px / 16 (:33) · card title 18px / margin 0 0 10 vs 17px / 0 0 8 (:34) · narrative #4a5568 lh 1.6 vs #555 lh 1.65 (:56) S4 number tile font-size 15px vs 14px (:48) S7 split gap clamp(32,5vw,64) vs clamp(32,5vw,60) (:53) · claim padding clamp(30,3.6vw,44) vs clamp(26,3.2vw,38) (:62) · claim__bg opacity 0.5 vs 0.4 (:63) · claim__h3 clamp(22,2.6vw,30) / margin 0 0 16 vs clamp(20,2.4vw,26) / 10 (:66) · claim__body rgba(255,255,255,0.85) vs 0.82 (:67) S8 cta__h2 clamp(32,4.5vw,56) lh 1.04 vs clamp(30,4.2vw,52) lh 1.05 (:116) · cta__p max-width 56ch vs 50ch (:117) ALL .nc-head margin-bottom clamp(32,4vw,52) vs clamp(28,3.5vw,44) (site.css:59) Deliberate departures from the prototype (not deltas — corrections): · .nc-a-lead__ph uses a solid var(--card-border) hairline, not the prototype's 1px dashed #c3cddc (line 190): dashed reads as a missing asset, and D2 makes this a legitimate no-photo fallback. · .nc-a-btn--ghost is padded 14px 26px, not the prototype's 15px 28px, so the 1px border lands it on the same 47px box height as the navy .nc-btn--lg beside it (site.css:71). · .nc-a-diff gains a 3px left accent so its pal is consumed rather than emitted dead; this shifts the row text 3px right of the prototype (line 228, plain white card). Owner-reversible in one line. ========================================================================== */