/* ========================================================================== STONE BRAND — CUSTOM CSS · Kong Konnect Dev Portal v3 -------------------------------------------------------------------------- Aplicação: 1. Konnect → Dev Portal → Customization → Appearance 2. Em "Basic": primário #30A66D (Jade green.4) / secundário #1B221F (Jade sage.1) + upload do logo 3. Em "Custom CSS": cole TUDO daqui (ou rode publish-stone-kong-portal.mjs) Filosofia: sobrescrever os tokens "Konnect UI Kit" (--kui-*) com a paleta Stone, e adicionar refinamentos onde os tokens não chegam (typography, prose, focus, scroll, motion). !important só onde Kong força via inline. ========================================================================== */ /* ─── 1. FONT LOADING ────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ─── 1b. ROOBERT (Stone brand) — base64-embedded woff2 ─────────────────── */ /* ─── 1b. ROOBERT (Stone brand) — via URL externa (BASE: assets/fonts) ─────────────── TROCAR o BASE abaixo pela URL de hospedagem definitiva (instruções pendentes). */ @font-face{font-family:'Roobert';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/roobert-regular.woff2') format('woff2');} @font-face{font-family:'Roobert';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/roobert-medium.woff2') format('woff2');} @font-face{font-family:'Roobert';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/roobert-semibold.woff2') format('woff2');} @font-face{font-family:'Roobert';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/roobert-bold.woff2') format('woff2');} @font-face{font-family:'Roobert';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/roobert-heavy.woff2') format('woff2');} /* ─── 2. TOKENS ──────────────────────────────────────────────────────────── */ :root { /* Paleta Stone — ALINHADA AO JADE DS (global.color.green.*) — ver outputs/compliance-checks Cada degrau referencia um token Jade; 500 = green.4 (brand), 600 = green.3 (hover). */ --stone-50: hsla(137, 47%, 97%, 1); /* green.11 */ --stone-100: hsla(139, 47%, 93%, 1); /* green.10 */ --stone-200: hsla(142, 44%, 84%, 1); /* green.8 */ --stone-300: hsla(146, 40%, 68%, 1); /* green.6 */ --stone-400: hsla(151, 40%, 54%, 1); /* green.5 */ --stone-500: hsla(151, 55%, 42%, 1); /* green.4 — PRIMÁRIO (theme.color.background.brand) */ --stone-600: hsla(151, 55%, 38%, 1); /* green.3 — hover/strong */ --stone-700: hsla(151, 55%, 22%, 1); /* green.2 */ --stone-800: hsla(151, 55%, 14%, 1); /* green.1 */ --stone-900: hsla(151, 55%, 10%, 1); /* extrapolação em-hue (Jade não tokeniza < green.1) */ /* Realce / foco — ALINHADO AO JADE: usa o verde de marca (green.4), não verdes fora da escala. Os antigos #00D700/#A5FA00/#87FF4B/#D2FF7D saíam da paleta. */ --stone-bright: var(--stone-500); /* Stone Ink — neutros ALINHADOS AO JADE DS (global.color.sage.*) — antes era Tailwind/slate (azulado); agora "sage" (esverdeado/quente, hue ~150-163). 900 = sage.1 (preto Jade). */ --stone-ink-950: hsla(154, 14%, 8%, 1); /* extrapolação em-hue (< sage.1) */ --stone-ink-900: hsla(154, 12%, 12%, 1); /* sage.1 — Stone Black Jade — CTA, headings */ --stone-ink-800: hsla(155, 10%, 16%, 1); /* extrapolação em-hue */ --stone-ink-700: hsla(158, 8%, 22%, 1); /* extrapolação em-hue */ --stone-ink-600: hsla(163, 4%, 31%, 1); /* sage.2 */ --stone-ink-500: hsla(158, 3%, 54%, 1); /* sage.4 */ --stone-ink-400: hsla(150, 3%, 73%, 1); /* sage.5 */ --stone-ink-300: hsla(160, 4%, 85%, 1); /* sage.7 */ --stone-ink-200: hsla(160, 6%, 91%, 1); /* sage.9 */ --stone-ink-100: hsla(160, 10%, 94%, 1); /* sage.10 */ --stone-ink-50: hsla(150, 14%, 97%, 1); /* sage.11 */ /* Semantic surfaces */ --stone-surface: #FFFFFF; --stone-surface-muted: var(--stone-ink-50); --stone-surface-inset: var(--stone-ink-100); --stone-surface-dark: var(--stone-ink-900); /* Rodapé escuro, blocos de código, estados e foco (antes literais espalhados pelo CSS) */ --stone-footer-bg: #1B221F; --stone-footer-ink: #E6EAE8; --stone-footer-link: #9AA39E; --stone-footer-legal: #858E89; /* 4,8:1 sobre o fundo (o #6B736F anterior dava 3,3:1) */ --stone-footer-line: rgba(255, 255, 255, 0.08); --stone-footer-coin: rgba(255, 255, 255, 0.06); --stone-ink-on-dark: #FFFFFF; --stone-code-bg: #FAFAFA; --stone-code-ink: #1F2937; --stone-status-2xx: #10B981; --stone-status-3xx: #3B82F6; --stone-status-4xx: #F59E0B; --stone-status-5xx: #EF4444; --stone-focus-ring: rgba(48, 166, 109, 0.5); --stone-focus-soft: rgba(48, 166, 109, 0.12); --stone-shadow-ink: rgba(16, 24, 32, 0.08); --stone-header-bg: rgba(255, 255, 255, 0.95); /* Motion */ --stone-ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1); --stone-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --stone-duration-fast: 120ms; --stone-duration-mid: 180ms; --stone-duration-slow: 280ms; /* Elevation — Jade DS exact values */ --stone-shadow-sm: 0 1.5px 1px 0 rgba(0,0,45,0.09); --stone-shadow-md: 0 5px 20px 0 rgba(0,0,45,0.09); --stone-shadow-lg: 0 16px 56px 0 rgba(0,0,45,0.09); --stone-shadow-green: var(--stone-shadow-md); --stone-shadow-glow: var(--stone-shadow-md); /* Radii — ALINHADO AO JADE DS (theme.corner-radius.*): small/medium/large/xlarge */ --stone-radius-sm: 8px; /* corner-radius.small */ --stone-radius-md: 12px; /* corner-radius.medium */ --stone-radius-lg: 16px; /* corner-radius.large */ --stone-radius-xl: 20px; /* corner-radius.xlarge */ --stone-radius-pill: 9999px;/* corner-radius.pill */ /* Jade theme.space — no 24px step. */ --stone-space-0: 0; --stone-space-3xs: 2px; --stone-space-2xs: 4px; --stone-space-xs: 8px; --stone-space-sm: 12px; --stone-space-md: 16px; --stone-space-lg: 20px; --stone-space-xl: 32px; --stone-space-2xl: 40px; --stone-space-3xl: 48px; /* Semantic — ALINHADO AO JADE DS (indigo/orange/red). success usa a escala --stone-* (verde) */ --stone-info: hsla(226, 70%, 55%, 1); /* indigo.4 */ --stone-info-text: hsla(226, 70%, 43%, 1); /* indigo.2 */ --stone-info-bg: hsla(222, 89%, 96%, 1); /* indigo.10 */ --stone-info-border: hsla(225,100%, 88%, 1); /* indigo.7 */ --stone-warning: hsla(23, 93%, 53%, 1); /* orange.4 */ --stone-warning-text: hsla(23, 93%, 29%, 1); /* orange.2 */ --stone-warning-bg: hsla(37,100%, 92%, 1); /* orange.10 */ --stone-warning-border: hsla(30,100%, 75%, 1); /* orange.7 */ --stone-danger: hsla(358, 75%, 59%, 1); /* red.4 */ --stone-danger-text: hsla(358, 76%, 37%, 1); /* red.2 */ --stone-danger-bg: hsla(357, 90%, 96%, 1); /* red.10 */ --stone-danger-border: hsla(359, 94%, 87%, 1); /* red.7 */ /* Mapeamento Kong UI Kit → paleta Stone */ --kui-color-text-primary: var(--stone-500); --kui-color-text-primary-strong: var(--stone-600); --kui-color-text-primary-stronger: var(--stone-700); --kui-color-text-primary-strongest: var(--stone-800); --kui-color-background-primary: var(--stone-500); --kui-color-background-primary-weak: var(--stone-50); --kui-color-background-primary-weaker: var(--stone-100); --kui-color-background-primary-strong: var(--stone-600); --kui-color-border-primary: var(--stone-500); --kui-color-border-primary-weak: var(--stone-200); --kui-color-text-neutral: var(--stone-ink-700); --kui-color-text-neutral-strong: var(--stone-ink-800); --kui-color-text-neutral-stronger: var(--stone-ink-900); --kui-color-text-neutral-weak: var(--stone-ink-500); --kui-color-background-neutral: var(--stone-ink-50); --kui-color-background-neutral-weak: #FFFFFF; --kui-color-background-neutral-strong: var(--stone-ink-100); --kui-color-border-neutral: var(--stone-ink-200); --kui-color-border-neutral-weak: var(--stone-ink-100); --kui-font-family-text: 'Roobert', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --kui-font-family-code: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace; --kui-color-background-button-primary: var(--stone-ink-900); --kui-color-background-button-primary-hover: var(--stone-500); --kui-color-text-button-primary: #FFFFFF; --kui-border-radius-30: 4px; /* corner-radius.xsmall (Jade) */ --kui-border-radius-40: 8px; /* corner-radius.small (Jade) */ /* Legacy / archive section aliases — maps Tailwind-slate roles to sage tokens */ --stone-archive-bg: var(--stone-ink-100); --stone-archive-border: var(--stone-ink-300); --stone-archive-text: var(--stone-ink-600); --stone-archive-strong: var(--stone-ink-700); } /* ─── 3. BASELINE ────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { font-family: var(--kui-font-family-text); font-feature-settings: 'cv11', 'ss01', 'ss03'; color: var(--stone-ink-800); background: var(--stone-surface); } ::selection { background: var(--stone-300); color: var(--stone-ink-900); } /* Focus rings — accessible + on-brand */ *:focus-visible { outline: 2px solid var(--stone-bright); outline-offset: 2px; border-radius: 4px; } button:focus-visible, a:focus-visible { outline-offset: 3px; } /* Scrollbar — subtle, on-brand */ @supports (scrollbar-width: thin) { * { scrollbar-width: thin; scrollbar-color: var(--stone-ink-300) transparent; } } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--stone-ink-300); border-radius: var(--stone-radius-pill); border: 2px solid var(--stone-surface); } ::-webkit-scrollbar-thumb:hover { background: var(--stone-ink-400); } /* ─── 4. TYPOGRAPHY ──────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--kui-font-family-text); text-wrap: balance; font-weight: 600; letter-spacing: -0.02em; color: var(--stone-ink-900); line-height: 1.15; } h1 { font-size: 24px; line-height: 28px; letter-spacing: -0.025em; } h2 { font-size: 20px; line-height: 24px; margin-top: 1.6em; margin-bottom: 0.4em; } h3 { font-size: 18px; line-height: 20px; margin-top: 1.15em; margin-bottom: 0.35em; } h4 { font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; margin-top: 0.9em; margin-bottom: 0.3em; } /* Heading anchor offsets (no hover indicator) */ h2[id], h3[id], h4[id] { scroll-margin-top: 80px; } h2[id] > a, h3[id] > a, h4[id] > a { text-decoration: none; } /* Lead paragraph (optional class) */ .stone-lead, .lead { font-size: 1.125rem; line-height: 1.6; color: var(--stone-ink-600); font-weight: 400; } /* Eyebrow — small uppercase header above title */ /* Jade overline utility */ /* Section tagline (lighter eyebrow used inside sections) */ /* Prose paragraph rhythm — tighter for denser scanning */ p { line-height: 1.55; color: var(--stone-ink-700); margin: 0.5em 0; } p + p { margin-top: 0.5em; } /* Lists — denser */ ul, ol { line-height: 1.55; color: var(--stone-ink-700); margin: 0.5em 0; padding-left: 1.4em; } li { margin: 0.18em 0; } li > ul, li > ol { margin-top: 0.18em; margin-bottom: 0.18em; } li::marker { color: var(--stone-400); } /* Inline links — green underline w/ thicker on hover */ a { color: var(--stone-700); text-decoration: underline; text-decoration-color: var(--stone-200); text-decoration-thickness: 1.5px; text-underline-offset: 2px; transition: text-decoration-color var(--stone-duration-fast) var(--stone-ease-snap), color var(--stone-duration-fast) var(--stone-ease-snap); } a:hover { color: var(--stone-500); text-decoration-color: var(--stone-500); } /* Strong */ strong, b { color: var(--stone-ink-900); font-weight: 600; } /* Horizontal rule — subtle accent */ hr { border: 0; height: 1px; background: linear-gradient(to right, transparent, var(--stone-ink-200) 30%, var(--stone-ink-200) 70%, transparent); margin: 1.25rem 0; } /* Blockquote */ blockquote { border-left: 3px solid var(--stone-500); padding: 0.5rem 0 0.5rem 1rem; margin: 1rem 0; color: var(--stone-ink-700); font-style: italic; background: var(--stone-50); border-radius: 0 var(--stone-radius-md) var(--stone-radius-md) 0; } blockquote p { color: inherit; margin: 0; } /* ─── 5. HEADER & SIDEBAR ────────────────────────────────────────────────── */ .portal-header, header[role="banner"] { border-bottom: 3px solid var(--stone-500); background: var(--stone-header-bg); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); } .kong-sidebar-nav a, [data-component="sidebar"] a { border-radius: var(--stone-radius-sm); transition: background var(--stone-duration-fast) var(--stone-ease-snap), color var(--stone-duration-fast) var(--stone-ease-snap); } .kong-sidebar-nav a:hover, [data-component="sidebar"] a:hover { background: var(--stone-ink-50); color: var(--stone-ink-900); } .kong-sidebar-nav a.active, [data-component="sidebar"] a[aria-current="page"] { background: var(--stone-50); color: var(--stone-700); font-weight: 600; border-left: 3px solid var(--stone-500); padding-left: calc(1rem - 3px); } /* ─── 6. HERO (page-hero + section-hero) ─────────────────────────────────── */ /* Decorative dot pattern faintly behind hero text — discreet, never dominant */ /* Defensive: even if Konnect strips slot wrappers, ensure the rendered

/
inside the hero look right. Uses :where() so specificity is 0 and inline title-font-size/title-color props from page-hero win. / / Section-style heroes (page-section used as hero with our gradient) / / ─── 7. CARDS ───────────────────────────────────────────────────────────── / .kong-card, [data-component="card"] { border: 1px solid var(--stone-ink-200); border-radius: var(--stone-radius-lg); background: var(--stone-surface); transition: border-color var(--stone-duration-mid) var(--stone-ease-snap), box-shadow var(--stone-duration-mid) var(--stone-ease-snap); position: relative; overflow: hidden; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-start; } .kong-card:hover, [data-component="card"]:hover { border-color: var(--stone-300); box-shadow: var(--stone-shadow-md); } / Card with link → makes whole card clickable feel / .kong-card[href], [data-component="card"][href], a.kong-card, a[data-component="card"] { text-decoration: none; color: inherit; display: block; cursor: pointer; } / Stone "card link" applied via convertBlockCardsToLinks() in publish script / a.stone-card-link { border: 1px solid var(--stone-ink-200); border-radius: var(--stone-radius-lg); background: var(--stone-surface); transition: border-color var(--stone-duration-mid) var(--stone-ease-snap), box-shadow var(--stone-duration-mid) var(--stone-ease-snap); text-decoration: none !important; color: inherit !important; position: relative; display: block; } a.stone-card-link:hover { border-color: var(--stone-300); box-shadow: var(--stone-shadow-md); } a.stone-card-link p, a.stone-card-link strong, a.stone-card-link h1, a.stone-card-link h2, a.stone-card-link h3, a.stone-card-link h4, a.stone-card-link h5, a.stone-card-link h6 { color: inherit; } / ─── 8. BUTTONS ─────────────────────────────────────────────────────────── / button[appearance="primary"], .kong-button[data-appearance="primary"], .k-button.primary { background: var(--stone-ink-900) !important; color: var(--stone-ink-on-dark) !important; border: none !important; font-weight: 600; letter-spacing: -0.005em; border-radius: var(--stone-radius-sm) !important; transition: background var(--stone-duration-fast) var(--stone-ease-snap), transform var(--stone-duration-fast) var(--stone-ease-snap), box-shadow var(--stone-duration-fast) var(--stone-ease-snap); box-shadow: 0 1px 2px var(--stone-shadow-ink); } button[appearance="primary"]:hover, .kong-button[data-appearance="primary"]:hover, .k-button.primary:hover { background: var(--stone-500) !important; box-shadow: 0 6px 16px -6px var(--stone-focus-ring); transform: translateY(-1px); } button[appearance="primary"]:active, .kong-button[data-appearance="primary"]:active { transform: translateY(0); } button[appearance="secondary"], .kong-button[data-appearance="secondary"] { background: var(--stone-surface) !important; color: var(--stone-ink-900) !important; border: 1px solid var(--stone-ink-300) !important; font-weight: 600; border-radius: var(--stone-radius-sm) !important; transition: border-color var(--stone-duration-fast) var(--stone-ease-snap), color var(--stone-duration-fast) var(--stone-ease-snap), background var(--stone-duration-fast) var(--stone-ease-snap); } button[appearance="secondary"]:hover { border-color: var(--stone-500) !important; color: var(--stone-700) !important; background: var(--stone-50) !important; } / ─── 9. CODE — Light Minimal Theme ──────────────────────────────────────── / pre, code { font-family: var(--kui-font-family-code); font-feature-settings: 'calt', 'liga'; } pre { background: var(--stone-code-bg) !important; color: var(--stone-ink-800); border-radius: var(--stone-radius-md); padding: 0.75rem 1rem; overflow-x: auto; font-size: 0.875rem; line-height: 1.55; border: 1px solid var(--stone-ink-200); position: relative; } pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; } / Inline code / :not(pre) > code { background: var(--stone-ink-100); color: var(--stone-700); padding: 0.1rem 0.35rem; border-radius: var(--stone-radius-sm); font-size: 0.86em; font-weight: 500; border: 1px solid var(--stone-ink-200); } a:hover :not(pre) > code, a :not(pre) > code { color: var(--stone-700); } / Syntax tokens — light theme (Prism + highlight.js compatible) / .token.comment, .hljs-comment { color: var(--stone-ink-600); font-style: italic; } .token.keyword, .hljs-keyword { color: var(--stone-info-text); } .token.string, .hljs-string { color: var(--stone-700); } .token.number, .hljs-number { color: var(--stone-warning-text); } .token.boolean, .hljs-literal { color: var(--stone-danger-text); } .token.null, .hljs-built_in { color: var(--stone-ink-600); } .token.function,.hljs-function { color: var(--stone-info); } .token.operator,.hljs-operator { color: var(--stone-ink-600); } .token.punctuation { color: var(--stone-ink-600); } .token.property,.hljs-attr, .token.tag, .hljs-tag { color: var(--stone-700); } / ─── 10. TABLES ─────────────────────────────────────────────────────────── / table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1rem 0; font-size: 0.875rem; border: 1px solid var(--stone-ink-200); border-radius: var(--stone-radius-md); overflow: hidden; } thead { background: var(--stone-ink-50); } th { text-align: left; font-weight: 600; color: var(--stone-ink-900); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--stone-ink-200); font-size: 0.875rem; } td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--stone-ink-100); color: var(--stone-ink-700); line-height: 1.5; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--stone-ink-50); } / ─── 11. ALERTS / CALLOUTS ──────────────────────────────────────────────── / .kong-alert, [data-component="alert"] { border-radius: var(--stone-radius-md); padding: 0.75rem 1rem; border-left: 3px solid var(--stone-500); background: var(--stone-50); color: var(--stone-ink-900); margin: 1rem 0; } .kong-alert p, [data-component="alert"] p { margin: 0.2em 0; } .kong-alert[data-appearance="success"], [data-component="alert"][data-appearance="success"] { background: var(--stone-50); border-left-color: var(--stone-500); color: var(--stone-ink-900); } .kong-alert[data-appearance="info"], [data-component="alert"][data-appearance="info"] { background: var(--stone-info-bg); border-left-color: var(--stone-info); color: var(--stone-info-text); } .kong-alert[data-appearance="warning"], [data-component="alert"][data-appearance="warning"] { background: var(--stone-warning-bg); border-left-color: var(--stone-warning); color: var(--stone-warning-text); } .kong-alert[data-appearance="danger"], [data-component="alert"][data-appearance="danger"] { background: var(--stone-danger-bg); border-left-color: var(--stone-danger); color: var(--stone-danger-text); } / ─── 12. BADGES ─────────────────────────────────────────────────────────── / .kong-badge, [data-component="badge"] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: var(--stone-radius-pill); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; border: 1px solid transparent; } [data-component="badge"][data-appearance="success"] { background: var(--stone-50); color: var(--stone-700); border-color: var(--stone-200); } [data-component="badge"][data-appearance="info"] { background: var(--stone-info-bg); color: var(--stone-info-text); border-color: var(--stone-info-border); } [data-component="badge"][data-appearance="warning"] { background: var(--stone-warning-bg); color: var(--stone-warning-text); border-color: var(--stone-warning-border); } [data-component="badge"][data-appearance="danger"] { background: var(--stone-danger-bg); color: var(--stone-danger-text); border-color: var(--stone-danger-border); } [data-component="badge"][data-appearance="neutral"] { background: var(--stone-ink-100); color: var(--stone-ink-700); border-color: var(--stone-ink-200); } / Stone custom badge — base only; use [data-component="badge"] with data-appearance for colors / .stone-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.6rem; border-radius: var(--stone-radius-pill); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } / ─── 13. TABS ───────────────────────────────────────────────────────────── / .kong-tabs, [data-component="tabs"] { border-bottom: 1px solid var(--stone-ink-200); } .kong-tabs button, [data-component="tabs"] button, [data-component="tabs"] [role="tab"] { border: none; background: transparent; padding: 0.75rem 1rem; font-weight: 500; color: var(--stone-ink-600); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--stone-duration-fast) var(--stone-ease-snap), border-color var(--stone-duration-fast) var(--stone-ease-snap); } .kong-tabs button:hover, [data-component="tabs"] button:hover, [data-component="tabs"] [role="tab"]:hover { color: var(--stone-ink-900); } .kong-tabs [aria-selected="true"], [data-component="tabs"] [aria-selected="true"] { color: var(--stone-700) !important; border-bottom-color: var(--stone-500) !important; font-weight: 600; } / ─── 14. APIs CATALOG LIST ──────────────────────────────────────────────── / .kong-apis-list, [data-component="apis-list"] { margin-top: 1rem; } .kong-apis-list-item, [data-component="apis-list"] [data-card] { border-radius: var(--stone-radius-lg); border: 1px solid var(--stone-ink-200); background: var(--stone-surface); transition: border-color var(--stone-duration-mid) var(--stone-ease-snap), box-shadow var(--stone-duration-mid) var(--stone-ease-snap); } .kong-apis-list-item:hover, [data-component="apis-list"] [data-card]:hover { border-color: var(--stone-500); box-shadow: var(--stone-shadow-md); } / Catalog search input / [data-component="apis-list"] input[type="search"], [data-component="apis-list"] input[type="text"] { border: 1px solid var(--stone-ink-200); border-radius: var(--stone-radius-sm); padding: 0.5rem 0.75rem; font-size: 0.95rem; transition: border-color var(--stone-duration-fast) var(--stone-ease-snap), box-shadow var(--stone-duration-fast) var(--stone-ease-snap); } [data-component="apis-list"] input[type="search"]:focus, [data-component="apis-list"] input[type="text"]:focus { border-color: var(--stone-500); box-shadow: 0 0 0 3px var(--stone-focus-soft); outline: none; } / ─── 15. FOOTER ─────────────────────────────────────────────────────────── / .portal-footer, footer[role="contentinfo"] { background: var(--stone-ink-50); border-top: 1px solid var(--stone-ink-200); position: relative; } .portal-footer::before, footer[role="contentinfo"]::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--stone-500) 0%, var(--stone-300) 50%, var(--stone-500) 100%); opacity: 0.6; } / ─── 16. MOTION (respeitando reduce-motion) ─────────────────────────────── / @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ─── 17. UTILITIES — Stone-specific helpers ─────────────────────────────── / / Trail / "next" section pattern (use no fim das landing pages) / .stone-trail { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--stone-ink-200); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .stone-trail .stone-trailcopy { color: var(--stone-ink-600); font-size: 0.95rem; } / Dot grid background (decorative, can be applied to .stone-dotgrid) / .stone-dotgrid { background-image: radial-gradient(circle at 1px 1px, var(--stone-ink-200) 1px, transparent 0); background-size: 16px 16px; } / Gradient divider (decorative) / .stone-divider { height: 1px; background: linear-gradient(to right, transparent 0%, var(--stone-ink-200) 30%, var(--stone-ink-200) 70%, transparent 100%); margin: 2.5rem 0; } / "Continue Explorando" footer label (utility for landing pages) / .continue-exploring-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--stone-ink-600); margin: 20px 0 20px; padding-top: 20px; border-top: 1px solid var(--stone-ink-200); } / ─── 18. LEGACY DOCS SECTION ────────────────────────────────────────────── / / Hero da landing legacy — tom grafite/slate para distinguir visualmente (neutro, on-brand: "arquivado", sem competir com o verde Stone dos docs atuais) / / Banner colocado no topo de cada página legada / .legacy-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--stone-archive-bg); border: 1px solid var(--stone-archive-border); border-left: 3px solid var(--stone-archive-text); border-radius: var(--stone-radius-md); color: var(--stone-archive-text); font-size: 0.92rem; line-height: 1.55; margin: 0 0 20px; } .legacy-banner strong { color: var(--stone-archive-strong); } .legacy-banner a { color: var(--stone-archive-text); text-decoration-color: var(--stone-archive-text); font-weight: 600; } .legacy-banner a:hover { color: var(--stone-archive-strong); text-decoration-color: var(--stone-archive-strong); } / (removed) .legacy-banner::before ⚠ icon — class unused portal-wide / / Tag inline para indicar "Legacy" em listagens / / Card de listagem de guides legados (mais compacto) / / Migration mapping: "estava em X / agora em Y" / / Eyebrow chip used inside ::page-hero #title slot (legacy/archive pages) / / Inline stats row used below the hero on the legacy landing / / Migration-map card — promotes the v5→Unified table to a hero panel / / Optional body class for individual legacy child pages — applies subtle archival palette decay so the whole page reads "frozen". Add `class: "legacy-page"` to the wrapping ::page-section in pages/legacy/.md to opt a page in. / /* ── Two-column layout for legacy guides (Option A+B): left rail = TOC (Nesta página) + section nav (Outras páginas). Konnect's ::page-section strips `class:` — wrap content in a raw
instead, and let this rule handle max-width/padding too. / / Sticky aside that contains TOC + section-nav / / In-page TOC ("Nesta página") / / Section nav ("Outras páginas") — collapsible categories via
/ / "Maps to" inline callout — equivalente moderno em cada página legada / / ─── 19. MOBILE REFINEMENTS ─────────────────────────────────────────────── / @media (max-width: 768px) { h1 { font-size: 24px; line-height: 28px; } h2 { font-size: 20px; line-height: 24px; margin-top: 1.8em; } h3 { font-size: 18px; line-height: 20px; } pre { font-size: 0.8125rem; padding: 1rem; } .stone-trail { flex-direction: column; align-items: flex-start; } } / ─── 19b. HOME — EXPLORE GRID ───────────────────────────────────────────── / / 3-column category grid with link lists. Replaces inline-styled MDC blocks so we can express :hover, focus-visible, and responsive breakpoints. / / ─── 19c. HOME — INTENT CARD ICONS ──────────────────────────────────────── / / Replaces emoji icons with line-icon tiles. Tile fills with Stone Green when the parent card is hovered, mirroring the existing card lift. / .intent-cardhead { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .intent-cardicon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--stone-50); color: var(--stone-600); transition: background var(--stone-duration-mid) var(--stone-ease-snap), color var(--stone-duration-mid) var(--stone-ease-snap), transform var(--stone-duration-mid) var(--stone-ease-snap); } .intent-cardicon svg { width: 22px; height: 22px; display: block; } .intent-cardtitle { display: block; font-size: 16px; line-height: 1.35; color: var(--stone-ink-900); font-weight: 700; letter-spacing: -0.005em; } .kong-card:hover .intent-cardicon, [data-component="card"]:hover .intent-cardicon, a.stone-card-link:hover .intent-cardicon { background: var(--stone-500); color: var(--stone-ink-on-dark); transform: scale(1.04); } / Card "Em breve" — apagado/desabilitado (não clicável), com badge no canto / .intent-card--soon { opacity: 0.55; pointer-events: none; / não clicável / cursor: default; } .intent-card--soon .intent-carddesc { margin: 0; color: var(--stone-ink-700); line-height: 1.55; } .intent-cardsoon-badge { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--stone-radius-pill); background: var(--stone-ink-100); color: var(--stone-ink-600); font-size: 0.8125rem; font-weight: 500; } / ─── 19d. STONE FOOTER (mirror of stone.com.br) ─────────────────────────── / / Custom dark footer that mirrors stone.com.br. Hides Konnect's default footer ONLY on pages that include the hand-rolled stone-footer block (currently home only — index.md). Other pages keep Konnect's default. / / IMPORTANT: target footer.stone-footer (not .stone-footer-wrapper) because Konnect's MDC renderer strips the outer
tag, but the inner
survives. Konnect's actual default footer selector is
. / body:has(footer.stone-footer) footer.layout-footer, body:has(footer.stone-footer) footer[role="contentinfo"], body:has(footer.stone-footer) .portal-footer { display: none !important; } / Also: make the hand-rolled footer reliably visible — defensive, in case any leftover catch-all rule from earlier sessions tries to hide it. / body footer.stone-footer { display: block !important; } .stone-footer-wrapper { / Full-bleed even inside a max-width container / margin: 32px calc(50% - 50vw) 0; background: var(--stone-footer-bg); color: var(--stone-footer-ink); font-family: var(--kui-font-family-text); } .stone-footerinner { max-width: 1200px; margin: 0 auto; padding: 32px 20px 24px; } .stone-footertop { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--stone-footer-line); margin-bottom: 24px; flex-wrap: wrap; } .stone-footerbrand { display: flex; align-items: center; gap: 12px; } .stone-footerlogo { display: inline-flex; align-items: center; color: var(--stone-ink-on-dark); line-height: 0; } .stone-footerlogo svg { height: 26px; width: auto; display: block; } .stone-footerlogo-dot { color: var(--stone-500); } .stone-footersocial { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: flex-end; } .stone-footersocial-label { font-size: 12px; color: var(--stone-footer-link); letter-spacing: 0.01em; } .stone-footersocial-icons { display: flex; gap: 8px; } .stone-footersocial-icons a { / !important + padding: o Konnect pode sobrescrever o display; o padding de 10px centraliza o SVG de 18px mesmo sem flex / display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box; padding: 10px; width: 38px; height: 38px; border-radius: 50%; background: var(--stone-footer-coin); color: var(--stone-ink-200); text-decoration: none !important; transition: background 180ms ease, color 180ms ease, transform 180ms ease; } .stone-footersocial-icons a:hover { background: var(--stone-500); color: var(--stone-ink-on-dark); transform: translateY(-2px); } .stone-footersocial-icons svg { width: 18px; height: 18px; fill: currentColor; display: block; } .stone-footercols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 32px; margin-bottom: 24px; } .stone-footercol h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-ink-on-dark); margin: 0 0 10px; } .stone-footercol ul { list-style: none; padding: 0; margin: 0; } .stone-footercol li { margin-bottom: 4px; } .stone-footercol a { color: var(--stone-footer-link); font-size: 14px; text-decoration: none !important; line-height: 1.45; transition: color 120ms ease; } .stone-footercol a:hover { color: var(--stone-ink-on-dark); } .stone-footerlegal { padding-top: 16px; border-top: 1px solid var(--stone-footer-line); color: var(--stone-footer-legal); font-size: 12px; line-height: 1.6; } .stone-footerlegal p { margin: 0 0 2px; color: var(--stone-footer-legal); } .stone-footerlegal p:last-child { margin-bottom: 0; } @media (max-width: 1024px) { .stone-footercols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } } @media (max-width: 640px) { .stone-footercols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .stone-footertop { flex-direction: column; align-items: flex-start; } .stone-footersocial { align-items: flex-start; flex-direction: column; justify-content: flex-start; } .stone-footerinner { padding: 40px 20px 32px; } } / ─── 19e. RODAPÉ NATIVO (páginas /apis do Konnect) com a cara do stone-footer ─── O Konnect desenha este rodapé a partir de menu.footer_sections. O publish (--only menu) monta as 5 colunas a partir de snippets/stone-footer.md e acrescenta uma 6ª seção ("Siga a Stone…", sempre a última) que aqui vira a linha de ícones. Onde existe footer.stone-footer o rodapé nativo some (19d). O texto legal repete o do snippet. / .layout-footer{background:var(--stone-footer-bg)!important;margin-top:32px!important;border:0!important} .layout-footer .layout-menu-footer-sections{background:none!important;border:0!important;padding:0!important} .layout-footer .layout-menu-footer-bottom{display:none!important} .layout-footer .footer-sections-content{display:block!important;position:relative!important;max-width:1200px!important;margin:0 auto!important;padding:32px 20px 24px!important} .layout-footer .logo-container{display:block!important;box-sizing:content-box!important;min-height:38px!important;padding:0 0 20px!important;margin:0 0 24px!important;border-bottom:1px solid var(--stone-footer-line)!important} .layout-footer .logo-container a{display:block!important;width:98px;height:26px;overflow:hidden} .layout-footer .portal-logo{height:26px!important;width:auto!important;max-width:none!important;filter:brightness(0) invert(1)!important} .layout-footer .footer-sections-container{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:24px 32px!important;margin:0 0 24px!important} .layout-footer .footer-section-title{color:var(--stone-ink-on-dark)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin:0 0 10px!important} .layout-footer .footer-section ul{list-style:none!important;padding:0!important;margin:0!important} .layout-footer .footer-section li{margin:0 0 4px!important} .layout-footer .footer-section a{color:var(--stone-footer-link)!important;font-size:14px!important;line-height:1.45!important;text-decoration:none!important} .layout-footer .footer-section a:hover{color:var(--stone-ink-on-dark)!important} .layout-footer .footer-section:last-child{position:absolute!important;top:32px;right:20px;display:flex!important;flex-direction:row;align-items:center;gap:16px;margin:0!important} .layout-footer .footer-section:last-child .footer-section-title{order:-1;margin:0!important;font-size:12px!important;font-weight:400!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--stone-footer-link)!important} .layout-footer .footer-section:last-child ul{display:flex!important;gap:8px} .layout-footer .footer-section:last-child li{margin:0!important} .layout-footer .footer-section:last-child a{display:inline-flex!important;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--stone-footer-coin);font-size:0!important;color:var(--stone-footer-ink)!important;transition:background .18s,transform .18s} .layout-footer .footer-section:last-child a:hover{background:var(--stone-500);transform:translateY(-2px)} .layout-footer .footer-section:last-child a::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat} .layout-footer [data-testid$="menu-link-facebook"]{--i:url("data:image/svg+xml,")} .layout-footer [data-testid$="menu-link-x"]{--i:url("data:image/svg+xml,")} .layout-footer [data-testid$="menu-link-instagram"]{--i:url("data:image/svg+xml,")} .layout-footer [data-testid$="menu-link-linkedin"]{--i:url("data:image/svg+xml,")} .layout-footer [data-testid$="menu-link-youtube"]{--i:url("data:image/svg+xml,")} .layout-footer .footer-sections-content::after{content:"© Stone Instituição de Pagamento S.A. CNPJ 16.501.555/0001-57\A Av. Rebouças, 2880, 4º andar, Pinheiros, CEP 05.402-500 – São Paulo/SP\A Instituição de pagamento autorizada pelo Banco Central do Brasil, nas modalidades de credenciadora e emissora de moeda eletrônica.";display:block;white-space:pre-line;padding-top:16px;border-top:1px solid var(--stone-footer-line);color:var(--stone-footer-legal);font-size:12px;line-height:1.6} @media (max-width:1024px){.layout-footer .footer-sections-container{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media (max-width:640px){.layout-footer .footer-sections-container{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}.layout-footer .footer-section:last-child{position:static!important;flex-direction:column;align-items:flex-start;grid-column:1/-1}} / ─── 20. API REFERENCE (Konnect OpenAPI viewer) ───────────────────────── Konnect uses Vue scoped CSS with [data-v-XXXX] attribute selectors — plain `.foo` rules lose to `.parent .foo[data-v-XXXX]`. We win by prefixing with `.global-page` (the outermost wrapper) and chaining the real ancestors Konnect uses. Anywhere `!important` shows up it's because Konnect already used it and we need to outrank both. / / Method colors (Try-It buttons, method badges). Konnect defaults GET to a Kong-brand blue; reassign to Stone primary for brand consistency. POST/PUT/DELETE/PATCH keep their semantic colors. / .global-page { --kui-method-color-text-get: var(--stone-700); --kui-method-color-background-get: var(--stone-50); --kui-method-color-border-get: var(--stone-500); } / Two-column grid: narrow the right column from 410-575px to 320-420px and tighten the gutter, so the right code samples don't dominate. / .global-page .http-operation .http-operation-container { grid-template-columns: minmax(0, 1fr) clamp(320px, 32%, 420px) !important; gap: 1.25rem !important; align-items: start; } / Park right column in view while scrolling long left content. / .global-page .http-operation .http-operation-container .right { position: sticky !important; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; } .global-page .http-operation .http-operation-container .right::-webkit-scrollbar { width: 6px; } .global-page .http-operation .http-operation-container .right::-webkit-scrollbar-thumb { background: var(--stone-ink-300); border-radius: 3px; } .global-page .http-operation .http-operation-container .right > :not(:first-child) { margin-top: 0.85rem !important; } / Successive operations on one page / .global-page .http-operation { margin-block: 1.25rem !important; } .global-page .http-operation + .http-operation { border-top: 1px solid var(--stone-ink-200); padding-top: 1.5rem; } / Collapsible param sections — tighten Konnect's airy padding / .global-page .endpoint-collapsible-section { margin-block: 0.4rem !important; } .global-page .endpoint-collapsible-section .endpoint-collapsible-section-header { padding: 0.45rem 0 !important; } .global-page .endpoint-collapsible-section .endpoint-collapsible-section-content { padding-top: 0.5rem !important; } / Model property rows / .global-page .model-property { padding-block: 0.35rem !important; } / Overview-page panels (API Base URL, Security, Additional Information) / .global-page .overview-collapsible-panel { margin-block: 0.4rem !important; } .global-page .overview-collapsible-panel-header { padding: 0.55rem 0.85rem !important; } .global-page .overview-collapsible-panel-content { padding: 0.6rem 0.85rem !important; } .global-page .overview-panel { padding: 0.6rem 0.85rem !important; } / Code containers — Light Minimal Theme. Konnect renders code via Shiki inside .code-block .shiki with inline `style="color:#xxx"` per token. We override background here; Shiki's per-token colors stay (they're chosen for light backgrounds typically). / .global-page .editable-code-wrapper { background: var(--stone-code-bg) !important; border: 1px solid var(--stone-ink-200) !important; border-radius: var(--stone-radius-md) !important; overflow: hidden; } .global-page .editable-code-wrapper .code-block, .global-page .editable-code-wrapper .code-block pre, .global-page .editable-code-wrapper .code-block .shiki { background: var(--stone-code-bg) !important; background-color: var(--stone-code-bg) !important; } .global-page .editable-code-wrapper .code-block pre, .global-page .editable-code-wrapper .code-block .shiki { color: var(--stone-code-ink) !important; padding: 0.75rem 0.9rem !important; } .global-page .editable-code-wrapper .editable-code { caret-color: var(--stone-700) !important; } / Request / response sample blocks — light cards / .global-page .request-sample-wrapper, .global-page .schema-example.response-sample { border: 1px solid var(--stone-ink-200) !important; border-radius: var(--stone-radius-md) !important; overflow: hidden; background: var(--stone-surface) !important; } .global-page .schema-example-header, .global-page .tryit-header { background: var(--stone-ink-50) !important; color: var(--stone-ink-800) !important; padding: 0.5rem 0.75rem !important; font-size: 0.8rem !important; border-bottom: 1px solid var(--stone-ink-200) !important; font-weight: 600; } .global-page .tryit-header { border-bottom: 0 !important; } / Status-code & content-type dropdowns inside light response-sample header / .global-page .schema-example-header .select-dropdown .trigger-button, .global-page .schema-example-header .response-type-select-label, .global-page .schema-example-header .response-type-select-label { color: var(--stone-ink-800) !important; } .global-page .schema-example-header .select-dropdown .trigger-button .select-chevron-icon { color: var(--stone-ink-500) !important; } .global-page .schema-example-header .select-dropdown .trigger-button:hover, .global-page .schema-example-header .select-dropdown .trigger-button:focus { background-color: var(--stone-ink-100) !important; color: var(--stone-ink-900) !important; } /* Try-It button — Stone primary green / .global-page .tryit-wrapper .k-button, .global-page .tryit-wrapper button[type="submit"], .global-page button.tryit-execute, .global-page .tryit-button { background-color: var(--stone-700) !important; border-color: var(--stone-700) !important; color: var(--stone-ink-on-dark) !important; font-weight: 600; transition: background-color 0.18s ease, border-color 0.18s ease; } .global-page .tryit-wrapper .k-button:hover, .global-page .tryit-wrapper button[type="submit"]:hover, .global-page button.tryit-execute:hover, .global-page .tryit-button:hover { background-color: var(--stone-bright) !important; border-color: var(--stone-bright) !important; } .global-page .tryit-wrapper .k-button:focus-visible, .global-page .tryit-wrapper button[type="submit"]:focus-visible { outline: 2px solid var(--stone-bright) !important; outline-offset: 2px; } / Try-It form fields / .global-page .tryit-body input, .global-page .tryit-body textarea, .global-page .tryit-body select, .global-page .tryit-body .k-input, .global-page .tryit-params input { border: 1px solid var(--stone-ink-200) !important; border-radius: var(--stone-radius-sm) !important; background: var(--stone-surface) !important; color: var(--stone-ink-900) !important; font-size: 0.875rem; } .global-page .tryit-body input:focus, .global-page .tryit-body textarea:focus { border-color: var(--stone-700) !important; outline: 0; box-shadow: 0 0 0 3px var(--stone-focus-soft) !important; } / Response status code dots — clearer colors / .global-page .response-code-dot.response-code-2xx { background: var(--stone-status-2xx) !important; } .global-page .response-code-dot.response-code-3xx { background: var(--stone-status-3xx) !important; } .global-page .response-code-dot.response-code-4xx { background: var(--stone-status-4xx) !important; } .global-page .response-code-dot.response-code-5xx { background: var(--stone-status-5xx) !important; } / Shiki inline-style overrides — remap common dark theme palettes onto our light theme. Konnect's Shiki theme uses inline style="color:#xxx" per token; these attribute-substring matches catch the common dark themes (github-dark, one-dark, nord, dracula) and remap to readable colors. / .global-page .code-block .shiki span[style="#C9D1D9"], .global-page .code-block .shiki span[style="#c9d1d9"], .global-page .code-block .shiki span[style="#ABB2BF"], .global-page .code-block .shiki span[style="#abb2bf"], .global-page .code-block .shiki span[style="#D8DEE9"], .global-page .code-block .shiki span[style="#d8dee9"] { color: var(--stone-code-ink) !important; } .global-page .code-block .shiki span[style="#79C0FF"], .global-page .code-block .shiki span[style="#79c0ff"], .global-page .code-block .shiki span[style="#E06C75"], .global-page .code-block .shiki span[style="#e06c75"], .global-page .code-block .shiki span[style="#FF7B72"], .global-page .code-block .shiki span[style="#ff7b72"] { color: var(--stone-700) !important; } .global-page .code-block .shiki span[style="#A5D6FF"], .global-page .code-block .shiki span[style="#a5d6ff"], .global-page .code-block .shiki span[style="#98C379"], .global-page .code-block .shiki span[style="#98c379"], .global-page .code-block .shiki span[style="#A3BE8C"], .global-page .code-block .shiki span[style="#a3be8c"], .global-page .code-block .shiki span[style="#7EE787"], .global-page .code-block .shiki span[style="#7ee787"] { color: var(--stone-700) !important; } .global-page .code-block .shiki span[style="#FFA657"], .global-page .code-block .shiki span[style="#ffa657"], .global-page .code-block .shiki span[style="#D19A66"], .global-page .code-block .shiki span[style="#d19a66"], .global-page .code-block .shiki span[style="#D2A8FF"], .global-page .code-block .shiki span[style="#d2a8ff"] { color: var(--stone-warning-text) !important; } .global-page .code-block .shiki span[style="#8B949E"], .global-page .code-block .shiki span[style="#8b949e"], .global-page .code-block .shiki span[style="#6A737D"], .global-page .code-block .shiki span[style="#6a737d"] { color: var(--stone-ink-600) !important; font-style: italic; } / Tighten the top of the spec viewer — Konnect adds 20px container padding plus 8px spec-renderer padding plus 40px overview top, which feels airy. / .global-page .layout-base-content:not(.full-width) .layout-content-container { padding-top: 0.5rem !important; } .global-page .nodes-wrapper .spec-renderer-document, .global-page .nodes-wrapper .overview-page { padding-bottom: 1rem !important; margin-bottom: 1rem !important; } .global-page .spec-renderer-document { padding-top: 0 !important; } .global-page .overview-page-header { margin-top: 0 !important; } .global-page .page-toolbar-title { margin-bottom: 0.5rem !important; } / Server endpoint row (the METHOD https://... bar under the title) / .global-page .server-endpoint.http-operation-server-endpoint { background: var(--stone-ink-50); border: 1px solid var(--stone-ink-200); border-radius: var(--stone-radius-md); padding: 0.55rem 0.75rem; margin-block: 0.75rem 1rem; } @media (max-width: 1024px) { .global-page .http-operation .http-operation-container { grid-template-columns: 1fr !important; } .global-page .http-operation .http-operation-container .right { position: static !important; max-height: none; } } / ─── 21. PRINT ──────────────────────────────────────────────────────────── / @media print { .portal-header, .portal-footer, .kong-sidebar-nav { display: none !important; } body { color: #000; background: #FFF; } pre { background: #F4F4F4 !important; color: #000; border: 1px solid #DDD; } a { color: #000; text-decoration: underline; } .legacy-banner { background: #FFF; border: 1px solid #000; } } / ─── 22. TAP TO PAY PARA TERCEIROS — SCOPED TOP-NAV HIDE ──────────────────── / / Each page in the /pos/tap-to-pay/* guide renders an invisible marker ([data-page-group="tap-to-pay-guide"]). :has() lets this global stylesheet hide specific top-nav items ONLY when that marker is present in the page, without touching the nav on any other page. / body:has([data-page-group="tap-to-pay-guide"]) li:has([data-testid="menu-link-incio"]), body:has([data-page-group="tap-to-pay-guide"]) li:has([data-testid="menu-link-foundations"]), body:has([data-page-group="tap-to-pay-guide"]) li:has([data-testid="menu-link-api-catalog"]), body:has([data-page-group="tap-to-pay-guide"]) li:has([data-testid="menu-link-catlogo-de-apis"]), body:has([data-page-group="tap-to-pay-guide"]) li:has([data-testid="menu-link-documentaes-legadas"]), body:has([data-page-group="tap-to-pay-guide"]) [data-testid="search-trigger-button"] { display: none !important; } / Logo stays visible, but stops navigating away — the "/" link is disabled / body:has([data-page-group="tap-to-pay-guide"]) [data-testid="portal-header-logo"] { pointer-events: none !important; cursor: default !important; } / ─── 23. STONE TAX / STONE CATALOG API DOCS — SCOPED TOP-NAV HIDE ─────────── / / These are Konnect's built-in API-spec viewer pages, not custom MDC pages, so there's no page body to embed a [data-page-group] marker into. Konnect itself renders the current route on a wrapper div (`.layout-base[data-page-path]`), so we scope on that instead — prefix match covers the overview root AND every operation sub-path under it. Same hide list as the tap-to-pay guide above. / body:has(.layout-base[data-page-path^="/apis/stone-tax/"]) li:has([data-testid="menu-link-incio"]), body:has(.layout-base[data-page-path^="/apis/stone-tax/"]) li:has([data-testid="menu-link-foundations"]), body:has(.layout-base[data-page-path^="/apis/stone-tax/"]) li:has([data-testid="menu-link-api-catalog"]), body:has(.layout-base[data-page-path^="/apis/stone-tax/"]) li:has([data-testid="menu-link-catlogo-de-apis"]), body:has(.layout-base[data-page-path^="/apis/stone-tax/"]) li:has([data-testid="menu-link-documentaes-legadas"]), body:has(.layout-base[data-page-path^="/apis/stone-tax/"]) [data-testid="search-trigger-button"], body:has(.layout-base[data-page-path^="/apis/stone-catalog/"]) li:has([data-testid="menu-link-incio"]), body:has(.layout-base[data-page-path^="/apis/stone-catalog/"]) li:has([data-testid="menu-link-foundations"]), body:has(.layout-base[data-page-path^="/apis/stone-catalog/"]) li:has([data-testid="menu-link-api-catalog"]), body:has(.layout-base[data-page-path^="/apis/stone-catalog/"]) li:has([data-testid="menu-link-catlogo-de-apis"]), body:has(.layout-base[data-page-path^="/apis/stone-catalog/"]) li:has([data-testid="menu-link-documentaes-legadas"]), body:has(.layout-base[data-page-path^="/apis/stone-catalog/"]) [data-testid="search-trigger-button"] { display: none !important; } body:has(.layout-base[data-page-path^="/apis/stone-tax/"]) [data-testid="portal-header-logo"], body:has(.layout-base[data-page-path^="/apis/stone-catalog/"]) [data-testid="portal-header-logo"] { pointer-events: none !important; cursor: default !important; } / ════════════════════════════════════════════════════════════════════════════ Páginas de documentação com sidebar de jornada: respiro e delimitação das seções (2026-10-29). Escopo: só onde existe .sidebar-left-snippet (a sidebar de jornada de verdade; o contêiner .global-sidebar-left existe em TODAS as páginas, vazio nas que não têm sidebar), então as homes, o catálogo e os artigos sem sidebar não mudam. - conteúdo com 32px de respiro sob o hero (as páginas trazem padding-top de 8px no ::page-section) - ## com divisor e margem; ### com margem;
do rodapé de etapas com respiro - tabelas com borda e raio, e células que quebram linha (antes a coluna Descrição era cortada à direita) ════════════════════════════════════════════════════════════════════════════ / / Páginas de documentação (as que têm sidebar de jornada): respiro e delimitação das seções (espaço título→conteúdo: 20px sob o título no hero + 24px de padding no conteúdo) / .global-page:has(.sidebar-left-snippet) .global-main section.page-section:not(.page-hero-section) { padding-top: 24px !important; } .global-page:has(.sidebar-left-snippet) .global-main .section-content > h2 { margin: 48px 0 16px; padding-top: 32px; border-top: 1px solid var(--stone-ink-200); font-size: 1.5rem; line-height: 1.3; } .global-page:has(.sidebar-left-snippet) .global-main .section-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .global-page:has(.sidebar-left-snippet) .global-main .section-content > h3 { margin: 32px 0 12px; } .global-page:has(.sidebar-left-snippet) .global-main .section-content > hr { margin: 48px 0 24px; border: 0; border-top: 1px solid var(--stone-ink-200); } .global-page:has(.sidebar-left-snippet) .global-main .prose-table { margin: 20px 0 28px; border: 1px solid var(--stone-ink-200); border-radius: 8px; overflow-x: auto; } .global-page:has(.sidebar-left-snippet) .global-main .prose-table table { margin: 0; border: 0; } .global-page:has(.sidebar-left-snippet) .global-main .prose-table th, .global-page:has(.sidebar-left-snippet) .global-main .prose-table td { white-space: normal; vertical-align: top; } .global-page:has(.sidebar-left-snippet) .global-main .prose-table tbody tr:last-child td { border-bottom: 0; } / Hero alinhado com a coluna de conteúdo (o wrapper do hero traz 20px de padding lateral a mais) e texto corrido com ritmo e medida de leitura (parágrafos e listas diretos do conteúdo; alertas, tabelas e cards seguem na largura cheia). / .global-page:has(.sidebar-left-snippet) .global-main .page-hero-section { padding: 0 !important; } .global-page:has(.sidebar-left-snippet) .global-main .page-hero { padding-bottom: 20px !important; } .global-page:has(.sidebar-left-snippet) .global-main .page-hero-textblock { max-width: 880px; } .global-page:has(.sidebar-left-snippet) .global-main .section-content > p, .global-page:has(.sidebar-left-snippet) .global-main .section-content > ul, .global-page:has(.sidebar-left-snippet) .global-main .section-content > ol { max-width: 48rem; margin: 0 0 1.25rem; line-height: 1.7; } .global-page:has(.sidebar-left-snippet) .global-main .section-content > ul li, .global-page:has(.sidebar-left-snippet) .global-main .section-content > ol li { margin-bottom: 0.4rem; } / ## logo depois de um
do texto original: fica só um divisor (o do próprio hr) / .global-page:has(.sidebar-left-snippet) .global-main .section-content > hr + h2 { margin-top: 24px; padding-top: 0; border-top: 0; } / Artigos sem sidebar (coluna de texto de 880px ou 920px, centralizada): título, tagline e subtítulo à esquerda, na mesma linha do texto. Antes o hero ficava centralizado sobre o texto alinhado à esquerda. Landings (colunas de 1100px+) seguem centralizadas. / .global-page:not(:has(.sidebar-left-snippet)):has(section.page-section:not(.page-hero-section) [style=":880px"]) .page-hero-section .section-container { max-width: 880px; margin-left: auto; margin-right: auto; } .global-page:not(:has(.sidebar-left-snippet)):has(section.page-section:not(.page-hero-section) [style=":920px"]) .page-hero-section .section-container { max-width: 920px; margin-left: auto; margin-right: auto; } .global-page:not(:has(.sidebar-left-snippet)):has(section.page-section:not(.page-hero-section) :is([style=":880px"], [style=":920px"])) .page-hero { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; padding-left: 0 !important; padding-right: 0 !important; } .global-page:not(:has(.sidebar-left-snippet)):has(section.page-section:not(.page-hero-section) :is([style=":880px"], [style*=":920px"])) .page-hero :is(.page-hero-textblock, .page-hero-tagline, .page-hero-title, .page-hero-description) { text-align: left !important; }

Layout 2.2