@charset "utf-8";
/**
 * 前台首页（框架介绍页）样式
 * 修改人：Leek  时间：2026-10-18 15:10
 * 说明：首页已从 CMS 文章门户改为框架介绍落地页，本文件为该页专用样式，
 *      不依赖 basis.css / app.css，避免影响前台其它页面。
 *      主题色与后台 theme-accent.css 保持一致，靠 body[data-theme] 覆盖变量。
 */

/* ============ 变量 ============ */
:root,
body[data-theme="blue"],
body[data-theme="white"],
body[data-theme="default"],
body[data-theme="classic-blue"],
body[data-theme="header-blue"] {
    --ip-primary: #2f6fed;
    --ip-primary-rgb: 47, 111, 237;
    --ip-primary-light: #5b9cff;
}

body[data-theme="cyan"] {
    --ip-primary: #0ea5a4;
    --ip-primary-rgb: 14, 165, 164;
    --ip-primary-light: #3fc9c7;
}

body[data-theme="green"],
body[data-theme="classic-green"],
body[data-theme="header-green"] {
    --ip-primary: #16a34a;
    --ip-primary-rgb: 22, 163, 74;
    --ip-primary-light: #4ac47a;
}

body[data-theme="purple"] {
    --ip-primary: #7c5cff;
    --ip-primary-rgb: 124, 92, 255;
    --ip-primary-light: #9d86ff;
}

body[data-theme="orange"] {
    --ip-primary: #f97316;
    --ip-primary-rgb: 249, 115, 22;
    --ip-primary-light: #ffa15c;
}

body[data-theme="red"],
body[data-theme="classic-red"],
body[data-theme="header-red"] {
    --ip-primary: #e0554f;
    --ip-primary-rgb: 224, 85, 79;
    --ip-primary-light: #f0807b;
}

body[data-theme="coffee"] {
    --ip-primary: #a48566;
    --ip-primary-rgb: 164, 133, 102;
    --ip-primary-light: #c0a58c;
}

body[data-theme="graphite"] {
    --ip-primary: #3b465c;
    --ip-primary-rgb: 59, 70, 92;
    --ip-primary-light: #62708c;
}

:root {
    --ip-text: #16202f;
    --ip-text-2: #4a5769;
    --ip-muted: #7b8698;
    --ip-line: #e8eef6;
    --ip-soft: #f7f9fd;
    --ip-radius: 14px;
    --ip-wrap: 1120px;
}

/* ============ 基础 ============ */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    background-color: #ffffff;
    color: var(--ip-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}

a:hover {
    color: var(--ip-primary);
}

ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
p {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.ip-wrap {
    width: 100%;
    max-width: var(--ip-wrap);
    margin: 0 auto;
    padding: 0 32px;
}

/* ============ 按钮 ============ */
.ip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid var(--ip-line);
    border-radius: 10px;
    background-color: #ffffff;
    color: var(--ip-text);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all .18s ease;
}

.ip-btn:hover {
    border-color: rgba(var(--ip-primary-rgb), .45);
    color: var(--ip-primary);
    transform: translateY(-1px);
}

.ip-btn--primary {
    border-color: transparent;
    background-image: linear-gradient(135deg, var(--ip-primary-light) 0%, var(--ip-primary) 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px -14px rgba(var(--ip-primary-rgb), .9);
}

.ip-btn--primary:hover {
    color: #ffffff;
    box-shadow: 0 16px 28px -14px rgba(var(--ip-primary-rgb), .95);
}

.ip-btn--sm {
    height: 34px;
    padding: 0 15px;
    border-radius: 9px;
    font-size: 13px;
}

/* ============ 顶部导航 ============ */
.ip-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--ip-line);
    background-color: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.ip-nav > .ip-wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 64px;
}

.ip-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--ip-text);
}

.ip-brand:hover {
    color: var(--ip-text);
}

.ip-brand__mark {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background-image: linear-gradient(135deg, var(--ip-primary-light) 0%, var(--ip-primary) 100%);
    box-shadow: 0 8px 16px -9px rgba(var(--ip-primary-rgb), .95);
    flex: none;
}

.ip-brand__mark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 6px;
    height: 10px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    border-radius: 1px;
    transform: rotate(42deg) skew(-6deg, -6deg);
}

.ip-nav__menu {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ip-nav__menu > li > a {
    display: block;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 14px;
    color: var(--ip-text-2);
}

.ip-nav__menu > li > a:hover {
    background-color: rgba(var(--ip-primary-rgb), .06);
    color: var(--ip-primary);
}

.ip-nav__menu > li.active > a {
    color: var(--ip-primary);
    font-weight: 600;
}

.ip-nav__action {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.ip-nav__link {
    font-size: 14px;
    color: var(--ip-text-2);
}

.ip-nav__divider {
    color: #dbe3ee;
}

/* 带子菜单的一级项 */
.ip-nav__menu > li {
    position: relative;
}

.ip-nav__menu > li.has-child > a .layui-icon {
    margin-left: 4px;
    font-size: 11px;
    color: var(--ip-muted);
}

.ip-nav__sub {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 148px;
    padding: 6px;
    border: 1px solid var(--ip-line);
    border-radius: 11px;
    background-color: #ffffff;
    box-shadow: 0 20px 40px -26px rgba(16, 24, 40, .6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all .16s ease;
}

.ip-nav__menu > li.has-child:hover .ip-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ip-nav__sub a {
    display: block;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--ip-text-2);
}

.ip-nav__sub a:hover {
    background-color: rgba(var(--ip-primary-rgb), .06);
    color: var(--ip-primary);
}

/* ============ 首屏 ============ */
.ip-hero {
    position: relative;
    padding: 92px 0 0;
    overflow: hidden;
    background-image: radial-gradient(900px 380px at 50% -140px, rgba(var(--ip-primary-rgb), .10), rgba(255, 255, 255, 0) 72%);
}

.ip-hero > .ip-wrap {
    max-width: 880px;
    text-align: center;
}

.ip-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 13px;
    border: 1px solid rgba(var(--ip-primary-rgb), .16);
    border-radius: 999px;
    background-color: rgba(var(--ip-primary-rgb), .07);
    color: var(--ip-primary);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
}

.ip-hero__badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--ip-primary);
}

.ip-hero h1 {
    margin-top: 24px;
    font-size: 46px;
    line-height: 1.24;
    font-weight: 800;
    letter-spacing: -.6px;
}

.ip-hero h1 em {
    font-style: normal;
    color: var(--ip-primary);
}

.ip-hero__lead {
    margin: 18px auto 0;
    max-width: 620px;
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--ip-text-2);
}

.ip-hero__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.ip-hero__meta {
    display: flex;
    max-width: 760px;
    margin: 56px auto 0;
    padding: 26px 0;
    border-top: 1px solid var(--ip-line);
}

.ip-hero__meta li {
    position: relative;
    flex: 1;
    text-align: center;
}

.ip-hero__meta li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 26px;
    margin-top: -13px;
    background-color: var(--ip-line);
}

.ip-hero__meta b {
    display: block;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--ip-text);
}

.ip-hero__meta span {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--ip-muted);
}

/* ============ 通用区块 ============ */
.ip-section {
    padding: 78px 0;
}

.ip-section--soft {
    border-top: 1px solid var(--ip-line);
    border-bottom: 1px solid var(--ip-line);
    background-color: var(--ip-soft);
}

.ip-head {
    max-width: 620px;
    margin: 0 auto 42px;
    text-align: center;
}

.ip-head h2 {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.ip-head p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.85;
    color: var(--ip-text-2);
}

/* ============ 能力卡片 ============ */
.ip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.ip-card {
    padding: 26px 24px 24px;
    border: 1px solid var(--ip-line);
    border-radius: var(--ip-radius);
    background-color: #ffffff;
    transition: all .2s ease;
}

.ip-card:hover {
    border-color: rgba(var(--ip-primary-rgb), .32);
    box-shadow: 0 20px 42px -30px rgba(16, 24, 40, .6);
    transform: translateY(-2px);
}

.ip-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background-color: rgba(var(--ip-primary-rgb), .08);
    color: var(--ip-primary);
    font-size: 20px;
}

.ip-card h3 {
    margin-top: 16px;
    font-size: 15.5px;
    font-weight: 700;
}

.ip-card p {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ip-text-2);
}

/* ============ 双栏：技术栈 / 目录结构 ============ */
.ip-split {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 40px;
    align-items: start;
}

/* 防止代码块最小内容宽度撑破 grid 列，导致移动端横向滚动 */
.ip-split > * {
    min-width: 0;
}

.ip-sub {
    font-size: 14px;
    font-weight: 700;
    color: var(--ip-text);
}

.ip-sub + p {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ip-text-2);
}

.ip-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.ip-stack li {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 15px;
    border: 1px solid var(--ip-line);
    border-radius: 10px;
    background-color: #ffffff;
    font-size: 13.5px;
    color: var(--ip-text-2);
}

.ip-stack li b {
    margin-right: 6px;
    font-weight: 600;
    color: var(--ip-text);
}

.ip-stack li em {
    margin-left: 6px;
    font-style: normal;
    font-size: 12px;
    color: var(--ip-muted);
}

/* 运行环境清单 */
.ip-checks {
    margin-top: 16px;
}

.ip-checks li {
    position: relative;
    padding: 0 0 10px 24px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ip-text-2);
}

.ip-checks li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 5px;
    height: 9px;
    border-right: 1.6px solid var(--ip-primary);
    border-bottom: 1.6px solid var(--ip-primary);
    border-radius: 1px;
    transform: rotate(42deg);
}

/* 行内代码 */
.ip-split p code {
    padding: 1px 6px;
    border: 1px solid var(--ip-line);
    border-radius: 6px;
    background-color: #f5f8fd;
    color: var(--ip-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* 区块底部注释 */
.ip-note {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--ip-line);
    font-size: 13px;
    line-height: 1.85;
    text-align: center;
    color: var(--ip-muted);
}

.ip-note code {
    padding: 1px 6px;
    border: 1px solid var(--ip-line);
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--ip-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.ip-panel {
    overflow: hidden;
    border: 1px solid var(--ip-line);
    border-radius: var(--ip-radius);
    background-color: #ffffff;
}

.ip-panel__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--ip-line);
    background-color: #fbfcfe;
    font-size: 12.5px;
    color: var(--ip-muted);
}

.ip-panel__head i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(var(--ip-primary-rgb), .28);
}

.ip-panel__head i:nth-child(2) {
    background-color: #e6ebf3;
}

.ip-panel__head i:nth-child(3) {
    background-color: #eef2f8;
}

.ip-code {
    margin: 0;
    padding: 18px 20px 20px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.95;
    color: #33415c;
    white-space: pre;
    tab-size: 2;
}

.ip-code em {
    font-style: normal;
    color: var(--ip-muted);
}

.ip-code b {
    font-weight: 600;
    color: var(--ip-primary);
}

/* ============ 快速开始 ============ */
.ip-steps {
    counter-reset: ip-step;
    margin-top: 26px;
}

.ip-steps > li {
    position: relative;
    padding: 0 0 24px 44px;
}

.ip-steps > li:last-child {
    padding-bottom: 0;
}

.ip-steps > li::before {
    counter-increment: ip-step;
    content: counter(ip-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(var(--ip-primary-rgb), .10);
    color: var(--ip-primary);
    font-size: 12.5px;
    font-weight: 700;
}

.ip-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 12.5px;
    top: 33px;
    bottom: 8px;
    width: 1px;
    background-color: var(--ip-line);
}

.ip-steps h4 {
    padding-top: 3px;
    font-size: 14.5px;
    font-weight: 600;
}

.ip-steps p {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--ip-text-2);
}

.ip-steps code {
    padding: 1px 6px;
    border: 1px solid var(--ip-line);
    border-radius: 6px;
    background-color: #f5f8fd;
    color: var(--ip-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* ============ 页脚 ============ */
.ip-footer {
    padding: 28px 0;
    border-top: 1px solid var(--ip-line);
    background-color: #ffffff;
}

.ip-footer > .ip-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.ip-footer p,
.ip-footer a {
    font-size: 13px;
    color: var(--ip-muted);
}

.ip-footer a:hover {
    color: var(--ip-primary);
}

/* ============ 响应式 ============ */
@media (max-width: 1024px) {
    .ip-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ip-split {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .ip-hero h1 {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    .ip-wrap {
        padding: 0 20px;
    }

    .ip-nav > .ip-wrap {
        height: 58px;
        gap: 14px;
    }

    .ip-nav__menu,
    .ip-nav__action .ip-nav__link,
    .ip-nav__action .ip-nav__divider {
        display: none;
    }

    .ip-hero {
        padding-top: 62px;
    }

    .ip-hero h1 {
        font-size: 29px;
        letter-spacing: -.2px;
    }

    .ip-hero__lead {
        font-size: 14px;
    }

    .ip-hero__lead br {
        display: none;
    }

    .ip-hero__meta {
        flex-wrap: wrap;
        row-gap: 22px;
        margin-top: 40px;
    }

    .ip-hero__meta li {
        flex: 0 0 50%;
    }

    .ip-hero__meta li + li::before {
        display: none;
    }

    .ip-section {
        padding: 54px 0;
    }

    .ip-grid {
        grid-template-columns: 1fr;
    }

    .ip-head h2 {
        font-size: 22px;
    }
}