body { color:#666; font:300 15px/15px Roboto,Arial,Helvetica;background-color:#fff;-webkit-font-smoothing:antialiased;} body.modal-open { padding-right: 0 !important; } body.modal-open .navbar-fixed-top, body.modal-open .navbar-fixed-bottom { padding-right: 0 !important; } .grid figure picture { display:block; width:100%; } .grid figure h2 { font-family: 'Noto Serif SC', serif; font-weight: 700; letter-spacing: 0.05em; } /* Welcome overlay */ #welcome-overlay { position:fixed; inset:0; z-index:9999; cursor:default; overflow:hidden; } .welcome-door { position:absolute; top:0; height:100%; width:50%; background-color: white; background-image: url('../images/monogram/v2_full.webp'); background-repeat: repeat; background-size: 280px 280px; transition: transform 0.95s cubic-bezier(0.77,0,0.175,1); } #door-left { left:0; } #door-right { right:0; } #welcome-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; pointer-events:none; transition: opacity 0.35s ease; } #logo-split { position: relative; width: min(380px, 72vw); cursor: pointer; pointer-events: auto; } #logo-half-left, #logo-half-right { display: block; width: 100%; opacity: 0; animation: wLogoIn 0.9s ease 0.4s forwards; transition: transform 0.95s cubic-bezier(0.77,0,0.175,1), opacity 0.4s; } #logo-half-left { position: absolute; top:0; left:0; clip-path: inset(0 50% 0 0); } #logo-half-right { clip-path: inset(0 0 0 50%); } #welcome-hint { margin-top: 0; margin-bottom: 1.5em; color: rgba(50, 20, 120, 0.95); font-family: 'Jost', sans-serif; font-size: 1.15em; font-weight: 500; letter-spacing: 0.3em; opacity: 0; animation: wHintIn 0.8s ease 1.4s forwards; transition: opacity 0.3s; background: rgba(255,255,255,0.55); padding: 0.45em 1.2em; border-radius: 2em; } #welcome-sub { margin-top: 1.2em; color: rgba(50, 20, 120, 0.95); font-family: 'Ma Shan Zheng', cursive; font-size: 1em; font-weight: 400; letter-spacing: 0.4em; opacity: 0; animation: wHintIn 0.8s ease 1.6s forwards; transition: opacity 0.3s; background: rgba(255,255,255,0.72); padding: 0.35em 1.1em; border-radius: 2em; } #welcome-overlay.open #welcome-sub { opacity:0; } #welcome-hint::after { content: '●'; font-size:0.55em; margin-left:0.8em; vertical-align:middle; display:inline-block; animation: wPulse 1.6s ease-in-out 1.4s infinite; } @keyframes wLogoIn { from{opacity:0;transform:scale(0.88)} to{opacity:1;transform:scale(1)} } @keyframes wHintIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } @keyframes wPulse { 0%,100%{opacity:0.6} 50%{opacity:0.1} } #welcome-overlay.open #door-left { transform: translateX(-101%); } #welcome-overlay.open #door-right { transform: translateX(101%); } #welcome-overlay.open #logo-half-left { transform: translateX(-60vw); opacity:0; } #welcome-overlay.open #logo-half-right { transform: translateX(60vw); opacity:0; } #welcome-overlay.open #welcome-hint { opacity:0; } #welcome-overlay.done { display:none; } a{color:#00a9c6; text-decoration:none;} a:hover{color:#666;} .btn,a,.btn:hover,a:hover { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; outline: none !important; } h1,h2,h3,h4{margin: 0;line-height: 1em;} h1{font:700 5em Roboto,Arial,Helvetica;margin:0.25em 0;text-transform: uppercase;} h2{font:300 2.5em Roboto,Arial,Helvetica;margin-bottom: 1.5em;} h3{font:300 2em Roboto,Arial,Helvetica;margin:1em 0 1em 0;} h4{font:300 1.5em Roboto,Arial,Helvetica;margin-bottom: 1em;} h4 i{margin-right: 0.5em;} p{font-size:1em;line-height: 1.7em; margin-bottom: 1.7em;} .spacer{padding: 2em 0;} .btn{border:none;border-radius: 0;padding: 1em 4em;background: rgba(0,0,0,0.5);text-transform: uppercase;} .btn:hover,.btn:active{color: #fff;} .btn-default{color: #ccc;border: 1px solid #aaa;} .btn-default:hover,.btn-default:active{background: rgba(0,0,0,0.8);} .btn-primary{color: #fff;background:#00a9c6;width: 100%;outline: none;} .btn-primary:hover,.btn-primary:active,.btn-primary:focus{background:#1BC0DC;box-shadow: none;} .topbar {background:linear-gradient(90deg,#1e3a8a,#7c3aed,#0e7490,#e879f9,#1e3a8a,#7c3aed,#0e7490);background-size:300% 100%;animation:flowGradient 6s linear infinite;height:5px;position:fixed;top:0;width:100%;z-index:1000;} @keyframes flowGradient{0%{background-position:0% 0%}100%{background-position:100% 0%}} .navbar-nav > li > a{font-size: 1em;line-height: 3.6em; color: #1a1a3e !important;} .navbar-nav > li > a:hover { color: #7c3aed !important; } #nav-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; line-height: 0; } #nav-logo img { height: 30px; width: auto; transition: filter 0.4s; } #nav-logo img.logo-easter-pulse { animation: logoPulse 2.4s ease-in-out infinite; } @keyframes logoPulse { 0%,100% { filter: var(--logo-filter); } 50% { filter: var(--logo-filter-bright); } } .navbar-fixed-top{top: 5px;} .navbar-inverse{background: #111;} #top-nav { background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 100%), linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.45)), url('../images/monogram/v4_full.webp') repeat; background-size: auto, auto, 320px auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none !important; box-shadow: 0 4px 20px rgba(80,80,180,0.1); min-height: 70px; transition: box-shadow 0.4s ease, top 0.4s ease, backdrop-filter 0.4s ease; } #top-nav.nav-scrolled { top: 0 !important; box-shadow: 0 4px 28px rgba(80,80,180,0.18), 0 1px 0 rgba(255,255,255,0.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{background: none;color: #21abca;} #user-logout-item > a.dropdown-toggle:hover, #user-logout-item > a.dropdown-toggle:focus, #user-logout-item > a.dropdown-toggle:active, #user-logout-item.open > a.dropdown-toggle { background: none !important; outline: none; } .user-dropdown { background: rgba(18,18,32,0.97); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); min-width: 140px; backdrop-filter: blur(12px); } .user-dropdown .dropdown-header { color: rgba(255,255,255,0.4); font-size: 0.78em; letter-spacing: 0.08em; padding: 8px 16px 4px; } .user-dropdown > li > a { color: rgba(255,255,255,0.8) !important; font-size: 0.88em; padding: 8px 16px; letter-spacing: 0.04em; } .user-dropdown > li > a:hover { background: rgba(33,171,202,0.15) !important; color: #21abca !important; } .user-dropdown .divider { background: rgba(255,255,255,0.08); } .user-dropdown > li:last-child > a { color: rgba(255,255,255,0.5) !important; } .user-dropdown > li:last-child > a:hover { color: #ff6b6b !important; background: rgba(255,107,107,0.1) !important; } #head,.carousel{margin-top: 0;} #home{padding-top: 6em;} .carousel-caption{top:0;bottom: 0;left: 0; right: 0;padding: 0;} .caption-wrapper{display: table;height: 100%;width: 100%;} .caption-info{display: table-cell;vertical-align: middle;} .caption-info p{font-size: 1.25em;} .caption-info .btn i{margin-right:0.75em;} .carousel-inner > .item > img, .carousel-inner > .item > a > img{width: 100%;} .carousel-control{z-index:1000;} /*about*/ .about.spacer{padding-left: 4em; padding-right: 4em;} .process ul li{width: 10em;height: 10em;border: 1px solid #CEEBF0;padding: 0;border-radius: 50%;margin: 0 1.25em;line-height: 13.5em;color: #21ABCA;} .process ul li span{line-height: 2em;display: inline-block;font-weight: 300;} .process ul li span i{font-size: 3em;} .process ul li span b{display: block;font-size: 1em;font-weight: 300;} /* connect */ .connect-row{display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;} .connect-link{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.2em 2.8em;color:rgba(255,255,255,0.5);text-decoration:none;position:relative;transition:color 0.3s,transform 0.3s;gap:0.7em;} .connect-link::after{content:'';position:absolute;bottom:1.4em;left:50%;transform:translateX(-50%);width:0;height:1px;background:#21abca;transition:width 0.3s ease;} .connect-link:hover,.connect-link:focus{color:#21abca;text-decoration:none;transform:translateY(-3px);} .connect-link:hover::after{width:2em;} .connect-icon-fa{font-size:2em;line-height:1;} .connect-icon-svg{width:2em;height:2em;display:block;} .connect-link span{font-size:0.78em;font-family:'Noto Serif SC',serif;font-weight:600;letter-spacing:0.06em;color:#999;transition:color 0.3s;} .connect-link:hover span{color:#21abca;} /* info grid */ .info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2em;padding:1.5em 0;} .info-card{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:2em 1.2em;text-align:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform 0.3s ease,background 0.3s ease;display:flex;flex-direction:column;justify-content:center;} .info-card:hover{transform:translateY(-5px);background:rgba(255,255,255,0.13);} .info-card-flip{flex-direction:column-reverse;} .info-card-flip .info-card-icon{margin-bottom:0;margin-top:10px;} .info-card-icon{font-size:2.8em;color:rgba(255,255,255,0.9);display:block;margin-bottom:10px;transition:transform 0.3s ease,filter 0.3s ease;animation:iconFloat 3.5s ease-in-out infinite;} .info-card:nth-child(2) .info-card-icon{animation-delay:0.5s;} .info-card:nth-child(3) .info-card-icon{animation-delay:1s;} .info-card:nth-child(4) .info-card-icon{animation-delay:1.5s;} .info-card:hover .info-card-icon{transform:scale(1.15);filter:drop-shadow(0 0 10px rgba(33,171,202,0.8));} @keyframes iconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}} @keyframes iconFloatSmall{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}} .info-card-title{font-size:0.95em;color:#fff;line-height:1.5;font-family:'Noto Serif SC',serif;font-weight:600;letter-spacing:0.05em;} .mob-break{display:inline;} .info-card-sub{font-size:0.82em;color:rgba(255,255,255,0.55);margin-top:0.3em;letter-spacing:0.05em;} .info-card-sub-same{color:#fff;font-size:0.95em;} /* Rainbow per info-card */ .info-card:nth-child(1){border-color:rgba(6,214,160,0.5);} .info-card:nth-child(1) .info-card-icon{color:#06d6a0;} .info-card:nth-child(1) .info-card-title{color:#06d6a0;font-size:1.1em;} .info-card:nth-child(1):hover{box-shadow:0 8px 28px rgba(6,214,160,0.25);} .info-card:nth-child(1):hover .info-card-icon{filter:drop-shadow(0 0 10px rgba(6,214,160,0.8));} .info-card:nth-child(2){border-color:rgba(255,209,102,0.5);} .info-card:nth-child(2) .info-card-icon{color:#ffd166;} .info-card:nth-child(2) .info-card-title{color:#ffd166;} .info-card:nth-child(2):hover{box-shadow:0 8px 28px rgba(255,209,102,0.25);} .info-card:nth-child(2):hover .info-card-icon{filter:drop-shadow(0 0 10px rgba(255,209,102,0.8));} .info-card:nth-child(3){border-color:rgba(255,143,163,0.5);} .info-card:nth-child(3) .info-card-icon{color:#ff8fa3;} .info-card:nth-child(3) .info-card-title{color:#ff8fa3;} .info-card:nth-child(3):hover{box-shadow:0 8px 28px rgba(255,143,163,0.25);} .info-card:nth-child(3):hover .info-card-icon{filter:drop-shadow(0 0 10px rgba(255,143,163,0.8));} .info-card:nth-child(4){border-color:rgba(162,155,254,0.5);} .info-card:nth-child(4) .info-card-icon{color:#a29bfe;} .info-card:nth-child(4) .info-card-title{color:#a29bfe;font-size:1.1em;} .info-card:nth-child(4):hover{box-shadow:0 8px 28px rgba(162,155,254,0.25);} .info-card:nth-child(4):hover .info-card-icon{filter:drop-shadow(0 0 10px rgba(162,155,254,0.8));} /* Rainbow per connect-link */ .connect-link:nth-child(1):hover,.connect-link:nth-child(1):focus{color:#06d6a0;} .connect-link:nth-child(1):hover span{color:#06d6a0;} .connect-link:nth-child(1)::after{background:#06d6a0;} .connect-link:nth-child(2):hover,.connect-link:nth-child(2):focus{color:#ffd166;} .connect-link:nth-child(2):hover span{color:#ffd166;} .connect-link:nth-child(2)::after{background:#ffd166;} .connect-link:nth-child(3):hover,.connect-link:nth-child(3):focus{color:#ff8fa3;} .connect-link:nth-child(3):hover span{color:#ff8fa3;} .connect-link:nth-child(3)::after{background:#ff8fa3;} .connect-link:nth-child(4):hover,.connect-link:nth-child(4):focus{color:#a29bfe;} .connect-link:nth-child(4):hover span{color:#a29bfe;} .connect-link:nth-child(4)::after{background:#a29bfe;} /*testimonials*/ .partners img{float: left;margin:0 75px 30px 0;} .testimonails{min-height: 195px;} .testimonails img{margin-top: 5px;} .testimonails span{color: #888;} .testimonails span b{font-weight: 400;} .carousel-indicators li{border: 1px solid #2BB2E3;} .carousel-indicators{bottom: 0;} /*works*/ #works{padding-top:6em;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;} #works::before,#works::after{display:none;} #works figure{float:none;width:100%!important;} #works figure:nth-child(odd){ -webkit-clip-path:polygon(0 0,100% 0,100% 93%,0 100%); clip-path:polygon(0 0,100% 0,100% 93%,0 100%); } #works figure:nth-child(even){ -webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 93%); clip-path:polygon(0 0,100% 0,100% 100%,0 93%); } /* 每张卡片独立遮罩色 */ #works figure:nth-child(1) figcaption::before{background:linear-gradient(135deg,rgba(0,190,210,0.58) 0%,rgba(10,30,90,0.65) 100%);} #works figure:nth-child(2) figcaption::before{background:linear-gradient(135deg,rgba(140,40,210,0.58) 0%,rgba(220,50,130,0.65) 100%);} #works figure:nth-child(3) figcaption::before{background:linear-gradient(135deg,rgba(220,60,90,0.65) 0%,rgba(245,130,30,0.72) 100%);} #works figure:nth-child(4) figcaption::before{background:linear-gradient(135deg,rgba(20,185,120,0.58) 0%,rgba(10,120,170,0.68) 100%);} #works figure:nth-child(5) figcaption::before{background:linear-gradient(135deg,rgba(70,50,210,0.45) 0%,rgba(160,40,190,0.55) 100%);} #works figure:nth-child(6) figcaption::before{background:linear-gradient(135deg,rgba(245,175,25,0.70) 0%,rgba(220,70,30,0.78) 100%);} #works figcaption a{border:1px solid #fff;margin-top: 1em;display: inline-block;color: #fff;padding: 0 2em;} #works figcaption a:hover{text-decoration: none;padding: 0 3em;} @media(max-width:50em){ #works{grid-template-columns:repeat(2,1fr);} #works figure:nth-child(odd){ -webkit-clip-path:polygon(0 0,92% 0,100% 8%,100% 100%,0 100%); clip-path:polygon(0 0,92% 0,100% 8%,100% 100%,0 100%); } #works figure:nth-child(even){ -webkit-clip-path:polygon(0 0,100% 0,100% 100%,8% 100%,0 92%); clip-path:polygon(0 0,100% 0,100% 100%,8% 100%,0 92%); } } @media(max-width:639px){ #music-bar { height: auto !important; flex-wrap: wrap !important; padding: 0.3em 0.8em !important; gap: 0 !important; } .bar-info { flex: 1 !important; min-width: 0; order: 1; } .bar-controls { order: 2; flex-shrink: 0; } #player-toggle { order: 3; flex-shrink: 0; } .bar-progress { order: 4; flex: 0 0 100% !important; padding: 0.2em 0 0; } .bar-progress .player-progress { height: 10px; border-radius: 4px; } #music-bar { padding-bottom: calc(1.2em + env(safe-area-inset-bottom, 0px)) !important; } body { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } #works{grid-template-columns:1fr;gap:16px;padding-left:1.2em;padding-right:1.2em;} #works figure:nth-child(odd){ -webkit-clip-path:none;clip-path:none; width:85%!important;justify-self:start; border-radius:12px; box-shadow:5px 8px 24px rgba(0,0,0,0.22); } #works figure:nth-child(even){ -webkit-clip-path:none;clip-path:none; width:85%!important;justify-self:end; border-radius:12px; box-shadow:-5px 8px 24px rgba(0,0,0,0.22); } #works figure:nth-child(6){margin-bottom: 3em;} } /*works*/ /*team*/ .team figure{width: 100%;} .team img{width: 100%;} .team b{font-size: 1.2em;display: block;} .team a i.fa{color: #fff; font-size: 2em;} .team a i.fa:hover{color: #21abca;} .copyrights{ text-indent:-9999px; height:0; line-height:0; font-size:0; overflow:hidden; } .highlight-info{ background: linear-gradient(rgba(15,10,50,0.82), rgba(15,10,50,0.82)), url('../images/monogram/v3_full_c.webp') repeat; background-size: auto, 300px auto; color:#fff; } .highlight-info .overlay{background: none;} .highlight-info h4{color: #fff;margin:0.5em 0 0 0;} /*about us*/ /*contact*/ #contact{background-color: #f5f5f5;} .contactform textarea,.contactform input{width: 100%;padding:1em;border:1px solid #ccc;margin-bottom: 1em;border-radius: 0;outline: none;} /*contact*/ /*music player*/ #music-player-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; } #music-player-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #21abca 25%, rgba(33,171,202,0.5) 75%, transparent); z-index: 1; pointer-events: none; } #music-bar { background: rgba(12,12,20,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; padding: 0 1.2em; height: 48px; display: flex; align-items: center; gap: 1.2em; } .bar-info { display: flex; align-items: center; gap: 0.7em; min-width: 0; flex: 0 0 280px; overflow: visible; } .bar-info .fa-music { color: #21abca; flex-shrink: 0; } .bar-info .player-title { font-size: 0.9em; color: #ddd; white-space: nowrap; overflow: hidden; } .player-title .pt-inner { display: inline-block; white-space: nowrap; } .player-title .pt-inner.scrolling { animation: pt-scroll var(--pt-dur, 8s) linear infinite; } @keyframes pt-scroll { 0%,20%{ transform:translateX(0); } 80%,100%{ transform:translateX(var(--pt-dist,0px)); } } .bar-controls { display: flex; align-items: center; gap: 0.6em; flex-shrink: 0; } #music-bar .player-btn { background: none; border: none; color: #aaa; font-size: 1em; cursor: pointer; padding: 0.4em; outline: none; } #music-bar .player-btn:hover { color: #21abca; } #music-bar .player-btn-main { font-size: 1.6em; color: #21abca; } #player-mode { position: relative; font-size: 0.85em; opacity: 0.5; } #player-mode.mode-active { opacity: 1; color: #21abca; } .mode-badge { position: absolute; top: 0; right: 0; font-size: 0.6em; font-weight: bold; line-height: 1; } .bar-progress { flex: 1; display: flex; align-items: center; gap: 0.8em; min-width: 0; } .bar-progress .player-progress { position: relative; flex: 1; height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; cursor: grab; } .bar-progress .player-progress:active { cursor: grabbing; } .bar-progress .player-progress-bar { position: relative; overflow: visible; height: 100%; width: 0; background: linear-gradient(90deg, #1a8faa, #21abca); border-radius: 3px; pointer-events: none; box-shadow: 0 0 6px rgba(33,171,202,0.5); } .bar-progress .player-progress-bar::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 2px #21abca, 0 0 8px rgba(33,171,202,0.6); opacity: 0; transition: opacity 0.18s; pointer-events: none; } .bar-progress .player-progress:hover .player-progress-bar::after { opacity: 1; } @media(max-width:767px){ .bar-progress .player-progress-bar::after { opacity: 1; } } .bar-progress .player-time { font-size: 0.78em; color: #888; white-space: nowrap; flex-shrink: 0; } #player-toggle { flex-shrink: 0; font-size: 1.2em; transition: transform 0.3s; } #player-toggle.open { transform: rotate(180deg); } #music-playlist { background: rgba(12,12,20,0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid #2a2a2a; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } #music-playlist.open { max-height: 280px; overflow-y: auto; } #player-list { list-style: none; padding: 0; margin: 0; } .player-list-item { display: flex; align-items: center; padding: 0.8em 1.5em; cursor: pointer; border-bottom: 1px solid #222; transition: background 0.2s; } .player-list-item:hover { background: #1e1e1e; } .player-list-item.active { background: #1a2a2e; } .player-list-num { width: 2em; font-size: 0.82em; color: #555; flex-shrink: 0; } .player-list-item.active .player-list-num { color: #21abca; } .player-list-title { flex: 1; font-size: 0.92em; color: #bbb; } .player-list-item.active .player-list-title { color: #21abca; } .player-list-icon { font-size: 0.75em; color: #21abca; } /* 播放器封面 + 黑胶 */ #player-vinyl-group { display: none; position: relative; flex-shrink: 0; width: 58px; height: 40px; } #player-vinyl-group.visible { display: block; } #player-cover-wrap { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 4px; overflow: hidden; z-index: 2; background-size: cover; background-position: center; box-shadow: 0 2px 6px rgba(0,0,0,0.5); } #player-cover-wrap::before { content: ''; position: absolute; inset: 0; background: inherit; filter: blur(5px); transform: scale(1.2); } #player-cover { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; } #vinyl-disc { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; z-index: 1; background: radial-gradient(circle, #555 8%, #222 8%, #222 20%, #2a2a2a 20%, #2a2a2a 34%, #1e1e1e 34%, #1e1e1e 48%, #2a2a2a 48%, #2a2a2a 62%, #1e1e1e 62%); box-shadow: 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 8px rgba(0,0,0,0.6); animation: vinyl-spin 8s linear infinite; animation-play-state: paused; } #music-bar.playing #vinyl-disc { animation-play-state: running; } @keyframes vinyl-spin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } /* 波形动画 */ .audio-wave { display: none; align-items: flex-end; gap: 2px; height: 14px; flex-shrink: 0; } .audio-wave span { display: block; width: 3px; border-radius: 1px; background: #21abca; transform-origin: bottom; animation: wave-bar 0.9s ease-in-out infinite; } .audio-wave span:nth-child(1) { height: 8px; animation-delay: 0s; } .audio-wave span:nth-child(2) { height: 13px; animation-delay: 0.18s; } .audio-wave span:nth-child(3) { height: 8px; animation-delay: 0.36s; } @keyframes wave-bar { 0%,100%{ transform:scaleY(0.35); opacity:0.6; } 50%{ transform:scaleY(1); opacity:1; } } #music-bar.playing .audio-wave { display: flex; } #music-bar.playing .fa-music { display: none; } /* 进度条光晕增强 */ .bar-progress .player-progress-bar { box-shadow: 0 0 8px rgba(33,171,202,0.7), 0 0 2px rgba(33,171,202,0.9); } /*music player*/ /*album modal*/ .album-track-list { list-style: none; padding: 0; margin: 0; } .album-track-item { display: flex; align-items: center; padding: 0.85em 1.2em; border-bottom: 1px solid #f0f0f0; } .album-track-item:last-child { border-bottom: none; } .album-track-num { width: 2em; font-size: 0.82em; color: #bbb; flex-shrink: 0; } .album-track-title { flex: 1; font-size: 0.95em; color: #111; font-weight: 500; } .album-track-link, .album-track-link:visited, .album-track-link:active, .album-track-link:hover { text-decoration: none !important; } .album-track-link { color: #111; font-weight: 500; } .album-track-link:visited { color: #111; } .album-track-link:hover { color: #21abca; } .album-track-actions { display: flex; align-items: center; gap: 0.6em; flex-shrink: 0; } .album-track-actions a, .album-track-actions button { border: none; background: none; padding: 0.2em 0.4em; font-size: 0.85em; cursor: pointer; text-decoration: none; line-height: 1; outline: none; } .album-track-actions .btn-play-track { display:inline-flex;align-items:center;padding:0.25em 0.8em;background:rgba(33,171,202,0.15);color:#21abca;font-size:0.85em;border-radius:20px;transition:background 0.2s;outline:none; } .album-track-actions .btn-play-track:hover { background:rgba(33,171,202,0.3);color:#21abca; } .album-track-locked { background: linear-gradient(90deg, rgba(255,200,50,0.08), rgba(255,160,0,0.13), rgba(255,200,50,0.08)); border-bottom: 1px solid rgba(255,180,0,0.2) !important; } .album-track-mystery { font-size: 1em; font-weight: bold; color: #c8920a; letter-spacing: 0.15em; } .album-track-locked small { color: #c8920a; opacity: 0.75; font-size: 0.78em; letter-spacing: 0.05em; } .album-track-locked .album-track-num { color: #c8920a; } .btn-locked { border: 1px solid #c8920a !important; color: #c8920a; cursor: not-allowed !important; opacity: 0.7; } .btn-stream { color: #888; border: 1px solid #ccc !important; } .btn-stream:hover { color: #fff; background: #888; border-color: #888 !important; } .album-track-actions .btn-mv { display:inline-flex;align-items:center;padding:0.25em 0.8em;background:rgba(251,114,153,0.15);color:#fb7299;font-size:0.85em;border-radius:20px;transition:background 0.2s;outline:none; } .album-track-actions .btn-mv:hover { background:rgba(251,114,153,0.3);color:#fb7299; } .album-track-actions .btn-dance-mv { display:inline-flex;align-items:center;padding:0.25em 0.8em;background:rgba(33,171,202,0.15);color:#21abca;font-size:0.85em;border-radius:20px;transition:background 0.2s;outline:none; } .album-track-actions .btn-dance-mv:hover { background:rgba(33,171,202,0.3);color:#21abca; } /*album modal*/ #album-modal .modal-body { position: relative; } #album-collage { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 2; } #album-collage img { position: absolute; mix-blend-mode: multiply; opacity: 0.55; } #album-track-list { position: relative; z-index: 1; } .album-track-item { background: rgba(255,255,255,0.78); } /*video modal*/ .video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;} .video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;} /* Timeline */ .hkv-timeline { position: relative; padding: 0.5em 0 0.5em 0; } .hkv-timeline::before { content: ''; position: absolute; left: 68px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #21abca, #8a4fff, #e879f9); } .tl-item { display: flex; align-items: flex-start; margin-bottom: 2em; position: relative; } .tl-item:last-child { margin-bottom: 0; } .tl-year-header { display: flex; align-items: center; margin: 1.6em 0 1em; position: relative; cursor: pointer; user-select: none; } .tl-year-header:first-child { margin-top: 0; } .tl-toggle { color: #aaa; font-size: 0.8em; margin-left: 0.6em; flex-shrink: 0; transition: color 0.2s; } .tl-year-header:hover .tl-toggle { color: #21abca; } .tl-group { overflow: hidden; transition: opacity 0.25s; } .tl-group.tl-collapsed { display: none; } .tl-year-label { width: 58px; text-align: right; flex-shrink: 0; font-weight: 700; font-size: 1em; color: #fff; background: linear-gradient(135deg, #21abca, #8a4fff); border-radius: 2em; padding: 2px 10px 2px 6px; line-height: 1.6; letter-spacing: 0.03em; box-shadow: 0 2px 8px rgba(33,171,202,0.3); } .tl-year-line { flex: 1; height: 1px; background: linear-gradient(to right, rgba(33,171,202,0.3), transparent); margin-left: 22px; } .tl-date { width: 58px; text-align: right; flex-shrink: 0; font-size: 0.82em; color: #888; line-height: 1.4; padding-top: 2px; letter-spacing: 0.02em; } .tl-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #21abca; box-shadow: 0 0 0 3px rgba(33,171,202,0.15); flex-shrink: 0; margin: 4px 14px 0 9px; transition: background 0.2s; } .tl-item:hover .tl-dot { background: #21abca; } .tl-content { flex: 1; } .tl-title { font-weight: 600; font-size: 0.97em; color: #111; margin-bottom: 0.2em; line-height: 1.4; } .tl-tag { display: inline-block; font-size: 0.72em; padding: 1px 8px; border-radius: 2em; margin-bottom: 0.35em; font-weight: 500; letter-spacing: 0.03em; } .tl-tag-music { background: rgba(33,171,202,0.12); color: #0e7490; } .tl-tag-video { background: rgba(232,121,249,0.12); color: #a21caf; } .tl-tag-event { background: rgba(245,200,80,0.15); color: #b45309; } .tl-tag-origin { background: rgba(138,79,255,0.12); color: #6d28d9; } .tl-tag-dance { background: rgba(34,197,94,0.12); color: #15803d; } /* Album covers flip */ .cover-flip-card { cursor: pointer; max-width: 480px; margin: 0 auto; padding: 0 4px 4px; margin: 0 auto; user-select: none; -webkit-user-select: none; } .cover-flip-inner { position: relative; width: 100%; } .cover-flip-front, .cover-flip-back { width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.12); } .cover-flip-back { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.6s ease; } .cover-flip-card.flipped .cover-flip-back { opacity: 1; } .cover-flip-front img, .cover-flip-back img { display: block; width: 100%; height: auto; } .cover-flip-label { text-align: center; font-size: 0.82em; color: #888; padding: 0.5em 0 0.2em; letter-spacing: 0.05em; } .tl-ending { text-align: center; margin-top: 2em; padding-top: 1.2em; border-top: 1px dashed #ddd; color: #bbb; font-size: 0.9em; letter-spacing: 0.25em; font-family: 'Noto Serif SC', serif; } .tl-ending-top { margin-top: 0; margin-bottom: 2em; padding-top: 0; padding-bottom: 1.2em; border-top: none; border-bottom: 1px dashed #ddd; } .tl-desc { font-size: 0.85em; color: #666; line-height: 1.6; } .tl-play-btn{display:inline-flex;align-items:center;padding:0.25em 0.8em;border:none;border-radius:20px;background:rgba(33,171,202,0.15);color:#21abca;font-size:0.85em;cursor:pointer;transition:background 0.2s;vertical-align:middle;margin-left:0.4em;} .tl-play-btn:hover{background:rgba(33,171,202,0.3);} .tl-play-btn .fa{font-size:0.85em;} .tl-link-btn{display:inline-flex;align-items:center;padding:0.25em 0.8em;border-radius:20px;background:rgba(230,0,18,0.12);color:#e60012;font-size:0.85em;cursor:pointer;transition:background 0.2s;vertical-align:middle;margin-left:0.4em;text-decoration:none;} .tl-link-btn:hover,.tl-link-btn:focus,.tl-link-btn:active{background:rgba(230,0,18,0.25);color:#e60012;text-decoration:none;outline:none;} .tl-link-btn .fa{font-size:0.85em;} .tl-preview{display:block;margin-top:0.6em;height:72px;border-radius:6px;cursor:pointer;opacity:0.85;transition:opacity 0.2s,transform 0.2s;object-fit:cover;} .tl-preview:hover{opacity:1;transform:scale(1.03);} .tl-preview-logo{height:36px;object-fit:contain;background:rgba(15,10,50,0.88);padding:6px 14px;border-radius:8px;cursor:default;} #tl-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s;} #tl-lightbox.active{opacity:1;pointer-events:auto;} #tl-lb-img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,0.7);} /* ── 抽卡 modal ── */ .draw-mc{background:#0d0d1a;border:none;border-radius:16px;color:#fff;padding:0 0 1.5em;overflow:hidden;} .draw-mc-close{position:absolute;top:10px;right:14px;z-index:10;color:#fff;opacity:0.6;font-size:2em;text-shadow:none;} .draw-mc-close:hover{opacity:1;color:#fff;} .draw-title{text-align:center;font-family:Roboto,Arial,sans-serif;font-weight:300;letter-spacing:0.2em;font-size:0.85em;color:rgba(255,255,255,0.4);padding:1.2em 0 0.2em;text-transform:uppercase;} .draw-stage{display:flex;align-items:flex-start;justify-content:center;gap:2em;padding:1.2em 1.5em 0.5em;} .draw-result-area{display:flex;flex-direction:column;align-items:center;gap:0.6em;} .draw-card-slot{width:160px;height:240px;border-radius:12px;border:2px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.04);position:relative;overflow:hidden;} .draw-hint{text-align:center;color:rgba(255,255,255,0.25);font-size:0.8em;line-height:2;letter-spacing:0.08em;} .draw-card-revealed{width:100%;height:100%;object-fit:cover;border-radius:10px;animation:drawCardReveal 0.7s cubic-bezier(0.22,1,0.36,1) both;} @keyframes drawCardReveal{0%{transform:rotateY(90deg) scale(0.8);opacity:0;}50%{transform:rotateY(90deg) scale(0.8);opacity:0;}100%{transform:rotateY(0deg) scale(1);opacity:1;}} .draw-rarity-badge{font-size:0.75em;letter-spacing:0.15em;font-weight:700;padding:0.2em 1em;border-radius:20px;opacity:0;transition:opacity 0.4s 0.6s;} .draw-rarity-badge.visible{opacity:1;} .draw-slogan-overlay{position:absolute;inset:0;background:rgba(10,5,40,0.72);border-radius:10px;display:flex;align-items:center;justify-content:flex-start;padding:1.2em;opacity:0;pointer-events:none;transition:opacity 0.35s;cursor:pointer;backdrop-filter:blur(2px);} .draw-slogan-overlay.visible{opacity:1;pointer-events:auto;} .draw-slogan-text{font-family:'Noto Serif SC',serif;font-size:0.7em;font-weight:600;color:rgba(255,255,255,0.92);line-height:2;text-align:left;letter-spacing:0.02em;pointer-events:none;white-space:pre-line;} .draw-card-revealed{cursor:pointer;} .draw-info-row{display:flex;align-items:center;justify-content:center;gap:0.5em;} .draw-char-name{font-size:0.72em;letter-spacing:0.06em;color:rgba(255,255,255,0.75);text-align:center;font-family:'Noto Serif SC',serif;opacity:0;transition:opacity 0.4s 0.8s;} .draw-char-name.visible{opacity:1;} #draw-lb-char{font-size:0.78em;letter-spacing:0.06em;color:rgba(255,255,255,0.6);font-family:'Noto Serif SC',serif;text-align:center;} .draw-rarity-N{background:rgba(120,120,140,0.25);color:#aaa;border:1px solid #666;} .draw-rarity-R{background:rgba(50,120,255,0.2);color:#7bb8ff;border:1px solid #3a7bd5;} .draw-rarity-SR{background:rgba(150,60,255,0.2);color:#c87fff;border:1px solid #8840d0;} .draw-rarity-SSR{background:rgba(255,190,0,0.15);color:#ffd060;border:1px solid #c8960a;animation:ssrPulse 1.8s ease-in-out infinite 0.6s;} @keyframes ssrPulse{0%,100%{box-shadow:0 0 6px rgba(255,190,0,0.3);}50%{box-shadow:0 0 18px rgba(255,190,0,0.7);}} .draw-deck-area{display:flex;flex-direction:column;align-items:center;gap:0.5em;} .draw-deck-stack{position:relative;width:100px;height:150px;margin-top:45px;user-select:none;-webkit-user-select:none;} .draw-hint{user-select:none;-webkit-user-select:none;} .draw-card-back{position:absolute;width:100px;height:150px;border-radius:8px;background:url('../images/monogram/v1_card.webp') center/cover no-repeat;border:1.5px solid rgba(160,120,255,0.35);box-shadow:0 4px 14px rgba(0,0,0,0.5);transition:transform 0.3s;} .draw-deck-count{font-size:0.72em;color:rgba(255,255,255,0.3);letter-spacing:0.08em;} @keyframes deckShake{0%,100%{transform:rotate(0deg);}20%{transform:rotate(-4deg);}40%{transform:rotate(4deg);}60%{transform:rotate(-3deg);}80%{transform:rotate(2deg);}} .draw-deck-stack.shaking{animation:deckShake 0.35s ease;} @keyframes drawDeal{0%{transform:translateY(0) scale(1);opacity:1;}100%{transform:translateY(-30px) scale(0.7);opacity:0;}} .draw-card-back.dealing{animation:drawDeal 0.35s ease forwards;} .draw-card-back-v3{background-image:url('../images/monogram/v3_card.webp') !important;} .draw-btn{ background:linear-gradient(160deg,#3d1478 0%,#12106e 60%,#0a2a6e 100%); border:none; outline:none; border-radius:40px; padding:0.6em 0; width:140px; cursor:pointer; position:relative; display:inline-flex; align-items:center; justify-content:center; color:#e0ccff; font-size:0.88em; letter-spacing:0.18em; box-shadow:0 0 0 1.5px rgba(160,110,255,0.45), 0 4px 20px rgba(80,40,160,0.5); transition:box-shadow 0.25s, transform 0.2s, background 0.25s; overflow:hidden; } .draw-btn::before{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0) 60%); pointer-events:none; } .draw-btn-logo{height:16px;width:auto;display:block;filter:brightness(0) invert(1);opacity:0.85;} .draw-btn:hover:not(:disabled){ background:linear-gradient(160deg,#5520a8 0%,#1a189e 60%,#0d3a96 100%); box-shadow:0 0 0 1.5px rgba(180,130,255,0.7), 0 6px 28px rgba(100,50,220,0.65); transform:translateY(-1px); } .draw-btn:active:not(:disabled){transform:translateY(0);} .draw-btn:disabled{opacity:0.35;cursor:not-allowed;box-shadow:none;} .draw-counter{font-size:0.68em;color:rgba(255,255,255,0.3);letter-spacing:0.06em;text-align:center;} .draw-limit-tip{display:block;font-size:0.62em;color:rgba(255,255,255,0.2);letter-spacing:0.06em;text-align:center;margin-top:0.3em;} .draw-collection{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:0.5em 1.2em 0;min-height:0;overflow:hidden;transition:max-height 0.4s ease;} .draw-collect-toggle-btn{background:none;border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.4);font-size:0.68em;letter-spacing:0.08em;padding:0.25em 1.2em;border-radius:2em;cursor:pointer;transition:color 0.2s,border-color 0.2s;} .draw-collect-toggle-btn:hover{color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.35);} .draw-thumb-wrap{position:relative;opacity:0;transform:scale(0.5);transition:opacity 0.4s,transform 0.4s;} .draw-thumb-wrap.show{opacity:1;transform:scale(1);} .draw-thumb{width:44px;height:66px;border-radius:5px;object-fit:cover;border:1.5px solid transparent;display:block;} .draw-thumb-count{position:absolute;top:2px;right:2px;font-size:0.55em;color:#fff;background:rgba(0,0,0,0.6);border-radius:3px;padding:0 2px;line-height:1.4;display:none;} .draw-thumb-count:not(:empty){display:block;} .draw-thumb-rarity{display:block;text-align:center;font-size:0.6em;font-weight:700;letter-spacing:0.05em;margin-top:3px;} .draw-thumb-rarity-R{color:#5a9bf5;} .draw-thumb-rarity-SR{color:#c87fff;} .draw-thumb-rarity-SSR{color:#ffd060;} .draw-thumb-wrap{cursor:pointer;} .draw-thumb-wrap:hover .draw-thumb{opacity:0.8;} #draw-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.8em;opacity:0;pointer-events:none;transition:opacity 0.25s;} #draw-lightbox.active{opacity:1;pointer-events:auto;} #draw-lb-img{max-width:88vw;max-height:78vh;border-radius:10px;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,0.7);} #draw-lb-rarity{font-size:0.85em;font-weight:700;letter-spacing:0.2em;} .draw-lb-rarity-R{color:#5a9bf5;} .draw-lb-rarity-SR{color:#c87fff;} .draw-lb-rarity-SSR{color:#ffd060;text-shadow:0 0 12px rgba(255,210,0,0.6);} .draw-thumb-R{border-color:#3a7bd5;} .draw-thumb-SR{border-color:#8840d0;} .draw-thumb-SSR{border-color:#c8960a;box-shadow:0 0 6px rgba(200,150,10,0.5);} /*video modal*/ .footer-merged{ text-align: center; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 2em; padding: 2em 0 0.8em; color: rgba(255,255,255,0.35); font-size: 0.82em; letter-spacing: 0.04em; } .footer-logos{display:flex;width:fit-content;margin:0 auto 1.2em;align-items:center;flex-wrap:wrap;gap:1.2em;background:rgba(255,255,255,0.1);border-radius:10px;padding:0.6em 1em;} .footer-logos img{height:44px;width:auto;cursor:grab;user-select:none;transition:opacity 0.2s,transform 0.2s;} .footer-logos img.logo-dragging{opacity:0.2;} .footer-logos img.logo-drag-over{transform:scale(1.18);outline:2px solid rgba(255,255,255,0.5);border-radius:4px;} .logo-ghost{position:fixed;pointer-events:none;border-radius:6px;opacity:0.85;box-shadow:0 8px 24px rgba(0,0,0,0.5);z-index:9999;} .highlight-info .overlay{padding-bottom:0.5em;} .gototop{position: fixed;bottom: 76px; right: 20px;background: rgba(0,0,0,0.5);padding: 10px;color: #fff;} .gototop i{line-height: 0.5em;} @media (max-width: 1200px) { body{font:300 13px/13px Roboto,Arial,Helvetica;} .navbar-brand{padding-top: 11px;} .process ul li{margin:0 0.5em; } .grid figure h2{font-size: 1.5em;} figure.effect-oscar figcaption{padding: 12%;} figure.effect-oscar figcaption::before,figure.effect-chico figcaption::before{top: 20px;right: 20px;bottom: 20px;left: 20px;} .partners img{margin: 0 25px 25px 0;} } @media (max-width: 900px) { h1{font: 700 3.5em Roboto,Arial,Helvetica;} h4 {font: 300 1.3em Roboto,Arial,Helvetica;} .btn{padding: 1em 2em;} .partners img{margin: 0 15px 25px 0;width: 157px;} .process ul li{width: 9em;height: 9em;} figure.effect-chico figcaption {padding: 2em;} figure.effect-oscar figcaption {padding: 20%;} figure.effect-chico figcaption::before{top: 10px;right: 10px;bottom: 10px;left: 10px;} .grid figure.effect-chico p{font-size: 0.6em;line-height: 1.5em;} } @media (max-width: 767px) { body{font:300 12px/12px Roboto,Arial,Helvetica;} .navbar-nav > li > a {line-height: 1em;} .navbar-brand{padding: 7px;} .navbar-brand img{height: 37px;} .navbar-toggle{margin-top: 12px;} #nav-user-mobile{display:block !important;} .carousel-caption,.carousel-control,.carousel-indicators{display: none;} #covers-carousel .carousel-control{display: flex; align-items: center; justify-content: center;} #covers-carousel .carousel-indicators{display: block;} h2.text-center{text-align: left;font-size: 1.7em;} h4 {font: 300 1.2em Roboto,Arial,Helvetica;} #partners h2{padding: 0 1em;} #works {padding-top: 7em;} .partners{display: block;float: left;} .partners img{width: 120px;} .about.spacer{padding-left: 2em;padding-right: 2em;} .spacer{padding:2em 0 0 0;} .process ul li{margin-bottom: 1em;} #connect-list{display:flex;flex-wrap:wrap;justify-content:center;max-width:26em;margin:0 auto;} #connect-list li{margin-bottom:1.5em;} .highlight-info .overlay{padding-bottom: 0.5em;} .info-grid{grid-template-columns:repeat(2,1fr);gap:0.9em;} .info-card{padding:1.4em 0.9em;} .info-card:nth-child(3) .info-card-title{white-space:normal;} .mob-break{display:block;} .info-card-icon{animation-name:iconFloatSmall;margin-bottom:6px;} .info-card-flip .info-card-icon{margin-top:6px;} .connect-link{padding:1.6em 1.8em;} .connect-row{max-width:none;} .grid.team div{margin: 0;padding: 0;} figure.effect-chico figcaption {padding: 1.5em;} .footer-merged{padding: 2em 0 1.2em;} .gototop{display:none;} .footer-logos{width:calc(100vw - 2em);max-width:100%;flex-wrap:wrap;justify-content:center;} .footer-logos img{height:32px;} } @media(max-width:400px){ .connect-link{padding:1.2em 1em;} .connect-link span{font-size:0.7em;letter-spacing:0.02em;} } @media (max-width: 360px) { .draw-stage { gap: 0.8em; padding: 0.8em 0.6em 0.5em; } .draw-card-slot { width: 130px; height: 195px; } }@charset "UTF-8";.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{position:absolute;top:0;right:0;bottom:0;left:0;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.slide-content{margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;opacity:1}.blueimp-gallery{position:fixed;z-index:999999;overflow:hidden;background:#000;background:rgba(0,0,0,.9);opacity:0;display:none;direction:ltr;-ms-touch-action:none;touch-action:none}.blueimp-gallery-carousel{position:relative;z-index:auto;margin:1em auto;padding-bottom:56.25%;box-shadow:0 0 10px #000;-ms-touch-action:pan-y;touch-action:pan-y}.blueimp-gallery-display{display:block;opacity:1}.blueimp-gallery>.slides{position:relative;height:100%;overflow:hidden}.blueimp-gallery-carousel>.slides{position:absolute}.blueimp-gallery>.slides>.slide{position:relative;float:left;height:100%;text-align:center;-webkit-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-moz-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-ms-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-o-transition-timing-function:cubic-bezier(0.645,.045,.355,1);transition-timing-function:cubic-bezier(0.645,.045,.355,1)}.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{-webkit-transition:opacity .5s linear;-moz-transition:opacity .5s linear;-ms-transition:opacity .5s linear;-o-transition:opacity .5s linear;transition:opacity .5s linear}.blueimp-gallery>.slides>.slide-loading{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}.blueimp-gallery>.slides>.slide-loading>.slide-content{opacity:0}.blueimp-gallery>.slides>.slide-error{background:url(../img/error.png) center no-repeat}.blueimp-gallery>.slides>.slide-error>.slide-content{display:none}.blueimp-gallery>.prev,.blueimp-gallery>.next{position:absolute;top:50%;left:15px;width:40px;height:40px;margin-top:-23px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-decoration:none;text-shadow:0 0 2px #000;text-align:center;background:#222;background:rgba(0,0,0,.5);-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5;cursor:pointer;display:none}.blueimp-gallery>.next{left:auto;right:15px}.blueimp-gallery>.close,.blueimp-gallery>.title{position:absolute;top:15px;left:15px;margin:0 40px 0 0;font-size:20px;line-height:30px;color:#fff;text-shadow:0 0 2px #000;opacity:.8;display:none}.blueimp-gallery>.close{padding:15px;right:15px;left:auto;margin:-15px;font-size:30px;text-decoration:none;cursor:pointer}.blueimp-gallery>.play-pause{position:absolute;right:15px;bottom:15px;width:15px;height:15px;background:url(../img/play-pause.png) 0 0 no-repeat;cursor:pointer;opacity:.5;display:none}.blueimp-gallery-playing>.play-pause{background-position:-15px 0}.blueimp-gallery>.prev:hover,.blueimp-gallery>.next:hover,.blueimp-gallery>.close:hover,.blueimp-gallery>.title:hover,.blueimp-gallery>.play-pause:hover{color:#fff;opacity:1}.blueimp-gallery-controls>.prev,.blueimp-gallery-controls>.next,.blueimp-gallery-controls>.close,.blueimp-gallery-controls>.title,.blueimp-gallery-controls>.play-pause{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.prev,.blueimp-gallery-left>.prev,.blueimp-gallery-single>.next,.blueimp-gallery-right>.next,.blueimp-gallery-single>.play-pause{display:none}.blueimp-gallery>.slides>.slide>.slide-content,.blueimp-gallery>.prev,.blueimp-gallery>.next,.blueimp-gallery>.close,.blueimp-gallery>.play-pause{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body:last-child .blueimp-gallery>.slides>.slide-error{background-image:url(../img/error.svg)}body:last-child .blueimp-gallery>.play-pause{width:20px;height:20px;background-size:40px 20px;background-image:url(../img/play-pause.svg)}body:last-child .blueimp-gallery-playing>.play-pause{background-position:-20px 0}*+html .blueimp-gallery>.slides>.slide{min-height:300px}*+html .blueimp-gallery>.slides>.slide>.slide-content{position:relative}@charset "UTF-8";.blueimp-gallery>.indicator{position:absolute;top:auto;right:15px;bottom:15px;left:15px;margin:0 40px;padding:0;list-style:none;text-align:center;line-height:10px;display:none}.blueimp-gallery>.indicator>li{display:inline-block;width:9px;height:9px;margin:6px 3px 0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:1px solid transparent;background:#ccc;background:rgba(255,255,255,.25)center no-repeat;border-radius:5px;box-shadow:0 0 2px #000;opacity:.5;cursor:pointer}.blueimp-gallery>.indicator>li:hover,.blueimp-gallery>.indicator>.active{background-color:#fff;border-color:#fff;opacity:1}.blueimp-gallery-controls>.indicator{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.indicator{display:none}.blueimp-gallery>.indicator{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*+html .blueimp-gallery>.indicator>li{display:inline}@charset "UTF-8";.blueimp-gallery>.slides>.slide>.video-content>img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.video-content>video{position:absolute;top:0;left:0;width:100%;height:100%}.blueimp-gallery>.slides>.slide>.video-content>iframe{position:absolute;top:100%;left:0;width:100%;height:100%;border:none}.blueimp-gallery>.slides>.slide>.video-playing>iframe{top:0}.blueimp-gallery>.slides>.slide>.video-content>a{position:absolute;top:50%;right:0;left:0;margin:-64px auto 0;width:128px;height:128px;background:url(../img/video-play.png) center no-repeat;opacity:.8;cursor:pointer}.blueimp-gallery>.slides>.slide>.video-content>a:hover{opacity:1}.blueimp-gallery>.slides>.slide>.video-playing>a,.blueimp-gallery>.slides>.slide>.video-playing>img{display:none}.blueimp-gallery>.slides>.slide>.video-content>video{display:none}.blueimp-gallery>.slides>.slide>.video-playing>video{display:block}.blueimp-gallery>.slides>.slide>.video-loading>a{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}body:last-child .blueimp-gallery>.slides>.slide>.video-content:not(.video-loading)>a{background-image:url(../img/video-play.svg)}*+html .blueimp-gallery>.slides>.slide>.video-content{height:100%}*+html .blueimp-gallery>.slides>.slide>.video-content>a{left:50%;margin-left:-64px} /* ── 留言板 ── */ #message-board { padding: 2.5em 0 1.5em; border-top: 1px solid rgba(255,255,255,0.08); } #message-board + .footer-merged { margin-top: 0; border-top: none; } .msgb-row { display: flex; gap: 0.8em; align-items: stretch; } /* 左：滚动展示 */ .msgb-display { flex: 1; min-width: 0; display: flex; flex-direction: column; } .msgb-display-inner { overflow: hidden; padding: 0.2em 0; cursor: default; flex: 1; display: flex; flex-direction: column; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 100%); } #msg-scroll-inner { flex: 1; display: flex; flex-direction: column; } .msg-lane { overflow: hidden; white-space: nowrap; flex: 1; display: flex; align-items: center; } .msg-lane-inner { display: inline-block; white-space: nowrap; animation: msgTickerH linear infinite; } .msg-lane:hover .msg-lane-inner { animation-play-state: paused; } @keyframes msgTickerH { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } } .msg-item { display: inline-block; margin-right: 0.4em; } .msg-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 0.3em; opacity: 0.9; } .msg-avatar-link { cursor: pointer; } .msg-avatar-link:hover { opacity: 1; } span.msg-avatar-link:hover { opacity: 0.75; } .msg-name { color: #21abca; font-size: 0.82em; font-weight: 500; letter-spacing: 0.03em; margin-right: 0.3em; } .msg-time { color: rgba(255,255,255,0.25); font-size: 0.72em; margin-right: 0.4em; } .msg-content { font-size: 0.85em; opacity: 0.85; } /* 右：输入区 */ .msgb-form { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.75em; } .msgb-form-title { color: rgba(255,255,255,0.5); font-size: 0.78em; letter-spacing: 0.1em; text-transform: uppercase; } .msgb-textarea { width: 100%; height: 160px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; font-size: 0.85em; line-height: 1.6; padding: 0.75em 1em; resize: none; outline: none; box-sizing: border-box; transition: border-color 0.2s; } .msgb-textarea:focus { border-color: rgba(33,171,202,0.5); } .msgb-textarea::placeholder { color: rgba(255,255,255,0.2); } .msgb-form-foot { display: flex; align-items: center; justify-content: space-between; } .msgb-char-count { color: rgba(255,255,255,0.25); font-size: 0.72em; } .msgb-submit-btn { background: #21abca; border: none; border-radius: 6px; color: #fff; padding: 0.45em 1.4em; font-size: 0.85em; cursor: pointer; letter-spacing: 0.05em; transition: background 0.2s; } .msgb-submit-btn:hover { background: #1890aa; } .msgb-submit-btn:disabled { opacity: 0.5; cursor: default; } .msgb-tip { font-size: 0.78em; display: none; min-height: 1.2em; } @media (max-width: 767px) { .msgb-row { flex-direction: column; gap: 1em; } .msgb-display { height: 140px; flex: none; } .msgb-form { width: 100%; } .msgb-form-title { font-size: 0.72em; } .msgb-textarea { height: 80px; } .msg-lane:nth-child(n+6) { display: none; } } /* ── 主人公档案卡牌网格 ── */ #char-profile-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 60vh; overflow-y: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; } #char-profile-grid::-webkit-scrollbar { width: 4px; } #char-profile-grid::-webkit-scrollbar-track { background: transparent; } #char-profile-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; } .cp-card-wrap { position: relative; width: 72px; flex-shrink: 0; border-radius: 6px; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.1); transition: transform 0.15s; } .cp-card-wrap:hover { transform: scale(1.05); } .cp-card-img { display: block; width: 100%; height: auto; } .cp-card-rarity { position: absolute; top: 3px; left: 3px; font-size: 0.6em; font-weight: bold; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.03em; color: #fff; } .cp-rarity-R { background: #3a7bd5; } .cp-rarity-SR { background: #8840d0; } .cp-rarity-SSR { background: #c8960a; } .cp-card-count { position: absolute; bottom: 3px; right: 4px; font-size: 0.65em; color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.45); padding: 1px 3px; border-radius: 3px; } /* 未解锁：糊化 */ .cp-card-locked .cp-card-img { filter: blur(4px) brightness(0.55) grayscale(60%); } .cp-card-locked .cp-card-rarity { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); } /* 稀有度边框 */ .cp-card-wrap[data-rarity="SR"] { border-color: rgba(136,64,208,0.5); } .cp-card-wrap[data-rarity="SSR"] { border-color: rgba(200,150,10,0.6); box-shadow: 0 0 6px rgba(200,150,10,0.3); } .cp-card-wrap.cp-card-locked { border-color: rgba(255,255,255,0.06); box-shadow: none; } /* 导航栏用户头像（圆形） */ .nav-avatar-circle { border-radius: 50%; object-fit: cover; width: 26px !important; height: 26px !important; } /* ── 着陆档案弹窗 ── */ @media (min-width: 768px) { #profile-modal .modal-dialog { width: 380px; } } .profile-modal-content { background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; } .profile-modal-header { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 1.2em 1.5em 1em; } /* 头像区 */ .profile-avatar-wrap { position: relative; display: block; width: 80px; height: 80px; margin: 0 auto 1.4em; cursor: pointer; } .profile-avatar-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid rgba(255,255,255,0.15); } .profile-avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3em; opacity: 0; transition: opacity 0.2s; } .profile-avatar-wrap:hover .profile-avatar-overlay { opacity: 1; } /* 字段行 */ .profile-field { display: flex; align-items: center; margin-bottom: 0.75em; gap: 0.5em; flex-wrap: wrap; } .profile-label { color: rgba(255,255,255,0.4); font-size: 0.75em; letter-spacing: 0.05em; width: 4.5em; flex-shrink: 0; } .profile-value { color: #fff; font-size: 0.88em; flex: 1; } .profile-readonly { background: rgba(255,255,255,0.04); border-radius: 4px; padding: 0.3em 0.6em; color: rgba(255,255,255,0.75); } /* 昵称编辑 */ .profile-nickname-input { flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; padding: 0.28em 0.6em; color: #fff; font-size: 0.88em; outline: none; box-sizing: border-box; } .profile-edit-btn, .profile-save-btn { background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; padding: 0.2em 0.4em; font-size: 0.85em; transition: color 0.2s; } .profile-edit-btn:hover { color: #21abca; } .profile-save-btn { color: #6bffb8; } .profile-save-btn:hover { color: #3fe89a; }