/* ============================================================ 《科幻电影与人工智能》课程章节页 · 共享设计系统字体：主流系统字体栈（PingFang / 微软雅黑 / Segoe UI 等）风格：电影感 · 暗夜霓虹 · 每课独立主题色 ============================================================ */ :root{ --bg0:#04060c; --bg1:#0a101d; --bg2:#101a2e; --ink:#eaf0f9; --ink-dim:#93a1b8; --ink-faint:#5d6b85; --line:rgba(130,160,220,.16); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg0);color:var(--ink); font-family:var(--sans);line-height:1.75; overflow-x:hidden;-webkit-font-smoothing:antialiased; } ::selection{background:var(--ac);color:#04100c} ::-webkit-scrollbar{width:9px} ::-webkit-scrollbar-track{background:var(--bg0)} ::-webkit-scrollbar-thumb{background:linear-gradient(var(--ac),#0a3a30);border-radius:6px} /* 每课主题色： */ body{--ac:#2de2c4;--ac2:#0a6b5c} body[data-accent]{--ac:attr(data-accent)} /* fallback, overridden below */ body[data-accent="cyan"]{--ac:#2de2c4;--ac2:#0a6b5c} body[data-accent="green"]{--ac:#37e87f;--ac2:#0a5c2e} body[data-accent="blue"]{--ac:#8ab4ff;--ac2:#274b8f} body[data-accent="fire"]{--ac:#ff8a5d;--ac2:#8f2f16} body[data-accent="sky"]{--ac:#7fd4ff;--ac2:#1d5f8f} body[data-accent="amber"]{--ac:#ffb340;--ac2:#8f5a00} body[data-accent="ice"]{--ac:#9ad4ff;--ac2:#1d4f7a} body[data-accent="mint"]{--ac:#b8ffd0;--ac2:#1d6b46} body[data-accent="lilac"]{--ac:#e9c6ff;--ac2:#6a2a8f} body[data-accent="peach"]{--ac:#ffd0a0;--ac2:#7a3d16} /* ---------- 背景层 ---------- */ .bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;animation:drift 16s ease-in-out infinite alternate} .o1{width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,var(--ac),transparent 65%)} .o2{width:38vw;height:38vw;right:-10vw;bottom:-12vw;background:radial-gradient(circle,var(--ac2),transparent 65%);animation-delay:-6s} @keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,4vh) scale(1.15)}} .gridline{position:absolute;inset:0;background-image:linear-gradient(rgba(120,150,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,220,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%)} .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .page{position:relative;z-index:2} /* ---------- 顶部导航 ---------- */ nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px 30px;transition:.35s} nav.scrolled{background:rgba(4,7,14,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .brand .mark{width:30px;height:30px;border:1px solid var(--ac);border-radius:8px;display:grid;place-items:center;font-weight:900;font-size:13px;color:var(--ac);box-shadow:0 0 18px color-mix(in srgb,var(--ac) 55%,transparent)} .brand .t{font-weight:800;font-size:12px;letter-spacing:2px} .brand .t b{color:var(--ac)} .crumbs{font-size:12px;color:var(--ink-faint);letter-spacing:1px} .crumbs b{color:var(--ink)} .back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-dim);font-size:13px;border:1px solid var(--line);padding:8px 14px;border-radius:8px;transition:.3s} .back:hover{color:var(--ac);border-color:var(--ac);box-shadow:0 0 18px color-mix(in srgb,var(--ac) 40%,transparent)} /* ---------- Hero ---------- */ .hero{min-height:86vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:130px 0 70px;position:relative} .kicker{font-family:var(--mono);font-size:12px;letter-spacing:4px;color:var(--ac);margin-bottom:20px;opacity:0;animation:rise .8s .05s forwards} .kicker::before{content:"// LESSON ";opacity:.55} h1{font-size:clamp(40px,7.5vw,92px);line-height:1.08;letter-spacing:1px;font-weight:900;margin-bottom:14px;opacity:0;animation:rise .8s .15s forwards} h1 .amp{color:var(--ac);text-shadow:0 0 34px color-mix(in srgb,var(--ac) 70%,transparent)} .en{font-family:var(--mono);font-size:clamp(13px,2.2vw,20px);letter-spacing:5px;color:var(--ink-dim);margin-bottom:26px;opacity:0;animation:rise .8s .25s forwards} .tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px;opacity:0;animation:rise .8s .35s forwards} .tags span{font-family:var(--mono);font-size:12px;padding:6px 13px;border-radius:7px;border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);color:var(--ac);letter-spacing:1px} .lede{max-width:700px;margin:0 auto;color:var(--ink-dim);font-size:16px;opacity:0;animation:rise .8s .45s forwards} .lede b{color:var(--ink)} .statrow{display:flex;gap:36px;justify-content:center;margin-top:46px;flex-wrap:wrap;opacity:0;animation:rise .8s .55s forwards} .st .n{font-size:30px;font-weight:800;letter-spacing:1px} .st .n em{color:var(--ac);font-style:normal} .st .l{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:2px;margin-top:2px} /* ---------- 通用区块 ---------- */ main{max-width:1180px;margin:0 auto;padding:0 28px} section{padding:64px 0;position:relative} .sec-head{margin-bottom:34px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap} .sec-no{font-family:var(--mono);color:var(--ac);font-size:12px;letter-spacing:3px} .sec-no::before{content:"[ "}.sec-no::after{content:" ]"} .sec-head h2{font-size:clamp(24px,3.4vw,38px);font-weight:800;letter-spacing:1px} .sec-head .sub{color:var(--ink-faint);font-size:13px;margin-left:auto} .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1;transform:none} /* 目标三卡 */ .goals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .gcard{border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:linear-gradient(180deg,rgba(16,26,46,.6),rgba(10,16,29,.5));transition:.35s} .gcard:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac) 60%,transparent);box-shadow:0 18px 44px rgba(0,0,0,.5)} .gcard .t{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--ac);margin-bottom:10px} .gcard h3{font-size:17px;font-weight:700;margin-bottom:8px} .gcard p{font-size:13.5px;color:var(--ink-dim)} /* 四维卡片 */ .dims{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .dim{border:1px solid var(--line);border-radius:16px;padding:26px 22px;background:var(--bg1);position:relative;overflow:hidden;transition:.35s} .dim::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 0%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 60%);opacity:0;transition:.35s} .dim:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac) 55%,transparent)} .dim:hover::before{opacity:1} .dim .ic{font-size:24px;margin-bottom:10px} .dim h3{font-size:16px;font-weight:700;margin-bottom:8px} .dim ul{list-style:none;font-size:13px;color:var(--ink-dim)} .dim li{padding:5px 0 5px 16px;position:relative} .dim li::before{content:"▸";position:absolute;left:0;color:var(--ac)} /* 名场面 */ .scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .scene{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--bg1);transition:.35s;position:relative} .scene:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-5px)} .scene .no{font-family:var(--mono);font-size:11px;color:var(--ac);letter-spacing:1px} .scene h3{font-size:15.5px;font-weight:700;margin:8px 0 6px} .scene p{font-size:12.8px;color:var(--ink-dim)} /* 核心概念 chips */ .concepts{display:flex;flex-wrap:wrap;gap:12px} .chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:13.5px;background:var(--bg1);transition:.3s;cursor:default} .chip b{color:var(--ac);font-weight:800} .chip:hover{border-color:var(--ac);box-shadow:0 0 16px color-mix(in srgb,var(--ac) 35%,transparent);transform:translateY(-2px)} /* 思辨题 */ .questions{display:grid;gap:14px} .q{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--bg1);transition:.3s} .q:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent)} .q .qn{font-family:var(--mono);font-size:13px;color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:8px} .q p{font-size:14.5px} /* 学习资源 */ .res{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .res a{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;color:var(--ink);background:var(--bg1);transition:.3s} .res a:hover{border-color:var(--ac);transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.5)} .res .ic{font-size:22px;color:var(--ac)} .res h4{font-size:15px;font-weight:700;margin-bottom:3px} .res p{font-size:12.3px;color:var(--ink-dim)} /* 上下课导航 */ .pager{max-width:1180px;margin:0 auto;padding:40px 28px 10px;display:flex;justify-content:space-between;gap:16px} .pager a{flex:1;display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:14px;padding:18px 22px;text-decoration:none;color:var(--ink);background:var(--bg1);transition:.3s} .pager a:hover{border-color:var(--ac);transform:translateY(-3px)} .pager a.next{text-align:right} .pager .lab{font-family:var(--mono);font-size:11px;color:var(--ac);letter-spacing:2px} .pager .tt{font-size:15px;font-weight:700} /* footer */ footer{border-top:1px solid var(--line);margin-top:50px;padding:44px 0 36px;text-align:center} footer .ft{font-weight:800;font-size:14px;letter-spacing:2px} footer .ft b{color:var(--ac)} footer .fs{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:1px;margin-top:8px} @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @media(max-width:960px){.dims{grid-template-columns:1fr 1fr}.scenes{grid-template-columns:1fr 1fr}} @media(max-width:640px){ .goals,.dims,.scenes,.res{grid-template-columns:1fr} .crumbs{display:none} nav{padding:14px 18px} } /* ============ 本课讲解视频（WebEmbedder 自动嵌入） ============ */ .lesson-videos-section{margin-top:8px} .lesson-videos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px} .lesson-video{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg1);transition:.35s} .lesson-video:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent);box-shadow:0 16px 40px rgba(0,0,0,.5);transform:translateY(-3px)} .lesson-video video{width:100%;display:block;aspect-ratio:16/9;background:#000} .lesson-video figcaption{padding:11px 14px;font-size:13px;color:var(--ink-dim)} @media(max-width:640px){.lesson-videos{grid-template-columns:1fr}} .lesson-video figcaption{font-weight:700} .lesson-video-text{margin:0;padding:10px 14px 14px;font-size:13px;color:var(--ink-dim);line-height:1.8;border-top:1px dashed var(--line)}