/* ============================================================================ * Abbreviations / Glossary — shared site-wide utility * ---------------------------------------------------------------------------- * Paired with _includes/abbreviations-section.html and assets/js/abbreviations.js. * Each consuming page passes its own dataset; CSS is dataset-agnostic. * * BEM-ish prefixes: * .abbr-section* — collapsible summary + body * .abbr-grid — responsive 2+ column card grid * .abbr-card* — individual term card * .abbr-trigger — auto-decorated inline term in body content * .abbr-link — author-marked inline term inside a modal body * .abbr-modal* — modal stack rendered into * ============================================================================ */ /* ---- Inline triggers (auto-decorated or author-marked) ------------------- */ .abbr-trigger { border-bottom: 1px dotted var(--c-accent); cursor: help; text-decoration: none; color: inherit; } .abbr-trigger:hover, .abbr-trigger:focus-visible { background: var(--c-accent-bg); color: var(--c-accent); outline: none; } /* ---- Collapsible section -------------------------------------------------- */ .abbr-section { margin-bottom: var(--space-md); border: 1px solid var(--c-border); border-radius: var(--border-radius); background: var(--c-surface); } .abbr-section__summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); color: var(--c-text); user-select: none; border-radius: var(--border-radius); transition: background var(--transition-fast); } .abbr-section__summary::-webkit-details-marker { display: none; } .abbr-section__summary::marker { display: none; content: ""; } .abbr-section__summary:hover { background: var(--c-surface-alt); } .abbr-section__summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* When open, pin the summary just below the site header so users can collapse without scrolling back to the top. */ .abbr-section[open] > .abbr-section__summary { position: sticky; top: var(--header-height, 3.75rem); z-index: 9; background: var(--c-surface); border-bottom: 1px solid var(--c-border); border-radius: var(--border-radius) var(--border-radius) 0 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .abbr-section__title { font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; } .abbr-section__count { font-size: 0.78rem; color: var(--c-text-muted); background: var(--c-surface-alt); border: 1px solid var(--c-border); padding: 0.1rem 0.55rem; border-radius: 999px; font-weight: 500; font-variant-numeric: tabular-nums; } .abbr-section__toggle { margin-left: auto; font-size: 0.85rem; font-weight: 500; color: var(--c-accent); display: inline-flex; align-items: center; gap: 0.4rem; } .abbr-section__toggle::after { content: "▾"; font-size: 0.7rem; transition: transform var(--transition-fast); } .abbr-section[open] > .abbr-section__summary .abbr-section__toggle::after { transform: rotate(180deg); } .abbr-section__toggle [data-toggle-hide] { display: none; } .abbr-section[open] > .abbr-section__summary .abbr-section__toggle [data-toggle-show] { display: none; } .abbr-section[open] > .abbr-section__summary .abbr-section__toggle [data-toggle-hide] { display: inline; } .abbr-section__body { padding: var(--space-md) var(--space-lg) var(--space-lg); } .abbr-section__intro { margin: 0 0 var(--space-md); font-size: 0.9rem; color: var(--c-text-muted); } /* ---- Card grid ----------------------------------------------------------- */ .abbr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.75rem; } .abbr-grid > li { margin: 0; } .abbr-grid .abbr-card { width: 100%; } @media (max-width: 40rem) { .abbr-section__summary { padding: var(--space-sm) var(--space-md); } .abbr-section__body { padding: var(--space-sm) var(--space-md) var(--space-md); } .abbr-grid { grid-template-columns: 1fr; } } .abbr-card { display: flex; flex-direction: column; gap: 0.25rem; text-align: left; padding: 0.85rem 1rem; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--border-radius); cursor: pointer; font: inherit; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .abbr-card:hover, .abbr-card:focus-visible { background: var(--c-surface-alt); border-color: var(--c-accent-border); outline: none; } .abbr-card:active { transform: translateY(1px); } .abbr-card__term { font-weight: 700; font-size: 1rem; color: var(--c-accent); letter-spacing: 0.02em; } .abbr-card__expansion { font-size: 0.85rem; font-weight: 600; color: var(--c-text); } .abbr-card__plain { font-size: 0.85rem; color: var(--c-text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .abbr-card__hint { font-size: 0.78rem; color: var(--c-text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0.85; } .abbr-card--has-plain .abbr-card__hint { padding-top: 0.25rem; margin-top: 0.1rem; border-top: 1px dashed var(--c-border); } /* ---- Modal stack --------------------------------------------------------- */ .abbr-modal { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding: var(--space-md); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .abbr-modal[hidden] { display: none; } .abbr-modal__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .abbr-modal__panel { position: relative; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--border-radius); padding: var(--space-lg); max-width: 32rem; width: 100%; margin: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } .abbr-modal__term { margin: 0 2.5rem 0.5rem 0; font-size: 1.25rem; color: var(--c-accent); } .abbr-modal__expansion { margin: 0 0 0.75rem; font-weight: 600; color: var(--c-text); } .abbr-modal__body { margin: 0; line-height: 1.55; color: var(--c-text-muted); } .abbr-modal__body p { margin: 0; } /* ---- Plain-English block (beginner-first) ------------------------------- */ .abbr-modal__plain { margin: 0 0 0.85rem; padding: 0.75rem 0.85rem; background: var(--c-accent-bg, var(--c-surface-alt)); border: 1px solid var(--c-accent-border, var(--c-border)); border-radius: var(--border-radius); } .abbr-modal__plain-label { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 0.4rem; } .abbr-modal__plain-body { color: var(--c-text); line-height: 1.55; font-size: 0.95rem; } .abbr-modal__plain-body p { margin: 0; } /* ---- Collapsible interpretation table + technical detail ---------------- */ .abbr-modal__interpretation, .abbr-modal__technical { margin: 0 0 0.65rem; border: 1px solid var(--c-border); border-radius: var(--border-radius); background: var(--c-surface); } .abbr-modal__interpretation > summary, .abbr-modal__technical > summary { list-style: none; cursor: pointer; padding: 0.55rem 0.85rem; font-size: 0.85rem; font-weight: 600; color: var(--c-text); user-select: none; border-radius: var(--border-radius); display: flex; align-items: center; gap: 0.5rem; transition: background var(--transition-fast); } .abbr-modal__interpretation > summary::-webkit-details-marker, .abbr-modal__technical > summary::-webkit-details-marker { display: none; } .abbr-modal__interpretation > summary::marker, .abbr-modal__technical > summary::marker { display: none; content: ""; } .abbr-modal__interpretation > summary::after, .abbr-modal__technical > summary::after { content: "▾"; margin-left: auto; font-size: 0.7rem; color: var(--c-text-muted); transition: transform var(--transition-fast); } .abbr-modal__interpretation[open] > summary::after, .abbr-modal__technical[open] > summary::after { transform: rotate(180deg); } .abbr-modal__interpretation > summary:hover, .abbr-modal__technical > summary:hover { background: var(--c-surface-alt); } .abbr-modal__interpretation > summary:focus-visible, .abbr-modal__technical > summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .abbr-modal__technical .abbr-modal__body { padding: 0.65rem 0.85rem 0.85rem; border-top: 1px solid var(--c-border); } .abbr-modal__footnote { margin: 0; padding: 0.6rem 0.85rem 0.75rem; font-size: 0.8rem; color: var(--c-text-muted); font-style: italic; line-height: 1.5; border-top: 1px solid var(--c-border); } /* ---- Interpretation table ----------------------------------------------- */ .abbr-interp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--c-border); } .abbr-interp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .abbr-interp-table th, .abbr-interp-table td { padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-border); color: var(--c-text); } .abbr-interp-table th { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text-muted); background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border); white-space: nowrap; } .abbr-interp-table tbody tr:nth-child(even) td { background: var(--c-surface-alt); } .abbr-interp-table tbody tr:last-child td { border-bottom: 0; } .abbr-interp-table__head { font-weight: 600; white-space: nowrap; color: var(--c-accent); font-variant-numeric: tabular-nums; } @media (max-width: 40rem) { .abbr-interp-table { font-size: 0.8rem; } .abbr-interp-table th, .abbr-interp-table td { padding: 0.4rem 0.55rem; } /* Wrap example code to panel width so the modal doesn't create its own horizontal scrollbar on phones. The line breaks in the YAML are preserved by pre-wrap. */ .abbr-modal__example { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; } } .abbr-modal__close { position: absolute; top: 0.5rem; right: 0.6rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-text-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.6rem; min-width: 2rem; min-height: 2rem; z-index: 2; } .abbr-modal__close:hover { color: var(--c-text); } .abbr-modal__close:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } @media (max-width: 40rem) { .abbr-modal { padding: 0.5rem; } .abbr-modal__panel { padding: 0.9rem; border-radius: var(--border-radius); } .abbr-modal__term { font-size: 1.1rem; } .abbr-modal__plain { padding: 0.6rem 0.7rem; } .abbr-modal__plain-body { font-size: 0.92rem; } .abbr-modal__interpretation > summary, .abbr-modal__technical > summary { padding: 0.5rem 0.65rem; } .abbr-modal__footnote { padding: 0.5rem 0.7rem 0.6rem; } .abbr-interp-table { font-size: 0.78rem; } .abbr-interp-table th, .abbr-interp-table td { padding: 0.35rem 0.4rem; } .abbr-interp-table th { white-space: normal; } .abbr-interp-table td { word-break: break-word; overflow-wrap: anywhere; } .abbr-interp-table__head { white-space: normal; } /* Allow cross-reference terms to wrap on narrow screens so they don't push the modal beyond the viewport. */ .abbr-modal .abbr-link { white-space: normal; } } /* Inline cross-references inside modal bodies. `white-space: nowrap` keeps multi-word terms ("Photon Energy", "COSPAS-SARSAT", "Ka-band") on a single line so the underline doesn't break across line wraps. */ .abbr-link { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; cursor: pointer; white-space: nowrap; transition: color var(--transition-fast), background var(--transition-fast); border-radius: 2px; } .abbr-link:hover, .abbr-link:focus-visible { color: var(--c-text); background: var(--c-accent-bg); outline: none; } .abbr-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* Lock background scrolling while any abbreviation modal is open. */ body.abbr-modal-open { overflow: hidden; } /* Optional example block inside the modal (opt-in via entry.example). Mirrors the cmd-cheat-sheet .cmd-examples styling so the visual language stays consistent across both surfaces. */ .abbr-modal__example-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--c-text-muted); margin: 0.5rem 0 0.3rem; } .abbr-modal__example { margin: 0 0 var(--space-md); padding: 0.6rem 0.8rem; background: var(--c-surface-alt); border: 1px solid var(--c-border-light); border-radius: var(--border-radius-sm, 4px); font-size: 0.82rem; line-height: 1.55; overflow-x: auto; white-space: pre; color: var(--c-text); } .abbr-modal__example code { font-family: var(--f-mono); background: transparent; border: 0; padding: 0; color: inherit; } /* Tiny visual hint on cards that carry an example */ .abbr-card--has-example .abbr-card__term::after { content: " ▸"; color: var(--c-accent); font-size: 0.8em; }