/* ValourOne styles — LIGHT THEME with animated cybersecurity background */ :root{ --white:#FFFFFF; --ink:#0B2650; --ink-2:#10356D; --blue:#0A62FF; --blue-200:#5EA0FF; --blue-100:#D9E8FF; --glow: 0 0 20px rgba(10,98,255,0.35), 0 0 40px rgba(10,98,255,0.18); } * { box-sizing: border-box } html,body{ height:100%; scroll-behavior:smooth; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji; color: var(--ink); background: var(--white); overflow-x: hidden; } /* Full-screen canvas globe background */ #globeCanvas{ position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display:block; } /* Subtle overlay to soften lines behind content */ .bg-overlay{ position: fixed; inset: 0; background: radial-gradient(800px 400px at 70% 10%, rgba(10,98,255,0.08), transparent 60%), radial-gradient(1000px 600px at 0% 100%, rgba(10,98,255,0.06), transparent 60%); z-index: -1; pointer-events: none; } /* Device-aware helpers (set by JS via data-device attr on ) */ html[data-device="mobile"] .hero{ padding-top: 80px } html[data-device="mobile"] .glitch-type{ font-size: clamp(26px, 8vw, 44px) } html[data-device="mobile"] .dash-grid{ grid-template-columns: 1fr !important } html[data-device="mobile"] .service-card{ grid-column: span 12 !important } html[data-device="mobile"] .price-card{ grid-column: span 12 !important } html[data-device="mobile"] .scanline{ animation-duration: 3.2s } html[data-device="desktop"] .glitch-type{ font-size: clamp(34px, 5vw, 64px) } /* Sidenav */ .sidenav{ position: fixed; inset: 0 auto 0 0; width: 260px; background: rgba(255,255,255,0.9); border-right: 1px solid var(--blue-100); backdrop-filter: blur(6px); padding: 16px; display: flex; flex-direction: column; gap: 12px; z-index: 40; } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink) } .brand-logo{ width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(10,98,255,.2)); } .brand-text{ font-weight: 900; letter-spacing: .4px } .logo-scan{ position: relative; width: 0; height: 0; /* pseudo overlay via :before */ } .brand::before{ content: ""; position:absolute; left: 22px; top: 24px; width: 38px; height: 8px; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity:.65; filter: blur(2px); animation: logoScan 2.6s linear infinite; } @keyframes logoScan{ 0%{ transform: translateY(-16px) } 100%{ transform: translateY(22px) } } .sidenav nav{ display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .sidenav nav a{ color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--blue-100); background: #fff; } .sidenav nav a:hover{ box-shadow: var(--glow); border-color: var(--blue-200); } .nav-toggle{ display:none; margin-top:auto; color:var(--ink); background:transparent; border:1px solid var(--blue); border-radius:10px; padding:10px } main{ margin-left: 260px; } .hero{ min-height: 86vh; display:grid; place-items:center; padding: 60px 24px; } .hero-inner{ max-width: 1100px; text-align: center; position:relative } .hero-decor{ position:absolute; inset: 0; pointer-events:none } .hero-decor .beam{ position:absolute; width: 2px; height: 120px; left: 10%; top: 20%; background: linear-gradient(180deg, var(--blue), transparent); animation: beamDown 2.2s infinite; opacity:.45 } .hero-decor .beam:nth-child(2){ left: 85%; top: 18%; animation-delay: .6s } .hero-decor .beam:nth-child(3){ left: 60%; top: 10%; animation-delay: 1.2s } @keyframes beamDown{ 0%{ transform: translateY(-40px) } 100%{ transform: translateY(40px)} } .glitch-type{ line-height: 1.1; position: relative; letter-spacing: .5px; font-weight: 900; } .glitch-type::before, .glitch-type::after{ content: attr(data-text); position: absolute; left:0; top:0; width:100%; overflow: hidden; white-space: nowrap; text-shadow: 0 0 16px rgba(10,98,255,.25); mix-blend-mode: multiply; color: var(--ink); } .glitch-type::before{ transform: translate(1px,0); clip-path: polygon(0 0,100% 0,100% 42%,0 42%); opacity:.6 } .glitch-type::after{ transform: translate(-1px,0); clip-path: polygon(0 58%,100% 58%,100% 100%,0 100%); opacity:.6 } .cursor{ display:inline-block; width: 10px; height: 1.1em; background: var(--blue); margin-left: 6px; animation: blink 0.8s steps(1) infinite; vertical-align: -2px; } @keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} } .subtitle{ color: var(--ink-2); margin: 14px auto 24px; max-width: 780px; } .section{ padding: 80px 24px; position:relative } .section::after{ content:""; position:absolute; left:50%; transform: translateX(-50%); bottom:0; width: 60%; height:1px; background: linear-gradient(90deg, transparent, var(--blue-100), transparent); } .section-title{ text-align:center; margin: 0 0 28px; font-size: clamp(22px, 3.2vw, 36px); } .grid{ display:grid; gap: 16px; } .dash-grid{ grid-template-columns: repeat(12, 1fr); } .panel{ background: #fff; border:1px solid var(--blue-100); border-radius: 16px; padding: 16px; box-shadow: 0 4px 20px rgba(10,98,255,0.05) } .scan-panel{ grid-column: span 7; } .alarm-panel{ grid-column: span 5; display:grid; place-items:center; } .lights-panel{ grid-column: span 12; } .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px } .panel-head h3{ margin:0 } .dot{ width:10px; height:10px; border-radius:50%; background: var(--blue); box-shadow: var(--glow); } .flicker{ animation: flicker 1.2s infinite steps(2) } @keyframes flicker{ 0%{ opacity:.4 } 50%{ opacity:1 } 100%{ opacity:.4 } } .scan-surface{ position: relative; overflow:hidden; border-radius: 12px; border:1px solid var(--blue-100); background: var(--white); padding: 10px; } .scan-bar{ position:absolute; left:0; right:0; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); animation: sweep 2.6s linear infinite; } @keyframes sweep{ 0%{ top:0 } 100%{ top: calc(100% - 2px)} } .scan-feed{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 14px; color: var(--ink-2); } .scan-feed .found{ color: var(--ink); text-shadow: 0 0 12px rgba(10,98,255,.25); } .alarm-wrap{ position:relative; width: 100%; height: 150px; display:grid; place-items:center; } .alarm-text{ font-size: clamp(40px, 6vw, 60px); letter-spacing: 6px; font-weight: 800; color: var(--ink); text-shadow: 0 0 12px rgba(10,98,255,.25); animation: alarm 1.4s infinite; } .alarm-ring{ position:absolute; border: 2px solid var(--blue); border-radius: 999px; inset: 28% 18%; opacity:.5; animation: ring 2.6s infinite ease-out; } .alarm-ring.ring2{ animation-delay: .6s } .alarm-ring.ring3{ animation-delay: 1.2s } @keyframes alarm{ 0%,100%{ opacity: .7 } 50%{ opacity: 1 } } @keyframes ring{ 0%{ transform: scale(.9) } 100%{ transform: scale(1.1); opacity:.1 } } .alarm-caption{ text-align:center; color: var(--ink-2); margin-top: -8px; } .lights{ display:grid; grid-template-columns: repeat(8, 1fr); gap:8px; margin: 10px 0 18px; } .light{ width: 100%; aspect-ratio: 1/1; border-radius: 8px; background: radial-gradient(circle at 50% 35%, var(--blue-200), var(--white)); animation: lightblink 2s infinite; border: 1px solid var(--blue-100) } .light:nth-child(odd){ animation-duration: 2.6s } @keyframes lightblink{ 0%,100%{ filter: brightness(.9) } 50%{ filter: brightness(1.1) } } .bars{ display:flex; gap:8px; align-items:flex-end; height: 80px; } .bar{ flex:1; height: 30%; background: linear-gradient(180deg, var(--blue-200), var(--blue)); border:1px solid var(--blue-100); border-radius:8px; animation: updown 1.8s ease-in-out infinite; } .bar:nth-child(2){ animation-delay: .2s; height: 55% } .bar:nth-child(3){ animation-delay: .4s; height: 70% } .bar:nth-child(4){ animation-delay: .6s; height: 45% } @keyframes updown{ 0%,100%{ transform: translateY(6%) } 50%{ transform: translateY(-6%) } } /* Buttons */ .btn{ --outline: rgba(10,98,255,0.25); position: relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; color: var(--white); text-decoration:none; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--blue); background: linear-gradient(180deg, var(--blue), #0C5AE0); box-shadow: 0 0 0 2px var(--outline) inset, var(--glow); transition: transform .12s ease, box-shadow .12s ease; } .btn.small{ padding: 8px 12px; font-size: 14px } .btn:hover{ transform: translateY(-1px); box-shadow: 0 0 0 2px var(--blue) inset, 0 0 40px rgba(10,98,255,0.35); } .btn:active{ transform: translateY(0) scale(.99) } .btn.outline{ color: var(--ink); background: var(--white); border-color: var(--blue); } .btn.glow::after{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; box-shadow: 0 0 30px rgba(10,98,255,0.35); animation: flash 2.2s infinite; } @keyframes flash{ 0%,100%{ opacity:.6 } 50%{ opacity:.95 } } .cta-row{ display:flex; gap: 10px; justify-content:center; flex-wrap: wrap; } .cta-row.mid{ margin-top: 14px; } /* Services */ .services .service-grid{ grid-template-columns: repeat(12, 1fr); } .service-card{ grid-column: span 4; background: #fff; border:1px solid var(--blue-100); border-radius: 16px; padding: 16px; display:flex; flex-direction:column; gap:8px; text-align:center; position:relative; overflow:hidden } .service-card::before{ content:""; position:absolute; inset:auto 10px 10px 10px; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); animation: sweepLine 2.4s infinite; } @keyframes sweepLine{ 0%{ transform: translateX(-40%) } 100%{ transform: translateX(40%) } } .service-card h3{ margin:6px 0 0 } .service-card p{ margin: 4px 0 0; color: var(--ink-2) } .icon-ping{ width: 86px; margin: 0 auto; filter: drop-shadow(0 0 12px rgba(10,98,255,.25)); } .icon-ping svg{ width: 100%; height:auto } .pulse{ fill: none; stroke: var(--blue); stroke-width: 1.2; opacity:.5; transform-origin: 50% 50%; animation: pulse 2.8s infinite } .pulse.p2{ animation-delay: .8s } .pulse.p3{ animation-delay: 1.6s } @keyframes pulse{ 0%{ transform: scale(.5); opacity: .0 } 50%{ opacity:.45 } 100%{ transform: scale(1); opacity:0 } } .glyph, .glyph-square{ fill: var(--blue) } .glyph-tri, .glyph-path, .glyph-shield, .glyph-lock{ fill:none; stroke: var(--ink); stroke-width: 2 } .glyph-path{ stroke-linecap: round } .glyph-lock{ stroke-linejoin: round } /* Pricing */ .pricing .price-grid{ grid-template-columns: repeat(12, 1fr); } .price-card{ position:relative; grid-column: span 4; background: #fff; border:1px solid var(--blue-100); border-radius: 16px; padding: 16px; overflow:hidden } .price-card h3{ margin-top: 0 } .price{ font-size: 34px; margin: 6px 0 10px; color: var(--ink) } .blurred{ filter: blur(6px); opacity:.75; user-select: none; } .lock-overlay{ position:absolute; inset:auto 10px 10px 10px; background: rgba(255,255,255,0.95); border:1px solid var(--blue-100); border-radius: 12px; padding: 10px; display:flex; align-items:center; justify-content: space-between; gap:10px; } /* About */ .about p{ max-width: 900px; margin: 0 auto; color: var(--ink-2) } .about strong{ color: var(--ink) } /* Book form */ .book-form{ max-width: 900px; margin: 0 auto; display:flex; flex-direction:column; gap: 12px; } .book-form .row{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .book-form label{ display:flex; flex-direction:column; gap:6px; font-weight: 700; color: var(--ink) } .book-form input{ background: #fff; border:1px solid var(--blue-100); border-radius: 12px; padding: 12px; color: var(--ink); } .book-form input:focus{ outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,98,255,0.15); } .alt-mail{ color: var(--ink-2) } .link{ color: var(--blue) } .noscript{ color: var(--ink-2) } /* Footer */ .footer{ margin-left: 260px; display:grid; place-items:center; padding: 28px 16px; border-top:1px solid var(--blue-100); background: #fff } .footer .ig{ display:flex; align-items:center; gap:10px; color: var(--ink); text-decoration:none; } .ig-icon{ width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.6 } .ig:hover{ text-decoration: underline } /* Responsive */ @media (max-width: 980px){ .scan-panel{ grid-column: span 12 } .alarm-panel{ grid-column: span 12 } .lights-panel{ grid-column: span 12 } .service-card{ grid-column: span 6 } .price-card{ grid-column: span 12 } } @media (max-width: 860px){ .sidenav{ width: 86px; padding: 10px; align-items:center } .sidenav .brand-text{ display:none } .sidenav nav a{ text-align:center; padding: 10px 6px } main, .footer{ margin-left: 86px } } @media (max-width: 620px){ .sidenav{ width: 64px } main, .footer{ margin-left: 64px } .book-form .row{ grid-template-columns: 1fr } }