/* * XKOVA Rails Documentation Portal: shared design system. * Plain HTML pages share this one stylesheet. No build step, no framework. * Theme: light + dark via [data-theme] on , defaulting to the OS setting. * Layout: topbar, left sidebar (drawer on mobile), content, right table of contents. * No em dashes anywhere in this file by project rule. */ :root { --accent: #2f6fed; --accent-soft: #2f6fed22; --radius: 8px; --sidebar-w: 270px; --toc-w: 220px; --maxw: 760px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Light theme tokens (default). */ html[data-theme="light"], :root { --bg: #ffffff; --bg-2: #f6f8fa; --bg-3: #eef1f4; --fg: #1c2128; --fg-2: #57606a; --fg-3: #8b949e; --border: #d8dee4; --code-bg: #f3f5f7; --shadow: 0 1px 3px #0000001a; --t-str: #0a7d33; --t-num: #0550ae; --t-kw: #cf222e; --t-com: #6e7781; } /* Dark theme tokens. */ html[data-theme="dark"] { --bg: #0b0e14; --bg-2: #0f141c; --bg-3: #161b24; --fg: #d6deeb; --fg-2: #9fb3c8; --fg-3: #6b7c8f; --border: #1f2733; --code-bg: #11161f; --shadow: 0 1px 3px #00000055; --t-str: #7ee787; --t-num: #79c0ff; --t-kw: #ff7b72; --t-com: #8b949e; } /* Follow the OS when the user has not chosen a theme. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bg: #0b0e14; --bg-2: #0f141c; --bg-3: #161b24; --fg: #d6deeb; --fg-2: #9fb3c8; --fg-3: #6b7c8f; --border: #1f2733; --code-bg: #11161f; --shadow: 0 1px 3px #00000055; --t-str: #7ee787; --t-num: #79c0ff; --t-kw: #ff7b72; --t-com: #8b949e; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: var(--mono); font-size: 0.88em; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; } pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow: auto; } pre code { background: none; padding: 0; } /* Topbar. */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--fg); white-space: nowrap; } .brand .logo { width: 22px; height: 22px; border-radius: 6px; display: inline-block; object-fit: contain; } .brand small { font-weight: 500; color: var(--fg-3); font-size: 12px; } .topbar .spacer { flex: 1; } .search-btn { display: flex; align-items: center; gap: 8px; min-width: 200px; padding: 7px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg-3); font-size: 13px; cursor: pointer; } .search-btn kbd { margin-left: auto; font: 11px var(--mono); background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-2); cursor: pointer; font-size: 15px; } .icon-btn:hover { color: var(--fg); border-color: var(--accent); } .menu-btn { display: none; } /* Three column shell. */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); gap: 0; } @media (max-width: 1100px) { .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .toc { display: none; } } @media (max-width: 820px) { .shell { grid-template-columns: minmax(0, 1fr); } } /* Sidebar. */ .sidebar { position: sticky; top: 56px; align-self: start; height: calc(100vh - 56px); overflow-y: auto; border-right: 1px solid var(--border); padding: 18px 12px 60px; background: var(--bg); } .sidebar .group { margin-bottom: 4px; } .sidebar .group-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--fg-3); font-weight: 700; padding: 6px 10px; margin: 4px 0 2px; border-radius: 6px; } .sidebar .group-title:hover { background: var(--bg-2); color: var(--fg-2); } .sidebar .group-title .chev { flex: none; transition: transform 0.15s ease; } .sidebar .group.collapsed .group-title .chev { transform: rotate(-90deg); } .sidebar .group.collapsed .group-links { display: none; } .sidebar a.nav-link { display: block; padding: 6px 10px; border-radius: 6px; color: var(--fg-2); font-size: 14px; } .sidebar a.nav-link:hover { background: var(--bg-2); color: var(--fg); text-decoration: none; } .sidebar a.nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .sidebar a.nav-link .tag { float: right; font-size: 10px; color: var(--fg-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; } /* Mobile drawer behavior. */ @media (max-width: 820px) { .menu-btn { display: inline-flex; } .sidebar { position: fixed; left: 0; top: 56px; z-index: 50; width: 280px; transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: var(--shadow); } .sidebar.open { transform: translateX(0); } .scrim { display: none; position: fixed; inset: 56px 0 0 0; background: #0008; z-index: 45; } .scrim.show { display: block; } } /* Content. */ .content { min-width: 0; padding: 30px 40px 80px; } .content .inner { max-width: var(--maxw); margin: 0 auto; } .breadcrumb { font-size: 12.5px; color: var(--fg-3); margin-bottom: 10px; } .content h1 { font-size: 30px; line-height: 1.2; margin: 4px 0 8px; } .content h2 { font-size: 21px; margin: 36px 0 10px; padding-top: 6px; scroll-margin-top: 70px; } .content h3 { font-size: 16.5px; margin: 24px 0 8px; scroll-margin-top: 70px; } .content p, .content li { color: var(--fg); } .lede { font-size: 17px; color: var(--fg-2); margin: 0 0 22px; } .content table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; } .content th, .content td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .content th { color: var(--fg-2); font-weight: 600; background: var(--bg-2); } /* Cards grid (home page). */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; } .card { display: block; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); color: var(--fg); } .card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); transition: 0.12s; } .card h3 { margin: 0 0 4px; font-size: 15px; } .card p { margin: 0; font-size: 13px; color: var(--fg-2); } /* Callouts. */ .note { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 10px 14px; border-radius: 0 6px 6px 0; margin: 16px 0; font-size: 14px; } .note.warn { border-left-color: #d29922; background: #d2992218; } /* Badges. */ .badge { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--fg-2); } .m { font: 700 11px var(--mono); color: #fff; padding: 1px 7px; border-radius: 4px; letter-spacing: 0.3px; } .m.GET { background: #2f6fed; } .m.POST { background: #1f9d57; } .m.PUT { background: #c08a00; } .m.PATCH { background: #8957e5; } .m.DELETE { background: #cf3b3b; } /* Right table of contents. */ .toc { position: sticky; top: 56px; align-self: start; height: calc(100vh - 56px); overflow-y: auto; padding: 30px 16px; } .toc .toc-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--fg-3); font-weight: 700; margin-bottom: 8px; } .toc a { display: block; padding: 4px 8px; font-size: 13px; color: var(--fg-3); border-left: 2px solid transparent; } .toc a:hover { color: var(--fg); text-decoration: none; } .toc a.active { color: var(--accent); border-left-color: var(--accent); } .toc a.h3 { padding-left: 18px; font-size: 12.5px; } /* Page footer: agent affordances + feedback. */ .page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--border); } .page-tools .copy-llm { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 11px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg-2); cursor: pointer; } .page-tools .copy-llm:hover { color: var(--fg); border-color: var(--accent); } .feedback { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3); } .feedback button { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; width: 30px; height: 28px; cursor: pointer; color: var(--fg-2); } .feedback button:hover { border-color: var(--accent); color: var(--fg); } /* Search overlay. */ .search-overlay { display: none; position: fixed; inset: 0; z-index: 60; background: #0007; } .search-overlay.open { display: block; } .search-box { max-width: 560px; margin: 90px auto 0; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; } .search-box input { width: 100%; border: none; outline: none; background: var(--bg); color: var(--fg); padding: 16px 18px; font-size: 16px; border-bottom: 1px solid var(--border); } .search-results { max-height: 50vh; overflow-y: auto; } .search-results a { display: block; padding: 10px 18px; color: var(--fg); border-bottom: 1px solid var(--border); } .search-results a:hover, .search-results a.sel { background: var(--bg-2); text-decoration: none; } .search-results .r-sec { font-size: 11px; color: var(--fg-3); } .search-results .empty { padding: 18px; color: var(--fg-3); font-size: 14px; } footer.site { border-top: 1px solid var(--border); padding: 20px 40px; color: var(--fg-3); font-size: 12.5px; } /* Heading deep-link anchors (revealed on hover). */ .content .anchor { margin-left: 8px; color: var(--fg-3); font-weight: 400; text-decoration: none; opacity: 0; transition: opacity 0.12s ease; } .content h2:hover .anchor, .content h3:hover .anchor, .content .anchor:focus { opacity: 1; } .content .anchor:hover { color: var(--accent); text-decoration: none; } /* Code blocks: copy button and light syntax highlight. */ .code-wrap { position: relative; } .code-wrap .code-copy { position: absolute; top: 8px; right: 8px; font: 11px var(--mono); background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; cursor: pointer; opacity: 0; transition: opacity 0.12s ease; } .code-wrap:hover .code-copy, .code-copy:focus { opacity: 1; } .code-wrap .code-copy:hover { color: var(--fg); background: var(--bg-2); } .content pre .t-str { color: var(--t-str); } .content pre .t-com { color: var(--t-com); font-style: italic; } .content pre .t-num { color: var(--t-num); } .content pre .t-kw { color: var(--t-kw); } /* Previous and next pager. */ .pager { display: flex; gap: 12px; margin: 40px 0 8px; } .pager-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; color: var(--fg); } .pager-link:hover { border-color: var(--accent); background: var(--bg-2); text-decoration: none; } .pager-link span { font-size: 12px; color: var(--fg-3); } .pager-link b { font-weight: 600; color: var(--accent); } .pager-link.next { text-align: right; } .pager-spacer { flex: 1; } @media (max-width: 560px) { .pager { flex-direction: column; } }