/* ========================================================================== DAC Daily Nuggets Banner ========================================================================== */ .dac-nugget-banner { display: block; width: 100%; background: var(--dac-blue-light); border-left: 4px solid var(--dac-blue); border-radius: 0 12px 12px 0; padding: 20px 24px; margin-bottom: 28px; box-shadow: 0 2px 16px rgba(0, 72, 184, 0.06); box-sizing: border-box; } .dac-nugget-banner--fallback { border-left-color: var(--dac-border); background: var(--dac-surface-raised); } /* ── Theme-aware overrides (2026-07-06) ──────────────── Tutor 4.0's own light/dark theme switcher (Account → Preferences) sets data-tutor-theme on sitewide. This banner previously ignored it entirely (hardcoded light-blue background), so it stayed the same light blue even when a broker switched to dark — visibly out of place next to every other dashboard card, which does track the theme. Light: match the plain white card treatment used elsewhere on the page (stat cards, "Continue Learning" card) instead of a blue-tinted callout — Tyler's call, so it "stands out ... just like all the other things." */ html[data-tutor-theme="light"] .dac-nugget-banner { background: var(--dac-surface); } html[data-tutor-theme="light"] .dac-nugget-banner--fallback { background: var(--dac-surface-raised); } /* Dark: use Tutor's own dark surface token (same background its stat cards and other dashboard components already use in dark mode) rather than a parallel dac- dark palette, so this tracks Tutor's dark theme automatically instead of us maintaining a second copy of it. Blue accent (border, icon, attribution) switches to Tutor's own dark-mode brand blue, which is tuned for contrast against dark surfaces — DAC's own --dac-blue reads muddy there. */ html[data-tutor-theme="dark"] .dac-nugget-banner { background: var(--tutor-surface-l1); border-left-color: var(--tutor-text-brand); box-shadow: none; } html[data-tutor-theme="dark"] .dac-nugget-banner--fallback { background: var(--tutor-surface-l1); border-left-color: var(--tutor-border-idle); } html[data-tutor-theme="dark"] .dac-nugget-banner__icon { background: rgba(73, 121, 232, 0.16); color: var(--tutor-text-brand); } html[data-tutor-theme="dark"] .dac-nugget-message { color: var(--tutor-text-primary); } html[data-tutor-theme="dark"] .dac-nugget-banner--fallback .dac-nugget-message { color: var(--tutor-text-secondary); } html[data-tutor-theme="dark"] .dac-nugget-attribution { color: var(--tutor-text-brand); } /* ── Inner layout ─────────────────────────────────── */ .dac-nugget-banner__inner { display: flex; align-items: flex-start; gap: 14px; } /* ── Quote icon ───────────────────────────────────── */ .dac-nugget-banner__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(0, 72, 184, 0.10); border-radius: 8px; color: var(--dac-blue); margin-top: 2px; } .dac-nugget-banner__icon svg { width: 16px; height: 16px; display: block; } /* ── Content ──────────────────────────────────────── */ .dac-nugget-banner__content { flex: 1; min-width: 0; } /* ── Message text ─────────────────────────────────── */ .dac-nugget-message { font-size: 1rem; line-height: 1.65; font-weight: 500; color: var(--dac-text); margin: 0 0 8px; font-style: italic; } .dac-nugget-message p:last-child { margin-bottom: 0; } /* ── Attribution ──────────────────────────────────── */ .dac-nugget-attribution { font-size: 0.875rem; font-weight: 500; color: var(--dac-blue); letter-spacing: 0.01em; margin: 0; font-style: normal; } /* ── Fallback variant ─────────────────────────────── */ .dac-nugget-banner--fallback .dac-nugget-message { font-style: normal; color: var(--dac-muted); font-weight: 400; } /* ── Responsive ───────────────────────────────────── */ @media (max-width: 600px) { .dac-nugget-banner { padding: 16px 18px; border-radius: 0 8px 8px 0; } .dac-nugget-banner__inner { gap: 12px; } .dac-nugget-message { font-size: 0.9375rem; } } /* ── Bricks wrapper reset ─────────────────────────── */ /* When rendered via the Bricks element, the outer root div should be invisible */ [data-element-type="dac-daily-nugget"] > .dac-nugget-banner { margin-bottom: 0; }