/* ========================================================= Curiouser · 课程详情页上新增的三块 #cx-spec 规格细带（年龄 / 学期 / 上课时间 / 怎么订 / 地点 / 价格） —— 数据全部来自后台 web-booking，前端只负责显示，后台改了课，网站跟着变；读不到就整块不显示，不留占位。 #cx-grow 七大领域（这门课主打哪三个） #cx-pics 课程照片（白底，排在家长评价之前）页面节奏：头图 → 深色细带 → 白底介绍 → 深色七大领域 → 订课日历 → 白底照片 → 笔刷 → Why X + 家长评价一份样式，15 个 class 页共用。左右留白跟全站一致：80px（>1024）/ 30px（768-1024）/ 20px（<768）深色底上的颜色（都量过，全部过 AA）：白 8.78:1 白 72% #C9CDCE 5.48:1 白 66% #BEC2C4 4.89:1 金 #E3B672 4.68:1 —— 全站金 #C98B2C 在这个底上只有 3.0，不能用 ========================================================= */ #cx-spec,#cx-grow,#cx-pics{--ink:#3F4D51;--muted:#53666F;--rust:#B0533E;--gold:#E3B672; --pill:#F3E7E0;--line:#E4E4E4;--sand:#EBDBD2;--cream:#F7F2EB; --onink:rgba(255,255,255,.72);--onink2:rgba(255,255,255,.66); --hair:rgba(255,255,255,.18)} #cx-spec *,#cx-grow *,#cx-pics *{box-sizing:border-box} /* ---------- 头图和细带之间不要夹白 ---------- 头图底部那条笔刷是拿 hero-edge.svg 当 mask 把图撕开的，撕掉的地方露出的是头图容器的底色（原来透明 = 页面白）。细带显示时（cx-class.js 会给加 .cx-specon）把那块底色换掉，笔刷就直接从图撕进深色条里，中间不夹白。用的是品牌石板灰 #5C707A 而不是细带自己的 #3F4D51 —— 跟细带同色的话笔刷纹理就看不见了（量过：头图那块是 46,57,61，细带是 63,77,81，差得太少）。石板灰比两边都亮一档，笔触看得清，又还是深色，不会变成一道白缝。细带不显示时不加这个类，保持原样 —— 那时下面本来就是白底。 */ /* 4502ecf = 课程页头图，59aeaa9 = 活动页头图，两边是同一套 mask 撕边 */ html.cx-specon .elementor-element-4502ecf, html.cx-specon .elementor-element-59aeaa9{background-color:#5C707A !important} /* ---------- 规格细带（深色通栏，贴着头图） ---------- */ #cx-spec{display:none} /* 拿到数据才显示，见 cx-class.js */ #cx-spec.on{display:block;background:var(--ink);color:#fff} #cx-spec .sp-in{padding-left:80px;padding-right:80px} #cx-spec .sp-grid{display:grid;grid-template-columns:repeat(6,1fr)} #cx-spec .sp{padding:24px 22px 26px;border-right:1px solid var(--hair)} #cx-spec .sp:last-child{border-right:0} #cx-spec .k{margin:0;font:700 10.5px/16px Lato,sans-serif;letter-spacing:.2em; color:var(--onink2);text-transform:uppercase} #cx-spec .v{margin:8px 0 0;font:700 18px/25px Arvo,Georgia,serif;color:#fff} #cx-spec .s{display:block;margin-top:4px;font:400 12.5px/18px Lato,sans-serif;color:var(--onink)} /* ---------- 七大领域（深色通栏） ---------- 图标和名称沿用 KL 站 /preschool-eyfs-classes/ 那一套，两个站说的是同一件事。这门课主打的三个亮着并带一句说明，其余四个压暗 —— 压的是图标，字还是白 66%（4.89:1），不靠降透明度省对比度。整体按 Ang 的意见收窄了一档：这一块是背景信息，不该比课程本身还抢。 */ #cx-grow .gw{background:var(--ink);color:#fff;padding:34px 0 38px} #cx-grow .gw-in{padding-left:80px;padding-right:80px} #cx-grow .lab{margin:0 0 9px;font:700 10.5px/15px Lato,sans-serif;letter-spacing:.24em; color:var(--gold);text-transform:uppercase} #cx-grow h2{margin:0;font:700 24px/32px Arvo,Georgia,serif;color:#fff;letter-spacing:-.2px} #cx-grow .sub{margin:9px 0 0;max-width:46em;font:400 14px/22px Lato,sans-serif;color:var(--onink)} #cx-grow .gw-row{display:grid;grid-template-columns:repeat(7,1fr);gap:16px 14px; list-style:none;margin:26px 0 0;padding:0} #cx-grow .gw-row li{display:flex;flex-direction:column;align-items:center;text-align:center; padding-top:14px;border-top:1px solid var(--hair)} #cx-grow .gw-row li.hit{border-top:2px solid var(--gold);padding-top:13px} #cx-grow .gw-row img{width:60px;height:60px;object-fit:contain;display:block;margin-bottom:9px} #cx-grow .gw-row li.off img{opacity:.5} #cx-grow .nm{font:400 12.5px/18px Lato,sans-serif;color:var(--onink2)} #cx-grow li.hit .nm{font-weight:700;color:#fff} #cx-grow .ph{margin-top:5px;font:italic 400 12.5px/18px Arvo,Georgia,serif;color:var(--onink)} /* ---------- 课程照片（白底，三张，高度错开） ---------- */ #cx-pics{background:#fff;padding:56px 0 60px} #cx-pics .pc-in{padding-left:80px;padding-right:80px} #cx-pics .lab{margin:0 0 12px;font:700 11px/16px Lato,sans-serif;letter-spacing:.24em; color:var(--rust);text-transform:uppercase} #cx-pics h2{margin:0 0 30px;font:700 31px/40px Arvo,Georgia,serif;color:var(--ink);letter-spacing:-.3px} /* 三张，高度和纵向位置都错开，看起来像贴上去的，不是规规矩矩的格子 */ #cx-pics .pc-row{display:grid;grid-template-columns:1.18fr 1fr 1.06fr;gap:20px;align-items:start} #cx-pics figure{margin:0;overflow:hidden;background:#EFEAE3} #cx-pics img{display:block;width:100%;height:100%;object-fit:cover} #cx-pics .p1{height:340px} #cx-pics .p2{height:272px;margin-top:44px} #cx-pics .p3{height:312px;margin-top:12px} @media(max-width:1024px){ #cx-spec .sp-in,#cx-grow .gw-in,#cx-pics .pc-in{padding-left:30px;padding-right:30px} #cx-spec .sp-grid{grid-template-columns:repeat(3,1fr)} #cx-spec .sp{padding:20px 18px 22px;border-bottom:1px solid var(--hair)} #cx-spec .sp:nth-child(3n){border-right:0} #cx-spec .sp:nth-last-child(-n+3){border-bottom:0} #cx-spec .v{font-size:16px;line-height:23px} #cx-grow h2{font-size:21px;line-height:29px} #cx-pics h2{font-size:26px;line-height:34px} #cx-grow .gw-row{grid-template-columns:repeat(4,1fr);gap:22px 14px} #cx-grow .gw-row img{width:56px;height:56px} #cx-pics .pc-row{gap:14px} #cx-pics .p1{height:248px} #cx-pics .p2{height:210px;margin-top:22px} #cx-pics .p3{height:232px;margin-top:8px} } @media(max-width:767px){ #cx-spec .sp-in,#cx-grow .gw-in,#cx-pics .pc-in{padding-left:20px;padding-right:20px} #cx-spec .sp-grid{grid-template-columns:repeat(2,1fr)} #cx-spec .sp{padding:16px 14px 18px} #cx-spec .sp:nth-child(3n){border-right:1px solid var(--hair)} #cx-spec .sp:nth-child(2n){border-right:0} #cx-spec .sp:nth-last-child(-n+3){border-bottom:1px solid var(--hair)} #cx-spec .sp:nth-last-child(-n+2){border-bottom:0} #cx-grow .gw{padding:28px 0 32px} #cx-grow h2{font-size:20px;line-height:28px} #cx-pics h2{font-size:23px;line-height:31px} #cx-grow .gw-row{grid-template-columns:repeat(2,1fr);gap:18px 14px;margin-top:22px} #cx-grow .gw-row img{width:54px;height:54px;margin-bottom:8px} #cx-pics{padding:36px 0 40px} /* 手机上横向滑，照片不缩成邮票 */ #cx-pics .pc-in{padding-right:0} #cx-pics .pc-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;padding-right:20px;scrollbar-width:none} #cx-pics .pc-row::-webkit-scrollbar{display:none} #cx-pics figure{flex:0 0 74%;scroll-snap-align:start;margin-top:0!important;height:232px!important} }