/* ============================================================ Cooling Touch — Dark Mode Toggled via [data-theme="dark"] on ============================================================ */ /* ---- Theme Toggle Button ---- */ .ct-theme-toggle { width: 42px; height: 42px; border-radius: 999px; border: none; background: rgba(0,109,255,.1); color: var(--ct-text, #1A2436); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .2s; flex-shrink: 0; padding: 0; } .ct-theme-toggle:hover { background: rgba(0,109,255,.2); color: #006DFF; transform: scale(1.08); } .ct-theme-toggle svg { width: 20px; height: 20px; display: block; } .ct-theme-toggle .ct-icon-sun { display: none; } .ct-theme-toggle .ct-icon-moon { display: block; } /* ---- Dark Mode variables ---- */ [data-theme="dark"] { --ct-white: #0D1929; --ct-light: #0A1220; --ct-gray: rgba(255,255,255,.07); --ct-gray-2: rgba(255,255,255,.13); --ct-text: #D8E2F0; --ct-text-2: #8A9ABB; --ct-text-light: #596A86; --ct-shadow-sm: 0 2px 8px rgba(0,0,0,.35); --ct-shadow: 0 8px 30px rgba(0,0,0,.45); --ct-shadow-lg: 0 20px 60px rgba(0,0,0,.55); --ct-shadow-blue: 0 12px 36px rgba(0,109,255,.35); } [data-theme="dark"] body { background: #07111E; color: var(--ct-text); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #fff; } /* Header */ [data-theme="dark"] .ct-header { background: rgba(7,17,30,.97); border-bottom-color: rgba(255,255,255,.06); } [data-theme="dark"] .ct-logo-text strong { color: #fff; } [data-theme="dark"] .ct-logo-text span { color: rgba(255,255,255,.45); } [data-theme="dark"] .ct-nav a { color: rgba(255,255,255,.82); } [data-theme="dark"] .ct-nav a:hover, [data-theme="dark"] .ct-nav .current-menu-item > a { color: #00B4E6; background: rgba(0,180,230,.1); } [data-theme="dark"] .ct-nav .sub-menu { background: #101C33; } [data-theme="dark"] .ct-theme-toggle { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); } [data-theme="dark"] .ct-theme-toggle:hover { background: rgba(255,255,255,.15); color: #fff; } [data-theme="dark"] .ct-theme-toggle .ct-icon-sun { display: block; } [data-theme="dark"] .ct-theme-toggle .ct-icon-moon { display: none; } [data-theme="dark"] .ct-btn-outline { background: transparent; border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); } [data-theme="dark"] .ct-btn-outline:hover { border-color: #006DFF; color: #fff; } /* Stats strip */ [data-theme="dark"] .ct-stats { background: #101C33; } [data-theme="dark"] .ct-stat-label { color: rgba(255,255,255,.55); } [data-theme="dark"] .ct-stat:not(:last-child)::after { background: rgba(255,255,255,.08); } /* Section backgrounds */ [data-theme="dark"] .ct-section-light { background: #0A1220; } [data-theme="dark"] .ct-page-header { background: #07111E; border-bottom: 1px solid rgba(255,255,255,.06); } [data-theme="dark"] .ct-page-header h1 { color: #fff; } [data-theme="dark"] .ct-breadcrumb a, [data-theme="dark"] .ct-breadcrumb span { color: rgba(255,255,255,.55); } /* Service cards */ [data-theme="dark"] .ct-service-card { background: #101C33; border-color: rgba(255,255,255,.07); } [data-theme="dark"] .ct-service-body h3, [data-theme="dark"] .ct-service-body h3 a { color: #fff; } [data-theme="dark"] .ct-service-body p { color: rgba(255,255,255,.62); } /* Feature list */ [data-theme="dark"] .ct-feature-list li { color: rgba(255,255,255,.85); } /* Why us cards */ [data-theme="dark"] .ct-why-card { background: #101C33; border-color: rgba(255,255,255,.07); } [data-theme="dark"] .ct-why-card p { color: rgba(255,255,255,.6); } [data-theme="dark"] .ct-why-card h3 { color: #fff; } /* Process steps */ [data-theme="dark"] .ct-process-step { background: #101C33; } [data-theme="dark"] .ct-process-step h3 { color: #fff; } [data-theme="dark"] .ct-process-step p { color: rgba(255,255,255,.6); } /* Industry cards */ [data-theme="dark"] .ct-industry-card { background: #101C33; border-color: rgba(255,255,255,.07); } [data-theme="dark"] .ct-industry-card h4 { color: #fff; } /* Project cards */ [data-theme="dark"] .ct-project-card .ct-project-info { background: rgba(7,17,30,.75); } /* Reviews */ [data-theme="dark"] .ct-review-card { background: #101C33; border-color: rgba(255,255,255,.07); } [data-theme="dark"] .ct-review-author-name { color: #fff; } [data-theme="dark"] .ct-review-text { color: rgba(255,255,255,.72); } /* FAQ */ [data-theme="dark"] .ct-faq-item { background: #101C33; border-color: rgba(255,255,255,.07); } [data-theme="dark"] .ct-faq-item.open { border-color: rgba(0,109,255,.4); } [data-theme="dark"] .ct-faq-q { color: rgba(255,255,255,.9); } [data-theme="dark"] .ct-faq-a { color: rgba(255,255,255,.62); } [data-theme="dark"] .ct-faq-icon { color: rgba(255,255,255,.45); } /* Pricing */ [data-theme="dark"] .ct-pricing-card { background: #101C33; border-color: rgba(255,255,255,.07); } [data-theme="dark"] .ct-pricing-card h3 { color: #fff; } [data-theme="dark"] .ct-pricing-price { color: #fff; } [data-theme="dark"] .ct-pricing-feature { color: rgba(255,255,255,.7); } [data-theme="dark"] .ct-pricing-card.featured { background: linear-gradient(135deg,#0A2A4E,#0A1729); } /* Forms */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.9); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: rgba(255,255,255,.35); } [data-theme="dark"] label { color: rgba(255,255,255,.8); } /* Portal */ [data-theme="dark"] .ct-portal-sidebar { background: #0A1220; border-color: rgba(255,255,255,.07); } [data-theme="dark"] .ct-portal-tab { color: rgba(255,255,255,.65); } [data-theme="dark"] .ct-portal-tab:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.06); } [data-theme="dark"] .ct-records-table th { background: rgba(255,255,255,.05); color: rgba(255,255,255,.55); } [data-theme="dark"] .ct-records-table td { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.06); } [data-theme="dark"] .ct-records-table tr:hover td { background: rgba(255,255,255,.04); } [data-theme="dark"] .ct-auth-card { background: #101C33; } [data-theme="dark"] .ct-auth-tab { color: rgba(255,255,255,.55); } [data-theme="dark"] .ct-auth-tab.active { color: #fff; border-color: #006DFF; } /* About */ [data-theme="dark"] .ct-about-signature { border-top-color: rgba(255,255,255,.09); } [data-theme="dark"] .ct-about-signature-info strong { color: #fff; } [data-theme="dark"] .ct-about-signature-info span { color: rgba(255,255,255,.45); } /* Service areas */ [data-theme="dark"] .ct-area-card { background: #101C33; border-color: rgba(255,255,255,.07); } [data-theme="dark"] .ct-area-card h3 { color: #fff; } /* Page-specific dark overrides */ [data-theme="dark"] .ct-svc-detail { background: #0A1220; } [data-theme="dark"] .ct-svc-feature-item { background: #101C33; border-color: rgba(255,255,255,.07); } [data-theme="dark"] .ct-svc-feature-item h4 { color: #fff; } [data-theme="dark"] .ct-svc-feature-item p { color: rgba(255,255,255,.62); } /* Footer */ [data-theme="dark"] .ct-footer { background: #04080F; } /* Transition for smooth switching */ body, .ct-header, .ct-service-card, .ct-why-card, .ct-review-card, .ct-faq-item, .ct-pricing-card, .ct-stats, .ct-process-step, .ct-area-card, .ct-auth-card, .ct-portal-sidebar { transition: background-color .3s, border-color .3s, color .3s; }