/* * MDA Frontend CSS — Demo 2 * Visual Archive: Ruth Weiss Complete Works * * Character: warm dark archive, literary, quiet Jazz atmosphere, * document-like, good readability, presentation-quality. * * This is a fixed look — no preset system, no token infrastructure. * All design decisions are intentional and can be evolved later. * * Structure of this file: * 1. Design tokens (CSS custom properties) * 2. Archive shell & header * 3. Hierarchy navigation (Upper / Lower / Work buttons) * 4. Work panel & detail * 5. Media sections (images, audio, video, manuscript, additional) * 6. Lightbox * 7. Utility & accessibility * 8. Mobile (max-width: 700px) * 9. Reduced motion */ /* ═══════════════════════════════════════════════════════════════════════════ 1. Design tokens ═══════════════════════════════════════════════════════════════════════════ */ .mda-archive { /* Palette — warm dark archive, not cold black */ --mda-bg: #1a1714; /* warm near-black — aged paper in darkness */ --mda-bg-mid: #221f1b; /* slightly lighter surface for panels */ --mda-bg-panel: #262219; /* work detail panel — feels like card stock */ --mda-bg-hover: #2d2923; /* subtle hover lift */ --mda-text: #e8e0d0; /* warm off-white — readable, not clinical */ --mda-text-secondary: #a89880; /* muted warm tone for year, meta, captions */ --mda-text-faint: #8b7d6d; /* very muted — borders, decorative */ --mda-accent: #c8a96e; /* warm gold — archive lamp, manuscript ink */ /* 0.10.30.3 — footnote reference colour. Defaults to the current text colour so a theme link colour never bleeds through; the setting overrides this variable on .mda-archive. */ --mda-footnote-color: var(--mda-ui-text); --mda-accent-dim: #a88b57; /* dimmer gold for secondary accents */ --mda-accent-tint-05: rgba(200,169,110,0.05); /* accent-derived tints — */ --mda-accent-tint-08: rgba(200,169,110,0.08); /* default = exact frozen */ --mda-accent-tint-10: rgba(200,169,110,0.1); /* gold values; resolver */ --mda-accent-tint-12: rgba(200,169,110,0.12); /* swaps fixed enum values */ --mda-border: #3a3530; /* warm dark border */ --mda-border-light: #2e2a25; /* very subtle separator */ --mda-border-accent: #5a4e3a; /* accent-tinted border for active states */ --mda-focus: #c8a96e; /* same as accent — consistent */ --mda-error: #c87a6e; /* warm red — not alarming */ /* Typography */ --mda-font-ui: system-ui, -apple-system, "Segoe UI", sans-serif; --mda-font-text: Georgia, "Times New Roman", serif; /* Spacing & shape */ --mda-radius-sm: 4px; --mda-radius: 8px; --mda-radius-lg: 12px; --mda-gap: 12px; /* Motion — small, intentional, reduced-motion aware. Duration is driven by the MOTION token (none=0ms / subtle=160ms / standard=240ms), so motion=none fully disables all var(--mda-duration) transitions. The tempo scale below is a documented reference (V2.1 Motion Foundation); the four proven CSS-only hooks (chevron, accordion button-state, comfort-bar, hover/focus-visible) remain gated on --mda-duration so motion=none and prefers-reduced-motion both win. */ --mda-duration: 160ms; --mda-ease: cubic-bezier(0.4, 0, 0.2, 1); --mda-motion-fast: 120ms; --mda-motion-standard: 180ms; --mda-motion-calm: 240ms; --mda-ease-enter: cubic-bezier(0.4, 0, 0.2, 1); --mda-ease-leave: cubic-bezier(0.4, 0, 1, 1); /* Image preview width (set by shortcode attribute) */ --mda-image-preview-width: 420px; /* Sticky work-header offset — set at runtime by JS from the real visible fixed headers (admin bar, site header, …). Default 0px = stick to viewport top until measured / if JS is unavailable. */ --mda-sticky-work-header-offset: 0px; /* Apply base */ color: var(--mda-ui-text); background: var(--mda-ui-bg); font-family: var(--mda-font-ui); font-size: 16px; line-height: 1.6; max-width: 1060px; margin: 0 auto; padding: 18px 4px 20px; } .mda-archive * { box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════════════════ 1b. Effective UI colour layer (0.10.30.4) ═══════════════════════════════════════════════════════════════════════════ Every colour in this file resolves through --mda-ui-* instead of the raw token. The aliases are declared ON .mda-archive, never on :root, because a custom property is substituted at the element where it is DECLARED: an alias on :root would freeze the :root token value and would never see the visual preset that Visual_Preset_Resolver writes as an inline style on .mda-archive, nor the high-contrast override below. In preset mode the aliases resolve to exactly the tokens 0.10.30.3 already used, so the computed presentation is unchanged. */ .mda-archive { --mda-ui-bg: var(--mda-bg); --mda-ui-bg-mid: var(--mda-bg-mid); --mda-ui-bg-panel: var(--mda-bg-panel); --mda-ui-bg-hover: var(--mda-bg-hover); --mda-ui-text: var(--mda-text); --mda-ui-text-secondary: var(--mda-text-secondary); --mda-ui-text-faint: var(--mda-text-faint); --mda-ui-accent: var(--mda-accent); --mda-ui-accent-dim: var(--mda-accent-dim); --mda-ui-accent-tint-05: var(--mda-accent-tint-05); --mda-ui-accent-tint-08: var(--mda-accent-tint-08); --mda-ui-accent-tint-10: var(--mda-accent-tint-10); --mda-ui-accent-tint-12: var(--mda-accent-tint-12); --mda-ui-border: var(--mda-border); --mda-ui-border-light: var(--mda-border-light); --mda-ui-border-accent: var(--mda-border-accent); --mda-ui-focus: var(--mda-focus); /* Semantic navigation colours. Level 1, level 2 and work tabs get their own names so a custom scheme can colour them independently without touching any navigation logic. */ --mda-level1-bg: var(--mda-ui-bg-mid); --mda-level1-active-bg: var(--mda-ui-bg-hover); --mda-level1-text: var(--mda-ui-text); --mda-level2-bg: var(--mda-ui-bg-mid); --mda-level2-active-bg: var(--mda-ui-bg-hover); --mda-level2-text: var(--mda-ui-text); --mda-work-tab-bg: transparent; --mda-work-tab-active-bg: var(--mda-ui-bg-hover); --mda-work-tab-text: var(--mda-ui-text); } /* Custom colour scheme (0.10.30.4). Applies only when the archive is in custom mode AND the visitor has NOT switched on high contrast. The :not() is the whole mechanism by which high contrast suspends the custom layer: when data-mda-contrast="high" is set the selector stops matching, the aliases fall back to the block above, and the high-contrast token overrides apply as before. Switching high contrast off makes this block match again. No JavaScript state is involved. Every value falls back to its preset token, so a missing or rejected custom colour is simply the preset colour. */ .mda-archive[data-mda-color-mode="custom"]:not([data-mda-contrast="high"]) { --mda-ui-bg: var(--mda-custom-bg, var(--mda-bg)); --mda-ui-bg-mid: var(--mda-custom-bg-mid, var(--mda-bg-mid)); --mda-ui-bg-panel: var(--mda-custom-bg-panel, var(--mda-bg-panel)); --mda-ui-bg-hover: var(--mda-custom-bg-hover, var(--mda-bg-hover)); --mda-ui-text: var(--mda-custom-text, var(--mda-text)); --mda-ui-text-secondary: var(--mda-custom-text-secondary, var(--mda-text-secondary)); --mda-ui-text-faint: var(--mda-custom-text-secondary, var(--mda-text-faint)); --mda-ui-accent: var(--mda-custom-accent, var(--mda-accent)); --mda-ui-accent-dim: var(--mda-custom-accent-dim, var(--mda-accent-dim)); --mda-ui-accent-tint-05: var(--mda-custom-accent-tint-05, var(--mda-accent-tint-05)); --mda-ui-accent-tint-08: var(--mda-custom-accent-tint-08, var(--mda-accent-tint-08)); --mda-ui-accent-tint-10: var(--mda-custom-accent-tint-10, var(--mda-accent-tint-10)); --mda-ui-accent-tint-12: var(--mda-custom-accent-tint-12, var(--mda-accent-tint-12)); --mda-ui-border: var(--mda-custom-border, var(--mda-border)); --mda-ui-border-light: var(--mda-custom-border, var(--mda-border-light)); --mda-ui-border-accent: var(--mda-custom-border-accent, var(--mda-border-accent)); --mda-ui-focus: var(--mda-custom-focus, var(--mda-focus)); --mda-level1-bg: var(--mda-custom-level1-bg, var(--mda-ui-bg-mid)); --mda-level1-active-bg: var(--mda-custom-level1-active-bg, var(--mda-ui-bg-hover)); --mda-level1-text: var(--mda-custom-level1-text, var(--mda-ui-text)); --mda-level2-bg: var(--mda-custom-level2-bg, var(--mda-ui-bg-mid)); --mda-level2-active-bg: var(--mda-custom-level2-active-bg, var(--mda-ui-bg-hover)); --mda-level2-text: var(--mda-custom-level2-text, var(--mda-ui-text)); --mda-work-tab-bg: var(--mda-custom-work-bg, transparent); --mda-work-tab-active-bg: var(--mda-custom-work-active-bg, var(--mda-ui-bg-hover)); --mda-work-tab-text: var(--mda-custom-work-text, var(--mda-ui-text)); } /* Server-rendered footnotes; functional without JavaScript. */ .mda-fn-ref { margin-inline: 0.1em; font-size: 0.75em; font-weight: 600; line-height: 0; vertical-align: 0.25em; } .mda-fn-ref a, .mda-fn-back { text-decoration-thickness: 1px; text-underline-offset: 0.15em; } /* 0.10.30.3 — MDA owns the footnote link colour. Without this the active theme's link colour applies. :visited is included so a followed footnote does not change colour. The reader modal is hosted inside .mda-archive and inherits the same value. */ .mda-archive .mda-fn-ref a, .mda-archive .mda-fn-ref a:visited, .mda-archive .mda-fn-back, .mda-archive .mda-fn-back:visited { color: var(--mda-footnote-color, var(--mda-ui-text)); } .mda-fn-ref a:focus-visible, .mda-fn-back:focus-visible, .mda-footnotes [role="doc-endnote"]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .mda-archive .mda-fn-ref a, .mda-archive .mda-footnotes [role="doc-endnote"] { scroll-margin-top: calc(var(--mda-sticky-work-header-offset, 0px) + 9rem); } .mda-reader-modal .mda-fn-ref a, .mda-reader-modal .mda-footnotes [role="doc-endnote"] { scroll-margin-top: 9rem; } .mda-footnotes { margin-block: 1.75rem 1rem; padding-block-start: 1rem; border-block-start: 1px solid currentColor; font-family: var(--mda-font-text); font-size: 14px; line-height: 1.7; color: var(--mda-ui-text-secondary); } .mda-footnotes-list { padding-inline-start: 1.5rem; } .mda-footnotes-list > li + li { margin-block-start: 0.6rem; } .mda-fn-fallback, .mda-fn-area-warning { font-style: italic; } @media print { .mda-fn-back { display: none; } .mda-footnotes { break-inside: avoid; } } /* ═══════════════════════════════════════════════════════════════════════════ 2. Archive shell & header ═══════════════════════════════════════════════════════════════════════════ */ .mda-archive-header { border: 1px solid var(--mda-ui-border-accent); border-radius: var(--mda-radius-lg); padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 48px); margin-bottom: 28px; text-align: center; background: var(--mda-ui-bg-mid); /* Subtle top highlight — like lamplight from above */ box-shadow: inset 0 1px 0 var(--mda-ui-accent-tint-12); } .mda-archive-header h2 { margin: 0; font-family: var(--mda-font-text); font-size: clamp(26px, 5vw, 52px); font-weight: 400; /* serif at normal weight — not aggressive */ line-height: 1.1; letter-spacing: 0.03em; color: var(--mda-ui-text); } .mda-archive-header p { margin: 8px 0 0; color: var(--mda-ui-text-secondary); font-size: clamp(13px, 1.8vw, 16px); letter-spacing: 0.06em; text-transform: uppercase; } /* Screen-reader status region */ .mda-status, .mda-sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mda-sr-status:empty { clip-path: inset(50%); } .mda-groups { display: flex; flex-direction: column; gap: var(--mda-gap); } .mda-empty { padding: 14px 0; color: var(--mda-ui-text-secondary); font-style: italic; } /* ═══════════════════════════════════════════════════════════════════════════ 3. Hierarchy navigation Upper (Jahrzehnt) → Lower (Sammlung) → Work buttons ═══════════════════════════════════════════════════════════════════════════ */ /* --- Shared button base --- */ .mda-upper-button, .mda-lower-button, .mda-work-button { width: 100%; border: 1px solid var(--mda-ui-border); background: var(--mda-ui-bg-mid); color: var(--mda-ui-text); border-radius: var(--mda-radius); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-family: var(--mda-font-ui); font-size: inherit; text-align: left; transition: background var(--mda-duration) var(--mda-ease), border-color var(--mda-duration) var(--mda-ease); /* Accessibility: minimum touch target */ min-height: 48px; } /* --- Upper: Jahrzehnt --- */ .mda-upper-button { font-family: var(--mda-font-text); font-size: clamp(18px, 2.8vw, 28px); font-weight: 400; letter-spacing: 0.02em; border-color: var(--mda-ui-border-accent); background: var(--mda-ui-bg-mid); /* Subtle left accent line */ border-left: 3px solid var(--mda-ui-accent-dim); padding-left: 16px; } .mda-upper-button:hover { background: var(--mda-ui-bg-hover); border-color: var(--mda-ui-accent); border-left-color: var(--mda-ui-accent); } .mda-upper-button[aria-expanded="true"] { border-color: var(--mda-ui-accent); border-left-color: var(--mda-ui-accent); background: var(--mda-ui-bg-hover); color: var(--mda-ui-text); box-shadow: inset 3px 0 0 var(--mda-ui-accent); } /* Chevron indicator */ .mda-upper-button > span[aria-hidden] { color: var(--mda-ui-accent-dim); font-size: 1.1em; transition: transform 200ms var(--mda-ease-enter), color 200ms var(--mda-ease-enter); flex: 0 0 auto; } .mda-lower-button > span[aria-hidden] { transition: transform 200ms var(--mda-ease-enter), color 200ms var(--mda-ease-enter); } .mda-upper-button[aria-expanded="true"] > span[aria-hidden] { transform: rotate(180deg); color: var(--mda-ui-accent); } /* --- Upper panel indent --- */ .mda-upper-panel { padding: 10px 0 0 20px; display: flex; flex-direction: column; gap: 8px; } /* --- Lower: Sammlung --- */ .mda-lower-button { font-size: clamp(14px, 1.8vw, 18px); font-weight: 500; letter-spacing: 0.01em; border-color: var(--mda-ui-border); } .mda-lower-button:hover { background: var(--mda-ui-bg-hover); border-color: var(--mda-ui-border-accent); } .mda-lower-button[aria-expanded="true"] { border-color: var(--mda-ui-border-accent); background: var(--mda-ui-bg-hover); box-shadow: inset 3px 0 0 var(--mda-ui-accent); } /* Work count badge */ .mda-count { flex: 0 0 auto; font-size: 12px; color: var(--mda-ui-text-faint); border: 1px solid var(--mda-ui-border); border-radius: 999px; padding: 1px 8px; margin-left: auto; } /* --- Lower panel indent --- */ .mda-lower-panel { padding: 8px 0 0 20px; display: flex; flex-direction: column; gap: 4px; } /* --- Work list --- */ .mda-work-list { display: flex; flex-direction: column; gap: 4px; } .mda-work-shell { /* no gap — panel appears directly below button */ } /* --- Work button --- */ .mda-work-button { font-size: 15px; padding: 11px 16px; /* No visible box around work titles — the 1px border is kept transparent so row height stays identical, but reads as a quiet line. Keyboard focus stays clear via the global .mda-archive :focus-visible ring; hover/expanded use surface and a small accent instead of a hard frame. */ border-color: transparent; background: transparent; border-radius: var(--mda-radius-sm); } .mda-work-button:hover { background: var(--mda-ui-bg-hover); } .mda-work-button[aria-expanded="true"] { background: var(--mda-ui-bg-hover); border-radius: var(--mda-radius-sm) var(--mda-radius-sm) 0 0; /* Open state: quiet surface + a small inset left accent — clearly readable as expanded, not a dominant border. Inset shadow → no layout shift. */ box-shadow: inset 3px 0 0 var(--mda-ui-accent-dim); } .mda-work-button-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; } .mda-work-year { flex: 0 0 auto; font-size: 12px; color: var(--mda-ui-accent-dim); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .mda-work-name { overflow-wrap: anywhere; line-height: 1.35; } /* Media flags (icons) */ .mda-work-flags { display: inline-flex; gap: 5px; color: var(--mda-ui-text-faint); flex: 0 0 auto; font-size: 13px; } /* ═══════════════════════════════════════════════════════════════════════════ 4. Work panel & detail ═══════════════════════════════════════════════════════════════════════════ */ .mda-work-panel { border: 1px solid var(--mda-ui-accent-dim); border-top: none; /* merges with the open work button */ border-radius: 0 0 var(--mda-radius) var(--mda-radius); background: var(--mda-ui-bg-panel); /* overflow: clip (not hidden) — clips to the rounded corners without creating a scroll container / sticky-relevant ancestor, so the sticky work-header binds to the page scroll. (Audit: panel is not a JS scrollport, no floats, no margin-collapse needing flow-root.) */ overflow: clip; /* Subtle inner glow at top — like document under lamp */ box-shadow: inset 0 1px 0 var(--mda-ui-accent-tint-08); } .mda-work-panel[aria-busy="true"] { cursor: progress; } .mda-loading { padding: 20px 22px; color: var(--mda-ui-text-secondary); font-style: italic; font-size: 14px; } .mda-error { padding: 14px 22px; color: var(--mda-error); border-left: 3px solid var(--mda-error); background: rgba(200, 122, 110, 0.06); margin: 12px; border-radius: var(--mda-radius-sm); } /* Work detail — the loaded content */ .mda-work-detail { padding: clamp(18px, 3.5vw, 36px) clamp(18px, 4vw, 40px); } .mda-work-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--mda-ui-border); padding-bottom: 16px; margin-bottom: 22px; } /* ───────────────────────────────────────────────────────────────────────── Phase 2A — Sticky Work Header with dynamic offset (CSS + small JS helper) The work-header (already in the server-rendered work HTML) stays put while the open work's content scrolls beneath it. top is driven by a runtime variable --mda-sticky-work-header-offset, measured by JS from the real visible fixed site headers / admin bar (no hard-coded pixel value, no Divi coupling). If JS is unavailable the variable stays 0px and the header is still technically sticky at the viewport top. Works because .mda-work-panel uses overflow: clip. Stacking: z-index 1 over in-flow content; opaque --mda-bg-panel background; Lightbox (100000) / DocViewer (100001) always above. Mobile: sticky remains enabled with compact top padding. ─────────────────────────────────────────── */ .mda-archive .mda-work-detail .mda-work-header { position: sticky; top: var(--mda-sticky-work-header-offset, 0px); z-index: 1; background: var(--mda-ui-bg-panel); /* Shadow polish (two-stage) — a crisp 1px separation line directly under the header plus a soft drop shadow beneath it, so the work text visibly runs under the sticky header without a floating-card look. Accent-derived tints, so it adapts to every preset (warm-dark, blue-slate) and high-contrast. No new token, no rgba(), no !important. */ box-shadow: 0 1px 0 var(--mda-ui-accent-tint-10), 0 10px 24px var(--mda-ui-accent-tint-12); } @media (max-width: 600px) { /* Mobile sticky is now ENABLED (earlier static deactivation removed). Keep the sticky header a touch more compact so it doesn't eat too much screen height, without feeling cramped. The min-601 block doesn't apply here, so the header would otherwise have no explicit top padding — set a compact 12px. */ .mda-archive .mda-work-detail .mda-work-header { padding-top: 12px; } } .mda-work-title { margin: 0; font-family: var(--mda-font-text); font-size: clamp(22px, 4vw, 40px); font-weight: 400; line-height: 1.15; letter-spacing: 0.01em; color: var(--mda-ui-text); } .mda-work-meta { margin-top: 8px; color: var(--mda-ui-accent-dim); font-size: 13px; letter-spacing: 0.06em; } /* Work actions toolbar */ .mda-work-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; } .mda-copy-link, .mda-work-close { min-height: 44px; min-width: 44px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--mda-ui-text-secondary); cursor: pointer; font-family: var(--mda-font-ui); font-size: 13px; line-height: 1; /* Same quiet depth as the reader segment — Copy reads a touch more as a button, Close stays calm. Existing accent tints, palette-adaptive, HC-safe; no card look, no hard shadow, no CTA dominance, no red Close. */ box-shadow: 0 1px 0 var(--mda-ui-accent-tint-10), 0 6px 14px var(--mda-ui-accent-tint-08); transition: background var(--mda-duration) var(--mda-ease), color var(--mda-duration) var(--mda-ease), border-color var(--mda-duration) var(--mda-ease); } .mda-copy-link { display: flex; align-items: center; justify-content: center; padding: 0; /* Icon-only: the visible "Copy link" text node is collapsed with font-size:0 (it cannot be wrapped in a span without a markup change). No residual pill width. The button's aria-label stays the authoritative semantic source; the icon below is purely decorative. */ font-size: 0; background: var(--mda-ui-accent-tint-05); color: var(--mda-ui-accent); } .mda-copy-link::before { content: ""; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 15l6 -6'/%3E%3Cpath d='M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464'/%3E%3Cpath d='M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 15l6 -6'/%3E%3Cpath d='M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464'/%3E%3Cpath d='M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .mda-work-close { display: flex; align-items: center; justify-content: center; font-size: 20px; padding: 0; } .mda-copy-link:hover, .mda-work-close:hover { background: var(--mda-ui-accent-tint-12); color: var(--mda-ui-accent); border-color: var(--mda-ui-accent); } .mda-copy-link:focus-visible, .mda-work-close:focus-visible { outline: 2px solid var(--mda-ui-focus); outline-offset: 3px; } .mda-copy-link:active, .mda-work-close:active { background: var(--mda-ui-accent-tint-12); border-color: var(--mda-ui-accent); } /* Work body — the main text area */ .mda-work-body { /* Comfortable reading measure */ } .mda-section { margin-top: 28px; } .mda-section:first-child { margin-top: 0; } /* Section headings — archival labels */ .mda-section h4, .mda-footnotes h4 { margin: 0 0 12px; font-family: var(--mda-font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mda-ui-accent-dim); border-bottom: 1px solid var(--mda-ui-border-light); padding-bottom: 6px; } .mda-footnotes h4 { color: var(--mda-ui-text-secondary); } /* Main text content — use serif for reading */ .mda-section-content { font-family: var(--mda-font-text); font-size: clamp(15px, 1.8vw, 17px); line-height: 1.75; color: var(--mda-ui-text); } .mda-section-content p { margin: 0 0 1em; } .mda-section-content p:last-child { margin-bottom: 0; } /* Comment section */ .mda-comment-name { font-size: 13px; color: var(--mda-ui-accent-dim); margin-bottom: 6px; letter-spacing: 0.04em; } .mda-comment-text { font-family: var(--mda-font-text); font-size: 15px; line-height: 1.7; color: var(--mda-ui-text-secondary); border-left: 2px solid var(--mda-ui-border-accent); padding-left: 16px; } /* ═══════════════════════════════════════════════════════════════════════════ 5. Media sections ═══════════════════════════════════════════════════════════════════════════ */ /* --- Images & facsimiles --- */ .mda-image-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(min(100%, 220px), var(--mda-image-preview-width)) ); gap: 14px; align-items: start; } .mda-image-item { margin: 0; max-width: var(--mda-image-preview-width); } .mda-lightbox-trigger { display: block; width: 100%; padding: 0; border: 1px solid var(--mda-ui-border); border-radius: var(--mda-radius-sm); background: transparent; color: inherit; cursor: zoom-in; text-align: inherit; overflow: hidden; transition: border-color var(--mda-duration) var(--mda-ease); } .mda-lightbox-trigger:hover { border-color: var(--mda-ui-accent-dim); } .mda-lightbox-trigger img { display: block; width: 100%; height: auto; /* Slight warmth on images — optional, subtle */ filter: brightness(0.96) saturate(0.95); transition: filter var(--mda-duration) var(--mda-ease); } .mda-lightbox-trigger:hover img { filter: brightness(1) saturate(1); } .mda-image-item figcaption, .mda-media-item figcaption { margin-top: 7px; font-size: 12px; color: var(--mda-ui-text-secondary); line-height: 1.45; } /* --- Audio --- */ .mda-section-audio .mda-media-item { margin-bottom: 16px; } .mda-media-item audio { width: 100%; display: block; border-radius: var(--mda-radius-sm); /* Browser audio controls inherit page bg — minimal styling possible */ accent-color: var(--mda-ui-accent); } /* --- Video --- */ .mda-media-item video { display: block; max-width: 100%; width: 100%; height: auto; border: 1px solid var(--mda-ui-border); border-radius: var(--mda-radius-sm); background: #000; } /* --- Manuscript / PDF / additional files --- */ .mda-file-link { display: inline-flex; align-items: center; gap: 7px; color: var(--mda-ui-accent); text-decoration: none; font-size: 14px; padding: 8px 14px; border: 1px solid var(--mda-ui-border-accent); border-radius: var(--mda-radius-sm); background: var(--mda-ui-accent-tint-05); min-height: 44px; /* touch target */ transition: background var(--mda-duration) var(--mda-ease), border-color var(--mda-duration) var(--mda-ease); } .mda-file-link:hover { background: var(--mda-ui-accent-tint-12); border-color: var(--mda-ui-accent); } .mda-file-caption { margin-top: 5px; font-size: 12px; color: var(--mda-ui-text-secondary); } /* Additional list */ .mda-additional-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .mda-additional-list a { color: var(--mda-ui-accent); text-decoration: none; } .mda-additional-list a:hover { text-decoration: underline; color: var(--mda-ui-text); } /* ═══════════════════════════════════════════════════════════════════════════ 6. Lightbox ═══════════════════════════════════════════════════════════════════════════ */ .mda-lightbox { position: fixed; inset: 0; z-index: 999999; } .mda-lightbox[hidden] { display: none; } .mda-lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 8, 6, 0.88); } .mda-lightbox-dialog { position: relative; z-index: 1; width: min(95vw, 1200px); max-height: 92vh; margin: 4vh auto; padding: 16px; background: var(--mda-ui-bg-panel); color: var(--mda-ui-text); border: 1px solid var(--mda-ui-border-accent); border-radius: var(--mda-radius-lg); overflow: auto; box-shadow: 0 16px 64px rgba(0,0,0,0.6); } .mda-lightbox-close { position: sticky; top: 0; margin-left: auto; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--mda-ui-border-accent); border-radius: 999px; background: var(--mda-ui-bg-mid); color: var(--mda-ui-text-secondary); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background var(--mda-duration) var(--mda-ease), color var(--mda-duration) var(--mda-ease); } .mda-lightbox-close:hover { background: var(--mda-ui-accent-tint-12); color: var(--mda-ui-accent); } .mda-lightbox-figure { margin: 0; } .mda-lightbox-image { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; margin: 12px auto 0; } .mda-lightbox-caption { margin-top: 12px; text-align: center; font-size: 13px; color: var(--mda-ui-text-secondary); font-style: italic; } html.mda-lightbox-open { overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════════════ 7. Utility & accessibility ═══════════════════════════════════════════════════════════════════════════ */ /* Focus ring — warm gold, consistent everywhere */ .mda-archive :focus-visible { outline: 2px solid var(--mda-ui-focus); outline-offset: 3px; border-radius: 2px; } /* Error state */ .mda-status[role="alert"] { /* When role switches to alert it becomes visible in a11y tree — visual display handled by .mda-error rule above */ } /* Preview size variants */ .mda-archive[data-mda-preview-size="small"] { --mda-image-preview-width: 260px; } .mda-archive[data-mda-preview-size="medium"] { --mda-image-preview-width: 420px; } .mda-archive[data-mda-preview-size="large"] { --mda-image-preview-width: 720px; } /* Visual Preset Foundation — textScale (data attribute, like preview-size). standard = no attribute = no override = exact frozen sizes. small (×0.9) and large (×1.12) are fixed, predefined overrides only — no calc() multiplication, no change to the original frozen declarations, no DOM change. Each clamp() override scales all three components by the same factor. */ .mda-archive[data-mda-text-scale="small"] { font-size: 14.4px; } .mda-archive[data-mda-text-scale="small"] .mda-archive-header h2 { font-size: clamp(23.4px, 4.5vw, 46.8px); } .mda-archive[data-mda-text-scale="small"] .mda-upper-button { font-size: clamp(16.2px, 2.52vw, 25.2px); } .mda-archive[data-mda-text-scale="small"] .mda-lower-button { font-size: clamp(12.6px, 1.62vw, 16.2px); } .mda-archive[data-mda-text-scale="small"] .mda-work-title { font-size: clamp(19.8px, 3.6vw, 36px); } .mda-archive[data-mda-text-scale="small"] .mda-work-meta { font-size: 11.7px; } .mda-archive[data-mda-text-scale="small"] .mda-section-content { font-size: clamp(13.5px, 1.62vw, 15.3px); } .mda-archive[data-mda-text-scale="small"] .mda-comment-text { font-size: 13.5px; } .mda-archive[data-mda-text-scale="large"] { font-size: 17.92px; } .mda-archive[data-mda-text-scale="large"] .mda-archive-header h2 { font-size: clamp(29.12px, 5.6vw, 58.24px); } .mda-archive[data-mda-text-scale="large"] .mda-upper-button { font-size: clamp(20.16px, 3.136vw, 31.36px); } .mda-archive[data-mda-text-scale="large"] .mda-lower-button { font-size: clamp(15.68px, 2.016vw, 20.16px); } .mda-archive[data-mda-text-scale="large"] .mda-work-title { font-size: clamp(24.64px, 4.48vw, 44.8px); } .mda-archive[data-mda-text-scale="large"] .mda-work-meta { font-size: 14.56px; } .mda-archive[data-mda-text-scale="large"] .mda-section-content { font-size: clamp(16.8px, 2.016vw, 19.04px); } .mda-archive[data-mda-text-scale="large"] .mda-comment-text { font-size: 16.8px; } /* Visual Preset Foundation — contrast override (authoritative, attribute-based). contrast no longer travels via inline custom properties (resolve_css_vars no longer merges CONTRAST_HIGH), so these stylesheet rules must beat the inline surface values → !important. Generic warm-dark fallback first, then the more specific blue-slate override. standard = no attribute = surface base visible. The runtime Comfort Bar toggles data-mda-contrast directly. Values mirror EXACTLY the resolver's CONTRAST_HIGH bundle; a unit test asserts no drift (test_css_contrast_high_matches_resolver). */ .mda-archive[data-mda-contrast="high"] { --mda-text: #f7f1e4 !important; --mda-text-secondary: #c8bba0 !important; --mda-text-faint: #b8aa90 !important; --mda-border: #4c463f !important; --mda-border-light: #3a352f !important; } .mda-archive[data-mda-surface="blue-slate"][data-mda-contrast="high"] { --mda-text: #14181f !important; --mda-text-secondary: #4a515c !important; --mda-text-faint: #6b727d !important; --mda-border: #c2c7cf !important; --mda-border-light: #d2d6dd !important; } .mda-archive[data-mda-surface="warm-sand"][data-mda-contrast="high"] { --mda-text: #241f18 !important; --mda-text-secondary: #4a4236 !important; --mda-text-faint: #5c5345 !important; --mda-border: #b8a888 !important; --mda-border-light: #cabfa6 !important; } .mda-archive[data-mda-surface="ivory"][data-mda-contrast="high"] { --mda-text: #1c1915 !important; --mda-text-secondary: #463f33 !important; --mda-border: #c9bda2 !important; --mda-border-light: #d8cdb8 !important; } .mda-archive[data-mda-surface="graphite"][data-mda-contrast="high"] { --mda-text: #f3f6f9 !important; --mda-text-secondary: #c3c9d1 !important; --mda-border: #525a64 !important; --mda-border-light: #444b54 !important; } /* Visual Preset Foundation — spacing override (authoritative, attribute-based). --mda-gap is no longer emitted inline by resolve_css_vars, so no !important is needed here. comfortable = no attribute = base --mda-gap (12px). Controls the gap between top-level decade groups (.mda-groups). Mirrors the SPACING bundle. */ .mda-archive[data-mda-spacing="compact"] { --mda-gap: 8px; } .mda-archive[data-mda-spacing="airy"] { --mda-gap: 18px; } /* ═══════════════════════════════════════════════════════════════════════════ Hidden-state integrity Scoped under .mda-archive to avoid affecting other page elements. Prevents display:flex from overriding the [hidden] attribute that the JS state machine uses to close panels. ═══════════════════════════════════════════════════════════════════════════ */ .mda-archive [hidden] { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ 8. Mobile (≤ 700px) ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .mda-archive { max-width: 100%; padding: 12px 2px 14px; } /* Remove left indent on mobile — every pixel counts */ .mda-upper-panel, .mda-lower-panel { padding-left: 0; } /* Larger touch targets on small screens */ .mda-upper-button, .mda-lower-button, .mda-work-button { min-height: 52px; padding: 14px 14px; } /* Work panel fills full width */ .mda-work-detail { padding: 16px 14px; } /* Work header stacks gracefully */ .mda-work-header { flex-wrap: wrap; gap: 10px; } .mda-work-title { font-size: clamp(20px, 5vw, 28px); flex-basis: 100%; } .mda-work-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } /* Images fill width on mobile */ .mda-image-grid { grid-template-columns: 1fr; } .mda-image-item { max-width: 100%; } /* File links — full width, easy to tap */ .mda-file-link { width: 100%; justify-content: center; } /* Lightbox */ .mda-lightbox-dialog { width: 97vw; max-height: 95vh; margin: 2.5vh auto; padding: 10px; border-radius: var(--mda-radius); } .mda-lightbox-image { max-height: 78vh; } /* Section content slightly smaller on narrow */ .mda-section-content { font-size: 15px; } } /* Slightly wider breakpoint for very small phones (320px) */ @media (max-width: 380px) { .mda-upper-button { font-size: 16px; } .mda-work-header { padding-bottom: 12px; margin-bottom: 14px; } } /* ═══════════════════════════════════════════════════════════════════════════ Search — Demo 3 ═══════════════════════════════════════════════════════════════════════════ */ .mda-search { margin-bottom: 20px; } .mda-search-inner { display: flex; align-items: center; gap: 8px; background: var(--mda-ui-bg-mid); border: 1px solid var(--mda-ui-border-accent); border-radius: var(--mda-radius); padding: 6px 12px; transition: border-color var(--mda-duration) var(--mda-ease); } .mda-search-inner:focus-within { border-color: var(--mda-ui-accent); } .mda-search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--mda-ui-text); font-family: var(--mda-font-ui); font-size: 15px; line-height: 1.4; min-height: 36px; padding: 0; } .mda-search-input::placeholder { color: var(--mda-ui-text-faint); } /* Browser search cancel button — hide the default one */ .mda-search-input::-webkit-search-cancel-button { display: none; } .mda-search-reset { flex: 0 0 auto; min-width: 32px; min-height: 32px; border: none; background: transparent; color: var(--mda-ui-text-faint); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: color var(--mda-duration) var(--mda-ease), background var(--mda-duration) var(--mda-ease); } .mda-search-reset:hover { color: var(--mda-ui-accent); background: var(--mda-ui-accent-tint-10); } /* Results list */ .mda-search-results { margin: 6px 0 0; padding: 4px 0; list-style: none; background: var(--mda-ui-bg-mid); border: 1px solid var(--mda-ui-border-accent); border-radius: var(--mda-radius); overflow: hidden; max-height: 320px; overflow-y: auto; } .mda-search-result { padding: 10px 16px; font-size: 14px; color: var(--mda-ui-text); cursor: pointer; line-height: 1.45; border-bottom: 1px solid var(--mda-ui-border-light); transition: background var(--mda-duration) var(--mda-ease); } .mda-search-result:last-child { border-bottom: none; } .mda-search-result:hover, .mda-search-result:focus { background: var(--mda-ui-bg-hover); outline: none; } .mda-search-result:focus-visible { outline: 2px solid var(--mda-ui-focus); outline-offset: -2px; } @media (max-width: 700px) { .mda-search-input { font-size: 16px; /* prevent iOS zoom */ } } /* ═══════════════════════════════════════════════════════════════════════════ 9. Reduced motion ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .mda-archive *, .mda-lightbox * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Document Viewer — 0.10.5.4 ═══════════════════════════════════════════════════════════════════════════ */ /* Scroll-lock when viewer is open */ html.mda-docviewer-open { overflow: hidden; } .mda-docviewer[hidden] { display: none; /* prevent display:flex from overriding [hidden] */ } .mda-docviewer { position: fixed; inset: 0; z-index: 1000001; /* above reader modal (999900) and lightbox (999999) */ display: flex; align-items: center; justify-content: center; } .mda-docviewer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); cursor: pointer; } .mda-docviewer-dialog { position: relative; z-index: 1; background: var(--mda-ui-bg-mid); border-radius: var(--mda-radius); box-shadow: 0 8px 40px rgba(0,0,0,0.55); display: flex; flex-direction: column; width: min(90vw, 900px); max-height: min(92vh, 860px); overflow: hidden; } .mda-docviewer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; border-bottom: 1px solid var(--mda-ui-border-light); flex: 0 0 auto; } .mda-docviewer-title { font-size: 14px; font-weight: 600; color: var(--mda-ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .mda-docviewer-close { flex: 0 0 auto; min-width: 32px; min-height: 32px; border: none; background: transparent; color: var(--mda-ui-text-faint); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: color var(--mda-duration) var(--mda-ease), background var(--mda-duration) var(--mda-ease); } .mda-docviewer-close:hover { color: var(--mda-ui-accent); background: var(--mda-ui-accent-tint-12); } .mda-docviewer-close:focus-visible { outline: 2px solid var(--mda-ui-focus); outline-offset: 2px; } /* PDF iframe */ .mda-docviewer-body { flex: 1 1 auto; overflow: auto; position: relative; } .mda-docviewer-iframe { display: block; width: 100%; height: 100%; min-height: 55vh; border: none; background: #fff; } /* Info card (non-PDF files) */ .mda-docviewer-info { padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; } .mda-docviewer-info-name { font-size: 15px; font-weight: 600; color: var(--mda-ui-text); word-break: break-all; } .mda-docviewer-info-caption { font-size: 13px; color: var(--mda-ui-text-faint); } .mda-docviewer-info-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } /* Footer with "open in new tab" link */ .mda-docviewer-footer { flex: 0 0 auto; padding: 10px 18px; border-top: 1px solid var(--mda-ui-border-light); display: flex; justify-content: flex-end; } .mda-docviewer-newtab { font-size: 12px; color: var(--mda-ui-text-faint); text-decoration: underline; } .mda-docviewer-newtab:hover { color: var(--mda-ui-accent); } /* Mobile */ @media (max-width: 600px) { .mda-docviewer-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; } .mda-docviewer-iframe { min-height: 60dvh; } .mda-docviewer-backdrop { display: none; } /* whole screen is modal on mobile */ } @media (prefers-reduced-motion: reduce) { .mda-docviewer, .mda-docviewer-dialog { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ Reader Comfort Bar — Layout Variants v1b (frontend-only, JS-injected) All selectors scoped under .mda-archive. No global selectors, no layout rebuild, no Divi collision (static at archive head, no fixed/sticky here). ═══════════════════════════════════════════════════════════════════════════ */ .mda-archive .mda-comfort { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 10px 14px; margin: 0 0 14px; border: 1px solid var(--mda-ui-border-light); border-radius: var(--mda-radius); background: var(--mda-ui-bg-panel); } .mda-archive .mda-comfort-toggle { display: none; /* shown only on narrow viewports */ min-height: 44px; padding: 0 16px; font: inherit; font-size: 13px; color: var(--mda-ui-text); background: var(--mda-ui-bg-mid); border: 1px solid var(--mda-ui-border); border-radius: var(--mda-radius-sm); cursor: pointer; } .mda-archive .mda-comfort-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .mda-archive .mda-comfort-axis { display: flex; align-items: center; gap: 8px; } .mda-archive .mda-comfort-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mda-ui-text-faint); } .mda-archive .mda-comfort-group { display: inline-flex; gap: 4px; } .mda-archive .mda-comfort-btn, .mda-archive .mda-comfort-reset { min-height: 44px; padding: 0 12px; font: inherit; font-size: 12px; line-height: 1; color: var(--mda-ui-text-secondary); background: var(--mda-ui-bg-mid); border: 1px solid var(--mda-ui-border); border-radius: var(--mda-radius-sm); cursor: pointer; transition: background var(--mda-duration) var(--mda-ease), border-color var(--mda-duration) var(--mda-ease), color var(--mda-duration) var(--mda-ease); } .mda-archive .mda-comfort-btn:hover, .mda-archive .mda-comfort-reset:hover { border-color: var(--mda-ui-border-accent); color: var(--mda-ui-text); } /* Active state — NOT colour alone: bold weight + underline + accent border. */ .mda-archive .mda-comfort-btn[data-mda-on="1"] { color: var(--mda-ui-text); font-weight: 700; border-color: var(--mda-ui-accent); background: var(--mda-ui-accent-tint-12); text-decoration: underline; text-underline-offset: 3px; } .mda-archive .mda-comfort-btn:focus-visible, .mda-archive .mda-comfort-reset:focus-visible, .mda-archive .mda-comfort-toggle:focus-visible { outline: 2px solid var(--mda-ui-focus); outline-offset: 2px; } .mda-archive .mda-comfort-reset { color: var(--mda-ui-text-faint); } /* Mobile: collapse the panel behind the "Ansicht" toggle, no horizontal overflow. */ @media (max-width: 700px) { .mda-archive .mda-comfort { gap: 10px; } .mda-archive .mda-comfort-toggle { display: inline-flex; align-items: center; } .mda-archive .mda-comfort-panel { flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 10px; display: none; } .mda-archive .mda-comfort-panel[data-mda-open="1"] { display: flex; } .mda-archive .mda-comfort-group { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .mda-archive .mda-comfort-btn, .mda-archive .mda-comfort-reset { transition: none; } } /* ───────────────────────────────────────────────────────────────────────── Phase 2A — Sticky Work Header internal spacing polish (CSS-only) Desktop/tablet only (≥601px): move the TOP inner spacing from the parent .mda-work-detail (which scrolls away) into the sticky .mda-work-header itself, so the comfortable top gap travels WITH the sticky header. The pre-scroll layout height is unchanged (same gap, just owned by the child now). Placed at end-of-file so that in the 601–700px overlap with the existing max-width:700px block, this rule wins and the parent's top padding is correctly zeroed. Below 600px this spacing block doesn't apply; the header stays sticky there with its own compact top padding (see the max-width:600px rule). */ @media (min-width: 601px) { .mda-archive .mda-work-detail { padding-top: 0; } .mda-archive .mda-work-detail .mda-work-header { padding-top: clamp(18px, 3.5vw, 36px); } } /* ───────────────────────────────────────────────────────────────────────── Phase 2A — Sticky Work Header full-bleed (CSS-only) Pull the sticky header out to the inner edges of the work box via negative inline margins equal to the parent's horizontal padding, then re-add the same amount as inline padding so title/year/Copy/Close keep their comfortable indent. Result: the header background + shadow reach the work-box edges while the work text keeps its normal indent. Values mirror .mda-work-detail's horizontal padding exactly (desktop clamp(18px,4vw,40px); mobile 14px), so no horizontal scroll. Placed end-of-file so it wins cleanly over earlier rules. */ @media (min-width: 701px) { .mda-archive .mda-work-detail .mda-work-header { margin-inline: calc(-1 * clamp(18px, 4vw, 40px)); padding-inline: clamp(18px, 4vw, 40px); } } @media (max-width: 700px) { .mda-archive .mda-work-detail .mda-work-header { margin-inline: -14px; padding-inline: 14px; } } /* ───────────────────────────────────────────────────────────────────────── Reader Navigation v1 — Prev/Next row (Variante B: under the work-header, before the work-body). All selectors scoped under .mda-archive. Native buttons, ≥44×44px, visible focus ring via --mda-focus, clear disabled state. Preset-adaptive via existing tokens; no new token, no !important. ─────────── */ .mda-archive .mda-reader-nav { display: flex; gap: 10px; margin: 0 0 22px; } .mda-archive .mda-reader-nav-btn { flex: 1 1 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; font-family: var(--mda-font-ui); font-size: 13px; line-height: 1; color: var(--mda-ui-text-secondary); /* Quiet ghost navigation: Prev/Next is only a secondary orientation aid, so it must not read as two primary actions or compete with the work content, Copy-Link or Close. Transparent base, practically invisible border in the normal state, gentle radius. Touch target stays ≥44px via min-height. */ background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background var(--mda-duration) var(--mda-ease), color var(--mda-duration) var(--mda-ease), border-color var(--mda-duration) var(--mda-ease); } .mda-archive .mda-reader-nav-next { flex-direction: row; } .mda-archive .mda-reader-nav-prev { flex-direction: row; } .mda-archive .mda-reader-nav-btn:hover:not(:disabled) { background: var(--mda-ui-accent-tint-05); color: var(--mda-ui-accent); } .mda-archive .mda-reader-nav-btn:focus-visible { outline: 2px solid var(--mda-ui-focus); outline-offset: 3px; } .mda-archive .mda-reader-nav-btn:active:not(:disabled) { background: var(--mda-ui-accent-tint-10); } .mda-archive .mda-reader-nav-btn:disabled { opacity: 0.42; cursor: default; background: transparent; border-color: transparent; } .mda-archive .mda-reader-nav-arrow { font-size: 15px; line-height: 1; } @media (max-width: 600px) { /* Keep both targets tappable without horizontal overflow. */ .mda-archive .mda-reader-nav { gap: 8px; } .mda-archive .mda-reader-nav-btn { padding: 8px 8px; font-size: 12px; } } /* ───────────────────────────────────────────────────────────────────────── Work Reader text-size controls (0.10.10.0) — five steps A−/A+ drive the readerTextScale axis (data-mda-reader-text-scale: very-small | small | standard | large | very-large). The reader size is held in custom properties ON .mda-work-body, and the body text/comment consume them. This makes the reader value AUTHORITATIVE inside the work body — for the standard state too, not only the off-standard steps. No product with the global textScale axis: the consumer rules .mda-archive .mda-work-body .mda-section-content → specificity (0,3,0) .mda-archive .mda-work-body .mda-comment-text → (0,3,0) tie the global rules .mda-archive[data-mda-text-scale="X"] .mda-section-content → (0,3,0) on specificity, and are placed AFTER them at end-of-file, so source order wins: inside .mda-work-body the font-size is exactly the reader var (a direct value, never a multiple of the global scale). Outside the body the global textScale stays authoritative. Title/meta/actions/ghost-nav are never matched. No !important. Scale (factors ×0.82 / ×0.91 / 1.00 / ×1.12 / ×1.26 of the real standard): section-content standard = clamp(15px, 1.8vw, 17px) comment-text standard = 15px Each clamp component is multiplied by the step factor. very-small floors at 12.3px (≥12px, mobile-legible); very-large caps at 21.42px (not oversized). */ .mda-archive .mda-work-body { --mda-reader-text-size: clamp(15px, 1.8vw, 17px); --mda-reader-comment-size: 15px; } .mda-archive[data-mda-reader-text-scale="very-small"] .mda-work-body { --mda-reader-text-size: clamp(12.3px, 1.476vw, 13.94px); --mda-reader-comment-size: 12.3px; } .mda-archive[data-mda-reader-text-scale="small"] .mda-work-body { --mda-reader-text-size: clamp(13.65px, 1.638vw, 15.47px); --mda-reader-comment-size: 13.65px; } .mda-archive[data-mda-reader-text-scale="large"] .mda-work-body { --mda-reader-text-size: clamp(16.8px, 2.016vw, 19.04px); --mda-reader-comment-size: 16.8px; } .mda-archive[data-mda-reader-text-scale="very-large"] .mda-work-body { --mda-reader-text-size: clamp(18.9px, 2.268vw, 21.42px); --mda-reader-comment-size: 18.9px; } .mda-archive .mda-work-body .mda-section-content { font-size: var(--mda-reader-text-size); } .mda-archive .mda-work-body .mda-comment-text { font-size: var(--mda-reader-comment-size); } /* The A−/A+ segment. Sits inside .mda-work-actions (left of Copy/Close), shares the actions row's vertical centering — header alignment is NOT touched. */ .mda-archive .mda-reader-text-controls { display: inline-flex; align-items: stretch; min-height: 44px; border: 1px solid var(--mda-ui-border-accent); border-radius: 999px; overflow: clip; background: var(--mda-ui-accent-tint-05); /* Very quiet depth — a 1px seat + a soft, low spread. Existing accent tints keep it palette-adaptive and HC-safe; not a floating card, no hard shadow. */ box-shadow: 0 1px 0 var(--mda-ui-accent-tint-10), 0 6px 14px var(--mda-ui-accent-tint-08); } .mda-archive .mda-reader-text-control { min-width: 40px; min-height: 44px; border: 0; background: transparent; color: var(--mda-ui-text-secondary); cursor: pointer; font-family: var(--mda-font-ui); font-size: 13px; line-height: 1; transition: background var(--mda-duration) var(--mda-ease), color var(--mda-duration) var(--mda-ease); } .mda-archive .mda-reader-text-control + .mda-reader-text-control { border-left: 1px solid var(--mda-ui-border-accent); } .mda-archive .mda-reader-text-control:hover { background: var(--mda-ui-accent-tint-10); color: var(--mda-ui-accent); } .mda-archive .mda-reader-text-control:active { background: var(--mda-ui-accent-tint-12); color: var(--mda-ui-accent); } /* Inset focus ring: the group uses overflow:clip, so an outset ring would be clipped. -2px keeps it fully visible inside the pill. */ .mda-archive .mda-reader-text-control:focus-visible { outline: 2px solid var(--mda-ui-focus); outline-offset: -2px; } /* Disabled at min/max (project disabled-visual rule: reduced opacity, no hover/active look, not-allowed cursor). Placed after hover/active so it wins. */ .mda-archive .mda-reader-text-control:disabled, .mda-archive .mda-reader-text-control[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; background: transparent; color: var(--mda-ui-text-secondary); } /* ────────────────────────────────────────────────────────────────────────── Reader Modal Foundation (0.10.11.0) A large reading surface that re-parents the already-loaded .mda-work-detail. Hosted INSIDE .mda-archive so the moved detail keeps every archive-scoped style (reader text size, typography, sticky header) and the preset CSS vars. z-index staffelung: Reader Modal 999900 < Lightbox 999999 < DocViewer 1000001. Only existing palette tokens, no !important, no transform (flex centering). ────────────────────────────────────────────────────────────────────────── */ html.mda-reader-modal-open { overflow: hidden; } .mda-reader-modal { position: fixed; inset: 0; z-index: 999900; display: flex; align-items: center; justify-content: center; --mda-reader-modal-gap: clamp(16px, 4vw, 48px); padding: var(--mda-reader-modal-gap); } .mda-reader-modal[hidden] { display: none; } .mda-reader-modal__backdrop { position: absolute; inset: 0; background: rgba(5, 9, 16, 0.72); backdrop-filter: blur(14px) saturate(0.9); -webkit-backdrop-filter: blur(14px) saturate(0.9); } .mda-reader-modal__shell { position: relative; display: flex; flex-direction: column; width: min(920px, 100%); /* Stable reader stage (desktop): a fixed height computed from the real available height minus the modal gap on both sides, capped at 920px. This keeps the centered shell from re-centering as work content height changes between prev/next switches. Mobile resets this below. */ height: min(920px, calc(100dvh - (2 * var(--mda-reader-modal-gap)))); background: var(--mda-ui-bg-panel); border: 1px solid var(--mda-ui-border); border-radius: var(--mda-radius, 12px); box-shadow: 0 1px 0 var(--mda-ui-accent-tint-10), 0 18px 48px var(--mda-ui-accent-tint-12); overflow: clip; } .mda-reader-modal__viewport { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: clamp(20px, 3vw, 40px); /* No top padding: the sticky work header must pin flush to the top edge of the modal scroll container on every viewport. Otherwise the viewport's top padding leaves a strip above the pinned header through which work/image content scrolls (desktop counterpart of the mobile top-gap fix). Horizontal + bottom padding are kept (no H-scroll). */ padding-top: 0; -webkit-overflow-scrolling: touch; } /* Sticky header inside the modal: top:0 within the modal's own scroll container, no website-header offset. Specificity (0,3,0) matches the archive-scoped sticky rule; end-of-file source order overrides its var-based top. The opaque background + local z-index:2 are reaffirmed here so the header reliably covers the work text scrolling beneath it inside the modal's fixed stacking context (observed mobile show-through). Inert on desktop: same --mda-bg-panel, and z-index 2 still sits above the in-flow work body. */ .mda-reader-modal .mda-work-detail .mda-work-header { top: 0; background: var(--mda-ui-bg-panel); z-index: 2; } /* Reading-mode trigger button: icon-only, calm, same language as Copy / Close. */ .mda-reader-modal-trigger { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 999px; background: var(--mda-ui-accent-tint-05); color: var(--mda-ui-accent); cursor: pointer; box-shadow: 0 1px 0 var(--mda-ui-accent-tint-10), 0 6px 14px var(--mda-ui-accent-tint-08); transition: background 0.15s ease, color 0.15s ease; } .mda-reader-modal-trigger:hover { background: var(--mda-ui-bg-hover); } .mda-reader-modal-trigger:focus-visible { outline: 2px solid var(--mda-ui-focus); outline-offset: 2px; } .mda-reader-modal-trigger::before { content: ""; display: block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6v13'/%3E%3Cpath d='M12 6v13'/%3E%3Cpath d='M21 6v13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6v13'/%3E%3Cpath d='M12 6v13'/%3E%3Cpath d='M21 6v13'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Mobile fullscreen: one scroll area, no rounded card, no horizontal scroll. */ @media (max-width: 700px) { .mda-reader-modal { padding: 0; } .mda-reader-modal__shell { width: 100dvw; max-width: 100dvw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; } /* Lighter blur on mobile for performance; overlay stays clearly dark. */ .mda-reader-modal__backdrop { backdrop-filter: blur(10px) saturate(0.9); -webkit-backdrop-filter: blur(10px) saturate(0.9); } } @media (prefers-reduced-motion: reduce) { .mda-reader-modal-trigger { transition: none; } .mda-reader-modal__backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Mobile reader modal top-gap fix (0.10.11.0): above the sticky header two top paddings stack — the viewport's own padding-top and the work detail's padding-top (the desktop min-601 rule that zeroes the latter and lets the header own the top gap does NOT apply below 600px). The viewport's own top padding is now zeroed globally (see the base .mda-reader-modal__viewport rule), so only the detail's top padding still needs zeroing here for screens below 600px, where the min-601 detail rule does not apply. Keeps the sticky header flush to the top of the fullscreen scroll area; the header keeps its own compact top padding. Horizontal/bottom padding untouched (no H-scroll). */ @media (max-width: 700px) { .mda-reader-modal .mda-work-detail { padding-top: 0; } } /* ============================================================================ V2.1 Motion Foundation — consolidation (additive, end-of-file). No new behaviour is forced onto modal/lightbox/docviewer/accordion-content (those entry animations need a 1-frame JS class and are deferred to V2.2). This block (a) applies the harmonized easing to the proven always-rendered hooks via the existing --mda-duration gate, and (b) double-guards new motion so it is fully disabled under data-mda-motion="none" AND prefers-reduced-motion. Paint-only transitions: background, color, border-color, opacity, transform. No geometry-changing properties: no height, max-height, width, padding, margin, scroll-behavior or keyframes. No layout shift, no scroll jump. Cascade wins by file order; no new !important outside the existing reduced-motion pattern. */ /* Chevron + accordion button-state already transition via --mda-duration/--mda-ease; the comfort-bar and hover/focus-visible affordances are harmonized to the same gated tempo here for a single, calm motion language. */ .mda-archive .mda-comfort-btn, .mda-archive .mda-comfort-reset, .mda-archive .mda-comfort-toggle { transition: background var(--mda-duration) var(--mda-ease), color var(--mda-duration) var(--mda-ease), border-color var(--mda-duration) var(--mda-ease), opacity var(--mda-duration) var(--mda-ease); } /* Belt-and-suspenders guard 1: user-chosen motion=none disables the harmonized transitions (in addition to the MOTION token already zeroing --mda-duration). */ .mda-archive[data-mda-motion="none"] .mda-comfort-btn, .mda-archive[data-mda-motion="none"] .mda-comfort-reset, .mda-archive[data-mda-motion="none"] .mda-comfort-toggle, .mda-archive[data-mda-motion="none"] .mda-upper-button, .mda-archive[data-mda-motion="none"] .mda-lower-button, .mda-archive[data-mda-motion="none"] .mda-work-button, .mda-archive[data-mda-motion="none"] .mda-upper-button > span[aria-hidden], .mda-archive[data-mda-motion="none"] .mda-lower-button > span[aria-hidden] { transition: none !important; } /* Belt-and-suspenders guard 2: OS reduced-motion disables the harmonized motion. */ @media (prefers-reduced-motion: reduce) { .mda-archive .mda-comfort-btn, .mda-archive .mda-comfort-reset, .mda-archive .mda-comfort-toggle { transition: none; } } /* === V2.2a Overlay Motion =================================================== Paint-only enter/leave transitions for accordion panels and the modal / lightbox / docviewer overlays. Properties used: opacity, transform, pointer-events, transition only. No geometry-changing properties (no height, max-height, width, padding, margin), no scroll-behavior, no @keyframes, no animation. Enter classes are added then cleaned up by JS; leave class is removed after a bounded 180ms timer. Reduced motion is double-guarded below: the token guard (data-mda-motion="none") and the OS guard (prefers-reduced-motion: reduce) both null these transitions. The lightbox and docviewer live outside .mda-archive, so JS mirrors data-mda-motion="none" onto the overlay element itself for the token guard. */ /* Accordion panels — open reveal only (close is immediate, no leave). V2.2c Museum Calm: 360ms (was 260ms); translateY 12px unchanged. Visible end ~360ms, covered by the per-call cleanup window dur:420 on the three accordion enterMotion calls. */ .mda-archive .mda-upper-panel.mda-enter-start, .mda-archive .mda-lower-panel.mda-enter-start, .mda-archive .mda-work-panel.mda-enter-start { opacity: 0; transform: translateY(12px); } .mda-archive .mda-upper-panel.mda-enter-active, .mda-archive .mda-lower-panel.mda-enter-active, .mda-archive .mda-work-panel.mda-enter-active { transition: opacity 360ms var(--mda-ease-enter), transform 360ms var(--mda-ease-enter); opacity: 1; transform: none; } /* Reader modal — backdrop fade + shell fade/scale on enter; fade out on leave. */ .mda-reader-modal.mda-enter-start .mda-reader-modal__backdrop { opacity: 0; } /* V2.2c Museum Calm — Reader Open hierarchy (modal-root scoped → never fires on the work-switch swap, which carries mda-enter-* on the detail node, nor on the inline path which is outside .mda-reader-modal). Slower, museum-calm cadence: visible end ~510ms, covered by the per-call cleanup window dur:580 on ReaderModal.open. */ .mda-reader-modal.mda-enter-start .mda-reader-modal__shell { opacity: 0; transform: scale(0.97); } .mda-reader-modal.mda-enter-start .mda-work-header { opacity: 0; transform: translateY(6px); } .mda-reader-modal.mda-enter-start .mda-work-body { opacity: 0; transform: translateY(8px); } .mda-reader-modal.mda-enter-active .mda-reader-modal__backdrop { transition: opacity 280ms var(--mda-ease-enter); opacity: 1; } .mda-reader-modal.mda-enter-active .mda-reader-modal__shell { transition: opacity 380ms var(--mda-ease-enter) 50ms, transform 380ms var(--mda-ease-enter) 50ms; opacity: 1; transform: none; } .mda-reader-modal.mda-enter-active .mda-work-header { transition: opacity 320ms var(--mda-ease-enter) 90ms, transform 320ms var(--mda-ease-enter) 90ms; opacity: 1; transform: none; } .mda-reader-modal.mda-enter-active .mda-work-body { transition: opacity 340ms var(--mda-ease-enter) 170ms, transform 340ms var(--mda-ease-enter) 170ms; opacity: 1; transform: none; } .mda-reader-modal.is-leaving { pointer-events: none; } .mda-reader-modal.is-leaving .mda-reader-modal__backdrop, .mda-reader-modal.is-leaving .mda-reader-modal__shell { transition: opacity 180ms var(--mda-ease-leave); opacity: 0; } /* V2.2b-1 rev2a work-switch crossfade (modal-only, opacity-only — no transform). Out-fade the outgoing detail (160ms), atomic swap, then in-fade the new detail (260ms). pointer-events:none during the out-fade prevents stray interaction. */ .mda-reader-modal__viewport.is-switching { opacity: 0; pointer-events: none; transition: opacity 160ms var(--mda-ease-leave); } .mda-reader-modal__viewport .mda-work-detail.mda-enter-start { opacity: 0; } .mda-reader-modal__viewport .mda-work-detail.mda-enter-active { opacity: 1; transition: opacity 260ms var(--mda-ease-enter); } /* Lightbox — backdrop fade, media fade/scale, caption reveal with small delay. */ .mda-lightbox.mda-enter-start .mda-lightbox-backdrop { opacity: 0; } .mda-lightbox.mda-enter-start .mda-lightbox-image { opacity: 0; transform: scale(0.965); } .mda-lightbox.mda-enter-start .mda-lightbox-caption { opacity: 0; transform: translateY(4px); } .mda-lightbox.mda-enter-active .mda-lightbox-backdrop { transition: opacity 240ms var(--mda-ease-enter); opacity: 1; } .mda-lightbox.mda-enter-active .mda-lightbox-image { transition: opacity 260ms var(--mda-ease-enter), transform 260ms var(--mda-ease-enter); opacity: 1; transform: none; } .mda-lightbox.mda-enter-active .mda-lightbox-caption { transition: opacity 220ms var(--mda-ease-enter) 60ms, transform 220ms var(--mda-ease-enter) 60ms; opacity: 1; transform: none; } .mda-lightbox.is-leaving { pointer-events: none; } .mda-lightbox.is-leaving .mda-lightbox-backdrop, .mda-lightbox.is-leaving .mda-lightbox-image, .mda-lightbox.is-leaving .mda-lightbox-caption { transition: opacity 180ms var(--mda-ease-leave); opacity: 0; } /* DocViewer — backdrop fade + dialog fade/translateY. The PDF iframe is never animated. */ .mda-docviewer.mda-enter-start .mda-docviewer-backdrop { opacity: 0; } .mda-docviewer.mda-enter-start .mda-docviewer-dialog { opacity: 0; transform: translateY(10px); } .mda-docviewer.mda-enter-active .mda-docviewer-backdrop { transition: opacity 220ms var(--mda-ease-enter); opacity: 1; } .mda-docviewer.mda-enter-active .mda-docviewer-dialog { transition: opacity 240ms var(--mda-ease-enter), transform 240ms var(--mda-ease-enter); opacity: 1; transform: none; } .mda-docviewer.is-leaving { pointer-events: none; } .mda-docviewer.is-leaving .mda-docviewer-backdrop, .mda-docviewer.is-leaving .mda-docviewer-dialog { transition: opacity 180ms var(--mda-ease-leave); opacity: 0; } /* Mobile (<=600px): reduces movement and removes scale entirely, but stays deliberately calm rather than rushed — enter transitions run at 200ms, distance is capped at <=6px, and leave transitions are a short 160ms. */ @media (max-width: 600px) { .mda-archive .mda-upper-panel.mda-enter-start, .mda-archive .mda-lower-panel.mda-enter-start, .mda-archive .mda-work-panel.mda-enter-start { transform: translateY(6px); } .mda-reader-modal.mda-enter-start .mda-reader-modal__shell, .mda-lightbox.mda-enter-start .mda-lightbox-image { transform: none; } /* V2.2c Museum Calm mobile: damped durations, header delay 0, body delay capped at 70ms. */ .mda-reader-modal.mda-enter-active .mda-work-header { transition: opacity 260ms var(--mda-ease-enter), transform 260ms var(--mda-ease-enter); } .mda-reader-modal.mda-enter-active .mda-work-body { transition: opacity 260ms var(--mda-ease-enter) 70ms, transform 260ms var(--mda-ease-enter) 70ms; } .mda-docviewer.mda-enter-start .mda-docviewer-dialog { transform: translateY(6px); } .mda-archive .mda-upper-panel.mda-enter-active, .mda-archive .mda-lower-panel.mda-enter-active, .mda-archive .mda-work-panel.mda-enter-active, .mda-reader-modal.mda-enter-active .mda-reader-modal__backdrop, .mda-reader-modal.mda-enter-active .mda-reader-modal__shell, .mda-lightbox.mda-enter-active .mda-lightbox-backdrop, .mda-lightbox.mda-enter-active .mda-lightbox-image, .mda-lightbox.mda-enter-active .mda-lightbox-caption, .mda-docviewer.mda-enter-active .mda-docviewer-backdrop, .mda-docviewer.mda-enter-active .mda-docviewer-dialog { transition-duration: 200ms; } /* V2.2c Museum Calm mobile override (after the 200ms group → wins cascade): accordion ~280ms, reader-open backdrop/shell ~260ms. Lightbox + DocViewer stay in the 200ms group above (strictly unchanged). */ .mda-archive .mda-upper-panel.mda-enter-active, .mda-archive .mda-lower-panel.mda-enter-active, .mda-archive .mda-work-panel.mda-enter-active { transition-duration: 280ms; } .mda-reader-modal.mda-enter-active .mda-reader-modal__backdrop, .mda-reader-modal.mda-enter-active .mda-reader-modal__shell { transition-duration: 260ms; } .mda-reader-modal.is-leaving .mda-reader-modal__backdrop, .mda-reader-modal.is-leaving .mda-reader-modal__shell, .mda-lightbox.is-leaving .mda-lightbox-backdrop, .mda-lightbox.is-leaving .mda-lightbox-image, .mda-lightbox.is-leaving .mda-lightbox-caption, .mda-docviewer.is-leaving .mda-docviewer-backdrop, .mda-docviewer.is-leaving .mda-docviewer-dialog { transition-duration: 160ms; } .mda-reader-modal__viewport.is-switching { transition-duration: 120ms; } .mda-reader-modal__viewport .mda-work-detail.mda-enter-active { transition-duration: 200ms; } } /* Reduced-motion token guard: user-chosen motion=none (mirrored onto overlays). */ .mda-archive[data-mda-motion="none"] .mda-enter-active, .mda-archive[data-mda-motion="none"] .is-leaving, .mda-archive[data-mda-motion="none"] .mda-upper-panel, .mda-archive[data-mda-motion="none"] .mda-lower-panel, .mda-archive[data-mda-motion="none"] .mda-work-panel, .mda-reader-modal[data-mda-motion="none"] .mda-reader-modal__backdrop, .mda-reader-modal[data-mda-motion="none"] .mda-reader-modal__shell, .mda-reader-modal[data-mda-motion="none"] .mda-work-header, .mda-reader-modal[data-mda-motion="none"] .mda-work-body, .mda-archive[data-mda-motion="none"] .mda-reader-modal__viewport.is-switching, .mda-archive[data-mda-motion="none"] .mda-reader-modal__viewport .mda-work-detail.mda-enter-active, .mda-lightbox[data-mda-motion="none"] .mda-lightbox-backdrop, .mda-lightbox[data-mda-motion="none"] .mda-lightbox-image, .mda-lightbox[data-mda-motion="none"] .mda-lightbox-caption, .mda-docviewer[data-mda-motion="none"] .mda-docviewer-backdrop, .mda-docviewer[data-mda-motion="none"] .mda-docviewer-dialog { transition: none !important; } /* Reduced-motion OS guard. */ @media (prefers-reduced-motion: reduce) { .mda-archive .mda-upper-panel.mda-enter-active, .mda-archive .mda-lower-panel.mda-enter-active, .mda-archive .mda-work-panel.mda-enter-active, .mda-reader-modal.mda-enter-active .mda-reader-modal__backdrop, .mda-reader-modal.mda-enter-active .mda-reader-modal__shell, .mda-reader-modal.mda-enter-active .mda-work-header, .mda-reader-modal.mda-enter-active .mda-work-body, .mda-reader-modal__viewport.is-switching, .mda-reader-modal__viewport .mda-work-detail.mda-enter-active, .mda-reader-modal.is-leaving .mda-reader-modal__backdrop, .mda-reader-modal.is-leaving .mda-reader-modal__shell, .mda-lightbox.mda-enter-active .mda-lightbox-backdrop, .mda-lightbox.mda-enter-active .mda-lightbox-image, .mda-lightbox.mda-enter-active .mda-lightbox-caption, .mda-lightbox.is-leaving .mda-lightbox-backdrop, .mda-lightbox.is-leaving .mda-lightbox-image, .mda-lightbox.is-leaving .mda-lightbox-caption, .mda-docviewer.mda-enter-active .mda-docviewer-backdrop, .mda-docviewer.mda-enter-active .mda-docviewer-dialog, .mda-docviewer.is-leaving .mda-docviewer-backdrop, .mda-docviewer.is-leaving .mda-docviewer-dialog, .mda-archive .mda-upper-button > span[aria-hidden], .mda-archive .mda-lower-button > span[aria-hidden] { transition: none !important; } } /* 0.10.30.1 — editorial work references */ .mda-work-references { margin-top: 1.6em; } .mda-work-references .mda-section-title { margin: 0 0 .5em; font-size: 1em; letter-spacing: .02em; } .mda-work-reference-list { list-style: none; margin: 0; padding: 0; } .mda-work-reference { margin: 0 0 .35em; padding-left: 1.4em; position: relative; line-height: 1.5; } .mda-work-reference::before { content: "\2192"; position: absolute; left: 0; top: 0; opacity: .55; } .mda-work-reference a { text-decoration: none; border-bottom: 1px solid currentColor; } .mda-work-reference a:hover, .mda-work-reference a:focus { border-bottom-color: transparent; } /* Semantic navigation colours (0.10.30.4). Placed after the existing button rules so only the colour declarations are overridden; every layout, spacing, typography and motion rule above stays exactly as it was. Hover and expanded deliberately share one user-chosen "active" colour instead of asking for separate hover options. */ .mda-archive .mda-upper-button { background: var(--mda-level1-bg); color: var(--mda-level1-text); } .mda-archive .mda-upper-button:hover, .mda-archive .mda-upper-button[aria-expanded="true"] { background: var(--mda-level1-active-bg); color: var(--mda-level1-text); } .mda-archive .mda-lower-button { background: var(--mda-level2-bg); color: var(--mda-level2-text); } .mda-archive .mda-lower-button:hover, .mda-archive .mda-lower-button[aria-expanded="true"] { background: var(--mda-level2-active-bg); color: var(--mda-level2-text); } .mda-archive .mda-work-button { background: var(--mda-work-tab-bg); color: var(--mda-work-tab-text); } .mda-archive .mda-work-button:hover, .mda-archive .mda-work-button[aria-expanded="true"] { background: var(--mda-work-tab-active-bg); color: var(--mda-work-tab-text); }