Instance Transformation
any-resource-stylesheet
- Input Pattern
- Artifact Name
- Outputs
Stylesheet- Rule
Build AST Node- AST Class
Document- Set
- Field
Children- Bind Value
Concat- Parts
Build AST Node- AST Class
Raw Block- Set
- Field
Raw Content- Bind Value
String Literal- String Literal Value
- :root {
--kan-link-color: #0066cc;
--kan-link-hover-color: #004999;
--kan-badge-bg: #ddebf7;
--kan-badge-fg: #044289;
--kan-text-color: inherit;
--kan-muted-color: #6e7781;
--kan-border-color: #d0d7de;
--kan-table-header-bg: #f6f8fa;
/* Design tokens for the look band classes below.
In the look path these come from the look-tokens
cascade; the baseline (a static artifact) supplies
a light-theme default set so look-rendered pages
are styled OOTB with no publisher stylesheet. */
--kan-text: #1f2328;
--kan-text-dim: #4b5563;
--kan-text-faint: #6e7781;
--kan-bg-card: #ffffff;
--kan-bg-elev: #f6f8fa;
--kan-border: #d0d7de;
--kan-border-soft: #eaecef;
--kan-radius: 8px;
--kan-accent: #0066cc;
--kan-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--kan-font-display: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--kan-line-height-heading: 1.2;
}
/* Reference links — every <a class="kan-link">
emitted by HtmlBackend.renderResourceLink. */
.kan-link {
color: var(--kan-link-color);
cursor: pointer;
text-decoration: none;
}
.kan-link:hover {
color: var(--kan-link-hover-color);
text-decoration: underline;
}
/* Type / annotation chips — emitted by
HtmlBackend.renderBadge for every docast.Badge
in the AST. Span when untargeted, anchor when
clickable. */
.kan-badge {
display: inline-block;
background: var(--kan-badge-bg);
color: var(--kan-badge-fg);
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
text-decoration: none;
vertical-align: middle;
margin-left: 6px;
}
a.kan-badge { cursor: pointer; }
a.kan-badge:hover {
filter: brightness(0.95);
text-decoration: none;
}
/* PropertyList — definition-list rendering of a
resource's statements. Class is `property-list`
(no kan- prefix; engine uses the same class
since 1.0.0). */
dl.property-list {
margin: 0.5em 0 1em;
padding: 0;
}
dl.property-list dt {
font-weight: 600;
color: var(--kan-text-color);
margin: 0.6em 0 0.1em;
}
dl.property-list dt:first-child {
margin-top: 0;
}
dl.property-list dd {
margin: 0 0 0 1.2em;
color: var(--kan-text-color);
}
/* Nested PropertyLists (embedded resources) sit
inside a <dd>; tighten margins so they don't
drift too far from their parent row. */
dl.property-list dd > dl.property-list {
margin-top: 0.2em;
}
/* Table rendering for lists of dict-keyed
embeddeds. */
table.property-table {
border-collapse: collapse;
margin: 0.4em 0;
width: 100%;
}
table.property-table th,
table.property-table td {
border: 1px solid var(--kan-border-color);
padding: 0.3em 0.6em;
text-align: left;
vertical-align: top;
font-size: 13px;
}
table.property-table th {
background: var(--kan-table-header-bg);
font-weight: 600;
}
/* ===================================================
LookRenderer band classes. The baseline must style
every band the LookRenderer (look@1.17.0) can emit,
so a look-rendered page is presentable from this
stylesheet alone. Rules mirror look-styles@1.16.0;
keep them in sync as new bands land. */
.kan-main { max-width: 860px; margin: 0 auto; padding: 0 24px 64px; }
/* Breadcrumb */
.kan-breadcrumb { margin: 16px 0 8px; font-size: 12px; }
.kan-breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0;
margin: 0;
}
.kan-breadcrumb li { display: inline-flex; align-items: center; }
.kan-breadcrumb li + li::before {
content: "/";
margin-right: 6px;
color: var(--kan-text-faint);
}
.kan-breadcrumb a { color: var(--kan-text-dim); text-decoration: none; }
.kan-breadcrumb a:hover { color: var(--kan-accent); }
.kan-breadcrumb li[aria-current="page"] { color: var(--kan-text-faint); }
/* Hero band */
.kan-hero {
padding: 32px 0 24px;
border-bottom: 1px solid var(--kan-border);
margin-bottom: 32px;
}
.kan-hero-has-icon { display: flex; align-items: center; gap: 22px; }
.kan-hero-has-icon .kan-hero-text { flex: 1; min-width: 0; }
.kan-hero-icon { flex: none; width: 56px; height: 56px; }
.kan-hero-eyebrow {
font-family: var(--kan-font-mono);
font-size: 11px;
color: var(--kan-accent);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 12px;
display: block;
}
.kan-hero-title {
font-family: var(--kan-font-display);
font-size: 32px;
font-weight: 600;
letter-spacing: -0.015em;
margin: 0 0 12px;
line-height: var(--kan-line-height-heading);
color: var(--kan-text);
}
.kan-hero-subtitle {
font-size: 17px;
color: var(--kan-text-dim);
font-weight: 300;
line-height: 1.55;
margin: 0 0 16px;
}
.kan-hero-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* PropertyList band */
.kan-property-list { margin: 24px 0; }
.kan-property-list-title {
font-family: var(--kan-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kan-text-dim);
margin: 0 0 12px;
font-weight: 600;
}
.kan-property-list-items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.kan-property-list-items > li { color: var(--kan-text); }
.kan-property-list-items > li.kan-empty {
color: var(--kan-text-faint);
font-style: italic;
}
/* Embedded resource — nested definition list of an
embedded object's predicate/value pairs (#31). */
dl.kan-embedded {
display: grid;
grid-template-columns: max-content 1fr;
gap: 2px 16px;
margin: 4px 0;
padding-left: 12px;
border-left: 2px solid var(--kan-border-soft);
}
dl.kan-embedded > dt {
color: var(--kan-text-dim);
font-family: var(--kan-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
}
dl.kan-embedded > dd { margin: 0; color: var(--kan-text); }
dl.kan-embedded dl.kan-embedded { margin: 0; }
/* StatRow band */
.kan-stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.kan-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 14px;
background: var(--kan-bg-card);
border: 1px solid var(--kan-border-soft);
border-radius: var(--kan-radius);
min-width: 84px;
}
.kan-stat-label {
font-family: var(--kan-font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--kan-text-dim);
}
.kan-stat-val {
font-family: var(--kan-font-mono);
font-size: 18px;
font-weight: 600;
color: var(--kan-text);
}
/* SectionHeading band */
.kan-section { margin: 40px 0 16px; }
.kan-section-title {
font-family: var(--kan-font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--kan-text-dim);
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.kan-section-title::after {
content: "";
flex: 1;
height: 1px;
background: var(--kan-border);
}
.kan-section-note {
margin: 6px 0 0;
font-size: 13px;
color: var(--kan-text-faint);
line-height: 1.5;
}
/* SectionNav band — in-page table of contents */
.kan-section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 28px; }
.kan-section-nav-link {
font-family: var(--kan-font-mono);
font-size: 12px;
letter-spacing: 0.03em;
text-decoration: none;
color: var(--kan-text-dim);
background: var(--kan-bg-elev);
border: 1px solid var(--kan-border);
border-radius: 999px;
padding: 5px 13px;
transition: color 0.15s, border-color 0.15s;
}
.kan-section-nav-link:hover {
color: var(--kan-accent);
border-color: var(--kan-accent);
}
Resource
Media Type
CSS