/* ================================================================ Waypoint app — directory.css (2026-08-31) The Directory's protocol wall. Loaded AFTER css/style.css and layered on top of it: NOTHING in the shared sheet is edited by this file, and nothing here is invented. Every value below is copied from one of two places and cited on the rule: SITE — the marketing site, repo zn-dsgn/waypoint, css/style.css (its "supported platforms" marquee: .chain-card / .chain-logo / .cap-plus / .chain-name, from :945) APP — this app's shared sheet, waypoint-app/css/style.css (line numbers as of this commit) The card is the SITE's chain-card, re-hung on the app's page frame (--frame / --margin / --gutter) exactly as APP :2158 already re-skins the site's .cap-card chrome onto .svc-card. ================================================================ */ /* ---------- the modal engine, kept in the DOM but not shown ---------- js/app.js owns the service-detail modal. Its directory IIFE returns early unless `.svc-grid` holds at least one `.svc-card` (js/app.js:649), and its live overlay appends one WIRED card per live service the backend serves (js/app.js addLiveServices, :854). Those cards are the only things that can open the capability modal. So the old grid stays in the page as the engine — the brand wall below forwards a click to the matching hidden card, which reuses app.js's existing modal path verbatim instead of inventing a second one. The wrapper carries the `hidden` attribute; this restates it so no later rule can accidentally reveal it. */ #dir-engine { display: none !important; } /* ---------- section head ---------- The registry status sits in .app-head's second slot — the slot the app's own section heads already use (APP .app-head :1264, flex, space-between, align-items:flex-end), so the line rests on the h1's baseline edge. */ .pdir-status { font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-2); } /* == APP .cell-sub (:1353) — iOS Subhead */ .pdir-status i { margin-right: 7px; } /* == APP .panel-meta dot gap (7px, directory.html header) */ /* ---------- the wall ---------- Gap and top offset are APP .svc-grid's (:1388) unchanged. The column count is raised 3 -> 4 because these are the SITE's narrow, tall chain-cards, not the app's 220px-min service cards: SITE .chain-card is clamp(230px, 18vw, 300px) wide (:947). Inside the app's 1440 frame the content box is 1440 - 2*40 (--margin) = 1360px, so 4 columns put a card at (1360 - 3*20) / 4 = 325px — the closest this grid system gets to the SITE's 300px maximum without falling under its 230px minimum. (5 columns lands at 256px, also in band, but leaves 12 cards ragged as 5+5+2.) */ .pdir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: var(--gutter); } /* == APP .svc-grid (:1388), 4-up */ /* ---------- the card ---------- */ /* Surface, radius, padding, ratio and the bottom-left content stack are SITE .chain-card (:945) verbatim. The SITE also caps the card's WIDTH at 300px; that cap is deliberately not carried over — width here comes from the app's own grid track (325px at the 1440 frame) exactly as APP :2161 lets the site's card chrome take the app's wider .svc-grid track. The 4/5 ratio, which is what makes the card read as the site's, is kept intact. */ .pdir-card { position: relative; background: var(--card); border-radius: var(--r-lg); padding: 24px; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; transition: background 0.3s var(--ease); } /* == SITE .chain-card (:945) */ /* protocol logo — the SVG drives a MASK, so one colour paints the mark: muted at rest, ink when the protocol is live. Box, mask and transition are SITE .chain-logo (:966) verbatim. */ .pdir-logo { position: absolute; inset: 0; margin: auto; width: var(--lsize, 99px); height: var(--lsize, 99px); background-color: var(--mute-fill); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: background-color 0.3s var(--ease); } /* == SITE .chain-logo (:966) */ /* Monogram fallback — a live service the registry serves that is NOT one of the twelve known protocols still has to render. Wash, text colour and weight are APP .act-mono (:3580), which is this app's existing "protocol with no logo file" treatment. The tile is .pdir-logo's box; its radius is .act-logo's 7px on a 22px tile scaled to that box (7/22 * 99 = 31.5 -> 32px). The letter is APP's Large Title size (h1.app-title, :1266). */ .pdir-mono { position: absolute; inset: 0; margin: auto; width: var(--lsize, 99px); height: var(--lsize, 99px); border-radius: 32px; display: grid; place-items: center; background: var(--line); color: var(--text-2); font-size: 34px; font-weight: 500; line-height: 41px; text-transform: uppercase; } /* == APP .act-mono (:3580) in .chain-logo's box */ /* name + sub-line, bottom-left (the SITE card's content corner) */ .pdir-name { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; } /* == SITE .chain-name (:991) */ .pdir-sub { margin-top: 8px; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--text-3); } /* size/colour == APP .svc-meta (:1385); 8px offset == APP .svc-card .svc-meta (:2196) */ /* status tag, top-left — the corner the SITE card gives .cap-plus (SITE .chain-card .cap-plus { right:auto; left:16px } :963, over .cap-plus { top:16px } :1083). The pill itself is APP's own status tag, .svc-card .dir-status (:2186), restated here because this card is not a .svc-card and that rule is scoped to one. */ .pdir-tag { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 400; letter-spacing: 0.01em; padding: 3px 8px; border-radius: 999px; background: var(--wash); color: var(--text-3); } /* == APP .svc-card .dir-status (:2186) */ .pdir-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok-bright); } /* == APP .svc-card .dir-status i (:2192) */ .pdir-tag.soon i { background: var(--mute-fill); } /* == APP .svc-card .dir-status.review i (:2194) — the muted "not yet" dot */ /* corner go-arrow, live cards only — APP .svc-card .dir-go (:2164) verbatim, restated for the same reason (that rule is scoped to .svc-card). */ .pdir-go { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--line); display: grid; place-items: center; color: var(--ink); transition: background 0.25s var(--ease), color 0.25s var(--ease); } /* == APP .svc-card .dir-go (:2164) */ .pdir-go svg { width: 18px; height: 18px; } /* == APP .svc-card .dir-go svg (:2171) */ /* ---------- LIVE ---------- A live protocol wears the SITE card's hover state at rest: full-ink mark (SITE .chain-card:hover .chain-logo, :977) plus the app's pointer/hover affordances. Hovering it then takes the SITE's own card-hover grey. */ .pdir-card.is-live { cursor: pointer; } /* == APP .svc-card (:1364) */ .pdir-card.is-live .pdir-logo { background-color: var(--ink); } /* == SITE .chain-card:hover .chain-logo (:977) */ .pdir-card.is-live:hover { background: var(--grey); } /* == SITE .chain-card:hover (:959) */ .pdir-card.is-live:hover .pdir-go { background: var(--ink); color: var(--white); } /* == APP .svc-card:hover .dir-go (:2172) */ .pdir-card.is-live:focus-visible { outline: 2px solid var(--text-4); outline-offset: -2px; } /* == APP #connect-modal .cn-svc:focus-visible (:3372) — the app's existing keyboard ring for a clickable card on a light surface. The radius that rule adds is unnecessary here: .pdir-card already carries var(--r-lg). */ /* ---------- COMING SOON ---------- The SITE card's RESTING state already IS the de-emphasised one (the mark sits at rgba(38,38,38,.22) until hover), so a coming-soon card is simply that state frozen: no pointer, no hover lift, and the name dropped to the app's muted meta tone so the live names read first. */ .pdir-card.is-soon { cursor: default; } .pdir-card.is-soon .pdir-name { color: var(--text-3); } /* == APP .svc-meta colour (:1385) */ /* ---------- responsive ---------- Below the frame the column count is not stepped by hand at all: it auto-fills on the SITE's OWN minimum card width, clamp(230px, ...) (:947). That single rule keeps every card inside the width band the card was designed for at every viewport — 4-up at 1200, 3-up around 1000, 2-up on a small tablet, 1-up on a phone — which a hand-stepped ladder (the app's 3/2/1 at :1621 and :1626) cannot do here, because a 4/5 card that is free to grow gets very tall when a fixed column count hands it 450px of width. 1200px is where the fixed 4-up above and the auto-fill below agree on four columns, so the handover is seamless. */ @media (max-width: 1200px) { .pdir-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* 230px == SITE .chain-card min width (:947) */ } /* On touch the SITE drops its card-hover tint outright, because a tap leaves a sticky :hover behind (SITE :983). Same reasoning, same rules, here. */ @media (max-width: 760px), (pointer: coarse) { .pdir-card.is-live:hover { background: var(--card); } .pdir-card.is-live:hover .pdir-go { background: var(--line); color: var(--ink); } }