/* ══════════════════════════════════════════════════════════ AMSAFE IT — Design System v2 Inspired by animejs.com: consistent dark theme, dot grid, minimal borders, large display type, clean negative space. ══════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ ▌ MASTER CONTROL PANEL — edit here to restyle the whole site ▌ ▌ COLOUR PAIRS: each brand colour has a hex var (for solid ▌ use) AND an RGB var (numbers only, for rgba() gradients). ▌ When you change a colour, update BOTH the hex AND rgb vars. ▌ ▌ Example — change brand red to orange: ▌ --crimson: #e65c00; ← solid / borders / text ▌ --crimson-li: #ff7a1a; ← lighter / hover state ▌ --crimson-rgb: 230, 92, 0; ← used inside rgba(…) ▌ ▌ NOTE: The ghost watermark SVG icons in each section ▌ (::before pseudo-elements) have the colour URL-encoded ▌ inside background-image data-URIs. Look for stroke='%23…' ▌ in each #sectionId::before rule and change the hex there. ▌ ▌ JavaScript colours (Three.js globe, particle canvas) live ▌ in the BRAND constant at the top of js/config.js. ════════════════════════════════════════════════════════════ */ :root { /* ── 1. PAGE SURFACES ──────────────────────────────────────── */ --bg: #06060f; /* base page background */ --bg-r: #0c0c1c; /* slightly raised surface */ --bg-card: #0e0f1f; /* card / panel background */ --bg-card-h: #151726; /* card hover state */ --bg-rgb: 6, 6, 15; /* --bg as R,G,B for rgba() */ --bg-r-rgb: 12, 12, 28; /* --bg-r as R,G,B for rgba() */ --glass-bg: rgba(12, 12, 28, 0.8); /* frosted-glass panels */ --nav-bg: rgba(6, 6, 15, 0.94); /* scrolled nav backdrop */ /* ── 2. BORDERS ─────────────────────────────────────────────── */ --border: rgba(255, 255, 255, 0.07); --border-hi: rgba(255, 255, 255, 0.13); /* ── 3. BRAND RED ────────────────────────────────────────────── */ /* Update --crimson, --crimson-li AND --crimson-rgb together */ --crimson: #c0392b; --crimson-li: #e04040; /* lighter / hover variant */ --crimson-rgb: 192, 57, 43; /* R,G,B form — used in rgba(…) */ --crimson-dim: rgba(var(--crimson-rgb), 0.15); /* tinted overlay */ /* ── 4. BRAND BLUE ───────────────────────────────────────────── */ /* Update --blue, --blue-li AND --blue-rgb together */ --blue: #1a56db; --blue-li: #4b80f5; /* lighter / hover variant */ --blue-rgb: 26, 86, 219; /* R,G,B form — used in rgba(…) */ --blue-dim: rgba(var(--blue-rgb), 0.15); /* tinted overlay */ /* ── 5. TEXT ─────────────────────────────────────────────────── */ --white: #f0eeea; --muted: rgba(240, 238, 234, 0.747); --muted-mid: rgba(240, 238, 234, 0.66); /* ── 6. SECTION BASE BACKGROUNDS ─────────────────────────────── */ /* RED sections: About, Services, Solutions, Contact */ /* BLUE sections: Why Us, Overview, Certifications, Testimonials */ --sect-red: #160a0a; --sect-blue: #070714; /* ── 7. MISC ACCENTS ─────────────────────────────────────────── */ --star-color: #e8a020; /* testimonial star rating */ /* ── 8. THEME-SENSITIVE TOKENS ──────────────────────────────── */ --dot-color: rgba(255, 255, 255, 0.03); /* body dot grid */ --ghost-num: rgba(255, 255, 255, 0.022); /* large ghost num (cards) */ --mobile-nav-bg: rgba(6, 6, 15, 0.98); /* mobile dropdown panel */ --map-label-text: rgba(240, 238, 234, 0.88); /* map pin label text */ /* ── 9. GLOBE RENDER COLOURS (consumed by globe.js) ──────────── Update both the hex (#RRGGBB) var AND its matching rgba() counterpart (--globe-atm-rgb) when changing a globe colour. */ --globe-interior: #06060f; /* dark inner sphere fill */ --globe-grid: #0d1f3a; /* lat/lon grid lines */ --globe-line-color: #e04040; /* country borders + key light */ --globe-equator: #1a56db; /* equator highlight line */ --globe-emissive: #0a0818; /* inner sphere emissive glow */ --globe-specular: #330a0a; /* inner sphere specular highlight */ --globe-ambient: #080418; /* scene ambient light colour */ --globe-land-fill: rgba(185, 50, 50, 0.55); /* continent fill */ --globe-land-stroke: rgba(220, 80, 80, 0.65); /* continent outline */ --globe-atm-rgb: 192, 57, 43; /* R,G,B for atmosphere */ --globe-rim-color: #db1a1a; /* BackSide rim-glow shell */ --globe-label-bg: rgba(8, 8, 22, 0.84); /* marker pill background */ --globe-label-text: #f0eeea; /* marker pill label text */ --globe-label-border: #e04040; /* marker pill border */ /* ── 10. PARTICLE COLOURS (consumed by particles.js) ─────────── Each var holds the R,G,B components for use in rgba(…,opacity). */ --particle-1-rgb: 165, 32, 32; --particle-2-rgb: 200, 50, 50; --particle-3-rgb: 255, 255, 255; --particle-4-rgb: 200, 180, 180; --particle-stroke-rgb: 180, 60, 60; /* ── 11. COMPONENT-SPECIFIC TOKENS ───────────────────────────── Per-component colour tokens that differ between light and dark. */ --shimmer: rgba(255, 255, 255, 0.12); /* btn-primary sheen */ --ripple: rgba(255, 255, 255, 0.35); /* btn click ripple */ --shadow-sm: none; /* card subtle shadow */ --shadow-md: none; /* nav / badge shadow */ --icon-box-bg: transparent; /* why-icon box fill */ --icon-box-border: var(--border-hi); /* why-icon box border */ --badge-bg: var(--glass-bg); /* hero badge bg */ --badge-border: var(--border-hi); /* hero badge border */ --badge-text: var(--white); /* hero badge heading */ --badge-sub: var(--muted); /* hero badge sub-text */ --contact-box-bg: transparent; /* contact row bg */ --btn-outline-border: var(--border-hi); /* outline btn border */ --btn-outline-color: var(--muted-mid); /* outline btn text */ --btn-outline-hover-bg: transparent; /* outline btn hover */ } /* ════════════════════════════════════════════════════════════ ▌ LIGHT THEME — applied via html[data-theme="light"] ▌ ▌ Brand colours (crimson, blue) remain identical — only ▌ surfaces, text tones, and background hues change. ▌ Blue-section eyebrows switch to --blue (better contrast ▌ on light backgrounds vs --blue-li). ════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* ── 1. PAGE SURFACES ──────────────────────────────────────── */ --bg: #f4f5f7; /* light grey base */ --bg-r: #eceef2; /* slightly raised surface */ --bg-card: #ffffff; /* card — pure white */ --bg-card-h: #f0f2f6; /* card hover — soft grey */ --bg-rgb: 244, 245, 247; --bg-r-rgb: 236, 238, 242; --glass-bg: rgba(255, 255, 255, 0.82); --nav-bg: rgba(244, 245, 247, 0.96); /* ── 2. BORDERS ─────────────────────────────────────────────── */ --border: rgba(0, 0, 0, 0.09); --border-hi: rgba(0, 0, 0, 0.16); /* ── 3. BRAND RED — unchanged ────────────────────────────────── */ --crimson: #c0392b; --crimson-li: #e04040; --crimson-rgb: 192, 57, 43; --crimson-dim: rgba(192, 57, 43, 0.1); /* ── 4. BRAND BLUE — unchanged ───────────────────────────────── */ --blue: #1a56db; --blue-li: #3a70f5; --blue-rgb: 26, 86, 219; --blue-dim: rgba(26, 86, 219, 0.1); /* ── 5. TEXT ─────────────────────────────────────────────────── */ --white: #111827; /* near-black — strong readability on light bg */ --muted: rgba(17, 24, 39, 0.808); --muted-mid: rgba(17, 24, 39, 0.68); /* ── 6. SECTION BASE BACKGROUNDS ─────────────────────────────── */ --sect-red: #fff5f4; /* very pale warm blush */ --sect-blue: #f2f5ff; /* very pale cool blue */ /* ── 7. MISC ACCENTS ─────────────────────────────────────────── */ --star-color: #d97706; /* ── 8. THEME-SENSITIVE TOKENS ──────────────────────────────── */ --dot-color: rgba(0, 0, 0, 0.05); --ghost-num: rgba(0, 0, 0, 0.05); --mobile-nav-bg: rgba(244, 245, 247, 0.99); --map-label-text: rgba(17, 24, 39, 0.88); /* ── 9. GLOBE RENDER COLOURS (light) ──────────────────────────── */ --globe-interior: #e8eaf0; /* silver-white sphere */ --globe-grid: #aab0c8; /* medium blue-grey grid */ --globe-line-color: #c0392b; /* crimson country lines */ --globe-equator: #1a56db; /* blue equator line */ --globe-emissive: #d0d4e0; /* inner sphere emissive glow */ --globe-specular: #ffffff; /* inner sphere specular highlight */ --globe-land-fill: rgba(192, 57, 43, 0.22); --globe-land-stroke: rgba(192, 57, 43, 0.55); --globe-atm-rgb: 192, 57, 43; --globe-rim-color: #f54b4b; /* BackSide rim-glow shell */ --globe-label-bg: rgba(255, 255, 250, 0.92); --globe-label-text: #111827; --globe-label-border: #c0392b; /* ── 10. PARTICLE COLOURS (light) ────────────────────────────── */ --particle-1-rgb: 192, 57, 43; --particle-2-rgb: 26, 86, 219; --particle-3-rgb: 100, 100, 120; --particle-4-rgb: 224, 64, 64; --particle-stroke-rgb: 192, 57, 43; /* ── 11. COMPONENT-SPECIFIC TOKENS (light) ───────────────────── */ --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 16px rgba(0, 0, 0, 0.1); --icon-box-bg: rgba(192, 57, 43, 0.07); --icon-box-border: rgba(192, 57, 43, 0.2); --badge-bg: rgba(255, 255, 255, 0.9); --badge-border: rgba(0, 0, 0, 0.12); --badge-text: #111827; --badge-sub: rgba(17, 24, 39, 0.55); --contact-box-bg: rgba(255, 255, 255, 0.92); --btn-outline-border: rgba(0, 0, 0, 0.22); --btn-outline-color: rgba(17, 24, 39, 0.75); --btn-outline-hover-bg: rgba(192, 57, 43, 0.07); } /* ── Native colour-scheme hint (scrollbars, inputs, etc.) ── */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* ── Smooth cross-fade when theme attribute changes ──────── */ html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; overflow: hidden; /* full-page scroll: block native scroll */ } body { font-family: "Inter", "Barlow", sans-serif; background: var(--bg); color: var(--white); overflow: hidden; height: 100%; } /* ── DOT GRID BACKGROUND (subtle, consistent across all sections) ── */ body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient( circle, var(--dot-color) 1px, transparent 1px ); background-size: 28px 28px; pointer-events: none; z-index: 0; } /* ── ANIME.JS INITIAL STATES — opacity driven via anime.set() in JS ── */ .reveal, .reveal-left, .reveal-right { will-change: opacity, transform; } [data-stagger] > * { will-change: opacity, transform; } /* ══ NAV ══════════════════════════════════════════════════ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1.4rem 5%; display: flex; align-items: center; justify-content: space-between; transition: all 0.4s; } nav.scrolled { padding: 0.9rem 5%; background: var(--nav-bg); backdrop-filter: blur(24px); border-bottom: 1px solid var(--border); } /* Transparent hero-blend state: nav fades INTO the hero background. Applied when the hero section is the active page (desktop full-page scroll). Removed as soon as the user navigates to any other section. The base `transition: all 0.4s` on nav gives a smooth dissolve. */ nav.on-hero { padding: 1.4rem 5%; background: linear-gradient( to bottom, rgba(var(--bg-rgb), 0.5) 0%, transparent 100% ); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; } .nav-logo { font-family: "Bebas Neue", sans-serif; font-size: 1.45rem; letter-spacing: 3px; color: var(--white); cursor: pointer; /* click navigates back to hero */ user-select: none; } .nav-logo span { color: var(--crimson); } .nav-links { display: flex; flex-wrap: nowrap; /* keep all tabs on one line */ gap: 2.5rem; list-style: none; } .nav-links a { color: var(--muted-mid); text-decoration: none; font-size: 0.88rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; transition: color 0.2s; position: relative; white-space: nowrap; /* prevent label from breaking into two lines */ } .nav-links a::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: var(--crimson); transition: width 0.3s; } .nav-links a:hover { color: var(--white); } .nav-links a:hover::after { width: 100%; } .nav-cta { border: 1px solid var(--crimson) !important; color: var(--crimson) !important; padding: 0.45rem 1.3rem !important; white-space: nowrap !important; /* always single-line button */ transition: background 0.25s, color 0.25s !important; } .nav-cta::after { display: none !important; } .nav-cta:hover { background: var(--crimson) !important; color: var(--white) !important; } /* ══ RESPONSIVE NAV — prevent label wrap at medium-large desktops ══════ At widths 1025–1500 px the 8 nav links with 2.5 rem gaps can exceed the available space. Shrink gap + font-size fluidly with clamp() so every label stays on one line without ever wrapping. ════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1025px) and (max-width: 1500px) { .nav-links { gap: clamp(0.65rem, 1.1vw, 2.5rem); } .nav-links a { font-size: clamp(0.7rem, 0.75vw, 0.88rem); letter-spacing: clamp(1px, 0.35vw, 2px); } .nav-cta { padding: 0.4rem 0.9rem !important; } } /* ══ HERO ═════════════════════════════════════════════════ */ #hero { min-height: 100vh; position: relative; display: grid; grid-template-columns: 30% 50% 20%; column-gap: 0; align-items: center; overflow: hidden; padding: 0 3% 0 5%; z-index: 1; } .hero-bg { position: absolute; inset: 0; background: radial-gradient( ellipse 70% 60% at 30% 50%, rgba(var(--crimson-rgb), 0.14) 0%, transparent 70% ), radial-gradient( ellipse 50% 50% at 80% 80%, rgba(var(--blue-rgb), 0.18) 0%, transparent 60% ); } #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--crimson-rgb), 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--crimson-rgb), 0.04) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none; } .hero-orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; } .orb-1 { width: 700px; height: 700px; background: radial-gradient( circle, rgba(var(--crimson-rgb), 0.2) 0%, transparent 70% ); top: -150px; right: -150px; animation: orbFloat 14s ease-in-out infinite; } .orb-2 { width: 600px; height: 600px; background: radial-gradient( circle, rgba(var(--blue-rgb), 0.22) 0%, transparent 70% ); bottom: -100px; left: -100px; animation: orbFloat 10s ease-in-out infinite reverse; } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.04); } 66% { transform: translate(-20px, 20px) scale(0.97); } } .hero-content { position: relative; z-index: 4; padding-right: 2rem; } /* ── Col 2: Globe — full-hero centered overlay (blends in) ── */ .hero-globe-col { position: absolute; inset: 0; z-index: 2; /* behind hero-content (4) so text remains readable */ display: flex; align-items: center; justify-content: center; pointer-events: none; /* pass clicks through to buttons / links beneath */ opacity: 0; } /* ── Col 3: Mission + Vision badges ── */ .hero-visual { position: relative; z-index: 2; opacity: 0; display: flex; flex-direction: column; justify-content: center; align-self: stretch; padding-left: 0.5rem; } .hero-eyebrow { font-family: "Barlow Condensed", sans-serif; font-size: 0.92rem; letter-spacing: 5px; text-transform: uppercase; color: var(--crimson); margin-bottom: 1.8rem; opacity: 0; display: flex; align-items: center; gap: 0.75rem; } .hero-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--crimson); flex-shrink: 0; } .hero-title { font-family: "Bebas Neue", sans-serif; font-size: clamp(3rem, 6vw, 6.5rem); line-height: 0.92; letter-spacing: 2px; margin-bottom: 2rem; opacity: 0; } .hero-title .accent { color: var(--crimson); display: block; } .hero-tagline { font-size: 1rem; line-height: 1.85; color: var(--muted-mid); max-width: 460px; margin-bottom: 3rem; font-weight: 300; opacity: 0; } .hero-actions { display: flex; gap: 1rem; align-items: center; opacity: 0; } .btn-primary { background: var(--crimson); color: white; padding: 0.85rem 2.2rem; font-family: "Barlow Condensed", sans-serif; font-size: 0.8rem; letter-spacing: 2.5px; text-transform: uppercase; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.25s; position: relative; overflow: hidden; } .btn-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--shimmer), transparent); transition: left 0.5s; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { background: var(--crimson-li); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--crimson-rgb), 0.35); } .btn-outline { border: 1px solid var(--border-hi); color: var(--muted-mid); padding: 0.85rem 2.2rem; font-family: "Barlow Condensed", sans-serif; font-size: 0.8rem; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; display: inline-block; transition: all 0.25s; position: relative; overflow: hidden; } .btn-outline:hover { border-color: var(--crimson); color: var(--crimson-li); } /* Hero visual — right column: globe at top, mission + vision badges below */ .hero-visual { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); z-index: 4; opacity: 0; /* anime.js reveals during hero timeline */ width: 36%; max-width: 500px; min-width: 260px; display: flex; flex-direction: column; align-items: stretch; } /* Globe — large centered overlay, edges fade into hero background */ #hero-globe { width: min(70vh, 50vw); height: min(70vh, 50vw); max-width: 600px; max-height: 600px; flex-shrink: 0; pointer-events: auto; /* re-enable drag on the canvas itself */ } #hero-globe canvas { display: block; width: 100% !important; height: 100% !important; } .hero-badge { padding: 1.8rem 2rem; border: 1px solid var(--border-hi); background: var(--glass-bg); backdrop-filter: blur(16px); position: relative; } .hero-badge + .hero-badge { margin-top: 1px; border-top: none; } /* Crimson accent bar at top of each panel */ .hero-badge::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--crimson); } .hero-badge-label { font-family: "Barlow Condensed", sans-serif; font-size: 0.88rem; letter-spacing: 4px; text-transform: uppercase; color: var(--crimson); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.5rem; } /* Code-comment prefix for terminal feel */ .hero-badge-label::before { content: "//"; opacity: 0.45; font-family: "Barlow Condensed", sans-serif; } .hero-badge-text { font-family: "Bebas Neue", sans-serif; font-size: 1.45rem; letter-spacing: 1.5px; line-height: 1.25; color: var(--white); } .hero-badge-sub { font-size: 0.88rem; color: var(--muted); margin-top: 0.6rem; letter-spacing: 1.5px; font-family: "Barlow Condensed", sans-serif; } /* ── Hero scaler — JS-created wrapper used by fitHeroToViewport() ────────── On desktop (>1024 px) this is a transparent pass-through: display:contents makes the three hero columns participate directly in the parent grid/fixed layout as if the wrapper weren't there. On mobile/tablet (≤1024 px) it becomes an absolutely-positioned flex column whose transform:scale() is set by JS so all hero content fits the viewport without scrolling. ──────────────────────────────────────────────────────── */ .hero-scaler { display: contents; /* transparent on desktop: children layout directly in #hero */ } /* Continent presence strip */ .continent-strip { display: flex; gap: 0; margin-top: 1px; border: 1px solid var(--border-hi); border-top: none; background: var(--glass-bg); backdrop-filter: blur(16px); } .continent-dot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.2rem 0.5rem; border-right: 1px solid var(--border); opacity: 0; will-change: opacity, transform; } .continent-dot:last-child { border-right: none; } .continent-pin { width: 8px; height: 8px; background: var(--crimson); border-radius: 50%; box-shadow: 0 0 0 3px rgba(var(--crimson-rgb), 0.2); animation: pinPulse 2.2s ease-in-out infinite; } @keyframes pinPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--crimson-rgb), 0.2); } 50% { box-shadow: 0 0 0 8px rgba(var(--crimson-rgb), 0.07); } } .continent-label { font-family: "Barlow Condensed", sans-serif; font-size: 0.88rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted-mid); } /* ── World Map ──────────────────────────────────────────── */ .world-map-wrap { margin-top: 1px; border: 1px solid var(--border-hi); border-top: none; background: var(--glass-bg); backdrop-filter: blur(16px); overflow: hidden; position: relative; } .world-map-inner { position: relative; line-height: 0; } .world-map-img { display: block; width: 100%; height: auto; opacity: 0.22; filter: sepia(1) hue-rotate(200deg) saturate(3) brightness(1.8); pointer-events: none; user-select: none; } /* Vignette that fades edges into the dark glass background */ .world-map-inner::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 90% 80% at 50% 50%, transparent 35%, rgba(var(--bg-r-rgb), 0.55) 100% ); pointer-events: none; z-index: 1; } .map-pin { position: absolute; transform: translate(-50%, -50%); z-index: 3; opacity: 0; will-change: opacity, transform; } .map-pin-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); position: relative; z-index: 2; box-shadow: 0 0 8px rgba(var(--crimson-rgb), 0.85); } .map-pin-ring { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--crimson); opacity: 0; animation: mapRipple 2.6s ease-out infinite; z-index: 1; } @keyframes mapRipple { 0% { width: 6px; height: 6px; opacity: 0.7; } 100% { width: 28px; height: 28px; opacity: 0; } } .map-pin:nth-child(2) .map-pin-ring { animation-delay: 0.6s; } .map-pin:nth-child(3) .map-pin-ring { animation-delay: 1.2s; } .map-pin:nth-child(4) .map-pin-ring { animation-delay: 1.8s; } .map-pin-label { position: absolute; font-family: "Barlow Condensed", sans-serif; font-size: 0.58rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--map-label-text); white-space: nowrap; background: rgba(var(--bg-rgb), 0.86); border: 1px solid var(--border-hi); padding: 2px 6px; pointer-events: none; line-height: 1.6; z-index: 4; } .map-pin-label[data-side="right"] { left: 11px; top: 50%; transform: translateY(-50%); } .map-pin-label[data-side="top-left"] { right: 11px; bottom: 11px; } .map-pin-label[data-side="top-right"] { left: 11px; bottom: 11px; } .map-pin-label[data-side="bottom-left"] { right: 11px; top: 11px; } .map-pin-label[data-side="bottom-right"] { left: 11px; top: 11px; } /* Scroll indicator */ .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0; } .scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, transparent, var(--crimson)); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.5); opacity: 0.3; } } .scroll-text { font-size: 0.78rem; letter-spacing: 4px; text-transform: uppercase; color: var(--muted); font-family: "Barlow Condensed", sans-serif; } /* ══ SECTION COMMONS ══════════════════════════════════════ Full-page scroll architecture: Every section is a fixed full-viewport panel. Navigation is entirely JS-driven via goToSection() — no native scroll. ══════════════════════════════════════════════════════════ */ section { position: fixed; inset: 0; width: 100%; height: 100%; padding: 6rem 8% 2rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; opacity: 0; pointer-events: none; z-index: 0; will-change: opacity, transform; -webkit-overflow-scrolling: touch; } /* Hero is the first section — starts fully visible */ #hero { position: fixed; /* override first #hero block's position:relative */ inset: 0; padding: 0 8%; /* hero uses no top/bottom padding — flex centres content */ flex-direction: row; /* side-by-side: title left, visual right */ align-items: center; justify-content: flex-start; overflow: hidden; /* no internal scrollbar — wheel goes straight to About */ opacity: 1; pointer-events: auto; z-index: 2; } .section-header { margin-bottom: 2.5rem; } .section-eyebrow { font-family: "Barlow Condensed", sans-serif; font-size: 0.9rem; letter-spacing: 5px; text-transform: uppercase; color: var(--crimson); margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem; } /* Numbered section label (set via data-num attribute) */ .section-eyebrow::before { content: attr(data-num); color: var(--muted); font-size: 0.65rem; letter-spacing: 2px; padding-right: 0.75rem; border-right: 1px solid var(--border-hi); } /* blue-section eyebrow overrides */ #why .section-eyebrow, #overview .section-eyebrow, #certifications .section-eyebrow, #testimonials .section-eyebrow { color: var(--blue-li); } .section-title { font-family: "Bebas Neue", sans-serif; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 0.95; letter-spacing: 1px; color: var(--white) !important; } .section-rule { display: none; } /* Accent conveyed by eyebrow instead */ .section-sub { font-size: 0.97rem; line-height: 1.8; color: var(--muted-mid); max-width: 520px; margin-top: 1.2rem; font-weight: 300; } /* ══ ABOUT ════════════════════════════════════════════════ */ #about { background: transparent; color: var(--white); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .about-text .section-eyebrow { color: var(--crimson); } .about-text .section-title { color: var(--white) !important; } .about-desc { font-size: 0.98rem; line-height: 1.9; color: var(--muted-mid); margin-top: 1.5rem; } /* Stats 2×2 grid */ .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); } .stat-box { background: var(--bg-card); padding: 2.5rem 2rem; text-align: center; transition: background 0.3s; position: relative; overflow: hidden; } .stat-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--crimson); transform: scaleX(0); transition: transform 0.4s; transform-origin: left; } .stat-box:hover { background: var(--bg-card-h); } .stat-box:hover::before { transform: scaleX(1); } .stat-number { font-family: "Bebas Neue", sans-serif; font-size: 3.6rem; color: var(--crimson); display: block; line-height: 1; } .stat-label { font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; font-family: "Barlow Condensed", sans-serif; } /* ══ WHY US ═══════════════════════════════════════════════ */ #why { background: transparent; } .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); } .why-card { background: var(--bg-card); padding: 2.5rem 2rem; transition: background 0.3s; position: relative; overflow: hidden; cursor: default; } /* Large ghost number in the corner */ .why-card::before { content: attr(data-index); position: absolute; top: 1.2rem; right: 1.4rem; font-family: "Bebas Neue", sans-serif; font-size: 4.5rem; color: var(--ghost-num); line-height: 1; pointer-events: none; transition: color 0.4s; } /* ── WHY US card hover — blue accent (section is blue) ── */ .why-card::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform 0.35s; transform-origin: left; } .why-card:hover { background: var(--bg-card-h); } .why-card:hover::before { color: rgba(var(--blue-rgb), 0.09); } .why-card:hover::after { transform: scaleX(1); } .why-icon-wrap { width: 44px; height: 44px; border: 1px solid var(--border-hi); display: flex; align-items: center; justify-content: center; margin-bottom: 1.6rem; color: var(--crimson); transition: border-color 0.3s, color 0.3s; } .why-icon-wrap svg { width: 20px; height: 20px; flex-shrink: 0; } .why-card:hover .why-icon-wrap { border-color: var(--blue); color: var(--blue-li); } .why-title { font-family: "Barlow Condensed", sans-serif; font-size: 1.05rem; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; color: var(--white); margin-bottom: 0.8rem; } .why-rule { display: none; } .why-desc { font-size: 0.87rem; line-height: 1.8; color: var(--muted); } /* ══ SERVICES ════════════════════════════════════════════ */ #services { background: transparent; color: var(--white); } .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .service-card { background: var(--bg-card); padding: 2.2rem 1.8rem; transition: background 0.3s; position: relative; cursor: default; overflow: hidden; } .service-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--crimson); transform: scaleX(0); transition: transform 0.35s; transform-origin: left; } .service-card:hover { background: var(--bg-card-h); } .service-card:hover::after { transform: scaleX(1); } .service-icon-wrap { width: 42px; height: 42px; border: 1px solid var(--border-hi); display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; color: var(--crimson); transition: color 0.3s, border-color 0.3s; } .service-icon-wrap svg { width: 20px; height: 20px; flex-shrink: 0; } .service-card:hover .service-icon-wrap { color: var(--crimson-li); border-color: var(--crimson); } .service-icon-wrap::before { display: none; } .service-title { font-family: "Barlow Condensed", sans-serif; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--white); margin-bottom: 0.8rem; } .service-desc { font-size: 0.84rem; line-height: 1.75; color: var(--muted); } /* ══ OVERVIEW ════════════════════════════════════════════ */ #overview { background: transparent; } .overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .overview-item { display: flex; align-items: flex-start; gap: 2rem; padding: 2.2rem 2.4rem; background: var(--bg-card); transition: background 0.3s; position: relative; overflow: hidden; } /* ── OVERVIEW items in blue section ── */ .overview-bar { position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--blue); transition: width 0.4s ease; } .overview-item:hover { background: var(--bg-card-h); } .overview-item:hover .overview-num { color: var(--blue); } .overview-item:hover .overview-bar { width: 100%; } .overview-num { font-family: "Bebas Neue", sans-serif; font-size: 2rem; color: var(--crimson); line-height: 1; flex-shrink: 0; min-width: 2.2rem; transition: color 0.3s; } .overview-text { font-size: 0.93rem; line-height: 1.75; color: var(--muted-mid); padding-top: 0.3rem; } /* ══ SOLUTIONS ═══════════════════════════════════════════ */ #solutions { background: transparent; } /* ── Solutions carousel outer wrapper (arrows + viewport) ── */ .solutions-carousel { display: flex; align-items: center; gap: 0.75rem; } /* ── Clipping window ── */ .solutions-viewport { flex: 1; overflow: hidden; min-width: 0; } /* ── Horizontal strip that slides ── */ .solutions-track { display: flex; flex-direction: row; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .solution-card { background: var(--bg-card); padding: 2.25rem 1.6rem 2rem; transition: background 0.3s; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 240px; } .solution-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--crimson); transform: scaleX(0); transition: transform 0.35s; transform-origin: left; } .solution-card:hover { background: var(--bg-card-h); } .solution-card:hover::before { transform: scaleX(1); } .solution-name { font-family: "Bebas Neue", sans-serif; font-size: 1.5rem; letter-spacing: 1px; margin-bottom: 0.4rem; color: var(--white); } .solution-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.6; } /* ── Solution card logo ────────────────────────────────── */ .solution-logo-wrap { width: 80px; height: 80px; border-radius: 14px; background: transparent; /* overridden per-card via inline style */ border: 2px solid transparent; /* overridden per-card via inline style */ display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 1.25rem; flex-shrink: 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); transition: box-shadow 0.3s, transform 0.3s; } .solution-card:hover .solution-logo-wrap { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28); transform: translateY(-2px); } /* Works for both and inline */ .solution-logo { width: 82%; height: 82%; object-fit: contain; /* only; ignored for */ display: block; flex-shrink: 0; } /* Inline from svgMarkup in data.js inherits `color` from the wrap inline style, making currentColor resolve to the accent hue. */ .solution-logo-wrap > svg.solution-logo { overflow: visible; } /* Theme-specific logo variants — only one is shown at a time */ html[data-theme="dark"] .solution-logo-light { display: none; } html[data-theme="dark"] .solution-logo-dark { display: block; } html[data-theme="light"] .solution-logo-dark { display: none; } html[data-theme="light"] .solution-logo-light { display: block; } /* ══ CERTIFICATIONS ══════════════════════════════════════ */ #certifications { background: transparent; /* Extra bottom padding so the cert track strip has clear breathing room */ padding-bottom: 3.5rem; } .cert-track-wrapper { overflow: hidden; margin-top: 0.5rem; position: relative; /* Explicit min-height ensures the wrapper always renders even before images load; prevents the section from collapsing on slow connections. */ min-height: 180px; cursor: grab; user-select: none; } .cert-track-wrapper.dragging { cursor: grabbing; } .cert-track-wrapper::before, .cert-track-wrapper::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; } .cert-track-wrapper::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); } .cert-track-wrapper::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); } .cert-track { display: flex; gap: 1px; /* always scroll right-to-left; running state is forced so the animation never stalls when the parent section is initially opacity:0 */ animation: certScroll 40s linear infinite; animation-play-state: running; animation-direction: normal; /* explicit: 0% → 100% = right to left */ will-change: transform; width: max-content; } .cert-track:hover { animation-play-state: paused; } /* Right-to-left: track starts at its natural position (full set visible), then slides left until the second (duplicate) set occupies the same visual space as the first did — creating a seamless infinite loop. */ @keyframes certScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .cert-badge { flex-shrink: 0; width: 240px; border-right: 1px solid var(--border); /* Increased vertical padding for more section height */ padding: 4.5rem 2rem; text-align: center; transition: background 0.3s; background: var(--bg-card); display: flex; flex-direction: column; align-items: center; gap: 0.9rem; /* was 0.7rem */ } .cert-badge:hover { background: var(--bg-card-h); } /* ── Cert logo box (border + glow) ─────────────────────── */ .cert-logo-wrap { width: 170px; height: 110px; border-radius: 14px; background: transparent; /* overridden per-badge via inline style */ border: 2px solid transparent; /* overridden per-badge via inline style */ display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); transition: box-shadow 0.3s, transform 0.3s; } .cert-badge:hover .cert-logo-wrap { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28); transform: translateY(-2px); } .cert-logo { width: 85%; height: 85%; object-fit: contain; display: block; } .cert-abbr { font-family: "Bebas Neue", sans-serif; font-size: 2.2rem; /* was 1.9rem */ letter-spacing: 1px; display: block; } .cert-name { font-size: 0.9rem; color: #ffffff; line-height: 1.45; font-family: "Barlow Condensed", sans-serif; letter-spacing: 0.5px; } /* ══ TESTIMONIALS ════════════════════════════════════════ */ #testimonials { background: transparent; color: var(--white); } /* ── Carousel outer wrapper (arrows + viewport) ─────────── */ .testimonials-carousel { display: flex; align-items: center; gap: 0.75rem; } /* ── Clipping window — overflow hidden hides off-page cards ─ */ .testimonials-viewport { flex: 1; overflow: hidden; min-width: 0; /* prevents flex from overflowing parent */ } /* ── Horizontal strip that slides left / right ───────────── */ .testimonials-track { display: flex; flex-direction: row; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } /* ── One full-width "page" grouping N cards ──────────────── */ /* grid-template-columns is set per-viewport by initTestimonialsCarousel() */ .carousel-page { flex: 0 0 100%; width: 100%; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); perspective: 1400px; /* depth for card entrance animations */ } /* ── Arrow buttons ───────────────────────────────────────── */ .carousel-btn { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border-hi); color: var(--white); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s; z-index: 2; } .carousel-btn:hover { background: var(--blue-li); border-color: var(--blue-li); transform: scale(1.08); } .carousel-btn svg { width: 22px; height: 22px; pointer-events: none; } /* ── Pagination dots ─────────────────────────────────────── */ .carousel-dots { display: flex; justify-content: center; gap: 0.55rem; margin-top: 1.2rem; } .carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-hi); border: none; cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s; } .carousel-dot.active { background: var(--blue-li); transform: scale(1.5); } .testimonial-card { background: var(--bg-card); padding: 2.5rem 2.2rem; position: relative; transition: background 0.3s; } .testimonial-card:hover { background: var(--bg-card-h); } .testimonial-card::before { content: "\201C"; font-family: "Bebas Neue", sans-serif; font-size: 5rem; line-height: 1; color: var(--blue-li); opacity: 0.18; position: absolute; bottom: 1rem; right: 1.5rem; pointer-events: none; } .testimonial-divider { width: 100%; height: 1px; background: var(--border); margin: 1.3rem 0 1rem; } .testimonial-stars { color: var(--star-color); font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 0.7rem; } .testimonial-text { font-size: 0.92rem; line-height: 1.85; color: var(--muted-mid); font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: 0.9rem; } .testimonial-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--bg-card-h); display: flex; align-items: center; justify-content: center; font-family: "Bebas Neue", sans-serif; font-size: 1.1rem; color: var(--crimson); flex-shrink: 0; overflow: hidden; border: 1px solid var(--border-hi); position: relative; } .testimonial-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .testimonial-name { font-weight: 700; font-size: 0.9rem; color: var(--white); } .testimonial-role { font-size: 0.75rem; color: var(--muted); } /* ══ CONTACT ══════════════════════════════════════════════ */ #contact { background: transparent; text-align: center; } /* ── Contact scaler — JS-injected wrapper for fitContactToViewport() ────── A real block element (not display:contents) on both desktop and mobile so transform:scale() has a proper box. The inner's max-width/centering are preserved inside it. ─────────────────────────────────────────────────── */ .contact-scaler { display: block; width: 100%; transform-origin: top center; } .contact-inner { max-width: 720px; margin: 0 auto; } .contact-label { font-family: "Barlow Condensed", sans-serif; font-size: 0.9rem; letter-spacing: 5px; text-transform: uppercase; color: var(--crimson); margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem; } /* Decorative lines flanking the label */ .contact-label::before, .contact-label::after { content: ""; flex: 1; height: 1px; background: var(--border); max-width: 80px; } .contact-title { font-family: "Bebas Neue", sans-serif; font-size: clamp(3.5rem, 8vw, 6.5rem); line-height: 0.92; margin-bottom: 1.5rem; } .contact-desc { font-size: 0.97rem; color: var(--muted-mid); line-height: 1.75; margin-bottom: 3rem; } .contact-details { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; margin-bottom: 3rem; border: 1px solid var(--border); } .contact-item { text-align: center; padding: 1.6rem 2.5rem; border-right: 1px solid var(--border); } .contact-item:last-child { border-right: none; } .contact-item-label { font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; color: var(--crimson); margin-bottom: 0.4rem; font-family: "Barlow Condensed", sans-serif; } .contact-item-value { font-size: 0.9rem; color: var(--muted-mid); font-weight: 500; } .contact-item-value a { color: inherit; text-decoration: none; transition: color 0.2s; } .contact-item-value a:hover { color: var(--white); } /* ══ FOOTER (embedded at bottom of #contact) ════════════ */ footer { /* absolute inside #contact (which is position:fixed) */ position: absolute; bottom: 0; left: 0; right: 0; padding: 1.1rem 8%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; border-top: 1px solid var(--border); z-index: 1; } .footer-logo { font-family: "Bebas Neue", sans-serif; font-size: 1.1rem; letter-spacing: 3px; } .footer-logo span { color: var(--crimson); } .footer-text { font-size: 0.73rem; color: var(--muted); } .footer-url { font-size: 0.82rem; color: var(--crimson); font-family: "Barlow Condensed", sans-serif; letter-spacing: 1px; } .footer-url a { color: inherit; text-decoration: none; } .footer-url a:hover { text-decoration: underline; } /* ══ LOADER ═══════════════════════════════════════════════ */ #loader { position: fixed; inset: 0; background: var(--bg); z-index: 99999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2rem; transition: opacity 0.6s, visibility 0.6s; } #loader.hidden { opacity: 0; visibility: hidden; } .loader-logo { font-family: "Bebas Neue", sans-serif; font-size: 2.5rem; letter-spacing: 5px; } .loader-logo span { color: var(--crimson); } .loader-bar { width: 160px; height: 1px; background: var(--border-hi); position: relative; overflow: hidden; } .loader-bar::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--crimson); animation: loaderBar 1.4s ease-in-out infinite; } @keyframes loaderBar { 0% { left: -100%; } 100% { left: 100%; } } /* ══ HAMBURGER BUTTON ════════════════════════════════════════ */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1010; padding: 8px; background: none; border: none; outline: none; flex-shrink: 0; touch-action: manipulation; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--white); transition: transform 0.3s ease, opacity 0.3s ease; border-radius: 2px; pointer-events: none; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ══ MEDIUM DESKTOP HERO FIX — reduce badge font & globe size to prevent the Vision/Mission panel from visually overlapping the globe centre. Applies from the tablet breakpoint cutoff to a wide-ish desktop. ════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1025px) and (max-width: 1480px) { /* Narrow the right column so it doesn't reach the globe centre */ .hero-visual { width: 29%; } /* Smaller padding inside each badge card */ .hero-badge { padding: 1.4rem 1.5rem; } /* Reduce the long vision/mission text font so the badge stays compact */ .hero-badge-text { font-size: 1.15rem; letter-spacing: 1px; } .hero-badge-label { font-size: 0.78rem; letter-spacing: 3px; margin-bottom: 0.45rem; } /* Shrink globe slightly so its right edge leaves space for the badges */ #hero-globe { width: min(62vh, 42vw); height: min(62vh, 42vw); max-width: 520px; max-height: 520px; } } /* ── Tablet / landscape phone ────────────────────────────── The full-page JS scroll engine is disabled at ≤1024px (see scroll.js). Sections must be in normal document flow at these widths so native browser scroll works. ──────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { /* Revert scroll architecture */ html, body { overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; -webkit-overflow-scrolling: touch; } section, #hero { position: relative !important; inset: auto !important; height: auto !important; min-height: auto !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; overflow: visible !important; overflow-x: hidden !important; z-index: auto !important; scroll-margin-top: 64px; } #hero { height: 100vh !important; /* fallback for browsers without dvh support */ height: 100dvh !important; /* dynamic — tracks visible area as chrome appears */ min-height: unset !important; overflow: hidden !important; } /* ─── NAVIGATION: hamburger on tablet too ────────────── */ .nav-hamburger { display: flex; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--mobile-nav-bg); border-top: 1px solid var(--border-hi); border-bottom: 2px solid var(--crimson); flex-direction: column; align-items: stretch; gap: 0; z-index: 1005; padding: 0; list-style: none; } .nav-links.mobile-open { display: flex; } .nav-links li { border-bottom: 1px solid var(--border); } .nav-links li:last-child { border-bottom: none; } .nav-links a { display: block; padding: 0.85rem 5%; font-size: 0.82rem; letter-spacing: 2.5px; } .nav-cta { padding: 0.85rem 5% !important; text-align: center; color: var(--crimson) !important; border: none !important; } /* ─── HERO: content is positioned by .hero-scaler (position:absolute) ─── */ /* padding / gap / flex-direction all live on .hero-scaler so JS can scale */ /* the entire content block as one unit via transform:scale(). */ #hero { display: block !important; padding: 0 !important; gap: 0 !important; } /* Scaler: absolute flex column anchored to hero top-left corner. */ /* JS (fitHeroToViewport) sets transform:scale(n) with transform-origin:top */ /* center so the top of the content stays at y=0 and everything scales down. */ .hero-scaler { display: flex !important; position: absolute; top: 0; left: 0; right: 0; flex-direction: column; align-items: center; /* top padding clears the fixed navbar (~60-64 px); bottom pads safe area */ padding: max(4.5rem, 76px) 5% max(0.75rem, env(safe-area-inset-bottom, 12px)); gap: 1rem; /* tightened from 1.5rem to reduce gap between title and globe */ transform-origin: top center; } .hero-content { text-align: center; padding-right: 0; width: 100%; } /* Tighten vertical rhythm inside the hero content block on tablet */ .hero-eyebrow { justify-content: center; margin-top: 1.25rem; /* push eyebrow down from the top of the content block */ margin-bottom: 0.75rem; /* was 1.8rem — substantial space saving */ } .hero-title { margin-bottom: 1rem; /* was 2rem */ } .hero-actions { justify-content: center; flex-wrap: wrap; } /* Globe in flow on tablet — vh+vw responsive so it fills available space */ /* proportionally without leaving empty vertical gaps on tall screens. */ .hero-globe-col { position: relative; inset: auto; display: flex; align-items: center; justify-content: center; width: min(44vh, 62vw); height: min(44vh, 62vw); flex-shrink: 0; z-index: 5; pointer-events: none; } #hero-globe { width: 100%; height: 100%; max-width: min(44vh, 62vw); max-height: min(44vh, 62vw); pointer-events: auto; } /* Clamp hero orbs so they don't cause horizontal overflow */ .hero-orb { max-width: 100vw; } .orb-1 { width: 350px; height: 350px; top: -80px; right: -80px; } .orb-2 { width: 300px; height: 300px; bottom: -60px; left: -60px; } /* Badges in flow on tablet */ .hero-visual { position: relative; right: auto; top: auto; transform: none; width: 100%; max-width: 600px; min-width: auto; display: flex; flex-direction: column; align-items: stretch; z-index: 4; } /* ─── Grids: scale down columns ──────────────────────── */ .services-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .overview-grid { grid-template-columns: repeat(2, 1fr); } .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } /* ─── Section typography ─────────────────────────────── */ section { padding: 4.5rem 5% 2rem; justify-content: flex-start; } .section-title { font-size: clamp(2.5rem, 5vw, 5rem); } /* Scroll indicator hidden on touch devices */ .scroll-indicator { display: none; } /* ─── Footer ─────────────────────────────────────────── */ footer { position: relative; } } /* ── Mobile ─────────────────────────────────────────────── */ @media (max-width: 768px) { /* ─── HERO ────────────────────────────────────────────── */ /* padding/gap live on .hero-scaler — only tweak gutter/gap for narrow screens */ .hero-scaler { padding-left: 6%; padding-right: 6%; gap: 0.85rem; } .hero-content { padding-right: 0; text-align: center; width: 100%; flex-shrink: 0; position: relative; z-index: 4; } .hero-eyebrow { justify-content: center; margin-top: 1rem; /* push eyebrow down a bit in portrait mobile */ margin-bottom: 0.6rem; } .hero-eyebrow::before { display: none; } .hero-title { font-size: clamp(2.4rem, 10vw, 4rem); margin-bottom: 0.85rem; /* tightened from 1.5rem */ } .hero-actions { justify-content: center; flex-wrap: wrap; gap: 0.75rem; } /* Globe: vh+vw responsive — proportional on tall and narrow phones alike. Increased from (34vh, 60vw, 260px) so the globe fills the vertical gap between the title block and the Mission/Vision badges. */ .hero-globe-col { width: min(40vh, 74vw); height: min(40vh, 74vw); } #hero-globe { width: 100%; height: 100%; max-width: min(40vh, 74vw); max-height: min(40vh, 74vw); } /* Mission/Vision badges: full width on mobile */ .hero-visual { max-width: 100%; } .hero-badge { padding: 1.4rem 1.5rem; } .hero-badge + .hero-badge { border-top: 1px solid var(--border-hi); } .hero-badge-text { font-size: 1.15rem; } .scroll-indicator { display: none; } /* ─── SECTIONS ────────────────────────────────────────── */ section { padding: 4.5rem 5% 2rem; justify-content: flex-start; /* overflow:visible is already forced by the section,#hero reset above — do NOT add overflow-y:auto or overscroll- behavior:contain here; they trap scroll in iOS Safari. */ } .section-header { margin-bottom: 1.5rem; } .section-title { font-size: clamp(2rem, 8vw, 3.5rem); } /* ─── ABOUT ───────────────────────────────────────────── */ .about-grid { grid-template-columns: 1fr; gap: 2rem; } .about-stats { grid-template-columns: 1fr 1fr; } .stat-box { padding: 1.8rem 1rem; } .stat-number { font-size: 2.8rem; } /* ─── WHY US ──────────────────────────────────────────── */ .why-grid { grid-template-columns: 1fr; } .why-card { padding: 1.8rem 1.5rem; } /* ─── SERVICES ────────────────────────────────────────── */ .services-grid { grid-template-columns: 1fr; } /* ─── OVERVIEW ────────────────────────────────────────── */ .overview-grid { grid-template-columns: 1fr; } /* ─── SOLUTIONS carousel (mobile ≤ 768 px) ─────────────── */ .solutions-carousel { gap: 0.4rem; } /* ─── TESTIMONIALS (mobile ≤ 768 px) ───────────────────── */ /* Viewport + track stay flex but shrink arrow buttons */ .testimonials-carousel { gap: 0.4rem; } .carousel-btn { width: 36px; height: 36px; } .carousel-btn svg { width: 18px; height: 18px; } /* JS sets grid-template-columns: 1fr on each .carousel-page for mobile */ /* ─── CONTACT ─────────────────────────────────────────── */ .contact-title { font-size: clamp(2.5rem, 10vw, 4.5rem); } .contact-desc { margin-bottom: 1.5rem; font-size: 0.9rem; } .contact-details { margin-bottom: 1.5rem; flex-direction: column; } .contact-item { border-right: none; border-bottom: 1px solid var(--border); width: 100%; padding: 1.2rem 1.5rem; } .contact-item:last-child { border-bottom: none; } /* ─── FOOTER ──────────────────────────────────────────── */ footer { flex-direction: column; text-align: center; padding: 1rem 5%; } } /* ── Small mobile ────────────────────────────────────────── */ @media (max-width: 480px) { .hero-scaler { padding-left: 5%; padding-right: 5%; gap: 1rem; } .hero-title { font-size: clamp(2rem, 11vw, 3rem); } .btn-primary, .btn-outline { padding: 0.75rem 1.5rem; font-size: 0.75rem; } .hero-globe-col { width: min(36vh, 70vw); height: min(36vh, 70vw); } #hero-globe { width: 100%; height: 100%; max-width: min(36vh, 70vw); max-height: min(36vh, 70vw); } .about-stats { grid-template-columns: 1fr 1fr; } .cert-badge { width: 190px; /* was 160 px */ } } /* ══ LANDSCAPE MOBILE / SHORT VIEWPORT ══════════════════════ Triggered when a mobile device is held sideways (or any viewport narrower than 1024 px but shorter than 500 px). Switches the hero scaler to a 3-column row layout that mirrors the desktop arrangement: left — brand title + CTA buttons centre — globe right — Mission / Vision badges ══════════════════════════════════════════════════════════ */ @media (max-width: 1024px) and (max-height: 500px) { /* ─── HERO: 3-column row, vertically centred ───────────── */ .hero-scaler { display: flex !important; position: absolute !important; top: 0 !important; bottom: 0 !important; /* stretch to full hero height */ left: 0 !important; right: 0 !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; /* vertically centre the 3 columns */ justify-content: space-between !important; /* Top padding clears the fixed navbar; bottom matches for symmetry. The extra navbar clearance (52 px) is absorbed by padding-top so the row appears optically centred in the available space below nav. */ /* Symmetric top/bottom padding so align-items:center places the row at the true visual midpoint of the space below the navbar. */ padding: max(3.6rem, 56px) 3% !important; gap: 0.75rem !important; } /* Left column: title + buttons, left-aligned + vertically centred */ .hero-content { flex: 0 0 30% !important; min-width: 0 !important; text-align: left !important; padding-right: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-self: center !important; } .hero-eyebrow { justify-content: flex-start !important; font-size: 0.68rem !important; letter-spacing: 3px !important; margin-bottom: 0.4rem !important; } .hero-eyebrow::before { display: inline-block !important; } .hero-title { font-size: clamp(1.4rem, 5.5vh, 2.4rem) !important; line-height: 0.95 !important; margin-bottom: 0.55rem !important; } .hero-actions { flex-wrap: wrap !important; gap: 0.4rem !important; justify-content: flex-start !important; } .btn-primary, .btn-outline { padding: 0.5rem 1rem !important; font-size: 0.7rem !important; letter-spacing: 1.5px !important; } .btn-map { font-size: 0.68rem !important; padding: 0.5rem 0.8rem !important; } /* Centre column: globe — sized to fit landscape height */ .hero-globe-col { flex: 0 0 auto !important; width: min(240px, 30vw) !important; height: min(240px, 30vw) !important; align-self: center !important; } #hero-globe { width: 100% !important; height: 100% !important; max-width: min(240px, 30vw) !important; max-height: min(240px, 30vw) !important; } /* Right column: Mission / Vision badges — shown in landscape */ .hero-visual { flex: 0 0 30% !important; display: flex !important; position: relative !important; right: auto !important; top: auto !important; transform: none !important; width: 30% !important; min-width: 0 !important; max-width: none !important; flex-direction: column !important; align-items: stretch !important; align-self: center !important; } .hero-badge { padding: 0.65rem 0.85rem !important; } .hero-badge + .hero-badge { margin-top: 1px !important; border-top: none !important; } .hero-badge-label { font-size: 0.65rem !important; letter-spacing: 2.5px !important; margin-bottom: 0.3rem !important; } .hero-badge-text { font-size: 0.9rem !important; line-height: 1.2 !important; } /* ─── SECTIONS: reduced typography for landscape reading ─── */ section { padding: 3.5rem 4% 1.5rem !important; } .section-title { font-size: clamp(1.6rem, 5vw, 2.6rem) !important; } .section-eyebrow { font-size: 0.7rem !important; letter-spacing: 3px !important; margin-bottom: 0.5rem !important; } .section-header { margin-bottom: 1.2rem !important; } /* About */ .about-desc { font-size: 0.82rem !important; line-height: 1.6 !important; } .stat-number { font-size: 2.2rem !important; } .stat-label { font-size: 0.72rem !important; } .stat-box { padding: 1.2rem 0.75rem !important; } /* Cards (Why, Services, Overview) */ .why-card, .service-card, .overview-card { padding: 1.2rem 1.1rem !important; } .card-title, .service-title, .why-title { font-size: 1rem !important; } .card-desc, .service-desc, .why-desc { font-size: 0.8rem !important; line-height: 1.5 !important; } /* Contact */ .contact-title { font-size: clamp(1.8rem, 6vw, 3rem) !important; } .contact-desc { font-size: 0.8rem !important; margin-bottom: 1rem !important; } .contact-label { font-size: 0.7rem !important; letter-spacing: 3px !important; } .contact-item { padding: 0.9rem 1.2rem !important; } .contact-item-label { font-size: 0.65rem !important; } .contact-item-value { font-size: 0.85rem !important; } } /* ══ CHARACTER-SPLIT TITLE ANIMATION ═══════════════════════ Each letter inside .section-title gets wrapped in a .char span by JS. CSS keeps them inline; Anime.js drives the motion. ══════════════════════════════════════════════════════════ */ .char { display: inline-block; will-change: transform, opacity; } /* ══ SIDE NAVIGATION DOTS ═══════════════════════════════════ /* ══ SIDE NAV ══════════════════════════════════════════════ Glass-effect dot navigation with up/down arrows. Uses iOS 16/26-style frosted glass: backdrop-filter:blur + semi-transparent background so the navigation overlay does not fully obscure section content beneath it. Visible on ALL resolutions (desktop, tablet, mobile). Scales position and sizing via responsive breakpoints. ══════════════════════════════════════════════════════════ */ #side-nav { position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%); z-index: 800; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; opacity: 0; transition: opacity 0.5s; touch-action: manipulation; /* eliminate 300ms tap delay on mobile */ /* ── Glass / frosted-material effect ── */ background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 28px; padding: 0.55rem 0.45rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), inset 0 0.5px 0 rgba(255, 255, 255, 0.12); } /* Light theme: slightly adjusted glass tint for legibility */ html[data-theme="light"] #side-nav { background: rgba(255, 255, 255, 0.55); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), inset 0 0.5px 0 rgba(255, 255, 255, 0.7); } #side-nav.visible { opacity: 1; } /* ── Dots container (between arrows) ── */ .side-dots-group { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 0.35rem 0; } /* ── Individual dot ── */ .side-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-hi); cursor: pointer; transition: background 0.3s, transform 0.3s, box-shadow 0.3s; position: relative; touch-action: manipulation; } /* Tooltip label on hover (desktop) */ .side-dot::after { content: attr(data-label); position: absolute; right: 1.8rem; top: 50%; transform: translateY(-50%); font-family: "Barlow Condensed", sans-serif; font-size: 0.62rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted-mid); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .side-dot:hover::after { opacity: 1; } /* Active dot: crimson glow */ .side-dot.active { background: var(--crimson); transform: scale(1.65); box-shadow: 0 0 10px rgba(var(--crimson-rgb), 0.7); } /* ── Up / Down arrow buttons ── */ .side-arrow { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; border-radius: 50%; background: transparent; color: var(--muted-mid); cursor: pointer; padding: 0; transition: color 0.2s, background 0.2s; flex-shrink: 0; touch-action: manipulation; } .side-arrow svg { width: 14px; height: 14px; pointer-events: none; } .side-arrow:hover { color: var(--crimson); background: rgba(var(--crimson-rgb), 0.12); } .side-arrow:active { transform: scale(0.9); } /* ── Responsive: tablet (769–1024 px) ── */ @media (max-width: 1024px) { #side-nav { right: 0.6rem; padding: 0.45rem 0.35rem; border-radius: 22px; } .side-dots-group { gap: 0.6rem; } .side-dot { width: 6px; height: 6px; } .side-arrow { width: 22px; height: 22px; } .side-arrow svg { width: 12px; height: 12px; } /* Hide tooltip labels on touch devices — they'd require long-press */ .side-dot::after { display: none; } } /* ── Responsive: phone (≤480 px) ── */ @media (max-width: 480px) { #side-nav { right: 0.35rem; padding: 0.35rem 0.25rem; border-radius: 18px; gap: 0.2rem; } .side-dots-group { gap: 0.45rem; } .side-dot { width: 5px; height: 5px; } .side-dot.active { transform: scale(1.5); } .side-arrow { width: 20px; height: 20px; } .side-arrow svg { width: 11px; height: 11px; } } /* ══ 3D PERSPECTIVE ON CARD GRIDS ═════════════════════════ Gives the translateY + scale entrance a subtle depth feel. ══════════════════════════════════════════════════════════ */ .why-grid, .services-grid, .solutions-grid, .testimonials-viewport, .overview-grid { perspective: 1400px; } /* ══ SECTION SCENE PAINTING ════════════════════════════════ Alternating LIGHT / DARK sections for clear visual rhythm. Light sections: lighter base + large vivid gradient bloom. Dark sections: near-black base + accent corner glows. Each section also has: • Ghost section number watermark (::before, bottom-right) • Top 3px accent stripe (::after) ══════════════════════════════════════════════════════════ */ /* Content layers above watermark */ section > * { position: relative; z-index: 2; } #contact > footer { z-index: 3; } /* ─ Shared ghost icon geometry ─ */ #about::before, #why::before, #services::before, #overview::before, #solutions::before, #certifications::before, #testimonials::before { content: ""; display: block; position: absolute; width: clamp(10rem, 21vw, 19rem); height: clamp(10rem, 21vw, 19rem); pointer-events: none; user-select: none; bottom: 0; right: 3%; z-index: 0; background-size: contain; background-repeat: no-repeat; background-position: bottom right; } /* ─ Shared top stripe geometry ─ */ #about::after, #why::after, #services::after, #overview::after, #solutions::after, #certifications::after, #testimonials::after, #contact::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; } /* ── 01 ABOUT — RED light — warm crimson bloom ─────── */ #about { background: radial-gradient( ellipse 100% 90% at 50% 50%, rgba(var(--crimson-rgb), 0.28) 0%, transparent 65% ), radial-gradient( ellipse 60% 50% at 95% 90%, rgba(var(--crimson-rgb), 0.18) 0%, transparent 50% ), radial-gradient( ellipse 50% 40% at 5% 5%, rgba(var(--crimson-rgb), 0.12) 0%, transparent 45% ), var(--sect-red); } /* About — Users / people icon */ #about::before { background-image: url("data:image/svg+xml,"); opacity: 0.14; } #about::after { background: linear-gradient(to right, var(--crimson), transparent 50%); } /* ── 02 WHY US — BLUE dark — deep navy glow ─────────── */ #why { background: radial-gradient( ellipse 72% 62% at 5% 15%, rgba(var(--blue-rgb), 0.22) 0%, transparent 55% ), radial-gradient( ellipse 45% 40% at 95% 85%, rgba(var(--blue-rgb), 0.12) 0%, transparent 50% ), var(--sect-blue); } /* Why Us — Shield with checkmark icon */ #why::before { background-image: url("data:image/svg+xml,"); opacity: 0.18; } #why::after { background: linear-gradient(to right, var(--blue), transparent 50%); } /* ── 03 SERVICES — RED dark — deep crimson accent ────── */ #services { background: radial-gradient( ellipse 70% 60% at 92% 80%, rgba(var(--crimson-rgb), 0.26) 0%, transparent 55% ), radial-gradient( ellipse 45% 35% at 8% 15%, rgba(var(--crimson-rgb), 0.14) 0%, transparent 50% ), var(--sect-red); } /* Services — Settings gear icon */ #services::before { background-image: url("data:image/svg+xml,"); opacity: 0.15; } #services::after { background: linear-gradient(to right, var(--crimson), transparent 50%); } /* ── 04 OVERVIEW — BLUE light — sapphire bloom ───────── */ #overview { background: radial-gradient( ellipse 100% 90% at 50% 50%, rgba(var(--blue-rgb), 0.28) 0%, transparent 65% ), radial-gradient( ellipse 60% 50% at 5% 90%, rgba(var(--blue-rgb), 0.18) 0%, transparent 50% ), radial-gradient( ellipse 45% 35% at 95% 5%, rgba(var(--blue-rgb), 0.12) 0%, transparent 45% ), var(--sect-blue); } /* Overview — Layers / stacked icon */ #overview::before { background-image: url("data:image/svg+xml,"); opacity: 0.18; } #overview::after { background: linear-gradient(to right, var(--blue), transparent 50%); } /* ── 05 SOLUTIONS — RED light — crimson center ───────── */ #solutions { background: radial-gradient( ellipse 100% 90% at 50% 50%, rgba(var(--crimson-rgb), 0.26) 0%, transparent 65% ), radial-gradient( ellipse 55% 45% at 90% 90%, rgba(var(--crimson-rgb), 0.18) 0%, transparent 50% ), radial-gradient( ellipse 40% 35% at 5% 5%, rgba(var(--crimson-rgb), 0.12) 0%, transparent 45% ), var(--sect-red); } /* Solutions — Package / box icon */ #solutions::before { background-image: url("data:image/svg+xml,"); opacity: 0.15; } #solutions::after { background: linear-gradient(to right, var(--crimson), transparent 50%); } /* ── 06 CERTIFICATIONS — BLUE dark — sky blue glow ──── */ #certifications { background: radial-gradient( ellipse 75% 65% at 15% 50%, rgba(var(--blue-rgb), 0.28) 0%, transparent 55% ), radial-gradient( ellipse 40% 30% at 88% 20%, rgba(var(--blue-rgb), 0.14) 0%, transparent 50% ), var(--sect-blue); } /* Certifications — Award / medal icon */ #certifications::before { background-image: url("data:image/svg+xml,"); opacity: 0.18; } #certifications::after { background: linear-gradient(to right, var(--blue), transparent 50%); } /* ── 07 TESTIMONIALS — BLUE light — azure bloom ─────── */ #testimonials { background: radial-gradient( ellipse 100% 90% at 50% 50%, rgba(var(--blue-rgb), 0.26) 0%, transparent 65% ), radial-gradient( ellipse 55% 45% at 95% 90%, rgba(var(--blue-rgb), 0.16) 0%, transparent 50% ), radial-gradient( ellipse 40% 35% at 5% 5%, rgba(var(--blue-rgb), 0.1) 0%, transparent 45% ), var(--sect-blue); } /* Testimonials — Message bubble / quote icon */ #testimonials::before { background-image: url("data:image/svg+xml,"); opacity: 0.18; } #testimonials::after { background: linear-gradient(to right, var(--blue), transparent 50%); } /* ── 08 CONTACT — RED light — crimson stage ─────────── */ #contact { background: radial-gradient( ellipse 100% 90% at 50% 55%, rgba(var(--crimson-rgb), 0.34) 0%, transparent 65% ), radial-gradient( ellipse 50% 40% at 95% 5%, rgba(var(--crimson-rgb), 0.18) 0%, transparent 50% ), radial-gradient( ellipse 40% 35% at 5% 95%, rgba(var(--crimson-rgb), 0.14) 0%, transparent 45% ), var(--sect-red); } #contact::after { background: linear-gradient(to right, var(--crimson) 30%, transparent 65%); } /* ══════════════════════════════════════════════════════════════ TRUE LIGHT THEME — bright white surfaces, dark text. ══════════════════════════════════════════════════════════════ */ /* ── Body dot grid: darker dots visible on white ── */ html[data-theme="light"] body { background: var(--bg); color: var(--white); } /* ── Hero section: light background with subtle gradients ── */ html[data-theme="light"] #hero { background: var(--bg); } html[data-theme="light"] .hero-bg { background: radial-gradient( ellipse 70% 60% at 30% 50%, rgba(var(--crimson-rgb), 0.08) 0%, transparent 70% ), radial-gradient( ellipse 50% 50% at 80% 80%, rgba(var(--blue-rgb), 0.1) 0%, transparent 60% ); } html[data-theme="light"] .hero-orb.orb-1 { background: radial-gradient( circle, rgba(var(--crimson-rgb), 0.12) 0%, transparent 70% ); } html[data-theme="light"] .hero-orb.orb-2 { background: radial-gradient( circle, rgba(var(--blue-rgb), 0.12) 0%, transparent 70% ); } /* ── Nav bar: clean white with subtle shadow ── */ html[data-theme="light"] nav.scrolled { box-shadow: var(--shadow-md); } html[data-theme="light"] nav.on-hero { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.45) 0%, transparent 100% ); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; } /* ── Cards: white cards with visible borders and shadow ── */ html[data-theme="light"] .why-card, html[data-theme="light"] .service-card, html[data-theme="light"] .solution-card, html[data-theme="light"] .stat-box, html[data-theme="light"] .overview-item, html[data-theme="light"] .testimonial-card, html[data-theme="light"] .cert-badge { box-shadow: var(--shadow-sm); } html[data-theme="light"] .cert-name { color: #000000; } html[data-theme="light"] .solution-logo-wrap, html[data-theme="light"] .cert-logo-wrap { border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); } /* ── Stat numbers: crimson gradient ── */ html[data-theme="light"] .stat-number { background: linear-gradient(135deg, var(--crimson) 30%, var(--crimson-li)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Hero badges: white glass on light bg ── */ html[data-theme="light"] .hero-badge { background: var(--badge-bg); border-color: var(--badge-border); box-shadow: var(--shadow-md); } html[data-theme="light"] .hero-badge-text { color: var(--badge-text); } html[data-theme="light"] .hero-badge-sub { color: var(--badge-sub); } html[data-theme="light"] .continent-strip { background: var(--badge-bg); border-color: var(--badge-border); box-shadow: var(--shadow-md); } /* ── Contact details box ── */ html[data-theme="light"] .contact-details { background: var(--contact-box-bg); border-color: var(--badge-border); box-shadow: var(--shadow-sm); } /* ── Outline button on light surface ── */ html[data-theme="light"] .btn-outline { border-color: var(--btn-outline-border); color: var(--btn-outline-color); } html[data-theme="light"] .btn-outline:hover { border-color: var(--crimson); color: var(--crimson); background: var(--btn-outline-hover-bg); } /* ── Why icon wrapper ── */ html[data-theme="light"] .why-icon-wrap { background: var(--icon-box-bg); border-color: var(--icon-box-border); } /* ── Cert track fade edges on light bg ── */ html[data-theme="light"] .cert-track-wrapper::before { background: linear-gradient(to right, var(--bg), transparent); } html[data-theme="light"] .cert-track-wrapper::after { background: linear-gradient(to left, var(--bg), transparent); } /* ── Map pin labels ── */ html[data-theme="light"] .map-pin-label { background: var(--contact-box-bg); border-color: var(--badge-border); color: var(--map-label-text); } /* ── World map img: visible on light bg ── */ html[data-theme="light"] .world-map-img { opacity: 0.3; filter: sepia(0.4) saturate(1.5) brightness(0.85); } /* ── Section watermark icons: dark on light bg ── */ html[data-theme="light"] #about::before { opacity: 0.1; filter: invert(1); } html[data-theme="light"] #services::before { opacity: 0.1; filter: invert(1); } html[data-theme="light"] #solutions::before { opacity: 0.1; filter: invert(1); } /* ── Section separation on native-scroll (tablet & mobile) ── */ @media (max-width: 1024px) { html[data-theme="light"] section + section { border-top: 1px solid rgba(0, 0, 0, 0.06); } } /* ══ THEME TOGGLE BUTTON ══════════════════════════════════════ Circular icon button in the nav bar. Shows sun (dark→light) or moon (light→dark). Floats at the right end of the nav. ══════════════════════════════════════════════════════════════ */ .theme-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-hi); background: transparent; color: var(--muted-mid); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s, color 0.2s, background 0.2s; outline: none; } .theme-toggle:hover { border-color: var(--crimson); color: var(--crimson); background: var(--crimson-dim); } .theme-toggle:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; } .theme-toggle svg { width: 15px; height: 15px; pointer-events: none; flex-shrink: 0; } /* ── Icon visibility: show sun in dark mode, moon in light mode ── */ html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } /* ── Nav wrapper: keep links + toggle together on the right ── */ .nav-right { display: flex; align-items: center; gap: 2rem; } @media (max-width: 768px) { .nav-right { gap: 0.6rem; } } /* ══════════════════════════════════════════════════════════════════════ 2-D WORLD MAP MODAL — redesigned UI ────────────────────────────────────────────────────────────────────── Design intent: • Dark mode: deep navy panel, steel-blue chrome, blue accents so the UI chrome doesn't bleed the same red the map land/pins use. • Light mode: clean white panel, blue chrome, same principle. • Red is reserved for SVG map elements (land, pins) to match globe. • Large readable type; every visible string ≥ 13 px. ══════════════════════════════════════════════════════════════════════ */ /* ── Map-modal colour tokens (dark default) ── */ #map-modal { --mm-bg: #07091a; /* deepest background */ --mm-panel: #0b0f26; /* sidebar / header bg */ --mm-border: rgba(100, 140, 220, 0.22); /* steel-blue border */ --mm-accent: #4d8cf5; /* blue accent / highlight */ --mm-accent-dim: rgba(77, 140, 245, 0.15); --mm-text: #e8edf8; /* primary text — high contrast */ --mm-text-dim: #8fa3c8; /* secondary text */ --mm-rule: rgba(100, 140, 220, 0.18); } html[data-theme="light"] #map-modal { --mm-bg: #f0f4ff; --mm-panel: #e8eeff; --mm-border: rgba(60, 100, 200, 0.22); --mm-accent: #2563eb; --mm-accent-dim: rgba(37, 99, 235, 0.1); --mm-text: #111827; --mm-text-dim: #4b5e82; --mm-rule: rgba(60, 100, 200, 0.18); } /* ── Lock body scroll while modal open ── */ body.map-modal-open { overflow: hidden; } /* ── Backdrop ── */ #map-modal { display: none; position: fixed; inset: 0; z-index: 99000; align-items: center; justify-content: center; background: rgba(3, 5, 18, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 20px; } #map-modal:not([hidden]) { display: flex; animation: mapModalFadeIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes mapModalFadeIn { from { opacity: 0; transform: scale(0.97) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ── Inner panel — wider, taller ── */ .map-modal-inner { position: relative; width: 100%; max-width: 1500px; height: min(92vh, 940px); background: var(--mm-bg); border: 1px solid var(--mm-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(77, 140, 245, 0.08), 0 40px 120px rgba(0, 0, 0, 0.85), 0 12px 40px rgba(0, 0, 0, 0.55); } /* ── Header bar ── */ .map-modal-inner::before { content: "GLOBAL OFFICE LOCATIONS"; display: flex; align-items: center; padding: 0 80px 0 36px; height: 56px; min-height: 56px; font-family: "Barlow Condensed", "Barlow", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.26em; color: var(--mm-accent); background: var(--mm-panel); border-bottom: 1px solid var(--mm-border); } /* ── Close button ── */ .map-modal-close { position: absolute; top: 12px; right: 18px; z-index: 10; width: 36px; height: 36px; background: none; border: 1px solid var(--mm-border); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--mm-text-dim); transition: background 0.2s, border-color 0.2s, color 0.2s; } .map-modal-close:hover { background: var(--mm-accent-dim); border-color: var(--mm-accent); color: var(--mm-accent); } .map-modal-close svg { width: 17px; height: 17px; pointer-events: none; } /* ── Two-column layout: sidebar | map ── */ .map-modal-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* ══ SIDEBAR ════════════════════════════════════════════════════════ */ .map-sidebar { width: 300px; flex-shrink: 0; padding: 28px 24px 20px; background: var(--mm-panel); border-right: 1px solid var(--mm-border); display: flex; flex-direction: column; gap: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mm-border) transparent; } .map-sidebar-eyebrow { font-family: "Barlow Condensed", "Barlow", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mm-accent); margin: 0 0 8px; } .map-sidebar-title { font-family: "Bebas Neue", "Barlow Condensed", sans-serif; font-size: 2.8rem; line-height: 1; letter-spacing: 0.04em; color: var(--mm-text); margin: 0 0 24px; } /* ── Location list ── */ .map-loc-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 6px; } .map-loc-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: background 0.18s, border-color 0.18s, transform 0.15s; } .map-loc-item:hover { background: var(--mm-accent-dim); border-color: var(--mm-border); transform: translateX(3px); } .map-loc-item.active { background: var(--mm-accent-dim); border-color: var(--mm-accent); } .map-loc-item.active .map-loc-name { color: var(--mm-accent); } .map-loc-pin { width: 22px; height: 22px; flex-shrink: 0; color: var(--mm-accent); } .map-loc-pin svg { width: 100%; height: 100%; } .map-loc-info { display: flex; flex-direction: column; gap: 3px; } .map-loc-name { font-family: "Barlow", sans-serif; font-size: 15px; font-weight: 600; color: var(--mm-text); line-height: 1.3; transition: color 0.18s; } .map-loc-tz { font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mm-accent); } /* ── Contact panel ── */ .map-contact-panel { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--mm-rule); } .map-contact-hint { font-family: "Barlow", sans-serif; font-size: 13px; font-style: italic; color: var(--mm-text-dim); opacity: 0.7; margin: 6px 0 0; text-align: center; } .map-contact-card { display: flex; flex-direction: column; gap: 0; } .map-cc-eyebrow { font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mm-accent); margin: 0 0 6px; } .map-cc-name { font-family: "Bebas Neue", "Barlow Condensed", sans-serif; font-size: 1.9rem; line-height: 1.1; letter-spacing: 0.04em; color: var(--mm-text); margin: 0 0 4px; } .map-cc-tz { font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mm-text-dim); margin: 0 0 14px; } .map-cc-rule { border: none; border-top: 1px solid var(--mm-rule); margin: 0 0 14px; } .map-ci { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .map-ci-label { font-family: "Barlow Condensed", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mm-text-dim); } .map-ci-value { font-family: "Barlow", sans-serif; font-size: 15px; font-weight: 500; color: var(--mm-text); text-decoration: none; word-break: normal; overflow-wrap: break-word; transition: color 0.18s; } a.map-ci-value:hover { color: var(--mm-accent); text-decoration: underline; } /* ══ MAP VIEWPORT ═══════════════════════════════════════════════════ */ .map-viewport { flex: 1; min-width: 0; overflow: hidden; position: relative; background: var(--globe-interior); } #world-map-svg { display: block; width: 100%; height: 100%; } /* ── SVG marker pulse animation ── */ @keyframes mapMarkerPulse { 0% { opacity: 0.6; transform: scale(1); } 65% { opacity: 0.05; transform: scale(2.5); } 100% { opacity: 0.6; transform: scale(1); } } .map-pulse-ring { animation: mapMarkerPulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .map-marker.active .map-pulse-ring { animation-duration: 1.3s; } /* ── Hero globe hover badge ── */ #hero-globe { position: relative; } #hero-globe::after { content: "Click · View 2D Map"; position: absolute; top: 16px; left: 50%; transform: translateX(-50%) translateY(-8px); font-family: "Barlow Condensed", "Barlow", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: var(--globe-label-border); background: var(--globe-label-bg); border: 1px solid var(--globe-label-border); padding: 5px 14px; border-radius: 3px; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; } #hero-globe:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── "View 2D Map" button in hero-actions ── */ .btn-map { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 1px solid var(--globe-label-border); background: none; font-family: "Barlow Condensed", "Barlow", sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--globe-label-text); cursor: pointer; border-radius: 3px; transition: background 0.2s, color 0.2s, border-color 0.2s; text-decoration: none; } .btn-map:hover { background: rgba(var(--globe-atm-rgb), 0.18); color: var(--globe-label-border); border-color: var(--globe-label-border); } .btn-map svg { width: 16px; height: 16px; flex-shrink: 0; } /* ── Mobile address panel (row 4) — hidden on desktop ── */ #map-contact-panel-mobile { display: none; } /* ══ RESPONSIVE ══════════════════════════════════════════════════════ */ @media (max-width: 900px) { #map-modal { padding: 0; } .map-modal-inner { width: 100vw; height: 100dvh; border-radius: 0; border: none; } /* ── 3-row grid: [location pills] [map] [address] ── */ .map-modal-layout { display: grid; grid-template-rows: auto 1fr 140px; overflow: hidden; } /* Row 1 — compact horizontal location pills (sidebar without eyebrow/title) */ .map-sidebar { width: 100%; padding: 8px 12px; border-right: none; border-bottom: 1px solid var(--mm-border); overflow: visible; } .map-sidebar-eyebrow, .map-sidebar-title, #map-contact-panel { display: none; } .map-loc-list { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 0; overflow: visible; } .map-loc-item { flex: 1 1 calc(50% - 3px); max-width: calc(50% - 3px); padding: 7px 10px; gap: 7px; } .map-loc-pin { width: 15px; height: 15px; } .map-loc-name { font-size: 13px; } .map-loc-tz { display: none; } /* Row 2 — map viewport */ .map-viewport { min-height: 0; overflow: hidden; } /* Row 3 — mobile address panel: fixed grid row (140px), no scroll */ #map-contact-panel-mobile { display: block; background: var(--mm-panel); border-top: 1px solid var(--mm-border); padding: 10px 16px 8px; overflow: hidden; } /* Hide redundant elements already shown in the pill buttons above */ #map-contact-panel-mobile .map-cc-eyebrow, #map-contact-panel-mobile .map-cc-tz, #map-contact-panel-mobile .map-cc-rule { display: none; } #map-contact-panel-mobile .map-cc-name { font-size: 1.2rem; margin-bottom: 6px; } #map-contact-panel-mobile .map-ci-value { font-size: 13px; line-height: 1.45; } #hero-globe::after { display: none; } }