/* ============================================================ DARK MODE — applied when has class "dark". Strategy: override the page's most visible surfaces (page bg, primary text, nav, cards, modals, footer, buttons). Some decorative tints (gradient banners, brand-tone pills) keep their original palette; their light surfaces remain readable on a dark page because they are localized accents. ============================================================ */ html.dark { color-scheme: dark; } html.dark, html.dark body { background: #0c1322; color: #ececf1; } /* Top nav — fully transparent at rest (night sky shows through), dark glass + lighter hairline once scrolled. */ html.dark .top-nav { background: rgba(12, 19, 34, 0); } html.dark .top-nav.is-scrolled { background: rgba(12, 19, 34, 0.94); border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.6); } html.dark .nav-divider { background: rgba(255, 255, 255, 0.14); } html.dark .nav-link { color: #c4c4cd; } html.dark .nav-link:hover, html.dark .nav-link.is-active { color: #ffffff; } html.dark .nav-icon-btn { color: #c4c4cd; } html.dark .nav-icon-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); } html.dark .nav-icon-btn[data-tip]::after, html.dark .nav-login[data-tip]::after, html.dark .nav-agent[data-tip]::after { background: #e8eaed; color: #11151f; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } /* Primary CTA — invert: was solid black on light page; on dark page it becomes a near-white pill with dark text so it still reads as primary. */ html.dark .btn-primary { background: #ffffff; color: #0e0e10; border-color: #ffffff; } html.dark .btn-primary:hover { background: #ececf1; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.7); } /* Nav CTA now mirrors the ghost 登岛 button (both ghost pills), so it takes the same translucent-border treatment in dark mode instead of inverting. */ html.dark .nav-cta { background: transparent; color: #ececf1; border-color: rgba(255,255,255,0.18); } html.dark .nav-cta:hover { background: rgba(10,135,247,0.18); border-color: rgba(96,165,250,0.5); color: #93c5fd; } /* Secondary pill (incl. the GitHub "为 AI Agent 接入" link). */ html.dark .btn-secondary { background: rgba(255, 255, 255, 0.04); color: #ececf1; border-color: rgba(255, 255, 255, 0.22); } /* 品牌蓝填充变体在暗色下保持蓝底（盖过上面的通用暗色 btn-secondary）。 */ html.dark .btn-secondary.is-brand { background: #0a87f7; color: #ffffff; border-color: #0a87f7; } html.dark .btn-secondary.is-brand:hover { background: #2f9bf8; border-color: #2f9bf8; color: #ffffff; } html.dark .btn-secondary:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5); } html.dark .settings-social-sync-btn { background: rgba(255, 255, 255, 0.05); color: #ececf1; border-color: rgba(255, 255, 255, 0.22); } html.dark .settings-social-sync-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; } html.dark .btn-ghost { background: rgba(255, 255, 255, 0.05); color: #ececf1; border-color: rgba(255, 255, 255, 0.18); } html.dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.32); } /* Generic Tailwind border-black/* utilities used for hairlines around sections and the footer — invert to faint white. */ html.dark .border-black\/5 { border-color: rgba(255, 255, 255, 0.06) !important; } html.dark .border-black\/10 { border-color: rgba(255, 255, 255, 0.1) !important; } /* ----- Tier 1: primary card surfaces (white → dark elevated) ----- */ html.dark .search-bar, html.dark .filter-chip, html.dark .filter-menu, html.dark .job-card, html.dark .company-card, html.dark .guide-card, html.dark .job-card-cover, html.dark .sheet-card, html.dark .modal-card, html.dark .feed-browser-frame, html.dark .feed-browser-body, html.dark .pain-face, html.dark .scene-chip, html.dark .scene-msg, html.dark .scene-post, html.dark .scene-date, html.dark .scene-jd, html.dark .scene-search-bar, html.dark .scene-curated-badge, html.dark .scene-curated-card, html.dark .scene-quiet-icon, html.dark .scene-rich-jd, html.dark .scene-result-card, html.dark .chip-toggle, html.dark .empty-state, html.dark .detail-share-btn, html.dark .publish-success-action, html.dark .publish-live-card, html.dark .publish-logo-display, html.dark .sheet-share-btn, html.dark .sheet-fav-btn, html.dark .sheet-export-btn, html.dark .sheet-export-popover, html.dark .sheet-export-mode, html.dark .sheet-export-chip, html.dark .faq-toggle-btn { background: #151e32; color: #ececf1; border-color: rgba(255, 255, 255, 0.08); } /* Selected pill in dark mode — invert to a light fill so the chosen option reads clearly against the dark form. Mirrors .filter-chip.is-active. The html.dark .chip-toggle base rule above has higher specificity than the plain .chip-toggle.is-on highlight, so it was overriding the selected state and flattening all pills to the same dark fill; this restores the contrast. */ html.dark .chip-toggle.is-on { background: #ffffff; color: #0e0e10; border-color: #ffffff; } html.dark .chip-toggle.is-on:hover { background: #ececf1; color: #0e0e10; border-color: #ececf1; } /* Unselected pill hover in dark mode — lift toward light instead of inheriting the light-theme near-black hover, which was illegible on the dark fill. */ html.dark .chip-toggle:hover { background: #1f2840; color: #f5f5f7; border-color: rgba(255, 255, 255, 0.18); } /* Dark-mode hover for the three header pills — a slight lift over the base fill, mirroring the light-mode neutral highlight. */ html.dark .sheet-share-btn:hover, html.dark .sheet-fav-btn:hover, html.dark .sheet-export-btn:hover { background: #1f2840; color: #f5f5f7; border-color: rgba(255, 255, 255, 0.16); } /* Saved state — pink accent in dark mode (lighter pink for contrast). */ html.dark .sheet-fav-btn.is-saved { color: #f472b6; border-color: rgba(244,114,182,0.4); background: rgba(244,114,182,0.14); } html.dark .sheet-fav-btn.is-saved:hover { color: #f472b6; border-color: rgba(244,114,182,0.55); background: rgba(244,114,182,0.22); } /* ----- Tier 2: subtly elevated chips / pills (light gray → mid dark) ----- */ html.dark .meta-pill, html.dark .card-contact-code, html.dark .multi-pos-chip, html.dark .sheet-close, html.dark .sheet-export-chip-dot, html.dark .sheet-export-preview-wrap, html.dark .sheet-contact-code, html.dark .detail-share-row, html.dark .publish-modal-frame, html.dark .publish-inline, html.dark .publish-live-textarea, html.dark .publish-meta-pill, html.dark .bg-\[\#f3f3f1\] { background: #1c283e !important; color: #ececf1 !important; border-color: rgba(255, 255, 255, 0.08) !important; } /* Inner logo wells stay near-white so brand marks (which are usually drawn for light backgrounds) remain recognizable in dark mode. */ html.dark .job-card-logo, html.dark .job-card-cover-logo, html.dark .company-card-logo, html.dark .sheet-logo { background: #f4f4f6; color: #0e0e10; border-color: rgba(255, 255, 255, 0.12); } html.dark .btn-ghost { background: rgba(255, 255, 255, 0.05); color: #ececf1; border-color: rgba(255, 255, 255, 0.18); } /* ----- Card depth: deeper shadow so dark surfaces still float ----- */ html.dark .job-card, html.dark .company-card, html.dark .guide-card, html.dark .modal-card, html.dark .sheet-card, html.dark .filter-menu, html.dark .sheet-export-popover { box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7); } /* ----- 面经攻略 cards ----- */ /* The head-band wash flips to the same dark-navy wash as the company card main rows so the two tabs stay one family in dark mode (the card body itself takes the Tier-1 dark surface). */ html.dark .guide-card .guide-card-head { background: radial-gradient(ellipse 80% 110% at 22% 0%, rgba(255,255,255,0.08), transparent 64%), linear-gradient(135deg, #202d45 0%, #1a253a 52%, #162033 100%); } html.dark .guide-card-title { color: #ffffff; } html.dark .guide-card-summary { color: #c4c4cd; } html.dark .guide-card-date { color: rgba(255, 255, 255, 0.6); } html.dark .guide-card-company { color: #d4d4dd; } html.dark .guide-card-logo { background: #f4f4f6; border-color: rgba(255, 255, 255, 0.12); } html.dark .guide-card-source { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: #d4d4dd; } html.dark .guide-card-logo-fallback { background: #f4f4f6; color: #0e0e10; } html.dark .guide-card-arrow { color: #a1a1ab; } html.dark .guide-card:hover { border-color: rgba(255, 255, 255, 0.24); } /* ----- Skill modal: dark-mode polish so code blocks read clean ----- */ html.dark .skill-code { background: #1c283e; color: #ececf1; scrollbar-color: rgba(255,255,255,0.28) transparent; } html.dark .skill-code::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); } html.dark .skill-code-url { color: #93c5fd; } html.dark .skill-prompt { background: #1c283e; color: #ececf1; } html.dark .skill-row-hint { color: #a1a1ab; } html.dark .skill-row-hint code { background: rgba(255,255,255,0.07); color: #d4d4dd; } html.dark .skill-key-note { color: #8a8a96; } html.dark .skill-key-note code { background: rgba(255,255,255,0.07); color: #d4d4dd; } html.dark .skill-row-label { color: #93c5fd; } html.dark .skill-copy-btn { background: rgba(28, 40, 62, 0.72); color: #a1a1ab; border-color: rgba(255, 255, 255, 0.10); } html.dark .skill-copy-btn:hover { background: #233149; color: #ececf1; border-color: rgba(255, 255, 255, 0.22); } html.dark .skill-copy-btn.is-copied { color: #4ade80; background: rgba(34, 197, 94, 0.18); border-color: rgba(74, 222, 128, 0.45); } html.dark .skill-copy-btn.is-failed { color: #fca5a5; background: rgba(220, 38, 38, 0.18); border-color: rgba(248, 113, 113, 0.45); } html.dark .skill-testkey-link { color: #6cb0ff; } html.dark .skill-testkey-link:hover { color: #93c5fd; } html.dark .skill-testkey-link.is-copied { color: #4ade80; } html.dark .skill-testkey-link.is-failed { color: #fca5a5; } html.dark .skill-footer-note { color: #a1a1ab; border-top-color: rgba(255,255,255,0.1); } html.dark .skill-footer-link { color: #93c5fd; } html.dark .skill-skeleton-row { background: #1c283e; } html.dark .skill-skeleton-row::after { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0) 100%); } html.dark .feed-browser-chrome { background: linear-gradient(180deg, #20283a 0%, #161f31 100%); border-bottom-color: rgba(255,255,255,0.08); } html.dark .feed-browser-tab { background: rgba(255,255,255,0.05); color: #b7bac5; border-color: rgba(255,255,255,0.10); } html.dark .feed-browser-tab:hover { background: rgba(255,255,255,0.10); color: #f5f5f7; border-color: rgba(255,255,255,0.18); } html.dark .feed-browser-tab.is-active { background: #ececf1; color: #0e0e10; border-color: #ececf1; box-shadow: 0 1px 2px rgba(0,0,0,0.24); } /* ----- Filter active state: keep the inverted pill behavior ----- */ html.dark .filter-chip.is-active { background: #ffffff; color: #0e0e10; border-color: #ffffff; } html.dark .filter-menu-item { color: #c4c4cd; } html.dark .filter-menu-item:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; } /* ----- Dark-text classes — flip near-black headings/labels to light ----- */ html.dark .hero-headline, html.dark .search-input, html.dark .section-title, html.dark .editor-letter-body, html.dark .editor-letter-name, html.dark .editor-card-sig-text, html.dark .pull-quote, html.dark .job-card-title, html.dark .company-card-title, html.dark .card-contact-code, html.dark .card-collapse-btn, html.dark .multi-pos-chip, html.dark .sheet-title, html.dark .sheet-export-mode, html.dark .sheet-export-chip-dot, html.dark .sheet-chapter-name, html.dark .sheet-contact-code, html.dark .sheet-cta-contact, html.dark .highlight-title, html.dark .pain-quote, html.dark .scene-jd-title, html.dark .scene-curated-title, html.dark .scene-quiet-text, html.dark .scene-rich-jd-title, html.dark .scene-result-title, html.dark .cta-banner-title, html.dark .faq-q, html.dark .detail-share-btn, html.dark .publish-success-title, html.dark .publish-success-action-icon, html.dark .publish-success-action-title, html.dark .publish-modal-title, html.dark .publish-inline, html.dark .publish-inline-role, html.dark .publish-contact-field, html.dark .publish-meta-pill { color: #ececf1; } /* Marquee pill over the night-water hero — dark translucent fill mirroring the light mode's white pill (same no-blur reasoning). */ html.dark .marquee-item { background: rgba(12, 19, 34, 0.55); border-color: rgba(255, 255, 255, 0.14); } /* ----- Mid-tone secondary text — lift to a readable dark-mode gray ----- */ html.dark .marquee-item, html.dark .marquee-label, html.dark .job-card-body, html.dark .company-card-text, html.dark .job-card-org, html.dark .job-card-meta, html.dark .card-section-body, html.dark .card-section-label, html.dark .sheet-meta, html.dark .sheet-org, html.dark .sheet-section-body, html.dark .sheet-section-label, html.dark .sheet-chapter-body, html.dark .editor-letter-role, html.dark .editor-letter-eyebrow, html.dark .dateline, html.dark .section-eyebrow, html.dark .editorial-label, html.dark .highlight-body, html.dark .pain-body, html.dark .faq-a, html.dark .scene-msg-snippet, html.dark .scene-post-head-name, html.dark .publish-success-sub, html.dark .publish-modal-hint, html.dark .detail-section-body { color: #d4d4dc; } html.dark .company-card-section { border-top-color: rgba(255,255,255,0.08); } html.dark .company-card-section-label { color: #8f96a8; } html.dark .company-card-person-name { color: #f5f5f7; } html.dark .company-card-person-title { color: #c9c9d3; } html.dark .company-card-pill { background: #1c283e; color: #ececf1; } html.dark .company-card--feed .company-card-pill { background: rgba(255,255,255,0.13); color: #f8fafc; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); } html.dark .company-card-website, html.dark .company-card-links a, html.dark .company-card-link-list a, html.dark .company-card-position-list a { background: rgba(96,165,250,0.14); color: #93c5fd; } html.dark .company-card-website { background: transparent; } html.dark .company-card-links a:hover, html.dark .company-card-link-list a:hover, html.dark .company-card-position-list a:hover { background: rgba(96,165,250,0.22); } html.dark .company-card-position-list a small { color: #bfdbfe; } html.dark .company-card-link-list a small { color: #bfdbfe; } html.dark .company-card-preview-section { border-top-color: rgba(255,255,255,0.08); } html.dark .company-card-preview-list a { color: #d4d4dc; } html.dark .company-card-preview-list a:hover span { color: #93c5fd; } html.dark .company-card-preview-list a small { color: #a1a1ab; } html.dark .company-card-pill--location { color: #ececf1; } html.dark .company-card-main-row { border-bottom-color: rgba(255,255,255,0.08); } html.dark .company-card-main-row.tone-pink, html.dark .company-card-main-row.tone-violet, html.dark .company-card-main-row.tone-amber { background: radial-gradient(ellipse 80% 110% at 22% 0%, rgba(255,255,255,0.08), transparent 64%), linear-gradient(135deg, #202d45 0%, #1a253a 52%, #162033 100%); } html.dark .company-card--feed .company-card-title { color: #ffffff; } html.dark .company-card-cover-logo, html.dark .company-card-inline-logo, html.dark .company-detail-logo { background: #f4f4f6; color: #0e0e10; border-color: rgba(255,255,255,0.12); } html.dark .company-detail-backdrop { background: rgba(0,0,0,0.65); } html.dark .company-detail-page { background: #151e32; border-color: rgba(255,255,255,0.08); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.75); } html.dark .company-detail-hero, html.dark .company-detail-panel { background: #151e32; color: #ececf1; border-color: rgba(255,255,255,0.08); box-shadow: 0 24px 58px -30px rgba(0,0,0,0.74); } html.dark .company-detail-hero { border-bottom-color: rgba(255,255,255,0.08); background: radial-gradient(140% 110% at 100% 0%, rgba(56,182,248,0.14), transparent 62%), linear-gradient(135deg, rgba(10,135,247,0.10) 0%, rgba(255,255,255,0) 70%); box-shadow: none; } html.dark .company-detail-panel { background: rgba(28,40,62,0.54); box-shadow: none; } html.dark .company-detail-close { background: rgba(21,30,50,0.92); color: #ececf1; border-color: rgba(255,255,255,0.12); } html.dark .company-detail-close:hover { background: #1f2840; border-color: rgba(255,255,255,0.22); } html.dark .company-detail-title, html.dark .company-detail-panel-title, html.dark .company-detail-member-name, html.dark .company-detail-row-title, html.dark .company-detail-job-row strong { color: #ececf1; } html.dark .company-detail-subtitle, html.dark .company-detail-member-title, html.dark .company-detail-job-row small { color: #c4c4cd; } html.dark .company-detail-action { background: rgba(96,165,250,0.14); color: #93c5fd; border-color: rgba(147,197,253,0.18); } html.dark .company-detail-action:hover { background: rgba(96,165,250,0.22); } html.dark .company-detail-pill { background: rgba(255,255,255,0.08); color: #ffffff; border-color: rgba(255,255,255,0.14); } html.dark .company-detail-pill.is-strong { background: rgba(255,255,255,0.08); color: #ffffff; border-color: rgba(255,255,255,0.14); } html.dark .company-detail-member-avatar { background: #1c283e; color: #93c5fd; } html.dark .company-detail-link-row, html.dark .company-detail-job-row, html.dark .company-detail-news-row { border-top-color: rgba(255,255,255,0.08); color: #ececf1; } html.dark .company-detail-socials a.has-brand-logo { background: #ffffff; border-color: rgba(255,255,255,0.12); } html.dark .company-detail-product-pill { background: transparent; border-color: transparent; color: #ececf1; } html.dark .company-detail-product-pill span:not(.company-detail-chevron), html.dark .company-detail-news-title { color: #ececf1; } html.dark .company-detail-product-pill span:not(.company-detail-chevron) { text-decoration-color: rgba(255,255,255,0.30); } html.dark .company-detail-product-pill:hover { background: transparent; border-color: transparent; } html.dark .company-detail-product-pill:hover span:not(.company-detail-chevron), html.dark .company-detail-news-title:hover { color: #93c5fd; } html.dark .company-detail-product-pill:hover span:not(.company-detail-chevron) { text-decoration-color: rgba(147,197,253,0.52); } html.dark .company-detail-news-index { background: #707786; } html.dark .company-detail-news-date { color: #ececf1; } html.dark .company-detail-news-title { color: #a8adb8; } html.dark .company-detail-funding-item::before { background: rgba(255,255,255,0.10); } html.dark .company-detail-funding-dot { border-color: #151e32; background: #60a5fa; box-shadow: 0 0 0 1px rgba(147,197,253,0.28); } html.dark .company-detail-funding-round { color: #ececf1; } html.dark .company-detail-funding-meta span { color: #9ca3af; } html.dark .company-detail-funding-meta strong { color: #c4c4cd; } html.dark .company-detail-expand-btn { background: rgba(28,40,62,0.70); color: #c4c4cd; border-color: rgba(255,255,255,0.08); } html.dark .company-detail-expand-btn:hover { color: #93c5fd; border-color: rgba(147,197,253,0.20); } html.dark .company-detail-share-pill { background: rgba(96,165,250,0.14); color: #93c5fd; border-color: rgba(147,197,253,0.18); } html.dark .company-detail-share-pill:hover { background: rgba(96,165,250,0.22); } html.dark .company-detail-row-kicker, html.dark .company-detail-link-row svg, html.dark .company-detail-job-row svg, html.dark .company-detail-news-title svg, html.dark .company-detail-product-pill svg, html.dark .company-detail-chevron { color: #9ca3af; } html.dark .company-detail-link-row:hover .company-detail-row-title, html.dark .company-detail-job-row:hover strong { color: #93c5fd; } html.dark .faq-a a { color: #93c5fd; } html.dark .faq-a a:hover { color: #bfdbfe; } /* ============================================================ Dark-mode contrast remediation — text runs that kept their light-mode near-black / low-alpha colors and dropped below ~3:1 on the dark surfaces they now sit on. Lifted to the established dark palette: primary #ececf1 · secondary #d4d4dc · body #c4c4cd · muted #a1a1ab · purple accent #93c5fd. ============================================================ */ /* Feed card body — the magazine left-rule bullets are the posting summary the user actually reads; #4a4a52 was unreadable on #151e32. */ html.dark .job-card-bullets li { color: #c4c4cd; } /* Feed card cover date stamp (was rgba(14,14,16,0.55) on a now-dark cover). */ html.dark .job-card-cover-date { color: rgba(255, 255, 255, 0.6); } /* Feed card cover badges (top-right poster-type / company-tag pills) were swept into BOTH the white logo-well group and the light-text group → near-white text (#ececf1) sitting on a near-white pill (#f4f4f6), i.e. invisible. Restyle as a dark translucent pill with light tone text, matching the cover's .job-card-fav heart pill. */ html.dark .job-card-cover-badge { background: rgba(16, 25, 44, 0.72); color: #ececf1; border: 1px solid rgba(255, 255, 255, 0.14); } html.dark .job-card-cover-badge.tone-amber { color: #fbbf24; } html.dark .job-card-cover-badge.tone-rose { color: #fb7185; } html.dark .job-card-cover-badge.tone-purple { color: #93c5fd; } html.dark .job-card-cover-badge.tone-emerald { color: #34d399; } html.dark .job-card-cover-badge.tone-blue { color: #60a5fa; } html.dark .job-card-cover-badge.tone-slate { color: #94a3b8; } /* "岛上精选" card row — the light cards were too stark on the dark page and kept several low-contrast text runs. Bring the whole showcase onto the same elevated dark surface as the feed cards. */ html.dark .spotlight-sub { color: #a1a1ab; } html.dark .spotlight-card { background: radial-gradient(120% 90% at 100% 0%, rgba(245,179,1,0.08), transparent 60%), linear-gradient(135deg, #172134 0%, #151e32 100%); border-color: rgba(147,197,253,0.18); box-shadow: 0 20px 46px -22px rgba(0,0,0,0.72); } html.dark .spotlight-card:hover { border-color: rgba(147,197,253,0.36); box-shadow: 0 24px 54px -24px rgba(0,0,0,0.82); } html.dark .spotlight-card-ribbon { color: #fcd34d; background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.34); } html.dark .spotlight-card-logo { background: #f4f4f6; color: #0e0e10; border-color: rgba(255,255,255,0.12); } html.dark .spotlight-card-org, html.dark .spotlight-card-intro, html.dark .spotlight-card-loc { color: #c4c4cd; } html.dark .spotlight-card-role { color: #f5f5f7; } html.dark .spotlight-card-tag { background: rgba(96,165,250,0.16); color: #bfdbfe; box-shadow: inset 0 0 0 1px rgba(147,197,253,0.18); } html.dark .spotlight-card-cta { color: #93c5fd; } /* Pain-point scene mock-ups — their white inner cards flip to dark via the tier-1 surface rule, but these inner text runs kept light-mode colors and vanished. Lift bullets/queries to body gray and the hand-written accents to their dark-mode hues. */ html.dark .scene-search-query, html.dark .scene-search-query-static, html.dark .scene-rich-jd-bullet { color: #c4c4cd; } html.dark .scene-rich-jd-byline { color: #5eead4; } html.dark .scene-post-contact-handle { color: #93c5fd; } /* Focused pain-card index number — the violet active state (#0a87f7) only just cleared large-text contrast; brighten it for the dark page. */ html.dark .pain-card:hover .pain-face-front .editorial-no, html.dark .pain-face-back .editorial-no, html.dark .editorial-no:hover { color: #60a5fa; } /* Detail-sheet category + poster-type badges — light mode uses deep colored text on a faint tint; those deep hues (slate/emerald/blue) all but vanish on #151e32. Lift each tone to its ~400-level variant so the colour cue survives while clearing contrast. Tint backgrounds stay as-is (subtle chips). */ html.dark .job-card-badge.tone-amber { color: #fbbf24; } html.dark .job-card-badge.tone-rose { color: #fb7185; } html.dark .job-card-badge.tone-purple { color: #93c5fd; } html.dark .job-card-badge.tone-emerald { color: #34d399; } html.dark .job-card-badge.tone-blue { color: #60a5fa; } html.dark .job-card-badge.tone-slate { color: #94a3b8; } /* Detail-sheet contact CTA label ("复制邮箱" / "想要应聘") — was #5a5a62. */ html.dark .sheet-cta-label { color: #a1a1ab; } /* Publish-modal field labels — the #0969da violet eyebrows ("公司/学校", "岗位类型" …) drop to ~2.4:1 on the dark form; lift to the dark accent. Required-empty error red also brightens so it stays legible. */ html.dark .publish-live-section-label, html.dark .publish-chipgroup-label { color: #93c5fd; } html.dark .publish-chipgroup.is-required-empty .publish-chipgroup-label { color: #fca5a5; } /* Settings modal — inactive nav items + field labels kept #5a5a62; the hover/active states were already themed but the resting colour wasn't. */ html.dark .settings-nav-item { color: #c4c4cd; } html.dark .settings-field-label { color: #c4c4cd; } /* ----- Detail modal section labels (eyebrow above each section) — already a brand-purple accent that reads on both modes; leave as-is, but bump body text via the override above. ----- */ /* ----- Pain scene mock-up internals — these draw tiny social/desktop previews using hairlines and tonal blocks. Their hardcoded rgba(14,14,16,...) lines vanish on dark; lift to light alphas. ----- */ html.dark .editorial-rule, html.dark .scene-post-line { background: rgba(255, 255, 255, 0.14) !important; } html.dark .scene-post-head-name { background: rgba(255, 255, 255, 0.1); } html.dark .scene-date-value { color: #d4d4dc; } html.dark .scene-post-redact-block { background: rgba(255, 255, 255, 0.18); } html.dark .scene-msg-avatar, html.dark .scene-post-head-avatar { background: rgba(255, 255, 255, 0.18); } /* The "看我们怎么做 →" / "← 回到痛点" hint at corner */ html.dark .pain-flip-cue { color: #a6a6ad; } /* Focus highlight + nav arrows on dark — violet glow reads on #151e32, and the arrows flip to a dark chip instead of a glaring white disc. */ html.dark .pain-card:hover .pain-face, html.dark .pain-card.is-active .pain-face { border-color: rgba(96, 165, 250, 0.6); box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.7); } html.dark .pain-arrow { background: rgba(24, 35, 55, 0.9); border-color: rgba(255, 255, 255, 0.12); color: #c8c8d0; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6); } html.dark .pain-arrow:hover { background: #202d45; color: #93c5fd; } /* ----- Hero canvas — same painted island scene, night version: moonlit sky, lit lighthouse windows. The illustration carries the dark mood itself, so no extra tint/overlay is layered on top. ----- */ html.dark .hero-bg-glow { background: url("/assets/bg-night.png") 72% center / cover no-repeat; } /* Feed-card cover stripes — collapse the pink/blue/amber pastel tones (classes keep their legacy tone-pink/-violet/-amber names) to one neutral graphite gradient (they already get a flat dark via the tier-1 surface rule, but tone-* rules can still bleed in via specificity timing on first paint). ----- */ html.dark .job-card-cover.tone-pink, html.dark .job-card-cover.tone-violet, html.dark .job-card-cover.tone-amber { background: radial-gradient(ellipse 80% 100% at 30% 0%, rgba(255, 255, 255, 0.06), transparent 60%), linear-gradient(135deg, #202d45 0%, #1a253a 50%, #162033 100%); } /* ----- Form fields ----- */ html.dark .field-input, html.dark .field-textarea, html.dark .publish-contact-field { background: #16161b; color: #ececf1; border-color: rgba(255, 255, 255, 0.14); } html.dark .field-input::placeholder, html.dark .field-textarea::placeholder { color: #76767e; } html.dark .field-input:focus, html.dark .field-textarea:focus { border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06); } /* ----- Atmospheric banner — light mode is a soft sky/azure wash; dark mode keeps the geometry (same radial highlights) but drops the color so the banner reads as a quiet graphite plate. ----- */ html.dark .cta-banner { background: radial-gradient(ellipse 75% 65% at 18% 20%, rgba(255, 255, 255, 0.08), transparent 60%), radial-gradient(ellipse 58% 78% at 85% 50%, rgba(255, 255, 255, 0.05), transparent 60%), linear-gradient(180deg, #172134 0%, #141d30 60%, #121a2c 100%); border-color: rgba(255, 255, 255, 0.08); color: #ececf1; } /* Sheet-CTA — light mode is a soft brand-tinted plate; dark mode collapses to a flat neutral surface to match the rest of the dark sheet. */ html.dark .sheet-cta { background: linear-gradient(135deg, #202d45 0%, #192438 100%); border-color: rgba(255, 255, 255, 0.1); color: #ececf1; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.6); } html.dark .sheet-cta:hover { background: linear-gradient(135deg, #25334b 0%, #1f2c42 100%); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.7); } /* ----- Modal backdrop slightly darker so the dark card still floats ----- */ html.dark .modal-backdrop { background: rgba(0, 0, 0, 0.65); } /* ----- Publish success overlay sits over the live card preview; flip its opaque cream wash to an opaque dark wash. ----- */ html.dark .publish-success-overlay { background: rgba(12, 19, 34, 0.96); } html.dark .publish-confirm-overlay { background: rgba(12, 19, 34, 0.96); } html.dark .publish-confirm-discard { color: #ff7a6b; border-color: rgba(255, 122, 107, 0.4); } html.dark .publish-confirm-discard:hover { background: rgba(255, 122, 107, 0.12); border-color: rgba(255, 122, 107, 0.6); } /* ----- Tailwind utility text colors (hardcoded #hex) — bump them up ----- */ html.dark .text-\[\#0e0e10\] { color: #ffffff !important; } html.dark .text-\[\#38383d\] { color: #c4c4cd !important; } html.dark .text-\[\#5a5a62\] { color: #a6a6ad !important; } html.dark .text-\[\#94949c\] { color: #8b8b94 !important; } html.dark .text-\[\#cfcfd4\] { color: #5a5a64 !important; } /* hover variants — Tailwind compiles `hover:text-[#0e0e10]` separately */ html.dark .hover\:text-\[\#0e0e10\]:hover { color: #ffffff !important; } /* ----- Inline-style escape hatch: a few elements set color via the style attribute (e.g. style="color:#0e0e10") which beats class selectors. Add this so those still flip in dark mode. ----- */ html.dark [style*="color:#0e0e10"], html.dark [style*="color: #0e0e10"], html.dark [style*="color:#1a1a1d"], html.dark [style*="color: #1a1a1d"] { color: #ececf1 !important; } html.dark [style*="background:#0e0e10"], html.dark [style*="background: #0e0e10"] { background: #ececf1 !important; } /* Inline `border-color: rgba(14,14,16, ...)` hairlines lose all contrast on a dark page — flip them to a faint white tint so the dividers still read. */ html.dark [style*="border-color: rgba(14,14,16"], html.dark [style*="border-color: rgba(14, 14, 16"], html.dark [style*="border-color:rgba(14,14,16"] { border-color: rgba(255, 255, 255, 0.1) !important; } /* ----- Generic Tailwind border-color utilities ----- */ html.dark .border-\[\#e6e1ed\] { border-color: rgba(255, 255, 255, 0.08) !important; }