/* ============================================================ ETHAN PTACEK — the command layer A keyboard palette (⌘K) in the site's own paper grammar: hairline rules, mono labels, one vermillion marker, no icons. Loaded on every page. Inherits every token from styles.css, so it follows the paper/ink themes without knowing about them. ============================================================ */ /* ---------- masthead trigger ---------- Hidden until script.js sets .js on — a button that can't open anything should never be painted. */ .cmdk-trigger { display: none; } html.js .cmdk-trigger { display: inline-flex; align-items: center; gap: 9px; appearance: none; cursor: pointer; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px 6px 14px; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.22s, border-color 0.22s; } .cmdk-trigger:hover { color: var(--ink); border-color: var(--line-strong); } .cmdk-trigger kbd { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.04em; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; transition: border-color 0.22s; } .cmdk-trigger:hover kbd { border-color: var(--line-strong); } /* the masthead keeps its links hard right; the trigger sits beside them on desktop and pairs with Menu on mobile */ @media (min-width: 761px) { .nav-links { margin-left: auto; } .cmdk-trigger { order: 3; } } @media (max-width: 760px) { .cmdk-trigger { order: 3; margin-left: auto; } .nav-mobile-toggle { order: 4; } .cmdk-trigger { padding: 6px 12px; } .cmdk-trigger kbd { display: none; } } /* ---------- the dialog ---------- A native , so focus trapping, inertness, the top layer and Escape are the platform's job rather than ours. */ dialog.cmdk { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; padding: 0; border: 0; background: transparent; overflow: hidden; } dialog.cmdk[open] { display: flex; align-items: flex-start; justify-content: center; padding: clamp(48px, 12vh, 140px) 16px 16px; } /* literal colours — ::backdrop inheritance is still uneven */ dialog.cmdk::backdrop { background: rgba(20, 18, 14, 0); transition: background 0.11s ease-out; } dialog.cmdk.is-open::backdrop { background: rgba(20, 18, 14, 0.44); } body.cmdk-open { overflow: hidden; } .cmdk-panel { width: min(560px, 100%); max-height: min(68vh, 560px); display: flex; flex-direction: column; background: var(--grain) var(--paper); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift); opacity: 0; transform: translateY(-4px) scale(0.985); transition: opacity 0.11s ease-out, transform 0.11s ease-out; } dialog.cmdk.is-open .cmdk-panel { opacity: 1; transform: none; } /* on paper the panel and the page share a ground and the border is enough; in ink they'd be the same near-black, so lift the panel */ :root[data-theme="dark"] .cmdk-panel { background: var(--grain) var(--paper-deep); } :root[data-theme="dark"] .cmdk-item[aria-selected="true"] { background: var(--paper-edge); } /* ---------- search row ---------- */ .cmdk-head { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px 0 18px; border-bottom: 1px solid var(--line); flex: none; } .cmdk-mark { font-family: var(--serif); font-size: 1.5rem; line-height: 0; color: var(--accent); transform: translateY(2px); } .cmdk-input { flex: 1; min-width: 0; appearance: none; border: 0; background: none; font-family: var(--sans); font-size: 0.95rem; line-height: 1.4; color: var(--ink); } .cmdk-input:focus { outline: none; } .cmdk-input::placeholder { color: var(--ink-faint); } .cmdk-input::-webkit-search-cancel-button { display: none; } .cmdk-esc { flex: none; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px; } /* ---------- results ---------- */ .cmdk-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 10px; scrollbar-width: thin; } .cmdk-group + .cmdk-group { border-top: 1px solid var(--line); } .cmdk-group-label { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); padding: 14px 18px 7px; } .cmdk-item { display: flex; align-items: baseline; gap: 12px; padding: 8px 18px 8px 16px; border-left: 2px solid transparent; cursor: pointer; scroll-margin: 12px 0; } .cmdk-item[aria-selected="true"] { background: var(--paper-deep); border-left-color: var(--accent); } .cmdk-name { flex: none; font-size: 0.9rem; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; } .cmdk-desc { flex: 1; min-width: 0; font-size: 0.78rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk-meta { flex: none; font-family: var(--mono); font-size: 0.5975rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .cmdk-item[aria-selected="true"] .cmdk-meta { color: var(--ink-soft); } .cmdk-meta-hot { color: var(--accent); } .cmdk-empty { padding: 26px 18px 22px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-faint); } .cmdk-empty strong { color: var(--ink-soft); font-weight: 500; } /* ---------- hint bar ---------- */ .cmdk-foot { display: flex; align-items: center; gap: 16px; flex: none; padding: 9px 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.5975rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; } .cmdk-foot .cmdk-sig { margin-left: auto; } .cmdk-foot i { font-style: normal; color: var(--ink-soft); } /* screen-reader-only announcements (copy confirmations, counts) */ .cmdk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- touch ---------- */ @media (max-width: 640px) { dialog.cmdk[open] { padding: 0; align-items: stretch; } .cmdk-panel { width: 100%; max-height: 100%; height: 100%; border-left: 0; border-right: 0; border-top: 0; } .cmdk-head { height: 60px; } /* 16px keeps iOS from zooming the viewport on focus */ .cmdk-input { font-size: 16px; } .cmdk-item { padding-top: 12px; padding-bottom: 12px; } .cmdk-desc { display: none; } .cmdk-foot { display: none; } .cmdk-esc { display: none; } } /* ---------- motion preferences ---------- styles.css already flattens durations; this removes the transform outright so nothing moves at all. */ @media (prefers-reduced-motion: reduce) { .cmdk-panel { transform: none; } }