/* * Kiteworks — Capped grid: header count + "see more" footer. * * For the home "Available now" grid (templates/showcase.html), which caps at * 6 cards when the catalog is larger: * .kw-grid-count — mono "6 of N agents" count in the section header. * .kw-seemore — dashed link bar below the grid to the full catalog. * * Token-driven (--kw-* from tokens.css); themed via html.dark (PUBLIC) / * html.light (ADMIN). Logical properties only, so the bar mirrors under * (see test_rtl_layout.py); the CTA arrow nudge uses the * standalone `translate` property so it composes with the macro's * .kw-ico--flip scaleX(-1) transform instead of clobbering it. */ .kw-grid-count { font-family: var(--kw-font-mono); font-size: 12px; color: var(--kw-fg-subtle); white-space: nowrap; align-self: center; } .kw-grid-count__n { color: var(--kw-fg); font-weight: 600; } html.dark .kw-grid-count__n { color: #fff; } .kw-seemore { display: flex; align-items: center; gap: 20px; justify-content: space-between; margin-block-start: 20px; padding: 20px 24px; border-radius: var(--kw-radius-xl); text-decoration: none; color: inherit; transition: 180ms ease; background: var(--kw-surface); border: 1px solid var(--kw-border-color); box-shadow: var(--kw-card-shadow); } html.dark .kw-seemore { background: rgba(77, 96, 251, 0.06); border: 1px dashed rgba(77, 96, 251, 0.4); -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); box-shadow: none; } html.light .kw-seemore { border-style: dashed; border-color: #C9D0EC; background: var(--kw-bg-subtle); } .kw-seemore:hover { transform: translateY(-1px); text-decoration: none; } html.dark .kw-seemore:hover { border-color: rgba(77, 96, 251, 0.7); box-shadow: 0 0 30px -10px rgba(77, 96, 251, 0.5); } html.light .kw-seemore:hover { border-color: var(--kw-blue); } .kw-seemore__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kw-seemore__lead { font-size: 15px; color: var(--kw-fg); } html.dark .kw-seemore__lead { color: #fff; } .kw-seemore__sub { font-size: 13px; color: var(--kw-fg-subtle); } .kw-seemore__cta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; font-family: var(--kw-font-headline); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; padding: 11px 18px; border-radius: var(--kw-radius-md); border: 1px solid transparent; } html.dark .kw-seemore__cta { color: #fff; background: var(--kw-glass-fill); border-color: rgba(77, 96, 251, 0.4); box-shadow: inset 0 0 30px rgba(197, 185, 246, 0.14); } html.light .kw-seemore__cta { color: #fff; background: var(--kw-blue); border-color: var(--kw-blue); } .kw-seemore__cta .kw-ico { transition: translate 160ms; } .kw-seemore:hover .kw-seemore__cta .kw-ico { translate: 3px 0; } [dir="rtl"] .kw-seemore:hover .kw-seemore__cta .kw-ico { translate: -3px 0; } @media (max-width: 620px) { .kw-seemore { flex-direction: column; align-items: flex-start; gap: 14px; } .kw-seemore__cta { width: 100%; justify-content: center; } }