/* ============================================================ KNC Modern UI Overlay v1.0 Industrial-tech refresh for ready-mix concrete brand. Loaded LAST in so it overrides inline + knc-custom.css. Design tokens (semantic): --knc-navy primary brand (deep concrete steel) --knc-navy-2 gradient companion --knc-amber safety accent (CTA, highlights) --knc-amber-2 gradient companion --knc-slate body text on light --knc-mute secondary text --knc-line hairline borders --knc-bg page background (cool concrete) --knc-surface card surface --knc-shadow-sm/md/lg layered elevation ============================================================ */ :root { /* Brighter blue palette — vivid but trustworthy, not neon */ --knc-blue-900: #0E3A7A; /* deepest accent (footer base) */ --knc-blue-800: #1556B8; /* primary brand */ --knc-blue-700: #1F6FE0; /* lively brand mid */ --knc-blue-500: #4A9CFF; /* light/companion */ --knc-blue-300: #B8D7FF; /* subtle wash */ --knc-sky: #EAF3FF; /* page wash */ /* Backwards-compat aliases (used by existing rules) */ --knc-navy: var(--knc-blue-800); --knc-navy-2: var(--knc-blue-700); --knc-amber: #FFB300; --knc-amber-2: #FF8A00; --knc-success: #16A34A; --knc-slate: #1B2A41; --knc-mute: #5B6B7E; --knc-line: #DCE8F5; --knc-bg: #F2F7FE; /* very light cool blue */ --knc-surface: #FFFFFF; --knc-radius: 14px; --knc-radius-sm: 10px; --knc-radius-lg: 22px; --knc-shadow-sm: 0 2px 6px rgba(21, 86, 184, .07); --knc-shadow-md: 0 10px 26px rgba(21, 86, 184, .12); --knc-shadow-lg: 0 22px 52px rgba(21, 86, 184, .18); --knc-grad-primary: linear-gradient(135deg, #1556B8 0%, #1F6FE0 50%, #4A9CFF 100%); --knc-grad-amber: linear-gradient(135deg, #FFB300 0%, #FF8A00 100%); /* Reusable background patterns (modern: blueprint grid + mesh blobs) */ --knc-pat-grid: linear-gradient(rgba(31,111,224,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(31,111,224,.06) 1px, transparent 1px); --knc-pat-grid-size: 32px 32px, 32px 32px; --knc-pat-grid-fine: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); --knc-pat-grid-fine-size: 28px 28px, 28px 28px; /* Blueprint crosshair: grid lines + dot at every intersection */ --knc-pat-crosshair: radial-gradient(circle, rgba(255,255,255,.35) 1.2px, transparent 1.2px), linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); --knc-pat-crosshair-size: 32px 32px, 32px 32px, 32px 32px; --knc-pat-dots: radial-gradient(rgba(31,111,224,.18) 1.2px, transparent 1.6px); --knc-pat-dots-size: 22px 22px; --knc-pat-diag: repeating-linear-gradient(135deg, rgba(31,111,224,.05) 0 1px, transparent 1px 14px); /* Mesh gradient blobs for hero/CTA backgrounds */ --knc-mesh-hero: radial-gradient(at 12% 18%, rgba(255,179,0,.28) 0px, transparent 45%), radial-gradient(at 88% 12%, rgba(74,156,255,.55) 0px, transparent 50%), radial-gradient(at 78% 92%, rgba(255,138,0,.22) 0px, transparent 45%), radial-gradient(at 22% 88%, rgba(184,215,255,.35) 0px, transparent 50%); } /* -------- Base -------- */ body { color: var(--knc-slate); background: var(--knc-bg); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--knc-amber); color: var(--knc-navy); } h1, h2, h3, h4, h5, h6, .section-heading { color: var(--knc-navy); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; } .section-heading { position: relative; padding-bottom: .85rem; margin-bottom: 1.25rem; } .section-heading::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; height: 4px; background: var(--knc-grad-amber); border-radius: 4px; transform: translateX(-50%); } .text-start > .section-heading::after, .text-left > .section-heading::after { left: 0; transform: none; } .section-subheading { color: var(--knc-mute); font-weight: 400; font-size: 1.05rem; margin-bottom: 2.5rem !important; } /* -------- Navbar refinement (unified across all pages) -------- */ /* Covers both static .navbar-custom and JS-injected #mainNav.navbar-custom */ .navbar-custom, .navbar.navbar-custom, #mainNav.navbar-custom { background-color: rgba(21, 86, 184, .94) !important; background-image: var(--knc-pat-crosshair), linear-gradient(135deg, rgba(21, 86, 184, .94) 0%, rgba(31, 111, 224, .94) 60%, rgba(74, 156, 255, .94) 100%) !important; background-size: var(--knc-pat-crosshair-size), auto !important; backdrop-filter: saturate(160%) blur(14px) !important; -webkit-backdrop-filter: saturate(160%) blur(14px) !important; border-bottom: 1px solid rgba(255, 255, 255, .12) !important; box-shadow: 0 6px 22px rgba(14, 58, 122, .25) !important; font-family: 'Kanit', sans-serif !important; } .navbar-custom .navbar-brand, #mainNav.navbar-custom .navbar-brand, .navbar-custom .navbar-brand .brand-name, #mainNav .navbar-brand .brand-name { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .15); } .navbar-custom .navbar-brand .brand-tagline, #mainNav .navbar-brand .brand-tagline { color: rgba(255, 255, 255, .85) !important; } .navbar-custom .nav-link, #mainNav.navbar-custom .nav-link { color: rgba(255, 255, 255, .96) !important; font-weight: 600 !important; letter-spacing: .2px; } .navbar-custom .nav-link::after, #mainNav.navbar-custom .nav-link::after { background: var(--knc-amber) !important; height: 3px !important; bottom: -2px !important; border-radius: 3px; } .navbar-custom .nav-link:hover, .navbar-custom .nav-link.active, #mainNav.navbar-custom .nav-link:hover, #mainNav.navbar-custom .nav-link.active { background: rgba(255, 179, 0, .20) !important; color: #fff !important; } .navbar-custom .dropdown-menu, #mainNav.navbar-custom .dropdown-menu { background: rgba(21, 86, 184, .98) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: var(--knc-radius) !important; box-shadow: 0 12px 28px rgba(14, 58, 122, .32) !important; } .navbar-custom .dropdown-item, #mainNav.navbar-custom .dropdown-item { color: rgba(255, 255, 255, .92) !important; } .navbar-custom .dropdown-item:hover, .navbar-custom .dropdown-item:focus, #mainNav.navbar-custom .dropdown-item:hover, #mainNav.navbar-custom .dropdown-item:focus { background: rgba(255, 179, 0, .20) !important; color: #fff !important; } .navbar-custom .navbar-toggler, #mainNav.navbar-custom .navbar-toggler { border-color: rgba(255, 255, 255, .35) !important; } .navbar-custom .navbar-toggler-icon, #mainNav.navbar-custom .navbar-toggler-icon { filter: brightness(0) invert(1); } /* Divider lines between nav items */ .navbar-nav .nav-item:not(:last-child)::after, #mainNav .navbar-nav .nav-item:not(:last-child)::after { background: rgba(255, 255, 255, .20) !important; } @media (max-width: 991.98px) { .navbar-custom, #mainNav.navbar-custom { background-image: var(--knc-pat-crosshair), linear-gradient(135deg, rgba(21, 86, 184, .98) 0%, rgba(31, 111, 224, .98) 60%, rgba(74, 156, 255, .98) 100%) !important; } .navbar-nav .nav-item:not(:last-child)::after, #mainNav .navbar-nav .nav-item:not(:last-child)::after { display: none !important; } } /* -------- Hero / Page-hero -------- */ .page-hero, .cta-section, section#contact { background: var(--knc-grad-primary) !important; position: relative; overflow: hidden; } /* portfolio.html / pages using inline gradient hero div */ [style*="background: linear-gradient(135deg, #0E3A7A"], [style*="background: linear-gradient(135deg, #1556B8"] { position: relative !important; overflow: hidden !important; } /* * Construction pattern overlay — rebar reinforcement mesh (ตะแกรงเหล็กเสริม) * Two diagonal line sets at 45° + 135° = crossing bars like steel rebar mesh. * Warm amber glow = work-site floodlight. White shimmer = wet concrete sheen. */ .page-hero::before, .cta-section::before, section#contact::before, [style*="background: linear-gradient(135deg, #0E3A7A"]::before, [style*="background: linear-gradient(135deg, #1556B8"]::before { content: ""; position: absolute; inset: 0; background-image: /* soft concrete-pour highlight — bottom-right */ radial-gradient(ellipse at 94% 90%, rgba(255,255,255,.14) 0%, transparent 50%); pointer-events: none; z-index: 0; } /* Ensure content sits above pattern */ .page-hero > .container, .cta-section > .container, section#contact > .container, [style*="background: linear-gradient(135deg, #0E3A7A"] > .container, [style*="background: linear-gradient(135deg, #1556B8"] > .container { position: relative; z-index: 1; } .page-hero h1 { letter-spacing: -.015em; } /* Carousel caption polish */ .carousel-caption { background: linear-gradient(to top, rgba(15, 42, 71, .85), transparent 75%) !important; padding: 4rem 1.5rem 2rem !important; } .carousel-caption h5, .carousel-caption .h5 { font-weight: 800 !important; letter-spacing: -.01em; } /* -------- Cards (universal) -------- */ .card, .card-shell, .mini-card, .product-card, .service-card, .feature-box, .benefit-box, .plant-card, .plant-stat-card, .mission-card, .vision-card, .value-card, .spec-card, .stat-card, .sales-card, .testimonial-card, .quick-contact-card, .service-extra-card, .coverage-card, .map-card { border: 1px solid var(--knc-line) !important; border-radius: var(--knc-radius) !important; box-shadow: var(--knc-shadow-sm) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; background: var(--knc-surface); } .card:hover, .product-card:hover, .service-card:hover, .feature-box:hover, .benefit-box:hover, .plant-card:hover, .plant-stat-card:hover, .mission-card:hover, .vision-card:hover, .value-card:hover, .spec-card:hover, .sales-card:hover, .quick-contact-card:hover, .service-extra-card:hover { transform: translateY(-6px) !important; box-shadow: var(--knc-shadow-lg) !important; border-color: rgba(30, 77, 140, .25) !important; } /* Coverage / dark cards keep their look */ .coverage-card { background: var(--knc-grad-primary) !important; } /* ============================================================ DARK TEXT on white / light-grey card backgrounds Ensures readability on all card types ============================================================ */ .card-shell h1, .card-shell h2, .card-shell h3, .card-shell h4, .card-shell h5, .card-shell h6, .mini-card h1, .mini-card h2, .mini-card h3, .mini-card h4, .mini-card h5, .mini-card h6, .card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .product-card h1, .product-card h2, .product-card h3, .product-card h4, .product-card h5, .product-card h6, .service-card h1, .service-card h2, .service-card h3, .service-extra-card h1, .service-extra-card h2, .service-extra-card h3, .feature-box h1, .feature-box h2, .feature-box h3, .feature-box h4, .feature-box h5, .feature-box h6, .spec-card h1, .spec-card h2, .spec-card h3, .spec-card h4, .spec-card h5, .spec-card h6, .plant-card h1, .plant-card h2, .plant-card h3, .plant-card h4, .plant-card h5, .plant-card h6, .sales-card h1, .sales-card h2, .sales-card h3, .sales-card h4, .sales-card h5, .sales-card h6, .testimonial-card h1, .testimonial-card h2, .testimonial-card h3, .quick-contact-card h1, .quick-contact-card h2, .quick-contact-card h3, .map-card h1, .map-card h2, .map-card h3 { color: var(--knc-blue-900) !important; } .card-shell p, .mini-card p, .card p, .product-card p, .service-card p, .feature-box p, .spec-card p, .plant-card p, .sales-card p, .testimonial-card p, .quick-contact-card p { color: #444 !important; } /* text-muted override — keep readable on light backgrounds */ .card-shell .text-muted, .mini-card .text-muted, .card .text-muted, .product-card .text-muted, .service-card .text-muted, .feature-box .text-muted, .spec-card .text-muted, .plant-card .text-muted, .quick-contact-card .text-muted { color: #5a6474 !important; } /* Inline heading colors on white cards — update old navy */ [style*="color:#1e3c72"], [style*="color: #1e3c72"], [style*="color:#0E3A7A"], [style*="color: #0E3A7A"] { color: var(--knc-blue-900) !important; } /* Back-to-top button uses amber brand */ #back-to-top { background: var(--knc-grad-amber) !important; color: #fff !important; } /* Spec cards: industrial accent bar */ .spec-card { border-left: 4px solid var(--knc-success) !important; } .plant-card { border-left: 4px solid var(--knc-navy-2) !important; } .plant-card:hover { border-left-color: var(--knc-amber) !important; } /* -------- Buttons (modern, decisive) -------- */ .btn { border-radius: var(--knc-radius-sm) !important; font-weight: 600 !important; letter-spacing: .2px; padding: .65rem 1.35rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease !important; box-shadow: none; } .btn:focus-visible { outline: 3px solid rgba(255, 179, 0, .5); outline-offset: 2px; } .btn-lg { padding: .9rem 1.75rem; font-size: 1rem; } .btn-primary, .btn-primary-custom { background: var(--knc-grad-primary) !important; border: none !important; color: #fff !important; box-shadow: 0 6px 16px rgba(15, 42, 71, .25) !important; } .btn-primary:hover, .btn-primary-custom:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15, 42, 71, .32) !important; filter: brightness(1.06); } .btn-warning, .btn-amber { background: var(--knc-grad-amber) !important; border: none !important; color: var(--knc-navy) !important; font-weight: 700 !important; box-shadow: 0 6px 16px rgba(255, 138, 0, .35) !important; } .btn-warning:hover { transform: translateY(-2px); color: #fff !important; box-shadow: 0 12px 26px rgba(255, 138, 0, .45) !important; } .btn-outline-primary { color: var(--knc-navy) !important; border: 1.5px solid var(--knc-navy) !important; background: transparent !important; } .btn-outline-primary:hover { background: var(--knc-navy) !important; color: #fff !important; transform: translateY(-2px); } .btn-outline-light:hover { background: var(--knc-amber) !important; color: var(--knc-navy) !important; border-color: var(--knc-amber) !important; } /* -------- Stats / numbers (tabular) -------- */ .stats-number, .plant-stat-number, .about-image-badge h3 { font-variant-numeric: tabular-nums; background: var(--knc-grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em; } /* -------- Feature / icon circles -------- */ .feature-icon, .benefit-icon, .mission-icon, .vision-icon, .value-icon, .plant-stat-icon, .quick-contact-icon, .feature-icon-circle, .service-extra-icon { box-shadow: 0 8px 22px rgba(15, 42, 71, .18); } .service-icon-badge { border-color: var(--knc-amber) !important; color: var(--knc-navy) !important; box-shadow: 0 8px 22px rgba(15, 42, 71, .15) !important; } /* -------- Tables (industrial data feel) -------- */ .table { background: var(--knc-surface); border-radius: var(--knc-radius); overflow: hidden; border: 1px solid var(--knc-line); } .table thead { background: var(--knc-grad-primary); color: #fff; } .table thead th { border: none !important; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; font-size: .82rem; padding: 1rem .9rem; } .table tbody td { padding: .85rem .9rem; border-color: var(--knc-line) !important; vertical-align: middle; } .table-hover tbody tr:hover { background-color: #F0F5FB !important; } /* -------- Forms -------- */ .form-control, .form-select { border-radius: var(--knc-radius-sm) !important; border: 1.5px solid var(--knc-line) !important; padding: .7rem .9rem; transition: border-color .2s ease, box-shadow .2s ease; } .form-control:focus, .form-select:focus { border-color: var(--knc-navy-2) !important; box-shadow: 0 0 0 .2rem rgba(30, 77, 140, .18) !important; } .form-label { font-weight: 600; color: var(--knc-navy); } /* -------- Badges -------- */ .badge-custom, .product-badge { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .3px; padding: .4rem .85rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); } /* -------- Section background utilities (plain, no patterns) -------- */ .bg-light-custom { background: linear-gradient(180deg, #FBFDFF 0%, #EAF3FF 100%) !important; } /* ============================================================= PATTERN UTILITY CLASSES — opt-in, add to any
All light enough not to distract from content. Usage:
...
============================================================= */ /* --- 1. Blueprint Crosshair (current navbar/footer pattern) --- */ .knc-bg-crosshair { background-color: #EEF5FF; background-image: radial-gradient(circle, rgba(21,86,184,.22) 1.2px, transparent 1.2px), linear-gradient(rgba(21,86,184,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(21,86,184,.07) 1px, transparent 1px); background-size: 32px 32px, 32px 32px, 32px 32px; } /* --- 2. Topographic Lines (contour survey map) --- */ .knc-bg-topo { background-color: #EBF3FF; background-image: repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 18px, rgba(21,86,184,.07) 18px, rgba(21,86,184,.07) 19px), repeating-radial-gradient(circle at 70% 65%, transparent 0, transparent 24px, rgba(21,86,184,.05) 24px, rgba(21,86,184,.05) 25px), linear-gradient(180deg, #FBFDFF 0%, #E8F3FF 100%); } /* --- 3. Carbon Fiber (diagonal weave — high-tech industrial) --- */ .knc-bg-carbon { background-color: #F2F7FF; background-image: repeating-linear-gradient(45deg, rgba(21,86,184,.07) 0 1px, transparent 1px 9px), repeating-linear-gradient(135deg, rgba(21,86,184,.07) 0 1px, transparent 1px 9px); } /* --- 4. Rebar Grid (X-cross 45°+135°, steel reinforcement) --- */ .knc-bg-rebar { background-color: #F4F8FF; background-image: repeating-linear-gradient(45deg, rgba(21,86,184,.09) 0 1.5px, transparent 1.5px 22px), repeating-linear-gradient(135deg, rgba(21,86,184,.09) 0 1.5px, transparent 1.5px 22px); } /* --- 5. Noise Grain (concrete aggregate surface texture) --- */ .knc-bg-grain { background-color: #F5F8FD; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; } /* --- 6. Honeycomb (hexagon structural grid) --- */ .knc-bg-honeycomb { background-color: #EDF4FF; background-image: url("data:image/svg+xml;utf8,"); background-size: 56px 100px; } /* --- 7. Dotted Fade (premium dot gradient — right-to-left fade) --- */ .knc-bg-dotfade { background-color: #F6FAFF; background-image: radial-gradient(circle, rgba(21,86,184,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 70%); background-size: 18px 18px, 100% 100%; } /* --- Existing utility classes kept for backward compat --- */ .knc-bg-grid { background-color: var(--knc-sky); background-image: var(--knc-pat-grid); background-size: var(--knc-pat-grid-size); } .knc-bg-dots { background-color: #F8FBFF; background-image: var(--knc-pat-dots); background-size: var(--knc-pat-dots-size); } .knc-bg-diag { background-color: #FFFFFF; background-image: var(--knc-pat-diag); } .knc-bg-blueprint { background-color: #EFF5FE; background-image: var(--knc-pat-grid); background-size: var(--knc-pat-grid-size); } .knc-bg-mesh { background-color: #F4F9FF; background-image: var(--knc-mesh-hero); } /* -------- Footer modernization -------- */ .footer-custom { background: linear-gradient(180deg, #0E3A7A 0%, #1556B8 100%) !important; border-top: 3px solid var(--knc-amber); padding: 3rem 0 1.5rem !important; position: relative; overflow: hidden; } .footer-custom::before { content: ""; position: absolute; inset: 0; background-image: var(--knc-pat-crosshair), radial-gradient(circle at 85% 0%, rgba(255, 179, 0, .14), transparent 45%), radial-gradient(circle at 10% 100%, rgba(74, 156, 255, .18), transparent 45%); background-size: var(--knc-pat-crosshair-size), auto, auto; pointer-events: none; } .footer-custom > * { position: relative; } .footer-custom a { transition: color .2s ease, transform .2s ease; } .footer-custom a:hover { color: var(--knc-amber) !important; } .social-links a { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .12); transition: background .2s ease, transform .2s ease, color .2s ease !important; } .social-links a:hover { background: var(--knc-amber) !important; color: var(--knc-navy) !important; transform: translateY(-3px); } /* -------- Floating chat / back-to-top -------- */ .ai-chat-button { background: var(--knc-grad-amber) !important; color: var(--knc-navy) !important; box-shadow: 0 10px 26px rgba(255, 138, 0, .45) !important; } #back-to-top { background: var(--knc-grad-primary) !important; box-shadow: 0 10px 22px rgba(15, 42, 71, .35) !important; } /* -------- Timeline polish (about page) -------- */ .timeline-content { border: 1px solid var(--knc-line); border-radius: var(--knc-radius) !important; } .timeline-year { color: var(--knc-navy) !important; } /* -------- Accordion -------- */ .accordion-button { border-radius: var(--knc-radius-sm) !important; font-weight: 600; } .accordion-button:not(.collapsed) { background: var(--knc-grad-primary) !important; color: #fff !important; box-shadow: none !important; } .accordion-item { border: 1px solid var(--knc-line) !important; border-radius: var(--knc-radius-sm) !important; margin-bottom: .6rem; overflow: hidden; } /* -------- Portfolio overlay refinement -------- */ .portfolio-overlay { background: linear-gradient(to top, rgba(15, 42, 71, .92), transparent) !important; } /* -------- Subtle reveal animation on scroll-friendly elements -------- */ @media (prefers-reduced-motion: no-preference) { .card, .feature-box, .benefit-box, .product-card, .service-card, .plant-card, .plant-stat-card, .mission-card, .vision-card, .value-card { will-change: transform; } } /* -------- Container max-width comfort on huge screens -------- */ @media (min-width: 1400px) { .container { max-width: 1280px; } } /* -------- Mobile tightening -------- */ @media (max-width: 575.98px) { .section-heading { font-size: 1.75rem !important; } .section-subheading { font-size: .98rem; margin-bottom: 1.75rem !important; } .btn-lg { padding: .8rem 1.25rem; font-size: .95rem; } .card { border-radius: var(--knc-radius-sm) !important; } } /* -------- Print friendliness for spec/quote pages -------- */ @media print { .navbar-custom, .footer-custom, #back-to-top, .ai-chat-button, .ai-chat-window, .popup-modal { display: none !important; } body { background: #fff; } .card { box-shadow: none !important; border: 1px solid #ccc !important; } } /* ================================================================ BRAND COLOR UNIFICATION — replaces ALL old blues site-wide Old: #346CB0, #4A90E2, rgba(52,108,176), rgba(74,144,226) #1e3c72, #2a5298 New: #1556B8 → #1F6FE0 → #4A9CFF (gradient) ================================================================ */ /* --- Text / icon colors --- */ .section-heading, .card-title, .stat-number, .plant-stat-number, .plant-card-name, .about-stat h3, .about-image-badge, .timeline-content h5, .mission-card h4, .vision-card h4, .value-card h5, .service-extra-card h5, .sales-card h5 { color: var(--knc-blue-800) !important; } /* keep white text on ALL dark-bg sections */ .page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4, .page-hero h5, .page-hero h6, .page-hero p, .cta-section h1, .cta-section h2, .cta-section h3, .cta-section p, section#contact h1, section#contact h2, section#contact h3, section#contact h4, section#contact p, .coverage-card h1, .coverage-card h2, .coverage-card h3, .coverage-card h4, .coverage-card h5, .coverage-card p, .coverage-card li, .footer-custom h1, .footer-custom h2, .footer-custom h3, .footer-custom h4, .footer-custom h5, .footer-custom h6, .footer-custom p, .footer-custom li, .footer-custom a, .sales-card:hover h5, .navbar-custom .nav-link, .carousel-caption h5, .carousel-caption p, /* portfolio.html / pages with inline dark-bg div (no .page-hero class) */ [style*="background: linear-gradient(135deg, #0E3A7A"] h1, [style*="background: linear-gradient(135deg, #0E3A7A"] h2, [style*="background: linear-gradient(135deg, #0E3A7A"] h3, [style*="background: linear-gradient(135deg, #0E3A7A"] p, [style*="background: linear-gradient(135deg, #1556B8"] h1, [style*="background: linear-gradient(135deg, #1556B8"] h2, [style*="background: linear-gradient(135deg, #1556B8"] h3, [style*="background: linear-gradient(135deg, #1556B8"] p { color: #fff !important; } /* Accent icon colors — standalone flat icons inside cards (NOT inside icon circles) */ .card-body i, .address-icon, .spec-detail i, .plant-meta i, .contact-benefit i, .contact-info-item i, .benefit-box i, .feature-box i, .service-features li::before { color: var(--knc-blue-700) !important; } /* Icons INSIDE colored circles — always white, overrides the rule above */ .stat-icon i, .feature-icon i, .benefit-icon i, .mission-icon i, .vision-icon i, .value-icon i, .plant-stat-icon i, .quick-contact-icon i, .feature-icon-circle i, .service-extra-icon i, .process-number i, .service-icon-badge i, .product-icon i, .ai-chat-button i, .timeline > li .timeline-image i, .about-image-badge i { color: #fff !important; } /* ============================================================ ICON CIRCLES — unified blue gradient, white symbol, shadow Covers every icon-circle class site-wide, including hovers ============================================================ */ .stat-icon, .feature-icon, .benefit-icon, .mission-icon, .vision-icon, .value-icon, .plant-stat-icon, .quick-contact-icon, .feature-icon-circle, .service-extra-icon, .process-number, .plant-card-id, .timeline > li .timeline-image, .about-image-badge, /* product cards: filled circle (not the grey ghost) */ .product-icon, /* service cards: floating badge circle */ .service-icon-badge, /* AI chat FAB */ .ai-chat-button { background: linear-gradient(135deg, #0E3A7A 0%, #1556B8 50%, #1F6FE0 80%, #4A9CFF 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 8px 20px rgba(14, 58, 122, .42), 0 3px 8px rgba(14, 58, 122, .28), inset 0 1px 0 rgba(255, 255, 255, .20) !important; } /* Keep hover states also blue (prevent teal/amber/green takeover) */ .benefit-box:hover .benefit-icon, .product-card:hover .product-icon, .team-features-box:hover .feature-icon-circle, .quick-contact-card:hover .quick-contact-icon { background: linear-gradient(135deg, #0E3A7A 0%, #1556B8 50%, #1F6FE0 80%, #4A9CFF 100%) !important; color: #fff !important; box-shadow: 0 12px 28px rgba(14, 58, 122, .50), 0 4px 10px rgba(14, 58, 122, .32), inset 0 1px 0 rgba(255, 255, 255, .24) !important; } /* Fix text colours that were green/teal in inline CSS */ .benefit-box h5 { color: var(--knc-blue-800) !important; } /* ============================================================ WHITE TEXT on any element with primary blue background Covers: named classes + inline style attribute selectors ============================================================ */ /* --- Class-based blue-bg elements --- */ .hub-cta-card, .hub-cta-card *, .calc-result, .calc-result *, .product-cta-box, .product-cta-box h3, .service-cta-box, .service-cta-box *, .team-header-card, .team-header-card *, .coverage-card, .coverage-card *, .plant-table thead th, .plant-card-id, .page-hero, .page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4, .page-hero h5, .page-hero h6, .page-hero p, .page-hero span, .cta-section, .cta-section h1, .cta-section h2, .cta-section h3, .cta-section p, .cta-section span, section#contact h1, section#contact h2, section#contact h3, section#contact h4, section#contact h5, section#contact p, section#contact span, .bg-image-about, .bg-image-about * { color: #fff !important; } /* index.html contact section mixes a dark band with light cards; restore readable text on the light cards */ section#contact .card:not([style*="#ff6b6b"]):not([style*="#ee5a6f"]) h4, section#contact .card:not([style*="#ff6b6b"]):not([style*="#ee5a6f"]) h5, section#contact .card:not([style*="#ff6b6b"]):not([style*="#ee5a6f"]) .form-label, section#contact .card:not([style*="#ff6b6b"]):not([style*="#ee5a6f"]) strong { color: var(--knc-blue-900) !important; } section#contact .card:not([style*="#ff6b6b"]):not([style*="#ee5a6f"]) p, section#contact .card:not([style*="#ff6b6b"]):not([style*="#ee5a6f"]) .text-muted, section#contact .card:not([style*="#ff6b6b"]):not([style*="#ee5a6f"]) span:not(.badge) { color: var(--knc-slate) !important; } section#contact .card:not([style*="#ff6b6b"]):not([style*="#ee5a6f"]) a:not(.btn) { color: var(--knc-blue-800) !important; } /* --- Inline style="background: ... #0E3A7A / #1556B8 / #1F6FE0" (hero divs) --- */ [style*="background: linear-gradient(135deg, #0E3A7A"], [style*="background: linear-gradient(135deg, #0E3A7A"] *, [style*="background: linear-gradient(135deg, #1556B8"], [style*="background: linear-gradient(135deg, #1556B8"] *, [style*="background-color: #1556B8"], [style*="background-color: #0E3A7A"] { color: #fff !important; } /* Exceptions — buttons/links on dark bg keep their own style */ [style*="background: linear-gradient(135deg, #0E3A7A"] .btn, [style*="background: linear-gradient(135deg, #1556B8"] .btn, .coverage-card .btn, .cta-section .btn, .page-hero .btn { color: unset !important; } /* Hero / banner backgrounds using old dark navy */ .page-hero, .cta-section, section#contact, .bg-image-about, .team-header-card, .service-cta-box, .plant-table thead, .plant-table thead th, .sales-avatar { background: linear-gradient(135deg, #0E3A7A 0%, #1556B8 55%, #1F6FE0 100%) !important; } /* Coverage / area cards */ .coverage-card { background: linear-gradient(135deg, #0E3A7A 0%, #1556B8 55%, #1F6FE0 100%) !important; } /* Spec accent bar */ .spec-card { border-left-color: var(--knc-success) !important; } /* Plant card left border */ .plant-card { border-left-color: var(--knc-blue-800) !important; } .plant-card:hover { border-left-color: var(--knc-amber) !important; } /* Buttons using old blue */ .btn-primary, .btn-primary-custom, [class*="btn-"]:not(.btn-warning):not(.btn-success):not(.btn-danger):not(.btn-outline-light):not(.btn-outline-secondary):not(.btn-light):not(.btn-outline-primary):not(.btn-outline-warning):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-info):not(.btn-outline-dark):not(.btn-link):not(.btn-white):not(.btn-amber) { background: linear-gradient(135deg, #1556B8 0%, #1F6FE0 60%, #4A9CFF 100%) !important; border-color: transparent !important; color: #fff !important; } /* Phone CTA buttons used in page body only; footer is untouched */ .btn.knc-phone-btn, .btn-primary.knc-phone-btn, .btn-primary-custom.knc-phone-btn, .btn-light.knc-phone-btn, .btn-outline-primary.knc-phone-btn, .btn-outline-light.knc-phone-btn, .btn-success.knc-phone-btn, .btn-apply.knc-phone-btn, a[href^="tel:"].btn:not(.btn-glass):not(.knc-phone-btn), button.knc-phone-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .34) !important; background: linear-gradient(135deg, #FFB300 0%, #FF8A00 100%) !important; color: #fff !important; font-weight: 800 !important; letter-spacing: .01em; text-decoration: none !important; text-shadow: 0 1px 3px rgba(120, 48, 0, .28); white-space: nowrap; box-shadow: 0 10px 24px rgba(255, 138, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -2px 0 rgba(0, 0, 0, .14) !important; } .btn.knc-phone-btn:hover, .btn-primary.knc-phone-btn:hover, .btn-primary-custom.knc-phone-btn:hover, .btn-light.knc-phone-btn:hover, .btn-outline-primary.knc-phone-btn:hover, .btn-outline-light.knc-phone-btn:hover, .btn-success.knc-phone-btn:hover, .btn-apply.knc-phone-btn:hover, a[href^="tel:"].btn:not(.btn-glass):not(.knc-phone-btn):hover, button.knc-phone-btn:hover { transform: translateY(-2px); filter: brightness(1.03); color: #fff !important; box-shadow: 0 14px 30px rgba(255, 138, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -2px 0 rgba(0, 0, 0, .16) !important; } .btn.knc-phone-btn.knc-phone-btn-green, .btn-success.knc-phone-btn.knc-phone-btn-green, button.knc-phone-btn.knc-phone-btn-green { background: linear-gradient(135deg, #1CB56A 0%, #13884C 100%) !important; box-shadow: 0 10px 24px rgba(19, 136, 76, .28), inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -2px 0 rgba(0, 0, 0, .14) !important; text-shadow: 0 1px 3px rgba(6, 68, 35, .28); } .btn.knc-phone-btn.knc-phone-btn-green:hover, .btn-success.knc-phone-btn.knc-phone-btn-green:hover, button.knc-phone-btn.knc-phone-btn-green:hover { box-shadow: 0 14px 30px rgba(19, 136, 76, .34), inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -2px 0 rgba(0, 0, 0, .16) !important; } .btn-sm.knc-phone-btn, button.btn-sm.knc-phone-btn { padding: .52rem 1rem; font-size: .9rem; } .knc-phone-btn i { font-size: .95em; } .knc-phone-pill { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; padding: .34rem .72rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .26); background: linear-gradient(135deg, #FFB300 0%, #FF8A00 100%); color: #fff !important; font-weight: 700; font-size: .88rem; line-height: 1.1; text-decoration: none !important; box-shadow: 0 8px 18px rgba(255, 138, 0, .22); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .knc-phone-pill:hover { transform: translateY(-1px); filter: brightness(1.03); color: #fff !important; box-shadow: 0 11px 22px rgba(255, 138, 0, .28); } .knc-phone-pill.knc-phone-pill-green { background: linear-gradient(135deg, #1CB56A 0%, #13884C 100%); box-shadow: 0 8px 18px rgba(19, 136, 76, .22); } .knc-phone-pill.knc-phone-pill-green:hover { box-shadow: 0 11px 22px rgba(19, 136, 76, .28); } .knc-phone-pill.knc-phone-pill-light { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); box-shadow: 0 8px 18px rgba(120, 18, 36, .18); } .knc-phone-pill.knc-phone-pill-sm { padding: .28rem .6rem; font-size: .82rem; } /* Calculator result box */ .calc-result, .product-cta-box, .service-cta-box, .language-tabs .lang-tab.active { background: linear-gradient(135deg, #0E3A7A 0%, #1556B8 55%, #1F6FE0 100%) !important; color: #fff !important; } /* Badge / cert */ .badge-custom, .cert-badge, .about-image-badge { background: linear-gradient(135deg, #1556B8 0%, #1F6FE0 60%, #4A9CFF 100%) !important; color: #fff !important; } /* Timeline dot */ .timeline::before { background: linear-gradient(180deg, #1556B8 0%, var(--knc-amber) 100%) !important; } .timeline-year::after { background: var(--knc-amber) !important; box-shadow: 0 0 0 4px #1556B8 !important; } /* Sales avatar */ .sales-avatar { background: var(--knc-grad-amber) !important; } .sales-avatar-img { border-color: var(--knc-amber) !important; } /* Accordion active */ .accordion-button:not(.collapsed) { background: linear-gradient(135deg, #1556B8 0%, #1F6FE0 100%) !important; } /* Footer */ .footer-custom { background: linear-gradient(180deg, #0E3A7A 0%, #1556B8 100%) !important; border-top: 4px solid var(--knc-amber) !important; } /* Chart / data accent */ .stats-label { color: var(--knc-mute) !important; } .stats-number { background: linear-gradient(135deg, #1556B8 0%, #4A9CFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* About page language tab */ .lang-tab:hover { color: #1556B8 !important; } /* Contact form submit */ #contactForm button[type="submit"] { background: linear-gradient(135deg, #1556B8 0%, #1F6FE0 100%) !important; } /* Misc inline-style overrides (old dark navy via !important) */ .bg-image-about { background-image: linear-gradient(rgba(14,58,122,.85), rgba(21,86,184,.85)), url('https://images.unsplash.com/photo-1541888804692-532ae8a87985?ixlib=rb-4.0.3') !important; background-size: cover !important; background-position: center !important; }