/* ============================================================
R3 Global — Light / Dark Theme System
Theme is set via
Loaded after style.css.
============================================================ */
/* === 1. DARK TOKENS ========================================= */
[data-theme="dark"] {
--light-grey: #0b1526;
--mid-grey: #16203a;
--text-dark: #f1f5f9;
--text-body: #a7b6cd;
--text-light: #8394ad;
--border: rgba(255,255,255,0.10);
--blue-light: rgba(37,99,235,0.16);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.55);
--shadow: 0 4px 16px rgba(0,0,0,0.55);
--shadow-lg: 0 10px 36px rgba(0,0,0,0.65);
}
/* === 2. THEME TOGGLE BUTTON ================================= */
/* === 3. GLOBAL SURFACES ===================================== */
[data-theme="dark"] body {
background: #070f1f;
color: var(--text-body);
}
html { transition: background-color 0.35s ease; }
body, .section, .header, .service-card, .why-card, .industry-tag, .back-to-top {
transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
/* === 4. HEADER ============================================== */
[data-theme="dark"] .header {
background: rgba(9,20,45,0.55);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
[data-theme="dark"] .header.scrolled {
background: rgba(6,14,33,0.88);
box-shadow: 0 10px 36px rgba(0,0,0,0.50);
}
[data-theme="dark"] .logo-img { filter: brightness(0) invert(1) !important; }
[data-theme="dark"] .nav-links a,
[data-theme="dark"] .header.scrolled .nav-links a { color: rgba(255,255,255,0.82); }
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active,
[data-theme="dark"] .header.scrolled .nav-links a:hover,
[data-theme="dark"] .header.scrolled .nav-links a.active { color: #ffffff; }
[data-theme="dark"] .nav-links a.active::after,
[data-theme="dark"] .header.scrolled .nav-links a.active::after { background: #60a5fa; }
[data-theme="dark"] .hamburger span,
[data-theme="dark"] .header.scrolled .hamburger span { background: #ffffff; }
[data-theme="dark"] .mobile-nav { background: #0a1526; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .mobile-nav-links a { color: rgba(255,255,255,0.85); }
/* === 5. HERO ================================================ */
[data-theme="dark"] .hero {
background:
radial-gradient(1100px 620px at 76% 45%, rgba(37,99,235,0.20) 0%, transparent 62%),
radial-gradient(900px 520px at 8% 12%, rgba(29,78,216,0.16) 0%, transparent 64%),
linear-gradient(158deg, #050b1c 0%, #091731 42%, #0c2049 100%);
}
[data-theme="dark"] .hero-bg::before {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(116deg, rgba(120,170,255,0.055) 0 1px, transparent 1px 130px),
repeating-linear-gradient( 64deg, rgba(120,170,255,0.040) 0 1px, transparent 1px 104px);
-webkit-mask-image: radial-gradient(ellipse 95% 85% at 45% 50%, #000 25%, transparent 92%);
mask-image: radial-gradient(ellipse 95% 85% at 45% 50%, #000 25%, transparent 92%);
}
[data-theme="dark"] .hero-grid-overlay {
background-image: radial-gradient(circle, rgba(255,255,255,0.075) 1px, transparent 1px);
opacity: 0.55;
}
[data-theme="dark"] .hero-orb-1 { background: radial-gradient(circle, rgba(37,99,235,0.30) 0%, transparent 66%); }
[data-theme="dark"] .hero-orb-2 { background: radial-gradient(circle, rgba(29,78,216,0.26) 0%, transparent 70%); }
[data-theme="dark"] .hero-orb-3 { background: radial-gradient(circle, rgba(96,165,250,0.16) 0%, transparent 72%); }
[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero h1 .highlight { color: #ffffff; }
[data-theme="dark"] .hero-tagline { color: rgba(255,255,255,0.90); }
[data-theme="dark"] .hero-message { color: rgba(203,217,238,0.78); }
[data-theme="dark"] .trust-item { color: rgba(255,255,255,0.52); }
[data-theme="dark"] .trust-item svg { stroke: #60a5fa; }
[data-theme="dark"] .hero .btn-primary {
background: #2563EB; border-color: #2563EB; color: #fff;
box-shadow: 0 10px 28px -10px rgba(37,99,235,0.75);
}
[data-theme="dark"] .hero .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
[data-theme="dark"] .hero .btn-outline {
background: #ffffff; color: #0A2463; border-color: #ffffff;
}
[data-theme="dark"] .hero .btn-outline:hover {
background: rgba(255,255,255,0.88); color: #0A2463; border-color: rgba(255,255,255,0.88);
}
/* product visual — darken + navy tint so it sits in the scene */
[data-theme="dark"] .hero-product {
position: relative;
background: #08182f;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 45px 100px -35px rgba(0,0,0,0.90),
0 0 130px -45px rgba(37,99,235,0.60);
}
[data-theme="dark"] .hero-product img {
mix-blend-mode: normal;
opacity: 1;
filter: brightness(0.66) contrast(1.06) saturate(1.45);
}
[data-theme="dark"] .hero-product::after {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
pointer-events: none;
background: linear-gradient(165deg, rgba(23,60,140,0.42) 0%, rgba(8,20,48,0.50) 100%);
mix-blend-mode: color;
}
/* === 6. LIGHT-SURFACE COMPONENTS THAT MUST FLIP ============= */
[data-theme="dark"] .industry-tag {
background: #101d33;
border-color: rgba(255,255,255,0.10);
color: #dbe6f7;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
[data-theme="dark"] .industry-tag:hover { background: #16263f; }
[data-theme="dark"] .back-to-top {
background: #101d33;
border-color: rgba(255,255,255,0.16);
}
[data-theme="dark"] .back-to-top svg { stroke: #cfe0f8; }
[data-theme="dark"] .service-card,
[data-theme="dark"] .why-card {
background: #0d1c36;
border-color: rgba(255,255,255,0.09);
box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
/* === 7. INNER PAGES (services / about / portfolio / contact) === */
/* page heroes get the same tinted dark treatment as the home hero */
[data-theme="dark"] .svc-hero,
[data-theme="dark"] .page-hero,
[data-theme="dark"] .pf-hero,
[data-theme="dark"] .cp-hero {
background:
radial-gradient(900px 420px at 50% -5%, rgba(37,99,235,0.20) 0%, transparent 66%),
linear-gradient(180deg, #08142a 0%, #070f1f 100%);
}
/* flat dark for the remaining light page surfaces */
[data-theme="dark"] .sp-intro,
[data-theme="dark"] .sp-cards-section,
[data-theme="dark"] .sp-cases-section,
[data-theme="dark"] .sp-features-section,
[data-theme="dark"] .pf-trust,
[data-theme="dark"] .pf-expertise,
[data-theme="dark"] .pf-coming,
[data-theme="dark"] .contact-page-main {
background: #070f1f;
}
/* inner-page headings */
[data-theme="dark"] .svc-hero h1,
[data-theme="dark"] .page-hero h1,
[data-theme="dark"] .pf-hero h1,
[data-theme="dark"] .cp-hero h1 { color: #ffffff; }
/* cards on inner pages */
[data-theme="dark"] .testimonial-card {
background: #0d1c36;
border-color: rgba(255,255,255,0.09);
box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
[data-theme="dark"] .pf-coming-btn {
background: #101d33;
border-color: rgba(255,255,255,0.12);
color: #dbe6f7;
}
/* form controls */
[data-theme="dark"] .cp-form-card input,
[data-theme="dark"] .cp-form-card select,
[data-theme="dark"] .cp-form-card textarea,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
background: #0d1728;
border-color: rgba(255,255,255,0.14);
color: #eaf1fb;
}
[data-theme="dark"] .cp-form-card input::placeholder,
[data-theme="dark"] .cp-form-card textarea::placeholder,
[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder { color: #6f7f96; }
[data-theme="dark"] .cp-form-card input:focus,
[data-theme="dark"] .cp-form-card select:focus,
[data-theme="dark"] .cp-form-card textarea:focus,
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .form-group select:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.22);
}
[data-theme="dark"] .cp-form-card,
[data-theme="dark"] .cp-form-card label { color: var(--text-dark); }
[data-theme="dark"] .cp-form-card {
background: #0d1c36;
border-color: rgba(255,255,255,0.09);
}
/* contact sidebar (was #e8e8e8) */
[data-theme="dark"] .cp-sidebar-card {
background: #0d1c36;
border-color: rgba(255,255,255,0.09);
box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
[data-theme="dark"] .cp-info-item a { color: #7fb0ff; }
[data-theme="dark"] .cp-info-item a:hover { color: #a8c9ff; }
[data-theme="dark"] .pf-coming-btn:hover { background: #16263f; }
/* === 8. REMAINING HARD-CODED NAVY TEXT ON NOW-DARK SURFACES === */
[data-theme="dark"] .sp-section-header h2,
[data-theme="dark"] .pf-section-head h2,
[data-theme="dark"] .about-software h2 { color: #ffffff; }
[data-theme="dark"] .pf-label { color: #7fb0ff; }
[data-theme="dark"] .breadcrumb a:hover,
[data-theme="dark"] .breadcrumb .current { color: #9cc4ff; }
[data-theme="dark"] .about-software p { color: var(--text-body); }
[data-theme="dark"] .about-software p.lead { color: #e6edf8; }
[data-theme="dark"] .about-software p strong { color: #9cc4ff; }
[data-theme="dark"] .quote-icon { color: #3b6bc4; }
/* ============================================================
9. FULL-BLEED HERO
The photo fills the whole hero section and the copy sits on
top of it. The ![]()
is kept (rather than a CSS background)
so the alt text and eager loading survive.
============================================================ */
/* the visual becomes a full-section layer behind the copy */
.hero .hero-visual {
position: absolute;
inset: 0;
z-index: 0;
display: block;
pointer-events: none;
}
.hero .hero-product {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
border: none;
border-radius: 0;
background: none;
box-shadow: none;
animation: none; /* kill the floating-card motion */
}
.hero .hero-product img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% center;
border-radius: 0;
mix-blend-mode: normal;
opacity: 1;
filter: none;
}
.hero .hero-product::after { content: none; }
/* readability scrim — heavy on the left, clearing to the right */
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(95deg,
rgba(5,13,32,0.95) 0%,
rgba(6,16,38,0.88) 30%,
rgba(7,18,44,0.58) 58%,
rgba(8,20,48,0.30) 100%);
}
[data-theme="dark"] .hero::before {
background: linear-gradient(95deg,
rgba(3,9,22,0.97) 0%,
rgba(4,11,28,0.92) 30%,
rgba(5,13,34,0.70) 58%,
rgba(6,15,38,0.44) 100%);
}
/* copy sits above the photo, single column */
.hero-inner {
grid-template-columns: 1fr;
min-height: 660px;
z-index: 2;
}
.hero-content { max-width: 640px; }
/* the hero is now dark in BOTH themes, so the copy is always light */
.hero h1,
.hero h1 .highlight { color: #ffffff; }
.hero-tagline { color: rgba(255,255,255,0.92); }
.hero-message { color: rgba(214,226,244,0.82); }
.trust-item { color: rgba(255,255,255,0.62); }
.trust-item svg { stroke: #60a5fa; }
.hero .btn-primary {
background: #2563EB;
border-color: #2563EB;
color: #fff;
box-shadow: 0 10px 28px -10px rgba(37,99,235,0.75);
}
.hero .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.hero .btn-outline {
background: #ffffff;
color: #0A2463;
border-color: #ffffff;
}
.hero .btn-outline:hover {
background: rgba(255,255,255,0.88);
color: #0A2463;
border-color: rgba(255,255,255,0.88);
}
@media (max-width: 992px) {
.hero-inner { min-height: 560px; text-align: left; }
.hero-content { margin: 0; }
.hero-message { margin-left: 0; margin-right: 0; }
.hero-buttons { justify-content: flex-start; }
.hero-trust { justify-content: flex-start; }
.hero .hero-product img { object-position: 62% center; }
}
@media (max-width: 600px) {
.hero-inner { min-height: 500px; }
.hero::before {
background: linear-gradient(180deg,
rgba(5,13,32,0.92) 0%, rgba(6,16,38,0.88) 55%, rgba(7,18,44,0.80) 100%);
}
}
/* === 11. MOBILE HEADER FIT ===================================
The logo renders ~273px wide at its 52px height, which left
no room for the theme toggle beside it on small screens.
============================================================ */
@media (max-width: 700px) {
.header-inner {
padding: 8px 16px;
gap: 10px;
}
.logo-img {
height: 40px !important;
min-height: 40px !important;
}
}
@media (max-width: 420px) {
.logo-img { height: 34px !important; min-height: 34px !important; }
.header-inner { padding: 8px 12px; }
}
/* ============================================================
12. HERO MOTION LAYER — sweeping light beams
Razor-thin glowing streaks that travel across the image side,
plus a slow drift on the photo itself.
============================================================ */
/* layering: photo 0 · scrim 1 · beams 2 · copy 3 */
.hero-fx {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
/* keep the light show on the image side, clear of the headline */
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 30%, #000 55%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 30%, #000 55%);
}
.hero-inner { z-index: 3; }
/* slow drift on the photo */
@keyframes hero-kenburns {
0% { transform: scale(1.05) translate3d(0, 0, 0); }
50% { transform: scale(1.13) translate3d(-1.4%, -1.1%, 0); }
100% { transform: scale(1.05) translate3d(0, 0, 0); }
}
.hero .hero-product img {
animation: hero-kenburns 30s ease-in-out infinite;
will-change: transform;
}
/* --- the beams --- */
.beam {
position: absolute;
top: -45%;
width: 2px;
height: 45%;
border-radius: 2px;
background: linear-gradient(to bottom,
rgba(125, 211, 252, 0) 0%,
rgba(125, 211, 252, 0.9) 45%,
rgba(255, 255, 255, 1) 72%,
rgba(56, 189, 248, 0) 100%);
filter: drop-shadow(0 0 6px rgba(56,189,248,0.95))
drop-shadow(0 0 20px rgba(56,189,248,0.55));
opacity: 0;
will-change: transform, opacity;
animation: beam-streak 6s linear infinite;
}
@keyframes beam-streak {
0% { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; }
8% { opacity: 1; }
82% { opacity: 1; }
100% { transform: translate3d(-90px, 340%, 0) rotate(18deg); opacity: 0; }
}
.beam-1 { left: 58%; height: 38%; animation-duration: 5.2s; animation-delay: 0s; }
.beam-2 { left: 66%; height: 52%; animation-duration: 7.4s; animation-delay: -1.8s; width: 1px; }
.beam-3 { left: 73%; height: 30%; animation-duration: 4.4s; animation-delay: -3.2s; }
.beam-4 { left: 81%; height: 58%; animation-duration: 8.1s; animation-delay: -0.9s; width: 3px; }
.beam-5 { left: 88%; height: 34%; animation-duration: 5.8s; animation-delay: -4.6s; width: 1px; }
.beam-6 { left: 94%; height: 46%; animation-duration: 6.6s; animation-delay: -2.4s; }
.beam-7 { left: 50%; height: 26%; animation-duration: 9.2s; animation-delay: -6.1s; width: 1px; }
/* a couple of beams in the accent violet/green for variety */
.beam-2 { background: linear-gradient(to bottom, rgba(167,139,250,0) 0%, rgba(167,139,250,0.9) 45%, #fff 72%, rgba(167,139,250,0) 100%);
filter: drop-shadow(0 0 6px rgba(167,139,250,0.95)) drop-shadow(0 0 20px rgba(167,139,250,0.5)); }
.beam-5 { background: linear-gradient(to bottom, rgba(94,234,212,0) 0%, rgba(94,234,212,0.9) 45%, #fff 72%, rgba(94,234,212,0) 100%);
filter: drop-shadow(0 0 6px rgba(94,234,212,0.95)) drop-shadow(0 0 20px rgba(94,234,212,0.5)); }
/* --- wide scanning sweep --- */
.hero-sweep {
position: absolute;
top: -60%;
left: 30%;
width: 78%;
height: 60%;
background: linear-gradient(to bottom,
rgba(120,190,255,0) 0%,
rgba(120,190,255,0.10) 45%,
rgba(160,215,255,0.22) 62%,
rgba(120,190,255,0) 100%);
transform: rotate(18deg);
filter: blur(6px);
animation: hero-sweep-move 11s ease-in-out infinite;
}
@keyframes hero-sweep-move {
0%, 100% { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; }
12% { opacity: 1; }
78% { opacity: 1; }
95%, 100% { transform: translate3d(-150px, 320%, 0) rotate(18deg); opacity: 0; }
}
@media (max-width: 992px) {
.hero-fx { -webkit-mask-image: none; mask-image: none; opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
.hero .hero-product img { animation: none !important; }
.hero-fx { display: none; }
}
/* ============================================================
13. SERVICES PAGE — full-bleed hero, same treatment as home
============================================================ */
.svc-hero {
position: relative;
overflow: hidden;
background: #08142a;
}
.svc-hero-visual {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.svc-hero-visual img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
animation: hero-kenburns 30s ease-in-out infinite;
will-change: transform;
}
/* readability scrim — centred copy, so darken the middle */
.svc-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 62% 76% at 50% 50%, rgba(4,11,26,0.88) 0%, rgba(5,13,30,0.62) 55%, rgba(6,15,34,0.36) 100%),
linear-gradient(180deg, rgba(5,12,28,0.78) 0%, rgba(5,12,28,0.40) 45%, rgba(5,12,28,0.80) 100%);
}
/* beams sit above the scrim, copy above them */
.svc-hero .hero-fx { z-index: 2; }
.svc-hero-inner {
position: relative;
z-index: 3;
}
/* centred hero -> spread the beams and dim them through the middle */
.hero-fx--center {
-webkit-mask-image: radial-gradient(ellipse 52% 66% at 50% 50%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 58%, #000 100%);
mask-image: radial-gradient(ellipse 52% 66% at 50% 50%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 58%, #000 100%);
}
.hero-fx--center .beam-1 { left: 8%; }
.hero-fx--center .beam-2 { left: 19%; }
.hero-fx--center .beam-3 { left: 31%; }
.hero-fx--center .beam-4 { left: 68%; }
.hero-fx--center .beam-5 { left: 79%; }
.hero-fx--center .beam-6 { left: 90%; }
.hero-fx--center .beam-7 { left: 44%; }
.hero-fx--center .hero-sweep { left: 6%; width: 88%; }
/* the services hero is dark in both themes now */
.svc-hero h1 { color: #ffffff; }
.svc-hero p { color: rgba(214,226,244,0.84); }
.svc-hero-tag {
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
color: #dbe9ff;
}
.svc-hero-btn {
background: #2563EB;
border-color: #2563EB;
color: #fff;
box-shadow: 0 10px 28px -10px rgba(37,99,235,0.75);
}
.svc-hero-btn:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
/* dark-mode section 7 set a gradient background on .svc-hero; the
image layer now supplies it, so keep the base colour only */
[data-theme="dark"] .svc-hero { background: #060d1e; }
/* --- services hero: brighter background --- */
.svc-hero-visual img {
filter: brightness(1.55) saturate(1.35) contrast(1.06);
}
.svc-hero::before {
background:
radial-gradient(ellipse 60% 74% at 50% 50%, rgba(4,11,26,0.62) 0%, rgba(5,13,30,0.34) 58%, rgba(6,15,34,0.12) 100%),
linear-gradient(180deg, rgba(5,12,28,0.55) 0%, rgba(5,12,28,0.14) 45%, rgba(5,12,28,0.58) 100%);
}
/* keep the copy crisp against the brighter, busier backdrop */
.svc-hero h1 { text-shadow: 0 2px 20px rgba(3,9,22,0.80); }
.svc-hero p { color: rgba(228,238,252,0.94); text-shadow: 0 1px 14px rgba(3,9,22,0.88); }
/* ============================================================
14. ABOUT PAGE — full-bleed hero, same treatment as services
(.page-hero is used only by about.html)
============================================================ */
.page-hero {
position: relative;
overflow: hidden;
background: #08142a;
padding: 128px 0 76px;
}
.page-hero-visual {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.page-hero-visual img {
width: 100%;
height: 100%;
object-fit: cover;
/* bias upward so the hex band along the bottom stays out of frame */
object-position: center 38%;
display: block;
filter: brightness(1.18) saturate(1.15);
animation: hero-kenburns 30s ease-in-out infinite;
will-change: transform;
}
/* centred copy -> darken the middle */
.page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 58% 72% at 50% 50%, rgba(4,11,26,0.80) 0%, rgba(5,13,30,0.50) 58%, rgba(6,15,34,0.22) 100%),
linear-gradient(180deg, rgba(5,12,28,0.62) 0%, rgba(5,12,28,0.20) 45%, rgba(5,12,28,0.66) 100%);
}
.page-hero::after { content: none; }
.page-hero .hero-fx { z-index: 2; }
.page-hero .container { position: relative; z-index: 3; }
/* dark in both themes, so the copy is always light */
.page-hero h1 {
color: #ffffff;
text-shadow: 0 2px 20px rgba(3,9,22,0.80);
}
.page-hero p {
color: rgba(228,238,252,0.94);
text-shadow: 0 1px 14px rgba(3,9,22,0.88);
}
[data-theme="dark"] .page-hero { background: #060d1e; }
/* the about image is very wide (2.1:1); a short hero crops the
subjects badly, so give it height and reframe */
.page-hero {
min-height: 560px;
display: flex;
align-items: center;
padding: 130px 0 64px;
}
.page-hero-visual img { object-position: center 46%; }
/* flexing .page-hero shrank .container to content width, which broke
the centred alignment — make it span the full row again */
.page-hero > .container { width: 100%; }
/* sit the copy in the upper band (screens/graphics) so it doesn't
cover the three figures in the middle of the frame */
.page-hero {
align-items: flex-start;
padding: 132px 0 72px;
}
/* --- about hero: stats band fills the lower half --- */
.page-hero { align-items: stretch; }
.page-hero > .container {
display: flex;
flex-direction: column;
}
.page-hero-copy { flex: 0 0 auto; }
/* once the nav collapses, space-between strands the toggle in the
middle of the header — pin it beside the hamburger instead */
@media (max-width: 992px) {
}
/* give the stat cards room to breathe a bit sooner */
/* --- about hero: service pillars band (replaces the stats band) --- */
@media (max-width: 960px) {
}
@media (max-width: 520px) {
}
/* ============================================================
15. COMPACT FOOTER
Same content and structure, tightened spacing and scale.
============================================================ */
.footer { padding: 20px 0 0; }
.footer-grid {
gap: 34px;
padding-bottom: 20px;
}
.footer .logo-img { height: 40px; }
.footer-brand > a.logo { padding-top: 12px; }
.footer-brand .logo-svg { margin-bottom: 10px; }
.footer-brand .footer-tagline {
font-size: 0.78rem;
margin-bottom: 10px;
line-height: 1.5;
}
.footer-brand .footer-desc {
font-size: 0.82rem;
line-height: 1.6;
margin-bottom: 16px;
}
.footer-col h4 { margin-bottom: 12px; }
.footer-links { gap: 7px; }
.footer-links a { font-size: 0.84rem; }
.footer-contact-item { margin-bottom: 11px; gap: 10px; }
.footer-contact-item span,
.footer-contact-item a { font-size: 0.84rem; line-height: 1.5; }
.footer-map-col iframe { height: 118px; }
.social-links { gap: 9px; }
.social-link { width: 30px; height: 30px; }
.footer-bottom { padding: 15px 0; gap: 10px; }
.footer-bottom p,
.footer-bottom-links a { font-size: 0.78rem; }
@media (max-width: 600px) {
.footer-grid { gap: 24px; }
.footer .logo-img { height: 34px; }
}
/* ============================================================
16. PORTFOLIO PAGE — image runs the full page, hero to footer
A fixed layer sits behind everything; the page sections go
transparent so it shows through the whole scroll.
============================================================ */
.pf-page { background: #050e20; }
.pf-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
.pf-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: brightness(1.05) saturate(1.1);
}
/* scrim so copy stays readable over the whole scroll */
.pf-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(4,10,24,0.72) 0%, rgba(4,10,24,0.55) 40%, rgba(4,10,24,0.78) 100%);
}
/* everything else sits above the fixed layer */
/* only the in-flow wrappers need lifting; the fixed overlays
(header, mobile nav, cookie banner, back-to-top, whatsapp)
already stack above the z-index:0 background layer, and
forcing them to position:relative dropped them into the
flow and added dead height after the footer. */
.pf-page > main,
.pf-page > footer { position: relative; z-index: 1; }
.pf-page > .header { z-index: 1000; }
/* let the image through every section, in both themes */
.pf-page main,
.pf-page .pf-hero,
.pf-page .pf-trust,
.pf-page .pf-expertise,
.pf-page .pf-coming,
[data-theme="dark"] .pf-page .pf-hero,
[data-theme="dark"] .pf-page .pf-trust,
[data-theme="dark"] .pf-page .pf-expertise,
[data-theme="dark"] .pf-page .pf-coming { background: transparent; }
.pf-page .pf-hero::before { background: none; }
/* dark in both themes -> copy is always light */
.pf-page .pf-hero h1,
.pf-page .pf-section-head h2 { color: #ffffff; text-shadow: 0 2px 20px rgba(3,9,22,0.85); }
.pf-page .pf-hero p,
.pf-page .pf-section-head p { color: rgba(226,236,252,0.90); text-shadow: 0 1px 14px rgba(3,9,22,0.9); }
.pf-page .pf-label { color: #7fb0ff; }
/* cards get glass so the backdrop reads through them */
.pf-page .pf-trust-item,
.pf-page .pf-exp-card,
.pf-page .pf-coming-card {
background: rgba(8, 18, 40, 0.55);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.pf-page .pf-exp-card:hover { background: rgba(14, 30, 64, 0.68); }
.pf-page .pf-coming-btn {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.22);
color: #eaf2ff;
}
.pf-page .pf-coming-btn:hover { background: rgba(255,255,255,0.18); }
/* the trust strip's own navy panel was blocking the backdrop —
glass the grid, keep the cells transparent */
.pf-page .pf-trust-grid {
background: rgba(8, 18, 40, 0.55);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.pf-page .pf-trust-item {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.pf-page .pf-trust-item:last-child { border-right: none; }
.pf-page .pf-trust-item:hover { background: rgba(255, 255, 255, 0.06); }
/* ============================================================
17. ABOUT PAGE — image runs the full page, hero to footer
Same pattern as the portfolio page.
============================================================ */
.ab-page { background: #050e20; }
.ab-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
.ab-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 46%;
display: block;
filter: brightness(1.12) saturate(1.12);
animation: hero-kenburns 30s ease-in-out infinite;
will-change: transform;
}
.ab-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(4,10,24,0.70) 0%, rgba(4,10,24,0.55) 38%, rgba(4,10,24,0.80) 100%);
}
/* only in-flow wrappers get lifted (fixed overlays already stack higher) */
.ab-page > main,
.ab-page > footer { position: relative; z-index: 1; }
.ab-page > .header { z-index: 1000; }
/* let the image through every section, in both themes */
.ab-page main,
.ab-page .page-hero,
.ab-page .section,
.ab-page .section-light,
[data-theme="dark"] .ab-page .page-hero,
[data-theme="dark"] .ab-page .section,
[data-theme="dark"] .ab-page .section-light { background: transparent; }
/* the hero keeps a slightly deeper scrim behind the headline */
.ab-page .page-hero::before {
background: radial-gradient(ellipse 58% 70% at 50% 42%,
rgba(4,11,26,0.62) 0%, rgba(5,13,30,0.30) 60%, rgba(6,15,34,0.08) 100%);
}
/* copy is light across the whole page now. Scoped to main: unscoped,
these also claimed the shared header and footer, which every other
page leaves to the global navbar/footer rules. */
.ab-page main h1,
.ab-page main h2,
.ab-page main h3,
.ab-page main h4,
.ab-page .section-title h2,
.ab-page .about-software h2 { color: #ffffff; }
.ab-page main p,
.ab-page main li,
.ab-page .section-title p,
.ab-page .about-software p { color: rgba(216,228,246,0.86); }
.ab-page .about-software p.lead { color: #eaf2ff; }
.ab-page .about-software p strong { color: #9cc4ff; }
/* cards go glass so the backdrop reads through */
.ab-page .vm-card,
.ab-page .value-card,
.ab-page .about-pillar {
background: rgba(8, 18, 40, 0.55);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.8);
}
.ab-page .vm-card:hover,
.ab-page .value-card:hover { border-color: rgba(96, 165, 250, 0.45); }
/* the middle of the about image is busy (figures + holo table), so
deepen the scrim and give the body copy a shadow to sit on */
.ab-bg::after {
background: linear-gradient(180deg,
rgba(4,10,24,0.72) 0%,
rgba(4,10,24,0.80) 34%,
rgba(4,10,24,0.86) 62%,
rgba(4,10,24,0.88) 100%);
}
/* Scoped to main. Unscoped, these matched the and inside the
shared header and footer too, so the About navbar and footer links
rendered with a 12px dark glow that no other page had. */
.ab-page main h1,
.ab-page main h2,
.ab-page main h3 { text-shadow: 0 2px 18px rgba(3,9,22,0.85); }
.ab-page main p,
.ab-page main li { text-shadow: 0 1px 12px rgba(3,9,22,0.9); }
/* cards carry their own backdrop, so they don't need it */
.ab-page .vm-card h3, .ab-page .vm-card p,
.ab-page .value-card h3, .ab-page .value-card p,
.ab-page .php-item strong, .ab-page .php-item span { text-shadow: none; }
/* outline button was nearly invisible on the dark backdrop */
.ab-page .btn-outline-blue {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.35);
color: #eaf2ff;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.ab-page .btn-outline-blue:hover {
background: rgba(255,255,255,0.20);
border-color: rgba(255,255,255,0.55);
color: #ffffff;
}
.ab-page .about-pillar {
background: rgba(8,18,40,0.62);
border: 1px solid rgba(255,255,255,0.16);
color: #dbe9ff;
}
/* ============================================================
18. HOME PAGE — image runs the full page, hero to footer
============================================================ */
.hm-page { background: #050e20; }
.hm-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.hm-bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 70% center;
display: block;
animation: hero-kenburns 30s ease-in-out infinite;
will-change: transform;
}
.hm-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(95deg, rgba(5,13,32,0.94) 0%, rgba(6,16,38,0.86) 30%, rgba(7,18,44,0.62) 58%, rgba(8,20,48,0.46) 100%),
linear-gradient(180deg, rgba(4,10,24,0.30) 0%, rgba(4,10,24,0.62) 55%, rgba(4,10,24,0.82) 100%);
}
.hm-page > main,
.hm-page > footer { position: relative; z-index: 1; }
.hm-page > .header { z-index: 1000; }
.hm-page main,
.hm-page .hero,
.hm-page .section,
.hm-page .section-light,
[data-theme="dark"] .hm-page .hero,
[data-theme="dark"] .hm-page .section,
[data-theme="dark"] .hm-page .section-light { background: transparent; }
/* the page-level scrim replaces the hero-only one */
.hm-page .hero::before { background: none; }
.hm-page main h2, .hm-page main h3, .hm-page main h4,
.hm-page .section-title h2 { color: #ffffff; text-shadow: 0 2px 18px rgba(3,9,22,0.85); }
.hm-page .section-title p,
.hm-page .section p { color: rgba(216,228,246,0.86); }
.hm-page .service-card,
.hm-page .why-card {
background: rgba(8,18,40,0.58);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.14);
}
.hm-page .service-card h3, .hm-page .service-card p,
.hm-page .why-card h3, .hm-page .why-card p { text-shadow: none; }
.hm-page .industry-tag {
background: rgba(8,18,40,0.58);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.16);
color: #dbe9ff;
}
.hm-page .back-to-top { background: rgba(8,18,40,0.75); border-color: rgba(255,255,255,0.2); }
/* ============================================================
19. SERVICES PAGE — image runs the full page, hero to footer
============================================================ */
.sv-page { background: #050e20; }
.sv-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.sv-bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: brightness(1.45) saturate(1.3) contrast(1.05);
animation: hero-kenburns 30s ease-in-out infinite;
will-change: transform;
}
.sv-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(4,10,24,0.62) 0%, rgba(4,10,24,0.72) 34%, rgba(4,10,24,0.80) 66%, rgba(4,10,24,0.84) 100%);
}
.sv-page > main,
.sv-page > footer { position: relative; z-index: 1; }
.sv-page > .header { z-index: 1000; }
.sv-page main,
.sv-page .svc-hero,
.sv-page .sp-intro,
.sv-page .sp-cards-section,
.sv-page .sp-cases-section,
.sv-page .sp-features-section,
.sv-page .service-detail,
.sv-page .section,
.sv-page .section-light,
[data-theme="dark"] .sv-page .svc-hero,
[data-theme="dark"] .sv-page .sp-intro,
[data-theme="dark"] .sv-page .sp-cards-section,
[data-theme="dark"] .sv-page .sp-cases-section,
[data-theme="dark"] .sv-page .sp-features-section { background: transparent; }
.sv-page .svc-hero::before {
background: radial-gradient(ellipse 58% 70% at 50% 45%,
rgba(4,11,26,0.55) 0%, rgba(5,13,30,0.24) 60%, rgba(6,15,34,0.05) 100%);
}
.sv-page main h2, .sv-page main h3, .sv-page main h4,
.sv-page .sp-section-header h2,
.sv-page .sp-intro-left h2 { color: #ffffff; text-shadow: 0 2px 18px rgba(3,9,22,0.85); }
.sv-page main p, .sv-page main li { color: rgba(216,228,246,0.86); }
.sv-page .sp-card,
.sv-page .sp-case-card,
.sv-page .sp-feature-card {
background: rgba(8,18,40,0.58);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.14);
}
.sv-page .sp-card h3, .sv-page .sp-card p, .sv-page .sp-card li,
.sv-page .sp-case-card h3, .sv-page .sp-case-card p,
.sv-page .sp-feature-card h3, .sv-page .sp-feature-card p { text-shadow: none; }
/* ============================================================
20. CONTACT PAGE — image runs the full page, hero to footer
The circuit-board art is bright and busy, so it carries a
heavier scrim than the other pages, and the form panel stays
near-opaque so inputs remain legible.
============================================================ */
.ct-page { background: #050e20; }
.ct-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ct-bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: brightness(0.78) saturate(0.92);
animation: hero-kenburns 34s ease-in-out infinite;
will-change: transform;
}
.ct-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 78% 70% at 50% 45%, rgba(4,10,24,0.86) 0%, rgba(4,10,24,0.80) 55%, rgba(4,10,24,0.74) 100%),
linear-gradient(180deg, rgba(4,10,24,0.62) 0%, rgba(4,10,24,0.50) 40%, rgba(4,10,24,0.80) 100%);
}
.ct-page > main,
.ct-page > footer { position: relative; z-index: 1; }
.ct-page > .header { z-index: 1000; }
.ct-page main,
.ct-page .contact-page-main,
.ct-page .cp-hero,
.ct-page .cp-body,
[data-theme="dark"] .ct-page .contact-page-main,
[data-theme="dark"] .ct-page .cp-hero { background: transparent; }
.ct-page .cp-hero h1 { color: #ffffff; text-shadow: 0 2px 20px rgba(3,9,22,0.85); }
.ct-page .cp-hero p { color: rgba(224,235,252,0.90); text-shadow: 0 1px 14px rgba(3,9,22,0.9); }
.ct-page .cp-pill {
background: rgba(37,99,235,0.85);
border: 1px solid rgba(255,255,255,0.20);
color: #ffffff;
}
/* panels: form stays solid enough to read, sidebar can be glassier */
.ct-page .cp-form-card {
background: rgba(7, 16, 34, 0.88);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.85);
}
.ct-page .cp-sidebar-card {
background: rgba(8, 18, 40, 0.72);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.85);
}
.ct-page .cp-form-card label,
.ct-page .cp-sidebar-card h3,
.ct-page .cp-sidebar-heading { color: #ffffff; }
.ct-page .cp-form-card input,
.ct-page .cp-form-card select,
.ct-page .cp-form-card textarea {
background: rgba(4, 11, 26, 0.86);
border-color: rgba(255, 255, 255, 0.18);
color: #eaf1fb;
}
.ct-page .cp-info-item strong { color: rgba(180, 200, 226, 0.95); }
.ct-page .cp-info-item span { color: #e6eefc; }
.ct-page .cp-info-item a { color: #8dbaff; }
/* --- contact background: bright --- */
.ct-bg img { filter: brightness(1.45) saturate(1.35) contrast(1.05); }
.ct-bg::after {
background:
radial-gradient(ellipse 76% 68% at 50% 45%, rgba(4,10,24,0.46) 0%, rgba(4,10,24,0.34) 55%, rgba(4,10,24,0.24) 100%),
linear-gradient(180deg, rgba(4,10,24,0.32) 0%, rgba(4,10,24,0.16) 42%, rgba(4,10,24,0.52) 100%);
}
/* --- FAQ accordion ---------------------------------------------
.faq-question uses background: var(--white), which is deliberately
never flipped (it is used 26x as a text colour). In dark mode the
card stayed white while its text (var(--text-dark)) turned light,
leaving the questions invisible. The services page is image-backed
in both themes, so the cards become glass with light text. */
.sv-page .faq-item {
background: rgba(8, 18, 40, 0.62);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-color: rgba(255, 255, 255, 0.16);
}
.sv-page .faq-question {
background: transparent;
color: #ffffff;
text-shadow: none;
}
.sv-page .faq-question:hover,
.sv-page .faq-item.active .faq-question { color: #7fb0ff; }
.sv-page .faq-answer-inner {
color: rgba(214, 228, 248, 0.86);
text-shadow: none;
}
/* same component, generic dark mode (in case it is reused elsewhere) */
[data-theme="dark"] .faq-item { border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .faq-question { background: #0d1c36; color: #ffffff; }
[data-theme="dark"] .faq-answer-inner { color: rgba(214,228,248,0.86); }
/* --- contact background: eased back from full brightness --- */
.ct-bg img { filter: brightness(1.10) saturate(1.18) contrast(1.02); }
.ct-bg::after {
background:
radial-gradient(ellipse 76% 68% at 50% 45%, rgba(4,10,24,0.62) 0%, rgba(4,10,24,0.52) 55%, rgba(4,10,24,0.44) 100%),
linear-gradient(180deg, rgba(4,10,24,0.44) 0%, rgba(4,10,24,0.30) 42%, rgba(4,10,24,0.62) 100%);
}
/* ============================================================
21. HOME HERO — showcase card on the right
The page background stays the office photo; this is a small
framed panel, not another background layer.
============================================================ */
@media (min-width: 993px) {
.hero-inner {
grid-template-columns: 1.02fr 0.98fr;
gap: 48px;
align-items: center;
}
.hero-content { max-width: 600px; }
}
.hero-card {
position: relative;
width: 100%;
max-width: 560px;
justify-self: end;
animation: hcard-float 8s ease-in-out infinite;
}
.hero-card-frame {
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 40px 90px -30px rgba(0, 0, 0, 0.85),
0 0 90px -35px rgba(37, 99, 235, 0.55);
}
.hero-card-frame img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 11;
object-fit: cover;
}
/* floating labels */
.hero-card-pill {
position: absolute;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 16px;
border-radius: 12px;
background: rgba(9, 20, 45, 0.72);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #eaf2ff;
font-family: var(--font-head);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.8);
animation: chip-float 7.5s ease-in-out infinite;
}
.hero-card-pill i {
width: 8px; height: 8px;
border-radius: 50%;
background: #3b82f6;
flex-shrink: 0;
animation: chip-pulse 2.4s ease-out infinite;
}
.hcp-1 { top: 8%; left: -6%; animation-delay: 0s; }
.hcp-2 { top: 46%; right: -7%; animation-delay: -2.5s; }
.hcp-3 { bottom: 9%; left: 4%; animation-delay: -5s; }
.hcp-2 i { background: #22c55e; }
.hcp-3 i { background: #a855f7; }
@media (max-width: 992px) {
.hero-card { max-width: 520px; margin: 8px auto 0; justify-self: center; }
.hcp-1 { left: 0; }
.hcp-2 { right: 0; }
}
@media (max-width: 600px) {
.hero-card-pill { font-size: 0.72rem; padding: 8px 12px; }
.hcp-1 { top: 5%; }
.hcp-3 { bottom: 5%; }
}
@media (prefers-reduced-motion: reduce) {
.hero-card, .hero-card-pill, .hero-card-pill i { animation: none !important; }
}
/* the right-hand pill overhung the viewport edge and clipped */
.hcp-2 { right: 1%; }
@media (max-width: 992px) { .hcp-2 { right: 2%; } }
/* ============================================================
21b. ABOUT HERO — two-column intro block
Replaces the pillar band: copy + value chips on the left,
supporting image on the right. Background is unchanged.
============================================================ */
.page-hero { min-height: auto; padding: 128px 0 84px; }
.ab-intro {
margin-top: 56px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
text-align: left;
}
.ab-intro-copy h2 {
font-size: clamp(2rem, 3.4vw, 3rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 18px;
color: #ffffff;
}
.ab-rule {
display: block;
width: 62px;
height: 4px;
border-radius: 2px;
background: #3b82f6;
margin-bottom: 24px;
}
.ab-intro-copy p {
font-size: 1rem;
line-height: 1.75;
color: rgba(216, 228, 246, 0.88);
margin-bottom: 18px;
max-width: 560px;
}
.ab-chips {
margin-top: 30px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
max-width: 560px;
}
.ab-chip {
display: block;
padding: 18px 20px;
border-left: 4px solid #3b82f6;
border-radius: 4px;
background: rgba(11, 24, 50, 0.62);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
font-family: var(--font-head);
font-size: 0.95rem;
font-weight: 600;
color: #eaf2ff;
transition: background 0.25s ease, border-color 0.25s ease;
}
.ab-chip:hover { background: rgba(18, 38, 76, 0.75); }
.ab-intro-media {
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
0 40px 90px -30px rgba(0, 0, 0, 0.85),
0 0 90px -35px rgba(37, 99, 235, 0.45);
}
.ab-intro-media img {
display: block;
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
}
@media (max-width: 992px) {
.ab-intro { grid-template-columns: 1fr; gap: 34px; margin-top: 40px; }
.ab-intro-media { order: -1; }
.ab-intro-media img { min-height: 260px; }
.ab-intro-copy p, .ab-chips { max-width: none; }
}
@media (max-width: 520px) {
.ab-chips { grid-template-columns: 1fr; gap: 10px; }
.ab-chip { padding: 14px 16px; }
}
/* --- about intro image: smaller, square panel --- */
.ab-intro { grid-template-columns: 1.32fr 0.68fr; gap: 48px; }
.ab-intro-media {
max-width: 340px;
width: 100%;
justify-self: end;
align-self: center;
}
.ab-intro-media img {
min-height: 0;
aspect-ratio: 1 / 1;
height: auto;
}
@media (max-width: 992px) {
.ab-intro { grid-template-columns: 1fr; }
.ab-intro-media { max-width: 300px; justify-self: center; }
.ab-intro-media img { aspect-ratio: 1 / 1; min-height: 0; }
}
/* --- about intro image: larger --- */
.ab-intro { grid-template-columns: 1.12fr 0.88fr; gap: 52px; }
.ab-intro-media { max-width: 470px; }
@media (max-width: 992px) {
.ab-intro { grid-template-columns: 1fr; }
.ab-intro-media { max-width: 380px; justify-self: center; }
}
/* --- about intro: larger, more premium typography --- */
.ab-intro { gap: 60px; align-items: center; }
.ab-intro-copy h2 {
font-size: clamp(2.5rem, 4.4vw, 3.9rem);
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.035em;
margin-bottom: 22px;
}
.ab-rule {
width: 84px;
height: 5px;
margin-bottom: 32px;
background: linear-gradient(90deg, #60a5fa 0%, #2563EB 100%);
}
.ab-intro-copy p {
font-size: 1.135rem;
line-height: 1.82;
letter-spacing: -0.005em;
color: rgba(224, 234, 250, 0.9);
margin-bottom: 22px;
max-width: 620px;
}
.ab-chips { margin-top: 38px; gap: 16px; max-width: 620px; }
.ab-chip {
padding: 22px 26px;
font-size: 1.06rem;
font-weight: 700;
letter-spacing: -0.01em;
border-left-width: 5px;
border-radius: 6px;
}
/* the image is cropped tighter now, so give it a touch more room */
.ab-intro-media { max-width: 500px; }
.ab-intro-media img { aspect-ratio: 1 / 1; }
@media (max-width: 992px) {
.ab-intro-copy p, .ab-chips { max-width: none; }
.ab-intro-media { max-width: 400px; }
}
@media (max-width: 600px) {
.ab-intro-copy h2 { font-size: clamp(2rem, 8vw, 2.6rem); }
.ab-intro-copy p { font-size: 1.05rem; }
.ab-chip { padding: 16px 18px; font-size: 0.98rem; }
}
/* --- about intro: dial the type back down a step --- */
.ab-intro-copy h2 {
font-size: clamp(2.05rem, 3.5vw, 3.05rem);
line-height: 1.08;
letter-spacing: -0.03em;
margin-bottom: 20px;
}
.ab-rule { width: 72px; height: 4px; margin-bottom: 28px; }
.ab-intro-copy p {
font-size: 1.04rem;
line-height: 1.78;
margin-bottom: 20px;
}
.ab-chips { margin-top: 32px; gap: 14px; }
.ab-chip {
padding: 18px 22px;
font-size: 0.97rem;
font-weight: 600;
border-left-width: 4px;
}
@media (max-width: 600px) {
.ab-intro-copy h2 { font-size: clamp(1.85rem, 7.4vw, 2.3rem); }
.ab-intro-copy p { font-size: 0.99rem; }
.ab-chip { padding: 14px 16px; font-size: 0.93rem; }
}
/* --- about intro image: swap the black backdrop for blue fog -----
mix-blend-mode: screen makes pure black transparent, so the panel's
gradient shows through the dead space while the cable and fibres
keep their full detail. No pixel editing needed. */
.ab-intro-media {
background:
radial-gradient(ellipse 68% 58% at 62% 26%, rgba(96,165,250,0.38) 0%, rgba(59,130,246,0.12) 45%, transparent 70%),
radial-gradient(ellipse 85% 72% at 28% 82%, rgba(37,99,235,0.30) 0%, transparent 72%),
linear-gradient(155deg, #0c1c39 0%, #14305a 52%, #0a1830 100%);
}
.ab-intro-media img {
mix-blend-mode: screen;
}
/* --- about intro image: restore punch under the screen blend -----
screen lifts blacks by the backdrop value, which flattens contrast.
Pre-boosting the source and easing the fog puts the depth back. */
.ab-intro-media {
position: relative;
background:
radial-gradient(ellipse 66% 56% at 62% 26%, rgba(96,165,250,0.26) 0%, rgba(59,130,246,0.08) 46%, transparent 72%),
radial-gradient(ellipse 84% 70% at 28% 84%, rgba(37,99,235,0.20) 0%, transparent 74%),
linear-gradient(155deg, #091730 0%, #0f2547 54%, #071426 100%);
background-color: #091730;
}
.ab-intro-media img {
mix-blend-mode: screen;
filter: contrast(1.46) saturate(1.34) brightness(1.05);
}
/* vignette restores the 3D falloff the blend washed out */
.ab-intro-media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(ellipse 76% 76% at 52% 42%, transparent 42%, rgba(3,9,22,0.50) 100%);
}
/* contrast alone crushed the metal barrel; lead with brightness so the
steel stays bright and detailed while the fibres keep their glow */
.ab-intro-media img {
filter: brightness(1.26) contrast(1.14) saturate(1.28);
}
.ab-intro-media::after {
background: radial-gradient(ellipse 82% 82% at 52% 44%, transparent 56%, rgba(3,9,22,0.30) 100%);
}
/* --- about intro image: keep the fog, restore a crisp subject -----
screen lifts EVERY pixel by the backdrop value, so the cable could
never stay sharp. lighten takes max(image, backdrop) per channel:
black areas fall back to the fog, but anything brighter than the
fog — the whole connector and fibre burst — renders untouched. */
.ab-intro-media img {
mix-blend-mode: lighten;
filter: brightness(1.14) contrast(1.22) saturate(1.32);
}
.ab-intro-media::after {
background: radial-gradient(ellipse 86% 86% at 52% 44%, transparent 62%, rgba(3,9,22,0.26) 100%);
}
/* --- about intro image: crisp subject, fog only at the edges ------
Blend modes can't separate this subject: the connector body is
darker than the fog, so lighten ate the metal and screen washed
everything. Render the photo normally (full fidelity, full 3D)
and feather its edges so the black dissolves into the fog panel. */
.ab-intro-media img {
mix-blend-mode: normal;
filter: brightness(1.16) contrast(1.12) saturate(1.28);
-webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 46%, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
mask-image: radial-gradient(ellipse 78% 78% at 50% 46%, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
}
.ab-intro-media::after { background: none; }
/* ============================================================
22. SECTION LABEL PILLS — one consistent style
These badges had drifted into four different looks:
.about-content .subtitle was a solid navy pill (the good one),
.section-title .subtitle used var(--blue-light) which the dark
theme turns translucent (hence the washed-out ones), .pf-label
was bare text, and .cp-pill / .svc-hero-tag were near-misses.
Page-scoped variants are listed so they don't win on specificity.
============================================================ */
.section-title .subtitle,
.about-content .subtitle,
.pf-label,
.cp-pill,
.svc-hero-tag,
.hm-page .section-title .subtitle,
.ab-page .about-content .subtitle,
.ab-page .section-title .subtitle,
.pf-page .pf-label,
.sv-page .svc-hero-tag,
.ct-page .cp-pill,
[data-theme="dark"] .pf-label,
[data-theme="dark"] .section-title .subtitle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #16388f;
color: #ffffff;
font-family: var(--font-head);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1;
padding: 9px 20px;
border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
margin-bottom: 16px;
text-shadow: none;
white-space: nowrap;
}
.cp-pill svg,
.svc-hero-tag svg { flex-shrink: 0; }
/* ============================================================
23. PREMIUM ICON CHIPS (home "What Makes Us Different")
Flat white squares with a navy glyph read cheap on the dark
backdrop. Applied to all six so the row stays consistent.
============================================================ */
.hm-page .why-icon {
position: relative;
overflow: hidden;
width: 56px;
height: 56px;
border-radius: 16px;
background:
linear-gradient(150deg, rgba(96,165,250,0.30) 0%, rgba(29,78,216,0.30) 42%, rgba(10,26,62,0.68) 100%);
border: 1px solid rgba(255, 255, 255, 0.22);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow:
0 12px 28px -12px rgba(0, 0, 0, 0.75),
0 0 22px -12px rgba(59, 130, 246, 0.75),
inset 0 1px 0 rgba(255, 255, 255, 0.32),
inset 0 -1px 0 rgba(0, 0, 0, 0.28);
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
/* glass sheen across the top-left */
.hm-page .why-icon::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(158deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.05) 38%, transparent 60%);
}
.hm-page .why-icon svg {
position: relative;
z-index: 1;
width: 25px;
height: 25px;
stroke: #dbe9ff;
fill: none;
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
.hm-page .why-card:hover .why-icon {
transform: translateY(-2px);
box-shadow:
0 16px 34px -12px rgba(0, 0, 0, 0.8),
0 0 30px -10px rgba(59, 130, 246, 0.95),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}
/* --- why-cards: icon and heading share a row ------------------- */
.hm-page .why-card {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"icon title"
"body body";
column-gap: 16px;
row-gap: 0;
align-items: center;
}
.hm-page .why-icon {
grid-area: icon;
margin-bottom: 0;
align-self: center;
}
.hm-page .why-card h3 {
grid-area: title;
margin-bottom: 0;
align-self: center;
line-height: 1.25;
}
.hm-page .why-card p {
grid-area: body;
margin-top: 18px;
margin-bottom: 0;
}
/* ============================================================
24. ABOUT PAGE VALUE ICONS — premium glass chips
Flat white circles with a navy glyph read cheap on the dark
backdrop; same treatment as the home "why" icons, kept round.
============================================================ */
.ab-page .value-icon {
position: relative;
overflow: hidden;
width: 64px;
height: 64px;
border-radius: 50%;
background:
linear-gradient(150deg, rgba(96,165,250,0.32) 0%, rgba(29,78,216,0.30) 44%, rgba(10,26,62,0.70) 100%);
border: 1px solid rgba(255, 255, 255, 0.24);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow:
0 14px 30px -12px rgba(0, 0, 0, 0.8),
0 0 24px -12px rgba(59, 130, 246, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
/* light catching the top-left, which is what sells the glass */
.ab-page .value-icon::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 50%;
background: linear-gradient(158deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 40%, transparent 62%);
}
.ab-page .value-icon svg {
position: relative;
z-index: 1;
width: 27px;
height: 27px;
stroke: #e3edff;
fill: none;
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.55));
}
.ab-page .value-card:hover .value-icon {
transform: translateY(-3px);
box-shadow:
0 18px 36px -12px rgba(0, 0, 0, 0.85),
0 0 32px -10px rgba(59, 130, 246, 0.95),
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
/* the vision/mission chips sit on the same page, keep them in family */
.ab-page .vm-card .vm-icon {
position: relative;
overflow: hidden;
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(150deg, rgba(96,165,250,0.30) 0%, rgba(29,78,216,0.28) 44%, rgba(10,26,62,0.68) 100%);
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow:
0 12px 26px -12px rgba(0, 0, 0, 0.78),
inset 0 1px 0 rgba(255, 255, 255, 0.32),
inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}
.ab-page .vm-card .vm-icon::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(158deg, rgba(255,255,255,0.26) 0%, transparent 58%);
}
.ab-page .vm-card.vision .vm-icon svg,
.ab-page .vm-card.mission .vm-icon svg {
position: relative;
z-index: 1;
stroke: #e3edff;
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}