/* =================================================================== 0. 字体 —— 本地自托管 ------------------------------------------------------------------- 原先直接引 fonts.googleapis.com，这在国内是被墙的。后果不只是字体 不显示：`window.load` 事件要等所有样式表有结果才触发，而本主题的 全屏预加载层（#dt_preloader，z-index 9999999）正是靠 load 事件才 隐藏 —— 于是整个页面会被一层看不见的遮罩盖住，点什么都没反应。 所以字体一律改成随主题分发的本地文件，零外部请求。 Inter / Plus Jakarta Sans 均为可变字体，一个文件覆盖全部字重。 两者均为 SIL Open Font License 1.1，允许自托管与再分发。 =================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/Inter-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/Inter-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/PlusJakartaSans-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/PlusJakartaSans-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* =================================================================== 0b. Font Awesome 图标字体 —— 本地自托管 ------------------------------------------------------------------- Ploto 把图标字体托管在 raw.githubusercontent.com，国内同样不可达。 全站的箭头、社交图标、搜索图标、勾选标记都来自它，一旦拉不到， 页面上所有图标都会变成空白方块。 下面这些 @font-face 是从 ploto/assets/vendors/css/all.min.css 里 原样提取的（unicode-range / font-display / 字重全部保留）， 只把 src 指向了随主题分发的本地文件。@font-face 同名同字重时 后声明者生效，而本文件加载顺序在最后，所以能覆盖掉原始声明。 =================================================================== */ @font-face { font-family:"Font Awesome 6 Brands"; font-style:normal; font-weight:400; font-display:block; src:url('../fonts/fa-brands-400.woff2') format("woff2"); } @font-face { font-family:"Font Awesome 6 Free"; font-style:normal; font-weight:300; font-display:block; src:url('../fonts/fa-light-300.woff2') format("woff2"); } @font-face { font-family:"Font Awesome 6 Free"; font-style:normal; font-weight:400; font-display:block; src:url('../fonts/fa-regular-400.woff2') format("woff2"); } @font-face { font-family:"Font Awesome 6 Free"; font-style:normal; font-weight:900; font-display:block; src:url('../fonts/fa-solid-900.woff2') format("woff2"); } @font-face { font-family:"Font Awesome 5 Brands"; font-display:block; font-weight:400; src:url('../fonts/fa-brands-400.woff2') format("woff2"); } @font-face { font-family:"Font Awesome 5 Pro"; font-display:block; font-weight:900; src:url('../fonts/fa-solid-900.woff2') format("woff2"); } @font-face { font-family:"Font Awesome 5 Pro"; font-display:block; font-weight:400; src:url('../fonts/fa-regular-400.woff2') format("woff2"); } @font-face { font-family:"Font Awesome 5 Pro"; font-display:block; font-weight:300; src:url('../fonts/fa-light-300.woff2') format("woff2"); } @font-face { font-family:"FontAwesome"; font-display:block; src:url('../fonts/fa-solid-900.woff2') format("woff2"); } @font-face { font-family:"FontAwesome"; font-display:block; src:url('../fonts/fa-brands-400.woff2') format("woff2"); } @font-face { font-family:"FontAwesome"; font-display:block; src:url('../fonts/fa-regular-400.woff2') format("woff2"); unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc; } @font-face { font-family:"FontAwesome"; font-display:block; src:url('../fonts/fa-v4compatibility.woff2') format("woff2"); unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a; } /* =================================================================== Softzen6 —— UI 定制层 ------------------------------------------------------------------- 参考： popularaitools.ai/blog (深色 + 橙强调 + 卡片网格) meetaitools.com (字体 Inter / Plus Jakarta Sans、布局) 全站最后一个加载的样式表，可覆盖 Ploto / Atromax 的任何样式。 父主题大量使用 !important，因此本文件也需要对应使用。 回滚：清空本文件即可 100% 还原 Atromax 原版外观。 =================================================================== */ /* =================================================================== 1. 设计 token =================================================================== */ :root { /* 强调色 —— 取自 popularaitools.ai (#ff6804)，与 Atromax 原橙 #FF5E14 极近 */ --dt-main-rgb: 255, 104, 4; --dt-secondary-color: #0a0a0a; --sz-accent: #ff6804; --sz-accent-hover: #e55d00; --sz-accent-soft: rgba(255, 104, 4, .12); --sz-accent-glow: rgba(255, 104, 4, .28); /* 中性色阶 —— popularaitools 的层级 */ --sz-bg: #0a0a0a; /* 页面底色 */ --sz-bg-alt: #0f0f0f; /* 交替区块 */ --sz-surface: #141414; /* 卡片 */ --sz-surface-hover: #1a1a1a; --sz-border: #1e1e1e; /* 卡片描边 */ --sz-border-strong: #27272a; /* 分隔线 */ --sz-text: #fafafa; --sz-text-soft: #d4d4d8; --sz-text-muted: #a1a1aa; --sz-text-faint: #71717a; /* 圆角 / 阴影 / 过渡 */ --sz-r-sm: 8px; --sz-r: 12px; --sz-r-lg: 16px; --sz-r-xl: 24px; --sz-shadow: 0 1px 2px rgba(0,0,0,.4); --sz-shadow-lg: 0 12px 32px rgba(0,0,0,.55); --sz-ease: cubic-bezier(.22, .61, .36, 1); --sz-t: .22s var(--sz-ease); /* 字体 */ --sz-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Roboto, sans-serif; --sz-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; } /* =================================================================== 2. 基础 / 排版 =================================================================== */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--sz-bg) !important; color: var(--sz-text-muted) !important; font-family: var(--sz-font-body) !important; font-size: 16px; line-height: 1.7; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .dt_slider-content .title, .dt-section-title, .sub-title { font-family: var(--sz-font-display) !important; color: var(--sz-text) !important; letter-spacing: -0.025em; line-height: 1.18; font-weight: 700; } h1 { font-size: clamp(36px, 4.2vw, 60px); font-weight: 800; } h2 { font-size: clamp(28px, 3.0vw, 44px); } h3 { font-size: clamp(20px, 1.9vw, 26px); } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 15px; } p { color: var(--sz-text-muted) !important; line-height: 1.75; } a { color: var(--sz-text-soft); text-decoration: none; transition: color var(--sz-t); } a:hover, a:focus { color: var(--sz-accent) !important; } /* 小标签（Why Choose Us / Services / Faq's 这类） */ .sub-title { display: inline-flex !important; align-items: center; gap: .5em; font-family: var(--sz-font-body) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--sz-accent) !important; background: var(--sz-accent-soft) !important; border: 1px solid rgba(255, 104, 4, .22) !important; border-radius: 999px !important; padding: .4em 1em !important; } ::selection { background: var(--sz-accent); color: #fff; } /* 焦点可见性 —— 深色下原主题的 outline 几乎看不见 */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--sz-accent) !important; outline-offset: 2px !important; border-radius: var(--sz-r-sm); } /* 滚动条 */ * { scrollbar-width: thin; scrollbar-color: var(--sz-border-strong) var(--sz-bg); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--sz-bg); } ::-webkit-scrollbar-thumb { background: var(--sz-border-strong); border-radius: 999px; border: 2px solid var(--sz-bg); } ::-webkit-scrollbar-thumb:hover { background: #3f3f46; } /* =================================================================== 3. 通用区块底色 父主题给各区块写死了浅色背景，这里统一压成深色，并交替明度做层次 =================================================================== */ .site, .site-content, #content, .dt_information, .dt_choose, .dt_service, .dt_faq, .dt_cta, .dt_post, .dt_posts, .dt_breadcrumb, .dt_page { background-color: var(--sz-bg) !important; background-image: none !important; } .dt_choose, .dt_faq { background-color: var(--sz-bg-alt) !important; } /* --------------------------------------------------------------- 预加载层 —— 点击陷阱防护 #dt_preloader 是 position:fixed + z-index:9999999 的全屏遮罩， 主题只在 $(window).on('load') 里把它 fadeOut。只要有任何一个 外部资源慢或不可达，load 就迟迟不触发，这层遮罩就一直盖在页面上 把所有点击吃掉 —— 表现就是「页面看着正常，点什么都没反应」。 这里让它永远不接收指针事件：它是纯装饰，淡出动画照常播放， 但无论何时都不会挡住用户操作。只给它自己的关闭按钮放行。 --------------------------------------------------------------- */ .dt_preloader, .dt_preloader * { pointer-events: none !important; } .dt_preloader .dt_preloader-close { pointer-events: auto !important; } .dt_preloader { background: var(--sz-bg) !important; } .dt_preloader-text { color: var(--sz-text) !important; } /* =================================================================== 4. 页眉 / 导航 ------------------------------------------------------------------- 重要：Ploto 把 html 根字号设成了 12px（不是浏览器默认的 16px）， 所以本文件里的字号一律写成显式 px，绝对不要用 rem —— 用 rem 的话实际渲染会缩水到 75%，页眉整排字会小得看不清。 =================================================================== */ .dt_header-topbar { background: var(--sz-bg-alt) !important; border-bottom: 1px solid var(--sz-border) !important; font-size: 14px; } .dt_header-topbar, .dt_header-topbar a, .dt_header-topbar li, .dt_header-topbar span, .dt_header-widget a { color: var(--sz-text-muted) !important; } .dt_header-topbar a:hover { color: var(--sz-accent) !important; } /* --------------------------------------------------------------- 顶部条内的挂件 —— 复位成一行内联信息 主题把「Trusted partner / 邮箱 / 营业时间 / 社交」每一项都写成