/* macrostratstyles.css * * A curated set of styling patterns adapted from UW-Macrostrat's map info-drawer UI * (macrostrat.org/map, pulled directly from their live main.css on 2026-08-27) and * rockd.org, used as visual building blocks across this app -- NOT a wholesale import * of their stylesheet, and NOT a 1:1 class-name copy. Their site uses CSS-Modules * hash-suffixed class names (e.g. `panel-subhead-R_FHUs`, `described-age-bwqG0u`) * that are meaningless outside their own build -- these are plain, renamed * equivalents of the underlying rules those hashes pointed to, prefixed `mst-` so * they're easy to spot as coming from this file and won't collide with style.css. * * Fonts: Montserrat (headings/emphasis) contrasted against Source Sans Pro (body) -- * exactly the pairing macrostrat.org/map uses. PT Serif is our own addition for the * overview-page H1s specifically (matching the serif rockd.org itself moved to more * recently) -- not pulled from the old info-drawer UI. All three loaded via Google * Fonts link tags in index.html's . * * Where these are used today (2026-08-27): the four section-overview pages * (Paleo/Strat/Guides/Units templates in index.html) for headings + icon-boxes, and * the roadguide/strat-column source citation blocks (.rgnote, alongside .mst-reference). * .mst-note is ready for the strat column Notes column once that's wired into * printStratColumn's rendering (not done yet -- see STRAT_CHART_JOB.md). */ /* ---- Section subheadings -- their .infoDrawer-title / .panel-subhead pattern ---- */ .mst-subhead { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05em; letter-spacing: 0.02em; margin-top: 1.5em; margin-bottom: 0.4em; color: #222; } /* ---- Overview page H1 -- our own spin: serif, centered, distinct from every other H1 in the app (those stay plain per style.css's #datadiv h1 rule) ---- */ /* Selector scoped as "#datadiv .mst-overview-title" (not just ".mst-overview-title") on purpose: style.css has "#datadiv h1 { line-height: 100% }", an ID selector, which beats a plain class selector on specificity regardless of source order -- without the #datadiv prefix here, that rule would silently win and this line-height would never actually apply. */ #datadiv .mst-overview-title { font-family: 'PT Serif', Georgia, 'Times New Roman', serif; font-weight: 700; text-align: center; font-size: 1.7em; line-height: 1.25; margin: 0.2em 0 0.5em 0; letter-spacing: 0.01em; } /* ---- Icon box -- inspired by the icon-box-icon layout on the utahgeology.com overview (WordPress) pages: a section icon anchoring a short lead-in line ---- */ .mst-icon-box { display: flex; align-items: center; gap: 16px; margin: 0.6em 0 1.2em 0; } .mst-icon-box-icon { flex-shrink: 0; width: 56px; height: 56px; padding: 10px; border-radius: 50%; background: #f5f8fa; /* macrostrat's --accent-secondary-color */ border: 1px solid #e5e8eb; display: flex; align-items: center; justify-content: center; } .mst-icon-box-icon img { width: 100%; height: 100%; } .mst-icon-box-tagline { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 0.9em; color: #444; margin: 0; } /* ---- Tiny italic note -- their described-age style. Meant for strat column Notes (per-unit annotations) once that column is wired into rendering. ---- */ .mst-note { font-family: 'Source Sans Pro', sans-serif; font-style: italic; font-size: 11px; line-height: 14px; color: #666; } /* ---- Bold attribution/label text -- their .attr ---- */ .mst-attr { font-family: 'Montserrat', sans-serif; font-weight: 700; } /* ---- Reference/citation block -- their .reference, for our roadguide/strat column source citations (used alongside the existing .rgnote) ---- */ .mst-reference { font-family: 'Source Sans Pro', sans-serif; font-size: 12px; line-height: 16px; color: #555; } .mst-reference a { font-weight: bold; text-decoration: none; } /* ---- Expandable sub-sections (e.g. "Unit Images" / "More Information" on formation pages) -- inspired by macrostrat's info-drawer accordion sections, but built as plain
/ rather than a copy of their JS accordion component: free keyboard accessibility and no custom JS needed just to toggle open/closed. The main/ top section of a formation page is deliberately NOT wrapped in one of these -- only the secondary sub-sections are. ---- */ .mst-expando { border-top: 1px solid #e5e8eb; margin-top: 0.8em; padding-top: 0.2em; } .mst-expando > summary { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05em; cursor: pointer; list-style: none; padding: 0.6em 0.2em; display: flex; align-items: center; justify-content: space-between; color: #222; -webkit-tap-highlight-color: transparent; border-radius: 4px; } .mst-expando > summary::-webkit-details-marker { display: none; } .mst-expando > summary::after { content: '\25BE'; /* ▾ */ font-size: 0.85em; transition: transform 0.15s ease; color: #888; margin-left: 8px; } .mst-expando[open] > summary::after { transform: rotate(180deg); } .mst-expando > summary:hover { background: #f5f8fa; } /* macrostrat's --accent-secondary-color */ .mst-expando-body { padding: 0.2em 0.2em 1em 0.2em; } /* ---- Highlight span -- their .hl, handy for calling out a key term inline ---- */ .mst-highlight { font-style: normal; background-color: #24ddb4; font-weight: bold; padding: 2px 5px; border-radius: 3px; }