/* 网站样式：构建原创手绘奇幻游戏官网的首页视觉与响应式布局。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700;900&family=Playfair+Display:wght@600;700&display=swap');
:root { color: #1f2531; background: #f8ef9d; font-family: "Noto Serif SC", Georgia, serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; } a { color: inherit; text-decoration: none; }
.site-header { position: absolute; z-index: 2; top: 20px; left: 4%; right: 4%; min-height: 92px; display: flex; align-items: center; gap: 36px; padding: 18px 32px; color: #fff; background: rgba(27, 50, 48, .7); backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 270px; font-size: 27px; font-weight: 900; letter-spacing: .05em; line-height: 1; } .brand-mark { font-size: 42px; color: #f4e98b; } .brand small { display: block; margin-top: 7px; color: #f4e98b; font-family: "Playfair Display", serif; font-size: 10px; letter-spacing: .18em; }
nav { display: flex; align-items: center; justify-content: flex-end; gap: 26px; flex: 1; font-size: 14px; font-weight: 700; white-space: nowrap; } nav a { padding: 7px 0; opacity: .9; border-bottom: 2px solid transparent; } nav a:hover, nav .active { color: #f9ec71; border-color: #f9ec71; } .game-link { flex: 0 0 auto; padding: 10px 14px; border: 1px solid rgba(249, 236, 113, .75); color: #fff4a1; font-size: 13px; font-weight: 900; transition: background .2s, color .2s; } .game-link:hover { color: #263c38; background: #f9ec71; }
.hero { position: relative; min-height: 665px; padding: 192px max(9%, 100px) 54px; background: linear-gradient(180deg, rgba(8, 35, 39, .26), rgba(10, 31, 32, .4)), url('./assets/fantasy-hero.png') center/cover; color: #fff; } .hero::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(13, 32, 31, .55)); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; width: min(620px, 70%); margin: 0 auto; padding: 28px 40px 32px; text-align: center; border-top: 2px solid rgba(255,255,255,.8); border-bottom: 2px solid rgba(255,255,255,.8); background: rgba(20, 43, 47, .31); text-shadow: 0 3px 5px rgba(0,0,0,.45); } .hero-kicker, .section-kicker { margin: 0 0 12px; color: #f6e87d; font-family: "Playfair Display", serif; font-size: 12px; letter-spacing: .18em; } .hero-title { font-size: clamp(30px, 4vw, 52px); font-weight: 900; line-height: 1.18; } .hero-title strong { display: block; } .hero-copy { margin: 18px 0 0; font-size: 15px; }
.portal-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; width: min(1100px, 100%); margin: 76px auto 0; } .portal-grid a { display: flex; justify-content: space-between; align-items: center; min-height: 76px; padding: 18px 21px; color: #26302d; background: rgba(255, 253, 220, .84); font-size: 18px; font-weight: 900; transition: transform .2s, background .2s; } .portal-grid a:hover { transform: translateY(-5px); background: #fffbd4; } .portal-grid span { color: #70924d; }
.news { padding: 66px max(8%, 40px) 74px; background: #f8ef9d; } .news::before { content: ''; display: block; height: 18px; margin: -66px -10% 42px; background: #f8ef9d; clip-path: polygon(0 55%, 6% 20%, 14% 64%, 24% 10%, 34% 50%, 45% 4%, 58% 57%, 69% 16%, 79% 65%, 91% 5%, 100% 50%, 100% 100%, 0 100%); } .section-kicker { color: #789361; text-align: center; } .news h2 { margin: 0 0 38px; text-align: center; font-size: clamp(31px, 4vw, 44px); } .news-list { width: min(1020px, 100%); margin: 0 auto; border-top: 2px solid #4d4b31; }
.news-card { display: grid; grid-template-columns: 34% 1fr; min-height: 138px; border-bottom: 2px solid #4d4b31; padding: 11px 0; } .news-type { display: flex; align-items: center; justify-content: center; gap: 18px; color: #282340; background: #e0d348; font-size: 31px; font-weight: 900; } .news-type span { font-size: 28px; } .news-card > div:last-child { padding: 18px 30px; background: rgba(255,253,224,.67); } .news-card time { color: #6c7057; font-size: 12px; } .news-card h3 { margin: 6px 0 5px; font-size: 17px; } .news-card p { margin: 0; font-size: 13px; line-height: 1.65; }
.more { display: block; width: fit-content; margin: 30px auto 0; padding: 11px 34px; color: #fff; background: #779b57; font-size: 14px; font-weight: 700; } .more:hover { background: #5e8240; } footer { padding: 22px; text-align: center; color: #f9efae; background: #233f3d; font-size: 13px; }
.toast { position: fixed; z-index: 5; left: 50%; bottom: 32px; padding: 13px 22px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: #fff; background: rgba(28, 54, 50, .94); box-shadow: 0 10px 28px rgba(0,0,0,.28); font: 700 14px "Noto Serif SC", sans-serif; opacity: 0; pointer-events: none; transform: translate(-50%, 18px); transition: opacity .2s, transform .2s; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 820px) { .site-header { top: 10px; left: 3%; right: 3%; min-height: auto; padding: 13px 16px; } .brand { min-width: 0; font-size: 20px; } .brand-mark { font-size: 28px; } .brand small, nav { display: none; } .game-link { margin-left: auto; padding: 8px 10px; font-size: 12px; } .hero { min-height: 680px; padding: 150px 20px 42px; background-position: 38% center; } .hero-inner { width: 100%; padding: 23px 18px; } .portal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 52px; } .portal-grid a { min-height: 58px; padding: 12px; font-size: 15px; } .portal-grid a:last-child { grid-column: 1 / -1; } .news { padding: 50px 18px; } .news-card { grid-template-columns: 1fr; } .news-type { justify-content: flex-start; padding: 16px 22px; font-size: 26px; } .news-type span { font-size: 22px; } .news-card > div:last-child { padding: 17px 22px; } }