/* ========================================================================= Global-e Knowledge Hub — home page ("/introduction", mode: custom) Scoped under .ge-home so nothing here affects standard doc pages. Dark mode follows Mintlify's `.dark` class toggle. HOUSE PATTERN. `managing-orders.mdx` already carries this fix inline on 15 images — style={{display:"inline-block",verticalAlign:"text-bottom",margin:0}} — so someone hit this before and fixed one page by hand. This rule uses the same three values deliberately, so the two mechanisms agree. Those inline styles are now redundant (they win on specificity and say the same thing); they are left in place rather than swept out in an unrelated change. ========================================================================= */ .ge-home{ --ge-ink:#211D1A; --ge-ink-soft:#6B6560; --ge-card:#FFFFFF; --ge-line:#ECEAE8; --ge-line-strong:#E0DCD7; --ge-accent:#F15A2B; --ge-accent-press:#C2451F; --ge-tint:#FCF3EE; --ge-tint-2:#FDFBFA; --ge-good:#2E7D57; --ge-new:#B5561F; --ge-shadow:0 1px 2px rgba(33,29,26,.04),0 8px 24px -12px rgba(33,29,26,.14); --ge-shadow-hover:0 2px 4px rgba(33,29,26,.06),0 18px 40px -16px rgba(201,74,42,.28); --ge-radius:14px; --ge-maxw:1120px; color:var(--ge-ink); } .dark .ge-home{ --ge-ink:#F3EDE7; --ge-ink-soft:#A79E96; --ge-card:#221D19; --ge-line:#332B25; --ge-line-strong:#40362E; --ge-accent:#EF6A3D; --ge-accent-press:#F58057; --ge-tint:#2A211B; --ge-tint-2:#241D18; --ge-good:#5FB98C; --ge-new:#E8895A; --ge-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6); --ge-shadow-hover:0 2px 4px rgba(0,0,0,.35),0 20px 46px -16px rgba(239,106,61,.28); } .ge-home *{box-sizing:border-box} .ge-wrap{max-width:var(--ge-maxw);margin:0 auto;padding:0 24px} .ge-home .nowrap{white-space:nowrap} /* ---------- hero ---------- */ .ge-hero{ border-bottom:1px solid var(--ge-line); background: radial-gradient(120% 140% at 88% -20%, var(--ge-tint) 0%, transparent 55%), linear-gradient(180deg, var(--ge-tint-2) 0%, transparent 70%); } .ge-hero-in{max-width:var(--ge-maxw);margin:0 auto;padding:52px 24px 46px} .ge-eyebrow{font-size:12px;font-weight:640;letter-spacing:.09em;text-transform:uppercase;color:var(--ge-accent)} .ge-hero h1{margin:12px 0 0;font-size:clamp(30px,4.6vw,46px);line-height:1.04;letter-spacing:-.028em; font-weight:720;max-width:18ch;text-wrap:balance;color:var(--ge-ink)} .ge-hero p{margin:16px 0 0;font-size:17px;color:var(--ge-ink-soft);max-width:56ch;line-height:1.5} .ge-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap} .ge-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:620;padding:10px 16px; border-radius:10px;cursor:pointer;border:1px solid transparent;text-decoration:none} .ge-btn.primary{background:var(--ge-accent);color:#fff;box-shadow:0 6px 18px -8px var(--ge-accent)} .ge-btn.primary:hover{background:var(--ge-accent-press)} .ge-btn.ghost{background:var(--ge-card);border-color:var(--ge-line-strong);color:var(--ge-ink)} .ge-btn.ghost:hover{border-color:var(--ge-accent);color:var(--ge-accent)} /* ---------- sections ---------- */ .ge-section{padding:46px 0} .ge-section.tight{padding-top:0} .ge-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px} .ge-sechead h2{margin:0;font-size:15px;font-weight:680;letter-spacing:-.01em;color:var(--ge-ink)} .ge-sechead .hint{font-size:13px;color:var(--ge-ink-soft)} .ge-sechead a.more{font-size:13px;font-weight:600;color:var(--ge-accent);text-decoration:none} .ge-sechead a.more:hover{color:var(--ge-accent-press)} /* ---------- category grid ---------- */ .ge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ge-card{position:relative;background:var(--ge-card);border:1px solid var(--ge-line);border-radius:var(--ge-radius); padding:20px;box-shadow:var(--ge-shadow);text-decoration:none; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; display:flex;flex-direction:column;gap:9px} .ge-card:hover{transform:translateY(-3px);box-shadow:var(--ge-shadow-hover);border-color:var(--ge-line-strong)} .ge-ic{width:38px;height:38px;border-radius:10px;background:var(--ge-tint);color:var(--ge-accent); display:grid;place-items:center;margin-bottom:2px} .ge-ic svg{width:20px;height:20px} .ge-card h3{margin:0;font-size:15.5px;font-weight:660;letter-spacing:-.01em;color:var(--ge-ink)} .ge-card p{margin:0;font-size:13.3px;color:var(--ge-ink-soft);line-height:1.45} .ge-cnt{position:absolute;top:18px;right:18px;font-size:11px;color:var(--ge-ink-soft); font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace} .ge-badge{align-self:flex-start;margin-top:2px;font-size:11px;font-weight:660;letter-spacing:.02em; padding:2px 8px;border-radius:999px;background:var(--ge-tint);color:var(--ge-new);text-transform:uppercase} /* ---------- updates strip ---------- */ .ge-updates{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ge-upd{display:flex;gap:14px;align-items:flex-start;background:var(--ge-card);border:1px solid var(--ge-line); border-radius:12px;padding:16px 18px;box-shadow:var(--ge-shadow);text-decoration:none} .ge-upd .dot{margin-top:6px;width:8px;height:8px;border-radius:50%;flex:0 0 auto} .ge-upd .dot.n{background:var(--ge-new)} .ge-upd .dot.u{background:var(--ge-good)} .ge-upd .meta{font-size:11.5px;font-weight:640;letter-spacing:.04em;text-transform:uppercase;color:var(--ge-ink-soft)} .ge-upd h4{margin:3px 0 3px;font-size:14.5px;font-weight:620;letter-spacing:-.01em;color:var(--ge-ink)} .ge-upd p{margin:0;font-size:13px;color:var(--ge-ink-soft);line-height:1.45} .ge-upd .date{margin-left:auto;font-size:11px;color:var(--ge-ink-soft);white-space:nowrap; font-family:ui-monospace,Menlo,monospace} /* ---------- audience lanes ---------- */ .ge-lanes{display:grid;grid-template-columns:1fr 1fr;gap:16px} .ge-lane{border:1px solid var(--ge-line);border-radius:var(--ge-radius);padding:24px;box-shadow:var(--ge-shadow); background:linear-gradient(180deg,var(--ge-tint-2),transparent 60%),var(--ge-card)} .ge-lane .tag{font-size:12px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--ge-accent)} .ge-lane h3{margin:8px 0 6px;font-size:19px;letter-spacing:-.02em;font-weight:700;color:var(--ge-ink)} .ge-lane p{margin:0 0 16px;font-size:13.6px;color:var(--ge-ink-soft)} .ge-lane ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .ge-lane li a{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:520;padding:3px 0; text-decoration:none;color:var(--ge-ink)} .ge-lane li a:hover{color:var(--ge-accent)} .ge-lane li svg{width:15px;height:15px;color:var(--ge-accent);flex:0 0 auto} /* ---------- API reference landing extras ---------- */ .ge-lanes.cols3{grid-template-columns:repeat(3,1fr)} .ge-method{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:700;letter-spacing:.03em; color:var(--ge-accent);background:var(--ge-tint);border-radius:5px;padding:1px 6px;flex:0 0 auto} /* reference hero — cooler, technical tone (vs the home's warm peach) */ .ge-hero.api{ background: radial-gradient(120% 140% at 88% -20%, #EAEFF4 0%, transparent 55%), linear-gradient(180deg, #F4F7FA 0%, transparent 72%); } .dark .ge-hero.api{ background: radial-gradient(120% 140% at 88% -20%, #1B2129 0%, transparent 55%), linear-gradient(180deg, #191E24 0%, transparent 72%); } .ge-hero.api .ge-eyebrow{font-family:ui-monospace,Menlo,monospace;text-transform:none;letter-spacing:0} .ge-codechip{display:inline-flex;align-items:center;gap:9px;margin-top:20px; font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--ge-ink-soft); background:var(--ge-card);border:1px solid var(--ge-line);border-radius:9px;padding:7px 12px; box-shadow:var(--ge-shadow)} .ge-codechip .m{color:var(--ge-accent);font-weight:700} .ge-codechip .u{color:var(--ge-ink)} /* ---------- responsive ---------- */ @media(max-width:820px){.ge-grid{grid-template-columns:1fr 1fr}} @media(max-width:720px){.ge-updates,.ge-lanes,.ge-lanes.cols3{grid-template-columns:1fr}} @media(max-width:540px){.ge-grid{grid-template-columns:1fr}} /* ========================================================================= Card polish (toned down) — styles Mintlify's native /. No mode:custom → pages stay web-editable. Global-e orange #F15A2B. ⚠️ SELECTOR: `.card`, WITH THE DOT. Mintlify renders as

— a CLASS, not a custom element. This block was originally written against a bare tag selector (`card{…}`) which matched nothing, so the whole card design — surface, grey→orange icon hover — was silently inert and the tiles fell back to Mintlify's own `bg-white`. Found 2026-07-28 while checking the landing page against the canvas colour; the dot went in on enterprise and nce then, and on pro 2026-07-29 with the theme alignment. If cards ever look unstyled again, check this first. Surface is pure #FFFFFF, i.e. the same as the white page canvas all three tiers carry; the card reads through its hairline border and hover lift, not through a fill. The surface has to be chosen against whatever canvas the tier is carrying, so do NOT change one without the other, and in particular: · the cool #FAFAF9 grey this block used to name never actually rendered — the bare-tag selector meant tiles were always white in practice, and switching to `.card` made the grey visible for the first time. On a white canvas it reads as flat grey boxes (rejected on sight 2026-07-28); · the warm #F7F5EB panel belongs with the warm #FDFDF7 canvas of the discarded warm-canvas variant — see the recovery note in the page background block near the end of this file. HOUSE PATTERN. `managing-orders.mdx` already carries this fix inline on 15 images — style={{display:"inline-block",verticalAlign:"text-bottom",margin:0}} — so someone hit this before and fixed one page by hand. This rule uses the same three values deliberately, so the two mechanisms agree. Those inline styles are now redundant (they win on specificity and say the same thing); they are left in place rather than swept out in an unrelated change. ========================================================================= */ .card{ border-radius:14px !important; border:1px solid rgba(33,29,26,.10) !important; background:#FFFFFF !important; /* matches the white page canvas; border+hover carry the card */ box-shadow:none !important; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important; } .card:hover{ transform:translateY(-2px); border-color:rgba(241,90,43,.45) !important; box-shadow:0 2px 4px rgba(33,29,26,.05), 0 16px 34px -18px rgba(33,29,26,.20) !important; } .card .icon, .card svg{ color:#6B6560 !important; transition:color .15s ease !important; } .card:hover .icon, .card:hover svg{ color:#F15A2B !important; } /* ── DARK: warm ELEVATED surface, not a 2% outline (2026-08-15) ────────────── What was here before — `background:rgba(255,255,255,.02)` over the rgb(14,11,11) canvas — composites to rgb(19,16,16). A FIVE-value lift. With only a 10% white hairline on top, the tiles read as outlines drawn on the page rather than as objects sitting on it, and the landing loses all depth. Light mode gets away with the same "no lift" trick (white card on white canvas) because a warm hairline is crisp against white; on near-black it is not. Dark needs REAL elevation, so the surface is now an opaque warm tone a clear step above the canvas, plus the inset top highlight that makes a surface read as lit from above. Everything here is warm on purpose — see the type note below for why. */ .dark .card{ border-color:rgba(255,228,214,.16) !important; background:#201B18 !important; box-shadow: inset 0 1px 0 rgba(255,240,232,.075), 0 1px 2px rgba(0,0,0,.45) !important; } .dark .card:hover{ border-color:rgba(239,106,61,.50) !important; background:#282119 !important; box-shadow: inset 0 1px 0 rgba(255,240,232,.10), 0 16px 34px -18px rgba(0,0,0,.85) !important; } .dark .card .icon, .dark .card svg{ color:#A79E96 !important; } .dark .card:hover .icon, .dark .card:hover svg{ color:#EF6A3D !important; } /* ── DARK: no PURE WHITE type (2026-08-15) ────────────────────────────────── Mintlify ships card titles and headings as Tailwind `dark:text-white`, i.e. literally #FFFFFF. Two things go wrong with that here: · GLARE — #FFF at 600 weight on a near-black canvas halates; the letters bloom and the page feels harsh rather than crisp. Note that Mintlify's own H1 is already rgb(229,225,223), NOT white — the white is only on H2+ and card titles, so the page is also internally inconsistent. · TEMPERATURE — light mode is a coherent WARM system (canvas #FFF, H1 rgb(30,25,24), card title rgb(44,40,38), card hairline rgba(33,29,26,.10) — every neutral is warm-tinted to sit with the orange brand). Dark mode inverted the LIGHTNESS but not the WARMTH, so cool white type sat on a warm canvas. That mismatch is what read as "no charm": it is the same page with its colour temperature broken in half. So headings become a warm off-white. The ID in the selector is doing real work — it is what outranks Tailwind's utility. ⚠️ CONTRAST IS NOT THE CONSTRAINT HERE — HIERARCHY IS. Measured against the rgb(32,27,24) card surface, #D6CCC5 is 10.8:1, against the rgb(14,11,11) canvas 12.4:1; WCAG AA wants 4.5:1 for the 16px/600 card titles (they are NOT 'large text'). So there is enormous headroom and this could go much dimmer without ever failing AA. What stops it is BODY COPY, which Mintlify renders at rgb(165,161,159): headings only read as headings while they stay clearly brighter than it. #D6CCC5 keeps a 49-point lead. Around #CCC1B9 (39 points) is the practical FLOOR — below that, card titles and their body text start reading as the same weight of ink and the page goes muddy. Ratios were computed, not eyeballed; recompute if the body colour moves. */ :is(.dark, [data-theme="dark"]) #content-area :is(h1,h2,h3,h4,h5), :is(.dark, [data-theme="dark"]) .card :is(h2,h3){ color:#D6CCC5 !important; } /* ── DARK: nothing out-shines the page title (2026-08-15) ─────────────────── Dimming the H1 to 12.42:1 above left three things brighter than it, so on a prose page the eye landed on a link or the footer nav instead of the title — the same failure the sidebar had, relocated. Each target below is derived from the ratio LIGHT mode gives it relative to its own H1 (17.39:1), then applied to the dark H1 (12.42:1), so the two themes rank things identically: element light % of H1 dark was dark now prose link 16.96:1 97.5% 18.14:1 12.11:1 #D1CAC6 pagination 10.09:1 58.0% 15.09:1 7.25:1 #A39C98 active tab 14.60:1 83.9% 15.09:1 10.46:1 #C3BCB8 Prose links land level with the title rather than below it — that mirrors light, where a link is 97.5% of the H1 and is distinguished by WEIGHT, not by being brighter. ℹ️ The real breadcrumb (`.breadcrumb-item`) is NOT in this list: it already renders rgb(165,161,159) / 7.65:1 / warm and needs nothing. Do not "fix" it. `nav#pagination` is the NEXT-PAGE nav at the BOTTOM of the page, not the breadcrumb — they are easy to confuse because both are a

of links. The active tab is keyed off `aria-current="location"`, which Mintlify sets — NOT off the `text-gray-800` utility, which is a styling detail. */ :is(.dark, [data-theme="dark"]) #content-area a.link{ color:#D1CAC6 !important; } :is(.dark, [data-theme="dark"]) #content-area nav#pagination, :is(.dark, [data-theme="dark"]) #content-area nav#pagination a{ color:#A39C98 !important; } :is(.dark, [data-theme="dark"]) #navbar .nav-tabs-item[aria-current]{ color:#C3BCB8 !important; } /* Hide the floating "Ask a question" assistant input site-wide. Keeps the top "Ask Assistant" button (#assistant-entry) — only the docked floating bottom-bar variant is removed. */ .chat-assistant-floating-input, chat-assistant-floating-input { display: none !important; } /* ========================================================================= Inline content links → Mintlify native (no colour override) The site-wide blue override — #2563eb / #60a5fa on p/li/td/th links inside #content-area — was REMOVED 2026-07-28 across all three tiers. Inline prose links now inherit Mintlify's own prose colour (var(--tw-prose-links)), which keeps light/dark parity for free. Do not reintroduce a link-colour override here. Only the table-header weight fix remains. HOUSE PATTERN. `managing-orders.mdx` already carries this fix inline on 15 images — style={{display:"inline-block",verticalAlign:"text-bottom",margin:0}} — so someone hit this before and fixed one page by hand. This rule uses the same three values deliberately, so the two mechanisms agree. Those inline styles are now redundant (they win on specificity and say the same thing); they are left in place rather than swept out in an unrelated change. ========================================================================= */ #content-area th a{ font-weight:400 } /* markdown-table header row: match body-cell link weight */ /* keep the custom home page (.ge-home) links on brand — inherit + orange hover, which is the shipped grey-card home design, not the native prose colour */ #content-area .ge-home p a, #content-area .ge-home li a, #content-area .ge-home td a, #content-area .ge-home th a{ color:inherit } #content-area .ge-home p a:hover, #content-area .ge-home li a:hover, #content-area .ge-home td a:hover, #content-area .ge-home th a:hover{ color:var(--ge-accent) } /* ---------- divider between sidebar nav and page content ---------- Draws a hairline on the right edge of the left navigation column so the sidebar reads as visually separate from the content area. Colour tracks the theme (light/dark) via Mintlify's `.dark` / [data-theme] toggle. NOTE: does not appear on mode:custom / mode:center pages (no sidebar). */ #sidebar{ border-right:1px solid #ECEAE8 } :is(.dark,[data-theme="dark"]) #sidebar{ border-right-color:#332B25 } /* ---------- sidebar: group-title weight + depth legibility ---------- NOTE: this tier previously had NO group-title styling at all, so this block introduces both the top-level bold treatment AND the depth ladder. Kept byte-identical in behaviour to the enterprise tier (tiers do not propagate — every style.css is edited separately). */ .sidebar-group-header{font-weight:600 !important} /* ---------- sidebar: depth legibility (UX-session feedback, 2026-07-28) ---------- PROBLEM the UX reviewers reported: only the FIRST group level had a visual treatment. Sub-groups (49 of them) and sub-sub-groups (3) rendered at the same weight and colour as leaf page links, so the ONLY depth signal was the inline padding-left step (1rem → 1.75rem → 2.5rem, i.e. 0.75rem per level). Indentation alone is a weak cue once the tree is 4 levels deep. FIX = two independent, additive cues: (a) a typographic LADDER so each level differs in weight + colour, and a group toggle never looks like a page link; (b) vertical INDENT RAILS (the file-tree convention) so a child's ownership is traceable by eye without counting pixels of indent. DEPTH SELECTORS — verified against the local mint dev DOM 2026-07-28. Every group is

children

; leaf pages are

. Depth is a NESTING question, so we select by ancestor chain, never by the inline padding-left (see the note above — React reformats that string after any interaction and substring matches die). L1 = li[data-group-tag] not inside another → 11 top-level groups L2 = one level of nesting → 49 sub-groups L3 = two levels of nesting → 3 sub-sub-groups The :not() with a descendant combinator is Selectors-4 and already proven in this stylesheet (it shipped in the original bold-groups rule). */ /* --- (a) typographic ladder: L1 bold/darkest → L2 → L3 → page lightest --- */ /* L1 — top-level group. Heaviest, darkest, plus block separation above so the 11 sections read as discrete chunks rather than one continuous list. */ #navigation-items li[data-group-tag]:not(li[data-group-tag] li[data-group-tag]) > button{ font-weight:700 !important; color:#111827 !important; /* gray-900 */ letter-spacing:-0.005em; } #navigation-items ul.sidebar-group > li[data-group-tag] + li[data-group-tag], #navigation-items ul.sidebar-group > li + li[data-group-tag]{ margin-top:0.55rem; /* air between top-level sections */ } /* L2 — sub-group. Clearly a heading (semibold) but one notch below L1. */ #navigation-items li[data-group-tag] li[data-group-tag]:not(li[data-group-tag] li[data-group-tag] li[data-group-tag]) > button{ font-weight:600 !important; color:#374151 !important; /* gray-700 */ } /* L3 — sub-sub-group. Medium weight; still visibly a group, not a page. */ #navigation-items li[data-group-tag] li[data-group-tag] li[data-group-tag] > button{ font-weight:500 !important; color:#4b5563 !important; /* gray-600 */ } /* Leaf page links — lightest rung, so a page never competes with a group at the same indent. Excludes the ACTIVE page, which the theme paints with bg-primary/10 + text-primary and must keep winning. */ #navigation-items li:not([data-group-tag]) > a:not([aria-current="page"]){ font-weight:400 !important; color:#6b7280 !important; /* gray-500 */ } #navigation-items li:not([data-group-tag]) > a:not([aria-current="page"]):hover{ color:#111827 !important; /* restore the theme's hover feedback */ } /* The chevron is the "I expand" affordance and only groups have one (pages are , never

​Page Design

​Customizing the Checkout and Confirmation Pages

Page Design

Customizing the Checkout and Confirmation Pages