/* ====================================================================== KFES / The Roy Charcoal — Custom Site Styles ---------------------------------------------------------------------- This file holds EVERYTHING added on top of the original theme so the IT admin never has to touch the theme's own CSS files. To change a brand color, edit the variables at the top. To add/remove content, see Default.html — every new section below has a matching HTML block with the same class name (search for it). ====================================================================== */ :root { /* Brand colors: Black / Gold / Yellow-Gold */ --kfes-black: #14120f; --kfes-gold: #c8a24a; /* primary gold (buttons, links, accents) */ --kfes-gold-light: #e6c86e; /* yellow-gold highlight */ --kfes-cream: #f7f3ea; --kfes-red: #b1272d; /* small accent from The Roy crest */ /* Re-map the theme's own color variables so existing components (buttons, hover states, icons) automatically pick up the new brand palette without editing style.css */ --thm-base: var(--kfes-gold); --thm-base-rgb: 200, 162, 74; --thm-black: var(--kfes-black); } /* ---------- General helpers ---------- */ .kfes-section { padding: 90px 0; } .kfes-section.bg-dark { background: var(--kfes-black); color: #cfcac0; } .kfes-section.bg-cream { background: var(--kfes-cream); } .kfes-section-title { text-align: center; max-width: 780px; margin: 0 auto 50px; } .kfes-section-title .kicker { display: inline-block; color: var(--kfes-gold); font-family: var(--thm-font); letter-spacing: 3px; text-transform: uppercase; font-size: 16px; margin-bottom: 8px; } .kfes-section-title h2 { font-size: 40px; margin-bottom: 14px; } .bg-dark .kfes-section-title h2 { color: #fff; } .kfes-section-title p { color: var(--thm-text); font-size: 16px; line-height: 1.8; } .bg-dark .kfes-section-title p { color: #b7b1a6; } .kfes-btn { display: inline-block; padding: 14px 34px; background: var(--kfes-gold); color: #16140f !important; font-weight: 600; letter-spacing: .5px; border-radius: 3px; transition: all .3s ease; text-transform: uppercase; font-size: 14px; } .kfes-btn:hover { background: var(--kfes-black); color: #fff !important; } .kfes-btn.outline { background: transparent; border: 1px solid var(--kfes-gold); color: var(--kfes-gold) !important; } .kfes-btn.outline:hover { background: var(--kfes-gold); color: #16140f !important; } .kfes-btn-row { display: flex; gap: 16px; flex-wrap: wrap; } .kfes-whatsapp-fab { position: fixed; right: 24px; bottom: 24px; z-index: 999; background: #25D366; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.3); } .kfes-whatsapp-fab img { width: 30px; height: 30px; } /* ---------- Header / Logo ---------- */ .main-header .logo-box .logo img.kfes-header-logo { max-height: 62px; width: auto; } .main-header .navigation { display: flex; list-style: none; margin: 0; padding: 0; } .main-header .navigation li { margin: 0 16px; } .main-header .navigation li a { color: #fff; font-family: var(--thm-font); font-size: 17px; letter-spacing: .5px; text-transform: uppercase; padding: 10px 0; display: inline-block; } .main-header .navigation li a:hover { color: var(--kfes-gold); } .header-style-one .header-upper { background: var(--kfes-black); } .other-links .link-box .call-us .link a { color: var(--kfes-gold); } .other-links .link-box .call-us .link { color: #cfcac0; font-size: 14px; line-height: 1.5; } /* ---------- Trust bar (countries / years / certifications strip) ---------- */ .kfes-trustbar { background: var(--kfes-black); color: #e9e3d6; padding: 22px 0; } .kfes-trustbar .auto-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; text-align: center; } .kfes-trustbar .item { flex: 1; min-width: 160px; } .kfes-trustbar .item strong { display: block; font-family: var(--thm-font); font-size: 30px; color: var(--kfes-gold-light); line-height: 1; } .kfes-trustbar .item span { font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: #b7b1a6; } /* ---------- The Roy Charcoal brand block ---------- */ .roy-brand-section { background: linear-gradient(135deg, #1c1a15 0%, #0d0c0a 100%); color: #ece6d8; padding: 100px 0; } .roy-brand-section .roy-logo { max-width: 220px; margin-bottom: 26px; } .roy-brand-section h2 { color: #fff; font-size: 38px; } .roy-brand-section .roy-tagline { font-family: var(--thm-font); color: var(--kfes-gold-light); letter-spacing: 2px; text-transform: uppercase; font-size: 18px; margin-bottom: 18px; } .roy-brand-section p { color: #c9c3b6; line-height: 1.9; } .roy-brand-section .roy-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .roy-brand-section .roy-badges span { border: 1px solid rgba(230,200,110,.4); color: var(--kfes-gold-light); padding: 8px 16px; border-radius: 30px; font-size: 13px; letter-spacing: .5px; } .roy-brand-section .roy-image img { border-radius: 6px; } /* ---------- Product tabs ---------- */ .kfes-product-tabs .tab-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; list-style: none; padding: 0; } .kfes-product-tabs .tab-nav button { background: transparent; border: 1px solid #ddd; padding: 12px 26px; font-family: var(--thm-font); font-size: 16px; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; border-radius: 3px; transition: all .25s ease; } .kfes-product-tabs .tab-nav button.active, .kfes-product-tabs .tab-nav button:hover { background: var(--kfes-black); border-color: var(--kfes-black); color: var(--kfes-gold-light); } .kfes-product-panel { display: none; } .kfes-product-panel.active { display: block; animation: kfesFade .4s ease; } @keyframes kfesFade { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:translateY(0);} } .kfes-product-card { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; } .kfes-product-card .prod-image { flex: 1 1 380px; } .kfes-product-card .prod-image img { border-radius: 6px; width: 100%; } .kfes-product-card .prod-info { flex: 1 1 420px; } .kfes-product-card .prod-info h3 { font-size: 28px; margin-bottom: 8px; } .kfes-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0; } .kfes-spec-grid .spec { background: var(--kfes-cream); border-left: 3px solid var(--kfes-gold); padding: 12px 16px; } .kfes-spec-grid .spec .label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #8a8172; } .kfes-spec-grid .spec .value { font-family: var(--thm-font); font-size: 20px; color: var(--kfes-black); } .kfes-shape-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .kfes-shape-list span { background: #fff; border: 1px solid #e3ddcd; padding: 6px 14px; border-radius: 20px; font-size: 13px; } /* ---------- Production process timeline ---------- */ .kfes-process { position: relative; } .kfes-process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; } .kfes-process-step { background: #fff; border: 1px solid #ece7db; border-radius: 6px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; } .kfes-process-step:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.08); } .kfes-process-step img { width: 100%; height: 190px; object-fit: cover; display: block; } .kfes-process-step .step-body { padding: 20px; } .kfes-process-step .step-num { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background: var(--kfes-black); color: var(--kfes-gold-light); border-radius: 50%; font-family: var(--thm-font); margin-bottom: 10px; } .kfes-process-step h3 { font-size: 18px; margin-bottom: 8px; } .kfes-process-step p { font-size: 14px; color: var(--thm-text); line-height: 1.7; margin: 0; } /* ---------- OEM / Private Label ---------- */ .kfes-oem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 30px 0; } .kfes-oem-grid .chip { background: #fff; border: 1px solid #e3ddcd; border-radius: 6px; padding: 18px 14px; text-align: center; font-family: var(--thm-font); font-size: 17px; } .kfes-oem-grid .chip i { display: block; color: var(--kfes-gold); font-size: 22px; margin-bottom: 8px; } .kfes-oem-clients { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .kfes-oem-clients span { background: var(--kfes-black); color: var(--kfes-gold-light); padding: 8px 18px; border-radius: 30px; font-size: 14px; } /* ---------- Packaging & logistics table ---------- */ .kfes-table-wrap { overflow-x: auto; } table.kfes-table { width: 100%; border-collapse: collapse; background: #fff; } table.kfes-table th, table.kfes-table td { padding: 14px 18px; border: 1px solid #ece7db; text-align: left; font-size: 15px; } table.kfes-table th { background: var(--kfes-black); color: var(--kfes-gold-light); font-family: var(--thm-font); letter-spacing: .5px; text-transform: uppercase; font-size: 13px; } table.kfes-table tr:nth-child(even) td { background: var(--kfes-cream); } /* ---------- Global presence ---------- */ .kfes-country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 30px; } .kfes-country-grid .country { background: rgba(255,255,255,.05); border: 1px solid rgba(230,200,110,.25); color: #ece6d8; padding: 12px 14px; border-radius: 4px; font-size: 14px; display: flex; align-items: center; gap: 8px; } .kfes-country-grid .country.target { border-color: var(--kfes-gold); background: rgba(200,162,74,.12); color: var(--kfes-gold-light); font-weight: 600; } .kfes-country-grid .country .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kfes-gold); flex-shrink: 0; } /* ---------- Testimonials ---------- */ .kfes-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; } .kfes-testi-card { background: #fff; border: 1px solid #ece7db; border-radius: 6px; padding: 30px; position: relative; } .kfes-testi-card .quote-mark { font-size: 46px; color: var(--kfes-gold); line-height: 1; font-family: Georgia, serif; } .kfes-testi-card h3 { font-size: 17px; margin: 6px 0 10px; } .kfes-testi-card p { font-size: 14.5px; line-height: 1.8; color: var(--thm-text); font-style: italic; } .kfes-testi-card .cite { display: block; margin-top: 16px; font-size: 13px; color: var(--kfes-gold); text-transform: uppercase; letter-spacing: .5px; font-style: normal; } /* ---------- FAQ accordion (native
, no JS needed) ---------- */ .kfes-faq { max-width: 900px; margin: 0 auto; } .kfes-faq details { background: #fff; border: 1px solid #ece7db; border-radius: 6px; margin-bottom: 12px; padding: 4px 24px; } .kfes-faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--thm-font); font-size: 18px; color: var(--kfes-black); display: flex; justify-content: space-between; align-items: center; } .kfes-faq summary::-webkit-details-marker { display: none; } .kfes-faq summary::after { content: "+"; font-size: 24px; color: var(--kfes-gold); margin-left: 14px; flex-shrink: 0; } .kfes-faq details[open] summary::after { content: "\2212"; } .kfes-faq .faq-answer { padding: 0 0 20px; color: var(--thm-text); line-height: 1.8; font-size: 15px; } /* ---------- Contact form ---------- */ .kfes-contact-form .form-group { margin-bottom: 16px; } .kfes-contact-form label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; color: #8a8172; } .kfes-contact-form input, .kfes-contact-form select, .kfes-contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #e3ddcd; border-radius: 4px; font-size: 15px; background: #fff; } .kfes-contact-form button { border: none; cursor: pointer; } .kfes-form-note { font-size: 13px; color: #8a8172; margin-top: 10px; } /* ---------- Footer social icons ---------- */ .kfes-social-row { display: flex; gap: 14px; margin: 18px 0; } .kfes-social-row a { width: 40px; height: 40px; border: 1px solid rgba(230,200,110,.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kfes-gold-light) !important; } .kfes-social-row a:hover { background: var(--kfes-gold); color: #16140f !important; } /* ---------- Responsive ---------- */ @media (max-width: 991px) { .main-header .navigation { display: none; } .kfes-product-card { flex-direction: column; } .kfes-spec-grid { grid-template-columns: 1fr 1fr; } .kfes-section { padding: 60px 0; } } @media (max-width: 576px) { .kfes-spec-grid { grid-template-columns: 1fr; } .kfes-trustbar .auto-container { text-align: left; } } /* ---------- Revision 2026 ---------- */ .header-brand-logos{display:flex;align-items:center;gap:18px}.header-brand-logos a{display:flex;align-items:center}.main-header .logo-box .logo img.kfes-header-logo{max-height:118px}.main-header .logo-box .logo img.roy-header-logo{max-height:103px;width:auto;max-width:275px;object-fit:contain}.header-upper .inner-container{display:flex!important;align-items:center;gap:20px}.header-upper .inner-container .logo-box{flex:0 0 auto}.header-upper .inner-container .nav-outer{flex:1 1 auto;min-width:0}.header-upper .inner-container .other-links{flex:0 0 auto;margin-left:auto}.header-upper .navigation{justify-content:center;flex-wrap:nowrap}.header-upper .navigation li{margin:0 8px}.header-upper .navigation li a{font-size:14px}.header-upper .other-links .link-box .call-us .link{white-space:nowrap}.banner-section .content-box .inner{animation:kfesHeroEmergence 1.15s cubic-bezier(.2,.75,.2,1) both}@keyframes kfesHeroEmergence{0%{opacity:0;transform:translateY(38px) scale(.98);clip-path:inset(18% 0 0 0)}100%{opacity:1;transform:none;clip-path:inset(0)}}.roy-brand-section .roy-logo{max-width:330px;width:100%}.roy-brand-section .roy-product-image{width:100%;border-radius:50%;aspect-ratio:1/1;object-fit:cover;object-position:center;-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 88%);mask-image:radial-gradient(circle,#000 58%,transparent 88%)}.kfes-coa-card{margin-top:28px;padding:18px;border:1px solid #e3ddcd;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.kfes-coa-card strong,.kfes-coa-card span{display:block}.kfes-coa-card strong{font-size:18px;color:var(--kfes-black)}.kfes-coa-card span{margin-top:4px;font-size:13px;color:#8a8172}.kfes-oem-slideshow{position:relative;min-height:420px;background:#111;overflow:hidden;border-radius:6px}.kfes-oem-slide{display:none;height:100%}.kfes-oem-slide.active{display:block;animation:kfesFade .45s ease}.kfes-oem-slide img{width:100%;height:420px;object-fit:cover;display:block}.kfes-oem-dots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:8px}.kfes-oem-dots button{width:10px;height:10px;border-radius:50%;border:1px solid #fff;background:transparent;padding:0;cursor:pointer}.kfes-oem-dots button.active{background:var(--kfes-gold-light);border-color:var(--kfes-gold-light)}.kfes-testi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kfes-testi-card h3{font-size:25.5px;line-height:1.25}.kfes-testi-card p{font-size:18px;line-height:1.75}.footer-brand-logos{display:flex;align-items:center;gap:18px;margin-bottom:14px;flex-wrap:wrap}.footer-brand-logos img:first-child{max-width:323px}.footer-brand-logos img:last-child{max-width:285px;max-height:133px;object-fit:contain}.footer-contact-icons a{width:42px;height:42px}.kfes-get-in-touch-note{margin-top:20px;padding:18px 20px;border-left:3px solid var(--kfes-gold);background:var(--kfes-cream)} @media(max-width:1250px){.header-upper .other-links .link-box{display:none}.header-upper .navigation li{margin:0 6px}.header-upper .navigation li a{font-size:13px}} @media(max-width:991px){.header-upper .inner-container{gap:12px}.header-brand-logos{gap:10px}.main-header .logo-box .logo img.kfes-header-logo{max-height:82px}.main-header .logo-box .logo img.roy-header-logo{max-height:72px;max-width:180px}.header-upper .inner-container .other-links{display:none}.kfes-testi-grid{grid-template-columns:1fr 1fr}.kfes-testi-card h3{font-size:22px}.kfes-testi-card p{font-size:16px}} @media(max-width:576px){.header-brand-logos{gap:7px}.main-header .logo-box .logo img.kfes-header-logo{max-height:68px}.main-header .logo-box .logo img.roy-header-logo{max-height:58px;max-width:135px}.kfes-testi-grid{grid-template-columns:1fr}.kfes-testi-card h3{font-size:21px}.kfes-testi-card p{font-size:15px}.kfes-oem-slideshow,.kfes-oem-slide img{min-height:300px;height:300px}.kfes-coa-card .kfes-btn{width:100%;text-align:center}} /* ---------- Final layout alignment: Header / Footer / Floating actions ---------- */ @media (min-width: 992px){ .header-upper .inner-container{max-width:1740px;margin:0 auto;padding:0 34px;gap:28px;} .header-brand-logos{gap:16px;min-width:290px;} .main-header .logo-box .logo img.kfes-header-logo{max-height:76px;max-width:155px;object-fit:contain;} .main-header .logo-box .logo img.roy-header-logo{max-height:76px;max-width:82px;object-fit:contain;} .header-upper .inner-container .nav-outer{flex:1 1 auto;} .header-upper .navigation{justify-content:flex-start;gap:2px;} .header-upper .navigation li{margin:0 7px;} .header-upper .navigation li a{font-size:14px;white-space:nowrap;} .header-upper .inner-container .other-links{display:flex;align-items:center;gap:20px;} .header-upper .other-links .link-box .call-us .link{font-size:14px;line-height:1.55;} .header-upper .other-links .kfes-btn{white-space:nowrap;margin-left:0!important;padding:12px 26px!important;} } .kfes-footer-main{max-width:1500px!important;min-height:300px;padding:70px 0 55px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:80px;} .kfes-footer-brand{padding-top:8px;max-width:600px;} .kfes-footer-brand .footer-brand-logos{gap:24px;margin-bottom:70px;align-items:center;} .kfes-footer-brand .footer-brand-logos img:first-child{max-width:190px;width:auto;} .kfes-footer-brand .footer-brand-logos img:last-child{max-width:100px;max-height:118px;width:auto;} .kfes-footer-brand p{font-size:14px;line-height:1.8;color:#b7b1a6;margin:0;} .kfes-footer-contact{justify-self:start;min-width:340px;padding-top:0;} .kfes-footer-contact strong{display:block;color:#fff;font-size:20px;margin-bottom:18px;} .kfes-footer-contact p{font-size:15px;line-height:2;color:#cfcac0;margin:0;} .kfes-footer-contact p a{color:#cfcac0;} .kfes-footer-contact .kfes-social-row{margin-top:22px;} .kfes-footer .footer-bottom{background:transparent;border-top:1px solid rgba(230,200,110,.12);} .kfes-footer .copyright{color:#817b72;font-size:12px;} .kfes-whatsapp-fab{bottom:94px!important;right:24px!important;} .scroll-to-top{right:24px!important;bottom:24px!important;z-index:998!important;} @media(max-width:991px){ .kfes-footer-main{grid-template-columns:1fr;padding:55px 24px 35px!important;row-gap:45px;} .kfes-footer-brand .footer-brand-logos{margin-bottom:28px;} .kfes-footer-contact{min-width:0;} .kfes-whatsapp-fab{bottom:88px!important;right:18px!important;} .scroll-to-top{right:18px!important;bottom:18px!important;} } @media(max-width:576px){ .kfes-footer-main{padding-left:20px!important;padding-right:20px!important;} .kfes-footer-brand .footer-brand-logos img:first-child{max-width:150px;} .kfes-footer-brand .footer-brand-logos img:last-child{max-width:80px;max-height:90px;} .kfes-whatsapp-fab{width:52px;height:52px;bottom:80px!important;} .kfes-whatsapp-fab img{width:27px;height:27px;} .scroll-to-top{bottom:16px!important;} } /* ---------- Header refinement 2026-09-25 ---------- */ @media (min-width: 992px){ .main-header .header-upper .logo-box{padding:12px 0!important;margin-right:28px!important;} .header-upper .inner-container{min-height:86px!important;height:86px!important;padding:0 30px!important;gap:18px!important;align-items:center!important;} .header-brand-logos{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-width:220px!important;height:64px!important;} .header-brand-logos a{display:flex!important;align-items:center!important;justify-content:center!important;height:64px!important;} .main-header .logo-box .logo img.kfes-header-logo, .main-header .logo-box .logo img.roy-header-logo{height:60px!important;width:60px!important;max-height:60px!important;max-width:60px!important;object-fit:contain!important;vertical-align:middle!important;} .header-upper .navigation{align-items:center!important;} .header-upper .navigation li{margin:0 6px!important;} .header-upper .navigation li a{font-size:16px!important;line-height:1.2!important;padding:8px 0!important;} .header-upper .inner-container .other-links{display:flex!important;align-items:center!important;margin-left:auto!important;gap:0!important;} .header-upper .other-links .kfes-btn{font-size:13px!important;padding:11px 20px!important;margin-left:0!important;} } @media (max-width: 991px){ .main-header .header-upper .logo-box{padding:10px 0!important;margin-right:15px!important;} .header-upper .inner-container{min-height:74px!important;height:74px!important;padding:0 20px!important;align-items:center!important;} .header-brand-logos{align-items:center!important;height:54px!important;gap:7px!important;} .header-brand-logos a{height:54px!important;align-items:center!important;} .main-header .logo-box .logo img.kfes-header-logo, .main-header .logo-box .logo img.roy-header-logo{height:50px!important;width:50px!important;max-height:50px!important;max-width:50px!important;object-fit:contain!important;} .header-upper .inner-container .other-links{display:none!important;} } /* ---------- Landing page and content refinements 2026-09-25 ---------- */ @media (min-width: 992px){ /* Keep the full hero message and CTAs within the initial viewport. */ .banner-two .banner-carousel .slide-item, .banner-two .banner-carousel .content-box{height:calc(100vh - 86px);min-height:620px;max-height:780px;} .banner-two .banner-carousel .content-box .content{padding:70px 0 25px;} .banner-two .banner-carousel .content-box .inner{max-width:900px;margin:-58px auto 0;text-align:center;} .banner-two .banner-carousel .content-box h1{font-size:98px;line-height:.92em;} .banner-two .banner-carousel .content-box .kfes-btn-row{justify-content:center;margin-top:22px!important;} } @media (max-width:991px){ .banner-two .banner-carousel .content-box{height:calc(100vh - 74px);min-height:560px;max-height:720px;} .banner-two .banner-carousel .content-box .content{padding:50px 0 25px;} .banner-two .banner-carousel .content-box .inner{margin:-35px auto 0;text-align:center;} .banner-two .banner-carousel .content-box h1{font-size:68px;line-height:.95em;} .banner-two .banner-carousel .content-box .kfes-btn-row{justify-content:center;} } @media (max-width:576px){ .banner-two .banner-carousel .content-box{height:calc(100vh - 74px);min-height:520px;max-height:680px;} .banner-two .banner-carousel .content-box .content{padding:35px 0 20px;} .banner-two .banner-carousel .content-box .inner{margin:-22px auto 0;} .banner-two .banner-carousel .content-box h1{font-size:48px;line-height:1em;} .banner-two .banner-carousel .content-box .sub-title{font-size:16px;line-height:1.35em;margin-bottom:12px;} .banner-two .banner-carousel .content-box .kfes-btn-row{gap:10px;margin-top:18px!important;} .banner-two .banner-carousel .content-box .kfes-btn{padding:10px 15px;} } /* OEM options: exactly two rows of four on desktop. */ .kfes-oem-grid{grid-template-columns:repeat(4,minmax(0,1fr));} @media(max-width:991px){.kfes-oem-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:576px){.kfes-oem-grid{grid-template-columns:1fr 1fr;gap:10px;}.kfes-oem-grid .chip{padding:14px 8px;font-size:14px;}} /* Production step titles enlarged by ~30%. */ .kfes-process-step h3{font-size:23.4px;line-height:1.25;} @media(max-width:576px){.kfes-process-step h3{font-size:21px;}} /* Packaging customization note. */ .kfes-custom-note{display:inline-block;margin-top:5px;color:#776f63;font-size:12px;line-height:1.55;} /* Reliable local Instagram icon rendering. */ .footer-contact-icons .instagram-link{display:flex;align-items:center;justify-content:center;} .footer-contact-icons .instagram-link img{width:18px;height:18px;display:block;color:var(--kfes-gold-light);filter:none;} /* ---------- KFES header logo scale refinement ---------- */ @media (min-width: 992px){ .header-brand-logos{height:78px!important;} .header-brand-logos a{height:78px!important;} .main-header .logo-box .logo img.kfes-header-logo{width:78px!important;height:78px!important;max-width:78px!important;max-height:78px!important;} .main-header .logo-box .logo img.roy-header-logo{width:60px!important;height:60px!important;max-width:60px!important;max-height:60px!important;} } @media (max-width:991px){ .main-header .logo-box .logo img.kfes-header-logo{width:65px!important;height:65px!important;max-width:65px!important;max-height:65px!important;} } @media (max-width:576px){ .main-header .logo-box .logo img.kfes-header-logo{width:58px!important;height:58px!important;max-width:58px!important;max-height:58px!important;} } /* ---------- OEM preview sizing refinement 2026-09-25 ---------- */ @media (min-width: 992px){ #oem .kfes-oem-slideshow{height:500px!important;min-height:500px!important;align-self:flex-start!important;} #oem .kfes-oem-slide,#oem .kfes-oem-slide img{height:500px!important;min-height:500px!important;} #oem .kfes-oem-slide img{object-fit:cover!important;} } @media (max-width: 991px){ #oem .kfes-oem-slideshow,#oem .kfes-oem-slide,#oem .kfes-oem-slide img{height:360px!important;min-height:360px!important;} } /* ---------- Section headline consistency ---------- */ #oem h2, #contact h2{font-size:40px!important;line-height:1.15!important;} @media(max-width:576px){#oem h2,#contact h2{font-size:32px!important;}} /* ---------- Global Presence headline line break ---------- */ #global-presence .kfes-section-title h2{max-width:760px;} /* ---------- FAQ question typography ---------- */ .kfes-faq summary{font-size:27px!important;line-height:1.35!important;} @media(max-width:576px){.kfes-faq summary{font-size:21px!important;}} /* ---------- Footer refinement ---------- */ .kfes-footer-brand .footer-brand-logos{gap:8px!important;margin-bottom:18px!important;justify-content:flex-start!important;} .kfes-footer-brand .footer-brand-logos img:first-child{max-width:285px!important;} .kfes-footer-brand .footer-brand-logos img:last-child{max-width:150px!important;max-height:150px!important;} .kfes-footer-brand p{margin-top:0!important;text-align:left!important;} .footer-contact-icons .instagram-link img{filter:brightness(0) saturate(100%) invert(78%) sepia(22%) saturate(649%) hue-rotate(7deg) brightness(92%) contrast(88%)!important;} @media(max-width:576px){ .kfes-footer-brand .footer-brand-logos{gap:6px!important;} .kfes-footer-brand .footer-brand-logos img:first-child{max-width:210px!important;} .kfes-footer-brand .footer-brand-logos img:last-child{max-width:105px!important;max-height:110px!important;} } /* ---------- Long-life content automation & visual refinements 2026-09-27 ---------- */ .kfes-dynamic-years{white-space:nowrap;} /* Animated KFES logo over the About image, inspired by the original KFES presentation. */ .kfes-about-image{position:relative!important;overflow:hidden!important;} .kfes-about-logo-overlay{position:absolute;left:50%;top:50%;width:32%;max-width:190px;transform:translate(-50%,-50%);z-index:4;pointer-events:none;animation:kfes-logo-float 4.5s ease-in-out infinite,kfes-logo-glow 3.5s ease-in-out infinite;} .kfes-about-logo-overlay img{display:block;width:100%;height:auto!important;filter:drop-shadow(0 8px 20px rgba(0,0,0,.48));} @keyframes kfes-logo-float{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(-1deg)}50%{transform:translate(-50%,-54%) scale(1.035) rotate(1deg)}} @keyframes kfes-logo-glow{0%,100%{opacity:.88}50%{opacity:1}} /* OEM: single warehouse image, no rotating gallery. */ #oem .kfes-oem-single-preview{height:500px!important;min-height:500px!important;overflow:hidden;border-radius:4px;position:relative;} #oem .kfes-oem-single-preview img{display:block;width:100%;height:100%;object-fit:cover;} @media(max-width:991px){#oem .kfes-oem-single-preview{height:360px!important;min-height:360px!important;}} /* Section-label headlines use the same display face as the major section headlines. */ #oem > .auto-container > .row > div:first-child > .kicker, #contact .kicker{ font-family:var(--thm-font)!important; font-size:40px!important; line-height:1.15!important; font-weight:700!important; letter-spacing:0!important; text-transform:none!important; color:var(--kfes-gold)!important; margin-bottom:10px!important; } @media(max-width:576px){ #oem > .auto-container > .row > div:first-child > .kicker, #contact .kicker{font-size:32px!important;} } /* Footer uses the same CoconutBox image as the original KFES "Every market..." section, with a slow cinematic pan/zoom so the background remains alive without being distracting. */ .kfes-footer-animated-bg{position:relative!important;overflow:hidden!important;background:var(--kfes-black)!important;isolation:isolate;} .kfes-footer-animated-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,18,15,.82),rgba(20,18,15,.88));z-index:-1;} .kfes-footer-bg-image{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;opacity:.26;filter:grayscale(100%) contrast(.9) brightness(.72);z-index:-2;animation:kfes-footer-pan 22s ease-in-out infinite alternate;transform-origin:center;} @keyframes kfes-footer-pan{0%{transform:scale(1) translate3d(-1%,0,0)}100%{transform:scale(1.08) translate3d(1%,-2%,0)}} .kfes-footer-brand{position:relative;z-index:2;} .kfes-footer-brand p{margin-left:0!important;text-align:left!important;max-width:600px;} .kfes-footer-contact{position:relative;z-index:2;} @media(prefers-reduced-motion:reduce){.kfes-about-logo-overlay,.kfes-footer-bg-image{animation:none!important;}} /* Footer background layering fix: keep the animated image above the footer base, behind content. */ .kfes-footer-animated-bg{background:transparent!important;} .kfes-footer-animated-bg::before{z-index:1!important;} .kfes-footer-bg-image{z-index:0!important;} .kfes-footer-main,.kfes-footer .footer-bottom{position:relative;z-index:2;} /* ---------- v7 visual refinements ---------- */ /* About KFES: static, larger monochrome logo overlay inspired by the original KFES presentation. */ .kfes-about-logo-overlay{ width:50%!important; max-width:300px!important; left:50%!important; top:50%!important; transform:translate(-50%,-50%)!important; animation:none!important; opacity:.42!important; filter:grayscale(100%)!important; mix-blend-mode:screen; } .kfes-about-logo-overlay img{ filter:grayscale(100%) contrast(.72) brightness(1.35)!important; opacity:.9!important; } @media(max-width:576px){ .kfes-about-logo-overlay{width:58%!important;max-width:220px!important;opacity:.38!important;} } /* OEM / Get In Touch section-label font: match major section headlines. */ #oem > .auto-container > .row > div:first-child > .kicker, #contact .kicker{ font-family:var(--thm-font)!important; font-size:40px!important; line-height:1.15!important; font-weight:700!important; letter-spacing:0!important; text-transform:none!important; } @media(max-width:576px){ #oem > .auto-container > .row > div:first-child > .kicker, #contact .kicker{font-size:32px!important;} } /* Footer brand statement: 80px from the desktop left edge of the brand column. */ .kfes-footer-brand p{margin-left:80px!important;text-align:left!important;} @media(max-width:991px){.kfes-footer-brand p{margin-left:0!important;}} /* Footer background image: 40% larger than v6. */ .kfes-footer-bg-image{ inset:-31%!important; width:162.4%!important; height:162.4%!important; } /* Dynamic experience number: same typography/size as 2010, 17, etc. */ .kfes-trustbar .item strong .kfes-dynamic-years{ font-family:inherit!important; font-size:inherit!important; font-weight:inherit!important; line-height:inherit!important; color:inherit!important; } /* ---------- v8 refinements ---------- */ /* Use the same section-label typography as the site's other major section kickers. */ #oem > .auto-container > .row > div:first-child > .kicker, #contact .kicker{ font-family:var(--thm-font)!important; font-size:16px!important; line-height:1.4!important; font-weight:400!important; letter-spacing:3px!important; text-transform:uppercase!important; color:var(--kfes-gold)!important; margin-bottom:8px!important; } @media(max-width:576px){ #oem > .auto-container > .row > div:first-child > .kicker, #contact .kicker{font-size:15px!important;letter-spacing:2px!important;} } /* Footer image fills the entire footer and responds to page scrolling with a restrained parallax motion. */ .kfes-footer-animated-bg{position:relative!important;overflow:hidden!important;} .kfes-footer-bg-image{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; opacity:.26!important; filter:grayscale(100%) contrast(.9) brightness(.72)!important; transform:scale(1.06) translate3d(0,0,0); animation:none!important; will-change:transform; transition:transform .08s linear; } @media(max-width:991px){ .kfes-footer-bg-image{transform:scale(1.04) translate3d(0,0,0);} } /* ---------- v9 testimonial, OEM and footer refinements ---------- */ /* OEM preview: 20% wider than v8 while remaining responsive. */ #oem > .auto-container > .row > div:first-child{flex:0 1 42%!important;max-width:42%!important;} #oem > .auto-container > .row > div:last-child{flex:1 1 58%!important;max-width:58%!important;} #oem .kfes-oem-single-preview{width:100%!important;} /* Testimonial carousel: compact cards, two-line maximum headings, aligned previews. */ .kfes-testi-carousel{position:relative;} .kfes-testi-carousel .kfes-testi-card{height:305px;display:flex;flex-direction:column;box-sizing:border-box;} .kfes-testi-carousel .kfes-testi-card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.05em;margin-bottom:12px;} .kfes-testi-carousel .kfes-testi-card p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px;} .kfes-testi-carousel .kfes-testi-card .cite{margin-top:auto;} .kfes-testi-carousel .owl-nav{margin-top:18px;text-align:center;} .kfes-testi-carousel .owl-nav button{width:38px;height:38px;border:1px solid #d6c8a7!important;border-radius:50%;margin:0 5px!important;background:#fff!important;color:#8a6a28!important;font-size:22px!important;line-height:1!important;} .kfes-testi-carousel .owl-nav button:hover{background:#f5efe2!important;} .kfes-testi-carousel .owl-dots{margin-top:12px;} .kfes-testi-carousel .owl-dot span{background:#d9d2c5!important;} .kfes-testi-carousel .owl-dot.active span{background:var(--kfes-gold-light)!important;} /* Footer: use supplied combined logo at 150px tall and align the statement to its left edge. */ .kfes-footer-brand .footer-brand-combined{height:150px!important;margin:0 0 28px 80px!important;display:flex!important;align-items:center!important;gap:0!important;} .kfes-footer-brand .footer-brand-combined img{height:150px!important;width:auto!important;max-width:none!important;object-fit:contain!important;display:block!important;} .kfes-footer-brand p{margin-left:80px!important;} @media(max-width:991px){ #oem > .auto-container > .row > div:first-child,#oem > .auto-container > .row > div:last-child{flex:1 1 100%!important;max-width:100%!important;} .kfes-footer-brand .footer-brand-combined{height:120px!important;margin-left:0!important;margin-bottom:22px!important;} .kfes-footer-brand .footer-brand-combined img{height:120px!important;max-width:100%!important;} .kfes-footer-brand p{margin-left:0!important;} } @media(max-width:576px){ .kfes-testi-carousel .kfes-testi-card{height:300px;} .kfes-testi-carousel .kfes-testi-card h3{font-size:21px!important;line-height:1.25!important;} .kfes-testi-carousel .kfes-testi-card p{font-size:15px!important;line-height:1.6!important;} .kfes-footer-brand .footer-brand-combined{height:90px!important;margin-bottom:18px!important;} .kfes-footer-brand .footer-brand-combined img{height:90px!important;width:auto!important;max-width:100%!important;} } /* ================= KFES v10 FINAL OVERRIDES ================= */ /* Testimonials: 2 columns desktop / 1 column mobile, full copy visible, automatic carousel. */ .kfes-testi-carousel{position:relative;} .kfes-testi-carousel .kfes-testi-card{ height:auto!important; min-height:390px; display:flex!important; flex-direction:column; box-sizing:border-box; padding:28px 30px!important; } .kfes-testi-carousel .kfes-testi-card h3{ display:block!important; -webkit-line-clamp:unset!important; overflow:visible!important; min-height:0!important; font-size:24px!important; line-height:1.28!important; margin-bottom:14px!important; } .kfes-testi-carousel .kfes-testi-card p{ display:block!important; -webkit-line-clamp:unset!important; overflow:visible!important; margin-bottom:18px!important; font-size:17px!important; line-height:1.7!important; } .kfes-testi-carousel .kfes-testi-card .cite{margin-top:auto;} .kfes-testi-carousel .owl-stage{display:flex;align-items:stretch;} .kfes-testi-carousel .owl-item{display:flex;} .kfes-testi-carousel .owl-item .kfes-testi-card{width:100%;} /* OEM: image starts level with the section kicker/title and stretches only alongside the content, so it never drops below the Start an OEM Inquiry CTA. Image column is intentionally wider. */ #oem .kfes-oem-layout{display:grid!important;grid-template-columns:minmax(0,42fr) minmax(0,58fr)!important;gap:40px!important;align-items:stretch!important;} #oem .kfes-oem-copy,#oem .kfes-oem-image-col{min-width:0!important;display:flex!important;flex-direction:column!important;} #oem .kfes-oem-image-col{align-self:stretch!important;} #oem .kfes-oem-single-preview{width:100%!important;height:100%!important;min-height:0!important;flex:1 1 auto!important;overflow:hidden!important;border-radius:4px!important;} #oem .kfes-oem-single-preview img{display:block!important;width:100%!important;height:100%!important;min-height:520px!important;object-fit:cover!important;} /* Footer image: make the charcoal background 40% more visible than v9. */ .kfes-footer-bg-image{opacity:.364!important;} @media(max-width:991px){ #oem .kfes-oem-layout{display:grid!important;grid-template-columns:1fr!important;gap:28px!important;} #oem .kfes-oem-image-col{order:2!important;min-height:360px!important;} #oem .kfes-oem-single-preview{height:360px!important;min-height:360px!important;} #oem .kfes-oem-single-preview img{height:360px!important;min-height:360px!important;} .kfes-testi-carousel .kfes-testi-card{min-height:350px;} } @media(max-width:576px){ #oem .kfes-oem-image-col{min-height:300px!important;} #oem .kfes-oem-single-preview{height:300px!important;min-height:300px!important;} #oem .kfes-oem-single-preview img{height:300px!important;min-height:300px!important;} .kfes-testi-carousel .kfes-testi-card{min-height:0!important;padding:24px 22px!important;} .kfes-testi-carousel .kfes-testi-card h3{font-size:21px!important;} .kfes-testi-carousel .kfes-testi-card p{font-size:15px!important;line-height:1.65!important;} } /* ---------- v11 refinements ---------- */ /* OEM: restore the v8 side-by-side composition, with the preview 10% wider than v8. */ @media (min-width: 992px){ #oem > .auto-container > .row:not(.kfes-oem-layout){ display:flex!important; flex-wrap:wrap!important; gap:40px!important; align-items:flex-start!important; } #oem > .auto-container > .row:not(.kfes-oem-layout) > div:first-child{ flex:1 1 380px!important; min-width:0!important; } #oem > .auto-container > .row:not(.kfes-oem-layout) > div:last-child{ flex:1 1 374px!important; min-width:0!important; } #oem .kfes-oem-single-preview{ height:500px!important; min-height:500px!important; align-self:flex-start!important; } #oem .kfes-oem-single-preview img{ width:100%!important; height:100%!important; min-height:0!important; object-fit:cover!important; } } /* Footer: make the combined KFES + The Roy logo 100% larger than v10. */ .kfes-footer-brand .footer-brand-combined{ height:300px!important; margin-left:80px!important; margin-bottom:28px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; } .kfes-footer-brand .footer-brand-combined img{ height:300px!important; width:auto!important; max-width:100%!important; object-fit:contain!important; } .kfes-footer-brand{max-width:760px!important;} /* Footer charcoal image: make the background substantially more visible/dominant. */ .kfes-footer-animated-bg::before{ background:linear-gradient(rgba(20,18,15,.56),rgba(20,18,15,.64))!important; } .kfes-footer-bg-image{ opacity:.58!important; filter:grayscale(100%) contrast(.96) brightness(.82)!important; } /* Testimonials: 2-up wide carousel on desktop, full copy visible, automatic rotation. */ .kfes-testi-carousel .kfes-testi-card{ height:320px!important; min-height:320px!important; aspect-ratio:2 / 1!important; display:flex!important; flex-direction:column!important; overflow:visible!important; padding:26px 28px!important; box-sizing:border-box!important; } .kfes-testi-carousel .kfes-testi-card h3{ display:block!important; -webkit-line-clamp:unset!important; overflow:visible!important; min-height:0!important; margin:6px 0 12px!important; font-size:21px!important; line-height:1.25!important; } .kfes-testi-carousel .kfes-testi-card p{ display:block!important; -webkit-line-clamp:unset!important; overflow:visible!important; margin-bottom:12px!important; font-size:14px!important; line-height:1.58!important; flex:1 1 auto!important; } .kfes-testi-carousel .kfes-testi-card .cite{margin-top:auto!important;} @media (min-width:992px){ .kfes-testi-carousel .owl-item{padding:0 4px!important;} } @media (max-width:991px){ .kfes-footer-brand .footer-brand-combined{ height:220px!important; margin-left:0!important; } .kfes-footer-brand .footer-brand-combined img{height:220px!important;} .kfes-testi-carousel .kfes-testi-card{ aspect-ratio:2 / 1!important; height:auto!important; min-height:300px!important; } } @media (max-width:576px){ .kfes-footer-brand .footer-brand-combined{ height:150px!important; margin-bottom:18px!important; } .kfes-footer-brand .footer-brand-combined img{height:150px!important;} .kfes-testi-carousel .kfes-testi-card{ aspect-ratio:auto!important; min-height:0!important; height:auto!important; padding:24px 22px!important; } .kfes-testi-carousel .kfes-testi-card h3{font-size:20px!important;} .kfes-testi-carousel .kfes-testi-card p{font-size:15px!important;line-height:1.62!important;} } /* SEO/perf: intrinsic width/height attrs reserve space (no layout shift); zero-specificity so any class rule still wins */ :where(img[width][height]){height:auto} /* ====================================================================== KFES v17 — client revisions 2026-10-08 This block is the single source of truth for the footer layout (the old inline "v16"