first website commit
This commit is contained in:
Kismet Hasanaj
@@ -1,2 +1,115 @@
|
||||
# novarix-networks-homepage
|
||||
# Novarix Networks Website
|
||||
|
||||
Static marketing site for `Novarix Networks`, prepared for this deployment model:
|
||||
|
||||
- `Gitea` as the source of truth for the code
|
||||
- `Ubuntu 24.04` VM running `Nginx` as the private web server
|
||||
- `Nginx Proxy Manager` exposing the site publicly and handling SSL
|
||||
|
||||
## Project Structure
|
||||
|
||||
- `public/` static files that should be deployed to the web root
|
||||
- `public/assets/logo/` brand assets used by the site
|
||||
- `public/assets/favicon/` favicon files
|
||||
- `ops/nginx/novarixnet.com.conf.example` example Nginx server block
|
||||
|
||||
## Current Recommended Architecture
|
||||
|
||||
1. Keep this project in your internal `Gitea` repo.
|
||||
2. Use the `Ubuntu 24.04` VM as the dedicated private web server.
|
||||
3. Install `nginx` on that VM.
|
||||
4. Deploy the contents of `public/` to something like `/var/www/novarixnet.com`.
|
||||
5. Use `Nginx Proxy Manager` to proxy the public domain to the VM's private IP and Nginx port.
|
||||
6. Let `Nginx Proxy Manager` handle the public certificate and HTTPS redirect.
|
||||
|
||||
## Recommended Workflow
|
||||
|
||||
This is the cleanest way to handle changes:
|
||||
|
||||
1. Edit the site locally.
|
||||
2. Commit and push to `Gitea`.
|
||||
3. On the `Ubuntu 24.04` web VM, pull the latest repo changes.
|
||||
4. Sync the contents of `public/` into `/var/www/novarixnet.com`.
|
||||
5. Reload `nginx` if needed.
|
||||
|
||||
This keeps:
|
||||
|
||||
- your repo as the source of truth
|
||||
- the web VM as a deployment target
|
||||
- live web files separate from the Git working tree
|
||||
|
||||
## Important Deployment Note
|
||||
|
||||
Do not point `nginx` directly at the Git repository directory if you can avoid it.
|
||||
|
||||
Better approach:
|
||||
|
||||
- keep the repo in a path such as `/opt/novarix-website`
|
||||
- serve the live site from `/var/www/novarixnet.com`
|
||||
- copy or sync `public/` into `/var/www/novarixnet.com` during deployment
|
||||
|
||||
That gives you a cleaner separation between:
|
||||
|
||||
- source code
|
||||
- deployment files
|
||||
- web server content
|
||||
|
||||
## Example Web VM Layout
|
||||
|
||||
- Repo checkout: `/opt/novarix-website`
|
||||
- Live site root: `/var/www/novarixnet.com`
|
||||
- Nginx site config: `/etc/nginx/sites-available/novarixnet.com`
|
||||
|
||||
## Example Deployment Flow On The Web VM
|
||||
|
||||
Clone the repo once:
|
||||
|
||||
```bash
|
||||
git clone <your-gitea-repo-url> /opt/novarix-website
|
||||
```
|
||||
|
||||
Deploy updated files:
|
||||
|
||||
```bash
|
||||
sudo mkdir -p /var/www/novarixnet.com
|
||||
sudo rsync -av --delete /opt/novarix-website/public/ /var/www/novarixnet.com/
|
||||
```
|
||||
|
||||
Reload Nginx:
|
||||
|
||||
```bash
|
||||
sudo systemctl reload nginx
|
||||
```
|
||||
|
||||
## Nginx Proxy Manager Flow
|
||||
|
||||
- Public DNS record points to your public IP
|
||||
- Router forwards `80` and `443` to the host running `Nginx Proxy Manager`
|
||||
- `Nginx Proxy Manager` receives the public request
|
||||
- `Nginx Proxy Manager` proxies traffic to the private `Ubuntu 24.04` web VM
|
||||
- Private `nginx` serves the static files
|
||||
|
||||
## Canonical Domain Suggestion
|
||||
|
||||
Your strongest current options are:
|
||||
|
||||
- `novarixnet.com` for broad and international branding
|
||||
- `novarix.co.uk` for a stronger UK-local trust signal
|
||||
|
||||
Pick one as the canonical domain and redirect the others to it.
|
||||
|
||||
## Notes For This Site
|
||||
|
||||
- Replace the placeholder `contact@novarixnet.com` link in `public/index.html`
|
||||
- Add real company contact details before launch
|
||||
- Add legal pages such as privacy and terms
|
||||
- Add deeper service pages once the ISP, MSP, and transit offers are finalized
|
||||
- Add a contact form or CRM integration later if needed
|
||||
|
||||
## Included Nginx Example
|
||||
|
||||
Use the example config here as a starting point:
|
||||
|
||||
- `ops/nginx/novarixnet.com.conf.example`
|
||||
|
||||
Review the domain names, root path, and cache rules before using it in production.
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name novarixnet.com www.novarixnet.com;
|
||||
|
||||
root /var/www/novarixnet.com;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location = /favicon.ico {
|
||||
log_not_found off;
|
||||
access_log off;
|
||||
}
|
||||
|
||||
location ~* \.(svg|png|jpg|jpeg|gif|webp|css|js)$ {
|
||||
expires 7d;
|
||||
add_header Cache-Control "public, max-age=604800, immutable";
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 548 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 27 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 349 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.8 KiB |
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Novarix Networks | Agile Connectivity, Managed Services, and Transit</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Novarix Networks delivers agile connectivity, managed infrastructure, and transit services for businesses, operators, and demanding environments."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Novarix Networks, ISP, MSP, transit provider, managed networking, business connectivity, network infrastructure"
|
||||
/>
|
||||
<meta name="theme-color" content="#04111f" />
|
||||
<link rel="icon" type="image/png" href="/assets/favicon/favicon8.png" />
|
||||
<link rel="apple-touch-icon" href="/assets/favicon/favicon9.png" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-shell">
|
||||
<header class="site-header">
|
||||
<a class="brand" href="#top" aria-label="Novarix Networks home">
|
||||
<img src="/assets/logo/novarix_networks-white.svg" alt="Novarix Networks" />
|
||||
</a>
|
||||
<button
|
||||
class="nav-toggle"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="primary-nav"
|
||||
aria-label="Open navigation"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<nav class="site-nav" id="primary-nav">
|
||||
<a href="#services">Services</a>
|
||||
<a href="#approach">Approach</a>
|
||||
<a href="#infrastructure">Infrastructure</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
<section class="hero">
|
||||
<div class="hero-copy reveal">
|
||||
<p class="eyebrow">Connectivity without the drag</p>
|
||||
<h1>Network infrastructure built to move as fast as the environment around it.</h1>
|
||||
<p class="hero-text">
|
||||
Novarix Networks is being shaped to serve as an agile ISP, MSP, and
|
||||
transit provider for organisations that need dependable connectivity,
|
||||
practical engineering, and infrastructure that can keep evolving.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button-primary" href="#contact">Start the conversation</a>
|
||||
<a class="button button-secondary" href="#services">Explore services</a>
|
||||
</div>
|
||||
<ul class="hero-points">
|
||||
<li>Business connectivity and routed access</li>
|
||||
<li>Managed network and edge services</li>
|
||||
<li>Transit, interconnect, and custom builds</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual reveal">
|
||||
<div class="hero-orbit">
|
||||
<div class="signal-grid"></div>
|
||||
<img
|
||||
class="animated-mark"
|
||||
src="/assets/logo/animated_logo_intro.svg"
|
||||
alt="Animated Novarix Networks logo"
|
||||
/>
|
||||
<div class="status-card status-card-left">
|
||||
<span class="status-kicker">Positioning</span>
|
||||
<strong>ISP / MSP / Transit</strong>
|
||||
<p>Built for flexible projects, modern routing, and growth-ready delivery.</p>
|
||||
</div>
|
||||
<div class="status-card status-card-right">
|
||||
<span class="status-kicker">Operating model</span>
|
||||
<strong>Lean, technical, responsive</strong>
|
||||
<p>A brand direction designed to feel more engineering-led than corporate.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="proof-strip reveal">
|
||||
<div>
|
||||
<span>For businesses</span>
|
||||
<p>Connectivity and managed networking designed around uptime, reach, and clarity.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>For operators</span>
|
||||
<p>Transit and interconnect conversations grounded in routing, performance, and fit.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>For projects</span>
|
||||
<p>Flexible enough for bespoke deployments, migrations, and edge-focused solutions.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="services">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Services</p>
|
||||
<h2>Three service pillars, one consistent operating mindset.</h2>
|
||||
<p>
|
||||
The first version of the site should make the offer easy to understand at a glance.
|
||||
This layout keeps the positioning clear while leaving room to deepen each service page later.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<article class="service-card reveal">
|
||||
<span class="card-index">01</span>
|
||||
<h3>ISP</h3>
|
||||
<p>
|
||||
Business internet, routed connectivity, and infrastructure built for organisations
|
||||
that need more than a generic off-the-shelf link.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Dedicated access</li>
|
||||
<li>Static addressing</li>
|
||||
<li>Custom network design</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<span class="card-index">02</span>
|
||||
<h3>MSP</h3>
|
||||
<p>
|
||||
Managed network services for teams that want stronger visibility, better change
|
||||
control, and a partner that can operate close to the infrastructure.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Managed edge and routing</li>
|
||||
<li>Operational support</li>
|
||||
<li>Network evolution planning</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<span class="card-index">03</span>
|
||||
<h3>Transit</h3>
|
||||
<p>
|
||||
Transit and interconnect positioning for carriers, platforms, and demanding environments
|
||||
that care about path quality, flexibility, and engineering credibility.
|
||||
</p>
|
||||
<ul>
|
||||
<li>IP transit</li>
|
||||
<li>Peering and interconnect</li>
|
||||
<li>Scalable routing posture</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-split" id="approach">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Approach</p>
|
||||
<h2>Designed to feel modern, direct, and technically credible.</h2>
|
||||
</div>
|
||||
<div class="split-panel reveal">
|
||||
<div class="approach-list">
|
||||
<article>
|
||||
<h3>Agile by default</h3>
|
||||
<p>
|
||||
The tone and structure lean into speed, clarity, and practical execution rather than
|
||||
generic telecom language.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Engineering-led presentation</h3>
|
||||
<p>
|
||||
Visual direction is based on the geometry and colour depth of your logo, helping the
|
||||
brand feel network-native without looking dated.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Launch small, scale cleanly</h3>
|
||||
<p>
|
||||
This base site is intentionally static and fast so you can get online quickly, then add
|
||||
service detail, portals, status pages, and forms as the company grows.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="approach-panel">
|
||||
<div class="approach-graphic">
|
||||
<span class="pulse pulse-one"></span>
|
||||
<span class="pulse pulse-two"></span>
|
||||
<span class="pulse pulse-three"></span>
|
||||
<div class="approach-core">
|
||||
<strong>Novarix</strong>
|
||||
<span>Networks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="infrastructure">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Deployment</p>
|
||||
<h2>Built to drop straight into your Proxmox and NPM workflow.</h2>
|
||||
</div>
|
||||
<div class="deployment-grid">
|
||||
<article class="deployment-card reveal">
|
||||
<h3>1. Host the site privately</h3>
|
||||
<p>
|
||||
Run Nginx on a private VM or container in Proxmox and serve this static site locally on your LAN.
|
||||
</p>
|
||||
</article>
|
||||
<article class="deployment-card reveal">
|
||||
<h3>2. Publish through NPM</h3>
|
||||
<p>
|
||||
Add a proxy host in Nginx Proxy Manager pointing the public domain to the private web server.
|
||||
</p>
|
||||
</article>
|
||||
<article class="deployment-card reveal">
|
||||
<h3>3. Add SSL and redirects</h3>
|
||||
<p>
|
||||
Let NPM issue the certificate, force HTTPS, and redirect every secondary domain to the canonical one.
|
||||
</p>
|
||||
</article>
|
||||
<article class="deployment-card reveal">
|
||||
<h3>4. Expand later</h3>
|
||||
<p>
|
||||
Keep the website separate from future customer portals, looking glass tools, monitoring pages, or APIs.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section cta-section reveal" id="contact">
|
||||
<div class="cta-panel">
|
||||
<div>
|
||||
<p class="eyebrow">Next step</p>
|
||||
<h2>Launch the brand, then sharpen the details.</h2>
|
||||
<p>
|
||||
This base design is ready for real content, domain decisions, and production hosting.
|
||||
Once you choose your final contact route, we can wire in live enquiry handling, deeper service pages,
|
||||
and any customer-facing systems you want to expose later.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cta-actions">
|
||||
<a class="button button-primary" href="mailto:contact@novarixnet.com">Use placeholder contact</a>
|
||||
<a class="button button-secondary" href="/assets/logo/novarix_networks-coloured.svg">View brand asset</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<img src="/assets/logo/novarix_networks-white.svg" alt="Novarix Networks" />
|
||||
<p>Agile connectivity, managed services, and transit positioning for modern networks.</p>
|
||||
<small>Base website concept prepared for private hosting behind Nginx Proxy Manager.</small>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
const header = document.querySelector(".site-header");
|
||||
const navToggle = document.querySelector(".nav-toggle");
|
||||
const navLinks = document.querySelectorAll(".site-nav a");
|
||||
const reveals = document.querySelectorAll(".reveal");
|
||||
|
||||
if (navToggle && header) {
|
||||
navToggle.addEventListener("click", () => {
|
||||
const isOpen = header.classList.toggle("nav-open");
|
||||
navToggle.setAttribute("aria-expanded", String(isOpen));
|
||||
});
|
||||
}
|
||||
|
||||
navLinks.forEach((link) => {
|
||||
link.addEventListener("click", () => {
|
||||
header?.classList.remove("nav-open");
|
||||
navToggle?.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!entry.isIntersecting) {
|
||||
return;
|
||||
}
|
||||
|
||||
entry.target.classList.add("is-visible");
|
||||
observer.unobserve(entry.target);
|
||||
});
|
||||
},
|
||||
{
|
||||
threshold: 0.18,
|
||||
},
|
||||
);
|
||||
|
||||
reveals.forEach((element) => observer.observe(element));
|
||||
@@ -0,0 +1,649 @@
|
||||
:root {
|
||||
--bg: #04111f;
|
||||
--bg-elevated: rgba(7, 30, 48, 0.72);
|
||||
--bg-soft: rgba(10, 51, 79, 0.5);
|
||||
--surface: rgba(255, 255, 255, 0.05);
|
||||
--surface-strong: rgba(255, 255, 255, 0.08);
|
||||
--surface-border: rgba(146, 213, 255, 0.16);
|
||||
--text: #f4fbff;
|
||||
--text-muted: #9cc2d9;
|
||||
--brand-cyan: #3ad1da;
|
||||
--brand-teal: #1f88a6;
|
||||
--brand-blue: #29679d;
|
||||
--brand-deep: #0f3657;
|
||||
--glow: rgba(58, 209, 218, 0.38);
|
||||
--shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
|
||||
--radius-lg: 30px;
|
||||
--radius-md: 20px;
|
||||
--radius-sm: 14px;
|
||||
--content-width: 1200px;
|
||||
--font-stack: "Segoe UI", "Avenir Next", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
font-family: var(--font-stack);
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(58, 209, 218, 0.18), transparent 30%),
|
||||
radial-gradient(circle at 85% 15%, rgba(41, 103, 157, 0.25), transparent 22%),
|
||||
linear-gradient(180deg, #04111f 0%, #061829 45%, #04111f 100%);
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 64px 64px;
|
||||
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 85%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.site-shell {
|
||||
width: min(calc(100% - 32px), var(--content-width));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-top: 18px;
|
||||
padding: 18px 22px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 999px;
|
||||
background: rgba(4, 17, 31, 0.72);
|
||||
backdrop-filter: blur(18px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.brand {
|
||||
width: clamp(180px, 18vw, 240px);
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.site-nav a {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.site-nav a:hover,
|
||||
.site-nav a:focus-visible {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-toggle span {
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 2px;
|
||||
margin: 6px 0;
|
||||
border-radius: 999px;
|
||||
background: var(--text);
|
||||
transition: transform 180ms ease, opacity 180ms ease;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
|
||||
gap: 48px;
|
||||
align-items: center;
|
||||
padding: 72px 0 40px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 14px;
|
||||
color: var(--brand-cyan);
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero h1,
|
||||
.section-heading h2,
|
||||
.cta-panel h2 {
|
||||
margin: 0;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
max-width: 12ch;
|
||||
font-size: clamp(3.4rem, 7vw, 6.4rem);
|
||||
}
|
||||
|
||||
.hero-text,
|
||||
.section-heading p,
|
||||
.service-card p,
|
||||
.approach-list p,
|
||||
.deployment-card p,
|
||||
.cta-panel p,
|
||||
.site-footer p,
|
||||
.site-footer small {
|
||||
color: var(--text-muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
max-width: 60ch;
|
||||
margin: 22px 0 0;
|
||||
font-size: 1.06rem;
|
||||
}
|
||||
|
||||
.hero-actions,
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 52px;
|
||||
padding: 0 22px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
font-weight: 600;
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
border-color 180ms ease,
|
||||
background 180ms ease;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
.button:focus-visible {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
color: #04111f;
|
||||
background: linear-gradient(135deg, var(--brand-cyan), #8befff);
|
||||
box-shadow: 0 18px 44px rgba(58, 209, 218, 0.32);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
border-color: var(--surface-border);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.hero-points {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
padding: 0;
|
||||
margin: 28px 0 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hero-points li,
|
||||
.service-card,
|
||||
.deployment-card,
|
||||
.proof-strip,
|
||||
.split-panel,
|
||||
.cta-panel {
|
||||
border: 1px solid var(--surface-border);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.hero-points li {
|
||||
padding: 16px 18px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-orbit {
|
||||
position: relative;
|
||||
min-height: 640px;
|
||||
padding: 48px;
|
||||
border-radius: 44px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, rgba(58, 209, 218, 0.22), transparent 24%),
|
||||
radial-gradient(circle at 70% 25%, rgba(41, 103, 157, 0.24), transparent 24%),
|
||||
linear-gradient(180deg, rgba(12, 36, 55, 0.92), rgba(6, 18, 30, 0.84));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.signal-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
|
||||
background-size: 54px 54px;
|
||||
mask-image: radial-gradient(circle at center, black 52%, transparent 100%);
|
||||
}
|
||||
|
||||
.animated-mark {
|
||||
position: absolute;
|
||||
inset: 50% auto auto 50%;
|
||||
width: min(108%, 720px);
|
||||
transform: translate(-48%, -48%);
|
||||
filter: drop-shadow(0 0 36px rgba(58, 209, 218, 0.18));
|
||||
}
|
||||
|
||||
.status-card {
|
||||
position: absolute;
|
||||
width: min(280px, calc(100% - 48px));
|
||||
padding: 18px 18px 20px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(4, 17, 31, 0.74);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.status-card-left {
|
||||
left: 24px;
|
||||
bottom: 24px;
|
||||
}
|
||||
|
||||
.status-card-right {
|
||||
right: 24px;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.status-kicker,
|
||||
.card-index {
|
||||
display: inline-flex;
|
||||
margin-bottom: 10px;
|
||||
color: var(--brand-cyan);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-card strong,
|
||||
.service-card h3,
|
||||
.approach-list h3,
|
||||
.deployment-card h3 {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.status-card p {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.proof-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
padding: 26px 28px;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.proof-strip span {
|
||||
display: inline-flex;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proof-strip p {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 110px 0 0;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.cta-panel h2 {
|
||||
font-size: clamp(2.2rem, 4vw, 4.1rem);
|
||||
}
|
||||
|
||||
.section-heading p {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.card-grid,
|
||||
.deployment-grid {
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.deployment-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.service-card,
|
||||
.deployment-card {
|
||||
padding: 28px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.service-card ul {
|
||||
padding-left: 18px;
|
||||
margin: 18px 0 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.section-split .split-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
|
||||
gap: 22px;
|
||||
margin-top: 32px;
|
||||
padding: 28px;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.approach-list {
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.approach-list article {
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.approach-list article:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.approach-panel {
|
||||
min-height: 400px;
|
||||
border-radius: 28px;
|
||||
background:
|
||||
radial-gradient(circle at center, rgba(58, 209, 218, 0.22), transparent 38%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.approach-graphic {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.approach-core {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(4, 17, 31, 0.84);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
box-shadow: 0 0 44px rgba(58, 209, 218, 0.24);
|
||||
}
|
||||
|
||||
.approach-core strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.approach-core span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
position: absolute;
|
||||
border: 1px solid rgba(58, 209, 218, 0.18);
|
||||
border-radius: 50%;
|
||||
animation: pulse 4.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pulse-one {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.pulse-two {
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.pulse-three {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
animation-delay: 1.6s;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
padding-bottom: 110px;
|
||||
}
|
||||
|
||||
.cta-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
align-items: end;
|
||||
padding: 34px;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.cta-panel p {
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 0 0 54px;
|
||||
}
|
||||
|
||||
.site-footer img {
|
||||
width: clamp(180px, 18vw, 240px);
|
||||
}
|
||||
|
||||
.site-footer p,
|
||||
.site-footer small {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(22px);
|
||||
transition:
|
||||
opacity 600ms ease,
|
||||
transform 600ms ease;
|
||||
}
|
||||
|
||||
.reveal.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0.96);
|
||||
opacity: 0.32;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.03);
|
||||
opacity: 0.82;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.hero,
|
||||
.section-split .split-panel,
|
||||
.cta-panel {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: 48px;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.deployment-grid,
|
||||
.proof-strip,
|
||||
.hero-points {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.site-shell {
|
||||
width: min(calc(100% - 20px), var(--content-width));
|
||||
}
|
||||
|
||||
.site-header {
|
||||
align-items: flex-start;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
padding: 10px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(4, 17, 31, 0.94);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.site-nav a {
|
||||
padding: 14px 12px;
|
||||
}
|
||||
|
||||
.site-header.nav-open .site-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.site-header.nav-open .nav-toggle span:first-child {
|
||||
transform: translateY(8px) rotate(45deg);
|
||||
}
|
||||
|
||||
.site-header.nav-open .nav-toggle span:last-child {
|
||||
transform: translateY(-8px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.hero-orbit {
|
||||
min-height: 520px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.animated-mark {
|
||||
width: 132%;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
position: relative;
|
||||
left: auto;
|
||||
right: auto;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
margin-top: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.deployment-grid,
|
||||
.proof-strip,
|
||||
.hero-points {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cta-panel {
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.hero h1 {
|
||||
max-width: 100%;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.cta-panel h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-orbit {
|
||||
min-height: 460px;
|
||||
}
|
||||
|
||||
.service-card,
|
||||
.deployment-card,
|
||||
.cta-panel,
|
||||
.section-split .split-panel {
|
||||
padding: 22px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user