/* ============================================================ Lore shared UI - hero descend indicator + end-of-article image gallery + fullscreen lightbox. Used by BOTH renderers (.le legacy + .se scraped). Accent is read per context from --le-accent (legacy) / --accent (scraped); the lightbox lives on so the JS sets --lore-gal-accent on it directly. ============================================================ */ :root { --lore-gal-accent: #d4a850; } .le-w { --lore-gal-accent: var(--le-accent, #d4a850); } .se { --lore-gal-accent: var(--accent, #8a9a6a); } /* ── Hero descend indicator (CSS mouse) ──────────────────── */ .lore-descend { position: absolute; left: 50%; bottom: clamp(1.4rem, 4vh, 2.4rem); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .7rem; z-index: 2; cursor: pointer; background: none; border: 0; padding: .4rem; color: var(--lore-gal-accent); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; opacity: .82; transition: opacity .25s ease, transform .25s ease; } .lore-descend:hover, .lore-descend:focus-visible { opacity: 1; transform: translateX(-50%) translateY(2px); outline: none; } .lore-descend__mouse { width: 26px; height: 42px; border: 2px solid currentColor; border-radius: 13px; position: relative; } .lore-descend__mouse::before { content: ''; position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; border-radius: 2px; background: currentColor; transform: translateX(-50%); animation: lore-descend-wheel 1.8s ease-in-out infinite; } @keyframes lore-descend-wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 70% { opacity: 1; transform: translate(-50%, 13px); } 100% { opacity: 0; transform: translate(-50%, 15px); } } @media (prefers-reduced-motion: reduce) { .lore-descend { transition: none; } .lore-descend__mouse::before { animation: none; top: 13px; opacity: .85; } } /* ── End-of-article gallery ──────────────────────────────── */ .lore-gallery { max-width: var(--lore-gal-bleed, min(1180px, 92vw)); margin: clamp(3rem, 7vw, 5rem) auto 0; padding: 2.4rem clamp(1rem, 5vw, 2rem) 0; border-top: 1px solid rgba(255, 255, 255, .1); } .lore-gallery__head { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--lore-gal-accent); margin: 0 0 1.4rem; display: flex; align-items: center; gap: .8rem; } .lore-gallery__head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--lore-gal-accent) 45%, transparent), transparent); } .lore-gallery__grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } .lore-gallery__item { position: relative; margin: 0; cursor: pointer; overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 3; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .25s ease, transform .25s ease; } .lore-gallery__item:hover { border-color: color-mix(in srgb, var(--lore-gal-accent) 55%, transparent); } .lore-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease, opacity .3s ease; } .lore-gallery__item:hover img { transform: scale(1.06); } .lore-gallery__item:focus-visible { outline: 2px solid var(--lore-gal-accent); outline-offset: 2px; } .lore-gallery__item figcaption { position: absolute; inset: auto 0 0 0; padding: 1.4rem .7rem .55rem; font-family: 'Inter', system-ui, sans-serif; font-size: .72rem; line-height: 1.35; color: #ece8df; text-align: left; background: linear-gradient(180deg, transparent, rgba(6, 7, 11, .85)); opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; } .lore-gallery__item:hover figcaption { opacity: 1; transform: none; } /* ── Fullscreen lightbox (appended to ) ────────────── */ .lore-lightbox { --lore-gal-accent: #d4a850; position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(6, 7, 11, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; } .lore-lightbox.is-open { opacity: 1; visibility: visible; } .lore-lightbox__stage { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .lore-lightbox__img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 80px rgba(0, 0, 0, .6); animation: lore-lb-in .3s ease both; } @keyframes lore-lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } .lore-lightbox__cap { max-width: 60ch; text-align: center; font-family: 'Inter', system-ui, sans-serif; font-size: .9rem; line-height: 1.5; color: #cfcabf; } .lore-lightbox__count { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .66rem; letter-spacing: .2em; color: var(--lore-gal-accent); margin-bottom: .3rem; } .lore-lightbox button { position: absolute; background: rgba(12, 13, 20, .8); border: 1px solid rgba(255, 255, 255, .18); color: #ece8df; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: border-color .2s ease, background .2s ease, transform .2s ease; } .lore-lightbox button:hover { border-color: var(--lore-gal-accent); color: var(--lore-gal-accent); } .lore-lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); width: 44px; height: 44px; font-size: 22px; line-height: 1; position: fixed; } .lore-lightbox__prev, .lore-lightbox__next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 26px; position: fixed; } .lore-lightbox__prev { left: clamp(.6rem, 3vw, 2rem); } .lore-lightbox__next { right: clamp(.6rem, 3vw, 2rem); } .lore-lightbox__prev:hover { transform: translateY(-50%) translateX(-2px); } .lore-lightbox__next:hover { transform: translateY(-50%) translateX(2px); } .lore-lightbox[data-single="1"] .lore-lightbox__prev, .lore-lightbox[data-single="1"] .lore-lightbox__next { display: none; } @media (prefers-reduced-motion: reduce) { .lore-lightbox, .lore-lightbox__img { transition: none; animation: none; } } @media (max-width: 640px) { .lore-lightbox__prev, .lore-lightbox__next { width: 42px; height: 42px; font-size: 20px; } }