/* ============================================ BMC CYBER, Global Stylesheet Fonts are loaded via in each page (non-render-blocking) instead of @import here. ============================================ */ :root { --blue: #00A8FF; --blue-mid: #0077CC; --blue-dark: #004F99; --blue-glow: rgba(0, 168, 255, 0.12); --blue-border: rgba(0, 168, 255, 0.18); --bg: #07080E; --surface: #0C0E18; --card: #0F1120; --card-border: rgba(255, 255, 255, 0.055); --white: #FFFFFF; --grey-1: #8B9BAE; --grey-2: #4A5568; --grey-3: #1C2030; --radius: 14px; --radius-sm: 9px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--bg); color: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul { list-style: none; } /* ---- Utility ---- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .section { padding: 100px 0; } .section--tight { padding: 60px 0; } .tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); background: var(--blue-glow); border: 1px solid var(--blue-border); padding: 6px 16px; border-radius: 100px; margin-bottom: 20px; } .section-title { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--white); } .section-title span { background: linear-gradient(135deg, var(--blue), #33BBFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-sub { font-size: 17px; color: var(--grey-1); max-width: 580px; margin-top: 16px; line-height: 1.7; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--transition); border: none; white-space: nowrap; } .btn-primary { background: var(--blue); color: #000; } .btn-primary:hover { background: #33BBFF; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 168, 255, 0.35); } .btn-outline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.2); } .btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); } /* ---- NAV ---- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0 24px; transition: var(--transition); } .nav.scrolled { background: rgba(8, 8, 8, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); } .nav__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 76px; } .nav__logo { display: flex; align-items: center; gap: 12px; } .nav__logo img { height: 44px; width: auto; display: block; } .nav__logo-text { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; display: none; /* hidden when logo image loads */ } .nav__logo-text span { color: var(--blue); } .nav__logo img[data-broken="true"] + .nav__logo-text { display: block; } .nav__links { display: flex; align-items: center; gap: 36px; } .nav__links a { font-size: 14px; font-weight: 500; color: var(--grey-1); transition: color var(--transition); } .nav__links a:hover { color: var(--white); } .nav__cta { display: flex; align-items: center; gap: 16px; } .nav__phone { font-size: 14px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 6px; } .nav__phone::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; } /* ---- HERO ---- */ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 76px; } /* ---- HERO TWO-COLUMN ---- */ .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: center; } @media (max-width: 1080px) { .hero__inner { grid-template-columns: 1fr; } .hero-img-pane, .cyber-pane { display: none; } } /* ---- HERO WIDGET ---- */ .hero-widget { background: linear-gradient(160deg, rgba(15,18,36,0.95) 0%, rgba(10,12,24,0.98) 100%); border: 1px solid rgba(0,168,255,0.2); border-radius: 18px; padding: 24px; backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(0,168,255,0.06), 0 24px 60px rgba(0,0,0,0.5), 0 0 80px rgba(0,168,255,0.05); animation: hw-float 5s ease-in-out infinite; } @keyframes hw-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .hw-header { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } .hw-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 6px rgba(34,197,94,0.8); animation: hw-blink 2s ease-in-out infinite; flex-shrink: 0; } @keyframes hw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hw-live-label { font-size: 13px; font-weight: 600; color: var(--white); flex: 1; } .hw-live-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: #22C55E; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); padding: 3px 8px; border-radius: 100px; } /* ---- SERVICE STACK ---- */ .hw-stack-scene { perspective: 900px; margin-bottom: 16px; /* default resting tilt so it already looks 3D */ transform-style: preserve-3d; } .hw-stack { display: flex; flex-direction: column; gap: 7px; transform: rotateX(0deg) rotateY(0deg); transform-style: preserve-3d; transition: transform 0.12s ease; will-change: transform; } .hw-stack-card { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; background: linear-gradient( 100deg, rgba(255,255,255,0.04) 0%, rgba(0,168,255,0.03) 100% ); border: 1px solid rgba(255,255,255,0.07); border-left: 2px solid rgba(0,168,255,calc(0.3 + var(--i) * 0.08)); transition: transform 0.28s cubic-bezier(0.34,1.4,0.64,1), border-color 0.25s, background 0.25s, box-shadow 0.25s; position: relative; overflow: visible; z-index: 1; } .hw-stack-card:hover { transform: scale(1.06) translateZ(14px); border-color: rgba(0,168,255,0.55); background: linear-gradient(100deg, rgba(0,168,255,0.1) 0%, rgba(0,168,255,0.04) 100%); box-shadow: 0 8px 32px rgba(0,168,255,0.2), 0 0 0 1px rgba(0,168,255,0.3); z-index: 10; } /* Subtle shimmer on each card */ .hw-stack-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(0,168,255,0.05) 60%, transparent 80%); opacity: 0; transition: opacity 0.3s; } .hw-stack-scene:hover .hw-stack-card::after { opacity: 1; } .hw-stack-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(0,168,255,0.1); border: 1px solid rgba(0,168,255,0.2); display: flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; } .hw-stack-info { flex: 1; min-width: 0; } .hw-stack-name { font-size: 12px; font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hw-stack-sub { font-size: 10px; color: var(--grey-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hw-stack-badge { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: #22C55E; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); padding: 3px 8px; border-radius: 100px; flex-shrink: 0; white-space: nowrap; } .hw-stack-dot { width: 5px; height: 5px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 5px rgba(34,197,94,0.8); animation: hw-blink 2s ease-in-out infinite; flex-shrink: 0; } /* Widget footer */ .hw-footer { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--grey-2); padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.05); } .hw-footer__dot { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 5px rgba(34,197,94,0.7); flex-shrink: 0; animation: hw-blink 2s ease-in-out infinite; } /* Star rating in hero stat */ .hero__stat-stars { display: flex; align-items: center; gap: 5px; } /* Canvas fills the hero — no CSS grid needed */ #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% -5%, rgba(0,168,255,0.13) 0%, transparent 65%), radial-gradient(ellipse 35% 40% at 85% 65%, rgba(0,100,200,0.07) 0%, transparent 55%), radial-gradient(ellipse 30% 30% at 10% 75%, rgba(0,80,160,0.06) 0%, transparent 50%), var(--bg); } .hero__content { position: relative; z-index: 1; max-width: 820px; } .hero__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; } .hero__eyebrow-line { width: 36px; height: 2px; background: linear-gradient(90deg, var(--blue), transparent); } .hero__eyebrow-text { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); } .hero__title { font-size: clamp(46px, 7.5vw, 84px); font-weight: 900; line-height: 1.0; letter-spacing: -0.035em; margin-bottom: 28px; } .hero__title .gradient { background: linear-gradient(120deg, #FFFFFF 20%, #60CAFF 60%, #00A8FF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__sub { font-size: 18px; color: var(--grey-1); max-width: 540px; line-height: 1.75; margin-bottom: 44px; } .hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hero__stats { display: flex; gap: 44px; margin-top: 68px; padding-top: 44px; border-top: 1px solid rgba(255,255,255,0.07); } .hero__stat-num { font-size: 34px; font-weight: 800; color: var(--blue); letter-spacing: -0.03em; } .hero__stat-label { font-size: 12px; color: var(--grey-1); margin-top: 5px; letter-spacing: 0.02em; } /* ---- TRUST BAND ---- */ .trust-band { background: var(--surface); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 28px 0; } .trust-band__inner { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .trust-band__inner::-webkit-scrollbar { display: none; } .trust-item { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--grey-1); white-space: nowrap; flex-shrink: 0; } .trust-item__icon { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; } /* ---- SERVICES ---- */ .services { background: var(--bg); } .services__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 60px; flex-wrap: wrap; } .services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); overflow: hidden; } .service-card { background: var(--card); padding: 40px; transition: var(--transition); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--blue), transparent); opacity: 0; transition: var(--transition); } .service-card:hover { background: #161616; } .service-card:hover::before { opacity: 1; } .service-card__icon { width: 48px; height: 48px; background: var(--blue-glow); border: 1px solid var(--blue-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--blue); } .service-card__title { font-size: 18px; font-weight: 700; margin-bottom: 12px; } .service-card__text { font-size: 14px; color: var(--grey-1); line-height: 1.7; } .service-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--blue); margin-top: 20px; transition: gap var(--transition); } .service-card:hover .service-card__link { gap: 10px; } /* ---- WHY US ---- */ .why { background: var(--surface); } .why__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .why__list { margin-top: 40px; display: flex; flex-direction: column; gap: 8px; } .why__item { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: var(--transition); cursor: default; } .why__item:hover { background: rgba(0,168,255,0.04); border-color: var(--blue-border); } .why__item-num { font-size: 13px; font-weight: 700; color: var(--blue); min-width: 28px; padding-top: 2px; } .why__item-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; } .why__item-text { font-size: 14px; color: var(--grey-1); line-height: 1.7; } .why__visual { position: relative; } .why__card-stack { position: relative; } .why__card-main { position: relative; background: var(--card); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .why__card-main::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(0,168,255,0.1), transparent 70%); pointer-events: none; } .why__metric { font-size: 48px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(135deg, var(--white), var(--blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .why__metric-label { font-size: 16px; color: var(--grey-1); margin-top: 8px; } .why__metrics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.06); } .why__metric-block { } .why__badge-group { margin-bottom: 16px; } .why__badge-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.04); } .why__badges { display: flex; flex-direction: column; gap: 12px; } .why__badge { display: flex; align-items: center; gap: 12px; background: rgba(0,168,255,0.08); border: 1px solid var(--blue-border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; font-weight: 500; } .why__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } /* ---- STATS BAR ---- */ .stats-bar { background: var(--blue); padding: 48px 0; } .stats-bar__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .stat-item__num { font-size: 42px; font-weight: 900; color: #000; letter-spacing: -0.03em; } .stat-item__label { font-size: 14px; font-weight: 500; color: rgba(0,0,0,0.65); margin-top: 4px; } /* ---- INDUSTRIES ---- */ .industries { background: var(--bg); } .industries__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 56px; } .industry-card { background: var(--card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius); padding: 28px 24px; text-align: center; transition: var(--transition); } .industry-card:hover { border-color: var(--blue-border); background: #161616; transform: translateY(-4px); } .industry-card__icon { width: 44px; height: 44px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: color var(--transition); } .industry-card:hover .industry-card__icon { color: var(--blue); } .industry-card__icon svg { width: 36px; height: 36px; } .industry-card__name { font-size: 14px; font-weight: 600; } /* ---- CONTACT SECTION ---- */ .contact-section { background: var(--bg); } .contact-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } .contact-details { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; } .contact-detail-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.05); background: var(--card); transition: var(--transition); color: inherit; } .contact-detail-item:hover { border-color: var(--blue-border); background: #161616; } .contact-detail-icon { width: 36px; height: 36px; background: var(--blue-glow); border: 1px solid var(--blue-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; } .contact-detail-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-2); margin-bottom: 3px; } .contact-detail-value { font-size: 14px; font-weight: 500; color: var(--white); line-height: 1.4; } .contact-form-wrap { background: var(--card); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 40px; /* Push top down to align with the h2, stretch bottom to match contact-details */ margin-top: 52px; align-self: stretch; display: flex; flex-direction: column; } .contact-form { flex: 1; display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-label { font-size: 13px; font-weight: 500; color: var(--grey-1); } .form-label span { color: var(--blue); } .form-input { background: var(--surface); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm); color: var(--white); font-family: inherit; font-size: 14px; padding: 12px 16px; transition: var(--transition); outline: none; width: 100%; } .form-input::placeholder { color: var(--grey-2); } .form-input:focus { border-color: var(--blue); background: #141414; box-shadow: 0 0 0 3px rgba(0,168,255,0.1); } .form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24' stroke='%238B9BAE' stroke-width='2'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .form-select option { background: #1a1a1a; color: var(--white); } .form-textarea { min-height: 120px; flex: 1; resize: vertical; line-height: 1.6; } .form-submit { width: 100%; justify-content: center; padding: 16px; font-size: 15px; } .form-success { display: none; align-items: center; gap: 10px; background: rgba(0,168,255,0.1); border: 1px solid var(--blue-border); border-radius: var(--radius-sm); padding: 16px; font-size: 14px; color: var(--blue); } @media (max-width: 860px) { .contact-wrap { grid-template-columns: 1fr; gap: 48px; } .form-row { grid-template-columns: 1fr; } .contact-form-wrap { padding: 28px 20px; } } /* ---- CTA SECTION ---- */ .cta-section { background: var(--surface); padding: 100px 0; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(0,168,255,0.12), transparent 70%); pointer-events: none; } .cta-section__inner { position: relative; text-align: center; max-width: 700px; margin: 0 auto; } .cta-section__title { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 20px; } .cta-section__sub { font-size: 17px; color: var(--grey-1); margin-bottom: 40px; } .cta-section__actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } /* ---- FOOTER ---- */ .footer { background: #000; border-top: 1px solid rgba(255,255,255,0.05); padding: 64px 0 32px; } .footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.05); } .footer__brand-name { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; } .footer__brand-name span { color: var(--blue); } .footer__brand-text { font-size: 14px; color: var(--grey-1); line-height: 1.7; margin-bottom: 20px; } .footer__contact-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--grey-1); margin-bottom: 8px; } .footer__contact-item strong { color: var(--white); } .footer__col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 20px; } .footer__links { display: flex; flex-direction: column; gap: 10px; } .footer__links a { font-size: 14px; color: var(--grey-1); transition: color var(--transition); } .footer__links a:hover { color: var(--blue); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; flex-wrap: wrap; gap: 12px; } .footer__copy { font-size: 13px; color: var(--grey-2); } .footer__abn { font-size: 13px; color: var(--grey-2); } /* ---- LOCATIONS PAGE ---- */ .locations-hero { padding: 180px 0 80px; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,168,255,0.15) 0%, transparent 60%), var(--bg); text-align: center; } .locations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 60px; } .location-tile { background: var(--card); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); padding: 24px; display: flex; align-items: center; justify-content: space-between; transition: var(--transition); } .location-tile:hover { border-color: var(--blue-border); background: #161616; transform: translateY(-3px); } .location-tile__name { font-size: 15px; font-weight: 600; } .location-tile__arrow { color: var(--blue); font-size: 18px; opacity: 0; transition: var(--transition); } .location-tile:hover .location-tile__arrow { opacity: 1; } /* ---- INDIVIDUAL LOCATION PAGE ---- */ .loc-hero { padding: 180px 0 80px; background: radial-gradient(ellipse 60% 50% at 50% -10%, rgba(0,168,255,0.15) 0%, transparent 60%), var(--bg); } .loc-breadcrumb { font-size: 13px; color: var(--grey-1); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; } .loc-breadcrumb a { color: var(--blue); } .loc-breadcrumb span { color: var(--grey-2); } .loc-hero__title { font-size: clamp(36px, 5vw, 60px); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 20px; } .loc-hero__sub { font-size: 18px; color: var(--grey-1); max-width: 600px; margin-bottom: 36px; line-height: 1.7; } .loc-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 60px; } .loc-service-item { background: var(--card); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); padding: 28px; display: flex; align-items: flex-start; gap: 16px; transition: var(--transition); } .loc-service-item:hover { border-color: var(--blue-border); } .loc-service-item__check { color: var(--blue); flex-shrink: 0; margin-top: 2px; } .loc-service-item__title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .loc-service-item__text { font-size: 13px; color: var(--grey-1); line-height: 1.6; } /* ---- HAMBURGER MOBILE ---- */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; } .nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); } .nav__mobile-menu { display: none; position: fixed; inset: 0; background: rgba(8,8,8,0.97); backdrop-filter: blur(20px); z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 32px; } .nav__mobile-menu.open { display: flex; } .nav__mobile-menu a { font-size: 24px; font-weight: 700; color: var(--white); transition: color var(--transition); } .nav__mobile-menu a:hover { color: var(--blue); } /* ---- RESPONSIVE ---- */ @media (max-width: 900px) { .why__inner { grid-template-columns: 1fr; } .why__visual { display: none; } .footer__top { grid-template-columns: 1fr 1fr; } .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 36px; } .hero__stats { gap: 32px; } } @media (max-width: 640px) { .nav__links, .nav__phone { display: none; } .nav__hamburger { display: flex; } .section { padding: 72px 0; } .footer__top { grid-template-columns: 1fr; } .hero__stats { flex-direction: column; gap: 24px; } .stats-bar__inner { grid-template-columns: repeat(2, 1fr); } .services__grid { grid-template-columns: 1fr; } } /* ---- ANIMATIONS ---- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.7s ease forwards; } .fade-up-1 { animation-delay: 0.1s; opacity: 0; } .fade-up-2 { animation-delay: 0.2s; opacity: 0; } .fade-up-3 { animation-delay: 0.3s; opacity: 0; } .fade-up-4 { animation-delay: 0.4s; opacity: 0; } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes pulse-ring { 0% { transform: translate(var(--rx), var(--ry)) scale(1); opacity: 0.8; } 100% { transform: translate(var(--rx), var(--ry)) scale(1.6); opacity: 0; } } /* ---- CUSTOM CURSOR ---- */ /* Hide default cursor across the whole page */ *, *::before, *::after { cursor: none !important; } .cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: var(--blue); border-radius: 50%; pointer-events: none; z-index: 9999; transition: transform 0.05s linear, background 0.2s, width 0.2s, height 0.2s; box-shadow: 0 0 10px rgba(0,168,255,0.8), 0 0 20px rgba(0,168,255,0.4); will-change: transform; } .cursor-dot--click { width: 12px; height: 12px; background: #fff; } .cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1.5px solid rgba(0,168,255,0.55); border-radius: 50%; pointer-events: none; z-index: 9998; transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.25s; will-change: transform; } .cursor-ring--hover { width: 52px; height: 52px; border-color: rgba(0,168,255,0.9); } /* ---- GRADIENT DIVIDER ---- */ .gradient-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(0,168,255,0.15) 20%, rgba(0,168,255,0.5) 50%, rgba(0,168,255,0.15) 80%, transparent 100% ); border: none; margin: 0; } /* ---- BUTTON SHIMMER ---- */ .btn-primary { background: linear-gradient( 110deg, var(--blue) 0%, #33BBFF 45%, var(--blue) 55%, var(--blue) 100% ); background-size: 200% auto; transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease; } .btn-primary:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,168,255,0.38); } /* ---- FRESHER CARDS ---- */ .service-card { background: var(--card); border: 1px solid var(--card-border); } .service-card:hover { background: #141828; border-color: rgba(0,168,255,0.22); box-shadow: 0 0 40px rgba(0,168,255,0.04); } /* ---- TRUST BAND REFRESH ---- */ .trust-band { background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-top: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.04); } /* ---- WHY CARD REFRESH ---- */ .why__card-main { background: linear-gradient(145deg, #0F1525 0%, #0A0E1C 100%); border: 1px solid rgba(0,168,255,0.12); box-shadow: 0 0 60px rgba(0,168,255,0.05), inset 0 1px 0 rgba(255,255,255,0.04); } /* ---- STATS BAR REFRESH ---- */ .stats-bar { background: linear-gradient(135deg, #0080E8 0%, #0066CC 50%, #0055AA 100%); } /* ---- FOOTER REFRESH ---- */ .footer { background: #040609; border-top: 1px solid rgba(255,255,255,0.04); } /* ============================================= HERO WIDGET ZONE — 5-option switcher ============================================= */ .hw-zone { animation: hw-float 5s ease-in-out infinite; } .hw-opts { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; } .hw-opt-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; color: var(--grey-1); font-size: 11px; font-weight: 600; padding: 4px 10px; cursor: pointer; transition: var(--transition); font-family: inherit; white-space: nowrap; } .hw-opt-btn.active, .hw-opt-btn:hover { background: var(--blue-glow); border-color: var(--blue-border); color: var(--blue); } .hw-pane { display: none; } .hw-pane.active { display: block; } /* ---- Widget A: Cyber Rescue ---- */ .hw-rescue-scene { position: relative; height: 210px; display: flex; align-items: center; justify-content: center; margin: 6px 0; } .hw-shield-wrap { position: relative; z-index: 2; width: 88px; height: 98px; display: flex; align-items: center; justify-content: center; } .hw-shield-svg { width: 88px; height: 98px; position: relative; z-index: 2; filter: drop-shadow(0 0 14px rgba(0,168,255,0.55)); } .hw-shield-glow { position: absolute; inset: -28px; border-radius: 50%; background: radial-gradient(circle, rgba(0,168,255,0.28) 0%, transparent 70%); animation: hw-sglow 2.5s ease-in-out infinite; } @keyframes hw-sglow { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } } .hw-ring-1, .hw-ring-2 { position: absolute; border-radius: 50%; border: 1px solid rgba(0,168,255,0.3); animation: hw-ring-out 2.5s ease-out infinite; pointer-events: none; } .hw-ring-1 { width: 118px; height: 118px; animation-delay: 0s; } .hw-ring-2 { width: 150px; height: 150px; animation-delay: 1s; } @keyframes hw-ring-out { 0% { opacity: 0.7; transform: scale(0.65); } 100% { opacity: 0; transform: scale(1.3); } } .hw-threat { position: absolute; z-index: 3; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } .hw-t1 { top: 14px; left: 14px; animation: hw-lunge-tl 3.6s ease-in-out infinite; } .hw-t2 { top: 14px; right: 14px; animation: hw-lunge-tr 4.1s ease-in-out infinite; animation-delay: -1.3s; } .hw-t3 { bottom: 24px; left: 20px; animation: hw-lunge-bl 3.9s ease-in-out infinite; animation-delay: -2.2s; } .hw-t4 { right: 12px; top: 50%; margin-top: -13px; animation: hw-lunge-r 3.3s ease-in-out infinite; animation-delay: -0.7s; } @keyframes hw-lunge-tl { 0%, 28%, 100% { transform: translate(0, 0); } 48%, 62% { transform: translate(30px, 30px) scale(0.82); } } @keyframes hw-lunge-tr { 0%, 28%, 100% { transform: translate(0, 0); } 48%, 62% { transform: translate(-30px, 30px) scale(0.82); } } @keyframes hw-lunge-bl { 0%, 28%, 100% { transform: translate(0, 0); } 48%, 62% { transform: translate(30px, -30px) scale(0.82); } } @keyframes hw-lunge-r { 0%, 28%, 100% { transform: translate(0, 0); } 48%, 62% { transform: translate(-30px, 0) scale(0.82); } } .hw-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #60CAFF; box-shadow: 0 0 8px #00A8FF, 0 0 14px rgba(0,168,255,0.5); z-index: 5; pointer-events: none; } .hw-s1 { top: calc(50% - 22px); left: calc(50% - 38px); animation: hw-spark-flash 3.6s ease-in-out infinite; } .hw-s2 { top: calc(50% - 26px); right: calc(50% - 42px); animation: hw-spark-flash 4.1s ease-in-out infinite; animation-delay: -1.3s; } .hw-s3 { bottom: calc(50% - 28px); left: calc(50% - 33px); animation: hw-spark-flash 3.9s ease-in-out infinite; animation-delay: -2.2s; } @keyframes hw-spark-flash { 0%, 43%, 100% { opacity: 0; transform: scale(0); } 50%, 57% { opacity: 1; transform: scale(1); } } .hw-rescue-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 8px 0 12px; } .hw-rescue-stat { text-align: center; background: rgba(0,168,255,0.06); border: 1px solid rgba(0,168,255,0.1); border-radius: 8px; padding: 9px 4px; } .hw-rescue-num { font-size: 14px; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; } .hw-rescue-label { font-size: 9px; color: var(--grey-2); margin-top: 2px; line-height: 1.3; } /* ---- Widget B: Live Threats ---- */ .hw-bigcount { text-align: center; padding: 18px 0 14px; } .hw-bigcount-num { font-size: 52px; font-weight: 900; letter-spacing: -0.04em; background: linear-gradient(135deg, #FFFFFF 30%, var(--blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .hw-bigcount-label { font-size: 11px; color: var(--grey-1); margin-top: 5px; } .hw-events { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .hw-evt { display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.055); border-radius: 8px; } .hw-evt-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; animation: hw-blink 2s ease-in-out infinite; } .hw-evt-info { flex: 1; min-width: 0; } .hw-evt-title { font-size: 11px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hw-evt-time { font-size: 9px; color: var(--grey-2); margin-top: 1px; } .hw-evt-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.07em; color: #22C55E; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); padding: 2px 6px; border-radius: 4px; flex-shrink: 0; } /* ---- Widget C: Australia Map ---- */ .hw-map-wrap { position: relative; margin: 6px 0 8px; } .hw-map-svg { width: 100%; height: auto; display: block; } .hw-map-tag { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: #22C55E; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: 100px; padding: 4px 10px; width: fit-content; margin: 4px auto 0; } .hw-map-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; } .hw-map-stat { text-align: center; background: rgba(0,168,255,0.05); border: 1px solid rgba(0,168,255,0.1); border-radius: 8px; padding: 9px 4px; font-size: 9px; color: var(--grey-1); line-height: 1.3; } .hw-map-stat strong { display: block; font-size: 15px; font-weight: 800; color: var(--blue); margin-bottom: 2px; letter-spacing: -0.02em; } /* ---- Widget D: Reviews ---- */ .hw-stars-row { font-size: 11px; color: #FBBF24; letter-spacing: 0.04em; margin-left: auto; } .hw-stars-row strong { color: var(--white); font-size: 11px; } .hw-rslider { margin: 10px 0 8px; min-height: 115px; } .hw-rslide { animation: hw-fade-in 0.35s ease; } @keyframes hw-fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .hw-rquote { font-size: 13px; color: rgba(255,255,255,0.9); line-height: 1.65; margin-bottom: 13px; font-style: italic; } .hw-rauthor { display: flex; align-items: center; gap: 10px; } .hw-ravatar { width: 33px; height: 33px; border-radius: 50%; background: var(--blue-glow); border: 1px solid var(--blue-border); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--blue); flex-shrink: 0; } .hw-rname { font-size: 12px; font-weight: 700; color: var(--white); } .hw-rloc { font-size: 10px; color: var(--grey-2); margin-top: 1px; } .hw-rdots { display: flex; gap: 5px; justify-content: center; margin-bottom: 12px; } .hw-rdot { width: 6px; height: 6px; border-radius: 50%; background: var(--grey-3); border: none; cursor: pointer; transition: var(--transition); padding: 0; } .hw-rdot.active { background: var(--blue); width: 18px; border-radius: 3px; } /* ---- Widget E: Compare ---- */ .hw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; } .hw-split-half { border-radius: 10px; padding: 11px 10px; } .hw-split-bad { background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.18); } .hw-split-good { background: rgba(34,197,94,0.07); border: 1px solid rgba(34,197,94,0.18); } .hw-split-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.06); } .hw-split-bad .hw-split-title { color: #FF6B6B; } .hw-split-good .hw-split-title { color: #22C55E; } .hw-split-items { display: flex; flex-direction: column; gap: 5px; } .hw-split-item { font-size: 11px; color: var(--grey-1); display: flex; align-items: center; gap: 5px; line-height: 1.3; } .hw-split-item > span:first-child { font-size: 13px; flex-shrink: 0; } /* ============================================= GRADIENT REFRESH — black → blue → white light ============================================= */ /* ---- Root colour update ---- */ :root { --bg: #04060F; --surface: #070C1A; --card: #0B1022; --card-border: rgba(0, 168, 255, 0.09); --grey-1: #A8BECE; --grey-2: #556070; } /* ---- Body: subtle fixed blue halo from top ---- */ body { background: radial-gradient(ellipse 110% 55% at 50% 0%, rgba(0,100,230,0.18) 0%, transparent 65%), radial-gradient(ellipse 70% 40% at 100% 50%, rgba(0,60,160,0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 0% 80%, rgba(0,40,140,0.06) 0%, transparent 55%), #04060F; background-attachment: fixed; } /* ---- Hero: dramatically brighter and wider glow ---- */ .hero__bg { background: radial-gradient(ellipse 100% 75% at 50% -8%, rgba(0,168,255,0.30) 0%, transparent 62%), radial-gradient(ellipse 55% 60% at 88% 65%, rgba(0,100,220,0.15) 0%, transparent 55%), radial-gradient(ellipse 40% 45% at 8% 80%, rgba(0, 80,190,0.10) 0%, transparent 50%), linear-gradient(180deg, #030710 0%, #04060F 100%); } /* ---- Hero sub copy — brighter ---- */ .hero__sub { color: #B8D4EA; } /* ---- Services section ---- */ .services { background: radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0,80,200,0.08) 0%, transparent 60%), linear-gradient(180deg, #05080F 0%, #07101E 45%, #05080F 100%); } /* ---- Service cards — blue-tinted dark gradient ---- */ .service-card { background: linear-gradient(145deg, #0D1525 0%, #09101E 100%); border: 1px solid rgba(0,168,255,0.09); } .service-card:hover { background: linear-gradient(145deg, #141E34 0%, #0E1628 100%); border-color: rgba(0,168,255,0.26); box-shadow: 0 0 40px rgba(0,168,255,0.06); } .service-card__text { color: #9ABACF; } /* ---- Why section ---- */ .why { background: radial-gradient(ellipse 55% 50% at 20% 50%, rgba(0,80,200,0.09) 0%, transparent 60%), linear-gradient(180deg, #070D1E 0%, #0A1428 50%, #070D1E 100%); } .why__card-main { background: linear-gradient(145deg, #0F1C34 0%, #0A1226 100%); border: 1px solid rgba(0,168,255,0.16); box-shadow: 0 0 80px rgba(0,168,255,0.07), inset 0 1px 0 rgba(255,255,255,0.05); } .why__item-text { color: #9ABACF; } /* ---- Stats bar — brighter blue gradient ---- */ .stats-bar { background: linear-gradient(135deg, #0096F0 0%, #007ADB 35%, #005FC0 65%, #004EAA 100%); } .stat-item__num { color: #fff; } .stat-item__label { color: rgba(255,255,255,0.75); } /* ---- Industries section ---- */ .industries { background: radial-gradient(ellipse 50% 45% at 50% 80%, rgba(0,60,180,0.08) 0%, transparent 60%), linear-gradient(180deg, #04060F 0%, #070E1C 45%, #04060F 100%); } .industry-card { background: linear-gradient(145deg, #0C1222 0%, #09101C 100%); border: 1px solid rgba(0,168,255,0.08); } .industry-card:hover { background: linear-gradient(145deg, #131D30 0%, #0E1626 100%); border-color: rgba(0,168,255,0.24); box-shadow: 0 8px 30px rgba(0,168,255,0.08); } /* ---- Trust band — blue-tinted ---- */ .trust-band { background: linear-gradient(180deg, rgba(0,80,200,0.12) 0%, rgba(0,40,120,0.06) 100%); border-top: 1px solid rgba(0,168,255,0.12); border-bottom: 1px solid rgba(0,168,255,0.12); } .trust-item { color: #A8BECE; } /* ---- Gradient dividers — more visible ---- */ .gradient-divider { background: linear-gradient(90deg, transparent 0%, rgba(0,168,255,0.18) 15%, rgba(0,168,255,0.65) 50%, rgba(0,168,255,0.18) 85%, transparent 100% ); } /* ---- Contact section ---- */ .contact-section { background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(0,80,200,0.09) 0%, transparent 60%), linear-gradient(180deg, #060C1C 0%, #09122A 50%, #060C1C 100%); } .contact-form-wrap { background: linear-gradient(145deg, #0F1830 0%, #0A1224 100%); border: 1px solid rgba(0,168,255,0.12); } .contact-detail-item { background: linear-gradient(145deg, #0D1628 0%, #09101E 100%); border: 1px solid rgba(0,168,255,0.09); } .contact-detail-item:hover { border-color: rgba(0,168,255,0.25); background: linear-gradient(145deg, #131E34 0%, #0E1628 100%); } .section-sub { color: #A8BECE; } /* ---- Nav scrolled — deeper blue-black ---- */ .nav.scrolled { background: rgba(4,6,18,0.94); border-bottom: 1px solid rgba(0,168,255,0.1); } /* ---- Footer — gradient from dark navy to near-black ---- */ .footer { background: linear-gradient(180deg, #050A18 0%, #020408 100%); border-top: 1px solid rgba(0,168,255,0.1); } /* ---- Hero widget card — richer gradient ---- */ .hero-widget { background: linear-gradient(160deg, rgba(10,20,45,0.97) 0%, rgba(6,12,28,0.99) 100%); border: 1px solid rgba(0,168,255,0.22); box-shadow: 0 0 0 1px rgba(0,168,255,0.06), 0 24px 70px rgba(0,0,0,0.6), 0 0 100px rgba(0,168,255,0.07); } /* ---- Section titles — crisper white ---- */ .section-title { color: #F0F8FF; } /* ---- Why card metric labels ---- */ .why__metric-label { color: #A8BECE; } /* ---- Footer text ---- */ .footer__brand-text { color: #8BAABE; } .footer__links a { color: #7A9BAE; } .footer__links a:hover { color: var(--blue); } .footer__copy, .footer__abn { color: #4A6070; } /* ============================================= WIDGET: SPACEMAN ============================================= */ .hw-space-scene { position: relative; height: 215px; display: flex; align-items: center; justify-content: center; margin: 6px 0; overflow: hidden; border-radius: 12px; background: radial-gradient(ellipse 75% 75% at 50% 50%, rgba(0,40,110,0.5) 0%, transparent 70%); } .hw-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,0.85); animation: hw-twinkle 3s ease-in-out infinite; display: block; pointer-events: none; } @keyframes hw-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } .hw-astro-wrap { position: relative; z-index: 2; animation: hw-float 5s ease-in-out infinite; filter: drop-shadow(0 0 20px rgba(0,168,255,0.4)); } .hw-astro-svg { width: 115px; height: auto; } .hw-space-badge { position: absolute; background: rgba(0,168,255,0.12); border: 1px solid rgba(0,168,255,0.3); border-radius: 100px; padding: 4px 10px; font-size: 10px; font-weight: 700; color: var(--blue); z-index: 3; white-space: nowrap; } .hw-sb-1 { top: 12px; left: 8px; animation: hw-sb-float 4.2s ease-in-out infinite; } .hw-sb-2 { top: 12px; right: 8px; animation: hw-sb-float 4.2s ease-in-out infinite; animation-delay: -1.4s; } .hw-sb-3 { bottom: 10px; left: 50%; transform: translateX(-50%); animation: hw-sb-floatc 4.2s ease-in-out infinite; animation-delay: -2.8s; } @keyframes hw-sb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes hw-sb-floatc { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } } /* ============================================= HERO IMAGE PANE (right side of landing) ============================================= */ .hero-img-pane { position: relative; border-radius: 20px; overflow: hidden; animation: hw-float 6s ease-in-out infinite; background: linear-gradient(145deg, #07101E 0%, #040A16 100%); border: 1px solid rgba(0,168,255,0.2); box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 80px rgba(0,168,255,0.06); min-height: 380px; display: flex; align-items: center; justify-content: center; } .hero-main-img { width: 100%; height: auto; display: block; border-radius: 20px; } /* Shown only when spaceman.png is missing */ .hero-img-placeholder { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 28px; text-align: center; } .hero-img-placeholder p { font-size: 13px; color: var(--grey-2); line-height: 1.7; } .hero-img-placeholder code { color: var(--blue); font-family: 'Courier New', monospace; font-size: 12px; } /* ============================================= HERO — LIVE GLOBAL THREAT DEFENSE CONSOLE ============================================= */ .cyber-pane { position: relative; } .cyber-console { position: relative; border-radius: 20px; padding: 16px 16px 18px; background: radial-gradient(120% 90% at 50% 0%, rgba(0,168,255,0.10) 0%, rgba(0,168,255,0) 55%), linear-gradient(160deg, rgba(15,18,36,0.96) 0%, rgba(7,10,22,0.98) 100%); border: 1px solid rgba(0,168,255,0.22); box-shadow: inset 0 0 0 1px rgba(0,168,255,0.05), 0 24px 70px rgba(0,0,0,0.55), 0 0 90px rgba(0,168,255,0.08); backdrop-filter: blur(12px); overflow: hidden; animation: hw-float 6s ease-in-out infinite; } /* scan-line sheen sweeping down the whole console */ .cyber-console::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, rgba(0,168,255,0.06) 50%, transparent 100%); height: 40%; animation: cyber-sheen 5.5s linear infinite; pointer-events: none; } @keyframes cyber-sheen { 0% { transform: translateY(-110%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(260%); opacity: 0; } } .cyber-console__bar { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; position: relative; z-index: 2; } .cyber-console__live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #FF5470; background: rgba(255,84,112,0.10); border: 1px solid rgba(255,84,112,0.30); padding: 3px 8px; border-radius: 999px; } .cyber-console__live-dot { width: 6px; height: 6px; border-radius: 50%; background: #FF5470; box-shadow: 0 0 0 0 rgba(255,84,112,0.6); animation: cyber-pulse 1.6s ease-out infinite; } @keyframes cyber-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,84,112,0.55); } 70% { box-shadow: 0 0 0 7px rgba(255,84,112,0); } 100% { box-shadow: 0 0 0 0 rgba(255,84,112,0); } } .cyber-console__title { font-size: 13px; font-weight: 600; color: #DCEBFA; letter-spacing: 0.01em; white-space: nowrap; } .cyber-console__shield { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #2EE6A6; background: rgba(46,230,166,0.10); border: 1px solid rgba(46,230,166,0.30); padding: 3px 9px; border-radius: 999px; } .cyber-globe-wrap { position: relative; width: 100%; height: 272px; z-index: 1; } #radarCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* faint radial vignette ring behind the globe */ .cyber-globe-scan { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0,168,255,0.10) 0%, rgba(0,168,255,0) 62%); pointer-events: none; } .cyber-feed { position: relative; z-index: 2; height: 58px; margin: 6px 2px 14px; overflow: hidden; border-top: 1px solid rgba(0,168,255,0.10); border-bottom: 1px solid rgba(0,168,255,0.10); padding: 8px 2px 0; } .cyber-feed__item { display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 1.35; color: #B9CEE2; padding: 3px 0; animation: cyber-feed-in 0.45s cubic-bezier(0.4,0,0.2,1) both; } @keyframes cyber-feed-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .cyber-feed__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2EE6A6; box-shadow: 0 0 8px rgba(46,230,166,0.8); } .cyber-feed__item.is-alert .cyber-feed__dot { background: #FFB020; box-shadow: 0 0 8px rgba(255,176,32,0.85); } .cyber-feed__label { color: #E6F1FB; font-weight: 500; } .cyber-feed__loc { margin-left: auto; color: #5E7790; font-size: 10.5px; white-space: nowrap; } .cyber-stats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cyber-stat { background: rgba(0,168,255,0.05); border: 1px solid rgba(0,168,255,0.14); border-radius: 12px; padding: 11px 13px; } .cyber-stat__num { font-size: 22px; font-weight: 800; color: #FFFFFF; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.1; } .cyber-stat__label { font-size: 10.5px; color: #7E92A8; margin-top: 2px; letter-spacing: 0.02em; } @media (prefers-reduced-motion: reduce) { .cyber-console, .cyber-console::after, .cyber-console__live-dot { animation: none; } } /* ============================================= LIGHT THEME REFRESH Landing areas (heroes) stay dark; every content section below becomes bright white with blue and pastel-blue gradients so the brand pops. ============================================= */ :root { --ink: #0B1B33; /* deep navy headings on light */ --ink-soft: #46596F; /* body copy on light */ --ink-faint: #6C7F97; /* labels on light */ --pastel-1: #FFFFFF; --pastel-2: #F4F9FF; --pastel-3: #E7F1FF; --pastel-line: rgba(0,120,255,0.14); --pastel-line-strong: rgba(0,120,255,0.30); --light-shadow: 0 10px 30px rgba(0,90,190,0.07); --light-shadow-lg: 0 22px 55px rgba(0,90,190,0.12); } /* ---- Shared: headings & sub-copy on light sections ---- */ .trust-band .trust-item, .services .section-title, .why .section-title, .industries .section-title, .contact-section .section-title, .loc-content .section-title, .locations-grid-wrap .section-title { color: var(--ink); } .services .section-sub, .why .section-sub, .industries .section-sub, .contact-section .section-sub, .loc-content .section-sub { color: var(--ink-soft); } /* Gradient word in titles stays blue — pops on white */ .section-title span { background: linear-gradient(120deg, var(--blue) 0%, #0077CC 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---- TRUST BAND ---- */ .trust-band { background: linear-gradient(180deg, #E9F4FF 0%, #F7FBFF 100%); border-top: 1px solid var(--pastel-line); border-bottom: 1px solid var(--pastel-line); } .trust-item { color: #36506E; font-weight: 600; } .trust-item__icon { color: var(--blue-mid); } /* ---- SERVICES ---- */ .services { background: radial-gradient(ellipse 65% 55% at 85% 0%, rgba(0,150,255,0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 55% at 0% 100%, rgba(90,185,255,0.12) 0%, transparent 60%), linear-gradient(180deg, #F7FBFF 0%, #E9F3FF 100%); } .services__grid { background: var(--pastel-line); border: 1px solid var(--pastel-line); box-shadow: var(--light-shadow-lg); } .service-card { background: #FFFFFF; border: 1px solid transparent; } .service-card:hover { background: linear-gradient(150deg, #FFFFFF 0%, #ECF5FF 100%); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(0,120,255,0.18), 0 0 40px rgba(0,140,255,0.08); } .service-card__title { color: var(--ink); } .service-card__text { color: var(--ink-soft); } .service-card__icon { background: linear-gradient(150deg, rgba(0,168,255,0.16), rgba(0,120,255,0.05)); border: 1px solid rgba(0,120,255,0.22); color: var(--blue-mid); } /* ---- WHY ---- (left copy light, dark feature card kept for contrast) */ .why { background: radial-gradient(ellipse 55% 55% at 12% 25%, rgba(0,150,255,0.12) 0%, transparent 60%), linear-gradient(180deg, #E9F3FF 0%, #F7FBFF 55%, #E9F3FF 100%); } .why__item-title { color: var(--ink); } .why__item-text { color: var(--ink-soft); } .why__item-num { color: var(--blue-mid); } .why__item:hover { background: rgba(0,140,255,0.06); border-color: var(--pastel-line-strong); } /* ---- INDUSTRIES ---- */ .industries { background: radial-gradient(ellipse 55% 50% at 50% 100%, rgba(0,150,255,0.12) 0%, transparent 60%), linear-gradient(180deg, #F7FBFF 0%, #E8F2FF 100%); } .industry-card { background: #FFFFFF; border: 1px solid var(--pastel-line); box-shadow: var(--light-shadow); } .industry-card:hover { background: linear-gradient(150deg, #FFFFFF 0%, #EAF4FF 100%); border-color: var(--pastel-line-strong); box-shadow: 0 16px 40px rgba(0,100,200,0.14); transform: translateY(-4px); } .industry-card__icon { color: #7C93AE; } .industry-card:hover .industry-card__icon { color: var(--blue); } .industry-card__name { color: var(--ink); } /* ---- CONTACT ---- */ .contact-section { background: radial-gradient(ellipse 60% 55% at 12% 18%, rgba(0,150,255,0.12) 0%, transparent 60%), linear-gradient(180deg, #E9F3FF 0%, #F7FBFF 50%, #E9F3FF 100%); } .contact-detail-item { background: #FFFFFF; border: 1px solid var(--pastel-line); box-shadow: var(--light-shadow); } .contact-detail-item:hover { border-color: var(--pastel-line-strong); background: linear-gradient(150deg, #FFFFFF, #EEF6FF); } .contact-detail-icon { background: rgba(0,168,255,0.12); border: 1px solid rgba(0,120,255,0.22); color: var(--blue-mid); } .contact-detail-label { color: var(--ink-faint); } .contact-detail-value { color: var(--ink); } /* contact form — light card with light inputs */ .contact-form-wrap { background: #FFFFFF; border: 1px solid var(--pastel-line); box-shadow: var(--light-shadow-lg); } .form-label { color: var(--ink-soft); } .form-input { background: #F4F9FF; border: 1px solid rgba(0,120,255,0.16); color: var(--ink); } .form-input::placeholder { color: #9DB0C6; } .form-input:focus { border-color: var(--blue); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(0,168,255,0.14); } .form-select option { background: #FFFFFF; color: var(--ink); } /* ---- CTA SECTION (location pages + locations.html) ---- */ .cta-section { background: linear-gradient(180deg, #E3EFFF 0%, #F3F9FF 100%); } .cta-section::before { background: radial-gradient(ellipse, rgba(0,150,255,0.20), transparent 70%); } .cta-section__title { color: var(--ink); } .cta-section__sub { color: var(--ink-soft); } /* outline buttons need dark-on-light treatment in light sections */ .cta-section .btn-outline, .contact-section .btn-outline { color: var(--blue-mid); border-color: rgba(0,120,255,0.38); } .cta-section .btn-outline:hover, .contact-section .btn-outline:hover { border-color: var(--blue); color: var(--blue); } /* ---- LOCATIONS LIST PAGE ---- */ .locations-grid-wrap { padding: 0 0 100px; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,150,255,0.10) 0%, transparent 55%), linear-gradient(180deg, #F7FBFF 0%, #E9F3FF 100%); } .location-tile { background: #FFFFFF; border: 1px solid var(--pastel-line); box-shadow: var(--light-shadow); } .location-tile:hover { border-color: var(--pastel-line-strong); background: linear-gradient(150deg, #FFFFFF, #EAF4FF); box-shadow: 0 16px 38px rgba(0,100,200,0.14); transform: translateY(-3px); } .location-tile__name { color: var(--ink); } /* ---- INDIVIDUAL LOCATION CONTENT ---- */ .loc-content { background: radial-gradient(ellipse 65% 55% at 82% 0%, rgba(0,150,255,0.11) 0%, transparent 55%), linear-gradient(180deg, #F7FBFF 0%, #E9F3FF 100%); } .loc-service-item { background: #FFFFFF; border: 1px solid var(--pastel-line); box-shadow: var(--light-shadow); } .loc-service-item:hover { border-color: var(--pastel-line-strong); box-shadow: 0 16px 38px rgba(0,100,200,0.14); transform: translateY(-3px); } .loc-service-item__title { color: var(--ink); } .loc-service-item__text { color: var(--ink-soft); } .loc-service-item__check { color: var(--blue-mid); } /* ---- Soft seam from the dark hero into the light body ---- */ .trust-band { position: relative; } /* ---- FAQ SECTION (light) ---- */ .faq { background: radial-gradient(ellipse 55% 50% at 85% 25%, rgba(0,150,255,0.10) 0%, transparent 60%), linear-gradient(180deg, #F7FBFF 0%, #E9F3FF 100%); } .faq .section-title { color: var(--ink); } .faq .section-sub { color: var(--ink-soft); } .faq-list { margin-top: 48px; display: flex; flex-direction: column; gap: 12px; max-width: 820px; } .faq-item { background: #FFFFFF; border: 1px solid var(--pastel-line); border-radius: var(--radius); box-shadow: var(--light-shadow); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); } .faq-item[open] { border-color: var(--pastel-line-strong); box-shadow: 0 14px 34px rgba(0,100,200,0.10); } .faq-q { list-style: none; cursor: pointer; padding: 22px 56px 22px 24px; font-size: 16px; font-weight: 700; color: var(--ink); position: relative; transition: color var(--transition); } .faq-q::-webkit-details-marker { display: none; } .faq-q:hover { color: var(--blue-mid); } .faq-q::after { content: ''; position: absolute; right: 24px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: translateY(-65%) rotate(45deg); transition: transform var(--transition); } .faq-item[open] .faq-q::after { transform: translateY(-30%) rotate(-135deg); } .faq-a { padding: 0 24px 22px; font-size: 15px; color: var(--ink-soft); line-height: 1.75; } .faq-a p { margin: 0; }