/* ============================================================================= * Galaxy Developer Portal - Custom CSS * ============================================================================= * Brand source : docs/portal-pages / Galaxy_Brand-Kit.html (Code Economy kit) * * HOW THIS FILE WORKS * Kong's portal is a Nuxt/Vue app. Its Vue components use scoped selectors * like `.portal-card-header[data-v-309eabac]` which beat any generic selector * we could write here (`table th`, `[class*='card']`, etc.). Instead of * fighting the cascade at the selector layer, we override Kong's KUI *design * tokens* — the CSS custom properties every Kong component reads from — so * our palette flows into every component automatically. * * Kong emits its own tokens inside `@layer kui.theme { [data-kui-theme=".."] }`. * Unlayered CSS beats layered CSS in the cascade, so our unlayered overrides * on the same `[data-kui-theme]` selector win even at equal specificity. * * We override BOTH classic-day and classic-night to force the Galaxy dark * palette regardless of which mode Kong picks per page (login vs content * pages have historically drifted). * * LOCAL PREVIEW * theme/preview.html wraps , so the same * overrides here apply there. What you see locally = what atlantis deploys. * ========================================================================== */ /* ---- Typefaces: Geist + Geist Mono (Google Fonts) ----------------------- */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); /* ---- Galaxy brand tokens (dark-first, from the Galaxy kit) -------------- */ :root, [data-kui-theme] { --gx-void: #050505; /* page background */ --gx-panel: #0a0a0a; /* header / hero / footer */ --gx-panel-2: #0f0f0f; /* cards / accent panels */ --gx-ink: #ededeb; /* primary text */ --gx-ink-2: #b8b8b6; /* secondary text */ --gx-ink-3: #6f6f6f; /* muted / footer text */ --gx-line: #1b1b1b; /* hairline borders */ --gx-line-2: #272727; /* stronger borders */ --gx-signal: #40ff88; /* onchain / code / rails; live status */ --gx-orange: #ff5a1f; /* digital assets, primary CTAs */ --gx-gold: #ffc42e; /* Galaxy Enterprise / "Build" */ --gx-cosmic: #4da3ff; /* Data Centers / AI / Helios */ /* Semantic role: portal primary accent = orange (per brand kit CTA role). */ --gx-accent: var(--gx-orange); --gx-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --gx-mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace; } /* ============================================================================= * KUI token overrides - Force Galaxy dark palette on every Kong component * ============================================================================= * Targeting both classic-day and classic-night at the same specificity Kong * uses, but unlayered, so we win the cascade for these token values. * ========================================================================== */ [data-kui-theme="classic-day"], [data-kui-theme="classic-night"] { /* ---- Fonts (Kong reads these on and every text component) ----- */ --kui-font-family-text: var(--gx-sans); --kui-font-family-heading: var(--gx-sans); --kui-font-family-code: var(--gx-mono); /* ---- Page + surface backgrounds -------------------------------------- * Kong maps: page bg = --kui-color-background * card / panel elevated bg = --kui-color-background-neutral-weakest * table header / hovered row = --kui-color-background-neutral-weaker * input / stroke bg = --kui-color-background-neutral-weak */ --kui-color-background: var(--gx-void); --kui-color-background-neutral-weakest: var(--gx-panel); --kui-color-background-neutral-weaker: var(--gx-panel-2); --kui-color-background-neutral-weak: var(--gx-line); --kui-color-background-neutral: var(--gx-line-2); --kui-color-background-neutral-strong: var(--gx-ink-3); --kui-color-background-neutral-stronger: var(--gx-ink-2); --kui-color-background-neutral-strongest: var(--gx-ink); --kui-color-background-inverse: var(--gx-ink); --kui-color-background-disabled: var(--gx-line); --kui-color-background-overlay: rgba(5, 5, 5, 0.72); /* ---- Text ----------------------------------------------------------- */ --kui-color-text: var(--gx-ink); --kui-color-text-neutral: var(--gx-ink-2); --kui-color-text-neutral-strong: var(--gx-ink); --kui-color-text-neutral-stronger: var(--gx-ink); --kui-color-text-neutral-strongest: #ffffff; --kui-color-text-neutral-weak: var(--gx-ink-3); --kui-color-text-neutral-weaker: var(--gx-ink-3); --kui-color-text-neutral-weakest: var(--gx-line-2); --kui-color-text-inverse: var(--gx-void); --kui-color-text-disabled: var(--gx-ink-3); /* ---- Borders (this stops the orange stroke bleed on cards) ---------- */ --kui-color-border: var(--gx-line); --kui-color-border-neutral: var(--gx-line-2); --kui-color-border-neutral-strong: var(--gx-ink-3); --kui-color-border-neutral-stronger: var(--gx-ink-3); --kui-color-border-neutral-strongest: var(--gx-ink-2); --kui-color-border-neutral-weak: var(--gx-line-2); --kui-color-border-neutral-weaker: var(--gx-line); --kui-color-border-neutral-weakest: var(--gx-line); --kui-color-border-inverse: var(--gx-ink); --kui-color-border-disabled: var(--gx-line); --kui-color-border-primary: var(--gx-line); --kui-color-border-primary-weak: var(--gx-line); --kui-color-border-primary-weakest: var(--gx-line); /* ---- Accent (orange) - keep primary text/link accents on brand ------ */ --kui-color-text-accent: var(--gx-accent); --kui-color-background-accent: var(--gx-accent); --kui-color-border-accent: var(--gx-accent); --kui-color-brand: var(--gx-accent); --kui-icon-color-primary: var(--gx-accent); /* ---- Icon colors match text -------------------------------------- */ --kui-icon-color-neutral: var(--gx-ink-2); /* ---- Focus/shadow tone away from stock blue --------------------- */ --kui-shadow-focus: 0px 0px 0px 4px rgba(255, 90, 31, 0.25); } /* ============================================================================= * Selection color * ========================================================================== */ ::selection { background: color-mix(in srgb, #ff5a1f 30%, transparent); background: color-mix(in srgb, var(--gx-accent) 30%, transparent); color: #ededeb; color: var(--gx-ink); } /* ============================================================================= * Layout & component polish (live Kong DOM) * ============================================================================= * The rules above are pure token overrides. The rules below are STRUCTURAL * (max-width, borders, font-weight) which cannot be expressed as tokens, so * they target Kong's real live class names. These selectors were captured from * the authenticated live portal via Playwright and verified to win the cascade; * some need escalated specificity + !important because Kong applies max-width * via an inline, per-element scoped CSS variable that a plain class rule loses * to. Prefer stable class names (.page-container-mdc, .layout-menu-header, * .portal-card) over [data-v-*] hashes, which change between Kong builds. * * SCOPE NOTE: Kong renders the three-column docs layout (left section-nav * aside.layout-sidebar.left + right on-page ToC aside.layout-sidebar.right) * ONLY when a page opts in via `page-layout` frontmatter inside its CONTENT — * NOT based on tree depth, viewport width, or SPA routing. A page whose content * begins with * --- * page-layout: * sidebar-left: "" * sidebar-right: "" * --- * gets both sidebars; a page without it renders single-column and Kong sets * BOTH

s to display:none at every width. The sidebar values name * SNIPPETS (reusable MDC partials). Verified live via the portal page API * (/_core/api/v3/pages) + Playwright: seeded pages carry the frontmatter and * show sidebars; our earlier Terraform pages lacked it and rendered * single-column. We now inject that frontmatter for every Galaxy docs page in * portal_pages.tf / main.tf, backed by Galaxy-owned snippets in * portal_snippets.tf (galaxy-nav-

+ galaxy-page-toc), so these rules * style sidebars that Kong actually renders. The right ToC collapses to an "On * this page" header button on narrow viewports. * ========================================================================== */ /* ---- Readable content measure ------------------------------------------ * Kong's prose container runs edge-to-edge (max-width:100% from an inline * scoped var). Constrain it to a comfortable measure and center it. The * escalated selector + !important are required to beat the inline value. * API-reference pages use a different container (.full-width) and are left * untouched, so specs keep their full-bleed two-pane layout. */ .layout-content-container .page-container.page-container-mdc { max-width: 52rem !important; margin-inline: auto !important; padding-inline: clamp(16px, 4vw, 28px) !important; box-sizing: border-box !important; } /* ---- Table overflow ---------------------------------------------------- * Wide tables (e.g. environments matrix) should be fully visible without * horizontal scrolling. Allow cells to wrap, shrink code slightly, and let * the table use all available width within the content column. */ .page-container-mdc table { width: 100%; table-layout: auto; font-size: 13px; word-break: break-word; } .page-container-mdc table code { font-size: 12px; word-break: break-all; } /* ---- Top-nav active state ---------------------------------------------- * Kong marks the current top-nav item two independent ways: * - Vue Router adds `router-link-active` (a PREFIX match on the link's href). * - Kong adds its own `.active` class = the real "current section", present on * a section's landing AND on every child page under it. * Kong then colors ANY `router-link-active` link with our accent. That prefix * match is the trap: any nav item pointing at "/" is a prefix of every route * and would render permanently orange. (Our "APIs" item now targets Kong's * native /apis catalog, not "/", so it no longer trips this — but the safeguard * below stays: nothing should point at "/" in the top nav, yet if something does * again, or a deeper prefix collision occurs, this keeps the treatment honest.) * * Fix: drive the active treatment off Kong's trustworthy `.active` class (so the * underline also shows while browsing a section's child pages), and revert * prefix-only matches — `router-link-active` without `.active`, and not the * exact-active home link — back to ink. Verified live: on /getting-started/* the * APIs link is `router-link-active` only while Getting Started carries `.active`. * * Also underline `router-link-exact-active` — the item for the exact current * page. Kong colors that item orange, but a top-level page (e.g. /getting-started * as a leaf) does not always carry Kong's section `.active`, so keying only off * `.active` left the current item orange with NO underline. An EXACT match can't * over-match by prefix, so this is immune to the "/" trap the revert rule guards. */ .layout-menu-header.above-tablet a.active, .layout-menu-header.above-tablet a.router-link-exact-active { font-weight: 600; border-bottom: 2px solid #ff5a1f; border-bottom: 2px solid var(--gx-accent); padding-bottom: 4px; } .layout-menu-header a.router-link-active:not(.router-link-exact-active):not(.active) { color: #ededeb !important; color: var(--gx-ink) !important; border-bottom: none !important; font-weight: 400 !important; } .layout-menu-header.above-tablet a:hover { border-bottom: 2px solid color-mix(in srgb, #ff5a1f 40%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--gx-accent) 40%, transparent); padding-bottom: 4px; } /* ---- Header search: mono pill ------------------------------------------ * Preview search is a mono, panel-2, hairline-bordered, radius-8 pill. */ .layout-header .search-button { font-family: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace; font-family: var(--gx-mono); background: #0f0f0f; background: var(--gx-panel-2); border: 1px solid #1b1b1b; border: 1px solid var(--gx-line); border-radius: 8px; } .layout-header .search-button:hover { border-color: #272727; border-color: var(--gx-line-2); } /* ---- Cards (Galaxy APIs catalog landing) ------------------------------- * Written defensively: .portal-card only appears once the landing page (Part * 2) exists. Mirrors preview's numbered card: panel-2 surface, hairline * border → accent on hover, secondary-ink body copy. */ .portal-card { background: #0f0f0f; background: var(--gx-panel-2); border: 1px solid #1b1b1b; border: 1px solid var(--gx-line); border-radius: 10px; transition: border-color 0.15s ease; } .portal-card:hover { border-color: #ff5a1f; border-color: var(--gx-accent); } .portal-card .portal-card-body, .portal-card p { color: #b8b8b6; color: var(--gx-ink-2); } /* ---- Card / login-card titles ----------------------------------------- * Kong's .portal-card-title hardcodes KUI's default navy (#000933) via the * component's own scoped CSS, which our text-color tokens don't reach — so * card titles render as an unreadable dark blue on our black card surface. * Most visible as the "Log in" heading on the SSO login card. Force ink. * * Two markup shapes exist: the login card puts the text directly in * .portal-card-title, while the /apis catalog cards nest an

inside a * .portal-truncate-container (e.g. the "httpbin-g1" service title). That

* sets its OWN navy color via scoped CSS, and `color` doesn't inherit past an * element that sets it explicitly — so the parent override alone misses it. * Target the wrapper AND the heading child. !important required: Kong's scoped * CSS sets color explicitly on these elements. Verified live on /login + /apis. / [data-kui-theme] .portal-card-title, [data-kui-theme] .portal-card-title .portal-truncate-container, [data-kui-theme] .portal-card-title h1, [data-kui-theme] .portal-card-title h2, [data-kui-theme] .portal-card-title h3, [data-kui-theme] .portal-card-title h4 { color: #ededeb !important; color: var(--gx-ink) !important; } / ---- Primary CTA -------------------------------------------------------- * Orange fill, white text, radius 8, weight 600 (preview a.btn-primary). * [data-kui-theme] prefix boosts specificity to beat Kong's link resets. / [data-kui-theme] .k-button.primary, [data-kui-theme] .k-button[data-testid$="primary"] { background: #ff5a1f; background: var(--gx-accent); color: #ffffff; border-radius: 8px; font-weight: 600; } [data-kui-theme] .k-button.primary:hover, [data-kui-theme] .k-button[data-testid$="primary"]:hover { background: color-mix(in srgb, #ff5a1f 88%, #000); background: color-mix(in srgb, var(--gx-accent) 88%, #000); } / ---- Galaxy APIs catalog cards (landing page HTML) --------------------- * The home landing page (docs/portal-pages/external/index.md) authors its * card grid with the SAME class names the preview uses (.cards / .card / * .num / .docs-link / .btn-primary), so preview.html and the live portal * share one markup + CSS language. preview.html's own \3c style> adds only * layout (padding/flex); the brand surface (bg, border, hover) lives here so * both render identically. Requires Kong to pass raw HTML through in page * content — verify on first apply; falls back to a Markdown table catalog if * Kong strips/escapes it. / .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0; } @media (max-width: 640px) { .cards { grid-template-columns: 1fr; } } .card { background: #0f0f0f; background: var(--gx-panel-2); border: 1px solid #1b1b1b; border: 1px solid var(--gx-line); border-radius: 10px; transition: border-color 0.15s ease, transform 0.15s ease; } .card:hover { border-color: #ff5a1f; border-color: var(--gx-accent); transform: translateY(-1px); } .card .num { font-family: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace; font-family: var(--gx-mono); color: #ff5a1f; color: var(--gx-accent); font-size: 12px; letter-spacing: 0.08em; } .card h4 { color: #ededeb; color: var(--gx-ink); } .card p { color: #b8b8b6; color: var(--gx-ink-2); } .docs-link { color: #ff5a1f; color: var(--gx-accent); text-decoration: none; font-family: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace; font-family: var(--gx-mono); font-size: 13px; } .docs-link:hover { text-decoration: underline; } / btn-primary/btn-secondary live inside MDC page content where Kong applies * generic link resets. !important kept on color only (Kong forces link color * via scoped styles); layout properties use specificity boost instead. / [data-kui-theme] a.btn-primary { display: inline-block; padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; background: #ff5a1f; background: var(--gx-accent); color: #ffffff !important; border: 1px solid #ff5a1f; border: 1px solid var(--gx-accent); } [data-kui-theme] a.btn-primary:hover { background: color-mix(in srgb, #ff5a1f 88%, #ffffff); background: color-mix(in srgb, var(--gx-accent) 88%, #ffffff); border-color: color-mix(in srgb, #ff5a1f 88%, #ffffff); border-color: color-mix(in srgb, var(--gx-accent) 88%, #ffffff); } / ---- Secondary CTA (ghost) --------------------------------------------- * Outline button that pairs with a.btn-primary in the slim home hero * (docs/portal-pages/external/index.md). Transparent fill, hairline border * that lifts to accent on hover; keeps the second action clearly subordinate. / [data-kui-theme] a.btn-secondary { display: inline-block; padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; background: transparent; color: #ededeb !important; color: var(--gx-ink) !important; border: 1px solid #6f6f6f; border: 1px solid var(--gx-ink-3); margin-left: 12px; } [data-kui-theme] a.btn-secondary:hover { border-color: #ff5a1f; border-color: var(--gx-accent); color: #ff5a1f; color: var(--gx-accent); } / ---- Left section-nav (three-column docs layout) ---------------------- * aside.layout-sidebar.left renders on any page that opts into the layout via * `page-layout.sidebar-left` frontmatter (see the SCOPE NOTE above); its * content is the referenced galaxy-nav-
snippet. Preview treats group * labels as mono-uppercase ink-3 and the active link as orange with a left * rail. Kong already draws its own active indicator; we restyle it to the * Galaxy orange rail. [data-kui-theme] prefix boosts specificity to beat * KUI's scoped [data-v-] link rules without !important. / [data-kui-theme] aside.layout-sidebar.left .link-group-header { display: none; } [data-kui-theme] aside.layout-sidebar.left .link-group-item.has-children>.link-group-item-controls>a.link-group-link { font-family: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace; font-family: var(--gx-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 500; color: #6f6f6f; color: var(--gx-ink-3); border-left: none; } [data-kui-theme] aside.layout-sidebar.left .link-group-item.has-children>.link-group-item-controls>a.link-group-link.active { color: #ff5a1f; color: var(--gx-accent); border-left: none; background: transparent; } [data-kui-theme] aside.layout-sidebar.left a.link-group-link { color: #b8b8b6; color: var(--gx-ink-2); border-left: 2px solid transparent; border-radius: 0; } [data-kui-theme] aside.layout-sidebar.left a.link-group-link:hover { color: #ededeb; color: var(--gx-ink); } [data-kui-theme] aside.layout-sidebar.left a.link-group-link.active { color: #ff5a1f; color: var(--gx-accent); border-left: 2px solid #ff5a1f; border-left: 2px solid var(--gx-accent); background: transparent; font-weight: 500; } /* Pin GalaxyOne to the top of the Guides family list, and keep its child list * expanded regardless of which sibling section is active. * * Kong orders sibling pages by an internal field we don't control from the * snippet, and its expand/collapse only opens the group under the current page — * so the GalaxyOne rail collapses the moment you navigate into Staking/Trading/ * DeFi. Flex the family list and give the GalaxyOne item a negative `order` to * hoist it to the top; then override the collapse on just that group using * :has() on the group link's href. Scoped to the specific Guides children href * so sibling families and the getting-started/guides top-level lists are * unaffected. Requires :has() (Safari 15.4+, Chrome 105+, Firefox 121+). * * NOTE: Kong wraps children in
(not * .link-group-list) and toggles inline style="display:none;" on the wrapper * when collapsed. Inline styles beat any non-!important rule, so the display * override below MUST use !important. / [data-kui-theme] aside.layout-sidebar.left .link-group-children-list { display: flex; flex-direction: column; } [data-kui-theme] aside.layout-sidebar.left .link-group-item:has(> .link-group-item-controls > a.link-group-link[href="/guides/galaxyone"]) { order: -1; } / Force the GalaxyOne children list open. Two selectors: (a) the wrapper UL * that directly contains a /guides/galaxyone/* link, and (b) legacy match on * the parent .link-group-item whose group link is /guides/galaxyone. / [data-kui-theme] aside.layout-sidebar.left ul.link-group-children-list:has(> .link-group-item > .link-group-item-controls > a.link-group-link[href^="/guides/galaxyone/"]), [data-kui-theme] aside.layout-sidebar.left .link-group-item.has-children:has(> .link-group-item-controls > a.link-group-link[href="/guides/galaxyone"])>ul.link-group-children-list { display: flex !important; flex-direction: column; max-height: none !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; } / ---- Right on-page ToC (three-column docs layout) --------------------- * aside.layout-sidebar.right holds the "On this page" / "Sections" ToC at wide * viewports (collapses to a header button when narrow). Preview: mono-uppercase * label, anchor links on a hairline left rail that turns orange when active. / [data-kui-theme] aside.layout-sidebar.right .page-toc-title { font-family: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace; font-family: var(--gx-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: #6f6f6f; color: var(--gx-ink-3); } [data-kui-theme] aside.layout-sidebar.right a.toc-link { border-left: 2px solid #1b1b1b; border-left: 2px solid var(--gx-line); color: #6f6f6f; color: var(--gx-ink-3); border-radius: 0; } / Kong paints its own hairline rail on
that sits * inside a sibling .page-toc wrapper (not a descendant of the right aside), so * only a direct class-target reaches it. Kill it — our per-link border-left is * the rail. / [data-kui-theme] .page-toc .page-toc-list, [data-kui-theme] aside.layout-sidebar.right .page-toc-list { border-left: 0; } [data-kui-theme] aside.layout-sidebar.right a.toc-link:hover { color: #b8b8b6; color: var(--gx-ink-2); } [data-kui-theme] aside.layout-sidebar.right a.toc-link.active { border-left: 2px solid #ff5a1f; border-left: 2px solid var(--gx-accent); color: #ff5a1f; color: var(--gx-accent); } / Kong draws its own 1px accent bar via ::before at left:-4px on the active * toc-link, which appears as a second parallel rail beside our border-left. * Suppress it so only the per-link border shows. */ [data-kui-theme] aside.layout-sidebar.right a.toc-link::before { content: none; }