/* pSEO pages: per-site tool documentation and category listings. Self-contained. Token values match src/geist.css, which is extracted from vercel.com production CSS (see docs/geist-tokens.md). @font-face lives in each page's instead of here, because this file is copied verbatim by Vite while the deploy can sit under a base path. */ :root { color-scheme: light; --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --ds-background-100: #fff; --ds-background-200: #fafafa; --ds-gray-100: #f2f2f2; --ds-gray-200: #ebebeb; --ds-gray-300: #e6e6e6; --ds-gray-400: #eaeaea; --ds-gray-500: #c9c9c9; --ds-gray-600: #a8a8a8; --ds-gray-700: #8f8f8f; --ds-gray-800: #7d7d7d; --ds-gray-900: #4d4d4d; --ds-gray-1000: #171717; --ds-gray-alpha-100: #0000000d; --ds-gray-alpha-400: #00000014; --ds-gray-alpha-500: #00000036; --ds-blue-100: #f0f7ff; --ds-blue-700: #0072f5; --ds-blue-900: #0068d6; --ds-green-100: #effbef; --ds-green-700: #45a557; --ds-green-900: #297a3a; --ds-amber-100: #fff6e5; --ds-amber-900: #a35200; --ds-purple-100: #f9f0ff; --ds-purple-900: #7820bc; --ds-teal-100: #eefcf9; --ds-teal-900: #067a6e; --ds-pink-100: #ffebf5; --ds-pink-900: #bd2864; --ds-shadow-border: 0 0 0 1px var(--ds-gray-alpha-400); --ds-shadow-small: 0px 2px 2px #0000000a; --ds-shadow-medium: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a; --ds-focus-ring: 0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--ds-blue-700); --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-12: 12px; --radius-full: 9999px; --container-xl: 1200px; --container-prose: 720px; --gutter: 24px; --duration: 150ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --ds-background-100: #0a0a0a; --ds-background-200: #000; --ds-gray-100: #1a1a1a; --ds-gray-200: #1f1f1f; --ds-gray-300: #292929; --ds-gray-400: #2e2e2e; --ds-gray-500: #454545; --ds-gray-600: #878787; --ds-gray-700: #8f8f8f; --ds-gray-800: #7d7d7d; --ds-gray-900: #a0a0a0; --ds-gray-1000: #ededed; --ds-gray-alpha-100: #ffffff0f; --ds-gray-alpha-400: #ffffff24; --ds-gray-alpha-500: #ffffff3d; --ds-blue-100: #0f1c2e; --ds-blue-700: #0072f5; --ds-blue-900: #52a8ff; --ds-green-100: #0b2212; --ds-green-700: #45a557; --ds-green-900: #62c073; --ds-amber-100: #291800; --ds-amber-900: #f2a20d; --ds-purple-100: #231528; --ds-purple-900: #bf7af0; --ds-teal-100: #04201b; --ds-teal-900: #0ac7b4; --ds-pink-100: #28151d; --ds-pink-900: #f75f8f; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--ds-background-100); color: var(--ds-gray-1000); font-family: var(--font-sans); font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, p, ul, ol, figure, pre { margin: 0; padding: 0; } ul, ol { list-style: none; } code, pre, kbd { font-family: var(--font-mono); } :where(a, button, summary, input, [tabindex]):focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: var(--radius-4); } ::selection { background: var(--ds-blue-700); color: #fff; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- header ---------- */ .pseo-header { position: sticky; top: 0; z-index: 10; height: 64px; background: color-mix(in srgb, var(--ds-background-100) 80%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--ds-gray-alpha-400); } .pseo-header-inner { display: flex; align-items: center; gap: 24px; width: 100%; max-width: var(--container-xl); height: 100%; margin: 0 auto; padding-inline: var(--gutter); } .brand { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding-inline: 4px; border-radius: var(--radius-6); color: var(--ds-gray-1000); font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.32px; text-decoration: none; } .brand-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-6); background: var(--ds-gray-1000); color: var(--ds-background-100); font-size: 12px; line-height: 16px; font-weight: 600; } .pseo-header nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .pseo-header nav a { display: inline-flex; align-items: center; height: 32px; padding-inline: 10px; border-radius: var(--radius-6); color: var(--ds-gray-900); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .pseo-header nav a:hover { background: var(--ds-gray-100); color: var(--ds-gray-1000); } /* ---------- page shell ---------- */ .pseo-main { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 24px var(--gutter) 96px; } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 40px; font-size: 14px; line-height: 20px; color: var(--ds-gray-900); } .breadcrumbs a { padding: 2px 4px; border-radius: var(--radius-4); color: var(--ds-gray-900); text-decoration: none; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .breadcrumbs a:hover { background: var(--ds-gray-100); color: var(--ds-gray-1000); } .breadcrumbs span[aria-hidden] { color: var(--ds-gray-600); } /* ---------- overview ---------- */ .site-overview { max-width: 820px; } .badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding-inline: 8px; border-radius: var(--radius-full); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; } .badge-neutral { background: var(--ds-gray-100); color: var(--ds-gray-900); } .badge-blue { background: var(--ds-blue-100); color: var(--ds-blue-900); } .badge-green { background: var(--ds-green-100); color: var(--ds-green-900); } .badge-amber { background: var(--ds-amber-100); color: var(--ds-amber-900); } .badge-purple { background: var(--ds-purple-100); color: var(--ds-purple-900); } .badge-teal { background: var(--ds-teal-100); color: var(--ds-teal-900); } .badge-pink { background: var(--ds-pink-100); color: var(--ds-pink-900); } .eyebrow { display: flex; flex-wrap: wrap; gap: 6px; } .site-overview h1 { margin: 20px 0 0; font-size: 48px; line-height: 56px; font-weight: 600; letter-spacing: -2.88px; color: var(--ds-gray-1000); word-break: break-word; } .lede { max-width: var(--container-prose); margin-top: 16px; font-size: 18px; line-height: 28px; color: var(--ds-gray-900); } .facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; padding-block: 12px; border-top: 1px solid var(--ds-gray-alpha-400); border-bottom: 1px solid var(--ds-gray-alpha-400); font-size: 14px; line-height: 20px; color: var(--ds-gray-900); } .facts b { color: var(--ds-gray-1000); font-weight: 500; } .answer-block { max-width: 820px; margin: 40px 0 56px; padding: 20px; border-radius: var(--radius-12); background: var(--ds-background-200); box-shadow: var(--ds-shadow-border); } .answer-block h2 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.4px; color: var(--ds-gray-1000); } .answer-block p { max-width: var(--container-prose); margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ds-gray-900); } /* ---------- tool directory ---------- */ .tool-directory { max-width: 820px; } .tool-directory > h2, .related h2, .category-list h2 { padding-bottom: 12px; border-bottom: 1px solid var(--ds-gray-alpha-400); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.96px; color: var(--ds-gray-1000); } .tool-entry { padding: 32px 0; border-bottom: 1px solid var(--ds-gray-alpha-400); } .tool-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ds-gray-900); } .tool-entry h2 { margin-top: 12px; font-family: var(--font-mono); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.96px; color: var(--ds-gray-1000); word-break: break-word; } .tool-entry > p { max-width: var(--container-prose); margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ds-gray-900); } .tool-entry h3 { margin: 24px 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.28px; color: var(--ds-gray-1000); } .tool-entry pre { overflow-x: auto; padding: 12px 16px; border-radius: var(--radius-8); background: var(--ds-background-200); box-shadow: var(--ds-shadow-border); font-size: 13px; line-height: 20px; color: var(--ds-gray-1000); white-space: pre-wrap; word-break: break-word; } .tool-entry ul { display: grid; gap: 2px; } .tool-entry li { display: grid; grid-template-columns: minmax(0, 160px) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-6); background: var(--ds-background-200); font-size: 13px; line-height: 18px; color: var(--ds-gray-900); } .tool-entry li code { overflow: hidden; font-size: 13px; color: var(--ds-gray-1000); text-overflow: ellipsis; } .tool-note { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--ds-gray-900); } .skill-snapshot { margin-top: 20px; border-radius: var(--radius-8); background: var(--ds-background-200); box-shadow: var(--ds-shadow-border); overflow: hidden; } .skill-snapshot summary { padding: 12px 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ds-gray-1000); cursor: pointer; list-style: none; } .skill-snapshot summary::-webkit-details-marker { display: none; } .skill-snapshot summary:hover { background: var(--ds-gray-100); } .skill-snapshot pre { max-height: 480px; margin: 0; border-radius: 0; border-top: 1px solid var(--ds-gray-alpha-400); box-shadow: none; overflow: auto; } .source, .repo-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .source a, .repo-links a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 10px; border-radius: var(--radius-6); background: var(--ds-background-100); box-shadow: var(--ds-shadow-border); color: var(--ds-gray-1000); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; transition: background var(--duration) var(--ease); } .source a:hover, .repo-links a:hover { background: var(--ds-gray-100); } /* ---------- related and category list ---------- */ .related { max-width: 820px; margin-top: 56px; } .related ul { display: grid; gap: 2px; margin-top: 8px; } .related li a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-6); color: var(--ds-gray-1000); font-size: 14px; line-height: 20px; text-decoration: none; transition: background var(--duration) var(--ease); } .related li a:hover { background: var(--ds-gray-100); } .related li span { margin-left: auto; color: var(--ds-gray-900); } .category-list { max-width: 900px; } .category-list ul { display: grid; gap: 8px; margin-top: 16px; } .category-list li a { display: block; padding: 16px; border-radius: var(--radius-12); background: var(--ds-background-100); box-shadow: var(--ds-shadow-border); color: var(--ds-gray-1000); text-decoration: none; transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .category-list li a:hover { background: var(--ds-background-200); box-shadow: var(--ds-shadow-border), var(--ds-shadow-medium); } .category-list strong { display: block; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.32px; } .category-list li a > span { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ds-gray-900); } .category-list p { max-width: var(--container-prose); margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ds-gray-900); } /* ---------- footer ---------- */ .pseo-footer { border-top: 1px solid var(--ds-gray-alpha-400); } .pseo-footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: var(--container-xl); margin: 0 auto; padding: 24px var(--gutter) 40px; font-size: 14px; line-height: 20px; color: var(--ds-gray-900); } .pseo-footer a { display: inline-flex; align-items: center; height: 32px; padding-inline: 8px; border-radius: var(--radius-6); color: var(--ds-gray-1000); font-weight: 500; text-decoration: none; transition: background var(--duration) var(--ease); } .pseo-footer a:hover { background: var(--ds-gray-100); } .pseo-footer span { margin-left: auto; } /* ---------- responsive ---------- */ @media (max-width: 768px) { :root { --gutter: 16px; } .site-overview h1 { font-size: 32px; line-height: 40px; letter-spacing: -1.28px; } .lede { font-size: 16px; line-height: 24px; } .breadcrumbs { margin-bottom: 24px; } .tool-entry h2 { font-size: 20px; line-height: 26px; letter-spacing: -0.4px; } .tool-entry li { grid-template-columns: minmax(0, 1fr); gap: 4px; } .answer-block { padding: 16px; margin: 32px 0 40px; } .pseo-footer span { margin-left: 0; } }