which
itself goes display:none below 960px. The companion .kg-sidebar-mobile
placeholder lives in the main content column and is only visible below
960px. main.ts uses window.matchMedia to mount the Vue app onto exactly
one placeholder per viewport — the other stays in the DOM but unmounted. */
.kg-sidebar-desktop {
display: block;
}
.kg-sidebar-mobile {
display: none;
}
@media (max-width: 960px) {
.kg-sidebar-mobile {
display: block;
}
.kg-sidebar-desktop {
display: none;
}
}
@media (max-width: 640px) {
.tutorial-nav-bottom {
flex-direction: column;
align-items: stretch;
}
.tutorial-nav-next {
margin-left: 0;
text-align: right;
}
}
/* ── Responsive ── */
@media (max-width: 768px) {
.mission-hero h1,
.group-hero h1 {
font-size: 1.5rem;
}
.mission-body,
.group-body {
padding: 1rem;
}
.group-card {
padding: 1rem;
}
.mission-hero .hero-top {
flex-direction: column;
}
.timeline-card {
padding: 1rem;
}
}
/* ── Code block: filename + collapse + Chroma integration ── */
.code-block-filename {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sapTextColor, #32363a);
margin-right: 0.75rem;
}
.code-block-lang-secondary {
margin-left: auto;
margin-right: 0.5rem;
opacity: 0.7;
}
/* The Chroma sits inside .code-block-body — strip its own background so the block uses our header/body styling */
.code-block-body .chroma {
background: transparent;
border: none;
border-radius: 0;
margin: 0;
padding: 1rem;
overflow-x: auto;
}
.code-block-body .chroma pre {
margin: 0;
padding: 0;
background: transparent;
border: none;
}
html.dark .code-block {
border-color: var(--sapField_BorderColor, #4a4d52);
}
html.dark .code-block-header {
background: var(--sapList_HeaderBackground, #1a1d21);
border-bottom-color: var(--sapField_BorderColor, #4a4d52);
}
html.dark .code-block-body,
html.dark .code-block-body .chroma {
background: #0d1117;
}
html.dark pre,
html.dark :not(pre) > code {
background-color: #0d1117;
color: #e6edf3;
}
/* Long-block collapse */
.code-block-long .code-block-body[data-collapsed="true"] {
max-height: 28rem;
overflow: hidden;
position: relative;
}
.code-block-long .code-block-body[data-collapsed="true"]::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4rem;
background: linear-gradient(to bottom, transparent, var(--sapField_Background, #f5f6f7));
pointer-events: none;
}
html.dark .code-block-long .code-block-body[data-collapsed="true"]::after {
background: linear-gradient(to bottom, transparent, #0d1117);
}
.code-block-toggle {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.5rem;
background: var(--sapNeutralBackground, #f5f6f7);
border: none;
border-top: 1px solid var(--sapNeutralBorderColor, #d9d9d9);
font-size: 0.8125rem;
color: var(--sapLinkColor, #0064d9);
cursor: pointer;
}
.code-block-toggle:hover {
background: var(--sapList_Hover_Background, #eaecee);
}
.code-block-toggle .toggle-hide { display: none; }
.code-block-toggle[aria-expanded="true"] .toggle-show { display: none; }
.code-block-toggle[aria-expanded="true"] .toggle-hide { display: inline; }
html.dark .code-block-toggle {
background: var(--sapList_HeaderBackground, #1a1d21);
border-top-color: var(--sapField_BorderColor, #4a4d52);
}
/* Diff block colour overrides — work in both themes thanks to Chroma classes */
.chroma .gd { background-color: rgba(255, 129, 130, 0.15); }
.chroma .gi { background-color: rgba(63, 185, 80, 0.15); }
html.dark .chroma .gd { background-color: rgba(248, 81, 73, 0.15); }
html.dark .chroma .gi { background-color: rgba(46, 160, 67, 0.15); }
/* Chroma readability overrides (dark mode).
* Hugo's `gen chromastyles --style=github-dark` emits empty rules for
* unstyled tokens (.p, .n, .nx, .x, .na, .nb, .bp), expecting them to
* inherit the foreground color from `pre.chroma`. But our `pre code`
* rule (color: var(--sapTextColor)) intercepts that cascade, so we lock
* in explicit colors here. We also brighten the function-name purple,
* which reads dim against the very dark #0d1117 background. */
html.dark .chroma code { color: #e6edf3; }
html.dark .chroma .p,
html.dark .chroma .n,
html.dark .chroma .nx,
html.dark .chroma .x,
html.dark .chroma .na,
html.dark .chroma .nb,
html.dark .chroma .bp { color: #e6edf3; }
html.dark .chroma .nf,
html.dark .chroma .fm,
html.dark .chroma .nd { color: #e2c5ff; font-weight: bold; }
/* ── Mobile responsive: code blocks + images ── */
@media (max-width: 640px) {
.code-block-body .chroma,
.code-block-body pre {
font-size: 0.75rem;
padding: 0.625rem;
}
.code-block-header {
padding: 0.25rem 0.5rem;
}
.code-block-filename {
font-size: 0.6875rem;
}
.code-block-lang {
font-size: 0.6875rem;
}
.copy-label {
display: none;
}
.tutorial-main img {
max-height: 70vh;
}
.tutorial-figcaption {
font-size: 0.8125rem;
}
}
/* Phase 4.4 (#447 §9): concept-page "Videos teaching this" inline
thumbnail. 120×68 hot-linked from i.ytimg.com (CSP `img-src` already
allows). Sits inline with the row text — title + meta render to the
right of the thumbnail on the same baseline. The sidebar branch in
RelatedGraph.vue intentionally does NOT render a thumbnail to
preserve visual rhythm (spec §9). */
.concept-page__section .kg-video-thumb {
display: inline-block;
width: 120px;
height: 68px;
border-radius: 4px;
margin-right: 0.5em;
vertical-align: middle;
object-fit: cover;
}
/* Phase 4.5 (#746 §5): concept-page "Official reference documentation"
inline link-out icon (↗) + apiType badge. No thumbnail — api-docs
don't have them; the ↗ signals "external authority" instead. The
sidebar branch in RelatedGraph.vue likewise renders no thumbnail to
preserve the existing visual rhythm. */
.concept-page__section .kg-link-out {
display: inline-block;
margin-left: 0.25em;
font-size: 0.85em;
opacity: 0.7;
}
.concept-page__section .kg-api-type {
display: inline-block;
padding: 0.1em 0.5em;
font-family: var(--sapFontFamily, monospace);
font-size: 0.85em;
background: var(--sapNeutralBackground, rgba(0, 0, 0, 0.05));
border-radius: 3px;
}
/* Phase 4.6 (#747 §5): concept-page "Code samples embodying this"
inline language badge. Same shape as .kg-api-type — the language
token (e.g. "JavaScript", "Java", "ABAP") renders as a small
monospaced pill. The .kg-link-out icon (↗) is reused from Phase
4.5 to signal external authority. No thumbnail rendering — samples
are GitHub repos and don't have them; the badge + ↗ carry the
visual weight instead. */
.concept-page__section .kg-language {
display: inline-block;
padding: 0.1em 0.5em;
font-family: var(--sapFontFamily, monospace);
font-size: 0.85em;
background: var(--sapNeutralBackground, rgba(0, 0, 0, 0.05));
border-radius: 3px;
}
/* Phase 4.7 (#748 §4.8.1): help-docs source badge + metadata classes.
Three-source discriminator visible at a glance. Mirrors the shape of
.kg-api-type (Phase 4.5) and .kg-language (Phase 4.6) — small
monospaced pill — but with per-source tinted backgrounds instead of
the neutral gray. The tint palette is intentionally muted (soft,
Fundamental-Style neutral tones — no saturated brand colors) so the
badge signals canonicality without visually dominating the row.
Precedent: .kg-api-type / .kg-language are neutral pills (single
background). Phase 4.7 needs source discrimination, so each source
gets a distinct pastel background but the shape stays identical. */
.concept-page__section .kg-help-source,
.kg-sidebar-meta .kg-help-source {
display: inline-block;
padding: 0.1em 0.5em;
font-family: var(--sapFontFamily, sans-serif);
font-size: 0.8em;
font-weight: 500;
background: var(--sapNeutralBackground, rgba(0, 0, 0, 0.05));
border-radius: 3px;
margin-right: 0.25em;
vertical-align: baseline;
}
.concept-page__section .kg-help-source--cap-cloud-sap,
.kg-sidebar-meta .kg-help-source--cap-cloud-sap {
/* CAP: muted blue (matches SAP Fiori design's info-blue tone). */
background: #e5f0ff;
color: #0a5a9e;
}
.concept-page__section .kg-help-source--help-sap-com,
.kg-sidebar-meta .kg-help-source--help-sap-com {
/* help.sap.com: muted orange (SAP corporate accent). */
background: #fff2e0;
color: #a05a10;
}
.concept-page__section .kg-help-source--ui5-sap-com,
.kg-sidebar-meta .kg-help-source--ui5-sap-com {
/* UI5: muted teal (matches UI5 Horizon accent). */
background: #e0f5f0;
color: #10704a;
}
/* Anchor label — the human-readable H2/H3 title next to the
` · ` separator. Muted so it reads as metadata, not primary content. */
.concept-page__section .kg-help-anchor {
color: var(--sapContent_LabelColor, #555);
font-size: 0.9em;
}
/* Snippet — first ~120 chars of the docs page description. Muted like
.kg-help-anchor, and ellipsis-truncated when it exceeds the row
width. `max-width` deliberately generous — full one-liner snippets
render intact on desktop; long ones truncate cleanly on narrow
screens. */
.concept-page__section .kg-help-snippet {
color: var(--sapContent_LabelColor, #555);
font-size: 0.9em;
display: inline-block;
max-width: 60ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
/* ==========================================================================
KG widget redesign (#850) — sidebar row icons, expanded panel dialog,
sidebar fade-during-expand, reduced-motion respect.
========================================================================== */
/* Sidebar Other-resources rows use the ResourceRow.vue layout:
[icon] [title-link] [meta-text]
The row is a flex container so the icon stays aligned with the link's
baseline and meta text wraps as needed. */
.kg-resource-row {
display: flex;
align-items: baseline;
gap: 0.4rem;
line-height: 1.35;
list-style: none;
margin: 0.35rem 0;
padding: 0;
}
.kg-resource-row__icon {
flex: 0 0 auto;
font-size: 0.95em;
opacity: 0.85;
}
.kg-resource-row__link {
flex: 1 1 auto;
color: var(--sapLinkColor, #0064d9);
text-decoration: none;
overflow-wrap: anywhere;
}
.kg-resource-row__link:hover,
.kg-resource-row__link:focus-visible {
text-decoration: underline;
}
.kg-resource-row__meta {
color: var(--sapNeutralTextColor, #6a6d70);
font-size: 0.82em;
}
/* Sidebar fades to 40% while the expanded panel is open so the reader's
eyes drift to the dialog. The RelatedGraph orchestrator applies
data-dimmed="true" via inheritAttrs on . */
.kg-sidebar[data-dimmed="true"] {
opacity: 0.4;
transition: opacity 200ms ease;
}
/* Sidebar header hosts the expand (⤢) button on the right. */
.kg-sidebar__expand-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 1.1rem;
padding: 0.15rem 0.4rem;
color: var(--sapButton_Lite_TextColor, #0064d9);
border-radius: 0.25rem;
}
.kg-sidebar__expand-btn:hover,
.kg-sidebar__expand-btn:focus-visible {
background: var(--sapButton_Lite_Hover_Background, rgba(0, 100, 217, 0.06));
outline: 2px solid var(--sapBrandColor, #0070f2);
outline-offset: 2px;
}
/* ==========================================================================
Expanded panel dialog — Joule-style, teleported to #kg-expanded-root.
========================================================================== */
#kg-expanded-root {
position: relative;
z-index: 1000;
}
.kg-expanded {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(480px, 90vw);
background: var(--sapBaseColor, #fff);
color: var(--sapTextColor, #32363a);
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
transform: translateX(0);
animation: kg-expanded-in 200ms ease;
display: flex;
flex-direction: column;
z-index: 1000;
}
.kg-expanded[data-wide="true"] {
width: min(800px, 90vw);
}
.kg-expanded__header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--sapNeutralBorderColor, #d9d9d9);
flex: 0 0 auto;
}
.kg-expanded__header h2 {
flex: 1 1 auto;
margin: 0;
font-size: 1rem;
line-height: 1.25;
}
.kg-expanded__subtitle {
margin: 0.15rem 0 0;
font-size: 0.82em;
color: var(--sapNeutralTextColor, #6a6d70);
}
.kg-expanded__widen,
.kg-expanded__close {
border: 0;
background: transparent;
cursor: pointer;
font-size: 1.05rem;
width: 2rem;
height: 2rem;
border-radius: 0.25rem;
color: var(--sapButton_Lite_TextColor, #0064d9);
}
.kg-expanded__widen:hover,
.kg-expanded__widen:focus-visible,
.kg-expanded__close:hover,
.kg-expanded__close:focus-visible {
background: var(--sapButton_Lite_Hover_Background, rgba(0, 100, 217, 0.06));
outline: 2px solid var(--sapBrandColor, #0070f2);
outline-offset: 2px;
}
.kg-expanded__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 1rem 1.15rem;
container-type: inline-size;
}
.kg-expanded__prereq,
.kg-expanded__shared,
.kg-expanded__next {
margin-bottom: 1.25rem;
}
.kg-expanded__prereq h3,
.kg-expanded__shared h3,
.kg-expanded__next h3 {
margin: 0 0 0.4rem;
font-size: 0.95rem;
color: var(--sapTextColor, #32363a);
}
.kg-expanded__prereq ul,
.kg-expanded__shared ul,
.kg-expanded__next ul {
list-style: none;
margin: 0;
padding: 0;
}
.kg-expanded__prereq li,
.kg-expanded__shared li,
.kg-expanded__next li {
margin: 0.25rem 0;
}
.kg-expanded__reason {
color: var(--sapNeutralTextColor, #6a6d70);
font-size: 0.85em;
margin-left: 0.25rem;
}
/* Per-type grid: single-column by default; 2-column when the dialog is
widened (via container query on inline size, not viewport width). */
.kg-expanded__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin: 1rem 0 1.25rem;
}
@container (min-width: 720px) {
.kg-expanded__grid {
grid-template-columns: 1fr 1fr;
}
}
.kg-expanded__section {
border: 1px solid var(--sapNeutralBorderColor, #d9d9d9);
border-radius: 0.35rem;
padding: 0.5rem 0.75rem;
background: var(--sapNeutralBackground, rgba(0, 0, 0, 0.02));
}
.kg-expanded__section summary {
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
padding: 0.15rem 0;
color: var(--sapTextColor, #32363a);
list-style: none;
}
.kg-expanded__section summary::-webkit-details-marker {
display: none;
}
.kg-expanded__section summary::marker {
content: '';
}
.kg-expanded__section[open] summary {
margin-bottom: 0.4rem;
}
.kg-expanded__section ul {
list-style: none;
margin: 0;
padding: 0;
}
.kg-expanded__no-resources {
color: var(--sapNeutralTextColor, #6a6d70);
font-style: italic;
padding: 0.75rem 0;
margin: 0;
}
.kg-expanded__skeleton {
padding: 0.5rem 0;
}
.kg-expanded__error {
padding: 1rem;
text-align: center;
}
.kg-expanded__error button {
margin-top: 0.5rem;
padding: 0.4rem 0.9rem;
border: 1px solid var(--sapButton_Lite_BorderColor, #0064d9);
background: transparent;
color: var(--sapButton_Lite_TextColor, #0064d9);
border-radius: 0.25rem;
cursor: pointer;
}
/* Motion — slide in from the right on open. Honors OS reduced-motion. */
@keyframes kg-expanded-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.kg-expanded {
animation: none;
}
.kg-sidebar[data-dimmed="true"] {
transition: none;
}
}
/* ==========================================================================
#1127 — concept-page related-content CARDS. Converts the 12 related-content
sections from / link lists to a responsive card grid. Namespaced
`concept-card` (self-contained — no dependency on the Vue-owned
hugo-apps/src/shared/cards/card.css) but visually aligned with .nav-card:
same radius, subtle shadow, hover lift, --sap* theme vars throughout so
dark mode adapts automatically.
========================================================================== */
.concept-page__section {
margin-bottom: 1.5rem;
}
.concept-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
}
.concept-card {
display: flex;
flex-direction: column;
/* #1127: content-box + height:100% made each card render 34px taller than
its grid track (padding 2×1rem + border 2×1px), overflowing onto the next
section's H2. border-box folds that padding+border into the 100% height so
the card exactly fills its cell — footer pinning via .concept-card__meta
margin-top:auto still works. */
box-sizing: border-box;
height: 100%;
background: var(--sapBaseColor, #fff);
border: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
border-radius: 0.75rem;
padding: 1rem;
text-decoration: none;
color: inherit;
transition: box-shadow 0.15s ease, transform 0.15s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.concept-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
a.concept-card:hover .concept-card__title {
color: var(--sapBrandColor, #0070f2);
}
/* Type micro-label with a colored dot, matching .nav-card__type. */
.concept-card__type {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 0.5rem;
color: var(--sapContent_LabelColor, #556b82);
}
.concept-card__type::before {
content: '';
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: currentColor;
}
.concept-card__type--tutorial { color: var(--sapAccentColor10, #5b738b); }
.concept-card__type--concept { color: var(--sapAccentColor6, #046c7a); }
.concept-card__type--external { color: var(--sapAccentColor8, #6c32a9); }
.concept-card__title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--sapTextColor, #32363a);
margin: 0 0 0.375rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.concept-card__body {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--sapContent_LabelColor, #556b82);
margin: 0 0 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Thumbnail (videos). Reuses the 120x68 aspect but scales to the column. */
.concept-card__thumb {
width: 100%;
height: auto;
aspect-ratio: 120 / 68;
border-radius: 0.375rem;
margin-bottom: 0.5rem;
object-fit: cover;
background: var(--sapNeutralBackground, rgba(0, 0, 0, 0.05));
}
/* Footer meta row — pushed to the bottom, dot-separated, small + muted. */
.concept-card__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.375rem;
margin-top: auto;
padding-top: 0.625rem;
border-top: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
font-size: 0.75rem;
color: var(--sapContent_LabelColor, #556b82);
}
/* Badge row (source badge + link-out) at the card top-right. Reuses the
existing .kg-help-source--* / .kg-link-out / .kg-api-type / .kg-language
inline classes verbatim inside the card. */
.concept-card__badges {
display: flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.5rem;
}
/* #1127: difficulty badge inside tutorial "teaches" cards — neutral pill
matching the .kg-api-type / .kg-language shape but with label weight to
distinguish a categorical tag from a monospaced type token. */
.concept-card__meta .kg-difficulty {
display: inline-block;
padding: 0.05em 0.4em;
font-size: 0.95em;
font-weight: 600;
color: var(--sapContent_LabelColor, #556b82);
background: var(--sapNeutralBackground, rgba(0, 0, 0, 0.05));
border-radius: 3px;
}
@media (max-width: 640px) {
.concept-card-grid { gap: 0.75rem; }
.concept-card { padding: 0.875rem; }
}
/* Intro passthrough + styled video slot (tutorial video embeds). */
.tutorial-intro {
margin: 0 0 1.5rem;
}
.tutorial-intro iframe {
max-width: 100%;
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
border: 0;
border-radius: 0.5rem;
}
.tutorial-video {
margin: 0 0 1.5rem;
}
.tutorial-video__frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0.5rem;
overflow: hidden;
background: #000;
}
.tutorial-video__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}