kward 0.69.1 → 0.70.0

data/templates/default/fulldoc/html/css/kward.css

@@ -14,6 +14,26 @@
 
 html {
   background: var(--kward-bg);
+  color-scheme: dark;
+}
+
+.kward-skip-link {
+  background: var(--kward-accent);
+  border-radius: 0 0 8px 8px;
+  color: #030604;
+  font-weight: 700;
+  left: 50%;
+  padding: 10px 20px;
+  position: fixed;
+  text-decoration: none;
+  top: 0;
+  transform: translateY(-100%);
+  transition: transform 120ms ease;
+  z-index: 9400;
+}
+
+.kward-skip-link:focus {
+  transform: translateY(0);
 }
 
 body.kward-docs {
@@ -28,15 +48,9 @@ body.kward-docs {
   min-height: 100%;
   opacity: 1;
   overflow: auto;
-  transition: opacity 120ms ease;
   width: 100%;
 }
 
-html.kward-page-loading body.kward-docs {
-  cursor: progress;
-  opacity: 0.72;
-}
-
 body.kward-docs::before {
   background-image:
     linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
@@ -180,6 +194,11 @@ body.kward-docs::before {
   color: var(--kward-ink);
 }
 
+.kward-guide-search-results a.kward-search-active {
+  background: rgba(156, 175, 53, 0.2);
+  color: var(--kward-accent-bright);
+}
+
 .kward-guide-search-results strong {
   color: var(--kward-accent-bright);
   display: block;
@@ -195,23 +214,58 @@ body.kward-docs::before {
 }
 
 .kward-nav-toggle {
+  align-items: center;
   background: transparent;
   border: 1px solid rgba(156, 175, 53, 0.52);
   border-radius: 8px;
   color: var(--kward-accent-bright);
   cursor: pointer;
   display: none;
+  flex-direction: column;
   font: inherit;
+  gap: 5px;
+  justify-content: center;
   justify-self: end;
-  padding: 12px 16px;
+  padding: 10px 12px;
   text-decoration: none;
 }
 
+.kward-nav-toggle-bar {
+  background: var(--kward-accent-bright);
+  border-radius: 2px;
+  display: block;
+  height: 2px;
+  transition: transform 140ms ease, opacity 140ms ease;
+  width: 22px;
+}
+
+body.kward-nav-open .kward-nav-toggle-bar:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+body.kward-nav-open .kward-nav-toggle-bar:nth-child(2) {
+  opacity: 0;
+}
+
+body.kward-nav-open .kward-nav-toggle-bar:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
 .kward-nav-toggle:hover {
   background: rgba(156, 175, 53, 0.12);
   color: var(--kward-accent-bright);
 }
 
+/* Keyboard focus indicators for interactive elements. */
+body.kward-docs a:focus-visible,
+body.kward-docs button:focus-visible,
+body.kward-docs input:focus-visible,
+body.kward-docs .kward-nav-toggle:focus-visible,
+body.kward-docs .kward-nav-menu-button:focus-visible {
+  outline: 2px solid var(--kward-accent-bright);
+  outline-offset: 2px;
+}
+
 body.kward-docs .nav_wrap,
 body.kward-docs #resizer {
   display: none;
@@ -315,7 +369,7 @@ body.kward-docs #footer {
   }
 
   .kward-nav-toggle {
-    display: inline-block;
+    display: flex;
   }
 
 
@@ -371,6 +425,101 @@ body.kward-docs #footer {
   color: var(--kward-accent-bright);
 }
 
+/*
+  Hero tagline "swosh": "Your terminal." flies out to the left and is
+  replaced by "Your RPC frontend." flying in from the right, then cycles
+  back. The second line mirrors it from the opposite side — "Your agent."
+  flies out to the right and is replaced by "Your engine." flying in from
+  the left — both lines swap in sync. Pure CSS — no JS. The global
+  @media (prefers-reduced-motion) rule above collapses the animation to
+  the static original copy ("Your terminal. Your agent.") so it remains
+  accessible and calm.
+*/
+.kward-swosh {
+  box-sizing: content-box;
+  display: inline-block;
+  height: 0.98em;
+  line-height: 0.98;
+  margin: -0.16em -0.08em;
+  overflow: hidden;
+  padding: 0.16em 0.08em;
+  position: relative;
+  vertical-align: top;
+}
+
+.kward-hero h1 .kward-swosh-text {
+  color: var(--kward-ink);
+  display: inline-block;
+  line-height: 0.98;
+  white-space: nowrap;
+  will-change: transform, opacity;
+}
+
+/* The longer text ("Your RPC frontend.") stays in flow to size the box;
+   the shorter "Your terminal." overlays it absolutely. */
+.kward-swosh-text-a {
+  left: 0.08em;
+  position: absolute;
+  top: 0.16em;
+}
+
+.kward-swosh-text-a {
+  animation: kward-swosh-a 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+}
+
+.kward-swosh-text-b {
+  animation: kward-swosh-b 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  position: relative;
+}
+
+@keyframes kward-swosh-a {
+  0%, 40%   { transform: translateX(0);     opacity: 1; filter: none; }
+  50%       { transform: translateX(-140%); opacity: 0; filter: blur(3px); }
+  51%, 88%  { transform: translateX(140%);  opacity: 0; filter: none; }
+  100%      { transform: translateX(0);     opacity: 1; filter: none; }
+}
+
+@keyframes kward-swosh-b {
+  0%, 40%   { transform: translateX(140%);  opacity: 0; filter: none; }
+  50%       { transform: translateX(0);     opacity: 1; filter: none; }
+  88%       { transform: translateX(0);     opacity: 1; filter: none; }
+  100%      { transform: translateX(-140%); opacity: 0; filter: blur(3px); }
+}
+
+/*
+  Second line, mirrored: "Your agent." exits to the right while
+  "Your LLM engine." enters from the left (left-to-right), in sync with
+  the first swosh. Both texts keep the accent-bright color of the
+  original "Your agent." span.
+*/
+.kward-hero h1 .kward-swosh-text-c {
+  animation: kward-swosh-c 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  color: var(--kward-accent-bright);
+  left: 0.08em;
+  position: absolute;
+  top: 0.16em;
+}
+
+.kward-hero h1 .kward-swosh-text-d {
+  animation: kward-swosh-d 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  color: var(--kward-accent-bright);
+  position: relative;
+}
+
+@keyframes kward-swosh-c {
+  0%, 40%  { transform: translateX(0);     opacity: 1; filter: none; }
+  50%       { transform: translateX(140%);  opacity: 0; filter: blur(3px); }
+  51%, 88%  { transform: translateX(-140%); opacity: 0; filter: none; }
+  100%      { transform: translateX(0);     opacity: 1; filter: none; }
+}
+
+@keyframes kward-swosh-d {
+  0%, 40%  { transform: translateX(-140%); opacity: 0; filter: none; }
+  50%       { transform: translateX(0);     opacity: 1; filter: none; }
+  88%       { transform: translateX(0);     opacity: 1; filter: none; }
+  100%      { transform: translateX(140%);  opacity: 0; filter: blur(3px); }
+}
+
 .kward-lede {
   color: var(--kward-ink);
   font-size: 19px;
@@ -759,10 +908,17 @@ body.kward-docs #content li,
 body.kward-docs #filecontents p,
 body.kward-docs #filecontents li {
   color: var(--kward-ink);
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   font-size: 17px;
   line-height: 1.72;
 }
 
+body.kward-docs #filecontents p,
+body.kward-docs #filecontents li,
+body.kward-docs #content p {
+  max-width: 72ch;
+}
+
 body.kward-docs #content ul,
 body.kward-docs #filecontents ul,
 body.kward-docs #content ol,
@@ -991,69 +1147,107 @@ body.kward-docs .kward-home #footer {
 }
 
 @media (max-width: 920px) {
-  .kward-topnav {
+  /* The nav panel: hidden until the hamburger is tapped. */
+  body.kward-docs .kward-topnav {
     background: rgba(5, 9, 5, 0.98);
     border: 1px solid rgba(156, 175, 53, 0.32);
     border-radius: 12px;
     box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
-    display: none;
-    gap: 0;
-    height: auto;
-    left: 16px;
-    padding: 12px;
+    display: none !important;
+    flex-direction: column;
+    gap: 2px;
+    height: auto !important;
+    left: 12px;
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+    padding: 8px;
     position: fixed;
-    right: 16px;
+    right: 12px;
     top: 88px;
     z-index: 40;
   }
 
-  body.kward-nav-open .kward-topnav {
-    display: block;
+  body.kward-docs.kward-nav-open .kward-topnav {
+    display: flex !important;
+  }
+
+  /* Every nav item: reset desktop stretch/height, force visibility. */
+  body.kward-docs .kward-nav-menu,
+  body.kward-docs .kward-topnav > a,
+  body.kward-docs .kward-nav-menu-link,
+  body.kward-docs .kward-nav-menu-button {
+    height: auto !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    visibility: visible !important;
   }
 
-  .kward-nav-menu {
-    display: block;
+  body.kward-docs .kward-nav-menu {
+    display: flex !important;
+    flex-direction: column;
+    position: relative;
   }
 
-  .kward-topnav > a,
-  .kward-nav-menu-link,
-  .kward-nav-menu-button {
+  body.kward-docs .kward-topnav > a,
+  body.kward-docs .kward-nav-menu-link {
+    align-items: center;
     border: 0;
     border-radius: 8px;
     box-sizing: border-box;
-    display: inline-flex;
-    height: auto;
-    padding: 11px 12px;
+    color: var(--kward-ink) !important;
+    display: flex !important;
+    font-weight: 700;
+    padding: 14px 16px;
+    text-decoration: none;
+    width: 100%;
   }
 
-  .kward-topnav > a {
-    width: 100%;
+  body.kward-docs .kward-nav-menu-button {
+    display: none !important;
   }
 
-  .kward-nav-menu-link {
-    width: calc(100% - 48px);
+  /* All dropdown links visible directly — no accordion on mobile. */
+  body.kward-docs .kward-nav-dropdown {
+    background: transparent !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    display: block !important;
+    grid-template-columns: 1fr !important;
+    left: auto !important;
+    opacity: 1 !important;
+    padding: 0 0 4px 8px !important;
+    pointer-events: auto !important;
+    position: static !important;
+    top: auto !important;
+    transform: none !important;
+    transition: none !important;
+    width: auto !important;
   }
 
-  .kward-nav-menu-button {
-    justify-content: center;
-    width: 44px;
+  body.kward-docs .kward-nav-dropdown section {
+    margin-bottom: 2px;
   }
 
-  .kward-nav-dropdown {
-    background: rgba(255, 255, 255, 0.03);
-    border: 0;
-    box-shadow: none;
-    grid-template-columns: 1fr;
-    left: auto;
-    opacity: 1;
-    padding: 8px 0 8px 14px;
-    pointer-events: auto;
-    position: static;
-    top: auto;
-    transform: none;
-    width: auto;
+  body.kward-docs .kward-nav-dropdown h2 {
+    border-bottom: 0;
+    color: var(--kward-muted);
+    font-size: 11px;
+    letter-spacing: 0.1em;
+    margin: 8px 10px 4px;
+    padding: 0;
+  }
+
+  body.kward-docs .kward-nav-dropdown a {
+    border-radius: 8px;
+    color: var(--kward-ink) !important;
+    display: block !important;
+    padding: 12px 14px;
+    text-decoration: none;
   }
 
+  /* Search is hidden on mobile; it lives only in the desktop topbar. */
+
   .kward-page {
     padding: 104px 16px 42px;
   }
@@ -1295,37 +1489,12 @@ body.kward-docs .kward-nav-toggle {
   z-index: 9200;
 }
 
-/* Mobile navigation fallback: make the toggle independent of YARD JS timing. */
+/* Mobile navigation: z-index and color highlights. */
 @media (max-width: 920px) {
   body.kward-docs .kward-topnav {
     z-index: 9300;
   }
 
-  body.kward-docs.kward-nav-open #kward-primary-nav,
-  body.kward-docs.kward-nav-open .kward-topnav {
-    display: block !important;
-  }
-}
-
-/* Mobile uses tap state, not hover, for the Guides dropdown. */
-@media (max-width: 920px) {
-  body.kward-docs .kward-nav-menu:hover .kward-nav-dropdown,
-  body.kward-docs .kward-nav-menu:focus-within .kward-nav-dropdown {
-    display: none;
-  }
-
-  body.kward-docs .kward-nav-menu.open .kward-nav-dropdown {
-    display: grid;
-    opacity: 1;
-    pointer-events: auto;
-    transform: none;
-  }
-
-  body.kward-docs .kward-nav-menu:hover .kward-nav-menu-link,
-  body.kward-docs .kward-nav-menu:hover .kward-nav-menu-button {
-    border-bottom-color: transparent;
-  }
-
   body.kward-docs .kward-nav-menu.open .kward-nav-menu-link,
   body.kward-docs .kward-nav-menu.open .kward-nav-menu-button,
   body.kward-docs .kward-nav-menu.active .kward-nav-menu-link,
@@ -1418,6 +1587,8 @@ body.kward-docs #filecontents table {
   border: 1px solid rgba(149, 169, 52, 0.34);
   border-collapse: collapse;
   color: var(--kward-ink);
+  display: block;
+  overflow-x: auto;
   width: 100%;
 }
 
@@ -1499,3 +1670,75 @@ body.kward-docs ul.toplevel a:active {
   color: #f0f7a0 !important;
   text-decoration: none;
 }
+
+/* Respect users who prefer reduced motion. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Printable documentation: white background, black text, hide navigation. */
+@media print {
+  body.kward-docs {
+    background: #fff;
+    color: #000;
+  }
+
+  .kward-topbar,
+  .kward-skip-link,
+  .kward-guide-search,
+  .kward-nav-toggle,
+  #toc,
+  .copy-code-button,
+  .code-copy-wrapper .copy-code-button {
+    display: none !important;
+  }
+
+  body.kward-docs #content,
+  body.kward-docs #filecontents {
+    background: #fff;
+    border: 0;
+    box-shadow: none;
+    color: #000;
+    padding: 0;
+  }
+
+  body.kward-docs #content h1,
+  body.kward-docs #content h2,
+  body.kward-docs #content h3,
+  body.kward-docs #filecontents h1,
+  body.kward-docs #filecontents h2,
+  body.kward-docs #filecontents h3 {
+    color: #000;
+  }
+
+  body.kward-docs #content p,
+  body.kward-docs #content li,
+  body.kward-docs #filecontents p,
+  body.kward-docs #filecontents li {
+    color: #000;
+  }
+
+  body.kward-docs #content a,
+  body.kward-docs #filecontents a {
+    color: #000;
+    text-decoration: underline;
+  }
+
+  body.kward-docs pre {
+    background: #f4f4f4;
+    border: 1px solid #ccc;
+    color: #000;
+  }
+
+  .kward-page {
+    padding: 0;
+    max-width: none;
+  }
+}