/* ============================================================ NEXO — CORE SERVICE PAGES / DARK SHELL ------------------------------------------------------------ Shared chrome for the three core-service pages: mobile-surveillance-units.html live-video-monitoring.html hybrid-security.html Scoped to so nothing here can leak into the light pages. Each page then loads its own layout file (pages/svc-*.css) — the section compositions are deliberately different from page to page; only this shell is shared. ============================================================ */ body.svp { --ink: #FFFFFF; --ink-soft: rgba(255,255,255,0.66); --ink-dim: rgba(255,255,255,0.42); --hair: rgba(255,255,255,0.10); --hair-2: rgba(255,255,255,0.18); --panel: rgba(255,255,255,0.035); --panel-2: rgba(255,255,255,0.06); --accent: #2E6BFF; --accent-2: #6E9BFF; --accent-dim: rgba(46,107,255,0.16); --gut: clamp(20px, 5vw, 72px); --wide: 1240px; background: #000; color: var(--ink); } /* kill the light-canvas ambient wash, replace with a deep field */ body.svp::before { background: radial-gradient(1100px 600px at 50% -8%, rgba(46,107,255,0.16), transparent 62%), radial-gradient(900px 700px at 100% 40%, rgba(0,70,255,0.08), transparent 60%); } /* the whole page is a dark scope — flip the shared component vars */ body.svp { --text: #fff; --text-soft: rgba(255,255,255,0.66); --text-dim: rgba(255,255,255,0.42); --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.18); --surface: rgba(255,255,255,0.035); --surface-2: rgba(255,255,255,0.06); --bg: #000; } body.svp ::selection { background: rgba(46,107,255,0.36); color: #fff; } body.svp ::-webkit-scrollbar-track { background: #000; } body.svp ::-webkit-scrollbar-thumb { background: #1c1f26; border-color: #000; } body.svp ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ---------- layout primitives ---------- */ .svp-wrap { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gut); } .svp-sec { position: relative; padding-block: clamp(72px, 9vw, 148px); } .svp-sec + .svp-sec { border-top: 1px solid var(--hair); } /* a hairline grid that only shows where it is masked in */ .svp-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 74px 74px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%); } /* ---------- type ---------- */ .svp-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--accent-2); } .svp-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(46,107,255,0.18); animation: svpPulse 2.4s ease-in-out infinite; } @keyframes svpPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(46,107,255,0.18); } 50% { box-shadow: 0 0 0 9px rgba(46,107,255,0); } } .svp-h2 { margin-top: 18px; font-family: 'Sora', sans-serif; font-size: clamp(30px, 4.4vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; } .svp-h2 em { font-style: normal; color: var(--accent-2); } .svp-h3 { font-family: 'Sora', sans-serif; font-size: clamp(18px, 1.7vw, 23px); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; } .svp-lead { margin-top: 20px; max-width: 56ch; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.66; color: var(--ink-soft); } .svp-p { font-size: 15px; line-height: 1.68; color: var(--ink-soft); } .svp-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; color: var(--ink-dim); } /* ---------- buttons ---------- */ .svp-btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border-radius: 100px; border: 1px solid transparent; font-family: 'Sora', sans-serif; font-size: 14.5px; font-weight: 650; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease, border-color .3s ease; } .svp-btn svg { width: 17px; height: 17px; flex: none; } .svp-btn:hover { transform: translateY(-2px); } .svp-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 16px 40px -16px rgba(46,107,255,0.9); } .svp-btn-primary:hover { background: #4a80ff; box-shadow: 0 22px 52px -16px rgba(46,107,255,1); } .svp-btn-ghost { border-color: var(--hair-2); color: #fff; background: rgba(255,255,255,0.02); } .svp-btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.34); } /* sheen that sweeps once on hover */ .svp-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; } .svp-btn:hover::after { transform: translateX(120%); } /* ---------- scroll reveal ---------- JS adds .in when the element enters the viewport. Elements opt into a direction with data-anim; --d staggers siblings. */ [data-anim] { opacity: 0; transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); will-change: opacity, transform; } [data-anim="up"] { transform: translateY(34px); } [data-anim="down"] { transform: translateY(-28px); } [data-anim="left"] { transform: translateX(-40px); } [data-anim="right"] { transform: translateX(40px); } [data-anim="scale"] { transform: scale(.94); } [data-anim="blur"] { filter: blur(14px); transform: translateY(18px); } [data-anim].in { opacity: 1; transform: none; filter: none; } /* On narrow screens a 40px horizontal pre-offset pushes past the viewport and creates a sideways scroll before the element reveals, so those two directions fall back to the vertical entrance. */ @media (max-width: 900px) { [data-anim="left"], [data-anim="right"] { transform: translateY(28px); } } /* headline that wipes up line by line — JS wraps each line in .ln */ .svp-split .ln { display: block; overflow: hidden; } .svp-split .ln > span { display: block; transform: translateY(105%); transition: transform .9s cubic-bezier(.16,1,.3,1); transition-delay: var(--ld, 0s); } .svp-split.in .ln > span { transform: none; } /* ---------- shared CTA foot ---------- */ .svp-cta { position: relative; overflow: hidden; text-align: center; } .svp-cta::before { content: ""; position: absolute; left: 50%; top: 0; width: 900px; height: 900px; transform: translate(-50%, -46%); border-radius: 50%; background: radial-gradient(circle, rgba(46,107,255,0.22), transparent 62%); pointer-events: none; } .svp-cta .svp-wrap { position: relative; z-index: 1; } .svp-cta-actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .svp-cta-note { margin-top: 26px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-dim); } .svp-cta-note span { display: inline-flex; align-items: center; gap: 7px; } .svp-cta-note svg { width: 15px; height: 15px; color: var(--accent-2); } /* ---------- sibling-page switcher above the footer ---------- */ .svp-next { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .svp-next a { position: relative; display: block; padding: 30px; border-radius: 20px; border: 1px solid var(--hair); background: var(--panel); text-decoration: none; overflow: hidden; transition: border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); } .svp-next a:hover { border-color: rgba(255,255,255,0.3); background: var(--panel-2); transform: translateY(-4px); } .svp-next .lbl { font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-dim); } .svp-next .ttl { margin-top: 12px; font-family: 'Sora',sans-serif; font-size: 21px; font-weight: 650; letter-spacing: -.02em; } .svp-next .arw { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--accent-2); } .svp-next .arw svg { width: 15px; height: 15px; transition: transform .4s ease; } .svp-next a:hover .arw svg { transform: translateX(5px); } @media (max-width: 720px) { .svp-next { grid-template-columns: 1fr; } } /* ---------- accordion (used on all three, styled once) ---------- */ .svp-acc { border-top: 1px solid var(--hair); } .svp-acc-item { border-bottom: 1px solid var(--hair); } .svp-acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 4px; background: none; border: 0; cursor: pointer; text-align: left; font-family: 'Sora',sans-serif; font-size: clamp(15.5px, 1.35vw, 18px); font-weight: 600; color: var(--ink-soft); letter-spacing: -.015em; transition: color .35s ease; } .svp-acc-item.open .svp-acc-q, .svp-acc-q:hover { color: #fff; } .svp-acc-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; position: relative; transition: background .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .svp-acc-ic::before, .svp-acc-ic::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; } .svp-acc-ic::before { width: 11px; height: 1.5px; } .svp-acc-ic::after { width: 1.5px; height: 11px; } .svp-acc-item.open .svp-acc-ic { background: var(--accent); border-color: var(--accent); transform: rotate(180deg); } .svp-acc-item.open .svp-acc-ic::after { transform: scaleY(0); opacity: 0; } .svp-acc-a { overflow: hidden; height: 0; transition: height .5s cubic-bezier(.2,.8,.2,1); } .svp-acc-a > div { padding: 0 60px 28px 4px; font-size: 15px; line-height: 1.72; color: var(--ink-soft); } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { [data-anim], .svp-split .ln > span { transition: none !important; } [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; } .svp-split .ln > span { transform: none !important; } .svp-kicker i { animation: none; } }