:root { color-scheme: dark; --ink: #f0edf6; --muted: #aaa6b8; --paper: #11111c; --paper-rgb: 17, 17, 28; --glass: rgba(23, 22, 36, .55); --glass-strong: rgba(28, 26, 42, .78); --line: rgba(235, 226, 255, .12); --violet: #aaa6e6; --violet-deep: #cbc6f5; --rose: #e1a6b8; --peach: #efc8b5; --shadow: 0 22px 70px rgba(0, 0, 0, .3); --radius: 28px; --serif: "Noto Serif SC", "Songti SC", STSong, ui-serif, serif; --sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --cute: "LXGW WenKai", "霞鹜文楷", "STKaiti", KaiTi, "Microsoft YaHei", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; position: relative; isolation: isolate; overflow-x: hidden; color: var(--ink); background: var(--paper); font: 15px/1.75 var(--sans); min-height: 100vh; transition: background-color .35s, color .35s; } /* 全屏固定背景图：由注入，或回退到默认图 */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background-image: var(--page-bg, url('../images/backgrounds/bg-01.jpg')); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; transform: scale(1.025); animation: backdrop-arrive 1.4s cubic-bezier(.16,1,.3,1) both; will-change: transform, filter; } /* 暗角+遮罩，保证文字可读性的同时让背景高透明度可见 */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 15% 10%, rgba(17, 17, 28, .50), transparent 45%), radial-gradient(circle at 85% 90%, rgba(17, 17, 28, .62), transparent 52%), linear-gradient(rgba(12, 11, 24, .28), rgba(12, 11, 24, .48)); } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } img { max-width: 100%; display: block; } ::selection { color: white; background: var(--violet); } .glass-card, .glass-bar { background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); } .eyebrow { margin: 0 0 6px; color: var(--violet); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .muted { color: var(--muted); } .site-header { position: fixed; top: 20px; left: 50%; z-index: 80; transform: translateX(-50%); width: min(1180px, calc(100% - 36px)); height: 70px; padding: 0 18px 0 14px; display: flex; align-items: center; border-radius: 22px; transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .25s ease; will-change: transform, opacity; } .site-header.is-hidden { transform: translate(-50%, calc(-100% - 30px)); opacity: 0; pointer-events: none; } .brand { display: flex; align-items: center; gap: 11px; margin-right: auto; line-height: 1.15; } .brand-mark { width: 43px; height: 43px; border-radius: 15px; display: grid; place-items: center; flex: 0 0 auto; color: white; font: 700 24px var(--serif); background: linear-gradient(145deg, var(--rose), var(--violet)); box-shadow: 0 8px 22px rgba(119,117,173,.3), inset 0 1px rgba(255,255,255,.4); } .brand b { display: block; font: 700 18px var(--serif); letter-spacing: .08em; } .brand small { color: var(--muted); font-size: 8px; letter-spacing: .16em; } .main-nav { display: flex; align-items: center; gap: 4px; } .main-nav a { position: relative; padding: 10px 13px; color: var(--muted); font-size: 13px; font-weight: 600; transition: color .2s, transform .2s; } .main-nav a:hover, .main-nav a.active { color: var(--ink); transform: translateY(-1px); } .main-nav a.active::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--rose); } .nav-toggle { border: 0; background: transparent; color: var(--ink); cursor: pointer; } .nav-toggle { display: none; font-size: 20px; } .site-main { position: relative; z-index: 2; min-height: 75vh; } .hero { position: relative; min-height: 780px; max-height: 920px; height: 95vh; overflow: hidden; display: flex; align-items: center; padding: 120px max(7vw, calc((100vw - 1180px)/2)); background: var(--hero) center / cover no-repeat; } .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(transparent, var(--paper)); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,16,34,.52), rgba(24,21,47,.1) 60%, rgba(13,12,29,.22)), linear-gradient(0deg, rgba(12,11,26,.34), transparent 60%); } body.page-home::before { animation: backdrop-arrive 1.4s cubic-bezier(.16,1,.3,1), backdrop-pan 26s ease-in-out 1.4s infinite alternate; } body.page-home .hero { background: transparent; } body.page-home .hero::after { height: 34%; background: linear-gradient(transparent, rgba(11,10,23,.18), transparent); } body.page-home .hero-overlay { background: linear-gradient(90deg, rgba(17,16,34,.48), rgba(24,21,47,.08) 62%, rgba(13,12,29,.16)); -webkit-mask-image: linear-gradient(#000 0 72%, transparent 100%); mask-image: linear-gradient(#000 0 72%, transparent 100%); } .hero-copy { position: relative; z-index: 2; width: min(570px, 54vw); padding: 46px 50px; border-radius: 34px; color: var(--ink); } .hero-copy h1 { margin: 8px 0 18px; font: 600 clamp(42px, 5vw, 70px)/1.14 var(--serif); letter-spacing: .03em; } .hero-copy h1 em { color: #c8c2ff; font-style: normal; text-shadow: 0 3px rgba(0,0,0,.3); } .hero-copy > p:not(.eyebrow) { max-width: 430px; color: #c3bfce; font-size: 16px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .button { border: 1px solid transparent; border-radius: 15px; padding: 11px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font-weight: 700; font-size: 13px; transition: transform .2s, box-shadow .2s, background .2s; } .button:hover { transform: translateY(-2px); } .button.primary { color: white; background: linear-gradient(135deg, #706ca8, #8b739c); box-shadow: 0 10px 24px rgba(70,65,118,.38); } .button.ghost { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.055); } .button.full { width: 100%; } .hero-note { margin-top: 24px; color: var(--muted); font-size: 11px; } .pulse-dot { width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; background: #89a77f; box-shadow: 0 0 0 5px rgba(137,167,127,.16); animation: pulse 2s infinite; } .moon-card { position: absolute; right: max(6vw, calc((100vw - 1180px)/2)); bottom: 130px; z-index: 3; width: 88px; padding: 13px; border-radius: 24px; color: var(--ink); text-align: center; } .moon-card span { display: block; font: 600 29px var(--serif); } .moon-card small { letter-spacing: .18em; font-size: 9px; } .bento-hero { min-height: 860px; height: auto; max-height: none; padding: 110px 20px 40px; display: block; overflow: visible; } .bento-wrap { position: relative; z-index: 3; width: min(1180px, 100%); margin: auto; } .home-dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 72px; gap: 12px; } .bento-card { position: relative; min-width: 0; padding: 24px; grid-column: var(--x) / span var(--w); grid-row: var(--y) / span var(--h); border-radius: 28px; overflow: hidden; container-type: inline-size; font-family: var(--cute); transition: border-color .35s, box-shadow .35s, outline-color .25s, scale .35s; } .bento-card h1, .bento-card h2, .bento-card blockquote, .bento-card strong { font-family: var(--cute); } .welcome-card.hero-copy { width: auto; padding: clamp(30px, 5cqi, 50px); display: flex; flex-direction: column; justify-content: center; } .welcome-card h1 { margin: 5px 0 14px; font-size: clamp(38px, 9cqi, 72px); line-height: 1.12; } .welcome-card h1 em { color: #c8c2ff; font-style: normal; } .welcome-card > p:not(.eyebrow) { max-width: 92%; font-size: clamp(13px, 2.5cqi, 17px); } .welcome-card .hero-actions { margin-top: clamp(16px, 4cqi, 27px); } .welcome-card .hero-note { margin-top: clamp(15px, 3cqi, 24px); } .music-card { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; padding: 19px 22px; } .music-toggle { width: 66px; height: 66px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; color: white; background: radial-gradient(circle at 35% 30%, #d8a9bc, #7772ad 58%, #35324f); box-shadow: 0 12px 30px rgba(0,0,0,.25); cursor: pointer; transition: transform .3s, box-shadow .3s; } .music-toggle span { display: block; translate: 2px 0; font-size: 18px; }.music-toggle.playing span { translate: 0; }.music-toggle:disabled { cursor: not-allowed; opacity: .48; } .music-toggle.playing { box-shadow: 0 0 0 7px rgba(170,166,230,.1), 0 12px 30px rgba(0,0,0,.28); animation: music-pulse 1.8s ease-in-out infinite alternate; } .music-copy { min-width: 0; }.music-copy .eyebrow { margin: 0; }.music-copy h2 { margin: 0; overflow: hidden; font-size: clamp(16px, 5cqi, 23px); text-overflow: ellipsis; white-space: nowrap; }.music-copy small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; } .music-control-row { height: 17px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }.music-progress { --fill:0%; width:auto;height:13px;margin:0 4px 0 0;flex:1;appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer }.music-progress::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(90deg,var(--rose) 0,var(--violet) var(--fill),rgba(255,255,255,.13) var(--fill));box-shadow:0 0 8px rgba(170,166,230,.2)}.music-progress::-moz-range-track{height:3px;border:0;border-radius:99px;background:linear-gradient(90deg,var(--rose) 0,var(--violet) var(--fill),rgba(255,255,255,.13) var(--fill))}.music-progress::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4px;-webkit-appearance:none;border:2px solid #f4f0ff;border-radius:50%;background:var(--violet);box-shadow:0 2px 8px rgba(0,0,0,.35)}.music-progress::-moz-range-thumb{width:9px;height:9px;border:2px solid #f4f0ff;border-radius:50%;background:var(--violet)}.music-progress:disabled { cursor: default; opacity:.45 }.music-control-row time, .music-control-row > span { color: var(--muted); font-size: 8px; }.music-status { margin-top: 1px; font-size: 8px; }.music-card[data-music-state="error"] .music-status { color: #f0a8b5; } .music-card audio { display:none } .clock-card { display: flex; flex-direction: column; justify-content: center; text-align: center; }.clock-card strong { display: block; font-size: clamp(28px, 20cqi, 54px); line-height: 1; }.clock-card > span { margin-top: 7px; color: var(--violet-deep); }.clock-card small { margin-top: auto; color: var(--muted); } .moment-card-home { display: flex; flex-direction: column; justify-content: center; border-color: rgba(225,166,184,.2); background: linear-gradient(145deg, rgba(58,43,68,.68), rgba(24,23,40,.72)); }.moment-card-home::before { content: ""; position: absolute; top: -8px; left: 43%; width: 62px; height: 22px; rotate: -4deg; background: rgba(222,190,185,.24); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }.card-spark { position: absolute; right: 20px; top: 16px; color: var(--rose); font-size: 24px; }.moment-card-home blockquote { margin: 10px 0 14px; font-size: clamp(15px, 6cqi, 22px); line-height: 1.65; }.moment-card-home small { margin-top: auto; color: var(--muted); } .lyrics-card { display: grid; grid-template-columns: minmax(120px,.26fr) 1fr; align-items: center; gap: 24px; padding: 22px 30px; }.lyrics-card > div { border-right: 1px solid var(--line); }.lyrics-card > div span { color: var(--rose); font-size: 24px; }.lyrics-card blockquote { margin: 0; font-size: clamp(17px, 3.2cqi, 30px); line-height: 1.65; letter-spacing: .04em; }.lyrics-original, .lyrics-translation { display: block; animation: lyric-line-in .55s ease both; }.lyrics-translation { margin-top: 3px; color: var(--muted); font-size: .48em; letter-spacing: .02em; } .quick-card { display: flex; flex-direction: column; justify-content: center; }.quick-card > div { display: grid; gap: 5px; }.quick-card a { padding: 7px 0; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); font-size: clamp(12px, 4cqi, 16px); }.quick-card a:last-child { border: 0; }.quick-card a span { color: var(--violet); } .content-section, .page-intro, .timeline, .article-shell, .about-layout, .gallery-grid, .download-grid, .moments-stream, .support-page, .moment-teaser { width: min(1120px, calc(100% - 40px)); margin-left: auto; margin-right: auto; } .content-section { position: relative; z-index: 4; padding: 42px 0 90px; } .section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 30px; } .section-heading h2, .page-intro h1 { margin: 0; font: 600 34px var(--serif); } .section-heading > a { color: var(--muted); font-size: 12px; font-weight: 700; } .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .post-card { border-radius: var(--radius); overflow: hidden; transition: translate .35s, box-shadow .35s; } .post-card:hover { translate: 0 -7px; box-shadow: 0 28px 70px rgba(0,0,0,.3); } .post-cover { position: relative; display: block; height: 215px; overflow: hidden; background: linear-gradient(135deg, #d8c5d4, #8e8bb4); } .post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .post-card:hover .post-cover img { transform: scale(1.045); } .post-date { position: absolute; top: 14px; right: 14px; padding: 6px 10px; border-radius: 10px; color: var(--ink); background: rgba(20,19,32,.72); backdrop-filter: blur(12px); font: 700 11px var(--serif); } .post-body { padding: 23px 24px 24px; } .tag-row { display: flex; flex-wrap: wrap; gap: 7px; min-height: 19px; } .tag-row span { color: var(--violet); font-size: 10px; font-weight: 700; } .post-body h3 { margin: 8px 0 10px; font: 600 20px/1.45 var(--serif); } .post-body h3 a { transition: color .2s; } .post-body h3 a:hover { color: var(--violet); } .post-body > p { min-height: 50px; margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.8; } .text-link { color: var(--violet-deep); font-size: 11px; font-weight: 800; } .text-link span { margin-left: 5px; transition: margin .2s; } .text-link:hover span { margin-left: 9px; } .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 38px; } .pagination a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; } .pagination a.active { color: white; background: var(--violet); } .moment-teaser { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; margin-bottom: 28px; padding: 26px 30px; border-color: rgba(225,166,184,.2); border-radius: 15px 22px 17px 20px; background: linear-gradient(150deg, rgba(56,42,67,.76), rgba(25,24,41,.86)); rotate: -.35deg; } .moment-teaser .moment-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; color: white; background: linear-gradient(135deg, var(--rose), var(--violet)); } .moment-teaser p { margin: 0; } .moment-teaser > a { color: var(--violet); font-size: 12px; font-weight: 700; } .page-intro { padding: 165px 0 60px; text-align: center; } .page-intro h1 { font-size: clamp(42px, 6vw, 66px); } .page-intro > p:last-child { color: var(--muted); } .timeline { padding-bottom: 110px; } .timeline-year { display: grid; grid-template-columns: 120px 1fr; gap: 36px; } .year-badge { position: sticky; top: 118px; align-self: start; text-align: right; } .year-badge strong { display: block; color: var(--violet); font: 600 43px var(--serif); } .year-badge small { color: var(--muted); letter-spacing: .22em; } .year-stream { position: relative; padding: 4px 0 70px 34px; } .year-stream::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--rose), rgba(119,117,173,.18)); transform: scaleY(0); transform-origin: top; transition: transform 1.1s cubic-bezier(.16,1,.3,1) .15s; } .timeline-year.visible .year-stream::before { transform: scaleY(1); } .month-group { position: relative; margin-bottom: 26px; } .month-group::before { content: ""; position: absolute; left: -39px; top: 12px; width: 9px; height: 9px; border: 4px solid var(--paper); border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 1px rgba(119,117,173,.28); } .month-label { margin: 0 0 9px 5px; color: var(--violet); font: 700 21px var(--serif); } .month-label small { margin-left: 3px; font: 10px var(--sans); } .month-items { border-radius: 22px; padding: 4px 20px; } .archive-item { display: grid; grid-template-columns: 45px 1fr auto; gap: 15px; align-items: center; padding: 17px 4px; border-bottom: 1px solid var(--line); } .archive-item:last-child { border: 0; } .archive-item time { color: var(--rose); font: 700 18px var(--serif); } .archive-item span b { display: block; font-family: var(--serif); } .archive-item span small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; } .archive-item i { color: var(--violet); font-style: normal; transition: transform .2s; } .archive-item:hover i { transform: translateX(4px); } .article-shell { padding: 128px 0 100px; } .article-hero { max-width: 900px; margin: 0 auto 28px; text-align: center; } .back-link { color: var(--muted); font-size: 12px; } .article-hero .tag-row { justify-content: center; margin-top: 25px; } .article-hero h1 { margin: 12px 0 18px; font: 600 clamp(34px, 4.8vw, 56px)/1.24 var(--serif); text-wrap: balance; } .article-meta { display: flex; justify-content: center; align-items: center; gap: 11px; color: var(--muted); font-size: 11px; } .article-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--rose); } .article-cover { aspect-ratio: 16/9; max-height: 570px; margin: 0 0 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: rgba(20,18,36,.72); box-shadow: var(--shadow); } .article-cover img { width: 100%; height: 100%; object-fit: cover; } .article-content { max-width: 850px; margin: auto; padding: clamp(30px, 4.5vw, 56px); border-radius: 30px; font-size: 16px; line-height: 1.95; } .article-content p { margin: 0 0 1.5em; } .article-content h2, .article-content h3 { margin: 2em 0 .8em; font-family: var(--serif); line-height: 1.5; } .article-content h2 { font-size: 28px; } .article-content blockquote { position: relative; margin: 2em 0; padding: 20px 25px; border-left: 3px solid var(--rose); border-radius: 0 15px 15px 0; color: var(--muted); background: rgba(119,117,173,.07); } .article-content pre { padding: 22px; overflow: auto; border-radius: 16px; color: #eae8f4; background: #2f2e43; font-size: 13px; line-height: 1.7; } .article-content a { color: var(--violet); border-bottom: 1px dashed; } .article-content img { margin: 30px auto; border-radius: 18px; } .article-content a.image-unavailable { display: block; margin: 20px 0; padding: 16px 18px; border: 1px dashed rgba(170,166,230,.32); border-radius: 14px; color: var(--muted); background: rgba(119,117,173,.06); text-align: center; } .article-end { margin: 45px auto 0; text-align: center; color: var(--muted); } .article-end span { color: var(--rose); } .about-layout { padding: 160px 0 110px; display: grid; grid-template-columns: 370px 1fr; gap: 24px; align-items: stretch; } .about-profile { padding: 17px; border-radius: 36px; } .about-avatar { min-height: 410px; position: relative; border-radius: 25px; background-image: var(--about-image); background-size: cover; background-position: center; overflow: hidden; } .about-avatar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(14,13,27,.7)); } .about-monogram { position: absolute; z-index: 1; right: 20px; bottom: 20px; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; color: white; background: rgba(24,22,40,.38); backdrop-filter: blur(12px); font: 27px var(--serif); } .about-identity { padding: 24px 15px 12px; } .about-identity h2 { margin: 2px 0 3px; font: 600 29px var(--serif); } .about-identity > p:not(.eyebrow) { margin: 0; color: var(--muted); } .about-identity small { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); } .about-identity small i { width: 7px; height: 7px; border-radius: 50%; background: #91ad88; box-shadow: 0 0 0 5px rgba(145,173,136,.12); } .about-copy { padding: clamp(38px, 5vw, 66px); border-radius: 36px; } .about-copy h1 { margin: 7px 0 20px; font: 600 clamp(38px, 5vw, 60px) var(--serif); } .about-copy .lead { max-width: 620px; color: #c3bfce; font-size: 16px; line-height: 2; } .about-tags { margin: 27px 0 30px; display: flex; flex-wrap: wrap; gap: 9px; } .about-tags span { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--violet-deep); background: rgba(170,166,230,.07); font-size: 10px; font-weight: 700; } .about-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .about-details article { min-height: 128px; padding: 22px; display: grid; grid-template-columns: 30px 1fr; gap: 12px; border: 1px solid rgba(235,226,255,.09); border-radius: 20px; background: rgba(255,255,255,.035); } .about-details article > span { color: var(--rose); font: 21px var(--serif); } .about-details b { font-family: var(--serif); } .about-details p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; word-break: break-word; } .about-copy .hero-actions { margin-top: 28px; } .gallery-grid { padding-bottom: 110px; columns: 3; column-gap: 20px; } .gallery-item { break-inside: avoid; position: relative; margin: 0 0 20px; overflow: hidden; border-radius: 24px; background: #ddd; box-shadow: var(--shadow); } .gallery-item img { width: 100%; transition: transform .6s; } .gallery-item:hover img { transform: scale(1.035); } .gallery-item figcaption { position: absolute; inset: auto 0 0; padding: 40px 18px 16px; display: flex; justify-content: space-between; color: white; background: linear-gradient(transparent, rgba(35,30,54,.75)); opacity: 0; transition: opacity .3s; } .gallery-item:hover figcaption { opacity: 1; } .gallery-item small { opacity: .75; } .download-grid { padding-bottom: 110px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .download-card { position: relative; min-height: 300px; padding: 26px; border-radius: 28px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; background: linear-gradient(145deg, rgba(31,29,52,.92), rgba(20,19,36,.84)); } .download-card::after { content: ""; position: absolute; z-index: 0; right: -80px; top: -100px; width: 230px; height: 230px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(170,166,230,.13), transparent 68%); } .download-card > * { position: relative; z-index: 1; } .download-card-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 15px; } .file-icon { width: 62px; height: 62px; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; color: white; background: linear-gradient(145deg, #ba7896, #7771b7); box-shadow: 0 14px 34px rgba(17,14,33,.38), inset 0 1px rgba(255,255,255,.28); } .file-icon strong { max-width: 100%; overflow: hidden; font-size: 13px; letter-spacing: .08em; text-overflow: ellipsis; }.file-icon small { margin-top: 4px; opacity: .62; font-size: 6px; letter-spacing: .16em; } .download-heading { min-width: 0; }.download-card-meta { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; overflow: hidden; color: #aaa3c3; font-size: 9px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }.download-card-meta i { width: 3px; height: 3px; flex: 0 0 auto; border-radius: 50%; background: var(--rose); } .download-card h2 { margin: 0; overflow: hidden; color: #f5f2ff; font: 600 clamp(22px,3vw,29px)/1.2 var(--serif); text-overflow: ellipsis; white-space: nowrap; } .download-filename { display: block; margin-top: 7px; overflow: hidden; color: #77718e; font: 9px ui-monospace,monospace; text-overflow: ellipsis; white-space: nowrap; } .download-price { min-width: 76px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; text-align: right; background: rgba(255,255,255,.045); }.download-price small { display: block; color: #918aa6; font-size: 8px; }.download-price strong { display: block; margin-top: 2px; color: #eeeaff; font-size: 15px; }.download-price.free strong { color: #a8c5a1; font-size: 12px; letter-spacing: .08em; } .download-description { min-height: 42px; margin: 0; color: #aaa6b8; font-size: 12px; line-height: 1.8; } .download-details { display: flex; flex-wrap: wrap; gap: 7px; }.download-details details { margin: 0; }.download-details summary { padding: 7px 10px; border: 1px solid rgba(170,166,230,.14); border-radius: 10px; color: #9f98b3; background: rgba(255,255,255,.025); cursor: pointer; font-size: 9px; list-style: none; }.download-details summary::-webkit-details-marker { display: none; }.download-details details[open] { width: 100%; }.download-details details[open] summary { width: fit-content; color: #d5cff0; }.download-details p, .download-details code { display: block; margin: 9px 0 0; padding: 10px 12px; border-radius: 11px; color: #8e879f; background: rgba(4,4,12,.2); font-size: 9px; line-height: 1.7; overflow-wrap: anywhere; } .download-card .purchase-inline, .download-card .download-button { margin-top: auto; } .moments-stream { position: relative; max-width: 1000px; padding: 10px 10px 120px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; gap: 38px 30px; } .moments-stream::before { display: none; } .moment-card { position: relative; min-height: 190px; margin: 0; padding: 38px 31px 29px; overflow: visible; border-color: rgba(225,166,184,.2); border-radius: 11px 19px 13px 17px; background: repeating-linear-gradient(0deg, transparent 0 30px, rgba(214,196,231,.045) 30px 31px), linear-gradient(155deg, rgba(57,46,72,.94), rgba(27,26,44,.96)); box-shadow: 0 24px 55px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08); rotate: var(--note-angle, 0deg); translate: var(--note-shift, 0) 0; transform-origin: center 8%; cursor: zoom-in; transition: rotate .45s cubic-bezier(.16,1,.3,1), translate .45s, border-color .35s, box-shadow .35s, scale .35s; } .moment-card::before { content: ""; position: absolute; top: -14px; left: 50%; width: 78px; height: 28px; translate: -50% 0; rotate: var(--tape-angle, -2deg); background: linear-gradient(90deg, rgba(218,184,181,.23), rgba(229,203,192,.42), rgba(218,184,181,.22)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .moment-inner header { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; } .moment-inner header span { padding: 2px 8px; color: var(--violet-deep); border-radius: 99px; background: rgba(170,166,230,.11); font-weight: 700; } .moment-inner > p { margin: 17px 0 0; font: 500 16px/2 var(--cute); letter-spacing: .035em; } .moment-inner img { width: 100%; height: 190px; margin-top: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; object-fit: cover; rotate: .5deg; } .moment-card:focus-visible { outline: 2px solid var(--violet); outline-offset: 6px; } .moment-dialog { width: min(760px, calc(100% - 28px)); max-height: 88vh; padding: 0; overflow: visible; border: 1px solid rgba(203,198,245,.22); border-radius: 25px; color: var(--ink); background: rgba(24,23,40,.94); box-shadow: 0 35px 110px rgba(0,0,0,.6); backdrop-filter: blur(25px); } .moment-dialog::backdrop { background: rgba(7,7,14,.72); backdrop-filter: blur(8px); } .moment-dialog[open] { animation: dialog-arrive .35s cubic-bezier(.16,1,.3,1) both; } .moment-dialog > article { max-height: 88vh; padding: clamp(28px,5vw,48px); overflow: auto; }.moment-dialog header { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.moment-dialog header span { color: var(--violet-deep); }.moment-dialog p { margin: 22px 0 0; white-space: pre-wrap; font: 500 clamp(17px,3vw,22px)/1.9 var(--cute); }.moment-dialog img { width: 100%; max-height: 60vh; margin-top: 25px; border-radius: 17px; object-fit: contain; background: rgba(0,0,0,.18); } .moment-dialog-close { position: absolute; right: -12px; top: -12px; z-index: 2; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: white; background: #5d526f; box-shadow: 0 8px 22px rgba(0,0,0,.3); cursor: pointer; font-size: 22px; } .site-runtime { width: auto; margin: 0; padding: 25px 29px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; border-radius: 25px; font-family: var(--cute); } .runtime-orbit { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(170,166,230,.25); border-radius: 50%; color: var(--peach); background: radial-gradient(circle, rgba(170,166,230,.18), transparent 68%); box-shadow: 0 0 28px rgba(170,166,230,.15); font-size: 25px; animation: runtime-float 2.6s ease-in-out infinite alternate; } .site-runtime h2 { margin: 0; font-size: 18px; }.site-runtime strong { color: var(--violet-deep); font-size: clamp(15px, 3vw, 22px); letter-spacing: .04em; }.site-runtime > small { max-width: 150px; color: var(--muted); text-align: right; } .support-page { max-width: 620px; margin-top: 170px; margin-bottom: 110px; padding: 55px; border-radius: 38px; text-align: center; } .support-heart { width: 80px; height: 80px; margin: -95px auto 30px; display: grid; place-items: center; border: 8px solid var(--paper); border-radius: 50%; color: white; background: linear-gradient(145deg, var(--rose), var(--violet)); font-size: 38px; } .support-page h1 { margin: 8px 0 15px; font: 600 38px var(--serif); } .support-page > p:not(.eyebrow) { color: var(--muted); } .qr-image { width: 230px; margin: 25px auto; padding: 10px; border-radius: 22px; background: white; } .support-fab { position: fixed; right: 24px; bottom: 24px; z-index: 50; padding: 11px 17px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: white; background: linear-gradient(135deg, var(--rose), var(--violet)); box-shadow: 0 12px 30px rgba(84,78,132,.3); font-size: 12px; } .empty-state, .not-found { padding: 60px 30px; border-radius: var(--radius); text-align: center; } .empty-state > span { color: var(--violet); font-size: 36px; } .not-found { width: min(620px, calc(100% - 40px)); margin: 170px auto 100px; } .not-found > div { color: var(--violet); font: 700 100px/1 var(--serif); opacity: .18; } .not-found h1 { font: 600 36px var(--serif); } .site-footer { position: relative; z-index: 2; padding: 0 20px 45px; color: var(--muted); text-align: center; font-size: 11px; } .site-footer p { margin: 5px; } .site-footer a:hover { color: var(--violet); } .footer-links { display: flex; justify-content: center; gap: 13px; }.footer-links a { color: var(--violet-deep); } .footer-line { display: flex; align-items: center; gap: 14px; max-width: 380px; margin: 0 auto 22px; color: var(--rose); } .footer-line::before, .footer-line::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); } .footer-line::after { transform: rotate(180deg); } .ambient { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; } .ambient i { position: absolute; top: -20px; width: 10px; height: 7px; border-radius: 80% 10% 80% 20%; background: rgba(227,171,190,.65); filter: blur(.2px); animation: petal 13s linear infinite; } .ambient i:nth-child(1) { left: 8%; animation-delay: -3s; }.ambient i:nth-child(2) { left: 26%; animation-delay: -8s; animation-duration: 16s; }.ambient i:nth-child(3) { left: 44%; animation-delay: -1s; }.ambient i:nth-child(4) { left: 63%; animation-delay: -10s; animation-duration: 18s; }.ambient i:nth-child(5) { left: 78%; animation-delay: -5s; }.ambient i:nth-child(6) { left: 93%; animation-delay: -12s; animation-duration: 20s; } .scene-motion { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; will-change: translate; } .scene-motion::before { content: ""; position: absolute; left: -30%; top: 48%; width: 160%; height: 25%; background: linear-gradient(90deg, transparent, rgba(153,147,222,.045), rgba(240,184,172,.07), transparent); filter: blur(24px); animation: mist-drift 18s ease-in-out infinite alternate; } .scene-motion i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffd8a6; box-shadow: 0 0 8px 2px rgba(255,190,120,.72), 0 0 22px 7px rgba(202,156,214,.18); animation: scene-light 7s ease-in-out infinite; } .scene-motion i:nth-child(1) { left: 9%; top: 29%; animation-delay: -2s; }.scene-motion i:nth-child(2) { left: 24%; top: 62%; animation-delay: -5s; animation-duration: 9s; }.scene-motion i:nth-child(3) { left: 39%; top: 18%; animation-delay: -1s; }.scene-motion i:nth-child(4) { left: 53%; top: 54%; animation-delay: -6s; animation-duration: 10s; }.scene-motion i:nth-child(5) { left: 67%; top: 34%; animation-delay: -3s; }.scene-motion i:nth-child(6) { left: 77%; top: 70%; animation-delay: -7s; animation-duration: 11s; }.scene-motion i:nth-child(7) { left: 88%; top: 24%; animation-delay: -4s; }.scene-motion i:nth-child(8) { left: 94%; top: 58%; animation-delay: -8s; animation-duration: 12s; } .page-loader { position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; gap: 14px; color: var(--muted); text-align: center; background: rgba(var(--paper-rgb), .94); backdrop-filter: blur(15px); transition: opacity .5s, visibility .5s; } .page-loader.hidden { opacity: 0; visibility: hidden; } .page-loader.leaving { opacity: 1; visibility: visible; } .page-loader p { font: 12px var(--serif); letter-spacing: .14em; } .loader-orbit { width: 64px; height: 64px; margin: auto; position: relative; display: grid; place-items: center; border: 1px solid rgba(119,117,173,.2); border-radius: 50%; } .loader-orbit::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border-top: 2px solid var(--rose); animation: spin 1.2s linear infinite; } .loader-orbit span { color: var(--violet); font: 24px var(--serif); } .scroll-progress { position: fixed; z-index: 120; left: 0; top: 0; width: 100%; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--rose), var(--violet), #8ec5d2); box-shadow: 0 0 15px rgba(170,166,230,.55); transform: scaleX(0); transform-origin: left; } .hero-copy, .moon-card { will-change: translate; } .js .reveal { --reveal-x: 0px; --reveal-y: 42px; --reveal-scale: .96; opacity: 0; filter: blur(9px); transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale)); transition: opacity .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay, var(--delay, 0ms)), transform .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay, var(--delay, 0ms)), filter .75s ease var(--reveal-delay, var(--delay, 0ms)); will-change: opacity, transform, filter; } .js .reveal-left { --reveal-x: -58px; --reveal-y: 14px; --reveal-scale: .98; } .js .reveal-right { --reveal-x: 58px; --reveal-y: 14px; --reveal-scale: .98; } .js .reveal-zoom { --reveal-y: 18px; --reveal-scale: .86; } .js .reveal.visible { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); will-change: auto; } .install-page { min-height: 100vh; padding: 50px 20px; display: grid; place-items: center; background: linear-gradient(rgba(34,31,59,.38), rgba(67,52,81,.25)), url('../images/hero-anime.png') center / cover fixed; } .install-shell { width: min(680px, 100%); padding: clamp(30px, 6vw, 55px); border-radius: 34px; } .install-shell > .brand-mark { margin-bottom: 20px; } .install-shell h1 { margin: 5px 0 10px; font: 600 clamp(31px, 5vw, 46px) var(--serif); } .install-form { margin-top: 28px; } .install-checks { margin: 18px 0 4px; display: flex; flex-wrap: wrap; gap: 7px; } .install-checks span { padding: 5px 9px; border-radius: 99px; font-size: 9px; font-weight: 700; } .install-checks .ready { color: #47735f; background: rgba(105,167,137,.14); } .install-checks .missing { color: #9b4b5c; background: rgba(195,93,113,.14); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; } .form-grid label, .stack-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; } .form-grid input, .form-grid textarea, .form-grid select, .stack-form input { width: 100%; min-height: 45px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; outline: 0; color: var(--ink); background: rgba(255,255,255,.055); } .form-grid input:focus, .form-grid textarea:focus, .stack-form input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(119,117,173,.1); } .form-grid textarea { resize: vertical; } .span-2 { grid-column: span 2; } .install-form .button { margin-top: 22px; } .notice { margin: 15px 0; padding: 12px 15px; border-radius: 13px; font-size: 12px; } .notice.error { color: #8c3f4e; background: rgba(227,139,157,.18); border: 1px solid rgba(170,72,92,.17); } .notice.success { color: #3e765f; background: rgba(116,183,146,.16); } .notice.info { color: var(--violet-deep); background: rgba(119,117,173,.1); border: 1px solid var(--line); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(137,167,127,0); } } @keyframes petal { 0% { transform: translate3d(0,-20px,0) rotate(0); opacity: 0; } 10% { opacity: .7; } 100% { transform: translate3d(120px,105vh,0) rotate(720deg); opacity: 0; } } @keyframes backdrop-arrive { from { opacity: 0; filter: blur(10px) saturate(.72); transform: scale(1.08); } to { opacity: 1; filter: blur(0) saturate(1); transform: scale(1.025); } } @keyframes backdrop-pan { from { background-position: 48% 50%; } to { background-position: 52% 47%; } } @keyframes scene-light { 0%, 100% { opacity: .18; transform: translate3d(0,8px,0) scale(.7); } 35% { opacity: .9; } 60% { opacity: .42; transform: translate3d(16px,-16px,0) scale(1.35); } } @keyframes mist-drift { from { opacity: .28; transform: translate3d(-3%,0,0); } to { opacity: .7; transform: translate3d(3%,-8px,0); } } @keyframes music-pulse { from { transform: scale(1); } to { transform: scale(1.055) rotate(2deg); } } @keyframes lyric-line-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes runtime-float { from { transform: translateY(2px) rotate(-5deg); } to { transform: translateY(-4px) rotate(5deg); } } @keyframes card-hover-breathe { from { scale: 1.012; } to { scale: 1.027; } } @keyframes dialog-arrive { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } } @media (hover: hover) and (pointer: fine) { :is(.bento-card, .post-card, .archive-item, .gallery-item, .download-card, .moment-card, .about-notes > div, .moment-teaser, .site-runtime, .support-page):hover { z-index: 7; border-color: rgba(203,198,245,.3); box-shadow: 0 30px 75px rgba(0,0,0,.34), 0 0 34px rgba(119,117,173,.11), inset 0 1px rgba(255,255,255,.1); animation: card-hover-breathe 1.15s ease-in-out infinite alternate; } .moment-card:hover { rotate: 0deg; } } @media (max-width: 900px) { .hero.bento-hero { min-height: 0; height: auto; max-height: none; padding: 105px 14px 58px; align-items: initial; } .home-dashboard { display: flex; flex-direction: column; gap: 14px; } .bento-card { width: 100%; min-height: 180px; } .welcome-card.hero-copy { min-height: 430px; } .music-card { min-height: 160px; } .clock-card, .moment-card-home { min-height: 185px; } .lyrics-card { min-height: 165px; } .quick-card { min-height: 195px; } .main-nav { position: absolute; top: 78px; left: 0; right: 0; padding: 13px; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 20px; background: var(--glass-strong); box-shadow: var(--shadow); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .25s; } .main-nav.open { opacity: 1; visibility: visible; transform: none; } .main-nav a { text-align: center; } .nav-toggle { display: block; } .hero { height: 850px; min-height: 760px; align-items: flex-end; padding-bottom: 120px; background-position: 65% center; } .hero-copy { width: min(580px, 100%); padding: 35px; } .moon-card { display: none; } .post-grid { grid-template-columns: repeat(2, 1fr); } .about-layout { grid-template-columns: 1fr; } .about-avatar { min-height: 460px; } .gallery-grid { columns: 2; } } @media (max-width: 620px) { .hero.bento-hero { height: auto; min-height: 0; padding: 92px 14px 52px; } .welcome-card.hero-copy { width: 100%; min-height: 410px; padding: 30px 25px; } .welcome-card h1 { font-size: clamp(38px, 13cqi, 54px); } .lyrics-card { grid-template-columns: 1fr; gap: 10px; } .lyrics-card > div { border-right: 0; border-bottom: 1px solid var(--line); } .music-card { grid-template-columns: 58px 1fr; padding: 17px; } .music-toggle { width: 54px; height: 54px; border-radius: 18px; } .site-header { top: 10px; width: calc(100% - 20px); height: 62px; border-radius: 18px; } .brand-mark { width: 38px; height: 38px; border-radius: 13px; font-size: 21px; } .brand b { font-size: 15px; }.brand small { display: none; } .hero { height: 790px; padding: 100px 15px 90px; background-position: 70% center; } .hero-copy { padding: 28px 25px; border-radius: 27px; } .hero-copy h1 { font-size: 40px; } .hero-copy > p:not(.eyebrow) { font-size: 14px; } .content-section { width: calc(100% - 28px); padding-top: 25px; } .post-grid { grid-template-columns: 1fr; } .post-cover { height: 230px; } .section-heading h2 { font-size: 29px; } .moment-teaser { grid-template-columns: auto 1fr; width: calc(100% - 28px); padding: 20px; } .moment-teaser > a { grid-column: 2; } .page-intro { width: calc(100% - 28px); padding-top: 125px; } .timeline { width: calc(100% - 28px); } .timeline-year { display: block; } .year-badge { position: static; text-align: left; margin: 0 0 15px 32px; } .year-stream { padding-left: 25px; } .month-group::before { left: -30px; } .archive-item { grid-template-columns: 38px 1fr auto; gap: 9px; } .archive-item span small { display: none; } .article-shell { width: calc(100% - 28px); padding-top: 108px; } .article-hero h1 { font-size: 34px; } .article-meta { flex-wrap: wrap; } .article-cover { border-radius: 24px; } .article-content { padding: 27px 23px; border-radius: 24px; font-size: 15px; } .about-layout { width: calc(100% - 28px); padding-top: 120px; } .about-profile { padding: 13px; border-radius: 28px; } .about-avatar { min-height: 360px; border-radius: 21px; } .about-copy { padding: 30px 24px; border-radius: 28px; } .about-details { grid-template-columns: 1fr; } .gallery-grid { width: calc(100% - 28px); columns: 1; } .gallery-item figcaption { opacity: 1; } .download-grid { width: calc(100% - 28px); grid-template-columns: 1fr; } .download-card { min-height: 0; padding: 20px; gap: 16px; } .download-card-head { grid-template-columns: auto minmax(0,1fr); gap: 12px; }.file-icon { width: 52px; height: 52px; border-radius: 17px; }.download-price { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; text-align: left; }.download-price strong { margin: 0; } body.page-home::before { background-position: center; animation: backdrop-arrive 1.4s cubic-bezier(.16,1,.3,1) both; } .moments-stream { width: calc(100% - 28px); padding: 5px 6px 90px; grid-template-columns: 1fr; gap: 34px; } .moment-card { min-height: 0; padding: 34px 23px 25px; translate: 0 0; } .moment-inner header { align-items: start; flex-direction: column; } .site-runtime { padding: 22px; grid-template-columns: auto 1fr; }.site-runtime > small { grid-column: 2; max-width: none; text-align: left; } .support-page { width: calc(100% - 28px); padding: 40px 25px; } .form-grid { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } } /* ---- 3.7 赞助小筑 ---- */ .sponsor-hero{width:min(1040px,calc(100% - 36px));margin:0 auto 56px;padding:clamp(32px,6vw,68px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:34px;align-items:center;border-radius:36px}.sponsor-hero-copy h1{margin:8px 0 18px;font:600 clamp(43px,7vw,76px) var(--serif);letter-spacing:-.04em}.sponsor-hero-copy>p:last-child{max-width:610px;color:#aaa4ba;line-height:1.9}.sponsor-stats{grid-column:1;display:flex;gap:10px}.sponsor-stats span{min-width:130px;padding:14px 18px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.025)}.sponsor-stats b{display:block;color:#eeeaff;font:600 21px var(--serif)}.sponsor-stats small{color:#8f899f;font-size:9px}.sponsor-order-form{grid-column:2;grid-row:1/3;padding:25px;display:grid;gap:13px;border:1px solid rgba(202,190,245,.18);border-radius:25px;background:linear-gradient(150deg,rgba(50,45,76,.58),rgba(25,23,42,.68));box-shadow:0 24px 70px rgba(5,4,13,.3)}.sponsor-order-form label,.sponsor-profile-form label{display:grid;gap:7px;color:#9993a8;font-size:10px}.sponsor-order-form input,.sponsor-profile-form input,.sponsor-profile-form textarea{width:100%;min-height:49px;padding:12px 14px;border:1px solid rgba(177,168,218,.2);border-radius:14px;outline:0;color:var(--ink);background:rgba(255,255,255,.045);transition:border-color .2s,box-shadow .2s}.sponsor-order-form input:focus,.sponsor-profile-form input:focus,.sponsor-profile-form textarea:focus{border-color:rgba(183,171,236,.65);box-shadow:0 0 0 4px rgba(119,117,173,.11)}.sponsor-money{display:grid;grid-template-columns:45px 1fr;align-items:center;border:1px solid rgba(177,168,218,.2);border-radius:14px;background:rgba(255,255,255,.045)}.sponsor-money i{color:#c6b9f4;font:600 20px var(--serif);font-style:normal;text-align:center}.sponsor-money input{border:0;background:none}.sponsor-order-form .button{min-height:51px;justify-content:center}.sponsor-order-form>small{color:#77718a;font-size:8px;line-height:1.6;text-align:center}.sponsor-wall{width:min(1120px,calc(100% - 36px));margin:0 auto 110px}.sponsor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.sponsor-card{min-height:146px;padding:20px;display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:15px;align-items:center;color:var(--ink);border-radius:23px;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}.sponsor-card:hover{transform:translateY(-6px) scale(1.012);border-color:rgba(195,182,244,.32);box-shadow:0 22px 50px rgba(10,8,24,.36)}.sponsor-avatar{position:relative;width:54px;height:54px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(213,193,245,.28);border-radius:18px;background:linear-gradient(145deg,rgba(226,174,205,.4),rgba(137,128,204,.48))}.sponsor-avatar img{position:absolute;z-index:2;width:100%;height:100%;object-fit:cover}.sponsor-avatar i{font:600 20px var(--serif);font-style:normal}.sponsor-card-copy{min-width:0;display:grid;gap:5px}.sponsor-card-copy b{overflow:hidden;font:600 16px var(--serif);text-overflow:ellipsis;white-space:nowrap}.sponsor-card-copy small{min-height:34px;color:#9993a8;font-size:10px;line-height:1.65}.sponsor-card-copy time{color:#6f6981;font-size:8px}.sponsor-card>strong{align-self:start;color:#c7b9ef;font:600 15px var(--serif)} .sponsor-checkout{width:min(720px,calc(100% - 32px));margin:140px auto 100px;padding:clamp(28px,6vw,54px);border-radius:34px;text-align:center}.sponsor-back{display:block;margin-bottom:28px;color:#8e879e;font-size:10px;text-align:left}.sponsor-checkout h1{margin:8px 0 15px;font:600 clamp(34px,6vw,52px) var(--serif)}.sponsor-checkout>p{color:#a29caf;line-height:1.8}.sponsor-order-summary{margin:26px 0;display:grid;justify-items:center;gap:10px}.sponsor-order-summary strong{color:#c9baf4;font:600 42px var(--serif)}.sponsor-order-summary code{max-width:100%;padding:7px 11px;border-radius:9px;color:#8d879f;background:rgba(255,255,255,.035);font-size:10px;word-break:break-all}.sponsor-checkout .pay-qr-grid{margin:22px auto}.sponsor-checkout>small{display:block;color:#77718a;font-size:9px;line-height:1.7}.sponsor-review-state{margin:20px 0;padding:14px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)}.sponsor-review-state b,.sponsor-review-state small{display:block}.sponsor-review-state b{color:#c7bce7}.sponsor-review-state small{margin-top:4px;color:#7f788f;font-size:9px}.sponsor-review-state.approved{border-color:rgba(137,167,127,.3)}.sponsor-profile-form{margin-top:25px;display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}.sponsor-profile-form label:nth-of-type(3),.sponsor-profile-form label:nth-of-type(4),.sponsor-profile-form .button{grid-column:1/-1}.sponsor-profile-form textarea{resize:vertical}.sponsor-profile-form .button{min-height:51px;justify-content:center} .sponsor-admin-list{display:grid;gap:10px}.sponsor-admin-item{padding:15px;display:grid;grid-template-columns:54px minmax(220px,1fr) auto auto;gap:15px;align-items:center;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}.sponsor-admin-item>div:nth-child(2){min-width:0;display:grid;gap:4px}.sponsor-admin-item small,.sponsor-admin-item p{margin:0;color:#898398;font-size:10px}.sponsor-admin-item a{overflow:hidden;color:#aaa0d8;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.sponsor-admin-amount{text-align:right}.sponsor-admin-amount strong{display:block;margin-bottom:5px;color:#c7b9ef}.sponsor-admin-actions{display:flex;gap:6px;align-items:center}.sponsor-admin-actions form{display:flex;gap:5px}.sponsor-admin-actions input[type=number]{width:58px;padding:7px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:rgba(255,255,255,.04)}.sponsor-admin-actions button{white-space:nowrap} @media(max-width:900px){.sponsor-hero{grid-template-columns:1fr}.sponsor-order-form{grid-column:1;grid-row:auto}.sponsor-stats{grid-column:1}.sponsor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sponsor-admin-item{grid-template-columns:54px minmax(0,1fr) auto}.sponsor-admin-actions{grid-column:2/-1;justify-content:flex-end}} @media(max-width:620px){.sponsor-hero{width:calc(100% - 28px);padding:27px 20px;border-radius:27px}.sponsor-stats{display:grid;grid-template-columns:1fr 1fr}.sponsor-stats span{min-width:0}.sponsor-order-form{padding:18px}.sponsor-grid{grid-template-columns:1fr}.sponsor-card{min-height:128px}.sponsor-profile-form{grid-template-columns:1fr}.sponsor-profile-form label,.sponsor-profile-form label:nth-of-type(3),.sponsor-profile-form label:nth-of-type(4),.sponsor-profile-form .button{grid-column:1}.sponsor-checkout{margin-top:115px;padding:30px 19px}.sponsor-admin-item{grid-template-columns:46px minmax(0,1fr)}.sponsor-admin-item .sponsor-avatar{width:46px;height:46px}.sponsor-admin-amount{grid-column:1;text-align:left}.sponsor-admin-actions{grid-column:2;align-items:flex-end;flex-direction:column}.sponsor-admin-actions form{width:100%;justify-content:flex-end}} /* ---- 3.7.1 赞助页：夜色橱窗 ---- */ .page-sponsors .site-main{padding-top:138px}.sponsor-scene{position:relative;width:min(1120px,calc(100% - 40px));min-height:610px;margin:0 auto 110px;display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:clamp(45px,7vw,92px);align-items:center}.sponsor-scene::before{content:"";position:absolute;z-index:-1;inset:5% 25% 0 -10%;border-radius:50%;background:radial-gradient(circle,rgba(105,91,164,.17),transparent 68%);filter:blur(18px);pointer-events:none}.sponsor-intro{position:relative;padding:58px 0 30px}.sponsor-intro>.eyebrow{color:#b7a8e9;letter-spacing:.22em}.sponsor-intro h1{max-width:640px;margin:15px 0 24px;color:#f3efff;font:600 clamp(52px,7vw,86px)/1.05 var(--serif);letter-spacing:-.055em;text-shadow:0 12px 45px rgba(20,12,45,.4)}.sponsor-lead{max-width:565px;margin:0;color:#afa8bc;font-size:13px;line-height:2}.sponsor-moon{position:absolute;top:0;right:6%;width:118px;height:118px;opacity:.88;pointer-events:none}.sponsor-moon>i{position:absolute;inset:19px;border-radius:50%;background:#ded4ff;box-shadow:-19px 13px 0 0 #2b2944,0 0 34px rgba(205,190,255,.3)}.sponsor-moon span{position:absolute;color:#d7ccff;animation:sponsor-twinkle 2.8s ease-in-out infinite}.sponsor-moon span:nth-of-type(1){top:7px;right:0;font-size:15px}.sponsor-moon span:nth-of-type(2){right:7px;bottom:11px;animation-delay:.8s}.sponsor-moon span:nth-of-type(3){left:0;bottom:24px;font-size:25px;animation-delay:1.4s}.sponsor-ritual{margin-top:36px;display:flex;align-items:center;gap:14px;color:#b1a9c1;font-size:10px}.sponsor-ritual span{display:flex;align-items:center;gap:8px;white-space:nowrap}.sponsor-ritual i{width:25px;height:25px;display:grid;place-items:center;border:1px solid rgba(191,177,240,.24);border-radius:50%;color:#c8bbef;font-size:7px;font-style:normal;background:rgba(109,95,157,.1)}.sponsor-ritual b{color:#5f5970;font-weight:400;letter-spacing:.2em}.sponsor-stats{margin-top:28px;display:flex;gap:28px}.sponsor-stats span{min-width:0;padding:0 28px 0 0;border:0;border-right:1px solid rgba(185,172,225,.16);border-radius:0;background:none}.sponsor-stats span:last-child{border:0}.sponsor-stats b{color:#ebe5ff;font:600 24px var(--serif)}.sponsor-stats small{margin-top:2px;display:block;color:#777184;font-size:8px;letter-spacing:.08em} .sponsor-order-form{position:relative;grid-column:2;grid-row:auto;padding:30px;display:grid;gap:17px;overflow:hidden;border-color:rgba(205,192,246,.24);border-radius:30px;background:linear-gradient(155deg,rgba(48,42,74,.86),rgba(24,22,40,.9));box-shadow:0 38px 90px rgba(5,4,16,.46),inset 0 1px rgba(255,255,255,.1);transform:rotate(.45deg)}.sponsor-order-form::before{content:"";position:absolute;inset:-80px -40px auto auto;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(198,169,226,.2),transparent 68%);pointer-events:none}.sponsor-order-form::after{content:"✦ · ✧ · ✦";position:absolute;right:26px;bottom:70px;color:rgba(217,203,255,.08);font-size:34px;letter-spacing:.16em;transform:rotate(-14deg);pointer-events:none}.sponsor-order-form header{position:relative;display:grid;grid-template-columns:48px 1fr auto;gap:13px;align-items:center;padding-bottom:20px;border-bottom:1px dashed rgba(199,185,237,.2)}.sponsor-ticket-mark{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(222,206,255,.3);border-radius:16px;color:#f4edff;background:linear-gradient(145deg,rgba(202,155,193,.4),rgba(128,115,192,.5));font:600 19px var(--serif);box-shadow:0 10px 24px rgba(8,6,20,.25)}.sponsor-order-form header .eyebrow{margin:0;color:#8f86a8;font-size:7px}.sponsor-order-form header h2{margin:3px 0 0;font:600 21px var(--serif)}.sponsor-order-form header>i{color:#cdbfee;font-style:normal}.sponsor-order-form label{position:relative;z-index:1;gap:8px}.sponsor-order-form label>span{color:#a19aad;font-size:9px;letter-spacing:.05em}.sponsor-order-form input{min-height:52px;border-color:rgba(193,179,232,.18);border-radius:15px;background:rgba(10,9,22,.2)}.sponsor-money{grid-template-columns:50px 1fr;border-color:rgba(198,184,238,.24);border-radius:16px;background:rgba(10,9,22,.26)}.sponsor-money>i{color:#c7b7ed;font-size:23px}.sponsor-money input{min-height:58px;color:#f0ebff;font:600 27px var(--serif)}.sponsor-amount-chips{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.sponsor-amount-chips button{min-height:36px;border:1px solid rgba(188,174,225,.17);border-radius:11px;color:#918a9f;background:rgba(255,255,255,.025);cursor:pointer;transition:.22s ease}.sponsor-amount-chips button:hover,.sponsor-amount-chips button.active{border-color:rgba(214,196,255,.48);color:#f0eaff;background:linear-gradient(135deg,rgba(185,143,184,.3),rgba(112,102,176,.36));box-shadow:0 8px 20px rgba(8,6,20,.18);transform:translateY(-2px)}.sponsor-submit-button{position:relative;z-index:1;min-height:55px;padding:0 7px 0 20px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(225,207,255,.18);border-radius:17px;color:#fff;background:linear-gradient(110deg,#9d789f,#716bab);box-shadow:0 15px 34px rgba(60,49,100,.3);cursor:pointer;font-weight:700;transition:transform .25s,filter .25s}.sponsor-submit-button i{width:41px;height:41px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.14);font-size:18px;font-style:normal}.sponsor-submit-button:hover{filter:brightness(1.1);transform:translateY(-2px)}.sponsor-order-form footer{position:relative;z-index:1;display:flex;justify-content:space-between;color:#716b7e;font-size:8px}.sponsor-order-form footer span{display:flex;align-items:center;gap:6px}.sponsor-order-form footer i{width:6px;height:6px;border-radius:50%;background:#92b78c;box-shadow:0 0 9px #92b78c}.sponsor-order-form footer small{font-size:8px} .sponsor-wall{width:min(1120px,calc(100% - 40px));margin-bottom:120px}.sponsor-wall-heading{margin-bottom:32px;display:grid;grid-template-columns:42px auto 1fr;gap:18px;align-items:center}.sponsor-title-star{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(205,189,245,.23);border-radius:15px;color:#c7b9ef;background:rgba(109,97,163,.12)}.sponsor-wall-heading .eyebrow{margin:0}.sponsor-wall-heading h2{margin:4px 0 2px;font:600 clamp(30px,4vw,43px) var(--serif)}.sponsor-wall-heading p:last-child{margin:0;color:#817b8d;font-size:10px}.sponsor-wall-rule{height:1px;margin-left:14px;background:linear-gradient(90deg,rgba(190,175,229,.24),transparent)}.sponsor-grid{grid-template-columns:repeat(auto-fit,minmax(315px,1fr));gap:14px}.sponsor-card{position:relative;min-height:158px;padding:23px;overflow:hidden;grid-template-columns:58px minmax(0,1fr) auto;gap:16px;border:1px solid rgba(188,175,225,.15);border-radius:24px;background:linear-gradient(145deg,rgba(35,31,55,.68),rgba(18,17,31,.76));backdrop-filter:blur(18px);box-shadow:0 16px 46px rgba(4,3,12,.2)}.sponsor-card::after{content:"";position:absolute;inset:auto -40px -70px auto;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(122,107,181,.12),transparent 70%);transition:transform .5s}.sponsor-card:hover{transform:translateY(-5px);border-color:rgba(205,189,245,.3);box-shadow:0 24px 55px rgba(5,4,15,.34)}.sponsor-card:hover::after{transform:scale(1.35)}.sponsor-card.starlight{border-color:rgba(194,169,219,.25);background:linear-gradient(145deg,rgba(54,40,66,.72),rgba(24,21,43,.8))}.sponsor-card.aurora{border-color:rgba(220,184,212,.32);background:linear-gradient(135deg,rgba(76,48,76,.76),rgba(37,31,66,.82))}.sponsor-card-star{position:absolute;top:17px;right:18px;color:rgba(212,195,246,.13);font-size:20px;font-style:normal}.sponsor-avatar{width:58px;height:58px;border-radius:50%;box-shadow:0 10px 28px rgba(5,4,15,.28),inset 0 1px rgba(255,255,255,.18)}.sponsor-card-copy>span{display:flex;align-items:center;gap:7px}.sponsor-card-copy b{font-size:17px}.sponsor-card-copy em{color:#9d92bc;font-size:10px;font-style:normal}.sponsor-card-copy small{min-height:42px;color:#a19aab;font-size:10px;line-height:1.75}.sponsor-card-copy time{color:#666073;letter-spacing:.04em}.sponsor-card>strong{position:relative;z-index:1;align-self:end;color:#c8b9ed;font-size:16px;text-align:right}.sponsor-card>strong small{display:block;margin-bottom:3px;color:#6f697a;font:400 7px sans-serif;letter-spacing:.12em}.sponsor-empty{position:relative;min-height:310px;padding:55px 20px;display:grid;place-items:center;align-content:center;overflow:hidden;border:1px dashed rgba(191,177,230,.2);border-radius:30px;text-align:center;background:rgba(20,18,34,.46);backdrop-filter:blur(15px)}.sponsor-empty>span{position:relative;z-index:1;width:62px;height:62px;display:grid;place-items:center;border:1px solid rgba(205,188,246,.25);border-radius:50%;color:#d0c1f2;background:rgba(116,101,172,.13);font-size:22px;box-shadow:0 0 50px rgba(116,101,172,.15)}.sponsor-empty>i{position:absolute;width:280px;height:280px;border:1px solid rgba(188,174,225,.08);border-radius:50%;box-shadow:0 0 0 55px rgba(188,174,225,.025),0 0 0 110px rgba(188,174,225,.015)}.sponsor-empty h3{position:relative;margin:18px 0 7px;font:600 23px var(--serif)}.sponsor-empty p{position:relative;margin:0;color:#85808f;font-size:10px}.sponsor-empty a{position:relative;margin-top:18px;color:#b8ace0;font-size:10px} .sponsor-checkout{position:relative;overflow:hidden;border-color:rgba(205,192,246,.24);background:linear-gradient(155deg,rgba(41,36,65,.86),rgba(19,18,33,.9));box-shadow:0 35px 90px rgba(4,3,14,.42)}.sponsor-checkout::before{content:"";position:absolute;top:-120px;right:-90px;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,rgba(176,142,196,.18),transparent 68%);pointer-events:none}.sponsor-order-summary strong{text-shadow:0 0 32px rgba(186,167,232,.25)} @keyframes sponsor-twinkle{0%,100%{opacity:.35;transform:scale(.75) rotate(0)}50%{opacity:1;transform:scale(1.18) rotate(20deg)}} @media(max-width:900px){.page-sponsors .site-main{padding-top:120px}.sponsor-scene{grid-template-columns:1fr;gap:30px}.sponsor-intro{padding:45px 12px 0}.sponsor-intro h1{max-width:700px}.sponsor-order-form{grid-column:1;width:min(520px,100%);margin:auto;transform:none}.sponsor-wall-heading{grid-template-columns:42px auto}.sponsor-wall-rule{display:none}} @media(max-width:620px){.page-sponsors .site-main{padding-top:102px}.sponsor-scene{width:calc(100% - 28px);margin-bottom:80px}.sponsor-intro{padding:38px 4px 0}.sponsor-intro h1{margin-top:12px;font-size:49px}.sponsor-moon{top:-5px;right:0;width:90px;height:90px;opacity:.65}.sponsor-moon>i{inset:17px}.sponsor-lead{padding-right:12px;font-size:11px}.sponsor-ritual{gap:7px;overflow:hidden}.sponsor-ritual span{gap:5px;font-size:8px}.sponsor-ritual i{width:22px;height:22px}.sponsor-ritual b{font-size:8px}.sponsor-stats{gap:18px}.sponsor-order-form{padding:22px 18px;border-radius:25px}.sponsor-order-form header{grid-template-columns:43px 1fr auto}.sponsor-ticket-mark{width:43px;height:43px}.sponsor-amount-chips{gap:5px}.sponsor-order-form footer{align-items:flex-start;flex-direction:column;gap:4px}.sponsor-wall{width:calc(100% - 28px)}.sponsor-wall-heading{grid-template-columns:36px 1fr;gap:12px}.sponsor-title-star{width:36px;height:36px;border-radius:12px}.sponsor-grid{grid-template-columns:1fr}.sponsor-card{min-height:144px;padding:19px;grid-template-columns:50px minmax(0,1fr)}.sponsor-card .sponsor-avatar{width:50px;height:50px}.sponsor-card>strong{grid-column:2;text-align:left}.sponsor-card-copy small{min-height:0}.sponsor-empty{min-height:270px}.sponsor-checkout{border-radius:26px}} .pay-exact{margin:8px auto 14px;padding:10px 13px;border:1px solid rgba(194,173,255,.22);border-radius:13px;color:#d9cff7!important;background:rgba(126,102,190,.1);font-size:11px;line-height:1.7}.order-receipt h2{color:#f4efff;text-shadow:0 0 28px rgba(178,147,255,.3)} .pay-qr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:16px 0}.pay-qr-card{margin:0;padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}.pay-qr-card span{display:block;margin-bottom:8px;color:#ded7f4;font-size:11px}.pay-qr-card .qr-image{width:100%;max-height:220px;margin:0 auto;background:#fff}.pay-qr-card.wechat{box-shadow:inset 0 0 0 1px rgba(89,194,111,.06)}.pay-qr-card.alipay{box-shadow:inset 0 0 0 1px rgba(66,153,235,.07)} .moment-filters { width: min(900px,calc(100% - 32px)); margin: -25px auto 38px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }.moment-filters a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(17,17,28,.42); backdrop-filter: blur(14px); font-size: 10px; }.moment-filters a.active { color: white; border-color: rgba(203,198,245,.38); background: rgba(119,117,173,.35); }.moment-filters small { color: var(--rose); } .moment-photo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.moment-photo-grid.count-1 { grid-template-columns: 1fr; }.moment-photo-grid.count-2 { grid-template-columns: 1fr 1fr; }.moment-photo-grid img { width: 100%; height: 115px; margin: 0; object-fit: cover; border-radius: 11px; }.moment-photo-grid.count-1 img { height: 220px; } .moment-dialog-gallery { margin-top: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.moment-dialog-gallery img { width: 100%; max-height: 55vh; margin: 0; object-fit: contain; border-radius: 13px; }.moment-dialog-gallery img:only-child { grid-column: 1/-1; } .comment-item.comment-reply { margin-left: 42px; border-left: 2px solid rgba(170,166,230,.35); }.comment-reply-button { margin-top: 8px; padding: 0; border: 0; color: var(--violet); background: none; cursor: pointer; font-size: 10px; }.replying-note { margin: 0; padding: 7px 10px; border-radius: 9px; color: var(--muted); background: rgba(170,166,230,.08); font-size: 10px; }.replying-note button { border: 0; color: var(--rose); background: none; cursor: pointer; } .download-button { min-height: 50px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; }.download-button span { font-size: 12px; }.download-button small { opacity: .7; font-size: 8px; } .support-order-form { width: min(380px,100%); margin: 20px auto 0; display: grid; gap: 10px; }.support-order-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }.support-order-form input { padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.05); } /* self-hosted order and paid downloads */ .purchase-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}.purchase-inline input{min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:rgba(255,255,255,.05);outline:0}.purchase-inline .button{margin:0}.order-receipt{width:min(430px,100%);margin:24px auto 0;padding:24px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.035)}.order-receipt h2{margin:12px 0 5px;font:600 34px var(--serif)}.order-receipt code{display:block;margin-bottom:16px;color:var(--violet);word-break:break-all}.order-receipt .qr-image{width:min(230px,80%);max-height:270px;margin:14px auto;object-fit:contain;border-radius:18px}.status-pill{display:inline-flex;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px}.status-pill.paid{color:#afd1a5;border-color:rgba(137,167,127,.35);background:rgba(137,167,127,.08)}.status-pill.pending{color:#e9c0d0;border-color:rgba(225,166,184,.32);background:rgba(225,166,184,.07)}.proof-form{display:grid;gap:10px;margin-top:18px}.file-picker{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 10px;padding:12px;border:1px dashed rgba(170,166,230,.38);border-radius:14px;text-align:left;cursor:pointer}.file-picker>span{grid-column:1/-1;color:var(--muted);font-size:10px}.file-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.file-picker i{padding:8px 10px;border-radius:9px;color:#fff;background:rgba(119,117,173,.75);font-size:10px;font-style:normal;text-align:center}.file-picker b{align-self:center;overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.file-picker.has-file{border-color:rgba(137,167,127,.5)}.order-help{margin-top:18px!important;font-size:10px}.pricing-form{display:grid;grid-template-columns:auto 80px auto;gap:5px;align-items:center}.pricing-form input[type=number]{width:80px}.payment-table .row-actions form:first-child{display:grid;grid-template-columns:minmax(90px,1fr) auto;gap:5px}.payment-table .row-actions input{min-width:110px} .download-card .purchase-inline { grid-template-columns: minmax(0,1fr) auto; gap: 9px; }.download-card .purchase-inline input { min-height: 50px; padding: 11px 14px; border-color: rgba(170,166,230,.2); border-radius: 14px; background: rgba(255,255,255,.045); transition: border-color .2s, box-shadow .2s; }.download-card .purchase-inline input:focus { border-color: rgba(170,166,230,.58); box-shadow: 0 0 0 4px rgba(119,117,173,.1); }.download-card .purchase-inline .button { min-height: 50px; display: flex; align-items: center; gap: 10px; }.download-card .purchase-inline .button span { font-size: 11px; }.download-card .purchase-inline .button strong { font-size: 12px; } .article-attachments{display:grid;gap:14px;margin-top:22px}.article-attachments>header{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:0 4px}.article-attachments>header h2{margin:3px 0 0;font:600 clamp(24px,4vw,34px) var(--serif)}.article-attachments>header>a{color:var(--muted);font-size:11px}.article-attachment{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px}.attachment-file-icon{display:grid;place-content:center;width:78px;height:88px;border:1px solid rgba(204,184,255,.28);border-radius:22px;background:linear-gradient(145deg,rgba(226,174,205,.28),rgba(156,146,226,.3));text-align:center}.attachment-file-icon strong{font-size:15px}.attachment-file-icon small{margin-top:5px;color:var(--muted);font-size:7px;letter-spacing:.12em}.attachment-copy small,.attachment-price small{color:var(--muted);font-size:9px;letter-spacing:.08em}.attachment-copy h3{margin:6px 0;font:600 21px var(--serif)}.attachment-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.7}.attachment-price{text-align:right}.attachment-price strong{display:block;margin-top:5px;color:var(--violet);font-size:20px}.attachment-purchase{grid-column:2/-1;margin-top:0}.attachment-download{grid-column:2/-1;justify-self:end}.attachment-safety{margin:0 4px;color:var(--muted);font-size:9px;text-align:right} .cloud-delivery-card h2{font-size:26px}.cloud-delivery-card .delivery-code{padding:12px;border:1px dashed rgba(204,184,255,.3);border-radius:12px;color:var(--ink);font-size:18px;letter-spacing:.14em;background:rgba(255,255,255,.035);user-select:all}.cloud-delivery-card .button{width:100%;justify-content:center;margin-top:14px} @media(max-width:680px){.article-attachment{grid-template-columns:62px minmax(0,1fr);padding:17px}.attachment-file-icon{width:62px;height:72px;border-radius:18px}.attachment-price{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;text-align:left}.attachment-purchase,.attachment-download{grid-column:1/-1;width:100%}.article-attachments>header{align-items:flex-start;flex-direction:column}.attachment-safety{text-align:left}} .order-query-entry { width: min(900px,calc(100% - 32px)); margin: -20px auto 24px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(170,166,230,.15); border-radius: 15px; color: #8e879f; background: rgba(17,17,28,.38); backdrop-filter: blur(14px); font-size: 10px; }.order-query-entry strong { color: #c9c2e7; font-size: 10px; } .order-query-page { width: min(560px,calc(100% - 32px)); margin: 150px auto 100px; padding: clamp(30px,6vw,52px); border-radius: 32px; text-align: center; }.order-query-mark { width: 60px; height: 60px; margin: -84px auto 26px; display: grid; place-items: center; border: 7px solid #171627; border-radius: 20px; color: #fff; background: linear-gradient(145deg,#ba7896,#7771b7); box-shadow: 0 16px 40px rgba(0,0,0,.35); font-size: 27px; }.order-query-page h1 { margin: 8px 0 10px; font: 600 36px var(--serif); }.order-query-page > p { color: var(--muted); }.order-query-page > small { display: block; margin-top: 16px; color: #77718e; font-size: 9px; }.order-query-form { margin-top: 26px; display: grid; gap: 13px; text-align: left; }.order-query-form label { display: grid; gap: 7px; color: #9a94a9; font-size: 10px; }.order-query-form input { min-height: 50px; padding: 11px 14px; border: 1px solid rgba(170,166,230,.2); border-radius: 14px; outline: 0; color: var(--ink); background: rgba(255,255,255,.045); }.order-query-form input:focus { border-color: rgba(170,166,230,.58); box-shadow: 0 0 0 4px rgba(119,117,173,.1); }.order-query-form .button { min-height: 50px; margin-top: 4px; } .order-resend-form { width: min(430px,100%); margin: 14px auto 0; }.order-resend-form .button { width: 100%; }.order-number-label { display: block; margin: 14px 0 4px; color: #77718e; font-size: 8px; letter-spacing: .12em; }.order-help a { color: #b6ace0; }.order-help.failed{color:#e6aebb!important} .pay-steps{margin:16px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pay-steps span{padding:9px 5px;border:1px solid var(--line);border-radius:11px;color:var(--muted);background:rgba(255,255,255,.025);font-size:8px}.pay-steps i{width:17px;height:17px;margin:0 auto 5px;display:grid;place-items:center;border-radius:7px;color:#fff;background:rgba(119,117,173,.55);font-size:8px;font-style:normal}.payee-line{margin-bottom:5px!important}.payment-help{margin-top:15px;padding:0 13px;border:1px solid var(--line);border-radius:14px;text-align:left;background:rgba(0,0,0,.08)}.payment-help summary{padding:12px 0;color:var(--muted);cursor:pointer;font-size:9px}.payment-help[open] summary{border-bottom:1px solid var(--line)}.payment-help .proof-form{margin:13px 0}.payment-help .button{width:100%} @media(max-width:620px){.purchase-inline,.download-card .purchase-inline{grid-template-columns:1fr}.purchase-inline .button{width:100%;justify-content:space-between}.order-receipt{padding:18px}.order-query-entry{margin-top:-18px;align-items:flex-start;flex-direction:column;gap:4px}.order-query-page{margin-top:125px;padding:36px 22px}.order-query-page h1{font-size:30px}} @media(max-width:620px){.moment-photo-grid img{height:90px}.moment-photo-grid.count-1 img{height:200px}.comment-item.comment-reply{margin-left:18px}.moment-dialog-gallery{grid-template-columns:1fr}} @media (prefers-reduced-motion: reduce) { .music-toggle.playing, .runtime-orbit, :is(.bento-card, .post-card, .archive-item, .gallery-item, .download-card, .moment-card, .about-notes > div, .moment-teaser, .site-runtime, .support-page):hover { animation: none; } } /* ---- Markdown 正文渲染 ---- */ .markdown-body { line-height: 1.8; color: var(--ink); font-size: 15px; word-break: break-word; } .markdown-body h1, .markdown-body h2, .markdown-body h3 { font-family: var(--serif); line-height: 1.4; margin: 1.4em 0 .6em; } .markdown-body h2 { font-size: 24px; padding-bottom: .3em; border-bottom: 1px solid var(--line); } .markdown-body h3 { font-size: 20px; } .markdown-body p { margin: .8em 0; } .markdown-body a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; } .markdown-body img { max-width: 100%; border-radius: 12px; margin: .6em 0; } .markdown-body blockquote { margin: 1em 0; padding: .6em 1.1em; border-left: 3px solid var(--rose); background: rgba(225,166,184,.1); border-radius: 0 12px 12px 0; color: #d2c9de; } .markdown-body code { font-family: ui-monospace, Menlo, Consolas, monospace; background: rgba(170,166,230,.16); padding: .15em .4em; border-radius: 6px; font-size: .88em; } .markdown-body pre { background: rgba(20,19,32,.7); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; overflow: auto; } .markdown-body pre code { background: none; padding: 0; } .markdown-body ul, .markdown-body ol { padding-left: 1.4em; margin: .8em 0; } .markdown-body hr { border: none; border-top: 1px solid var(--line); margin: 1.6em 0; } /* ---- 评论区 ---- */ .comments { margin-top: 38px; padding: 26px; } .comments-title { font-family: var(--serif); font-size: 22px; margin: 0 0 18px; } .comments-title span { color: var(--violet); font-size: 15px; } .comment-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; } .comment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .comment-form textarea { min-height: 96px; resize: vertical; } .comment-actions { display: flex; align-items: center; gap: 12px; } .hp-note { font-size: 11px; color: #8a86a0; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .comment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .comment-item { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); } .comment-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .comment-meta b { color: #fff; font-size: 14px; } .comment-meta i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: white; background: linear-gradient(135deg,var(--rose),var(--violet)); font: 12px var(--serif); } .comment-meta time { color: #8a86a0; font-size: 11px; } .comment-body { font-size: 14px; color: #d7d2e8; } .comment-empty { color: #8a86a0; font-size: 13px; } /* ---- 友链公开页 ---- */ .links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 26px; } .link-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; } .link-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(60,55,95,.4); } .link-card img { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; } .link-card b { font-family: var(--serif); font-size: 16px; } .link-card small { color: #9c98b1; font-size: 12px; } .link-card .link-url { color: var(--violet); font-size: 11px; word-break: break-all; } @media (max-width: 720px) { body::before { background-image: var(--page-bg-mobile, var(--page-bg)); background-attachment: scroll; transform: none; animation: none; will-change: auto; } .glass-card, .glass-bar { backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); } .page-loader { backdrop-filter: none; -webkit-backdrop-filter: none; } .scene-motion { will-change: auto; } .scene-motion::before { filter: blur(14px); } .scene-motion i:nth-child(n+5), .ambient i:nth-child(n+5) { display: none; } .editor-split.active { grid-template-columns: 1fr; } .editor-split.active .md-preview { max-height: 50vh; } .comment-row { grid-template-columns: 1fr; } .link-form { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---- 3.0 内容发现、阅读与精选体验 ---- */ .tag-row a, .post-category { color: var(--violet-deep); font-size: 10px; font-weight: 800; } .tag-row a { padding: 3px 8px; border: 1px solid rgba(170,166,230,.18); border-radius: 999px; background: rgba(170,166,230,.07); } .featured-strip { padding-top: 0; } .featured-strip .section-heading small { color: var(--muted); } .featured-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; } .featured-card { min-height: 190px; position: relative; display: flex; align-items: end; overflow: hidden; border-radius: 25px; } .featured-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); } .featured-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 15%, rgba(14,12,28,.88)); } .featured-card span { position: relative; z-index: 1; padding: 24px; display: grid; gap: 4px; } .featured-card small { color: var(--rose); font-size: 9px; letter-spacing: .16em; } .featured-card b { font: 600 20px var(--serif); } .featured-card em { color: #bcb7ca; font-size: 11px; font-style: normal; } .featured-card:hover img { transform: scale(1.07); } .page-hero { width: min(1120px, calc(100% - 40px)); margin: auto; padding: 155px 0 35px; text-align: center; } .page-hero h1 { margin: 5px 0 24px; font: 600 clamp(38px,6vw,62px) var(--serif); } .search-panel { max-width: 760px; margin: auto; padding: 9px; display: grid; grid-template-columns: 1fr auto; gap: 8px; border-radius: 21px; } .search-panel input { min-width: 0; padding: 12px 16px; border: 0; outline: 0; color: var(--ink); background: transparent; } .search-results { padding-top: 25px; } .article-read-progress { position: fixed; inset: 0 0 auto; z-index: 95; height: 3px; pointer-events: none; } .article-read-progress i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,var(--rose),var(--violet),#d9d4ff); box-shadow: 0 0 12px var(--violet); } .article-layout { display: grid; grid-template-columns: 190px minmax(0,870px); gap: 20px; align-items: start; justify-content: center; } .article-main { min-width: 0; } .article-toc { position: sticky; top: 105px; padding: 22px; border-radius: 23px; } .article-toc h2 { margin: 2px 0 15px; font: 600 18px var(--serif); } .article-toc nav { display: grid; gap: 5px; border-left: 1px solid var(--line); } .article-toc nav a, .article-toc nav span { padding: 5px 0 5px 13px; color: var(--muted); font-size: 11px; line-height: 1.5; transition: color .2s,translate .2s; } .article-toc nav a:hover { color: var(--violet-deep); translate: 3px 0; } .article-toc nav a.sub { padding-left: 24px; font-size: 10px; } .article-content { max-width: none; } .article-content h2, .article-content h3 { scroll-margin-top: 120px; } .article-content pre { position: relative; } .code-copy { position: sticky; left: 100%; top: 0; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(17,17,28,.85); cursor: pointer; } .article-content img.zoomable { cursor: zoom-in; } .image-lightbox { position: fixed; inset: 0; z-index: 200; width: 100%; height: 100%; padding: 4vw; border: 0; display: grid; place-items: center; background: rgba(6,5,13,.9); backdrop-filter: blur(18px); cursor: zoom-out; animation: dialog-arrive .3s ease; } .image-lightbox img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 20px; box-shadow: var(--shadow); } .article-tools { margin-top: 16px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; border-radius: 18px; color: var(--muted); font-size: 11px; } .article-tools button, .article-tools a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--violet-deep); background: rgba(255,255,255,.04); cursor: pointer; } .article-tools span { margin-left: auto; } .post-neighbors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; } .post-neighbors a { min-height: 92px; padding: 19px 21px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); backdrop-filter: blur(18px); } .post-neighbors a:last-child { text-align: right; } .post-neighbors small { color: var(--rose); font-size: 9px; } .post-neighbors b { margin-top: 5px; font: 600 14px var(--serif); } .related-posts { margin-top: 65px; } .compact-grid .post-cover { height: 150px; } .compact-grid .post-body > p { min-height: 0; } @media (max-width: 900px) { .featured-grid { grid-template-columns: 1fr 1fr; }.featured-card:first-child { grid-column: 1/-1; } .article-layout { display: block; }.article-toc { position: relative; top: auto; margin-bottom: 16px; }.article-toc nav { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 620px) { .featured-grid { grid-template-columns: 1fr; }.featured-card:first-child { grid-column: auto; }.featured-card { min-height: 165px; } .page-hero { width: calc(100% - 28px); padding-top: 115px; }.search-panel { grid-template-columns: 1fr; }.search-panel .button { width: 100%; } .article-toc nav { grid-template-columns: 1fr; }.article-tools { align-items: stretch; flex-wrap: wrap; }.article-tools span { width: 100%; margin: 0; }.post-neighbors { grid-template-columns: 1fr; }.post-neighbors a:last-child { text-align: left; } } /* ---- 3.7.3 DreamSnowly 文章实机图组 ---- */ .article-content p:has(> img[alt^="DreamSnowly 实机"]) { width: calc(50% - 5px); margin: 9px 0; display: inline-block; vertical-align: top; } .article-content p:has(> img[alt^="DreamSnowly 全景"]) { margin: 24px 0; } .article-content img[alt^="DreamSnowly 实机"], .article-content img[alt^="DreamSnowly 全景"] { width: 100%; margin: 0; aspect-ratio: 2560 / 1494; object-fit: cover; border: 1px solid rgba(180,176,236,.2); border-radius: 17px; background: #111426; box-shadow: 0 18px 42px rgba(5,6,18,.28); transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .45s; } .article-content img[alt^="DreamSnowly 实机"]:hover, .article-content img[alt^="DreamSnowly 全景"]:hover { transform: translateY(-3px) scale(1.012); border-color: rgba(180,176,236,.42); box-shadow: 0 24px 56px rgba(5,6,18,.42); } @media (max-width: 680px) { .article-content p:has(> img[alt^="DreamSnowly 实机"]) { width: 100%; margin: 8px 0; } .article-content p:has(> img[alt^="DreamSnowly 全景"]) { margin: 16px 0; } .article-content img[alt^="DreamSnowly 实机"], .article-content img[alt^="DreamSnowly 全景"] { border-radius: 13px; } } /* ---- 3.7.4 DreamSnowly 交付清单 ---- */ .article-content p:has(> img[alt^="DreamSnowly 清单"]) { width: calc(50% - 5px); margin: 10px 0; display: inline-block; vertical-align: top; } .article-content img[alt^="DreamSnowly 清单"] { width: 100%; height: auto; margin: 0; border: 1px solid rgba(88,205,241,.24); border-radius: 17px; background: #071b2a; box-shadow: 0 18px 42px rgba(5,6,18,.28); transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .45s; } .article-content img[alt^="DreamSnowly 清单"]:hover { transform: translateY(-3px) scale(1.012); border-color: rgba(88,205,241,.48); box-shadow: 0 24px 56px rgba(5,6,18,.42); } @media (max-width: 680px) { .article-content p:has(> img[alt^="DreamSnowly 清单"]) { width: 100%; margin: 8px 0; } .article-content img[alt^="DreamSnowly 清单"] { border-radius: 13px; } } /* ---- 3.7.5 彩色文章排版 ---- */ .article-content { position: relative; border: 1px solid rgba(180,176,236,.16); background: radial-gradient(circle at 92% 3%, rgba(121,107,202,.12), transparent 27%), radial-gradient(circle at 4% 38%, rgba(225,166,184,.08), transparent 24%), linear-gradient(155deg, rgba(31,28,52,.93), rgba(20,19,36,.94)); } .article-content > p:first-child { margin: 0 0 28px; padding: 21px 23px; border: 1px solid rgba(180,176,236,.18); border-radius: 18px; color: #e9e5f5; background: linear-gradient(125deg, rgba(119,117,173,.18), rgba(225,166,184,.1)); box-shadow: inset 3px 0 0 var(--violet); font-size: 17px; } .article-content h2 { position: relative; margin: 2.35em 0 1em; padding: 15px 18px 15px 52px; overflow: hidden; border: 1px solid rgba(170,166,230,.2); border-radius: 17px; background: linear-gradient(105deg, rgba(115,101,192,.24), rgba(115,101,192,.05)); box-shadow: 0 12px 28px rgba(6,5,16,.14); font-size: 25px; } .article-content h2::before { content: "✦"; position: absolute; left: 17px; top: 50%; translate: 0 -50%; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #8177d2, #b3a8ef); box-shadow: 0 5px 15px rgba(117,101,195,.3); font: 13px/1 sans-serif; } .article-content h2:nth-of-type(3n+2) { border-color: rgba(225,166,184,.22); background: linear-gradient(105deg, rgba(186,104,139,.2), rgba(186,104,139,.045)); } .article-content h2:nth-of-type(3n+2)::before { background: linear-gradient(135deg, #c8739a, #e6a6bd); } .article-content h2:nth-of-type(3n) { border-color: rgba(88,205,241,.2); background: linear-gradient(105deg, rgba(48,146,183,.19), rgba(48,146,183,.04)); } .article-content h2:nth-of-type(3n)::before { background: linear-gradient(135deg, #318caf, #70d3ec); } .article-content h3 { color: #d8d1ff; } .article-content strong { color: #d8d1ff; } .article-content blockquote { padding: 21px 24px 21px 55px; border: 1px solid rgba(225,166,184,.2); border-radius: 17px; background: linear-gradient(120deg, rgba(177,91,131,.17), rgba(119,117,173,.1)); box-shadow: 0 14px 32px rgba(7,6,17,.16); } .article-content blockquote::before { content: "❝"; position: absolute; left: 19px; top: 13px; color: var(--rose); font: 32px/1 var(--serif); } .article-content h2 + ul { padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; list-style: none; } .article-content h2 + ul > li { min-width: 0; padding: 15px 17px; border: 1px solid rgba(170,166,230,.14); border-radius: 14px; background: rgba(255,255,255,.035); transition: translate .25s, border-color .25s, background .25s; } .article-content h2 + ul > li:hover { translate: 0 -2px; border-color: rgba(170,166,230,.32); background: rgba(170,166,230,.075); } .article-content > p:last-child { margin: 34px 0 0; padding: 21px; border-top: 1px solid rgba(225,166,184,.2); color: #d8d1e5; text-align: center; background: linear-gradient(90deg, transparent, rgba(225,166,184,.06), transparent); } @media (max-width: 680px) { .article-content > p:first-child { padding: 17px 18px; font-size: 15px; } .article-content h2 { padding: 13px 15px 13px 46px; border-radius: 14px; font-size: 21px; } .article-content h2::before { left: 14px; width: 23px; height: 23px; } .article-content h2 + ul { grid-template-columns: 1fr; } .article-content blockquote { padding: 18px 18px 18px 45px; } .article-content blockquote::before { left: 14px; } } /* ---- 3.9.0 Minecraft 创作者集市 ---- */ .market-shell,.market-dashboard,.market-catalog,.market-product,.market-callout,.market-category-row{width:min(1180px,calc(100% - 36px));margin-inline:auto} .market-hero{width:min(1180px,calc(100% - 36px));min-height:430px;margin:28px auto 24px;padding:clamp(38px,7vw,84px);display:grid;grid-template-columns:1fr 230px;align-items:center;gap:45px;border:1px solid rgba(128,211,237,.2);border-radius:38px;background:radial-gradient(circle at 85% 18%,rgba(79,193,232,.18),transparent 28%),linear-gradient(135deg,rgba(19,26,49,.94),rgba(30,24,50,.91));box-shadow:0 35px 90px rgba(3,7,20,.38)} .market-hero h1,.market-product-intro h1,.market-shell>header h1,.market-dashboard-head h1{margin:10px 0 18px;font:clamp(38px,6vw,72px)/1.05 var(--serif);color:#f3f5ff}.market-hero>div>p:last-of-type{max-width:680px;color:#bfc5d9;font-size:18px;line-height:1.9}.market-hero-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}.market-hero aside{padding:25px;border:1px solid rgba(94,218,245,.25);border-radius:25px;background:rgba(6,18,38,.55);text-align:center}.market-hero aside span,.market-hero aside small{display:block;color:#91a5bd}.market-hero aside strong{display:block;margin:8px;color:#77dcf2;font-size:48px}.market-category-row{display:flex;gap:10px;overflow:auto;padding:5px 1px 18px;scrollbar-width:none}.market-category-row a{flex:0 0 auto;padding:11px 16px;border:1px solid rgba(153,157,207,.18);border-radius:999px;color:#b8bdd0;background:rgba(20,23,42,.72)}.market-category-row a.active{color:#fff;border-color:rgba(101,214,240,.48);background:rgba(43,137,168,.27)}.market-category-row small{margin-left:7px;color:#7bd9ed}.market-section-head{margin:35px 0 22px;display:flex;justify-content:space-between;align-items:end;gap:20px}.market-section-head h2,.market-callout h2,.market-panel h2,.market-gallery h2{margin:5px 0;font:32px/1.2 var(--serif)}.market-section-head form{display:flex;gap:7px}.market-section-head input{width:min(280px,55vw);padding:12px 15px;border:1px solid rgba(157,160,209,.2);border-radius:13px;background:rgba(18,20,35,.85);color:#fff}.market-section-head button{padding:0 17px;border:0;border-radius:12px;color:#fff;background:#56538e}.market-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.market-card{overflow:hidden;border-radius:25px;transition:transform .3s,border-color .3s,box-shadow .3s}.market-card:hover{transform:translateY(-5px);border-color:rgba(100,213,239,.34);box-shadow:0 22px 50px rgba(3,8,22,.35)}.market-card-cover{position:relative;height:210px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#142a42,#332a57);color:#76dff3;font-size:48px;font-weight:900}.market-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.market-card:hover .market-card-cover img{transform:scale(1.04)}.market-card-cover i{position:absolute;left:14px;top:14px;padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(7,14,29,.78);color:#fff;font:10px/1 sans-serif}.market-card-body{padding:20px}.market-tags{display:flex;gap:7px;flex-wrap:wrap}.market-tags span{padding:5px 9px;border:1px solid rgba(102,212,239,.16);border-radius:999px;color:#8edced;background:rgba(55,161,190,.08);font-size:10px}.market-card h3{margin:13px 0 8px;font-size:20px;line-height:1.4}.market-card h3 a{color:#f1effb}.market-card-body>p{min-height:52px;color:#979baf;line-height:1.65}.market-card footer{display:flex;justify-content:space-between;align-items:end;margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.07)}.market-card footer span small{display:block;color:#6f758c;font-size:10px}.market-card footer strong{color:#efd28b;font-size:20px}.market-callout{margin-top:55px;margin-bottom:55px;padding:30px 35px;display:flex;justify-content:space-between;align-items:center;gap:30px;border:1px solid rgba(226,169,193,.18);border-radius:27px;background:linear-gradient(110deg,rgba(102,82,161,.22),rgba(194,106,143,.12))}.market-callout p{margin:5px 0;color:#a9a5bb}.market-empty{padding:50px;text-align:center;border-radius:24px}.market-empty>span{color:#74d7eb;font-size:45px}.market-empty h3{font-size:24px}.market-empty p{color:#969bad} .market-auth-shell{min-height:680px;display:grid;grid-template-columns:1fr 460px;align-items:center;gap:70px}.market-auth-copy h1{font:clamp(42px,6vw,72px)/1.05 var(--serif)}.market-auth-copy>p{max-width:600px;color:#b2b4c5;font-size:17px;line-height:1.8}.market-auth-copy ul{margin-top:30px;padding:0;display:grid;gap:12px;list-style:none}.market-auth-copy li:before{content:'✓';margin-right:10px;color:#75d8eb}.market-auth-card{padding:31px;display:grid;gap:18px;border-radius:26px}.market-auth-card label,.market-product-form label,.market-profile-form label,.market-creator-apply form label{display:grid;gap:7px;color:#c7c4d5}.market-auth-card input,.market-product-form input,.market-product-form textarea,.market-product-form select,.market-profile-form input,.market-creator-apply input,.market-creator-apply textarea{width:100%;padding:13px 15px;border:1px solid rgba(158,159,205,.22);border-radius:12px;background:rgba(15,17,31,.72);color:#f3f1fa}.market-auth-card small,.market-product-form small,.market-creator-apply small{color:#777c91}.market-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:start}.market-check input{width:auto;margin-top:4px}.market-auth-links,.market-auth-switch{display:flex;justify-content:space-between;color:#8d91a5}.market-auth-card a{color:#9fddec}.market-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important} .market-dashboard{padding:30px 0 70px}.market-dashboard-head{padding:34px;display:flex;justify-content:space-between;align-items:center;gap:30px;border-bottom:1px solid rgba(255,255,255,.1)}.market-dashboard-head h1{font-size:50px}.market-dashboard-head>div:last-child{display:flex;gap:8px}.market-dashboard-head form{display:inline}.market-notice{margin:20px 0;padding:18px 21px;display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid rgba(106,215,239,.25);border-radius:17px;background:rgba(41,134,165,.15)}.market-notice.warning{border-color:rgba(240,191,102,.27);background:rgba(163,111,39,.14)}.market-notice p{margin:3px 0;color:#9da2b5}.market-notice button{padding:10px 14px;border:0;border-radius:11px}.market-account-nav{position:sticky;top:15px;z-index:4;margin:18px 0;display:flex;gap:9px;padding:9px;border:1px solid rgba(157,159,205,.15);border-radius:16px;background:rgba(20,20,35,.9)}.market-account-nav a{padding:10px 14px;border-radius:11px;color:#c6c4d3}.market-account-nav b{margin-left:5px;color:#70d8ec}.market-panel{margin:18px 0;padding:27px;border:1px solid rgba(156,158,207,.16);border-radius:24px;background:rgba(25,23,42,.84)}.market-panel>header{display:flex;justify-content:space-between;margin-bottom:20px}.market-library-grid{display:grid;gap:11px}.market-library-grid article{padding:13px;display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:15px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.025)}.market-library-grid article>span{width:68px;height:58px;display:grid;place-items:center;overflow:hidden;border-radius:12px;color:#76dcef;background:#15293d}.market-library-grid img{width:100%;height:100%;object-fit:cover}.market-library-grid h3{margin:4px 0}.market-library-grid p,.market-library-grid small{margin:0;color:#7f8499}.market-order-table{display:grid;gap:8px}.market-order-table>a{padding:14px;display:grid;grid-template-columns:1fr auto 90px;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.07);border-radius:14px;color:#eceaf4}.market-order-table small{display:block;margin-top:4px;color:#797e92}.market-creator-panel>p{color:#a4a7b8}.market-profile-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end} .market-creator-apply{padding:55px 0}.market-creator-apply>header{max-width:760px;margin-bottom:30px}.market-creator-apply>header p:last-child{color:#aaaebe}.market-creator-apply-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:23px}.market-creator-apply form{padding:27px;display:grid;gap:17px;border-radius:25px}.market-creator-apply aside{padding:30px;border:1px solid rgba(94,213,239,.18);border-radius:25px;background:rgba(12,29,47,.72)}.market-creator-apply ol{padding:0;display:grid;gap:17px;list-style:none}.market-creator-apply li{display:grid;gap:4px}.market-creator-apply li b{color:#9ee0ec}.market-creator-apply li span,.market-creator-apply aside>p{color:#8e94a8;line-height:1.7}.market-income-cards{margin:22px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.market-income-cards article{padding:20px;border:1px solid rgba(102,212,239,.14);border-radius:17px;background:rgba(14,29,47,.65)}.market-income-cards small{color:#848a9d}.market-income-cards b{display:block;margin-top:7px;color:#92dfed;font-size:24px}.market-product-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.market-product-form .span-2{grid-column:1/-1}.market-private-field{padding:14px;border:1px dashed rgba(240,196,111,.25);border-radius:15px;background:rgba(150,101,28,.07)}.market-form-actions{display:flex;justify-content:flex-end;gap:10px}.market-product-list{display:grid;gap:9px}.market-product-list article{padding:16px;display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid rgba(255,255,255,.07);border-radius:14px}.market-product-list h3{margin:6px 0}.market-product-list p{margin:0;color:#858a9e}.market-product-list small{display:block;margin-top:6px;color:#e7a8be} .market-product{padding:30px 0 70px}.market-product-hero{display:grid;grid-template-columns:minmax(300px,1fr) 1.1fr 330px;gap:25px;align-items:stretch}.market-product-cover{min-height:420px;display:grid;place-items:center;overflow:hidden;border-radius:28px;color:#79dcec;background:linear-gradient(135deg,#132d43,#352954);font-size:70px;font-weight:900}.market-product-cover img{width:100%;height:100%;object-fit:cover}.market-product-intro{padding:25px 8px}.market-product-intro h1{font-size:48px}.market-product-intro>p{color:#adb0c1;line-height:1.8}.market-creator-line{margin-top:28px;padding-top:20px;display:flex;gap:11px;align-items:center;border-top:1px solid rgba(255,255,255,.08)}.market-creator-line>span{width:45px;height:45px;display:grid;place-items:center;border-radius:15px;color:#fff;background:linear-gradient(135deg,#5e82ba,#815eac)}.market-creator-line small,.market-creator-line b{display:block}.market-creator-line small{color:#73798d}.market-buy-card{padding:27px;display:flex;flex-direction:column;justify-content:center;border-radius:27px}.market-buy-card>span,.market-buy-card>small{color:#8d92a5}.market-buy-card>strong{margin:7px 0;color:#f0cf80;font-size:42px}.market-buy-card form,.market-buy-card .button{margin-top:20px}.market-buy-card form .button{width:100%;margin:0}.market-buy-card ul{padding:18px 0 0;display:grid;gap:10px;border-top:1px solid rgba(255,255,255,.08);list-style:none;color:#9297aa;font-size:12px}.market-buy-card li:before{content:'✓';margin-right:7px;color:#74d8eb}.market-product-layout{margin-top:25px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;align-items:start}.market-product-content{padding:32px}.market-product-meta{position:sticky;top:20px;padding:24px;border-radius:22px}.market-product-meta h3{color:#b5e5ed}.market-product-meta p{color:#989caf;line-height:1.7}.market-product-meta dl>div{padding:10px 0;display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07)}.market-product-meta dt{color:#7f8498}.market-gallery{margin-top:35px}.market-gallery>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.market-gallery button{height:230px;padding:0;overflow:hidden;border:0;border-radius:17px;background:#111}.market-gallery img{width:100%;height:100%;object-fit:cover} .market-order-page,.market-delivery{padding:55px 0 80px}.market-order-page>header,.market-delivery>header{margin-bottom:28px}.market-order-page>header p,.market-delivery>header p{color:#979caf}.market-order-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px}.market-order-status,.market-order-pay{padding:30px;border-radius:25px}.market-order-status{display:flex;flex-direction:column;align-items:flex-start}.market-order-status>strong{margin:20px 0 2px;color:#f1d180;font-size:50px}.market-order-status>small{color:#878c9f}.market-order-status>.button{margin-top:25px}.market-order-status>p{color:#9ea3b6;line-height:1.7}.market-pay-codes{display:flex;gap:16px}.market-pay-codes figure{margin:0;max-width:230px}.market-pay-codes img{width:100%;padding:9px;border-radius:16px;background:#fff}.market-pay-codes figcaption{text-align:center;color:#aab0c2}.market-order-pay ol{padding-left:22px;color:#a2a7b9;line-height:2}.market-order-pay b{color:#f0d181}.market-delivery-card{padding:34px;display:grid;grid-template-columns:65px 1fr;gap:15px 20px;border-radius:28px}.market-delivery-lock{width:60px;height:60px;display:grid;place-items:center;border-radius:20px;color:#081923;background:#78dcef;font-size:25px}.market-delivery-card h2{margin:5px 0;font-size:30px}.market-delivery-card p{color:#8e93a6}.market-delivery-card dl{grid-column:1/-1;margin:18px 0;display:grid;gap:9px}.market-delivery-card dl>div{padding:16px;display:grid;grid-template-columns:130px 1fr;gap:15px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.025)}.market-delivery-card dt{color:#7d8295}.market-delivery-card a{color:#92dfea}.market-delivery-card code{padding:5px 9px;border-radius:8px;background:#101526;color:#f0d180}.market-delivery-card footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;color:#777c90} @media(max-width:980px){.market-grid{grid-template-columns:repeat(2,1fr)}.market-product-hero{grid-template-columns:1fr 1fr}.market-buy-card{grid-column:1/-1}.market-auth-shell{grid-template-columns:1fr;gap:20px;padding:50px 0}.market-creator-apply-grid{grid-template-columns:1fr}.market-product-layout{grid-template-columns:1fr}.market-product-meta{position:static}.market-income-cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.market-shell,.market-dashboard,.market-catalog,.market-product,.market-callout,.market-category-row,.market-hero{width:min(100% - 22px,1180px)}.market-hero{min-height:0;padding:32px 23px;grid-template-columns:1fr;border-radius:24px}.market-hero h1,.market-product-intro h1,.market-shell>header h1,.market-dashboard-head h1{font-size:37px}.market-hero aside{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left}.market-hero aside strong{grid-row:1/3;grid-column:2;margin:0;font-size:35px}.market-grid{grid-template-columns:1fr}.market-card-cover{height:190px}.market-section-head{align-items:stretch;flex-direction:column}.market-section-head form{width:100%}.market-section-head input{width:100%}.market-callout{padding:24px;align-items:flex-start;flex-direction:column}.market-auth-shell{min-height:0}.market-auth-card{padding:22px}.market-dashboard-head{padding:20px 2px;align-items:flex-start;flex-direction:column}.market-account-nav{position:static;overflow:auto}.market-library-grid article{grid-template-columns:52px 1fr}.market-library-grid article>span{width:52px;height:52px}.market-library-grid article>.button{grid-column:1/-1;text-align:center}.market-order-table>a{grid-template-columns:1fr auto}.market-order-table i{grid-column:1/-1}.market-profile-form,.market-product-form{grid-template-columns:1fr}.market-product-form .span-2{grid-column:auto}.market-income-cards{grid-template-columns:1fr 1fr}.market-product-hero{grid-template-columns:1fr}.market-product-cover{min-height:260px}.market-product-intro{padding:15px 2px}.market-gallery>div{grid-template-columns:1fr 1fr}.market-gallery button{height:150px}.market-order-layout{grid-template-columns:1fr}.market-order-status,.market-order-pay{padding:22px}.market-pay-codes{flex-direction:column}.market-delivery-card{padding:22px;grid-template-columns:50px 1fr}.market-delivery-lock{width:48px;height:48px;border-radius:15px}.market-delivery-card dl>div{grid-template-columns:1fr;gap:6px}.market-delivery-card footer{align-items:flex-start;flex-direction:column;gap:12px}} /* ---- 3.8.5 手机稳定模式：静态布局，避免滚动重排与跳动 ---- */ .featured-card picture, .post-cover picture, .article-cover picture { display: block; width: 100%; height: 100%; } @media (max-width: 720px) { :root { --glass: rgba(23, 22, 36, .88); --glass-strong: rgba(28, 26, 42, .96); } body.page-home::before, body::before { position: absolute; animation: none !important; filter: none !important; transform: none !important; background-position: center !important; background-size: auto 100vh; background-size: auto 100svh; background-repeat: repeat-y; } body::after { position: absolute; } body * { animation: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .scene-motion, .ambient { display: none !important; } .hero-copy, .moon-card, .site-header { will-change: auto; } .site-header { position: absolute; } .article-read-progress, .scroll-progress { display: none !important; } .js .reveal { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; will-change: auto; } .about-avatar { background-image: var(--about-image-mobile, var(--about-image)); } } /* ---- 3.9.1 集市可用性与移动端稳定性 ---- */ body.page-marketplace .site-main, body[class*="page-market-"] .site-main { padding-top: 112px; } .market-security-form { max-width: 780px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .market-security-form label { display: grid; gap: 7px; color: #c7c4d5; } .market-security-form input { width: 100%; padding: 13px 15px; border: 1px solid rgba(158,159,205,.22); border-radius: 12px; color: #f3f1fa; background: rgba(15,17,31,.72); } .market-card, .market-card-body, .market-card footer span, .market-product-intro, .market-library-grid article > div, .market-order-table > a > span { min-width: 0; } .market-card h3, .market-card footer span, .market-product-intro h1, .market-library-grid h3, .market-order-table span, .market-delivery-card dd { overflow-wrap: anywhere; } .market-card-cover img, .market-product-cover img, .market-gallery img { display: block; } .market-card a:focus-visible, .market-category-row a:focus-visible, .market-account-nav a:focus-visible, .market-auth-card a:focus-visible, .market-dashboard .button:focus-visible, .market-product .button:focus-visible, .market-order-page .button:focus-visible, .market-delivery .button:focus-visible, .market-auth-card input:focus-visible, .market-product-form :is(input,textarea,select):focus-visible, .market-profile-form input:focus-visible, .market-security-form input:focus-visible { outline: 2px solid #8edced; outline-offset: 3px; } @media (max-width: 680px) { body.page-marketplace .site-main, body[class*="page-market-"] .site-main { padding-top: 86px; } .brand, .nav-toggle { min-width: 44px; min-height: 44px; } .nav-toggle { display: grid; place-items: center; } .market-dashboard-head > div:last-child { width: 100%; flex-wrap: wrap; } .market-dashboard-head .button, .market-dashboard-head button, .market-notice button { min-height: 44px; } .market-account-nav a { min-height: 44px; display: flex; align-items: center; } .market-card h3 a { min-height: 44px; display: flex; align-items: center; } .market-library-grid article > .button { min-height: 44px; display: grid; place-items: center; } .market-security-form { grid-template-columns: 1fr; } } /* ---- 3.9.2 注册、投稿与按钮视觉统一 ---- */ .btn-ghost { min-height: 44px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(170,166,230,.24); border-radius: 14px; color: #d9d7e8; background: rgba(255,255,255,.045); box-shadow: inset 0 1px rgba(255,255,255,.04); cursor: pointer; font: 700 13px/1.2 inherit; text-decoration: none; transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; } .btn-ghost:hover { transform: translateY(-2px); border-color: rgba(142,220,237,.4); color: #fff; background: rgba(101,108,168,.18); box-shadow: 0 10px 25px rgba(5,8,24,.2); } .button:focus-visible, .btn-ghost:focus-visible, button:focus-visible { outline: 2px solid #8edced; outline-offset: 3px; } .button:disabled, .btn-ghost:disabled, button:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } .market-email-code { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; } .market-email-code .btn-ghost { min-width: 116px; } .market-editor-panel { padding: clamp(20px,4vw,36px); overflow: hidden; border-color: rgba(108,214,238,.2); background: radial-gradient(circle at 94% 1%,rgba(95,195,226,.1),transparent 24%), linear-gradient(145deg,rgba(23,28,50,.94),rgba(28,23,46,.94)); } .market-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .market-editor-head > div:first-child { min-width: 0; } .market-editor-head h2 { margin-bottom: 8px; } .market-editor-head p:last-child { margin: 0; color: #9298ad; } .market-upload-health { flex: 0 0 auto; min-width: 250px; padding: 14px 16px; display: grid; gap: 4px; border: 1px solid rgba(137,167,127,.28); border-radius: 15px; color: #bce0b2; background: rgba(58,112,74,.12); } .market-upload-health.bad { border-color: rgba(225,166,184,.3); color: #efbdce; background: rgba(144,55,85,.1); } .market-upload-health small { color: #858b9e; } .market-product-editor { margin-top: 25px; display: grid; grid-template-columns: 1fr; gap: 18px; } .market-editor-section { min-width: 0; margin: 0; padding: 22px; border: 1px solid rgba(157,160,209,.14); border-radius: 20px; background: rgba(7,12,27,.22); } .market-editor-section legend { padding: 0 11px 0 0; } .market-editor-section legend, .market-editor-section legend span { display: flex; align-items: center; gap: 11px; } .market-editor-section legend i { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(115,218,239,.3); border-radius: 12px; color: #9ce4ef; background: rgba(49,142,169,.14); font-style: normal; font-weight: 800; } .market-editor-section legend span { display: grid; gap: 2px; } .market-editor-section legend b { color: #f2f0f8; font-size: 15px; } .market-editor-section legend small { color: #767c91; font-size: 10px; } .market-editor-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .market-editor-grid .span-2 { grid-column: 1/-1; } .market-product-editor :is(input,textarea,select) { min-height: 48px; outline: 0; transition: border-color .2s, box-shadow .2s, background .2s; } .market-product-editor textarea { resize: vertical; line-height: 1.7; } .market-product-editor :is(input,textarea,select):focus { border-color: rgba(142,220,237,.58); background: rgba(15,21,39,.92); box-shadow: 0 0 0 4px rgba(83,178,207,.1); } .market-media-editor { margin-top: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .market-media-column { min-width: 0; padding: 18px; display: grid; align-content: start; gap: 13px; border: 1px solid rgba(157,160,209,.12); border-radius: 17px; background: rgba(255,255,255,.02); } .market-media-column h3 { margin: 0; font-size: 16px; } .market-media-column h3 small { color: #7c8296; font-size: 10px; font-weight: 400; } .market-media-column details { padding: 0 12px; border: 1px solid rgba(157,160,209,.12); border-radius: 13px; background: rgba(0,0,0,.09); } .market-media-column summary { padding: 12px 0; color: #989db0; cursor: pointer; font-size: 11px; } .market-media-column details :is(input,textarea) { margin: 0 0 12px; } .market-editor-preview { width: 100%; max-height: 250px; display: block; object-fit: cover; border-radius: 14px; } .market-editor-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; } .market-editor-gallery img { width: 100%; aspect-ratio: 1.35; display: block; object-fit: cover; border-radius: 9px; } .market-product-editor .file-picker { min-height: 92px; align-content: center; border-color: rgba(110,211,235,.28); background: rgba(53,134,159,.06); } .market-product-editor .file-picker:hover { border-color: rgba(110,211,235,.52); } .market-delivery-editor { border-color: rgba(240,196,111,.17); background: linear-gradient(135deg,rgba(145,101,39,.07),rgba(7,12,27,.18)); } .market-editor-actions { padding: 16px 2px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #777d91; font-size: 11px; } .market-editor-actions > div { display: flex; flex-wrap: wrap; gap: 9px; } .market-editor-actions :is(.button,.btn-ghost) { min-height: 46px; } .market-shell button, .market-dashboard button, .market-product button, .market-order-page button, .market-delivery button { min-height: 44px; border-radius: 14px; font-family: inherit; } .market-gallery button { min-height: 0; border-radius: 17px; } @media (max-width: 760px) { .market-editor-head, .market-editor-actions { align-items: stretch; flex-direction: column; } .market-upload-health { min-width: 0; width: 100%; } .market-editor-grid, .market-media-editor { grid-template-columns: 1fr; } .market-editor-grid .span-2 { grid-column: auto; } .market-editor-actions > div { display: grid; grid-template-columns: 1fr 1fr; } .market-editor-actions > div > :last-child { grid-column: 1/-1; } .market-editor-actions :is(.button,.btn-ghost) { width: 100%; } } @media (max-width: 520px) { .market-email-code { grid-template-columns: 1fr; } .market-email-code .btn-ghost { width: 100%; } .market-editor-panel { padding: 17px; border-radius: 20px; } .market-editor-section { padding: 17px 14px; border-radius: 17px; } .market-editor-section legend small { display: none; } .market-media-column { padding: 14px; } .market-editor-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); } }