/*
Theme Name: Keywise 24hr Locksmiths
Theme URI: https://www.keywise.net
Author: Keywise (with Cowork)
Description: Bespoke black + warm-gold theme for Keywise 24hr Locksmiths Southampton. Family-run, Sold Secure branding with seasonal theming hooks. Designed for fast loading, mobile-first, SEO-friendly.
Version: 3.9.5
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
License URI: https://www.keywise.net
Text Domain: keywise
Tags: locksmith, custom-colors, custom-menu, threaded-comments, sticky-post, theme-options
*/
/* =========================================================
KEYWISE LANDING v2 — full rebuild
Black + warm gold (van-matched) + clean white.
========================================================= */
:root {
/* Fixed top-bar + header heights, used to offset page content below the floating header */
--kw-topbar-h: 38px;
--kw-header-h: 78px;
--kw-top-total: calc(var(--kw-topbar-h) + var(--kw-header-h));
/* Warmed palette — surfaces and borders carry a slight warm undertone
so the gold doesn't feel like an island in cold steel. */
--bg: #0c0a08;
--bg-2: #110f0c;
--surface: #1a1714;
--surface-2: #221d18;
--surface-3: #2a241e;
--line: rgba(232,200,140,0.06);
--line-2: rgba(232,200,140,0.13);
--line-3: rgba(232,200,140,0.22);
--text: #fbf6ee;
--muted: #c4bdb1;
--muted-2: #807a72;
/* Van accent — warm gold pulled from the marketing flyer + van wrap */
--gold: #e8a020;
--gold-2: #d49018;
--gold-3: #b07810;
--gold-glow: rgba(232,160,32,0.35);
--gold-tint: rgba(232,160,32,0.08);
--gold-tint-2: rgba(232,160,32,0.16);
--danger: #ff5b5b;
--warn: #ffb347;
--good: #6ee7a7;
--whats: #25D366;
--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
--radius: 14px;
--radius-lg: 20px;
--shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
--shadow-glow: 0 0 0 1px var(--gold-glow), 0 8px 30px rgba(232,160,32,0.18);
--max: 1200px;
--max-wide: 1320px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
background: var(--bg);
color: var(--text);
line-height: 1.6;
font-size: 16px;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
padding-top: var(--kw-top-total);
}
/* When the WP admin bar is present (logged-in), it pushes everything down 32px;
the fixed topbar must sit below it. */
body.admin-bar .topbar { top: 32px; }
body.admin-bar header.site { top: calc(32px + var(--kw-topbar-h)); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold); color: #0a0a0a; }
/* =================== Top phone bar =================== */
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 51;
background: linear-gradient(90deg, var(--gold), var(--gold-2));
color: #0a0a0a;
font-weight: 700;
font-size: 13px;
padding: 9px 20px;
display: flex;
justify-content: center;
gap: 26px;
flex-wrap: wrap;
letter-spacing: 0.2px;
}
.topbar a { display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { text-decoration: underline; }
.topbar svg { width: 14px; height: 14px; }
.topbar .sep { opacity: 0.4; }
/* =================== Header =================== */
header.site {
position: fixed;
top: var(--kw-topbar-h, 38px);
left: 0;
right: 0;
z-index: 50;
backdrop-filter: blur(16px);
background: rgba(10,10,10,0.82);
border-bottom: 1px solid var(--line);
transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
animation: kw-header-in 0.5s cubic-bezier(.2,.7,.3,1);
}
header.site.scrolled {
background: rgba(10,10,10,0.96);
border-bottom-color: var(--gold-tint-2);
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
@keyframes kw-header-in {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
.nav {
max-width: var(--max-wide);
margin: 0 auto;
padding: 6px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 20px;
letter-spacing: -0.5px;
margin-right: auto;
}
@media (max-width: 600px) { .nav { padding: 8px 16px; gap: 12px; } }
/* Mobile: topbar text wraps to 2 lines on small screens; bump the variables so
the fixed bars don't overlap content. */
@media (max-width: 600px) {
:root { --kw-topbar-h: 56px; --kw-header-h: 64px; }
}
@media (max-width: 380px) {
:root { --kw-topbar-h: 72px; --kw-header-h: 60px; }
}
.brand-mark {
width: 30px; height: 56px;
display: grid; place-items: center;
flex-shrink: 0;
}
.brand-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.brand-logo {
width: 380px;
height: auto;
display: block;
transition: transform 0.25s, filter 0.3s;
filter: drop-shadow(0 0 14px rgba(232,160,32,0.35)) drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.brand:hover .brand-logo {
transform: scale(1.03);
filter: drop-shadow(0 0 26px rgba(232,160,32,0.65)) drop-shadow(0 8px 18px rgba(0,0,0,0.5)) brightness(1.08);
}
footer .brand-logo { width: 240px; }
@media (max-width: 1100px) { .brand-logo { width: 320px; } }
@media (max-width: 880px) { .brand-logo { width: 260px; } }
@media (max-width: 600px) { .brand-logo { width: 200px; } }
@media (max-width: 380px) { .brand-logo { width: 160px; } }
.brand small {
display: block;
font-size: 10px;
color: var(--muted);
font-weight: 600;
letter-spacing: 1.4px;
margin-top: 2px;
text-transform: uppercase;
}
.brand .brand-text { line-height: 1.05; }
.brand sup { font-size: 0.6em; color: var(--gold); }
nav.menu { display: flex; gap: 22px; align-items: center; font-size: 14px; font-weight: 600; color: var(--muted); }
nav.menu a { transition: color 0.18s, text-shadow 0.22s; padding: 8px 2px; position: relative; }
nav.menu a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: linear-gradient(90deg, var(--gold), #f5c849);
border-radius: 2px;
transform: scaleX(0); transform-origin: left;
transition: transform 0.32s cubic-bezier(.2,.7,.3,1);
}
nav.menu a:hover { color: var(--gold); text-shadow: 0 0 14px rgba(232,160,32,0.55); }
nav.menu a:hover::after { transform: scaleX(1); }
.header-cta { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
@media (max-width: 600px) { .header-cta .btn-ghost { display: none; } }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 12px;
font-weight: 700;
font-size: 14px;
border: 1px solid transparent;
transition: transform 0.12s, box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
white-space: nowrap;
cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--gold);
color: #0a0a0a;
box-shadow: 0 4px 16px var(--gold-glow), inset 0 0 0 0 rgba(255,255,255,0);
position: relative;
}
.btn-primary:hover { background: var(--gold-2); box-shadow: 0 8px 28px rgba(232,160,32,0.55), 0 0 0 4px rgba(232,160,32,0.18); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
background: transparent;
color: var(--text);
border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-dark {
background: #0a0a0a;
color: var(--text);
border-color: var(--line-2);
}
.btn-dark:hover { border-color: var(--gold); color: var(--gold); }
.btn svg { width: 16px; height: 16px; }
.btn-lg { padding: 16px 26px; font-size: 15px; }
.menu-toggle { display: none; background: transparent; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; color: var(--text); font-size: 18px; }
/* =================== Hero banner (image at top) + Hero text (below) =================== */
.hero-banner-section {
position: relative;
background: #0a0a0a;
overflow: hidden;
}
.hero-banner-section img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
object-position: center top;
margin: 0 auto;
}
.hero-banner-section::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 80px;
background: linear-gradient(transparent, var(--bg));
pointer-events: none;
}
.hero-quick-call {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: var(--gold);
color: #0a0a0a;
padding: 14px 28px;
border-radius: 999px;
font-weight: 800;
font-size: 16px;
box-shadow: 0 12px 30px rgba(0,0,0,0.55), 0 0 0 4px rgba(10,10,10,0.4);
display: inline-flex;
align-items: center;
gap: 10px;
z-index: 3;
transition: transform 0.18s, box-shadow 0.2s;
}
.hero-quick-call:hover { transform: translateX(-50%) translateY(-2px); }
.hero-quick-call svg { width: 20px; height: 20px; }
.hero-text-section {
position: relative;
padding: 70px 24px 90px;
overflow: hidden;
background:
radial-gradient(circle at 88% 12%, rgba(232,160,32,0.10), transparent 45%),
radial-gradient(circle at 6% 88%, rgba(232,160,32,0.06), transparent 45%),
var(--bg);
}
.hero-text-inner {
max-width: var(--max-wide);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: center;
}
.hero-content {
max-width: 720px;
}
.hero-side {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid var(--gold-tint-2);
}
.hero-side-photo {
display: block;
position: relative;
aspect-ratio: 4/5;
background: var(--surface);
overflow: hidden;
}
.hero-side-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.55s;
display: block;
}
.hero-side-photo:hover img { transform: scale(1.05); }
.hero-side-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 28px 22px 22px;
background: linear-gradient(transparent, rgba(10,10,10,0.92) 35%, rgba(10,10,10,0.97));
color: #fff;
}
.hero-side-overlay h3 { font-size: 17px; margin-bottom: 6px; line-height: 1.25; letter-spacing: -0.3px; }
.hero-side-overlay p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.hero-side-stamp {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--gold);
color: #0a0a0a;
padding: 7px 13px;
border-radius: 8px;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.3px;
margin-bottom: 14px;
font-family: var(--mono);
}
.hero-side-stamp svg { width: 14px; height: 14px; }
.hero-side h3 { font-size: 18px; line-height: 1.25; margin-bottom: 8px; letter-spacing: -0.4px; }
.hero-side p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.hero-side cite { font-family: var(--mono); font-size: 12px; color: var(--gold); font-style: normal; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 12px;
color: var(--gold);
background: var(--gold-tint);
border: 1px solid var(--gold-tint-2);
padding: 7px 13px;
border-radius: 999px;
margin-bottom: 24px;
letter-spacing: 0.3px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: 0.45; transform: scale(0.85);} }
/* ===== Icon animations ===== */
@keyframes kw-glow-pulse {
0%, 100% { box-shadow: 0 8px 22px var(--gold-glow), 0 0 0 0 rgba(232,160,32,0); }
50% { box-shadow: 0 8px 28px var(--gold-glow), 0 0 0 8px rgba(232,160,32,0.10); }
}
@keyframes kw-wiggle {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-8deg); }
40% { transform: rotate(7deg); }
60% { transform: rotate(-4deg); }
80% { transform: rotate(3deg); }
}
@keyframes kw-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes kw-ring {
0%, 100% { transform: rotate(0deg); }
10% { transform: rotate(-15deg); }
20% { transform: rotate(12deg); }
30% { transform: rotate(-10deg); }
40% { transform: rotate(8deg); }
50% { transform: rotate(-4deg); }
60% { transform: rotate(0deg); }
}
@keyframes kw-glow-soft {
0%, 100% { filter: drop-shadow(0 0 0 transparent); }
50% { filter: drop-shadow(0 0 6px rgba(232,160,32,0.55)); }
}
@keyframes kw-shimmer {
0% { background-position: -200% 50%; }
100% { background-position: 200% 50%; }
}
/* Category icons — continuous gentle pulse-glow */
.svc-cat-icon { animation: kw-glow-pulse 3.4s ease-in-out infinite; }
.svc-cat-icon:hover { animation-duration: 1.4s; }
.svc-cat-icon svg { transition: transform 0.25s; }
.svc-cat-icon:hover svg { animation: kw-wiggle 0.7s ease-in-out; }
/* Service card icons — gentle bob, scale + glow on card hover */
.service-icon {
animation: kw-bob 4.2s ease-in-out infinite;
transition: transform 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
}
.service-icon svg { transition: transform 0.25s; }
.service-card:hover .service-icon {
background: var(--gold);
color: #0a0a0a;
border-color: var(--gold);
transform: scale(1.06);
animation-play-state: paused;
}
.service-card:hover .service-icon svg { animation: kw-wiggle 0.6s ease-in-out; }
/* Stagger the bob across cards in a row */
.services-grid .service-card:nth-child(1) .service-icon { animation-delay: 0s; }
.services-grid .service-card:nth-child(2) .service-icon { animation-delay: 0.4s; }
.services-grid .service-card:nth-child(3) .service-icon { animation-delay: 0.8s; }
.services-grid .service-card:nth-child(4) .service-icon { animation-delay: 1.2s; }
.services-grid .service-card:nth-child(5) .service-icon { animation-delay: 1.6s; }
.services-grid .service-card:nth-child(6) .service-icon { animation-delay: 2.0s; }
/* Trust strip icons */
.trust-cell .icon { transition: transform 0.2s, background 0.2s, color 0.2s; }
.trust-cell:hover .icon { background: var(--gold); color: #0a0a0a; transform: scale(1.06); }
.trust-cell:hover .icon svg { animation: kw-wiggle 0.7s ease-in-out; }
/* Brand-mark: gentle continuous breathing glow */
.brand-mark { animation: kw-glow-soft 3.6s ease-in-out infinite; }
.brand:hover .brand-mark svg { animation: kw-wiggle 0.7s ease-in-out; }
/* Hero quick-call button — shimmer + ringing-phone icon */
.hero-quick-call {
background-image: linear-gradient(90deg, var(--gold), #f5c849, var(--gold));
background-size: 200% 100%;
animation: kw-shimmer 4s linear infinite;
}
/* Branding strip — small photo thumbnails between trust strip and services */
.brand-strip {
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
border-bottom: 1px solid var(--line);
padding: 30px 24px 36px;
}
.brand-strip-inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.brand-thumb {
position: relative;
display: block;
aspect-ratio: 4/3;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--gold-tint-2);
transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.brand-thumb:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 28px rgba(232,160,32,0.25); }
.brand-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.brand-thumb:hover img { transform: scale(1.06); }
.brand-thumb span {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(10,10,10,0.92));
color: var(--gold);
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 22px 12px 10px;
text-align: center;
font-weight: 700;
}
@media (max-width: 760px) { .brand-strip-inner { grid-template-columns: repeat(2, 1fr); } }
/* Hero CTA stack — Call pill + social row attached as one floating module */
.hero-cta-stack {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
background: rgba(10,10,10,0.78);
backdrop-filter: blur(12px);
border: 1px solid var(--gold-tint-2);
border-radius: 22px;
padding: 16px 22px 14px;
box-shadow: 0 16px 38px rgba(0,0,0,0.55);
max-width: calc(100% - 32px);
}
.hero-cta-stack .hero-quick-call {
position: static;
transform: none;
box-shadow: 0 6px 18px rgba(232,160,32,0.4);
}
.hero-cta-stack .hero-quick-call:hover { transform: translateY(-2px); }
.hero-socials-inline {
display: flex;
align-items: center;
gap: 12px;
}
.hero-socials-inline-label {
font-family: var(--mono);
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1.2px;
margin-right: 4px;
}
.hero-socials-inline .socials { gap: 8px; }
.hero-socials-inline .socials a {
width: 38px; height: 38px;
border-radius: 10px;
}
.hero-socials-inline .socials a svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
.hero-cta-stack { padding: 12px 16px 10px; gap: 10px; bottom: 18px; }
.hero-cta-stack .hero-quick-call { padding: 11px 18px; font-size: 14px; }
.hero-socials-inline-label { display: none; }
.hero-socials-inline .socials a { width: 34px; height: 34px; }
}
.hero-quick-call svg { animation: kw-ring 2.6s ease-in-out infinite; transform-origin: 50% 30%; }
/* Topbar phone icons */
.topbar svg { transition: transform 0.2s; }
.topbar a:hover svg { animation: kw-ring 0.9s ease-in-out; }
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.svc-cat-icon, .service-icon, .brand-mark, .hero-quick-call, .hero-quick-call svg, .topbar svg {
animation: none !important;
}
}
/* Scroll-reveal — fade in + slide up as element enters viewport */
.kw-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
will-change: opacity, transform;
}
.kw-revealed { opacity: 1; transform: translateY(0); }
.services-grid .service-card.kw-revealed:nth-child(2) { transition-delay: 0.06s; }
.services-grid .service-card.kw-revealed:nth-child(3) { transition-delay: 0.12s; }
.services-grid .service-card.kw-revealed:nth-child(4) { transition-delay: 0.18s; }
.services-grid .service-card.kw-revealed:nth-child(5) { transition-delay: 0.24s; }
.services-grid .service-card.kw-revealed:nth-child(6) { transition-delay: 0.30s; }
@media (prefers-reduced-motion: reduce) {
.kw-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* On the job — real action photo strip */
.onjob {
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 80px 24px;
}
.onjob-inner { max-width: var(--max); margin: 0 auto; }
.onjob-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 32px;
}
.onjob-tile {
position: relative;
aspect-ratio: 3/4;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--gold-tint-2);
box-shadow: 0 8px 22px rgba(0,0,0,0.45);
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.onjob-tile:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 16px 30px rgba(232,160,32,0.25); }
.onjob-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s; display: block; }
.onjob-tile:hover img { transform: scale(1.06); }
.onjob-tile span {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 28px 14px 12px;
background: linear-gradient(transparent, rgba(10,10,10,0.95));
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.onjob-tile span small { display: block; font-family: var(--mono); font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; font-weight: 600; }
@media (max-width: 980px) { .onjob-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .onjob-grid { grid-template-columns: 1fr; } .onjob-tile { aspect-ratio: 4/5; } }
/* Decorative side photo on section heads */
.onjob-head { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 36px; align-items: center; }
.head-photo {
aspect-ratio: 4/3;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--gold-tint-2);
box-shadow: var(--shadow-soft);
transition: transform 0.3s, box-shadow 0.3s;
}
.head-photo:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(232,160,32,0.2); }
.head-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s; display: block; }
.head-photo:hover img { transform: scale(1.05); }
@media (max-width: 760px) { .onjob-head { grid-template-columns: 1fr; } .head-photo { display: none; } }
h1.hero-title {
font-size: clamp(40px, 6.4vw, 76px);
line-height: 1.02;
font-weight: 900;
letter-spacing: -2px;
margin-bottom: 22px;
}
h1.hero-title .lime { color: var(--gold); }
h1.hero-title .underline {
background-image: linear-gradient(transparent 78%, var(--gold-tint-2) 78%);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0 6px;
}
.hero p.lead {
font-size: 19px;
color: var(--muted);
max-width: 560px;
margin-bottom: 32px;
line-height: 1.55;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.trust-row {
display: flex;
flex-wrap: wrap;
gap: 22px 28px;
font-size: 13px;
color: var(--muted);
}
.trust-row > div { display: flex; align-items: center; gap: 8px; }
.trust-row svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
.hero-visual {
position: relative;
width: 100%;
margin-left: auto;
max-width: 640px;
}
.hero-banner {
display: block;
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 0 0 1px var(--gold-tint-2);
position: relative;
transition: transform 0.25s, box-shadow 0.25s;
background: var(--surface);
aspect-ratio: 3 / 2;
}
.hero-banner:hover {
transform: translateY(-2px);
box-shadow: 0 36px 72px rgba(0,0,0,0.6), 0 0 0 1px var(--gold);
}
.hero-banner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-fallback {
width: 100%; height: 100%;
background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
display: grid; place-items: center;
color: var(--muted-2);
font-family: var(--mono);
font-size: 12px;
text-align: center;
padding: 24px;
line-height: 1.6;
}
.hero-fallback .owl-display { width: 38%; max-width: 160px; opacity: 0.85; }
.hero-floater {
display: inline-flex;
background: rgba(10,10,10,0.85);
backdrop-filter: blur(8px);
border: 1px solid var(--gold-tint-2);
padding: 9px 16px;
border-radius: 999px;
font-size: 12px;
font-family: var(--mono);
color: var(--gold);
align-items: center;
gap: 8px;
font-weight: 600;
margin-bottom: 18px;
}
.hero-floater .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: pulse 1.6s infinite; }
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--line);
max-width: 540px;
}
.hero-stat .num { font-family: var(--mono); font-size: 24px; font-weight: 800; color: var(--gold); letter-spacing: -0.5px; line-height: 1; }
.hero-stat .lbl { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* =================== Trust strip =================== */
.trust-strip {
background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
border-top: 1px solid var(--gold-tint-2);
border-bottom: 1px solid var(--gold-tint-2);
padding: 36px 24px;
}
.trust-strip-inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.trust-cell { display: flex; align-items: center; gap: 16px; }
.trust-cell .icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--gold-tint);
border: 1px solid var(--gold-tint-2);
display: grid; place-items: center;
color: var(--gold);
flex-shrink: 0;
}
.trust-cell .icon svg { width: 26px; height: 26px; }
.trust-cell .icon { width: 56px; height: 56px; border-radius: 14px; }
.trust-cell strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.2; margin-bottom: 3px; color: var(--text); }
.trust-cell small { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; font-weight: 500; }
/* =================== Section base =================== */
section.block { padding: 100px 24px; position: relative; }
.block-inner { max-width: var(--max); margin: 0 auto; }
.block-inner.wide { max-width: var(--max-wide); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.section-head .left { max-width: 660px; }
.section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 12px;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 14px;
}
.section-tag::before {
content: "";
width: 22px; height: 1px;
background: var(--gold);
}
h2.section-title {
font-size: clamp(30px, 4.4vw, 48px);
font-weight: 800;
letter-spacing: -1.2px;
line-height: 1.05;
margin-bottom: 14px;
}
.section-sub { color: var(--muted); font-size: 16px; max-width: 580px; line-height: 1.6; }
/* =================== Services =================== */
.service-cats {
display: flex;
gap: 8px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.svc-cat {
background: var(--surface);
border: 1px solid var(--line);
color: var(--muted);
padding: 9px 16px;
border-radius: 99px;
font-size: 13px;
font-weight: 600;
transition: all 0.15s;
}
.svc-cat.active, .svc-cat:hover {
background: var(--gold-tint);
border-color: var(--gold-tint-2);
color: var(--gold);
}
.svc-category { margin-bottom: 56px; }
.svc-category:last-child { margin-bottom: 0; }
.svc-cat-head {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px dashed var(--gold-tint-2);
}
.svc-cat-icon {
width: 56px; height: 56px;
flex-shrink: 0;
border-radius: 14px;
background: var(--gold);
color: #0a0a0a;
display: grid; place-items: center;
box-shadow: 0 8px 22px var(--gold-glow);
}
.svc-cat-icon svg { width: 28px; height: 28px; }
.svc-cat-text { flex: 1; }
.svc-cat-text h3 {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.4px;
margin-bottom: 4px;
}
.svc-cat-text h3 small {
display: inline-block;
font-family: var(--mono);
font-size: 11px;
color: var(--gold);
background: var(--gold-tint);
border: 1px solid var(--gold-tint-2);
padding: 3px 8px;
border-radius: 5px;
margin-left: 10px;
font-weight: 600;
vertical-align: 3px;
letter-spacing: 0.4px;
}
.svc-cat-text p {
font-size: 14.5px;
color: var(--muted);
line-height: 1.6;
max-width: 720px;
}
.top-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 36px;
}
.top-svc {
background: linear-gradient(160deg, var(--surface), var(--bg));
border: 1px solid var(--gold-tint-2);
border-radius: var(--radius-lg);
padding: 32px 28px;
position: relative;
overflow: hidden;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.25s;
}
.top-svc:hover {
transform: translateY(-4px);
border-color: var(--gold);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.top-svc::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 220px; height: 220px;
background: radial-gradient(circle, var(--gold-tint), transparent 60%);
opacity: 0.5;
pointer-events: none;
}
.top-svc-icon {
width: 60px; height: 60px;
border-radius: 14px;
background: var(--gold);
color: #0a0a0a;
display: grid; place-items: center;
margin-bottom: 18px;
box-shadow: 0 8px 22px var(--gold-glow);
position: relative;
z-index: 1;
}
.top-svc-icon svg { width: 30px; height: 30px; }
.top-svc h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.5px; position: relative; z-index: 1; }
.top-svc p { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; line-height: 1.6; position: relative; z-index: 1; }
.top-svc .top-svc-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gold);
font-weight: 700;
font-size: 13px;
font-family: var(--mono);
position: relative;
z-index: 1;
transition: gap 0.2s;
}
.top-svc:hover .top-svc-link { gap: 10px; }
.top-svc-tag {
position: absolute;
top: 18px; right: 18px;
background: var(--gold);
color: #0a0a0a;
font-size: 10px;
font-family: var(--mono);
padding: 4px 9px;
border-radius: 5px;
font-weight: 700;
letter-spacing: 0.5px;
z-index: 1;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.service-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 26px;
transition: transform 0.2s, border-color 0.2s, background 0.2s;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 200px;
}
.service-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, var(--gold-tint), transparent 60%);
opacity: 0;
transition: opacity 0.25s;
pointer-events: none;
}
.service-card:hover { transform: translateY(-3px); border-color: var(--gold-tint-2); }
.service-card:hover::after { opacity: 1; }
.service-card[data-cat] { display: none; }
.service-card[data-cat].show { display: flex; }
.service-icon {
width: 52px; height: 52px;
border-radius: 12px;
background: var(--gold-tint);
display: grid; place-items: center;
color: var(--gold);
margin-bottom: 18px;
border: 1px solid var(--gold-tint-2);
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 7px; letter-spacing: -0.2px; }
.service-card p { font-size: 14px; color: var(--muted); flex: 1; line-height: 1.6; }
.service-card .badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--gold);
background: var(--gold-tint);
border: 1px solid var(--gold-tint-2);
padding: 3px 8px;
border-radius: 5px;
margin-top: 12px;
align-self: flex-start;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* =================== How it works =================== */
.how-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
position: relative;
}
.how-step {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
position: relative;
}
.how-num {
font-family: var(--mono);
font-size: 14px;
color: var(--gold);
background: var(--gold-tint);
border: 1px solid var(--gold-tint-2);
width: 36px; height: 36px;
border-radius: 50%;
display: grid; place-items: center;
font-weight: 700;
margin-bottom: 18px;
}
.how-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.3px; }
.how-step p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.how-step .icon {
position: absolute;
top: 24px; right: 24px;
color: var(--gold-tint-2);
}
.how-step .icon svg { width: 36px; height: 36px; }
/* =================== Community / Bugsy section =================== */
.community {
background: linear-gradient(180deg, #0a0a0a, #131313);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.community-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 56px;
align-items: center;
}
.community-photo {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/5;
background: var(--surface);
border: 1px solid var(--line);
}
.community-photo img { width: 100%; height: 100%; object-fit: cover; }
.award-stamp {
position: absolute;
top: 18px; left: 18px;
background: rgba(10,10,10,0.92);
backdrop-filter: blur(8px);
border: 1px solid var(--gold-tint-2);
border-radius: 12px;
padding: 10px 14px;
font-size: 12px;
color: var(--gold);
font-family: var(--mono);
letter-spacing: 0.5px;
display: flex; align-items: center; gap: 8px;
z-index: 2;
}
.award-stamp svg { width: 16px; height: 16px; }
.pull-quote {
border-left: 3px solid var(--gold);
padding: 8px 0 8px 22px;
margin: 28px 0;
font-size: 20px;
font-style: italic;
line-height: 1.5;
color: #ececec;
letter-spacing: -0.2px;
}
.pull-quote cite { display: block; font-size: 13px; font-style: normal; color: var(--muted); margin-top: 12px; font-family: var(--mono); }
.impact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 28px;
}
.impact-cell {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
}
.impact-cell .num {
color: var(--gold);
font-weight: 800;
font-size: 28px;
letter-spacing: -0.5px;
line-height: 1;
margin-bottom: 6px;
font-family: var(--mono);
}
.impact-cell .label { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* =================== Gallery =================== */
.gallery-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 240px 240px;
gap: 12px;
}
.gallery-item {
border-radius: var(--radius);
overflow: hidden;
position: relative;
background: var(--surface);
border: 1px solid var(--line);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item:nth-child(1) { grid-row: span 2; }
.gallery-item .caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.92));
padding: 32px 18px 16px;
font-size: 13px;
color: #fff;
font-weight: 600;
}
/* =================== Coverage =================== */
.coverage-area {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 44px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 44px;
align-items: center;
}
.area-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 14px;
margin-top: 22px;
}
.area-list span {
display: flex; align-items: center; gap: 8px;
font-size: 14px;
color: var(--text);
}
.area-list span::before {
content: "";
width: 6px; height: 6px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 6px var(--gold);
}
.area-map {
aspect-ratio: 1/1;
background:
radial-gradient(circle at 60% 40%, var(--gold-tint), transparent 40%),
radial-gradient(circle at 30% 60%, rgba(232,160,32,0.05), transparent 50%),
var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
position: relative;
overflow: hidden;
}
.area-map .pin {
position: absolute;
width: 14px; height: 14px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(232,160,32,0.18), 0 0 10px var(--gold);
}
.area-map .pin::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--gold);
animation: ripple 2.4s ease-out infinite;
}
.area-map .pin.main {
width: 18px; height: 18px;
}
@keyframes ripple {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(5); opacity: 0; }
}
/* =================== Reviews =================== */
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.review {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 26px;
position: relative;
}
.review::before {
content: "\201C";
position: absolute;
top: 6px; right: 18px;
font-size: 70px;
line-height: 1;
color: var(--gold-tint-2);
font-family: serif;
}
.review .stars {
color: var(--gold);
margin-bottom: 14px;
letter-spacing: 2px;
font-size: 16px;
}
.review p { font-size: 14.5px; color: #ddd; line-height: 1.65; margin-bottom: 18px; position: relative; z-index: 1; }
.review .author { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.review .author b { color: var(--text); font-family: var(--sans); font-size: 13px; }
.reviews-foot {
text-align: center;
margin-top: 32px;
color: var(--muted);
font-size: 14px;
}
.reviews-foot a { color: var(--gold); }
/* =================== FAQ =================== */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: border-color 0.15s;
}
.faq-item[open] { border-color: var(--gold-tint-2); }
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 20px 24px;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: color 0.15s;
}
.faq-item summary:hover { color: var(--gold); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
color: var(--gold);
font-size: 24px;
font-weight: 400;
transition: transform 0.2s;
flex-shrink: 0;
line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-body {
padding: 0 24px 22px;
font-size: 14.5px;
color: var(--muted);
line-height: 1.7;
}
/* =================== Contact =================== */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: stretch;
}
.contact-info {
background: linear-gradient(135deg, var(--gold), var(--gold-2));
border-radius: var(--radius-lg);
padding: 44px;
color: #0a0a0a;
position: relative;
overflow: hidden;
}
.contact-info::before {
content: "";
position: absolute;
top: -50px; right: -50px;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
pointer-events: none;
}
.contact-info h3 { font-size: 30px; letter-spacing: -0.8px; margin-bottom: 8px; font-weight: 800; position: relative; }
.contact-info p.intro { font-size: 14.5px; color: rgba(10,10,10,0.72); margin-bottom: 28px; max-width: 400px; position: relative; }
.contact-row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 0;
border-top: 1px solid rgba(10,10,10,0.15);
position: relative;
}
.contact-row:last-child { border-bottom: 1px solid rgba(10,10,10,0.15); }
.contact-row .icon {
width: 42px; height: 42px;
background: #0a0a0a;
color: var(--gold);
border-radius: 11px;
display: grid; place-items: center;
flex-shrink: 0;
}
.contact-row .icon svg { width: 18px; height: 18px; }
.contact-row .text { font-size: 14px; }
.contact-row .text small { display: block; font-weight: 500; opacity: 0.75; }
.contact-row .text strong { display: block; font-weight: 800; font-size: 17px; }
.contact-row a { color: #0a0a0a; }
.contact-row a:hover { text-decoration: underline; }
.contact-form {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 38px;
}
.contact-form h3 { font-size: 24px; letter-spacing: -0.5px; margin-bottom: 6px; font-weight: 700; }
.contact-form .lead-sm { font-size: 14px; color: var(--muted); margin-bottom: 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.5px; }
.field input, .field select, .field textarea {
width: 100%;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 12px 14px;
color: var(--text);
font-family: var(--sans);
font-size: 14px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-tint);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
textarea { resize: vertical; min-height: 100px; font-family: var(--sans); }
/* =================== Footer =================== */
footer.site {
background: #060606;
border-top: 1px solid var(--line);
padding: 70px 24px 30px;
}
.footer-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 36px;
margin-bottom: 40px;
}
.footer-grid h4 { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-family: var(--mono); }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { font-size: 14px; color: var(--muted); transition: color 0.15s; }
.footer-grid a:hover { color: var(--gold); }
.footer-bottom {
max-width: var(--max);
margin: 0 auto;
border-top: 1px solid var(--line);
padding-top: 26px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
color: var(--muted-2);
}
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.socials a {
width: 46px; height: 46px;
border-radius: 12px;
display: grid; place-items: center;
color: #fff;
transition: transform 0.18s, box-shadow 0.22s, filter 0.18s;
box-shadow: 0 4px 14px rgba(0,0,0,0.35);
position: relative;
overflow: hidden;
}
.socials a:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,0.5); filter: brightness(1.12); }
.socials a:active { transform: translateY(-1px) scale(1.0); }
.socials a svg { width: 22px; height: 22px; position: relative; z-index: 1; }
/* Per-platform brand colours */
.socials a[aria-label*="Facebook"] { background: #1877F2; }
.socials a[aria-label*="X"] { background: #000; border: 1px solid rgba(255,255,255,0.18); }
.socials a[aria-label*="Instagram"] {
background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.socials a[aria-label*="TikTok"] {
background: #000;
border: 1px solid rgba(255,255,255,0.18);
}
.socials a[aria-label*="TikTok"]::before,
.socials a[aria-label*="TikTok"]::after {
content: ""; position: absolute; inset: 0;
width: 22px; height: 22px;
margin: auto;
background: url("data:image/svg+xml;utf8,") no-repeat center/22px;
transform: translate(-2px, -1px);
opacity: 0.85;
}
.socials a[aria-label*="TikTok"]::after {
background-image: url("data:image/svg+xml;utf8,");
transform: translate(2px, 1px);
opacity: 0.85;
}
.socials a[aria-label*="TikTok"] svg { z-index: 2; }
.socials a[aria-label*="YouTube"] { background: #FF0000; }
.socials a[aria-label*="Discord"] { background: #5865F2; }
/* =================== Floating action island (bottom-right) ===================
One cohesive glass panel: socials row on top, Call + WhatsApp beneath.
Anchored bottom-right, follows scroll, refined entrance + micro-interactions. */
.floating-cta {
position: fixed;
bottom: 26px; right: 26px;
z-index: 60;
display: flex;
flex-direction: column;
gap: 10px;
align-items: stretch;
width: 232px;
padding: 12px;
border-radius: 22px;
background: linear-gradient(155deg, rgba(20,17,13,0.92), rgba(12,10,8,0.88));
backdrop-filter: blur(18px) saturate(1.1);
-webkit-backdrop-filter: blur(18px) saturate(1.1);
border: 1px solid var(--line-3);
box-shadow:
0 20px 50px rgba(0,0,0,0.55),
0 0 0 1px rgba(232,160,32,0.06),
inset 0 1px 0 rgba(255,255,255,0.05);
animation: kw-island-in 0.7s cubic-bezier(.16,.84,.34,1) 0.9s both;
}
@keyframes kw-island-in {
from { opacity: 0; transform: translateY(24px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 760px) {
.floating-cta { bottom: 14px; right: 14px; }
}
.fab {
background: linear-gradient(135deg, var(--gold), var(--gold-2));
color: #1a1206;
border-radius: 13px;
padding: 13px 18px;
font-weight: 800;
font-size: 14px;
letter-spacing: -0.1px;
box-shadow: 0 6px 18px rgba(232,160,32,0.32);
display: flex; align-items: center; justify-content: center; gap: 9px;
transition: transform 0.2s cubic-bezier(.16,.84,.34,1), box-shadow 0.2s, filter 0.2s;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232,160,32,0.45); filter: brightness(1.04); }
.fab:active { transform: translateY(0) scale(0.98); }
.fab.whatsapp {
background: linear-gradient(135deg, #2bdd6e, #1bbd57);
color: #fff;
box-shadow: 0 6px 18px rgba(37,211,102,0.35);
position: relative;
}
.fab.whatsapp:hover { box-shadow: 0 10px 26px rgba(37,211,102,0.5); }
/* Gentle pulse ring on WhatsApp to draw the eye, once settled */
.fab.whatsapp::after {
content: '';
position: absolute; inset: 0;
border-radius: 13px;
border: 2px solid #25D366;
opacity: 0;
animation: kw-wa-pulse 3.2s ease-out 2s infinite;
pointer-events: none;
}
@keyframes kw-wa-pulse {
0% { opacity: 0.7; transform: scale(1); }
70% { opacity: 0; transform: scale(1.12); }
100% { opacity: 0; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
.floating-cta { animation: none; }
.fab.whatsapp::after { animation: none; }
}
/* Socials row — sits at the top of the island, evenly spread */
.floating-socials {
display: flex;
justify-content: space-between;
gap: 4px;
padding: 2px 2px 4px;
}
.floating-socials a {
width: 30px; height: 30px;
border-radius: 9px;
display: grid; place-items: center;
color: #fff;
transition: transform 0.18s cubic-bezier(.16,.84,.34,1), filter 0.18s, box-shadow 0.18s;
position: relative;
overflow: hidden;
}
.floating-socials a:hover { transform: translateY(-3px); filter: brightness(1.12); box-shadow: 0 6px 14px rgba(0,0,0,0.4); }
.floating-socials a svg { width: 15px; height: 15px; position: relative; z-index: 1; }
.floating-socials a[aria-label*="Facebook"] { background: #1877F2; }
.floating-socials a[aria-label*="X"] { background: #111; }
.floating-socials a[aria-label*="Instagram"] { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.floating-socials a[aria-label*="TikTok"] { background: #111; }
.floating-socials a[aria-label*="YouTube"] { background: #FF0000; }
.floating-socials a[aria-label*="Discord"] { background: #5865F2; }
@media (max-width: 600px) {
.floating-cta { width: 208px; padding: 10px; }
.floating-socials a { width: 27px; height: 27px; }
.floating-socials a svg { width: 13px; height: 13px; }
.fab { padding: 12px 16px; font-size: 13px; }
}
.skip-link { position: absolute; top: -40px; left: 0; background: var(--gold); color: #0a0a0a; padding: 8px 16px; z-index: 100; }
.skip-link:focus { top: 0; }
/* =================== Responsive =================== */
@media (max-width: 980px) {
.community-grid, .contact-grid, .coverage-area { grid-template-columns: 1fr; gap: 36px; }
.hero { background-position: 65% center; min-height: 560px; padding: 60px 24px 100px; }
.hero-content { max-width: 100%; }
.hero-award-pill { display: none; }
.hero-floater { top: 14px; right: 14px; padding: 8px 14px; font-size: 11px; }
.services-grid, .reviews-grid, .how-grid, .top-services { grid-template-columns: repeat(2, 1fr); }
.trust-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; }
.gallery-item:nth-child(1) { grid-row: span 1; grid-column: span 2; }
nav.menu { display: none; }
.menu-toggle { display: inline-flex; }
section.block { padding: 70px 24px; }
.hero { padding: 50px 24px 80px; }
.hero-floater { right: 12px; }
}
@media (max-width: 600px) {
.services-grid, .reviews-grid, .how-grid, .top-services { grid-template-columns: 1fr; }
.trust-strip-inner { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.impact-grid, .hero-stats { grid-template-columns: 1fr 1fr; }
.field-row { grid-template-columns: 1fr; }
.topbar { font-size: 12px; gap: 14px; }
.topbar .sep { display: none; }
.floating-cta { bottom: 14px; right: 14px; }
.fab { padding: 12px 18px; font-size: 13px; }
.contact-info, .contact-form, .coverage-area { padding: 28px; }
.ai-body { padding: 22px; }
.ai-tip .body h4 { font-size: 19px; }
.pull-quote { font-size: 17px; }
.header-cta .btn { display: none; }
.header-cta .menu-toggle { display: inline-flex; }
}/* ==================================================================
* BLOG STYLES — v1.3 (June 2026)
* Single + index pages for posts. Brand-consistent, mobile-first.
* ================================================================== */
/* ---------- Blog index hero ---------- */
.kw-blog-hero { padding: 60px 24px 30px; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-bottom: 1px solid var(--gold-tint-2); }
.kw-blog-title { margin-bottom: 14px; }
/* ---------- Blog index card grid ---------- */
.kw-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
gap: 22px;
padding: 12px 0 30px;
}
.kw-blog-card {
background: var(--surface);
border: 1px solid var(--gold-tint-2);
border-radius: 14px;
overflow: hidden;
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.kw-blog-card:hover {
transform: translateY(-3px);
border-color: var(--gold);
box-shadow: 0 6px 24px rgba(232,160,32,0.12);
}
.kw-blog-card-link { display: block; color: inherit; text-decoration: none; }
.kw-blog-card-img {
aspect-ratio: 16 / 10;
background: var(--bg);
overflow: hidden;
position: relative;
}
.kw-blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.kw-blog-card:hover .kw-blog-card-img img { transform: scale(1.04); }
.kw-blog-card-img--placeholder {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--surface), var(--surface-2));
color: var(--gold);
opacity: 0.55;
}
.kw-blog-card-img--placeholder svg { width: 64px; height: 64px; }
.kw-blog-card-cat {
position: absolute;
top: 12px; left: 12px;
background: rgba(10, 10, 10, 0.85);
color: var(--gold);
font-size: 10.5px;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px 10px;
border-radius: 99px;
border: 1px solid var(--gold-tint-2);
}
.kw-blog-card-body { padding: 18px 20px 22px; }
.kw-blog-card-date { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.kw-blog-card-title {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.3px;
line-height: 1.3;
margin: 8px 0 10px;
color: var(--text);
}
.kw-blog-card-excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; }
.kw-blog-card-more {
display: inline-block;
font-size: 12.5px;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.3px;
background-image: linear-gradient(var(--gold), var(--gold));
background-repeat: no-repeat;
background-size: 0% 1px;
background-position: 0 100%;
transition: background-size 0.3s ease;
}
.kw-blog-card:hover .kw-blog-card-more { background-size: 100% 1px; }
/* ---------- Pagination ---------- */
.kw-blog-pagination { padding: 18px 0 8px; }
.kw-blog-pagination .nav-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.kw-blog-pagination .page-numbers {
padding: 7px 14px;
border: 1px solid var(--gold-tint-2);
border-radius: 8px;
font-size: 13px;
color: var(--muted);
text-decoration: none;
transition: all 0.18s;
}
.kw-blog-pagination .page-numbers:hover,
.kw-blog-pagination .page-numbers.current {
border-color: var(--gold);
background: var(--gold-tint);
color: var(--gold);
}
.kw-blog-pagination .page-numbers.current { font-weight: 700; }
/* ---------- Empty state ---------- */
.kw-blog-empty { padding: 50px 30px; text-align: center; color: var(--muted); border: 1px dashed var(--gold-tint-2); border-radius: 14px; }
/* ==================================================================
* SINGLE POST — article layout
* ================================================================== */
.kw-article-hero { padding: 60px 24px 24px; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-bottom: 1px solid var(--gold-tint-2); }
.kw-post-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.kw-post-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.kw-post-cat {
display: inline-block;
padding: 3px 10px;
background: var(--gold-tint);
color: var(--gold);
border: 1px solid var(--gold-tint-2);
border-radius: 99px;
text-decoration: none;
font-size: 10.5px;
font-weight: 600;
transition: background 0.18s;
}
.kw-post-cat:hover { background: var(--gold); color: #0a0a0a; }
.kw-post-date { color: var(--muted); }
.kw-article-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 900;
letter-spacing: -0.8px;
line-height: 1.15;
color: var(--text);
margin-bottom: 16px;
}
.kw-article-lede {
font-size: 17px;
color: var(--muted);
line-height: 1.55;
max-width: 680px;
margin: 0;
}
/* Featured image */
.kw-article-feature { padding: 0 24px 30px; }
.kw-feature-image {
border-radius: 14px;
overflow: hidden;
aspect-ratio: 16 / 9;
border: 1px solid var(--gold-tint-2);
}
.kw-feature-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Article body — generous reading */
.kw-article-body {
font-size: 16.5px;
line-height: 1.75;
color: var(--text);
}
.kw-article-body p { margin: 0 0 18px; }
.kw-article-body h2 {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.4px;
margin: 38px 0 14px;
color: var(--text);
}
.kw-article-body h3 {
font-size: 19px;
font-weight: 700;
margin: 28px 0 10px;
}
.kw-article-body ul,
.kw-article-body ol { margin: 0 0 20px; padding-left: 24px; }
.kw-article-body li { margin-bottom: 8px; }
.kw-article-body a {
color: var(--gold);
text-decoration: underline;
text-underline-offset: 3px;
}
.kw-article-body strong { color: var(--text); font-weight: 700; }
.kw-article-body em { color: var(--muted); }
.kw-article-body blockquote {
margin: 24px 0;
padding: 14px 22px;
border-left: 3px solid var(--gold);
background: var(--gold-tint);
border-radius: 0 10px 10px 0;
font-style: italic;
color: var(--text);
}
.kw-article-body img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 20px 0;
}
.kw-article-body code {
background: var(--surface-2);
padding: 2px 7px;
border-radius: 4px;
font-size: 13.5px;
font-family: var(--mono);
}
/* Tags strip */
.kw-post-tags {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin: 30px 0;
padding: 16px 0;
border-top: 1px solid var(--gold-tint-2);
border-bottom: 1px solid var(--gold-tint-2);
}
.kw-tag-label {
font-family: var(--mono);
font-size: 10.5px;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 1px;
margin-right: 4px;
}
.kw-tag {
font-size: 12px;
padding: 4px 12px;
background: var(--surface-2);
border: 1px solid var(--gold-tint-2);
border-radius: 99px;
color: var(--muted);
text-decoration: none;
transition: all 0.18s;
}
.kw-tag:hover { color: var(--gold); border-color: var(--gold); }
/* Author card */
.kw-author-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
padding: 20px;
margin: 30px 0;
background: var(--surface);
border: 1px solid var(--gold-tint-2);
border-radius: 14px;
}
.kw-author-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); }
.kw-author-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kw-author-name { font-size: 14px; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.kw-author-bio { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }
/* Article CTA card */
.kw-article-cta {
margin: 36px 0 24px;
padding: 26px 28px;
background: linear-gradient(135deg, var(--gold), #f5c849);
color: #0a0a0a;
border-radius: 16px;
text-align: center;
}
.kw-article-cta h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; margin: 0 0 6px; color: #0a0a0a; }
.kw-article-cta p { font-size: 14.5px; margin: 0 0 16px; color: rgba(10,10,10,0.78); }
.kw-article-cta .btn-primary { background: #0a0a0a; color: var(--gold); border: none; }
.kw-article-cta .btn-primary:hover { background: #1a1714; color: var(--gold); }
/* Recent posts strip on single page */
.kw-recent-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.kw-recent-card {
display: block;
background: var(--bg);
border: 1px solid var(--gold-tint-2);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color 0.2s, transform 0.2s;
}
.kw-recent-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.kw-recent-img { aspect-ratio: 16 / 10; overflow: hidden; }
.kw-recent-img img { width: 100%; height: 100%; object-fit: cover; }
.kw-recent-body { padding: 14px 16px 18px; }
.kw-recent-date { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.kw-recent-title { font-size: 15px; font-weight: 700; line-height: 1.3; margin: 6px 0 8px; color: var(--text); }
.kw-recent-excerpt { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; }
/* ---------- Mobile tightening ---------- */
@media (max-width: 760px) {
.kw-article-body { font-size: 15.5px; }
.kw-article-cta { padding: 22px 20px; }
.kw-author-card { grid-template-columns: 1fr; text-align: center; }
.kw-author-photo { width: 56px; height: 56px; margin: 0 auto; }
.kw-blog-grid { grid-template-columns: 1fr; }
}
/* ==================================================================
* MEGA NAV DROPDOWNS — v1.7
* Services + Coverage become hover-fade panels with all the
* migrated pages listed inside. Modern, low-clutter.
* ================================================================== */
nav.menu.kw-mega ul.kw-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 4px;
align-items: center;
flex-wrap: wrap;
}
nav.menu.kw-mega ul.kw-menu li {
position: relative;
list-style: none;
}
nav.menu.kw-mega ul.kw-menu > li > a,
nav.menu.kw-mega ul.kw-menu > li.menu-item > a {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 9px 13px;
border-radius: 8px;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: background 0.18s, color 0.18s;
}
nav.menu.kw-mega ul.kw-menu > li > a:hover,
nav.menu.kw-mega ul.kw-menu > li:hover > a,
nav.menu.kw-mega ul.kw-menu > li.menu-item-has-children:hover > a {
background: var(--gold-tint);
color: var(--gold);
}
nav.menu.kw-mega .kw-caret {
font-size: 10px;
margin-left: 2px;
opacity: 0.55;
transition: transform 0.2s, opacity 0.2s;
}
nav.menu.kw-mega li.has-children:hover .kw-caret,
nav.menu.kw-mega li.menu-item-has-children:hover .kw-caret {
transform: rotate(180deg);
opacity: 1;
}
/* Sub-menu panels */
nav.menu.kw-mega ul.sub-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 320px;
max-width: 460px;
background: var(--surface);
border: 1px solid var(--gold-tint-2);
border-radius: 12px;
padding: 10px;
list-style: none;
margin: 0;
box-shadow: 0 12px 32px rgba(0,0,0,0.35);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
z-index: 1000;
}
nav.menu.kw-mega li.has-children:hover > ul.sub-menu,
nav.menu.kw-mega li.menu-item-has-children:hover > ul.sub-menu,
nav.menu.kw-mega li.has-children:focus-within > ul.sub-menu,
nav.menu.kw-mega li.menu-item-has-children:focus-within > ul.sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
nav.menu.kw-mega ul.sub-menu li {
list-style: none;
margin: 0;
}
nav.menu.kw-mega ul.sub-menu li a {
display: block;
padding: 9px 13px;
border-radius: 8px;
color: var(--text);
font-size: 12.8px;
text-decoration: none;
line-height: 1.35;
transition: background 0.15s, color 0.15s, padding-left 0.15s;
}
nav.menu.kw-mega ul.sub-menu li a:hover {
background: var(--gold-tint);
color: var(--gold);
padding-left: 16px;
}
/* Coverage gets a tighter single-column stack since titles are short */
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage {
grid-template-columns: 1fr 1fr;
min-width: 280px;
}
/* Right-align the LAST few menu items (Coverage, FAQ, Contact) so dropdown
* doesn't overflow off-screen on the right edge */
nav.menu.kw-mega ul.kw-menu > li:nth-last-child(-n+3) ul.sub-menu {
left: auto;
right: 0;
}
/* New Blog button in the header CTA area */
.btn.btn-blog {
background: transparent;
border: 1px solid var(--gold-tint-2);
color: var(--text);
padding: 9px 15px;
font-size: 13.5px;
font-weight: 600;
border-radius: 9px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.18s;
}
.btn.btn-blog:hover {
border-color: var(--gold);
color: var(--gold);
background: var(--gold-tint);
}
/* Mobile: collapse dropdowns into accordion when nav has .mobile-open */
@media (max-width: 1024px) {
nav.menu.kw-mega { display: none; }
nav.menu.kw-mega.mobile-open {
display: flex !important;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg);
border-top: 1px solid var(--gold-tint-2);
padding: 14px 24px;
z-index: 999;
flex-direction: column;
}
nav.menu.kw-mega.mobile-open ul.kw-menu {
flex-direction: column;
width: 100%;
gap: 2px;
align-items: stretch;
}
nav.menu.kw-mega.mobile-open ul.kw-menu > li > a {
padding: 12px 10px;
border-bottom: 1px solid var(--line);
border-radius: 0;
}
nav.menu.kw-mega.mobile-open ul.sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
background: var(--surface-2);
border-radius: 8px;
padding: 6px;
grid-template-columns: 1fr;
margin: 6px 0 8px 18px;
min-width: 0;
max-width: none;
}
nav.menu.kw-mega.mobile-open ul.sub-menu li a {
padding: 8px 12px;
font-size: 12.5px;
}
.btn.btn-blog span { display: inline; }
}
@media (max-width: 600px) {
.btn.btn-blog span { display: none; }
.btn.btn-blog { padding: 9px 11px; }
}
/* ==================================================================
* MEGA NAV DROPDOWNS — v1.8 hardened (override any existing .menu rules)
* ================================================================== */
/* Reset list defaults inside primary nav so bullets never show */
nav.menu.kw-mega ul,
nav.menu.kw-mega li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
nav.menu.kw-mega > ul.kw-menu {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 4px !important;
align-items: center !important;
}
nav.menu.kw-mega ul.kw-menu > li {
position: relative !important;
}
nav.menu.kw-mega ul.kw-menu > li > a {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 9px 13px !important;
border-radius: 8px !important;
white-space: nowrap !important;
}
/* Sub-menu — hidden by default, fades in on hover */
nav.menu.kw-mega ul.sub-menu {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 2px !important;
min-width: 320px !important;
max-width: 460px !important;
padding: 10px !important;
background: var(--surface) !important;
border: 1px solid var(--gold-tint-2) !important;
border-radius: 12px !important;
box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-8px) !important;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
z-index: 1000 !important;
}
nav.menu.kw-mega li.has-children:hover > ul.sub-menu,
nav.menu.kw-mega li.menu-item-has-children:hover > ul.sub-menu,
nav.menu.kw-mega li.has-children:focus-within > ul.sub-menu,
nav.menu.kw-mega li.menu-item-has-children:focus-within > ul.sub-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s !important;
}
nav.menu.kw-mega ul.sub-menu li {
display: block !important;
}
nav.menu.kw-mega ul.sub-menu li a {
display: block !important;
padding: 10px 13px !important;
border-radius: 8px !important;
font-size: 12.8px !important;
line-height: 1.35 !important;
color: var(--text) !important;
}
nav.menu.kw-mega ul.sub-menu li a:hover {
background: var(--gold-tint) !important;
color: var(--gold) !important;
padding-left: 16px !important;
}
/* Right-edge protection */
nav.menu.kw-mega ul.kw-menu > li:nth-last-child(-n+3) ul.sub-menu {
left: auto !important;
right: 0 !important;
}
/* Caret icon */
nav.menu.kw-mega .kw-caret { font-size: 10px !important; opacity: 0.6 !important; transition: transform 0.2s !important; }
nav.menu.kw-mega li.has-children:hover .kw-caret,
nav.menu.kw-mega li.menu-item-has-children:hover .kw-caret { transform: rotate(180deg) !important; }
/* Mobile collapse */
@media (max-width: 1024px) {
nav.menu.kw-mega:not(.mobile-open) { display: none !important; }
nav.menu.kw-mega.mobile-open {
display: flex !important;
position: absolute !important;
top: 100% !important; left: 0 !important; right: 0 !important;
background: var(--bg) !important;
border-top: 1px solid var(--gold-tint-2) !important;
padding: 14px 24px !important;
z-index: 999 !important;
flex-direction: column !important;
}
nav.menu.kw-mega.mobile-open > ul.kw-menu {
flex-direction: column !important;
gap: 0 !important;
align-items: stretch !important;
}
nav.menu.kw-mega.mobile-open ul.sub-menu {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
box-shadow: none !important;
border: none !important;
background: var(--surface-2) !important;
grid-template-columns: 1fr !important;
margin: 6px 0 8px 18px !important;
min-width: 0 !important;
max-width: none !important;
}
}
/* ==================================================================
* MEGA NAV DROPDOWNS — v1.9 (readable, wider, service-name highlighted)
* ================================================================== */
/* Wider dropdown panels with proper x-axis spread */
nav.menu.kw-mega ul.sub-menu {
min-width: 720px !important;
max-width: 920px !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 4px !important;
padding: 14px !important;
background: var(--surface) !important;
border: 1px solid var(--gold-tint-2) !important;
border-radius: 14px !important;
box-shadow: 0 18px 48px rgba(0,0,0,0.5) !important;
}
@media (max-width: 1100px) {
nav.menu.kw-mega ul.sub-menu {
min-width: 540px !important;
max-width: 720px !important;
grid-template-columns: 1fr 1fr !important;
}
}
/* Each item is a card with two-line layout: bold service name + dim location */
nav.menu.kw-mega ul.sub-menu li a {
display: block !important;
padding: 12px 14px !important;
border-radius: 10px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
color: var(--text) !important;
line-height: 1.35 !important;
transition: background 0.15s, color 0.15s, transform 0.15s !important;
white-space: normal !important;
word-break: keep-all !important;
}
nav.menu.kw-mega ul.sub-menu li a:hover {
background: var(--gold-tint) !important;
color: var(--gold) !important;
transform: translateX(3px) !important;
padding-left: 14px !important;
}
/* Services dropdown — wider items so titles read */
nav.menu.kw-mega ul.sub-menu.kw-mega-services li a {
font-size: 13.5px !important;
}
/* Coverage dropdown — also 3 cols */
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage {
min-width: 540px !important;
max-width: 700px !important;
grid-template-columns: 1fr 1fr 1fr !important;
}
/* Reformatted item: Service Southampton
* Applied via JS at runtime since wp_nav_menu just outputs plain titles. */
nav.menu.kw-mega ul.sub-menu li a strong { display: block; font-weight: 700; color: inherit; }
nav.menu.kw-mega ul.sub-menu li a .kw-loc { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; letter-spacing: 0.2px; opacity: 0.8; }
nav.menu.kw-mega ul.sub-menu li a:hover .kw-loc { color: var(--gold); opacity: 1; }
/* Right-edge protection — only Coverage and the few items at the right edge need it */
nav.menu.kw-mega ul.kw-menu > li:nth-last-child(-n+3) ul.sub-menu {
left: auto !important;
right: 0 !important;
}
/* The header row inside dropdown — small title for clarity */
nav.menu.kw-mega ul.sub-menu::before {
content: attr(data-label);
display: none;
}
nav.menu.kw-mega ul.sub-menu.kw-mega-services { position: relative; }
/* ==================================================================
* MEGA NAV DROPDOWNS — v1.14 (bigger, more readable, wider coverage)
* ================================================================== */
/* Bigger base font + more padding inside dropdown items */
nav.menu.kw-mega ul.sub-menu {
min-width: 760px !important;
max-width: 960px !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 6px !important;
padding: 18px !important;
background: var(--surface) !important;
border: 1px solid var(--gold-tint-2) !important;
border-radius: 14px !important;
box-shadow: 0 20px 56px rgba(0,0,0,0.55) !important;
}
nav.menu.kw-mega ul.sub-menu li a {
display: block !important;
padding: 14px 16px !important;
border-radius: 10px !important;
font-size: 14.5px !important;
font-weight: 600 !important;
color: var(--text) !important;
line-height: 1.4 !important;
white-space: normal !important;
word-break: keep-all !important;
transition: background 0.15s, color 0.15s, transform 0.15s !important;
}
nav.menu.kw-mega ul.sub-menu li a:hover {
background: var(--gold-tint) !important;
color: var(--gold) !important;
transform: translateX(4px) !important;
padding-left: 18px !important;
}
/* Services dropdown — 3 cols wide enough for full titles */
nav.menu.kw-mega ul.sub-menu.kw-mega-services {
min-width: 820px !important;
max-width: 1000px !important;
}
nav.menu.kw-mega ul.sub-menu.kw-mega-services li a strong {
font-weight: 700 !important;
color: inherit !important;
display: block !important;
font-size: 14.5px !important;
}
nav.menu.kw-mega ul.sub-menu.kw-mega-services li a .kw-loc {
display: block !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--muted) !important;
margin-top: 4px !important;
opacity: 0.85 !important;
}
/* Coverage dropdown — wider, 4 columns to fit 29 areas comfortably */
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage {
min-width: 880px !important;
max-width: 1080px !important;
grid-template-columns: 1fr 1fr 1fr 1fr !important;
padding: 16px !important;
}
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage li a {
padding: 10px 14px !important;
font-size: 13.5px !important;
}
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage li a strong {
display: inline !important;
font-weight: 700 !important;
}
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage li a strong::after {
content: '';
}
/* On narrower windows, drop to 3 cols then 2 cols */
@media (max-width: 1280px) {
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage {
min-width: 680px !important;
max-width: 820px !important;
grid-template-columns: 1fr 1fr 1fr !important;
}
}
@media (max-width: 1100px) {
nav.menu.kw-mega ul.sub-menu,
nav.menu.kw-mega ul.sub-menu.kw-mega-services,
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage {
min-width: 560px !important;
max-width: 720px !important;
grid-template-columns: 1fr 1fr !important;
}
}
/* Caret animation when dropdown is open */
nav.menu.kw-mega .kw-caret { font-size: 11px !important; margin-left: 4px !important; opacity: 0.55 !important; transition: transform 0.2s !important; }
nav.menu.kw-mega li.has-children:hover .kw-caret,
nav.menu.kw-mega li.menu-item-has-children:hover .kw-caret { transform: rotate(180deg) !important; opacity: 1 !important; }
/* Scroll the coverage dropdown if too tall (>500px) — keeps it usable on smaller screens */
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage {
max-height: min(70vh, 540px) !important;
overflow-y: auto !important;
}
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage::-webkit-scrollbar { width: 6px; }
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage::-webkit-scrollbar-thumb { background: var(--gold-tint-2); border-radius: 6px; }
/* ==================================================================
* MOBILE OVERHAUL — v1.15
* Full-screen menu overlay, accordion sub-menus, social/comms dock
* ================================================================== */
/* --- Hamburger button — visible on mobile only --- */
@media (max-width: 1024px) {
.menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--gold-tint); border: 1px solid var(--gold-tint-2); color: var(--gold); font-size: 22px; cursor: pointer; }
.menu-toggle:hover { background: var(--gold); color: #0a0a0a; }
/* Hide desktop nav by default on mobile */
nav.menu.kw-mega { display: none !important; }
/* When .mobile-open is set, show as full-screen overlay */
nav.menu.kw-mega.mobile-open {
display: flex !important;
flex-direction: column !important;
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: var(--bg) !important;
z-index: 99999 !important;
padding: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
animation: kwSlideDown 0.25s ease-out !important;
}
@keyframes kwSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* Big top bar inside the open mobile menu with the X close button */
nav.menu.kw-mega.mobile-open::before {
content: '';
display: block;
height: 64px;
flex-shrink: 0;
}
.kw-mobile-header {
position: fixed; top: 0; left: 0; right: 0; height: 64px;
background: var(--surface); border-bottom: 1px solid var(--gold-tint-2);
display: none; align-items: center; justify-content: space-between;
padding: 0 18px; z-index: 100000;
}
nav.menu.kw-mega.mobile-open ~ .kw-mobile-header,
body:has(nav.menu.kw-mega.mobile-open) .kw-mobile-header { display: flex; }
.kw-mobile-header .kw-mobile-brand { font-size: 14px; font-weight: 800; color: var(--gold); letter-spacing: -0.2px; }
.kw-mobile-close {
width: 44px; height: 44px; border-radius: 10px;
background: transparent; border: 1px solid var(--gold-tint-2); color: var(--text);
font-size: 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.kw-mobile-close:hover { background: var(--gold-tint); color: var(--gold); }
/* Nav links list */
nav.menu.kw-mega.mobile-open > ul.kw-menu {
flex-direction: column !important;
width: 100% !important;
gap: 0 !important;
align-items: stretch !important;
padding: 18px 18px 0 !important;
}
nav.menu.kw-mega.mobile-open > ul.kw-menu > li > a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 16px 18px !important;
border-radius: 12px !important;
font-size: 17px !important;
font-weight: 600 !important;
color: var(--text) !important;
background: var(--surface) !important;
border: 1px solid var(--line) !important;
margin-bottom: 8px !important;
transition: all 0.15s !important;
}
nav.menu.kw-mega.mobile-open > ul.kw-menu > li.has-children > a,
nav.menu.kw-mega.mobile-open > ul.kw-menu > li.menu-item-has-children > a {
background: var(--gold-tint) !important;
border-color: var(--gold-tint-2) !important;
color: var(--gold) !important;
}
nav.menu.kw-mega.mobile-open > ul.kw-menu > li.has-children > a::after,
nav.menu.kw-mega.mobile-open > ul.kw-menu > li.menu-item-has-children > a::after {
content: '▾';
font-size: 14px;
transition: transform 0.2s;
}
nav.menu.kw-mega.mobile-open > ul.kw-menu > li.has-children.is-open > a::after,
nav.menu.kw-mega.mobile-open > ul.kw-menu > li.menu-item-has-children.is-open > a::after {
transform: rotate(180deg);
}
/* hide the inline caret on mobile - the ::after gives us a cleaner one */
nav.menu.kw-mega.mobile-open .kw-caret { display: none !important; }
/* Sub-menus inside mobile - default collapsed, expanded when parent has .is-open */
nav.menu.kw-mega.mobile-open ul.sub-menu {
position: static !important;
display: none !important;
grid-template-columns: 1fr !important;
background: var(--bg) !important;
border: 1px solid var(--gold-tint-2) !important;
border-radius: 12px !important;
box-shadow: none !important;
margin: -2px 0 10px !important;
padding: 8px !important;
min-width: 0 !important;
max-width: none !important;
max-height: none !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
transition: none !important;
}
nav.menu.kw-mega.mobile-open li.has-children.is-open > ul.sub-menu,
nav.menu.kw-mega.mobile-open li.menu-item-has-children.is-open > ul.sub-menu {
display: grid !important;
animation: kwAccordionDown 0.2s ease-out;
}
@keyframes kwAccordionDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 1000px; } }
nav.menu.kw-mega.mobile-open ul.sub-menu li a {
display: flex !important;
align-items: center !important;
padding: 13px 16px !important;
font-size: 15.5px !important;
font-weight: 500 !important;
color: var(--text) !important;
line-height: 1.4 !important;
border-radius: 8px !important;
margin-bottom: 2px !important;
transition: all 0.12s !important;
}
nav.menu.kw-mega.mobile-open ul.sub-menu li a:hover,
nav.menu.kw-mega.mobile-open ul.sub-menu li a:active {
background: var(--gold-tint) !important;
color: var(--gold) !important;
padding-left: 18px !important;
}
nav.menu.kw-mega.mobile-open ul.sub-menu li a strong {
font-weight: 600 !important;
color: inherit !important;
}
nav.menu.kw-mega.mobile-open ul.sub-menu li a .kw-loc {
color: var(--muted) !important;
margin-left: auto !important;
font-size: 12.5px !important;
font-weight: 400 !important;
opacity: 0.85 !important;
}
/* Mobile dock at the bottom of the open menu — Call / WhatsApp / Discord */
.kw-mobile-dock {
margin: 22px 18px calc(env(safe-area-inset-bottom, 0) + 24px) !important;
padding-top: 22px !important;
border-top: 1px solid var(--gold-tint-2) !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.kw-mobile-dock .kw-dock-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 700;
text-decoration: none; transition: transform 0.12s;
color: #fff;
}
.kw-mobile-dock .kw-dock-btn:active { transform: scale(0.97); }
.kw-mobile-dock .kw-dock-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.kw-mobile-dock .kw-dock-btn.kw-dock-call { background: var(--gold); color: #0a0a0a; grid-column: span 2; padding: 16px 18px; font-size: 15px; }
.kw-mobile-dock .kw-dock-btn.kw-dock-whatsapp { background: #25D366; color: #fff; }
.kw-mobile-dock .kw-dock-btn.kw-dock-discord { background: #5865F2; color: #fff; }
.kw-mobile-dock .kw-dock-socials {
grid-column: span 2;
display: flex; gap: 10px; justify-content: center;
padding-top: 6px;
}
.kw-mobile-dock .kw-dock-socials a {
width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface); border: 1px solid var(--gold-tint-2); color: var(--muted);
transition: all 0.15s;
}
.kw-mobile-dock .kw-dock-socials a:hover { background: var(--gold-tint); color: var(--gold); border-color: var(--gold); }
.kw-mobile-dock .kw-dock-socials svg { width: 18px; height: 18px; }
/* Prevent body scroll when menu is open */
body.kw-menu-open { overflow: hidden !important; position: fixed; width: 100%; }
}
/* ==================================================================
* MOBILE HOMEPAGE — better readability + spacing
* ================================================================== */
@media (max-width: 760px) {
/* Hero text — easier line lengths and bigger tap targets */
.hero-text-section { padding: 30px 20px 24px !important; }
.hero-title { font-size: clamp(32px, 8vw, 44px) !important; line-height: 1.1 !important; }
.hero-text-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
.hero-cta { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
.hero-cta .btn { width: 100% !important; justify-content: center !important; padding: 16px !important; font-size: 16px !important; }
.hero-side-photo { max-width: 100% !important; }
.trust-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.trust-row > div { font-size: 13px !important; padding: 10px 12px !important; }
.hero-stats { gap: 12px !important; }
.hero-stat .num { font-size: 26px !important; }
.hero-stat .lbl { font-size: 11px !important; }
/* Services section — single-column cards, bigger tap targets */
.services-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.service-card { padding: 20px !important; }
.service-card h3 { font-size: 17px !important; }
.service-card p { font-size: 14px !important; line-height: 1.55 !important; }
.svc-category { margin-bottom: 28px !important; }
.svc-cat-head { gap: 14px !important; padding: 0 !important; }
.svc-cat-text h3 { font-size: 19px !important; }
.svc-cat-text p { font-size: 14px !important; }
/* Coverage area chips — bigger, more tappable */
.area-list { gap: 8px !important; }
.area-list span { font-size: 14px !important; padding: 10px 14px !important; }
.coverage-area { grid-template-columns: 1fr !important; gap: 20px !important; }
.area-map { aspect-ratio: 16 / 10 !important; }
/* FAQ — easier reading */
.faq-item summary { font-size: 15.5px !important; padding: 14px 16px !important; }
.faq-body { font-size: 14px !important; line-height: 1.6 !important; padding: 0 16px 16px !important; }
/* Section heads — calmer spacing */
.section-head { gap: 16px !important; flex-direction: column !important; align-items: flex-start !important; }
.section-title { font-size: 26px !important; line-height: 1.18 !important; }
.section-sub { font-size: 14.5px !important; }
/* Header brand logo — slightly smaller so the hamburger sits nicely */
.brand-logo { width: 180px !important; height: auto !important; }
/* On the job / gallery grids */
.onjob-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.onjob-tile span small { display: block !important; margin-bottom: 2px !important; }
.gallery-grid { grid-template-columns: 1fr !important; }
/* How it works steps */
.how-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}
/* Floating CTA stack on mobile - already exists but tighten spacing */
@media (max-width: 480px) {
.hero-title { font-size: 32px !important; }
.section-title { font-size: 22px !important; }
.brand-logo { width: 150px !important; }
}
/* ==================================================================
* v1.16 HOT-FIX — stop the mobile dock + mobile header from leaking onto desktop
* ================================================================== */
/* HARD HIDE the mobile-only chrome on every screen by default */
.kw-mobile-dock,
.kw-mobile-header {
display: none !important;
}
/* Re-enable ONLY when the mobile menu is open and we're on a ≤1024px screen */
@media (max-width: 1024px) {
nav.menu.kw-mega.mobile-open .kw-mobile-dock {
display: grid !important;
}
body.kw-menu-open .kw-mobile-header {
display: flex !important;
}
}
/* ==================================================================
* v1.17 — dropdown viewport-fit + uPVC service card highlight
* ================================================================== */
/* Hard-cap dropdown width to viewport — never overflows right edge */
nav.menu.kw-mega ul.sub-menu {
max-width: min(1080px, calc(100vw - 40px)) !important;
}
/* Coverage dropdown: always right-aligned to its trigger so it tucks in cleanly */
nav.menu.kw-mega ul.sub-menu.kw-mega-coverage {
left: auto !important;
right: 0 !important;
}
/* Services dropdown: smart-align — if it has room on the left, default-anchor;
on smaller screens it gets right-aligned too via the cap above */
nav.menu.kw-mega ul.sub-menu.kw-mega-services {
left: 0 !important;
right: auto !important;
}
/* When the screen is too narrow for the menu to fit, the parent