/* Hide the homepage hero image on narrow (mobile) screens */ @media (max-width: 639px) { .hero-image { display: none; } } /* * Homepage brand columns (`home-columns.jsx`) use Mintlify's built-in * `Columns cols={4}` component, which jumps straight from 1 to 4 columns at * its 640px breakpoint — leaving ~90px per card, too tight for the logos and * headings to lay out reliably. Force an intermediate 2-column layout until * the `lg` breakpoint, where page padding also widens and 4 columns have * enough room. * * Wrapped in `@layer base` and marked `!important` — Tailwind's own * `sm:grid-cols-[...]!` utility is `!important` inside `@layer utilities`, * and per the CSS cascade layers spec, `!important` in an unlayered rule * loses to `!important` in any named layer. `base` is declared before * `utilities`, so its `!important` wins here. */ @layer base { @media (min-width: 640px) and (max-width: 1023px) { html[data-current-path='/'] columns, html[data-current-path='/'] .columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } } /* * Mintlify auto-injects a `link` class onto every rendered anchor, * including these `home-columns.jsx` cards. Its own dark-mode rule * (`.dark .link { border-bottom-color: rgb(var(--primary-light)) }`, * meant for markdown-link styling) leaks onto the cards, tinting only the * bottom edge red while the other three sides stay `dark:border-gray-700`. * Restore the bottom edge to match — but not on `:hover`, where * `hover:border-primary` intentionally turns the whole border red. */ html.dark[data-current-path='/'] main a.rounded-2xl:not(:hover) { border-bottom-color: rgb(var(--gray-700)); } /* * `hover:border-primary` and `dark:border-gray-700` have equal CSS * specificity, and `dark:border-gray-700` happens to come later in * Mintlify's generated stylesheet — so in dark mode it always wins, * silently no-opping the intended hover-highlight border on every * `hover:border-primary` element, not just these cards. Restoring it here * for these cards specifically; the same root cause likely affects other * `hover:border-*` + `dark:border-*` combinations elsewhere in the site. */ html.dark[data-current-path='/'] main a.rounded-2xl:hover { border-color: rgb(var(--primary-light)); } html[data-current-path='/megaport'] #content-container, html[data-current-path='/partners'] #content-container { max-width: 92rem; } /* * Megaport and Partner Welcome page tiles: icon anchored above the * title/description with a small fixed gap between them (not a stretched * square — that left far too much empty space), plus a hover lift. */ html[data-current-path='/megaport'] .card, html[data-current-path='/partners'] .card { transition: box-shadow 200ms ease-out, transform 200ms ease-out; } html[data-current-path='/megaport'] .card:hover, html[data-current-path='/partners'] .card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transform: translateY(-3px); } /* * The Card's inner link renders with `display: contents` (Mintlify's own * styling), so it never generates its own box — its icon/title/description * children lay out directly against this wrapper instead. Apply the * icon/text split here rather than on the link itself. */ html[data-current-path='/megaport'] .card > div, html[data-current-path='/partners'] .card > div { display: flex; flex-direction: column; gap: 3.5rem; } html[data-current-path='/megaport'] .card h2, html[data-current-path='/partners'] .card h2 { font-size: 1.125rem; font-weight: 700; } html[data-current-path='/megaport'] .card h2 + div, html[data-current-path='/partners'] .card h2 + div { font-size: 0.8125rem; margin-top: 0.5rem; } /* Slightly larger icons, per the design. */ html[data-current-path='/megaport'] .card img, html[data-current-path='/partners'] .card img, html[data-current-path='/megaport'] .card .size-6, html[data-current-path='/partners'] .card .size-6 { width: 1.75rem; height: 1.75rem; } /* * Icons default to greyscale, then tint to the primary red on hover (see * below). * * Dark mode already inverts these icons site-wide (see `.dark * img[src*='/images/icons/']` below) so black strokes stay visible against * a dark background. Chain `invert(1)` after our own `grayscale(1)` rather * than dropping it, or icons go dark-on-dark and disappear. */ html[data-current-path='/megaport'] .card img, html[data-current-path='/partners'] .card img { filter: grayscale(1); transition: filter 200ms ease-out; } html.dark[data-current-path='/megaport'] .card img, html.dark[data-current-path='/partners'] .card img { filter: grayscale(1) invert(1); } /* * All remaining card icons are plain outline icons with no brand color of * their own to reveal on hover, so every one tints to the primary red. The * red is a `filter` approximation of `colors.primary` (#E40046) from * `docs.json` — `filter` can't target an exact hex on a raster/vector * ``, but this was tuned against that value and lands within 1/255 per * channel. */ html:is([data-current-path='/megaport'], [data-current-path='/partners']) .card:hover img { filter: invert(12%) sepia(100%) saturate(8000%) hue-rotate(338deg) brightness(90%); } /* * Navbar primary CTA — purple-to-blue gradient, independent of `colors.primary`. */ #navbar a[href='https://www.megaport.com/'], #navbar a[href='https://www.megaport.com/'] > * { background: linear-gradient(90deg, #6d00dc, #009dff); border-color: transparent; color: #fff; border-radius: 0.5rem; } #navbar a[href='https://www.megaport.com/']:hover, #navbar a[href='https://www.megaport.com/']:hover > * { background: linear-gradient(90deg, #5a00b8, #0084d6); } /* Hide the trailing arrow icon Mintlify injects into the primary button */ #navbar a[href='https://www.megaport.com/'] svg { display: none; } /* * RSS navbar link — visually placed after the Megaport.com primary button. * Both `navbar.links` and the primary CTA share a flex container in the * navbar's right-hand cluster, so a high `order` value moves the RSS link * to the end of that row. */ #navbar a[href='https://www.megaport.com/feed/'] { order: 999; margin-left: 0.5rem; } /* * Tighten Mintlify layout on wide screens: shrink the reserved * label column and the gap so release-note content has more room. * * Safe override — only adjusts widths/gaps. Targets the label via its * `data-component-part` hook, which is a stable Mintlify convention. * If the class or attribute is renamed in a future Mintlify release, * the rules silently stop applying and the default layout returns. */ @media (min-width: 1024px) { .update-container { gap: 1rem; } .update-container:has([data-component-part='update-label']) > div:first-child { width: 110px; } } #localization-select-trigger, #search-bar-entry, #navbar [id^='search'] { border-radius: 0.5rem; } /* Make the navbar search bar more prominent */ #search-bar-entry { min-width: 24rem; height: 2.75rem; font-size: 1rem; margin-bottom: 1px; } #search-bar-entry:hover { box-shadow: 0 0 0 0.5px #e40046; } .mega-image-style { border-radius: 0.25rem; /* Top | Right | Bottom | Left */ margin: 1rem auto 1rem 0px; } .mega-image-style.shadow, .inline-icon.shadow { box-shadow: 0 4px 18px 0 rgba(128, 128, 128, 0.5), 0 6px 20px 0 rgba(128, 128, 128, 0.05); } /* * Hide the frontmatter `description` Mintlify renders under the H1. Every * page's body already opens with its own intro sentence, so the rendered * description just repeats it verbatim under the title. There is no * frontmatter flag to suppress this render while keeping `description` for * SEO/llms.txt/search/nav-card use (per Mintlify support), so it is hidden * here instead of stripping the field from every page's frontmatter. * * Selector: within `#header`, the direct-child div that contains * `#page-title` (the H1, plus the breadcrumb above it) is immediately * followed, when a description is set, by a sibling div wrapping the * description `

`. Anchored to Mintlify's stable `#header`/`#page-title` * IDs rather than its generated Tailwind utility classes, which are not * meant as stable selectors. Verified against the rendered DOM (not just * the selector's intent) — `#header`'s children are flat, so `:has()` must * be checked one level shallower than the naive reading of the markup * suggests. */ #header > div:has(#page-title) + div:has(> p) { display: none; } /* Styles for pages in frame mode */ .frame-mode-page-inner { max-width: 67rem; margin: 1rem 1rem; } .frame-mode-page-outer { display: flex; justify-content: center; padding: 2rem 0; } /* marketplace-template styles */ .marketplace-template { width: 100%; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 20px; box-sizing: border-box; margin: 3rem 1rem; /* additional space below the container */ } .marketplace-template img { max-height: 80px; max-width: 150px; /* Adjust based on your layout */ object-fit: contain; /* Ensures the image fits without distortion */ display: block; /* Ensures proper alignment */ margin: auto; /* Centers the image within the container */ } .marketplace-template span { font-size: 16px; color: #555; margin: 0; text-align: center; flex: 1; /* allows text sections to stretch */ } .marketplace-template span:not(:last-child) { border-right: 1px solid #e0e0e0; /* subtle separator */ padding-right: 20px; } .marketplace-template span:first-of-type { border-left: 1px solid #e0e0e0; /* additional separator for logo area */ padding-left: 20px; } .marketplace-template a { color: #747272 !important; text-decoration: none; font-weight: bold; transition: color 0.2s ease; } .marketplace-template a:hover { color: #555; /* slightly lighter on hover */ } /* Add padding to push down h1 */ h1 + .marketplace-template { margin-top: 20px; } /* Hide marketplace-template styles on mobile */ @media (max-width: 768px) { .marketplace-template { display: none; } } .marketplace-template-region-location strong { font-weight: bold; color: #333; /* Optional: Adjust color for better visibility */ } /* * Card icons — our custom SVGs use solid black strokes/fills, which are * invisible on the dark theme's dark background. Invert them in dark mode * so they read as white. Mintlify renders Card icon SVGs as tags, so * `currentColor` inside the SVG has no effect — a CSS filter is required. */ .dark img[src*='/images/icons/'] { filter: invert(1); } /* Reduce inline code's horizontal padding — Mintlify's default reads as extra spaces around the text (TP-2164). */ code:not(pre *) { padding-inline: calc(var(--spacing) * 0.5); } /* * Overrides vertical-align: baseline; set by Mintlify which can cause strange * layout issues when tables contain images or
elements */ .prose :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)) { vertical-align: top; } .prose a:not( :where( [class~='not-prose'], [class~='not-prose'] *, [class~='no-underline'], [class~='no-underline'] * ) ) { font-weight: 500; border-bottom-color: rgb(209 213 219); } .dark .prose a:not( :where( [class~='not-prose'], [class~='not-prose'] *, [class~='no-underline'], [class~='no-underline'] * ) ) { border-bottom-color: rgb(75 85 99); } .prose a:not( :where( [class~='not-prose'], [class~='not-prose'] *, [class~='no-underline'], [class~='no-underline'] * ) ):hover, .launchpad-link:hover { color: rgb(var(--primary)); border-bottom-color: rgb(var(--primary)); border-bottom-width: 1px; } .dark .prose a:not( :where( [class~='not-prose'], [class~='not-prose'] *, [class~='no-underline'], [class~='no-underline'] * ) ):hover, .dark .launchpad-link.launchpad-link:hover { color: rgb(var(--primary-light)); border-bottom-color: rgb(var(--primary-light)); border-bottom-width: 1px; } .launchpad-link { border-bottom-width: 1px; border-bottom-color: rgb(209 213 219); } .dark .launchpad-link.launchpad-link { border-bottom-color: rgb(75 85 99); } /* * External link affordance (TP-2167) — a trailing arrow on content links * that open a new tab, so readers can tell before clicking. Mintlify sets * `target="_blank"` on every link it renders to an external URL (confirmed * on the live site) but never on internal links, so that attribute is the * external/internal signal here rather than sniffing the `href` scheme, * which would also have to special-case relative and same-origin absolute * URLs. * * Two scoped selectors below rather than one: standard doc pages carry both * `.mdx-content` and `.prose` on the same element, but `mode: "custom"` * pages (the Launchpad at `docs/index.mdx`) render `.mdx-content` without * `.prose` since Mintlify skips the default article chrome there — so * `.mdx-content:not(.prose)` is the second selector's way of targeting * custom-mode pages specifically. `.mdx-content` wraps only the page's own * content column (confirmed on the live site) — sidebar, TOC, and top nav * sit outside it — so both selectors stay clear of site chrome. * * The two scopes exclude different things because `not-prose` means * different things in each: inside `.prose`, it marks a self-contained * widget (a Card, the video callout's stretched-link wrapper) as "not real * link text," so it doubles as a reliable icon opt-out. On the Launchpad, * `not-prose` is instead used pervasively as a plain layout/typography * reset — e.g. the "Popular Links" list in `home-columns.jsx` sits inside * a `not-prose` div purely to escape Tailwind Typography defaults on a page * that has no `.prose` context to begin with — so treating it as an icon * opt-out there would (and initially did) hide the icon from every one of * those real external links. The `.mdx-content:not(.prose)` selector omits * the `not-prose` clause for that reason and relies only on the explicit * `no-underline` / `no-external-icon` opt-outs described below. * * The icon is a `background-color: currentColor` box masked to shape (the * same FontAwesome CDN mask-image technique used for the pagination * chevrons above), so it automatically follows the link's own text colour — * default, hover, and dark mode — with no separate colour rules needed. * Kept small and at reduced opacity so it reads as a quiet hint rather than * a second, competing piece of link text. * * This also matches the video callout's link (`docs/snippets/components/ * video.jsx`), which needed its own stretched-link overlay moved to * `::before` (see below) so it wouldn't collide with this icon's `::after` * on the same ``. * * Excludes links that wrap an image (`:has(img)`) — the arrow renders after * the image rather than after any text, which reads as a stray mark next to * the image instead of a hint about the link. Images already carry their * own visual affordance for "this is a link" via the surrounding cursor and * hover state, so the icon does not add information there. * * Icon-only links (e.g. the Launchpad footer's social icons, * `docs/snippets/components/site-footer.jsx`) opt out via the dedicated * `no-external-icon` class rather than `no-underline`: Mintlify's build * rewrites plain Tailwind utility class names to a `mint-` prefix on some * elements but not others (confirmed by inspecting rendered output — the * same `no-underline` string survives unprefixed on the Launchpad's card * links but comes out as `mint-no-underline` on the footer's social links), * so matching on a real utility class name is unreliable. Custom, * non-utility class names (like `launchpad-link` and `video-callout` * elsewhere in this file) are never touched by that rewrite, so * `no-external-icon` is a plain marker class with no styling of its own — * added purely so this selector can `:not()` it out reliably. */ .prose a[target='_blank']:not( :where( [class~='not-prose'], [class~='not-prose'] *, [class~='no-underline'], [class~='no-underline'] *, [class~='no-external-icon'], [class~='no-external-icon'] * ) ):not(:has(img))::after, .mdx-content:not(.prose) a[target='_blank']:not( :where( [class~='no-underline'], [class~='no-underline'] *, [class~='no-external-icon'], [class~='no-external-icon'] * ) ):not(:has(img))::after { content: ''; display: inline-block; width: 0.55em; height: 0.55em; margin-left: 0.2em; vertical-align: 0.05em; opacity: 0.55; background-color: currentColor; -webkit-mask-image: url('https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/solid/up-right-from-square.svg'); mask-image: url('https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/solid/up-right-from-square.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* * "Back to top" button — injected by `back-to-top.js` into every * page. * * Fixed to the bottom of the viewport, horizontally centered over the * reading column (`#content-area`). Centering on the reading column rather * than the full viewport keeps it clear of the table of contents regardless * of viewport width or TOC length. `back-to-top.js` measures the column's * center and sets `left` on resize; the `left: 50%` below is only a * same-frame fallback before that first measurement lands. A ring around the * icon fills in as the user scrolls down the page; hovering or focusing * reveals a text label. */ #back-to-top-button { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 0.75rem; background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1); } #back-to-top-button.is-visible { opacity: 1; pointer-events: auto; } .btt-label { opacity: 0; transform: translateX(0.5rem); transition: opacity 200ms ease-out, transform 200ms ease-out; background: #101828; color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: 9999px; white-space: nowrap; box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); } #back-to-top-button:hover .btt-label, #back-to-top-button:focus-visible .btt-label { opacity: 1; transform: translateX(0); } .dark .btt-label { background: #fff; color: #101828; } .btt-ring-wrap { position: relative; width: 3.25rem; height: 3.25rem; flex: none; } .btt-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .btt-ring circle:first-child { stroke: #e8e8e8; } .btt-ring circle:last-child { stroke: rgb(var(--primary)); stroke-linecap: round; transition: stroke-dashoffset 90ms linear; } .btt-icon { position: absolute; inset: 0.1875rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: #fff; color: rgb(var(--primary)); box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); } .dark .btt-icon { background: #101828; } .btt-icon svg { width: 1.25rem; height: 1.25rem; } @media (prefers-reduced-motion: reduce) { #back-to-top-button, .btt-label, .btt-ring circle:last-child { transition: none; } } @media (max-width: 639px) { .btt-ring-wrap { width: 2.75rem; height: 2.75rem; } } /* * "Last modified" timestamp + "Was this page helpful?" feedback row. Mintlify * renders the timestamp and `.feedback-toolbar` as separate full-width, * stacked divs by default — CSS alone can't join two siblings into one flex * row without a shared parent, so `footer-meta.js` wraps them in this * `.footer-meta-row` div first. */ .footer-meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; margin-bottom: 5rem; border-top: 1px solid rgb(var(--gray-200)); } .dark .footer-meta-row { border-top-color: rgb(var(--gray-800) / 0.5); } /* * Both children keep Mintlify's own vertical padding (`pt-4 pb-16` on the * timestamp, `pb-16` on the toolbar) sized for their old stacked layout — * zero it now that `.footer-meta-row` handles spacing, or the row renders * much taller than its text. */ .footer-meta-row > * { padding: 0; } /* * `.feedback-toolbar` is `w-full` for its original full-width stacked row; * override to shrink-to-content so it sits on the right of the row instead * of stretching it to full width. */ .footer-meta-row .feedback-toolbar { width: auto; } /* * `align-items: start` stops CSS Grid's default row-stretch behavior — * without it, a long two-line title in one card silently grows its sibling * to match, even though the sibling's own title is a single short line. */ /* * `minmax(0, 1fr)`, not bare `1fr` (shorthand for `minmax(auto, 1fr)`) — a * bare `1fr` track won't shrink below its content's intrinsic width, and a * `white-space: nowrap` title's intrinsic width is its full unbroken text * width. Without the explicit `0` minimum, a long title grows the grid * track itself (and the whole row overflows the page) instead of being * contained and truncated inside its fixed-width card. */ #pagination { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 1rem; margin-top: 1.5rem; } /* * The first or last page in a section has only one pagination link (next * only, or previous only). Mintlify marks a "next"-direction link with * `ml-auto` so it floats right in its own default flex layout, but grid * auto-placement ignores that and drops a lone item into column 1 * regardless of direction — force it into column 2 to keep it right-aligned * like a two-link "Next" card. */ #pagination a.ml-auto:only-child { grid-column: 2; } /* * Fixed-size cards: a title that can wrap up to 2 lines, plus a FontAwesome * chevron marker next to it — no "Previous"/"Next" wording, no stacked * caption row. `height` (not `min-height`), sized to comfortably fit a * 2-line title plus padding, keeps both cards identically sized no matter * how long either title is. */ #pagination a { align-items: center; height: 6rem; gap: 0.625rem; margin-left: 0; padding: 1rem 1.25rem; border: 1px solid rgb(var(--gray-200)); border-radius: 0.5rem; transition: border-color 150ms ease-out, background-color 150ms ease-out; } #pagination a > * { margin: 0; } /* * Mintlify marks the "next"-direction link with `ml-auto` for its own * flex-based right-alignment (see the grid-column fix above) — reuse that * same signal to right-align this card's content within its now-fixed-size * box, instead of the `:last-child` guess this used to rely on, which * misfired on a previous-only last page (where the lone link is also the * last child). */ #pagination a.ml-auto { justify-content: flex-end; } /* * Mintlify's own chevron `

​Encryption

​Cloud Connectivity

​Megaport Cloud Router (MCR)

​Monitoring

​Portal Admin

​Terraform

​Troubleshooting

Encryption

Cloud Connectivity

Megaport Cloud Router (MCR)

Monitoring

Portal Admin

Terraform

Troubleshooting