/* * style.css — updated: single‐scroll container + side‐by‐side menu & content */ /* @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap'); */ /* 0) Global reset for all documents */ html { box-sizing: border-box; margin: 0; padding: 0; overflow: visible; } *, *::before, *::after { box-sizing: inherit; } body { /* I am not liking any of the chosen fonts. Let's go with the default for now. */ /* font-family: "Atkinson Hyperlegible", Verdana, sans-serif; */ /*font-family: Verdana, sans-serif;*/ /* Too similar to the code font. */ /*font-family: Arial, sans-serif; */ /* Pretty good */ /*font-family: 'Inter', sans-serif;*/ /* Pretty good */ /*font-family: 'Times New Roman', Times, serif;*/ background-color: #f7f9fc; margin: 0; padding: 0 5px; /* horizontal gutters */ overflow: visible; } .skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 10000; padding: 0.6rem 0.85rem; border: 2px solid #fff; border-radius: 4px; background: #0f172a; color: #fff !important; font-weight: 700; transform: translateY(-160%); transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; } /* restore a monospace font for all code or pre */ code, pre { font-family: 'Fira Code', 'Source Code Pro', Menlo, Consolas, monospace; } strong { color: #003366; /* dark navy blue */ font-weight: 600; /* medium weight */ } /* Keep long equations within their page at reflow widths. */ mjx-container { max-width: calc(100vw - 12px) !important; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; } mjx-container[display="true"] { display: block; } /*-------------- header -----------------*/ header h1, header h2, header h3 { color: #DDDDDD; margin: 0.2em 0; padding: 0; } header h3 { font-style: italic; } header h4 { color: #DDDDDD; margin: 0.2em 0; padding: 0; font-size: .8em; } /*-------------------------------------------------------------*/ h1 { font-size: 1.5em; margin-bottom: .25em; } h2 { font-size: 1.25em; margin-bottom: .125em; } h3 { font-size: 1em; color: #002244; margin-bottom: .125em; } h4 { font-size: .85em; color: #003366; margin-bottom: .125em; } /* 1) Site layout (only on ) */ body.mainSite { display: flex; flex-direction: column; margin: 0 10px; overflow: visible; } body.mainSite #pageWrapper { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; max-width: 1050px; margin: 0 auto; background: #fff; } body.mainSite header { flex: 0 0 auto; padding: 8px 0; background-color: #4F7AA1; color: #fff; text-align: center; /* Reserve space for right-side logo; keep header tall enough for it */ padding-right: calc(var(--logo-size, 72px) + 16px); /*min-height: calc(var(--logo-size, 72px) + 12px);*/ } /* Header logo pinned to upper-right; responsive size */ :root { --logo-size: 80px; } /* Shrink logo on smaller screens to avoid overlap */ @media (max-width: 800px) { :root { --logo-size: 56px; } } @media (max-width: 500px) { :root { --logo-size: 40px; } } /* 2) Container holds menu + content and is the *only* scrollable area */ body.mainSite #container { display: flex; flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* 4) Main content area (iframe) */ body.mainSite #content { flex: 1 1 auto; width: 100%; min-width: 0; border: 1px solid #ccc; box-sizing: border-box; overflow: hidden; min-height: 0; } /* 3) Sidebar menu */ body.mainSite nav#menu { font-size: 1em; width: 190px; flex-shrink: 0; box-sizing: border-box; background-color: #e2e8f0; padding: 0.5em; overflow-y: auto; word-wrap: break-word; } body.mainSite nav#menu ul { list-style: none; padding-left: 0; margin: 0; } body.mainSite nav#menu ul ul { display: none; padding-left: 1em; } body.mainSite nav#menu li { margin-bottom: 0.3em; } body.mainSite nav#menu li.open > ul { display: block; } body.mainSite nav#menu li > .menu-section-toggle { display: flex; align-items: flex-start; gap: 0.4em; width: 100%; border: 0; border-radius: 2px; background: transparent; color: #1e293b; font: inherit; text-align: left; padding: 0; cursor: pointer; } body.mainSite nav#menu li ul { width: 100%; } /* base arrow size */ body.mainSite nav#menu li > .menu-section-toggle::before { content: "▶"; display: inline-block; width: 1em; font-size: 1em; text-align: center; line-height: 1; transition: transform 0.15s ease; transform-origin: center; margin-top: 0.15em; /* ⬅️ Add this line */ } /* smaller arrows for deeper levels */ body.mainSite nav#menu ul ul li > .menu-section-toggle::before { font-size: 0.9em; } body.mainSite nav#menu ul ul ul li > .menu-section-toggle::before { font-size: 0.8em; } body.mainSite nav#menu ul ul ul ul li > .menu-section-toggle::before { font-size: 0.7em; } body.mainSite nav#menu li.open > .menu-section-toggle::before { transform: rotate(90deg); } body.mainSite nav#menu li > .menu-section-toggle:hover { background-color: #94a3b8; } body.mainSite nav#menu a { color: #1e293b; text-decoration: none; } body.mainSite nav#menu a:hover { text-decoration: underline; } nav#menu .book-selector { margin-bottom: 0.55em; } nav#menu .book-selector label { display: block; margin-bottom: 0.2rem; color: #334155; font-size: 0.75em; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } nav#menu .book-selector select { width: 100%; box-sizing: border-box; border: 1px solid #94a3b8; border-radius: 4px; background: #f8fafc; color: #1e293b; padding: 0.3rem 0.35rem; font: inherit; font-size: 0.82em; } nav#menu .book-selector select:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; } nav#menu .book-context-note { margin: 0 0 0.55em; border-left: 3px solid #b7791f; background: #fffbeb; color: #713f12; padding: 0.35rem 0.4rem; font-size: 0.75em; line-height: 1.3; } nav#menu .menu-controls { margin-bottom: 0.5em; display: flex; flex-direction: column; gap: 0.3em; align-items: stretch; } nav#menu .menu-icon-controls { display: flex; gap: 0.25em; flex: 0 0 auto; justify-content: flex-start; } nav#menu .menu-icon-button { min-width: 1.45rem; width: 1.45rem; height: 1.45rem; border: 1px solid #94a3b8; background: #f8fafc; color: #1e3a5f; border-radius: 4px; cursor: pointer; font: inherit; font-size: 0.72em; line-height: 1; padding: 0; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } nav#menu .menu-icon-button:hover { background-color: #dbeafe; border-color: #64748b; color: #0f172a; } /* Highlight the displayed menu item */ body.mainSite nav#menu a.active { color: #064f91; background-color: #cbd5e1; /* Subtle slate background */ border-radius: 2px; padding: 2px 2px; } /*-------------------------------------------------------------*/ /* 5) Error message below iframe (if shown) */ body.mainSite #errorMessage { flex: 0 0 auto; align-self: flex-start; margin: 0.5em; } a { color: #02766b; text-decoration: none; padding-bottom: 0px; } a:hover { color: #024f9a; border-color: #559ecb; } /* 8) Error message (global) */ .error { padding: 1em; background-color: #fdd; color: #900; border: 1px solid #900; border-radius: 5px; margin-top: 1em; } /*-------------------------------------------------------------*/ /* 7) Problem-link styling (global) */ a.problem { color: #0366d6; text-decoration: none; padding-bottom: 1px; transition: color 0.2s, border-color 0.2s; } a.problem:hover { color: #024f9a; border-color: #559ecb; } /*-------------------------------------------------------------*/ /* 9) Resource-list link styling in main content */ .resource-list a { color: #02766b; text-decoration: none; padding-bottom: 0px; /*line-height: 1.75;*/ } .resource-list a:hover { color: #024f9a; border-color: #559ecb; } /*-------------------------------------------------------------*/ /* ====================== Glossary Tooltip CSS ====================== */ /* 1) Term styling */ .glossary-term { position: relative; cursor: help; /* (choose whatever color/decoration you like) */ color: #555555; /*text-decoration: underline dotted 1px;*/ /*text-underline-offset: 2px;*/ } /* 2) Tooltip container */ .glossary-term .tooltip-content { /* ── FORCE “content-box” so that max-width:50vw only limits the content area ── */ box-sizing: content-box !important; /* Hidden until hover */ /*display: none;*/ position: absolute; top: 0; /* adjust if you’d rather pop it slightly lower (e.g. top: 110%) */ background: #ffffff; border: 1px solid #ccc; padding: 0.5rem; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10); /* ── SHRINK-WRAP then expand up to 50vw of CONTENT ── */ display: inline-block; /* auto-size to content */ width: 50vw !important; /* Ensure normal wrapping at spaces, and break very long words if needed */ white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word; font-size: 0.9rem; line-height: 1.4; opacity: 0; pointer-events: auto; transition: opacity 150ms ease-in-out; z-index: 999; /* relative to iframe—parent’s menu lives outside */ } /* 3) Show only when hovering the term itself */ .glossary-term:hover .tooltip-content, .glossary-term.tooltip-open .tooltip-content { display: inline-block; opacity: 1; } /* 5) If you’re still using “.to-right” / “.to-left” classes for dynamic positioning: */ .glossary-term .tooltip-content.to-right { left: 100%; /* immediately to the right of the term */ margin-left: 0.4rem; /* small gap */ } .glossary-term .tooltip-content.to-left { right: 100%; /* immediately to the left of the term */ margin-right: 0.4rem; /* small gap */ } /* 5a) Centered tooltip (for terms in the middle third of the viewport) */ .glossary-term .tooltip-content.to-center { position: fixed; right: auto; transform: none; } /* when we add the .highlighted class, change bg/fg */ .glossary-term.highlighted { background-color: #e2e8f0; /* #cbd5e1 A little darker if I change my mind */ color: #333; /* darken text so it’s still readable */ border-radius: 2px; /* subtle rounding */ transition: background-color 0.2s ease; } @media (max-width: 700px) { body.mainSite { margin: 0; padding: 0; } body.mainSite #pageWrapper { max-width: 100%; } body.mainSite header { min-height: 76px; padding-left: 130px !important; padding-right: 8px !important; } body.mainSite header h1 { font-size: 1.05rem; color: #fff; } #siteLogo { left: 38px !important; width: 84px !important; height: 44px !important; } #siteLogo .wordmark { font-size: 1.9rem !important; } body.mainSite #container { position: relative; display: block; width: 100%; overflow: visible; } body.mainSite nav#menu { position: absolute; top: 0; left: 0; z-index: 100; width: min(19rem, calc(100% - 1rem)); max-height: calc(100vh - 1rem); border: 1px solid #94a3b8; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3); } #content-wrapper, body.mainSite #content { width: 100%; min-width: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* Visually hidden text that remains available to assistive technology. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }