;
the inner
![]()
just keeps its scale + fill. */
.hero .hero-bg {
position: absolute !important;
top: -10% !important;
left: 0 !important;
right: 0 !important;
height: 130% !important;
will-change: transform;
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.55) saturate(1.1) contrast(1.05);
}
/* Same trick for any image marked parallax — give it 20% extra height */
.why-img[data-parallax] {
will-change: transform;
}
.hero-bg::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(5,8,16,0.55) 0%, rgba(5,8,16,0.2) 35%, rgba(5,8,16,0.85) 100%),
radial-gradient(70% 60% at 50% 40%, transparent 30%, rgba(5,8,16,0.5) 100%);
pointer-events: none;
}
/* Hero content sits above all the background layers. */
.hero-content { position: relative; z-index: 2; }
/* Spotlight cursor effect — a soft radial light follows the mouse on the
hero. CSS variables --spot-x / --spot-y are written by parallax.js. */
.hero[data-spotlight]::after {
content: '';
position: absolute; inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(
280px 280px at var(--spot-x, 50%) var(--spot-y, 50%),
rgba(0,168,232,0.22),
transparent 70%
);
transition: background 0.15s ease-out;
mix-blend-mode: screen;
}
/* Crown logo — gentle float */
.hero-crown {
animation: heroCrown 7s ease-in-out infinite;
filter: drop-shadow(0 12px 36px rgba(0,168,232,0.55));
}
@keyframes heroCrown {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* KINGDOM serif headline — reset text-fill (site.css sets it transparent
for a gradient that doesn't render here) and add depth via text-shadow. */
.hero-wordmark {
-webkit-text-fill-color: #fff !important;
background: none !important;
color: #fff !important;
letter-spacing: 0.02em;
text-shadow:
0 4px 28px rgba(0, 168, 232, 0.45),
0 2px 12px rgba(0, 0, 0, 0.6),
0 0 60px rgba(0, 168, 232, 0.2);
}
/* Animated divider line under hero tagline */
.hero-divider {
position: relative;
overflow: hidden;
}
.hero-divider::after {
content: '';
position: absolute;
top: 0; left: -50%;
width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,168,232,0.9), transparent);
animation: dividerScan 3.5s ease-in-out infinite;
}
@keyframes dividerScan {
0% { left: -50%; }
60% { left: 100%; }
100% { left: 100%; }
}
/* ============================================================
BUTTONS — magnetic-friendly + glow
============================================================ */
.btn { position: relative; isolation: isolate; }
.btn-primary {
background: linear-gradient(135deg, var(--kk-blue) 0%, var(--kk-blue-deep) 100%);
box-shadow:
0 0 0 1px rgba(0,168,232,0.35),
0 12px 30px rgba(0,168,232,0.25),
inset 0 1px 0 rgba(255,255,255,0.15);
transition: transform 0.25s var(--kk-ease), box-shadow 0.25s var(--kk-ease), background 0.25s var(--kk-ease);
}
.btn-primary::before {
content: '';
position: absolute; inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(135deg, var(--kk-blue-soft), var(--kk-blue));
opacity: 0;
transition: opacity 0.25s var(--kk-ease);
}
.btn-primary:hover {
box-shadow:
0 0 0 1px rgba(0,168,232,0.6),
0 16px 50px rgba(0,168,232,0.45),
0 0 60px rgba(0,168,232,0.25),
inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover::before { opacity: 1; }
.btn-outline {
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(255,255,255,0.04);
transition: all 0.25s var(--kk-ease);
}
.btn-outline:hover {
border-color: var(--kk-blue);
background: rgba(0,168,232,0.08);
box-shadow: 0 0 30px rgba(0,168,232,0.15);
}
/* ============================================================
STATS BAND — counter typography
============================================================ */
.cred-band {
position: relative;
background: linear-gradient(180deg, #060912 0%, #0a0f1c 100%);
}
.cred-band::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 80% at 50% -10%, rgba(0,168,232,0.14), transparent 60%);
pointer-events: none;
}
.stat {
position: relative;
}
/* Make the big numbers POP — was rendering ghostly gray due to inherited
color from parent. Force bright accent + glow so the credibility hits. */
.stat-num {
color: #fff !important;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
text-shadow:
0 0 32px rgba(0, 168, 232, 0.55),
0 0 12px rgba(0, 168, 232, 0.35);
background: linear-gradient(180deg, #ffffff 0%, #cfe6f7 65%, #6da6c8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 14px rgba(0,168,232,0.4));
}
.stat-label {
color: #a8b8cc !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
}
/* Subtle vertical accent between stat tiles for premium grid feel */
.stats-grid .stat:not(:last-child)::after {
content: '';
position: absolute;
top: 20%; bottom: 20%; right: 0;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(0,168,232,0.25), transparent);
}
@media (max-width: 700px) {
.stats-grid .stat:not(:last-child)::after { display: none; }
}
/* ============================================================
WHO WE SERVE BAND — proof tiles between cred-band and divisions
============================================================ */
.serves-band {
position: relative;
background: linear-gradient(180deg, #0a0f1c 0%, #060912 50%, #0a0f1c 100%);
padding: 80px 24px 90px;
overflow: hidden;
border-top: 1px solid rgba(0,168,232,0.08);
border-bottom: 1px solid rgba(0,168,232,0.08);
}
.serves-band::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(50% 50% at 25% 30%, rgba(0,168,232,0.08), transparent 60%),
radial-gradient(50% 50% at 75% 70%, rgba(0,168,232,0.06), transparent 60%);
pointer-events: none;
}
.serves-band::after {
/* Decorative blueprint grid baseline */
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(0,168,232,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,168,232,0.04) 1px, transparent 1px);
background-size: 60px 60px;
background-position: center;
mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
pointer-events: none;
opacity: 0.4;
}
.serves-band .container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}
.serves-head {
text-align: center;
margin-bottom: 50px;
}
.serves-head .eyebrow {
font-size: 11px;
letter-spacing: 0.3em;
color: var(--kk-blue);
text-transform: uppercase;
font-weight: 700;
display: block;
margin-bottom: 14px;
}
.serves-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.15;
text-shadow: 0 4px 28px rgba(0,168,232,0.3);
}
.serves-grid {
display: grid;
/* 3 × 2 grid on desktop — balanced layout, no lone card on row 2.
Wider viewports keep cards comfortably sized; narrower ones collapse. */
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 960px) {
.serves-grid { grid-template-columns: repeat(2, 1fr); }
}
.serve-card {
position: relative;
padding: 28px 22px 24px;
background: linear-gradient(180deg, rgba(13,19,32,0.85) 0%, rgba(7,11,20,0.9) 100%);
border: 1px solid rgba(0,168,232,0.18);
border-radius: 6px;
text-align: center;
overflow: hidden;
transition: all 0.35s var(--kk-ease);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.serve-card::before {
/* Top accent line */
content: '';
position: absolute;
top: 0; left: 20%; right: 20%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--kk-blue), transparent);
opacity: 0.6;
transition: opacity 0.35s var(--kk-ease);
}
.serve-card:hover {
border-color: rgba(0,168,232,0.55);
transform: translateY(-4px);
box-shadow:
0 16px 40px rgba(0,0,0,0.5),
0 0 50px rgba(0,168,232,0.18),
inset 0 1px 0 rgba(0,168,232,0.15);
}
.serve-card:hover::before {
opacity: 1;
left: 0; right: 0;
}
.serve-icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0,168,232,0.2), rgba(0,114,184,0.1));
border: 1px solid rgba(0,168,232,0.3);
border-radius: 50%;
box-shadow:
0 0 20px rgba(0,168,232,0.18),
inset 0 1px 0 rgba(255,255,255,0.06);
transition: all 0.35s var(--kk-ease);
}
.serve-icon svg {
width: 26px; height: 26px;
color: var(--kk-blue);
filter: drop-shadow(0 0 6px rgba(0,168,232,0.4));
}
.serve-card:hover .serve-icon {
border-color: var(--kk-blue);
box-shadow:
0 0 32px rgba(0,168,232,0.45),
inset 0 1px 0 rgba(255,255,255,0.12);
transform: scale(1.06);
}
.serve-num {
font-family: 'EB Garamond', Georgia, serif;
font-size: clamp(28px, 4vw, 38px);
font-weight: 700;
color: #fff;
line-height: 1;
margin-bottom: 6px;
background: linear-gradient(180deg, #ffffff 0%, #cfe6f7 65%, #6da6c8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 14px rgba(0,168,232,0.35));
font-variant-numeric: tabular-nums;
}
.serve-cat {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #e8eef7;
margin-bottom: 6px;
line-height: 1.25;
}
.serve-meta {
font-size: 11px;
letter-spacing: 0.05em;
color: var(--kk-text-mute);
line-height: 1.4;
}
@media (max-width: 700px) {
.serves-band { padding: 60px 16px 70px; }
.serves-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.serve-card { padding: 22px 14px 18px; }
.serve-icon { width: 44px; height: 44px; margin-bottom: 12px; }
.serve-icon svg { width: 22px; height: 22px; }
.serve-num { font-size: 24px; }
.serve-cat { font-size: 12px; }
.serve-meta { font-size: 10px; }
}
/* ============================================================
DIVISION CARDS — 3D tilt + spotlight + cinematic image
============================================================ */
.div-card {
position: relative;
overflow: hidden;
border-radius: var(--kk-radius);
border: 1px solid var(--kk-line);
box-shadow: var(--kk-shadow-deep);
transition: box-shadow 0.35s var(--kk-ease), border-color 0.35s var(--kk-ease);
}
.div-card::before {
content: '';
position: absolute; inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(
260px 260px at var(--tilt-x, 50%) var(--tilt-y, 50%),
rgba(0,168,232,0.18),
transparent 70%
);
opacity: 0;
transition: opacity 0.4s var(--kk-ease);
}
.div-card::after {
/* Always-on darkening gradient so text on the bottom remains crisp. */
content: '';
position: absolute; inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(5,8,16,0.85) 100%);
}
.div-card:hover {
border-color: rgba(0,168,232,0.5);
box-shadow:
0 0 0 1px rgba(0,168,232,0.3),
0 30px 80px rgba(0,0,0,0.65),
0 0 60px rgba(0,168,232,0.18);
}
.div-card:hover::before { opacity: 1; }
.div-card img {
transition: transform 1.2s var(--kk-ease), filter 0.6s var(--kk-ease);
filter: brightness(0.85) saturate(1.05);
}
.div-card:hover img {
transform: scale(1.06);
filter: brightness(1) saturate(1.15);
}
.div-card-body { position: relative; z-index: 3; }
.div-card-tag {
display: inline-block;
padding: 5px 12px;
background: rgba(0,168,232,0.15) !important;
border: 1px solid rgba(0,168,232,0.4);
border-radius: 999px;
color: var(--kk-blue) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
margin-bottom: 12px;
}
.div-card-title {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: clamp(28px, 4vw, 44px) !important;
font-weight: 700 !important;
text-shadow: 0 4px 18px rgba(0,0,0,0.7);
letter-spacing: 0.04em;
line-height: 1;
}
.div-card-desc {
font-size: 14.5px !important;
line-height: 1.55 !important;
color: rgba(255,255,255,0.85) !important;
text-shadow: 0 2px 12px rgba(0,0,0,0.7);
margin-bottom: 16px !important;
max-width: 90%;
}
.div-card-cta {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 12px;
padding: 8px 0;
color: var(--kk-blue-soft) !important;
}
.div-card-cta::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 32px; height: 2px;
background: linear-gradient(90deg, var(--kk-blue), transparent);
transition: width 0.4s var(--kk-ease);
}
.div-card:hover .div-card-cta { color: #fff !important; }
.div-card:hover .div-card-cta::after {
width: 100%;
background: linear-gradient(90deg, var(--kk-blue), var(--kk-blue-soft));
}
/* ============================================================
ABOUT US — section heading polish
============================================================ */
.section.tinted .section-head,
.section.dark .section-head {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center;
max-width: 720px;
margin: 0 auto 60px;
gap: 0;
}
/* Section eyebrow with bracketed accent lines on either side, like a kicker */
.section.tinted .section-head .eyebrow,
.section.dark .section-head .eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--kk-blue);
margin-bottom: 20px;
position: relative;
}
.section.tinted .section-head .eyebrow::before,
.section.tinted .section-head .eyebrow::after,
.section.dark .section-head .eyebrow::before,
.section.dark .section-head .eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--kk-blue));
}
.section.tinted .section-head .eyebrow::after,
.section.dark .section-head .eyebrow::after {
background: linear-gradient(90deg, var(--kk-blue), transparent);
}
.section.tinted .section-head h2,
.section.dark .section-head h2,
.section.tinted .section-head h2.serif,
.section.dark .section-head h2.serif {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: clamp(34px, 5vw, 56px) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
margin: 0 0 18px !important;
letter-spacing: -0.005em;
}
/* Light section variant gets dark text */
.section.tinted .section-head h2,
.section.tinted .section-head h2.serif {
color: #0d1320 !important;
text-shadow: none !important;
}
/* Dark section variant gets bright text + glow */
.section.dark .section-head h2,
.section.dark .section-head h2.serif {
color: #fff !important;
text-shadow: 0 4px 28px rgba(0,168,232,0.3) !important;
}
.section.tinted .section-head .section-sub {
color: #475569 !important;
font-size: 16px;
line-height: 1.65;
max-width: 680px;
margin: 0 auto;
}
.section.dark .section-head .section-sub {
color: #b3c0d4 !important;
}
/* ============================================================
ABOUT — founder cards w/ subtle shimmer on the crown
============================================================ */
.founder {
position: relative;
border: 1px solid var(--kk-line);
border-radius: var(--kk-radius);
background: linear-gradient(180deg, #0d1320 0%, #070b14 100%);
overflow: hidden;
transition: all 0.4s var(--kk-ease);
box-shadow:
0 1px 0 rgba(0,168,232,0.08) inset,
0 24px 60px rgba(0,0,0,0.3);
}
.founder::before {
/* Premium top edge accent */
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--kk-blue) 50%, transparent);
opacity: 0.7;
}
.founder::after {
/* Decorative blueprint-style cross-hair pattern in top-right corner */
content: '';
position: absolute;
top: 18px; right: 18px;
width: 22px; height: 22px;
border: 1px solid rgba(0,168,232,0.35);
background:
linear-gradient(rgba(0,168,232,0.5), rgba(0,168,232,0.5)) center/100% 1px no-repeat,
linear-gradient(rgba(0,168,232,0.5), rgba(0,168,232,0.5)) center/1px 100% no-repeat;
border-radius: 50%;
pointer-events: none;
}
.founder:hover {
border-color: rgba(0,168,232,0.5);
transform: translateY(-4px);
box-shadow:
0 1px 0 rgba(0,168,232,0.15) inset,
0 30px 80px rgba(0,0,0,0.5),
0 0 60px rgba(0,168,232,0.18);
}
.founder-photo {
position: relative;
min-height: 280px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 36px 24px 28px;
background:
radial-gradient(circle at center, rgba(0,168,232,0.25) 0%, transparent 55%),
linear-gradient(180deg, #0a1020 0%, #060a14 70%, #050810 100%);
border-bottom: 1px solid rgba(0,168,232,0.15);
}
/* Decorative blueprint grid overlay */
.founder-photo::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(0,168,232,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,168,232,0.06) 1px, transparent 1px);
background-size: 28px 28px;
background-position: center;
mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
pointer-events: none;
}
/* Glowing ring around the crown */
.founder-photo::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 220px; height: 220px;
border: 1px solid rgba(0,168,232,0.18);
border-radius: 50%;
box-shadow:
inset 0 0 60px rgba(0,168,232,0.08),
0 0 80px rgba(0,168,232,0.06);
pointer-events: none;
animation: founderRingPulse 6s ease-in-out infinite;
}
@keyframes founderRingPulse {
0%, 100% { box-shadow: inset 0 0 60px rgba(0,168,232,0.08), 0 0 80px rgba(0,168,232,0.06); }
50% { box-shadow: inset 0 0 80px rgba(0,168,232,0.14), 0 0 100px rgba(0,168,232,0.12); }
}
.crown-mark {
position: relative;
width: 90px;
height: auto;
margin-bottom: 18px;
filter: drop-shadow(0 0 30px rgba(0,168,232,0.7));
animation: crownPulse 4s ease-in-out infinite;
z-index: 1;
}
@keyframes crownPulse {
0%, 100% { filter: drop-shadow(0 0 22px rgba(0,168,232,0.55)) drop-shadow(0 4px 12px rgba(0,0,0,0.6)); transform: translateY(0); }
50% { filter: drop-shadow(0 0 40px rgba(0,168,232,0.85)) drop-shadow(0 4px 12px rgba(0,0,0,0.6)); transform: translateY(-2px); }
}
.founder-initials {
position: relative;
z-index: 1;
font-family: 'EB Garamond', Georgia, serif;
font-weight: 700;
font-size: clamp(38px, 5vw, 56px);
letter-spacing: 0.08em;
color: #fff !important;
background: linear-gradient(180deg, #ffffff 0%, #cfe6f7 65%, #6da6c8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 0 transparent;
filter: drop-shadow(0 0 18px rgba(0,168,232,0.5));
margin: 0;
}
/* Body of the founder card — better hierarchy */
.founder-body {
padding: 28px 26px 30px !important;
}
.founder-role {
font-size: 11px !important;
letter-spacing: 0.25em !important;
color: var(--kk-blue) !important;
text-transform: uppercase;
margin-bottom: 8px !important;
font-weight: 700 !important;
}
.founder-name {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: clamp(22px, 2.5vw, 28px) !important;
font-weight: 700 !important;
color: #fff !important;
margin: 0 0 6px !important;
line-height: 1.2 !important;
}
.founder-divider {
width: 32px;
height: 1px;
background: linear-gradient(90deg, var(--kk-blue), transparent);
margin: 14px 0 !important;
}
.founder-title {
font-size: 13px !important;
color: #cfe6f7 !important;
font-style: italic;
margin-bottom: 14px !important;
}
.founder-bio {
font-size: 14.5px !important;
line-height: 1.65 !important;
color: #b3c0d4 !important;
margin: 0 !important;
}
/* ============================================================
WHY US — animated badge counter, image parallax frame
============================================================ */
.why-img {
position: relative;
overflow: hidden;
border-radius: var(--kk-radius);
isolation: isolate;
}
.why-img::after {
content: '';
position: absolute; inset: 0;
border: 1px solid rgba(0,168,232,0.25);
pointer-events: none;
border-radius: inherit;
z-index: 2;
}
.why-img img {
transition: transform 0.8s var(--kk-ease);
}
.why-img:hover img { transform: scale(1.04); }
.why-img-badge {
position: absolute;
background: linear-gradient(135deg, rgba(0,114,184,0.95), rgba(0,168,232,0.95));
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 12px 40px rgba(0,168,232,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 3;
}
.feat {
position: relative;
transition: transform 0.3s var(--kk-ease);
}
.feat:hover { transform: translateX(4px); }
.feat-icon {
position: relative;
background: linear-gradient(135deg, rgba(0,168,232,0.18), rgba(0,114,184,0.08));
border: 1px solid rgba(0,168,232,0.3);
box-shadow: 0 0 24px rgba(0,168,232,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
transition: all 0.3s var(--kk-ease);
}
.feat:hover .feat-icon {
border-color: var(--kk-blue);
box-shadow: 0 0 36px rgba(0,168,232,0.4);
transform: scale(1.08);
}
/* ============================================================
AFFILIATIONS — sliding gradient line + hover lift
============================================================ */
.aff-logos { position: relative; }
.aff-item {
filter: grayscale(1) brightness(0.85);
opacity: 0.65;
transition: filter 0.4s var(--kk-ease), opacity 0.4s var(--kk-ease), transform 0.4s var(--kk-ease);
}
.aff-item:hover {
filter: grayscale(0) brightness(1);
opacity: 1;
transform: translateY(-2px);
}
.cred-divider {
position: relative;
overflow: hidden;
}
.cred-divider::before {
content: '';
position: absolute;
top: 0; left: -50%;
width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,168,232,0.6), transparent);
animation: dividerScan 5s ease-in-out infinite;
}
.gov-pill {
transition: all 0.3s var(--kk-ease);
}
.gov-pill:hover {
border-color: var(--kk-blue) !important;
background: rgba(0,168,232,0.06) !important;
transform: translateY(-1px);
}
/* ============================================================
FORM — premium contact card
============================================================ */
.form-card {
position: relative;
background: linear-gradient(180deg, #0c1220 0%, #060a14 100%) !important;
border: 1px solid rgba(0,168,232,0.18) !important;
border-radius: 6px;
box-shadow:
0 0 0 1px rgba(0,168,232,0.08),
0 40px 100px rgba(0,0,0,0.7),
0 0 60px rgba(0,168,232,0.06),
inset 0 1px 0 rgba(255,255,255,0.04) !important;
overflow: visible;
}
.form-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 5%, var(--kk-blue) 50%, transparent 95%);
opacity: 0.8;
border-radius: 6px 6px 0 0;
}
.form-card::after {
/* Decorative blueprint corner accent — top right */
content: '';
position: absolute;
top: 16px; right: 16px;
width: 24px; height: 24px;
border-top: 1px solid rgba(0,168,232,0.4);
border-right: 1px solid rgba(0,168,232,0.4);
border-radius: 0 4px 0 0;
pointer-events: none;
}
.form-control {
transition: all 0.25s var(--kk-ease);
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
color: #fff !important;
}
.form-control::placeholder { color: rgba(255,255,255,0.4) !important; }
.form-control:focus {
border-color: var(--kk-blue) !important;
background: rgba(0,168,232,0.06) !important;
box-shadow: 0 0 0 3px rgba(0,168,232,0.18), 0 0 30px rgba(0,168,232,0.2) !important;
outline: none;
}
.form-card label {
font-size: 11px !important;
letter-spacing: 0.18em !important;
font-weight: 600 !important;
text-transform: uppercase;
color: var(--kk-blue) !important;
margin-bottom: 8px !important;
}
.form-submit {
margin-top: 8px !important;
padding: 16px 24px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase;
}
/* Form-info side sits on the LIGHT contact section background so all
colors must be DARK for contrast. Earlier polish accidentally set
text-mute / white-gradient colors that were invisible on white. */
.form-list-item {
font-size: 15px;
color: #2a3548 !important;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-weight: 500;
}
.form-list-item svg {
color: var(--kk-blue);
flex-shrink: 0;
filter: drop-shadow(0 0 4px rgba(0,168,232,0.3));
}
.form-direct {
border-left: 3px solid var(--kk-blue);
padding: 18px 24px;
margin-top: 28px;
background: linear-gradient(135deg, rgba(0,168,232,0.08), rgba(0,168,232,0.02));
border-radius: 0 4px 4px 0;
}
.form-direct .lbl {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--kk-blue) !important;
font-weight: 700 !important;
margin-bottom: 8px;
}
.form-direct .val {
font-family: 'EB Garamond', Georgia, serif;
font-size: clamp(28px, 4vw, 36px);
font-weight: 700;
color: #0d1320 !important;
background: none !important;
-webkit-text-fill-color: #0d1320 !important;
letter-spacing: 0.01em;
margin: 4px 0 6px;
transition: color 0.25s var(--kk-ease);
}
.form-direct a {
text-decoration: none;
display: block;
}
.form-direct a:hover .val {
color: var(--kk-blue-deep) !important;
-webkit-text-fill-color: var(--kk-blue-deep) !important;
}
.form-direct .em {
font-size: 14px;
color: var(--kk-blue-deep) !important;
font-weight: 500;
}
.form-direct a:hover .em {
color: var(--kk-blue) !important;
text-decoration: underline;
}
/* Section-light variant: the contact section uses a near-white background.
Headings + sub copy need to be dark too. */
.section.light .eyebrow {
color: var(--kk-blue) !important;
}
.section.light h2.serif {
color: #0d1320 !important;
}
.section.light .section-sub {
color: #475569 !important;
}
/* ============================================================
NAV — sticky polish + scroll-state shadow
============================================================ */
.nav {
transition: background 0.3s var(--kk-ease), backdrop-filter 0.3s var(--kk-ease), box-shadow 0.3s var(--kk-ease);
}
.nav.is-scrolled {
background: rgba(5,8,16,0.85) !important;
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(0,168,232,0.15);
}
.nav-links a {
position: relative;
transition: color 0.25s var(--kk-ease);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px; left: 0; right: 0;
height: 1px;
background: var(--kk-blue);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s var(--kk-ease);
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
/* ============================================================
SECTION DIVIDERS — animated thin tracks between sections
============================================================ */
.section-track {
position: relative;
height: 1px;
margin: 0;
background: linear-gradient(90deg, transparent, var(--kk-line-2) 25%, var(--kk-blue) 50%, var(--kk-line-2) 75%, transparent);
background-size: 200% 100%;
animation: trackShimmer 6s ease-in-out infinite;
opacity: 0.6;
}
@keyframes trackShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ============================================================
CASE STUDY PAGES — /projects/ index + /projects/[slug]
============================================================ */
.case-study-page,
.cs-index-page {
background: linear-gradient(180deg, #050810 0%, #0a0f1c 60%, #050810 100%);
min-height: 100vh;
color: var(--kk-text);
}
.case-study-page .container,
.cs-index-page .container {
max-width: 920px;
padding: 110px 24px 80px;
margin: 0 auto;
}
.cs-index-page .container { max-width: 1200px; }
.cs-breadcrumbs {
font-size: 12px;
letter-spacing: 0.05em;
color: var(--kk-text-mute);
margin-bottom: 22px;
}
.cs-breadcrumbs a { color: var(--kk-blue); text-decoration: none; }
.cs-breadcrumbs a:hover { text-decoration: underline; }
.cs-header {
margin-bottom: 36px;
}
.cs-meta {
display: flex; gap: 14px; flex-wrap: wrap;
font-size: 11px; letter-spacing: 0.2em;
color: var(--kk-text-mute);
text-transform: uppercase;
margin-bottom: 14px;
}
.cs-badge {
background: rgba(0,168,232,0.12);
color: var(--kk-blue);
padding: 5px 12px;
border-radius: 999px;
border: 1px solid rgba(0,168,232,0.3);
}
.cs-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: clamp(34px, 5vw, 54px);
font-weight: 700;
line-height: 1.1;
color: #fff;
margin: 0 0 14px;
text-shadow: 0 4px 28px rgba(0,168,232,0.3);
}
.cs-pitch {
font-size: 18px;
color: var(--kk-text-mute);
line-height: 1.5;
margin: 0;
}
.cs-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 22px 0;
margin: 24px 0 36px;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cs-stat { text-align: center; }
.cs-stat-num {
font-family: 'EB Garamond', Georgia, serif;
font-size: clamp(20px, 3vw, 28px);
font-weight: 700;
color: #fff;
text-shadow: 0 0 18px rgba(0,168,232,0.25);
}
.cs-stat-lbl {
font-size: 11px;
letter-spacing: 0.2em;
color: var(--kk-text-mute);
text-transform: uppercase;
margin-top: 4px;
}
.cs-section {
margin: 36px 0;
padding-top: 22px;
border-top: 1px solid rgba(0,168,232,0.15);
}
.cs-eyebrow {
font-size: 11px;
letter-spacing: 0.3em;
color: var(--kk-blue);
text-transform: uppercase;
margin-bottom: 12px;
}
.cs-body { font-size: 15px; line-height: 1.7; color: var(--kk-text); }
.cs-body p { margin: 12px 0; }
.cs-body strong { color: #fff; }
.cs-body ul { padding-left: 22px; margin: 12px 0; }
.cs-body a { color: var(--kk-blue); }
.cs-quote {
border-left: 3px solid var(--kk-blue);
padding: 18px 22px;
margin: 36px 0;
background: rgba(0,168,232,0.06);
font-family: 'EB Garamond', Georgia, serif;
font-size: 19px;
font-style: italic;
color: #cfe6f7;
line-height: 1.5;
}
.cs-cta {
margin-top: 60px;
padding: 40px 32px;
background: linear-gradient(135deg, rgba(0,168,232,0.1), rgba(0,114,184,0.05));
border: 1px solid rgba(0,168,232,0.3);
border-radius: 6px;
text-align: center;
}
.cs-cta h2 {
font-size: clamp(24px, 4vw, 36px);
color: #fff;
margin: 0 0 8px;
}
.cs-cta p {
color: var(--kk-text-mute);
margin: 0 0 20px;
}
.cs-cta-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* Index page */
.cs-index-hero {
text-align: center;
padding: 110px 24px 50px;
}
.cs-index-hero h1 {
font-size: clamp(36px, 6vw, 64px);
color: #fff;
margin: 14px 0;
text-shadow: 0 4px 28px rgba(0,168,232,0.3);
}
.cs-index-sub {
max-width: 640px;
margin: 0 auto;
color: var(--kk-text-mute);
font-size: 17px;
line-height: 1.6;
}
.cs-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
padding: 30px 0;
}
.cs-card {
background: linear-gradient(180deg, #0d1320 0%, #070b14 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 24px;
text-decoration: none;
color: var(--kk-text);
transition: all 0.3s var(--kk-ease);
display: block;
}
.cs-card:hover {
border-color: rgba(0,168,232,0.4);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(0,168,232,0.15);
}
.cs-card-meta {
display: flex;
justify-content: space-between;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--kk-text-mute);
margin-bottom: 14px;
}
.cs-card-badge { color: var(--kk-blue); font-weight: 700; }
.cs-card-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: 22px;
font-weight: 700;
color: #fff;
margin: 0 0 10px;
line-height: 1.25;
}
.cs-card-summary {
color: var(--kk-text-mute);
font-size: 14px;
line-height: 1.55;
margin: 0 0 16px;
}
.cs-card-foot {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--kk-text-mute);
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.cs-card-value { color: var(--kk-blue); font-weight: 700; }
.cs-empty {
text-align: center;
padding: 60px 30px;
color: var(--kk-text-mute);
border: 1px dashed rgba(255,255,255,0.12);
border-radius: 6px;
}
.cs-empty a { color: var(--kk-blue); }
.cs-index-cta {
text-align: center;
padding: 40px 24px 80px;
}
.cs-index-cta h2 {
font-size: clamp(28px, 4vw, 42px);
color: #fff;
margin: 0 0 8px;
}
.cs-index-cta p { color: var(--kk-text-mute); margin: 0 0 20px; }
/* ============================================================
REVIEWS SECTION — Google Reviews + AggregateRating schema
============================================================ */
.reviews-section {
background: linear-gradient(180deg, #060912 0%, #0a0f1c 100%);
position: relative;
}
.reviews-section::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(60% 80% at 50% 0%, rgba(0,168,232,0.08), transparent 60%);
pointer-events: none;
}
.reviews-section .container { position: relative; z-index: 1; }
.reviews-aggregate {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-top: 16px;
}
.reviews-stars {
font-size: 24px;
color: var(--kk-gold);
letter-spacing: 2px;
filter: drop-shadow(0 0 12px rgba(212,162,60,0.4));
}
.reviews-rating-meta {
font-size: 14px;
color: var(--kk-text-mute);
}
.reviews-rating-meta span {
color: #fff;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.reviews-rating-meta a {
color: var(--kk-blue);
margin-left: 12px;
text-decoration: none;
font-weight: 600;
}
.reviews-rating-meta a:hover { text-decoration: underline; }
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-top: 36px;
}
.review-card {
background: linear-gradient(180deg, #0d1320 0%, #070b14 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--kk-radius);
padding: 22px;
transition: all 0.3s var(--kk-ease);
position: relative;
}
.review-card:hover {
border-color: rgba(0,168,232,0.4);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(0,168,232,0.15);
}
.review-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.review-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(0,168,232,0.15);
display: flex; align-items: center; justify-content: center;
font-weight: 700;
color: var(--kk-blue);
font-size: 14px;
flex-shrink: 0;
}
.review-author { font-weight: 700; color: #fff; font-size: 14px; }
.review-when { font-size: 12px; color: var(--kk-text-mute); }
.review-stars {
color: var(--kk-gold);
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 8px;
}
.review-text {
font-size: 13.5px;
color: var(--kk-text);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.reviews-cta {
text-align: center;
margin-top: 32px;
}
.reviews-empty {
text-align: center;
padding: 40px;
color: var(--kk-text-mute);
font-size: 14px;
border: 1px dashed rgba(255,255,255,0.1);
border-radius: var(--kk-radius);
margin-top: 24px;
}
/* ============================================================
FAQ SECTION — accordion with smooth reveal + premium dark style
============================================================ */
.faq-section {
background: linear-gradient(180deg, #060912 0%, #0a0f1c 100%);
position: relative;
}
.faq-section::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(60% 80% at 50% 0%, rgba(0,168,232,0.08), transparent 60%);
pointer-events: none;
}
.faq-section .container { position: relative; z-index: 1; }
.faq-grid {
max-width: 880px;
margin: 40px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: linear-gradient(180deg, #0d1320 0%, #070b14 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--kk-radius);
transition: border-color 0.3s var(--kk-ease), box-shadow 0.3s var(--kk-ease);
overflow: hidden;
}
.faq-item:hover {
border-color: rgba(0,168,232,0.35);
box-shadow: 0 0 30px rgba(0,168,232,0.1);
}
.faq-item[open] {
border-color: rgba(0,168,232,0.5);
box-shadow: 0 0 40px rgba(0,168,232,0.15), inset 0 1px 0 rgba(0,168,232,0.1);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 18px 56px 18px 22px;
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
color: #e8eef7;
position: relative;
user-select: none;
transition: color 0.25s var(--kk-ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--kk-blue-soft); }
.faq-item summary::after {
content: '+';
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 300;
color: var(--kk-blue);
border: 1px solid rgba(0,168,232,0.35);
border-radius: 50%;
transition: transform 0.3s var(--kk-ease), background 0.3s var(--kk-ease);
}
.faq-item[open] summary::after {
content: '−';
background: rgba(0,168,232,0.18);
transform: translateY(-50%) rotate(180deg);
}
.faq-answer {
padding: 0 56px 22px 22px;
color: #b3c0d4;
font-size: 14.5px;
line-height: 1.65;
animation: faqOpen 0.35s var(--kk-ease);
}
@keyframes faqOpen {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
RECENT PROJECTS CAROUSEL — auto-populated from CRM
============================================================ */
.recent-projects {
background: linear-gradient(180deg, #060912 0%, #0a0f1c 50%, #060912 100%);
padding: 90px 0 100px;
position: relative;
overflow: hidden;
}
.recent-projects::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(60% 50% at 50% 0%, rgba(0,168,232,0.1), transparent 60%);
pointer-events: none;
}
.recent-projects .container { position: relative; z-index: 1; max-width: 1280px; padding: 0 24px; margin: 0 auto; }
.rp-carousel-wrap {
position: relative;
margin: 40px 0 30px;
}
.rp-carousel {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 4px 4px 16px;
-webkit-overflow-scrolling: touch;
}
.rp-carousel::-webkit-scrollbar { display: none; }
.rp-card {
flex: 0 0 calc((100% - 36px) / 3);
min-width: 300px;
scroll-snap-align: start;
background: linear-gradient(180deg, #0d1320 0%, #070b14 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 24px;
text-decoration: none;
color: var(--kk-text);
transition: all 0.35s var(--kk-ease);
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
}
.rp-card::before {
content: '';
position: absolute;
top: 0; left: 20%; right: 20%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--kk-blue), transparent);
opacity: 0.5;
transition: all 0.35s var(--kk-ease);
}
.rp-card:hover {
border-color: rgba(0,168,232,0.5);
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 50px rgba(0,168,232,0.15);
}
.rp-card:hover::before {
left: 0; right: 0;
opacity: 1;
}
.rp-card-meta {
display: flex;
justify-content: space-between;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kk-text-mute);
}
.rp-card-badge {
color: var(--kk-blue);
font-weight: 700;
}
.rp-card-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: 22px;
font-weight: 700;
color: #fff;
line-height: 1.25;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rp-card-summary {
font-size: 14px;
line-height: 1.55;
color: #b3c0d4;
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rp-card-foot {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--kk-text-mute);
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.rp-card-value { color: var(--kk-blue); font-weight: 700; }
.rp-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0,168,232,0.15);
border: 1px solid rgba(0,168,232,0.3);
color: var(--kk-blue);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: all 0.25s var(--kk-ease);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.rp-arrow svg { width: 22px; height: 22px; }
.rp-arrow:hover {
background: var(--kk-blue);
border-color: var(--kk-blue);
color: #fff;
box-shadow: 0 0 24px rgba(0,168,232,0.5);
transform: translateY(-50%) scale(1.08);
}
.rp-arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.rp-arrow-left { left: -22px; }
.rp-arrow-right { right: -22px; }
.rp-cta {
text-align: center;
margin-top: 14px;
}
.rp-empty {
padding: 40px 20px;
text-align: center;
color: var(--kk-text-mute);
border: 1px dashed rgba(0,168,232,0.2);
border-radius: 6px;
flex: 1;
font-size: 14px;
}
.rp-empty a { color: var(--kk-blue); text-decoration: none; }
.rp-empty a:hover { text-decoration: underline; }
@media (max-width: 900px) {
.rp-card { flex: 0 0 80%; min-width: 280px; }
.rp-arrow { width: 38px; height: 38px; }
.rp-arrow svg { width: 18px; height: 18px; }
.rp-arrow-left { left: -10px; }
.rp-arrow-right { right: -10px; }
}
@media (max-width: 540px) {
.rp-card { flex: 0 0 calc(100% - 16px); min-width: unset; }
.rp-arrow { display: none; }
}
/* ============================================================
PREMIUM ANIMATIONS — subtle motion that signals quality
============================================================ */
/* SHIMMER — one-shot light wash across an element when revealed.
Uses a moving gradient mask. Triggered by the .is-shimmered class
that initShimmer() in parallax.js adds when element enters viewport. */
[data-shimmer] {
position: relative;
overflow: hidden;
}
[data-shimmer]::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(
115deg,
transparent 30%,
rgba(255, 255, 255, 0.18) 48%,
rgba(0, 168, 232, 0.25) 50%,
rgba(255, 255, 255, 0.18) 52%,
transparent 70%
);
transform: translateX(-100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
mix-blend-mode: overlay;
}
[data-shimmer].is-shimmered::after {
opacity: 1;
animation: shimmerSweep 1.6s cubic-bezier(.25, .8, .25, 1) forwards;
}
@keyframes shimmerSweep {
to { transform: translateX(100%); }
}
/* GLOW PULSE — used on accent buttons + key CTAs to draw the eye
in periodic 3s cycles without being annoying. Apply via class
.kk-glow-pulse */
.kk-glow-pulse {
position: relative;
isolation: isolate;
}
.kk-glow-pulse::before {
content: '';
position: absolute;
inset: -6px;
border-radius: inherit;
background: radial-gradient(circle at center, rgba(0,168,232,0.4), transparent 70%);
opacity: 0;
z-index: -1;
animation: glowPulse 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes glowPulse {
0%, 100% { opacity: 0; transform: scale(0.95); }
50% { opacity: 0.6; transform: scale(1.05); }
}
/* GRID-LINE SCAN — animated gradient line that scans across section
dividers. Already in use as .section-track + .hero-divider, this
new variant is brighter for premium accent moments. */
.kk-scan-track {
position: relative;
height: 1px;
overflow: hidden;
background: rgba(0, 168, 232, 0.08);
}
.kk-scan-track::after {
content: '';
position: absolute;
top: 0; left: -40%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, var(--kk-blue) 40%, var(--kk-blue-soft) 50%, var(--kk-blue) 60%, transparent);
filter: blur(0.5px);
animation: scanTrackSweep 4s ease-in-out infinite;
}
@keyframes scanTrackSweep {
0% { left: -40%; }
100% { left: 110%; }
}
/* TILT-ON-SCROLL — a gentle 3D rotation that tracks the user's
scroll progress. Apply via .kk-tilt-on-scroll */
.kk-tilt-on-scroll {
transition: transform 0.6s cubic-bezier(.22,.9,.3,1);
will-change: transform;
}
/* MOUSE TRAIL — single faint orb that follows the cursor at low
opacity for a "premium app" feel. JS-driven (parallax.js) but
CSS handles the visual. Hidden on touch + reduced-motion. */
.kk-mouse-trail {
position: fixed;
top: 0; left: 0;
width: 380px; height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 168, 232, 0.18), transparent 65%);
pointer-events: none;
z-index: 1;
transform: translate3d(-50%, -50%, 0);
mix-blend-mode: screen;
filter: blur(40px);
opacity: 0;
transition: opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
.kk-mouse-trail { display: none; }
}
/* COUNTER-SCROLL ANIMATION — when stat numbers enter viewport,
add a subtle "rolling" effect via CSS animation overriding
the JS counter transition for a snappier feel. */
.stat-num span[data-counter] {
display: inline-block;
animation: numFadeIn 0.6s cubic-bezier(.22, .9, .3, 1) backwards;
}
@keyframes numFadeIn {
from { opacity: 0; transform: translateY(10px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ROOFLINE LOADER — subtle 1px line under the nav that "grows" left-to-right
as the page progresses (scroll progress already does this; this is
the static-styled wrapper). */
/* HOVER LIFT-PLUS — premium card hover animation that combines
3D tilt + brightness + shadow. Apply via .kk-hover-lift */
.kk-hover-lift {
transition: transform 0.4s cubic-bezier(.22,.9,.3,1),
box-shadow 0.4s cubic-bezier(.22,.9,.3,1),
filter 0.4s cubic-bezier(.22,.9,.3,1);
will-change: transform, box-shadow, filter;
}
.kk-hover-lift:hover {
transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
filter: brightness(1.05) saturate(1.1);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.5),
0 0 50px rgba(0, 168, 232, 0.15);
}
/* CONTACT SECTION — fix invisible bg by giving it a clear
gradient that matches the rest of the dark site instead of
the default light section. This way the form-info white text
is readable. */
#contact.section.light {
background: linear-gradient(180deg, #f5f8fc 0%, #e9eff7 100%) !important;
position: relative;
overflow: hidden;
}
#contact.section.light::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 20% 20%, rgba(0, 168, 232, 0.08), transparent 60%),
radial-gradient(50% 50% at 80% 80%, rgba(0, 168, 232, 0.06), transparent 60%);
pointer-events: none;
}
#contact.section.light .container {
position: relative;
z-index: 1;
}
/* ============================================================
FOOTER — refined ink layer
============================================================ */
.footer {
position: relative;
background: radial-gradient(80% 80% at 50% 0%, #0a1020 0%, #04060c 70%);
}
.footer::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,168,232,0.3) 50%, transparent);
}
.footer a { transition: color 0.2s var(--kk-ease); }
.footer a:hover { color: var(--kk-blue) !important; }
/* ============================================================
SCROLL-PROGRESS BAR — thin top gradient that fills as you scroll
============================================================ */
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, var(--kk-blue-soft), var(--kk-blue), var(--kk-blue-deep));
box-shadow: 0 0 12px var(--kk-blue);
z-index: 9999;
transition: width 0.1s linear;
pointer-events: none;
}
/* ============================================================
FLOATING CTA — appears once user scrolls past hero
============================================================ */
.float-cta {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 100;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s var(--kk-ease), transform 0.4s var(--kk-ease);
pointer-events: none;
}
.float-cta.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.float-cta a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
background: linear-gradient(135deg, var(--kk-blue), var(--kk-blue-deep));
color: #fff;
border-radius: 999px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: 0 0 0 1px rgba(0,168,232,0.4), 0 16px 40px rgba(0,168,232,0.4), 0 0 60px rgba(0,168,232,0.25);
text-decoration: none;
transition: all 0.3s var(--kk-ease);
}
.float-cta a:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(0,168,232,0.6), 0 22px 60px rgba(0,168,232,0.55);
}
/* ============================================================
EXIT-INTENT OVERLAY — bounce-recovery lead capture
============================================================ */
.kk-exit-overlay {
position: fixed;
inset: 0;
z-index: 11500;
background: rgba(2,5,10,0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
animation: kkExitFade 0.3s var(--kk-ease);
}
.kk-exit-overlay.is-open { display: flex; }
@keyframes kkExitFade {
from { opacity: 0; }
to { opacity: 1; }
}
.kk-exit-panel {
position: relative;
width: 100%;
max-width: 520px;
background: linear-gradient(180deg, #0d1320 0%, #050810 100%);
border: 1px solid rgba(0,168,232,0.35);
border-radius: 6px;
padding: 38px 36px 32px;
box-shadow:
0 0 0 1px rgba(0,168,232,0.15),
0 30px 80px rgba(0,0,0,0.85),
0 0 80px rgba(0,168,232,0.25);
animation: kkExitRise 0.4s var(--kk-ease);
}
.kk-exit-panel::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--kk-blue) 50%, transparent);
}
@keyframes kkExitRise {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.kk-exit-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border: none;
background: rgba(255,255,255,0.05);
border-radius: 50%;
color: var(--kk-text-mute);
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s var(--kk-ease);
}
.kk-exit-close:hover {
background: rgba(255,255,255,0.1);
color: #fff;
transform: rotate(90deg);
}
.kk-exit-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.25em;
color: var(--kk-blue);
text-transform: uppercase;
margin-bottom: 14px;
}
.kk-exit-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: 28px;
font-weight: 700;
color: #fff;
line-height: 1.15;
margin: 0 0 12px;
}
.kk-exit-title span {
color: var(--kk-blue);
}
.kk-exit-sub {
color: var(--kk-text-mute);
font-size: 14px;
line-height: 1.55;
margin: 0 0 22px;
}
.kk-exit-form {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
.kk-exit-form input {
width: 100%;
padding: 14px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 15px;
transition: all 0.2s var(--kk-ease);
}
.kk-exit-form input::placeholder { color: rgba(255,255,255,0.4); }
.kk-exit-form input:focus {
outline: none;
border-color: var(--kk-blue);
background: rgba(0,168,232,0.06);
box-shadow: 0 0 0 3px rgba(0,168,232,0.18);
}
.kk-exit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 20px;
background: linear-gradient(135deg, var(--kk-blue) 0%, var(--kk-blue-deep) 100%);
color: #fff;
border: none;
border-radius: 4px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
box-shadow: 0 0 0 1px rgba(0,168,232,0.4), 0 12px 32px rgba(0,168,232,0.35);
transition: all 0.25s var(--kk-ease);
}
.kk-exit-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(0,168,232,0.6), 0 18px 50px rgba(0,168,232,0.5);
}
.kk-exit-btn:disabled { opacity: 0.6; cursor: wait; }
.kk-exit-trust {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 11px;
color: var(--kk-text-mute);
letter-spacing: 0.15em;
text-transform: uppercase;
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 16px;
}
.kk-exit-trust span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.kk-exit-trust span::before {
content: '✓';
color: var(--kk-blue);
font-weight: 700;
}
.kk-exit-msg {
margin-top: 12px;
font-size: 13px;
text-align: center;
}
.kk-exit-msg.success { color: #4ade80; }
.kk-exit-msg.error { color: #f87171; }
/* ============================================================
MOBILE — keep all motion subtle on phones
============================================================ */
@media (max-width: 768px) {
.hero::before { filter: blur(40px) saturate(1); animation-duration: 18s; }
.div-card:hover { transform: none; }
.float-cta { bottom: 16px; right: 16px; }
.float-cta a { padding: 12px 18px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001s !important;
transition-duration: 0.001s !important;
}
}