/* CBASCO Theme Modes — variable overrides + real section backgrounds. * dark / light / colorful — switched via [data-cb-theme] on . */ html { transition: background-color .35s ease, color .35s ease; } html *, html *::before, html *::after { transition-property: background-color, border-color, color, box-shadow, fill, stroke; transition-duration: .3s; transition-timing-function: ease; } /* ═══ DARK ═══ */ html[data-cb-theme="dark"] { color-scheme: dark; --cb-bg: #0d1117; --cb-bg-2: #111822; --cb-bg-3: #161d2a; --cb-bg-4: #192840; --cb-steel: #6aaecc; --cb-steel-l: #a0d0e8; --cb-steel-d: #3a7ea0; --cb-steel-m: #90c8e4; --cb-acc: #6aaecc; --cb-text: #ddeaf6; --cb-text-2: #7aaec8; --cb-text-body: #5a7e9a; --cb-text-muted: #4a6e88; --cb-muted: #4a6e88; --cb-ghost: #2a4a60; --cb-highlight: #c8e0f0; --cb-border: rgba(100,170,210,.14); --cb-border-hover: rgba(100,170,210,.30); --cb-badge-bg: rgba(100,170,210,.09); --cb-glow: rgba(80,140,200,.22); --cb-grad-hero: linear-gradient(135deg, #ddeef8 20%, #6aaecc 60%, #c0d8ee 100%); --cb-grad-logo: linear-gradient(90deg, #6aaecc, #a0d0e8); --cb-grad-stat: linear-gradient(135deg, #a8d0e8, #6aaecc); --cb-grad-tag: linear-gradient(90deg, #6aaecc, transparent); --cb-mat: #6aaecc; /* extended tokens — page CSS references these so every mode stays readable */ --cb-bg-deep: #0a0e14; --cb-bg-5: #243650; --cb-gray: #98a2af; --cb-gray-l: #b8c2cf; --cb-gold: #c8a84c; --cb-gold-l: #e8d8a8; --cb-gold-m: #e8c878; --cb-gold-xl: #fff5d8; } /* ═══ LIGHT ═══ */ html[data-cb-theme="light"] { color-scheme: light; --cb-bg: #f6f9fc; --cb-bg-2: #ecf2f8; --cb-bg-3: #dde7f0; --cb-bg-4: #c8d6e3; --cb-steel: #2b6c8c; --cb-steel-l: #4a8aa8; --cb-steel-d: #1d4f6c; --cb-steel-m: #3a7ea0; --cb-acc: #2b6c8c; --cb-text: #15212d; --cb-text-2: #2a3e52; --cb-text-body: #45596f; --cb-text-muted: #5a6e82; --cb-muted: #6a7e92; --cb-ghost: #9aafc2; --cb-highlight: #1d4f6c; --cb-border: rgba(43,108,140,.18); --cb-border-hover: rgba(43,108,140,.40); --cb-badge-bg: rgba(43,108,140,.07); --cb-glow: rgba(43,108,140,.20); --cb-grad-hero: linear-gradient(135deg, #1d4f6c 20%, #2b6c8c 60%, #4a8aa8 100%); --cb-grad-logo: linear-gradient(90deg, #2b6c8c, #4a8aa8); --cb-grad-stat: linear-gradient(135deg, #4a8aa8, #2b6c8c); --cb-grad-tag: linear-gradient(90deg, #2b6c8c, transparent); --cb-mat: #2b6c8c; /* extended tokens — dark golds/greys become ink-dark for paper backgrounds */ --cb-bg-deep: #e9f0f7; --cb-bg-5: #b6c9da; --cb-gray: #5a6e82; --cb-gray-l: #45596f; --cb-gold: #8a6a1e; --cb-gold-l: #7a5c14; --cb-gold-m: #6e5416; --cb-gold-xl: #5f470e; } html[data-cb-theme="light"] .cbasco-header { background: rgba(246,249,252,.86) !important; border-bottom: 1px solid rgba(43,108,140,.10); } html[data-cb-theme="light"] .cbasco-header.is-scrolled{ background: rgba(246,249,252,.96) !important; } html[data-cb-theme="light"] .cbnav-panel { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,242,248,.98)) !important; color: var(--cb-text); } html[data-cb-theme="light"] .cbnav-panel * { color: inherit; } html[data-cb-theme="light"] .cbnav-panel-title { color: var(--cb-text); } html[data-cb-theme="light"] .cbnav-foot-brand { color: var(--cb-steel); } html[data-cb-theme="light"] .cbapps-panel { background: rgba(255,255,255,.98); border: 1px solid var(--cb-border); } html[data-cb-theme="light"] .cbapps-trigger { background: linear-gradient(135deg, rgba(138,106,30,.10), rgba(138,106,30,.03)); border-color: rgba(138,106,30,.42); } html[data-cb-theme="light"] .cbapps-trigger:hover, html[data-cb-theme="light"] .cbapps-trigger[aria-expanded="true"] { background: linear-gradient(135deg, rgba(138,106,30,.16), rgba(138,106,30,.06)); border-color: rgba(138,106,30,.62); box-shadow: 0 8px 18px rgba(138,106,30,.16); } html[data-cb-theme="light"] .cbapps-trigger-dot { box-shadow: 0 0 0 3px rgba(138,106,30,.16), 0 0 8px rgba(138,106,30,.4); } html[data-cb-theme="light"] .cbapps-notice-card { background: rgba(255,255,255,.98); box-shadow: 0 30px 80px rgba(20,35,50,.25), 0 0 44px color-mix(in srgb, var(--cb-acc, #6aaecc) 10%, transparent); } html[data-cb-theme="light"] .cbapps-notice-backdrop { background: rgba(30,42,56,.45); } html[data-cb-theme="light"] .cbapps-notice-close { background: rgba(20,35,50,.05); border-color: rgba(20,35,50,.14); } html[data-cb-theme="light"] .cbapps-notice-dismiss { border-color: rgba(20,35,50,.18); } html[data-cb-theme="light"] .cbapps-notice-btn { color: #fff; } html[data-cb-theme="light"] .cbapps-notice-btn:hover { color: #fff; } html[data-cb-theme="light"] .cbapps-notice-card::before { background: rgba(20,35,50,.2); } html[data-cb-theme="light"] .cbapps-link.has-notice .cbapps-link-icon::after { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 8px rgba(232,88,120,.5); } html[data-cb-theme="light"] .cbasco-marquee { background: linear-gradient(90deg, var(--cb-bg-2), var(--cb-bg-3)); border-bottom: 1px solid var(--cb-border); } html[data-cb-theme="light"] .cbasco-slide-overlay { background: linear-gradient(180deg, rgba(15,28,42,.18) 0%, rgba(15,28,42,.55) 100%) !important; } html[data-cb-theme="light"] .cb-legal-body { background: var(--cb-bg-2); color: var(--cb-text-body); } html[data-cb-theme="light"] ::selection { background: rgba(43,108,140,.25); color: #fff; } html[data-cb-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(43,108,140,.30); } html[data-cb-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(43,108,140,.50); } /* ═══ COLORFUL — base ═══ */ html[data-cb-theme="colorful"] { color-scheme: dark; --cb-bg: #0c1019; --cb-bg-2: #131a26; --cb-bg-3: #1a2230; --cb-bg-4: #20304a; --cb-steel: #6aaecc; --cb-steel-l: #a0d0e8; --cb-steel-d: #3a7ea0; --cb-steel-m: #90c8e4; --cb-acc: #6aaecc; --cb-text: #ecf2f8; --cb-text-2: #9bb8ce; --cb-text-body: #7892a6; --cb-text-muted: #5a7290; --cb-muted: #4a6280; --cb-ghost: #2a4a60; --cb-highlight: #ffffff; --cb-border: rgba(255,255,255,.10); --cb-border-hover: rgba(255,255,255,.22); --cb-badge-bg: rgba(255,255,255,.05); --cb-glow: rgba(106,174,204,.22); --cb-grad-hero: linear-gradient(135deg, #f0f8ff 20%, var(--cb-acc) 60%, #fff 100%); --cb-grad-logo: linear-gradient(90deg, var(--cb-acc), color-mix(in srgb, var(--cb-acc) 55%, white)); --cb-grad-stat: linear-gradient(135deg, color-mix(in srgb, var(--cb-acc) 60%, white), var(--cb-acc)); --cb-grad-tag: linear-gradient(90deg, var(--cb-acc), transparent); --cb-mat: var(--cb-acc); /* extended tokens — colorful is dark-based, keep the luminous golds/greys */ --cb-bg-deep: #090d15; --cb-bg-5: #243650; --cb-gray: #9bb2c6; --cb-gray-l: #b8c8d8; --cb-gold: #c8a84c; --cb-gold-l: #e8d8a8; --cb-gold-m: #e8c878; --cb-gold-xl: #fff5d8; } /* per-section accents in colorful */ html[data-cb-theme="colorful"] [data-cb-section="hero"], html[data-cb-theme="colorful"] [data-cb-section="home"] { --cb-acc:#3b82f6;--cb-steel:#3b82f6;--cb-steel-l:#93c5fd;--cb-steel-d:#1e3a8a;--cb-steel-m:#60a5fa;--cb-glow:rgba(59,130,246,.22); } html[data-cb-theme="colorful"] [data-cb-section="company"], html[data-cb-theme="colorful"] [data-cb-section="about"] { --cb-acc:#f97316;--cb-steel:#f97316;--cb-steel-l:#fdba74;--cb-steel-d:#c2410c;--cb-steel-m:#fb923c;--cb-glow:rgba(249,115,22,.22); } html[data-cb-theme="colorful"] [data-cb-section="history"] { --cb-acc:#c2761e;--cb-steel:#c2761e;--cb-steel-l:#f3b760;--cb-steel-d:#8a5113;--cb-steel-m:#d99344;--cb-glow:rgba(194,118,30,.22); } html[data-cb-theme="colorful"] [data-cb-section="industry"], html[data-cb-theme="colorful"] [data-cb-section="production"] { --cb-acc:#94a3b8;--cb-steel:#94a3b8;--cb-steel-l:#cbd5e1;--cb-steel-d:#475569;--cb-steel-m:#b0bccc;--cb-glow:rgba(148,163,184,.24); } html[data-cb-theme="colorful"] [data-cb-section="quality"], html[data-cb-theme="colorful"] [data-cb-section="certificates"] { --cb-acc:#eab308;--cb-steel:#eab308;--cb-steel-l:#fde68a;--cb-steel-d:#a16207;--cb-steel-m:#facc15;--cb-glow:rgba(234,179,8,.24); } html[data-cb-theme="colorful"] [data-cb-section="leadership"], html[data-cb-theme="colorful"] [data-cb-section="shareholders"] { --cb-acc:#8b5cf6;--cb-steel:#8b5cf6;--cb-steel-l:#c4b5fd;--cb-steel-d:#5b21b6;--cb-steel-m:#a78bfa;--cb-glow:rgba(139,92,246,.24); } html[data-cb-theme="colorful"] [data-cb-section="strategy"] { --cb-acc:#6366f1;--cb-steel:#6366f1;--cb-steel-l:#a5b4fc;--cb-steel-d:#4338ca;--cb-steel-m:#818cf8;--cb-glow:rgba(99,102,241,.22); } html[data-cb-theme="colorful"] [data-cb-section="news"] { --cb-acc:#ef4444;--cb-steel:#ef4444;--cb-steel-l:#fca5a5;--cb-steel-d:#b91c1c;--cb-steel-m:#f87171;--cb-glow:rgba(239,68,68,.22); } html[data-cb-theme="colorful"] [data-cb-section="notice"] { --cb-acc:#f59e0b;--cb-steel:#f59e0b;--cb-steel-l:#fcd34d;--cb-steel-d:#b45309;--cb-steel-m:#fbbf24;--cb-glow:rgba(245,158,11,.22); } html[data-cb-theme="colorful"] [data-cb-section="contact"] { --cb-acc:#06b6d4;--cb-steel:#06b6d4;--cb-steel-l:#67e8f9;--cb-steel-d:#0e7490;--cb-steel-m:#22d3ee;--cb-glow:rgba(6,182,212,.22); } html[data-cb-theme="colorful"] [data-cb-section="tour"] { --cb-acc:#a855f7;--cb-steel:#a855f7;--cb-steel-l:#d8b4fe;--cb-steel-d:#6b21a8;--cb-steel-m:#c084fc;--cb-glow:rgba(168,85,247,.24); } html[data-cb-theme="colorful"] [data-cb-section="csr"] { --cb-acc:#ec4899;--cb-steel:#ec4899;--cb-steel-l:#f9a8d4;--cb-steel-d:#be185d;--cb-steel-m:#f472b6;--cb-glow:rgba(236,72,153,.24); } html[data-cb-theme="colorful"] [data-cb-section="products"], html[data-cb-theme="colorful"] [data-cb-section="catalog"] { --cb-acc:#d97706;--cb-steel:#d97706;--cb-steel-l:#fcd34d;--cb-steel-d:#92400e;--cb-steel-m:#f59e0b;--cb-glow:rgba(217,119,6,.22); } html[data-cb-theme="colorful"] [data-cb-section="packaging"] { --cb-acc:#84cc16;--cb-steel:#84cc16;--cb-steel-l:#d9f99d;--cb-steel-d:#4d7c0f;--cb-steel-m:#a3e635;--cb-glow:rgba(132,204,22,.22); } html[data-cb-theme="colorful"] [data-cb-section="specs"], html[data-cb-theme="colorful"] [data-cb-section="specifications"] { --cb-acc:#64748b;--cb-steel:#64748b;--cb-steel-l:#cbd5e1;--cb-steel-d:#334155;--cb-steel-m:#94a3b8;--cb-glow:rgba(100,116,139,.22); } /* per-page-template defaults */ html[data-cb-theme="colorful"] body.cbasco-tpl-about { --cb-acc:#f97316;--cb-steel:#f97316;--cb-steel-l:#fdba74;--cb-steel-d:#c2410c;--cb-steel-m:#fb923c;--cb-glow:rgba(249,115,22,.22); } html[data-cb-theme="colorful"] body.cbasco-tpl-history { --cb-acc:#c2761e;--cb-steel:#c2761e;--cb-steel-l:#f3b760;--cb-steel-d:#8a5113;--cb-steel-m:#d99344;--cb-glow:rgba(194,118,30,.22); } html[data-cb-theme="colorful"] body.cbasco-tpl-csr { --cb-acc:#ec4899;--cb-steel:#ec4899;--cb-steel-l:#f9a8d4;--cb-steel-d:#be185d;--cb-steel-m:#f472b6;--cb-glow:rgba(236,72,153,.24); } html[data-cb-theme="colorful"] body.cbasco-tpl-strategy { --cb-acc:#6366f1;--cb-steel:#6366f1;--cb-steel-l:#a5b4fc;--cb-steel-d:#4338ca;--cb-steel-m:#818cf8;--cb-glow:rgba(99,102,241,.22); } html[data-cb-theme="colorful"] body.cbasco-tpl-production { --cb-acc:#94a3b8;--cb-steel:#94a3b8;--cb-steel-l:#cbd5e1;--cb-steel-d:#475569;--cb-steel-m:#b0bccc;--cb-glow:rgba(148,163,184,.24); } html[data-cb-theme="colorful"] body.cbasco-tpl-certificates { --cb-acc:#eab308;--cb-steel:#eab308;--cb-steel-l:#fde68a;--cb-steel-d:#a16207;--cb-steel-m:#facc15;--cb-glow:rgba(234,179,8,.24); } html[data-cb-theme="colorful"] body.cbasco-tpl-shareholders { --cb-acc:#8b5cf6;--cb-steel:#8b5cf6;--cb-steel-l:#c4b5fd;--cb-steel-d:#5b21b6;--cb-steel-m:#a78bfa;--cb-glow:rgba(139,92,246,.24); } html[data-cb-theme="colorful"] body.cbasco-tpl-specifications{ --cb-acc:#64748b;--cb-steel:#64748b;--cb-steel-l:#cbd5e1;--cb-steel-d:#334155;--cb-steel-m:#94a3b8;--cb-glow:rgba(100,116,139,.22); } html[data-cb-theme="colorful"] body.cbasco-tpl-catalog { --cb-acc:#d97706;--cb-steel:#d97706;--cb-steel-l:#fcd34d;--cb-steel-d:#92400e;--cb-steel-m:#f59e0b;--cb-glow:rgba(217,119,6,.22); } html[data-cb-theme="colorful"] body.cbasco-tpl-packaging { --cb-acc:#84cc16;--cb-steel:#84cc16;--cb-steel-l:#d9f99d;--cb-steel-d:#4d7c0f;--cb-steel-m:#a3e635;--cb-glow:rgba(132,204,22,.22); } html[data-cb-theme="colorful"] body.cbasco-tpl-tour { --cb-acc:#a855f7;--cb-steel:#a855f7;--cb-steel-l:#d8b4fe;--cb-steel-d:#6b21a8;--cb-steel-m:#c084fc;--cb-glow:rgba(168,85,247,.24); } html[data-cb-theme="colorful"] body.cbasco-tpl-contact { --cb-acc:#06b6d4;--cb-steel:#06b6d4;--cb-steel-l:#67e8f9;--cb-steel-d:#0e7490;--cb-steel-m:#22d3ee;--cb-glow:rgba(6,182,212,.22); } html[data-cb-theme="colorful"] body.cbasco-news-single, html[data-cb-theme="colorful"] body.post-type-archive-cb_news, html[data-cb-theme="colorful"] body.tax-cb_news_type { --cb-acc:#ef4444;--cb-steel:#ef4444;--cb-steel-l:#fca5a5;--cb-steel-d:#b91c1c;--cb-steel-m:#f87171;--cb-glow:rgba(239,68,68,.22); } html[data-cb-theme="colorful"] body.cbasco-notice-single, html[data-cb-theme="colorful"] body.post-type-archive-cb_notice, html[data-cb-theme="colorful"] body.tax-cb_notice_type { --cb-acc:#f59e0b;--cb-steel:#f59e0b;--cb-steel-l:#fcd34d;--cb-steel-d:#b45309;--cb-steel-m:#fbbf24;--cb-glow:rgba(245,158,11,.22); } /* derived tokens from live --cb-acc */ html[data-cb-theme="colorful"] [data-cb-section], html[data-cb-theme="colorful"] body[class*="cbasco-tpl-"], html[data-cb-theme="colorful"] body[class*="cbasco-news-single"], html[data-cb-theme="colorful"] body[class*="cbasco-notice-single"], html[data-cb-theme="colorful"] body[class*="post-type-archive-cb_"], html[data-cb-theme="colorful"] body[class*="tax-cb_"] { --cb-grad-logo: linear-gradient(90deg, var(--cb-steel-d), var(--cb-steel), var(--cb-steel-l)); --cb-grad-stat: linear-gradient(135deg, var(--cb-steel-l), var(--cb-steel)); --cb-grad-hero: linear-gradient(135deg, var(--cb-steel-l) 18%, var(--cb-steel) 55%, var(--cb-highlight) 100%); --cb-grad-tag: linear-gradient(90deg, var(--cb-acc), transparent); --cb-border: color-mix(in srgb, var(--cb-acc) 24%, transparent); --cb-border-hover: color-mix(in srgb, var(--cb-acc) 45%, transparent); --cb-badge-bg: color-mix(in srgb, var(--cb-acc) 14%, transparent); } /* ─── REAL section backgrounds in colorful mode ─── */ /* We override BOTH background-image AND background-color with !important * so any page-specific gradient/image overlay from history.css, strategy.css * etc. is wiped — the accent color is what shows through. */ html[data-cb-theme="colorful"] body { background-color: color-mix(in srgb, var(--cb-acc) 14%, #08090d) !important; } html[data-cb-theme="colorful"] #primary > section, html[data-cb-theme="colorful"] main > section, html[data-cb-theme="colorful"] #primary > article > section, html[data-cb-theme="colorful"] #primary > div > section, html[data-cb-theme="colorful"] main > div > section { background-image: none !important; background-color: color-mix(in srgb, var(--cb-acc) 28%, #0a0e16) !important; color: var(--cb-text); position: relative; } html[data-cb-theme="colorful"] #primary > section:first-of-type, html[data-cb-theme="colorful"] main > section:first-of-type { background-image: none !important; background-color: color-mix(in srgb, var(--cb-acc) 48%, #07090e) !important; } html[data-cb-theme="colorful"] #primary > section:nth-of-type(odd):not(:first-of-type), html[data-cb-theme="colorful"] main > section:nth-of-type(odd):not(:first-of-type) { background-image: none !important; background-color: color-mix(in srgb, var(--cb-acc) 20%, #0b101a) !important; } html[data-cb-theme="colorful"] #primary > section:nth-of-type(even), html[data-cb-theme="colorful"] main > section:nth-of-type(even) { background-image: none !important; background-color: color-mix(in srgb, var(--cb-acc) 36%, #090c14) !important; } html[data-cb-theme="colorful"] [data-cb-section] { background-image: none !important; background-color: color-mix(in srgb, var(--cb-acc) 34%, #0a0d14) !important; } html[data-cb-theme="colorful"] [data-cb-section="hero"], html[data-cb-theme="colorful"] [data-cb-section="home"] { background-image: none !important; background-color: color-mix(in srgb, var(--cb-acc) 52%, #06080d) !important; } /* CARDS tinted too */ html[data-cb-theme="colorful"] .cbf-feat-card, html[data-cb-theme="colorful"] .cbf-intro-card, html[data-cb-theme="colorful"] .cbf-cta-card, html[data-cb-theme="colorful"] .cbab-card, html[data-cb-theme="colorful"] .cbsh-card, html[data-cb-theme="colorful"] .cbcat-card, html[data-cb-theme="colorful"] .cbpk-card, html[data-cb-theme="colorful"] .cbpl-card, html[data-cb-theme="colorful"] .cbcert-card, html[data-cb-theme="colorful"] .cb-feat-card, html[data-cb-theme="colorful"] .cb-mgr-card, html[data-cb-theme="colorful"] .cb-ceo-card, html[data-cb-theme="colorful"] .cbas-card, html[data-cb-theme="colorful"] .cbtour-card, html[data-cb-theme="colorful"] .cbcon-card, html[data-cb-theme="colorful"] .cbsp-card, html[data-cb-theme="colorful"] .cbn-card { background-image: none !important; background-color: color-mix(in srgb, var(--cb-acc) 22%, rgba(8,12,20,.78)) !important; border-color: color-mix(in srgb, var(--cb-acc) 50%, transparent) !important; } /* TEXT COLORS — readable on every tinted section (WCAG AA on every accent) */ html[data-cb-theme="colorful"] #primary > section, html[data-cb-theme="colorful"] main > section, html[data-cb-theme="colorful"] [data-cb-section] { --cb-text: #ffffff; --cb-text-2: #f1f6fb; --cb-text-body: #e4ecf3; --cb-text-muted: #b8c8d6; --cb-highlight: #ffffff; } html[data-cb-theme="colorful"] #primary > section .cbasco-sec-tag, html[data-cb-theme="colorful"] main > section .cbasco-sec-tag { color: var(--cb-highlight); } html[data-cb-theme="colorful"] #primary > section h1, html[data-cb-theme="colorful"] #primary > section h2, html[data-cb-theme="colorful"] main > section h1, html[data-cb-theme="colorful"] main > section h2 { color: var(--cb-text); } html[data-cb-theme="colorful"] #primary > section em, html[data-cb-theme="colorful"] main > section em { color: color-mix(in srgb, var(--cb-acc) 70%, #ffffff); } html[data-cb-theme="colorful"] #primary > section a:not(.cbasco-btn):not(.cbn-filter):not([class*="btn"]), html[data-cb-theme="colorful"] main > section a:not(.cbasco-btn):not(.cbn-filter):not([class*="btn"]) { color: color-mix(in srgb, var(--cb-acc) 45%, #ffffff); text-underline-offset: 3px; } html[data-cb-theme="colorful"] #primary > section a:not(.cbasco-btn):not(.cbn-filter):not([class*="btn"]):hover { color: #ffffff; } /* Single posts (news/notice) — main has
structure */ html[data-cb-theme="colorful"] body.cbasco-news-single #primary, html[data-cb-theme="colorful"] body.cbasco-notice-single #primary { background-color: color-mix(in srgb, var(--cb-acc) 8%, #0d111b) !important; } html[data-cb-theme="colorful"] body.cbasco-news-single #primary > div > section, html[data-cb-theme="colorful"] body.cbasco-notice-single #primary > div > section, html[data-cb-theme="colorful"] body.cbasco-news-single #primary > div > article, html[data-cb-theme="colorful"] body.cbasco-notice-single #primary > div > article { background-color: color-mix(in srgb, var(--cb-acc) 12%, #131927) !important; border-radius: var(--cb-r-lg); padding: 1.4rem 1.6rem; margin-block: 1.2rem; } /* ═══ THEME SWITCHER — icon-only round buttons ═══ */ .cbnav-thememode { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--cb-badge-bg); border: 1px solid var(--cb-border); border-radius: 100px; margin-inline-start: auto; margin-inline-end: 10px; } .cbnav-thememode-btn { all: unset; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; box-sizing: border-box; padding: 7px; border-radius: 50%; cursor: pointer; color: var(--cb-text-body); font-family: inherit; transition: all var(--cb-tr-fast); } .cbnav-thememode-btn:hover { color: var(--cb-text); background: color-mix(in srgb, var(--cb-acc) 18%, transparent); } .cbnav-thememode-btn:focus-visible { outline: 2px solid var(--cb-acc); outline-offset: 2px; } .cbnav-thememode-btn[aria-checked="true"] { background: var(--cb-acc); color: #fff; box-shadow: 0 2px 10px var(--cb-glow); } html[data-cb-theme="light"] .cbnav-thememode-btn[aria-checked="true"] { color: #fff; } .cbnav-thememode-ico { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; } .cbnav-thememode-lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media print { html, html[data-cb-theme] { --cb-bg: #fff; --cb-bg-2: #fff; --cb-bg-3: #fff; --cb-bg-4: #fff; --cb-text: #111; --cb-text-body: #333; --cb-text-2: #222; --cb-acc: #2b6c8c; --cb-steel: #2b6c8c; --cb-border: rgba(0,0,0,.18); color-scheme: light; } html[data-cb-theme="colorful"] body, html[data-cb-theme="colorful"] #primary > section, html[data-cb-theme="colorful"] main > section { background-color: #fff !important; color: #111 !important; } } /* ─── ID WRAPPER OVERRIDES — beat #cbas-* selectors with !important ─── */ html[data-cb-theme="colorful"] #cbas-history, html[data-cb-theme="colorful"] #cbas-strategy, html[data-cb-theme="colorful"] #cbas-csr, html[data-cb-theme="colorful"] [id^="cbas-"]:not([id*="modal"]):not([id*="toolbar"]) { background-image: none !important; background-color: transparent !important; } /* Sections that live INSIDE the cbas-* id wrapper (history, strategy) */ html[data-cb-theme="colorful"] #cbas-history > section, html[data-cb-theme="colorful"] #cbas-strategy > section { background-image: none !important; background-color: color-mix(in srgb, var(--cb-acc) 30%, #0a0d14) !important; color: var(--cb-text); } html[data-cb-theme="colorful"] #cbas-history > section:first-of-type, html[data-cb-theme="colorful"] #cbas-strategy > section:first-of-type { background-color: color-mix(in srgb, var(--cb-acc) 50%, #07090e) !important; } html[data-cb-theme="colorful"] #cbas-history > section:nth-of-type(even), html[data-cb-theme="colorful"] #cbas-strategy > section:nth-of-type(even) { background-color: color-mix(in srgb, var(--cb-acc) 38%, #080b12) !important; } html[data-cb-theme="colorful"] #cbas-history > section:nth-of-type(odd):not(:first-of-type), html[data-cb-theme="colorful"] #cbas-strategy > section:nth-of-type(odd):not(:first-of-type) { background-color: color-mix(in srgb, var(--cb-acc) 22%, #0c1018) !important; } /* Soften decorative pseudo-elements so the accent shows through */ html[data-cb-theme="colorful"] #primary > section::before, html[data-cb-theme="colorful"] #primary > section::after, html[data-cb-theme="colorful"] main > section::before, html[data-cb-theme="colorful"] main > section::after, html[data-cb-theme="colorful"] #cbas-history > section::before, html[data-cb-theme="colorful"] #cbas-history > section::after, html[data-cb-theme="colorful"] #cbas-strategy > section::before, html[data-cb-theme="colorful"] #cbas-strategy > section::after { opacity: .25 !important; mix-blend-mode: soft-light; } /* Inner cards / boxes that some pages paint hard-dark */ html[data-cb-theme="colorful"] .cb-intro-card, html[data-cb-theme="colorful"] .cb-tl-card, html[data-cb-theme="colorful"] .cb-ceo-card, html[data-cb-theme="colorful"] .cb-mgr-card, html[data-cb-theme="colorful"] .cb-cap-card, html[data-cb-theme="colorful"] .cb-mine-card, html[data-cb-theme="colorful"] .cbas-identity-card, html[data-cb-theme="colorful"] .cbas-value-card, html[data-cb-theme="colorful"] .cbas-process-step, html[data-cb-theme="colorful"] .cbsh-pie-card, html[data-cb-theme="colorful"] .cbsh-table-card, html[data-cb-theme="colorful"] .cbsp-card-inner, html[data-cb-theme="colorful"] .cbcat-card, html[data-cb-theme="colorful"] .cbpk-card, html[data-cb-theme="colorful"] .cbtour-card-wrap { background-image: none !important; background-color: color-mix(in srgb, var(--cb-acc) 18%, rgba(8,12,20,.65)) !important; border-color: color-mix(in srgb, var(--cb-acc) 45%, transparent) !important; } /* ═══ LOGO — split background in light mode ═══ * Right half (varagh-khodro) = pure white. Left half (foolad) = dark gradient. * Site is RTL, so visual right = first DOM child = varagh-khodro logo. */ html[data-cb-theme="light"] .cbasco-brand-box { /* Geometry note: in RTL, varagh-khodro logo (~42px) sits to the visual * right and foolad logo (~60px wide) to the visual left. Together with * padding + gaps + the 1px separator, the separator ends up at ~43% of * the box width measured FROM the right edge. We anchor the transition * exactly there so the white stays clean under varagh-khodro and the * darker wash starts the instant we cross under the separator. */ background: linear-gradient(to left, #ffffff 0%, #ffffff 42%, #d0dcea 44%, #9bb1c7 70%, #7d96b0 100%) !important; border: 1px solid rgba(43,108,140,.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.10) !important; } /* Breakpoint-tuned separator anchor (tablet + phone shift the ratio slightly) */ @media (max-width: 768px) { html[data-cb-theme="light"] .cbasco-brand-box { background: linear-gradient(to left, #ffffff 0%, #ffffff 41%, #d0dcea 43%, #9bb1c7 70%, #7d96b0 100%) !important; } } @media (max-width: 560px) { html[data-cb-theme="light"] .cbasco-brand-box { background: linear-gradient(to left, #ffffff 0%, #ffffff 40%, #d0dcea 42%, #9bb1c7 70%, #7d96b0 100%) !important; } } html[data-cb-theme="light"] .cbasco-brand-sheen { background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.55) 55%, transparent 100%) !important; } /* The separator line — make it visible against the split bg */ html[data-cb-theme="light"] .cbasco-brand-sep { background: linear-gradient(180deg, transparent, rgba(43,108,140,.45), transparent) !important; }