/* Scholan 官网共用样式。 所有方向性属性一律用逻辑属性（padding-inline / margin-inline-start / border-inline-start）， 这样阿拉伯语（ar）页面只需在 上标 dir="rtl"，排版自动成立，不需要另写一套镜像样式。 */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans","Segoe UI","Microsoft YaHei",sans-serif; --bg:#0b0d12; --fg:#eef1f6; --muted:#a8b1c2; --dim:#7c869a; --accent:#8fb0ff; --accent-soft:#b9caff; --line:rgba(255,255,255,.10); } html{scroll-behavior:smooth} body{ font-family:var(--sans); background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; } .wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:40px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* ---------- 首屏 ---------- */ .hero{ min-height:100vh;display:flex;align-items:center; background: radial-gradient(58% 52% at 74% 16%,rgba(88,120,255,.38),transparent 70%), radial-gradient(46% 46% at 14% 84%,rgba(150,96,255,.26),transparent 72%); } .center{text-align:center;max-width:820px} .kicker{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--accent)} h1{ font-size:clamp(34px,5.2vw,64px);line-height:1.14;letter-spacing:-.02em;font-weight:700;margin-top:18px; background:linear-gradient(96deg,#fff 24%,var(--accent-soft)); -webkit-background-clip:text;background-clip:text;color:transparent; } .lede{font-size:17px;line-height:1.85;color:var(--muted);margin:24px auto 0;max-width:640px} /* ---------- 词条卡：只有 原词 / 语意 / 等级 ---------- */ .cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:940px;margin:54px auto 0;text-align:start} .card{ border-radius:18px;padding:22px 22px 8px; background:rgba(255,255,255,.05);border:1px solid var(--line); backdrop-filter:blur(20px); box-shadow:0 40px 110px -50px rgba(88,120,255,.75),0 0 0 1px rgba(255,255,255,.03) inset; animation:floaty 9s ease-in-out infinite; } .card:nth-child(2){animation-delay:-4.5s} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .card .head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px} .card .head b{font-size:13px;font-weight:600;color:var(--accent)} .card .head span{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums} .row{padding-block:13px;border-top:1px solid rgba(255,255,255,.08)} /* 原词本身是外语（可能 RTL），单独标注方向，避免被页面方向影响 */ .w{display:flex;align-items:baseline;gap:10px} .w b{font-size:18px;font-weight:600;letter-spacing:-.01em;color:#fff} .badge{ display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;margin-inline-start:auto; background:rgba(143,176,255,.15);color:var(--accent-soft);font-variant-numeric:tabular-nums; } .d{font-size:13.5px;line-height:1.6;margin-top:7px;color:#b6bfd0} /* ---------- 语言说明 ---------- */ .langs{margin:30px auto 0;max-width:940px;font-size:13px;line-height:1.95;opacity:.72} .langs b,.langs strong{font-weight:600;color:var(--accent-soft)} /* ---------- 第二屏：三步 ---------- */ .band{padding:150px 0;background:#0e1118;border-top:1px solid rgba(255,255,255,.07)} .steps{display:grid;grid-template-columns:repeat(3,1fr);max-width:1120px;margin-inline:auto} .steps>div{padding-inline:48px} .steps>div+div{border-inline-start:1px solid rgba(255,255,255,.12)} .steps .n{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--accent);margin-bottom:16px} .steps h3{font-size:17px;font-weight:600;margin-bottom:14px;color:#fff} .steps p{font-size:14.5px;line-height:1.95;color:var(--muted)} .closing{max-width:720px;margin:104px auto 0;text-align:center;font-size:16px;line-height:1.9;color:var(--fg)} /* ---------- 页脚：语言切换 + 法律页 ---------- */ footer{padding:56px 0 72px;background:#0e1118;border-top:1px solid rgba(255,255,255,.07)} .foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .foot .brand{font-size:13px;color:var(--dim)} .legal{display:flex;gap:18px;font-size:13px} .legal a{color:var(--muted);text-decoration:none} .legal a:hover{color:#fff} .switcher{position:relative} .switcher summary{ list-style:none;cursor:pointer;font-size:13px;color:var(--muted); padding:7px 14px;border:1px solid var(--line);border-radius:999px; display:flex;align-items:center;gap:8px; } .switcher summary::-webkit-details-marker{display:none} .switcher summary:hover{color:#fff;border-color:rgba(255,255,255,.22)} .switcher[open] summary{color:#fff;border-color:rgba(255,255,255,.28)} .switcher ul{ position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;z-index:10; min-width:190px;max-height:320px;overflow:auto; background:rgba(20,22,28,.96);backdrop-filter:blur(16px); border:1px solid var(--line);border-radius:14px;padding:6px;list-style:none; } .switcher a{display:block;padding:8px 12px;border-radius:9px;font-size:13px;color:var(--muted);text-decoration:none} .switcher a:hover{background:rgba(255,255,255,.08);color:#fff} .switcher a[aria-current="true"]{color:var(--accent-soft);background:rgba(143,176,255,.10)} /* ---------- 窄屏 ---------- */ @media(max-width:900px){ .hero{min-height:auto;padding:110px 0 72px} .cards,.steps{grid-template-columns:1fr} .steps>div{padding-inline:0} .steps>div+div{border-inline-start:0;border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:34px} .closing{margin-top:72px} footer{padding:44px 0 56px} } @media(prefers-reduced-motion:reduce){*{animation:none !important}}