/* ========================================================================== 易电商AI · 蓝白科技皮肤 仅作用于 。默认（深色）皮肤不受影响。 设计原则：白底 + 蓝调描边 + 深蓝文字，强调色统一加深以保证白底可读性。 ========================================================================== */ [data-theme="light"]{ /* 表面与文字 */ --bg:#eef4fd; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f4f8ff; --line:rgba(15,42,86,.13); --line-2:rgba(15,42,86,.22); --txt:#0c1a2e; --txt-2:#46587a; /* 次要文字：白底上需 ≥4.5:1，故比深色主题的同位色明显加深 */ --txt-3:#64748b; /* 强调色：白底上统一加深 */ --cyan:#0369a1; --violet:#4f46e5; --pink:#be185d; --green:#047857; --amber:#b45309; --grad:linear-gradient(100deg,#0ea5e9,#4f46e5 58%,#0369a1); --grad-soft:linear-gradient(135deg,rgba(14,165,233,.12),rgba(79,70,229,.12)); --shadow:0 18px 44px -20px rgba(15,42,86,.22); --ring:0 0 0 1px rgba(15,42,86,.08); } /* 渐变底上的文字统一用白色 */ [data-theme="light"] .btn--primary, [data-theme="light"] .dock__btn, [data-theme="light"] .chip.is-on, [data-theme="light"] .pager--page .pager__cur, [data-theme="light"] .avatars span, [data-theme="light"] .qa__ask span, [data-theme="light"] .metric-list i{color:#fff} /* ---------- 背景装饰 ---------- */ [data-theme="light"]{color-scheme:light} [data-theme="light"] .bg-grid{ background-image: linear-gradient(rgba(15,42,86,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(15,42,86,.055) 1px,transparent 1px); } [data-theme="light"] .bg-glow{opacity:.5} [data-theme="light"] .bg-glow--1{background:radial-gradient(circle,rgba(56,160,246,.34),transparent 68%)} [data-theme="light"] .bg-glow--2{background:radial-gradient(circle,rgba(129,140,248,.3),transparent 68%)} [data-theme="light"] .bg-glow--3{background:radial-gradient(circle,rgba(56,189,248,.16),transparent 70%)} [data-theme="light"] .bg-noise{opacity:.05} /* ---------- 顶栏 ---------- */ [data-theme="light"] .header{ background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.72)); } [data-theme="light"] .header.is-stuck{background:rgba(255,255,255,.96);box-shadow:0 6px 22px -14px rgba(15,42,86,.3)} [data-theme="light"] .nav__link:hover{background:rgba(15,42,86,.06)} [data-theme="light"] .burger{background:#fff;border-color:var(--line)} [data-theme="light"] .burger span{background:var(--txt)} [data-theme="light"] .brand__mark{filter:drop-shadow(0 6px 14px rgba(56,160,246,.3))} /* ---------- 首屏标签与要点 ---------- */ [data-theme="light"] .pill{background:#fff;border-color:var(--line-2)} [data-theme="light"] .pill__dot{box-shadow:0 0 0 4px rgba(5,150,105,.14)} [data-theme="light"] .hero__ticks li::before{background:#fff;border-color:rgba(3,105,161,.4)} [data-theme="light"] .hero__ticks li::after{border-color:var(--cyan)} /* ---------- 控制台演示 ---------- */ [data-theme="light"] .float-card{background:#fff;border-color:var(--line-2);box-shadow:var(--shadow)} [data-theme="light"] .console{ background:linear-gradient(180deg,#ffffff,#f8fbff); border-color:var(--line-2); box-shadow:0 22px 54px -24px rgba(15,42,86,.3); } [data-theme="light"] .console__bar{background:#f4f8ff;border-bottom-color:var(--line)} [data-theme="light"] .console__tag{background:rgba(4,120,87,.1);border-color:rgba(4,120,87,.26)} [data-theme="light"] .console__side{border-right-color:var(--line)} [data-theme="light"] .side__item.is-on{background:rgba(14,165,233,.12);box-shadow:inset 0 0 0 1px rgba(14,165,233,.3)} [data-theme="light"] .field label{color:var(--txt-3)} [data-theme="light"] .field__box{background:#f2f7ff;border-color:var(--line)} [data-theme="light"] .step{background:rgba(15,42,86,.035)} [data-theme="light"] .step.is-done{background:rgba(4,120,87,.07);border-color:rgba(4,120,87,.26)} [data-theme="light"] .step.is-run{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.32)} [data-theme="light"] .step.is-done i::after{border-color:#fff} [data-theme="light"] .progress{background:rgba(15,42,86,.09)} [data-theme="light"] .thumbs i{border-color:var(--line)} /* ---------- 区块与卡片 ---------- */ [data-theme="light"] .section--alt{background:linear-gradient(180deg,rgba(15,42,86,.028),transparent 60%)} [data-theme="light"] .stats{ background:linear-gradient(180deg,#ffffff,#f7fbff); border-color:var(--line); box-shadow:0 14px 40px -26px rgba(15,42,86,.24); } [data-theme="light"] .card, [data-theme="light"] .team, [data-theme="light"] .board, [data-theme="light"] .qa, [data-theme="light"] .case, [data-theme="light"] .why, [data-theme="light"] .faq{ background:linear-gradient(180deg,#ffffff,#f8fbff); border-color:var(--line); } [data-theme="light"] .flow__item, [data-theme="light"] .scene{ background:linear-gradient(180deg,#ffffff,#f8fbff); border-color:var(--line); } [data-theme="light"] .scene:hover{background:linear-gradient(180deg,#f2f9ff,#f8fbff);border-color:rgba(14,165,233,.4)} [data-theme="light"] .card:hover, [data-theme="light"] .case:hover, [data-theme="light"] .mat-card:hover, [data-theme="light"] .case-item:hover, [data-theme="light"] .flow__item:hover{box-shadow:0 20px 46px -24px rgba(15,42,86,.28)} [data-theme="light"] .card::after{background:radial-gradient(520px 200px at var(--mx,50%) var(--my,0%),rgba(14,165,233,.1),transparent 70%)} [data-theme="light"] .card__ico{border-color:var(--line-2)} [data-theme="light"] .team__tabs{background:#f4f8ff} [data-theme="light"] .tab:hover{background:rgba(15,42,86,.045)} [data-theme="light"] .tab.is-active{background:rgba(14,165,233,.09)} [data-theme="light"] .mini{background:#f5f9ff;border-color:var(--line)} [data-theme="light"] .mini__row{border-bottom-color:rgba(15,42,86,.11)} [data-theme="light"] .bar-row span{background:rgba(15,42,86,.06)} [data-theme="light"] .bar-row span::before{background:linear-gradient(90deg,rgba(14,165,233,.28),rgba(79,70,229,.16))} [data-theme="light"] .task{border-bottom-color:rgba(15,42,86,.11)} [data-theme="light"] .board__row{border-bottom-color:rgba(15,42,86,.1)} [data-theme="light"] .board__bar{background:rgba(15,42,86,.09)} [data-theme="light"] .chip--wait{background:rgba(15,42,86,.07)} [data-theme="light"] .qa__ask{background:#f4f8ff} [data-theme="light"] .qa__hl{background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.28)} [data-theme="light"] .promise{border-color:var(--line);background:var(--line)} [data-theme="light"] .promise > div{background:#ffffff} [data-theme="light"] .faq__item summary:hover{background:rgba(15,42,86,.04)} [data-theme="light"] .ticks li::before{background:#fff;border-color:rgba(3,105,161,.42)} [data-theme="light"] .ticks li::after{border-color:var(--cyan)} [data-theme="light"] .sec-tag{background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.28)} /* ---------- 表单区 ---------- */ [data-theme="light"] .cta-box{ background: radial-gradient(700px 400px at 8% 0%,rgba(14,165,233,.14),transparent 65%), radial-gradient(600px 420px at 96% 100%,rgba(99,102,241,.14),transparent 62%), linear-gradient(180deg,#ffffff,#f7fbff); border-color:var(--line-2); } [data-theme="light"] .contact-line{background:#f6faff;border-color:var(--line)} [data-theme="light"] .contact-line:hover{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.42)} [data-theme="light"] .form{background:rgba(255,255,255,.9);border-color:var(--line)} [data-theme="light"] .form input[type=text], [data-theme="light"] .form textarea, [data-theme="light"] .form select{background:#f7faff;border-color:var(--line);color:var(--txt)} [data-theme="light"] .form input:focus, [data-theme="light"] .form textarea:focus, [data-theme="light"] .form select:focus{background:#fff;border-color:rgba(14,165,233,.6);box-shadow:0 0 0 3px rgba(14,165,233,.14)} [data-theme="light"] .form select, [data-theme="light"] .filter__item select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2346587a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } [data-theme="light"] .form select option, [data-theme="light"] .filter__item select option{background:#fff;color:var(--txt)} /* ---------- 页脚与悬浮按钮 ---------- */ [data-theme="light"] .footer{background:linear-gradient(180deg,transparent,rgba(15,42,86,.035))} [data-theme="light"] .dock__menu{background:rgba(255,255,255,.97);border-color:var(--line-2);box-shadow:var(--shadow)} [data-theme="light"] .dock__menu a:hover, [data-theme="light"] .dock__menu button:hover{background:rgba(14,165,233,.1)} /* ========================================================================== 列表页（pages.css 对应部分） ========================================================================== */ [data-theme="light"] .filter{background:linear-gradient(180deg,#ffffff,#f8fbff);border-color:var(--line)} [data-theme="light"] .filter__search input{background:#f7faff;border-color:var(--line);color:var(--txt)} [data-theme="light"] .filter__search input:focus{background:#fff;border-color:rgba(14,165,233,.6);box-shadow:0 0 0 3px rgba(14,165,233,.14)} [data-theme="light"] .filter__search svg{color:var(--txt-3)} [data-theme="light"] .filter__item select{background-color:#f7faff;border-color:var(--line);color:var(--txt)} [data-theme="light"] .result-line__tag{background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.28)} [data-theme="light"] .notice-bar{background:rgba(180,83,9,.07);border-color:rgba(180,83,9,.26)} [data-theme="light"] .notice-bar__tag{background:rgba(180,83,9,.9);color:#fff} [data-theme="light"] .mat-card, [data-theme="light"] .case-item{background:linear-gradient(180deg,#ffffff,#f8fbff);border-color:var(--line)} [data-theme="light"] .mat-card__cover, [data-theme="light"] .case-item__cover{background:#e8eefb} [data-theme="light"] .mat-card__stats, [data-theme="light"] .mat-card__foot{border-top-color:var(--line)} [data-theme="light"] .tag-s{background:rgba(14,165,233,.13);color:#0369a1} [data-theme="light"] .tag-s--b{background:rgba(79,70,229,.13);color:#4338ca} [data-theme="light"] .tag-s--g{background:rgba(4,120,87,.12);color:#047857} [data-theme="light"] .metric-list li{background:rgba(14,165,233,.07);border-color:rgba(14,165,233,.22)} [data-theme="light"] .case-item__more summary{color:var(--cyan)} [data-theme="light"] .prose{background:#f7faff;border-color:var(--line)} [data-theme="light"] .cta-strip{ background: radial-gradient(600px 320px at 6% 0%,rgba(14,165,233,.14),transparent 65%), radial-gradient(520px 340px at 96% 100%,rgba(99,102,241,.14),transparent 62%), linear-gradient(180deg,#ffffff,#f7fbff); border-color:var(--line-2); } [data-theme="light"] .empty-box{border-color:var(--line-2);background:rgba(255,255,255,.6)} /* 注意：必须排除 .pager__cur，否则 background:#fff 简写会把当前项的渐变重置掉， 配合上方的 color:#fff 会变成白底白字。 */ [data-theme="light"] .pager--page a, [data-theme="light"] .pager--page span:not(.pager__cur){border-color:var(--line);background:#fff} [data-theme="light"] .pager--page a:hover{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.45)} [data-theme="light"] .pager--page .pager__cur{border-color:transparent} /* ---------- 弹窗 ---------- */ [data-theme="light"] .modal__mask{background:rgba(12,26,46,.42)} [data-theme="light"] .modal__box{background:#fff;border-color:var(--line-2);box-shadow:0 30px 70px -30px rgba(15,42,86,.4)} [data-theme="light"] .modal__x{background:rgba(255,255,255,.86);color:var(--txt);border-color:var(--line-2)} [data-theme="light"] .modal__x:hover{background:rgba(190,24,93,.12);border-color:rgba(190,24,93,.45)} [data-theme="light"] .modal__media{background:#e8eefb} [data-theme="light"] .modal__media .mat-card__dur{background:rgba(12,26,46,.78);color:#fff} [data-theme="light"] .modal__stats > div{background:#f5f9ff;border-color:var(--line)} [data-theme="light"] .modal__note{background:rgba(180,83,9,.07);border-color:rgba(180,83,9,.24)} [data-theme="light"] .badge-demo{background:rgba(180,83,9,.92);color:#fff} /* 深色底上的小圆点保持可辨识 */ [data-theme="light"] .dot--r{background:#ef4444} [data-theme="light"] .dot--y{background:#f59e0b} [data-theme="light"] .dot--g{background:#22c55e}