/* ========================= Global Dark Theme (CodeOne-X) Hook: ========================= */ /* ========================================================= Global High-Tech Dark Theme (CodeOne-X Premium) Inspired by Modern SaaS & Next-Gen Developer Platforms ========================================================= */ /* ========================================================= Global High-Tech Ultra-Dark Theme (CodeOne-X Pure Obsidian) Inspired by Vercel, Linear, and Apple Dark Mode ========================================================= */ html[data-theme="dark"], body { /* --- Brand Core Colors --- */ --tj-brand-blue: #000000; /* Pure AMOLED Black */ --tj-brand-blue-deep: #000000; /* Pure AMOLED Black */ --tj-brand-orange: #FF6B00; /* Electric Neon Orange (High Tech Accent) */ --tj-brand-orange-hover: #FF8533; /* Bright Glow Orange */ /* --- Core Surfaces (Pure Dark Layering) --- */ --tj-surface-0: #000000; /* මුළු පිටුවේම ප්‍රධාන පසුබිම (Pure AMOLED Black) */ --tj-surface-1: #0A0A0A; /* Cards සහ Sections වල පසුබිම (Sleek Obsidian/Jet Black) */ --tj-surface-2: #141414; /* Hovers සහ Input Boxes (Elevated Charcoal Layer) */ /* --- Typography (Crisp & Clean) --- */ --tj-text-1: #FFFFFF; /* ප්‍රධාන මාතෘකා සඳහා (Pure Crisp White) */ --tj-text-2: #A3A3A3; /* සාමාන්‍ය විස්තර සඳහා (Neutral Silver Gray) */ --tj-text-3: #525252; /* උප මාතෘකා/දිනයන් සඳහා (Dark Muted Gray) */ /* --- Tech Borders & Neon Glows --- */ --tj-border-1: rgba(255, 255, 255, 0.04); /* ඉතාමත් සියුම් සුදු පාට Border එකක් */ --tj-border-2: rgba(255, 69, 0, 0.12); /* සියුම් Orange Glow Border එකක් */ /* --- Template Overrides (Bexon Core) --- */ --tj-color-common-white: #ffffff; --tj-color-common-black: #000000; --tj-color-theme-primary: var(--tj-brand-orange); --tj-color-heading-primary: var(--tj-text-1); --tj-color-body-primary: var(--tj-text-2); --tj-color-light-bg: var(--tj-surface-0); /* Gradient background for sections - transitioning from pure black to rich deep carbon */ --tj-gradient-dark: linear-gradient(180deg, #000000 0%, #0A0A0A 100%); } body .client-slider-3 .client-logo.img-parallax { overflow: hidden; } body .client-slider-3 .client-logo.img-parallax img { will-change: transform; transform: translateZ(0); transform-origin: center; scale: 1.12; } body .client-slider-3 .client-logo.img-parallax .location-name { position: relative; z-index: 3; } /* Baseline backgrounds/text */ html[data-theme="dark"] body, body { background: var(--tj-surface-0); color: var(--tj-text-2); } html[data-theme="dark"] .section-bg, html[data-theme="dark"] .tj-blog-item, html[data-theme="dark"] .tj-service-item, html[data-theme="dark"] .tj-team-item, html[data-theme="dark"] .tj-testimonial-item, html[data-theme="dark"] .tj-faq-area, html[data-theme="dark"] .tj-contact-form, html[data-theme="dark"] .tj-project-item, body .section-bg, body .tj-blog-item, body .tj-service-item, body .tj-team-item, body .tj-testimonial-item, body .tj-faq-area, body .tj-contact-form, body .tj-project-item { background-color: var(--tj-surface-1); border-color: var(--tj-border-1); } /* Inputs */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, body input, body textarea, body select { background-color: var(--tj-surface-1); color: var(--tj-text-2); border-color: var(--tj-border-1); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder, body input::placeholder, body textarea::placeholder { color: rgba(185,198,214,.65); } /* Links */ html[data-theme="dark"] a, body a { color: var(--tj-text-2); } html[data-theme="dark"] a:hover, body a:hover { color: var(--tj-brand-orange); } /* Buttons: keep brand orange (no brand change) */ html[data-theme="dark"] .tj-primary-btn, html[data-theme="dark"] button, html[data-theme="dark"] .btn, body .tj-primary-btn, body button, body .btn { border-color: rgba(245,161,40,.35); } /* ========================= Shop (WooCommerce) patches Fix hardcoded light colors in shop.css ========================= */ html[data-theme="dark"] .tj-product-details-description table tr td:first-child, body .tj-product-details-description table tr td:first-child { background-color: rgba(255,255,255,.04); /* replaces #f9f9f9 */ /* shop.css uses #f9f9f9 */ } html[data-theme="dark"] .woocommerce table, html[data-theme="dark"] .woocommerce .shop_table, html[data-theme="dark"] .woocommerce-checkout-review-order-table, body .woocommerce table, body .woocommerce .shop_table, body .woocommerce-checkout-review-order-table { background: var(--tj-surface-1); color: var(--tj-text-2); border-color: var(--tj-border-1); } html[data-theme="dark"] .woocommerce-error, html[data-theme="dark"] .woocommerce-info, html[data-theme="dark"] .woocommerce-message, body .woocommerce-error, body .woocommerce-info, body .woocommerce-message { background: rgba(255,255,255,.04); border-color: var(--tj-border-1); color: var(--tj-text-2); } /* Ratings: keep warm tone; optionally align to brand orange */ html[data-theme="dark"] .star-rating span, html[data-theme="dark"] .woocommerce-review-link, body .star-rating span, body .woocommerce-review-link { color: var(--tj-brand-orange); } body .tj-footer-section.footer-2 .footer-col-1::before { display: none; } body .header-area.header-duplicate.sticky .header-wrapper, body .header-area.header-duplicate .header-wrapper, body .header-area.header-sticky .header-wrapper, body .header-area.header-absolute .header-wrapper { background-color: #000000; backdrop-filter: blur(10px); } body .header-area.header-duplicate.sticky .mainmenu > ul > li > a, body .header-area.header-duplicate .mainmenu > ul > li > a, body .header-area.header-sticky .mainmenu > ul > li > a, body .header-area.header-absolute .mainmenu > ul > li > a { color: var(--tj-text-1); } body .header-area.header-duplicate.sticky .mainmenu > ul > li.current-menu-ancestor > a, body .header-area.header-duplicate.sticky .mainmenu > ul > li.current-menu-item > a, body .header-area.header-duplicate.sticky .mainmenu > ul > li:hover > a { color: var(--tj-brand-orange); } body .header-area.header-duplicate .mainmenu > ul > li.current-menu-ancestor > a, body .header-area.header-duplicate .mainmenu > ul > li.current-menu-item > a, body .header-area.header-duplicate .mainmenu > ul > li:hover > a, body .header-area.header-absolute .mainmenu > ul > li.current-menu-ancestor > a, body .header-area.header-absolute .mainmenu > ul > li.current-menu-item > a, body .header-area.header-absolute .mainmenu > ul > li:hover > a { color: var(--tj-brand-orange); } body .project-item, body .service-item.style-6, body .solution-box { background-color: var(--tj-surface-1); } body .project-item .title, body .project-item .title a, body .service-item.style-6 .title, body .service-item.style-6 .title a, body .sec-title { color: var(--tj-text-1); } body .project-item p, body .project-item .desc, body .project-item .categories a { color: var(--tj-text-2); } body .project-item .categories a { border-color: var(--tj-border-1); } body .service-item.style-6 .title, body .service-item.style-6 .title a { color: var(--tj-text-1); } body .service-item.style-6 .desc, body .service-item.style-6 .text-btn, body .service-item.style-6 .text-btn .btn-text { color: var(--tj-text-2); } body .service-item.style-6:hover { background-color: var(--tj-surface-1); } body .service-item.style-6:hover .title, body .service-item.style-6:hover .title a, body .service-item.style-6:hover .desc, body .service-item.style-6:hover .text-btn, body .service-item.style-6:hover .text-btn .btn-text { color: var(--tj-brand-orange); } body .service-item.style-6:hover .service-icon { background-color: transparent; } body .h5-client-item { padding-inline-end: 0; } body .h5-client-item .client-logo { display: flex; justify-content: center; align-items: center; } body .h5-client-item .client-logo img { display: block; margin: 0 auto; } body .service-slider-2, body .client-slider-3 { overflow: hidden; } body .service-slider-2 .swiper-wrapper { justify-content: center; gap: 24px; } body .service-slider-2 .swiper-slide { width: min(620px, 92vw) !important; padding: 0 12px; } body .service-slider-2 .service-item.style-6 { max-width: 620px; margin: 0 auto; } body .tj-pricing-section-2 .row.row-gap-4 > [class^="col-"] { display: flex; } body .tj-pricing-section-2 .pricing-box { width: 100%; height: 100%; background-color: var(--tj-surface-1) !important; border: 1px solid var(--tj-border-1) !important; display: flex; flex-direction: column; } body .tj-pricing-section-2 .pricing-box.active { background-color: var(--tj-surface-2) !important; border-color: var(--tj-border-2) !important; } body .tj-pricing-section-2 .pricing-box .package-name { color: var(--tj-text-1) !important; } body .tj-pricing-section-2 .pricing-box .package-desc p { color: var(--tj-text-2) !important; } body .tj-pricing-section-2 .pricing-box .pricing-header { display: flex; flex-direction: column; height: 100%; } body .tj-pricing-section-2 .pricing-box .package-desc { flex: 1; } body .tj-service-section.service-4 .row.row-gap-4 > [class^="col-"] { display: flex; } body .tj-service-section.service-4 .service-item.style-4 { width: 100%; height: 100%; background-color: var(--tj-surface-1) !important; border: 1px solid var(--tj-border-1) !important; } body .tj-service-section.service-4 .service-item.style-4 .title, body .tj-service-section.service-4 .service-item.style-4 .title a { color: var(--tj-text-1) !important; } body .tj-service-section.service-4 .service-item.style-4 .desc { color: var(--tj-text-2) !important; } body .tj-service-section.service-4 .service-item.style-4 .text-btn .btn-text, body .tj-service-section.service-4 .service-item.style-4 .text-btn .btn-icon { color: var(--tj-brand-orange) !important; } body .tj-project-section .row.row-gap-4 > [class^="col-"] { display: flex; } body .tj-project-section .project-item { width: 100%; height: 100%; background-color: var(--tj-surface-1) !important; border: 1px solid var(--tj-border-1) !important; position: relative; overflow: hidden; } body .tj-project-section .project-item .project-img { position: relative; } body .tj-project-section .project-item .project-content { position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; z-index: 3; padding: 22px 22px 20px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(9, 27, 45, 0.92) 55%, rgba(9, 27, 45, 0.98) 100%); } body .tj-project-section .project-item .title, body .tj-project-section .project-item .title a { color: var(--tj-text-1) !important; } body .tj-project-section .project-item .categories a { color: var(--tj-text-2) !important; border-color: var(--tj-border-1) !important; } body .tj-project-section .project-item .project-btn, body .tj-project-section .project-item .project-btn i { color: var(--tj-brand-orange) !important; } body .tj-project-section .project-item .project-text { align-items: flex-start; } body .tj-project-section .project-item .desc { display: block; width: 100%; margin: 10px 0 0; opacity: 1 !important; visibility: visible !important; height: auto !important; color: var(--tj-text-2) !important; } body .client-slider-3 .swiper-wrapper { justify-content: center; gap: 24px; } body .client-slider-3 .swiper-slide { display: flex; justify-content: center; padding: 0 12px; } body .h5-client-item .client-logo, body .client-slider-3 .client-logo { background: transparent; border: 0; width: 240px; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } body .h5-client-item .client-logo img, body .client-slider-3 .client-logo img { width: 100%; height: 360px; object-fit: cover; border-radius: 16px; } body .client-slider-3 .client-logo .location-name { margin-top: 10px; font-size: 20px; font-weight: 600; letter-spacing: 0.02em; color: var(--tj-text-1); text-align: center; } body .h5-project-item-wrapper .project-item.h5-project-item { gap: 40px; } body .h5-project-item-wrapper .project-item.h5-project-item .project-img img { height: 100%; object-fit: cover; } body .h5-project-item.project-item .project-img { height: 360px; } body .project-item.h4-project-item.h5-project-item .project-img { height: 360px; } body .h5-project-item.project-item .project-content { max-width: none; width: 100%; } body .project-item.h4-project-item.h5-project-item .project-content { max-width: none; width: 100%; } body .h5-project-item.project-item .project-content .title, body .project-item.h4-project-item.h5-project-item .project-content .title { max-width: none; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body .h5-project-item-wrapper .project-item.h5-project-item .project-content { padding-top: 16px; padding-bottom: 16px; } body .h5-project-item-wrapper .project-item.h5-project-item .project-content .desc { margin-bottom: 12px; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body .award-logo-area { justify-content: center; } body .award-logo-area .award-logo { display: flex; justify-content: center; max-width: none; } body .award-logo-area .award-logo img { width: 240px !important; max-width: 100%; height: auto !important; } body .cxo-quote-text span { display: inline-block; opacity: 0; transform: translateY(10px); filter: blur(1px); } body .cxo-quote.is-animated .cxo-quote-text span { animation: cxo-quote-reveal 900ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards; animation-delay: calc(var(--tj-i) * 18ms); } @keyframes cxo-quote-reveal { to { opacity: 1; transform: translateY(0); filter: blur(0); } } body .cxo-quote { padding-top: 60px; padding-bottom: 60px; } body .cxo-quote-inner { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--tj-border-1); border-radius: 16px; backdrop-filter: blur(10px); padding: 36px 32px; } body .cxo-quote-text { color: var(--tj-text-2); font-size: 18px; line-height: 1.7; margin-bottom: 16px; } body .cxo-quote-text:last-child { margin-bottom: 0; } body .cxo-quote-author { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tj-border-1); } body .cxo-quote-author .name { color: var(--tj-text-1); margin-bottom: 4px; } body .cxo-quote-author .role { color: var(--tj-brand-orange); } body .tj-preloader .tj-preloader-text { color: var(--tj-text-1); letter-spacing: 0.04em; } body .tj-preloader.is-loading #tj-weave-anim span { display: inline-block; opacity: 0.15; transform: translateY(8px); filter: blur(0.6px); animation: tj-word-wave 1.4s ease-in-out infinite; animation-delay: calc(var(--tj-i) * 70ms); will-change: transform, opacity; } @keyframes tj-word-wave { 0%, 100% { opacity: 0.15; transform: translateY(8px); } 50% { opacity: 1; transform: translateY(-2px); } } body .h5-about .bg-shape-3, body .h5-about .bg-shape-2, body .h5-about .bg-shape-1 { display: none; } body .h5-client-item .client-logo::before, body .h5-client-item .client-logo::after { display: none; } body .h5-client-item .client-logo:hover { border-radius: 16px; backdrop-filter: blur(10px); background: transparent; } body .service-slider-2 .swiper-slide-duplicate, body .client-slider-3 .swiper-slide-duplicate { display: none; } body .service-slider-2 .swiper-wrapper, body .client-slider-3 .swiper-wrapper { transform: none !important; } body section.h5-about.section-gap { padding-bottom: 70px; } body section.h5-project .tj-scroll-slider.section-gap { padding-top: 70px; } body .tj-page-header { background-color: var(--tj-surface-1); } body .tj-page-header .tj-page-title, body .tj-page-header .tj-page-link, body .tj-page-header .tj-page-link a { color: var(--tj-text-1); } body .tj-page-header .tj-page-link a:hover { color: var(--tj-brand-orange); } body .tj-choose-section, body .tj-about-section-2, body .tj-faq-section { background-color: transparent; } body .tj-choose-item, body .mission-vision-box, body .accordion.tj-faq .accordion-item { background-color: var(--tj-surface-1); border: 1px solid var(--tj-border-1); } body .choose-box { background-color: var(--tj-surface-1); border: 1px solid var(--tj-border-1); } body .choose-box .choose-icon { color: var(--tj-brand-orange); } body .choose-box .title { color: var(--tj-text-1); } body .choose-box .desc { color: var(--tj-text-2); } body .tj-choose-item .title, body .mission-vision-box .title, body .accordion.tj-faq .faq-title { color: var(--tj-text-1); } body .tj-choose-item .desc, body .mission-vision-box .desc, body .accordion.tj-faq .accordion-body, body .accordion.tj-faq .accordion-body p { color: var(--tj-text-2); }