/* * Standalone visual identity for the "home" layout (home.bxm) - the * site's own homepage only. Deliberately not the theme's normal * accentColor/accentColorDark palette (bxsites.yaml's own theme.options) - * a distinct "Terminal Dawn" marketing look, wired into the SAME * data-theme toggle every other page already uses (light by default, * dark opt-in via [data-theme="dark"], same as accentColorDark's own * convention in layout.bxm's ). * * Every selector is scoped under .bxsites-home so nothing here can leak * onto, or be leaked onto by, a normal docs page's own style.css rules - * generic names like .btn/.card/.grid/.nav would otherwise collide with * Bootstrap's own classes of the same name (bootstrap.min.css is loaded * on this page too, for the reused version/locale switcher components), * which is also why those specific ones are prefixed bxh- here instead of * bare. */ .bxsites-home { --bg: #fbfdfb; --surface: #ffffff; --surface-2: #eefbf5; --raised: #f3fbf7; --border: rgba(6, 40, 32, .10); --border-strong: rgba(6, 40, 32, .17); --text: #0b201b; --muted: #5a7069; --muted-2: #82988f; --brand1: #00c766; --brand2: #00a9c9; --yellow: #caa300; --violet: #6a4bff; --grad: linear-gradient(90deg, var(--brand1), var(--brand2)); --grad-diag: linear-gradient(135deg, var(--brand1), var(--brand2)); --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; --display: "Sora", ui-sans-serif, system-ui, sans-serif; --body-font: "Manrope", ui-sans-serif, system-ui, sans-serif; --nav-bg: rgba(251, 253, 251, .82); --shadow-color: rgba(6, 40, 32, .18); --shadow-color-soft: rgba(6, 40, 32, .14); --glow: rgba(0, 199, 102, .08); background: var(--bg); color: var(--text); font-family: var(--body-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; } [data-theme="dark"].bxsites-home, [data-theme="dark"] .bxsites-home { --bg: #04121a; --surface: #0a1f2e; --surface-2: #0e2836; --raised: #0f2e3d; --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .16); --text: #eaf6f4; --muted: #8ba6b1; --muted-2: #5f7f8c; --brand1: #00ff78; --brand2: #00dbff; --yellow: #fff500; --violet: #7c5cff; --nav-bg: rgba(4, 18, 26, .78); --shadow-color: rgba(0, 0, 0, .55); --shadow-color-soft: rgba(0, 0, 0, .4); --glow: rgba(0, 255, 150, .1); } .bxsites-home { background: radial-gradient(900px 500px at 82% -6%, rgba(0, 199, 102, .08), transparent 60%), radial-gradient(700px 480px at 8% 8%, rgba(0, 169, 201, .07), transparent 55%), var(--bg); transition: background-color .2s ease, color .2s ease; } [data-theme="dark"] .bxsites-home { background: radial-gradient(900px 500px at 82% -6%, rgba(0, 255, 120, .16), transparent 60%), radial-gradient(700px 480px at 8% 8%, rgba(0, 219, 255, .12), transparent 55%), radial-gradient(600px 420px at 60% 92%, rgba(124, 92, 255, .10), transparent 60%), var(--bg); } .bxsites-home a { color: inherit; text-decoration: none; } .bxsites-home h1, .bxsites-home h2, .bxsites-home h3 { font-family: var(--display); margin: 0; letter-spacing: -.01em; } .bxsites-home code { font-family: var(--mono); background: none; padding: 0; color: inherit; } .bxh-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; } .bxsites-home .eyebrow { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand1); display: inline-flex; align-items: center; gap: .5em; } .bxsites-home .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--brand2); } /* ---------- nav ---------- */ .bxh-nav { position: sticky; top: 0; z-index: 40; background: var(--nav-bg); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); transition: background-color .2s ease, border-color .2s ease; } .bxh-navrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; } .bxh-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; } .bxh-brand img { width: 30px; height: 30px; flex: none; } .bxh-navlinks { display: flex; align-items: center; gap: 28px; font-size: .92rem; color: var(--muted); } .bxh-navlinks a:hover { color: var(--text); } .bxh-navcta { display: flex; align-items: center; gap: 12px; } .bxh-nav-utils { display: flex; align-items: center; gap: 10px; } /* Search box (search.bxm) reused from the docs navbar, restyled to match this page's own "Terminal Dawn" palette rather than the theme's Bootstrap look. */ .bxsites-home .bxh-search { display: flex; align-items: center; } .bxsites-home .bxsites-search { position: relative; width: 240px; max-width: 38vw; } .bxsites-home .bxsites-search .form-control { height: 34px; padding: 0 2.6rem 0 .75rem; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: var(--body-font); font-size: .9rem; } .bxsites-home .bxsites-search .form-control::placeholder { color: var(--muted-2); } .bxsites-home .bxsites-search .form-control:focus { outline: none; border-color: var(--brand2); box-shadow: 0 0 0 3px var(--glow); } .bxsites-home .bxsites-search-kbd { top: 50%; right: .45rem; transform: translateY(-50%); border-color: var(--border-strong); background: var(--surface-2); color: var(--muted); } .bxsites-home .bxsites-search-results { z-index: 60; min-width: 320px; max-width: 90vw; background: var(--surface); border-color: var(--border-strong); box-shadow: 0 12px 32px var(--shadow-color); } .bxsites-home .bxsites-search-results a, .bxsites-home .bxsites-search-results .bxsites-search-empty { color: var(--text); } .bxsites-home .bxsites-search-results a:hover, .bxsites-home .bxsites-search-result--active .bxsites-search-result__link { background: var(--surface-2); } @media (max-width: 900px) { .bxsites-home .bxh-search { display: none; } } .bxh-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-strong); background: transparent; color: var(--muted); cursor: pointer; } .bxh-theme-toggle:hover { color: var(--text); border-color: var(--brand2); } .bxh-theme-toggle svg { width: 16px; height: 16px; } @media (max-width: 760px) { .bxh-navlinks { display: none; } } .bxh-btn { display: inline-flex; align-items: center; gap: .5em; padding: .65rem 1.15rem; border-radius: 10px; font-weight: 600; font-size: .92rem; border: 1px solid transparent; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .bxh-btn:hover { transform: translateY(-1px); } .bxh-btn svg { width: 14px; height: 14px; flex: none; } .bxh-btn-primary { background: var(--grad); color: #04121a; box-shadow: 0 6px 24px rgba(0, 219, 255, .22); } .bxh-btn-ghost { border-color: var(--border-strong); color: var(--text); } .bxh-btn-ghost:hover { border-color: var(--brand2); } .bxh-btn-sm { padding: .4rem .7rem; font-size: .8rem; border-radius: 8px; } /* ---------- hero ---------- */ .bxh-hero { padding-block: 76px 40px; position: relative; } .bxh-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; } @media (max-width: 920px) { .bxh-hero-grid { grid-template-columns: 1fr; } } .bxsites-home .bxh-hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.75rem); font-weight: 800; line-height: 1.05; margin-top: 18px; } .bxsites-home .grad { background: var(--grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent; } .bxsites-home .lead { font-size: 1.12rem; color: var(--muted); max-width: 46ch; margin-top: 20px; line-height: 1.65; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .install-chip { margin-top: 28px; display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .88rem; color: var(--brand1); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .7rem 1rem; } .install-chip .sep { color: var(--muted-2); } .preview { position: relative; } .preview-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 30px 70px var(--shadow-color), 0 0 0 1px var(--glow); overflow: hidden; transform: rotate(.4deg); } .preview-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .preview-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); } .preview-bar .url { margin-left: 8px; font-family: var(--mono); font-size: .74rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; flex: 1; } .preview-body { display: grid; grid-template-columns: 110px 1fr; min-height: 260px; font-size: .8rem; } .preview-side { border-right: 1px solid var(--border); padding: 14px 12px; color: var(--muted-2); background: var(--surface-2); } .preview-side .item { padding: 6px 8px; border-radius: 6px; margin-bottom: 4px; } .preview-side .item.active { background: var(--glow); color: var(--brand1); } .preview-main { padding: 18px 20px; } .preview-main .k1 { width: 70%; height: 11px; border-radius: 4px; margin-bottom: 14px; opacity: .9; background: linear-gradient(90deg, var(--brand1), var(--brand2), var(--brand1)); background-size: 200% 100%; } @media (prefers-reduced-motion: no-preference) { .preview-main .k1 { animation: bxh-shimmer 3.2s ease-in-out infinite; } } @keyframes bxh-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } .preview-main .k2 { width: 92%; height: 7px; border-radius: 4px; background: var(--border-strong); margin-bottom: 8px; } .preview-main .k3 { width: 80%; height: 7px; border-radius: 4px; background: var(--border-strong); margin-bottom: 20px; } .preview-main .chipsrow { display: flex; gap: 8px; margin-top: 6px; } .preview-main .chip { font-family: var(--mono); font-size: .68rem; color: var(--brand2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 10px; } .preview-side .item.active { position: relative; } .preview-side .item.active::after { content: ""; position: absolute; top: 50%; right: 8px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--brand1); box-shadow: 0 0 6px var(--brand1); } @media (prefers-reduced-motion: no-preference) { .preview-side .item.active::after { animation: bxh-pulse-dot 1.6s ease-in-out infinite; } } @keyframes bxh-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .float-badge { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .72rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 12px; box-shadow: 0 12px 30px var(--shadow-color-soft); color: var(--brand2); } .float-badge svg { width: 14px; height: 14px; flex: none; } .badge-1 { top: -10px; right: 26px; } .badge-2 { bottom: -16px; left: -22px; color: var(--yellow); } @media (prefers-reduced-motion: no-preference) { .badge-1 { animation: bxh-float-1 4.5s ease-in-out infinite; } .badge-2 { animation: bxh-float-2 4.5s ease-in-out infinite; animation-delay: -2.25s; } } @keyframes bxh-float-1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes bxh-float-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (max-width: 920px) { .float-badge { display: none; } } /* ---------- section shell ---------- */ .bxsites-home section { padding-block: 72px; } @media (max-width: 640px) { .bxsites-home section { padding-block: 48px; } } .section-head { max-width: 640px; margin-bottom: 44px; } .bxsites-home .section-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-top: 12px; } .section-head p { color: var(--muted); margin-top: 12px; line-height: 1.6; font-size: 1rem; } /* ---------- pipeline flow diagram ---------- */ .bxh-orbit-wrap { max-width: 700px; margin-inline: auto; } .flow-row { display: flex; align-items: flex-start; justify-content: center; margin-top: 52px; flex-wrap: wrap; row-gap: 28px; } .flow-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; width: 76px; } .flow-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--brand1); box-shadow: 0 10px 24px var(--shadow-color-soft); } .flow-icon svg { width: 23px; height: 23px; } .flow-stage span { font-family: var(--mono); font-size: .72rem; color: var(--muted); text-align: center; white-space: nowrap; } .flow-connector { width: 64px; height: 56px; display: flex; align-items: center; flex: none; position: relative; } .flow-connector .line { width: 100%; height: 2px; background: var(--border-strong); position: relative; } .flow-pulse { position: absolute; top: 50%; left: -5px; margin-top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand1); box-shadow: 0 0 10px var(--brand2); opacity: 0; } @media (prefers-reduced-motion: no-preference) { .flow-pulse { animation: bxh-flow-move 2.8s ease-in-out infinite; } } @keyframes bxh-flow-move { 0% { left: -5px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } } .orbit-caption { text-align: center; color: var(--muted); font-size: .92rem; margin-top: 40px; line-height: 1.6; } @media (max-width: 640px) { .flow-icon { width: 44px; height: 44px; } .flow-icon svg { width: 19px; height: 19px; } .flow-connector { width: 28px; } } /* ---------- terminal panel ---------- */ .term-panel { max-width: 480px; margin: 32px auto 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px var(--shadow-color-soft); } .term-body { padding: 18px 20px; font-family: var(--mono); font-size: .82rem; line-height: 2.1; min-height: 130px; } .term-line { color: var(--muted); opacity: 1; } .term-line .ok { color: var(--brand1); } .term-line .term-cmd { color: var(--brand2); } @media (prefers-reduced-motion: no-preference) { .term-line { opacity: 0; animation: bxh-term-fade 5.6s ease-in-out infinite; } } @keyframes bxh-term-fade { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 96% { opacity: 0; } 100% { opacity: 0; } } .term-cursor { display: inline-block; width: 7px; height: 13px; background: var(--brand1); vertical-align: -2px; margin-left: 2px; } @media (prefers-reduced-motion: no-preference) { .term-cursor { animation: bxh-term-blink 1s steps(1) infinite; } } @keyframes bxh-term-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ---------- feature grid ---------- */ .bxh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } @media (max-width: 920px) { .bxh-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .bxh-grid { grid-template-columns: 1fr; } } .bxh-card { background: var(--bg); padding: 26px 22px; transition: background .2s; } .bxh-card:hover { background: var(--surface); } .bxh-card .icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--brand1); margin-bottom: 16px; } .bxh-card .icon svg { width: 19px; height: 19px; } .bxsites-home .bxh-card h3 { font-size: .98rem; font-weight: 700; } .bxsites-home .bxh-card h3 a { color: inherit; } .bxsites-home .bxh-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--border-strong); } .bxh-card p { color: var(--muted); font-size: .86rem; line-height: 1.55; margin-top: 8px; } .bxh-card-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; } .bxh-card-wide .icon { margin-bottom: 0; flex: none; } @media (max-width: 560px) { .bxh-card-wide { flex-direction: column; align-items: flex-start; } } .stack-strip { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 22px; } .stack-strip .label { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); } .stack-strip svg { width: 21px; height: 21px; color: var(--muted); } /* ---------- compare table ---------- */ .compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; } .comparison-section { padding-bottom: 104px !important; } .comparison-section .footnote { margin-top: 20px; } .compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .88rem; } .compare th, .compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--border); } .bxsites-home .compare th { font-family: var(--display); font-weight: 700; font-size: .86rem; background: var(--surface); } .compare td:first-child, .compare th:first-child { text-align: left; color: var(--text); font-weight: 600; } .compare tr:last-child td { border-bottom: none; } .compare .us { color: var(--brand1); background: var(--glow); } .compare .yes { font-weight: 700; } .compare .no { color: var(--muted-2); } /* ---------- ecosystem strip ---------- */ .eco-hero-mark { width: 84px; height: 84px; margin: 24px auto 4px; } .eco-hero-mark svg { width: 100%; height: 100%; filter: drop-shadow(0 12px 24px var(--shadow-color-soft)); } @media (prefers-reduced-motion: no-preference) { .eco-hero-mark { animation: bxh-eco-float 5s ease-in-out infinite; } } @keyframes bxh-eco-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .eco-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; } @media (max-width: 820px) { .eco-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .eco-row { grid-template-columns: 1fr; } } .eco-card-wide { grid-column: span 2; } @media (max-width: 460px) { .eco-card-wide { grid-column: span 1; } } .eco-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .2s; } .eco-card:hover { border-color: var(--border-strong); } .eco-card .icon { width: 32px; height: 32px; color: var(--brand1); } .eco-card .icon svg { width: 100%; height: 100%; } .bxsites-home .eco-card b { font-family: var(--display); color: var(--text); font-size: .98rem; } .eco-card span { color: var(--muted); font-size: .82rem; line-height: 1.5; } /* ---------- theme gallery ---------- */ .themes-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin-top: 8px; } .theme-chip { flex: none; width: 150px; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--surface); } .theme-swatch { height: 64px; } .theme-chip .label { padding: 9px 11px; font-family: var(--mono); font-size: .72rem; color: var(--muted); } /* ---------- cta ---------- */ .cta { position: relative; border-radius: 22px; overflow: hidden; padding: 60px 44px; text-align: center; background: var(--surface); border: 1px solid var(--border-strong); } .cta::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 180deg, rgba(0, 255, 120, .18), rgba(0, 219, 255, .16), rgba(124, 92, 255, .14), rgba(0, 255, 120, .18)); filter: blur(60px); opacity: .28; } [data-theme="dark"] .cta::before { opacity: .55; } .cta>* { position: relative; } .bxsites-home .cta h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); } .cta p { color: var(--muted); max-width: 44ch; margin: 14px auto 0; line-height: 1.6; } .cta .hero-actions { justify-content: center; margin-top: 30px; } /* ---------- footer ---------- */ .bxh-footer { border-top: 1px solid var(--border); color: var(--muted-2); font-size: .84rem; } .footer-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; padding-block: 56px 36px; } @media (max-width: 880px) { .footer-top { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } } .footer-brand p { color: var(--muted); font-size: .86rem; margin-top: 12px; max-width: 28ch; line-height: 1.6; } .footer-brand .madeby { margin-top: 18px; color: var(--muted-2); font-size: .76rem; font-family: var(--mono); } .footer-col h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; } .footer-col a { display: block; color: var(--muted); font-size: .88rem; margin-bottom: 11px; transition: color .15s; } .footer-col a:hover { color: var(--text); } .social-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .social-row a { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--muted); } .social-row a:hover { color: var(--text); border-color: var(--brand2); } .social-row svg { width: 15px; height: 15px; } .footer-bottom { border-top: 1px solid var(--border); padding-block: 22px; } .footrow { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; align-items: center; } .footlinks { display: flex; gap: 22px; align-items: center; } .poweredby { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--mono); font-size: .78rem; padding-left: 20px; border-left: 1px solid var(--border); } .bxsites-home .poweredby b { color: var(--text); font-weight: 600; letter-spacing: .01em; } .poweredby:hover b { background: var(--grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent; }