/* ============================================================ WINDSOR HYBRID LIMITED — Design System ============================================================ */ /* Fonts are loaded via in each page (parallel, non-blocking) instead of a render-blocking CSS @import. */ :root{ /* Backgrounds */ --bg: #05070d; --bg-1: #070b15; --bg-2: #0a0f1e; --bg-3: #0d1428; --surface: rgba(255,255,255,0.035); --surface-2: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.06); /* Brand blues (from logo) */ --cyan: #22d3ff; --blue: #2f7dff; --blue-deep: #0a3fd6; --navy: #061029; --grad-brand: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 55%, var(--blue-deep) 100%); --grad-brand-soft: linear-gradient(135deg, rgba(34,211,255,.18) 0%, rgba(47,125,255,.14) 55%, rgba(10,63,214,.12) 100%); --grad-text: linear-gradient(100deg, #7fe8ff 0%, #4fa3ff 45%, #6a8dff 100%); /* Text */ --text: #eef3fb; --text-dim: #9aa7bf; --text-faint: #7c89a6; /* Radii / shadow */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 999px; --glow: 0 0 40px rgba(47,125,255,.25); --glow-cyan: 0 0 40px rgba(34,211,255,.25); --shadow-card: 0 20px 60px -20px rgba(0,0,0,.6); --ease: cubic-bezier(.16,.84,.44,1); --dur: .6s; --container: 1240px; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } html,body{ margin:0; padding:0; } body{ background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; line-height: 1.6; overflow-x: hidden; position: relative; } body::before{ content:''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 900px 600px at 15% -5%, rgba(47,125,255,.16), transparent 60%), radial-gradient(ellipse 900px 700px at 100% 20%, rgba(34,211,255,.10), transparent 55%), radial-gradient(ellipse 800px 600px at 0% 80%, rgba(10,63,214,.14), transparent 55%), var(--bg); } body::after{ content:''; position: fixed; inset:0; z-index: -1; pointer-events: none; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 40%, transparent 100%); } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } ul{ list-style: none; margin:0; padding:0; } button{ font-family: inherit; cursor: pointer; } input,select,textarea{ font-family: inherit; } h1,h2,h3,h4{ font-family: 'Orbitron', 'Inter', sans-serif; font-weight: 700; letter-spacing: .01em; margin: 0; color: #fff; } .container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; } .text-gradient{ background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow{ display: inline-flex; align-items: center; gap: 10px; font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin: 0 0 16px; } .eyebrow::before{ content:''; width: 22px; height: 1px; background: var(--grad-brand); } .section{ padding: 130px 0; position: relative; } @media (max-width: 768px){ .section{ padding: 84px 0; } } .section-head{ max-width: 680px; margin: 0 0 64px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head.center .eyebrow{ justify-content:center; } .section-head.center .eyebrow::before{ display:none; } .section-title{ font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin-bottom: 18px; } .section-sub{ color: var(--text-dim); font-size: 17px; max-width: 560px; } .section-head.center .section-sub{ margin-left:auto; margin-right:auto; } /* ---------- Buttons ---------- */ .btn{ --pad-y: 15px; display: inline-flex; align-items: center; justify-content:center; gap: 10px; padding: var(--pad-y) 30px; border-radius: var(--r-full); font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px solid transparent; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); white-space: nowrap; position: relative; } .btn svg{ width:16px; height:16px; transition: transform .3s var(--ease); } .btn-sm{ padding: 11px 22px; font-size: 12px; } .btn-primary{ background: var(--grad-brand); color: #051022; box-shadow: 0 10px 30px -8px rgba(47,125,255,.55); } .btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(34,211,255,.6); } .btn-primary:hover svg{ transform: translateX(4px); } .btn-outline{ background: rgba(255,255,255,.02); color: var(--text); border-color: var(--border); backdrop-filter: blur(6px); } .btn-outline:hover{ border-color: rgba(34,211,255,.5); background: rgba(34,211,255,.06); transform: translateY(-3px); } .btn-block{ width:100%; } /* ---------- Reveal ---------- */ .reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{ opacity: 1; transform: translateY(0); } .reveal-delay-1{ transition-delay: .08s; } .reveal-delay-2{ transition-delay: .16s; } .reveal-delay-3{ transition-delay: .24s; } .reveal-delay-4{ transition-delay: .32s; } .reveal-delay-5{ transition-delay: .4s; } /* ============================================================ Preloader ============================================================ */ #preloader{ position: fixed; inset:0; z-index: 9999; background: var(--bg); display:flex; align-items:center; justify-content:center; flex-direction:column; gap: 22px; transition: opacity .7s var(--ease), visibility .7s var(--ease); } #preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; } .pre-logo{ width: 64px; height:64px; border-radius: 18px; background: var(--grad-brand); display:flex; align-items:center; justify-content:center; font-family:'Orbitron'; font-weight:800; color:#04101f; font-size:26px; box-shadow: 0 0 50px rgba(47,125,255,.5); animation: pulse-scale 1.6s ease-in-out infinite; } .pre-bar{ width: 180px; height:2px; background: rgba(255,255,255,.08); border-radius:2px; overflow:hidden; } .pre-bar span{ display:block; height:100%; width:30%; background: var(--grad-brand); animation: loadbar 1.1s ease-in-out infinite; } @keyframes loadbar{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(400%);} } @keyframes pulse-scale{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.08);} } /* ============================================================ Cursor glow (desktop only) ============================================================ */ .cursor-glow{ position: fixed; top:0; left:0; width: 420px; height: 420px; margin-left:-210px; margin-top:-210px; border-radius: 50%; background: radial-gradient(circle, rgba(47,125,255,.10), transparent 70%); pointer-events: none; z-index: 2; transform: translate3d(-1000px,-1000px,0); transition: opacity .3s ease; will-change: transform; } /* ============================================================ Navbar ============================================================ */ .navbar{ position: fixed; top:0; left:0; right:0; z-index: 1000; padding: 22px 0; transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); border-bottom: 1px solid transparent; } .navbar.scrolled{ padding: 13px 0; background: rgba(5,7,13,.72); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border-soft); } .navbar-inner{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 20px; } .brand{ display:flex; align-items:center; gap:10px; justify-self:start; } .brand img{ height: 58px; width:auto; transition: height .4s var(--ease); } .navbar.scrolled .brand img{ height: 44px; } @media (max-width: 560px){ .brand img{ height: 46px; } .navbar.scrolled .brand img{ height: 38px; } } .nav-links{ display:flex; align-items:center; gap: 4px; justify-self:center; } .nav-links a:not(.btn){ padding: 10px 15px; font-size: 15px; font-weight: 700; letter-spacing: .005em; color: var(--text); border-radius: var(--r-full); transition: color .3s ease, background .3s ease; position: relative; } /* premium animated underline indicator */ .nav-links a:not(.btn)::after{ content:''; position:absolute; left:15px; right:15px; bottom:5px; height:2px; border-radius:2px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease); } .nav-links a:not(.btn):hover{ color: #fff; background: rgba(255,255,255,.05); } .nav-links a:not(.btn):hover::after, .nav-links a.active:not(.btn)::after{ transform: scaleX(1); } .nav-links a.active:not(.btn){ color: var(--cyan); } .nav-actions{ display:flex; align-items:center; gap:14px; justify-self:end; } .nav-cta-mobile{ display:none; } @media (max-width: 960px){ .nav-cta-desktop{ display:none; } .nav-cta-mobile{ display:inline-flex; width:100%; margin-top:16px; } } /* ---------- Mega menu ---------- */ .nav-item{ position: relative; display:flex; align-items:center; } .nav-mega-trigger{ display:flex !important; align-items:center; gap:5px; } .nav-chevron{ width:11px; height:11px; opacity:.7; transition: transform .35s var(--ease); } .nav-item.mega-open .nav-chevron, .nav-item:hover .nav-chevron{ transform: rotate(180deg); } .mega-toggle-btn{ display:none; background:none; border:none; padding:8px; color: var(--text-dim); align-items:center; justify-content:center; } .mega-menu{ position: absolute; top: calc(100% + 16px); left:50%; transform: translateX(-50%) translateY(6px); width: min(760px, 86vw); background: rgba(7,10,20,.94); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 30px 80px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(34,211,255,.06); padding: 26px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; z-index: 999; } .mega-menu::before{ content:''; position:absolute; top:-16px; left:0; right:0; height:16px; } @media (hover:hover) and (min-width: 961px){ .nav-item:hover .mega-menu{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); pointer-events:auto; } } @media (min-width: 961px){ .nav-item.mega-open .mega-menu{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); pointer-events:auto; } } .mega-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:4px; align-content:start; } .mega-item{ display:flex; align-items:flex-start; gap:13px; padding: 11px; border-radius: var(--r-md); transition: background .25s ease, transform .25s ease; } .mega-item:hover{ background: rgba(34,211,255,.07); transform: translateX(2px); } .mega-item .icon-box{ width:38px; height:38px; margin-bottom:0; flex-shrink:0; border-radius:11px; } .mega-item .icon-box svg{ width:17px; height:17px; } .mega-item h4{ font-family:'Inter'; font-weight:600; font-size:13.5px; color:#fff; margin:0 0 3px; } .mega-item p{ font-size:11.5px; color: var(--text-dim); margin:0; line-height:1.4; } .mega-side{ border-left: 1px solid var(--border-soft); padding-left: 24px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; } .mega-side::before{ content:''; position:absolute; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle, rgba(34,211,255,.15), transparent 70%); right:-40px; top:-40px; pointer-events:none; } .mega-side-eyebrow{ font-family:'Orbitron'; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--cyan); margin:0 0 10px; } .mega-side h4{ font-size:17px; line-height:1.3; color:#fff; margin:0 0 10px; } .mega-side p{ font-size:12.5px; color: var(--text-dim); margin:0 0 18px; } @media (max-width: 960px){ .nav-item{ width:100%; flex-direction:column; align-items:stretch; } .nav-mega-trigger{ width:100%; justify-content:space-between; } .mega-toggle-btn{ display:flex; position:absolute; right:0; top:2px; } .mega-menu{ position: static; transform:none; width:100%; max-width:none; background:transparent; border:none; box-shadow:none; backdrop-filter:none; padding: 2px 0 6px 14px; grid-template-columns: 1fr; opacity:1; visibility:visible; pointer-events:auto; display:none; } .nav-item.mobile-open .mega-menu{ display:grid; } .mega-grid{ grid-template-columns:1fr; gap:0; } .mega-item p, .mega-side{ display:none; } .mega-item{ padding:9px 6px; } } .nav-toggle{ display:none; flex-direction:column; gap:5px; width: 40px; height:40px; border-radius: 10px; align-items:center; justify-content:center; background: var(--surface); border:1px solid var(--border); } .nav-toggle span{ width:18px; height:2px; background:#fff; transition: transform .3s ease, opacity .3s ease; } .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2){ opacity:0; } .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } @media (max-width: 960px){ .nav-toggle{ display:flex; } /* Keep brand left, hamburger hard right regardless of the grid template */ .navbar-inner{ display:flex; align-items:center; justify-content:space-between; } .nav-actions{ margin-left:auto; } .nav-links{ position: fixed; top: 0; right: -100%; height: 100dvh; width: min(360px, 86vw); background: rgba(6,10,20,.98); backdrop-filter: blur(20px); flex-direction: column; align-items: flex-start; justify-content:flex-start; gap: 4px; padding: 104px 28px 40px; border-left: 1px solid var(--border); overflow-y: auto; transition: right .45s var(--ease); } .nav-links.open{ right: 0; } .nav-links a:not(.btn){ width:100%; padding: 14px 6px; font-size: 16px; } .nav-links .btn{ margin-left:0; margin-top: 18px; width:100%; } /* one chevron only in the mobile accordion (the toggle button keeps its own) */ .nav-mega-trigger .nav-chevron{ display:none; } .mega-toggle-btn{ top:8px; right:2px; } } @media (max-width: 480px){ .nav-links{ width: 100%; border-left:none; } } /* ============================================================ Hero ============================================================ */ .hero{ position: relative; min-height: 100vh; display:flex; align-items:center; padding: 160px 0 100px; overflow: hidden; } #heroCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.7; } .hero-glow{ position:absolute; border-radius:50%; filter: blur(90px); z-index:0; pointer-events:none; } .hero-glow-1{ width:520px; height:520px; top:-140px; right:-120px; background: rgba(34,211,255,.20); animation: float-a 12s ease-in-out infinite; } .hero-glow-2{ width:460px; height:460px; bottom:-160px; left:-120px; background: rgba(10,63,214,.28); animation: float-b 14s ease-in-out infinite; } @keyframes float-a{ 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(-30px,30px);} } @keyframes float-b{ 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(30px,-24px);} } .hero-inner{ position: relative; z-index:2; max-width: 760px; } /* Desktop/tablet: copy sits left, 3D cube floats right (see .hero-cube-wrap) */ /* Mobile: no cube — centre the hero copy */ @media (max-width: 768px){ .hero-inner{ max-width: 560px; margin-left:auto; margin-right:auto; text-align:center; } .hero-inner .eyebrow{ justify-content:center; } .hero-inner .eyebrow::before{ display:none; } .hero-sub{ margin-left:auto; margin-right:auto; } .hero-cta{ justify-content:center; } .hero-scroll{ justify-content:center; } } .hero-title{ font-size: clamp(40px, 7vw, 78px); line-height: 1.04; margin-bottom: 22px; color:#fff; } .hero-sub{ font-size: 18px; color: var(--text-dim); max-width: 560px; margin-bottom: 38px; } .hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 70px; } .hero-scroll{ display:flex; align-items:center; gap:12px; font-family:'Orbitron'; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--text-faint); } .hero-scroll span{ width: 26px; height: 42px; border-radius: 14px; border: 1px solid var(--border); position: relative; } .hero-scroll span::after{ content:''; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background: var(--cyan); animation: scrolldot 1.8s ease infinite; } @keyframes scrolldot{ 0%{ opacity:1; top:8px;} 70%{ opacity:0; top:22px;} 100%{ opacity:0; top:8px;} } /* Hero 3D cube */ .hero-cube-wrap{ position: absolute; right: 6%; top: 50%; transform: translateY(-50%); perspective: 1200px; z-index: 1; opacity: .9; } @media (max-width: 1180px){ .hero-cube-wrap{ display:none; } } .cube{ width: 220px; height: 220px; position: relative; transform-style: preserve-3d; animation: spin 16s linear infinite; } @keyframes spin{ 0%{ transform: rotateX(-24deg) rotateY(0deg); } 100%{ transform: rotateX(-24deg) rotateY(360deg); } } .cube .face{ position:absolute; inset:0; border: 1px solid rgba(120,190,255,.5); background: linear-gradient(135deg, rgba(34,211,255,.14), rgba(10,63,214,.06)); box-shadow: inset 0 0 40px rgba(34,211,255,.15); backdrop-filter: blur(2px); } .cube .front{ transform: translateZ(110px); } .cube .back{ transform: rotateY(180deg) translateZ(110px); } .cube .right{ transform: rotateY(90deg) translateZ(110px); } .cube .left{ transform: rotateY(-90deg) translateZ(110px); } .cube .top{ transform: rotateX(90deg) translateZ(110px); } .cube .bottom{ transform: rotateX(-90deg) translateZ(110px); } /* ============================================================ Stats bar ============================================================ */ .stats-bar{ position: relative; z-index:2; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); padding: 54px 0; } .stats-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat{ text-align:center; } .stat-num{ font-family:'Orbitron'; font-weight:800; font-size: clamp(30px,4vw,44px); background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat-suffix{ font-family:'Orbitron'; font-weight:800; font-size: clamp(30px,4vw,44px); color: var(--cyan); } .stat-label{ display:block; margin-top:8px; font-size: 13px; color: var(--text-dim); letter-spacing:.02em; } @media (max-width: 768px){ .stats-grid{ grid-template-columns: repeat(2,1fr); gap: 34px 20px; } } /* ============================================================ Cards (generic glass card) ============================================================ */ .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 34px; position: relative; overflow: hidden; backdrop-filter: blur(10px); transition: transform .5s var(--ease), border-color .4s ease, background .4s ease, box-shadow .4s ease; } .card::before{ content:''; position:absolute; inset:0; background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(34,211,255,.10), transparent 60%); opacity:0; transition: opacity .4s ease; pointer-events:none; } .card:hover::before{ opacity:1; } .card:hover{ border-color: rgba(34,211,255,.35); background: rgba(255,255,255,.05); box-shadow: var(--shadow-card), 0 0 0 1px rgba(34,211,255,.08); } .tilt{ will-change: transform; transform-style: preserve-3d; } .icon-box{ width: 52px; height:52px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: var(--grad-brand-soft); border: 1px solid rgba(34,211,255,.25); color: var(--cyan); margin-bottom: 22px; } .icon-box svg{ width: 24px; height:24px; } /* ============================================================ About / What We Do ============================================================ */ .about-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px){ .about-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px){ .about-grid{ grid-template-columns: 1fr; } } .about-card h3{ font-size: 18px; margin-bottom:10px; } .about-card p{ color: var(--text-dim); font-size: 14.5px; margin:0; } .about-lead{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; margin-bottom: 70px; } @media (max-width: 860px){ .about-lead{ grid-template-columns: 1fr; gap:30px; } } .about-lead-visual{ aspect-ratio: 4/3; border-radius: var(--r-lg); border:1px solid var(--border); background: var(--grad-brand-soft); position: relative; overflow:hidden; display:flex; align-items:center; justify-content:center; perspective: 1100px; } .about-lead-visual .grid-lines{ position:absolute; inset:0; background-image: linear-gradient(rgba(120,190,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(120,190,255,.15) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); } /* ---------- 3D isometric layer-stack model ---------- */ .iso-stack{ position: relative; width:170px; height:170px; transform-style: preserve-3d; animation: iso-stack-spin 13s linear infinite, iso-stack-bob 4.5s ease-in-out infinite; } @keyframes iso-stack-spin{ from{ transform: rotateX(58deg) rotateZ(0deg); } to{ transform: rotateX(58deg) rotateZ(360deg); } } @keyframes iso-stack-bob{ 0%,100%{ margin-top:0; } 50%{ margin-top:-10px; } } .iso-layer{ position:absolute; left:50%; top:50%; width:112px; height:112px; margin:-56px 0 0 -56px; border:1px solid rgba(140,205,255,.65); background: linear-gradient(135deg, rgba(34,211,255,.22), rgba(47,125,255,.03)); box-shadow: 0 0 26px rgba(34,211,255,.18), inset 0 0 20px rgba(34,211,255,.08); border-radius: 6px; } .iso-layer:nth-child(1){ transform: translateZ(-64px) scale(.78); opacity:.5; } .iso-layer:nth-child(2){ transform: translateZ(-28px) scale(.88); opacity:.68; } .iso-layer:nth-child(3){ transform: translateZ(8px) scale(1); opacity:.9; } .iso-layer:nth-child(4){ transform: translateZ(44px) scale(1.12); opacity:1; border-color:#fff; } .iso-beam{ position:absolute; left:50%; top:50%; width:2px; height:150px; margin:-75px 0 0 -1px; background: linear-gradient(180deg, transparent, rgba(34,211,255,.9), transparent); transform: translateZ(46px); box-shadow: 0 0 14px rgba(34,211,255,.8); } .iso-particle{ position:absolute; width:6px; height:6px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 12px 2px rgba(34,211,255,.7); } .iso-particle.p1{ top:14%; left:22%; animation: iso-float-a 5s ease-in-out infinite; } .iso-particle.p2{ bottom:18%; right:18%; animation: iso-float-b 6s ease-in-out infinite; } .iso-particle.p3{ top:60%; left:12%; width:4px; height:4px; animation: iso-float-a 4.2s ease-in-out infinite reverse; } @keyframes iso-float-a{ 0%,100%{ transform: translate(0,0); opacity:.5; } 50%{ transform: translate(8px,-14px); opacity:1; } } @keyframes iso-float-b{ 0%,100%{ transform: translate(0,0); opacity:.6; } 50%{ transform: translate(-10px,10px); opacity:1; } } /* ============================================================ Services (numbered cards) ============================================================ */ .services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 980px){ .services-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px){ .services-grid{ grid-template-columns: 1fr; } } .service-card{ display:flex; flex-direction:column; } .service-num{ font-family:'Orbitron'; font-weight:800; font-size: 13px; color: var(--cyan); letter-spacing: .1em; margin-bottom: 18px; display:block; } .service-graphic{ height: 110px; border-radius: var(--r-md); margin-bottom: 22px; background: linear-gradient(135deg, rgba(34,211,255,.10), rgba(10,63,214,.10)); border: 1px solid var(--border-soft); position: relative; overflow:hidden; display:flex; align-items:center; justify-content:center; } .service-graphic .iso{ width: 52px; height:52px; border: 1px solid rgba(120,190,255,.6); background: linear-gradient(135deg, rgba(34,211,255,.25), rgba(47,125,255,.05)); transform: rotate(45deg); box-shadow: 0 0 24px rgba(34,211,255,.25); animation: iso-float 4s ease-in-out infinite; display:flex; align-items:center; justify-content:center; } @keyframes iso-float{ 0%,100%{ transform: rotate(45deg) translateY(0);} 50%{ transform: rotate(45deg) translateY(-8px);} } .graphic-icon{ width: 24px; height:24px; color: var(--cyan); transform: rotate(-45deg); filter: drop-shadow(0 0 8px rgba(34,211,255,.5)); } .work-visual .graphic-icon, .case-visual .graphic-icon{ width:30px; height:30px; transform:none; } .service-card h3{ font-size: 19px; margin-bottom: 10px; } .service-card p{ color: var(--text-dim); font-size: 14.5px; margin-bottom:20px; flex:1; } .service-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 22px; } .tag{ font-size: 11.5px; padding: 6px 12px; border-radius: var(--r-full); background: rgba(255,255,255,.04); border:1px solid var(--border); color: var(--text-dim); } .service-link{ display:inline-flex; align-items:center; gap:8px; font-family:'Orbitron'; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color: var(--text); } .service-link svg{ width:15px; height:15px; transition: transform .3s ease; color: var(--cyan); } .service-card:hover .service-link svg{ transform: translateX(5px); } /* ============================================================ Process chain ============================================================ */ .process-chain{ display:flex; align-items:flex-start; justify-content:space-between; position: relative; margin-top: 20px; gap: 6px; } .process-chain::before{ content:''; position:absolute; top:34px; left: 34px; right:34px; height:1px; background: linear-gradient(90deg, transparent, rgba(120,190,255,.4), transparent); z-index:0; } .process-step{ display:flex; flex-direction:column; align-items:center; text-align:center; flex: 1 1 140px; max-width: 190px; position:relative; z-index:1; } .process-circle{ width: 68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--bg-2); border: 1px solid rgba(120,190,255,.4); color: var(--cyan); box-shadow: 0 0 0 6px rgba(34,211,255,.04), 0 0 30px rgba(34,211,255,.12); margin-bottom: 16px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .process-circle svg{ width:24px; height:24px; } .process-step:hover .process-circle{ transform: translateY(-6px) scale(1.06); box-shadow: 0 0 0 8px rgba(34,211,255,.08), 0 0 40px rgba(34,211,255,.3); } .process-step h4{ font-size: 13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; color:#fff; } .process-step p{ font-size: 12.5px; color: var(--text-faint); margin:0; } @media (max-width: 900px){ .process-chain{ flex-wrap: wrap; } .process-chain::before{ display:none; } .process-step{ flex-basis: 30%; margin-bottom: 30px; } } @media (max-width: 560px){ .process-step{ flex-basis: 46%; } } /* ============================================================ Work / Case studies ============================================================ */ .work-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 1080px){ .work-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px){ .work-grid{ grid-template-columns: 1fr; } } .work-card{ border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; background: var(--surface); transition: transform .5s var(--ease), border-color .4s ease; } .work-card:hover{ border-color: rgba(34,211,255,.4); } .work-visual{ height: 160px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; } .work-visual::before{ content:''; position:absolute; inset:-40%; background: conic-gradient(from 0deg, rgba(34,211,255,.25), rgba(10,63,214,.05), rgba(34,211,255,.25)); animation: rotate-slow 10s linear infinite; } .work-visual::after{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 50% 50%, transparent 30%, var(--bg-1) 78%); } .work-visual .ring{ position:relative; z-index:1; width: 60px; height:60px; border-radius:50%; border: 1px solid rgba(180,220,255,.7); box-shadow: 0 0 30px rgba(34,211,255,.4); display:flex; align-items:center; justify-content:center; } @keyframes rotate-slow{ to{ transform: rotate(360deg); } } .work-body{ padding: 24px; } .work-tag{ font-size: 10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-faint); } .work-body h3{ font-family:'Orbitron'; font-size: 24px; margin: 8px 0 10px; letter-spacing:.02em; } .work-body p{ font-size: 13.5px; color: var(--text-dim); margin-bottom:16px; } .work-chips{ display:flex; flex-wrap:wrap; gap:6px; } .chip{ font-size: 10.5px; padding: 5px 10px; border-radius: 6px; background: rgba(34,211,255,.06); color: var(--cyan); border: 1px solid rgba(34,211,255,.18); } /* ============================================================ Why us ============================================================ */ .why-highlights{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-bottom: 26px; } @media (max-width: 860px){ .why-highlights{ grid-template-columns: 1fr; } } .why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px 24px; border-top: 1px solid var(--border-soft); padding-top: 44px; } @media (max-width: 860px){ .why-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } } .why-item{ display:flex; gap:16px; } .why-item .icon-box{ width:44px; height:44px; margin-bottom:0; flex-shrink:0; } .why-item .icon-box svg{ width:20px; height:20px; } .why-item h4{ font-size: 15px; margin-bottom: 6px; } .why-item p{ font-size: 13px; color: var(--text-dim); margin:0; } /* ============================================================ Technology ============================================================ */ .tech-category{ margin-bottom: 34px; } .tech-category-title{ font-family:'Orbitron'; font-size: 12.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-dim); margin-bottom: 16px; display:flex; align-items:center; gap:10px; } .tech-category-title svg{ width:16px; height:16px; color: var(--cyan); } .tech-badges{ display:flex; flex-wrap:wrap; gap: 10px; } .tech-badge{ padding: 10px 18px; border-radius: var(--r-full); background: var(--surface); border:1px solid var(--border); font-size: 13px; color: var(--text); transition: border-color .3s ease, transform .3s ease, color .3s ease; } .tech-badge:hover{ border-color: rgba(34,211,255,.45); transform: translateY(-3px); color: var(--cyan); } /* Tech stat strip above the category tiles */ .tech-stats{ display:flex; justify-content:center; gap: 50px; flex-wrap:wrap; padding-bottom: 54px; margin-bottom: 54px; border-bottom: 1px solid var(--border-soft); } .tech-stats .stat{ text-align:center; } .tech-stats .stat-num, .tech-stats .stat-suffix{ font-size: clamp(24px,3vw,32px); } /* Icon tile grid (replaces plain pill badges for named technologies) */ .tech-tile-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: 14px; } .tech-tile{ flex: 1 1 128px; max-width: 168px; display:flex; flex-direction:column; align-items:center; gap:11px; padding: 20px 10px; background: var(--surface); border:1px solid var(--border); border-radius: var(--r-md); text-align:center; transition: transform .35s var(--ease), border-color .3s ease, background .3s ease, box-shadow .3s ease; } .tech-tile:hover{ transform: translateY(-5px); border-color: rgba(34,211,255,.45); background: rgba(34,211,255,.05); box-shadow: 0 16px 30px -14px rgba(34,211,255,.3); } .tech-tile .icon-box{ width:44px; height:44px; margin-bottom:0; } .tech-tile .icon-box svg{ width:21px; height:21px; } .tech-tile span{ font-size: 12px; color: var(--text); font-weight:500; line-height:1.3; } /* ============================================================ Global / map ============================================================ */ .global-wrap{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items:center; } @media (max-width: 900px){ .global-wrap{ grid-template-columns: 1fr; } } .global-copy .stat-mini{ display:flex; gap: 30px; margin-top: 30px; flex-wrap:wrap; } .global-copy .stat-mini div b{ display:block; font-family:'Orbitron'; font-size:22px; color:#fff; } .global-copy .stat-mini div span{ font-size: 12px; color: var(--text-faint); } #globeCanvas{ width: 100%; aspect-ratio: 1/1; max-width: 460px; margin: 0 auto; display:block; } .globe-wrap{ position:relative; } .globe-wrap::before{ content:''; position:absolute; inset:10%; background: radial-gradient(circle, rgba(34,211,255,.18), transparent 70%); filter: blur(30px); z-index:0; } /* ============================================================ Testimonials ============================================================ */ .testi-slider{ position: relative; max-width: 760px; margin: 0 auto; text-align:center; min-height: 220px; } .testi-slide{ position:absolute; inset:0; opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events:none; } .testi-slide.active{ opacity:1; transform: translateY(0); position:relative; pointer-events:auto; } .testi-slide p{ font-size: clamp(18px,2.4vw,24px); color:#fff; font-weight:400; line-height:1.5; margin-bottom: 26px; } .testi-slide h5{ font-family:'Orbitron'; font-size:14px; margin-bottom:2px; } .testi-slide span{ font-size: 12.5px; color: var(--text-faint); } .testi-dots{ display:flex; gap:10px; justify-content:center; margin-top: 40px; } .testi-dots button{ width:8px; height:8px; border-radius:50%; background: var(--border); border:none; padding:0; transition: background .3s ease, transform .3s ease; } .testi-dots button.active{ background: var(--cyan); transform: scale(1.3); } /* ============================================================ Contact ============================================================ */ .contact-wrap{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items:flex-start; } @media (max-width: 940px){ .contact-wrap{ grid-template-columns: 1fr; } } .contact-info-card{ margin-bottom: 16px; } .contact-info-card .icon-box{ margin-bottom: 16px; } .contact-info-card h4{ font-size:14px; margin-bottom:6px; color:#fff; } .contact-info-card p{ font-size: 14px; color: var(--text-dim); margin:0; } .contact-info-card a{ color: var(--text-dim); transition: color .3s ease; } .contact-info-card a:hover{ color: var(--cyan); } .form-card{ padding: 38px; } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom:16px; } @media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; gap:16px; } } .field{ display:flex; flex-direction: column; gap: 8px; } .field label{ font-size: 12px; letter-spacing:.04em; color: var(--text-dim); } .field input, .field select, .field textarea{ background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 13px 15px; color: var(--text); font-size: 14px; outline:none; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; width: 100%; } .field select{ appearance:none; background-image: none; } .field select option{ background:#0a0f1e; color:var(--text); } .field select option:disabled{ color: var(--text-faint); } .field textarea{ resize: vertical; min-height: 110px; } .field input:focus, .field select:focus, .field textarea:focus{ border-color: rgba(34,211,255,.55); background: rgba(34,211,255,.03); box-shadow: 0 0 0 3px rgba(34,211,255,.12); } .field input::placeholder, .field textarea::placeholder{ color: var(--text-faint); } .form-note{ font-size: 12px; color: var(--text-faint); margin-top: 14px; text-align:center; } .form-success{ display:none; align-items:center; gap:12px; padding: 16px 18px; border-radius: var(--r-sm); background: rgba(34,211,255,.08); border: 1px solid rgba(34,211,255,.3); color: #d6f5ff; font-size: 13.5px; margin-top: 18px; } .form-success.show{ display:flex; } .form-success svg{ width:20px; height:20px; color: var(--cyan); flex-shrink:0; } .form-success.is-error{ background: rgba(255,90,90,.08); border-color: rgba(255,90,90,.35); color:#ffd6d6; } .form-success.is-error svg{ color:#ff7a7a; } /* ============================================================ Footer ============================================================ */ .footer{ border-top: 1px solid var(--border-soft); padding: 80px 0 0; position: relative; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; } @media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; row-gap:40px; } } @media (max-width: 540px){ .footer-grid{ grid-template-columns: 1fr; } } .footer-brand img{ display:block; height: 52px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 18px; } .footer-brand p{ font-size: 13.5px; color: var(--text-dim); max-width: 300px; margin-bottom: 22px; } .footer-social{ display:flex; gap:10px; } .footer-social a{ width: 38px; height:38px; border-radius:50%; border: 1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:'Orbitron'; font-size: 11px; color: var(--text-dim); transition: color .3s ease, border-color .3s ease, transform .3s ease; } .footer-social a:hover{ color: var(--cyan); border-color: rgba(34,211,255,.5); transform: translateY(-3px); } .footer-col h5{ font-family:'Orbitron'; font-size: 12px; letter-spacing:.12em; text-transform:uppercase; color: #fff; margin-bottom: 20px; } .footer-col ul li{ margin-bottom: 12px; } .footer-col ul li a{ font-size: 13.5px; color: var(--text-dim); transition: color .3s ease; } .footer-col ul li a:hover{ color: var(--cyan); } .footer-col address{ font-style:normal; font-size: 13.5px; color: var(--text-dim); line-height:1.7; } .footer-bottom{ border-top: 1px solid var(--border-soft); padding: 24px 0; display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap:wrap; } .footer-bottom p{ font-size: 12.5px; color: var(--text-faint); margin:0; } .footer-bottom-links{ display:flex; gap: 20px; } .footer-bottom-links a{ font-size: 12.5px; color: var(--text-faint); } .footer-bottom-links a:hover{ color: var(--cyan); } /* ============================================================ Back to top ============================================================ */ .back-to-top{ position: fixed; right: 26px; bottom: 26px; z-index: 500; width: 48px; height:48px; border-radius:50%; background: rgba(10,15,30,.7); border: 1px solid var(--border); backdrop-filter: blur(10px); display:flex; align-items:center; justify-content:center; color: var(--cyan); opacity:0; transform: translateY(12px) scale(.9); pointer-events:none; transition: opacity .35s ease, transform .35s ease, border-color .3s ease; } .back-to-top.show{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; } .back-to-top:hover{ border-color: rgba(34,211,255,.5); } .back-to-top svg{ width:20px; height:20px; transform: rotate(-90deg); } /* ============================================================ Misc ============================================================ */ ::selection{ background: rgba(34,211,255,.3); color:#fff; } .divider-glow{ height:1px; width:100%; background: linear-gradient(90deg, transparent, rgba(120,190,255,.35), transparent); } @media (hover: none){ .card:hover, .work-card:hover{ transform:none !important; } } /* ============================================================ Page hero (sub-pages) + breadcrumb ============================================================ */ .hero-page{ min-height: 56vh; padding: 150px 0 70px; } .hero-page .hero-inner{ max-width: 820px; } .hero-page .hero-title{ font-size: clamp(34px, 5.4vw, 60px); } .breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size: 12.5px; color: var(--text-faint); margin-bottom: 20px; position: relative; z-index: 2; } .breadcrumb a{ color: var(--text-dim); transition: color .3s ease; } .breadcrumb a:hover{ color: var(--cyan); } .breadcrumb span{ color: var(--text-faint); } .breadcrumb .current{ color: var(--cyan); } /* ============================================================ Case studies (Work page — expanded) ============================================================ */ .case-study{ border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; margin-bottom: 28px; } .case-head{ padding: 40px 40px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; } .case-head h3{ font-family:'Orbitron'; font-size: 30px; margin: 10px 0 12px; } .case-head p{ color: var(--text-dim); font-size: 15px; max-width: 560px; margin:0; } .case-visual{ height: 120px; margin: 24px 40px 0; border-radius: var(--r-md); position: relative; overflow:hidden; background: linear-gradient(120deg, rgba(34,211,255,.08), rgba(10,63,214,.10)); border: 1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; } .case-visual .graphic-icon{ position:relative; z-index:1; width:38px; height:38px; } .case-visual::before{ content:''; position:absolute; inset:-50%; background: conic-gradient(from 90deg, rgba(34,211,255,.2), transparent 40%, rgba(47,125,255,.2)); animation: rotate-slow 14s linear infinite; } .case-cols{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border-soft); margin-top: 28px; } @media (max-width: 760px){ .case-cols{ grid-template-columns: 1fr; } } .case-col{ background: var(--bg-1); padding: 26px 40px; } .case-col h5{ font-family:'Orbitron'; font-size: 11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--cyan); margin-bottom: 10px; } .case-col p{ font-size: 13.5px; color: var(--text-dim); margin:0; } .case-chips{ padding: 24px 40px 32px; display:flex; flex-wrap:wrap; gap:8px; } /* ============================================================ Articles / Insights ============================================================ */ .filter-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 44px; } .filter-tab{ padding: 9px 20px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight:500; transition: all .3s ease; } .filter-tab:hover{ color:var(--text); border-color: rgba(34,211,255,.3); } .filter-tab.active{ background: var(--grad-brand); color:#04101f; border-color:transparent; font-weight:600; } .featured-article{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center; border-radius: var(--r-lg); border:1px solid var(--border); background: var(--surface); padding: 40px; margin-bottom: 50px; overflow:hidden; } @media (max-width: 860px){ .featured-article{ grid-template-columns:1fr; } } .featured-visual{ aspect-ratio: 16/11; border-radius: var(--r-md); position:relative; overflow:hidden; background: var(--grad-brand-soft); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; } .featured-visual .grid-lines{ position:absolute; inset:0; background-image: linear-gradient(rgba(120,190,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(120,190,255,.15) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); } .featured-visual .orb{ position:absolute; width:120px; height:120px; border-radius:50%; top:50%; left:50%; margin:-60px 0 0 -60px; background: radial-gradient(circle, rgba(34,211,255,.55), rgba(47,125,255,.15) 60%, transparent 75%); animation: pulse-scale 4s ease-in-out infinite; } .article-meta{ display:flex; gap:14px; align-items:center; font-size:12px; color: var(--text-faint); margin-bottom:16px; } .article-cat{ padding:4px 12px; border-radius: var(--r-full); background: rgba(34,211,255,.08); color: var(--cyan); border:1px solid rgba(34,211,255,.2); font-size:11px; letter-spacing:.04em; } .featured-article h3{ font-size: clamp(22px,2.6vw,30px); margin-bottom:14px; line-height:1.25; } .featured-article p{ color: var(--text-dim); font-size:14.5px; margin-bottom:20px; } .article-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; } @media (max-width: 980px){ .article-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px){ .article-grid{ grid-template-columns: 1fr; } } .article-card{ display:flex; flex-direction:column; } .article-visual{ height: 130px; border-radius: var(--r-md); margin-bottom:20px; background: linear-gradient(135deg, rgba(34,211,255,.10), rgba(10,63,214,.10)); border:1px solid var(--border-soft); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; } .article-visual .iso{ width:40px; height:40px; border:1px solid rgba(120,190,255,.6); background: linear-gradient(135deg, rgba(34,211,255,.25), rgba(47,125,255,.05)); transform: rotate(45deg); box-shadow: 0 0 22px rgba(34,211,255,.22); } .article-card h4{ font-size: 16.5px; line-height:1.35; margin: 0 0 12px; color:#fff; font-family:'Inter'; font-weight:600; } .article-card p{ font-size:13px; color: var(--text-dim); margin-bottom:16px; flex:1; } /* ============================================================ Comparison / engagement table ============================================================ */ .table-wrap{ overflow-x:auto; border-radius: var(--r-lg); border:1px solid var(--border); } .compare-table{ width:100%; border-collapse: collapse; min-width: 720px; } .compare-table th, .compare-table td{ padding: 18px 22px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--border-soft); } .compare-table thead th{ font-family:'Orbitron'; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--cyan); background: rgba(34,211,255,.04); } .compare-table tbody th{ color:#fff; font-weight:600; font-size:13.5px; white-space:nowrap; } .compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th{ border-bottom:none; } .compare-table tbody tr:hover{ background: rgba(255,255,255,.02); } .compare-table td{ color: var(--text-dim); } .compare-table .yes{ color: var(--cyan); } /* ============================================================ Checkbox field ============================================================ */ .checkbox-field{ display:flex; align-items:flex-start; gap:10px; margin: 4px 0 18px; } .checkbox-field input[type="checkbox"]{ -webkit-appearance:none; appearance:none; width:18px; height:18px; flex-shrink:0; margin-top:2px; border:1px solid var(--border); border-radius:5px; background: rgba(255,255,255,.03); position:relative; cursor:pointer; transition: border-color .3s ease, background .3s ease; } .checkbox-field input[type="checkbox"]:checked{ background: var(--grad-brand); border-color: transparent; } .checkbox-field input[type="checkbox"]:checked::after{ content:''; position:absolute; left:5px; top:1px; width:5px; height:9px; border: solid #04101f; border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox-field label{ font-size:12.5px; color: var(--text-dim); line-height:1.6; cursor:pointer; } .checkbox-field label a{ color: var(--cyan); } /* ============================================================ Related services / mini cards ============================================================ */ .related-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; } @media (max-width: 860px){ .related-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px){ .related-grid{ grid-template-columns: 1fr; } } .related-card{ display:flex; flex-direction:column; align-items:flex-start; } .related-card h4{ font-size:16px; margin: 4px 0 8px; } .related-card p{ font-size:13px; color: var(--text-dim); margin-bottom:16px; } /* ============================================================ Legal pages ============================================================ */ .legal-layout{ display:grid; grid-template-columns: 260px 1fr; gap: 50px; align-items:flex-start; } @media (max-width: 860px){ .legal-layout{ grid-template-columns: 1fr; } } .legal-nav{ position: sticky; top: 110px; border-radius: var(--r-md); border:1px solid var(--border); background: var(--surface); padding: 22px; } .legal-nav h5{ font-family:'Orbitron'; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); margin-bottom:14px; } .legal-nav a{ display:block; padding: 8px 0; font-size:13.5px; color: var(--text-dim); border-bottom:1px solid var(--border-soft); } .legal-nav a:last-child{ border-bottom:none; } .legal-nav a:hover{ color: var(--cyan); } .legal-body h2{ font-size: 22px; margin: 44px 0 14px; } .legal-body h2:first-child{ margin-top:0; } .legal-body p, .legal-body li{ font-size: 14.5px; color: var(--text-dim); line-height:1.8; margin-bottom: 14px; } .legal-body ul{ padding-left: 20px; list-style: disc; } .legal-body strong{ color: #fff; } .legal-updated{ font-size:12.5px; color: var(--text-faint); margin-bottom: 40px; } /* ============================================================ 404 ============================================================ */ .error-page{ min-height: 100vh; display:flex; align-items:center; justify-content:center; text-align:center; position: relative; overflow:hidden; } .error-code{ font-family:'Orbitron'; font-weight:900; font-size: clamp(80px,16vw,180px); line-height:1; background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom: 10px; } .error-page h2{ font-size: clamp(22px,3vw,30px); margin-bottom:14px; } .error-page p{ color: var(--text-dim); margin-bottom: 32px; } /* ============================================================ Simple content sections (about philosophy quadrants etc.) ============================================================ */ .quad-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:1px; background: var(--border-soft); border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--border); } @media (max-width: 700px){ .quad-grid{ grid-template-columns: 1fr; } } .quad-item{ background: var(--bg-1); padding: 38px; display:flex; align-items:center; gap:20px; } .quad-item h4{ font-size: clamp(18px,2vw,22px); margin-bottom:6px; color:#fff; } .quad-item p{ font-size:13.5px; color: var(--text-dim); margin:0; } .quad-item .icon-box{ flex-shrink:0; margin-bottom:0; } /* ============================================================ Hong Kong skyline (signature motif, sits above the footer) ============================================================ */ .hk-skyline{ position: relative; padding-top: 90px; overflow: hidden; border-top: 1px solid var(--border-soft); } .hk-skyline-label{ position: relative; z-index: 2; text-align:center; font-family:'Orbitron'; font-size: 11px; letter-spacing:.22em; text-transform:uppercase; color: var(--text-faint); padding-bottom: 18px; } .hk-skyline-label b{ color: var(--cyan); font-weight:600; } .hk-skyline-inner{ position: relative; height: 150px; display:flex; align-items:flex-end; justify-content:center; gap: 3px; padding: 0 20px; } .hk-skyline-inner::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background: linear-gradient(90deg, transparent, rgba(34,211,255,.6), transparent); box-shadow: 0 0 20px 2px rgba(34,211,255,.5); } .bld{ position: relative; width: 22px; background: linear-gradient(180deg, #0c1830, #060b17); border: 1px solid rgba(120,190,255,.16); border-bottom: none; flex-shrink: 0; } .bld::before{ content:''; position:absolute; inset: 5px 3px; background-image: repeating-linear-gradient(rgba(120,200,255,.35) 0 2px, transparent 2px 8px), repeating-linear-gradient(90deg, rgba(120,200,255,.35) 0 2px, transparent 2px 7px); background-size: 100% 100%; opacity: .3; -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 100%); mask-image: radial-gradient(circle, #000 60%, transparent 100%); } .bld.lit::before{ animation: bld-flicker 5s ease-in-out infinite; } @keyframes bld-flicker{ 0%,100%{ opacity:.25; } 50%{ opacity:.6; } } .bld.tower-ifc{ clip-path: polygon(50% 0%, 100% 12%, 100% 100%, 0 100%, 0 12%); } .bld.tower-icc::after{ content:''; position:absolute; left:50%; bottom:100%; width:2px; height:34px; background: linear-gradient(180deg, rgba(34,211,255,.9), transparent); box-shadow: 0 0 8px rgba(34,211,255,.8); } .bld:nth-child(1){ height:52px; } .bld:nth-child(2){ height:78px; } .bld:nth-child(3){ height:64px; } .bld:nth-child(4){ height:96px; } .bld:nth-child(5){ height:70px; } .bld:nth-child(6){ height:118px; } .bld:nth-child(7){ height:88px; } .bld:nth-child(8){ height:150px; width:26px; } .bld:nth-child(9){ height:104px; } .bld:nth-child(10){ height:130px; width:24px; } .bld:nth-child(11){ height:74px; } .bld:nth-child(12){ height:112px; } .bld:nth-child(13){ height:60px; } .bld:nth-child(14){ height:90px; } .bld:nth-child(15){ height:48px; } .bld:nth-child(16){ height:100px; } .bld:nth-child(17){ height:66px; } @media (max-width: 700px){ .hk-skyline-inner{ height:110px; gap:2px; } .bld{ width:14px; } .bld:nth-child(1){ height:38px; } .bld:nth-child(2){ height:56px; } .bld:nth-child(3){ height:46px; } .bld:nth-child(4){ height:70px; } .bld:nth-child(5){ height:50px; } .bld:nth-child(6){ height:86px; } .bld:nth-child(7){ height:64px; } .bld:nth-child(8){ height:110px; width:18px; } .bld:nth-child(9){ height:76px; } .bld:nth-child(10){ height:96px; width:17px; } .bld:nth-child(11){ height:54px; } .bld:nth-child(12){ height:82px; } .bld:nth-child(13){ height:44px; } .bld:nth-child(14){ height:66px; } .bld:nth-child(15){ height:36px; } .bld:nth-child(16){ height:72px; } .bld:nth-child(17){ height:48px; } } /* ============================================================ Bauhinia flower accent (Hong Kong emblem motif) ============================================================ */ .bauhinia{ width:16px; height:16px; color: var(--cyan); flex-shrink:0; } .hero-locale{ display:inline-flex; align-items:center; gap:8px; } /* Large low-opacity Chinese watermark behind hero copy */ .hero-cn-watermark{ position:absolute; z-index:0; pointer-events:none; -webkit-user-select:none; user-select:none; font-family:'Orbitron', sans-serif; font-size: clamp(140px, 22vw, 320px); font-weight:700; color: transparent; -webkit-text-stroke: 1px rgba(120,190,255,.10); right: -2%; top: 6%; line-height:1; writing-mode: vertical-rl; } @media (max-width: 900px){ .hero-cn-watermark{ display:none; } } /* ============================================================ Article detail pages ============================================================ */ .article-content{ max-width: 760px; } .article-content p{ font-size:16px; color: var(--text-dim); line-height:1.85; margin-bottom:22px; } .article-content h2{ font-size: clamp(20px,2.4vw,26px); margin: 46px 0 16px; } .article-content blockquote{ margin: 34px 0; padding: 26px 30px; border-left: 2px solid var(--cyan); background: rgba(34,211,255,.04); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 18px; color: #fff; font-style: normal; line-height:1.6; } .article-layout{ display:grid; grid-template-columns: 1fr 300px; gap: 60px; align-items:flex-start; } @media (max-width: 940px){ .article-layout{ grid-template-columns: 1fr; } } .article-share{ position: sticky; top: 110px; border-radius: var(--r-md); border:1px solid var(--border); background: var(--surface); padding: 26px; } .article-share h5{ font-family:'Orbitron'; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); margin-bottom:16px; } .article-share .icon-box{ margin-bottom:16px; } .article-share p{ font-size:13px; color: var(--text-dim); margin:0; } .final-cta{ border-radius: var(--r-lg); border:1px solid var(--border); background: linear-gradient(135deg, rgba(34,211,255,.08), rgba(10,63,214,.10)); padding: 60px; text-align:center; position:relative; overflow:hidden; } .final-cta h2{ margin-bottom: 14px; } .final-cta p{ color: var(--text-dim); margin-bottom: 28px; max-width: 520px; margin-left:auto; margin-right:auto; } @media (max-width: 640px){ .final-cta{ padding: 40px 24px; } } /* ============================================================ Accessibility & premium polish ============================================================ */ /* Skip-to-content link — visible only on keyboard focus */ .skip-link{ position: fixed; top: 12px; left: 12px; z-index: 3000; padding: 11px 20px; border-radius: var(--r-full); background: var(--cyan); color: #04101f; font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 30px -8px rgba(34,211,255,.6); transform: translateY(-160%); transition: transform .25s var(--ease); } .skip-link:focus{ transform: translateY(0); outline: none; } /* Consistent keyboard focus ring across all interactive elements */ :focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; } .btn:focus-visible{ outline-offset: 4px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline: none; } /* Anchored sections clear the fixed navbar when jumped to */ :target{ scroll-margin-top: 110px; } section[id], [id]{ scroll-margin-top: 110px; } /* Nicer line breaks for headings & paragraphs */ h1, h2, h3, .section-title, .hero-title{ text-wrap: balance; } p{ text-wrap: pretty; } /* Branded custom scrollbar */ html{ scrollbar-width: thin; scrollbar-color: rgba(90,160,255,.45) transparent; } ::-webkit-scrollbar{ width: 11px; height: 11px; } ::-webkit-scrollbar-track{ background: var(--bg-1); } ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(34,211,255,.55), rgba(47,125,255,.55)); border-radius: 11px; border: 2px solid var(--bg-1); } ::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, rgba(34,211,255,.85), rgba(47,125,255,.85)); } /* No full-width underline bar inside the mobile drawer */ @media (max-width: 960px){ .nav-links a:not(.btn)::after{ left: 6px; right: auto; width: 22px; } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal{ opacity: 1 !important; transform: none !important; } } /* ============================================================ Company page — trust marquee ============================================================ */ .trust-strip{ padding: 64px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); } .trust-strip .eyebrow{ justify-content:center; display:flex; } .trust-strip .eyebrow::before{ display:none; } .trust-label{ text-align:center; font-family:'Orbitron', sans-serif; font-size: 11px; letter-spacing:.2em; text-transform:uppercase; color: var(--text-faint); margin-bottom: 30px; } .marquee{ position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track{ display:flex; align-items:center; gap: 60px; width: max-content; animation: marquee-scroll 34s linear infinite; } .marquee:hover .marquee-track{ animation-play-state: paused; } @keyframes marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } .marquee-mark{ font-family:'Orbitron', sans-serif; font-weight:700; font-size: 20px; letter-spacing:.04em; color: var(--text-faint); white-space: nowrap; opacity:.7; transition: color .3s ease, opacity .3s ease; } .marquee-mark:hover{ color: var(--cyan); opacity:1; } @media (max-width: 640px){ .marquee-mark{ font-size: 16px; } .marquee-track{ gap: 40px; } } /* ============================================================ Company page — leadership team ============================================================ */ .team-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .team-grid{ grid-template-columns: 1fr; } } .team-card{ display:flex; flex-direction:column; align-items:flex-start; } .team-avatar{ width: 68px; height: 68px; border-radius: 20px; display:flex; align-items:center; justify-content:center; font-family:'Orbitron', sans-serif; font-weight:800; font-size: 22px; color:#04101f; background: var(--grad-brand); box-shadow: 0 0 34px rgba(47,125,255,.35); margin-bottom: 20px; } .team-name{ font-family:'Orbitron', sans-serif; font-size: 17px; color:#fff; margin: 0 0 4px; } .team-role{ font-family:'Orbitron', sans-serif; font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--cyan); margin: 0 0 14px; } .team-bio{ font-size: 13.5px; color: var(--text-dim); margin: 0 0 18px; flex:1; } .team-social{ width: 34px; height: 34px; border-radius: 50%; display:flex; align-items:center; justify-content:center; border: 1px solid var(--border); color: var(--text-dim); transition: color .3s ease, border-color .3s ease, transform .3s ease; } .team-social svg{ width: 15px; height: 15px; } .team-social:hover{ color: var(--cyan); border-color: rgba(34,211,255,.5); transform: translateY(-3px); } /* ============================================================ Company page — history timeline ============================================================ */ .timeline{ position: relative; max-width: 900px; margin: 0 auto; } .timeline::before{ content:''; position:absolute; top: 6px; bottom: 6px; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(120,190,255,.4) 12%, rgba(120,190,255,.4) 88%, transparent); transform: translateX(-50%); } .tl-item{ position: relative; width: 50%; padding: 0 44px 44px 0; } .tl-item{ text-align: right; } .tl-item:nth-child(even){ margin-left: 50%; padding: 0 0 44px 44px; text-align: left; } .tl-item:last-child{ padding-bottom: 0; } .tl-item::after{ content:''; position:absolute; top: 6px; right: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--cyan); box-shadow: 0 0 0 5px rgba(34,211,255,.08), 0 0 18px rgba(34,211,255,.4); } .tl-item:nth-child(even)::after{ right: auto; left: -6px; } .tl-year{ font-family:'Orbitron', sans-serif; font-weight:800; font-size: 22px; background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom: 10px; } .tl-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 24px; text-align: left; transition: border-color .4s ease, background .4s ease, transform .4s var(--ease); } .tl-card:hover{ border-color: rgba(34,211,255,.35); background: rgba(255,255,255,.05); transform: translateY(-3px); } .tl-card h4{ font-family:'Inter', sans-serif; font-weight:600; font-size: 15.5px; color:#fff; margin: 0 0 6px; } .tl-card p{ font-size: 13px; color: var(--text-dim); margin: 0; } @media (max-width: 760px){ .timeline::before{ left: 7px; } .tl-item, .tl-item:nth-child(even){ width: 100%; margin-left: 0; padding: 0 0 34px 34px; text-align: left; } .tl-item::after, .tl-item:nth-child(even)::after{ left: 1px; right: auto; } } /* ============================================================ Company page — values grid ============================================================ */ .values-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px){ .values-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .values-grid{ grid-template-columns: 1fr; } } .value-card h3{ font-size: 17px; margin-bottom: 10px; } .value-card p{ font-size: 13.5px; color: var(--text-dim); margin: 0; } /* ============================================================ Company page — careers band ============================================================ */ .careers-band{ border-radius: var(--r-lg); border: 1px solid var(--border); background: linear-gradient(135deg, rgba(34,211,255,.08), rgba(10,63,214,.12)); padding: 54px 56px; display:flex; align-items:center; justify-content:space-between; gap: 40px; flex-wrap: wrap; position: relative; overflow: hidden; } .careers-band::before{ content:''; position:absolute; width: 260px; height: 260px; border-radius:50%; background: radial-gradient(circle, rgba(34,211,255,.18), transparent 70%); right: -80px; top: -120px; pointer-events:none; } .careers-band-copy{ max-width: 560px; position: relative; z-index:1; } .careers-band-copy h2{ font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; } .careers-band-copy p{ color: var(--text-dim); font-size: 15px; margin: 0; } .careers-band .btn{ position: relative; z-index:1; flex-shrink: 0; } @media (max-width: 640px){ .careers-band{ padding: 40px 28px; } } /* ============================================================ Company page — offices grid ============================================================ */ .office-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1000px){ .office-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px){ .office-grid{ grid-template-columns: 1fr; } } .office-card{ padding: 28px; } .office-tag{ font-family:'Orbitron', sans-serif; font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-faint); margin-bottom: 12px; } .office-card.is-hq .office-tag{ color: var(--cyan); } .office-city{ font-family:'Orbitron', sans-serif; font-size: 18px; color:#fff; margin: 0 0 10px; } .office-card address{ font-style: normal; font-size: 13px; color: var(--text-dim); line-height: 1.7; }