/* ============================================================ CstoneCloud · 云服务器订单卡片（B 版 · 浮起强调） 文件位置：templates/orderforms/standard_carts/css/custom.css 加载方式：common.tpl 内 {assetExists file="custom.css"} 自动引入 作用范围：仅购物车 / 产品订购页，不影响全站与主题 ------------------------------------------------------------ 【开关】在「产品描述」框最后单独加一行（独占一行）： 加了的卡片才套用本样式；没加的保持原样（如独立服务器分类）。 开关行不含冒号，不会被 WHMCS 解析成特征行。 ------------------------------------------------------------ 【为何选择器带两个 ID】 主题全局 twenty-x/css/custom.css 中存在： #order-standard_cart .products .product div.product-desc ul li::before { content:""; position:absolute; width:5px; height:5px; background:#b9b9b9; left:-12px; top:8px } 权重 (1,3,3) 它带 ID，会把纯 class 选择器按【单个属性】逐个压掉： content 被改成空串（图标消失）、盒子缩成 5x5 灰块、绝对定位到行外。 所以本文件统一使用 #order-standard_cart .products#products ...（两个 ID）， 整体胜过它，无需 !important。 ------------------------------------------------------------ 【图标按规格行号绑定】 feature1=CPU feature2=内存 feature3=硬盘 feature4=带宽 feature5=流量 feature6=IP 同一产品内请保持此顺序，否则图标错位。 ------------------------------------------------------------ 版本：v9-B 浮起强调 2026-09-15 ============================================================ */ /* ---------- 1. 卡片骨架：无边框大圆角 + 明显阴影，hover 上浮 ---------- */ #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro){padding:22px 24px 24px;border:0;border-radius:18px;background:#fff;box-shadow:0 10px 26px rgba(15,47,92,.10);transition:box-shadow .25s ease,transform .25s ease} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro):hover{box-shadow:0 18px 38px rgba(15,47,92,.16);transform:translateY(-4px)} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > header{margin:0 0 16px;padding:0} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > header span{font-size:19px;line-height:1.35;color:#0d1526;font-weight:700} /* ---------- 2. 规格列表：铺满 + 图标胶囊 ---------- */ #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc{float:none;width:100%;margin:0;padding:0;border-top:0;font-size:13px} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > p{margin:0;padding:0} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > p > span.cf-pro{display:block;height:0;overflow:hidden} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul{width:100%;margin:0;padding:0;list-style:none} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul > li{display:flex;align-items:center;gap:10px;position:static;margin:0;padding:7px 10px;border-radius:9px;list-style:none;color:#8593a8;font-size:13px;font-weight:400;line-height:1.45} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul > li:nth-child(odd){background:#f4f7fc} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul > li .feature-value{order:2;margin-left:auto;color:#0f2f5c;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums} /* ---------- 3. 图标底座（同时抹掉主题那个灰色方块）---------- */ #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul > li::before{content:"";position:static;left:auto;top:auto;display:block;flex:0 0 26px;width:26px;height:26px;border-radius:50%;font-family:"Font Awesome 5 Pro","Font Awesome 5 Free","FontAwesome";font-weight:900;font-size:12px;line-height:26px;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* ---------- 4. 逐行图标 + 配色（B 版：彩色圆形胶囊）---------- */ #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul > li[id$="-feature1"]::before{content:"\f2db";color:#2563eb;background:#e8f0fe} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul > li[id$="-feature2"]::before{content:"\f538";color:#7c3aed;background:#f2e9fe} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul > li[id$="-feature3"]::before{content:"\f0a0";color:#0891b2;background:#e2f5f9} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul > li[id$="-feature4"]::before{content:"\f3fd";color:#059669;background:#e3f7ee} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul > li[id$="-feature5"]::before{content:"\f362";color:#ea580c;background:#fdeee4} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > .product-desc > ul > li[id$="-feature6"]::before{content:"\f6ff";color:#dc2626;background:#fdeaea} /* ---------- 5. 页脚：价格放大染蓝居中 + 按钮满宽 ---------- */ #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > footer{float:none;width:100%;margin:0;padding:0;text-align:center} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > footer div.product-pricing{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 16px;color:#8b95a6;font-size:13px} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > footer div.product-pricing span.price{float:none;position:static;top:auto;margin:0;color:#004fac;font-size:30px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > footer .btn-order-now{display:block;width:100%;padding:13px 0;border:0;border-radius:11px;font-size:15px;font-weight:600;letter-spacing:.4px;line-height:1.4;text-align:center;text-decoration:none;transition:background-color .2s ease,color .2s ease,transform .2s ease} #order-standard_cart .products#products .product:has(> .product-desc > p > span.cf-pro) > footer .btn-order-now:hover{background-color:#1bc577;color:#fff}