/* KACHIPLUG THEME VERSION 11 — 2026-07-13 (select2 fix + dark-mode + menu) ↑ If you open this file's URL in a browser and DON'T see "VERSION 11" at the top, you are looking at a cached/old copy — purge Cloudflare + hard reload. */ /* ============================================================================ KACHIPLUG 2026 — Retheme layer ---------------------------------------------------------------------------- This file is loaded AFTER main.css + custom.css in layouts/app.blade.php, so it wins the cascade. It does NOT touch markup or functionality — it only re-skins ViserLab's existing class system (btn--base, custom--card, dashboard-card, form--control, banner-section, tables, modals, header, footer) to the approved "Direction A" look: off-white light default + ink dark, Fraunces display + Inter body, tabular numerals, soft shadows. Light/dark is driven by data-theme on (set in app.blade.php head). Default = light. Toggle button = .kp-theme-toggle (fixed, bottom-right). ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700;800&display=swap'); /* ── Design tokens ───────────────────────────────────────────────────────── */ :root{ --kp-red:#C8232F; --kp-red-deep:#8E1620; --kp-red-wash:#FBEDED; --kp-ink:#191512; --kp-muted:#7A716B; --kp-line:#EAE3DC; --kp-bg:#FAF6F1; --kp-bg2:#F3EDE5; --kp-card:#FFFEFC; --kp-field:#FBF7F2; --kp-green:#1E7B44; --kp-danger:#C8232F; --kp-shadow:0 24px 60px -24px rgba(25,21,18,.14); /* layered soft shadow — depth-based separation reads more premium than stark white */ --kp-shadow-sm:0 1px 3px rgba(25,21,18,.05), 0 12px 26px -14px rgba(25,21,18,.13); --kp-chip-shadow:0 6px 18px rgba(200,35,47,.22); --kp-r-sm:10px; --kp-r:14px; --kp-r-lg:20px; --kp-r-xl:24px; --kp-pill:999px; --kp-serif:'Fraunces',Georgia,'Times New Roman',serif; --kp-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; } :root[data-theme="dark"]{ --kp-red:#FF4D5E; --kp-red-deep:#D32F3A; --kp-red-wash:rgba(211,47,58,.12); --kp-ink:#F4F5F7; --kp-muted:#8B93A1; --kp-line:#232A35; --kp-bg:#0B0E13; --kp-bg2:#12161D; --kp-card:#151A22; --kp-field:#0B0E13; --kp-green:#3DDC84; --kp-danger:#FF4D5E; --kp-shadow:0 40px 80px -30px rgba(0,0,0,.8); --kp-shadow-sm:0 4px 14px rgba(0,0,0,.4); --kp-chip-shadow:0 0 28px rgba(211,47,58,.4); } /* ── Base / typography ───────────────────────────────────────────────────── */ html{scroll-behavior:smooth;} body{ font-family:var(--kp-sans)!important; background:var(--kp-bg)!important; color:var(--kp-ink)!important; -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease; } h1,h2,h3,h4,h5,h6, .section-title,.content-title,.widget__title,.card-title,.banner-content h1, .banner-content h2,.hero__title,.title{ font-family:var(--kp-serif)!important; font-weight:600!important; letter-spacing:-.02em; } /* Heading COLOR is intentionally NOT !important — so a section that styles its own headings (dark hero sections, .text-white, self-contained kp-* sections) wins by specificity/source-order instead of being clobbered to dark ink and turning invisible on its own dark background. */ h1,h2,h3,h4,h5,h6, h1>a,h2>a,h3>a,h4>a,h5>a,h6>a, .section-title__title,.content-title,.card-title,.widget__title{ color:var(--kp-ink); } /* .text-white / .text--white must always render white (dark sections rely on it) */ .text-white,.text--white,.text-white *,[class*="text-white"]{color:#fff!important;} h1,.banner-content h1{line-height:1.08;} p,span,li,td,label,a,div{color:inherit;} p{color:var(--kp-ink);} .text--muted,.text-muted,small,.small{color:var(--kp-muted)!important;} a{color:var(--kp-red);transition:color .18s ease;} a:hover{color:var(--kp-red-deep);} /* tabular numerals for every money/figure surface */ .amount,.balance,.rate,.figure,.price,.value,td,.table td, .dashboard-card *,.custom--card .amount,input[type="number"]{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* ── Brand colour utilities ──────────────────────────────────────────────── */ .text--base,.text-base{color:var(--kp-red)!important;} .text--primary{color:var(--kp-red)!important;} .text--danger,.text-danger{color:var(--kp-danger)!important;} .text--success,.text-success{color:var(--kp-green)!important;} .text--white{color:#fff!important;} .bg--base,.bg-base{background:var(--kp-red)!important;color:#fff!important;} .bg--light,.bg-light{background:var(--kp-bg2)!important;} .bg--dark{background:var(--kp-ink)!important;color:#fff!important;} .border--base{border-color:var(--kp-red)!important;} /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn{ font-family:var(--kp-sans)!important; font-weight:600!important; border-radius:var(--kp-r)!important; padding:11px 22px; transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease; letter-spacing:0; } .btn:active{transform:translateY(1px) scale(.99);} .btn--base,.btn-base,.bg--base.btn{ background:var(--kp-red)!important; border-color:var(--kp-red)!important; color:#fff!important; box-shadow:var(--kp-chip-shadow); } .btn--base:hover,.btn-base:hover{ background:var(--kp-red-deep)!important; border-color:var(--kp-red-deep)!important; color:#fff!important; } .btn--outline-base{ background:transparent!important; border:1px solid var(--kp-line)!important; color:var(--kp-ink)!important; } .btn--outline-base:hover{ border-color:var(--kp-red)!important; color:var(--kp-red)!important; background:var(--kp-red-wash)!important; } .btn--danger{background:var(--kp-danger)!important;border-color:var(--kp-danger)!important;color:#fff!important;} .btn--dark{background:var(--kp-ink)!important;border-color:var(--kp-ink)!important;color:var(--kp-bg)!important;} .btn--success{background:var(--kp-green)!important;border-color:var(--kp-green)!important;color:#fff!important;} .btn--lg,.btn-lg{padding:15px 26px;border-radius:var(--kp-r-lg)!important;font-size:16px;} .btn--sm,.btn-sm{padding:7px 14px;border-radius:var(--kp-r-sm)!important;font-size:13px;} /* ── Cards ───────────────────────────────────────────────────────────────── */ .custom--card,.card,.dashboard-card{ background:var(--kp-card)!important; border:1px solid var(--kp-line)!important; border-radius:var(--kp-r-xl)!important; box-shadow:var(--kp-shadow-sm); color:var(--kp-ink)!important; } .custom--card .card-header,.card .card-header, .custom--card .card-footer,.card .card-footer{ background:transparent!important; border-color:var(--kp-line)!important; color:var(--kp-ink)!important; } .card-title{color:var(--kp-ink)!important;} .dashboard-card{ border-radius:var(--kp-r-lg)!important; box-shadow:var(--kp-shadow-sm); } /* balance / stat cards accent */ .dashboard-card.bg--base,.dashboard-card--overlay,.balance-card{ background:linear-gradient(135deg,var(--kp-red),var(--kp-red-deep))!important; color:#fff!important; box-shadow:var(--kp-chip-shadow); } .dashboard-card.bg--base *,.balance-card *{color:#fff!important;} /* ── Forms ───────────────────────────────────────────────────────────────── */ .form--control,.form-control,.form-select,select.form--control,textarea.form--control{ background:var(--kp-field)!important; border:1px solid var(--kp-line)!important; border-radius:var(--kp-r)!important; color:var(--kp-ink)!important; font-family:var(--kp-sans)!important; font-size:15px; padding:12px 16px; height:auto; box-shadow:none!important; transition:border-color .18s ease,box-shadow .18s ease; } .form--control:focus,.form-control:focus,.form-select:focus{ border-color:var(--kp-red)!important; box-shadow:0 0 0 3px var(--kp-red-wash)!important; background:var(--kp-card)!important; color:var(--kp-ink)!important; } .form--control::placeholder,.form-control::placeholder{color:var(--kp-muted)!important;opacity:1;} .form-group label,.form--group label,label{ color:var(--kp-muted)!important; font-weight:600; font-size:13px; } .form-group label.required:after{color:var(--kp-danger);} .input-group-text{background:var(--kp-bg2)!important;border-color:var(--kp-line)!important;color:var(--kp-muted)!important;} /* select2 / dropdowns */ .select2-container--default .select2-selection--single{ background:var(--kp-field)!important;border:1px solid var(--kp-line)!important; border-radius:var(--kp-r)!important;height:auto!important;padding:8px 6px; } .select2-dropdown{background:var(--kp-card)!important;border-color:var(--kp-line)!important;} /* ── Header / navigation ─────────────────────────────────────────────────── */ .header,.header-section,.header__bottom,.navbar{ background:color-mix(in srgb,var(--kp-bg) 90%,transparent)!important; backdrop-filter:blur(14px); border-bottom:1px solid var(--kp-line)!important; } .header.active,.header--fixed.active{background:var(--kp-card)!important;} .header .nav-link,.menu li a,.header__menu li a,.navbar-nav .nav-link{ color:var(--kp-muted)!important; font-family:var(--kp-sans)!important; font-weight:500; } .header .nav-link:hover,.menu li a:hover,.header__menu li a:hover, .header .nav-link.active,.menu li.active a{color:var(--kp-ink)!important;} .site-logo,.logo,.navbar-brand{font-family:var(--kp-serif)!important;color:var(--kp-red)!important;} /* ── Banner / hero ───────────────────────────────────────────────────────── */ .banner-section,.hero-section,.banner{ background:var(--kp-bg)!important; position:relative; } .banner-section:before{content:"";position:absolute;inset:0; background:radial-gradient(60% 60% at 80% 0%,var(--kp-red-wash),transparent 70%); pointer-events:none;} .banner-content h1,.banner-content h2{color:var(--kp-ink)!important;} .banner-content p{color:var(--kp-muted)!important;font-size:17px;line-height:1.6;} /* ── Section headers ─────────────────────────────────────────────────────── */ /* NOTE: color is NOT !important — a dark section that puts .text-white on its .section-title must win (else dark ink lands on a dark bg = invisible, e.g. the "Trusted by Industry Leaders" partners band). */ .section-title:not(.text-white),.section-header .title:not(.text-white){color:var(--kp-ink);} .section-header p,.section-subtitle:not([style*="color"]){color:var(--kp-muted);} .eyebrow,.section-header .subtitle,.badge--pill{ display:inline-flex;align-items:center;gap:8px; background:var(--kp-red-wash);color:var(--kp-red-deep); font-weight:600;border-radius:var(--kp-pill);padding:6px 14px;font-size:12.5px; } /* ── Tables ──────────────────────────────────────────────────────────────── */ .table,.custom--table{color:var(--kp-ink)!important;border-color:var(--kp-line)!important;} .table thead th,.custom--table thead th{ background:var(--kp-bg2)!important; color:var(--kp-muted)!important; text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;font-weight:600; border-color:var(--kp-line)!important; } .table td,.table th,.custom--table td,.custom--table th{ border-color:var(--kp-line)!important; vertical-align:middle; } .table tbody tr:hover,.custom--table tbody tr:hover{background:var(--kp-bg2)!important;} .table-striped tbody tr:nth-of-type(odd){background:color-mix(in srgb,var(--kp-bg2) 55%,transparent)!important;} /* ── List groups ─────────────────────────────────────────────────────────── */ .list-group-item{ background:transparent!important; border-color:var(--kp-line)!important; color:var(--kp-ink)!important; } /* ── Badges / labels ─────────────────────────────────────────────────────── */ .badge{border-radius:var(--kp-pill)!important;font-weight:600;padding:5px 12px;} .badge--success,.badge-success{background:color-mix(in srgb,var(--kp-green) 16%,transparent)!important;color:var(--kp-green)!important;} .badge--danger,.badge-danger{background:var(--kp-red-wash)!important;color:var(--kp-red)!important;} .badge--warning{background:rgba(214,158,46,.16)!important;color:#B7791F!important;} .badge--base{background:var(--kp-red-wash)!important;color:var(--kp-red)!important;} /* ── Alerts ──────────────────────────────────────────────────────────────── */ .alert{border-radius:var(--kp-r)!important;border:1px solid var(--kp-line)!important;} .alert--success,.alert-success{background:color-mix(in srgb,var(--kp-green) 10%,var(--kp-card))!important;color:var(--kp-green)!important;border-color:var(--kp-green)!important;} .alert--danger,.alert-danger{background:var(--kp-red-wash)!important;color:var(--kp-red-deep)!important;border-color:var(--kp-red)!important;} /* ── Modals ──────────────────────────────────────────────────────────────── */ .modal-content{ background:var(--kp-card)!important; border:1px solid var(--kp-line)!important; border-radius:var(--kp-r-xl)!important; color:var(--kp-ink)!important; } .modal-header,.modal-footer{border-color:var(--kp-line)!important;} .modal-title{color:var(--kp-ink)!important;} /* ── Footer ──────────────────────────────────────────────────────────────── */ .footer,.footer-section,footer{ background:var(--kp-bg2)!important; border-top:1px solid var(--kp-line)!important; color:var(--kp-muted)!important; } .footer a,.footer-section a,footer a{color:var(--kp-muted)!important;} .footer a:hover,.footer-section a:hover,footer a:hover{color:var(--kp-ink)!important;} .footer h4,.footer h5,.footer .widget__title{ color:var(--kp-ink)!important; text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-family:var(--kp-sans)!important;font-weight:600; } /* ── Breadcrumb ──────────────────────────────────────────────────────────── */ .breadcrumb-section,.page-breadcrumb,.inner-hero{background:var(--kp-bg2)!important;} .breadcrumb a{color:var(--kp-muted)!important;} .breadcrumb .active,.breadcrumb-item.active{color:var(--kp-red)!important;} /* ── Dashboard sidebar (user panel) ──────────────────────────────────────── */ .sidebar,.dashboard-sidebar,.user-sidebar{ background:var(--kp-card)!important; border-right:1px solid var(--kp-line)!important; } .sidebar a,.dashboard-sidebar a{color:var(--kp-muted)!important;} .sidebar a.active,.sidebar li.active a,.dashboard-sidebar a:hover{ color:var(--kp-red)!important;background:var(--kp-red-wash)!important;border-radius:var(--kp-r-sm); } /* ── Pagination ──────────────────────────────────────────────────────────── */ .pagination .page-link{color:var(--kp-ink)!important;border-color:var(--kp-line)!important;background:var(--kp-card)!important;} .pagination .active .page-link,.pagination .page-item.active .page-link{background:var(--kp-red)!important;border-color:var(--kp-red)!important;color:#fff!important;} /* ── Misc chrome ─────────────────────────────────────────────────────────── */ .preloader{background:var(--kp-bg)!important;} .cookies-card{background:var(--kp-card)!important;border:1px solid var(--kp-line)!important;border-radius:var(--kp-r-lg)!important;color:var(--kp-ink)!important;box-shadow:var(--kp-shadow);} .whatsapp-btn{box-shadow:var(--kp-shadow-sm);} hr{border-color:var(--kp-line)!important;} ::selection{background:var(--kp-red);color:#fff;} /* ── Theme toggle button (injected by app.blade.php) ─────────────────────── */ .kp-theme-toggle{ position:fixed;right:20px;bottom:88px;z-index:9998; width:46px;height:46px;border-radius:var(--kp-pill); border:1px solid var(--kp-line);background:var(--kp-card);color:var(--kp-ink); display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:var(--kp-shadow-sm);font-size:20px;line-height:1; transition:transform .15s ease,background .2s ease,border-color .2s ease; } .kp-theme-toggle:hover{transform:translateY(-2px);border-color:var(--kp-red);} .kp-theme-toggle .kp-sun{display:none;} .kp-theme-toggle .kp-moon{display:inline;} :root[data-theme="dark"] .kp-theme-toggle .kp-sun{display:inline;} :root[data-theme="dark"] .kp-theme-toggle .kp-moon{display:none;} @media (max-width:575px){.kp-theme-toggle{width:42px;height:42px;bottom:80px;right:14px;font-size:18px;}} /* ════════════════════════════════════════════════════════════════════════ POLISH PASS 2 — fixes from first live activation (2026-07-13) ════════════════════════════════════════════════════════════════════════ */ /* ── Page headers (breadcrumb): KEEP the photo, add scrim so text always reads ── */ section.inner-banner, .inner-banner.bg_img{ background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; padding:78px 0 58px; position:relative; } .inner-banner::before{ /* dark gradient scrim over the photo */ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(9,18,36,.52) 0%,rgba(9,18,36,.80) 100%); z-index:1; } .inner-banner .container{position:relative;z-index:2;} .inner-banner .title,.inner-banner h2.title,.inner-banner .text-white{ color:#fff!important; /* white in BOTH light + dark */ font-family:var(--kp-serif)!important; text-shadow:0 2px 18px rgba(0,0,0,.45); } /* ── Footer: accent bg → warm; kill invisible white text ── */ .footer.bg--accent,footer.bg--accent{background:var(--kp-bg2)!important;} .footer .text-white,.footer .text--white,footer .text-white, .footer p,.footer small{color:var(--kp-ink)!important;} .footer .footer-widget__title{ color:var(--kp-ink)!important; font-family:var(--kp-sans)!important; text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:600; } .footer-links li a,.footer-contact-list li,.footer-contact-list li a{color:var(--kp-muted)!important;} .footer-links li a:hover{color:var(--kp-ink)!important;} .footer hr{border-color:var(--kp-line)!important;opacity:1;} /* copyright / disclaimer strip */ .footer .copyright,.footer .copyright p,.footer .disclaimer, .footer [class*="copyright"]{color:var(--kp-muted)!important;font-size:13px;} /* ── Home exchange widget + rates (class is `custom-widget`, single dash) ── */ .custom-widget{ background:var(--kp-card)!important; border:1px solid var(--kp-line)!important; border-radius:var(--kp-r-xl)!important; box-shadow:var(--kp-shadow); padding:26px; } .custom-widget .banner__widget-title,.banner__widget-title{ font-family:var(--kp-serif)!important;color:var(--kp-ink)!important;font-weight:600!important; } .custom-widget table th{ background:var(--kp-bg2)!important;color:var(--kp-muted)!important; text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;font-weight:600; border-color:var(--kp-line)!important; } .custom-widget table td{border-color:var(--kp-line)!important;color:var(--kp-ink)!important;vertical-align:middle;} .custom-widget table tbody tr:hover{background:var(--kp-bg2)!important;} /* ── Mobile menu: card panel, roomy rows, full-width login ── */ @media (max-width:991px){ .menu{ background:var(--kp-card)!important; border:1px solid var(--kp-line)!important; border-radius:var(--kp-r-lg)!important; box-shadow:var(--kp-shadow)!important; padding:8px 20px 16px!important; } .menu > li > a{ display:block;padding:15px 2px!important; font-size:15.5px;font-weight:600; color:var(--kp-ink)!important; border-bottom:1px solid var(--kp-line)!important; } .menu > li:last-of-type > a{border-bottom:0!important;} .menu .btn--base,.menu .btn.btn--base{ display:block;width:100%;text-align:center; padding:14px!important;font-size:15px!important; margin-top:12px;border-radius:var(--kp-r)!important; } } .header .logo img{max-height:46px;width:auto;} /* ── Theme toggle: clear of the Tawk bubble + scroll-top arrow ── */ .kp-theme-toggle{bottom:178px!important;right:20px!important;} @media (max-width:575px){.kp-theme-toggle{bottom:170px!important;right:16px!important;}} /* ── Consistency: light sections all use the same warm tone ── */ section.bg-light,.section.bg--light,.faq-section.bg-light{background:var(--kp-bg2)!important;} /* ════════════════════════════════════════════════════════════════════════ FINAL COVERAGE PASS — rebased on live files (2026-07-13) Every remaining component the 87 live blades use. ════════════════════════════════════════════════════════════════════════ */ /* ── User dashboard stat cards (BEM internals) ── */ .dashboard-card__icon{ background:var(--kp-red-wash)!important;color:var(--kp-red)!important; border-radius:var(--kp-r)!important; } .dashboard-card__icon i{color:var(--kp-red)!important;} .dashboard-card__content-title{color:var(--kp-muted)!important;font-size:13px;font-weight:600; text-transform:uppercase;letter-spacing:.05em;font-family:var(--kp-sans)!important;} .dashboard-card__content-info{color:var(--kp-ink)!important;font-variant-numeric:tabular-nums; font-weight:700;} /* ── Section headers (BEM used by live sections) ── */ .section-title__wrapper .section-title__title,.section-title__title{ font-family:var(--kp-serif)!important;color:var(--kp-ink)!important;font-weight:600!important; letter-spacing:-.02em;} .section-title__desc{color:var(--kp-muted)!important;} /* ── Header dropdown (sub-menu) ── */ .sub-menu{ background:var(--kp-card)!important;border:1px solid var(--kp-line)!important; border-radius:var(--kp-r)!important;box-shadow:var(--kp-shadow)!important;} .sub-menu li a{color:var(--kp-muted)!important;} .sub-menu li a:hover{color:var(--kp-red)!important;background:var(--kp-red-wash)!important;} /* ── Verification / 2FA screens ── */ .verification-area,.verification-code-wrapper{ background:var(--kp-card)!important;border:1px solid var(--kp-line)!important; border-radius:var(--kp-r-lg)!important;} .verification-code-wrapper input{ background:var(--kp-field)!important;border:1px solid var(--kp-line)!important; color:var(--kp-ink)!important;border-radius:var(--kp-r-sm)!important; font-variant-numeric:tabular-nums;} /* ── Newer form patterns ── */ .form-label,.form-label-two,.floating-label{color:var(--kp-muted)!important;font-weight:600;} .floating-input{ background:var(--kp-field)!important;border:1px solid var(--kp-line)!important; color:var(--kp-ink)!important;border-radius:var(--kp-r)!important;} .floating-input:focus{border-color:var(--kp-red)!important;box-shadow:0 0 0 3px var(--kp-red-wash)!important;} /* ── Bootstrap utility overrides so nothing stays stark ── */ .bg-white{background:var(--kp-card)!important;} .text-dark{color:var(--kp-ink)!important;} .card-body{color:var(--kp-ink);} .border-dotted{border-color:var(--kp-line)!important;} .table--responsive--md,.table--responsive--lg{border-color:var(--kp-line)!important;} /* ── Social icons / misc ── */ .social-list__icon{ background:var(--kp-bg2)!important;color:var(--kp-muted)!important; border:1px solid var(--kp-line)!important;border-radius:var(--kp-pill)!important;} .social-list__icon:hover{background:var(--kp-red)!important;color:#fff!important;border-color:var(--kp-red)!important;} .thumb img{border-radius:var(--kp-r);max-width:100%;} .error-content h2,.error-content .title{font-family:var(--kp-serif)!important;color:var(--kp-ink)!important;} /* ── Career section + apply page: retire the old ORANGE accent → brand red ── (blades carry inline styles with #FF5A1F; these load later and win) */ .kp-career .kp-eyebrow,.kp-apply .kp-crumb a,.kp-career .kp-h1 em{color:var(--kp-red)!important;} .kp-career .kp-eyebrow{background:var(--kp-red-wash)!important;} .kp-career .kp-role-pill{background:var(--kp-red-wash)!important;color:var(--kp-red-deep)!important;} .kp-career .kp-role-pill svg{fill:var(--kp-red)!important;stroke:var(--kp-red)!important;} .kp-career .kp-role-cta,.kp-apply .kp-btn{ background:var(--kp-red)!important;color:#fff!important;box-shadow:var(--kp-chip-shadow);} .kp-career .kp-role-cta:hover,.kp-apply .kp-btn:hover{background:var(--kp-red-deep)!important;} .kp-career .kp-cta{background:var(--kp-ink)!important;} .kp-career .kp-cta a{background:var(--kp-red)!important;color:#fff!important;} .kp-career .kp-empty a,.kp-apply .kp-desc a{color:var(--kp-red)!important;} /* warm cream panels in career blades → theme surface */ .kp-career,.kp-apply{background:var(--kp-bg)!important;} .kp-career .kp-role,.kp-apply .kp-card,.kp-apply .kp-field input,.kp-apply .kp-field textarea,.kp-apply .kp-field select{ background:var(--kp-card)!important;border-color:var(--kp-line)!important;color:var(--kp-ink)!important;} /* ── Dark-mode safety for blade-inline components (kp-* use light hardcodes) ── */ :root[data-theme="dark"] .kp-career .kp-role-title, :root[data-theme="dark"] .kp-career .kp-h1, :root[data-theme="dark"] .kp-apply .kp-desc, :root[data-theme="dark"] .kp-apply .kp-field label{color:var(--kp-ink)!important;} /* ════════════════════════════════════════════════════════════════════════ REVISION 3 — founder feedback (2026-07-13): header-docked toggle, premium BLUE gradient footer, clearer buttons ════════════════════════════════════════════════════════════════════════ */ /* ── Theme toggle now lives IN the header bar (never blocked by chat bubble) ── */ .kp-theme-toggle.kp-in-header{ position:static!important; /* cancel the old fixed floating */ width:40px;height:40px;margin:0 4px; border-radius:var(--kp-pill); border:1px solid var(--kp-line); background:var(--kp-card);color:var(--kp-ink); display:inline-flex;align-items:center;justify-content:center; cursor:pointer;font-size:18px;line-height:1;flex:0 0 auto; box-shadow:none; transition:background .2s ease,border-color .2s ease,transform .12s ease; } .kp-theme-toggle.kp-in-header:hover{border-color:var(--kp-red);transform:translateY(-1px);} /* keep header row aligned with the toggle + hamburger */ .header-bottom-area{display:flex;align-items:center;} .header-trigger-wrapper{margin-left:2px;} @media (max-width:575px){.kp-theme-toggle.kp-in-header{width:38px;height:38px;font-size:17px;}} /* ── FOOTER: premium deep-blue gradient (replaces cream), text reads clearly ── */ .footer,footer,.footer.bg--accent,footer.bg--accent,.footer-section{ background:linear-gradient(165deg,#123763 0%,#0C2340 55%,#081A30 100%)!important; border-top:0!important; color:#E7EDF5!important; } .footer *,footer *{border-color:rgba(255,255,255,.10)!important;} .footer .footer-widget__title,.footer h4,.footer h5{ color:#FFFFFF!important; font-family:var(--kp-sans)!important; text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;font-weight:700; opacity:.95; } .footer p,.footer small,.footer .text-white,.footer .text--white,.footer span{color:#C6D2E2!important;} .footer a,.footer-links li a,.footer-contact-list li,.footer-contact-list li a{ color:#AEBCCF!important;transition:color .18s ease; } .footer a:hover,.footer-links li a:hover{color:#FFFFFF!important;} .footer hr{border-color:rgba(255,255,255,.12)!important;opacity:1;} /* copyright / disclaimer strip — was ghost-faint, now legible */ .footer .copyright,.footer .copyright p,.footer .disclaimer, .footer [class*="copyright"],.footer .footer-bottom,.footer .footer-bottom p{ color:#93A2B8!important;font-size:12.5px; } /* social pills on the dark footer */ .footer .social-list__icon,footer .social-list__icon{ background:rgba(255,255,255,.08)!important;color:#fff!important; border:1px solid rgba(255,255,255,.16)!important; } .footer .social-list__icon:hover{background:var(--kp-red)!important;border-color:var(--kp-red)!important;} /* app-store badges keep their own art; just give breathing room */ .footer .app-badges img,.footer img[alt*="Store"],.footer img[alt*="Play"]{filter:none;} /* ── Buttons: make Login/Dashboard unmistakably solid red (was faint before) ── */ .btn--base,.header .btn--base{color:#fff!important;} .header .btn--base i{color:#fff!important;} /* ── Dashboard hero "Action Hub": richer red gradient (premium) ── */ .dashboard-card.bg--base,.balance-card,[class*="action-hub"],.action-hub{ background:linear-gradient(135deg,var(--kp-red) 0%,var(--kp-red-deep) 100%)!important; } /* ════════════════════════════════════════════════════════════════════════ REVISION 4 — full page-by-page polish from live screenshots (2026-07-13) ════════════════════════════════════════════════════════════════════════ */ /* ── Testimonials ("What our happy customers say"): cool grey → warm ── */ .section-bg{background:var(--kp-bg2)!important;} .testimonial-item{ background:var(--kp-card)!important;border:1px solid var(--kp-line)!important; border-radius:var(--kp-r-xl)!important;box-shadow:var(--kp-shadow-sm)!important; } .testimonial-item__content p{color:var(--kp-ink)!important;} .testimonial-item .kp-stars i,.testimonial-item .rating i,.testimonial-item i.las.la-star{color:var(--kp-red)!important;} /* ── Newsletter / Subscribe: deep-navy band (matches footer), text visible ── */ .subscribe-section,.newsletter-section,.subscribe-section.bg--accent{ background:linear-gradient(150deg,#123763 0%,#0C2340 100%)!important; } .subscribe-section .title,.newsletter-section .title,.newsletter-header .title{color:#fff!important;} .subscribe-section p,.newsletter-section p{color:#C6D2E2!important;} .subscribe-form .form-control,.subscribe-form input[type="email"]{ background:#fff!important;border:0!important;border-radius:var(--kp-r)!important;color:var(--kp-ink)!important; } .subscribe-form .btn,.subscribe-form button{ background:var(--kp-red)!important;border-color:var(--kp-red)!important;color:#fff!important; border-radius:var(--kp-r)!important; } /* ── Self-styled marketing sections (Pay4Me / USD card): keep THEIR colours, re-assert the ones my old global rule had clobbered. These sections are "light always" by design (hardcoded backgrounds), readable in both modes. ── */ .kp-app .kp-h1,.kp-app .kp-h2{color:#0d0d0d!important;} .kp-app .kp-h1 em{color:var(--kp-red)!important;} .kp-app .kp-pay4me .kp-h2,.kp-app .kp-cta h2,.kp-app .kp-usdbank h2, .kp-app .kp-pay4me *,.kp-app .kp-cta h2,.kp-app .kp-usdbank h2{color:#fff!important;} .kp-app .kp-pay4me p,.kp-app .kp-cta p{color:rgba(255,255,255,.85)!important;} /* step-number badges: orange → brand red */ .kp-app .kp-step-num,.kp-step-num{ background:linear-gradient(135deg,var(--kp-red),var(--kp-red-deep))!important; } .kp-app .kp-eyebrow{background:var(--kp-red-wash)!important;color:var(--kp-red-deep)!important;} /* ── "Ready to Secure" CTA (trust.blade #0f172a): heading + primary btn ── */ .trust-cta,.cta-section{color:#fff;} .trust-cta h2,.trust-cta .section-title{color:#fff!important;} /* the blue "Start Trading" button → brand red; keep WhatsApp green */ .trust-cta a:not([href*="wa.me"]):not([href*="whatsapp"]), .cta-section .btn--base{background:var(--kp-red)!important;border-color:var(--kp-red)!important;color:#fff!important;} /* ── "What We Stand For" cards: keep the colored top rules subtle ── */ .info-item,.feature-box{background:var(--kp-card)!important;border:1px solid var(--kp-line)!important; border-radius:var(--kp-r-lg)!important;} /* ── Auth pages (register / login): stop the giant heading overflow ── */ .account-section h1,.account-wrapper h1,.account-left h1, .account-wrapper .title,.account-section .title,h1.h3{ font-size:clamp(24px,6vw,38px)!important;line-height:1.12!important; overflow-wrap:break-word;word-break:break-word; } .account-section,.account-wrapper{background:var(--kp-bg)!important;} .account-right,.account-form-wrapper,.account-left{color:var(--kp-ink);} /* floating-label inputs: clean field look, label chip legible */ .floating-label label,.floating-label .form-label{ color:var(--kp-muted)!important;background:transparent!important;font-weight:600; } .floating-input.form--control,.floating-input.form-control{ background:var(--kp-field)!important;border:1px solid var(--kp-line)!important; } /* ── Exchange-rate table (home + rates page): warm header, clean rows ── */ .reserve-table th,.rate-table th,table thead th{ background:var(--kp-bg2)!important;color:var(--kp-muted)!important;border-color:var(--kp-line)!important; } /* ── Track box + newsletter inputs already covered by .form--control above ── */ /* ════════════════════════════════════════════════════════════════════════ REVISION 5 — card refinement + auth polish (founder review 2026-07-13) Goal: cards read as ONE premium system, not stark white patches. ════════════════════════════════════════════════════════════════════════ */ /* ── One unified card treatment across EVERY card surface ── */ .custom--card,.card,.dashboard-card,.testimonial-item,.post-item, .info-item,.feature-box,.kp-fcard,.kp-quote,.kp-role,.pricing-card, .account-card,.widget-card{ background:var(--kp-card)!important; border:1px solid var(--kp-line)!important; border-radius:var(--kp-r-lg)!important; box-shadow:var(--kp-shadow-sm)!important; transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease; } /* subtle lift on hover — makes them feel intentional/interactive, premium */ .custom--card:hover,.dashboard-card:hover,.testimonial-item:hover,.post-item:hover, .info-item:hover,.kp-fcard:hover{ box-shadow:var(--kp-shadow)!important; border-color:color-mix(in srgb,var(--kp-red) 22%,var(--kp-line))!important; } /* FAQ accordion items — same card language, not bright pills */ .accordion-item,.faq-item,.kp-faq-item,.faq-wrapper .card{ background:var(--kp-card)!important; border:1px solid var(--kp-line)!important; border-radius:var(--kp-r)!important; box-shadow:var(--kp-shadow-sm)!important; margin-bottom:12px; } .accordion-button,.faq-item__title,.kp-faq-item .kp-faq-q{ background:transparent!important;color:var(--kp-ink)!important;font-weight:600; font-family:var(--kp-serif)!important; } .accordion-button:not(.collapsed){color:var(--kp-red)!important;box-shadow:none!important;} .accordion-body,.kp-faq-body{color:var(--kp-muted)!important;} /* ── Register / Login: remove the stray WHITE BOX around each field ── */ .floating-label{background:transparent!important;} /* main.css forced white */ .floating-label label,.form-label-two{ background:transparent!important;color:var(--kp-muted)!important;font-weight:600; } /* auth inputs sit cleanly on the card; label blends, no chip */ .account-section .floating-input,.account-wrapper .floating-input, .account-section .form--control,.account-wrapper .form--control, .floating-input.form--control{ background:var(--kp-card)!important; border:1px solid var(--kp-line)!important; border-radius:var(--kp-r)!important; } .floating-input.form--control:focus{ border-color:var(--kp-red)!important;box-shadow:0 0 0 3px var(--kp-red-wash)!important; } /* the whole auth panel: warm surface so the form card separates cleanly */ .account-section{background:var(--kp-bg2)!important;} .account-right,.account-form-area,.account-wrapper form{ background:var(--kp-card)!important;border:1px solid var(--kp-line)!important; border-radius:var(--kp-r-xl)!important;box-shadow:var(--kp-shadow)!important; padding:26px!important; } /* ── Buttons: unmistakably solid, strong contrast (no washed/white-inside look) ── */ .btn--base,.btn--base:link,.btn--base:visited,a.btn--base,button.btn--base{ background:var(--kp-red)!important; border:1px solid var(--kp-red)!important; color:#fff!important; box-shadow:0 6px 16px -6px rgba(200,35,47,.5)!important; } .btn--base *,.btn--base i,.btn--base span{color:#fff!important;} /* white "on-red" buttons (e.g. Start Exchange on the red hub) stay white w/ RED label */ .bg--base .btn.bg-white,.dashboard-card.bg--base .btn,[class*="action-hub"] .btn,.action-hub .btn{ background:#fff!important;color:var(--kp-red)!important;border:0!important; } .bg--base .btn.bg-white *,.action-hub .btn *{color:var(--kp-red)!important;} /* ════════════════════════════════════════════════════════════════════════ REVISION 7 — live-site fixes (2026-07-13, verified against kachiplug.com) ════════════════════════════════════════════════════════════════════════ */ /* ── CRITICAL: currency pickers collapsed to ~34px — force full width ── (select2 was rendering as tiny "Tra…" / "Ex…" pills; verified fix live) */ .select2-container{width:100%!important;max-width:100%!important;} .select2-container--default .select2-selection--single{ width:100%!important;height:52px!important;display:flex!important;align-items:center; background:var(--kp-field)!important;border:1px solid var(--kp-line)!important; border-radius:var(--kp-r)!important; } .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:normal!important;color:var(--kp-ink)!important;padding-left:6px; } .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--kp-muted)!important;} .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%!important;} /* ── Mobile menu: tighter rows, larger legible font (felt too airy + small) ── */ @media (max-width:991px){ .menu{padding:6px 18px 12px!important;} .menu > li > a{ padding:12px 2px!important; font-size:16.5px!important; font-weight:600!important; line-height:1.2!important; } .menu .btn--base,.menu .btn.btn--base{padding:13px!important;font-size:15.5px!important;margin-top:10px;} } /* ════════════════════════════════════════════════════════════════════════ DARK MODE SAFETY — light is the focus; here we just make dark READABLE, no masking. (founder: "black mode hides the menu and other things") ════════════════════════════════════════════════════════════════════════ */ /* rates table: rows were white with faint text — make them dark + light text */ :root[data-theme="dark"] .custom-widget, :root[data-theme="dark"] .custom-widget table, :root[data-theme="dark"] .custom-widget tr, :root[data-theme="dark"] .custom-widget td, :root[data-theme="dark"] .custom-widget tbody, :root[data-theme="dark"] .table, :root[data-theme="dark"] .table tr, :root[data-theme="dark"] .table td{ background:transparent!important; } :root[data-theme="dark"] .custom-widget td, :root[data-theme="dark"] .custom-widget td *, :root[data-theme="dark"] .table td, :root[data-theme="dark"] .table td *{ color:var(--kp-ink)!important; /* ink = light in dark mode */ } :root[data-theme="dark"] .custom-widget tbody tr:hover, :root[data-theme="dark"] .table tbody tr:hover{background:rgba(255,255,255,.04)!important;} /* white currency-logo chips need a light plate so icons stay visible on dark */ :root[data-theme="dark"] .custom-widget td img, :root[data-theme="dark"] .table td img{ background:#fff;border-radius:6px;padding:2px; } /* mobile menu panel in dark mode: solid dark card, clear dividers */ :root[data-theme="dark"] .menu{ background:var(--kp-card)!important;border-color:var(--kp-line)!important; } :root[data-theme="dark"] .menu > li > a{color:var(--kp-ink)!important;border-color:var(--kp-line)!important;} /* dark-mode form fields + select2 stay readable */ :root[data-theme="dark"] .select2-dropdown{background:var(--kp-card)!important;border-color:var(--kp-line)!important;} :root[data-theme="dark"] .select2-container--default .select2-results__option{color:var(--kp-ink)!important;} :root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--kp-red)!important;} /* catch-all: any element that hardcodes near-black text stays visible in dark */ :root[data-theme="dark"] [style*="color:#0d0d0d"], :root[data-theme="dark"] [style*="color:#1a1a1a"], :root[data-theme="dark"] [style*="color:#333"]{color:var(--kp-ink)!important;} /* ════════════════════════════════════════════════════════════════════════ REVISION 8 — live Chrome audit fixes (2026-07-13, real viewport) ════════════════════════════════════════════════════════════════════════ */ /* ── Rates table was a PURE-WHITE box pasted on the warm card — blend it in ── (verified live: the "something pasting on the background" seam). Works in both modes since it's transparent + token-based. */ .custom-widget table, .custom-widget tbody, .custom-widget tr, .custom-widget td{background:transparent!important;} .custom-widget table thead th{background:var(--kp-bg2)!important;border:0!important;} .custom-widget td{border-bottom:1px solid var(--kp-line)!important;border-top:0!important;} .custom-widget tbody tr:last-child td{border-bottom:0!important;} .custom-widget [class*="table--responsive"], .custom-widget .table-content{border:0!important;background:transparent!important;} /* the scrollbar track inside the rates box → slim, unobtrusive */ .custom-widget [class*="table--responsive"]::-webkit-scrollbar{width:6px;height:6px;} .custom-widget [class*="table--responsive"]::-webkit-scrollbar-thumb{background:var(--kp-line);border-radius:8px;} /* ── The "Trusted by Industry Leaders" heading fix is above (line ~221): .section-title color is no longer !important, so its .text-white wins. ── */ /* ── Dark mode: soften the hardcoded-light marketing islands' hard white edge ── (Pay4Me / USD-card sections are "light always" by design; we can't fully dark-theme them without breaking their internal art, but we can round + gap them so they read as intentional panels, not jarring white blocks.) */ :root[data-theme="dark"] .kp-app .kp-usdbank, :root[data-theme="dark"] .kp-app .kp-steps, :root[data-theme="dark"] .kp-app section{ border-radius:var(--kp-r-lg); } /* ════════════════════════════════════════════════════════════════════════ REVISION 9 — final closure pass (2026-07-13, full Chrome audit both modes) ════════════════════════════════════════════════════════════════════════ */ /* ── FAQ page: the "lines" were hard 1px outlines on every item. Remove the border, lean on a soft shadow → smooth floating cards, not boxed lines. ── */ .faq-item{ border:0!important; background:var(--kp-card)!important; border-radius:16px!important; box-shadow:0 1px 2px rgba(25,21,18,.04), 0 10px 30px -18px rgba(25,21,18,.16)!important; margin-bottom:14px!important; } :root[data-theme="dark"] .faq-item{box-shadow:0 2px 14px rgba(0,0,0,.35)!important;} /* ── Exchange-rates table: restore the warm/light ALTERNATING rows the founder liked (revises rev-8's flat blend). td stays transparent so the row tint shows; subtle separators between. ── */ .custom-widget tbody tr:nth-child(odd){background:var(--kp-card)!important;} .custom-widget tbody tr:nth-child(even){background:var(--kp-bg2)!important;} .custom-widget tbody tr:hover{background:var(--kp-red-wash)!important;} :root[data-theme="dark"] .custom-widget tbody tr:nth-child(odd){background:var(--kp-card)!important;} :root[data-theme="dark"] .custom-widget tbody tr:nth-child(even){background:var(--kp-bg2)!important;} :root[data-theme="dark"] .custom-widget tbody tr:hover{background:rgba(255,255,255,.05)!important;} /* ── Self-contained LIGHT-designed microsites (Download App, Career, Apply): these are built entirely in hardcoded light colours + light card mockups; inverting them to dark breaks their artwork. So in dark mode we render them in their intended LIGHT — a clean light page between the dark header/footer, which reads as intentional rather than a half-broken invert. ── */ :root[data-theme="dark"] .kp-app, :root[data-theme="dark"] .kp-career, :root[data-theme="dark"] .kp-apply{background:#ffffff!important;color:#1a1a1a;} :root[data-theme="dark"] .kp-app .kp-hero, :root[data-theme="dark"] .kp-career .kp-hero, :root[data-theme="dark"] .kp-apply .kp-hero, :root[data-theme="dark"] .kp-app > section:first-of-type, :root[data-theme="dark"] .kp-career > section:first-of-type{ background:linear-gradient(180deg,#fffaf5 0%,#ffffff 100%)!important; } /* keep their own dark card mockups / dark CTA panels dark (don't force those light) */ :root[data-theme="dark"] .kp-app .kp-card-top, :root[data-theme="dark"] .kp-app .kp-cta, :root[data-theme="dark"] .kp-app .kp-pay4me, :root[data-theme="dark"] .kp-career .kp-cta{background:inherit;} /* ════════════════════════════════════════════════════════════════════════ REVISION 10 — Contact page: flatten the box-in-box (2026-07-13) .contact-info (outer card) wrapped .info-item (my inner card) = double rounded box / "line". Keep ONE card; make .info-item a plain row inside. ════════════════════════════════════════════════════════════════════════ */ .contact-info{ background:var(--kp-card)!important; border:1px solid var(--kp-line)!important; border-radius:var(--kp-r-lg)!important; box-shadow:var(--kp-shadow-sm)!important; } .contact-info .info-item{ background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; padding:0!important; } /* ════════════════════════════════════════════════════════════════════════ REVISION 11 — dark CTA boxes in DB content + LIGHT-ONLY launch (2026-07-13) ════════════════════════════════════════════════════════════════════════ */ /* ── Headings inside dark inline-background content boxes (e.g. the About-page "Ready to Secure Your Digital Wealth?" CTA, bg #111827) were being hijacked to dark ink by our global h2 rule → invisible. Force white so they inherit the box's intended light text. Covers the common dark hexes used in content. ── */ [style*="background-color:#111827"] h1,[style*="background-color:#111827"] h2,[style*="background-color:#111827"] h3,[style*="background-color:#111827"] h4,[style*="background-color:#111827"] .section-title, [style*="background: #111827"] h2,[style*="background:#111827"] h2, [style*="background-color:#0f172a"] h1,[style*="background-color:#0f172a"] h2,[style*="background-color:#0f172a"] h3,[style*="background:#0f172a"] h2,[style*="background: #0f172a"] h2, [style*="background-color:#1a1a1a"] h2,[style*="background:#1a1a1a"] h2, [style*="background-color:#0d0d0d"] h2,[style*="background:#0d0d0d"] h2, [style*="background-color:#0b0b1a"] h2,[style*="background-color:#0B0B1A"] h2, [style*="background-color:#000"] h2,[style*="background:#000"] h2{color:#fff!important;} /* and their paragraphs stay the light-grey the box intends */ [style*="background-color:#111827"] p,[style*="background:#111827"] p, [style*="background-color:#0f172a"] p,[style*="background:#0f172a"] p{color:rgba(255,255,255,.82)!important;} /* ── LIGHT-ONLY launch: toggle is removed from the header + theme-init forces light, so [data-theme="dark"] never activates. All the dark-mode rules above stay in the file (harmless, dormant) for when we re-enable it later. ── */ .kp-theme-toggle{display:none!important;}