* { box-sizing: border-box; } /* Thin, low-contrast scrollbar (Firefox). */ html { scrollbar-width: thin; scrollbar-color: rgba(136, 136, 136, 0.5) transparent; } /* Same idea for WebKit/Blink browsers: a slim thumb inset from the track via a transparent border, so it reads as a thin floating bar rather than the OS's default chunky scrollbar. */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(136, 136, 136, 0.5); background-clip: content-box; border: 2px solid transparent; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(136, 136, 136, 0.8); } /* Same variables/theme logic as the main pedro-nunez.github.io site, so this page looks and behaves identically in light/dark mode -- kept as an independent copy since these two repos share no build step. */ :root { --bg-color: #f0f0f1; --sidebar-bg-color: #e4e4e6; --text-color: #000; --accent-color: #7b1e3a; } /* Falls back to the system's light/dark preference when no manual choice has been stored yet (see assets/js/theme-toggle.js). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-color: #1a1a1a; --sidebar-bg-color: #262626; --text-color: #e8e8e8; --accent-color: #daa520; } } /* Manual override, set as a data-theme attribute on once the visitor has clicked the toggle button; wins over the system preference above regardless of which way it goes. */ :root[data-theme="dark"] { --bg-color: #1a1a1a; --sidebar-bg-color: #262626; --text-color: #e8e8e8; --accent-color: #daa520; } body { margin: 0; font-family: "Source Sans 3", sans-serif; font-size: 1.125rem; line-height: 1.5; background: var(--bg-color); color: var(--text-color); } h1 { text-align: center; /* .page-content's own top padding already clears the fixed info/theme toggles above it, so the default browser margin here would just double that spacing. */ margin-top: 0; } h2 { margin-top: 2.5rem; } /* No sidebar/nav on this single-page site, so the content column just needs to be centered -- extra top padding clears the fixed info/theme toggles in the corners above it. */ .page-wrap { display: flex; justify-content: center; } .page-content { width: 100%; max-width: 55rem; /* Bottom padding clears .last-updated-bar's height, so real content never sits directly behind the label -- only the fade behind it. */ padding: 3rem 3rem 4rem; } /* Fixed corner elements standing in for the main site's nav: the info toggle (top-left) and theme toggle (top-right). Both are anchored by their vertical center (top + translateY(-50%)) rather than their top edge, at the same 1.9rem point, so the two buttons share a horizontal center line even though they're differently sized -- see .info-toggle below, which is smaller than this one. */ .theme-toggle { align-items: center; background: none; border: none; color: #888; cursor: pointer; display: flex; justify-content: center; padding: 0.4rem; position: fixed; top: 1.9rem; right: 0.75rem; transform: translateY(-50%); z-index: 30; } .theme-toggle:hover { color: var(--accent-color); } /* Fixed full-width strip along the bottom, so the label always has room to sit in without overlapping scrolled-up content -- the gradient fades any content scrolling underneath into the background color before it reaches the label's own line. pointer-events: none since the bar has no interactive content of its own; without it, the bar would block clicks on real content underneath, since it visually overlaps the very bottom of the page. */ .last-updated-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 3rem; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 0.75rem 0.75rem; background: linear-gradient(to bottom, transparent, var(--bg-color) 65%); pointer-events: none; z-index: 5; } .last-updated { margin: 0; color: #888; font-size: 0.8em; line-height: 1; opacity: 0.7; } .event-link { color: var(--accent-color); text-decoration: none; } .event-link:visited { color: var(--accent-color); } .event-link:hover { text-decoration: underline; } /* Outline style: always transparent, text-color border and text -- switches to the accent color on hover. */ .button { display: block; width: fit-content; margin: 0 auto; padding: 0.2rem 0.5rem; border: 1px solid var(--text-color); border-radius: 0.25rem; font-size: 0.9em; background: none; color: var(--text-color); text-decoration: none; opacity: 0.55; } .button:visited { color: var(--text-color); } .button:hover { border-color: var(--accent-color); color: var(--accent-color); opacity: 1; } /* Mobile-only top bar (see the @media block below). Hidden on desktop, where the title is the in-page

and the info/theme toggles just float in the corners above it instead. */ .topbar { display: none; } .topbar-title { font-weight: bold; } /* Info toggle, fixed top-left symmetrically to .theme-toggle top-right; reveals a short explanatory popup on click. Anchored at the same 1.9rem vertical center as .theme-toggle (see above) so it lines up with it despite being the smaller of the two. */ .info-toggle-wrap { position: fixed; top: 1.9rem; left: 0.75rem; transform: translateY(-50%); z-index: 30; } .info-toggle { align-items: center; background: none; border: none; color: #888; cursor: pointer; display: flex; font-size: 1rem; justify-content: center; line-height: 1; padding: 0.4rem; } .info-toggle:hover { color: var(--accent-color); } .info-popup { background: var(--sidebar-bg-color); border: 1px solid rgba(128, 128, 128, 0.4); border-radius: 0.4rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); font-size: 1rem; font-weight: normal; left: 0; margin-top: 0.5rem; padding: 1rem 1.25rem; position: absolute; text-align: left; top: 100%; width: min(22rem, 85vw); z-index: 10; } .info-popup p { margin: 0 0 0.75rem; } .info-popup p:last-child { margin-bottom: 0; } .info-popup p.info-popup-credit { color: #888; text-align: center; font-size: 0.85em; margin-top: 1rem; } .info-popup-credit a { color: inherit; text-decoration: none; } .info-popup-credit a:hover { color: var(--accent-color); } @media (max-width: 768px) { /* Smaller than desktop's 18px -- reads better at typical phone viewing distance/density than the size chosen for desktop. */ body { font-size: 1rem; } .page-content { padding: 3rem 1.25rem 3.5rem; } /* .topbar shows the title on mobile instead, so the in-page one would just duplicate it. */ h1 { display: none; } .topbar { align-items: center; background: var(--sidebar-bg-color); border-bottom: 1px solid var(--text-color); display: flex; height: 3rem; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 20; } /* Re-centered on the topbar's own vertical midpoint (half its 3rem height) instead of the 1.9rem point used on desktop, so both buttons sit on the bar's center line regardless of their own height. */ .info-toggle-wrap, .theme-toggle { top: 1.5rem; transform: translateY(-50%); } }