/* User Provided Stylesheet */ /* Elements of fMRI — book interior theme "Warm paper, neural signal": warm off-white ground, blue-slate ink, Fraunces display serif + Inter body, amber energy accents. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --efmri-bg: #faf8f4; --efmri-bg-2: #f2efe8; --efmri-ink: #1a2332; --efmri-muted: #646b75; --efmri-line: #e3dfd6; --efmri-amber: #e9b949; --efmri-amber-deep: #c7931a; --efmri-amber-soft: #fbf0d0; --efmri-steel: #6f8fb0; } /* Ground + body type */ html body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Headings in Fraunces */ article h1, article h2, article h3, main h1, main h2, main h3 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -0.01em; } article h1, main h1 { font-variation-settings: 'opsz' 144, 'SOFT' 40; } /* Code */ code, pre, kbd, samp { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; } /* Light-mode ground: warm paper instead of stark white. IMPORTANT: apply ONLY when neither dark marker is present — the theme toggles dark mode via a class on , not a data-theme attribute. */ html:not(.dark):not([data-theme='dark']) body { background-color: var(--efmri-bg); } /* Dark-mode adjustments for our custom elements */ html.dark .eq-where, html[data-theme='dark'] .eq-where { color: #a7aeb8; } html.dark .eq-tip .eq-tip-text, html[data-theme='dark'] .eq-tip .eq-tip-text { background: #f5f2ec; color: #1a2332; } /* Amber-accented details */ article a, main a { text-decoration-thickness: 1px; text-underline-offset: 2px; transition: text-decoration-thickness 0.15s ease; } article a:hover, main a:hover { text-decoration-thickness: 2px; } /* Admonitions as paper cards with amber rule */ aside.admonition, div.admonition { border-radius: 10px; border-left: 3px solid var(--efmri-amber); } /* Dropdown (quiz) affordance */ details summary { cursor: pointer; } details summary:hover { color: var(--efmri-amber-deep); } /* --- Run-affordance additions ------------------------------------------- */ /* Label next to the thebe "start compute environment" power icon */ button[aria-label="start compute environment"] { position: relative; overflow: visible; } button[aria-label="start compute environment"]::after { content: '▶ Click for interactive code'; position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--efmri-amber-soft); color: #8a6410; border: 1px solid var(--efmri-amber); padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; } html.dark button[aria-label="start compute environment"]::after { background: #3b3110; color: #f3d98a; border-color: #8a6410; } @media (max-width: 900px) { button[aria-label="start compute environment"]::after { display: none; } } /* Floating quick-run card (bottom right, wide screens only) */ .run-quick { display: none; } @media (min-width: 1280px) { .run-quick { display: block; position: fixed; right: 18px; bottom: 18px; z-index: 40; background: #ffffff; border: 1px solid var(--efmri-line); border-left: 3px solid var(--efmri-amber); border-radius: 12px; padding: 10px 14px; box-shadow: 0 12px 32px -12px rgba(26, 35, 50, 0.3); font-size: 0.85rem; max-width: 280px; } html.dark .run-quick { background: #1f2937; border-color: #374151; border-left-color: var(--efmri-amber); } } /* --- Book tile (floating, all pages) ------------------------------------- */ .book-tile { display: none; } @media (min-width: 1280px) { .book-tile { display: block; position: fixed; right: 18px; bottom: 18px; z-index: 39; background: #ffffff; border: 1px solid var(--efmri-line); border-left: 3px solid var(--efmri-steel); border-radius: 12px; padding: 10px 14px; box-shadow: 0 12px 32px -12px rgba(26, 35, 50, 0.3); font-size: 0.82rem; max-width: 250px; line-height: 1.45; } html.dark .book-tile { background: #1f2937; border-color: #374151; border-left-color: var(--efmri-steel); } .book-tile img { float: left; width: 44px !important; height: 57px !important; max-width: 44px !important; object-fit: cover; margin: 2px 10px 4px 0 !important; border-radius: 3px; box-shadow: 0 4px 10px -4px rgba(26,35,50,.5); display: block; } .book-tile p { margin: 0; overflow: hidden; } /* run-quick sits well above the book tile on code pages (book tile can be ~5 lines tall) */ .run-quick { bottom: 170px; } .book-tile { font-size: 0.78rem; max-width: 250px; max-height: 138px; overflow: hidden; } } /* --- Equation where-lines + whole-equation hover tooltip ----------------- */ .eq-where { font-size: 0.92em; color: var(--efmri-muted); margin: -0.4rem 0 1rem; } .eq-tip { position: relative; } .eq-tip .eq-tip-text { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 6px); z-index: 30; background: var(--efmri-ink); color: #f5f2ec; border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; line-height: 1.5; width: max-content; max-width: 460px; box-shadow: 0 12px 32px -12px rgba(26, 35, 50, 0.5); } .eq-tip:hover .eq-tip-text { display: block; } /* --- Book-figure rights deterrent ---------------------------------------- */ figure.book-figure img, .book-figure img { pointer-events: none; -webkit-user-drag: none; user-select: none; }