mint/api-v13/resources/css/home.css

/* resources/css/home.css
   WikiPāli 首页（next.wikipali.org）样式入口。
   只服务于首页：顶部导航 + 品牌 hero + 2×2 分流卡片。
   平面、哑光、克制，无渐变 / 发光 / 大面积投影。
*/

/* 1. Tabler（Bootstrap 5 底座）+ Tabler Icons */
@import '@tabler/core/dist/css/tabler.min.css';
@import '@tabler/icons-webfont/dist/tabler-icons.min.css';

/* 2. 设计令牌 */
:root {
    --home-bg: #F6F1E7;
    --home-text: #2B2318;
    --home-text-secondary: #63594A;
    --home-text-muted: #6F6555;
    --home-border: #E4DCCD;
    --home-card-bg: #FFFDF9;
    --home-brand: #C8860A;
    --home-brand-dark: #9A6508;
    --home-cta-hover-text: #F6F1E7;
}

/* 3. 页面底色 */
.home-page {
    margin: 0;
    background: var(--home-bg);
    color: var(--home-text);
}

.home-page .page {
    background: var(--home-bg);
}

.home {
    position: relative;
}

/* 4. 顶部导航：浅底、深色 logo / 文案；内容限宽与下方一致 */
.home-nav {
    color: var(--home-text);
}

.home-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
}

.home-nav__brand {
    display: inline-flex;
    align-items: center;
    color: var(--home-text);
}

.home-nav__logo {
    display: block;
    height: 64px;
    width: auto;
}

.home-nav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* “旧版入口”显著按钮：品牌金填充 */
.home-nav__legacy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    background: var(--home-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.home-nav__legacy:hover,
.home-nav__legacy:focus {
    background: var(--home-brand-dark);
    color: #fff;
    text-decoration: none;
}

.home-nav__legacy:focus-visible {
    outline: 2px solid var(--home-text);
    outline-offset: 2px;
}

/* 语言切换在浅色导航下保持深字、深色下拉 */
.home-nav__lang .language-link,
.home-nav__lang .language-link:hover {
    color: var(--home-text);
}

@media (max-width: 768px) {
    .home-nav__inner {
        padding: 0.75rem 1rem;
    }

    .home-nav__logo {
        height: 52px;
    }

    .home-nav__actions {
        gap: 0.75rem;
    }

    .home-nav__legacy {
        min-height: 32px;
        padding: 0.5rem 1rem;
    }

    /* 组件移动端默认展开为静态列表，首页仍保持下拉 */
    .home-nav__lang .language-switcher {
        width: auto;
    }

    .home-nav__lang .language-dropdown {
        position: absolute;
        right: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        background: rgba(0, 0, 0, 0.85);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 0.5rem;
        padding: 0.5rem 0;
    }

    .home-nav__lang .language-switcher:hover .language-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* 5. 品牌 Hero */
.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem 3rem;
}

.home-hero__title {
    margin: 0 0 0.75rem;
    color: var(--home-text);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.home-hero__lead {
    margin: 0;
    max-width: 36rem;
    color: var(--home-text-secondary);
    font-size: clamp(0.95rem, 1.6vw, 1.125rem);
    line-height: 1.5;
}

/* 6. 2×2 卡片网格 */
.home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

/* 7. 卡片：浅底、细边框、圆角，克制投影仅用于 hover */
.home-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--home-card-bg);
    border: 1px solid var(--home-border);
    border-radius: 12px;
    color: var(--home-text);
    text-decoration: none;
}

.home-card--link {
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.home-card--link:hover,
.home-card--link:focus-visible {
    border-color: var(--home-brand);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(43, 35, 24, 0.08);
    color: var(--home-text);
    text-decoration: none;
}

.home-card--link:focus-visible {
    outline: 2px solid var(--home-brand);
    outline-offset: 3px;
}

/* 图标：卡片 tint 的低饱和底色 + 同色图标 */
.home-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--card-tint) 12%, #fff);
    color: var(--card-tint);
    font-size: 22px;
    line-height: 1;
}

.home-card__eyebrow {
    margin: 0;
    color: var(--home-text-muted);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-card__title {
    margin: 0;
    color: var(--home-text);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.home-card__lead {
    margin: 0;
    flex: 1;
    color: var(--home-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.home-card__cta,
.home-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 14px;
    line-height: 1;
}

.home-card__cta {
    color: var(--home-brand);
    font-weight: 600;
}

.home-card__cta .ti {
    transition: transform 0.2s ease;
}

.home-card--link:hover .home-card__cta .ti {
    transform: translateX(3px);
}

.home-card__badge {
    color: var(--home-text-muted);
}

/* 8. 响应式：<768px 单列 */
@media (max-width: 767.98px) {
    .home-hero {
        padding: 3rem 1.5rem 2rem;
    }

    .home-grid {
        grid-template-columns: 1fr;
        padding-bottom: 3rem;
    }
}

/* 9. Footer：备案号（ICP / 公安备案） */
.home-footer {
    border-top: 1px solid var(--home-border);
    color: var(--home-text-muted);
}

.home-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    max-width: 64rem;
    margin: 0 auto;
    padding: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.home-footer__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.home-footer__icon {
    display: block;
    width: 20px;
    height: 20px;
}

.home-footer a {
    color: var(--home-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.home-footer a:hover {
    color: var(--home-text);
    text-decoration: underline;
}

/* 10. 尊重减少动态偏好：关闭过渡 */
@media (prefers-reduced-motion: reduce) {
    .home-card--link,
    .home-card__cta .ti {
        transition: none;
    }
}