/* ============================================================================ Perplexity Help Center — Mintlify custom styles Goal: match /poc/en/ static site design as closely as possible. ============================================================================ */ /* Fonts (from /poc/assets/fonts) */ @font-face { font-family: "GT Standard"; src: url("/fonts/GT-Standard-S-Standard-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "GT Standard"; src: url("/fonts/GT-Standard-S-Standard-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "GT Standard"; src: url("/fonts/GT-Standard-M-Standard-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "GT Standard"; src: url("/fonts/GT-Standard-M-Standard-Medium.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "GT Standard Mono"; src: url("/fonts/GT-Standard-Mono-Standard-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "GT Standard Footer"; src: url("/fonts/GT-Standard-S-Standard-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "GT Standard Footer"; src: url("/fonts/GT-Standard-S-Standard-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { color-scheme: light; --pplx-accent: #20808D; --pplx-accent-strong: #1A6E7A; --pplx-accent-soft: #E8F3F4; --pplx-bg: #FFFFFF; --pplx-bg-subtle: #F7F7F8; --pplx-text: #121516; --pplx-text-muted: #667075; --pplx-border: #E2E4E4; --pplx-hero-start: #0B4E56; --pplx-hero-end: #1F8791; --font-family-body: "GT Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important; --font-family-heading: "GT Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important; --font-family-mono: "GT Standard Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; } html.dark { color-scheme: dark; --pplx-accent: #4AA6AF; --pplx-accent-strong: #6CBBC2; --pplx-accent-soft: #17383C; --pplx-bg: #121516; --pplx-bg-subtle: #171B1C; --pplx-text: #F7F7F8; --pplx-text-muted: #A4ABAD; --pplx-border: #2C3234; } /* Force sans on Mintlify body + headings — override the theme's Zed-Mono default */ html, body, body input, body textarea, body button, body select, h1, h2, h3, h4, h5, h6, p, li, a, span, div, [class*="prose"], [class*="Prose"], [class*="heading"], [class*="Heading"], [class*="body"], [class*="Body"] { font-family: "GT Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important; } /* Keep code blocks monospaced */ code, pre, kbd, samp, tt, code *, pre *, [class*="code"], [class*="Code"] { font-family: "GT Standard Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; } /* ============================================================================ Landing page — hero + tile grid ============================================================================ */ .pplx-home { max-width: 960px; margin: 0 auto; padding: 8px 0 96px; color: var(--pplx-text); position: relative; } /* Hero */ .pplx-hero { background: linear-gradient(105deg, var(--pplx-hero-start) 0%, var(--pplx-hero-end) 100%); border-radius: 14px; padding: 40px 44px 36px; color: #FFFFFF; margin-bottom: 28px; position: relative; overflow: hidden; } .pplx-hero-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 78%); margin: 0 0 14px !important; } .pplx-hero-title { font-size: 34px !important; font-weight: 600 !important; line-height: 1.15 !important; color: #FFFFFF !important; margin: 0 0 12px !important; letter-spacing: -0.01em; border: 0 !important; padding: 0 !important; } .pplx-hero-description { font-size: 15px; color: rgb(255 255 255 / 82%); margin: 0 0 20px !important; max-width: 640px; line-height: 1.55; } /* Hero search input */ .pplx-hero-search { width: 100%; position: relative; display: flex; align-items: center; background: var(--pplx-bg); border-radius: 10px; padding: 0 12px; height: 40px; max-width: 380px; box-shadow: 0 1px 2px rgb(0 0 0 / 6%); cursor: pointer; } .pplx-hero-search-icon { color: var(--pplx-text-muted); display: flex; align-items: center; justify-content: center; margin-right: 8px; } .pplx-hero-search-text { font-size: 14px !important; color: var(--pplx-text) !important; flex: 1; text-align: left; } .pplx-hero-search:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; } .pplx-hero-search-kbd { font-size: 11px; color: var(--pplx-text-muted); border: 1px solid var(--pplx-border); border-radius: 4px; padding: 2px 6px; font-family: "GT Standard Mono", ui-monospace, monospace !important; } /* Section header */ .pplx-topic-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .pplx-topic-section-header h2 { font-size: 20px !important; font-weight: 600 !important; color: var(--pplx-text) !important; margin: 0 !important; border: 0 !important; padding: 0 !important; } .pplx-topic-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pplx-text-muted); } .pplx-topic-sort select { appearance: none; padding: 3px 22px 3px 8px; border: 1px solid transparent; border-radius: 8px; background: url('data:image/svg+xml;utf8,') right 8px center no-repeat; background-color: transparent; color: var(--pplx-text); font-size: 13px; cursor: pointer; } .pplx-topic-sort select:hover { border-color: var(--pplx-border); background-color: var(--pplx-bg-subtle); } .pplx-topic-sort[data-modality="keyboard"] select:focus-visible { outline: 2px solid var(--pplx-accent); outline-offset: 3px; } html.dark .pplx-topic-sort select { background-image: url('data:image/svg+xml;utf8,'); } /* Tile grid — image inset within card with rounded corners, matches /poc/en/ */ .pplx-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .pplx-tile { display: flex !important; flex-direction: column; border: 1px solid var(--pplx-border); border-radius: 10px; padding: 12px; background: var(--pplx-bg); text-decoration: none !important; color: inherit !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .pplx-tile:hover { border-color: #C8CCCC; box-shadow: 0 2px 8px rgb(0 0 0 / 4%); } .pplx-tile-media { display: block; aspect-ratio: 3 / 1; overflow: hidden; background: var(--pplx-bg-subtle); border-radius: 8px; } .pplx-tile-media-artwork { display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .pplx-tile-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 4px 6px; } .pplx-tile-title { font-size: 14px !important; font-weight: 600 !important; color: var(--pplx-text) !important; line-height: 1.3; margin: 0; } .pplx-tile-count { font-size: 12px !important; color: var(--pplx-text-muted) !important; font-weight: 400; margin: 0; } /* Active sidebar row — teal soft-fill pill on active nav item */ [aria-current="page"], a[aria-current="page"], nav a.active { background-color: var(--pplx-accent-soft) !important; color: var(--pplx-accent-strong) !important; border-radius: 8px !important; } /* ============================================================================ Article pages — teal eyebrow, teal underlined links, subtle divider ============================================================================ */ /* Mintlify's eyebrows="section" surfaces the parent group label above H1. Style it as an uppercase teal kicker. */ [class*="eyebrow"], [data-eyebrow], .mint-eyebrow { color: var(--pplx-accent) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } /* Inline body links: teal, no underline until hover (matches /poc/en/ reference) */ main a[href^="/docs/"], article a[href^="/docs/"], main a[href^="/"]:not(.pplx-tile):not(.pplx-sidebar-support-cta a), main p a, main li a { color: var(--pplx-accent) !important; text-decoration: none !important; } main a[href^="/docs/"]:not(.pplx-tile):hover, main a[href^="/"]:not(.pplx-tile):hover, main p a:hover, main li a:hover { color: var(--pplx-accent-strong) !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Body prose H2/H3 spacing to match /poc */ body:not(:has(.pplx-home)) #content h2 { font-size: 27px !important; font-weight: 500 !important; letter-spacing: -0.02em; line-height: 1.25 !important; margin-top: 26px !important; margin-bottom: 0.55em !important; } body:not(:has(.pplx-home)) #content h3 { font-size: 21px !important; font-weight: 500 !important; letter-spacing: -0.02em; line-height: 1.25 !important; margin-top: 1.6em !important; margin-bottom: 0.5em !important; } /* Ensure heading text is dark, not accent-tinted */ main h1, body:not(:has(.pplx-home)) #content h2, body:not(:has(.pplx-home)) #content h3, main h4 { color: var(--pplx-text) !important; } /* Feedback widget (Yes/No) at bottom of article — style as pill buttons */ [class*="feedback"] button, [data-feedback] button { border: 1px solid var(--pplx-border) !important; border-radius: 999px !important; padding: 6px 14px !important; font-size: 13px !important; background: var(--pplx-bg) !important; color: var(--pplx-text) !important; } [class*="feedback"] button:hover, [data-feedback] button:hover { border-color: var(--pplx-accent) !important; color: var(--pplx-accent) !important; } /* ============================================================================ Collection (per-group) landing page ============================================================================ */ .pplx-collection { max-width: 780px; margin: 0 auto; padding: 4px 0 96px; color: var(--pplx-text); } .pplx-crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--pplx-text-muted); margin-bottom: 20px; } .pplx-crumbs a { color: var(--pplx-text-muted) !important; text-decoration: none !important; } .pplx-crumbs a:hover { color: var(--pplx-accent) !important; } .pplx-crumbs-current { color: var(--pplx-text); font-weight: 500; } .pplx-coll-header { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 32px; } .pplx-coll-icon { display: flex !important; align-items: center; justify-content: center; width: 56px; height: 56px; min-width: 56px; min-height: 56px; max-width: 56px; max-height: 56px; margin: 0; padding: 0; border-radius: 9px; overflow: hidden; flex: 0 0 56px; line-height: 0; background: rgb(26 30 31); } .pplx-coll-icon img { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; object-fit: cover; object-position: center; } .pplx-coll-header-text { flex: 1; } .pplx-coll-title { font-size: 28px !important; font-weight: 600 !important; color: var(--pplx-text) !important; margin: 4px 0 6px !important; line-height: 1.2 !important; border: 0 !important; padding: 0 !important; } .pplx-coll-description { font-size: 15px !important; color: var(--pplx-text-muted) !important; margin: 0 0 6px !important; line-height: 1.5; } .pplx-coll-count { font-size: 13px !important; color: var(--pplx-text-muted) !important; margin: 0 !important; } /* Collection icon + article count relocated into the page header (collection-header.js) — icon sits inline before the title. */ #header .pplx-coll-icon { display: inline-flex !important; vertical-align: middle; margin-right: 16px; } #header .pplx-coll-icon ~ h1 { display: inline; vertical-align: middle; } #header .pplx-coll-count { margin-top: 10px !important; } .pplx-coll-list { border: 1px solid var(--pplx-border); border-radius: 12px; overflow: hidden; background: var(--pplx-bg); } .pplx-coll-article { display: flex !important; flex-direction: column; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--pplx-border); text-decoration: none !important; color: inherit !important; transition: background 0.12s ease; } .pplx-coll-article:last-child { border-bottom: 0; } .pplx-coll-article:hover { background: var(--pplx-bg-subtle); } .pplx-coll-article-title { font-size: 15px; font-weight: 500; color: var(--pplx-text); } .pplx-coll-article-desc { font-size: 13.5px; color: var(--pplx-text-muted); line-height: 1.5; } /* Shared Help Center footer — the native Mintlify footer remains mounted for its router lifecycle but is replaced visually by footer.js so the exact POC footer is shared by homepage, category, and article routes. */ #footer { display: none !important; } /* Hide Mintlify's draggable local-preview status widget (bottom-left leaf button injected by `mint dev`); the selector is inert in production. */ div[role="status"][aria-live="polite"].touch-none.cursor-grab { display: none !important; } body { display: flex; flex-direction: column; min-height: 100vh; } body > div:has(#navbar) { flex: 1 0 auto; } #pplx-footer { --footer-bg: rgb(8, 23, 23); --footer-color: hsl(0, 0%, 100%); box-sizing: border-box; /* Stay below the fixed sidebar (z-30); the footer is confined to the content area (left margin matches the sidebar width) so it never covers the menu. */ position: relative; z-index: 10; flex-shrink: 0; width: auto; margin: 0 var(--assistant-sheet-width, 0px) 0 0; padding: 48px 24px; border: 0; background: var(--footer-bg); color: var(--footer-color); font-family: "GT Standard Footer", "GT Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important; font-size: 15px; font-weight: 300; letter-spacing: -0.01em; line-height: 1.65; text-align: center; transition: margin-right 180ms ease; } #pplx-footer a { color: var(--footer-color) !important; text-decoration: none !important; } #pplx-footer a:hover { text-decoration: underline !important; } body[data-modality="keyboard"] #pplx-footer a:focus-visible { border-radius: 2px; outline: 2px solid var(--footer-color); outline-offset: 3px; } .site-footer-inner { max-width: 960px; margin: 0 auto; } .site-footer-sitename { margin: 0; font-size: 18px; font-weight: 500; } .site-footer-tagline { margin: 12px 0 0; } .site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; margin: 40px 0 0; padding: 0; list-style: none; } .site-footer-links li { margin: 0 12px 16px; } .site-footer-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; } .site-footer-social a { display: inline-flex; padding: 4px; } .site-footer-social img { display: block; } /* Match the 272px sidebar + 1px divider so the footer starts at the divider and the full-height sidebar is never covered. */ @media (min-width: 1024px) { #pplx-footer { margin-left: 273px; } } @media (max-width: 1023px) { #pplx-footer { margin-right: 0; } } /* ============================================================================ Mintlify shell parity The Linden shell reserves space for an empty page header, caps wide pages, and uses a second mobile navigation row. The POC uses a 64px header, a 272px sidebar, and lets the homepage fill the remaining desktop width. ============================================================================ */ body { background: var(--pplx-bg) !important; color: var(--pplx-text) !important; font-size: 15px; font-weight: 300; letter-spacing: -0.01em; line-height: 1.65; } /* Full-width navbar: lockup hugs the left edge, links hug the right, nothing centered. */ #navbar > .max-w-8xl { max-width: none !important; } #navbar > div > div > div { padding-inline: 24px !important; } #navbar .nav-logo { height: 30px !important; } #navbar a[href="/docs"] { display: flex; align-items: center; gap: 12px; text-decoration: none !important; } #navbar a[href="/docs"]::after { content: "Help Center"; color: var(--pplx-text); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; transform: translateY(-1px); white-space: nowrap; } #theme-preference-menu-trigger { width: 32px; height: 32px; border: 1px solid var(--pplx-border); border-radius: 7px; } #theme-preference-menu-trigger > span { display: none !important; } #theme-preference-menu-trigger::after { content: "◐"; color: var(--pplx-text); font-size: 17px; line-height: 1; } #navbar div:has(> #theme-preference-menu-trigger)::before { content: "English"; margin-right: 8px; padding-left: 19px; background: url('data:image/svg+xml;utf8,') left center / 14px 14px no-repeat; color: var(--pplx-text-muted); font-size: 13px; font-weight: 300; opacity: 0.6; white-space: nowrap; } html.dark #navbar div:has(> #theme-preference-menu-trigger)::before { background-image: url('data:image/svg+xml;utf8,'); } #assistant-entry, #assistant-entry-mobile { width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--pplx-border); border-radius: 7px; background: var(--pplx-bg); color: var(--pplx-text); transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } #assistant-entry > span { display: none !important; } #assistant-entry svg, #assistant-entry-mobile svg { width: 16px; height: 16px; color: currentColor !important; } #assistant-entry-mobile { display: grid; place-items: center; } #assistant-entry[data-assistant-toggle-state="open"], #assistant-entry-mobile[data-assistant-toggle-state="open"] { border-color: var(--pplx-accent); background: var(--pplx-accent-soft); color: var(--pplx-accent-strong); } /* Breathing room between page content and the floating "Ask a question" bar */ .chat-assistant-floating-input { margin-top: 24px !important; } /* Tooltips for the Assistant and theme controls, sourced from their aria-labels */ #assistant-entry, #assistant-entry-mobile, #theme-preference-menu-trigger { position: relative; overflow: visible !important; } #assistant-entry::before, #assistant-entry-mobile::before, #theme-preference-menu-trigger::before { content: attr(aria-label); position: absolute; top: calc(100% + 8px); right: 0; background: var(--pplx-text); color: var(--pplx-bg); font-size: 12px; font-weight: 400; line-height: 1; padding: 6px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / 15%); opacity: 0; visibility: hidden; transition: opacity 0.12s ease 0.15s; pointer-events: none; z-index: 40; } #assistant-entry:hover::before, #assistant-entry-mobile:hover::before, #theme-preference-menu-trigger:hover::before, #assistant-entry:focus-visible::before, #assistant-entry-mobile:focus-visible::before, #theme-preference-menu-trigger:focus-visible::before { opacity: 1; visibility: visible; } body:has(.pplx-home) #content-container { max-width: none !important; width: 100% !important; } #content-container > div { padding-top: 44px !important; } #content-area { min-width: 0 !important; width: 100% !important; } #content-area:has(.pplx-home) > #header { display: none !important; } #content-area:has(.pplx-home) > #content { margin-top: 0 !important; } #navbar { z-index: 50 !important; overflow: visible !important; } /* Mintlify's search portal defaults to z-40, below the customized navbar. */ [data-component-part="search-backdrop"] { z-index: 1000 !important; } [role="presentation"]:has(> [data-component-part="search-modal"]) { z-index: 1001 !important; } /* Desktop sidebar */ #sidebar { left: 0 !important; width: 272px !important; border-right: 1px solid var(--pplx-border); background: var(--pplx-bg); } #sidebar-content { display: flex; flex-direction: column; width: 272px !important; } #sidebar-content > :not(.pplx-sidebar-support) { flex: 1 1 auto; min-height: 0; } #sidebar-content [data-component-part="scroll-area-viewport"] { padding-right: 0 !important; } #sidebar-content [data-component-part="scroll-area-content"] { padding-inline: 22px; } #sidebar-content [data-component-part="scroll-area-content"] > div > div:first-child { display: none; } #navigation-items { display: flex; flex-direction: column; padding-top: 85px; } #navigation-items > div { display: contents; } #navigation-items > div:first-child > .sidebar-group-header { display: none; } #navigation-items > div:nth-child(2) > .sidebar-group-header { order: 1; margin: 0 0 21px !important; padding-left: 10px !important; color: var(--pplx-text-muted) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.09em; line-height: 18px; } #navigation-items > div:first-child > .sidebar-group { order: 2; margin-bottom: 27px; } #navigation-items > div:nth-child(2) > .sidebar-group { order: 3; } #navigation-items .sidebar-group { width: 227px; } #navigation-items .sidebar-group button, #navigation-items .sidebar-group a { box-sizing: border-box; width: 100%; color: var(--pplx-text-muted) !important; font-size: 14px; letter-spacing: -0.01em; line-height: 1.3; } /* Mintlify renders every navigation group as a nested li > button + ul. Match the POC hierarchy by treating those group list items as the visual sections: expanded groups get breathing room, while nested sections gain an indent guide and repeat that treatment at every additional depth. */ #navigation-items .sidebar-group li:has(> button) { margin-bottom: 24px; } #navigation-items .sidebar-group li:has(> button[aria-expanded="false"]) { margin-bottom: 10px; } #navigation-items .sidebar-group li > ul > li:has(> button) { margin: 4px 0 10px 10px; padding-left: 8px; border-left: 1px solid var(--pplx-border); } #navigation-items .sidebar-group li > ul > li:has(> button[aria-expanded="false"]) { margin-bottom: 4px; } #navigation-items .sidebar-group button { min-height: 0; justify-content: space-between; margin-bottom: 6px; padding: 6px 4px 6px 10px !important; font-weight: 500 !important; } #navigation-items .sidebar-group li li > button { font-size: 13px; } #navigation-items .sidebar-group li > ul a { padding: 7px 10px !important; font-weight: 400 !important; } /* Use the POC's compact CSS chevron instead of Mintlify's taller glyph so both orientations remain centered against one- and two-line group names. */ #navigation-items .sidebar-group button > div:last-child { width: 26px; height: 26px; justify-content: center; margin: -4px -4px -4px 0; } #navigation-items .sidebar-group button > div:last-child svg { display: none; } #navigation-items .sidebar-group button > div:last-child::before { width: 8px; height: 8px; border-right: 1.5px solid currentcolor; border-bottom: 1.5px solid currentcolor; content: ""; transform: rotate(-45deg); transition: transform 140ms ease; } #navigation-items .sidebar-group button[aria-expanded="true"] > div:last-child::before { transform: rotate(45deg); } #navigation-items a[aria-current="page"] { min-height: 34px; padding: 7px 10px !important; background: var(--pplx-accent-soft) !important; color: var(--pplx-accent) !important; text-shadow: none !important; } #navigation-items a[aria-current="page"] > div:first-child { display: none; } /* Reuse Mintlify's real search trigger as the POC sidebar search control. */ @media (min-width: 1024px) { #search-bar-entry-mobile { position: fixed !important; z-index: 40; top: 92px; left: 22px; display: flex !important; width: 227px !important; height: 38px !important; justify-content: flex-start !important; gap: 10px; padding: 0 10px !important; border: 1px solid var(--pplx-border); border-radius: 8px; background: var(--pplx-bg-subtle); color: var(--pplx-text-muted) !important; } #search-bar-entry-mobile::after { content: "Search help"; font-size: 14px; letter-spacing: 0; } #search-bar-entry-mobile::before { position: absolute; right: 10px; content: "⌘ K"; padding: 1px 6px; border: 1px solid var(--pplx-border); border-radius: 5px; background: var(--pplx-bg); color: var(--pplx-text-muted); font-family: "GT Standard Mono", ui-monospace, monospace !important; font-size: 11px; line-height: 18px; } } /* Homepage */ .pplx-home { width: 100%; max-width: 1008px; margin: 0; padding: 8px 0 96px; } .pplx-hero { min-height: 292px; margin-bottom: 41px; padding: 34px; border-radius: 18px; background: radial-gradient(circle at 92% -10%, rgb(112 213 218 / 70%), transparent 38%), linear-gradient(135deg, #102E32, #1C626B); box-shadow: 0 22px 48px rgb(18 21 22 / 14%); } .pplx-hero-eyebrow { margin: 0 0 8px !important; color: var(--pplx-accent) !important; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; } .pplx-hero-title { margin: 0 !important; font-size: 48px !important; font-weight: 500 !important; letter-spacing: -0.035em; line-height: 1.08 !important; } .pplx-hero-description { max-width: 580px; margin: 14px 0 24px !important; color: rgb(247 247 248 / 78%); font-size: 17px; font-weight: 300; line-height: 1.65; } .pplx-hero-search { width: min(100%, 520px); max-width: none; height: 50px; padding: 0 14px; border: 1px solid var(--pplx-border); border-radius: 9px; box-shadow: none; } .pplx-hero-search-text { font-size: 15px !important; font-weight: 300; letter-spacing: 0; } .pplx-hero-search-kbd { border-radius: 5px; padding: 1px 6px; } .pplx-topic-section-header { min-height: 41px; margin-bottom: 13px; } .pplx-topic-section-header h2 { font-size: 22px !important; font-weight: 500 !important; letter-spacing: -0.02em; line-height: 1.65 !important; } .pplx-topic-sort { font-size: 13px; } .pplx-topic-grid { gap: 13px; } .pplx-tile { min-width: 0; padding: 20px; border-radius: 14px; } .pplx-tile:hover { border-color: color-mix(in srgb, var(--pplx-accent) 50%, var(--pplx-border)); box-shadow: 0 8px 24px rgb(18 21 22 / 6%); } .pplx-tile-media { height: 132px; aspect-ratio: auto; border: 1px solid var(--pplx-border); border-radius: 10px; background: rgb(26 30 31); } .pplx-tile-media-artwork { margin: 0 !important; transition: transform 0.2s ease; } .pplx-tile:hover .pplx-tile-media-artwork, .pplx-tile:focus-visible .pplx-tile-media-artwork { transform: scale(1.04); } .pplx-tile-body { gap: 0; padding: 16px 0 0; } .pplx-tile-title { font-size: 17px !important; font-weight: 500 !important; letter-spacing: -0.01em; line-height: 1.65; } .pplx-tile-count { margin-top: 4px; font-size: 13px !important; font-weight: 300; } /* Article header, content column, and right rail */ body:not(:has(.pplx-home)) #header { box-sizing: border-box; padding-top: 9px; padding-bottom: 26px; border-bottom: 1px solid var(--pplx-border); } .pplx-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 20px; color: var(--pplx-text-muted); font-size: 13px; font-weight: 300; letter-spacing: 0; line-height: 1.65; } main #header .pplx-breadcrumb a { color: var(--pplx-text-muted) !important; text-decoration: none !important; } main #header .pplx-breadcrumb a:hover { color: var(--pplx-accent) !important; } .pplx-breadcrumb-separator { opacity: 0.5; } .pplx-breadcrumb-current { padding: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--pplx-text) !important; } body:not(:has(.pplx-home)) #header h1 { margin: 0 !important; color: var(--pplx-text) !important; font-size: 48px !important; font-weight: 500 !important; letter-spacing: -0.035em; line-height: 1.08 !important; } @media (min-width: 1024px) { body:not(:has(.pplx-home)) #header .eyebrow + div { margin-top: 9px !important; } } body:not(:has(.pplx-home)) #header > div:last-child p { max-width: 640px; margin-top: 11px !important; color: var(--pplx-text-muted) !important; font-size: 18px !important; font-weight: 300; letter-spacing: -0.01em; line-height: 1.55 !important; } body:not(:has(.pplx-home)) #content { margin-top: 28px !important; color: var(--pplx-text); font-size: 16px; font-weight: 300; line-height: 1.65; } body:not(:has(.pplx-home)) #content p { margin-top: 0 !important; margin-bottom: 14px !important; } body:not(:has(.pplx-home)) #content > p + p { margin-top: 26.390625px !important; } #table-of-contents-layout { padding-left: 0 !important; border-left: 1px solid var(--pplx-border); } #table-of-contents { width: 100% !important; box-sizing: border-box; margin-top: -46px !important; padding-left: 22px; } #table-of-contents nav > h2 { margin: 0 !important; color: var(--pplx-text-muted) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.65 !important; } #table-of-contents nav > h2 svg { display: none; } #table-of-contents-content { margin-top: 8px; color: var(--pplx-text-muted) !important; font-size: 13px !important; } #table-of-contents-content .toc-item { padding-left: 0 !important; background: transparent !important; color: var(--pplx-text-muted) !important; } #table-of-contents-content .toc-item > div { display: none !important; } #table-of-contents-content a { color: var(--pplx-text-muted) !important; font-weight: 300 !important; text-shadow: none !important; } .pplx-toc-feedback { margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--pplx-border); color: var(--pplx-text-muted); font-size: 13px; } .pplx-toc-feedback p { margin: 0 0 10px; } .pplx-toc-feedback div { display: flex; gap: 9px; } .pplx-toc-feedback button { padding: 6px 12px !important; border: 1px solid var(--pplx-border); border-radius: 7px !important; background: var(--pplx-bg); color: var(--pplx-text-muted); font-size: 15px !important; font-weight: 300; } @media (min-width: 1024px) { body:not(:has(.pplx-home)) #content { margin-top: 30px !important; } body:not(:has(.pplx-home)) #content-container > div { gap: 56px !important; } body:not(:has(.pplx-home)) #content-area { flex: 1 1 auto; max-width: none !important; margin-inline: 0 !important; padding-left: 296px !important; } body:not(:has(.pplx-home)) #table-of-contents-layout { flex: 0 0 240px; width: 240px !important; } } /* Sidebar support card */ .pplx-sidebar-support { flex: 0 0 auto; box-sizing: border-box; width: 227px; margin: 12px 22px; padding: 16px; border: 1px solid var(--pplx-border); border-radius: 10px; background: var(--pplx-bg-subtle); } .pplx-sidebar-support-title { margin: 0 0 5px !important; color: var(--pplx-text) !important; font-size: 15px !important; font-weight: 500 !important; } .pplx-sidebar-support-link { display: inline-block; color: var(--pplx-accent) !important; font-size: 13px !important; font-weight: 400 !important; text-decoration: none !important; } .pplx-sidebar-support-link:hover { color: var(--pplx-accent-strong) !important; text-decoration: underline !important; text-underline-offset: 3px; } .pplx-sidebar-support-link:focus-visible { border-radius: 2px; outline: 2px solid var(--pplx-accent); outline-offset: 3px; } #mobile-nav-content > .pplx-sidebar-support { display: none; } @media (max-width: 1023px) { #navbar > div > div > div { padding-inline: 16px !important; } #navbar button[class*="h-14"] { display: none !important; } #content-container > div { padding-top: 92px !important; } .pplx-home { width: calc(100% - 4px); max-width: none; margin-left: 2px; padding-top: 8px; } #sidebar-content > .pplx-sidebar-support { display: none !important; } #mobile-nav-content { display: flex; flex-direction: column; min-height: 100%; } #mobile-nav-content > .pplx-sidebar-support { display: block; width: auto; margin: auto 20px 20px; } } @media (max-width: 780px) { #navbar .nav-logo { height: 25px !important; } #navbar a[href="/docs"] { gap: 10px; } #navbar a[href="/docs"]::after { font-size: 17px; transform: translateY(-1.5px); } #navbar .hidden:has(#theme-preference-menu-trigger) { position: absolute !important; top: 16px; right: 62px; display: flex !important; width: auto; } #navbar .hidden:has(#theme-preference-menu-trigger) > div:first-child { display: none !important; } #navbar div:has(> #theme-preference-menu-trigger)::before { display: none; } #search-bar-entry-mobile { display: none !important; } #navbar button[aria-label="More actions"] { width: 32px; height: 32px; border: 1px solid var(--pplx-border); border-radius: 7px; } #navbar button[aria-label="More actions"] > * { display: none !important; } #navbar button[aria-label="More actions"]::after { position: static !important; inset: auto !important; content: "☰"; color: var(--pplx-text); font-size: 14px; line-height: 1; } .pplx-hero { min-height: 356px; padding: 25px; } .pplx-hero-title { font-size: 36px !important; } body:not(:has(.pplx-home)) #header, body:not(:has(.pplx-home)) #content { width: calc(100% - 4px); margin-left: 2px; } body:not(:has(.pplx-home)) #header { padding-bottom: 19px; } body:not(:has(.pplx-home)) #header > div:last-child p { margin-top: 15px !important; } body:not(:has(.pplx-home)) #header h1 { font-size: 36px !important; } .pplx-hero-description { font-size: 17px; } .pplx-topic-section-header { min-height: 40px; margin-bottom: 13px; } .pplx-topic-grid { grid-template-columns: 1fr; } .pplx-tile { min-height: 243px; } } @media (prefers-reduced-motion: reduce) { .pplx-tile:hover .pplx-tile-media-artwork, .pplx-tile:focus-visible .pplx-tile-media-artwork { transform: none; } }