:root { --ink:#262626; --paper:#fffef9; --yellow:#f5b300; --green:#cfe1d5; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans","Noto Sans SC",sans-serif; } .page-shell { overflow:hidden; }
.site-header { width:min(1120px,calc(100% - 48px)); margin:auto; padding:21px 0; display:flex; align-items:center; border-bottom:1.5px solid var(--ink); } .brand { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-weight:800; font-size:20px; letter-spacing:-1px; } .brand img { width:34px; height:34px; object-fit:contain; } .brand i { font-style:normal; } nav { display:flex; gap:25px; margin-left:auto; margin-right:25px; } nav a { color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; } nav a:hover { text-decoration:underline; text-underline-offset:5px; } .language-toggle { border:1.5px solid var(--ink); padding:5px 8px; border-radius:30px; background:var(--paper); display:flex; align-items:center; gap:5px; font:700 12px/1 "DM Sans",sans-serif; cursor:pointer; } .toggle-dot { width:14px; height:14px; background:var(--yellow); border-radius:50%; transition:.25s; } html[lang="en"] .toggle-dot { transform:translateX(31px); } html[lang="en"] .lang-zh,html:not([lang="en"]) .lang-en { opacity:.45; }
.hero { width:min(1120px,calc(100% - 48px)); min-height:530px; margin:auto; display:grid; grid-template-columns:1fr .7fr; gap:60px; align-items:center; } .eyebrow { margin:0 0 17px; font-size:12px; font-weight:800; letter-spacing:.12em; } h1,h2,h3,p { margin-top:0; } h1 { font-family:"Noto Sans SC","DM Sans",sans-serif; font-size:clamp(44px,5.6vw,70px); line-height:1.28; letter-spacing:-.075em; margin-bottom:22px; } h1 em,h2 em { font-style:normal; background:linear-gradient(transparent 64%,var(--yellow) 64%); padding:0 .03em; } .intro { max-width:480px; font-size:17px; line-height:1.8; margin-bottom:31px; } .button { display:inline-flex; align-items:center; gap:28px; padding:14px 19px; border-radius:4px; border:1.5px solid var(--ink); text-decoration:none; font-weight:700; color:var(--ink); transition:transform .2s; }.button:hover { transform:translate(-3px,-3px); box-shadow:4px 4px 0 var(--ink); }.primary { background:var(--yellow); }.hero-mark { width:270px; height:270px; border:2px solid var(--ink); border-radius:50%; justify-self:end; transform:rotate(8deg); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }.hero-mark span { font-weight:800; font-size:100px; letter-spacing:-9px; line-height:.8; }.hero-mark i { font-style:normal; font-weight:700; font-size:23px; letter-spacing:-1px; }.hero-mark b { position:absolute; bottom:27px; right:34px; font-size:34px; }
.promise { padding:66px 24px; background:var(--green); border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); display:flex; justify-content:center; align-items:center; gap:35px; text-align:center; }.promise p { margin:0; font-size:clamp(22px,3vw,34px); line-height:1.5; font-weight:700; letter-spacing:-.04em; }.promise strong { text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--yellow); text-underline-offset:4px; }.spark { font-size:20px; }
.games { width:min(1120px,calc(100% - 48px)); margin:auto; padding:112px 0; display:grid; grid-template-columns:.8fr 1.2fr; align-items:start; gap:80px; }.section-heading { position:sticky; top:30px; }.section-heading h2,.connect h2 { font-family:"Noto Sans SC","DM Sans",sans-serif; font-size:clamp(34px,4vw,51px); letter-spacing:-.07em; line-height:1.22; margin-bottom:18px; }.section-heading > p:last-child,.connect p { line-height:1.75; }.game-grid { display:grid; gap:18px; }.game-card { min-height:267px; padding:26px 29px; border:1.5px solid var(--ink); border-radius:5px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto 1fr auto; text-decoration:none; color:var(--ink); transition:transform .2s,box-shadow .2s; }.game-card:hover { transform:translate(-4px,-4px); box-shadow:7px 7px 0 var(--ink); }.yellow-card { background:var(--yellow); }.green-card { background:var(--green); }.game-number { font-size:13px; font-weight:700; }.game-symbol { font-size:38px; line-height:.6; }.game-kicker { grid-column:1/-1; margin:19px 0 5px; font-weight:700; letter-spacing:.07em; font-size:12px; }.game-card h3 { font-family:"Noto Sans SC","DM Sans",sans-serif; font-size:32px; line-height:1.18; letter-spacing:-.07em; margin:0; }.game-card > p:not(.game-kicker) { grid-column:2; grid-row:3; align-self:end; max-width:255px; margin:0; font-size:14px; line-height:1.65; }.game-link { grid-column:1/-1; margin-top:20px; border-top:1.5px solid var(--ink); padding-top:13px; font-weight:700; font-size:14px; display:flex; justify-content:space-between; }.game-link b { font-size:19px; line-height:.7; }
.connect { width:min(1120px,calc(100% - 48px)); margin:0 auto 65px; padding:51px 55px; border:1.5px solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; }.connect h2 { margin-bottom:8px; }.connect p { margin:0; }.dark { background:var(--ink); color:var(--paper); position:relative; z-index:1; }.connect-mark { position:absolute; right:38px; top:-34px; font-size:190px; font-weight:800; letter-spacing:-21px; color:var(--green); line-height:1; } footer { width:min(1120px,calc(100% - 48px)); border-top:1px solid var(--ink); margin:auto; padding:20px 0 30px; font-size:12px; display:flex; justify-content:space-between; }
@media (max-width:760px) { .site-header,.hero,.games,.connect,footer { width:calc(100% - 32px); }.site-header { padding:15px 0; }.brand img { width:30px;height:30px; } nav { display:none; }.hero { min-height:0; padding:74px 0 68px; display:block; }.hero-mark { width:146px; height:146px; margin:53px 12px 0 auto; }.hero-mark span { font-size:61px; letter-spacing:-6px; }.hero-mark i { font-size:15px; }.hero-mark b { font-size:23px; bottom:12px; right:18px; }.promise { padding:48px 14px; gap:12px; }.spark { font-size:14px; }.games { display:block; padding:75px 0; }.section-heading { position:static; margin-bottom:35px; }.game-card { min-height:250px; padding:21px; }.game-card h3 { font-size:29px; }.game-card > p:not(.game-kicker) { grid-column:1/-1; grid-row:3; max-width:95%; align-self:end; }.connect { display:block; padding:38px 25px 105px; margin-bottom:38px; }.dark { margin-top:25px; }.connect-mark { font-size:130px; right:21px; top:auto; bottom:-38px; } }