/* Lynx Support — Flat, clean, Lynx-inspired */ :root { --color-main: #0085ff; --color-main-hover: #006dd6; --color-teal: #0d7a87; --color-yellow: #e3d810; --color-green: #48b319; --color-dark: #2f353a; --color-white: #f4f8f9; --color-black: #000000; --font-main: 'Didact Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-accent: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Light theme (default) */ --bg-primary: #ffffff; --bg-secondary: var(--color-white); --bg-card: #ffffff; --bg-card-hover: #f0f4f7; --bg-input: #ffffff; --text-primary: var(--color-black); --text-secondary: #555; --text-tertiary: #888; --border-color: #e2e6ea; --border-color-strong: #cfd4d9; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 2px 8px rgba(0,0,0,0.08); --shadow-lg: 0 4px 20px rgba(0,0,0,0.1); --nav-bg: #ffffff; --nav-border: #e2e6ea; --tag-bg: #f0f4f7; --tag-text: #555; --code-bg: #f5f7f9; --code-border: #e2e6ea; --article-bg: #ffffff; --breadcrumb-color: #888; --search-bg: #f4f8f9; } [data-theme="dark"] { --bg-primary: #1a1d21; --bg-secondary: #22262b; --bg-card: #282c32; --bg-card-hover: #32373e; --bg-input: #282c32; --text-primary: #f0f2f4; --text-secondary: #a0a8b2; --text-tertiary: #6b7280; --border-color: #3a3f46; --border-color-strong: #4a5058; --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 2px 8px rgba(0,0,0,0.25); --shadow-lg: 0 4px 20px rgba(0,0,0,0.3); --nav-bg: #1a1d21; --nav-border: #3a3f46; --tag-bg: #32373e; --tag-text: #a0a8b2; --code-bg: #22262b; --code-border: #3a3f46; --article-bg: #22262b; --breadcrumb-color: #6b7280; --search-bg: #282c32; } /* ─── Custom Cursors ─── */ /* Disabled when LYNX_FLAGS.customCursors = false (adds .no-custom-cursors to ) */ html:not(.no-custom-cursors), html:not(.no-custom-cursors) body { cursor: url('../cursors/default.png') 11 8, default; } /* Text cursor — only on article body text and code blocks */ html:not(.no-custom-cursors) .article-body p, html:not(.no-custom-cursors) .article-body li, html:not(.no-custom-cursors) .article-body blockquote, html:not(.no-custom-cursors) .article-body code, html:not(.no-custom-cursors) .article-body pre, html:not(.no-custom-cursors) .article-body td, html:not(.no-custom-cursors) .article-body th { cursor: url('../cursors/text.png') 32 33, text; } /* Pointer cursor on all interactive elements */ html:not(.no-custom-cursors) a, html:not(.no-custom-cursors) button, html:not(.no-custom-cursors) [role="button"], html:not(.no-custom-cursors) summary, html:not(.no-custom-cursors) label, html:not(.no-custom-cursors) select, html:not(.no-custom-cursors) option, html:not(.no-custom-cursors) input[type="submit"], html:not(.no-custom-cursors) input[type="button"], html:not(.no-custom-cursors) input[type="reset"], html:not(.no-custom-cursors) input[type="checkbox"], html:not(.no-custom-cursors) input[type="radio"], html:not(.no-custom-cursors) input[type="range"], html:not(.no-custom-cursors) input[type="file"], html:not(.no-custom-cursors) input[type="color"], html:not(.no-custom-cursors) input[type="image"], html:not(.no-custom-cursors) .category-card, html:not(.no-custom-cursors) .nav-btn, html:not(.no-custom-cursors) .helpful-btn, html:not(.no-custom-cursors) .back-to-top, html:not(.no-custom-cursors) .search-result-item, html:not(.no-custom-cursors) .category-links a, html:not(.no-custom-cursors) .popular-list a, html:not(.no-custom-cursors) .article-list a, html:not(.no-custom-cursors) .category-see-all, html:not(.no-custom-cursors) .nav-brand, html:not(.no-custom-cursors) .article-sidebar-links a { cursor: url('../cursors/pointer.png') 14 8, pointer !important; } /* Text cursor on text inputs */ html:not(.no-custom-cursors) input[type="text"], html:not(.no-custom-cursors) input[type="email"], html:not(.no-custom-cursors) input[type="password"], html:not(.no-custom-cursors) input[type="search"], html:not(.no-custom-cursors) input[type="url"], html:not(.no-custom-cursors) input[type="tel"], html:not(.no-custom-cursors) input[type="number"], html:not(.no-custom-cursors) input:not([type]), html:not(.no-custom-cursors) textarea, html:not(.no-custom-cursors) [contenteditable="true"], html:not(.no-custom-cursors) [contenteditable=""], html:not(.no-custom-cursors) .search-input { cursor: url('../cursors/text.png') 32 33, text !important; } /* Disabled elements */ html:not(.no-custom-cursors) [disabled], html:not(.no-custom-cursors) [aria-disabled="true"] { cursor: url('../cursors/not-allowed.png') 8 1, not-allowed !important; } /* Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-main); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; transition: background 0.25s ease, color 0.25s ease; } a { color: var(--color-main); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--color-main-hover); } /* ─── Nav ─── */ .nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); transition: background 0.25s, border-color 0.25s; } .nav-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); transition: color 0.15s; } .nav-brand:hover { color: #6b7280; } .nav-brand:hover .nav-brand-text { color: #6b7280; } .nav-brand:hover .nav-brand-text span { color: #9ca3af; } .nav-brand-logo { width: 28px; height: 28px; object-fit: contain; } /* Light mode: invert white logo to black */ :root .nav-brand-logo { filter: invert(1); } [data-theme="dark"] .nav-brand-logo { filter: none; } .nav-brand-text { font-family: var(--font-accent); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; transition: color 0.15s; } .nav-brand-text span { font-weight: 400; color: var(--text-secondary); margin-left: 4px; } .nav-actions { display: flex; align-items: center; gap: 8px; } .nav-btn { background: none; border: none; cursor: pointer; color: var(--text-secondary); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; font-size: 16px; } .nav-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); } /* ─── Gradient stripe (four-color) ─── */ .nav-stripe { height: 3px; background: linear-gradient(90deg, var(--color-main) 25%, var(--color-teal) 25%, var(--color-teal) 50%, var(--color-green) 50%, var(--color-green) 75%, var(--color-yellow) 75%); } /* ─── Hero ─── */ .hero { background: var(--bg-secondary); padding: 56px 24px 48px; text-align: center; transition: background 0.25s; } .hero h1 { font-family: var(--font-accent); font-weight: 700; font-size: 36px; margin-bottom: 8px; letter-spacing: -0.02em; } .hero p { color: var(--text-secondary); font-size: 17px; margin-bottom: 28px; } /* ─── Search ─── */ .search-wrap { max-width: 560px; margin: 0 auto; position: relative; } .search-wrap i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: 15px; pointer-events: none; } .search-input { width: 100%; padding: 14px 16px 14px 44px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font-family: var(--font-main); font-size: 16px; outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.25s; } .search-input:focus { border-color: var(--color-main); box-shadow: 0 0 0 3px rgba(0, 133, 255, 0.12); } .search-input::placeholder { color: var(--text-tertiary); } .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 400px; overflow-y: auto; display: none; z-index: 50; } .search-results.active { display: block; } .search-result-item { padding: 12px 16px; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid var(--border-color); display: block; color: var(--text-primary); } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: var(--bg-card-hover); } .search-result-item .result-title { font-family: var(--font-accent); font-weight: 500; font-size: 15px; margin-bottom: 2px; } .search-result-item .result-category { font-size: 13px; color: var(--text-tertiary); } .search-no-results { padding: 20px 16px; text-align: center; color: var(--text-tertiary); font-size: 14px; } /* ─── Main content ─── */ .main { max-width: 1120px; margin: 0 auto; padding: 40px 24px 80px; } /* ─── Category grid ─── */ .categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 48px; } .category-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 24px; transition: border-color 0.2s, box-shadow 0.2s, background 0.25s; cursor: pointer; } .category-card:hover { border-color: var(--color-main); box-shadow: var(--shadow-md); } .category-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .category-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex-shrink: 0; } .category-icon.blue { background: var(--color-main); } .category-icon.teal { background: var(--color-teal); } .category-icon.green { background: var(--color-green); } .category-icon.dark { background: var(--color-dark); } .category-title { font-family: var(--font-accent); font-weight: 600; font-size: 18px; } .category-desc { color: var(--text-secondary); font-size: 14px; margin-bottom: 16px; line-height: 1.5; } .category-links { list-style: none; } .category-links li { border-top: 1px solid var(--border-color); } .category-links a { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; color: var(--text-primary); font-size: 14px; transition: color 0.15s; } .category-links a:hover { color: var(--color-main); } .category-links a i.fa-chevron-right { font-size: 11px; color: var(--text-tertiary); transition: transform 0.15s, color 0.15s; } .category-links a:hover i.fa-chevron-right { transform: translateX(2px); color: var(--color-main); } .category-see-all { display: inline-block; margin-top: 12px; font-size: 13px; font-family: var(--font-accent); font-weight: 500; color: var(--color-main); } .category-see-all:hover { text-decoration: underline; } /* ─── Popular articles ─── */ .section-heading { font-family: var(--font-accent); font-weight: 600; font-size: 22px; margin-bottom: 20px; letter-spacing: -0.01em; } .popular-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .popular-list a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-primary); font-size: 14px; transition: border-color 0.2s, background 0.15s; } .popular-list a:hover { border-color: var(--color-main); background: var(--bg-card-hover); } .popular-list a i { color: var(--color-main); font-size: 14px; flex-shrink: 0; } /* ─── Article page ─── */ .article-layout { max-width: 1120px; margin: 0 auto; padding: 32px 24px 80px; display: flex; gap: 40px; } .article-sidebar { width: 240px; flex-shrink: 0; position: sticky; top: 96px; align-self: flex-start; max-height: calc(100vh - 120px); overflow-y: auto; } .article-sidebar-title { font-family: var(--font-accent); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 12px; } .article-sidebar-links { list-style: none; } .article-sidebar-links a { display: block; padding: 6px 0; font-size: 14px; color: var(--text-secondary); transition: color 0.15s; } .article-sidebar-links a:hover, .article-sidebar-links a.active { color: var(--color-main); } .article-content { flex: 1; min-width: 0; } .breadcrumbs { font-size: 13px; color: var(--breadcrumb-color); margin-bottom: 20px; font-family: var(--font-accent); } .breadcrumbs a { color: var(--breadcrumb-color); } .breadcrumbs a:hover { color: var(--color-main); } .breadcrumbs span { margin: 0 6px; } .article-body { background: var(--article-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 36px; transition: background 0.25s, border-color 0.25s; } .article-body h1 { font-family: var(--font-accent); font-weight: 700; font-size: 30px; margin-bottom: 8px; letter-spacing: -0.02em; line-height: 1.2; } .article-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; font-size: 13px; color: var(--text-tertiary); } .article-meta .tag { background: var(--tag-bg); color: var(--tag-text); padding: 3px 10px; border-radius: 6px; font-size: 12px; font-family: var(--font-accent); font-weight: 500; } .article-body h2 { font-family: var(--font-accent); font-weight: 600; font-size: 22px; margin: 32px 0 12px; letter-spacing: -0.01em; } .article-body h3 { font-family: var(--font-accent); font-weight: 600; font-size: 18px; margin: 24px 0 10px; } .article-body p { margin-bottom: 16px; line-height: 1.7; font-size: 15px; } .article-body ul, .article-body ol { margin-bottom: 16px; padding-left: 24px; } .article-body li { margin-bottom: 6px; font-size: 15px; line-height: 1.6; } .article-body code { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 5px; padding: 2px 6px; font-size: 13px; font-family: 'SF Mono', 'Consolas', 'Monaco', monospace; } .article-body pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 10px; padding: 16px 20px; overflow-x: auto; margin-bottom: 16px; } .article-body pre code { background: none; border: none; padding: 0; font-size: 13px; line-height: 1.6; } .article-body blockquote { border-left: 3px solid var(--color-main); padding: 12px 20px; margin-bottom: 16px; background: var(--bg-secondary); border-radius: 0 8px 8px 0; color: var(--text-secondary); font-size: 14px; } .article-body img { max-width: 100%; border-radius: 10px; margin: 16px 0; } .article-body hr { border: none; border-top: 1px solid var(--border-color); margin: 28px 0; } .article-body .callout { padding: 16px 20px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; display: flex; gap: 12px; align-items: flex-start; } .article-body .callout i { margin-top: 2px; flex-shrink: 0; } .callout.tip { background: rgba(72, 179, 25, 0.08); border: 1px solid rgba(72, 179, 25, 0.2); color: var(--text-primary); } .callout.tip i { color: var(--color-green); } .callout.warning { background: rgba(227, 216, 16, 0.08); border: 1px solid rgba(227, 216, 16, 0.2); color: var(--text-primary); } .callout.warning i { color: var(--color-yellow); } .callout.info { background: rgba(0, 133, 255, 0.06); border: 1px solid rgba(0, 133, 255, 0.15); color: var(--text-primary); } .callout.info i { color: var(--color-main); } /* ─── Category page ─── */ .category-page-header { margin-bottom: 28px; } .category-page-header h1 { font-family: var(--font-accent); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; margin-bottom: 6px; } .category-page-header p { color: var(--text-secondary); font-size: 15px; } .article-list { list-style: none; } .article-list li { border-bottom: 1px solid var(--border-color); } .article-list a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; color: var(--text-primary); font-size: 15px; transition: color 0.15s; } .article-list a:hover { color: var(--color-main); } .article-list a i { color: var(--text-tertiary); font-size: 12px; flex-shrink: 0; transition: transform 0.15s; } .article-list a:hover i { transform: translateX(2px); color: var(--color-main); } /* ─── Footer ─── */ .footer { background: var(--color-dark); color: #a0a8b2; padding: 28px 24px 24px; text-align: center; font-size: 13px; } .footer a { color: var(--color-main); } .footer-logo { width: 40px; height: 40px; object-fit: contain; opacity: 0.5; margin-bottom: 12px; } .footer-brand { font-family: var(--font-accent); font-weight: 600; font-size: 15px; color: #d0d4d8; margin-bottom: 4px; } .footer-stripe { height: 3px; background: linear-gradient(90deg, var(--color-main) 25%, var(--color-teal) 25%, var(--color-teal) 50%, var(--color-green) 50%, var(--color-green) 75%, var(--color-yellow) 75%); } /* ─── Helpful / feedback ─── */ .article-helpful { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-color); text-align: center; } .article-helpful p { font-size: 14px; color: var(--text-secondary); margin-bottom: 12px; } .helpful-btns { display: flex; justify-content: center; gap: 10px; } .helpful-btn { padding: 8px 20px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-family: var(--font-main); font-size: 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .helpful-btn:hover { border-color: var(--color-main); background: var(--bg-card-hover); } .helpful-btn.selected { background: var(--color-main); color: #fff; border-color: var(--color-main); } /* ─── Back to top ─── */ .back-to-top { position: fixed; bottom: 24px; right: 24px; width: 40px; height: 40px; border-radius: 10px; background: var(--color-main); color: #fff; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 16px; box-shadow: var(--shadow-md); transition: opacity 0.2s, transform 0.2s; z-index: 90; } .back-to-top.visible { display: flex; } .back-to-top:hover { transform: translateY(-2px); } /* ─── Responsive ─── */ @media (max-width: 768px) { .hero { padding: 40px 16px 36px; } .hero h1 { font-size: 28px; } .main { padding: 28px 16px 60px; } .categories { grid-template-columns: 1fr; gap: 16px; } .popular-list { grid-template-columns: 1fr; } .article-layout { flex-direction: column; gap: 0; padding: 20px 16px 60px; } .article-sidebar { display: none; } .article-body { padding: 24px 20px; } .article-body h1 { font-size: 24px; } .nav-inner { padding: 0 16px; } } @media (max-width: 480px) { .hero h1 { font-size: 24px; } .hero p { font-size: 15px; } .search-input { font-size: 15px; padding: 12px 12px 12px 40px; } .category-card { padding: 20px; } .article-body { padding: 20px 16px; border-radius: 10px; } } /* ─── Smooth transitions for theme switch ─── */ .nav, .category-card, .article-body, .popular-list a, .footer, .search-input, .search-results, .helpful-btn, .back-to-top { transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ─── Scrollbar styling ─── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* ─── Loading spinner ─── */ .loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; } .spinner { width: 32px; height: 32px; border: 3px solid var(--border-color); border-top-color: var(--color-main); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }