/* ========================================================= Braindecode — Landing redesign (ported from claude.ai/design prototype "Braindecode Landing.html"). Editorial scientific aesthetic. Type: Inter (body) + JetBrains Mono (code/labels) + Fraunces (display) Palette: warm paper, slate ink, brand blue, warm amber accent. Every rule is scoped under .bd-landing so the styles never leak to the rest of the Sphinx site. Custom properties live on .bd-landing itself rather than :root for the same reason. ========================================================= */ /* stylelint-disable no-descending-specificity */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap"); /* --- Pydata-sphinx-theme overrides for the index page ---------------- landing.css ships on every page (Sphinx fingerprints it for cache- busting). The `bd-page-index` class is added to by a tiny script in `_templates/layout.html` when `pagename == 'index'`, so these page-level overrides only apply on the landing page. We deliberately don't rely on `:has(.bd-landing)` so the page still renders correctly in browsers that lack :has() support. */ .bd-page-index .bd-page-width { max-width: none !important; } .bd-page-index .bd-article-container { max-width: none !important; padding: 0 !important; } .bd-page-index .bd-article-container > div { max-width: none !important; padding: 0 !important; } .bd-page-index .bd-footer, .bd-page-index .bd-footer-content, .bd-page-index .prev-next-footer { display: none !important; } /* Visually hide the Sphinx-generated

on the landing page. Sphinx wraps the page in `

...

...
`, so the SEO H1 is the first

directly inside .bd-landing > section. We keep it in the DOM for screen readers and crawlers but pull it off-screen with the standard sr-only clip-path. The visible hero headline uses `.hero-title` so it isn't matched. */ .bd-landing > section > h1:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .bd-landing { --bd-paper: #fff; --bd-paper-2: #f6f7f8; --bd-ink: #14181f; --bd-ink-2: #2a323d; --bd-muted: #5e6878; --bd-line: #e6e8eb; --bd-line-2: #d6d9de; --bd-brand: #3a6c97; --bd-brand-deep: #2a527a; --bd-brand-soft: #dde7f0; --bd-brand-tint: #eef3f8; --bd-warm: #b46a2c; --bd-warm-soft: #f3e3d2; --bd-good: #4f7d5a; /* hover/highlight accents — alias of brand for consistent theming */ --bd-accent: var(--bd-brand); --bd-accent-soft: var(--bd-brand-soft); --bd-shadow-sm: 0 1px 0 rgba(20, 24, 31, 0.04), 0 2px 6px rgba(20, 24, 31, 0.04); --bd-shadow-md: 0 1px 0 rgba(20, 24, 31, 0.04), 0 8px 24px rgba(20, 24, 31, 0.06); --bd-radius: 14px; --bd-radius-sm: 10px; --bd-radius-pill: 999px; background: var(--bd-paper); color: var(--bd-ink); font-family: "Inter", system-ui, -apple-system, sans-serif; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html[data-theme="dark"] .bd-landing { --bd-paper: #0f1218; --bd-paper-2: #191d26; --bd-ink: #f1ece1; --bd-ink-2: #cfc8b9; --bd-muted: #8a8475; --bd-line: #272c36; --bd-line-2: #3a4150; --bd-brand-soft: #1d2c3a; --bd-brand-tint: #162130; --bd-warm-soft: #3a2a1a; } .bd-landing * { box-sizing: border-box; } .bd-landing img { max-width: 100%; display: block; } .bd-landing a { color: inherit; text-decoration: none; } /* Override the site-wide `--text-align: justify` from style.css. Justify in narrow column body copy creates ugly inter-word gaps in modern browsers (no proper hyphenation), and this landing reads like a marketing page, not a research paper. */ .bd-landing, .bd-landing p, .bd-landing li { text-align: left; } .bd-landing .bd-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; } .bd-landing .container { width: min(100% - 2.5rem, 1200px); margin: 0 auto; } /* ---------- HERO ---------- */ .bd-landing .hero { position: relative; padding: 4.5rem 0 3.5rem; overflow: hidden; } .bd-landing .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; } .bd-landing .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bd-muted); font-weight: 600; margin-bottom: 1.4rem; } .bd-landing .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bd-warm); box-shadow: 0 0 0 4px var(--bd-warm-soft); } .bd-landing .hero-title { font-family: "Fraunces", "Source Serif 4", Georgia, serif; font-variation-settings: "opsz" 144, "SOFT" 0; font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 500; margin: 0 0 1.1rem; color: var(--bd-ink); text-wrap: balance; } .bd-landing .hero-title em { font-style: italic; font-weight: 400; color: var(--bd-brand); } .bd-landing .hero-title .highlight { position: relative; white-space: nowrap; } .bd-landing .hero-title .highlight::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; bottom: 0.04em; height: 0.35em; background: var(--bd-warm-soft); z-index: -1; border-radius: 2px; } .bd-landing .hero-lede { font-size: 1.12rem; line-height: 1.55; color: var(--bd-muted); max-width: 38ch; margin: 0 0 1.8rem; } .bd-landing .hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-bottom: 1.6rem; } .bd-landing .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.65rem 1.05rem; border-radius: 8px; border: 1px solid var(--bd-line); background: var(--bd-paper); color: var(--bd-ink); font-weight: 600; font-size: 0.92rem; cursor: pointer; white-space: nowrap; text-decoration: none; transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s, background 0.12s; } .bd-landing .btn:hover { border-color: var(--bd-ink); transform: translateY(-1px); text-decoration: none; } .bd-landing .btn-primary { background: var(--bd-ink); color: var(--bd-paper); border-color: var(--bd-ink); } .bd-landing .btn-primary:hover { background: var(--bd-brand-deep); border-color: var(--bd-brand-deep); color: var(--bd-paper); } .bd-landing .btn-arrow { display: inline-block; transform: translateY(-1px); transition: transform 0.15s; } .bd-landing .btn-primary:hover .btn-arrow { transform: translate(2px, -1px); } .bd-landing .hero-install { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 1rem; border: 1px dashed var(--bd-line-2); background: var(--bd-paper-2); padding: 0.55rem 0.9rem; border-radius: 8px; font-family: "JetBrains Mono", monospace; font-size: 0.88rem; cursor: pointer; white-space: nowrap; color: var(--bd-ink); transition: border-color 0.15s, background 0.15s; } .bd-landing .hero-install:hover { border-color: var(--bd-brand); background: var(--bd-paper); } .bd-landing .hero-install .prompt { color: var(--bd-muted); user-select: none; } .bd-landing .hero-install .copy-icon { margin-left: 0.25rem; color: var(--bd-muted); display: inline-flex; } .bd-landing .hero-install .copy-icon .icon-check { display: none; } .bd-landing .hero-install.is-copied { border-color: var(--bd-good); background: color-mix(in srgb, var(--bd-good) 8%, var(--bd-paper)); } .bd-landing .hero-install.is-copied .copy-icon { color: var(--bd-good); } .bd-landing .hero-install.is-copied .copy-icon .icon-clipboard { display: none; } .bd-landing .hero-install.is-copied .copy-icon .icon-check { display: inline-block; } .bd-landing .hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 0.25rem; font-size: 0.82rem; color: var(--bd-muted); } .bd-landing .hero-meta strong { color: var(--bd-ink); font-weight: 600; } .bd-landing .hero-meta .meta-item { display: inline-flex; align-items: center; gap: 0.4rem; } /* second lede — plain body type so the keyword-rich audience pitch ("neuroscientists … deep learning … neurophysiological data") reads as part of the indexable intro paragraph rather than as decorative typography. Crawlers don't penalize italic, but a uniform body block keeps the first ~150 words coherent for snippet selection. */ .bd-landing .hero-tagline-emphasis { font-family: "Inter", system-ui, -apple-system, sans-serif; font-style: normal; font-weight: 500; font-size: 1.02rem; line-height: 1.55; color: var(--bd-ink-2); max-width: 56ch; margin: 1.25rem 0 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--bd-line); } .bd-landing .hero-tagline-emphasis strong { color: var(--bd-ink); font-weight: 600; } /* hero side-row mini-facts (3 numeric callouts under the install pill) */ .bd-landing .hero-side-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--bd-line-2); max-width: 540px; } .bd-landing .hero-side-row > div { padding: 0 1rem; border-right: 1px solid var(--bd-line); } .bd-landing .hero-side-row > div:first-child { padding-left: 0; } .bd-landing .hero-side-row > div:last-child { border-right: 0; padding-right: 0; } .bd-landing .hero-side-row .num { font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; font-size: 1.5rem; font-weight: 600; color: var(--bd-ink); letter-spacing: -0.02em; display: block; line-height: 1; } .bd-landing .hero-side-row .num sup { color: var(--bd-warm); font-size: 1.05rem; font-weight: 400; margin-left: 0.05em; vertical-align: super; } .bd-landing .hero-side-row .lbl { font-size: 0.76rem; color: var(--bd-muted); margin-top: 0.35rem; display: block; } /* hero ART: brain → EEG channels → small fully-connected net → readout */ .bd-landing .hero-art { position: relative; aspect-ratio: 1.7 / 1; width: 100%; border: 1px solid var(--bd-line); border-radius: 14px; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 20% 10%, var(--bd-accent-soft) 0%, transparent 50% ), radial-gradient(circle at 90% 90%, var(--bd-warm-soft) 0%, transparent 55%), var(--bd-paper); box-shadow: var(--bd-shadow-md); } .bd-landing .hero-art-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .bd-landing .hero-brain-img { filter: drop-shadow(0 4px 12px rgba(31, 74, 115, 0.22)); /* Source PNG has a flat medial right edge; soften it so the EEG traces appear to emerge from inside the brain rather than from a hard cut. */ -webkit-mask-image: linear-gradient( to right, black 0%, black 70%, transparent 100% ); mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%); } /* EEG trace channels — flow leftward via stroke-dashoffset */ .bd-landing .bd-eeg-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 8 6; animation: bd-trace-flow 3.6s linear infinite; } .bd-landing .bd-eeg-line.ch1 { stroke: #3aa3e0; animation-duration: 2.4s; stroke-dasharray: 6 5; } .bd-landing .bd-eeg-line.ch2 { stroke: #7d9ab8; animation-duration: 4s; stroke-dasharray: 10 7; opacity: 0.9; } .bd-landing .bd-eeg-line.ch3 { stroke: #1f4a73; animation-duration: 3s; stroke-dasharray: 8 6; } .bd-landing .bd-eeg-line.ch4 { stroke: var(--bd-warm); animation-duration: 2s; stroke-dasharray: 5 4; } @keyframes bd-trace-flow { to { stroke-dashoffset: -120; } } /* sliding "windowing" rectangle */ .bd-landing .bd-window { animation: bd-window-slide 5.2s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite; transform-box: fill-box; } @keyframes bd-window-slide { 0% { transform: translateX(-78px); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateX(0); opacity: 1; } 55% { transform: translateX(0); opacity: 1; } 90% { transform: translateX(78px); opacity: 1; } 100% { transform: translateX(78px); opacity: 0; } } /* input nodes colored to match their EEG channel */ .bd-landing .n-c1 { fill: #3aa3e0; } .bd-landing .n-c2 { fill: #7d9ab8; } .bd-landing .n-c3 { fill: #1f4a73; } .bd-landing .n-c4 { fill: var(--bd-warm); } /* edges — staggered fade pulse to suggest signal propagation */ .bd-landing .bd-edges-1 line { animation: bd-edge-pulse 5.2s ease-in-out infinite; stroke-dasharray: 60 60; } .bd-landing .bd-edges-1 line:nth-child(1) { animation-delay: 0s; } .bd-landing .bd-edges-1 line:nth-child(2) { animation-delay: 0.08s; } .bd-landing .bd-edges-1 line:nth-child(3) { animation-delay: 0.16s; } .bd-landing .bd-edges-1 line:nth-child(4) { animation-delay: 0.24s; } .bd-landing .bd-edges-1 line:nth-child(5) { animation-delay: 0.32s; } .bd-landing .bd-edges-1 line:nth-child(6) { animation-delay: 0.4s; } .bd-landing .bd-edges-1 line:nth-child(7) { animation-delay: 0.48s; } .bd-landing .bd-edges-1 line:nth-child(8) { animation-delay: 0.56s; } .bd-landing .bd-edges-1 line:nth-child(9) { animation-delay: 0.64s; } .bd-landing .bd-edges-1 line:nth-child(10) { animation-delay: 0.72s; } .bd-landing .bd-edges-1 line:nth-child(11) { animation-delay: 0.8s; } .bd-landing .bd-edges-1 line:nth-child(12) { animation-delay: 0.88s; } .bd-landing .bd-edges-2 line { animation: bd-edge-pulse 5.2s ease-in-out infinite; stroke-dasharray: 60 60; animation-delay: 1.4s; } .bd-landing .bd-edges-2 line:nth-child(2) { animation-delay: 1.55s; } .bd-landing .bd-edges-2 line:nth-child(3) { animation-delay: 1.7s; } @keyframes bd-edge-pulse { 0%, 90%, 100% { stroke-opacity: 0.35; stroke-dashoffset: 0; } 10% { stroke-opacity: 1; stroke-dashoffset: -60; } } /* warm readout — pulses every cycle */ .bd-landing .bd-readout { transform-box: fill-box; transform-origin: center; animation: bd-readout-pulse 5.2s ease-in-out infinite; animation-delay: 1.9s; } @keyframes bd-readout-pulse { 0%, 80%, 100% { transform: scale(1); opacity: 0.95; } 10%, 30% { transform: scale(1.35); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bd-landing .bd-eeg-line, .bd-landing .bd-window, .bd-landing .bd-edges-1 line, .bd-landing .bd-edges-2 line, .bd-landing .bd-readout { animation: none; } } /* ---------- FACTS STRIP ---------- */ .bd-landing .bd-facts { border-top: 1px solid var(--bd-line); border-bottom: 1px solid var(--bd-line); background: var(--bd-paper); padding: 1.4rem 0; } .bd-landing .bd-facts-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; } .bd-landing .bd-facts-label, .bd-landing .bd-facts-meta { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bd-muted); white-space: nowrap; } .bd-landing .bd-facts-row { display: flex; flex-wrap: wrap; gap: 0 2rem; justify-content: center; } .bd-landing .bd-facts-row a { display: inline-flex; align-items: baseline; gap: 0.35rem; text-decoration: none; color: var(--bd-ink); font-size: 0.92rem; padding: 0.25rem 0; border-bottom: 1px solid transparent; transition: border-color 0.12s, color 0.12s; } .bd-landing .bd-facts-row a:hover { border-bottom-color: var(--bd-accent); color: var(--bd-accent); } .bd-landing .bd-facts-row a b { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 1.05rem; color: var(--bd-accent); letter-spacing: -0.01em; } /* "live" download stat with pulsing dot */ .bd-landing .bd-live-stat { position: relative; } .bd-landing .bd-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: #22c55e; margin-right: 0.15rem; animation: bd-live-pulse 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } @keyframes bd-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } @media (prefers-reduced-motion: reduce) { .bd-landing .bd-live-dot { animation: none; } } @media (max-width: 760px) { .bd-landing .bd-facts-inner { grid-template-columns: 1fr; gap: 0.8rem; } .bd-landing .bd-facts-row { justify-content: flex-start; } } /* ---------- LOGO STRIP / institutions ---------- */ .bd-landing .logo-strip { border-top: 1px solid var(--bd-line); border-bottom: 1px solid var(--bd-line); background: var(--bd-paper-2); padding: 1.6rem 0; margin-top: 2rem; } .bd-landing .logo-strip-inner { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; justify-content: space-between; } .bd-landing .logo-strip-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bd-muted); font-weight: 600; flex-shrink: 0; } .bd-landing .logo-strip-logos { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; flex: 1; justify-content: center; } .bd-landing .logo-strip-logos img { height: 36px; width: auto; opacity: 0.65; filter: grayscale(100%); transition: opacity 0.15s, filter 0.15s; } .bd-landing .logo-strip-logos img:hover { opacity: 1; filter: none; } html[data-theme="dark"] .bd-landing .logo-strip-logos img { filter: grayscale(100%) invert(0.9) brightness(1.1); } /* ---------- SECTIONS ---------- */ .bd-landing .section { padding: 5rem 0; } .bd-landing .section-tight { padding: 3.5rem 0; } .bd-landing .section-head { margin-bottom: 2.5rem; max-width: 720px; } .bd-landing .section-eyebrow { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bd-brand); font-weight: 700; margin-bottom: 0.85rem; display: flex; align-items: center; gap: 0.55rem; } .bd-landing .section-eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--bd-brand); } .bd-landing .section-title { font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; font-weight: 500; font-size: clamp(1.85rem, 3vw, 2.45rem); letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 0.7rem; color: var(--bd-ink); } .bd-landing .section-title em { font-style: italic; color: var(--bd-brand); font-weight: 400; } .bd-landing .section-sub { color: var(--bd-muted); font-size: 1.02rem; line-height: 1.55; max-width: 60ch; margin: 0; } /* ---------- METRICS ---------- */ .bd-landing .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bd-line); border: 1px solid var(--bd-line); border-radius: var(--bd-radius); overflow: hidden; } .bd-landing .metric-cell { background: var(--bd-paper); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; } .bd-landing .metric-num { font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; font-size: 2.4rem; letter-spacing: -0.04em; font-weight: 500; color: var(--bd-ink); line-height: 1; display: flex; align-items: baseline; gap: 0.15rem; } .bd-landing .metric-num .plus { font-size: 1.4rem; color: var(--bd-warm); font-weight: 400; } .bd-landing .metric-label { font-size: 0.82rem; color: var(--bd-muted); } /* ---------- FEATURES ---------- */ .bd-landing .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd-line); border: 1px solid var(--bd-line); border-radius: var(--bd-radius); overflow: hidden; } .bd-landing .feature-card { background: var(--bd-paper); padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: 0.8rem; transition: background 0.15s; position: relative; text-decoration: none; color: inherit; } .bd-landing .feature-card:hover { background: var(--bd-paper-2); } .bd-landing .feature-card:hover .feature-icon { color: var(--bd-brand); } .bd-landing .feature-icon { width: 28px; height: 28px; color: var(--bd-ink-2); transition: color 0.15s; } .bd-landing .feature-card h3 { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; font-weight: 600; color: var(--bd-ink); } .bd-landing .feature-card p { margin: 0; color: var(--bd-muted); font-size: 0.92rem; line-height: 1.55; } .bd-landing .feature-card .feature-link { margin-top: auto; font-size: 0.82rem; color: var(--bd-brand); font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; align-self: flex-start; } .bd-landing .feature-inline-link { color: var(--bd-brand); font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--bd-line-2); transition: border-color 0.12s, color 0.12s; } .bd-landing .feature-inline-link:hover { color: var(--bd-brand-deep); border-bottom-color: var(--bd-brand); } .bd-landing .feature-card .feature-link:hover { gap: 0.55rem; text-decoration: none; } /* ---------- CODE / QUICKSTART ---------- */ .bd-landing .code-section { background: #14181f; color: #d8d3c7; padding: 5rem 0; position: relative; overflow: hidden; } .bd-landing .code-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 40% at 90% 0%, rgba(180, 106, 44, 0.18), transparent 70% ), radial-gradient( ellipse 50% 50% at 0% 100%, rgba(58, 108, 151, 0.18), transparent 70% ); pointer-events: none; } .bd-landing .code-section .container { position: relative; z-index: 1; } .bd-landing .code-section .section-eyebrow { color: #b9a98a; } .bd-landing .code-section .section-eyebrow::before { background: #b9a98a; } .bd-landing .code-section .section-title { color: #f1ece1; } .bd-landing .code-section .section-sub { color: #a39b8a; } .bd-landing .code-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 2.2rem; align-items: start; } .bd-landing .code-side { position: sticky; top: 80px; } .bd-landing .code-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; border-left: 1px solid #2c333d; } .bd-landing .code-step { cursor: pointer; padding: 0.85rem 1rem; border-left: 2px solid transparent; margin-left: -1px; display: flex; gap: 0.9rem; align-items: flex-start; color: #847d6f; transition: color 0.15s, border-color 0.15s, background 0.15s; } .bd-landing .code-step:hover { color: #d8d3c7; } .bd-landing .code-step.active { border-left-color: var(--bd-warm); color: #f1ece1; background: linear-gradient(90deg, rgba(180, 106, 44, 0.08), transparent 60%); } .bd-landing .code-step-num { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; font-weight: 700; color: var(--bd-warm); flex-shrink: 0; margin-top: 0.12rem; width: 1.5em; } .bd-landing .code-step-text { display: flex; flex-direction: column; gap: 0.15rem; } .bd-landing .code-step-title { font-weight: 600; font-size: 0.94rem; } .bd-landing .code-step-desc { font-size: 0.82rem; color: #847d6f; } .bd-landing .code-step.active .code-step-desc { color: #b1aa9c; } .bd-landing .code-window { border-radius: 12px; border: 1px solid #2c333d; overflow: hidden; background: #0d1117; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); } .bd-landing .code-window-bar { display: flex; align-items: center; background: #161b22; padding: 0.55rem 0.85rem; border-bottom: 1px solid #2c333d; gap: 0.6rem; } .bd-landing .code-window-dots { display: flex; gap: 6px; } .bd-landing .code-window-dots span { width: 11px; height: 11px; border-radius: 50%; background: #3a4250; } .bd-landing .code-window-dots span:nth-child(1) { background: #ff5f57; } .bd-landing .code-window-dots span:nth-child(2) { background: #ffbd2e; } .bd-landing .code-window-dots span:nth-child(3) { background: #27c93f; } .bd-landing .code-window-tabs { display: flex; margin-left: 1rem; gap: 0; } .bd-landing .code-window-tab { padding: 0.35rem 0.9rem; font-family: "JetBrains Mono", monospace; font-size: 0.76rem; color: #847d6f; border-radius: 6px; cursor: pointer; } .bd-landing .code-window-tab.active { color: #f1ece1; background: #2c333d; } .bd-landing .code-window-meta { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: #5c6370; } .bd-landing .code-window-body { font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: 0.82rem; line-height: 1.6; padding: 1.1rem 0 1.4rem; display: flex; overflow: auto; max-height: 540px; } .bd-landing .code-gutter { flex-shrink: 0; padding: 0 0.85rem 0 1rem; color: #3c4250; text-align: right; user-select: none; font-variant-numeric: tabular-nums; } .bd-landing .code-content { white-space: pre; padding-right: 1.5rem; flex: 1; color: #d8d3c7; } .bd-landing .code-content > div { padding-left: 0.5rem; margin-left: -0.5rem; border-left: 2px solid transparent; opacity: 0.55; transition: opacity 0.15s, background 0.15s; min-height: 1.6em; } .bd-landing .code-content > div.is-active { opacity: 1; background: rgba(180, 106, 44, 0.1); border-left-color: var(--bd-warm); } .bd-landing .tok-kw { color: #c594a0; } .bd-landing .tok-fn { color: #82aaff; } .bd-landing .tok-str { color: #c3a972; } .bd-landing .tok-num { color: #f78c6c; } .bd-landing .tok-com { color: #5c6370; font-style: italic; } .bd-landing .tok-var { color: #d8d3c7; } .bd-landing .tok-attr { color: #82aaff; } .bd-landing .tok-cls { color: #ffcb6b; } .bd-landing .code-output { border-top: 1px solid #2c333d; padding: 0.85rem 1rem; background: #0a0e13; font-family: "JetBrains Mono", monospace; font-size: 0.75rem; color: #8a9aa3; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .bd-landing .code-output b { color: #f1ece1; font-weight: 600; } .bd-landing .code-output .ok { color: #4caf83; display: inline-flex; align-items: center; gap: 0.35rem; } /* ---------- MODEL ZOO BROWSER ---------- */ .bd-landing .zoo-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .bd-landing .zoo-chip { padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--bd-line); background: var(--bd-paper); font-size: 0.82rem; font-weight: 500; color: var(--bd-ink-2); cursor: pointer; transition: all 0.12s; display: inline-flex; align-items: center; gap: 0.35rem; font-family: inherit; } .bd-landing .zoo-chip:hover { border-color: var(--bd-ink); } .bd-landing .zoo-chip.active { background: var(--bd-ink); color: var(--bd-paper); border-color: var(--bd-ink); } .bd-landing .zoo-chip .chip-count { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; color: var(--bd-muted); background: var(--bd-paper-2); padding: 1px 6px; border-radius: 999px; } .bd-landing .zoo-chip.active .chip-count { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); } .bd-landing .zoo-search { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--bd-line); background: var(--bd-paper); padding: 0.35rem 0.8rem; border-radius: 8px; width: 220px; } .bd-landing .zoo-search input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 0.85rem; flex: 1; color: var(--bd-ink); } .bd-landing .zoo-search input::placeholder { color: var(--bd-muted); } .bd-landing .zoo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .bd-landing .zoo-card { border: 1px solid var(--bd-line); border-radius: 12px; padding: 1.1rem 1.1rem 1rem; background: var(--bd-paper); display: flex; flex-direction: column; gap: 0.55rem; transition: border-color 0.12s, box-shadow 0.12s; text-align: left; font-family: inherit; color: inherit; } /* Subtle border tint on hover; no translate / cursor change because .zoo-card is a presentational
, not an interactive control. */ .bd-landing .zoo-card:hover { border-color: var(--bd-line-2); } .bd-landing .zoo-card-head { display: flex; align-items: center; justify-content: space-between; } .bd-landing .zoo-card-name { font-family: "JetBrains Mono", monospace; font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bd-ink); } .bd-landing .zoo-card-cat { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--bd-brand-soft); color: var(--bd-brand-deep); } .bd-landing .zoo-card-cat.warm { background: var(--bd-warm-soft); color: var(--bd-warm); } .bd-landing .zoo-card-cat.green { background: #d6e6d8; color: var(--bd-good); } .bd-landing .zoo-card-cat.purple { background: #e7dff0; color: #6a4f87; } .bd-landing .zoo-card-cat.gray { background: var(--bd-paper-2); color: var(--bd-muted); } .bd-landing .zoo-card-paper { font-size: 0.78rem; color: var(--bd-muted); font-style: italic; } .bd-landing .zoo-card-desc { font-size: 0.84rem; color: var(--bd-ink-2); line-height: 1.45; } .bd-landing .zoo-card-meta { display: flex; gap: 0.8rem; margin-top: 0.25rem; padding-top: 0.55rem; border-top: 1px dashed var(--bd-line); font-size: 0.72rem; color: var(--bd-muted); font-family: "JetBrains Mono", monospace; } .bd-landing .zoo-card-meta b { color: var(--bd-ink); font-weight: 600; } .bd-landing .zoo-empty { padding: 3rem; text-align: center; color: var(--bd-muted); border: 1px dashed var(--bd-line); border-radius: 12px; } .bd-landing .zoo-foot { margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--bd-muted); } .bd-landing .zoo-foot a { color: var(--bd-brand); font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; } /* ---------- PIPELINE ---------- */ .bd-landing .pipeline-section { background: var(--bd-paper-2); border-top: 1px solid var(--bd-line); border-bottom: 1px solid var(--bd-line); } .bd-landing .pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; position: relative; } .bd-landing .pipeline-col-head { display: flex; flex-direction: column; gap: 0.35rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--bd-line-2); } .bd-landing .pipeline-col-num { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: var(--bd-warm); font-weight: 700; letter-spacing: 0.12em; } .bd-landing .pipeline-col-name { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--bd-ink); } .bd-landing .pipeline-col-cards { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1rem; } .bd-landing .pipeline-card { background: var(--bd-paper); border: 1px solid var(--bd-line); border-radius: 10px; padding: 0.9rem 1rem; display: flex; align-items: center; gap: 0.8rem; transition: all 0.12s; text-decoration: none; color: inherit; } .bd-landing .pipeline-card:hover { border-color: var(--bd-brand); transform: translateX(2px); text-decoration: none; } .bd-landing .pipeline-card-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--bd-brand-tint); color: var(--bd-brand); display: grid; place-items: center; flex-shrink: 0; } .bd-landing .pipeline-card-text { flex: 1; display: flex; flex-direction: column; } .bd-landing .pipeline-card-name { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; font-weight: 600; color: var(--bd-ink); } .bd-landing .pipeline-card-desc { font-size: 0.78rem; color: var(--bd-muted); margin-top: 1px; } /* ---------- HUGGING FACE HUB SECTION ---------- */ .bd-landing .bd-hf { border: 1px solid var(--bd-line); border-radius: 16px; padding: 2.4rem 2.4rem 2rem; background: radial-gradient( circle at 12% 0%, var(--bd-accent-soft) 0%, transparent 55% ), radial-gradient( circle at 88% 100%, var(--bd-warm-soft) 0%, transparent 55% ), var(--bd-paper); } .bd-landing .bd-hf-head { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; margin-bottom: 2rem; } .bd-landing .bd-hf-marks { display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.1rem; border: 1px solid var(--bd-line); border-radius: 12px; background: var(--bd-paper); } .bd-landing .bd-hf-marks img { display: block; } .bd-landing .bd-hf-plus { font-size: 1.35rem; color: var(--bd-muted); font-weight: 300; } .bd-landing .bd-hf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .bd-landing .bd-hf-grid-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 1.4rem; } /* tutorials carousel — second row of the HF section */ .bd-landing .bd-hf-tutorials { border-top: 1px dashed var(--bd-line); padding-top: 1.6rem; margin-top: 0.25rem; } .bd-landing .bd-hf-tutorials-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .bd-landing .bd-hf-tutorials-head h3 { font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.015em; color: var(--bd-ink); margin: 0.25rem 0 0; } .bd-landing .bd-hf-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0.25rem; padding: 0.25rem 0.25rem 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--bd-line) transparent; } .bd-landing .bd-hf-carousel::-webkit-scrollbar { height: 6px; } .bd-landing .bd-hf-carousel::-webkit-scrollbar-thumb { background: var(--bd-line); border-radius: 3px; } .bd-landing .bd-hf-carousel::-webkit-scrollbar-thumb:hover { background: var(--bd-line-2); } .bd-landing .bd-hf-tut { scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.35rem; border: 1px solid var(--bd-line); border-radius: 10px; background: var(--bd-paper); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; } .bd-landing .bd-hf-tut:hover { transform: translateY(-2px); border-color: var(--bd-accent); box-shadow: var(--bd-shadow-md); text-decoration: none; } .bd-landing .bd-hf-tut img { width: 100%; height: 110px; object-fit: cover; object-position: center; background: var(--bd-paper-2); border-bottom: 1px solid var(--bd-line); display: block; } .bd-landing .bd-hf-tut-tag { font-family: "JetBrains Mono", monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bd-warm); padding: 0.65rem 0.85rem 0; } .bd-landing .bd-hf-tut-title { font-size: 0.85rem; line-height: 1.35; color: var(--bd-ink); font-weight: 500; padding: 0 0.85rem 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bd-landing .bd-hf-card { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.4rem 1.4rem 1.3rem; border: 1px solid var(--bd-line); border-radius: 12px; background: var(--bd-paper); text-decoration: none; color: inherit; transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s; } .bd-landing .bd-hf-card:hover { border-color: var(--bd-accent); } .bd-landing .bd-hf-link { margin-top: auto; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; font-weight: 600; color: var(--bd-accent); text-decoration: none; align-self: flex-start; padding-top: 0.35rem; } .bd-landing .bd-hf-link:hover { color: var(--bd-brand-deep); text-decoration: underline; } .bd-landing .bd-hf-tag { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bd-warm); } .bd-landing .bd-hf-card h3 { font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; color: var(--bd-ink); } .bd-landing .bd-hf-card p { font-size: 0.9rem; line-height: 1.5; color: var(--bd-muted); margin: 0 0 0.25rem; } .bd-landing .bd-hf-snippet { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; color: var(--bd-ink); background: var(--bd-paper-2); border: 1px solid var(--bd-line); border-radius: 6px; padding: 0.4rem 0.6rem; white-space: nowrap; overflow: auto; margin-top: 0.25rem; } @media (max-width: 1100px) { .bd-landing .bd-hf-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .bd-landing .bd-hf-head { grid-template-columns: 1fr; } .bd-landing .bd-hf-grid { grid-template-columns: 1fr; } .bd-landing .bd-hf { padding: 1.6rem 1.4rem; } } /* ---------- ECOSYSTEM / USED BY ---------- */ .bd-landing .ecosystem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .bd-landing .ecosystem-card { border: 1px solid var(--bd-line); border-radius: 12px; padding: 1.4rem 1.4rem 1.3rem; background: var(--bd-paper); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0.45rem; transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s; } .bd-landing .ecosystem-card:hover { border-color: var(--bd-brand); transform: translateY(-2px); box-shadow: var(--bd-shadow-md); text-decoration: none; } .bd-landing .ecosystem-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .bd-landing .ecosystem-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bd-warm); } /* Solid filled pill instead of `background-clip: text` gradient. The gradient-text trick rendered the word as invisible in browsers that silently drop background-clip on inline elements (older Firefox / some embedded WebKits), and the visual didn't actually resemble Meta's wordmark anyway — a flat blue chip is more legible and universally renders. */ .bd-landing .ecosystem-meta-mark { display: inline-flex; align-items: center; font-family: "Inter", system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.02em; color: #fff; background: linear-gradient(135deg, #0064e0 0%, #0fb3ff 100%); padding: 0.18rem 0.5rem; border-radius: 3px; line-height: 1.4; text-transform: none; } .bd-landing .ecosystem-name { font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; color: var(--bd-ink); line-height: 1.05; } .bd-landing .ecosystem-desc { font-size: 0.88rem; line-height: 1.5; color: var(--bd-muted); margin-top: 0.15rem; } .bd-landing .ecosystem-desc code { font-family: "JetBrains Mono", monospace; font-size: 0.92em; background: var(--bd-paper-2); padding: 1px 5px; border-radius: 4px; color: var(--bd-ink-2); } .bd-landing .ecosystem-foot { margin: 1.5rem 0 0; font-size: 0.9rem; color: var(--bd-muted); } .bd-landing .ecosystem-foot a { color: var(--bd-brand); font-weight: 600; } @media (max-width: 1100px) { .bd-landing .ecosystem-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .bd-landing .ecosystem-grid { grid-template-columns: 1fr; } } /* ---------- CTA BANNER ---------- */ .bd-landing .cta-banner { border: 1px solid var(--bd-line); border-radius: 18px; padding: 3.5rem 3rem; text-align: center; background: radial-gradient( ellipse 60% 80% at 50% 0%, var(--bd-brand-tint), transparent 70% ), var(--bd-paper); } .bd-landing .cta-banner h2 { margin: 0 0 0.5rem; font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; font-size: clamp(2rem, 3.5vw, 2.8rem); letter-spacing: -0.025em; font-weight: 500; color: var(--bd-ink); } .bd-landing .cta-banner h2 em { font-style: italic; color: var(--bd-brand); font-weight: 400; } .bd-landing .cta-banner p { color: var(--bd-muted); font-size: 1.04rem; margin: 0 auto 1.6rem; max-width: 50ch; } .bd-landing .cta-row { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } /* ---------- FOOTER ---------- */ .bd-landing .site-footer { border-top: 1px solid var(--bd-line); padding: 3rem 0 2rem; font-size: 0.88rem; color: var(--bd-muted); } .bd-landing .site-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2rem; } .bd-landing .site-footer h5 { margin: 0 0 0.9rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bd-ink); font-weight: 700; } .bd-landing .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; } .bd-landing .site-footer a { text-decoration: none; } .bd-landing .site-footer a:hover { color: var(--bd-brand); } .bd-landing .site-footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bd-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; } .bd-landing .site-footer-blurb { max-width: 32ch; line-height: 1.5; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1100px) { .bd-landing .zoo-grid { grid-template-columns: repeat(3, 1fr); } .bd-landing .feature-grid { grid-template-columns: repeat(2, 1fr); } .bd-landing .metrics { grid-template-columns: repeat(2, 1fr); } .bd-landing .site-footer-cols { grid-template-columns: 1.4fr 1fr 1fr; } } @media (max-width: 880px) { .bd-landing .hero-grid { grid-template-columns: 1fr; } .bd-landing .hero-art { aspect-ratio: 1.5 / 1; } .bd-landing .code-grid { grid-template-columns: 1fr; } .bd-landing .code-side { position: static; } .bd-landing .pipeline { grid-template-columns: 1fr; } } @media (max-width: 600px) { .bd-landing .zoo-grid { grid-template-columns: 1fr 1fr; } .bd-landing .feature-grid { grid-template-columns: 1fr; } .bd-landing .quote-block { padding: 1.6rem; } .bd-landing .quote-text { font-size: 1.1rem; } .bd-landing .cta-banner { padding: 2rem 1.4rem; } }