/** * Slightly brighter secondary copy + section micro-headings. * Load last in so these tokens override per-page :root. */ :root { --text-muted: rgba(255, 255, 255, 0.65); --text-label: rgba(255, 255, 255, 0.6); } html[data-theme="pro"] { --text-muted: #5f767b; --text-label: #2f6b73; } html[data-theme="default"] { --text-muted: #777777; --text-label: #444444; } /* All-caps strip labels that sat at --text-muted — nudge toward section tone */ .pulse-trending-label { color: var(--text-label); } /* Profile drawer — Dark / Light / Professional segmented control */ .profile-toggle-row--theme { flex-direction: column; align-items: stretch; gap: 0.55rem; } .nf-theme-segment { display: flex; flex-wrap: nowrap; gap: 0; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.12); box-sizing: border-box; } html[data-theme="pro"] .nf-theme-segment { background: #eef3f4; border: 1px solid rgba(45, 85, 90, 0.18); } html[data-theme="default"] .nf-theme-segment { background: #ebebeb; border: 1px solid #e8e8e8; } .nf-theme-segment__btn { flex: 1 1 0; min-width: 0; margin: 0; padding: 0.4rem 0.35rem; font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.72); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } html[data-theme="pro"] .nf-theme-segment__btn { color: #4a6568; } html[data-theme="default"] .nf-theme-segment__btn { color: #888888; } .nf-theme-segment__btn:hover { color: rgba(255, 255, 255, 0.95); } html[data-theme="pro"] .nf-theme-segment__btn:hover { color: #0b3a3a; } html[data-theme="default"] .nf-theme-segment__btn:hover { color: #1a1a1a; } .nf-theme-segment__btn--active { background: rgba(255, 255, 255, 0.12); color: var(--teal-light, #5BA4CF); } html[data-theme="pro"] .nf-theme-segment__btn--active { background: #fff; color: #0b3a3a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } html[data-theme="default"] .nf-theme-segment__btn--active { background: #fff; color: #5ba4cf; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } /* Profile drawer — accordion sections */ .profile-accordion { border-bottom: 1px solid rgba(255, 255, 255, 0.07); } html[data-theme="default"] .profile-accordion, html[data-theme="pro"] .profile-accordion { border-bottom-color: rgba(0, 0, 0, 0.08); } .profile-accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.25rem; background: none; border: none; color: #fff; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: left; transition: background 0.15s; } html[data-theme="default"] .profile-accordion-header, html[data-theme="pro"] .profile-accordion-header { color: var(--text, #152022); } .profile-accordion-header:hover { background: rgba(255, 255, 255, 0.04); } html[data-theme="default"] .profile-accordion-header:hover, html[data-theme="pro"] .profile-accordion-header:hover { background: rgba(0, 0, 0, 0.04); } .profile-accordion-header[aria-expanded="true"] { color: #5ba4cf; } .acc-chevron { font-size: 0.8rem; transition: transform 0.2s; color: rgba(255, 255, 255, 0.4); } html[data-theme="default"] .acc-chevron, html[data-theme="pro"] .acc-chevron { color: rgba(0, 0, 0, 0.35); } .profile-accordion-header[aria-expanded="true"] .acc-chevron { transform: rotate(180deg); color: #5ba4cf; } .profile-accordion-body { padding: 0 1.25rem 1.1rem; } .profile-panel-body .profile-label { font-size: 0.78rem; font-weight: 600; color: var(--text-label, var(--text-muted)); margin: 0 0 0.35rem; } .profile-toggle-label { font-size: 0.88rem; color: var(--text, #e2eaeb); } html[data-theme="default"] .profile-toggle-label, html[data-theme="pro"] .profile-toggle-label { color: var(--text, #152022); } .profile-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; } .profile-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .profile-toggle-track { position: absolute; inset: 0; border-radius: 999px; background: rgba(10, 10, 15, 0.9); border: 1px solid var(--border, rgba(91, 164, 207, 0.2)); transition: background 0.2s, border-color 0.2s; } .profile-toggle-track::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); top: 2px; left: 3px; transition: transform 0.2s, background 0.2s; } .profile-toggle-switch input:checked + .profile-toggle-track { background: rgba(91, 164, 207, 0.45); border-color: var(--teal-deep, #5ba4cf); } .profile-toggle-switch input:checked + .profile-toggle-track::after { transform: translateX(18px); background: var(--teal-light, #5ba4cf); } html[data-theme="default"] .profile-toggle-track { background: #e8e8e8; border-color: #ccc; } html[data-theme="pro"] .profile-toggle-track { background: #eef3f4; border-color: rgba(45, 85, 90, 0.22); }