/* Marruwuchan — "Good Evening, Sinners" (app/Views/creators/marruwuchan.php). Gothic little demon: black, wine and blood red, rose pink and the silver of her hair. Cinzel for the titles, Cormorant italic for the flourishes, Quicksand for reading. The owner's pieces fall slowly through the page. No live blur; motion is transform and opacity only, paused off screen by site.js and stopped for reduced motion and lite mode (docs/MOTION.md, the mobile-performance rules). */ @font-face { font-family: 'Cinzel'; src: url('/assets/fonts/cinzel-900-latin.woff2') format('woff2'); font-weight: 900; font-display: swap; } @font-face { font-family: 'Cinzel'; src: url('/assets/fonts/cinzel-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-600-italic-latin.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; } body.cp-theme-marruwuchan { --mru-ink: #0c080a; --mru-night: #140c10; --mru-panel: #1d1116; --mru-panel2: #2a161d; --mru-line: rgba(232, 163, 179, .2); --mru-wine: #6d0f1f; --mru-blood: #c2203a; --mru-blood-l: #ff5470; --mru-rose: #e8a3b3; --mru-rose-l: #ffd6df; --mru-silver: #d9d3d6; --mru-tx: #f6eef0; --mru-tx2: #d6c4c9; --mru-tx3: #9d868d; --mru-head: 'Cinzel', Georgia, serif; --mru-flour: 'Cormorant Garamond', Georgia, serif; --mru-body: 'Quicksand', system-ui, sans-serif; --scroll-acc: #c2203a; background: var(--mru-ink); } html:has(> body.cp-theme-marruwuchan) { --scroll-acc: #c2203a; } .mru { position: relative; overflow-x: clip; padding: 0 0 40px; color: var(--mru-tx); font-family: var(--mru-body); font-weight: 600; background: radial-gradient(ellipse 55% 40% at 78% 8%, rgba(194, 32, 58, .22), transparent 70%), radial-gradient(ellipse 50% 40% at 6% 34%, rgba(109, 15, 31, .3), transparent 70%), radial-gradient(ellipse 60% 35% at 92% 66%, rgba(232, 163, 179, .08), transparent 70%), linear-gradient(180deg, #180c12 0%, var(--mru-ink) 45%, #0a0608 100%); } .mru img { display: block; max-width: 100%; } /* ---- the falling pieces (one fixed layer) ---- */ .mru-fall { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .mru-fall img { position: absolute; left: var(--x); top: -90px; width: var(--w); height: auto; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); animation: mru-fall var(--d) linear infinite; animation-delay: var(--t); } @keyframes mru-fall { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scaleX(var(--s)); } 8% { opacity: .75; } 50% { transform: translate3d(28px, 55vh, 0) rotate(calc(var(--s) * 160deg)) scaleX(var(--s)); } 90% { opacity: .6; } 100% { opacity: 0; transform: translate3d(-18px, 115vh, 0) rotate(calc(var(--s) * 320deg)) scaleX(var(--s)); } } /* ---- type ---- */ .mru-kick { margin: 0 0 10px; font-family: var(--mru-flour); font-style: italic; font-weight: 600; font-size: 19px; letter-spacing: .03em; color: var(--mru-rose); } .mru-title { margin: 0; text-transform: none; font-family: var(--mru-head); font-weight: 900; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.1; letter-spacing: .03em; color: var(--mru-tx); } .mru-title em { font-style: normal; color: var(--mru-blood-l); } .mru-text { margin: 12px 0 0; font-size: 17px; font-weight: 600; line-height: 1.7; color: var(--mru-tx2); } .mru-text a { color: var(--mru-rose-l); border-bottom: 1px solid currentColor; } /* ---- panels: dark velvet with a thin rose edge ---- */ .mru-panel { position: relative; border: 1.5px solid var(--mru-line); border-radius: 22px; background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(194, 32, 58, .14), transparent 70%), linear-gradient(160deg, var(--mru-panel2), var(--mru-panel) 60%, var(--mru-night)); box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 214, 223, .07); } /* ---- hero ---- */ .mru-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 36px; max-width: 1240px; min-height: min(100vh, 860px); margin: 0 auto; padding: 120px 32px 30px; } .mru-name { margin: 0; padding: .06em 0; font-family: var(--mru-head); font-weight: 900; font-size: clamp(40px, 6vw, 84px); line-height: 1.02; letter-spacing: .02em; text-transform: none; color: var(--mru-silver); text-shadow: 0 2px 0 #000, 0 0 28px rgba(194, 32, 58, .55); } .mru-summary { max-width: 540px; margin: 18px 0 0; font-family: var(--mru-flour); font-style: italic; font-size: clamp(20px, 1.9vw, 24px); font-weight: 600; line-height: 1.45; color: var(--mru-rose-l); } .mru-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; } .mru-tags li { padding: 5px 14px; border-radius: 40px; border: 1px solid rgba(194, 32, 58, .6); background: rgba(194, 32, 58, .12); color: var(--mru-tx); font-size: 14px; font-weight: 700; } .mru-tags li::before { content: "✟ "; color: var(--mru-rose); } .mru-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .mru-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: 1.5px solid rgba(232, 163, 179, .55); border-radius: 40px; background: transparent; color: var(--mru-tx); font-family: var(--mru-head); font-weight: 700; font-size: 14px; letter-spacing: .08em; cursor: pointer; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background-color .18s, color .18s, box-shadow .18s, border-color .18s; } .mru-btn:hover { transform: translateY(-3px); border-color: var(--mru-rose); box-shadow: 0 10px 22px -10px rgba(232, 163, 179, .6); } .mru-btn.is-hot { border-color: var(--mru-blood); background: linear-gradient(180deg, var(--mru-blood), var(--mru-wine)); color: #fff; box-shadow: 0 6px 18px -6px rgba(194, 32, 58, .7); } .mru-btn.is-hot:hover { background: linear-gradient(180deg, var(--mru-blood-l), var(--mru-blood)); } .mru-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .mru-socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--mru-line); color: var(--mru-tx2); transition: color .15s, border-color .15s, background-color .15s, box-shadow .2s, transform .18s cubic-bezier(.3, 1.6, .5, 1); } /* Hovers are a bright rose fill with dark wine text: the page's own red is near-black in its first, monochrome stage, so it would barely show. */ .mru-socials a:hover { background: linear-gradient(135deg, #ffd6df, #ff8fa8); border-color: #ffd6df; color: #2a0a12; box-shadow: 0 8px 22px -8px rgba(255, 107, 133, .75), 0 0 0 3px rgba(255, 143, 168, .18); transform: translateY(-3px) scale(1.06); } .mru-socials svg { width: 18px; height: 18px; fill: currentColor; } /* Her under a gothic arch: a silver-edged arch, a slow red glow behind it. */ .mru-stage { position: relative; width: 100%; max-width: 460px; aspect-ratio: 4 / 5; justify-self: center; } .mru-arch { position: absolute; inset: 0 6% 4%; border-radius: 50% 50% 18px 18px / 36% 36% 18px 18px; border: 2px solid rgba(217, 211, 214, .45); background: radial-gradient(ellipse at 50% 30%, rgba(194, 32, 58, .45), rgba(109, 15, 31, .28) 45%, rgba(12, 8, 10, .2) 75%); box-shadow: inset 0 0 0 8px rgba(12, 8, 10, .55), inset 0 0 0 10px rgba(232, 163, 179, .18); } .mru-arch i { position: absolute; inset: 14% 10% 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 84, 112, .35), transparent 65%); animation: mru-glow 6s ease-in-out infinite; } @keyframes mru-glow { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } } .mru-hero-art { position: absolute; left: 4%; bottom: 0; width: 92%; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .65)); animation: mru-sway 7s ease-in-out infinite; transform-origin: 50% 100%; } @keyframes mru-sway { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } } /* Her eyes across the page. */ .mru-band { position: relative; z-index: 1; overflow: hidden; max-width: 1240px; width: calc(100% - 64px); aspect-ratio: 3 / 1; max-height: 380px; margin: 26px auto 10px; border-radius: 22px; border: 1.5px solid rgba(232, 163, 179, .35); box-shadow: 0 0 0 6px #000, 0 0 40px rgba(194, 32, 58, .3); } .mru-band img { width: 100%; height: 100%; object-fit: cover; } /* Rub for affection (creators/marruwuchan.js). */ .mru-band[data-mru-rub] { cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .mru .mru-band .mru-band-blush { position: absolute; inset: 0; object-position: 50% 46%; opacity: 0; transition: opacity 1.2s ease, filter 1.6s ease; } .mru .mru-band.is-flustered .mru-band-blush { opacity: 1; } .mru-band.is-rubbed { animation: mru-squish .3s ease; } @keyframes mru-squish { 50% { transform: scale(.992, 1.01); } } .mru-rub-hearts { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; } .mru-rub-hearts i { position: absolute; left: 0; top: 0; font-style: normal; font-size: var(--z, 20px); line-height: 1; color: var(--c, #ff6b85); text-shadow: 0 2px 6px rgba(0, 0, 0, .35); animation: mru-rise-heart 1s ease-out forwards; } @keyframes mru-rise-heart { 0% { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(.4); } 100% { opacity: 0; transform: translate(calc(var(--x0) + var(--dx)), calc(var(--y0) - 70px)) scale(1.1) rotate(var(--r)); } } .mru-rub-bar { position: absolute; z-index: 3; left: 50%; bottom: 14px; width: min(46%, 260px); height: 8px; border-radius: 10px; background: rgba(12, 8, 10, .65); box-shadow: 0 0 0 1px rgba(255, 214, 223, .35); transform: translateX(-50%); overflow: hidden; transition: opacity .6s; } .mru-rub-bar i { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(90deg, #e8a3b3, #ff6b85); transform-origin: left; transform: scaleX(0); transition: transform .2s ease; } .mru-rub-note { position: absolute; z-index: 3; right: 16px; top: 14px; padding: 3px 14px; border-radius: 40px; background: rgba(12, 8, 10, .82); color: #ffd6df; font-family: var(--mru-flour); font-style: italic; font-size: 18px; } .mru-band.is-flustered .mru-rub-bar { opacity: 0; } /* ---- between sections ---- */ .mru-rule { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; max-width: 1240px; margin: 30px auto; padding: 0 32px; } .mru-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 163, 179, .5)); transform: scaleX(0); transition: transform 1.2s ease; transform-origin: 100% 50%; } .mru-rule i:last-child { background: linear-gradient(270deg, transparent, rgba(232, 163, 179, .5)); transform-origin: 0 50%; } .mru-rule.is-in i { transform: scaleX(1); } .mru-rule b { font-size: 18px; letter-spacing: .3em; color: var(--mru-rose); } /* ---- sections ---- */ .mru-sec { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 34px 32px 20px; } .mru-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .mru-more { flex: none; padding: 7px 16px; border-radius: 40px; border: 1.5px solid var(--mru-line); font-family: var(--mru-head); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--mru-rose-l); transition: background-color .15s, color .15s, border-color .15s; } .mru-more:hover { background: linear-gradient(135deg, #ffd6df, #ff8fa8); border-color: #ffd6df; color: #2a0a12; box-shadow: 0 8px 22px -8px rgba(255, 107, 133, .75), 0 0 0 3px rgba(255, 143, 168, .18); } .mru .mru-row-h { margin: 24px 0 10px; font-family: var(--mru-flour); font-style: italic; font-weight: 600; font-size: 24px; letter-spacing: 0; color: var(--mru-tx2); text-transform: none; } .mru .mru-row-h::before { content: "♥ "; color: var(--mru-blood-l); font-style: normal; font-size: 16px; } /* About */ .mru-about-card { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 34px; align-items: center; padding: 36px; } .mru-about-art img { width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .6)); /* Her art stops in a straight line at the bottom: fade it into the panel. */ -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); } .mru-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 22px 0 0; } .mru-facts div { padding: 10px 14px; border-radius: 14px; background: rgba(12, 8, 10, .5); border: 1px solid var(--mru-line); } .mru-facts dt { font-family: var(--mru-head); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mru-rose); } .mru-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--mru-tx); } .mru-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; } .mru-links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 40px; border: 1.5px solid var(--mru-line); font-weight: 700; font-size: 14px; transition: border-color .15s, background-color .15s, color .15s, box-shadow .2s, transform .18s cubic-bezier(.3, 1.6, .5, 1); } .mru-links a:hover { background: linear-gradient(135deg, #ffd6df, #ff8fa8); border-color: #ffd6df; color: #2a0a12; box-shadow: 0 8px 22px -8px rgba(255, 107, 133, .75), 0 0 0 3px rgba(255, 143, 168, .18); transform: translateY(-2px); } .mru-links svg { width: 16px; height: 16px; fill: currentColor; } .mru-discord, .mru-business { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 15px; color: var(--mru-tx2); } .mru-discord svg { width: 18px; height: 18px; fill: var(--mru-rose); } .mru-business a { color: var(--mru-rose-l); border-bottom: 1px solid currentColor; } /* ---- her week (creators/marruwuchan.js lights up tonight) ---- */ .mru-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .mru-week li { position: relative; display: grid; gap: 6px; align-content: start; min-height: 150px; padding: 16px 14px; border-radius: 18px 18px 10px 10px; border: 1.5px solid var(--mru-line); background: linear-gradient(180deg, var(--mru-panel2), var(--mru-panel)); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), border-color .2s, box-shadow .2s; } .mru-week b { font-family: var(--mru-head); font-weight: 900; font-size: 18px; letter-spacing: .08em; color: var(--mru-rose); } .mru-week span { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--mru-tx); } .mru-week small { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--mru-tx3); } .mru-week li.is-off { opacity: .55; } .mru-week li.is-off span { font-family: var(--mru-flour); font-style: italic; font-size: 18px; color: var(--mru-tx2); } .mru-week li.is-tonight { transform: translateY(-6px); border-color: var(--mru-blood); background: linear-gradient(180deg, rgba(194, 32, 58, .4), var(--mru-panel)); box-shadow: 0 16px 30px -12px rgba(194, 32, 58, .7); } .mru-week li.is-tonight::after { content: "tonight ♥"; position: absolute; top: -12px; right: 10px; padding: 2px 10px; border-radius: 40px; background: var(--mru-blood); color: #fff; font-size: 12px; font-weight: 700; } .mru-week-note { margin: 14px 0 0; font-family: var(--mru-flour); font-style: italic; font-size: 18px; color: var(--mru-tx3); } /* Videos */ .mru-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 30%, 400px); gap: 18px; overflow-x: auto; padding: 6px 6px 18px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; } .mru-rail.is-tall { grid-auto-columns: clamp(190px, 18%, 230px); } .mru-rail::-webkit-scrollbar { height: 8px; } .mru-rail::-webkit-scrollbar-thumb { background: var(--mru-blood); border-radius: 10px; } .mru-rail::-webkit-scrollbar-track { background: var(--mru-panel); border-radius: 10px; } .mru-card { scroll-snap-align: start; margin: 0; } .mru-card-thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; border: 1.5px solid var(--mru-line); background: var(--mru-panel); transition: border-color .18s, transform .22s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s; } .mru-card.is-tall .mru-card-thumb { aspect-ratio: 9 / 16; } .mru-card-thumb > a, .mru-card-thumb img, .mru-card-thumb iframe { display: block; width: 100%; height: 100%; } .mru-card-thumb img { object-fit: cover; } .mru-card:hover .mru-card-thumb { border-color: var(--mru-blood); transform: translateY(-4px); box-shadow: 0 14px 28px -12px rgba(194, 32, 58, .7); } .mru-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 52px; margin: -26px 0 0 -28px; transition: transform .22s cubic-bezier(.3, 1.6, .5, 1); } .mru-play svg { width: 100%; height: 100%; fill: var(--mru-blood); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); } .mru-play .mru-play-tri { fill: #fff; } .mru-card:hover .mru-play { transform: scale(1.14); } .mru-chip { position: absolute; left: 10px; top: 10px; padding: 2px 10px; border-radius: 40px; background: rgba(12, 8, 10, .85); color: var(--mru-rose-l); font-size: 12px; font-weight: 700; letter-spacing: .04em; } .mru .mru-card-title { margin: 10px 2px 0; font-family: var(--mru-body); font-weight: 600; font-size: 15px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--mru-tx); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mru-empty, .mru-follow { max-width: 620px; padding: 20px 24px; } .mru-follow { display: flex; align-items: center; gap: 12px; } .mru-follow svg { width: 22px; height: 22px; fill: var(--mru-rose); } .mru-follow .mru-more { margin-left: auto; } /* ---- her moods (creators/marruwuchan.js) ---- */ .mru-mood-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; align-items: center; padding: 30px 34px; overflow: hidden; } .mru-mood-stage { position: relative; height: 380px; } .mru-mood-stage::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 28px; border-radius: 50%; background: radial-gradient(ellipse, rgba(194, 32, 58, .45), transparent 70%); } .mru-chibi { position: absolute; left: 50%; bottom: 8px; width: auto; height: 300px; max-width: 90%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); opacity: 0; transform: translateX(-50%) scale(.6) translateY(30px); transition: opacity .25s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); } .mru-chibi.is-on { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); } .mru-bubble { position: absolute; left: 50%; top: 0; max-width: 260px; margin: 0; padding: 10px 16px; border-radius: 18px; background: var(--mru-tx); color: #1d1116; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; transform: translateX(-50%); } .mru-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--mru-tx); transform: translateX(-50%); } .mru-bubble.is-new { animation: mru-pop .35s cubic-bezier(.3, 1.6, .5, 1); } @keyframes mru-pop { 0% { transform: translateX(-50%) scale(.7); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } } .mru-mood-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .mru-mood-btns .mru-btn.is-picked { border-color: var(--mru-blood); background: rgba(194, 32, 58, .3); } /* ---- gallery ---- */ .mru-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .mru-gallery a { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 18px 18px 8px 8px; border: 1.5px solid var(--mru-line); background: var(--mru-panel); transition: border-color .18s, transform .22s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s; } .mru-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .mru-gallery a:hover { border-color: var(--mru-blood); transform: translateY(-5px); box-shadow: 0 16px 30px -12px rgba(194, 32, 58, .7); } .mru-gallery a:hover img { transform: scale(1.05); } .mru-gallery a::after { content: "♥"; position: absolute; right: 12px; bottom: 8px; font-size: 20px; color: var(--mru-blood-l); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); } .mru-gallery a:hover::after { opacity: 1; transform: none; } /* ---- the viewer (creators/marruwuchan.js) ---- */ .mru-zoom { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: clamp(14px, 4vmin, 44px); background: radial-gradient(ellipse at 50% 50%, rgba(80, 10, 24, .92), rgba(10, 4, 6, .97) 70%); opacity: 0; transition: opacity .22s ease; } .mru-zoom[hidden] { display: none; } .mru-zoom.is-open { opacity: 1; } .mru-zoom-win { position: relative; max-width: min(92vw, 1100px); padding: 8px; border-radius: 22px; background: linear-gradient(160deg, var(--mru-rose), var(--mru-blood)); box-shadow: 0 30px 70px rgba(0, 0, 0, .7); transform: scale(.94); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); } .mru-zoom.is-open .mru-zoom-win { transform: none; } .mru-zoom-img { display: block; max-width: min(88vw, 1080px); max-height: calc(86vh - 20px); width: auto; height: auto; margin: 0 auto; border-radius: 16px; background: #000; } .mru-zoom-x, .mru-zoom-nav { display: grid; place-items: center; border: 1.5px solid var(--mru-rose); background: var(--mru-night); color: var(--mru-rose-l); font-family: var(--mru-head); font-weight: 700; cursor: pointer; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background-color .15s; } .mru-zoom-x { position: absolute; top: -16px; right: -16px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; font-size: 22px; line-height: 1; } .mru-zoom-x:hover, .mru-zoom-nav:hover { background: var(--mru-blood); transform: scale(1.1); } .mru-zoom-nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; font-size: 22px; } .mru-zoom-nav.is-prev { left: 18px; } .mru-zoom-nav.is-next { right: 18px; } .mru-zoom-nav[hidden] { display: none; } @media (max-width: 700px) { .mru-zoom-nav { top: auto; bottom: 18px; margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .mru-zoom, .mru-zoom-win { transition: none; } } /* ---- shop ---- */ .mru-soon { display: flex; align-items: center; gap: 22px; max-width: 760px; padding: 22px 28px; } .mru-soon-art { flex: none; width: 110px; height: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); animation: mru-sway 6s ease-in-out infinite; } .mru-soon .mru-text { margin: 0; } /* ---- join ---- */ .mru-join { margin-top: 20px; } .mru-join-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 36px; align-items: center; padding: 36px 34px; } .mru-join .mru-title { margin: 8px 0 6px; } .mru-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; } .mru-nums li { padding: 16px; border-radius: 16px; border: 1px solid var(--mru-line); background: rgba(12, 8, 10, .5); } .mru-nums b { display: block; font-family: var(--mru-head); font-weight: 900; font-size: 30px; line-height: 1; color: var(--mru-blood-l); } .mru-nums span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--mru-tx3); } /* ---- end (a div: the site's footer styles would pull a