code wiki / _hdl_build / nx_brand_polish.nx
nx_brand_polish.nx source
↩ module page · 25 lines · 1968 B
1// nx_brand_polish.nx -- R7 visual polish: a token-driven MOTION language + MICRO-INTERACTIONS, emitted as pure CSS
2// (zero JS) and wired into the builder's <style>. Motion uses the brand's motion tokens (var(--nx-motion-fast/ease))
3// so it re-themes with the brand; hover/active/focus states give interaction feedback; focus-visible rings use the
4// accent token (accessible + on-brand). ACCESSIBILITY BY CONSTRUCTION: all movement is wrapped in
5// @media(prefers-reduced-motion:no-preference) so motion-sensitive users never get it. HONEST SCOPE: this is the
6// polish MECHANISM -- the subjective "world-class look" remains human-judged (R6 reports that axis as BEHIND).
7// Library, no main; emits to an fd with its own writer (no nx_web_builder dep -> no import cycle). 100% sovereign.
8// license_tier: ORIGINAL
9import "nx_syscalls.nx"
10
11func pol_w(fd: i64, s: *u8) -> i64 { var n: i64=0; while s[n]!=(0 as u8){n=n+1} sys_write(fd,s,n); return 0 }
12
13// emit the polish CSS block (motion + micro-interactions), reduced-motion-safe, token-driven, JS-free.
14func pol_emit(fd: i64) -> i64 {
15 pol_w(fd, "@media(prefers-reduced-motion:no-preference){\n" as *u8)
16 pol_w(fd, ".cta,.card,a{transition:transform var(--nx-motion-fast) var(--nx-motion-ease),box-shadow var(--nx-motion-fast) var(--nx-motion-ease)}\n" as *u8)
17 pol_w(fd, ".hero h1{animation:nx-rise var(--nx-motion-fast) var(--nx-motion-ease) both}\n" as *u8)
18 pol_w(fd, "@keyframes nx-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}\n" as *u8)
19 pol_w(fd, "}\n" as *u8)
20 pol_w(fd, ".cta:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.18)}\n" as *u8)
21 pol_w(fd, ".cta:active{transform:translateY(0)}\n" as *u8)
22 pol_w(fd, ".card:hover{box-shadow:0 6px 20px rgba(0,0,0,.10)}\n" as *u8)
23 pol_w(fd, "a:focus-visible,.cta:focus-visible,input:focus-visible{outline:3px solid var(--nx-color-accent);outline-offset:2px}\n" as *u8)
24 return 0
25}