Spaces:
Sleeping
Sleeping
| :root { | |
| --openenv-bg: #050608; | |
| --openenv-panel: #0c0e16; | |
| --openenv-panel-light: #101222; | |
| --openenv-border: rgba(255, 255, 255, 0.08); | |
| --openenv-muted: #c5c8d8; | |
| --openenv-bright: #f7f7fb; | |
| --openenv-card-hover: #15182a; | |
| --openenv-sidebar-width: 320px; | |
| } | |
| [data-md-color-scheme="slate"] { | |
| --md-default-bg-color: var(--openenv-bg); | |
| --md-default-fg-color: var(--openenv-bright); | |
| --md-default-fg-color--light: var(--openenv-bright); | |
| --md-typeset-color: var(--openenv-muted); | |
| --md-typeset-a-color: var(--openenv-bright); | |
| --md-primary-fg-color: var(--openenv-bright); | |
| --md-accent-fg-color: var(--openenv-bright); | |
| --md-primary-bg-color: var(--openenv-bg); | |
| --md-code-bg-color: #0f111f; | |
| --md-code-fg-color: var(--openenv-bright); | |
| --md-footer-bg-color: var(--openenv-bg); | |
| --md-footer-fg-color: var(--openenv-muted); | |
| --md-shadow-z1: 0 10px 40px rgba(0, 0, 0, 0.45); | |
| } | |
| body { | |
| background-color: var(--openenv-bg); | |
| font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| color: var(--openenv-bright); | |
| } | |
| .md-header { | |
| background: var(--openenv-bg); | |
| border-bottom: 1px solid var(--openenv-border); | |
| box-shadow: none; | |
| } | |
| .md-header__title { | |
| font-weight: 600; | |
| letter-spacing: 0.02em; | |
| } | |
| .md-tabs { | |
| background: var(--openenv-bg); | |
| border-bottom: 1px solid var(--openenv-border); | |
| } | |
| .md-main__inner, | |
| .md-content, | |
| .md-content__inner, | |
| .md-typeset { | |
| background: var(--openenv-bg); | |
| } | |
| .md-typeset h1, | |
| .md-typeset h2, | |
| .md-typeset h3, | |
| .md-typeset h4 { | |
| color: var(--openenv-bright); | |
| font-weight: 600; | |
| } | |
| .md-typeset a { | |
| text-decoration: none; | |
| border-bottom: 1px solid transparent; | |
| transition: border-color 0.2s ease, color 0.2s ease; | |
| } | |
| .md-typeset a:hover { | |
| border-color: var(--openenv-bright); | |
| } | |
| .md-sidebar--primary, | |
| .md-sidebar--secondary, | |
| .md-sidebar__scrollwrap, | |
| .md-sidebar__inner, | |
| .md-nav--primary { | |
| border-right: none; | |
| box-shadow: none; | |
| } | |
| .md-nav__title { | |
| display: none; | |
| } | |
| .md-nav__title--site { | |
| display: none; | |
| } | |
| .md-nav__title, | |
| .md-nav__link, | |
| .md-nav__item .md-nav__link { | |
| color: var(--openenv-muted); | |
| } | |
| .md-nav__item--nested > .md-nav__link { | |
| font-weight: 600; | |
| color: var(--openenv-bright); | |
| } | |
| .md-nav__item .md-nav__link svg { | |
| stroke: var(--openenv-muted); | |
| } | |
| .md-nav__item--nested > .md-nav__link { | |
| position: relative; | |
| padding-right: 2.5rem; | |
| } | |
| .md-nav__item--nested > .md-nav__link .md-nav__icon { | |
| display: none; | |
| } | |
| .md-nav__item--nested > .md-nav__link::after { | |
| content: ""; | |
| position: absolute; | |
| top: 50%; | |
| right: 0.85rem; | |
| width: 0.55rem; | |
| height: 0.55rem; | |
| /* border-right: 2px solid var(--openenv-muted); | |
| border-bottom: 2px solid var(--openenv-muted); */ | |
| transform: translateY(-60%) rotate(-45deg); | |
| transition: border-color 0.2s ease, transform 0.2s ease; | |
| } | |
| .md-nav__item--nested > input:checked + .md-nav__link::after { | |
| transform: translateY(-40%) rotate(45deg); | |
| } | |
| .md-nav__item--nested > .md-nav__link:hover::after, | |
| .md-nav__item--active.md-nav__item--nested > .md-nav__link::after { | |
| border-color: var(--openenv-bright); | |
| } | |
| .md-header__title { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.35rem; | |
| } | |
| .md-header__title .md-header__topic:first-child span { | |
| color: var(--openenv-muted); | |
| } | |
| .hero { | |
| display: grid; | |
| gap: 1.5rem; | |
| padding: clamp(2rem, 4vw, 3.5rem); | |
| border-radius: 0.25rem; | |
| background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 45%), | |
| linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(7, 9, 15, 0.65)); | |
| border: 1px solid var(--openenv-border); | |
| margin-bottom: clamp(2rem, 4vw, 3.5rem); | |
| } | |
| .hero__title { | |
| font-size: clamp(2rem, 3vw, 2.8rem); | |
| margin: 0; | |
| } | |
| .hero__subtitle { | |
| max-width: 48ch; | |
| color: var(--openenv-muted); | |
| margin: 0; | |
| } | |
| .hero__actions { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .hero__button { | |
| border-radius: 999px; | |
| padding: 0.65rem 1.75rem; | |
| border: 1px solid var(--openenv-border); | |
| color: var(--openenv-bright); | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| transition: background 0.2s ease, transform 0.2s ease; | |
| } | |
| .hero__button--primary { | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| .hero__button:hover { | |
| background: var(--openenv-card-hover); | |
| transform: translateY(-2px); | |
| } | |
| .md-typeset code { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 0.35rem; | |
| padding: 0.15rem 0.4rem; | |
| } | |
| .md-typeset pre { | |
| border-radius: 0.8rem; | |
| border: 1px solid var(--openenv-border); | |
| } | |
| .md-button, | |
| .md-typeset .md-button { | |
| border: 1px solid var(--openenv-border); | |
| border-radius: 999px; | |
| color: var(--openenv-bright); | |
| background: transparent; | |
| text-transform: none; | |
| padding: 0.5rem 1.25rem; | |
| transition: background 0.2s ease, transform 0.2s ease; | |
| } | |
| .md-button:hover, | |
| .md-typeset .md-button:hover { | |
| background: var(--openenv-card-hover); | |
| transform: translateY(-1px); | |
| } | |
| .md-footer { | |
| border-top: 1px solid var(--openenv-border); | |
| } | |
| .md-search__form { | |
| background: rgba(255, 255, 255, 0.08); | |
| width: 100%; | |
| float: right; | |
| } | |
| /* Environment grid */ | |
| .environment-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: clamp(1rem, 3vw, 1.75rem); | |
| margin: 2rem 0 3.5rem; | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .environment-card { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.6rem; | |
| background: var(--openenv-panel); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| min-height: 190px; | |
| overflow: hidden; | |
| } | |
| .environment-card__name { | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| color: var(--openenv-bright); | |
| } | |
| .environment-card__tag { | |
| font-size: 0.85rem; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--openenv-muted); | |
| } | |
| .environment-card__description { | |
| color: var(--openenv-muted); | |
| line-height: 1.4; | |
| margin: 0; | |
| } | |
| .environment-card__body { | |
| position: relative; | |
| z-index: 2; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .environment-card__links { | |
| position: relative; | |
| z-index: 3; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| margin-top: auto; | |
| } | |
| .environment-card__icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 2.1rem; | |
| height: 2.1rem; | |
| border-radius: 0.6rem; | |
| border: 1px solid var(--openenv-border); | |
| background: rgba(255, 255, 255, 0.02); | |
| transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; | |
| } | |
| .environment-card__icon svg { | |
| width: 1.1rem; | |
| height: 1.1rem; | |
| color: var(--openenv-muted); | |
| } | |
| .environment-card__icon--hf img { | |
| width: 1.25rem; | |
| height: auto; | |
| } | |
| .environment-card__icon:hover { | |
| border-color: rgba(255, 255, 255, 0.35); | |
| background: rgba(255, 255, 255, 0.08); | |
| transform: translateY(-1px); | |
| } | |