/* ============================================================ 屏墩墩·县（市）域AI赋能官 pddun.com.cn 全站样式 v1.1 —— 支持浅色/深色双主题 切换方式： 或 body[data-theme="light"] ============================================================ */ /* ---- 默认深色主题变量 ---- */ :root{ --bg:#0A0E1A; --bg2:#0D1117; --bg3:#11151f; --card:#141B2D; --card2:#161B22; --card-hover:#1a2238; --gold:#D4AF37; --gold2:#C9A227; --gold-soft:rgba(212,175,55,.12); --gold-grad:linear-gradient(135deg,#D4AF37,#F5E6A3); --green:#2EA043; --green-soft:rgba(46,160,67,.12); --blue:#4A90E2; --blue-soft:rgba(74,144,226,.12); --text:#E6E6E6; --heading:#FFFFFF; --muted:#8B949E; --mute2:#6E7681; --border:#2D333B; --border2:#30363D; --border-hover:#3e4754; --input-bg:#0A0E1A; --input-border:#30363D; --input-focus-border:var(--gold); --note-bg:rgba(212,175,55,.1); --note-border:rgba(212,175,55,.4); --warn-bg:rgba(210,153,34,.1); --warn-border:rgba(210,153,34,.4); --shadow-card:0 14px 34px rgba(0,0,0,.45); --shadow-nav:0 4px 24px rgba(0,0,0,.5); --shadow-gold:0 8px 22px rgba(212,175,55,.26); --radius:12px; --maxw:1200px; --pad:24px; --gap:24px; --font:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-num:"DIN Alternate","Bahnschrift",Impact,Arial Black,Arial,sans-serif; } /* ---- 浅色主题变量覆盖 ---- */ [data-theme="light"]{ --bg:#F4F5F8; --bg2:#FFFFFF; --bg3:#ECEEF2; --card:#FFFFFF; --card2:#F8F9FB; --card-hover:#FFFFFF; --text:#1A1A1A; --heading:#0F1115; --muted:#5A5A5A; --mute2:#8B949E; --border:#E5E7EB; --border2:#D1D5DB; --border-hover:#9CA3AF; --input-bg:#FFFFFF; --input-border:#D1D5DB; --input-focus-border:var(--gold2); --note-bg:rgba(212,175,55,.08); --note-border:rgba(212,175,55,.45); --warn-bg:rgba(210,153,34,.08); --warn-border:rgba(210,153,34,.45); --shadow-card:0 10px 28px rgba(0,0,0,.09); --shadow-nav:0 2px 12px rgba(0,0,0,.08); --shadow-gold:0 8px 22px rgba(212,175,55,.35); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:90px} body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s} a{color:inherit;text-decoration:none;transition:color .2s} a:hover{color:var(--gold)} img{max-width:100%;display:block} ul,ol{list-style:none} h1,h2,h3,h4{color:var(--heading);line-height:1.3;font-weight:700} .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .gold{color:var(--gold)}.muted{color:var(--muted)}.success{color:var(--green)} .center{text-align:center} .num{font-family:var(--font-num);letter-spacing:.5px} /* ================= NAV ================= */ .nav{position:sticky;top:0;z-index:100;background:rgba(10,14,26,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:.3s} [data-theme="light"] .nav{background:rgba(255,255,255,.9)} .nav.scrolled{background:rgba(10,14,26,.96);box-shadow:var(--shadow-nav)} [data-theme="light"] .nav.scrolled{background:rgba(255,255,255,.98)} .nav .inner{display:flex;align-items:center;gap:20px;height:70px} .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;white-space:nowrap;color:var(--heading)} .logo .nav-logo-img{height:40px;width:auto;border-radius:8px;object-fit:contain} .logo b{color:var(--gold)} .nav .menu{display:flex;gap:4px;margin-left:auto;align-items:center} .nav .menu a{padding:8px 14px;border-radius:8px;font-size:15px;color:var(--text);white-space:nowrap} .nav .menu a:hover,.nav .menu a.active{color:var(--gold);background:var(--gold-soft)} .nav .nav-right{display:flex;align-items:center;gap:10px;margin-left:8px} .nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--border);color:var(--text);font-size:20px;width:40px;height:40px;border-radius:8px;cursor:pointer} /* 主题切换按钮 */ .theme-toggle{display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:transparent;color:var(--muted);padding:8px 14px;border-radius:20px;cursor:pointer;font-size:14px;transition:.2s} .theme-toggle:hover{border-color:var(--gold);color:var(--gold)} .theme-toggle .icon{font-size:15px} /* ================= BUTTONS ================= */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:700;font-size:15px;padding:13px 28px;border-radius:30px;cursor:pointer;border:1px solid transparent;transition:.24s} .btn-gold{background:var(--gold-grad);color:#1a1206;box-shadow:var(--shadow-gold)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(212,175,55,.42);color:#1a1206} .btn-outline{border-color:var(--gold);color:var(--gold);background:transparent} .btn-outline:hover{background:var(--gold-soft);transform:translateY(-2px)} .btn-ghost{border-color:var(--border2);color:var(--muted);background:transparent} .btn-ghost:hover{color:var(--gold);border-color:var(--gold)} .btn-sm{padding:9px 18px;font-size:14px} .btn-block{width:100%} .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important} /* ================= HERO ================= */ .hero{position:relative;overflow:hidden;padding:90px 0 70px;background:linear-gradient(135deg,#0A0E1A 0%,#0D1117 55%,#141B2D 100%)} .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 78% -8%,rgba(212,175,55,.16),transparent),radial-gradient(700px 380px at 8% 108%,rgba(46,160,67,.1),transparent);pointer-events:none} [data-theme="light"] .hero{background:linear-gradient(135deg,#F4F5F8 0%,#FFFFFF 55%,#EFF1F5 100%)} [data-theme="light"] .hero::before{background:radial-gradient(900px 420px at 78% -8%,rgba(212,175,55,.14),transparent),radial-gradient(700px 380px at 8% 108%,rgba(46,160,67,.07),transparent)} .hero .container{position:relative} .badge{display:inline-block;font-size:13px;letter-spacing:1.5px;color:var(--gold);border:1px solid rgba(212,175,55,.4);border-radius:20px;padding:6px 16px;margin-bottom:22px} .hero h1{font-size:clamp(30px,4.6vw,50px);font-weight:900;margin-bottom:18px;color:var(--heading)} .hero h1 .hl{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} [data-theme="light"] .hero h1 .hl{background:none;-webkit-background-clip:initial;background-clip:initial;color:#000000} .hero h1 .hl.big{font-size:1.25em;display:inline-block;vertical-align:baseline;margin:0 2px} .hero .sub{font-size:clamp(16px,2vw,21px);color:var(--gold);font-weight:600;margin-bottom:10px} .hero .sub2{font-size:15px;color:var(--muted);max-width:720px;margin:0 auto 32px} .hero .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:44px} /* ================= STATS ================= */ .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);max-width:1000px;margin:0 auto} .stat{text-align:center;padding:20px 10px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(20,27,45,.6)} [data-theme="light"] .stat{background:rgba(255,255,255,.75);box-shadow:0 2px 10px rgba(0,0,0,.05)} .stat .v{font-family:var(--font-num);font-size:30px;font-weight:900;color:var(--gold);line-height:1.1} .stat .l{font-size:13px;color:var(--muted);margin-top:6px} /* ================= SECTIONS ================= */ section{padding:80px 0;transition:background .25s} .sec-alt{background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)} [data-theme="light"] .sec-alt{background:linear-gradient(180deg,rgba(0,0,0,.03),transparent)} .sec-head{text-align:center;margin-bottom:52px} .sec-head .tag{color:var(--gold);font-weight:700;letter-spacing:1px;font-size:14px} .sec-head h2{font-size:clamp(24px,3.2vw,34px);font-weight:900;margin:10px 0 12px;color:var(--heading)} .sec-head p{color:var(--muted)} /* ================= CARDS ================= */ .grid{display:grid;gap:var(--gap)} .g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));justify-content:center} .g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));justify-content:center} .g4{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));justify-content:center} .g5{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));justify-content:center} .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:.24s} .card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-card);background:var(--card-hover)} .card .ic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:23px;background:var(--gold-soft);margin-bottom:14px} .card h3{font-size:19px;margin-bottom:8px;color:var(--heading)} .card p{color:var(--muted);font-size:14.5px} .card .amt{font-family:var(--font-num);font-size:25px;font-weight:900;color:var(--gold);margin:6px 0} .tagline{display:inline-block;font-size:12px;font-weight:700;color:#1a1206;background:var(--gold-grad);border-radius:20px;padding:3px 11px;margin-bottom:8px} .tagline.green{background:var(--green);color:#fff} /* ================= NOTE BOX ================= */ .note{background:var(--note-bg);border:1px solid var(--note-border);border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;color:var(--text);font-size:15px} .note b{color:var(--gold)} .note.warn{background:var(--warn-bg);border-color:var(--warn-border);border-left-color:var(--warn-border)} .note.warn b{color:#B45309} [data-theme="light"] .note.warn b{color:#B45309} /* ================= TABLE ================= */ .tbl-wrap{overflow-x:auto} table.tbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);font-size:15px} table.tbl th,table.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)} table.tbl th{background:rgba(212,175,55,.1);color:var(--gold);font-weight:700;white-space:nowrap} table.tbl tr:last-child td{border-bottom:none} table.tbl td b{color:var(--gold)} table.tbl tbody tr:hover{background:rgba(128,128,128,.04)} /* ================= STEPS / TIMELINE ================= */ .steps{counter-reset:s;display:grid;gap:16px} .step{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px} .step .n{counter-increment:s;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--gold-grad);color:#1a1206;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:19px} .step .n::before{content:counter(s)} .step h4{font-size:17px;margin-bottom:5px;color:var(--heading)} .step p{color:var(--muted);font-size:14.5px} .timeline{position:relative;padding-left:34px} .timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--gold),rgba(212,175,55,.15))} .tl-item{position:relative;margin-bottom:26px} .tl-item::before{content:"";position:absolute;left:-29px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.18)} .tl-item h4{font-size:18px;margin-bottom:5px;color:var(--heading)} .tl-item p{color:var(--muted);font-size:14.5px} /* ================= ACCORDION (FAQ) ================= */ .acc{display:grid;gap:12px} .acc-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .acc-item[open]{border-color:var(--gold)} .acc-item summary{cursor:pointer;padding:17px 20px;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--heading)} .acc-item summary::-webkit-details-marker{display:none} .acc-item summary::after{content:"+";color:var(--gold);font-size:23px;font-weight:700;flex:0 0 auto} .acc-item[open] summary::after{content:"−"} .acc-body{padding:0 20px 18px;color:var(--muted);font-size:15px} .cat{font-size:12px;color:var(--gold);border:1px solid rgba(212,175,55,.4);border-radius:20px;padding:2px 10px;margin-left:10px;white-space:nowrap;font-weight:400} .filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:30px} .filter{padding:8px 18px;border:1px solid var(--border);border-radius:22px;font-size:14px;cursor:pointer;background:transparent;color:var(--muted);transition:.2s;font-family:var(--font)} .filter:hover{color:var(--gold);border-color:var(--gold)} .filter.active{background:var(--gold-grad);color:#1a1206;border-color:transparent;font-weight:700} /* ================= FORM ================= */ .form-wrap{max-width:780px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:34px} .frow{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .fgroup{margin-bottom:18px} .fgroup.full{grid-column:1/-1} label.fl{display:block;font-size:14.5px;color:var(--heading);margin-bottom:7px;font-weight:600} label.fl .req{color:var(--gold);margin-left:3px} input[type=text],input[type=tel],input[type=email],select,textarea{width:100%;background:var(--input-bg);border:1px solid var(--input-border);border-radius:10px;padding:13px 15px;color:var(--text);font-size:15px;font-family:var(--font);transition:.2s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--gold-soft)} ::placeholder{color:var(--mute2)} .hint{font-size:12.5px;color:var(--mute2);margin-top:5px} .err{font-size:12.5px;color:#F85149;margin-top:5px;display:none} .fgroup.invalid input,.fgroup.invalid select{border-color:#F85149} .checks{display:grid;gap:12px;margin:22px 0} .chk{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--muted);cursor:pointer;line-height:1.6} .chk input{margin-top:3px;width:17px;height:17px;accent-color:var(--gold);flex:0 0 auto} .chk a{color:var(--gold);text-decoration:underline} .opt-grid{display:flex;gap:10px;flex-wrap:wrap} .opt{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:1px solid var(--border2);border-radius:22px;font-size:14px;cursor:pointer;transition:.2s;color:var(--muted)} .opt:hover{border-color:var(--gold);color:var(--gold)} .opt input{accent-color:var(--gold)} .opt.sel{border-color:var(--gold);background:var(--gold-soft);color:var(--gold)} /* range slider */ .slider-row{display:grid;gap:6px;margin-bottom:20px} .slider-head{display:flex;justify-content:space-between;align-items:center;font-size:14.5px} .slider-head .val{font-family:var(--font-num);color:var(--gold);font-weight:700;font-size:17px} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--border2);outline:none} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold-grad);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)} input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);cursor:pointer;border:none} /* ================= CALCULATOR RESULT ================= */ .calc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap);align-items:start} .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px} .panel h3{font-size:19px;margin-bottom:20px;color:var(--gold)} .total-box{text-align:center;padding:26px;background:linear-gradient(135deg,rgba(212,175,55,.14),transparent);border:1px solid rgba(212,175,55,.35);border-radius:var(--radius);margin-bottom:22px} .total-box .lb{font-size:14px;color:var(--muted)} .total-box .big{font-family:var(--font-num);font-size:46px;font-weight:900;color:var(--gold);line-height:1.15} .total-box .sm{font-size:13px;color:var(--mute2);margin-top:6px} .pie-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center} .pie{width:170px;height:170px;border-radius:50%;flex:0 0 auto;background:#2D333B} .legend{display:grid;gap:9px;font-size:14px} .legend div{display:flex;align-items:center;gap:9px;color:var(--muted)} .legend i{width:13px;height:13px;border-radius:3px;display:inline-block;flex:0 0 auto} .legend b{color:var(--heading);margin-left:2px} /* ================= BACK TO TOP ================= */ .totop{position:fixed;right:26px;bottom:26px;width:48px;height:48px;border-radius:50%;background:var(--gold-grad);color:#1a1206;border:none;font-size:22px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:90;box-shadow:0 6px 20px rgba(0,0,0,.45)} .totop.show{display:flex} .totop:hover{transform:translateY(-3px)} /* ================= FOOTER v2（集团官网同款） ================= */ .foot{background:#E8E4DD;color:#2D2A24;border-top:1px solid #D7D2C9;padding:58px 0 0;margin-top:20px;font-size:15px} .foot a{color:#2D2A24} .foot a:hover{color:#B08D2B} .foot .fg{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px} .foot .brand .logo-txt{font-size:26px;font-weight:900;color:#B08D2B;margin-bottom:10px;letter-spacing:.5px} .foot .brand .company{font-weight:700;font-size:15px;margin-bottom:8px;color:#2D2A24} .foot .brand .slogan{color:#5C574E;font-size:14px} .foot h4{font-size:15px;font-weight:700;color:#B08D2B;margin-bottom:18px} .foot p,.foot li{color:#5C574E;font-size:14px;line-height:1.8} .foot ul{display:grid;gap:8px} .foot li a{color:#5C574E} .foot li a:hover{color:#B08D2B} .foot .qr{max-width:130px;border-radius:8px;background:#fff;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.08)} .foot .qr-cap{text-align:center;font-size:12px;color:#5C574E;margin-top:8px} .foot .btn-kefu{display:inline-flex;align-items:center;gap:8px;background:#B08D2B;color:#fff;padding:10px 22px;border-radius:24px;font-weight:700;margin-top:12px} .foot .btn-kefu:hover{background:#9A7822;color:#fff} .foot .bottom-bar{border-top:1px solid #D7D2C9;padding:16px 0;text-align:center;font-size:13px;color:#5C574E;line-height:1.9} .foot .bottom-bar a{color:#5C574E} .foot .bottom-bar a:hover{color:#B08D2B} .foot .back-group{display:block;text-align:center;padding:14px 0 22px;color:#B08D2B;font-weight:700;font-size:15px} .foot .back-group:hover{color:#9A7822} /* 顶部「集团官网」跳转按钮 */ .group-link{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border2);color:var(--muted);background:transparent;padding:8px 16px;border-radius:20px;font-size:14px;transition:.2s} .group-link:hover{color:var(--gold);border-color:var(--gold)} [data-theme="light"] .group-link{border-color:#D1D5DB;color:#5A5A5A} [data-theme="light"] .group-link:hover{color:#B08D2B;border-color:#B08D2B} /* ================= FOOTER v1 旧版（保留兼容） ================= */ .foot-v1{background:var(--bg2);border-top:1px solid var(--border);padding:52px 0 26px;margin-top:20px} .foot-v1 .fg{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:40px;margin-bottom:34px} .foot-v1 h4{font-size:16px;margin-bottom:14px;color:var(--gold)} .foot-v1 p,.foot-v1 li{color:var(--muted);font-size:14.5px} .foot-v1 ul{display:grid;gap:9px} .foot-v1 li a{color:var(--muted)} .foot-v1 li a:hover{color:var(--gold)} .foot-v1 .links{display:grid;grid-template-columns:repeat(2,1fr);gap:9px} .foot-v1 .copy{border-top:1px solid var(--border);padding-top:22px;text-align:center;font-size:13.5px;color:var(--mute2)} .foot-v1 .copy a{color:var(--muted)} .foot-v1 .copy a:hover{color:var(--gold)} /* back bar (详情页返回) */ .backbar{background:rgba(13,17,23,.92);border-bottom:1px solid var(--border);padding:11px 0;position:sticky;top:70px;z-index:80} [data-theme="light"] .backbar{background:rgba(255,255,255,.92)} .backbar .inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px} .backbar .crumb{color:var(--mute2)} .backbar .crumb a{color:var(--muted)} .backbar .crumb a:hover{color:var(--gold)} .backbar .sp{flex:1} /* ================= RESPONSIVE ================= */ @media(max-width:1200px){.stats{grid-template-columns:repeat(3,1fr)}.g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:992px){ .nav .menu{display:none;position:absolute;top:70px;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--border);padding:12px var(--pad);flex-direction:column;gap:6px} .nav .menu.open{display:flex} .nav-toggle{display:block} .calc-grid{grid-template-columns:1fr} .foot .fg{grid-template-columns:1fr 1fr;gap:28px} [data-theme="light"] .nav .menu{background:#fff} } @media(max-width:768px){ section{padding:48px 0} .hero{padding:60px 0 46px} .g2,.g3,.g4,.g5{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .frow{grid-template-columns:1fr} .foot .fg{grid-template-columns:1fr} .form-wrap{padding:22px} .total-box .big{font-size:38px} .backbar{top:0} .nav .nav-right{display:flex} /* 课程表：移动端转为宫格卡片 */ .course-tbl-wrap{overflow:visible} .course-schedule, .course-schedule thead, .course-schedule tbody, .course-schedule tr, .course-schedule td{display:block} .course-schedule thead{display:none} .course-schedule tbody{display:grid;grid-template-columns:1fr;gap:16px} .course-schedule tr{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-card)} .course-schedule td{padding:10px 0;border-bottom:1px solid var(--border);font-size:14.5px;line-height:1.6} .course-schedule td:last-child{border-bottom:none;padding-bottom:0;text-align:right} .course-schedule td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:var(--gold);margin-bottom:3px} .course-schedule td:first-child{font-size:17px;font-weight:700} } @media(max-width:480px){ .stats{grid-template-columns:1fr} .hero h1{font-size:26px} .btn{padding:12px 20px;font-size:14px} .theme-toggle{padding:7px 10px} .nav .nav-right{gap:6px} .group-link{padding:7px 10px;font-size:13px} .theme-toggle .txt{display:none} .nav-cta{padding:8px 14px;font-size:13px} .foot .fg{grid-template-columns:1fr} } /* ========== 培训视频轮播 ========== */ .video-carousel { margin-bottom: 32px; background: linear-gradient(135deg, #0E1426 0%, #1a2340 100%); border-radius: 20px; padding: 24px; border: 1px solid rgba(166, 139, 60, 0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .video-main { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; } .video-player-wrap { width: 100%; max-width: 900px; margin: 0 auto; position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16/9; max-height: 506px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); } .video-player-wrap video { width: 100%; height: 100%; object-fit: contain; display: block; } .video-overlay-title { position: absolute; top: 0; left: 0; right: 0; padding: 16px 24px; background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 100%); color: #fff; font-size: 18px; font-weight: 600; z-index: 2; } .video-controls-bar { display: flex; align-items: center; gap: 16px; padding: 0 8px; } .video-nav-btn { background: rgba(166, 139, 60, 0.2); border: 1px solid rgba(166, 139, 60, 0.4); color: #A68B3C; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 14px; flex-shrink: 0; transition: all 0.3s; } .video-nav-btn:hover { background: rgba(166, 139, 60, 0.4); } .video-info { flex: 1; min-width: 0; } .video-info h3 { margin: 0 0 4px 0; font-size: 16px; color: #fff; } .video-info p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.6); } .video-dots { display: flex; gap: 6px; flex-shrink: 0; } .video-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: all 0.3s; } .video-dots .dot.active { background: #A68B3C; width: 24px; border-radius: 4px; } .video-playlist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .video-item { display: flex; gap: 10px; padding: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; cursor: pointer; transition: all 0.3s; } .video-item:hover { background: rgba(166, 139, 60, 0.15); border-color: rgba(166, 139, 60, 0.4); } .video-item.active { background: rgba(166, 139, 60, 0.2); border-color: #A68B3C; } .video-item-thumb { width: 40px; height: 40px; border-radius: 8px; background: rgba(166, 139, 60, 0.2); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .video-item-info { flex: 1; min-width: 0; } .video-item-info h4 { margin: 0 0 4px 0; font-size: 13px; color: #fff; line-height: 1.3; } .video-item-info p { margin: 0 0 4px 0; font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-item-duration { font-size: 11px; color: #A68B3C; font-weight: 600; } /* 移动端：简洁宫格 */ @media (max-width: 900px) { .video-carousel { padding: 16px; } .video-playlist { grid-template-columns: repeat(2, 1fr); gap: 8px; } } @media (max-width: 600px) { .video-playlist { grid-template-columns: repeat(2, 1fr); gap: 8px; } .video-controls-bar { flex-wrap: wrap; } .video-item { flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; gap: 6px; } .video-item-thumb { width: 36px; height: 36px; font-size: 18px; margin: 0; } .video-item-info { text-align: center; } .video-item-info h4 { font-size: 12px; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-item-info p { display: none; } .video-item-duration { display: none; } .video-overlay-title { font-size: 14px; padding: 10px 14px; } .video-info h3 { font-size: 14px; } .video-info p { font-size: 12px; } } /* ===== 增量：下拉菜单 ===== */ .menu-dropdown{position:relative;display:inline-block} .menu-dropdown .dropdown-panel{display:none;position:absolute;top:100%;left:0;background:var(--bg-card,#1a1a2e);border:1px solid var(--border,#333);border-radius:8px;min-width:180px;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.4)} .menu-dropdown:hover .dropdown-panel{display:block} .menu-dropdown .dropdown-panel a{display:block;padding:10px 16px;color:var(--text,#eee);font-size:14px;border-bottom:1px solid var(--border,#333);white-space:nowrap} .menu-dropdown .dropdown-panel a:last-child{border-bottom:none} .menu-dropdown .dropdown-panel a:hover{background:var(--bg-alt,#252540);color:#D4AF37} @media(max-width:900px){.menu-dropdown .dropdown-panel{position:static;display:block;background:transparent;border:none;box-shadow:none;padding-left:16px}} /* ===== 增量：表单样式 ===== */ .form-group{margin-bottom:20px} .form-group label{display:block;font-weight:600;margin-bottom:8px;color:var(--text,#eee)} .form-group label .req{color:#e74c3c;margin-left:4px} .form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border:1px solid var(--border,#444);border-radius:8px;background:var(--bg-input,#1e1e30);color:var(--text,#eee);font-size:15px;font-family:inherit;box-sizing:border-box} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#D4AF37;box-shadow:0 0 0 3px rgba(212,175,55,.15)} .form-group textarea{min-height:100px;resize:vertical} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:600px){.form-row{grid-template-columns:1fr}} .checkbox-group{display:flex;align-items:flex-start;gap:10px;margin:16px 0} .checkbox-group input[type=checkbox]{width:18px;height:18px;margin-top:2px;flex-shrink:0} .checkbox-group label{font-size:14px;color:var(--muted,#aaa);line-height:1.6} .form-tip{font-size:13px;color:var(--muted,#999);margin-top:6px} /* ===== 增量：档案卡片 ===== */ .profile-card{background:var(--bg-card,#1a1a2e);border:1px solid var(--border,#333);border-radius:12px;padding:24px;margin-bottom:20px} .profile-card .pc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap;gap:10px} .profile-card .pc-city{font-size:20px;font-weight:800;color:#D4AF37} .profile-card .pc-status{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600} .pc-status.online{background:rgba(46,160,67,.15);color:#2EA043;border:1px solid #2EA043} .pc-status.offline{background:rgba(231,76,60,.15);color:#e74c3c;border:1px solid #e74c3c} .profile-card .pc-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0} .profile-card .pc-tag{padding:4px 10px;background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.3);border-radius:6px;font-size:12px;color:#D4AF37} /* ===== 增量：方案包卡片 ===== */ .solution-card{background:var(--bg-card,#1a1a2e);border:1px solid var(--border,#333);border-radius:12px;padding:24px;transition:transform .2s,border-color .2s} .solution-card:hover{transform:translateY(-4px);border-color:#D4AF37} .solution-card .sc-icon{font-size:36px;margin-bottom:12px} .solution-card h3{margin:0 0 10px;font-size:18px} .solution-card .sc-desc{color:var(--muted,#aaa);font-size:14px;line-height:1.7;margin-bottom:14px} .solution-card .sc-meta{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--border,#333)} .solution-card .sc-price{color:#D4AF37;font-weight:700;font-size:16px} /* ===== 增量：时间线 ===== */ .timeline{position:relative;padding-left:30px} .timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,#D4AF37,transparent)} .timeline-item{position:relative;margin-bottom:28px} .timeline-item::before{content:'';position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;background:#D4AF37;border:3px solid var(--bg,#0f0f1a)} .timeline-item h4{margin:0 0 8px;color:#D4AF37} .timeline-item p{margin:0;color:var(--muted,#aaa);line-height:1.7} /* ===== 增量：政策板块 ===== */ .policy-banner{background:linear-gradient(135deg,#1a1a2e 0%,#2d1f3d 100%);border:1px solid rgba(212,175,55,.3);border-radius:16px;padding:40px;margin:30px 0} .policy-banner .pb-tag{display:inline-block;padding:6px 16px;background:rgba(212,175,55,.15);border:1px solid #D4AF37;border-radius:20px;color:#D4AF37;font-size:13px;font-weight:600;margin-bottom:16px} .policy-banner h2{margin:0 0 14px;font-size:clamp(22px,3vw,32px);font-weight:900} .policy-banner .pb-desc{color:var(--muted,#bbb);font-size:16px;line-height:1.8;margin-bottom:20px} .policy-banner .pb-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px} .policy-banner .pb-point{padding:14px;background:rgba(255,255,255,.03);border-radius:8px;border-left:3px solid #D4AF37} .policy-banner .pb-point b{display:block;color:#D4AF37;margin-bottom:4px;font-size:14px} .policy-banner .pb-point span{font-size:13px;color:var(--muted,#aaa)} /* ===== 增量：四能力矩阵 ===== */ .capability-matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:30px 0} .cap-item{background:var(--bg-card,#1a1a2e);border:1px solid var(--border,#333);border-radius:12px;padding:28px;text-align:center;transition:border-color .2s} .cap-item:hover{border-color:#D4AF37} .cap-item .ci-icon{font-size:42px;margin-bottom:14px} .cap-item h3{margin:0 0 10px;color:#D4AF37;font-size:18px} .cap-item p{margin:0;color:var(--muted,#aaa);font-size:14px;line-height:1.7} /* ===== 增量：管理视图表格 ===== */ .admin-table{width:100%;border-collapse:collapse;margin:20px 0} .admin-table th,.admin-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border,#333);font-size:14px} .admin-table th{background:var(--bg-alt,#252540);color:#D4AF37;font-weight:600} .admin-table tr:hover{background:rgba(212,175,55,.03)} .status-badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600} .status-pending{background:rgba(230,126,34,.15);color:#e67e22;border:1px solid #e67e22} .status-matched{background:rgba(46,160,67,.15);color:#2EA043;border:1px solid #2EA043} .status-closed{background:rgba(149,165,166,.15);color:#95a5a6;border:1px solid #95a5a6}