/* ========================================================================== HyperApp NEXT — the vertical, cover-led shell. Loaded always, inert unless carries .nx-on (see next-ui.js). It wraps the existing panes rather than replacing them: the deck and the feed are new surfaces, while chat, the Studio and the markdown/offers renderer are the same code as before, shown inside a NEXT sheet. Colours come from the app's own tokens (--accent, --accent-2, --panel …) so the light/dark toggle keeps working here. ========================================================================== */ :root { --nx-tab: 62px; --nx-max: 520px; /* the shell is a phone column, centred on desktop */ --nx-ink: #ffffff; /* text over cover art is always light */ --nx-scrim: rgba(8, 9, 13, 0.94); } /* ── Shell ───────────────────────────────────────────────────────────────── */ /* Legacy chrome stands down while NEXT is on. The nodes stay in the DOM — renderDashPane() and friends still write into them. */ body.nx-on #myhyperapp-header, body.nx-on .dash-toolbar, body.nx-on header.app, body.nx-on #personality-banner { display: none !important; } body.nx-on { overflow: hidden; height: 100%; background: var(--bg); } body.nx-on .wrap { max-width: none; margin: 0; padding: 0; height: 100dvh; overflow: hidden; } body.nx-on #picker-view, body.nx-on #results-view { display: none !important; } body.nx-on.nx-legacy #picker-view { display: block !important; } .nx-root { position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; } body.nx-on .nx-root { display: flex; } body.nx-on.nx-legacy .nx-root { display: none; } .nx-stage { flex: 1; min-height: 0; position: relative; width: 100%; max-width: var(--nx-max); margin: 0 auto; } /* ── Bottom tab bar ──────────────────────────────────────────────────────── */ .nx-tabs { flex: none; display: flex; z-index: 4; width: 100%; max-width: var(--nx-max); margin: 0 auto; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px); padding-bottom: env(safe-area-inset-bottom, 0px); } .nx-tab { flex: 1; min-height: var(--nx-tab); display: grid; gap: 3px; justify-items: center; align-content: center; background: none; border: 0; cursor: pointer; color: var(--muted); font: inherit; font-size: 10px; letter-spacing: 0.04em; } .nx-tab .nx-gl { width: 20px; height: 20px; display: block; } .nx-tab[aria-selected="true"] { color: var(--text); } .nx-tab[aria-selected="true"] .nx-gl { color: var(--accent-2); } .nx-tab.nx-tab-make .nx-gl { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0d0f14; font-size: 20px; font-weight: 800; line-height: 1; } .nx-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; } /* ── Cover art ───────────────────────────────────────────────────────────── */ /* Every interest has a face. Until real covers are generated (see tools/build-interest-covers.js in the plan) this is a deterministic gradient derived from the interest name, so the same topic always looks the same. */ .nx-art { position: relative; overflow: hidden; background: var(--panel-2); } .nx-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; } .nx-art > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Screens ─────────────────────────────────────────────────────────────── */ .nx-screen { position: absolute; inset: 0; display: none; flex-direction: column; } .nx-screen.on { display: flex; } .nx-top { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 10px; } .nx-top h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; } .nx-top .nx-sub { font-size: 12px; color: var(--muted); } .nx-top .nx-spacer { flex: 1; } .nx-ghost { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 12px; cursor: pointer; min-height: 40px; } .nx-ghost:hover { border-color: var(--accent); color: var(--text); } /* ── Deck (onboarding) ───────────────────────────────────────────────────── */ .nx-prog { flex: none; height: 4px; margin: 0 16px; border-radius: 3px; background: var(--panel-2); overflow: hidden; } .nx-prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.25s ease; } @media (prefers-reduced-motion: reduce) { .nx-prog i { transition: none; } } .nx-deck { flex: 1; min-height: 0; position: relative; margin: 14px 16px 0; } .nx-dcard { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,0.45); touch-action: none; user-select: none; -webkit-user-select: none; } .nx-dcard.d1 { transform: translateY(8px) scale(0.97); filter: brightness(0.8); } .nx-dcard.d2 { transform: translateY(16px) scale(0.94); filter: brightness(0.6); } .nx-dcard.drag { transition: none; } .nx-dcard.settle { transition: transform 0.28s cubic-bezier(.2,.7,.3,1), opacity 0.28s ease; } @media (prefers-reduced-motion: reduce) { .nx-dcard.settle { transition: none; } } .nx-dlab { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 16px 18px; color: var(--nx-ink); background: linear-gradient(to top, rgba(8,9,13,0.92), rgba(8,9,13,0.35) 55%, transparent); } .nx-dlab .n { font-size: 25px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; text-wrap: balance; } .nx-dlab .m { font-size: 12px; color: rgba(255,255,255,0.72); margin-top: 5px; } .nx-stamp { position: absolute; top: 18px; z-index: 4; opacity: 0; border: 3px solid currentColor; border-radius: 9px; padding: 4px 11px; font-size: 17px; font-weight: 900; letter-spacing: 0.12em; } .nx-stamp.keep { left: 16px; color: var(--ok); transform: rotate(-12deg); } .nx-stamp.skip { right: 16px; color: var(--err); transform: rotate(12deg); } .nx-deckbar { flex: none; display: flex; justify-content: center; gap: 22px; padding: 18px 0 22px; } .nx-round { width: 62px; height: 62px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 24px; line-height: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); } .nx-round.keep { border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0d0f14; } .nx-round:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .nx-deckdone { flex: 1; display: grid; place-content: center; gap: 14px; padding: 24px; text-align: center; } .nx-deckdone h3 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; } .nx-deckdone p { margin: 0; color: var(--muted); font-size: 14px; } /* ── Feed ────────────────────────────────────────────────────────────────── */ .nx-feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nx-feed::-webkit-scrollbar { display: none; } .nx-fcard { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .nx-fcard .nx-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, var(--nx-scrim) 6%, rgba(8,9,13,0.42) 38%, transparent 66%); } .nx-fcopy { position: relative; z-index: 3; display: grid; gap: 9px; padding: 18px 74px 22px 18px; color: var(--nx-ink); } .nx-kick { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); } .nx-hl { font-size: 30px; font-weight: 800; letter-spacing: -0.038em; line-height: 1.04; text-wrap: balance; } .nx-dek { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.74); } .nx-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; } .nx-act { border: 1px solid rgba(255,255,255,0.32); background: rgba(255,255,255,0.14); color: var(--nx-ink); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px; backdrop-filter: blur(6px); } .nx-act.hot { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0d0f14; } .nx-act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .nx-rail { position: absolute; right: 10px; bottom: 108px; z-index: 4; display: grid; gap: 14px; justify-items: center; } .nx-rbtn { width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); color: var(--nx-ink); backdrop-filter: blur(6px); } .nx-rbtn svg { width: 21px; height: 21px; } .nx-rbtn.on { color: var(--accent-2); border-color: var(--accent-2); } .nx-rbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .nx-rlab { font-size: 10px; color: rgba(255,255,255,0.8); margin-top: -10px; } .nx-fcard video, .nx-fcard .nx-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .nx-hint { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 34px; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent); } .nx-empty { display: grid; place-content: center; gap: 12px; height: 100%; padding: 28px; text-align: center; } .nx-empty h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; } .nx-empty p { margin: 0; color: var(--muted); font-size: 14px; } /* ── Sheet — wraps the existing panes (chat, Studio) ─────────────────────── */ .nx-sheet { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; background: var(--bg); } .nx-sheet.on { display: flex; } .nx-sheet-head { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; border-bottom: 1px solid var(--line); } .nx-back { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); display: grid; place-items: center; font-size: 18px; line-height: 1; } .nx-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nx-sheet-title { font-size: 17px; font-weight: 800; letter-spacing: -0.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* The legacy pane is re-parented in here; let it fill the sheet. */ .nx-sheet-body > .dash-pane { flex: 1; min-height: 0; margin: 0; border-radius: 0; border: 0; overflow-y: auto; } /* The sheet header already names the topic — the pane's own

would say it twice. The session bar beside it stays. / .nx-sheet-body > .dash-pane > .dash-head > h2 { display: none; } .nx-sheet-body > .dash-pane > .dash-head { min-height: 0; } / ── You ─────────────────────────────────────────────────────────────────── / / A plain vertical stack. It was a grid, but grid track sizing measures a clipped child (the PersonalityDNA card, which needs overflow:hidden to round its art) as its 2px border and lets the tiles below overlap it. Flex column has no such interaction. / .nx-you { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 22px; display: flex; flex-direction: column; gap: 16px; } .nx-you-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .nx-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; cursor: pointer; border: 0; padding: 0; text-align: left; } .nx-tile .nx-tname { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 8px 8px; color: var(--nx-ink); font-size: 12px; font-weight: 700; line-height: 1.2; background: linear-gradient(to top, rgba(8,9,13,0.9), transparent); } .nx-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nx-row { display: flex; flex-wrap: wrap; gap: 8px; } .nx-stat { display: flex; gap: 18px; padding: 2px 2px 0; } .nx-stat div { display: grid; gap: 2px; } .nx-stat b { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .nx-stat span { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; } / ── Answer card story ───────────────────────────────────────────────────── / / A rendered reply is re-laid-out as a horizontal card set. The prose is kept intact underneath and one tap away — some questions deserve paragraphs. / .nx-story { display: grid; gap: 10px; margin: 4px 0 2px; } .nx-story-track { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; } .nx-story-track::-webkit-scrollbar { display: none; } .nx-scard { flex: 0 0 min(78%, 300px); scroll-snap-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .nx-scard .nx-scap { height: 84px; flex: none; } .nx-scard .nx-sin { padding: 13px 14px 15px; display: grid; gap: 7px; align-content: start; } .nx-scard .nx-sk { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); } .nx-scard .nx-sh { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; } .nx-scard .nx-sb { font-size: 13.5px; line-height: 1.5; color: var(--text); } .nx-scard .nx-sb p:first-child { margin-top: 0; } .nx-scard .nx-sb p:last-child { margin-bottom: 0; } .nx-story-foot { display: flex; align-items: center; gap: 10px; } .nx-dots { display: flex; gap: 4px; flex: 1; } .nx-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); transition: width 0.2s ease; } .nx-dots i.on { width: 15px; border-radius: 3px; background: var(--accent-2); } @media (prefers-reduced-motion: reduce) { .nx-dots i { transition: none; } } .nx-readtext { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12px; cursor: pointer; } .nx-readtext:hover { border-color: var(--accent); color: var(--text); } .nx-storied > .nx-prose { display: none; } .nx-storied.nx-prose-on > .nx-prose { display: block; } .nx-storied.nx-prose-on > .nx-story .nx-story-track { display: none; } / ── Desktop: the shell stays a phone column, on a quiet ground ──────────── / @media (min-width: 760px) { body.nx-on .nx-root { background: var(--panel); } .nx-stage, .nx-tabs { box-shadow: 0 0 0 1px var(--line); background: var(--bg); } .nx-stage { border-radius: 0; } } / ── PersonalityDNA ──────────────────────────────────────────────────────── / / The Inventory is what makes replies personal, so it gets a real card rather than a line of small print. The test itself now runs on the same palette (see PersonalityDNA.html :root) and follows the theme toggle. / .nx-pdna { display: grid; grid-template-columns: 108px 1fr; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; / overflow:hidden is needed to clip the art to the radius, but it also suppresses this box's automatic minimum size — as a grid item its track then collapses to the 2px border. min-content puts the content-based minimum back without giving up the clip. */ min-height: min-content; } .nx-pdna-art { position: relative; min-height: 100%; } .nx-pdna-type { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: 0.06em; text-shadow: 0 2px 12px rgba(0,0,0,0.5); } .nx-pdna-in { padding: 15px 16px 16px; display: grid; gap: 8px; align-content: start; } .nx-pdna-h { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.14; text-wrap: balance; } .nx-pdna-p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); } .nx-pdna .nx-act, .nx-pdna .nx-ghost { justify-self: start; } .nx-pdna .nx-act { border-color: transparent; } .nx-pdna-tag { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; } .nx-linkish { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; } .nx-linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } @media (max-width: 380px) { .nx-pdna { grid-template-columns: 1fr; } .nx-pdna-art { min-height: 96px; } }