/* ============================================================ TOPSET — APP-LEVEL STYLES ------------------------------------------------------------ Design tokens are loaded from /static/kevmo/styles.css. This file applies them at the document level. Dark console theme is set on in base.html. ============================================================ */ html, body { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; min-height: 100vh; } img, table { max-width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--text-primary); margin: 0 0 var(--space-4) 0; } h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); } h2 { font-size: var(--text-xl); line-height: var(--leading-tight); } h3 { font-size: var(--text-lg); line-height: var(--leading-snug); } h4 { font-size: var(--text-md); line-height: var(--leading-snug); } h5 { font-size: var(--text-base); line-height: var(--leading-snug); } h6 { font-size: var(--text-sm); line-height: var(--leading-snug); } p { font-size: var(--text-base); margin: 0 0 var(--space-3) 0; color: var(--text-primary); } p.lead { font-size: var(--text-md); color: var(--text-secondary); font-weight: var(--weight-regular); } a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-lock); } a:hover { color: var(--accent-hover); } a:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); } /* Mono micro-label utility — wide-tracked, uppercase, JetBrains Mono. Used as eyebrows, metadata, nav labels everywhere. */ .kv-label { font-family: var(--font-mono); font-size: var(--text-3xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* Main content wrapper applied in base.html to
. */ .kv-main { max-width: var(--container-xl); margin: 0 auto; padding: var(--space-4) var(--space-6) var(--space-10); } /* Smaller page wrapper for narrow content (not currently used by routes). */ .kv-page { max-width: var(--container-lg); margin: 0 auto; padding: var(--space-8) var(--space-6); } /* Focus discipline — visible blaze ring everywhere. */ :focus-visible { outline: none; box-shadow: var(--ring-focus); } ::selection { background: var(--accent); color: var(--accent-contrast); } /* ============================================================ COMMAND BAR + FOOTER (shared chrome) ============================================================ */ .kv-skip { position: absolute; left: -9999px; top: 0; } .kv-skip:focus-visible { left: var(--space-4); top: var(--space-4); z-index: 100; background: var(--surface-card); color: var(--text-primary); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-3xs); letter-spacing: var(--tracking-label); text-transform: uppercase; } .kv-cmdbar { position: sticky; top: 0; z-index: 50; background: var(--bg-base); border-bottom: 1px solid var(--border-hairline); backdrop-filter: blur(6px); } .kv-cmdbar-inner { max-width: var(--container-xl); margin: 0 auto; padding: var(--space-3) var(--space-6); display: flex; align-items: center; gap: var(--space-6); min-height: 56px; } .kv-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-lock); } .kv-brand:hover { color: var(--accent); } .kv-brand:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); } .kv-brand-mark { flex: 0 0 auto; color: var(--accent); transition: color var(--dur-fast) var(--ease-lock); } .kv-brand-stack { display: inline-flex; flex-direction: column; line-height: 1; gap: 2px; } .kv-brand-eyebrow { font-family: var(--font-mono); font-size: 0.625rem; /* 10px micro */ letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .kv-brand-wordmark { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: var(--tracking-tight); color: var(--text-primary); text-transform: uppercase; } .kv-nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); } .kv-nav-link { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); font-family: var(--font-mono); font-size: var(--text-3xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); border: 1px solid transparent; border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-lock), background var(--dur-fast) var(--ease-lock), border-color var(--dur-fast) var(--ease-lock); } .kv-nav-link:hover { color: var(--text-primary); background: var(--bg-subtle); border-color: var(--border-hairline); } .kv-nav-link.is-active, .kv-nav-link[aria-current="page"] { color: var(--accent); border-color: var(--border-hairline); box-shadow: inset 2px 0 0 var(--accent); padding-left: calc(var(--space-4) - 2px); } /* Mobile burger — pure CSS toggle */ .kv-nav-toggle { display: none; } .kv-nav-burger { display: none; } @media (max-width: 720px) { .kv-cmdbar-inner { gap: var(--space-3); } .kv-brand-eyebrow { display: none; } .kv-nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; margin-left: auto; padding: 0 8px; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); cursor: pointer; background: transparent; } .kv-nav-burger span { display: block; height: 1.5px; background: var(--text-primary); transition: transform var(--dur-fast) var(--ease-lock), opacity var(--dur-fast) var(--ease-lock); } .kv-nav-toggle:focus-visible + .kv-nav-burger { box-shadow: var(--ring-focus); } .kv-nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-base); border-bottom: 1px solid var(--border-hairline); padding: var(--space-2) var(--space-4) var(--space-3); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform var(--dur-base) var(--ease-lock), opacity var(--dur-base) var(--ease-lock); } .kv-nav-link { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-hairline); border-radius: 0; } .kv-nav-link:last-child { border-bottom: 0; } .kv-nav-link:hover { background: transparent; border-color: var(--border-hairline); } .kv-nav-toggle:checked ~ .kv-nav { transform: translateY(0); opacity: 1; pointer-events: auto; } .kv-nav-toggle:checked ~ .kv-nav-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .kv-nav-toggle:checked ~ .kv-nav-burger span:nth-child(2) { opacity: 0; } .kv-nav-toggle:checked ~ .kv-nav-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } } .kv-footer { margin-top: var(--space-16); border-top: 1px solid var(--border-hairline); background: var(--bg-base); } .kv-footer-inner { max-width: var(--container-xl); margin: 0 auto; padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-4); } .kv-footer-mark { color: var(--accent); display: inline-flex; } .kv-footer-label, .kv-footer-build { font-family: var(--font-mono); font-size: var(--text-3xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .kv-footer-build { margin-left: auto; }