/* ============================================================ NOID — record.css — SHARED deep-page stylesheet (record pages) Load order: style.css FIRST, record.css second. This file only ADDS the page grammar the film sheet doesn't carry; everything it can reuse from style.css (rd-prose / rd-pillar / rd-faq / rd-links / rd-ghost / .rds reveals / sec-overline / .btn / #site-foot / zh-CN stacks) it reuses untouched. PAGE CONTRACT (all nine deep pages): hero = .rec-hero > .rp-net (canvas) + .rp-word (ghost) + .wrap.rp-hero-inner > .rp-kick / .rp-title / .rp-lede record = #reading > .wrap.rd-sec.rds blocks (rd-* grammar) footer = #site-foot (v10 exact markup) Poses: ?pose=1 → record.js sets html.scrub (everything resolved, no handshake) — same class the film uses for stills. ============================================================ */ /* ---------- record ground ---------- */ .rec{background:var(--bg)} .rec #reading{background:var(--bg);border-top:0;padding:2vh 0 10vh} .rec #reading .rd-sec:first-child{margin-top:4vh} /* nav — live i18n.js serves mixed-case strings (Projects / About / Connect); the film chrome is uppercase mono. Transform, don't fork. */ .rec #nav .nav-links a{text-transform:uppercase} .rec .btn-connect{text-transform:uppercase} .rec #nav .nav-links a[aria-current="page"]{ color:var(--tx); border-bottom:1px solid rgba(242,86,35,.55); padding-bottom:3px; } .rec .btn,.rec .rd-l-name{text-transform:uppercase} /* ---------- hero — compact record cover ---------- */ .rec-hero{ position:relative;overflow:clip; min-height:72vh; display:flex;align-items:flex-end; padding:clamp(120px,18vh,190px) 0 clamp(48px,8vh,88px); } .rp-hero-inner{position:relative;z-index:1} /* the family handshake — record.js draws point layers ONCE; the assembly is pure compositor CSS (scatter-transform → identity, staggered), the glow blooms in, the whole thing fades by ~1.7s. No animation loop — it can never block or delay the content. */ .rp-net{ position:absolute;inset:0;z-index:0; pointer-events:none;overflow:hidden; } @keyframes rp-hs-in{from{transform:var(--rs,scale(3))}to{transform:none}} @keyframes rp-hs-op{0%{opacity:0}12%{opacity:1}72%{opacity:1}100%{opacity:0}} .rp-net-l{ position:absolute; transform-origin:50% 50%; will-change:transform,opacity; opacity:0; animation:rp-hs-in .95s var(--ease) both, rp-hs-op 1.7s linear both; } .rp-glow{ position:absolute; background:radial-gradient(closest-side, rgba(242,86,35,.11) 0%, rgba(222,222,222,.05) 42%, rgba(222,222,222,0) 72%); transform-origin:50% 50%; will-change:transform,opacity; opacity:0; animation:rp-hs-in 1.1s var(--ease) both, rp-hs-op 1.7s linear both; --rs:scale(1.6); } /* ghost word — the record page's env-type signature (film: NOID/TECH) */ .rp-word{ position:absolute;z-index:0; top:clamp(44px,8vh,100px);right:-.02em; font-family:var(--disp);font-weight:400; font-size:clamp(120px,17vw,264px); line-height:.9;letter-spacing:.03em; color:transparent;-webkit-text-stroke:1px #272727; white-space:nowrap;user-select:none;pointer-events:none; opacity:.9; } /* kicker — sec-overline voice, tick lineage (numbering lives in the dictionary string itself: "01 — Who We Are") */ .rp-kick{ font-family:var(--mono);font-size:10.5px;letter-spacing:.3em; color:var(--mut);text-transform:uppercase; display:flex;align-items:center;gap:14px; } .rp-kick::before{content:'';width:26px;height:1px;background:var(--acc);flex:none} /* display title — the film's h1 grammar at record scale */ .rp-title{ margin-top:30px; font-family:var(--disp);font-weight:400; font-size:clamp(48px,7vw,104px); line-height:.96;letter-spacing:.003em;color:var(--tx); } .rp-title .line{display:block;overflow:hidden;padding:.03em 0} .rp-title .w{display:inline-block;transform:translateY(115%)} /* hero lede — rd-prose carries the type; this sizes the opening */ .rp-lede{max-width:62ch;margin-top:36px} .rp-lede p:first-child{font-size:16.5px;color:var(--tx)} /* ---------- hero boot — title sequence in, resolved well under ~1.2s. Pure CSS (runs without JS); html.scrub / reduced-motion force-resolve. */ @keyframes rp-up{to{transform:translateY(0)}} @keyframes rp-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .rec-boot .rp-kick{opacity:0;animation:rp-rise .8s var(--ease) .12s forwards} .rec-boot .rp-title .line:nth-child(1) .w{animation:rp-up 1s var(--ease) .26s forwards} .rec-boot .rp-title .line:nth-child(2) .w{animation:rp-up 1s var(--ease) .38s forwards} .rec-boot .rp-title .line:nth-child(3) .w{animation:rp-up 1s var(--ease) .50s forwards} .rec-boot .rp-lede{opacity:0;animation:rp-rise .95s var(--ease) .60s forwards} html.scrub .rec-boot .rp-kick,html.scrub .rec-boot .rp-lede{opacity:1;animation:none} html.scrub .rp-title .w{transform:none;animation:none} html.scrub .rp-net{display:none} /* ---------- section display title (rp-h2) ---------- */ .rp-h2{ margin-top:26px; font-family:var(--disp);font-weight:400; font-size:clamp(34px,4.2vw,60px); line-height:.98;letter-spacing:.008em;color:var(--tx); } .rp-h2 .line{display:block} /* ---------- pillar variants ---------- */ /* three-up modifier for rd-pillars (style.css default is two-up) */ @media(min-width:900px){ .rd-pillars.rp-3{grid-template-columns:repeat(3,1fr)} } /* live dictionary serves mixed case (Raw/Bold); the record speaks caps */ .rec .rd-p-name{text-transform:uppercase} /* ---------- stats row — instrument strip ---------- */ .rp-stats{ margin-top:0; display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--hair);border:1px solid var(--hair); } .rp-stat{ background:rgba(28,28,28,.55); padding:clamp(24px,2.6vw,36px) clamp(20px,2.4vw,32px) clamp(20px,2.2vw,30px); display:flex;flex-direction:column;gap:14px; } .rp-stat-n{ font-family:var(--disp);font-weight:400; font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:.01em; color:var(--tx); display:flex;align-items:flex-end; min-height:clamp(40px,4.6vw,72px); } .rp-stat-n.accent{color:var(--acc)} .rp-stat-inf{font-size:clamp(22px,2.2vw,36px);letter-spacing:.04em} .rp-stat-l{ font-family:var(--mono);font-size:10px;letter-spacing:.24em; color:var(--mut);text-transform:uppercase; } /* ---------- CTA row ---------- */ .rp-cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap} /* ---------- generic blocks for the sibling pages ---------- */ /* two-col editorial block */ .rp-cols{ margin-top:40px; display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px); } /* timeline rows — mono date · display name · note */ .rp-tl{margin-top:44px;border-top:1px solid rgba(255,255,255,.08)} .rp-tl-row{ display:flex;align-items:baseline;gap:clamp(16px,2.6vw,36px); padding:18px 6px;border-bottom:1px solid rgba(255,255,255,.08); } .rp-tl-date{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--acc);min-width:9ch;flex:none} .rp-tl-name{font-family:var(--disp);font-weight:400;font-size:clamp(17px,1.9vw,23px);color:var(--tx);flex:none;min-width:min(24ch,34%)} .rp-tl-note{flex:1;font-size:13px;font-weight:300;color:var(--mut)} /* ---------- ?pose=flat — one tall still of the whole record: vh-driven air is compressed so every section fits a single frame (the record pages' cousin of the film's ?t= scrub poses) ---------- */ html.flat .rec-hero{min-height:0;padding:140px 0 60px} html.flat .rec #reading{padding:20px 0 70px} html.flat .rec #reading .rd-sec{margin-top:80px} html.flat .rec #reading .rd-sec:first-child{margin-top:40px} /* ---------- zh-CN — record-page classes follow the film's CJK easing (style.css owns the [lang^=zh] font stacks + rd-* easing) ---------- */ html[lang^="zh"] .rp-title{line-height:1.12;letter-spacing:.02em} html[lang^="zh"] .rp-h2{line-height:1.18;letter-spacing:.01em} html[lang^="zh"] .rp-kick{letter-spacing:.2em} html[lang^="zh"] .rp-stat-l{letter-spacing:.12em} html[lang^="zh"] .rp-lede p:first-child{line-height:2.0} html[lang^="zh"] .rp-tl-note{letter-spacing:.02em} /* ---------- mobile art direction — portrait cut ---------- */ @media(max-width:899px){ .rec-hero{min-height:0;padding:110px 0 44px} .rp-word{font-size:clamp(96px,30vw,150px);top:64px;right:-.1em} .rp-title{font-size:clamp(42px,12vw,60px)} .rp-lede{margin-top:26px} .rp-stats{grid-template-columns:1fr 1fr} .rp-stat-n{font-size:clamp(36px,9vw,48px);min-height:clamp(36px,9vw,48px)} .rp-stat-inf{font-size:clamp(20px,5.4vw,28px)} .rp-cols{grid-template-columns:1fr} .rp-tl-row{flex-wrap:wrap;row-gap:2px} .rp-tl-name{min-width:100%} } /* ---------- reduced motion — everything resolved, no handshake. (style.css kills all animation globally under reduce; these lift the pre-animation hidden states so nothing strands off-screen.) ---------- */ @media(prefers-reduced-motion:reduce){ .rp-net{display:none} .rec-boot .rp-kick,.rec-boot .rp-lede{opacity:1;animation:none} .rp-title .w{transform:none!important;animation:none} } /* ============================================================ ngent.html — page-specific additions (ngp- namespace) The page signature: the install command as a STATIC styled terminal line (a document, not a demo — the live demo is ngent.noid.gg). No typing animation, no rAF, nothing moving. ============================================================ */ .ngp-term{ margin-top:36px; max-width:640px; border:1px solid rgba(255,255,255,.13); background:rgba(14,14,14,.88); } .ngp-term-bar{ display:flex;align-items:center;gap:7px; padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.08); } .ngp-term-dot{width:8px;height:8px;border-radius:50%;background:#2c2c2c;flex:none} .ngp-term-dot.acc{background:rgba(242,86,35,.85)} .ngp-term-label{ margin-left:auto; font-family:var(--mono);font-size:9.5px;letter-spacing:.22em; color:var(--mut);text-transform:uppercase; } .ngp-term-line{ display:block; padding:16px 18px; font-family:var(--mono);font-size:13px;line-height:1.6; color:var(--tx); white-space:pre;overflow-x:auto; text-transform:none; /* the command is law — never uppercased */ } .ngp-term-line .ngp-ps{color:var(--acc);user-select:none} .ngp-caret{ display:inline-block;width:7px;height:.95em; margin-left:8px;vertical-align:text-bottom; background:rgba(242,86,35,.7); /* static block caret — no blink */ } /* inline code voice (`ngent setup`) inside record prose */ .rec .ngp-ic{ font-family:var(--mono);font-size:.85em; color:var(--tx); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:1px 6px; white-space:nowrap; } /* spec strip + sign-off (05 — Get NGENT) */ .ngp-spec{ margin-top:26px; font-family:var(--mono);font-size:10.5px;letter-spacing:.2em; color:var(--mut);text-transform:uppercase;line-height:2; } .ngp-sig{ margin-top:56px; font-family:var(--mono);font-size:10px;letter-spacing:.24em; color:var(--mut);text-transform:uppercase; display:flex;align-items:center;gap:14px; } .ngp-sig::before{content:'';width:26px;height:1px;background:var(--acc);flex:none} /* zh easing for the ngp voices (command line itself never translates) */ html[lang^="zh"] .ngp-spec{letter-spacing:.12em} html[lang^="zh"] .ngp-sig{letter-spacing:.14em} /* portrait cut */ @media(max-width:899px){ .ngp-term{margin-top:28px} .ngp-term-line{font-size:11.5px;padding:14px 14px} } /* ============================================================ noidchat-vs-signal.html — the VERSUS LEDGER (page-namespaced .vsg-) The comparison as a two-column rp-cols ledger: category rule · Signal cell | NoidChat cell · accent edge chips (both sides get them — the honesty is the signature). ============================================================ */ .vsg-ledger{margin-top:44px;border-top:1px solid rgba(255,255,255,.08)} .vsg-row{padding:26px 6px 30px;border-bottom:1px solid rgba(255,255,255,.08)} .vsg-cat{ font-family:var(--mono);font-size:10px;letter-spacing:.24em; color:var(--acc);text-transform:uppercase; display:flex;align-items:center;gap:12px; } .vsg-cat::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.05)} .vsg-row .rp-cols{margin-top:18px} .vsg-side{ font-family:var(--mono);font-size:9.5px;letter-spacing:.3em; color:var(--mut);text-transform:uppercase;margin-bottom:10px; } .vsg-cell-noid .vsg-side{color:var(--tx)} .vsg-txt{font-size:14px;font-weight:300;line-height:1.8;color:var(--tx2)} .vsg-edge{ display:inline-block;margin-top:12px;padding:3px 10px; border:1px solid rgba(242,86,35,.4); font-family:var(--mono);font-size:9px;letter-spacing:.22em; color:var(--acc);text-transform:uppercase; } .vsg-note{ margin-top:24px;max-width:80ch; font-family:var(--mono);font-size:10.5px;letter-spacing:.06em; line-height:1.9;color:var(--mut); } .vsg-note a{color:var(--tx);border-bottom:1px solid rgba(242,86,35,.55); transition:color .35s var(--ease),border-color .35s var(--ease)} .vsg-note a:hover{color:var(--acc);border-color:var(--acc)} /* mono sub-heads for the three-differences essay */ .vsg-sub{ margin:42px 0 0; font-family:var(--mono);font-size:11.5px;font-weight:400; letter-spacing:.22em;color:var(--tx);text-transform:uppercase; display:flex;align-items:center;gap:12px; } .vsg-sub::before{content:'';width:14px;height:1px;background:var(--acc);flex:none} .vsg-sub+.rd-prose{margin-top:16px} /* choose lists inside rd-pillars */ .vsg-list{list-style:none;margin:0;padding:0} .vsg-list li{ position:relative;padding:10px 0 10px 22px; font-size:13.5px;font-weight:300;line-height:1.7;color:var(--tx2); border-bottom:1px solid rgba(255,255,255,.06); } .vsg-list li:last-child{border-bottom:none;padding-bottom:2px} .vsg-list li::before{ content:'→';position:absolute;left:0;top:10px; font-family:var(--mono);font-size:11px;color:var(--acc); } .vsg-pillar-noid .rd-p-name{color:var(--acc)} /* zh easing */ html[lang^="zh"] .vsg-cat{letter-spacing:.14em} html[lang^="zh"] .vsg-side{letter-spacing:.16em} html[lang^="zh"] .vsg-txt{line-height:2.0} html[lang^="zh"] .vsg-sub{letter-spacing:.12em} /* mobile — cells stack (rp-cols already 1fr); tighten the air */ @media(max-width:899px){ .vsg-row{padding:22px 4px 24px} .vsg-row .rp-cols{gap:22px} } /* print — the ledger on paper */ @media print{ .vsg-cat,.vsg-side,.vsg-txt,.vsg-note,.vsg-sub,.vsg-list li{color:#111!important} .vsg-edge{color:#111!important;border-color:#999} } /* ============================================================ learn-post-quantum-encryption.html — page-specific additions (lq-*). ADDITIVE ONLY — nothing above this block changes. ============================================================ */ /* ---------- data tables — hairline instrument grid ---------- */ .lq-tablewrap{ margin-top:40px;border:1px solid var(--hair); overflow-x:auto;-webkit-overflow-scrolling:touch; } .lq-table{width:100%;border-collapse:collapse;min-width:620px} .lq-table th{ font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--acc);text-align:left; padding:14px 18px;background:rgba(28,28,28,.55); border-bottom:1px solid var(--hair);white-space:nowrap; } .lq-table td{ padding:14px 18px;border-bottom:1px solid var(--hair); font-size:13.5px;font-weight:300;line-height:1.7;color:var(--tx2); vertical-align:top; } .lq-table tr:last-child td{border-bottom:none} .lq-table td:first-child{ font-family:var(--mono);font-size:11px;letter-spacing:.08em; color:var(--tx);white-space:nowrap; } /* ---------- checklist — pillar chrome at question scale ---------- */ .rec .lq-check .rd-p-name{ text-transform:none; font-family:var(--body);font-weight:500; font-size:clamp(16px,1.5vw,19px);line-height:1.4;letter-spacing:.005em; margin-bottom:12px; } /* ---------- the lattice — the film's lattice beat, one still ---------- */ .lq-lattice{margin-top:44px;border:1px solid var(--hair)} .lq-lat-panels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair)} .lq-lat-panel{background:rgba(28,28,28,.45);padding:22px 22px 18px} .lq-lat-svg{display:block;width:100%;height:auto} .lq-lat-label{ margin-top:16px; font-family:var(--mono);font-size:9.5px;letter-spacing:.22em; color:var(--mut);text-transform:uppercase; display:flex;align-items:center;gap:10px; } .lq-lat-label::before{content:'';width:18px;height:1px;background:var(--acc);flex:none} .lq-lat-cap{ display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:12px 18px;border-top:1px solid var(--hair); font-family:var(--mono);font-size:9.5px;letter-spacing:.22em; color:var(--mut);text-transform:uppercase; } .lq-lat-cap .accent{color:var(--acc)} @media(max-width:899px){ .lq-lat-panels{grid-template-columns:1fr} .lq-lat-panel{padding:18px 16px 14px} } html[lang^="zh"] .lq-lat-label,html[lang^="zh"] .lq-lat-cap{letter-spacing:.12em} /* ============================================================ noidchat-no-phone-number.html — page-specific (npn-) grammar. Signature: the "what we never ask for" denial rows — the interrogation register, restrained. Struck items, orange scalpel. ============================================================ */ .npn-deny-h{ margin-top:44px; font-family:var(--mono);font-size:10.5px;letter-spacing:.3em; color:var(--mut);text-transform:uppercase; } .npn-deny{ list-style:none;margin:14px 0 0;padding:0; border-top:1px solid rgba(255,255,255,.08); } .npn-deny-row{ display:flex;align-items:baseline;gap:clamp(16px,2.6vw,36px); padding:18px 6px;border-bottom:1px solid rgba(255,255,255,.08); } .npn-deny-num{ font-family:var(--mono);font-size:10px;letter-spacing:.2em; color:var(--acc);min-width:6ch;flex:none; } .npn-deny-item{ font-family:var(--disp);font-weight:400; font-size:clamp(18px,2.1vw,25px);line-height:1.15; color:var(--tx2);text-transform:uppercase;letter-spacing:.01em; flex:none;min-width:min(22ch,36%); } .npn-deny-item s{ text-decoration:line-through; text-decoration-color:rgba(242,86,35,.8); text-decoration-thickness:1.5px; } .npn-deny-note{flex:1;font-size:13px;font-weight:300;color:var(--mut)} /* comparison rows — rp-tl reused; the home team reads accent */ .npn-hi .rp-tl-name{color:var(--acc)} /* mono footnote under the comparison */ .npn-note{ margin-top:16px; font-family:var(--mono);font-size:10px;letter-spacing:.22em; color:var(--mut);text-transform:uppercase; } /* the fairness aside — white-edged, restrained */ .npn-fair{ margin-top:44px;max-width:68ch; background:rgba(28,28,28,.55); border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--tx); padding:26px 30px 28px; } .npn-fair h3{ font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.26em;color:var(--tx);text-transform:uppercase; margin-bottom:4px; } .npn-fair .rd-prose{margin-top:14px} .npn-fair .rd-prose p{font-size:14px} @media(max-width:899px){ .npn-deny-row{flex-wrap:wrap;row-gap:2px} .npn-deny-item{min-width:100%} .npn-fair{padding:22px 20px} } html[lang^="zh"] .npn-deny-h{letter-spacing:.2em} html[lang^="zh"] .npn-note{letter-spacing:.12em} /* ============================================================ ADDITIVE — noidchat-security.html (spec table · × list · fair callout · pillar-desc links). rp-spec / rp-xlist / rp-fair are record grammar the sibling pages (vs-signal, no-phone-number) may reuse; nothing above this line was touched. ============================================================ */ /* spec table — instrument-strip voice, film hairlines */ .rp-spec-wrap{margin-top:44px;overflow-x:auto;border:1px solid var(--hair)} .rp-spec{width:100%;min-width:660px;border-collapse:collapse;font-size:13.5px} .rp-spec th{ font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;text-align:left;color:var(--acc); background:rgba(28,28,28,.55); padding:16px 18px;border-bottom:1px solid var(--hair);white-space:nowrap; } .rp-spec td{ padding:15px 18px;color:var(--tx2);font-weight:300;line-height:1.6; border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top; } .rp-spec tr:last-child td{border-bottom:none} .rp-spec td:first-child{ font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--mut);min-width:150px;padding-top:17px; } .rp-spec .yes{color:var(--acc)} .rp-spec .no{color:var(--dim)} /* mono footnote under an instrument */ .rp-note{ margin-top:18px;max-width:74ch; font-family:var(--mono);font-size:11px;line-height:1.8;color:var(--mut); } .rp-note a{ color:var(--tx);border-bottom:1px solid rgba(242,86,35,.55); transition:color .35s var(--ease),border-color .35s var(--ease); } .rp-note a:hover{color:var(--acc);border-color:var(--acc)} /* × list — hard-limit rows, hairline ledger */ .rp-xlist{margin-top:28px;max-width:72ch;list-style:none;padding:0} .rp-xlist li{ position:relative;padding:16px 6px 16px 34px; border-bottom:1px solid rgba(255,255,255,.08); font-size:14.5px;font-weight:300;line-height:1.85;color:var(--tx2); } .rp-xlist li:first-child{border-top:1px solid rgba(255,255,255,.08)} .rp-xlist li::before{ content:'×';position:absolute;left:4px;top:15px; font-family:var(--mono);font-size:13px;color:var(--acc); } .rp-xlist strong{color:var(--tx);font-weight:500} /* fair-shake callout — accent hairline, editorial aside */ .rp-fair{ margin-top:40px;max-width:72ch; border-left:2px solid var(--acc); background:rgba(28,28,28,.55); padding:26px 30px 24px; } .rp-fair h3{ font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--tx);margin:0 0 14px; } .rp-fair p{font-size:14px;font-weight:300;line-height:1.9;color:var(--tx2);margin:0} .rp-fair p+p{margin-top:14px} /* links inside pillar descs / × list / fair box — rd-prose lineage */ .rp-fair a,.rp-xlist a,.rec .rd-p-desc a{ color:var(--tx);border-bottom:1px solid rgba(242,86,35,.55); transition:color .35s var(--ease),border-color .35s var(--ease); } .rp-fair a:hover,.rp-xlist a:hover,.rec .rd-p-desc a:hover{color:var(--acc);border-color:var(--acc)} /* zh easing for the additive grammar */ html[lang^="zh"] .rp-xlist li,html[lang^="zh"] .rp-fair p{line-height:2.0} /* mobile cut */ @media(max-width:899px){ .rp-fair{padding:20px 20px 18px} .rp-spec-wrap{margin-top:34px} } /* ============================================================ ngent-self-hosted-ai-agent — page-specific additions (sh-). Additive only. Signature: the cloud-vs-resident contrast as two rd-pillar-grammar panes — THEIR CLOUD / YOUR MACHINE. ============================================================ */ /* links inside pillar descriptions — rd-prose link idiom */ .rec .rd-p-desc a{ color:var(--tx);border-bottom:1px solid rgba(242,86,35,.55); transition:color .35s var(--ease),border-color .35s var(--ease); } .rec .rd-p-desc a:hover{color:var(--acc);border-color:var(--acc)} /* ---------- the two panes ---------- */ .sh-vs{ margin-top:44px; display:grid;grid-template-columns:1fr 1fr;gap:1px; background:var(--hair);border:1px solid var(--hair); } .sh-pane{background:rgba(28,28,28,.55);padding:30px 32px 32px;position:relative} .sh-pane-num{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--mut);margin-bottom:14px} .sh-pane-name{ font-family:var(--disp);font-weight:400;text-transform:uppercase; font-size:clamp(26px,2.5vw,34px);line-height:1;letter-spacing:.015em; color:var(--mut);margin-bottom:10px; } .sh-pane-tag{ font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase; color:var(--dim);margin-bottom:22px; } .sh-dl{margin:0;border-top:1px solid rgba(255,255,255,.08)} .sh-row{padding:13px 0 15px;border-bottom:1px solid rgba(255,255,255,.08)} .sh-row dt{ font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--dim);margin-bottom:7px; } .sh-row dd{margin:0;font-size:13.5px;font-weight:300;line-height:1.75;color:var(--tx2)} .sh-cloud .sh-row dd{color:var(--mut)} /* YOUR MACHINE — the lit pane (orange corner, accent labels) */ .sh-yours{background:rgba(30,30,30,.72)} .sh-yours::before{ content:'';position:absolute;top:-1px;left:-1px;width:14px;height:14px; border-top:1px solid rgba(242,86,35,.85);border-left:1px solid rgba(242,86,35,.85); } .sh-yours .sh-pane-num{color:var(--acc)} .sh-yours .sh-pane-name{color:var(--tx)} .sh-yours .sh-row dt{color:var(--acc)} /* ---------- "choose a cloud agent if…" — the fair box ---------- */ .sh-fair{ margin-top:44px;padding:26px 28px; border:1px solid rgba(242,86,35,.35);border-left:2px solid var(--acc); background:rgba(28,28,28,.35); } .sh-fair h3{ font-family:var(--mono);font-weight:400;font-size:10.5px; letter-spacing:.26em;text-transform:uppercase; color:var(--acc);margin-bottom:18px; } .sh-fair ul{list-style:none;margin:0;padding:0} .sh-fair li{ position:relative;padding-left:24px;margin-bottom:13px; font-size:14px;font-weight:300;line-height:1.8;color:var(--tx2); } .sh-fair li:last-child{margin-bottom:0} .sh-fair li::before{ content:'+';position:absolute;left:0;top:0; font-family:var(--mono);color:var(--acc); } .sh-fair strong{color:var(--tx);font-weight:500} /* ---------- install command ---------- */ .sh-code{ margin-top:40px;padding:20px 24px; font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--tx); background:rgba(28,28,28,.55); border:1px solid var(--hair);border-left:2px solid var(--acc); overflow-x:auto;white-space:pre; } .sh-code .c{color:var(--mut)} /* CTA microtype note */ .sh-note{ margin-top:22px; font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--mut); } /* zh — CJK easing for the sh- blocks */ html[lang^="zh"] .sh-row dd{line-height:2.0;letter-spacing:.02em} html[lang^="zh"] .sh-fair li{line-height:2.0} html[lang^="zh"] .sh-pane-tag{letter-spacing:.14em} /* mobile — panes stack, command shrinks */ @media(max-width:899px){ .sh-vs{grid-template-columns:1fr} .sh-pane{padding:24px 22px 24px} .sh-code{font-size:11px;padding:16px 18px} } /* ============================================================ projects.html — THE INDEX record (prj- namespace). ADDITIVE ONLY. Signature: every project is a record ROW carrying a STATUS CHIP. Only two states exist on this record because only two states are published: LIVE and IN DEVELOPMENT. The chip repeats at each project's section head, so status is never more than a glance away. ============================================================ */ /* three-up instrument strip — 04 PROJECTS · 03 LIVE · 01 IN DEVELOPMENT */ @media(min-width:900px){ .rp-stats.prj-stats-3{grid-template-columns:repeat(3,1fr)} } /* ---------- the status chip — the page's one new primitive ---------- */ .prj-chip{ display:inline-flex;align-items:center;gap:7px;flex:none; padding:5px 11px 4px; border:1px solid rgba(255,255,255,.16); font-family:var(--mono);font-size:9px;letter-spacing:.22em; text-transform:uppercase;color:var(--mut); white-space:nowrap; } .prj-chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--decor);flex:none} .prj-chip.live{color:var(--acc);border-color:rgba(242,86,35,.45);background:rgba(242,86,35,.05)} .prj-chip.live::before{background:var(--acc)} .prj-chip.dev{color:var(--tx2);border-color:rgba(255,255,255,.22)} .prj-chip.dev::before{background:transparent;box-shadow:inset 0 0 0 1px var(--tx2)} /* secondary tag — the category, quieter than the status */ .prj-tag{ display:inline-block;padding:5px 11px 4px; border:1px solid rgba(255,255,255,.09); font-family:var(--mono);font-size:9px;letter-spacing:.22em; text-transform:uppercase;color:var(--dim);white-space:nowrap; } /* ---------- 02 · THE INDEX — rd-links + numeral + chip ---------- */ .prj-index a{align-items:center;padding:20px 6px;flex-wrap:nowrap} .prj-l-num{ font-family:var(--mono);font-size:10px;letter-spacing:.2em; color:var(--acc);min-width:6ch;flex:none; } .prj-index .rd-l-name{min-width:min(16ch,20%)} .prj-index .rd-l-note{min-width:0} .prj-index a:hover .prj-chip{border-color:rgba(242,86,35,.55)} /* ---------- project section head — display title + chips ---------- */ .prj-head{display:flex;align-items:flex-end;gap:clamp(14px,2.2vw,26px);flex-wrap:wrap} .prj-head .rp-h2{flex:none} .prj-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:9px} /* ---------- the status meta line (dictionary string carries an with an inline color:var(--accent) — a token the film sheet doesn't define — so the link voice is re-asserted here with !important) ---------- */ .prj-meta{ margin-top:26px; font-family:var(--mono);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--mut); } .prj-meta a{ color:var(--tx)!important;text-decoration:none!important; border-bottom:1px solid rgba(242,86,35,.55); transition:color .35s var(--ease),border-color .35s var(--ease); } .prj-meta a:hover{color:var(--acc)!important;border-color:var(--acc)} /* ---------- zh easing ---------- */ html[lang^="zh"] .prj-chip,html[lang^="zh"] .prj-tag{letter-spacing:.12em} html[lang^="zh"] .prj-meta{letter-spacing:.06em} html[lang^="zh"] .prj-index .rd-l-note{line-height:1.9} /* ---------- portrait cut — the index row folds, note takes its own line ---------- */ @media(max-width:899px){ .prj-index a{flex-wrap:wrap;row-gap:9px;padding:16px 4px} .prj-index .rd-l-name{min-width:auto} .prj-index .rd-l-arr{margin-left:auto;order:4} .prj-index .rd-l-note{flex:1 1 100%;order:5} .prj-chips{padding-bottom:2px} .prj-meta{letter-spacing:.1em;line-height:1.9} /* the strip is THREE — the film's 2-up mobile grid would strand an empty fourth cell, so the last stat takes the full row instead */ .rp-stats.prj-stats-3 .rp-stat:last-child{grid-column:1 / -1} } /* ---------- print — chips survive on paper as hairline boxes ---------- */ @media print{ .prj-chip,.prj-tag,.prj-l-num,.prj-meta,.prj-meta a{color:#111!important;border-color:#999} .prj-chip{background:none!important} } /* ---------- print — the record on paper ---------- */ @media print{ .rec,.rec #reading,#site-foot{background:#fff!important;color:#111} #nav,.rp-net,.rp-word,.rd-ghost,#grain,.nav-dot,.btn-connect,.lang-selector{display:none!important} .rds{opacity:1!important;transform:none!important;clip-path:none!important} .rp-title .w{transform:none!important} .rec-boot .rp-kick,.rec-boot .rp-lede{opacity:1!important;animation:none!important} .rp-title,.rp-h2,.rd-p-name,.rp-stat-n,.rd-prose p,.rd-prose strong,.rp-kick, .rp-stat-l,.rd-p-desc,.rd-l-note,.rd-l-name,.f-note,.f-h,.f-col a,.f-base{color:#111!important} .rd-pillar,.rp-stat{background:#fff;border:1px solid #ccc} .rec-hero{min-height:0;padding:40px 0} a[href]{text-decoration:underline} }