/* * Parallel Python — single-page site stylesheet. * * Website: https://www.parallelpython.com * License: Apache-2.0 (see LICENSE and NOTICE) * * Theming: all colors are CSS custom properties. The light theme is the * default; [data-theme="dark"] on (set by the inline script in * index.html from localStorage) overrides the palette. */ :root, html[data-theme="light"] { /* light theme (default) */ --bg: #f5f7fb; --bg-soft: #eceff7; --panel: #ffffff; --panel-hover: #f8fafd; --border: #d9e0ec; --border-strong: #b8c3d8; --text: #3a4661; --text-strong: #14192b; --muted: #64708a; --muted-2: #4d5a75; --accent: #4f6bff; --accent-2: #7c5cff; --accent-soft: #3d5bc9; --code-bg: #f0f3f9; --code-text: #2a3550; --code-border: #d9e0ec; --inline-code-bg: #e9edf6; --inline-code-border: #d0d9ea; --nav-bg: rgba(245, 247, 251, 0.85); --nav-border: #dbe2ee; --hover-bg: #e6ebf5; --badge-bg: #e9edf6; --badge-version-border: rgba(124, 92, 255, 0.45); --h1-gradient: linear-gradient(120deg, #1c2a63 10%, #4f6bff 55%, #7c5cff 90%); --copy-bg: #ffffff; --th-bg: #eef1f8; --td-text: #46536f; --row-border: #e2e8f3; --glow-1: rgba(79, 107, 255, 0.08); --glow-2: rgba(124, 92, 255, 0.07); --img-shadow: 0 16px 40px rgba(28, 42, 99, 0.12), 0 0 24px rgba(79, 107, 255, 0.1); --diagram-bg: #ffffff; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } html[data-theme="dark"] { /* dark theme */ --bg: #0a0e17; --bg-soft: #0d1424; --panel: #101828; --panel-hover: #131f33; --border: #1d2942; --border-strong: #2c3a5c; --text: #dbe4f3; --text-strong: #eef2fa; --muted: #8b95a9; --muted-2: #9fb0cc; --accent: #4f6bff; --accent-2: #7c5cff; --accent-soft: #9db4ff; --code-bg: #0d1424; --code-text: #dbe4f3; --code-border: #1e2a44; --inline-code-bg: #141d31; --inline-code-border: #223050; --nav-bg: rgba(10, 14, 23, 0.82); --nav-border: #1a2338; --hover-bg: #141d31; --badge-bg: #111a2e; --badge-version-border: rgba(124, 92, 255, 0.5); --h1-gradient: linear-gradient(120deg, #ffffff 10%, #9db4ff 55%, #c4a7ff 90%); --copy-bg: #182238; --th-bg: #0e1526; --td-text: #c3cede; --row-border: #16203a; --glow-1: rgba(79, 107, 255, 0.18); --glow-2: rgba(124, 92, 255, 0.16); --img-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(79, 107, 255, 0.2); --diagram-bg: #0d1424; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); background-image: radial-gradient(1000px 500px at 20% -10%, var(--glow-1), transparent 65%), radial-gradient(1000px 500px at 80% -10%, var(--glow-2), transparent 65%); background-repeat: no-repeat; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; } a { color: var(--accent-soft); } a:hover { color: var(--text-strong); } /* ------------------------------------------------------------------ nav */ nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--nav-border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; } .brand { font-size: 16px; font-weight: 700; color: var(--text-strong); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; } .brand em { font-style: normal; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } .nav-links { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .nav-links a { color: var(--muted-2); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 10px; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease; } .nav-links a:hover { color: var(--text-strong); background: var(--hover-bg); } /* theme toggle button */ .theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--muted-2); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .theme-toggle:hover { color: var(--accent-soft); border-color: var(--accent); transform: translateY(-1px); } .theme-toggle svg { width: 18px; height: 18px; display: none; } /* show the icon for the theme you would switch TO */ html[data-theme="dark"] .icon-sun { display: block; } html[data-theme="light"] .icon-moon { display: block; } /* ----------------------------------------------------------------- hero */ .hero { text-align: center; padding: 72px 0 24px; } .badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } .badge { font-size: 12px; font-weight: 550; color: var(--muted-2); background: var(--badge-bg); border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 12px; letter-spacing: 0.02em; } .badge.version { color: var(--accent-soft); border-color: var(--badge-version-border); font-weight: 600; } .hero h1 { margin: 24px 0 0; font-size: clamp(40px, 6.5vw, 68px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; background: var(--h1-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .tagline { max-width: 720px; margin: 18px auto 0; font-size: 18px; line-height: 1.6; color: var(--muted); } .hero-media { max-width: 760px; margin: 32px auto 0; border-radius: 16px; border: 1px solid var(--border-strong); overflow: hidden; box-shadow: var(--img-shadow); background: var(--panel); transition: transform 0.25s ease, box-shadow 0.25s ease; } .hero-media:hover { transform: translateY(-2px); } .hero-img { display: block; width: 100%; height: auto; object-fit: cover; } .install-note { color: var(--muted); font-size: 14px; } .actions { display: flex; justify-content: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; } .btn { display: inline-block; padding: 11px 24px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #ffffff; box-shadow: 0 6px 24px rgba(93, 108, 255, 0.35); } .btn-primary:hover { color: #ffffff; box-shadow: 0 8px 30px rgba(93, 108, 255, 0.45); } .btn-ghost { background: var(--panel); border: 1px solid var(--border-strong); color: var(--muted-2); } .btn-ghost:hover { color: var(--text-strong); border-color: var(--accent); } /* ------------------------------------------------------------ sections */ section { padding: 56px 0; scroll-margin-top: 74px; } .kicker { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-soft); margin: 0 0 8px; } section h2 { margin: 0 0 18px; font-size: 30px; font-weight: 750; letter-spacing: -0.025em; color: var(--text-strong); } section p + p { margin-top: 14px; } strong { color: var(--text-strong); } /* -------------------------------------------------------------- cards */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 32px; } .feature { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .feature:hover { background: var(--panel-hover); border-color: var(--border-strong); transform: translateY(-1px); } .feature h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 650; color: var(--text-strong); } .feature p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); } /* -------------------------------------------------------- code blocks */ .code { margin: 22px 0; background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 12px; overflow: hidden; } .code figcaption { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--code-border); color: var(--muted); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; } .code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.65; color: var(--code-text); } .code code { font-family: inherit; } .copy-btn { background: var(--copy-bg); border: 1px solid var(--border-strong); color: var(--muted-2); border-radius: 6px; padding: 3px 10px; font-size: 12px; font-family: inherit; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .copy-btn:hover { color: var(--text-strong); border-color: var(--accent); } code, .mono { font-family: var(--mono); font-size: 0.88em; background: var(--inline-code-bg); border: 1px solid var(--inline-code-border); border-radius: 5px; padding: 1px 6px; color: var(--accent-soft); overflow-wrap: anywhere; } /* ------------------------------------------------------------ diagram */ .diagram { margin: 28px 0 20px; background: var(--diagram-bg); border: 1px solid var(--border-strong); border-radius: 14px; padding: 16px; box-shadow: var(--img-shadow); overflow: hidden; } .diagram-img { display: block; width: 100%; height: auto; border-radius: 10px; object-fit: contain; } .diagram-caption { margin-top: 12px; font-size: 13.5px; color: var(--muted); text-align: center; } .diagram-caption strong { color: var(--text-strong); } /* --------------------------------------------------------------- lists */ ul.details { padding-left: 22px; color: var(--text); } ul.details li { margin: 12px 0; } ul.details li::marker { color: var(--accent-soft); } /* -------------------------------------------------------------- tables */ table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .params-table { table-layout: fixed; } th { text-align: left; padding: 11px 16px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-2); background: var(--th-bg); border-bottom: 1px solid var(--border-strong); overflow-wrap: anywhere; } td { padding: 11px 16px; border-bottom: 1px solid var(--row-border); color: var(--td-text); vertical-align: top; overflow-wrap: anywhere; } tr:last-child td { border-bottom: none; } td .mono { overflow-wrap: anywhere; } .table-wrap { width: 100%; overflow-x: auto; margin: 20px 0; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); } .table-wrap table { margin: 0; border: none; border-radius: 0; } th.col-status, td.col-status { width: 148px; min-width: 148px; max-width: 148px; text-align: center; } td.col-status { vertical-align: middle; } .badge-status { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.01em; } .badge-status.verified { background: rgba(34, 197, 94, 0.14); color: #15803d; border: 1px solid rgba(34, 197, 94, 0.35); } html[data-theme="dark"] .badge-status.verified { background: rgba(34, 197, 94, 0.12); color: #4ade80; border-color: rgba(34, 197, 94, 0.3); } .badge-status.tested { background: rgba(79, 107, 255, 0.12); color: #3d5bc9; border: 1px solid rgba(79, 107, 255, 0.35); } html[data-theme="dark"] .badge-status.tested { background: rgba(79, 107, 255, 0.12); color: #9db4ff; border-color: rgba(79, 107, 255, 0.3); } h3 { margin: 38px 0 12px; font-size: 20px; font-weight: 650; letter-spacing: -0.015em; color: var(--text-strong); } h3:first-of-type { margin-top: 26px; } .sig { font-family: var(--mono); font-size: 13.5px; color: var(--accent-soft); background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 8px; padding: 11px 16px; overflow-x: auto; white-space: pre; display: block; } /* --------------------------------------------------------------- foot */ footer { border-top: 1px solid var(--nav-border); margin-top: 48px; padding: 40px 0 52px; text-align: center; color: var(--muted); font-size: 14px; } footer .foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 14px; } footer a { color: var(--muted-2); text-decoration: none; } footer a:hover { color: var(--text-strong); } /* ------------------------------------------------------------ responsive */ @media (max-width: 768px) { .nav-inner { height: auto; padding: 12px 0; flex-direction: column; gap: 8px; } .nav-right { width: 100%; justify-content: space-between; } .nav-links { justify-content: center; } .hero { padding: 52px 0 36px; } .hero h1 { font-size: 36px; } .hero-media { margin-top: 24px; } section { padding: 38px 0; } section h2 { font-size: 24px; } .diagram { padding: 10px; } }