/* ============================================================================= Airside Crew — app mockup tokens ----------------------------------------------------------------------------- The phone and dashboard pictures on the site are reproduced from apps/site/design/App*.dc.html with their per-element inline styles intact, so they cannot drift from the approved designs. What those inline styles cannot carry is the theme: the design canvas substituted `{{c.bg}}` before rendering, and a static page has to resolve it in the browser instead. So every `{{c.x}}` in the designs became `var(--m-x)`, and the two theme objects from App*.dc.html's renderVals() are the two blocks below. An inline `style` attribute does resolve var(); an SVG presentation attribute such as `fill="…"` does not, so those became `style="fill: var(--m-…)"`. Day is the default; night follows the device unless the visitor chose day, and follows the switch whenever they chose. Same rule as site.css. ========================================================================== */ :root { --m-bg: #eef2f8; --m-surface: #ffffff; --m-ink: #02113a; --m-muted: #3d4b68; --m-line: #d3dae6; --m-brand: #0461f8; --m-on-brand: #ffffff; --m-chip: #dde5f3; --m-card-tint: #fff3d6; --m-card-ink: #1f1300; --m-card-muted: #6b5320; --m-card-line: #e8c77a; --m-card-border: #e59a00; --m-map-bg: #edeff2; --m-apron: #e2e5ea; --m-bldg: #d5d9e0; --m-twy: #ffffff; --m-twy-edge: #c9ced8; --m-center: #e2b93b; --m-rwy: #7b8291; --m-haul: #bca27a; --m-label: #5b6475; --m-other: #7a8599; --m-stopped: #2c3a5c; --m-plane: #c2410c; --m-ring: #0461f8; --m-compass: #d92d20; --m-ptt: #02113a; --m-ptt-ink: #ffffff; --m-btn-line: #8e9cb8; --m-nav-bg: rgba(255, 255, 255, 0.94); --m-nav-line: rgba(2, 17, 58, 0.1); --m-nav-shadow: 0 6px 24px rgba(2, 17, 58, 0.16); --m-nav-sel: #e3ecff; --m-nav-sel-ink: #0452d0; --m-badge: #e59a00; --m-badge-ink: #1f1300; --m-glass: rgba(255, 255, 255, 0.9); --m-glass-line: rgba(2, 17, 58, 0.12); --m-shadow: 0 2px 12px rgba(2, 17, 58, 0.18); --m-sel: #0461f8; --m-sel-ink: #ffffff; --m-talk-card: #0461f8; --m-talk-card-ink: #ffffff; /* Dashboard only. */ --m-side: #02113a; --m-side-ink: #e6ecf8; --m-side-muted: #a7b6d3; --m-side-sel: rgba(4, 97, 248, 0.4); /* The red and amber below are duplicated in site.css as `--red-*` and `--amber-*`, on purpose. site.css owns those copies and they track the page chrome; these track App*.dc.html, and keeping them separate lets either set change without dragging the other with it. Match the mockups to the design files when you change these, not to site.css. */ --m-amber-bg: #fff3d6; --m-amber-ink: #5c3b00; --m-amber-line: #e59a00; --m-red-bg: #fde7e5; --m-red-ink: #8a1a10; --m-red-line: #d9534a; --m-blue-bg: #e3ecff; --m-blue-ink: #0442b0; } /* The night values, written once and applied by both selectors below. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) { --m-bg: #030a1c; --m-surface: #0e1b38; --m-ink: #e6ecf8; --m-muted: #a7b6d3; --m-line: #22335e; --m-brand: #5b9bff; --m-on-brand: #02113a; --m-chip: #13244a; --m-card-tint: #241a06; --m-card-ink: #fcebc7; --m-card-muted: #d9be86; --m-card-line: #5a4416; --m-card-border: #e39b22; --m-map-bg: #0a1226; --m-apron: #101b33; --m-bldg: #18233d; --m-twy: #2a3858; --m-twy-edge: #1c2945; --m-center: #9c7f2a; --m-rwy: #3a4766; --m-haul: #6b5b3e; --m-label: #93a2c2; --m-other: #6f7fa3; --m-stopped: #b9c6e2; --m-plane: #ff8a4c; --m-ring: #5b9bff; --m-compass: #ff6b5e; --m-ptt: #1e5bd8; --m-ptt-ink: #ffffff; --m-btn-line: #3a5085; --m-nav-bg: rgba(14, 27, 56, 0.94); --m-nav-line: rgba(230, 236, 248, 0.14); --m-nav-shadow: 0 6px 24px rgba(0, 0, 0, 0.6); --m-nav-sel: #1b2e5c; --m-nav-sel-ink: #9cc2ff; --m-badge: #e39b22; --m-badge-ink: #1a0f00; --m-glass: rgba(14, 27, 56, 0.9); --m-glass-line: rgba(230, 236, 248, 0.16); --m-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); --m-sel: #5b9bff; --m-sel-ink: #02113a; --m-talk-card: #1e5bd8; --m-talk-card-ink: #ffffff; --m-side: #020714; --m-side-sel: rgba(91, 155, 255, 0.28); --m-amber-bg: #2a1f08; --m-amber-ink: #f5c56b; --m-amber-line: #e39b22; --m-red-bg: #3a1210; --m-red-ink: #ffb3a8; --m-red-line: #e0614f; --m-blue-bg: #13244a; --m-blue-ink: #9cc2ff; } } :root[data-theme="night"] { --m-bg: #030a1c; --m-surface: #0e1b38; --m-ink: #e6ecf8; --m-muted: #a7b6d3; --m-line: #22335e; --m-brand: #5b9bff; --m-on-brand: #02113a; --m-chip: #13244a; --m-card-tint: #241a06; --m-card-ink: #fcebc7; --m-card-muted: #d9be86; --m-card-line: #5a4416; --m-card-border: #e39b22; --m-map-bg: #0a1226; --m-apron: #101b33; --m-bldg: #18233d; --m-twy: #2a3858; --m-twy-edge: #1c2945; --m-center: #9c7f2a; --m-rwy: #3a4766; --m-haul: #6b5b3e; --m-label: #93a2c2; --m-other: #6f7fa3; --m-stopped: #b9c6e2; --m-plane: #ff8a4c; --m-ring: #5b9bff; --m-compass: #ff6b5e; --m-ptt: #1e5bd8; --m-ptt-ink: #ffffff; --m-btn-line: #3a5085; --m-nav-bg: rgba(14, 27, 56, 0.94); --m-nav-line: rgba(230, 236, 248, 0.14); --m-nav-shadow: 0 6px 24px rgba(0, 0, 0, 0.6); --m-nav-sel: #1b2e5c; --m-nav-sel-ink: #9cc2ff; --m-badge: #e39b22; --m-badge-ink: #1a0f00; --m-glass: rgba(14, 27, 56, 0.9); --m-glass-line: rgba(230, 236, 248, 0.16); --m-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); --m-sel: #5b9bff; --m-sel-ink: #02113a; --m-talk-card: #1e5bd8; --m-talk-card-ink: #ffffff; --m-side: #020714; --m-side-sel: rgba(91, 155, 255, 0.28); --m-amber-bg: #2a1f08; --m-amber-ink: #f5c56b; --m-amber-line: #e39b22; --m-red-bg: #3a1210; --m-red-ink: #ffb3a8; --m-red-line: #e0614f; --m-blue-bg: #13244a; --m-blue-ink: #9cc2ff; } /* The small Airside Crew mark inside a mockup, one file per theme. */ .m-mark--night, :root[data-theme="night"] .m-mark--day { display: none; } :root[data-theme="night"] .m-mark--night { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .m-mark--day { display: none; } :root:not([data-theme="day"]) .m-mark--night { display: inline; } } /* The approaching aircraft inside the depicted map. It is STILL, and the `.m-ac-moving` class on it in the pages is now only a hook with nothing attached to it. ----------------------------------------------------------------------------- It used to carry `animation: m-taxi 8s linear infinite`, written before docs/ui-rules.md had a Motion section. That section now says a depicted app screen "plays once when it is scrolled into view, then settles. Not a loop", and this was a loop, so the two could not both stand. Removed rather than argued down, for three reasons that are not about taste: 1. WCAG 2.2.2 Pause, Stop, Hide, at LEVEL A, fails it on its own terms: moving information that starts automatically, lasts more than five seconds and is presented in parallel with other content needs a way to pause, stop or hide it unless the movement is essential. It started automatically, it never stopped, it sat beside the copy that explains the screen, there was no control for it, and a still picture of a flagger's screen conveys the product completely — so the movement was not essential. (The reduced-motion query in site.css covered the visitors who had asked; this is about everyone else.) 2. It made the picture claim more than the product can. The map it moved inside is a mockup, labelled "Design mockup" on the page, drawn from a design file — and a marker gliding in it for ever reads as a live feed of real positions. The HCI skill's rule is that visual confidence must match data confidence; the buyers who matter most are the ones who would check. 3. The motion was spent where nobody was looking. Three of these sit on the Home page and six on Screens, all of them below the fold at both widths, all looping from the moment the page loaded. The visitor scrolls down into a cycle already in progress. Also removed: the `@keyframes m-taxi` block. The next task animates these screens deliberately, once, on arrival, and those keyframes were built for a loop — they fade the aircraft back out at 100% so the cycle can restart, which is the opposite of settling. Keeping them would have invited reuse of the wrong shape. The hook to start from is the `.reveal--shown` class scripts/site.js puts on an arriving section (site.css section 24). src/html/motion.test.ts now fails any animation in either stylesheet that repeats for ever, asserted over the declaration rather than over this file's history, because a test naming m-taxi would not catch the next one. */ /* ============================================================================= Dashboard mockup: one markup, two shapes ----------------------------------------------------------------------------- AppDashboard.dc.html takes a `mobile` prop and renders a different tree for each. Here there is one tree and a container query, because the two shapes are picked by the frame's own width (1280 px in the wide frame, 390 px in the phone frame), not by the browser window. ========================================================================== */ .m-dash { position: relative; width: 100%; display: flex; background: var(--m-bg); color: var(--m-ink); font-family: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif; /* Wide shape (inside the 1280 px frame). */ min-height: 900px; flex-direction: row; } .m-dash__main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; } .m-dash__h1 { margin: 0; font-size: 32px; font-weight: 800; } .m-dash__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .m-dash__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 1.2fr); gap: 6px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--m-line); } .m-dash__head { padding: 10px 16px; border-bottom: 1px solid var(--m-line); font-size: 12px; font-weight: 800; color: var(--m-muted); letter-spacing: 0.05em; text-transform: uppercase; } .m-dash__mobile-only { display: none; } /* These two are classes rather than inline styles precisely so the container query below can switch them off: an inline `style` attribute beats any stylesheet rule, and both of these have to disappear in the other shape. */ .m-dash__side { display: flex; } .m-dash__nav { display: none; position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 5px; border-radius: 24px; border: 1px solid var(--m-nav-line); background: var(--m-nav-bg); box-shadow: var(--m-nav-shadow); } /* Phone shape (the 390 px frame). */ @container (max-width: 700px) { .m-dash { min-height: 844px; height: 844px; overflow: hidden; flex-direction: column; } .m-dash__side { display: none; } .m-dash__mobile-only { display: flex; } .m-dash__main { padding: 18px 16px 96px 16px; } .m-dash__h1 { font-size: 28px; } .m-dash__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-dash__row, .m-dash__head { grid-template-columns: minmax(0, 1fr); } .m-dash__head { display: none; } .m-dash__nav { display: grid; } } /* ============================================================================= The Home hero's phone — apps/site/design/NewFlagger.dc.html ============================================================================= The older App*.dc.html mockups above keep the designs' per-element inline styles. This one does NOT: Dylan's instruction for the Oct 27 rebuild was no inline script tags "or stuff like that", and apps/site/README.md records the conversion. Every `{{c.x}}` in NewFlagger.dc.html became `var(--n-x)`, and the two theme objects from its `_rv()` are the two blocks below. `--n-*` and not `--m-*`: the two palettes are NOT the same. NewFlagger's night surface is #0E1B38 where App*'s is #0B1633, its night brand is #5B9BFF where App*'s is #0461F8, and its line, plane and stopped colours all differ too. The Screens page still draws the App* mockups, so one set may not be edited into the other until that page converts. SVG presentation attributes (`fill="…"`, `stroke="…"`) do not resolve `var()`, so every themed fill and stroke is a class here instead: `nf-f-*` sets a fill, `nf-s-*` sets a stroke. WHAT IS DELIBERATELY NOT REPRODUCED: the design's `.hb-dot` rule, which pulses the "Live" status dot for ever. docs/ui-rules.md allows no looping motion on this site, Dylan's approval for this rebuild names four loops and that is not one of them, and src/html/motion.test.ts fails on a fifth. The dot is drawn, and it is still. ========================================================================== */ .nf { --n-bg: #eef2f8; --n-surface: #ffffff; --n-ink: #02113a; --n-muted: #3d4b68; --n-line: #d3dae6; --n-brand: #0461f8; --n-on-brand: #ffffff; --n-chip: #dde5f3; --n-alert-ink: #1f1300; --n-card-tint: #fff3d6; --n-card-ink: #1f1300; --n-card-muted: #6b5320; --n-card-border: #e59a00; --n-map-bg: #edeff2; --n-apron: #e2e5ea; --n-bldg: #d5d9e0; --n-twy: #ffffff; --n-twy-edge: #c9ced8; --n-center: #e2b93b; --n-rwy: #7b8291; --n-haul: #bca27a; --n-label: #5b6475; --n-other: #7a8599; --n-stopped: #2c3a5c; --n-plane: #c2410c; --n-compass: #d92d20; --n-ptt: #02113a; --n-ptt-ink: #ffffff; --n-btn-line: #8e9cb8; --n-nav-bg: rgba(255, 255, 255, 0.94); --n-nav-line: rgba(2, 17, 58, 0.1); --n-nav-sel: #e3ecff; --n-nav-sel-ink: #0452d0; --n-glass: rgba(255, 255, 255, 0.9); --n-glass-line: rgba(2, 17, 58, 0.12); --n-shadow: 0 2px 12px rgba(2, 17, 58, 0.18); --n-lift: 0 1px 2px rgba(2, 17, 58, 0.06), 0 6px 18px rgba(2, 17, 58, 0.09); --n-nav-float: 0 14px 34px rgba(2, 17, 58, 0.22), 0 3px 8px rgba(2, 17, 58, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); --n-sel-lift: 0 2px 6px rgba(2, 17, 58, 0.12); } /* Night, by the device unless the visitor explicitly chose day. Same rule as site.css and the App* mockups above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .nf { --n-bg: #030a1c; --n-surface: #0e1b38; --n-ink: #e6ecf8; --n-muted: #a7b6d3; --n-line: #22335e; --n-brand: #5b9bff; --n-on-brand: #02113a; --n-chip: #13244a; --n-alert-ink: #1a0f00; --n-card-tint: #241a06; --n-card-ink: #fcebc7; --n-card-muted: #d9be86; --n-card-border: #e39b22; --n-map-bg: #0a1226; --n-apron: #101b33; --n-bldg: #18233d; --n-twy: #2a3858; --n-twy-edge: #1c2945; --n-center: #9c7f2a; --n-rwy: #3a4766; --n-haul: #6b5b3e; --n-label: #93a2c2; --n-other: #6f7fa3; --n-stopped: #b9c6e2; --n-plane: #ff8a4c; --n-compass: #ff6b5e; --n-ptt: #1e5bd8; --n-btn-line: #3a5085; --n-nav-bg: rgba(14, 27, 56, 0.94); --n-nav-line: rgba(230, 236, 248, 0.14); --n-nav-sel: #1b2e5c; --n-nav-sel-ink: #9cc2ff; --n-glass: rgba(14, 27, 56, 0.9); --n-glass-line: rgba(230, 236, 248, 0.16); --n-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); --n-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.45); --n-nav-float: 0 16px 38px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); --n-sel-lift: 0 2px 6px rgba(0, 0, 0, 0.4); } } /* An explicit choice wins over the device, in both directions. */ :root[data-theme="night"] .nf { --n-bg: #030a1c; --n-surface: #0e1b38; --n-ink: #e6ecf8; --n-muted: #a7b6d3; --n-line: #22335e; --n-brand: #5b9bff; --n-on-brand: #02113a; --n-chip: #13244a; --n-alert-ink: #1a0f00; --n-card-tint: #241a06; --n-card-ink: #fcebc7; --n-card-muted: #d9be86; --n-card-border: #e39b22; --n-map-bg: #0a1226; --n-apron: #101b33; --n-bldg: #18233d; --n-twy: #2a3858; --n-twy-edge: #1c2945; --n-center: #9c7f2a; --n-rwy: #3a4766; --n-haul: #6b5b3e; --n-label: #93a2c2; --n-other: #6f7fa3; --n-stopped: #b9c6e2; --n-plane: #ff8a4c; --n-compass: #ff6b5e; --n-ptt: #1e5bd8; --n-btn-line: #3a5085; --n-nav-bg: rgba(14, 27, 56, 0.94); --n-nav-line: rgba(230, 236, 248, 0.14); --n-nav-sel: #1b2e5c; --n-nav-sel-ink: #9cc2ff; --n-glass: rgba(14, 27, 56, 0.9); --n-glass-line: rgba(230, 236, 248, 0.16); --n-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); --n-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.45); --n-nav-float: 0 16px 38px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); --n-sel-lift: 0 2px 6px rgba(0, 0, 0, 0.4); } /* --------------------------------------------------------------------------- Frame ------------------------------------------------------------------------ */ .nf { position: relative; width: 390px; height: 844px; box-sizing: border-box; display: flex; flex-direction: column; background: var(--n-bg); color: var(--n-ink); font-family: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif; overflow: hidden; } /* --------------------------------------------------------------------------- Header ------------------------------------------------------------------------ */ .nf__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px 16px; } .nf__mark { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; } /* The app mark has a light-background and a dark-background file, and the depicted phone follows the site's theme so the picture matches the page it sits on. */ .nf__mark--night { display: none; } :root[data-theme="night"] .nf__mark--day { display: none; } :root[data-theme="night"] .nf__mark--night { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .nf__mark--day { display: none; } :root:not([data-theme="day"]) .nf__mark--night { display: block; } } .nf__post { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; } .nf__post-label { font-size: 13px; font-weight: 600; color: var(--n-muted); } .nf__post-name { font-size: 28px; font-weight: 800; line-height: 1.1; } .nf__avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 22px; background: var(--n-chip); color: var(--n-ink); font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* --------------------------------------------------------------------------- Status row: Live · 3 on post · Mic off ------------------------------------------------------------------------ */ .nf__status { margin: 0 16px 12px 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; background: var(--n-surface); border: 1px solid var(--n-line); box-shadow: var(--n-lift); } .nf__status-cell { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; font-size: 14px; font-weight: 700; } .nf__status-cell--mid { border-left: 1px solid var(--n-line); border-right: 1px solid var(--n-line); } .nf__status-cell--mic { border-radius: 0 13px 13px 0; color: var(--n-ink); } /* Drawn, and still. See the note at the top of this section. */ .nf__live-dot { fill: var(--n-brand); } /* --------------------------------------------------------------------------- The alert row. docs/alerts.md "C2a": a compact list row, soft amber, two text sizes, a chevron that would open details. Amber here means aircraft and nothing else. ------------------------------------------------------------------------ */ .nf__alert { margin: 0 16px; padding: 10px 14px; border-radius: 16px; background: var(--n-card-tint); color: var(--n-card-ink); border: 1.5px solid var(--n-card-border); display: flex; align-items: center; gap: 12px; } .nf__alert-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 18px; background: var(--n-card-border); color: var(--n-alert-ink); display: flex; align-items: center; justify-content: center; } .nf__alert-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .nf__alert-head { font-size: 17px; font-weight: 700; line-height: 1.3; } .nf__alert-sub { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--n-card-muted); font-variant-numeric: tabular-nums; } .nf__secs { display: inline-block; font-variant-numeric: tabular-nums; } .nf__alert-chevron { flex-shrink: 0; opacity: 0.6; } /* --------------------------------------------------------------------------- The glance map ------------------------------------------------------------------------ */ .nf__map { position: relative; flex-grow: 1; margin: 12px 16px 0 16px; border-radius: 20px; overflow: hidden; border: 1px solid var(--n-line); box-shadow: var(--n-lift); min-height: 0; } .nf__map-svg { width: 100%; height: 100%; } /* Themed fills and strokes. SVG presentation attributes cannot resolve var(), so each one is a class. */ .nf-f-map { fill: var(--n-map-bg); } .nf-f-apron { fill: var(--n-apron); } .nf-f-bldg { fill: var(--n-bldg); } .nf-f-rwy { fill: var(--n-rwy); } .nf-f-twy { fill: var(--n-twy); } .nf-f-stopped { fill: var(--n-stopped); } .nf-f-plane { fill: var(--n-plane); } .nf-f-other { fill: var(--n-other); } .nf-f-brand { fill: var(--n-brand); } .nf-f-on-brand { fill: var(--n-on-brand); } .nf-f-border { fill: var(--n-card-border); } .nf-f-compass { fill: var(--n-compass); } .nf-s-twy { stroke: var(--n-twy); } .nf-s-twy-edge { stroke: var(--n-twy-edge); } .nf-s-center { stroke: var(--n-center); } .nf-s-haul { stroke: var(--n-haul); } .nf-s-stopped { stroke: var(--n-stopped); } .nf-s-brand { stroke: var(--n-brand); } .nf-s-map { stroke: var(--n-map-bg); } /* The trail behind the moving aircraft, and the aircraft itself, at the frame the design opens on: its tick counter at 0, which is the "about 50 s" reading the row above shows and the pill beside the phone quotes. */ .nf__path { transform-origin: 150px 200px; transform: scaleY(1.364); } .nf__move { transform: translateY(-16px); } .nf__map-letter { font-size: 15px; font-weight: 800; } .nf__chip { position: absolute; top: 8px; display: flex; align-items: center; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--n-glass-line); background: var(--n-glass); box-shadow: var(--n-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--n-ink); } .nf__chip--north { left: 8px; gap: 4px; font-size: 13px; font-weight: 800; } .nf__chip--age { right: 8px; gap: 5px; font-size: 12px; font-weight: 700; } .nf__big-map { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; } .nf__big-map-pill { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--n-glass-line); background: var(--n-glass); box-shadow: var(--n-shadow); color: var(--n-ink); font-size: 15px; font-weight: 800; } .nf__map-credit { position: absolute; left: 10px; bottom: 6px; font-size: 10px; color: var(--n-label); } /* --------------------------------------------------------------------------- The verify line and the two field controls ------------------------------------------------------------------------ */ .nf__foot { padding: 10px 16px 0 16px; display: flex; flex-direction: column; gap: 10px; } /* root CLAUDE.md rule 1. It belongs to the DEPICTED app screen and is the only place this sentence appears on the website — the site never says it in its own voice. */ .nf__verify { text-align: center; font-size: 13px; font-weight: 600; color: var(--n-muted); } .nf__actions { display: flex; gap: 10px; } .nf__repeat { width: 76px; height: 72px; flex-shrink: 0; border-radius: 20px; border: 1.5px solid var(--n-btn-line); background: var(--n-surface); color: var(--n-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 700; box-shadow: var(--n-lift); box-sizing: border-box; } .nf__ptt { flex: 1; min-width: 0; height: 72px; border-radius: 20px; background: var(--n-ptt); color: var(--n-ptt-ink); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 21px; font-weight: 800; box-shadow: 0 0 0 0 transparent, var(--n-lift); } .nf__ptt > svg { flex-shrink: 0; } .nf__ptt-labels { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; } .nf__ptt-main { white-space: nowrap; } .nf__ptt-sub { font-size: 13px; font-weight: 600; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* --------------------------------------------------------------------------- The floating tab bar, and the space kept clear beneath the controls for it ------------------------------------------------------------------------ */ .nf__nav-gap { height: 98px; flex-shrink: 0; } .nf__nav { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 30px; border: 1px solid var(--n-nav-line); background: var(--n-nav-bg); box-shadow: var(--n-nav-float); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); } .nf__tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 19px; color: var(--n-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .nf__tab--on { border-radius: 24px; box-shadow: var(--n-sel-lift); background: var(--n-nav-sel); color: var(--n-nav-sel-ink); font-weight: 800; } /* --------------------------------------------------------------------------- The screen arriving. One shot, every one of them — the phone is on screen when the page loads, so "plays once when it is scrolled into view" (docs/ui-rules.md) means on load here. Section 25 of site.css cancels all of it under prefers-reduced-motion: reduce. ------------------------------------------------------------------------ */ .runA > * { animation: fmUpA 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } .runA > *:nth-child(2) { animation-delay: 0.06s; } .runA > *:nth-child(3) { animation-delay: 0.12s; } .runA > *:nth-child(4) { animation-delay: 0.18s; } .runA > *:nth-child(5) { animation-delay: 0.24s; } .runA > *:nth-child(6) { animation-delay: 0.3s; } .runA > *:nth-child(7) { animation-delay: 0.36s; } @keyframes fmUpA { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* The alert arrives and its edge brightens once, which docs/alerts.md allows for a sharp change and forbids as a repeating pulse. THE RING'S DELAY IS DERIVED, NOT THE DESIGN'S LITERAL 1s, and that is the whole repair here. design/NewFlagger.dc.html fires it 1s after the screen appears, because on the design canvas the screen IS there at t=0. On this page the same markup lives inside `.hr-phone`, which is held at opacity 0 until `--hr-lights-end` and only reaches opacity 1 a further `--hr-phone-dur` later — so a 1s delay put the whole 1.2s ring inside the window where the phone cannot be seen. Measured, not reasoned: at the ring's start the phone's computed opacity was 0 and at its end 0.638, in docs/evidence/2026-10-28-step0.5-ring-parity.md. This is the hero shine's defect (df2ec18) in a second place, so it takes the same derivation the shine now uses — `--hr-lights-end` plus `--hr-phone-dur`, the moment the phone has landed — and the next retune of the light run carries the ring with it instead of leaving it behind. src/html/animation-parity.test.ts section (3) pins the expression. The design's extra 1s is deliberately NOT carried over. It measured from the start of a screen entrance that this page replaces with the phone's own fly-in; adding it on top would put the ring a second after the thing it points at had already settled. The row's own `fmUpA` is left at load time on purpose — see the note below the ripple. */ .runA > .fm-alert { animation: fmUpA 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s backwards, fmRingA 1.2s ease-out calc(var(--hr-lights-end) + var(--hr-phone-dur)); } @keyframes fmRingA { 0% { outline: 3px solid var(--n-card-border); outline-offset: 0; } 100% { outline: 3px solid transparent; outline-offset: 12px; } } /* The trail draws itself behind the aircraft, and the crossing marker takes one ripple as the aircraft's position lands. */ .runA .fm-draw { animation: fmDrawA 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s backwards; } .fm-draw { transform-origin: 150px 200px; } @keyframes fmDrawA { from { transform: scaleY(0); } to { transform: none; } } .fm-ripple { opacity: 0; transform-origin: 150px 200px; } .runA .fm-ripple { animation: fmRipA 1.1s ease-out 1.1s backwards; } @keyframes fmRipA { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } } /* WHY THE RING WAS RE-TIMED AND THESE THREE WERE NOT. All four of this phone's inner animations finish inside the window where `.hr-phone` holds the phone at opacity 0 (`fmUpA` 0–0.96s across the staggered children, 0.12–0.72s on the alert row itself, `fmDrawA` 0.9–1.6s, `fmRipA` 1.1–2.2s, and the ring was 1–2.2s, against a phone that is invisible until 2.02s). The ring was the one that could be moved WITHOUT CHANGING ANY FRAME A VISITOR ALREADY SEES, because its fill is `none`: before its delay the element carries no outline at all, which is exactly what it looks like today once the animation is over. The other three fill `backwards`, so delaying them holds their FIRST frame on screen for the whole fly-in — the rows at opacity 0 (a phone that arrives empty), the trail at scaleY(0) (a map that arrives with no trail) and the ripple at opacity 0.9 (a static disc sitting on the crossing marker). Each of those is a different arrival than the one Dylan approved on screen, so it is his call and not this stylesheet's. Measurements for all four are in docs/evidence/2026-10-28-step0.5-ring-parity.md. */ /* ============================================================================= The "Try the app" screens — apps/site/design/Emu*.dc.html ============================================================================= The Home page's interactive mockups: the flagger (R2a, design/EmuFlagger.dc.html), the escort (R2b, design/EmuEscort.dc.html) and the crew board (R2c, design/EmuCrew.dc.html). Each task extends this block rather than restating it. `.emu` AND NOT `.nf`, AND THE TWO ARE NOT MERGED. The hero phone above is design/NewFlagger.dc.html and the screen in "Try the app" is design/EmuFlagger.dc.html. They look alike and they are not the same drawing: this one's alert row is a button with a chevron, it has a Big map control, and its status strip changes while hold-to-talk is held. One set of classes for two design files means an edit to either design silently changes the other, which is the same reason `--m-*` and `--n-*` are kept apart higher up this sheet. THE PALETTE IS THE SAME, AND THAT IS MEASURED RATHER THAN ASSUMED. Every one of the 55 tokens in EmuFlagger's and EmuEscort's `_rv()` theme objects is byte-identical to NewFlagger's, in both day and night. EmuCrew declares a smaller set — 35 tokens, because it draws no map — and every token it SHARES with the other three is byte-identical too: 186 shared values compared, 0 differ. It adds four of its own: amberTint, amberInk, amberLine and rowLift. The comparisons are in docs/evidence/2026-10-27-step0.5-R2a-try-the-app.md and docs/evidence/2026-10-28-step0.5-R2c-crew-board.md §3. THAT FIGURE WAS 180 AND THE 180 WAS STALE, which is worth leaving visible because of HOW it went wrong rather than by how much. 180 is 30 shared tokens x 3 files x 2 themes, and it was measured against EmuCrew BEFORE the authorised `{{c.onBrand}}` resolution was written into the design file. Resolving it added a 31st shared token — EmuFlagger, EmuEscort and NewFlagger all declare `onBrand` already — so the same comparison now compares 186 values. Nothing about the claim it supports changed: 0 still differ. A design-file edit moved a constant derived FROM that file, and the constant was not re-derived afterwards, which is exactly the drift docs/coding.md's "the design edits and the re-derived constants land in the same commit" exists to catch. §3 of the evidence file carries both numbers and the command that separates them. So WHY DUPLICATE THE BLOCK? Because `--n-*` is declared on `.nf`, not on `:root`, and widening that selector would edit task R1's committed rules, which docs/agents.md does not let a later task do — R1's audit was written against them. The duplication is pinned instead: src/html/emu-palette.test.ts fails if any shared token's value differs between the two blocks, so the copies cannot drift apart silently. When the last page converts and section 26's `.page` scoping comes off, these two blocks should become one selector list. SOME TOKENS ARE DECLARED HERE AND NOT ON `.nf`, and that is not an inconsistency. `ptt-talk` and `talk-ring` exist in NewFlagger's theme object but never reach its markup, because the hero phone is a still picture and nothing in it is ever talking; these screens are, so they become properties. The same test applies to every later addition: a token becomes a property here when some screen's MARKUP reaches it, and not merely because a design file declares it. SVG presentation attributes (`fill="…"`, `stroke="…"`) do not resolve `var()`, so every themed fill and stroke is a class: `emu-f-*` sets a fill, `emu-s-*` sets a stroke. ========================================================================== */ .emu { --n-bg: #eef2f8; --n-surface: #ffffff; --n-ink: #02113a; --n-muted: #3d4b68; --n-line: #d3dae6; --n-brand: #0461f8; --n-on-brand: #ffffff; --n-chip: #dde5f3; --n-alert-ink: #1f1300; --n-card-tint: #fff3d6; --n-card-ink: #1f1300; --n-card-muted: #6b5320; --n-card-border: #e59a00; --n-map-bg: #edeff2; --n-apron: #e2e5ea; --n-bldg: #d5d9e0; --n-twy: #ffffff; --n-twy-edge: #c9ced8; --n-center: #e2b93b; --n-rwy: #7b8291; --n-haul: #bca27a; --n-label: #5b6475; --n-other: #7a8599; --n-stopped: #2c3a5c; --n-plane: #c2410c; --n-compass: #d92d20; /* Three the escort screen's map needs and the flagger's does not: the dashed awareness ring around the crossing, and the fill and ink of the selected Close/Area preset. Value-identical to EmuEscort's, EmuFlagger's and NewFlagger's own theme objects in both themes — the comparison is in docs/evidence/2026-10-27-step0.5-R2b-escort-screen.md. They are absent from the `.nf` block because NewFlagger's MARKUP never reaches them, which is the same reason `ptt-talk` and `talk-ring` are only here. */ --n-ring: #0461f8; --n-sel: #0461f8; --n-sel-ink: #ffffff; /* Four the crew board needs and the other two screens do not (task R2c). `amber-tint` and `amber-line` paint the unstaffed-end marker, which docs/alerts.md requires to be a DASHED amber outline or dot and never solid amber; `row-lift` is the softer shadow its list rows carry, where `--n-lift` is the card shadow. All four are in EmuCrew's own theme objects and in no other design file's — the comparison is in docs/evidence/2026-10-28-step0.5-R2c-crew-board.md §3. A fifth, `amberInk`, is declared in the design and its markup never reaches it, so it is not a property here — the same reason `--n-ptt-talk` is absent from the `.nf` block above. */ --n-amber-tint: #fff3d6; --n-amber-line: #e59a00; --n-row-lift: 0 1px 2px rgba(2, 17, 58, 0.06), 0 3px 8px rgba(2, 17, 58, 0.06); --n-ptt: #02113a; --n-ptt-ink: #ffffff; --n-ptt-talk: #0461f8; --n-talk-ring: #04a5f8; --n-btn-line: #8e9cb8; --n-nav-bg: rgba(255, 255, 255, 0.94); --n-nav-line: rgba(2, 17, 58, 0.1); --n-nav-sel: #e3ecff; --n-nav-sel-ink: #0452d0; /* The tab bar's word badges, which only the crew board draws (R2c). `live` is brand blue and `badge` is amber. docs/alerts.md asks for an "ALERT/OFFLINE word badge on the Crossing tab" in so many words, which is what `badge` paints. */ --n-badge: #e59a00; --n-badge-ink: #1f1300; --n-live: #0461f8; --n-live-ink: #ffffff; --n-glass: rgba(255, 255, 255, 0.9); --n-glass-line: rgba(2, 17, 58, 0.12); --n-shadow: 0 2px 12px rgba(2, 17, 58, 0.18); --n-lift: 0 1px 2px rgba(2, 17, 58, 0.06), 0 6px 18px rgba(2, 17, 58, 0.09); --n-nav-float: 0 14px 34px rgba(2, 17, 58, 0.22), 0 3px 8px rgba(2, 17, 58, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); --n-sel-lift: 0 2px 6px rgba(2, 17, 58, 0.12); } /* Night, by the device unless the visitor explicitly chose day. Same rule as site.css and the mockups above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .emu { --n-bg: #030a1c; --n-surface: #0e1b38; --n-ink: #e6ecf8; --n-muted: #a7b6d3; --n-line: #22335e; --n-brand: #5b9bff; --n-on-brand: #02113a; --n-chip: #13244a; --n-alert-ink: #1a0f00; --n-card-tint: #241a06; --n-card-ink: #fcebc7; --n-card-muted: #d9be86; --n-card-border: #e39b22; --n-map-bg: #0a1226; --n-apron: #101b33; --n-bldg: #18233d; --n-twy: #2a3858; --n-twy-edge: #1c2945; --n-center: #9c7f2a; --n-rwy: #3a4766; --n-haul: #6b5b3e; --n-label: #93a2c2; --n-other: #6f7fa3; --n-stopped: #b9c6e2; --n-plane: #ff8a4c; --n-compass: #ff6b5e; --n-ring: #5b9bff; --n-sel: #5b9bff; --n-sel-ink: #02113a; --n-amber-tint: #241a06; --n-amber-line: #e39b22; --n-row-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35); --n-ptt: #1e5bd8; --n-ptt-ink: #ffffff; --n-ptt-talk: #3f7bff; --n-talk-ring: #04a5f8; --n-btn-line: #3a5085; --n-nav-bg: rgba(14, 27, 56, 0.94); --n-nav-line: rgba(230, 236, 248, 0.14); --n-nav-sel: #1b2e5c; --n-nav-sel-ink: #9cc2ff; --n-badge: #e39b22; --n-badge-ink: #1a0f00; --n-live: #5b9bff; --n-live-ink: #02113a; --n-glass: rgba(14, 27, 56, 0.9); --n-glass-line: rgba(230, 236, 248, 0.16); --n-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); --n-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.45); --n-nav-float: 0 16px 38px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); --n-sel-lift: 0 2px 6px rgba(0, 0, 0, 0.4); } } /* An explicit choice wins over the device, in both directions. */ :root[data-theme="night"] .emu { --n-bg: #030a1c; --n-surface: #0e1b38; --n-ink: #e6ecf8; --n-muted: #a7b6d3; --n-line: #22335e; --n-brand: #5b9bff; --n-on-brand: #02113a; --n-chip: #13244a; --n-alert-ink: #1a0f00; --n-card-tint: #241a06; --n-card-ink: #fcebc7; --n-card-muted: #d9be86; --n-card-border: #e39b22; --n-map-bg: #0a1226; --n-apron: #101b33; --n-bldg: #18233d; --n-twy: #2a3858; --n-twy-edge: #1c2945; --n-center: #9c7f2a; --n-rwy: #3a4766; --n-haul: #6b5b3e; --n-label: #93a2c2; --n-other: #6f7fa3; --n-stopped: #b9c6e2; --n-plane: #ff8a4c; --n-compass: #ff6b5e; --n-ring: #5b9bff; --n-sel: #5b9bff; --n-sel-ink: #02113a; --n-amber-tint: #241a06; --n-amber-line: #e39b22; --n-row-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35); --n-ptt: #1e5bd8; --n-ptt-ink: #ffffff; --n-ptt-talk: #3f7bff; --n-talk-ring: #04a5f8; --n-btn-line: #3a5085; --n-nav-bg: rgba(14, 27, 56, 0.94); --n-nav-line: rgba(230, 236, 248, 0.14); --n-nav-sel: #1b2e5c; --n-nav-sel-ink: #9cc2ff; --n-badge: #e39b22; --n-badge-ink: #1a0f00; --n-live: #5b9bff; --n-live-ink: #02113a; --n-glass: rgba(14, 27, 56, 0.9); --n-glass-line: rgba(230, 236, 248, 0.16); --n-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); --n-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.45); --n-nav-float: 0 16px 38px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); --n-sel-lift: 0 2px 6px rgba(0, 0, 0, 0.4); } /* --------------------------------------------------------------------------- The screen ------------------------------------------------------------------------ */ .emu { position: relative; width: 390px; height: 844px; box-sizing: border-box; display: flex; flex-direction: column; background: var(--n-bg); color: var(--n-ink); font-family: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif; overflow: hidden; } /* `hidden` has to beat the `display: flex` above it — the same trap the captions and the checklists have in site.css section 27. Without this, the roles with no screen yet would show the flagger's. */ .emu[hidden] { display: none; } /* Every button in here is a real button and inherits nothing by default. */ .emu button { font-family: inherit; cursor: pointer; } /* The designs' `cr-liftb`, which reads `var(--lift)`. */ .emu-lift { box-shadow: var(--n-lift); } /* --------------------------------------------------------------------------- Header ------------------------------------------------------------------------ */ .emu__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px 16px; } .emu__mark { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; } /* The app mark has a light-background and a dark-background file, and the depicted phone follows the site's theme so the picture matches the page it sits on. Same swap as the hero phone's. */ .emu__mark--night { display: none; } :root[data-theme="night"] .emu__mark--day { display: none; } :root[data-theme="night"] .emu__mark--night { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .emu__mark--day { display: none; } :root:not([data-theme="day"]) .emu__mark--night { display: block; } } .emu__post { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; } .emu__post-label { font-size: 13px; font-weight: 600; color: var(--n-muted); } .emu__post-name { font-size: 28px; font-weight: 800; line-height: 1.1; } .emu__avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--n-chip); color: var(--n-ink); font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* --------------------------------------------------------------------------- Status strip ------------------------------------------------------------------------ */ .emu__status { margin: 0 16px 12px 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; background: var(--n-surface); border: 1px solid var(--n-line); box-shadow: var(--n-lift); } .emu__status-cell { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; font-size: 14px; font-weight: 700; } .emu__status-cell--mid { border-left: 1px solid var(--n-line); border-right: 1px solid var(--n-line); } /* The mic cell fills while hold-to-talk is held, so the strip says what the button is doing. The radius matches the strip's own right corners. */ .emu__status-cell--mic { border-radius: 0 13px 13px 0; background: transparent; color: var(--n-ink); } .emu--talking .emu__status-cell--mic { background: var(--n-ptt-talk); color: var(--n-ptt-ink); } /* The slash across the mic is there when the mic is off, and gone when it is live — which is how the icon and the word agree. */ .emu--talking .emu__mic-slash { display: none; } /* --------------------------------------------------------------------------- The alert row (docs/alerts.md's banner: airline, then taxiway, then time) ------------------------------------------------------------------------ */ /* `box-sizing: border-box` IS REQUIRED and it is the design's own value, from the other file. design/EmuEscort.dc.html's identical `.c2-banner` carries it and design/EmuFlagger.dc.html's omits it; with `width: calc(100% - 32px)` plus 16px margins, 14px padding each side and a 1.5px border, a content-box banner is 421px wide inside a 390px screen and its right edge is clipped. The measurement is in this task's evidence file. */ .emu__alert { box-sizing: border-box; appearance: none; width: calc(100% - 32px); margin: 0 16px; padding: 10px 14px; border-radius: 16px; background: var(--n-card-tint); color: var(--n-card-ink); border: 1.5px solid var(--n-card-border); display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; } .emu__alert-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 18px; background: var(--n-card-border); color: var(--n-alert-ink); display: flex; align-items: center; justify-content: center; } .emu__alert-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .emu__alert-head { font-size: 17px; font-weight: 700; line-height: 1.3; } .emu__alert-sub { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--n-card-muted); font-variant-numeric: tabular-nums; } /* Tabular figures and an inline-block so the row does not reflow when the number changes width. docs/alerts.md: the number and unit never split. */ .emu__secs { display: inline-block; } .emu__alert-chevron { flex-shrink: 0; opacity: 0.6; } /* --------------------------------------------------------------------------- The glance map ------------------------------------------------------------------------ */ .emu__map { position: relative; flex-grow: 1; margin: 12px 16px 0 16px; border-radius: 20px; overflow: hidden; border: 1px solid var(--n-line); box-shadow: var(--n-lift); min-height: 0; } .emu__map-svg { width: 100%; height: 100%; display: block; } .emu__map-letter { font-size: 15px; font-weight: 800; } .emu__chip { position: absolute; top: 8px; display: flex; align-items: center; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--n-glass-line); background: var(--n-glass); box-shadow: var(--n-shadow); backdrop-filter: blur(12px); color: var(--n-ink); } .emu__chip--north { left: 8px; gap: 4px; font-size: 13px; font-weight: 800; } .emu__chip--age { right: 8px; gap: 5px; font-size: 12px; font-weight: 700; } /* THE TARGET IS THE PILL, NOT THE WHOLE MAP. The design draws this as an anchor with `inset: 0` and the pill aligned to its bottom-right corner, which is a canvas convenience: that anchor has no href and cannot be focused, so in the drawing it is only ever a way to place the pill. Built as a real control on an interactive screen it would be a 358x300 button sitting over the map, in the tab order, announced as "Open the big map" and swallowing the two chips. The pill renders in exactly the same place; docs/ui-rules.md's 44px floor is met by the pill itself. */ .emu__big-map { position: absolute; right: 8px; bottom: 8px; padding: 0; border: 0; background: transparent; display: flex; } .emu__big-map-pill { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--n-glass-line); background: var(--n-glass); box-shadow: var(--n-shadow); color: var(--n-ink); font-size: 15px; font-weight: 800; } .emu__map-credit { position: absolute; left: 10px; bottom: 6px; font-size: 10px; color: var(--n-label); } /* --------------------------------------------------------------------------- The bottom: the verify line, then Repeat and hold-to-talk ----------------------------------------------------------------------------- docs/phone-app.md, "Bottom of the flagger screen": the verify line, then one row with a square Repeat on the left and hold-to-talk filling the rest. The verify line is root CLAUDE.md rule 1, inside the depicted screen and in that screen's own wording. ------------------------------------------------------------------------ */ .emu__foot { padding: 10px 16px 0 16px; display: flex; flex-direction: column; gap: 10px; } .emu__verify { text-align: center; font-size: 13px; font-weight: 600; color: var(--n-muted); } .emu__row { display: flex; gap: 10px; } .emu__repeat { width: 76px; height: 72px; flex-shrink: 0; border-radius: 20px; border: 1.5px solid var(--n-btn-line); background: var(--n-surface); color: var(--n-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 700; } .emu__ptt { flex: 1; min-width: 0; height: 72px; border-radius: 20px; border: 0; background: var(--n-ptt); color: var(--n-ptt-ink); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 21px; font-weight: 800; /* The ring is a box-shadow layer that is transparent at rest, so it can be transitioned in rather than appearing in one frame. Sky blue, never amber: docs/alerts.md reserves amber for aircraft. */ box-shadow: 0 0 0 0 transparent, var(--n-lift); } .emu--talking .emu__ptt { background: var(--n-ptt-talk); box-shadow: 0 0 0 4px var(--n-talk-ring), var(--n-lift); } /* The mic icon becomes level bars while the button is held. */ .emu--talking .emu__ptt-mic { display: none; } .emu__ptt-bars { display: none; align-items: center; gap: 3px; height: 26px; flex-shrink: 0; } .emu--talking .emu__ptt-bars { display: flex; } .emu-bar { display: inline-block; width: 4px; border-radius: 2px; background: currentColor; transform-origin: center; } .emu-bar:nth-child(1) { height: 14px; } .emu-bar:nth-child(2) { height: 24px; } .emu-bar:nth-child(3) { height: 18px; } .emu-bar:nth-child(4) { height: 26px; } .emu-bar:nth-child(5) { height: 12px; } .emu__ptt-labels { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; } .emu__ptt-main { white-space: nowrap; } .emu__ptt-sub { font-size: 13px; font-weight: 600; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* --------------------------------------------------------------------------- The floating tab bar ----------------------------------------------------------------------------- docs/phone-app.md: a glass capsule inset from the edges and lifted off the bottom, selected tab in a soft blue pill. The gap above it is a spacer element rather than padding, because the bar is positioned and the content above it must not slide under it. ------------------------------------------------------------------------ */ .emu__nav-gap { height: 98px; flex-shrink: 0; } .emu__nav { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 30px; border: 1px solid var(--n-nav-line); background: var(--n-nav-bg); box-shadow: var(--n-nav-float); backdrop-filter: blur(20px) saturate(1.6); } .emu__tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 19px; color: var(--n-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .emu__tab--on { border-radius: 24px; box-shadow: var(--n-sel-lift); background: var(--n-nav-sel); color: var(--n-nav-sel-ink); font-weight: 800; } /* --------------------------------------------------------------------------- Themed SVG fills and strokes ------------------------------------------------------------------------ */ .emu-f-map { fill: var(--n-map-bg); } .emu-f-apron { fill: var(--n-apron); } .emu-f-bldg { fill: var(--n-bldg); } .emu-f-rwy { fill: var(--n-rwy); } .emu-f-twy { fill: var(--n-twy); } .emu-f-stopped { fill: var(--n-stopped); } .emu-f-plane { fill: var(--n-plane); } .emu-f-other { fill: var(--n-other); } .emu-f-brand { fill: var(--n-brand); } .emu-f-on-brand { fill: var(--n-on-brand); } .emu-f-compass { fill: var(--n-compass); } /* The amber remainder of the aircraft's path. Amber here is an aircraft, which is the only thing docs/alerts.md allows it to be. */ .emu-f-border { fill: var(--n-card-border); } .emu-s-twy { stroke: var(--n-twy); } .emu-s-twy-edge { stroke: var(--n-twy-edge); } .emu-s-center { stroke: var(--n-center); } .emu-s-haul { stroke: var(--n-haul); } .emu-s-stopped { stroke: var(--n-stopped); } .emu-s-brand { stroke: var(--n-brand); } .emu-s-map { stroke: var(--n-map-bg); } /* --------------------------------------------------------------------------- Motion ----------------------------------------------------------------------------- Cancelled whole by site.css section 25's `animation: none !important` and `transition: none !important`, which is the reduced-motion gate docs/ui-rules.md allows no exceptions to. EVERY FINISHED STATE HERE IS A PLAIN DECLARATION, not a keyframe. That is the defect class task R1b found in the hero's approach lights: 34 of them sat at `opacity: 0` and were brought up BY the animation, so cancelling the animation left a visitor who asked for less motion with no diagram at all. Checked element by element for this screen, and the two that genuinely rest invisible are the ripple (which ends at opacity 0 — invisible IS its finished state) and the level bars (which only exist while the button is held, and which get the design's own static 0.7 scale below). NOTHING LOOPS. `hbPulse` on the "Live" dot and `infinite` on the level bars are both in the design and neither is reproduced: docs/ui-rules.md permits four looping animations by name, these are not among them, and src/html/motion.test.ts fails on a fifth. The bars run a finite count instead, long enough that no realistic press reaches the end. A/B PAIRS. `emuUpA`/`emuUpB` and the rest are identical pairs, alternated by the script when the run restarts. Re-adding a class that is already on an element does not restart a CSS animation; swapping between two does. That is how the design's `showA`/`showB` remount is reproduced as an effect without a remount. ------------------------------------------------------------------------ */ /* Press feedback. */ .emu-press, .emu__big-map-pill, .emu__repeat { transition: transform 0.12s ease-out, background-color 0.2s ease-out; } .emu-press:active, .emu__repeat:active { transform: scale(0.94); } .emu__alert { transition: background-color 0.45s ease-out, border-color 0.45s ease-out, color 0.45s ease-out, transform 0.12s ease-out; } .emu__alert:active { transform: scale(0.98); } .emu__ptt { transition: transform 0.06s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out; } .emu__ptt:active { transform: scale(0.97); } .emu__status-cell, .emu__status-cell--mic { transition: background-color 0.25s ease-out, color 0.25s ease-out; } /* The screen arrives: each child rises in turn. */ .emu > * { animation-fill-mode: backwards; } .emu-run-a > * { animation: emuUpA 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } .emu-run-b > * { animation: emuUpB 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } @keyframes emuUpA { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes emuUpB { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .emu > *:nth-child(2) { animation-delay: 0.06s; } .emu > *:nth-child(3) { animation-delay: 0.12s; } .emu > *:nth-child(4) { animation-delay: 0.18s; } .emu > *:nth-child(5) { animation-delay: 0.24s; } .emu > *:nth-child(6) { animation-delay: 0.3s; } .emu > *:nth-child(7) { animation-delay: 0.36s; } .emu > *:nth-child(8) { animation-delay: 0.42s; } /* The alert row rises and then gives one amber edge flash — docs/alerts.md's "a sharp change brightens the amber edge once". An outline, so no layout box moves and nothing beside it shifts. */ .emu-run-a > .fm-alert { animation: emuUpA 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s backwards, emuRingA 1.2s ease-out 1s; } .emu-run-b > .fm-alert { animation: emuUpB 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s backwards, emuRingB 1.2s ease-out 1s; } @keyframes emuRingA { 0% { outline: 3px solid var(--n-card-border); outline-offset: 0; } 100% { outline: 3px solid transparent; outline-offset: 12px; } } @keyframes emuRingB { 0% { outline: 3px solid var(--n-card-border); outline-offset: 0; } 100% { outline: 3px solid transparent; outline-offset: 12px; } } /* The remaining path draws itself down toward the crossing. */ .emu-draw { transform-origin: 150px 200px; } .emu-run-a .emu-draw { animation: emuDrawA 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s backwards; } .emu-run-b .emu-draw { animation: emuDrawB 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s backwards; } @keyframes emuDrawA { from { transform: scaleY(0); } to { transform: none; } } @keyframes emuDrawB { from { transform: scaleY(0); } to { transform: none; } } /* One ripple at the crossing marker as the alert lands. It ENDS invisible, so opacity 0 is its finished state and cancelling the animation is correct. */ .emu-ripple { opacity: 0; transform-origin: 150px 200px; } .emu-run-a .emu-ripple { animation: emuRipA 1.1s ease-out 1.1s backwards; } .emu-run-b .emu-ripple { animation: emuRipB 1.1s ease-out 1.1s backwards; } @keyframes emuRipA { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } } @keyframes emuRipB { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } } /* The aircraft rolls, and the path it has left shrinks with it, for the whole twelve seconds of the run. ----------------------------------------------------------------------------- The design moves both with a per-render inline `transform` and a one-second linear transition, stepping twelve times. Twelve one-second linear steps are a linear ramp, so this is one 12s linear animation — identical on screen, and it keeps every runtime style attribute out of the page. The escort design already uses exactly this technique for its own marker. The numbers are the design's own endpoints: `r.dy` runs -16 to 0, and `r.pathS` is (44 - dy)/44, so scaleY runs 60/44 = 1.3636 down to 1. `both`, so the finished state is held — which is also what a cancelled animation leaves, because the `to` state is the element's natural one. */ .emu-run-a .emu__move { animation: emuMoveA 12s linear both; } .emu-run-b .emu__move { animation: emuMoveB 12s linear both; } @keyframes emuMoveA { from { transform: translateY(-16px); } to { transform: none; } } @keyframes emuMoveB { from { transform: translateY(-16px); } to { transform: none; } } .emu__path { transform-origin: 150px 200px; } .emu-run-a .emu__path { animation: emuPathA 12s linear both; } .emu-run-b .emu__path { animation: emuPathB 12s linear both; } @keyframes emuPathA { from { transform: scaleY(1.3636); } to { transform: none; } } @keyframes emuPathB { from { transform: scaleY(1.3636); } to { transform: none; } } /* The post name fades down on arrival (the designs' `hb-in`). */ .emu__post-name { animation: emuIn 0.35s ease-out both; } @keyframes emuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* The time fades over on the one tick where it changes — and only then. docs/alerts.md: "when the time steps down, only the changed numbers fade over (~0.3 s)"; never a per-second countdown. */ .emu__secs--step { animation: emuTickFade 0.45s ease-out; } @keyframes emuTickFade { from { opacity: 0.25; } to { opacity: 1; } } /* Repeat turns its arrow once and reads "Playing" while the alert replays (docs/phone-app.md). */ .emu__repeat-icon--spin { animation: emuSpin 0.7s ease-in-out both; } @keyframes emuSpin { from { transform: rotate(0); } to { transform: rotate(-360deg); } } .emu__repeat-label--in { animation: emuLabelIn 0.25s ease-out both; } @keyframes emuLabelIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } /* The hold-to-talk label fades between "Hold to talk" and "Talking…" on every press and release, so it needs an A/B pair. */ .emu__ptt-labels--a { animation: emuFadeA 0.18s ease-out both; } .emu__ptt-labels--b { animation: emuFadeB 0.18s ease-out both; } @keyframes emuFadeA { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } @keyframes emuFadeB { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* The level bars, while the button is held. ----------------------------------------------------------------------------- A FINITE COUNT AND NOT `infinite`, which is the one place this screen does not copy its design literally. docs/ui-rules.md permits four looping animations by name and these are not among them; adding a fifth is Dylan's decision and nobody else's (src/html/motion.test.ts says so where the list is defined). 12 iterations of the longest bar is 13.2s of holding, which no realistic press on a mockup reaches, so what a visitor sees is the design. Said out loud here rather than left in a diff. */ .emu--talking .emu-bar { animation: emuBar 0.9s ease-in-out 12; } .emu--talking .emu-bar:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.2s; } .emu--talking .emu-bar:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.5s; } .emu--talking .emu-bar:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.1s; } .emu--talking .emu-bar:nth-child(5) { animation-duration: 1s; animation-delay: -0.35s; } @keyframes emuBar { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } } /* Reduce Motion: the bars stand still at the design's own static height rather than at full scale, which is the design's value in its own reduced-motion block. Section 25 has already cancelled the animation; this only says where they rest. */ @media (prefers-reduced-motion: reduce) { .emu-bar { transform: scaleY(0.7); } } /* ============================================================================= The escort screen — apps/site/design/EmuEscort.dc.html ============================================================================= Task R2b. Everything above this point that is shared — the screen root, the header, the alert row, the map container, the verify line, Repeat and hold-to-talk, the tab bar, and the `emu-f-*` / `emu-s-*` fills and strokes — is reused rather than restated, and only what this design draws differently is here. WHY THE ESCORT'S SCREEN IS NOT THE FLAGGER'S WITH A BIGGER MAP. An escort drives between crossings, so the map IS the screen and the alert rides on top of it: docs/alerts.md gives escorts "one alert strip, at the top of the map" and "the same row in compact form", where the flagger's sits inside a status strip below the header. That compact row is `.emu__alert--compact`, and it is the one place a shared component is modified rather than reused whole. THREE NEW THEME TOKENS, and they are additions rather than changes: `--n-ring`, `--n-sel` and `--n-sel-ink`. The ring is the dashed awareness circle around the crossing; the other two paint the selected Close/Area preset. All three sit in EmuFlagger's and NewFlagger's theme objects too with identical values, and are absent from `.nf` only because that markup never reaches them. FONT SIZES ON SVG TEXT STAY AS PRESENTATION ATTRIBUTES here, where `.emu__map-letter` above made one a class. They are literal numbers, not theme values, so `var()` never has to resolve in them — which is the whole reason the fills and strokes had to become classes (apps/site/README.md item 5). This map draws text at five sizes and five classes carrying one declaration each would be worse than the attributes the design already has. ========================================================================== */ /* --------------------------------------------------------------------------- Themed SVG fills and strokes this map adds ------------------------------------------------------------------------ */ .emu-f-surface { fill: var(--n-surface); } .emu-f-ink { fill: var(--n-ink); } .emu-f-label { fill: var(--n-label); } .emu-s-plane { stroke: var(--n-plane); } .emu-s-line { stroke: var(--n-line); } /* The dashed circle around the crossing. It marks the area the screen is about; it is not a range ring and nothing is read off its radius. */ .emu-s-ring { stroke: var(--n-ring); } /* --------------------------------------------------------------------------- Header: the crossing the phone's GPS picked, and the tap that changes it ----------------------------------------------------------------------------- The HCI skill (ch. 29) is explicit that an inferred context must be both SHOWN and correctable in one tap, because sensing intent fails often and the user pays for every failure. So the design wraps the crossing name in a button with a chevron, where the flagger's — which is assigned, not inferred — is plain text. The negative margin is the design's: it lets the 44px target overhang the two text lines without pushing them apart. ------------------------------------------------------------------------ */ .emu__post-pick { align-self: flex-start; min-height: 44px; margin: -6px 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; display: flex; align-items: center; gap: 6px; } .emu__post-chevron { flex-shrink: 0; opacity: 0.7; } /* --------------------------------------------------------------------------- The alert row, compact (docs/alerts.md: "Escorts get the same row in compact form") ------------------------------------------------------------------------ */ .emu__alert--compact { padding: 8px 12px; gap: 10px; } .emu__alert--compact .emu__alert-icon { width: 32px; height: 32px; border-radius: 16px; } .emu__alert--compact .emu__alert-text { line-height: 1.25; } /* One line-height for both lines, which is what makes the row compact rather than merely smaller. The headline also truncates: the map below it is the screen's subject and the row may not grow a second line and eat into it. docs/alerts.md allows this for the headline and NOT for the time — "the number and unit never split" — and the time is on the line below. */ .emu__alert--compact .emu__alert-head { font-size: 16px; line-height: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emu__alert--compact .emu__alert-sub { font-size: 13px; line-height: inherit; } /* --------------------------------------------------------------------------- The map ----------------------------------------------------------------------------- The container is `.emu__map`'s, with the design's own 10px top margin in place of the flagger's 12px — the compact alert row above it is shorter, so the gap is tightened to match. ------------------------------------------------------------------------ */ .emu__map--escort { margin-top: 10px; } /* THE TWO PRESETS, AS PLAIN DECLARATIONS KEYED OFF ONE CLASS. ----------------------------------------------------------------------------- `Close` is the resting state and carries no class; `Area` adds `.emu--area` to the screen root and three things change together: * `.emu__zoom` scales the whole map to 0.5 about the crossing; * `.emu__area` fades the wider airfield in; * `.emu__area-cover` fades the flat backdrop that hides it out; * `.emu__callout` fades the aircraft callout out, because at half size its 11px text is unreadable and a label nobody can read is clutter (the HCI skill's clutter test, ch. 3). WHY DECLARATIONS AND NOT AN ANIMATION. The preset is a STATE a visitor chose, not an event, so both ends of it have to be true with the transitions cancelled. site.css section 25 does exactly that for anyone who asked for less motion, and a visitor in the Area preset must still see the area. This is the same shape as `.try__tick`'s not-done state and the opposite of the defect task R1b found in the hero's approach lights. */ .emu__zoom { transform-origin: 150px 290px; transform: scale(1); } .emu--area .emu__zoom { transform: scale(0.5); } .emu__area { opacity: 0; } .emu--area .emu__area { opacity: 1; } .emu__area-cover { opacity: 1; } .emu--area .emu__area-cover { opacity: 0; } .emu__callout { opacity: 1; } .emu--area .emu__callout { opacity: 0; } /* Status, over the top-left corner of the map. Glass rather than the flagger's solid strip, because here it sits on the map instead of above it. HCI skill §0.6: box connected, data age, crossing, room and mic are all visible without a tap. */ .emu__mapstat { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 3px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--n-glass-line); background: var(--n-glass); box-shadow: var(--n-shadow); backdrop-filter: blur(12px); font-size: 12px; font-weight: 700; color: var(--n-ink); line-height: 1.2; } .emu__mapstat-row { display: flex; align-items: center; gap: 5px; } /* The Close / Area presets. ----------------------------------------------------------------------------- docs/maps.md: "large + / - buttons and Close/Area presets for gloves". Each is a real