/* Kylin Website - Sci-Fi Theme (colour variables live in theme.css) */ :root { --sci-body-font: Roboto, sans-serif; --sci-heading-font: Roboto, sans-serif; /* System monospace stack: no network request, and it is what MDB's `pre`/`code` pick up via --mdb-font-monospace */ --sci-code-font: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'Liberation Mono', 'DejaVu Sans Mono', monospace; --sci-zh-font: Roboto, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif; --mdb-font-monospace: var(--sci-code-font); --sci-nav-offset: 34px; } /* ===== Global ===== */ html { scroll-padding-top: 44px; } body { font-family: var(--sci-body-font); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: var(--sci-bg); color: var(--sci-text); background-image: repeating-linear-gradient(0deg, transparent, transparent 59px, var(--sci-grid-line) 59px, var(--sci-grid-line) 60px), repeating-linear-gradient(90deg, transparent, transparent 59px, var(--sci-grid-line) 59px, var(--sci-grid-line) 60px); background-size: 60px 60px; } /* Scroll lock while the full-screen mobile menu is open (position: fixed is required for iOS Safari; the vertical offset is set from JS so the page does not jump). */ body.mobile-nav-open { position: fixed; width: 100%; overflow: hidden; } main { flex: 1; } img { max-width: 100%; height: auto; } .text-muted { color: var(--sci-text-muted) !important; } .text-dark { color: var(--sci-text) !important; } strong { color: var(--sci-heading); } a { color: var(--sci-accent); } a:hover { color: var(--sci-accent); text-shadow: 0 0 6px rgba(var(--sci-accent-rgb), 0.4); } a, button { -webkit-tap-highlight-color: rgba(var(--sci-accent-rgb), 0.14); } code { color: var(--sci-accent); } h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--sci-heading-font); } html[lang="zh-CN"] body, html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] h4, html[lang="zh-CN"] h5, html[lang="zh-CN"] h6, html[lang="zh-CN"] .navbar .nav-link, html[lang="zh-CN"] .navbar-brand, html[lang="zh-CN"] .btn, html[lang="zh-CN"] .content-card, html[lang="zh-CN"] .content-card-highlight, html[lang="zh-CN"] .feature-card, html[lang="zh-CN"] .feature-card p, html[lang="zh-CN"] .section-subtitle, html[lang="zh-CN"] .tech-list li, html[lang="zh-CN"] .year-block, html[lang="zh-CN"] footer { font-family: var(--sci-zh-font); } /* ===== Header / Navbar ===== The

(not the navbar) is the sticky element: it is a direct child of , so it stays pinned for the whole document instead of scrolling away with the hero. */ #site-header { position: sticky; top: 0; z-index: 2000; } .navbar.navbar-dark { background: var(--sci-navbar-bg) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--sci-navbar-border); transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .navbar.navbar-scrolled { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); } .navbar .container-fluid { padding: 0.15rem 1rem; gap: 0.75rem; } .navbar-brand strong { font-size: 1.5rem; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 8px rgba(var(--sci-accent-rgb), 0.5); } .navbar .nav-link, .theme-toggle-btn, .lang-toggle-btn, .navbar-toggler, .btn { outline: none; } .navbar .nav-link:focus-visible, .theme-toggle-btn:focus-visible, .lang-toggle-btn:focus-visible, .navbar-toggler:focus-visible, .btn:focus-visible { box-shadow: 0 0 0 0.2rem rgba(var(--sci-accent-rgb), 0.18); } .navbar .nav-link { color: var(--sci-heading) !important; border-radius: 10px; white-space: nowrap; transition: color 0.2s, text-shadow 0.2s; } .navbar .nav-link:not(.navbar-brand) { font-size: 1.35rem; font-weight: 500; } .navbar .nav-link:hover, .navbar .nav-item.active .nav-link { text-shadow: 0 0 8px rgba(var(--sci-accent-rgb), 0.6); } .navbar-nav { gap: 1.2rem; } .navbar-toggler { display: none; } .nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .nav-actions .theme-toggle-btn, .nav-actions .lang-toggle-btn { margin-left: 0; } /* Expanded navbar: never let the toolbar wrap onto a second line */ @media (min-width: 992px) { .navbar .container-fluid { flex-wrap: nowrap; } } /* Between the expand breakpoint and 1200px the full-size links do not fit on one line */ @media (min-width: 992px) and (max-width: 1199.98px) { .navbar .nav-link:not(.navbar-brand) { font-size: 1.05rem; } .navbar-nav { gap: 0.4rem; } .navbar-brand strong { font-size: 1.2rem; letter-spacing: 2px; } .nav-actions .theme-toggle-btn, .nav-actions .lang-toggle-btn { width: 38px; height: 38px; } } /* ===== Hero (full, index page) and compact banner (sub-pages) ===== */ .hero { position: relative; } .hero .mask { position: relative; height: 100%; background: var(--sci-hero-mask) !important; } .hero .mask::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(var(--sci-accent-rgb), 0.08) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; animation: grid-drift 20s linear infinite; } @keyframes grid-drift { from { background-position: 0 0; } to { background-position: 24px 24px; } } .hero h1 { text-shadow: 0 0 20px rgba(var(--sci-accent-rgb), 0.5); } .hero-subtitle { color: rgba(255, 255, 255, 0.7); letter-spacing: 2px; text-transform: uppercase; font-size: 0.95rem; font-weight: 500; line-height: 1.2; } .hero-content { max-width: 1100px; padding: 0 1rem; } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .hero-actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; margin: 0; min-width: 220px; } html[lang="zh-CN"] .hero-actions .btn { font-size: 1.15em; line-height: 1; } .hero-full { height: auto; min-height: min(100svh, 820px); } .hero-full .mask, .hero-full .container { min-height: inherit; } .hero-full .container { padding-top: 96px; padding-bottom: 56px; } .hero-compact-inner { padding-top: 2.5rem; padding-bottom: 2rem; } .hero-eyebrow { color: rgba(255, 255, 255, 0.7); font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.4rem; } .hero-page-title { color: #fff; font-size: 2rem; font-weight: 700; margin: 0; text-shadow: 0 0 20px rgba(var(--sci-accent-rgb), 0.5); } @media (min-width: 992px) { .hero { /* Tuck the hero under the translucent navbar */ margin-top: calc(-1 * var(--sci-nav-offset)); } .hero-full { height: 50vh; min-height: 380px; } .hero-full .container { padding-top: 0; padding-bottom: 0; } .hero-compact-inner { padding-top: calc(var(--sci-nav-offset) + 3rem); padding-bottom: 2.75rem; } .hero-page-title { font-size: 2.25rem; } } /* ===== Buttons ===== */ .btn-outline-light { border-color: var(--sci-accent); color: var(--sci-accent); transition: all 0.3s ease; } .btn-outline-light:hover { background-color: var(--sci-accent); color: var(--sci-bg); box-shadow: 0 0 18px rgba(var(--sci-accent-rgb), 0.45); } /* ===== Section layout ===== */ .section-block { padding: 60px 0; background-color: var(--sci-bg); } .section-alt { background-color: var(--sci-bg-light); } .section-title { font-size: 1.5rem; font-weight: 700; padding-left: 16px; border-left: 4px solid var(--sci-accent); margin-bottom: 2rem; color: var(--sci-heading); text-shadow: 0 0 10px rgba(var(--sci-accent-rgb), 0.3); } .section-title-center { font-size: 1.5rem; font-weight: 700; margin-bottom: 2.5rem; position: relative; display: inline-block; color: var(--sci-heading); text-shadow: 0 0 10px rgba(var(--sci-accent-rgb), 0.3); } .section-title-center::after { content: ''; display: block; width: 50px; height: 3px; background: var(--sci-accent); margin: 10px auto 0; border-radius: 2px; box-shadow: 0 0 8px rgba(var(--sci-accent-rgb), 0.6); animation: glow-pulse 2.5s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(var(--sci-accent-rgb), 0.4); } 50% { box-shadow: 0 0 16px rgba(var(--sci-accent-rgb), 0.8); } } .section-subtitle { color: var(--sci-text-muted); font-size: 0.95rem; margin-top: -1.5rem; margin-bottom: 2.5rem; letter-spacing: 0.5px; } /* ===== Year block (publications / news) ===== */ .year-block { border-left: 3px solid var(--sci-accent); padding: 20px 24px; margin-bottom: 28px; background: rgba(var(--sci-accent-rgb), 0.03); border-radius: 0 8px 8px 0; } .year-block h3 { font-size: 1.25rem; font-weight: 700; color: var(--sci-accent); margin-bottom: 12px; text-shadow: 0 0 8px rgba(var(--sci-accent-rgb), 0.3); } .year-block ul { margin-bottom: 0; } .year-block li { line-height: 1.75; margin-bottom: 0.45rem; } .year-block li:last-child { margin-bottom: 0; } /* ===== Content cards (download / about / manual) ===== */ .content-card { background: var(--sci-glass); border: 1px solid var(--sci-glass-border); border-radius: 12px; padding: 36px; box-shadow: 0 4px 16px var(--sci-card-shadow); margin-bottom: 28px; } .content-card-highlight { background: var(--sci-highlight-bg); border: 1px solid var(--sci-highlight-border); border-radius: 12px; padding: 36px; box-shadow: 0 0 20px rgba(var(--sci-accent-rgb), 0.08), 0 4px 16px var(--sci-card-shadow); margin-bottom: 28px; } .content-card ul, .content-card-highlight ul { padding-left: 1.15rem; margin-bottom: 0; } .content-card li, .content-card-highlight li { line-height: 1.75; margin-bottom: 0.5rem; } .content-card li:last-child, .content-card-highlight li:last-child { margin-bottom: 0; } .content-card img, .content-card picture { display: block; width: 100%; } /* ===== Footer ===== */ footer { background-color: var(--sci-footer-bg) !important; border-top: 0.5px solid var(--sci-accent); color: var(--sci-text-muted); } footer .text-center.p-3 { background-color: rgba(var(--sci-accent-rgb), 0.05) !important; } footer a { color: var(--sci-accent) !important; } /* ===== Scrollbar (Webkit) ===== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--sci-bg); } ::-webkit-scrollbar-thumb { background: var(--sci-scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--sci-scrollbar-hover); } /* ===== Feature grid (6-card layout) ===== */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature-card { background: var(--sci-glass); border: 1px solid var(--sci-glass-border); border-radius: 10px; padding: 28px 24px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--sci-accent); opacity: 0; transition: opacity 0.3s ease; } .feature-card:hover { transform: translateY(-4px); border-color: rgba(var(--sci-accent-rgb), 0.3); box-shadow: 0 0 20px rgba(var(--sci-accent-rgb), 0.15), 0 8px 28px var(--sci-card-shadow); } .feature-card:hover::before { opacity: 1; } .feature-card-icon { width: 52px; height: 52px; margin-bottom: 14px; display: block; } .feature-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--sci-heading); margin-bottom: 10px; letter-spacing: 0.5px; } .feature-card p { color: var(--sci-text-muted); font-size: 0.88rem; line-height: 1.6; margin-bottom: 12px; } .feature-tag { display: inline-block; padding: 2px 10px; font-size: 0.75rem; font-family: var(--sci-code-font); font-weight: 600; color: var(--sci-accent); background: rgba(var(--sci-accent-rgb), 0.08); border: 1px solid rgba(var(--sci-accent-rgb), 0.2); border-radius: 4px; margin: 2px 3px 2px 0; letter-spacing: 0.5px; white-space: nowrap; } /* ===== Code panel ===== */ .code-panel { background: var(--sci-code-bg); border: 1px solid var(--sci-code-border); border-radius: 10px; padding: 0; margin-bottom: 24px; overflow: hidden; font-family: var(--sci-code-font); position: relative; } .code-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--sci-accent); border-radius: 10px 0 0 10px; z-index: 1; } .code-panel-label { display: block; padding: 8px 16px; font-size: 0.78rem; font-weight: 600; color: var(--sci-accent); background: rgba(var(--sci-accent-rgb), 0.06); border-bottom: 1px solid rgba(var(--sci-accent-rgb), 0.1); letter-spacing: 1px; font-family: var(--sci-code-font); } .code-panel pre { margin: 0; padding: 16px 20px; font-family: var(--sci-code-font); font-size: 0.82rem; line-height: 1.7; color: var(--sci-text); background: transparent; overflow-x: auto; white-space: pre; scrollbar-width: thin; } .code-panel pre .code-keyword { color: var(--sci-accent); } .code-panel pre .code-value { color: #a8d8a8; } .code-panel pre .code-comment { color: #7f90aa; font-style: italic; /* Comments are prose: let them wrap instead of forcing a horizontal scroll on phones */ white-space: pre-wrap; } /* ===== Tech list ===== */ .tech-list { list-style: none; padding: 0; margin: 0; } .tech-list li { padding: 8px 0; border-bottom: 1px solid rgba(var(--sci-accent-rgb), 0.06); color: var(--sci-text); font-size: 0.92rem; display: flex; align-items: baseline; gap: 10px; } .tech-list li:last-child { border-bottom: none; } .tech-list li::before { content: '\25B8'; color: var(--sci-accent); font-size: 0.7rem; flex-shrink: 0; } /* ===== Quick Start ===== */ .quickstart-desc { margin-bottom: 2rem; } .quickstart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .about-logo { max-height: 450px; width: auto; } /* ===== Kylin-View page ===== */ .kv-logo-placeholder { color: var(--sci-accent); } .kv-screenshot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .kv-screenshot-placeholder { background: var(--sci-glass); border: 1px dashed rgba(var(--sci-accent-rgb), 0.2); border-radius: 10px; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--sci-text-muted); font-size: 0.85rem; } .kv-feature-grid { margin-top: 2rem; } .kv-gallery-desc { margin-top: -1rem; margin-bottom: 2rem; } .kv-download-btn { margin-top: 8px; } .btn-icon { margin-right: 8px; vertical-align: -3px; } /* ===== Manual page ===== */ .manual-toc-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; } .manual-toc-list { padding-left: 1.6rem; margin-bottom: 0; columns: 2; column-gap: 2rem; } .manual-toc-list li { line-height: 1.6; break-inside: avoid; } .manual-toc-list a { display: inline-block; padding: 0.45rem 0; color: var(--sci-text); text-decoration: none; transition: color 0.2s, text-shadow 0.2s; } .manual-toc-list a:hover { color: var(--sci-accent); text-shadow: 0 0 6px rgba(var(--sci-accent-rgb), 0.4); } .manual-section { scroll-margin-top: 60px; } .manual-section-title { font-size: 1.2rem; font-weight: 700; color: var(--sci-heading); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(var(--sci-accent-rgb), 0.15); } .manual-subsection-title { font-size: 1rem; font-weight: 700; color: var(--sci-heading); margin-bottom: 0.75rem; padding-left: 10px; border-left: 3px solid var(--sci-accent); } /* Sub-sections that follow a table or a code example need breathing room above them */ .manual-kw-table-wrap + .manual-subsection-title, .code-panel + .manual-subsection-title, .quickstart-grid + .manual-subsection-title { margin-top: 2rem; } .manual-note { margin-bottom: 0.8rem; } .manual-feature-list { padding-left: 1.2rem; margin-top: 0.5rem; margin-bottom: 0; } .manual-feature-list li { color: var(--sci-text-muted); line-height: 1.75; margin-bottom: 0.35rem; } .manual-feature-list li:last-child { margin-bottom: 0; } .manual-feature-list code { font-size: 0.88em; } .manual-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 1rem; } .manual-input-item { background: rgba(var(--sci-accent-rgb), 0.04); border: 1px solid rgba(var(--sci-accent-rgb), 0.12); border-radius: 8px; padding: 16px 20px; } .manual-input-item code { font-weight: 700; font-size: 0.95em; } .manual-kw-table-wrap { overflow-x: auto; margin-top: 1rem; } .manual-kw-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; table-layout: fixed; } .manual-kw-table col.col-keyword { width: 22%; } .manual-kw-table col.col-type { width: 10%; } .manual-kw-table col.col-default { width: 10%; } .manual-kw-table col.col-desc { width: 58%; } .manual-kw-table col.col-lines { width: 12%; } .manual-kw-table col.col-desc2 { width: 88%; } .manual-kw-table thead th { text-align: left; padding: 10px 14px; color: var(--sci-heading); font-weight: 700; border-bottom: 2px solid rgba(var(--sci-accent-rgb), 0.25); white-space: nowrap; } .manual-kw-table tbody td { padding: 10px 14px; color: var(--sci-text-muted); border-bottom: 1px solid rgba(var(--sci-accent-rgb), 0.06); vertical-align: top; overflow-wrap: break-word; word-break: break-word; } .manual-kw-table tbody tr:last-child td { border-bottom: none; } .manual-kw-table code { font-size: 0.92em; } /* ===== Placeholder text for pages that are still being filled ===== */ .placeholder-note { color: var(--sci-text-muted); margin-bottom: 0; } /* ===== Responsive: tablets and below ===== */ @media (max-width: 991px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.15; } .hero-subtitle { font-size: 0.88rem; line-height: 1.7; letter-spacing: 1.2px; } .hero-content { padding: 0; } nav.navbar.navbar-expand-lg { --mdb-navbar-padding-y: 0; --mdb-navbar-padding-top: 0; padding: 0; } nav.navbar .container-fluid { display: flex; flex-wrap: wrap; align-items: center; padding: 0.5rem 0.75rem; gap: 0; } nav.navbar .navbar-brand.nav-link { --mdb-navbar-brand-padding-y: 0; display: flex; align-items: center; height: 40px; padding: 0; margin: 0 auto 0 0; line-height: 1; position: relative; z-index: 1; } nav.navbar .navbar-brand strong { font-size: 1.1rem; letter-spacing: 1.5px; line-height: 1; white-space: nowrap; } nav.navbar .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 8px; box-shadow: none; flex-shrink: 0; position: relative; z-index: 1; } nav.navbar .navbar-toggler:focus { box-shadow: none; } nav.navbar .navbar-toggler:focus-visible { box-shadow: 0 0 0 0.2rem rgba(var(--sci-accent-rgb), 0.18); } nav.navbar .navbar-toggler .navbar-toggler-icon { display: block; width: 1.4rem; height: 1.4rem; } /* Full-screen overlay menu */ body.mobile-nav-open .navbar { position: fixed; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; box-shadow: none; background: var(--sci-bg) !important; overflow: hidden; align-items: stretch; } body.mobile-nav-open .navbar .container-fluid { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 0; padding: 0.5rem 0.75rem; } body.mobile-nav-open .navbar .navbar-brand.nav-link { grid-column: 1; grid-row: 1; align-self: center; } body.mobile-nav-open .navbar .navbar-toggler { grid-column: 2; grid-row: 1; align-self: center; } .navbar-collapse { display: none !important; } body.mobile-nav-open .navbar-collapse.show { display: flex !important; flex-direction: column; grid-column: 1 / -1; grid-row: 2; align-self: stretch; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0; margin: 0; } .navbar-collapse.show::-webkit-scrollbar { display: none; } .navbar-nav { gap: 0; padding: 0; margin: 0 !important; width: 100%; flex-direction: column; } .navbar .nav-item { border-bottom: 1px solid rgba(var(--sci-accent-rgb), 0.1); } .navbar .nav-link:not(.navbar-brand) { display: flex; align-items: center; justify-content: flex-start; min-height: 52px; padding: 0.9rem 1.25rem; font-size: 1.05rem; font-weight: 400; border-radius: 0; letter-spacing: 0.2px; text-align: left; white-space: normal; } .navbar .nav-item.active .nav-link { font-weight: 600; color: var(--sci-accent) !important; background: transparent; border: none; } .nav-actions { width: 100%; justify-content: flex-start; margin-left: 0; padding: 1rem 1.25rem 0; border-top: 1px solid rgba(var(--sci-accent-rgb), 0.1); } .nav-actions .theme-toggle-btn, .nav-actions .lang-toggle-btn { width: 38px; height: 38px; } .section-block { padding: 44px 0; } .content-card, .content-card-highlight, .year-block { padding: 24px 20px; } .feature-card { padding: 24px 20px; } .tech-list li { align-items: flex-start; } .feature-tag { white-space: normal; overflow-wrap: anywhere; } } @media (max-width: 767px) { .quickstart-grid, .kv-screenshot-grid, .manual-input-grid { grid-template-columns: 1fr; } .manual-toc-list { columns: 1; } .manual-toc-list a { display: block; padding: 0.6rem 0; } .manual-kw-table:has(.col-lines) { table-layout: auto; } .manual-kw-table:has(.col-lines) col.col-lines, .manual-kw-table:has(.col-lines) col.col-desc2 { width: auto; } /* Four-column keyword tables collapse into stacked cards */ .manual-kw-table:has(.col-keyword) { table-layout: auto; } .manual-kw-table:has(.col-keyword) colgroup, .manual-kw-table:has(.col-keyword) thead { display: none; } .manual-kw-table:has(.col-keyword), .manual-kw-table:has(.col-keyword) tbody { display: block; } .manual-kw-table:has(.col-keyword) tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid rgba(var(--sci-accent-rgb), 0.1); } .manual-kw-table:has(.col-keyword) tbody tr:last-child { border-bottom: none; padding-bottom: 0; } .manual-kw-table:has(.col-keyword) tbody td { display: block; padding: 2px 0; border-bottom: none; } .manual-kw-table:has(.col-keyword) tbody td:nth-child(1) { margin-bottom: 4px; font-weight: 700; } .manual-kw-table:has(.col-keyword) tbody td:nth-child(2), .manual-kw-table:has(.col-keyword) tbody td:nth-child(3) { display: inline; font-size: 0.82rem; } .manual-kw-table:has(.col-keyword) tbody td:nth-child(2)::before { content: "Type: "; font-weight: 600; color: var(--sci-heading); } .manual-kw-table:has(.col-keyword) tbody td:nth-child(3)::before { content: " \00b7 Default: "; font-weight: 600; color: var(--sci-heading); } html[lang="zh-CN"] .manual-kw-table:has(.col-keyword) tbody td:nth-child(2)::before { content: "\7C7B\578B\FF1A"; } html[lang="zh-CN"] .manual-kw-table:has(.col-keyword) tbody td:nth-child(3)::before { content: " \00b7 \9ED8\8BA4\503C\FF1A"; } .manual-kw-table:has(.col-keyword) tbody td:nth-child(4) { margin-top: 6px; line-height: 1.6; } } @media (max-width: 575px) { .feature-grid { grid-template-columns: 1fr; } .navbar .container-fluid, .container { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } .hero-full .container { padding-top: 88px; padding-bottom: 44px; } .hero h1 { font-size: clamp(1.82rem, 8.2vw, 2.45rem); } .hero-subtitle { letter-spacing: 0.8px; } .hero-page-title { font-size: 1.6rem; } .hero-compact-inner { padding-top: 2rem; padding-bottom: 1.6rem; } .navbar-brand strong { letter-spacing: 1.2px; font-size: 1rem; white-space: nowrap; } .hero-actions .btn { width: 100%; min-width: 0; } .section-title, .section-title-center { font-size: 1.25rem; } .section-subtitle { margin-top: -1rem; margin-bottom: 1.75rem; } .code-panel pre { font-size: 0.76rem; padding: 14px; } } /* ===== Motion preferences ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }