/* =========================================================== Kingstoring Vector — JS enhancement layer styles Each block is keyed to a module under vector-site/js/. No new colors: tokens.css is the single source of truth. =========================================================== */ /* ----------------------------------------------------------- Animation primitives shared by several modules. ----------------------------------------------------------- */ :root { --vk-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --vk-ease-in: cubic-bezier(0.7, 0, 0.84, 0); } @keyframes ks-scanline-down { 0% { transform: translateY(-100%); opacity: 0.9; } 60% { opacity: 0.9; } 100% { transform: translateY(100%); opacity: 0; } } @keyframes ks-fade-up { 0% { opacity: 0; transform: translateY(14px); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes ks-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } @keyframes ks-sweep-horizontal { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ----------------------------------------------------------- theme-toggle.js — Daylight theme overrides Toggle: ----------------------------------------------------------- */ html { transition: background-color .3s var(--vk-ease-out), color .3s var(--vk-ease-out); } html[data-ks-theme="daylight"] { --vk-ink: #F0F0F0; --vk-ink-2: #F6F8FA; --vk-ink-3: #D0D7DE; --vk-ivory: #24292F; --vk-mist: #57606A; --vk-paper: #FFFFFF; --vk-bone: #F6F8FA; --vk-fog: #D0D7DE; --vk-graphite: #24292F; --vk-slate: #57606A; } /* Surfaces should also crossfade */ html[data-ks-theme="daylight"] body, html[data-ks-theme="daylight"] body * { transition: background-color .3s var(--vk-ease-out), color .3s var(--vk-ease-out), border-color .3s var(--vk-ease-out); } /* ----------------------------------------------------------- reveal.js — section scanline reveal Target: any [data-ks-reveal] or
auto-tagged by core ----------------------------------------------------------- */ [data-ks-reveal] { position: relative; } [data-ks-reveal][data-ks-reveal-state="pending"] > *:not([data-ks-reveal-scanline]) { opacity: 0; } [data-ks-reveal-scanline] { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--vk-amber), transparent); pointer-events: none; z-index: 5; opacity: 0; } [data-ks-reveal][data-ks-reveal-state="playing"] > [data-ks-reveal-scanline] { animation: ks-scanline-down 600ms var(--vk-ease-out) forwards; } [data-ks-reveal][data-ks-reveal-state="playing"] > *:not([data-ks-reveal-scanline]) { animation: ks-fade-up 600ms var(--vk-ease-out) forwards; animation-delay: var(--ks-reveal-delay, 0ms); } [data-ks-reveal][data-ks-reveal-state="done"] > *:not([data-ks-reveal-scanline]) { opacity: 1; } /* ----------------------------------------------------------- live-dashboard.js — sparkline canvas + status feed Target: [data-ks-live-dashboard] ----------------------------------------------------------- */ [data-ks-sparkline] canvas { display: block; width: 100%; height: 32px; } [data-ks-counter][data-ks-counting="true"] { transition: color .15s var(--vk-ease-out); } /* Status-feed line typewriter cursor */ [data-ks-dash-feed]::after { content: "▌"; margin-left: 4px; color: var(--vk-amber); animation: ks-blink 1.1s steps(1) infinite; } /* ----------------------------------------------------------- command-palette.js — ⌘K / Ctrl+K ----------------------------------------------------------- */ .ks-cmdk-backdrop { position: fixed; inset: 0; background: rgba(13, 17, 23, 0.78); backdrop-filter: blur(6px); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; opacity: 0; transition: opacity .18s var(--vk-ease-out); } .ks-cmdk-backdrop[data-state="open"] { opacity: 1; } .ks-cmdk-panel { width: min(640px, 92vw); background: var(--vk-ink-2); color: var(--vk-ivory); border: 1px solid var(--vk-ink-3); font-family: var(--vk-font-mono); box-shadow: 0 24px 72px rgba(0,0,0,.55); display: flex; flex-direction: column; max-height: 70vh; overflow: hidden; transform: translateY(-8px); transition: transform .22s var(--vk-ease-out); } .ks-cmdk-backdrop[data-state="open"] .ks-cmdk-panel { transform: translateY(0); } .ks-cmdk-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--vk-ink-3); } .ks-cmdk-prompt { color: var(--vk-amber); font-size: 12px; letter-spacing: 0.18em; } .ks-cmdk-input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--vk-ivory); font: 14px/1 var(--vk-font-mono); caret-color: var(--vk-amber); } .ks-cmdk-hint { font-size: 10px; color: var(--vk-mist); letter-spacing: 0.18em; } .ks-cmdk-list { list-style: none; padding: 8px; margin: 0; overflow: auto; } .ks-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 13px; border-left: 2px solid transparent; cursor: pointer; } .ks-cmdk-item[aria-selected="true"] { background: var(--vk-ink-3); border-left-color: var(--vk-amber); } .ks-cmdk-item .ks-cmdk-code { color: var(--vk-amber); font-size: 10px; letter-spacing: 0.2em; min-width: 70px; } .ks-cmdk-item .ks-cmdk-label { flex: 1; } .ks-cmdk-item .ks-cmdk-tag { font-size: 9px; letter-spacing: 0.18em; color: var(--vk-mist); } .ks-cmdk-item mark { background: transparent; color: var(--vk-amber); font-weight: 600; } .ks-cmdk-group-h { padding: 10px 12px 4px; font-size: 10px; letter-spacing: 0.22em; color: var(--vk-mist); } .ks-cmdk-foot { border-top: 1px solid var(--vk-ink-3); padding: 8px 14px; font-size: 10px; letter-spacing: 0.18em; color: var(--vk-mist); display: flex; gap: 18px; justify-content: space-between; } /* ----------------------------------------------------------- cursor-tactical.js — viseur tactical sur fond ink ----------------------------------------------------------- */ html[data-ks-cursor="tactical"] body { cursor: none; } html[data-ks-cursor="tactical"] a, html[data-ks-cursor="tactical"] button, html[data-ks-cursor="tactical"] [role="button"] { cursor: none; } .ks-reticle { position: fixed; left: 0; top: 0; width: 24px; height: 24px; margin-left: -12px; margin-top: -12px; pointer-events: none; z-index: 9999; transition: opacity .18s var(--vk-ease-out); will-change: transform; } .ks-reticle svg { display: block; } .ks-reticle-circle { stroke: var(--vk-ivory); stroke-width: 1; fill: none; } .ks-reticle-cross { stroke: var(--vk-ivory); stroke-width: 1; } .ks-reticle[data-hot="true"] .ks-reticle-circle, .ks-reticle[data-hot="true"] .ks-reticle-cross { stroke: var(--vk-amber); } .ks-reticle-coords { position: absolute; left: 22px; top: 18px; font: 10px/1 var(--vk-font-mono); color: var(--vk-mist); letter-spacing: 0.1em; white-space: nowrap; } html[data-ks-cursor="tactical"] .ks-reticle[data-hot="true"] .ks-reticle-coords { color: var(--vk-amber); } .ks-reticle-trail { position: fixed; left: 0; top: 0; width: 4px; height: 4px; margin-left: -2px; margin-top: -2px; border-radius: 50%; background: var(--vk-ivory); pointer-events: none; z-index: 9998; opacity: 0; } /* ----------------------------------------------------------- ticker-interactive.js — pause + drawer ----------------------------------------------------------- */ [data-ks-ticker][data-paused="true"] [data-ks-ticker-track] { animation-play-state: paused; } [data-ks-ticker-item]:hover { background: rgba(255,180,0,0.08); } [data-ks-ticker-item][data-pinned="true"] { background: rgba(255,180,0,0.12); border-bottom: 1px solid var(--vk-amber) !important; } .ks-ticker-drawer { position: fixed; left: 0; right: 0; top: 0; background: var(--vk-ink-2); color: var(--vk-ivory); border-bottom: 1px solid var(--vk-amber); z-index: 60; transform: translateY(-100%); transition: transform .28s var(--vk-ease-out); } .ks-ticker-drawer[data-state="open"] { transform: translateY(0); } .ks-ticker-drawer-inner { max-width: 1440px; margin: 0 auto; padding: 28px 32px; display: grid; grid-template-columns: 1fr 2fr; gap: 32px; font-family: var(--vk-font-mono); } .ks-ticker-drawer-close { position: absolute; right: 16px; top: 12px; background: transparent; border: 0; color: var(--vk-mist); font: 11px/1 var(--vk-font-mono); letter-spacing: 0.18em; cursor: pointer; } .ks-ticker-drawer canvas { width: 100%; height: 160px; display: block; } .ks-ticker-pin { display: inline-block; margin-left: 8px; font: 9px/1 var(--vk-font-mono); letter-spacing: 0.18em; color: var(--vk-mist); background: transparent; border: 1px solid var(--vk-ink-3); padding: 3px 6px; cursor: pointer; } .ks-ticker-pin[data-pinned="true"] { color: var(--vk-ink); background: var(--vk-amber); border-color: var(--vk-amber); } /* ----------------------------------------------------------- reading-mode.js — progress bar, focus, TOC highlight ----------------------------------------------------------- */ .ks-reading-progress { position: fixed; left: 0; top: 0; height: 2px; width: 0%; background: var(--vk-amber); z-index: 50; transition: width .08s linear; } [data-ks-note-toc] li.is-active a { color: var(--vk-amber); } [data-ks-note-toc] li a { color: var(--vk-slate); display: block; padding: 4px 0; border-left: 2px solid var(--vk-fog); padding-left: 10px; transition: color .2s var(--vk-ease-out), border-color .2s var(--vk-ease-out); } [data-ks-note-toc] li.is-active a { border-left-color: var(--vk-amber); } html[data-ks-focus="true"] body { background: var(--vk-ink); color: var(--vk-ivory); } html[data-ks-focus="true"] [data-ks-reading-mode="focused"] { background: var(--vk-ink) !important; color: var(--vk-ivory) !important; } html[data-ks-focus="true"] [data-ks-reading-mode]:not([data-ks-reading-mode="focused"]) { display: none !important; } html[data-ks-focus="true"] header, html[data-ks-focus="true"] [data-ks-ticker], html[data-ks-focus="true"] footer { display: none !important; } [data-ks-reading-mode="focused"] [data-ks-note-body] { font-size: 18px; line-height: 1.7; max-width: 720px; margin: 0 auto; } [data-ks-reading-mode="focused"] [data-ks-note-body] p, [data-ks-reading-mode="focused"] [data-ks-note-body] h3 { color: var(--vk-ivory) !important; } /* Print: reading-mode.js triggers window.print() */ @media print { [data-ks-ticker], header, footer, .ks-reading-progress, .ks-reticle, .ks-reticle-trail, [data-ks-note-toc], [data-ks-note-focus], [data-ks-note-export] { display: none !important; } body { background: #fff !important; color: #000 !important; } [data-ks-reading-mode] { page-break-inside: avoid; padding: 24px 0 !important; } } /* ----------------------------------------------------------- confidentiality-gate.js — terminal style boot screen ----------------------------------------------------------- */ .ks-gate { background: var(--vk-ink); color: var(--vk-ivory); border: 1px solid var(--vk-ink-3); padding: 32px; font-family: var(--vk-font-mono); font-size: 13px; line-height: 1.85; position: relative; } .ks-gate h4 { font-family: var(--vk-font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--vk-amber); margin: 0 0 18px; } .ks-gate-log { list-style: none; padding: 0; margin: 0 0 18px; min-height: 6em; } .ks-gate-log li { opacity: 0; color: var(--vk-mist); transition: opacity .2s var(--vk-ease-out); } .ks-gate-log li[data-shown="true"] { opacity: 1; } .ks-gate-log li[data-state="ok"]::after { content: " ✓"; color: var(--vk-green); } .ks-gate-log li[data-state="ok"] { color: var(--vk-ivory); } .ks-gate-cta { background: var(--vk-amber); color: var(--vk-ink); border: 0; font: 600 12px/1 var(--vk-font-mono); letter-spacing: 0.18em; padding: 14px 22px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s var(--vk-ease-out); } .ks-gate-cta[data-ready="true"] { opacity: 1; pointer-events: auto; } [data-ks-confidentiality-gate][data-state="locked"] form { display: none; } [data-ks-confidentiality-gate][data-state="locked"] > .ks-gate-host { display: block; } [data-ks-confidentiality-gate]:not([data-state="locked"]) > .ks-gate-host { display: none; } /* ----------------------------------------------------------- form-intelligent.js — validation + sensitivity pills ----------------------------------------------------------- */ [data-ks-form] input:focus, [data-ks-form] textarea:focus { outline: 2px solid var(--vk-amber); outline-offset: 0; } [data-ks-form][data-sensitivity="public"] { box-shadow: inset 0 0 0 1px var(--vk-blue); } [data-ks-form][data-sensitivity="confidential"] { box-shadow: inset 0 0 0 1px var(--vk-amber); } [data-ks-form][data-sensitivity="restricted"] { box-shadow: inset 0 0 0 1px var(--vk-red); } [data-ks-sensitivity-pill][data-selected="true"] { color: var(--vk-ink) !important; background: var(--ks-sens-color, var(--vk-amber)); border-color: var(--ks-sens-color, var(--vk-amber)) !important; } [data-ks-form-field-error] { display: block; font-family: var(--vk-font-mono); font-size: 11px; color: var(--vk-red); margin-top: 6px; } [data-ks-form-status][data-tone="working"] { color: var(--vk-amber); } [data-ks-form-status][data-tone="ok"] { color: var(--vk-green); } [data-ks-form-status][data-tone="error"] { color: var(--vk-red); } /* ----------------------------------------------------------- page-transitions.js — fade out + amber sweep ----------------------------------------------------------- */ .ks-transition-sweep { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; } .ks-transition-sweep::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, transparent 0%, var(--vk-amber) 50%, transparent 100%); transform: translateX(-100%); animation: ks-sweep-horizontal 300ms var(--vk-ease-out) forwards; } html[data-ks-transition="out"] body { opacity: 0.4; transition: opacity .25s var(--vk-ease-out); } /* View Transitions API */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; animation-timing-function: var(--vk-ease-out); } /* ----------------------------------------------------------- live-clock.js — footer clock cursor ----------------------------------------------------------- */ [data-ks-live-clock] { cursor: pointer; user-select: none; } [data-ks-live-clock]:hover { color: var(--vk-amber) !important; } /* ----------------------------------------------------------- prefers-reduced-motion — disable scanlines / ticker / trails ----------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-ks-ticker-track] { animation: none !important; } [data-ks-reveal] > * { animation: none !important; opacity: 1 !important; } [data-ks-reveal-scanline] { display: none !important; } .ks-reticle-trail, .ks-transition-sweep::before { animation: none !important; opacity: 0 !important; } .ks-reticle { transition: none !important; } [data-ks-dash-feed]::after { animation: none !important; } } /* ----------------------------------------------------------- Focus visible — amber outline everywhere ----------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--vk-amber); outline-offset: 2px; }