/* ============================================================================= Design System — "Quiet Ledger" ============================================================================= The app's visual identity lives here as `ak-*` component classes built on the design tokens declared in the Tailwind `@theme` block (app/assets/tailwind/ application.css). Read docs/DESIGN.md for the why, docs/UI_RULES.md for the how, and docs/COLORS.md for the palette. White canvas, ink text, hairline rules, generous whitespace, and mono numerics. Color always carries a job: seal blue is the interactive accent (links, focus, selection, kickers) and the uploadable trust class; hold amber, verify green, danger red, and compute violet are the other semantic families (see docs/COLORS.md). Tailwind utilities carry layout; identity comes from these tokens and classes. Reach for the `Ui::*` view helpers (app/helpers/ui/*.rb) before hand-rolling these classes — the helpers are the SSOT. This file is imported by app/assets/tailwind/application.css so it compiles into the Tailwind build and the `@theme` `var(--…)` tokens resolve. ============================================================================= */ /* --- App shell -------------------------------------------------------------- */ /* Set on by the responsive_navbar layout. Establishes the canvas, the body voice (DM Sans), ink text, and tabular numerics everywhere. */ .ak-app-shell { background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-body); font-variant-numeric: tabular-nums; } /* Text selection in the seal tint — the quietest place the accent lives. */ ::selection { background: var(--color-seal-bg); color: var(--color-ink); } /* --- Typography helpers ----------------------------------------------------- */ /* Kickers (section eyebrows) carry the seal accent — the one rhythmic color moment on every page. Labels stay faint; use .ak-kicker--muted to opt a kicker back out where color would compete with nearby semantic hues. */ .ak-kicker, .ak-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .ak-kicker { color: var(--color-seal); } .ak-kicker--muted { color: var(--color-faint); } .ak-kicker--lg { font-size: 14px; letter-spacing: 0.12em; } .ak-label { color: var(--color-faint); } .ak-page-title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; } .ak-section-title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .ak-muted { color: var(--color-muted); } .ak-faint { color: var(--color-faint); } .ak-tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .ak-meta { color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; } /* --- Page container --------------------------------------------------------- */ .ak-page { width: 100%; max-width: 1120px; margin-inline: auto; padding: 32px 20px 48px; } .ak-page--prose { max-width: 760px; } .ak-page--narrow { max-width: 560px; } /* --- Links ------------------------------------------------------------------ */ /* Seal blue owns interactivity: a link is something cleared to travel. The underline sits at hairline strength and firms up on hover. */ .ak-link { color: var(--color-seal); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-seal-line); text-underline-offset: 3px; transition: color 140ms ease, text-decoration-color 140ms ease; } .ak-link:hover { color: var(--color-seal-text); text-decoration-color: var(--color-seal); } /* Quiet variant — ink link for dense lists where repeated color would shout. */ .ak-link--quiet { color: var(--color-ink); text-decoration-color: var(--color-rule); } .ak-link--quiet:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); } /* Quiet footer link (used by the footer + generators that inject footer links). */ .footer-link { color: var(--color-muted); text-decoration: none; transition: color 140ms ease; } .footer-link:hover { color: var(--color-ink); } /* --- Buttons ---------------------------------------------------------------- */ .ak-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--radius-ak-pill); background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease; } .ak-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .ak-btn:disabled, .ak-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .ak-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .ak-btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .ak-btn--secondary { background: var(--color-surface); border-color: var(--color-rule); color: var(--color-ink); } .ak-btn--secondary:hover { background: var(--color-surface-muted); border-color: var(--color-muted); } .ak-btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; } .ak-btn--danger:hover { filter: brightness(0.92); } .ak-btn--ghost { background: transparent; border-color: transparent; color: var(--color-muted); } .ak-btn--ghost:hover { background: var(--color-surface-muted); color: var(--color-ink); } .ak-btn--sm { min-height: 32px; padding: 6px 12px; font-size: 13px; } .ak-btn--lg { min-height: 46px; padding: 13px 22px; font-size: 15px; } .ak-btn--block { width: 100%; } /* --- Panels (sections framed by a hairline, not a shadow) ------------------- */ .ak-panel { overflow: hidden; border: 1px solid var(--color-soft-rule); border-radius: var(--radius-ak-md); background: var(--color-surface); } .ak-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--color-soft-rule); } .ak-panel-title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: 15px; font-weight: 700; } .ak-panel-caption { margin: 3px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.3; } .ak-panel-link { flex-shrink: 0; color: var(--color-seal); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .ak-panel-link:hover { text-decoration: underline; } .ak-panel-body { padding: 16px; } /* --- Tables (primary objects: hairline rows, mono right-aligned numerics) ---- */ .ak-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .ak-table th, .ak-table td { padding: 11px 12px; border-bottom: 1px solid var(--color-soft-rule); text-align: left; vertical-align: middle; } .ak-table th { color: var(--color-faint); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; } .ak-table .text-right, .ak-table [data-align="right"] { text-align: right; } .ak-table .text-center, .ak-table [data-align="center"] { text-align: center; } .ak-table tbody tr:last-child td { border-bottom: 0; } .ak-table tbody tr:hover { background: var(--color-surface-muted); } /* Monospace numerics inside tables and stat blocks. */ .ak-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* --- Badges (compact, rectangular, color + text — never color alone) -------- */ .ak-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-ak-sm); background: var(--color-neutral-bg); color: var(--color-neutral-text); font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .ak-badge--success { background: var(--color-verify-bg); color: var(--color-verify-text); } .ak-badge--danger { background: var(--color-danger-bg); color: var(--color-danger-text); } .ak-badge--warning { background: var(--color-hold-bg); color: var(--color-hold-text); } .ak-badge--info { background: var(--color-seal-bg); color: var(--color-seal-text); } .ak-badge--compute { background: var(--color-compute-bg); color: var(--color-compute-text); } .ak-badge--neutral { background: var(--color-neutral-bg); color: var(--color-neutral-text); } /* The single sanctioned pulse (DESIGN.md, Motion): a subtle 1.2s opacity breath on an in-progress element only — the job monitor's running state. */ @keyframes ak-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .ak-pulse { animation: ak-pulse 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ak-pulse { animation: none; } } /* --- Stats ------------------------------------------------------------------ */ .ak-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--color-soft-rule); border: 1px solid var(--color-soft-rule); border-radius: var(--radius-ak-md); overflow: hidden; } .ak-stat { padding: 14px 16px; background: var(--color-surface); } .ak-stat-label { color: var(--color-faint); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .ak-stat-value { margin-top: 4px; color: var(--color-ink); font-family: var(--font-mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; } /* --- Forms ------------------------------------------------------------------ */ .ak-field { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-rule); border-radius: var(--radius-ak-md); background: var(--color-surface); color: var(--color-ink); font-family: var(--font-body); font-size: 15px; line-height: 1.4; transition: border-color 140ms ease, box-shadow 140ms ease; } .ak-field::placeholder { color: var(--color-faint); } /* The seal focus ring (DESIGN.md, Forms) — focus means "cleared to act". */ .ak-field:focus { outline: 0; border-color: var(--color-seal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-seal) 16%, transparent); } .ak-field--invalid { border-color: var(--color-danger); } .ak-field--invalid:focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 16%, transparent); } .ak-field-label { display: block; margin-bottom: 6px; color: var(--color-ink); font-size: 13px; font-weight: 600; } .ak-field-hint { margin-top: 6px; color: var(--color-muted); font-size: 12px; } .ak-field-error { margin-top: 6px; color: var(--color-danger); font-size: 12px; font-weight: 500; } .ak-required { color: var(--color-danger); } .ak-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--color-rule); accent-color: var(--color-seal); } .ak-form-errors { margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--color-soft-rule); border-left: 3px solid var(--color-danger); border-radius: var(--radius-ak-md); background: color-mix(in srgb, var(--color-danger-bg) 45%, var(--color-surface)); color: var(--color-ink); font-size: 13px; } .ak-form-errors ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; } /* --- Alerts / flash --------------------------------------------------------- */ /* Left-rule style (DESIGN.md, Alerts): a 3px family-hue rule on a whisper of its tint — a notarized margin note, not a filled toast. Ink text stays readable; the rule carries the hue. */ .ak-alert { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 20px; border: 1px solid var(--color-soft-rule); border-left: 3px solid var(--color-rule); border-radius: var(--radius-ak-md); background: var(--color-surface-muted); color: var(--color-ink); font-size: 14px; font-weight: 500; } .ak-alert--success { border-left-color: var(--color-verify); background: color-mix(in srgb, var(--color-verify-bg) 45%, var(--color-surface)); } .ak-alert--error { border-left-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger-bg) 45%, var(--color-surface)); } .ak-alert--warning { border-left-color: var(--color-hold); background: color-mix(in srgb, var(--color-hold-bg) 45%, var(--color-surface)); } .ak-alert--info { border-left-color: var(--color-seal); background: color-mix(in srgb, var(--color-seal-bg) 45%, var(--color-surface)); } /* --- Empty states ----------------------------------------------------------- */ .ak-empty { padding: 48px 24px; border: 1px dashed var(--color-rule); border-radius: var(--radius-ak-md); text-align: center; } .ak-empty-title { margin: 0; color: var(--color-ink); font-size: 15px; font-weight: 600; } .ak-empty-text { margin: 6px 0 0; color: var(--color-muted); font-size: 13px; } /* --- List rows (the Ollama "list of real things") --------------------------- */ .ak-list { margin: 0; padding: 0; list-style: none; } .ak-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-rule); } .ak-row { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--color-soft-rule); } .ak-rank { min-width: 24px; color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; text-align: right; } /* --- Hero (landing / marketing) -------------------------------------------- */ .ak-hero { width: min(820px, 100%); margin-inline: auto; padding: clamp(56px, 12vh, 130px) 20px clamp(36px, 7vh, 72px); text-align: center; } .ak-hero-title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; } .ak-hero-lede { max-width: 620px; margin: 22px auto 0; color: var(--color-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.5; text-wrap: pretty; } .ak-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; } /* --- Dividers --------------------------------------------------------------- */ .ak-divider { height: 1px; margin: 24px 0; background: var(--color-soft-rule); border: 0; } .ak-divider-text { display: flex; align-items: center; gap: 14px; margin: 28px 0; color: var(--color-faint); font-size: 12px; } .ak-divider-text::before, .ak-divider-text::after { content: ""; flex: 1; height: 1px; background: var(--color-soft-rule); } /* --- Code listing (protocol bundle blob view) -------------------------------- */ /* Line-numbered source in the honesty voice: verbatim mono. Gutter numbers are CSS counters on an empty anchor, so selecting/copying the code never picks them up while every number is still a clickable #Ln deep link. */ .ak-code-listing { margin: 0; padding: 12px 0; overflow-x: auto; counter-reset: ak-line; font-family: var(--font-mono); font-size: 13px; line-height: 1.45; color: var(--color-ink); tab-size: 4; } .ak-code-listing code { display: block; min-width: max-content; } .ak-code-line { display: block; position: relative; padding: 0 16px 0 60px; white-space: pre; min-height: 1lh; scroll-margin-top: 96px; } .ak-code-lineno { counter-increment: ak-line; position: absolute; left: 0; top: 0; bottom: 0; width: 40px; color: var(--color-faint); text-align: right; text-decoration: none; user-select: none; } .ak-code-lineno::before { content: counter(ak-line); } .ak-code-lineno:hover { color: var(--color-seal); } .ak-code-line:hover { background: var(--color-surface-muted); } /* Deep-linked line (#L42): seal is the interactive accent. */ .ak-code-line:target { background: var(--color-seal-bg); } .ak-code-line:target .ak-code-lineno { color: var(--color-seal-text); } /* Rouge token palette — the five semantic families do the syntax work: seal = keywords/tags/keys, verify = strings, hold = numbers/constants, compute = defs/classes/builtins, faint = comments, danger = lexer errors. Everything references tokens, so dark mode re-skins for free. */ .ak-code-listing .c, .ak-code-listing .c1, .ak-code-listing .cm, .ak-code-listing .cp, .ak-code-listing .cpf, .ak-code-listing .cs, .ak-code-listing .ch, .ak-code-listing .cd { color: var(--color-faint); font-style: italic; } .ak-code-listing .k, .ak-code-listing .kd, .ak-code-listing .kn, .ak-code-listing .kp, .ak-code-listing .kr, .ak-code-listing .kt, .ak-code-listing .kv, .ak-code-listing .nt, .ak-code-listing .na, .ak-code-listing .nl { color: var(--color-seal-text); } .ak-code-listing .s, .ak-code-listing .s1, .ak-code-listing .s2, .ak-code-listing .sa, .ak-code-listing .sb, .ak-code-listing .sc, .ak-code-listing .sd, .ak-code-listing .se, .ak-code-listing .sh, .ak-code-listing .sr, .ak-code-listing .ss, .ak-code-listing .sx { color: var(--color-verify-text); } .ak-code-listing .m, .ak-code-listing .mi, .ak-code-listing .mf, .ak-code-listing .mh, .ak-code-listing .mo, .ak-code-listing .il, .ak-code-listing .mb, .ak-code-listing .mx, .ak-code-listing .kc, .ak-code-listing .no, .ak-code-listing .si { color: var(--color-hold-text); } .ak-code-listing .nf, .ak-code-listing .fm, .ak-code-listing .nc, .ak-code-listing .nd, .ak-code-listing .ne, .ak-code-listing .nb, .ak-code-listing .bp, .ak-code-listing .nn { color: var(--color-compute-text); } .ak-code-listing .o, .ak-code-listing .ow, .ak-code-listing .pi { color: var(--color-muted); } .ak-code-listing .err { color: var(--color-danger-text); } /* Generic tokens (markdown source, diffs, console transcripts). */ .ak-code-listing .gh, .ak-code-listing .gu { color: var(--color-ink); font-weight: 600; } .ak-code-listing .gs { font-weight: 600; } .ak-code-listing .ge { font-style: italic; } .ak-code-listing .gi { color: var(--color-verify-text); } .ak-code-listing .gd { color: var(--color-danger-text); } .ak-code-listing .gp { color: var(--color-faint); } /* --- Bundle file tree (browser sidebar) -------------------------------------- */ /* GitHub-style directory tree: native

disclosure, hairline nesting guides, seal marks the open file. File links target the content turbo-frame. */ .ak-file-tree { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; } .ak-file-tree ul { list-style: none; margin: 0; padding: 0; } .ak-file-tree ul ul { margin-left: 15px; padding-left: 8px; border-left: 1px solid var(--color-soft-rule); } .ak-file-tree summary { list-style: none; } .ak-file-tree summary::-webkit-details-marker { display: none; } .ak-file-tree-row { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 8px; border-radius: var(--radius-ak-sm); color: var(--color-muted); text-decoration: none; cursor: pointer; } .ak-file-tree-row:hover { background: var(--color-surface-muted); color: var(--color-ink); } .ak-file-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ak-file-tree-chevron { flex-shrink: 0; color: var(--color-faint); transition: rotate 120ms ease; } .ak-file-tree details[open] > summary .ak-file-tree-chevron { rotate: 90deg; } .ak-file-tree a[aria-current] { background: var(--color-seal-bg); color: var(--color-seal-text); font-weight: 600; } /* --- VS Code-style app shell (bundle browser) -------------------------------- */ /* A fixed-height, bordered editor shell: the file tree and the code pane each scroll INTERNALLY, so the page itself doesn't grow. Below lg it collapses to a normal flowing box (nested fixed-scroll is awkward on phones). */ .ak-code-browser { overflow: hidden; border: 1px solid var(--color-soft-rule); border-radius: var(--radius-ak-md); background: var(--color-surface); } .ak-code-browser__pane { display: block; min-width: 0; } @media (min-width: 1024px) { .ak-code-browser { display: flex; /* nav + page header stack + breathing room; tuned against the live page */ height: calc(100dvh - 15rem); min-height: 26rem; max-height: 60rem; } .ak-code-browser__sidebar { flex: 0 0 16rem; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--color-soft-rule); background: var(--color-surface-muted); } /* Vertical scroll only: long code lines scroll horizontally within their own .ak-code-listing block, so the sticky tab header never drifts sideways. */ .ak-code-browser__pane { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; } } /* Sidebar explorer label + scrollable tree body. */ .ak-code-browser__sidebar-head { flex: 0 0 auto; padding: 10px 12px 8px; border-bottom: 1px solid var(--color-soft-rule); } .ak-code-browser__tree { flex: 1 1 auto; overflow-y: auto; padding: 8px; } /* One rendered file/dir inside the pane: a sticky "tab" header + a body that scrolls with the pane. Flush — no nested card border inside the shell. */ .ak-code-view { display: flex; flex-direction: column; min-height: 100%; } .ak-code-topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 10px 14px; background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-soft-rule); } .ak-code-view__body { flex: 1 0 auto; } .ak-code-view__prose { padding: 16px; } .ak-code-note { flex: 0 0 auto; padding: 12px 14px; border-top: 1px solid var(--color-soft-rule); color: var(--color-muted); font-size: 13px; } .ak-code-readme { border-top: 1px solid var(--color-soft-rule); } .ak-code-readme__head { padding: 10px 14px; border-bottom: 1px solid var(--color-soft-rule); }