/* Spec 034 T008 + T029/T030: shell styles for the product site — structural skeleton, Developer Dark marketing layer (glow/monospace touches), and the responsive pass. Consumes --akml-* custom properties from css/themes/{dark,light,high-contrast}.css (generated from docs/theme-tokens.json by scripts/generate-theme-css.ps1). */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--akml-surface-canvas); color: var(--akml-text-primary); font-family: var(--akml-type-chrome-family), system-ui, sans-serif; /* U6: 16 px base for prose/docs; chrome elements (nav, footer, sidebar) pin themselves back to 0.875rem below. */ font-size: 1rem; line-height: 1.5; } code, pre { font-family: var(--akml-type-editor-family), monospace; } a { color: var(--akml-text-link); } :focus-visible { outline: 2px solid var(--akml-border-focus); outline-offset: 2px; } /* U4: FocusOnNavigate programmatically focuses the page

(tabindex="-1") on every navigation — don't paint the focus ring on it. Real keyboard focus on interactive elements keeps the ring above. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--akml-scalar-spacing-l); } /* Skip-to-content link: hidden until focused (SC-006). */ .skip-link { position: absolute; left: var(--akml-scalar-spacing-s); top: -100%; z-index: 1000; padding: var(--akml-scalar-spacing-xs) var(--akml-scalar-spacing-m); background-color: var(--akml-accent-primary); color: var(--akml-text-onaccent); border-radius: var(--akml-scalar-radius-xs); } .skip-link:focus-visible { top: var(--akml-scalar-spacing-s); } /* Header + primary nav */ .site-header { background-color: var(--akml-surface-panel); border-bottom: 1px solid var(--akml-border-subtle); } .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--akml-scalar-spacing-s) var(--akml-scalar-spacing-l); padding-block: var(--akml-scalar-spacing-m); } /* T028: theme toggle button. U24: inert without JS, so it is hidden by default and revealed by theme-toggle.js via the .js-theme-toggle class on . */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto; /* U14: >=40x40 px touch target (44 ideal, 40 keeps header density). */ min-width: 40px; min-height: 40px; padding: var(--akml-scalar-spacing-xs) var(--akml-scalar-spacing-s); background: none; color: var(--akml-text-secondary); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-xs); cursor: pointer; } #theme-toggle { display: none; } html.js-theme-toggle #theme-toggle { display: inline-flex; } .theme-toggle:hover { color: var(--akml-text-primary); background-color: var(--akml-surface-hover); } /* Icon pair swapped from the data-akml-theme attribute (U25): shows the theme you will switch TO — sun while dark ("Switch to light theme"), moon while light. */ .theme-toggle-moon, html[data-akml-theme="light"] .theme-toggle-sun { display: none; } html[data-akml-theme="light"] .theme-toggle-moon { display: inline; } .site-brand { color: var(--akml-text-primary); font-weight: var(--akml-type-chrometitle-weight); text-decoration: none; } .site-nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--akml-scalar-spacing-m); margin: 0; padding: 0; list-style: none; /* U6: chrome stays compact against the 16 px body base. */ font-size: 0.875rem; } .site-nav-links a { color: var(--akml-text-secondary); text-decoration: none; } .site-nav-links a:hover, .site-nav-links a.active { color: var(--akml-text-primary); } /* Main content column */ .site-main { flex: 1; padding-block: var(--akml-scalar-spacing-l); } /* Footer */ .site-footer { background-color: var(--akml-surface-panel); border-top: 1px solid var(--akml-border-subtle); color: var(--akml-text-secondary); /* U6: chrome stays compact against the 16 px body base. */ font-size: 0.875rem; } .site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--akml-scalar-spacing-m); padding-block: var(--akml-scalar-spacing-m); } .site-footer-product { font-weight: var(--akml-type-chrometitle-weight); color: var(--akml-text-primary); } .site-footer-links { display: flex; flex-wrap: wrap; gap: var(--akml-scalar-spacing-m); margin: 0 0 0 auto; padding: 0; list-style: none; } /* Docs section skeleton (DocsLayout lands in T024): collapsible sidebar + content grid. */ .docs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--akml-scalar-spacing-l); align-items: start; } .docs-sidebar { position: sticky; top: var(--akml-scalar-spacing-l); max-height: calc(100vh - 2 * var(--akml-scalar-spacing-l)); overflow-y: auto; padding: var(--akml-scalar-spacing-m); background-color: var(--akml-surface-sidebar); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-s); } .docs-content { min-width: 0; } /* --- US1 page structure (T014–T016): hero, buttons, cards, release blocks. Structural only, all colors via --akml-* tokens; marketing polish is T029. */ .hero { /* U5: marketing rhythm — generous hero air, clamped so 360 px still breathes. */ padding-block: clamp(3rem, 8vw, 4.5rem); } .hero h1 { margin-block: 0 var(--akml-scalar-spacing-s); font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; } .hero-tagline { max-width: 60ch; color: var(--akml-text-secondary); font-size: 1.125rem; } /* U5: vertical rhythm between marketing sections (Home/Download top-level sections; docs content lives inside .docs-content and is unaffected). */ .site-main > section + section { margin-top: 3rem; } .cta-row { display: flex; flex-wrap: wrap; gap: var(--akml-scalar-spacing-m); } .btn { display: inline-block; padding: var(--akml-scalar-spacing-s) var(--akml-scalar-spacing-l); border-radius: var(--akml-scalar-radius-xs); border: 1px solid var(--akml-border-strong); text-decoration: none; } .btn-primary { background-color: var(--akml-accent-primary); color: var(--akml-text-onaccent); border-color: var(--akml-accent-primary); } .btn-primary:hover { background-color: var(--akml-accent-primaryhover); border-color: var(--akml-accent-primaryhover); } .btn-secondary { color: var(--akml-text-primary); } .btn-secondary:hover { background-color: var(--akml-surface-hover); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--akml-scalar-spacing-l); margin: 0; padding: 0; list-style: none; } .card { padding: var(--akml-scalar-spacing-l); background-color: var(--akml-surface-panel); border: 1px solid var(--akml-border-subtle); /* U7: subtle accent marker in place of the cryptic 2-letter badges. */ border-top: 2px solid color-mix(in srgb, var(--akml-accent-primary) 60%, transparent); border-radius: var(--akml-scalar-radius-s); } .card h2, .card h3 { margin-block: var(--akml-scalar-spacing-s); } .card p { margin-block: var(--akml-scalar-spacing-xs); color: var(--akml-text-secondary); } .cta-banner { margin-top: var(--akml-scalar-spacing-l); padding: var(--akml-scalar-spacing-l); background-color: var(--akml-surface-panel); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-s); } .release-card { margin-bottom: var(--akml-scalar-spacing-l); padding: var(--akml-scalar-spacing-l); background-color: var(--akml-surface-panel); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-s); } .release-card-latest { border-color: var(--akml-accent-primary); } .release-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--akml-scalar-spacing-xs) var(--akml-scalar-spacing-l); margin-block: var(--akml-scalar-spacing-m); } .release-facts dt { color: var(--akml-text-secondary); font-weight: var(--akml-type-chrometitle-weight); } .release-facts dd { margin: 0; } .host-badges { display: flex; flex-wrap: wrap; gap: var(--akml-scalar-spacing-s); margin: 0; padding: 0; list-style: none; } .host-badges li { padding: var(--akml-scalar-spacing-xs) var(--akml-scalar-spacing-s); background-color: var(--akml-surface-elevated); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-pill); } /* Copyable monospace digest block (FR-003). */ .hash-block code { display: block; overflow-wrap: anywhere; user-select: all; padding: var(--akml-scalar-spacing-s); background-color: var(--akml-surface-elevated); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-xs); font-size: var(--akml-type-editor-size); } .hash-hint { margin-block: var(--akml-scalar-spacing-xs); color: var(--akml-text-secondary); } /* U22: copy-to-clipboard affordance for the SHA-256 digest. Hidden by default so no-JS users never see a dead button; copy-hash.js reveals it via .js-copy-hash on . */ .copy-hash-btn { display: none; margin-inline-start: var(--akml-scalar-spacing-s); padding: var(--akml-scalar-spacing-xs) var(--akml-scalar-spacing-s); background-color: var(--akml-surface-elevated); color: var(--akml-text-primary); border: 1px solid var(--akml-border-strong); border-radius: var(--akml-scalar-radius-xs); font-size: 0.875rem; cursor: pointer; } .copy-hash-btn:hover { background-color: var(--akml-surface-hover); } .copy-hash-btn.copied { color: var(--akml-status-success); border-color: var(--akml-status-success); } html.js-copy-hash .copy-hash-btn { display: inline-block; } .release-list { margin: 0; padding: 0; list-style: none; } /* Friendly fallback panel (contracts/releases-json.md failure behavior). */ .notice { padding: var(--akml-scalar-spacing-l); background-color: var(--akml-surface-panel); border: 1px solid var(--akml-status-info); border-radius: var(--akml-scalar-radius-s); } .notice h2 { margin-top: 0; } /* --- US2 docs pages (T024–T026): sidebar tree, no-JS title filter, search box, rendered Markdown. Structural only, all colors via --akml-* tokens. */ .docs-sidebar { font-size: var(--akml-type-chrome-size); } /* Always-on title filter (plain GET form — works with JS disabled, FR-007). */ .docs-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--akml-scalar-spacing-xs); margin-bottom: var(--akml-scalar-spacing-m); } /* U16: once docs-search.js has the full-text index ready it marks with .js — JS users then see only the full-text box, not two stacked search affordances. No-JS users keep this GET filter. */ html.js .docs-filter { display: none; } .docs-filter input[type="search"], .docs-search input[type="search"] { flex: 1; min-width: 0; padding: var(--akml-scalar-spacing-xs) var(--akml-scalar-spacing-s); background-color: var(--akml-surface-input); color: var(--akml-text-primary); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-xs); } .docs-filter button { padding: var(--akml-scalar-spacing-xs) var(--akml-scalar-spacing-s); background-color: var(--akml-accent-primary); color: var(--akml-text-onaccent); border: 1px solid var(--akml-accent-primary); border-radius: var(--akml-scalar-radius-xs); cursor: pointer; } .docs-filter button:hover { background-color: var(--akml-accent-primaryhover); border-color: var(--akml-accent-primaryhover); } .docs-filter-clear { color: var(--akml-text-secondary); } /* Full-text search: progressive enhancement — hidden until js/docs-search.js marks documentElement with .js (T027). Without JS only the title filter above shows. */ .docs-search { display: none; margin-bottom: var(--akml-scalar-spacing-m); } html.js .docs-search { display: block; } .docs-search input[type="search"] { width: 100%; } .docs-search-results { margin: var(--akml-scalar-spacing-xs) 0 0; padding: 0; list-style: none; max-height: 40vh; overflow-y: auto; background-color: var(--akml-surface-elevated); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-xs); } .docs-search-results a { display: block; padding: var(--akml-scalar-spacing-xs) var(--akml-scalar-spacing-s); color: var(--akml-text-primary); text-decoration: none; } .docs-search-results a:hover, .docs-search-results a:focus-visible { background-color: var(--akml-surface-hover); } /* U21: no-matches row emitted by docs-search.js. */ .docs-search-empty { padding: var(--akml-scalar-spacing-xs) var(--akml-scalar-spacing-s); color: var(--akml-text-secondary); } /* Collapsible section tree (native details — deep trees stay usable). */ .docs-section { margin-bottom: var(--akml-scalar-spacing-xs); } .docs-section summary { cursor: pointer; /* U14: roomier touch target (~37 px tall row). */ padding-block: var(--akml-scalar-spacing-s); color: var(--akml-text-primary); font-weight: var(--akml-type-chrometitle-weight); } .docs-tree ul { margin: 0; padding: 0 0 0 var(--akml-scalar-spacing-s); list-style: none; } .docs-tree li a { display: block; /* U14: ~37 px touch target (>=32 px floor; 44 would wreck tree density). */ padding: var(--akml-scalar-spacing-s); color: var(--akml-text-secondary); text-decoration: none; border-left: 2px solid transparent; border-radius: var(--akml-scalar-radius-xs); } .docs-tree li a:hover { color: var(--akml-text-primary); background-color: var(--akml-surface-hover); } .docs-tree li a.docs-current { color: var(--akml-text-primary); background-color: var(--akml-surface-hover); border-left-color: var(--akml-accent-primary); } .docs-no-matches, .docs-filter-status { color: var(--akml-text-secondary); } .docs-index-list { margin-block: var(--akml-scalar-spacing-s); padding-left: var(--akml-scalar-spacing-l); } .docs-index-list li { margin-block: var(--akml-scalar-spacing-xs); } .docs-index-summary { margin: 2px 0 0; color: var(--akml-text-secondary); font-size: 0.875rem; } .doc-updated { color: var(--akml-text-secondary); font-size: 0.9em; } /* Rendered Markdown content (cached HTML from the T022 pipeline). */ .doc-body img { max-width: 100%; height: auto; } .doc-body pre { overflow-x: auto; padding: var(--akml-scalar-spacing-m); background-color: var(--akml-surface-elevated); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-xs); font-size: var(--akml-type-editor-size); } .doc-body :not(pre) > code { padding: 0 var(--akml-scalar-spacing-xs); background-color: var(--akml-surface-elevated); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-xs); } .table-scroll { /* Wide tables scroll inside their own container instead of clipping (mobile). */ max-width: 100%; overflow-x: auto; margin-block: var(--akml-scalar-spacing-m); } .doc-body table { border-collapse: collapse; margin-block: 0; } .doc-body th, .doc-body td { padding: var(--akml-scalar-spacing-xs) var(--akml-scalar-spacing-m); /* U10: 5%-white subtle borders are nearly invisible in dark; default border reads. */ border: 1px solid var(--akml-border-default); } .doc-body th { background-color: var(--akml-surface-panel); } /* ColorCode server-side highlighting (HtmlFormatterType.Css classes) on syntax tokens. */ .doc-body pre .keyword { color: var(--akml-syntax-keyword); } .doc-body pre .string { color: var(--akml-syntax-string); } .doc-body pre .number { color: var(--akml-syntax-number); } .doc-body pre .comment { /* U9: the shared token (#64748b) fails contrast on the dark code background (2.18:1). Lightening it 55% toward the theme's primary text hits ~4.9:1 on --akml-surface-elevated in dark and ~10:1 in light (WCAG AA >= 4.5:1). */ color: color-mix(in srgb, var(--akml-syntax-comment) 45%, var(--akml-text-primary)); font-style: italic; } .doc-body pre .function, .doc-body pre .typeName, .doc-body pre .className { color: var(--akml-syntax-function); } .doc-body pre .preprocessor { color: var(--akml-syntax-tablecolumn); } /* --- T029 (US3): Developer Dark marketing layer (FR-009). Glowing accent treatment and code-first/monospace touches layered purely on --akml-* tokens (semantic status colors excepted) — the same rules drive the light palette and the high-contrast system-color keywords, so the look stays intentional in every theme. Glows use color-mix(); unsupported engines simply drop the glow, never the base style. */ /* Hero: the product name carries the accent glow. */ .hero h1 { text-shadow: 0 0 24px color-mix(in srgb, var(--akml-accent-primary) 55%, transparent); } /* Primary CTA: accent halo that deepens on hover. */ .btn-primary { box-shadow: 0 0 16px color-mix(in srgb, var(--akml-accent-primary) 45%, transparent); } .btn-primary:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--akml-accent-primary) 60%, transparent); } /* Focused cards: the latest release keeps a soft accent halo; hover lifts any card. */ .release-card-latest { box-shadow: 0 0 20px color-mix(in srgb, var(--akml-accent-primary) 30%, transparent); } .card { transition: border-color 0.15s ease, box-shadow 0.15s ease; } .card:hover { border-color: var(--akml-border-strong); box-shadow: 0 0 14px color-mix(in srgb, var(--akml-accent-primary) 20%, transparent); } /* U8: on a light canvas the glow alphas composite into heavy solid-blue outlines — dial them down, and drop the latest-release halo entirely (the accent border stays). */ html[data-akml-theme="light"] .hero h1 { text-shadow: 0 0 18px color-mix(in srgb, var(--akml-accent-primary) 22%, transparent); } html[data-akml-theme="light"] .btn-primary { box-shadow: 0 0 10px color-mix(in srgb, var(--akml-accent-primary) 18%, transparent); } html[data-akml-theme="light"] .btn-primary:hover { box-shadow: 0 0 14px color-mix(in srgb, var(--akml-accent-primary) 26%, transparent); } html[data-akml-theme="light"] .release-card-latest { box-shadow: none; } html[data-akml-theme="light"] .card:hover { box-shadow: 0 0 8px color-mix(in srgb, var(--akml-accent-primary) 10%, transparent); } /* Code-first touches: brand mark, version strings, and host badges in the editor face (hash/digest blocks already render monospace via the base code rule). */ .site-brand { font-family: var(--akml-type-editor-family), monospace; letter-spacing: 0.02em; } .release-card h2, .release-card h3 { font-family: var(--akml-type-editor-family), monospace; } .host-badges li { font-family: var(--akml-type-editor-family), monospace; font-size: var(--akml-type-editorgrid-size); } /* U15: "On this page" H2 anchor nav emitted by DocPage for long documents — compact card treatment; hidden on narrow viewports where it would push the article down (the sidebar tree already provides navigation there). */ .on-this-page { margin-block: var(--akml-scalar-spacing-m); padding: var(--akml-scalar-spacing-m); background-color: var(--akml-surface-panel); border: 1px solid var(--akml-border-subtle); border-radius: var(--akml-scalar-radius-s); font-size: 0.875rem; } .on-this-page-heading { margin: 0 0 var(--akml-scalar-spacing-xs); color: var(--akml-text-primary); font-weight: var(--akml-type-chrometitle-weight); } .on-this-page ul { margin: 0; padding-left: var(--akml-scalar-spacing-l); } .on-this-page li { margin-block: 2px; } .on-this-page a { color: var(--akml-text-secondary); text-decoration: none; } .on-this-page a:hover, .on-this-page a:focus-visible { color: var(--akml-text-link); } /* --- T030 (US3): responsive pass, 360–1920 px (FR-008 / SC-003). No JS involved: the header nav flex-wraps (base rule above), the docs grid collapses to one column with the sidebar stacked above the content, and long unbreakable content is contained inside the article instead of forcing page-level horizontal scroll. */ @media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; } .docs-sidebar { position: static; max-height: none; /* U13: stacked layout leads with the article; the nav tree follows it. */ order: 2; } .on-this-page { display: none; } } @media (max-width: 640px) { .container { padding-inline: var(--akml-scalar-spacing-m); } .site-nav, .site-nav-links, .site-footer-inner, .site-footer-links { gap: var(--akml-scalar-spacing-s) var(--akml-scalar-spacing-m); } /* U14: header nav links get real vertical touch targets on phones (~37 px). */ .site-nav-links a { display: inline-block; padding-block: var(--akml-scalar-spacing-s); } /* Release facts stack at phone width so long labels never squeeze the values. */ .release-facts { grid-template-columns: 1fr; } } /* U11: wrap long words/URLs in prose only — applying `anywhere` to the whole article mangled code identifiers at 360 px ("SqlcmdPrepro cessor"). Inline code stays unbroken; a too-long span scrolls with its own block (p/li) instead of pushing the whole page sideways. */ .doc-body p, .doc-body li { overflow-wrap: break-word; overflow-x: auto; } /* A scroll-container li clips its outside marker — move markers inside the box. */ .doc-body li { list-style-position: inside; } .doc-body :not(pre) > code { overflow-wrap: normal; }