/* Final ticket clipping layer: the ticket shape is clipped, not painted over. */ .book-ticket, .share-ticket { overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; filter: drop-shadow(0 20px 38px rgba(35, 51, 54, 0.16)); } .book-ticket::before, .book-ticket::after, .share-ticket::before, .share-ticket::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; opacity: 0 !important; visibility: hidden !important; } @keyframes ticket-card-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes book-ticket-shell-enter { 0% { opacity: 0; transform: translate3d( calc(var(--ticket-stack-x, 0px) - 10px), calc(var(--ticket-stack-motion-y, 0px) + var(--ticket-stack-lift, 0px) - 14px), 0 ) rotate(var(--ticket-stack-rotate, 0deg)) scale(0.985); } 58% { opacity: 1; } 100% { opacity: 1; transform: translate3d( var(--ticket-stack-x, 0px), calc(var(--ticket-stack-motion-y, 0px) + var(--ticket-stack-lift, 0px)), 0 ) rotate(var(--ticket-stack-rotate, 0deg)) scale(1); } } /* Share preview controls must float over the preview paper, not join the toolbar flow. */ .share-preview__close { position: absolute !important; top: 0 !important; right: 0 !important; display: grid !important; width: 34px !important; height: 34px !important; padding: 0 !important; place-items: center !important; pointer-events: auto !important; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important; border-radius: 999px !important; color: color-mix(in srgb, var(--ink) 68%, transparent) !important; background: color-mix(in srgb, #fffaf0 72%, transparent) !important; box-shadow: 0 8px 20px rgba(35, 45, 45, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(14px) saturate(118%) !important; -webkit-backdrop-filter: blur(14px) saturate(118%) !important; } /* Experimental ticket typography: typewritten meta and action labels. */ @font-face { font-family: "TicketTypewriterLocal"; src: url("../public/fonts/lxgw-wenkai-mono-regular-subset.woff2") format("woff2"), local("LXGW WenKai Mono"), local("LXGWWenKaiMono-Regular"), local("American Typewriter"), local("AmericanTypewriter"), local("Courier"); font-display: swap; font-style: normal; font-weight: 400; } .book-ticket .book-card__title-original, .share-ticket .book-card__title-original { color: color-mix(in srgb, var(--ink) 68%, transparent) !important; font-family: var(--font-latin) !important; font-size: 10.8px !important; font-style: italic !important; font-weight: 400 !important; line-height: 1.12 !important; } .book-ticket .book-card__meta, .share-ticket .book-card__meta { color: color-mix(in srgb, var(--ink) 70%, transparent) !important; font-family: "TicketTypewriterLocal", "LXGW WenKai Mono", "LXGW WenKai", "American Typewriter", "Courier New", "Kaiti SC", monospace !important; font-size: 10.4px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.3 !important; } .book-ticket .book-card__shareline, .share-ticket .book-card__quote { color: color-mix(in srgb, var(--ink) 78%, transparent) !important; font-family: "TicketTypewriterLocal", "LXGW WenKai Mono", "LXGW WenKai", "American Typewriter", "Kaiti SC", system-ui, sans-serif !important; font-size: 11px !important; font-weight: 620 !important; letter-spacing: 0 !important; line-height: 1.38 !important; } .share-preview__canvas .share-ticket { filter: drop-shadow(0 30px 48px rgba(18, 28, 29, 0.26)) drop-shadow(0 10px 20px rgba(18, 28, 29, 0.16)) !important; } /* Final book-ticket close: anchored to the top ticket itself. */ .book-card.is-ticket .book-ticket > .book-card__close--float { position: absolute !important; top: 6px !important; right: 6px !important; z-index: 50 !important; display: grid !important; width: 38px !important; height: 38px !important; padding: 0 !important; place-items: center !important; border: 0 !important; border-radius: 999px !important; color: color-mix(in srgb, var(--accent) 76%, var(--ink) 24%) !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important; opacity: 0 !important; overflow: visible !important; transform: translate(3px, -3px) !important; transition: opacity 160ms ease, transform 160ms ease, color 160ms ease !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible { opacity: 0.94 !important; transform: translate(0, 0) !important; outline: none !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-ticket .book-ticket > .book-card__close--float::after { position: absolute !important; top: 50% !important; left: 50% !important; display: grid !important; width: 28px !important; height: 28px !important; place-items: center !important; box-sizing: border-box !important; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent) !important; border-radius: 999px !important; background: rgba(255, 250, 240, 0.88) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; color: currentColor !important; font-family: "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif !important; line-height: 1 !important; text-align: center !important; transform: translate(-50%, -50%) !important; transition: opacity 160ms ease !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::before { content: "×" !important; opacity: 1 !important; font-size: 15px !important; font-weight: 360 !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::after { content: "Esc" !important; opacity: 0 !important; font-size: 8px !important; font-weight: 760 !important; letter-spacing: 0.01em !important; transition-delay: 420ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::before, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::before { opacity: 0 !important; transition-delay: 420ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::after, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::after { opacity: 1 !important; } .book-ticket__cover, .share-ticket__cover, .book-ticket__body, .share-ticket__body { border: 0 !important; border-radius: 0 !important; clip-path: none !important; -webkit-clip-path: none !important; } .book-ticket__cover img, .share-ticket__cover img { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center top !important; } .book-ticket__body, .share-ticket__body { padding-bottom: var(--ticket-body-bottom-padding, 9px) !important; background: linear-gradient(180deg, #fffaf0, #fff6e7), url("../public/textures/land-paper-tile.png") !important; background-size: auto, 360px 360px !important; } .book-ticket .book-card__shareline, .share-ticket .book-card__quote { display: block !important; overflow: hidden !important; max-height: calc(var(--ticket-intro-lines, 3) * 1.34em) !important; -webkit-box-orient: initial !important; -webkit-line-clamp: initial !important; } .book-ticket .book-card__ticket-actions, .share-ticket .book-card__ticket-actions { margin-bottom: var(--ticket-action-bottom-gap, 24px) !important; padding-bottom: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .book-ticket .book-card__action, .share-ticket .book-card__action { height: 36px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; } .book-ticket .book-card__action-label, .share-ticket .book-card__action-label { line-height: 1.05 !important; } .book-ticket .book-card__action:hover, .book-ticket .book-card__action:focus, .share-ticket .book-card__action:hover, .share-ticket .book-card__action:focus { background: transparent !important; background-image: none !important; box-shadow: none !important; } .book-card.is-ticket { width: min(var(--book-stack-width, 222px), calc(100vw - 36px)) !important; transform: translate(-8px, -14px); filter: drop-shadow(0 22px 34px rgba(31, 47, 48, 0.13)); animation: ticket-card-fade-in 180ms ease-out !important; } .book-card.has-book-stack { width: min(var(--book-stack-width, 222px), calc(100vw - 36px)) !important; } .book-card.has-book-stack .book-card__ticket-view { display: flex; align-items: flex-end; width: max-content; max-width: calc(100vw - 36px); padding: 18px 14px 26px; perspective: 900px; } .book-card.has-book-stack .book-card__close--float { right: 4px; top: 0; } .book-card.has-book-stack .book-ticket { position: relative; z-index: var(--ticket-stack-z, 1); flex: 0 0 auto; margin-left: var(--ticket-stack-overlap, 0); cursor: pointer; transform: translateY(var(--ticket-stack-lift, 0)) rotate(var(--ticket-stack-rotate, 0deg)); transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 260ms ease, opacity 180ms ease; } .book-card.is-ticket .book-ticket { animation: ticket-card-fade-in 180ms ease-out !important; } .book-card.has-book-stack .book-ticket:not(.is-selected) { opacity: 1; filter: drop-shadow(0 12px 22px rgba(31, 47, 48, 0.12)); } .book-card.has-book-stack .book-ticket.is-selected { opacity: 1; filter: drop-shadow(0 22px 38px rgba(31, 47, 48, 0.2)) drop-shadow(0 4px 10px rgba(243, 128, 108, 0.13)); } .book-card.has-book-stack .book-ticket:hover, .book-card.has-book-stack .book-ticket:focus-visible { outline: none; transform: translateY(calc(var(--ticket-stack-lift, 0px) - 8px)) rotate(var(--ticket-stack-rotate, 0deg)); } /* Current interaction pass: global-view cards need restrained hierarchy and stable stacked motion. */ .book-ticket, .share-ticket { filter: drop-shadow(0 20px 34px rgba(35, 51, 54, 0.15)); } .book-ticket__body, .share-ticket__body { padding: 12px 15px 9px !important; } .book-ticket .book-card__location-zh, .share-ticket .book-card__location-zh { color: var(--accent) !important; font-family: var(--font-ui) !important; font-size: 11.1px !important; font-weight: 780 !important; line-height: 1.12 !important; letter-spacing: 0.045em !important; } .book-ticket .book-card__title-zh, .share-ticket .book-card__title-zh { margin-top: 6px !important; color: var(--book-title) !important; font-family: var(--font-zh-title) !important; font-size: 20px !important; font-weight: 560 !important; line-height: 1.08 !important; letter-spacing: 0.018em !important; } .book-ticket .book-card__title-original, .share-ticket .book-card__title-original { margin-top: 3px !important; color: color-mix(in srgb, var(--ink) 70%, transparent) !important; font-family: var(--font-latin) !important; font-size: 11.2px !important; font-style: italic !important; line-height: 1.16 !important; } .book-ticket .book-card__meta, .share-ticket .book-card__meta { margin-top: 6px !important; padding-top: 6px !important; color: color-mix(in srgb, var(--ink) 66%, transparent) !important; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif !important; font-size: 10px !important; font-weight: 560 !important; line-height: 1.24 !important; border-top-width: 1px !important; } .book-ticket .book-card__shareline, .share-ticket .book-card__quote { display: block !important; overflow: hidden !important; max-height: calc(3 * 1.42em) !important; margin-top: 6px !important; color: color-mix(in srgb, var(--ink) 74%, transparent) !important; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif !important; font-size: 10.7px !important; font-weight: 520 !important; line-height: 1.42 !important; letter-spacing: 0 !important; white-space: normal !important; -webkit-box-orient: initial !important; -webkit-line-clamp: initial !important; } .book-ticket .book-card__ticket-actions, .share-ticket .book-card__ticket-actions { margin-top: 7px !important; margin-bottom: var(--ticket-action-bottom-gap, 16px) !important; padding-top: 6px !important; border-top-width: 1px !important; } .book-ticket .book-card__action, .share-ticket .book-card__action { height: 29px !important; gap: 1px !important; color: color-mix(in srgb, var(--ink) 70%, transparent) !important; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif !important; font-size: 9.6px !important; font-weight: 650 !important; } .book-ticket .book-card__action-icon, .share-ticket .book-card__action-icon { width: 15px !important; height: 15px !important; stroke-width: 2 !important; } .book-ticket .book-card__action + .book-card__action::before, .share-ticket .book-card__action + .book-card__action::before { top: 5px !important; bottom: 5px !important; background: color-mix(in srgb, var(--ink) 15%, transparent) !important; } .book-card__close, .share-preview__close { position: relative !important; overflow: hidden !important; border-radius: 999px !important; font-size: 0 !important; } .book-card__close::before, .share-preview__close::before { content: "×"; font-size: 18px; line-height: 1; transition: opacity 160ms ease; } .book-card__close::after, .share-preview__close::after { content: "Esc"; position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: currentColor; font-family: "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif; font-size: 8px; font-weight: 760; letter-spacing: 0.02em; transition: opacity 160ms ease 420ms; } .book-card__close:hover::before, .book-card__close:focus-visible::before, .share-preview__close:hover::before, .share-preview__close:focus-visible::before { opacity: 0; transition-delay: 420ms; } .book-card__close:hover::after, .book-card__close:focus-visible::after, .share-preview__close:hover::after, .share-preview__close:focus-visible::after { opacity: 1; } .book-card__close--float { top: 8px !important; right: 8px !important; width: 27px !important; height: 27px !important; border-color: color-mix(in srgb, var(--ink) 16%, transparent) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--glass) 82%, transparent), color-mix(in srgb, var(--bg-0) 58%, transparent)) !important; box-shadow: 0 7px 18px rgba(65, 82, 85, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important; } .book-card.has-book-stack .book-card__ticket-view { align-items: flex-end !important; padding: 10px 10px 20px !important; perspective: none !important; } .book-card.has-book-stack .book-ticket { transform: translateY(var(--ticket-stack-lift, 0)) !important; transition: margin-left 220ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 220ms ease, opacity 160ms ease !important; } .book-card.has-book-stack .book-ticket.is-selected { filter: drop-shadow(0 22px 38px rgba(31, 47, 48, 0.18)) drop-shadow(0 4px 10px rgba(243, 128, 108, 0.12)) !important; } .book-card.has-book-stack .book-ticket:hover, .book-card.has-book-stack .book-ticket:focus-visible { transform: translateY(calc(var(--ticket-stack-lift, 0px) - 3px)) !important; } /* Layer separation pass: use paper gradients instead of heavy shadow for stacked tickets. */ .book-card.is-ticket, .book-ticket, .share-ticket, .book-card.has-book-stack .book-ticket, .book-card.has-book-stack .book-ticket:not(.is-selected), .book-card.has-book-stack .book-ticket.is-selected { filter: none !important; box-shadow: none !important; } .book-card.is-ticket { background: radial-gradient(ellipse at 52% 50%, rgba(255, 252, 244, 0.2), rgba(255, 252, 244, 0) 68%) !important; } .book-card.is-ticket .book-card__ticket-view { isolation: isolate; } .book-card.is-ticket .book-card__ticket-view::before { content: ""; position: absolute; inset: -10px -9px -13px; z-index: -1; pointer-events: none; background: radial-gradient( ellipse at 50% 52%, rgba(255, 250, 236, 0.58) 0%, rgba(255, 250, 236, 0.28) 43%, rgba(255, 250, 236, 0) 74% ); } .book-ticket, .share-ticket { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.48), rgba(255, 251, 242, 0.12) 38%, rgba(46, 72, 74, var(--ticket-layer-edge-alpha, 0.1)) ) !important; } .book-ticket__cover, .share-ticket__cover { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 34%, rgba(31, 53, 55, var(--ticket-layer-edge-alpha, 0.08)) ) !important; } .book-ticket__cover img, .share-ticket__cover img { mix-blend-mode: normal; } .book-ticket__body, .share-ticket__body { background: linear-gradient( 115deg, color-mix(in srgb, #fffdf6 92%, var(--accent) var(--ticket-layer-warmth, 5%)) 0%, rgba(255, 250, 239, 0.99) 48%, color-mix(in srgb, #f5fbf8 92%, #9bb9b2 var(--ticket-layer-coolness, 0%)) 100% ), linear-gradient( 90deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 24%, rgba(57, 82, 82, var(--ticket-layer-edge-alpha, 0.08)) 100% ), url("../public/textures/land-paper-tile.png") !important; background-size: auto, auto, 360px 360px !important; } .book-card.has-book-stack .book-card__ticket-view { padding: 14px 16px 26px !important; } .book-card.has-book-stack .book-ticket + .book-ticket { margin-left: calc(var(--ticket-stack-overlap, -188px) + 4px) !important; } /* Physical stack motion: keep the cards upright and let them visibly trade places. */ .book-card.has-book-stack .book-card__ticket-view.is-prepping-stack-motion .book-ticket { transition: none !important; } .book-card.has-book-stack .book-ticket { transform: translate3d( var(--ticket-stack-x, 0px), calc(var(--ticket-stack-motion-y, 0px) + var(--ticket-stack-lift, 0px)), 0 ) !important; transition: margin-left 560ms cubic-bezier(0.2, 0.86, 0.18, 1), transform 560ms cubic-bezier(0.18, 0.92, 0.2, 1), filter 420ms ease, opacity 220ms ease !important; } .book-card.has-book-stack .book-ticket:hover, .book-card.has-book-stack .book-ticket:focus-visible { will-change: transform; transform: translate3d( var(--ticket-stack-x, 0px), calc(var(--ticket-stack-motion-y, 0px) + var(--ticket-stack-lift, 0px) - 2px), 0 ) !important; } .book-card.has-book-stack .book-ticket.is-moving-stack { pointer-events: none; will-change: transform; } .book-card.has-book-stack .book-card__ticket-view.is-prepping-stack-motion .book-ticket { will-change: transform; } /* Long meta line: keep short entries on one line, split long entries into author/details lines. */ .book-ticket .book-card__meta, .share-ticket .book-card__meta { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; transform: none !important; } .book-ticket .book-card__meta.is-meta-split, .share-ticket .book-card__meta.is-meta-split { display: block !important; overflow: hidden !important; white-space: normal !important; line-height: 1.22 !important; } .book-card__meta-authors, .book-card__meta-details { display: block; overflow-wrap: anywhere; word-break: normal; } .book-card__meta-authors { width: max-content; max-width: none; overflow: visible !important; overflow-wrap: normal !important; text-overflow: clip !important; word-break: keep-all !important; white-space: nowrap !important; transform: scaleX(var(--book-meta-author-scale, 1)); transform-origin: left center; } .book-card__meta-details { margin-top: 2px; } /* Ticket close control floats above the ticket, matching the detail-card close logic. */ .book-card.is-ticket .book-card__ticket-view > .book-card__close--float { position: absolute !important; top: 2px !important; right: 2px !important; z-index: 30 !important; display: grid !important; width: 38px !important; height: 38px !important; padding: 0 !important; place-items: center !important; border: 0 !important; border-radius: 999px !important; color: color-mix(in srgb, var(--ink) 58%, transparent) !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important; opacity: 0 !important; overflow: visible !important; transform: translateY(-3px) !important; transition: opacity 160ms ease, transform 160ms ease, color 160ms ease !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible { opacity: 0.76 !important; transform: translateY(0) !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float::before, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float::after { position: absolute !important; top: 50% !important; left: 50% !important; display: grid !important; width: 22px !important; height: 22px !important; place-items: center !important; box-sizing: border-box !important; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important; border-radius: 999px !important; background: color-mix(in srgb, #fffaf0 78%, transparent) !important; box-shadow: 0 5px 12px rgba(50, 58, 54, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important; color: currentColor !important; font-family: "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif !important; line-height: 1 !important; text-align: center !important; transform: translate(-50%, -50%) !important; transition: opacity 160ms ease !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float::before { content: "×" !important; opacity: 1 !important; font-size: 13px !important; font-weight: 360 !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float::after { content: "Esc" !important; opacity: 0 !important; font-size: 7px !important; font-weight: 760 !important; letter-spacing: 0.01em !important; transition-delay: 420ms !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover::before, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible::before { opacity: 0 !important; transition-delay: 420ms !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover::after, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible::after { opacity: 1 !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible { color: var(--accent) !important; outline: none !important; } .book-ticket__body, .share-ticket__body { padding-top: 15px !important; } .book-ticket .book-card__meta, .share-ticket .book-card__meta { margin-top: 8px !important; padding-top: 7px !important; } .book-ticket .book-card__shareline, .share-ticket .book-card__quote { margin-top: 9px !important; padding-top: 1px !important; line-height: 1.5 !important; max-height: calc(3 * 1.5em) !important; } .book-ticket .book-card__ticket-actions, .share-ticket .book-card__ticket-actions { margin-top: 11px !important; padding-top: 8px !important; } /* Floating depth pass: avoid rectangular glow blocks and separate stacked paper layers. */ .book-card.is-ticket .book-card__ticket-view { overflow: visible !important; } .book-card.is-ticket .book-card__ticket-view::before { inset: -22px -26px -12px !important; opacity: 0.95 !important; background: radial-gradient( ellipse at 48% 44%, rgba(255, 250, 232, 0.74) 0%, rgba(255, 250, 232, 0.38) 40%, rgba(255, 250, 232, 0) 76% ), radial-gradient( ellipse at 50% 88%, rgba(83, 117, 115, 0.18) 0%, rgba(83, 117, 115, 0.08) 36%, rgba(83, 117, 115, 0) 68% ) !important; filter: blur(7px); -webkit-mask-image: radial-gradient(ellipse at 50% 52%, #000 0 56%, rgba(0, 0, 0, 0.72) 64%, transparent 82%); mask-image: radial-gradient(ellipse at 50% 52%, #000 0 56%, rgba(0, 0, 0, 0.72) 64%, transparent 82%); } .book-ticket, .share-ticket { isolation: isolate; filter: drop-shadow( var(--ticket-cast-x, 8px) var(--ticket-cast-y, 16px) 20px rgba(45, 48, 43, var(--ticket-cast-alpha, 0.12)) ) !important; } .book-ticket__cover, .share-ticket__cover, .book-ticket__body, .share-ticket__body { position: relative !important; } .book-card.has-book-stack .book-ticket:not(.is-selected) .book-ticket__cover::before, .book-card.has-book-stack .book-ticket:not(.is-selected) .book-ticket__body::before { content: none !important; display: none !important; } .book-ticket .book-card__ticket-actions, .share-ticket .book-card__ticket-actions { margin-bottom: var(--ticket-action-bottom-gap, 12px) !important; } /* Remove the extra underlay: the clipped white ticket itself is the only body. */ .book-card.is-ticket .book-card__ticket-view::before { content: none !important; display: none !important; background: none !important; filter: none !important; } .book-card.is-ticket { background: transparent !important; filter: none !important; } .book-card.has-book-stack .book-ticket, .book-ticket, .share-ticket { filter: drop-shadow( var(--ticket-cast-x, 8px) var(--ticket-cast-y, 16px) 20px rgba(45, 48, 43, var(--ticket-cast-alpha, 0.12)) ) drop-shadow( 2px 3px 5px rgba(45, 48, 43, 0.08) ) !important; } .book-card.has-book-stack .book-ticket:not(.is-selected) { filter: drop-shadow( var(--ticket-cast-x, 6px) var(--ticket-cast-y, 12px) 16px rgba(45, 48, 43, var(--ticket-cast-alpha, 0.1)) ) drop-shadow( 1px 2px 4px rgba(45, 48, 43, 0.06) ) !important; } .book-card.has-book-stack .book-ticket.is-selected { filter: drop-shadow( var(--ticket-cast-x, 8px) var(--ticket-cast-y, 16px) 21px rgba(45, 48, 43, var(--ticket-cast-alpha, 0.13)) ) drop-shadow( 2px 3px 6px rgba(45, 48, 43, 0.08) ) !important; } /* Paper ownership: the clipped ticket shell is the single paper surface. */ .book-ticket, .share-ticket, .book-card.has-book-stack .book-ticket { background: linear-gradient( 180deg, #fffdf6 0%, #fffaf0 52%, #fffaf0 100% ), url("../public/textures/land-paper-tile.png") !important; background-size: auto, 360px 360px !important; box-shadow: none !important; } .book-card.is-detail .book-card__ticket-view, .book-card.is-detail.has-book-stack .book-card__ticket-view { display: none !important; } .book-ticket__body, .share-ticket__body { background: transparent !important; background-image: none !important; } /* Final shared paper actions: ticket and detail use the same quiet icon language. */ .book-ticket, .share-ticket, .book-card.is-detail .book-card__detail-view { --book-action-rest: color-mix(in srgb, var(--book-paper-ink, var(--ink)) 58%, transparent); --book-action-hover: color-mix(in srgb, var(--accent) 82%, var(--book-paper-ink, var(--ink)) 18%); --book-action-divider: color-mix(in srgb, var(--book-paper-ink, var(--ink)) 16%, transparent); } .book-card.is-detail .book-card__detail-actions { display: grid !important; grid-template-columns: 62px 54px !important; justify-content: end !important; align-items: center !important; gap: 0 !important; min-width: 116px !important; margin-left: auto !important; margin-right: -4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .book-ticket .book-card__action, .share-ticket .book-card__action, .book-card.is-detail .book-card__detail-actions .book-card__action { position: relative !important; display: inline-grid !important; grid-template-rows: 16px auto !important; align-items: center !important; justify-items: center !important; gap: 2px !important; min-width: 0 !important; width: 100% !important; height: 34px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: var(--book-action-rest) !important; background: transparent !important; box-shadow: none !important; outline: none !important; transform: none !important; transition: color 150ms ease, opacity 150ms ease !important; } .book-ticket .book-card__action + .book-card__action::before, .share-ticket .book-card__action + .book-card__action::before, .book-card.is-detail .book-card__detail-actions .book-card__action + .book-card__action::before { content: "" !important; position: absolute !important; top: 5px !important; bottom: 5px !important; left: 0 !important; width: 1px !important; background: var(--book-action-divider) !important; } .book-ticket .book-card__action-icon, .share-ticket .book-card__action-icon, .book-card.is-detail .book-card__detail-actions .book-card__action-icon { display: block !important; width: 16px !important; height: 16px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } .book-ticket .book-card__action-label, .share-ticket .book-card__action-label, .book-card.is-detail .book-card__detail-actions .book-card__action-label { display: block !important; font-size: 10px !important; line-height: 1 !important; white-space: nowrap !important; } .book-ticket .book-card__action:hover, .book-ticket .book-card__action:focus-visible, .share-ticket .book-card__action:hover, .share-ticket .book-card__action:focus-visible, .book-card.is-detail .book-card__detail-actions .book-card__action:hover, .book-card.is-detail .book-card__detail-actions .book-card__action:focus-visible { color: var(--book-action-hover) !important; background: transparent !important; box-shadow: none !important; } .book-ticket .book-card__action:active, .share-ticket .book-card__action:active, .book-card.is-detail .book-card__detail-actions .book-card__action:active { color: var(--accent) !important; opacity: 0.72 !important; } .book-ticket .book-card__save.is-saved, .share-ticket .book-card__save.is-saved, .book-card.is-detail .book-card__detail-actions .book-card__save.is-saved { color: var(--accent) !important; background: transparent !important; box-shadow: none !important; } .book-ticket .book-card__save.is-saved .book-card__action-icon, .share-ticket .book-card__save.is-saved .book-card__action-icon, .book-card.is-detail .book-card__detail-actions .book-card__save.is-saved .book-card__action-icon { fill: color-mix(in srgb, var(--accent) 20%, transparent) !important; stroke: currentColor !important; } /* Final close control centering: circle and label are separate centered layers. */ .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before, .share-preview__close::before { content: "" !important; opacity: 1 !important; font-size: 0 !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after, .share-preview__close::after { content: "×" !important; display: grid !important; width: 29px !important; height: 29px !important; place-items: center !important; border: 0 !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; color: currentColor !important; font-family: "Helvetica Neue", Arial, "PingFang SC", system-ui, sans-serif !important; font-size: 17px !important; font-weight: 300 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; transform: translate(-50%, -50%) !important; transition: opacity 160ms ease !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::before, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::before, .book-card.is-detail .book-card__close--detail:focus-visible::before, .share-preview__close:hover::before, .share-preview__close:focus-visible::before { opacity: 1 !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::after, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::after, .book-card.is-detail .book-card__close--detail:focus-visible::after, .share-preview__close:hover::after, .share-preview__close:focus-visible::after { content: "Esc" !important; font-size: 8px !important; font-weight: 760 !important; letter-spacing: 0.01em !important; opacity: 1 !important; } /* Final ticket reading rhythm: copying text should not reshuffle the paper. */ .book-ticket, .share-ticket, .book-card.is-detail .book-card__detail-view { -webkit-user-select: text !important; user-select: text !important; } .book-ticket button, .share-ticket button, .book-card.is-detail button, .book-ticket__cover, .share-ticket__cover, .book-card__detail-cover { -webkit-user-select: none !important; user-select: none !important; } .book-ticket, .share-ticket { --ticket-text-gap: 9px; } .book-ticket .book-card__meta, .share-ticket .book-card__meta { margin-top: var(--ticket-text-gap) !important; padding-top: 7px !important; } .book-ticket .book-card__shareline, .share-ticket .book-card__quote { margin-top: var(--ticket-text-gap) !important; } .book-ticket .book-card__ticket-actions, .share-ticket .book-card__ticket-actions { margin-top: var(--ticket-text-gap) !important; } .book-ticket .book-card__ticket-actions, .share-ticket .book-card__ticket-actions { margin-bottom: var(--ticket-action-bottom-gap, 6px) !important; } /* Detail card refinement: library-card / postcard surface. */ .book-card.is-detail { width: auto !important; max-width: min(calc(100vw - 44px), var(--tooltip-safe-width, calc(100vw - 44px))) !important; } .book-card.is-detail .book-card__detail-view { --detail-cover-height: 420px; --detail-cover-width: 470px; --detail-cover-max-ratio: 1.12; --detail-wide-cover-threshold: 0.94; --detail-wide-cover-gap: 40px; --detail-wide-copy-min-width: clamp(286px, 24vw, 330px); --detail-wide-copy-width: clamp(320px, 27vw, 388px); --detail-cover-fit: contain; --detail-copy-min-width: clamp(300px, 26vw, 360px); --detail-copy-width: clamp(340px, 29vw, 424px); position: relative !important; display: grid !important; grid-template-columns: minmax(0, var(--detail-cover-width)) minmax(var(--detail-copy-min-width), var(--detail-copy-width)) !important; gap: var(--detail-column-gap, 26px) !important; width: max-content !important; max-width: min(100%, var(--tooltip-safe-width, 100%)) !important; padding: 24px 28px !important; overflow: hidden !important; border: 0 !important; border-radius: 1px !important; background: #fffaf0 !important; background-image: none !important; background-size: auto !important; box-shadow: 0 18px 44px rgba(45, 48, 43, 0.16) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .book-card.is-detail .book-card__detail-view::before { content: none !important; display: none !important; } .book-card.is-detail .book-card__detail-view.is-wide-detail-cover { --detail-column-gap: var(--detail-wide-cover-gap); --detail-copy-min-width: var(--detail-wide-copy-min-width); --detail-copy-width: var(--detail-wide-copy-width); } .book-card.is-detail .book-card__detail-cover { display: flex !important; align-self: start !important; justify-self: start !important; width: var(--detail-cover-width) !important; min-width: 0 !important; height: var(--detail-cover-height) !important; overflow: hidden !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .book-card.is-detail .book-card__detail-cover img { display: block !important; width: 100% !important; height: var(--detail-cover-height) !important; max-width: none !important; max-height: none !important; object-fit: var(--detail-cover-fit, contain) !important; object-position: center top !important; filter: none !important; } .book-card.is-detail .book-card__detail-body { position: relative !important; z-index: 1 !important; display: flex !important; min-width: 0 !important; min-height: 0 !important; flex-direction: column !important; padding-top: 0 !important; } .book-card.is-detail .book-card__detail-top { display: block !important; padding-top: 4px !important; padding-right: 40px !important; } .book-card.is-detail .book-card__location-zh { max-width: 100% !important; color: var(--accent) !important; font-family: var(--font-ui) !important; font-size: 16px !important; font-weight: 780 !important; line-height: 1.12 !important; letter-spacing: 0.015em !important; } .book-card.is-detail .book-card__location-en { display: none !important; } .book-card.is-detail .book-card__close { position: absolute !important; top: 15px !important; right: 16px !important; z-index: 2 !important; width: 34px !important; height: 34px !important; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent) !important; border-radius: 999px !important; color: color-mix(in srgb, var(--ink) 58%, transparent) !important; background: #fffaf0 !important; box-shadow: 0 8px 18px rgba(50, 58, 54, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; font-size: 0 !important; opacity: 0 !important; transform: translateY(-3px) !important; transition: opacity 160ms ease, transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease !important; } .book-card.is-detail .book-card__detail-view:hover .book-card__close, .book-card.is-detail .book-card__close:focus-visible { opacity: 1 !important; transform: translateY(0) !important; } .book-card.is-detail .book-card__close::before { content: "×" !important; opacity: 1 !important; font-size: 17px !important; font-weight: 360 !important; line-height: 1 !important; transition: none !important; } .book-card.is-detail .book-card__close:hover, .book-card.is-detail .book-card__close:focus-visible { border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 12%, #fffaf0) !important; outline: none !important; } .book-card.is-detail .book-card__close::after { content: none !important; display: none !important; } .book-card.is-detail .book-card__title-zh { margin-top: 18px !important; color: var(--book-title) !important; font-size: clamp(27px, 2.4vw, 34px) !important; line-height: 1.09 !important; letter-spacing: 0.012em !important; } .book-card.is-detail .book-card__title-main, .book-card.is-detail .book-card__title-sub { display: block !important; } .book-card.is-detail .book-card__title-sub { margin-top: 5px !important; } .book-card.is-detail .book-card__title-zh.is-title-subtitle .book-card__title-sub { max-width: 100% !important; font-size: 0.62em !important; font-weight: 520 !important; line-height: 1.18 !important; letter-spacing: 0.01em !important; white-space: nowrap !important; transform: scaleX(var(--detail-title-sub-scale, 1)) !important; transform-origin: left center !important; } .book-card.is-detail .book-card__title-zh.is-title-subtitle.is-title-long-subtitle .book-card__title-sub { font-size: 0.54em !important; letter-spacing: 0 !important; } .book-card.is-detail .book-card__title-zh.is-title-equal-split .book-card__title-sub { font-size: 0.82em !important; line-height: 1.14 !important; } .book-card.is-detail .book-card__title-original { margin-top: 8px !important; color: color-mix(in srgb, var(--ink) 66%, transparent) !important; font-family: var(--font-latin) !important; font-size: 14.5px !important; font-style: italic !important; line-height: 1.18 !important; } .book-card.is-detail .book-card__meta { margin-top: 18px !important; padding-top: 14px !important; border-top: 0 !important; background-image: repeating-linear-gradient( to right, color-mix(in srgb, var(--ink) 20%, transparent) 0 1px, transparent 1px 4px ) !important; background-repeat: no-repeat !important; background-position: 1px 0 !important; background-size: calc(100% - 1px) 1px !important; color: color-mix(in srgb, var(--ink) 67%, transparent) !important; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.32 !important; white-space: normal !important; } .book-card.is-detail .book-card__intro { display: grid !important; gap: 16px !important; margin-top: 18px !important; margin-bottom: 18px !important; max-width: 100% !important; color: color-mix(in srgb, var(--ink) 76%, transparent) !important; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.58 !important; letter-spacing: 0 !important; } .book-card.is-detail .book-card__intro p { margin: 0 !important; } .book-card.is-detail .book-card__intro a { color: color-mix(in srgb, var(--ink) 84%, transparent) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .book-card.is-detail .book-card__intro a:hover, .book-card.is-detail .book-card__intro a:focus-visible { color: var(--ink) !important; } .book-card.is-detail .book-card__detail-footer { position: relative !important; z-index: 1 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; margin-top: 22px !important; padding: 16px 0 0 !important; border-top: 0 !important; background-image: repeating-linear-gradient( to right, color-mix(in srgb, var(--ink) 16%, transparent) 0 1px, transparent 1px 4px ) !important; background-repeat: no-repeat !important; background-position: 1px 0 !important; background-size: calc(100% - 1px) 1px !important; } .book-card.is-detail .book-card__pager { display: flex !important; align-items: center !important; align-self: center !important; gap: 9px !important; height: 34px !important; padding: 0 2px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .book-card.is-detail .book-card__pager[hidden] { display: none !important; } .book-card.is-detail .book-card__page { width: 18px !important; height: 30px !important; border: 0 !important; border-radius: 999px !important; color: color-mix(in srgb, var(--ink) 43%, transparent) !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-size: 15px !important; } .book-card.is-detail .book-card__counter { min-width: 38px !important; color: color-mix(in srgb, var(--ink) 43%, transparent) !important; font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 720 !important; letter-spacing: 0.05em !important; } .book-card.is-detail .book-card__detail-actions { display: flex !important; gap: 0 !important; margin-left: auto !important; margin-right: -8px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .book-card.is-detail .book-card__detail-actions .book-card__action { position: relative !important; display: grid !important; grid-template-rows: 15px auto !important; gap: 2px !important; min-width: 56px !important; height: 32px !important; padding: 0 12px !important; border: 0 !important; border-radius: 0 !important; color: color-mix(in srgb, var(--ink) 55%, transparent) !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif !important; font-size: 10px !important; font-weight: 650 !important; } .book-card.is-detail .book-card__detail-actions .book-card__action + .book-card__action::before { content: "" !important; position: absolute !important; top: 6px !important; bottom: 6px !important; left: 0 !important; width: 1px !important; background: color-mix(in srgb, var(--accent) 22%, transparent) !important; } .book-card.is-detail .book-card__detail-actions .book-card__action-icon { width: 15px !important; height: 15px !important; justify-self: center !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; } .book-card.is-detail .book-card__detail-actions .book-card__save .book-card__action-icon { fill: transparent !important; } .book-card.is-detail .book-card__detail-actions .book-card__action-label { display: block !important; line-height: 1 !important; } .book-card.is-detail .book-card__detail-actions .book-card__action:hover, .book-card.is-detail .book-card__detail-actions .book-card__action:focus-visible, .book-card.is-detail .book-card__page:hover, .book-card.is-detail .book-card__page:focus-visible { color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; outline: none !important; } .book-card.is-detail .book-card__detail-actions .book-card__save.is-saved { color: var(--accent) !important; background: transparent !important; box-shadow: none !important; } .book-card.is-detail .book-card__detail-actions .book-card__save.is-saved .book-card__action-icon { fill: color-mix(in srgb, var(--accent) 18%, transparent) !important; } @media (max-width: 720px) { .book-card.is-detail { width: min(430px, calc(100vw - 28px)) !important; } .book-card.is-detail .book-card__detail-view { grid-template-columns: 1fr !important; gap: 18px !important; padding: 18px !important; width: 100% !important; --detail-cover-height: min(330px, 52vh); } .book-card.is-detail .book-card__detail-cover { width: min(220px, 72%) !important; justify-self: center !important; height: auto !important; box-shadow: none !important; } .book-card.is-detail .book-card__detail-cover img { width: 100% !important; height: auto !important; max-width: 100% !important; } .book-card.is-detail .book-card__title-zh { margin-top: 16px !important; font-size: 29px !important; } .book-card.is-detail .book-card__title-zh.is-title-subtitle .book-card__title-sub { max-width: 100% !important; font-size: 0.66em !important; } .book-card.is-detail .book-card__detail-body { min-height: 0 !important; } .book-card.is-detail .book-card__detail-footer { flex-wrap: wrap !important; } } /* Kill legacy painted notch circles. The only ticket edge comes from clip-path. */ .book-ticket::before, .book-ticket::after, .share-ticket::before, .share-ticket::after { content: none !important; display: none !important; position: static !important; inset: auto !important; width: 0 !important; height: 0 !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; opacity: 0 !important; visibility: hidden !important; } /* Final share-preview close position: sits in the preview frame corner. */ .share-preview__close { position: absolute !important; top: 0 !important; right: 0 !important; display: grid !important; width: 34px !important; height: 34px !important; padding: 0 !important; place-items: center !important; pointer-events: auto !important; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important; border-radius: 999px !important; color: color-mix(in srgb, var(--ink) 68%, transparent) !important; background: color-mix(in srgb, #fffaf0 72%, transparent) !important; box-shadow: 0 8px 20px rgba(35, 45, 45, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(14px) saturate(118%) !important; -webkit-backdrop-filter: blur(14px) saturate(118%) !important; } /* Final ticket typography experiment: original English title, typewritten meta/action/short copy. */ .book-ticket .book-card__title-original, .share-ticket .book-card__title-original { color: color-mix(in srgb, var(--ink) 68%, transparent) !important; font-family: var(--font-latin) !important; font-size: 10.8px !important; font-style: italic !important; font-weight: 400 !important; line-height: 1.14 !important; } .book-ticket .book-card__meta, .share-ticket .book-card__meta { color: color-mix(in srgb, var(--ink) 70%, transparent) !important; font-family: "TicketTypewriterLocal", "LXGW WenKai Mono", "LXGW WenKai", "American Typewriter", "Courier New", "Kaiti SC", monospace !important; font-size: 10.4px !important; font-weight: 360 !important; letter-spacing: 0 !important; line-height: 1.3 !important; } .book-ticket .book-card__shareline, .share-ticket .book-card__quote { color: color-mix(in srgb, var(--ink) 78%, transparent) !important; font-family: "TicketTypewriterLocal", "LXGW WenKai Mono", "LXGW WenKai", "American Typewriter", "Kaiti SC", system-ui, sans-serif !important; font-size: 11px !important; font-weight: 620 !important; letter-spacing: 0 !important; line-height: 1.38 !important; } .book-ticket .book-card__shareline[hidden], .share-ticket .book-card__quote[hidden] { display: none !important; margin: 0 !important; } .book-ticket .book-card__action, .share-ticket .book-card__action, .book-card.is-detail .book-card__detail-actions .book-card__action { font-family: "TicketTypewriterLocal", "LXGW WenKai Mono", "LXGW WenKai", "American Typewriter", "Kaiti SC", system-ui, sans-serif !important; font-weight: 520 !important; letter-spacing: 0 !important; } .book-ticket .book-card__location-zh, .share-ticket .book-card__location-zh { margin-bottom: 7px !important; line-height: 1.16 !important; } .book-ticket .book-card__title-zh, .share-ticket .book-card__title-zh { clear: both !important; margin-top: 0 !important; line-height: 1.12 !important; } .book-card.is-detail .book-card__title-original { color: color-mix(in srgb, var(--ink) 68%, transparent) !important; font-family: var(--font-latin) !important; font-style: italic !important; font-weight: 400 !important; } .book-card.is-detail .book-card__meta, .share-ticket__stamp, .share-ticket__serial, .share-preview__save { font-family: "TicketTypewriterLocal", "LXGW WenKai Mono", "LXGW WenKai", "American Typewriter", "Courier New", "Kaiti SC", monospace !important; letter-spacing: 0 !important; } .book-card.is-detail .book-card__counter, .book-card.is-detail .book-card__page { font-family: var(--font-page-control) !important; letter-spacing: 0 !important; } .book-card.is-detail .book-card__meta { color: color-mix(in srgb, var(--ink) 70%, transparent) !important; font-size: 12.4px !important; font-weight: 360 !important; line-height: 1.34 !important; } .book-card.is-detail .book-card__counter, .book-card.is-detail .book-card__page { font-weight: 420 !important; } .share-ticket__stamp { color: color-mix(in srgb, var(--ink) 58%, transparent) !important; font-size: 10.5px !important; font-weight: 420 !important; } .share-ticket__serial { color: var(--accent) !important; font-size: 10.5px !important; font-weight: 620 !important; } .share-preview__save { font-weight: 520 !important; } /* Final close-and-depth pass: align ticket/share/detail paper depth and corner ESC controls. */ .book-card.has-book-stack .book-ticket, .book-ticket, .share-ticket { filter: drop-shadow(0 18px 44px rgba(45, 48, 43, 0.16)) !important; } .book-card.has-book-stack .book-ticket:not(.is-selected) { filter: drop-shadow(0 14px 34px rgba(45, 48, 43, 0.12)) !important; } .book-card.has-book-stack .book-ticket.is-selected, .share-preview__canvas .share-ticket { filter: drop-shadow(0 18px 46px rgba(45, 48, 43, 0.17)) !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float, .book-card.is-ticket .book-ticket > .book-card__close--float, .book-card.is-detail .book-card__detail-view > .book-card__close--detail, .share-preview__close { position: absolute !important; z-index: 60 !important; display: grid !important; width: 36px !important; height: 36px !important; padding: 0 !important; place-items: center !important; overflow: visible !important; border: 0 !important; border-radius: 999px !important; color: color-mix(in srgb, var(--accent) 72%, var(--ink) 28%) !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important; line-height: 1 !important; opacity: 0 !important; transform: translate(3px, -3px) !important; transition: opacity 160ms ease, transform 160ms ease, color 160ms ease !important; } .book-card.is-ticket .book-ticket > .book-card__close--float { top: 5px !important; right: 5px !important; } .book-card.is-detail .book-card__detail-view { overflow: visible !important; } .book-card.is-detail .book-card__detail-body { position: static !important; } .book-card.is-detail .book-card__detail-view > .book-card__close--detail { top: 10px !important; right: 10px !important; } .share-preview__close { top: 12px !important; right: 12px !important; } .book-card.is-ticket .book-card__close--float:focus-visible, .book-card.is-ticket .book-ticket > .book-card__close--float:hover, .book-card.is-detail .book-card__close--detail:focus-visible, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover, .share-preview__close:hover, .share-preview__close:focus-visible { opacity: 0.94 !important; transform: translate(0, 0) !important; outline: none !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after, .share-preview__close::before, .share-preview__close::after { position: absolute !important; top: 50% !important; left: 50% !important; display: grid !important; width: 29px !important; height: 29px !important; place-items: center !important; box-sizing: border-box !important; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent) !important; border-radius: 999px !important; background: rgba(255, 250, 240, 0.9) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; color: currentColor !important; font-family: "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif !important; line-height: 1 !important; text-align: center !important; transform: translate(-50%, -50%) !important; transition: opacity 160ms ease !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before, .share-preview__close::before { content: "×" !important; opacity: 1 !important; font-size: 15px !important; font-weight: 360 !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after, .share-preview__close::after { content: "Esc" !important; opacity: 0 !important; font-size: 8px !important; font-weight: 760 !important; letter-spacing: 0.01em !important; transition-delay: 420ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::before, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::before, .book-card.is-detail .book-card__close--detail:focus-visible::before, .share-preview__close:hover::before, .share-preview__close:focus-visible::before { opacity: 0 !important; transition-delay: 420ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::after, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::after, .book-card.is-detail .book-card__close--detail:focus-visible::after, .share-preview__close:hover::after, .share-preview__close:focus-visible::after { opacity: 1 !important; } /* Share background halftone: keep the generated ink colors visible. */ .share-preview__canvas { background: var(--share-halftone-image), linear-gradient(180deg, rgba(255, 253, 247, 0.34), rgba(235, 248, 244, 0.18)) !important; background-position: center, center !important; background-size: cover, auto !important; } .share-preview__canvas::before { background: var(--share-cover-image) !important; background-position: center !important; background-size: cover !important; filter: blur(18px) saturate(0.92) contrast(0.95) !important; opacity: 0.54 !important; mix-blend-mode: normal !important; transform: scale(1.06) !important; } .share-preview__canvas::after { background: var(--share-halftone-image), linear-gradient(180deg, rgba(255, 255, 250, 0.08), rgba(231, 247, 242, 0.06)) !important; background-position: center, center !important; background-size: cover, auto !important; filter: saturate(1.08) contrast(1.18) brightness(0.86) !important; opacity: 0 !important; mix-blend-mode: normal !important; } .share-preview[data-halftone-status="ready"] .share-preview__canvas::after { opacity: 1 !important; } /* True ticket bottom is now owned only by the dynamic clip-path from app.js. */ .book-ticket, .share-ticket { -webkit-mask: none !important; mask: none !important; } .book-ticket__body, .share-ticket__body { background: transparent !important; background-image: none !important; } /* Final override: action and close controls must win over the detail legacy pass. */ .book-ticket, .share-ticket, .book-card.is-detail .book-card__detail-view { --book-action-rest: color-mix(in srgb, var(--book-paper-ink, var(--ink)) 58%, transparent); --book-action-hover: color-mix(in srgb, var(--accent) 82%, var(--book-paper-ink, var(--ink)) 18%); --book-action-divider: color-mix(in srgb, var(--book-paper-ink, var(--ink)) 16%, transparent); } .book-card.is-detail .book-card__detail-actions { display: grid !important; grid-template-columns: 62px 54px !important; justify-content: end !important; align-items: center !important; gap: 0 !important; min-width: 116px !important; margin-left: auto !important; margin-right: -4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .book-ticket .book-card__action, .share-ticket .book-card__action, .book-card.is-detail .book-card__detail-actions .book-card__action { display: inline-grid !important; grid-template-rows: 16px auto !important; align-items: center !important; justify-items: center !important; gap: 2px !important; width: 100% !important; height: 34px !important; padding: 0 !important; color: var(--book-action-rest) !important; background: transparent !important; box-shadow: none !important; outline: none !important; transform: none !important; transition: color 150ms ease, opacity 150ms ease !important; } .book-ticket .book-card__action + .book-card__action::before, .share-ticket .book-card__action + .book-card__action::before, .book-card.is-detail .book-card__detail-actions .book-card__action + .book-card__action::before { content: "" !important; position: absolute !important; top: 5px !important; bottom: 5px !important; left: 0 !important; width: 1px !important; background: var(--book-action-divider) !important; } .book-ticket .book-card__action-icon, .share-ticket .book-card__action-icon, .book-card.is-detail .book-card__detail-actions .book-card__action-icon { width: 16px !important; height: 16px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; } .book-ticket .book-card__action:hover, .book-ticket .book-card__action:focus-visible, .share-ticket .book-card__action:hover, .share-ticket .book-card__action:focus-visible, .book-card.is-detail .book-card__detail-actions .book-card__action:hover, .book-card.is-detail .book-card__detail-actions .book-card__action:focus-visible { color: var(--book-action-hover) !important; background: transparent !important; box-shadow: none !important; } .book-ticket .book-card__action:active, .share-ticket .book-card__action:active, .book-card.is-detail .book-card__detail-actions .book-card__action:active { color: var(--accent) !important; opacity: 0.72 !important; } .book-ticket .book-card__save.is-saved, .share-ticket .book-card__save.is-saved, .book-card.is-detail .book-card__detail-actions .book-card__save.is-saved { color: var(--accent) !important; background: transparent !important; box-shadow: none !important; } .book-ticket .book-card__save.is-saved .book-card__action-icon, .share-ticket .book-card__save.is-saved .book-card__action-icon, .book-card.is-detail .book-card__detail-actions .book-card__save.is-saved .book-card__action-icon { fill: color-mix(in srgb, var(--accent) 20%, transparent) !important; stroke: currentColor !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before, .share-preview__close::before { content: "" !important; opacity: 1 !important; font-size: 0 !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after, .share-preview__close::after { content: "×" !important; display: grid !important; width: 29px !important; height: 29px !important; place-items: center !important; border: 0 !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; color: currentColor !important; font-family: "Helvetica Neue", Arial, "PingFang SC", system-ui, sans-serif !important; font-size: 17px !important; font-weight: 300 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; transform: translate(-50%, -50%) !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::before, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::before, .book-card.is-detail .book-card__close--detail:focus-visible::before, .share-preview__close:hover::before, .share-preview__close:focus-visible::before { opacity: 1 !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::after, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::after, .book-card.is-detail .book-card__close--detail:focus-visible::after, .share-preview__close:hover::after, .share-preview__close:focus-visible::after { content: "Esc" !important; font-size: 8px !important; font-weight: 760 !important; letter-spacing: 0.01em !important; opacity: 1 !important; } /* Final fixed detail geometry: card height is locked; cover fills the inner paper lane. */ .book-card.is-detail .book-card__detail-view { --detail-card-height: 500px; --detail-cover-height: 448px; --detail-cover-max-ratio: 1.12; --detail-wide-cover-threshold: 0.94; --detail-wide-cover-gap: 40px; --detail-copy-min-width: clamp(300px, 26vw, 360px); --detail-copy-width: clamp(340px, 29vw, 424px); --detail-wide-copy-min-width: clamp(286px, 24vw, 330px); --detail-wide-copy-width: clamp(320px, 27vw, 388px); --detail-footer-row-height: 48px; box-sizing: border-box !important; height: var(--detail-card-height) !important; min-height: var(--detail-card-height) !important; max-height: var(--detail-card-height) !important; grid-template-columns: minmax(0, var(--detail-cover-width)) minmax(var(--detail-copy-min-width), var(--detail-copy-width)) !important; grid-template-rows: minmax(0, 1fr) !important; align-items: stretch !important; overflow: hidden !important; } .book-card.is-detail .book-card__detail-cover, .book-card.is-detail .book-card__detail-cover img { height: var(--detail-cover-height) !important; max-height: var(--detail-cover-height) !important; } .book-card.is-detail .book-card__detail-body { min-height: 0 !important; height: 100% !important; overflow: hidden !important; display: grid !important; grid-template-rows: auto auto auto auto minmax(0, 1fr) var(--detail-footer-row-height) !important; align-content: stretch !important; } .book-card.is-detail .book-card__detail-top { grid-row: 1 !important; } .book-card.is-detail .book-card__title-zh { grid-row: 2 !important; } .book-card.is-detail .book-card__title-original { grid-row: 3 !important; } .book-card.is-detail .book-card__meta { grid-row: 4 !important; } .book-card.is-detail .book-card__intro { grid-row: 5 !important; display: grid !important; gap: var(--detail-intro-gap, 16px) !important; margin-top: var(--detail-intro-margin-top, 18px) !important; margin-bottom: var(--detail-intro-margin-bottom, 8px) !important; align-self: stretch !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; font-size: calc(14px * var(--detail-intro-font-scale, 1)) !important; line-height: var(--detail-intro-line-height, 1.58) !important; -webkit-mask-image: none !important; mask-image: none !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; } .book-card.is-detail .book-card__intro.is-fit-tight { text-wrap: pretty !important; } .book-card.is-detail .book-card__detail-footer { grid-row: 6 !important; box-sizing: border-box !important; margin-top: 0 !important; min-height: var(--detail-footer-row-height) !important; height: var(--detail-footer-row-height) !important; align-self: end !important; align-items: flex-end !important; padding: 13px 0 0 !important; background-position: 1px 0 !important; } .book-card.is-detail .book-card__title-original { max-width: 100% !important; overflow: hidden !important; font-size: calc(14.5px * var(--detail-title-original-scale, 1)) !important; line-height: 1.12 !important; text-overflow: clip !important; white-space: nowrap !important; } @media (max-width: 720px) { .book-card.is-detail .book-card__detail-view { --detail-card-height: auto; --detail-cover-height: min(330px, 52vh); height: auto !important; min-height: 0 !important; max-height: none !important; } } /* Final share ticket centering: the ticket owns the visual center, controls float around it. */ .share-preview__canvas { position: relative !important; display: grid !important; grid-template-areas: "share-stage" !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; place-items: center !important; } .share-preview__canvas .share-ticket { grid-area: share-stage !important; align-self: center !important; justify-self: center !important; width: min(245px, 72%) !important; margin: 0 !important; } .share-preview__topbar, .share-preview__actions { grid-area: share-stage !important; } /* Final detail close alignment: center the control on the location row. */ .book-card.is-detail .book-card__detail-view { --detail-location-row-center-y: 37px; --detail-close-hit-size: 36px; --detail-close-circle-size: 29px; } .book-card.is-detail .book-card__detail-view > .book-card__close--detail { top: calc(var(--detail-location-row-center-y) - var(--detail-close-hit-size) / 2) !important; right: 16px !important; width: var(--detail-close-hit-size) !important; height: var(--detail-close-hit-size) !important; transform: none !important; } .book-card.is-detail .book-card__detail-view:hover > .book-card__close--detail, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible { opacity: 0.94 !important; transform: none !important; } .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after { top: 50% !important; left: 50% !important; display: grid !important; width: var(--detail-close-circle-size) !important; height: var(--detail-close-circle-size) !important; place-items: center !important; line-height: 1 !important; text-align: center !important; transform: translate(-50%, -50%) !important; } .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::after { content: "Esc" !important; line-height: 1 !important; } /* Final detail exploration controls: city nav wraps the book pager in one quiet row. */ .book-card.is-detail .book-card__explore { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; align-self: flex-end !important; gap: 5px !important; min-height: 30px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; } .book-card.is-detail .book-card__explore[hidden] { display: none !important; } .book-card.is-detail .book-card__city-page { position: relative !important; display: inline-grid !important; place-items: center !important; width: 18px !important; height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: color-mix(in srgb, var(--book-paper-ink) 42%, transparent) !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-family: var(--font-page-control) !important; font-size: 0 !important; font-weight: 560 !important; line-height: 1 !important; letter-spacing: 0 !important; opacity: 0.82 !important; cursor: pointer !important; transition: color 150ms ease, opacity 150ms ease, background 150ms ease !important; } .book-card.is-detail .book-card__city-page[hidden], .book-card.is-detail .book-card__explore.is-special-book-explore .book-card__city-page { display: none !important; } .book-card.is-detail .book-card__city-page::after { position: absolute !important; top: 50% !important; left: 50% !important; display: grid !important; width: 18px !important; height: 30px !important; place-items: center !important; color: currentColor !important; font-size: 15px !important; font-weight: 420 !important; line-height: 1 !important; letter-spacing: -0.1em !important; transform: translate(-50%, -50%) scaleY(1.08) !important; transform-origin: center !important; } .book-card.is-detail .book-card__city-page--prev::after { content: "‹‹" !important; } .book-card.is-detail .book-card__city-page--next::after { content: "››" !important; } .book-card.is-detail .book-card__city-page:hover, .book-card.is-detail .book-card__city-page:focus-visible { color: var(--accent) !important; background: transparent !important; opacity: 0.92 !important; outline: none !important; } .book-card.is-detail .book-card__city-page:active { color: var(--accent) !important; opacity: 0.72 !important; } .book-card.is-detail .book-card__pager { flex: 0 0 auto !important; gap: 7px !important; height: 30px !important; padding: 0 !important; } /* Final dark-mode paper surfaces: paper darkens slightly, ink stays fixed. */ :root { --book-paper-surface: #fffaf0; --book-ticket-paper-top: rgba(255, 252, 244, 0.93); --book-ticket-paper-bottom: rgba(255, 248, 235, 0.84); } :root[data-theme="dark"] { --book-paper-surface: #f1e8d9; --book-ticket-paper-top: rgba(245, 237, 225, 0.94); --book-ticket-paper-bottom: rgba(237, 226, 210, 0.88); } .book-ticket, .share-ticket { background: linear-gradient(180deg, var(--book-ticket-paper-top), var(--book-ticket-paper-bottom)), url("../public/textures/land-paper-tile.png") !important; background-size: auto, 360px 360px !important; color: var(--book-paper-ink) !important; } .book-card.is-detail .book-card__detail-view { background: var(--book-paper-surface) !important; color: var(--book-paper-ink) !important; } .book-ticket .book-card__title-zh, .share-ticket .book-card__title-zh, .book-card.is-detail .book-card__title-zh, .book-card.is-detail .book-card__title-main, .book-card.is-detail .book-card__title-sub { color: var(--book-title) !important; } .book-ticket .book-card__title-original, .share-ticket .book-card__title-original, .book-card.is-detail .book-card__title-original { color: color-mix(in srgb, var(--book-paper-ink) 78%, #1d3434 22%) !important; } .book-ticket .book-card__meta, .share-ticket .book-card__meta, .book-card.is-detail .book-card__meta, .book-ticket .book-card__shareline, .share-ticket .book-card__quote, .book-card.is-detail .book-card__intro, .book-card.is-detail .book-card__intro p, .book-card.is-detail .book-card__meta-authors, .book-card.is-detail .book-card__meta-details { color: color-mix(in srgb, var(--book-paper-ink) 82%, #1d3434 18%) !important; } /* Final close hover intent: X is the resting affordance; Esc appears only after hover dwell. */ .book-card.is-ticket .book-ticket > .book-card__close--float, .book-card.is-detail .book-card__detail-view > .book-card__close--detail { --close-esc-delay: 820ms; color: var(--book-action-rest) !important; transition: color 150ms ease, opacity 180ms ease, transform 180ms ease !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-card__ticket-view:hover .book-card__close--float, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible, .book-card.is-detail .book-card__detail-view:hover > .book-card__close--detail, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible { opacity: 0.94 !important; color: var(--book-action-rest) !important; transform: none !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible { color: var(--book-action-hover) !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after { content: "" !important; display: grid !important; place-items: center !important; width: var(--detail-close-circle-size, 29px) !important; height: var(--detail-close-circle-size, 29px) !important; opacity: 1 !important; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent) !important; border-radius: 999px !important; background-color: rgba(255, 250, 240, 0.9) !important; background-image: linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 13px 13px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; font-size: 0 !important; transform: translate(-50%, -50%) !important; transition: opacity 150ms ease !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before { content: "Esc" !important; display: grid !important; place-items: center !important; width: var(--detail-close-circle-size, 29px) !important; height: var(--detail-close-circle-size, 29px) !important; opacity: 0 !important; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent) !important; border-radius: 999px !important; background: rgba(255, 250, 240, 0.9) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; color: currentColor !important; font-size: 8px !important; font-weight: 760 !important; line-height: 1 !important; letter-spacing: 0.01em !important; transform: translate(-50%, -50%) !important; transition: opacity 150ms ease !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::after, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::after { content: "" !important; opacity: 0 !important; font-size: 0 !important; transition-delay: var(--close-esc-delay) !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::before, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::before { opacity: 1 !important; transition-delay: var(--close-esc-delay) !important; } /* Final close logo reset: one translucent shell, one small solid gray X, no Esc swap. */ .book-card.is-ticket .book-ticket > .book-card__close--float, .book-card.is-detail .book-card__detail-view > .book-card__close--detail, .share-preview__close { --close-logo-bg: rgba(252, 248, 239, 0.24); --close-logo-border: rgba(243, 128, 108, 0.18); --close-logo-ink: #73827f; z-index: 70 !important; display: grid !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; padding: 0 !important; place-items: center !important; overflow: hidden !important; border: 1px solid var(--close-logo-border) !important; border-radius: 999px !important; color: var(--close-logo-ink) !important; background: var(--close-logo-bg) !important; box-shadow: 0 6px 14px rgba(31, 48, 50, 0.045) !important; font-size: 0 !important; line-height: 1 !important; opacity: 1 !important; transform: none !important; transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease !important; transition-delay: 0ms !important; backdrop-filter: blur(8px) saturate(108%) !important; -webkit-backdrop-filter: blur(8px) saturate(108%) !important; } .book-card.is-ticket .book-ticket > .book-card__close--float { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible, .share-preview__close:hover, .share-preview__close:focus-visible { --close-logo-bg: rgba(252, 248, 239, 0.34); --close-logo-border: rgba(243, 128, 108, 0.26); --close-logo-ink: #667572; outline: none !important; opacity: 1 !important; transform: none !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after, .share-preview__close::before, .share-preview__close::after { position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 13px !important; height: 2px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: var(--close-logo-ink) !important; background-image: none !important; box-shadow: none !important; color: transparent !important; content: "" !important; font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important; opacity: 1 !important; transition: background 150ms ease !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before, .share-preview__close::before { transform: translate(-50%, -50%) rotate(45deg) !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after, .share-preview__close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-ticket .book-ticket > .book-card__close--float::after { width: 12px !important; height: 1.8px !important; } :root[data-theme="dark"] .book-card.is-ticket .book-ticket > .book-card__close--float, :root[data-theme="dark"] .book-card.is-detail .book-card__detail-view > .book-card__close--detail, :root[data-theme="dark"] .share-preview__close { --close-logo-bg: rgba(23, 63, 64, 0.3); --close-logo-border: rgba(243, 128, 108, 0.2); --close-logo-ink: #a9b9b5; } .share-preview__save { min-width: 156px !important; height: 40px !important; padding: 0 22px !important; border: 1px solid rgba(243, 128, 108, 0.28) !important; border-radius: 999px !important; color: #6f817d !important; background: rgba(252, 248, 239, 0.3) !important; box-shadow: 0 8px 18px rgba(31, 48, 50, 0.055) !important; font-weight: 560 !important; letter-spacing: 0.03em !important; backdrop-filter: blur(8px) saturate(108%) !important; -webkit-backdrop-filter: blur(8px) saturate(108%) !important; } .share-preview__save:hover, .share-preview__save:focus-visible { border-color: rgba(243, 128, 108, 0.38) !important; color: #667572 !important; background: rgba(252, 248, 239, 0.4) !important; outline: none !important; } /* Final share-ticket cutout fix: clip-path owns the holes; no duplicate mask or leaking drop-shadow. */ .share-preview__canvas .share-ticket { -webkit-mask: none !important; mask: none !important; filter: none !important; box-shadow: 0 14px 34px rgba(24, 40, 43, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; } /* Final close hover restore: complete X first, Esc only after hover dwell. */ .book-card.is-ticket .book-ticket > .book-card__close--float, .book-card.is-detail .book-card__detail-view > .book-card__close--detail, .share-preview__close { --close-esc-delay: 820ms; } .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after, .share-preview__close::after { content: "" !important; display: block !important; width: 11px !important; height: 11px !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-image: linear-gradient(45deg, transparent calc(50% - 0.85px), var(--close-logo-ink) calc(50% - 0.85px) calc(50% + 0.85px), transparent calc(50% + 0.85px)), linear-gradient(-45deg, transparent calc(50% - 0.85px), var(--close-logo-ink) calc(50% - 0.85px) calc(50% + 0.85px), transparent calc(50% + 0.85px)) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 11px 11px !important; box-shadow: none !important; opacity: 1 !important; transform: translate(-50%, -50%) !important; transition: opacity 150ms ease !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before, .share-preview__close::before { content: "Esc" !important; display: grid !important; width: 100% !important; height: 100% !important; place-items: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--close-logo-ink) !important; font-family: "Helvetica Neue", Arial, "PingFang SC", system-ui, sans-serif !important; font-size: 8px !important; font-weight: 720 !important; line-height: 1 !important; letter-spacing: 0.01em !important; opacity: 0 !important; transform: translate(-50%, -50%) !important; transition: opacity 150ms ease !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::after, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::after, .share-preview__close:hover::after, .share-preview__close:focus-visible::after { content: "" !important; opacity: 0 !important; transition-delay: var(--close-esc-delay) !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::before, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::before, .share-preview__close:hover::before, .share-preview__close:focus-visible::before { opacity: 1 !important; transition-delay: var(--close-esc-delay) !important; } /* Final detail action alignment: lift the right action group and match the quiet pager tone. */ .book-card.is-detail .book-card__detail-actions { align-self: flex-start !important; transform: translateY(-3px) !important; } .book-card.is-detail .book-card__detail-actions .book-card__action { grid-template-rows: 17px 11px !important; gap: 3px !important; height: 34px !important; min-width: 54px !important; padding: 0 12px !important; color: color-mix(in srgb, var(--book-paper-ink) 42%, transparent) !important; font-family: "TicketTypewriterLocal", "LXGW WenKai Mono", "LXGW WenKai", "American Typewriter", "PingFang SC", "Hiragino Sans GB", monospace !important; font-size: 10.5px !important; font-weight: 520 !important; line-height: 1 !important; letter-spacing: 0.02em !important; } .book-card.is-detail .book-card__detail-actions .book-card__action-icon { width: 17px !important; height: 17px !important; stroke-width: 1.85 !important; transform: translateY(4px) !important; } .book-card.is-detail .book-card__detail-actions .book-card__action-label { color: currentColor !important; font: inherit !important; transform: translateY(2px) !important; white-space: nowrap !important; } .book-card.is-detail .book-card__detail-actions .book-card__action + .book-card__action::before { top: 1px !important; bottom: 1px !important; transform: translateY(-3px) !important; background: color-mix(in srgb, var(--book-paper-ink) 18%, transparent) !important; } /* Final immersive close reveal: hide card close controls until the reader dwells on the card. */ .book-card.is-ticket .book-ticket > .book-card__close--float, .book-card.is-detail .book-card__detail-view > .book-card__close--detail { --close-esc-delay: 0ms; --close-reveal-delay: 520ms; opacity: 0 !important; pointer-events: none !important; transform: translateY(-2px) !important; transition: opacity 180ms ease var(--close-reveal-delay), background 150ms ease, border-color 150ms ease, color 150ms ease, transform 180ms ease var(--close-reveal-delay) !important; } .book-card.is-ticket .book-card__ticket-view:hover .book-card__close--float, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible, .book-card.is-ticket .book-ticket > .book-card__close--float:hover, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible, .book-card.is-detail .book-card__detail-view:hover > .book-card__close--detail, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible { opacity: 1 !important; pointer-events: auto !important; transform: none !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible, .book-card.is-ticket .book-ticket > .book-card__close--float:hover, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible { transition-delay: 0ms !important; } /* Search navigation closes the current bookmark before the map moves to the next one. */ #cityTooltip.is-search-transitioning-out { opacity: 0 !important; pointer-events: none !important; transform: translate3d(0, 8px, 0) scale(0.985) !important; transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.82, 0.24, 1) !important; } @media (prefers-reduced-motion: reduce) { #cityTooltip.is-search-transitioning-out { transition: none !important; transform: none !important; } } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::after, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::after { opacity: 0 !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-ticket > .book-card__close--float:hover::before, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::before { opacity: 1 !important; transition-delay: 0ms !important; } /* Final unified close controls: ticket, detail, and share use the same corner reveal. */ .book-card.is-ticket .book-card__ticket-view > .book-card__close--float, .book-card.is-ticket .book-ticket > .book-card__close--float, .book-card.is-detail .book-card__detail-view > .book-card__close--detail, .share-preview__close { --close-corner-offset: 8px; --close-reveal-delay: 520ms; --close-esc-delay: 820ms; --close-logo-ink: #74817f; position: absolute !important; top: var(--close-corner-offset) !important; right: var(--close-corner-offset) !important; z-index: 18 !important; display: grid !important; width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; place-items: center !important; overflow: hidden !important; color: transparent !important; font-size: 0 !important; line-height: 1 !important; text-indent: 0 !important; border: 1px solid rgba(243, 128, 108, 0.34) !important; border-radius: 999px !important; background: rgba(255, 250, 240, 0.44) !important; box-shadow: none !important; opacity: 0 !important; pointer-events: none !important; transform: translateY(-2px) !important; backdrop-filter: blur(8px) saturate(106%) !important; -webkit-backdrop-filter: blur(8px) saturate(106%) !important; transition: opacity 180ms ease var(--close-reveal-delay), transform 180ms ease var(--close-reveal-delay), background 150ms ease, border-color 150ms ease !important; } .book-card.is-ticket .book-card__ticket-view:hover .book-card__close--float, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible, .book-card.is-ticket .book-ticket > .book-card__close--float:hover, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible, .book-card.is-detail .book-card__detail-view:hover > .book-card__close--detail, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible, .share-preview.has-share-controls .share-preview__close, .share-preview__close:hover, .share-preview__close:focus-visible { opacity: 1 !important; pointer-events: auto !important; transform: none !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible, .book-card.is-ticket .book-ticket > .book-card__close--float:hover, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible, .share-preview__close:hover, .share-preview__close:focus-visible { border-color: rgba(243, 128, 108, 0.5) !important; background: rgba(255, 250, 240, 0.58) !important; outline: none !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float::before, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float::after, .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after, .share-preview__close::before, .share-preview__close::after { position: absolute !important; top: 50% !important; left: 50% !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; box-shadow: none !important; transform: translate(-50%, -50%) !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float::after, .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after, .share-preview__close::after { content: "" !important; display: block !important; width: 11px !important; height: 11px !important; background-image: linear-gradient(45deg, transparent calc(50% - 0.8px), var(--close-logo-ink) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)), linear-gradient(-45deg, transparent calc(50% - 0.8px), var(--close-logo-ink) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 11px 11px !important; opacity: 1 !important; transition: opacity 120ms ease !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float::before, .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before, .share-preview__close::before { content: "Esc" !important; display: grid !important; width: 100% !important; height: 100% !important; place-items: center !important; color: var(--close-logo-ink) !important; font-family: "Helvetica Neue", Arial, "PingFang SC", system-ui, sans-serif !important; font-size: 8px !important; font-weight: 720 !important; letter-spacing: 0 !important; opacity: 0 !important; transition: opacity 120ms ease !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover::after, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible::after, .book-card.is-ticket .book-ticket > .book-card__close--float:hover::after, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::after, .share-preview__close:hover::after, .share-preview__close:focus-visible::after { opacity: 0 !important; transition-delay: var(--close-esc-delay) !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover::before, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible::before, .book-card.is-ticket .book-ticket > .book-card__close--float:hover::before, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::before, .share-preview__close:hover::before, .share-preview__close:focus-visible::before { opacity: 1 !important; transition-delay: var(--close-esc-delay) !important; } .book-card.is-detail .book-card__detail-view > .book-card__close--detail { --close-corner-offset: 18px; } /* Final share controls placement: save sits in the bottom-center bleed area; close owns the top-right corner. */ .share-preview__topbar, .share-preview__actions { grid-area: share-stage !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } .share-preview__topbar { z-index: 22 !important; display: block !important; } .share-preview__eyebrow { display: none !important; } .share-preview__actions { z-index: 21 !important; display: grid !important; align-items: end !important; justify-items: center !important; padding-bottom: 22px !important; } .share-preview__save { pointer-events: auto !important; } .share-preview__close { --close-corner-offset: 30px; pointer-events: none !important; } .share-preview__canvas:hover .share-preview__close, .share-preview__close:hover, .share-preview__close:focus-visible { pointer-events: auto !important; } /* Final city-special ticket copy: keep the issue label as one unbroken heading. */ .book-ticket.is-special-book-card .book-card__location-en, .share-preview.is-special-book-card .share-ticket .book-card__location-en, .book-card__detail-view.is-special-book-card .book-card__location-en { display: none !important; } .book-ticket.is-special-book-card .book-card__location-zh, .share-preview.is-special-book-card .share-ticket .book-card__location-zh, .book-card__detail-view.is-special-book-card .book-card__location-zh { display: block !important; max-width: 100% !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; } /* Final unified paper shadow: ticket, share ticket, and detail card share one paper depth without gray underlays. */ .book-card.is-ticket { --unified-paper-shadow: 0 18px 44px rgba(45, 48, 43, 0.16); } .book-card.is-ticket, .book-card.is-ticket .book-card__ticket-view { position: relative !important; isolation: isolate !important; background: transparent !important; filter: none !important; box-shadow: none !important; } .book-card.is-ticket .book-card__ticket-view::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background: transparent !important; box-shadow: var(--unified-paper-shadow) !important; filter: none !important; } .book-card.is-ticket .book-card__ticket-view::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; filter: none !important; } .book-ticket, .share-ticket, #cityTooltip.is-ticket .book-ticket, #cityTooltip.has-book-stack .book-ticket, #cityTooltip.has-book-stack .book-ticket.is-selected, .book-card.is-detail .book-card__detail-view { filter: none !important; box-shadow: 0 18px 44px rgba(45, 48, 43, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; } .book-ticket, .share-ticket, #cityTooltip.is-ticket .book-ticket, #cityTooltip.has-book-stack .book-ticket, #cityTooltip.has-book-stack .book-ticket.is-selected { position: relative !important; z-index: 1 !important; overflow: visible !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; } #cityTooltip.has-book-stack .book-ticket:not(.is-selected) { filter: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 16px 0 28px rgba(29, 49, 50, 0.1) !important; } .book-ticket::before, .share-ticket::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background: transparent !important; box-shadow: var(--unified-paper-shadow) !important; filter: none !important; } .book-ticket::after, .share-ticket::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; filter: none !important; } .share-preview__canvas { --unified-paper-shadow: 0 18px 44px rgba(45, 48, 43, 0.16); } .share-preview__actions { position: relative !important; } .share-preview__actions::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background: transparent !important; box-shadow: var(--unified-paper-shadow) !important; filter: none !important; } .share-preview__canvas .share-ticket { position: relative !important; z-index: 1 !important; overflow: visible !important; filter: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; } .book-card.is-ticket .book-card__ticket-view::before, .book-card.is-ticket .book-card__ticket-view::after { content: none !important; display: none !important; filter: none !important; } /* Final visible shell shadow: shadow lives outside masked ticket paper, so it cannot be clipped or gray the cover. */ .book-card.is-ticket { --unified-paper-shadow: 0 18px 44px rgba(45, 48, 43, 0.24); } .book-card.is-ticket .book-card__ticket-view { overflow: visible !important; } .book-ticket-shell { flex: 0 0 auto !important; position: relative !important; z-index: var(--ticket-stack-z, 1) !important; display: block !important; margin-left: var(--ticket-stack-overlap, 0px) !important; transform: translate3d( var(--ticket-stack-x, 0px), calc(var(--ticket-stack-motion-y, 0px) + var(--ticket-stack-lift, 0px)), 0 ) rotate(var(--ticket-stack-rotate, 0deg)) !important; transition: margin-left 560ms cubic-bezier(0.2, 0.86, 0.18, 1), transform 560ms cubic-bezier(0.18, 0.92, 0.2, 1) !important; } .book-ticket-shell > .book-ticket { position: relative !important; z-index: 1 !important; margin-left: 0 !important; transform: none !important; filter: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; } .book-ticket-shell:not(.is-selected) > .book-ticket, #cityTooltip.has-book-stack .book-ticket-shell:not(.is-selected) > .book-ticket { filter: none !important; opacity: 1 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42) !important; } .book-ticket-shell.is-selected::before { box-shadow: 0 20px 48px rgba(45, 48, 43, 0.26) !important; } .book-ticket-shell:hover { will-change: transform !important; transform: translate3d( var(--ticket-stack-x, 0px), calc(var(--ticket-stack-motion-y, 0px) + var(--ticket-stack-lift, 0px) - 2px), 0 ) rotate(var(--ticket-stack-rotate, 0deg)) !important; } .book-ticket-shell.is-moving-stack, #cityTooltip.is-ticket .book-card__ticket-view.is-prepping-stack-motion .book-ticket-shell { will-change: transform !important; } .book-ticket::before, .share-ticket::before { content: none !important; display: none !important; box-shadow: none !important; } .share-ticket-shell { grid-area: share-stage !important; align-self: center !important; justify-self: center !important; position: relative !important; z-index: 1 !important; display: block !important; width: min(245px, 72%) !important; margin: 0 !important; --unified-paper-shadow: 0 18px 44px rgba(45, 48, 43, 0.24); } .share-ticket-shell > .share-ticket { position: relative !important; z-index: 1 !important; width: 100% !important; margin: 0 !important; transform: none !important; filter: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; } .share-preview__actions::before { content: none !important; display: none !important; box-shadow: none !important; filter: none !important; } /* Final shaped paper shadow: no rectangular plates; the dynamic clip-path owns the ticket edge. */ .book-ticket-shell::before, .share-ticket-shell::before { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; filter: none !important; } .book-ticket-shell, .share-ticket-shell { isolation: isolate !important; background: transparent !important; box-shadow: none !important; filter: drop-shadow(0 0 18px rgba(45, 48, 43, 0.15)) drop-shadow(0 10px 28px rgba(45, 48, 43, 0.08)) !important; } .book-ticket-shell > .book-ticket, .share-ticket-shell > .share-ticket, #cityTooltip.is-ticket .book-ticket, #cityTooltip.has-book-stack .book-ticket, .share-preview__canvas .share-ticket { overflow: hidden !important; -webkit-mask: none !important; mask: none !important; filter: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; } .book-ticket-shell.is-selected, .share-ticket-shell, #cityTooltip.has-book-stack .book-ticket-shell.is-selected { filter: drop-shadow(0 0 20px rgba(45, 48, 43, 0.16)) drop-shadow(0 12px 32px rgba(45, 48, 43, 0.09)) !important; } .book-ticket-shell:not(.is-selected) > .book-ticket, #cityTooltip.has-book-stack .book-ticket-shell:not(.is-selected) > .book-ticket, #cityTooltip.has-book-stack .book-ticket:not(.is-selected) { opacity: 1 !important; filter: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42) !important; } .book-ticket-shell:not(.is-selected), #cityTooltip.has-book-stack .book-ticket-shell:not(.is-selected) { filter: drop-shadow(0 0 16px rgba(45, 48, 43, 0.12)) drop-shadow(0 8px 24px rgba(45, 48, 43, 0.06)) !important; } #cityTooltip.has-book-stack .book-ticket-shell:not(.is-selected) > .book-ticket .book-ticket__cover, #cityTooltip.has-book-stack .book-ticket-shell:not(.is-selected) > .book-ticket .book-ticket__body, #cityTooltip.has-book-stack .book-ticket:not(.is-selected) .book-ticket__cover, #cityTooltip.has-book-stack .book-ticket:not(.is-selected) .book-ticket__body { opacity: 1 !important; filter: none !important; } /* Final share action placement: ticket masks must not pull the save button back into the cover. */ .share-preview__canvas .share-preview__actions { position: absolute !important; inset: auto 0 -10px 0 !important; z-index: 30 !important; display: flex !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; justify-content: center !important; place-items: center !important; pointer-events: none !important; } .share-preview__canvas .share-preview__save { pointer-events: auto !important; } /* Final share preview paging controls: quiet outside arrows matching detail exploration. */ .share-preview__page { position: absolute !important; z-index: 24 !important; grid-area: share-stage !important; top: 50% !important; display: inline-grid !important; width: 42px !important; height: 72px !important; place-items: center !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: color-mix(in srgb, var(--book-paper-ink) 52%, transparent) !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-family: var(--font-page-control) !important; font-size: 0 !important; font-weight: 560 !important; line-height: 1 !important; letter-spacing: 0 !important; opacity: 0.76 !important; cursor: pointer !important; transform: translateY(-50%) !important; transition: color 150ms ease, opacity 150ms ease, transform 180ms ease !important; } .share-preview__page::after { display: grid !important; width: 42px !important; height: 72px !important; place-items: center !important; color: currentColor !important; font-size: 40px !important; font-weight: 420 !important; line-height: 1 !important; letter-spacing: 0 !important; transform: scaleY(1.08) !important; transform-origin: center !important; } .share-preview__page--prev { left: clamp(-120px, -9vw, -84px) !important; } .share-preview__page--next { right: clamp(-120px, -9vw, -84px) !important; } .share-preview__page--prev::after { content: "‹‹" !important; } .share-preview__page--next::after { content: "››" !important; } .share-preview__page:hover, .share-preview__page:focus-visible { color: var(--accent) !important; background: transparent !important; opacity: 0.92 !important; outline: none !important; } .share-preview__page:active { color: var(--accent) !important; opacity: 0.72 !important; } .share-preview__page[hidden] { display: none !important; } /* Final ticket tear rules: the perforation line reaches the side cutouts. */ .book-ticket__body, .share-ticket__body { --ticket-rule-bleed: 15px; } .book-ticket .book-card__meta, .share-ticket .book-card__meta { box-sizing: border-box !important; margin-right: calc(-1 * var(--ticket-rule-bleed)) !important; margin-left: calc(-1 * var(--ticket-rule-bleed)) !important; padding-right: var(--ticket-rule-bleed) !important; padding-left: var(--ticket-rule-bleed) !important; } .book-ticket[data-book-id="chn-urumqi--douban-36812669"] .book-card__meta-authors, .share-ticket[data-book-id="chn-urumqi--douban-36812669"] .book-card__meta-authors { overflow-wrap: normal !important; word-break: keep-all !important; white-space: nowrap !important; font-size: 9.4px !important; } .book-ticket[data-book-id="chn-urumqi--douban-36812669"] .book-card__meta-details, .share-ticket[data-book-id="chn-urumqi--douban-36812669"] .book-card__meta-details { font-size: 9.4px !important; } /* Final share seal: a light overprint, not extra layout content. */ .share-ticket__body { position: relative !important; padding-bottom: 12px !important; } .share-ticket__stamp { position: static !important; display: flex !important; min-height: 30px !important; margin-top: 8px !important; padding: 9px 0 2px !important; align-items: flex-end !important; justify-content: flex-start !important; border-top: 1px dashed color-mix(in srgb, var(--book-paper-ink) 20%, transparent) !important; color: color-mix(in srgb, var(--book-paper-ink) 48%, transparent) !important; font-size: 10px !important; line-height: 1 !important; } .share-ticket__brand { display: block !important; max-width: 104px !important; overflow: hidden !important; white-space: nowrap !important; font-family: "TicketTypewriterLocal", "LXGW WenKai Mono", "LXGW WenKai", "American Typewriter", "Courier New", monospace !important; transform: translateY(-5px) !important; } .share-ticket__seal { position: absolute !important; right: 4px !important; bottom: 6px !important; z-index: 2 !important; display: block !important; width: 82px !important; height: 84px !important; object-fit: contain !important; opacity: 0.42 !important; mix-blend-mode: multiply !important; transform: rotate(0deg) !important; transform-origin: 55% 56% !important; pointer-events: none !important; filter: none !important; } .share-ticket__serial { display: none !important; } /* Final share overlay controls: keep the capsules readable and away from the ticket. */ .share-preview__canvas .share-preview__actions { inset: auto 0 -10px 0 !important; } .share-preview__save { --share-control-glass: rgba(252, 248, 239, 0.34); --share-control-glass-focus: rgba(252, 248, 239, 0.42); color: color-mix(in srgb, var(--book-paper-ink) 74%, #2f4c4a 26%) !important; background: linear-gradient(135deg, rgba(255, 255, 250, 0.04), rgba(248, 250, 243, 0)), var(--share-control-glass) !important; background-blend-mode: normal, normal !important; border-color: color-mix(in srgb, var(--accent) 34%, rgba(44, 62, 60, 0.24)) !important; box-shadow: 0 14px 30px rgba(56, 67, 65, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(1.6px) saturate(118%) !important; -webkit-backdrop-filter: blur(1.6px) saturate(118%) !important; } .share-preview__close { --share-control-glass: rgba(252, 248, 239, 0.34); --share-control-glass-focus: rgba(252, 248, 239, 0.42); --close-corner-offset: 16px; color: color-mix(in srgb, var(--book-paper-ink) 76%, #2f4c4a 24%) !important; background: linear-gradient(135deg, rgba(255, 255, 250, 0.04), rgba(248, 250, 243, 0)), var(--share-control-glass) !important; background-blend-mode: normal, normal !important; border-color: color-mix(in srgb, var(--accent) 28%, rgba(44, 62, 60, 0.24)) !important; box-shadow: 0 14px 30px rgba(56, 67, 65, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(1.6px) saturate(118%) !important; -webkit-backdrop-filter: blur(1.6px) saturate(118%) !important; } /* Final share original title fit: keep English titles on one line in previews and exports. */ .share-ticket .book-card__title-original { box-sizing: border-box !important; display: block !important; max-width: 100% !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: clip !important; font-size: calc(10.8px * var(--share-title-original-scale, 1)) !important; line-height: 1.12 !important; } /* Final unified action activation: gray controls turn into accent controls without losing their shell. */ .book-ticket .book-card__action, .share-ticket .book-card__action, .book-card.is-detail .book-card__detail-actions .book-card__action { color: color-mix(in srgb, var(--book-paper-ink) 48%, transparent) !important; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease !important; } .book-ticket .book-card__action-icon, .share-ticket .book-card__action-icon, .book-card.is-detail .book-card__detail-actions .book-card__action-icon { color: currentColor !important; stroke: currentColor !important; } .book-ticket .book-card__action:hover, .book-ticket .book-card__action:focus-visible, .share-ticket .book-card__action:hover, .share-ticket .book-card__action:focus-visible, .book-card.is-detail .book-card__detail-actions .book-card__action:hover, .book-card.is-detail .book-card__detail-actions .book-card__action:focus-visible { color: var(--accent) !important; outline: none !important; } .book-ticket .book-card__action:hover .book-card__action-icon, .book-ticket .book-card__action:focus-visible .book-card__action-icon, .share-ticket .book-card__action:hover .book-card__action-icon, .share-ticket .book-card__action:focus-visible .book-card__action-icon, .book-card.is-detail .book-card__detail-actions .book-card__action:hover .book-card__action-icon, .book-card.is-detail .book-card__detail-actions .book-card__action:focus-visible .book-card__action-icon { color: var(--accent) !important; stroke: currentColor !important; } .book-card.is-ticket .book-ticket > .book-card__close--float, .book-card.is-detail .book-card__detail-view > .book-card__close--detail, .share-preview__close { --close-logo-ink: color-mix(in srgb, var(--book-paper-ink) 58%, transparent); } .book-card.is-ticket .book-ticket > .book-card__close--float:hover, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible, .share-preview__close:hover, .share-preview__close:focus-visible { --close-logo-ink: var(--accent); color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 46%, rgba(44, 62, 60, 0.2)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 250, 0.08)), rgba(248, 250, 243, 0.02)), var(--share-control-glass-focus) !important; outline: none !important; } .share-preview__save { color: color-mix(in srgb, var(--book-paper-ink) 60%, transparent) !important; background: linear-gradient(135deg, rgba(255, 255, 250, 0.04), rgba(248, 250, 243, 0)), var(--share-control-glass) !important; background-blend-mode: normal, normal !important; border-color: color-mix(in srgb, var(--accent) 34%, rgba(44, 62, 60, 0.22)) !important; } .share-preview__save:hover, .share-preview__save:focus-visible { color: var(--accent) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 250, 0.08)), rgba(248, 250, 243, 0.02)), var(--share-control-glass-focus) !important; border-color: color-mix(in srgb, var(--accent) 52%, rgba(44, 62, 60, 0.2)) !important; outline: none !important; } /* Final share preview paging controls: tiny outside arrows, not layout boxes. */ .share-preview__page { position: absolute !important; z-index: 24 !important; grid-area: share-stage !important; top: 50% !important; display: inline-grid !important; width: 42px !important; height: 72px !important; place-items: center !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: color-mix(in srgb, var(--book-paper-ink) 52%, transparent) !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-family: var(--font-page-control) !important; font-size: 0 !important; font-weight: 560 !important; line-height: 1 !important; letter-spacing: 0 !important; opacity: 0.76 !important; cursor: pointer !important; transform: translateY(-50%) !important; transition: color 150ms ease, opacity 150ms ease, transform 180ms ease !important; } .share-preview__page::after { display: grid !important; width: 42px !important; height: 72px !important; place-items: center !important; color: currentColor !important; font-size: 40px !important; font-weight: 420 !important; line-height: 1 !important; letter-spacing: 0 !important; transform: scaleY(1.08) !important; transform-origin: center !important; } .share-preview__page--prev { left: clamp(-120px, -9vw, -84px) !important; } .share-preview__page--next { right: clamp(-120px, -9vw, -84px) !important; } .share-preview__page--prev::after { content: "‹‹" !important; } .share-preview__page--next::after { content: "››" !important; } .share-preview__page:hover, .share-preview__page:focus-visible { color: var(--accent) !important; opacity: 0.92 !important; outline: none !important; } .share-preview__page:active { color: var(--accent) !important; opacity: 0.72 !important; } .share-preview__page[hidden] { display: none !important; } /* Final share screenshot controls: leave the canvas clean unless the reader is inside it. */ .share-preview__canvas .share-preview__save, .share-preview__close { opacity: 0 !important; pointer-events: none !important; } .share-preview__save { transform: translateY(4px) !important; transition: opacity 180ms ease, transform 180ms ease, color 150ms ease, border-color 150ms ease, background 150ms ease !important; } .share-preview__close { transform: translateY(-2px) !important; transition: opacity 180ms ease, transform 180ms ease, background 150ms ease, border-color 150ms ease !important; } .share-preview.has-share-controls .share-preview__save, .share-preview.has-share-controls .share-preview__close, .share-preview__save:hover, .share-preview__save:focus-visible, .share-preview__close:hover, .share-preview__close:focus-visible { opacity: 1 !important; pointer-events: auto !important; } .share-preview.has-share-controls .share-preview__save, .share-preview__save:hover, .share-preview__save:focus-visible { transform: none !important; } .share-preview.has-share-controls .share-preview__close, .share-preview__close:hover, .share-preview__close:focus-visible { transform: none !important; } /* A page change keeps the reading surface clean until the pointer enters the ticket again. */ .share-preview.share-controls-muted .share-preview__save, .share-preview.share-controls-muted .share-preview__close { opacity: 0 !important; pointer-events: none !important; } /* Final search/bookmark close timing parity: ticket and detail share the same glyph handoff. */ .book-card.is-ticket .book-card__ticket-view > .book-card__close--float, .book-card.is-ticket .book-ticket > .book-card__close--float, .book-card.is-detail .book-card__detail-view > .book-card__close--detail { --close-reveal-delay: 0ms !important; --close-esc-delay: 820ms !important; transition: opacity 180ms ease, transform 180ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float::after, .book-card.is-ticket .book-ticket > .book-card__close--float::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::after { opacity: 1 !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float::before, .book-card.is-ticket .book-ticket > .book-card__close--float::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail::before { opacity: 0 !important; transition-delay: 0ms !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover::after, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible::after, .book-card.is-ticket .book-ticket > .book-card__close--float:hover::after, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::after, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::after { opacity: 0 !important; transition-delay: var(--close-esc-delay) !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover::before, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible::before, .book-card.is-ticket .book-ticket > .book-card__close--float:hover::before, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover::before, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible::before { opacity: 1 !important; transition-delay: var(--close-esc-delay) !important; } .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:hover, .book-card.is-ticket .book-card__ticket-view > .book-card__close--float:focus-visible, .book-card.is-ticket .book-ticket > .book-card__close--float:hover, .book-card.is-ticket .book-ticket > .book-card__close--float:focus-visible, .book-card.is-detail .book-card__detail-view:hover > .book-card__close--detail, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:hover, .book-card.is-detail .book-card__detail-view > .book-card__close--detail:focus-visible { transition-delay: 0ms !important; } /* Cover-ready reveal: compact tickets stay whole; cover preloading reduces wait. */ .book-ticket-shell.is-cover-pending, .share-ticket-shell.is-cover-pending, .book-ticket.is-cover-pending, .share-ticket.is-cover-pending { opacity: 0 !important; pointer-events: none !important; } .book-ticket__cover img, .share-ticket__cover img { transition: opacity 180ms ease !important; } .book-ticket-shell.is-entering { opacity: 0 !important; pointer-events: none !important; transform: translate3d( calc(var(--ticket-stack-x, 0px) - 10px), calc(var(--ticket-stack-motion-y, 0px) + var(--ticket-stack-lift, 0px) - 14px), 0 ) rotate(var(--ticket-stack-rotate, 0deg)) scale(0.985) !important; } .book-ticket-shell.is-entering.is-reveal-ready { pointer-events: auto !important; animation: book-ticket-shell-enter 540ms cubic-bezier(0.18, 0.9, 0.18, 1) both !important; animation-delay: var(--ticket-enter-delay, 0ms) !important; } .book-ticket-shell, .share-ticket-shell { transition: opacity 190ms ease, margin-left 560ms cubic-bezier(0.2, 0.86, 0.18, 1), transform 560ms cubic-bezier(0.18, 0.92, 0.2, 1) !important; } .book-ticket, .share-ticket, .book-card__detail-view { transition: opacity 190ms ease, transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 260ms ease !important; } @media (prefers-reduced-motion: reduce) { .book-ticket-shell.is-entering, .book-ticket-shell.is-entering.is-reveal-ready { opacity: 1 !important; pointer-events: auto !important; animation: none !important; transform: translate3d( var(--ticket-stack-x, 0px), calc(var(--ticket-stack-motion-y, 0px) + var(--ticket-stack-lift, 0px)), 0 ) rotate(var(--ticket-stack-rotate, 0deg)) !important; } }