|
|
| 第154行： |
第154行： |
| border-left: 3px solid #d0d7de !important; | | border-left: 3px solid #d0d7de !important; |
| background: #ffffff !important; | | background: #ffffff !important; |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* Noblecraft homepage V2. Add to MediaWiki:Common.css */
| |
| .nc-home-v2 {
| |
| max-width: 1180px;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| .nc-home-v2 a {
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .nc-hero-v2 {
| |
| display: grid;
| |
| grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
| |
| gap: 28px;
| |
| align-items: center;
| |
| margin: 8px 0 22px;
| |
| padding: 30px 34px;
| |
| background: rgba(255,255,255,.62);
| |
| border: 1px solid rgba(255,255,255,.82);
| |
| box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px -28px rgba(40,48,62,.55);
| |
| backdrop-filter: blur(20px) saturate(135%);
| |
| -webkit-backdrop-filter: blur(20px) saturate(135%);
| |
| }
| |
|
| |
| .nc-kicker {
| |
| color: #0f4c5c;
| |
| font-size: .86rem;
| |
| font-weight: 800;
| |
| letter-spacing: 0;
| |
| text-transform: uppercase;
| |
| margin-bottom: 8px;
| |
| }
| |
|
| |
| .nc-title {
| |
| color: #24282f;
| |
| font-size: 2.25rem;
| |
| font-weight: 850;
| |
| line-height: 1.12;
| |
| margin: 0 0 10px;
| |
| }
| |
|
| |
| .nc-subtitle {
| |
| color: #4f5663;
| |
| font-size: 1.04rem;
| |
| line-height: 1.7;
| |
| max-width: 680px;
| |
| }
| |
|
| |
| .nc-hero-actions {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 10px;
| |
| margin-top: 18px;
| |
| }
| |
|
| |
| .nc-action {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| min-height: 38px;
| |
| padding: 0 16px;
| |
| border: 1px solid #cbd3d8;
| |
| background: rgba(255,255,255,.72);
| |
| color: #27313b;
| |
| font-weight: 700;
| |
| box-shadow: 0 8px 20px -16px rgba(20,30,45,.55);
| |
| transition: transform .15s ease, background .15s ease, border-color .15s ease;
| |
| }
| |
|
| |
| .nc-action:hover {
| |
| transform: translateY(-1px);
| |
| background: #fff;
| |
| border-color: #8fa6ad;
| |
| }
| |
|
| |
| .nc-action-primary {
| |
| background: #0f4c5c;
| |
| border-color: #0f4c5c;
| |
| color: #fff;
| |
| }
| |
|
| |
| .nc-action-primary:hover {
| |
| background: #123f4c;
| |
| border-color: #123f4c;
| |
| }
| |
|
| |
| .nc-hero-art {
| |
| text-align: center;
| |
| }
| |
|
| |
| .nc-hero-art img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| filter: drop-shadow(0 18px 24px rgba(40,48,62,.20));
| |
| }
| |
|
| |
| .nc-status-row {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| gap: 12px;
| |
| margin: 0 0 22px;
| |
| }
| |
|
| |
| .nc-status-item {
| |
| padding: 12px 14px;
| |
| background: rgba(255,255,255,.55);
| |
| border: 1px solid rgba(210,216,222,.9);
| |
| color: #3f4650;
| |
| font-weight: 650;
| |
| text-align: center;
| |
| }
| |
|
| |
| .nc-section-title {
| |
| margin: 24px 0 12px;
| |
| color: #24282f;
| |
| font-size: 1.18rem;
| |
| font-weight: 850;
| |
| }
| |
|
| |
| .nc-steps {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| gap: 14px;
| |
| }
| |
|
| |
| .nc-step {
| |
| display: flex;
| |
| gap: 12px;
| |
| align-items: flex-start;
| |
| padding: 16px;
| |
| background: rgba(255,255,255,.60);
| |
| border: 1px solid rgba(210,216,222,.9);
| |
| box-shadow: 0 12px 26px -22px rgba(40,48,62,.55);
| |
| }
| |
|
| |
| .nc-step-num {
| |
| flex: 0 0 32px;
| |
| width: 32px;
| |
| height: 32px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| background: #0f4c5c;
| |
| color: #fff;
| |
| font-weight: 850;
| |
| }
| |
|
| |
| .nc-step-body {
| |
| font-weight: 800;
| |
| color: #263039;
| |
| }
| |
|
| |
| .nc-step-body span {
| |
| display: block;
| |
| margin-top: 5px;
| |
| color: #69717d;
| |
| font-size: .92rem;
| |
| font-weight: 500;
| |
| line-height: 1.55;
| |
| }
| |
|
| |
| .nc-portal-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, minmax(0, 1fr));
| |
| gap: 16px;
| |
| }
| |
|
| |
| .nc-portal-card {
| |
| background: rgba(255,255,255,.58);
| |
| border: 1px solid rgba(255,255,255,.82);
| |
| box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 32px -24px rgba(40,48,62,.55);
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .nc-portal-head {
| |
| padding: 13px 16px;
| |
| color: #fff;
| |
| font-size: 1.02rem;
| |
| font-weight: 850;
| |
| }
| |
|
| |
| .nc-tone-lobby .nc-portal-head { background: #b86f2a; }
| |
| .nc-tone-play .nc-portal-head { background: #315f9f; }
| |
| .nc-tone-community .nc-portal-head { background: #7c4d9f; }
| |
| .nc-tone-apply .nc-portal-head { background: #a7435d; }
| |
|
| |
| .nc-portal-desc {
| |
| padding: 13px 16px 6px;
| |
| color: #69717d;
| |
| font-size: .92rem;
| |
| line-height: 1.55;
| |
| }
| |
|
| |
| .nc-portal-card ul {
| |
| list-style: none !important;
| |
| margin: 0 !important;
| |
| padding: 5px 0 10px !important;
| |
| }
| |
|
| |
| .nc-portal-card li {
| |
| margin: 0 !important;
| |
| }
| |
|
| |
| .nc-portal-card li a {
| |
| display: block;
| |
| padding: 7px 16px;
| |
| color: #333942;
| |
| font-weight: 620;
| |
| transition: background .15s ease, padding-left .15s ease;
| |
| }
| |
|
| |
| .nc-portal-card li a:hover {
| |
| background: rgba(95,112,130,.12);
| |
| padding-left: 20px;
| |
| }
| |
|
| |
| .nc-feature-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, minmax(0, 1fr));
| |
| gap: 14px;
| |
| }
| |
|
| |
| .nc-feature {
| |
| padding: 16px;
| |
| background: rgba(255,255,255,.58);
| |
| border: 1px solid rgba(210,216,222,.9);
| |
| box-shadow: 0 12px 28px -24px rgba(40,48,62,.55);
| |
| font-weight: 850;
| |
| color: #263039;
| |
| }
| |
|
| |
| .nc-feature-label {
| |
| display: inline-block;
| |
| margin-bottom: 8px;
| |
| padding: 3px 8px;
| |
| background: #edf3f5;
| |
| color: #0f4c5c;
| |
| font-size: .78rem;
| |
| font-weight: 850;
| |
| }
| |
|
| |
| .nc-feature span {
| |
| display: block;
| |
| margin-top: 8px;
| |
| color: #69717d;
| |
| font-size: .92rem;
| |
| font-weight: 500;
| |
| line-height: 1.55;
| |
| }
| |
|
| |
| .nc-footer-note {
| |
| margin: 24px 0 8px;
| |
| padding: 14px 18px;
| |
| background: rgba(255,255,255,.50);
| |
| border: 1px solid rgba(210,216,222,.85);
| |
| color: #b86f2a;
| |
| font-weight: 800;
| |
| text-align: center;
| |
| }
| |
|
| |
| @media (max-width: 980px) {
| |
| .nc-portal-grid,
| |
| .nc-feature-grid {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 760px) {
| |
| .nc-hero-v2 {
| |
| grid-template-columns: 1fr;
| |
| padding: 22px 18px;
| |
| }
| |
| .nc-hero-art {
| |
| order: -1;
| |
| }
| |
| .nc-hero-art img {
| |
| max-width: 190px;
| |
| }
| |
| .nc-title {
| |
| font-size: 1.85rem;
| |
| }
| |
| .nc-status-row,
| |
| .nc-steps,
| |
| .nc-portal-grid,
| |
| .nc-feature-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| .nc-status-item {
| |
| text-align: left;
| |
| }
| |
| } | | } |