/* ========================================================== Lancing UK — Overlay Theme (v1.1 SAFE) Purpose: Apply index visual polish WITHOUT touching your existing header/nav by default. Usage: 1) Link this AFTER your current CSS on each page: 2) (Optional) To enable the glassy fixed header from index, add class 'lu-fixed-header' to . ---------------------------------------------------------- */ /* ===== CSS Variables (brand system) ===== */ :root{ --lu-bg:#0a0f1c; --lu-bg-95:rgba(10,15,28,.95); --lu-bg-90:rgba(10,15,28,.90); --lu-bg-80:rgba(10,15,28,.80); --lu-surface:#0f172a; --lu-text:#1f2937; --lu-white:#fff; --lu-muted:#6b7280; --lu-primary:#0056b3; --lu-accent:#0052cc; --lu-warm:#ff6b35; --lu-ring:rgba(0,82,204,.25); --lu-shadow:0 10px 30px rgba(0,0,0,.18); --lu-shadow-sm:0 2px 10px rgba(0,0,0,.1); --lu-shadow-lg:0 18px 48px rgba(0,0,0,.22); --lu-radius:14px; --lu-radius-lg:20px; } /* ===== Base typography polish (non-destructive) ===== */ body{ color:var(--lu-text); text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .section-title h1, .section-title h2, .section-title h3, h1.page-title, h2.page-title{ letter-spacing:.2px; font-weight:800; color:#111827; } .section-title p{ color:#4b5563; } /* ===== Global container rhythm ===== */ .container, .container1, .container2, .container3, .container5, .container6, .container7, .container8{ max-width:1700px; } /* ===== DO NOT TOUCH existing header by default ===== */ /* Optional: only if body has .lu-fixed-header, apply the glassy fixed header */ body.lu-fixed-header .header{ position:fixed; top:0; left:0; right:0; background:var(--lu-bg-90); backdrop-filter:saturate(140%) blur(16px); box-shadow:var(--lu-shadow-sm); z-index:1000; } body.lu-fixed-header{ scroll-padding-top:90px; } body.lu-fixed-header .header .navbar{ margin-bottom:0; border:none; background:transparent; } body.lu-fixed-header .header .navbar-brand img{ max-height:54px; width:auto; filter:brightness(0) invert(1); } body.lu-fixed-header .main_menu_wrapper .nav>li>a{ color:var(--lu-white) !important; font-weight:600; padding:22px 18px; position:relative; } body.lu-fixed-header .main_menu_wrapper .nav>li>a:after{ content:""; position:absolute; left:18px; right:18px; bottom:12px; height:2px; background:var(--lu-accent); transform:scaleX(0); transform-origin:left; transition:transform .22s ease; } body.lu-fixed-header .main_menu_wrapper .nav>li>a:hover, body.lu-fixed-header .main_menu_wrapper .nav>li.active>a{ color:#e5f0ff !important; } body.lu-fixed-header .main_menu_wrapper .nav>li>a:hover:after, body.lu-fixed-header .main_menu_wrapper .nav>li.active>a:after{ transform:scaleX(1); } /* ===== Buttons unified ===== */ .btn, .button, a.btn{ border-radius:999px !important; font-weight:700; letter-spacing:.15px; transition:transform .15s ease, box-shadow .15s ease; } .btn:focus{ box-shadow:0 0 0 .25rem var(--lu-ring) !important; } .btn-primary{ background:var(--lu-primary); border-color:var(--lu-primary); color:var(--lu-white); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--lu-shadow); } .btn-secondary, .btn-warning.alt{ background:var(--lu-warm); border-color:var(--lu-warm); color:var(--lu-white); } .btn-outline-primary{ color:var(--lu-primary); border-color:var(--lu-primary); } .btn-outline-primary:hover{ background:var(--lu-primary); color:#fff; } /* ===== Cards & grids (icon/product/video) ===== */ .icon-card, .product-card, .video-card, .img-box, [class*="card"]{ border-radius:var(--lu-radius-lg) !important; box-shadow:var(--lu-shadow-sm); border:1px solid #e6e8eb; overflow:hidden; background:#fff; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .icon-card:hover, .product-card:hover, .video-card:hover, .img-box:hover, [class*="card"]:hover{ transform:translateY(-4px); box-shadow:var(--lu-shadow); border-color:var(--lu-accent); } .icon-image img, .product-image img, .img-box img{ display:block; width:100%; height:100%; object-fit:cover; } /* ===== All-products sticky filters (safe) ===== */ #filters-bar, #cat-buttons, #product-filters{ position:sticky; top:80px; z-index:900; background:#fff; border-bottom:1px solid #e5e7eb; backdrop-filter:saturate(180%) blur(8px); padding:.6rem .5rem; border-radius:0 0 14px 14px; } #product-filters .btn, #cat-buttons .btn{ border-radius:999px; border-color:var(--lu-primary); color:var(--lu-primary); } #product-filters .btn.active, #cat-buttons .btn.active{ background:var(--lu-primary); color:#fff; border-color:var(--lu-primary); box-shadow:0 8px 18px rgba(0,86,179,.22); } /* ===== Contact form polish ===== */ .contact_us1_wrapper input[type="text"], .contact_us1_wrapper input[type="email"], .contact_us1_wrapper input[type="tel"], .contact_us1_wrapper textarea, form .form-control{ border-radius:14px; border:1px solid #e5e7eb; padding:.8rem 1rem; box-shadow:0 0 0 0 rgba(0,0,0,0); transition:border-color .18s ease, box-shadow .18s ease; } form .form-control:focus{ border-color:var(--lu-accent); box-shadow:0 0 0 .25rem var(--lu-ring); } /* Section dividers / subtle lines */ .section-divider, .hr-accent{ height:4px; background:linear-gradient(90deg, var(--lu-accent), #fff); border-radius:999px; margin:16px 0; } /* ===== Footer ===== */ .footer, .footer_wrapper, footer{ background:#0b1224; color:#cbd5e1; } .footer a{ color:#e2e8f0; } /* ===== Return-to-top consistent button ===== */ #return-to-top{ background:var(--lu-accent); color:#fff; border-radius:50%; width:46px; height:46px; line-height:46px; text-align:center; box-shadow:var(--lu-shadow); right:18px; bottom:22px; } #return-to-top:hover{ transform:translateY(-2px); } /* ===== Responsive tweaks ===== */ @media (max-width:1199px){ body.lu-fixed-header .main_menu_wrapper .nav>li>a{ padding:18px 14px; } } @media (max-width:991px){ body.lu-fixed-header{ scroll-padding-top:70px; } body.lu-fixed-header .header{ background:var(--lu-bg-95); } #filters-bar, #cat-buttons, #product-filters{ top:64px; } } @media (max-width:767px){ .icon-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px; } .video-grid{ grid-template-columns:repeat(2,1fr) !important; } .ranges-grid{ grid-template-columns:1fr !important; } /* keep your own mobile nav/menu behaviour intact */ } /* ===== Visual cue for verification only (remove anytime) ===== */ body.lu-theme-check .container, body.lu-theme-check .container1, body.lu-theme-check .container2, body.lu-theme-check .container3, body.lu-theme-check .container5, body.lu-theme-check .container6, body.lu-theme-check .container7, body.lu-theme-check .container8{ border-top: 4px solid var(--lu-accent); }