README / style.css
miyuki17's picture
feat(course): add EN / 中文 switch to WR92 Course student hub
ab48a50 verified
Raw History Blame Contribute Delete
3.66 kB
:root{color-scheme:light;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#1b2537;background:#fbfcff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}main{max-width:1160px;margin:auto;padding:0 24px}a{color:#1748b0}
.header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:22px 0;border-bottom:1px solid #e1e6ef}
.brand{color:#17294d;text-decoration:none;font-size:1.1rem;font-weight:740;white-space:nowrap}
.header-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.navlink{font-size:.8rem;text-decoration:none;border-radius:8px;border:1px solid #dce5f4;padding:8px 10px;background:#fff}
.navlink:hover{background:#eaf1ff}
.language-switch{display:flex;flex:none;border:1px solid #b7c9e7;padding:3px;gap:2px;border-radius:11px;background:#fff}
.language-option{appearance:none;border:0;background:transparent;color:#3a547a;font-family:inherit;font-size:.81rem;font-weight:680;padding:7px 10px;border-radius:8px;cursor:pointer;min-height:36px}
.language-option[aria-pressed="true"]{background:#2357d5;color:white}
.language-option:disabled{cursor:default}
.language-option:not(:disabled):focus-visible{outline:3px solid #76a4ff;outline-offset:2px}
.language-option:not(:disabled):hover:not([aria-pressed="true"]){background:#eaf1ff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero{padding:72px 0 54px;max-width:800px}
.eyebrow{font-size:.8rem;letter-spacing:.16em;color:#3862a9;font-weight:700}
h1{font-size:clamp(2.8rem,7.8vw,5.2rem);line-height:1.09;letter-spacing:-.055em;margin:16px 0}
p{line-height:1.62}
.lede{font-size:clamp(1.1rem,2vw,1.3rem);max-width:660px;color:#4c5870}
.cn{color:#5b6679}
.start{display:inline-block;background:#2357d5;padding:13px 19px;border-radius:10px;color:white;font-weight:700;text-decoration:none;margin-top:12px}
.start:hover{background:#1947b6}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{background:#fff;border:1px solid #dde5ef;border-radius:18px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;min-height:315px;box-shadow:0 4px 22px rgba(44,71,110,.04)}
.serial{font-size:.78rem;color:#4264a4;font-weight:800}
.card h3{margin:10px 0 0;font-size:1.55rem}
.card p{color:#526078}
.card .zh{font-size:.89rem;margin:4px 0}
.card .quota{font-size:.86rem;color:#2354a4;border-top:1px solid #e8edf4;padding-top:10px;width:100%;margin-top:auto}
.card a{font-weight:720;margin-top:12px;text-decoration:none}
.card a:hover{text-decoration:underline}
.policy{background:#f1f6ff;border:1px solid #dbe6f7;border-radius:20px;margin:32px 0;padding:25px 30px}
.policy h2{font-size:1.7rem;margin:3px 0}
.pol-cols{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.pol-cols h3{font-size:1.05rem}
.policy p{font-size:.96rem;color:#4b5870}
.policy-foot{border-top:1px solid #d5e1f3;padding-top:15px}
.policy-source{display:inline-block;font-weight:650;margin-top:4px}
footer{border-top:1px solid #e1e6ef;font-size:.88rem;padding:24px 0;margin-top:30px;color:#647084}
@media(max-width:900px){.header{grid-template-columns:1fr auto}.header-nav{grid-column:1 / -1;grid-row:2;justify-content:flex-start}.language-switch{grid-column:2;grid-row:1}}
@media(max-width:760px){main{padding:0 16px}.header{gap:10px}.hero{padding:50px 0 35px}.grid,.pol-cols{grid-template-columns:1fr}.card{min-height:auto}.policy{padding:20px}.header-nav{gap:7px}.navlink{font-size:.77rem}}
@media(max-width:350px){.brand{font-size:.95rem}.language-option{padding:6px 7px}.navlink{padding:6px 7px}}