/* ============================================================================= StockEase Docs - Design Tokens Single source of truth for color, spacing, and theme values. Theme contract: the inline boot script in each template sets data-theme="light|dark" on before first paint, so the cascade never needs a prefers-color-scheme media query and the page never flashes. With JS disabled the attribute is absent and the page falls back to the light :root defaults below. ========================================================================== */ :root { /* --- Light theme (default) --- */ --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --surface-3: rgba(255, 255, 255, 0.85); --border: rgba(15, 23, 42, 0.12); --border-strong: rgba(15, 23, 42, 0.28); --text: #1e293b; --muted: #64748b; --heading: #0f172a; --accent: #0284c7; --link: #0369a1; --code-bg: #f1f5f9; --code-border: rgba(2, 132, 199, 0.18); /* Diagram edge/arrow color. Node fills are set per-layer in each diagram's classDef (medium tones that read on both themes), not via tokens. */ --layer-edge: #0284c7; /* --- Layout --- */ --radius: 12px; --radius-sm: 8px; --maxw: 1400px; --content-maxw: 820px; --sidebar-w: 260px; --toc-w: 220px; --topbar-h: 56px; --shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } :root[data-theme="dark"] { --bg: #0b1220; --surface: #0f1b2d; --surface-2: #0c1626; --surface-3: rgba(9, 14, 25, 0.72); --border: rgba(148, 163, 184, 0.18); --border-strong: rgba(148, 163, 184, 0.38); --text: #e5e7eb; --muted: #a7b0c0; --heading: #f3f4f6; --accent: #38bdf8; --link: #7dd3fc; --code-bg: #0b1424; --code-border: rgba(125, 211, 252, 0.18); --layer-edge: #7dd3fc; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* ============================================================================= StockEase Docs — Base Document reset, typography baseline, and global link/focus behavior. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* Keyboard focus is kept visually distinct from the hover underline so pointer and keyboard users get separate affordances. */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Off-screen until focused: lets keyboard users skip the nav and jump straight to the article. */ .skip-link { position: absolute; left: -9999px; top: 0; padding: 0.6rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); z-index: 100; } .skip-link:focus { left: 1rem; top: 1rem; } /* ============================================================================= StockEase Docs — Layout Three-column shell: left nav, centered content, right table of contents. The grid degrades in two steps. Below 1100px the right TOC is dropped first because it is the least essential of the three columns. Below 768px the left nav becomes an off-canvas drawer so the article gets the full width. ========================================================================== */ .layout { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); align-items: start; } .content { min-width: 0; padding: 2rem 2.5rem 4rem; } /* Cap measure for readability; full-bleed long-form text is hard to scan. */ .content > .doc-body { max-width: var(--content-maxw); } @media (max-width: 1100px) { .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .toc { display: none; } } @media (max-width: 768px) { .layout { grid-template-columns: minmax(0, 1fr); } /* Drawer is opened by toggling .nav-open on .layout from the menu button. */ .sidebar { position: fixed; inset: var(--topbar-h) auto 0 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform 0.2s ease; z-index: 40; } .layout.nav-open .sidebar { transform: translateX(0); } .content { padding: 1.5rem 1.25rem 3rem; } } /* ============================================================================= StockEase Docs — Components Topbar, navigation sidebar, table of contents, and footer chrome. ========================================================================== */ /* --- Topbar -------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; background: var(--surface-3); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .topbar-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--heading); white-space: nowrap; } .brand:hover { text-decoration: none; opacity: 0.9; } /* Marks API-reference pages apart from architecture pages in the topbar. */ .badge { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.5rem; padding: 0.15rem 0.5rem; font-size: 0.78rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); } .docsearch { flex: 1; max-width: 360px; height: 36px; padding: 0 0.75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); } .topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .lang-switch a { font-size: 0.8rem; padding: 0.25rem 0.55rem; border-radius: var(--radius-sm); color: var(--muted); } .lang-switch a[aria-current="true"] { background: var(--surface-2); color: var(--heading); } /* Disabled language (no translation for this page): greyed and inert, with a not-allowed cursor on hover. Removing href already blocks navigation. */ .lang-switch a[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; } .lang-switch a[aria-disabled="true"]:hover { background: none; color: var(--muted); } .theme-toggle { display: inline-flex; padding: 0.35rem; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; } /* Hidden until the mobile breakpoint exposes the drawer (see layout.css). */ .menu-btn { display: none; background: none; border: 0; color: var(--text); cursor: pointer; } @media (max-width: 768px) { .menu-btn { display: inline-flex; } } /* --- Sidebar nav --------------------------------------------------------- */ .sidebar { position: sticky; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 1.5rem 1rem; background: var(--surface-2); border-right: 1px solid var(--border); } .nav-title { margin: 1.25rem 0 0.5rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .nav-title:first-child { margin-top: 0; } .sidebar ul { list-style: none; margin: 0 0 0.5rem; padding: 0; } .sidebar a { display: block; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); color: var(--text); font-size: 0.92rem; } .sidebar a:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); text-decoration: none; } /* Current page is stamped server-side with aria-current for both styling and screen-reader orientation. */ .sidebar a[aria-current="page"] { background: var(--surface); color: var(--accent); font-weight: 500; } /* --- Table of contents --------------------------------------------------- */ .toc { position: sticky; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 2rem 1rem; } .toc-title { margin: 0 0 0.6rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .toc ul { list-style: none; margin: 0; padding-left: 0.75rem; border-left: 2px solid var(--border); } .toc li { margin: 0.3rem 0; } .toc a { color: var(--muted); font-size: 0.85rem; } .toc a:hover { color: var(--heading); text-decoration: none; } /* Hide the inner scrollbars on the nav and TOC. They remain scrollable by wheel, trackpad, and keyboard — only the visual bar is suppressed, so long pages show a single page-level scrollbar instead of two or three. */ .sidebar, .toc { scrollbar-width: none; /* Firefox */ } .sidebar::-webkit-scrollbar, .toc::-webkit-scrollbar { display: none; /* Chrome, Edge, Safari */ } /* --- Footer -------------------------------------------------------------- */ .footer { border-top: 1px solid var(--border); padding: 1.5rem 1.25rem; text-align: center; font-size: 0.85rem; color: var(--muted); }/* ============================================================================= StockEase Docs — Landing page Styles for index.html and index-de.html: hero, stack badges, card grid. ========================================================================== */ /* --- Home wrapper --------------------------------------------------------- */ .home { max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.25rem 4rem; } /* --- Hero ----------------------------------------------------------------- */ .hero { text-align: center; padding: 3rem 0 2.5rem; } .hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: var(--heading); margin: 0 0 1rem; line-height: 1.2; } .hero p { max-width: 60ch; margin: 0 auto 1.75rem; color: var(--muted); font-size: 1.05rem; line-height: 1.7; } /* --- Technology stack badges --------------------------------------------- */ .stack { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .stack span { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.82rem; color: var(--muted); white-space: nowrap; } /* --- Card grid ------------------------------------------------------------ */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; } .card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.4rem 1.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .card:hover { border-color: var(--accent); border-width: 2px; background: #dce5ef; box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 22%, transparent); text-decoration: none; } .card h2 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--heading); } .card p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.6; } .card-tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); } /* Dark mode: page bg and --surface-2 sit close together, so lift the card border for separation. The hover rule below is scoped to the same selector depth so it keeps winning the cascade over this base rule. */ :root[data-theme="dark"] .card { background: #111f33; border-color: rgba(148, 163, 184, 0.40); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40); } :root[data-theme="dark"] .card:hover { border-color: var(--accent); border-width: 2px; background: #1a2f4a; box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 30%, transparent); }/* ============================================================================= StockEase Docs — Content Typography for Markdown rendered into .doc-body by the Pandoc pipeline. Scoped to .doc-body so it never reaches the surrounding chrome. ========================================================================== */ .doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4 { color: var(--heading); line-height: 1.25; margin-top: 1.6rem; } .doc-body h1 { font-size: 1.85rem; margin-top: 0; } .doc-body h2 { font-size: 1.4rem; } .doc-body h3 { font-size: 1.15rem; } .doc-body p, .doc-body li { color: var(--text); } .doc-body ul, .doc-body ol { padding-left: 1.4rem; } .doc-body hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; } .doc-body blockquote { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .doc-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--surface-2); border: 1px solid var(--border); padding: 0.12rem 0.3rem; border-radius: var(--radius-sm); } .doc-body pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius-sm); padding: 1rem; overflow-x: auto; } /* Reset inside fenced blocks so the inline-code pill styling does not stack. */ .doc-body pre code { background: none; border: 0; padding: 0; } .doc-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; } .doc-body th, .doc-body td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border-strong); vertical-align: top; } .doc-body th { color: var(--heading); background: var(--surface-2); font-weight: 600; } .doc-body tr:hover td { background: var(--surface-2); } /* ============================================================================= StockEase Docs — Mermaid Node fills and label colors are set per-layer in each diagram's classDef (medium tones with white text, chosen to read on BOTH light and dark backgrounds). This file deliberately does NOT override node fills or label text, so it never fights the classDef. It themes only the parts a classDef cannot reach: edges, arrowheads, edge labels, clusters, and sequence diagrams. Those use !important because Mermaid writes them as inline styles. ========================================================================== */ /* Wrap wide diagrams so they scroll instead of shrinking to an unreadable size. */ .diagram-scroll { overflow-x: auto; } .mermaid { background: transparent; overflow-x: auto; } /* Edges and arrowheads: one themed color so flow stays legible on either bg. */ .mermaid .edgePath path, .mermaid .flowchart-link, .mermaid svg line[stroke] { stroke: var(--layer-edge) !important; stroke-width: 2px !important; } .mermaid .arrowheadPath, .mermaid svg marker path, .mermaid svg marker polygon { fill: var(--layer-edge) !important; stroke: var(--layer-edge) !important; } /* Edge labels (e.g. "HTTP", "Authenticated"): readable chip on the page bg. */ .mermaid .edgeLabel { background-color: var(--surface) !important; color: var(--text) !important; padding: 2px 6px; border-radius: var(--radius-sm); } /* Subgraph clusters: dashed accent border over a faint tint. */ .mermaid .cluster rect { stroke: var(--accent) !important; stroke-dasharray: 4 3; fill: var(--surface-2) !important; } /* Sequence diagrams have no classDef, so theme their parts directly. */ .mermaid .actor { fill: var(--surface-2) !important; stroke: var(--accent) !important; } .mermaid text.actor, .mermaid text.actor > tspan { fill: var(--text) !important; stroke: none !important; } .mermaid .actor-line { stroke: var(--muted) !important; } .mermaid .messageLine0, .mermaid .messageLine1 { stroke: var(--layer-edge) !important; stroke-width: 2px !important; } .mermaid .messageText { fill: var(--text) !important; } .mermaid .note rect { fill: var(--surface-2) !important; stroke: var(--accent) !important; } .mermaid .note text { fill: var(--text) !important; }