/* * Card-detail popup (SRS Phase 4 §1–3). One element, mounted once * near the end of by card-popup.js — never duplicated per card, never * nested inside the transformed spread-stage. Layering follows the scale * declared in variables.css. */ .card-popup { border: none; padding: 0; margin: auto; max-width: min(560px, calc(100vw - 2rem)); max-height: min(88vh, 820px); width: 100%; background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); z-index: var(--z-dialog); overflow: hidden; } .card-popup::backdrop { background: rgba(10, 12, 24, 0.72); z-index: var(--z-dialog-backdrop); } /* Fallback modal (used only if the browser has no working ) shares the same class names; these two rules position it like a native dialog. */ .card-popup[data-fallback="true"] { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; align-items: center; justify-content: center; background: transparent; max-height: none; max-width: none; width: auto; border-radius: 0; box-shadow: none; overflow: visible; } .card-popup[data-fallback="true"] .card-popup__inner { max-width: min(560px, calc(100vw - 2rem)); max-height: min(88vh, 820px); } .card-popup[data-fallback="true"]::before { content: ""; position: fixed; inset: 0; background: rgba(10, 12, 24, 0.72); z-index: var(--z-dialog-backdrop); } .card-popup__inner { display: flex; flex-direction: column; max-height: min(88vh, 820px); position: relative; z-index: 1; } .card-popup__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .card-popup__count { font-size: 0.85rem; color: var(--color-text-muted); } .card-popup__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 999px; font-size: 1.3rem; line-height: 1; color: var(--color-text); } .card-popup__close:hover, .card-popup__close:focus-visible { background: var(--color-bg-soft); color: var(--color-gold-light); } .card-popup__close:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 2px; } .card-popup__body { overflow-y: auto; overscroll-behavior: contain; padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem; flex: 1 1 auto; } .card-popup__art { aspect-ratio: 2 / 3; width: min(160px, 40%); margin-inline: auto; border-radius: 8%; overflow: hidden; background: var(--color-bg-soft); border: 1px solid var(--color-border); box-shadow: 0 0 20px rgba(216, 181, 107, 0.2); flex-shrink: 0; } .card-popup__art img { width: 100%; height: 100%; object-fit: cover; } .card-popup__eyebrow { text-align: center; font-size: 0.8rem; color: var(--color-text-muted); letter-spacing: 0.03em; } .card-popup__title { text-align: center; margin: 0; } .card-popup__angel { text-align: center; color: var(--color-gold-light); font-style: italic; } .card-popup__meaning { text-align: center; color: var(--color-text-muted); font-size: 0.95rem; } .card-popup__keywords { text-align: center; color: var(--color-text-muted); font-size: 0.85rem; letter-spacing: 0.02em; } .card-popup__field { border-top: 1px solid var(--color-border); padding-top: 0.8rem; } .card-popup__field h3 { font-size: 0.95rem; color: var(--color-gold-light); margin-bottom: 0.3rem; } .card-popup__field p { white-space: pre-line; font-size: 0.95rem; } .card-popup__field--enter { animation: card-popup-field-in 320ms ease both; } @keyframes card-popup-field-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .card-popup__nav { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.8rem 1rem; border-top: 1px solid var(--color-border); flex-shrink: 0; z-index: var(--z-sticky-controls); background: var(--color-surface); } .card-popup__nav button { min-height: 44px; min-width: 44px; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text); } .card-popup__nav button:disabled { opacity: 0.35; cursor: default; } .card-popup__nav button:not(:disabled):hover, .card-popup__nav button:not(:disabled):focus-visible { border-color: var(--color-gold); color: var(--color-gold-light); } .card-popup__nav button:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 2px; } .card-popup__expand { display: none; } /* Opening/closing transitions — desktop: gentle scale+fade. */ @media (prefers-reduced-motion: no-preference) { .card-popup { opacity: 0; transform: scale(0.97) translateY(6px); transition: opacity 220ms ease, transform 220ms ease, overlay 220ms ease allow-discrete, display 220ms ease allow-discrete; } .card-popup[open] { opacity: 1; transform: scale(1) translateY(0); } @starting-style { .card-popup[open] { opacity: 0; transform: scale(0.97) translateY(6px); } } .card-popup::backdrop { opacity: 0; transition: opacity 220ms ease, overlay 220ms ease allow-discrete, display 220ms ease allow-discrete; } .card-popup[open]::backdrop { opacity: 1; } @starting-style { .card-popup[open]::backdrop { opacity: 0; } } } body.card-popup-open { overflow: hidden; } /* Mobile: bottom sheet, safe-area aware, independently scrolling body. */ @media (max-width: 600px) { .card-popup, .card-popup[data-fallback="true"] .card-popup__inner { max-width: 100%; width: 100%; } .card-popup:not([data-fallback="true"]) { position: fixed; inset: auto 0 0 0; margin: 0; max-height: min(90vh, 100%); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-popup__header { padding-top: max(0.9rem, env(safe-area-inset-top)); } .card-popup__nav { padding-bottom: max(0.8rem, env(safe-area-inset-bottom)); } .card-popup__art { width: min(140px, 45%); } @media (prefers-reduced-motion: no-preference) { .card-popup:not([data-fallback="true"]) { transform: translateY(16px); } .card-popup:not([data-fallback="true"])[open] { transform: translateY(0); } @starting-style { .card-popup:not([data-fallback="true"])[open] { transform: translateY(16px); } } } } @media (prefers-reduced-motion: reduce) { .card-popup, .card-popup::backdrop { transition: none !important; transform: none !important; } .card-popup__field--enter { animation: none; } }