From ce8672e2833cec60b4f1e70e19fdad78d0adfb63 Mon Sep 17 00:00:00 2001 From: Kismet Hasanaj Date: Sat, 2 May 2026 19:48:50 +0200 Subject: [PATCH] tailwind v4 update --- EDITING.md | 89 ++++++ README.md | 226 +++++++++----- deploy.sh | 12 + ops/nginx/novarixnet.com.conf.example | 2 +- package.json | 15 + public/index.html | 434 ++++++++++++-------------- src/styles.css | 278 +++++++++++++++++ 7 files changed, 734 insertions(+), 322 deletions(-) create mode 100644 EDITING.md create mode 100755 deploy.sh create mode 100644 package.json create mode 100644 src/styles.css diff --git a/EDITING.md b/EDITING.md new file mode 100644 index 0000000..d579c0d --- /dev/null +++ b/EDITING.md @@ -0,0 +1,89 @@ +# Editing The Website + +This site is designed so most updates happen in one file: + +- `public/index.html` + +The design system lives separately in: + +- `src/styles.css` + +The generated stylesheet served by Nginx is: + +- `public/styles.css` + +## Common Updates + +### Change The Main Headline + +Open `public/index.html` and find: + +```html +

Novarix Networks

+``` + +Keep this short. The supporting paragraph underneath should explain the offer. + +### Change The Services + +Open `public/index.html` and find: + +```html +
+``` + +Each service is an `
`. + +You can safely edit: + +- the `

` title +- the `

` description +- the bullet points inside `

  • ` + +### Change Contact Details + +Open `public/index.html` and search for: + +```html +contact@novarixnet.com +``` + +Replace it with the real public inbox when ready. + +## When To Run The Tailwind Build + +If you only change words in `public/index.html`, the deploy script will still rebuild CSS for you. + +On the server, run: + +```bash +cd /var/www/novarixnet.com +./deploy.sh +``` + +That pulls the newest code, rebuilds Tailwind, tests Nginx and reloads the site. + +## Local Preview + +Install dependencies: + +```bash +npm install --no-package-lock +``` + +Build the CSS: + +```bash +npm run build +``` + +Preview the `public/` folder with any static server you prefer. + +## Server Update + +On the Nginx VM: + +```bash +cd /var/www/novarixnet.com +./deploy.sh +``` diff --git a/README.md b/README.md index b97d739..8f44081 100644 --- a/README.md +++ b/README.md @@ -1,115 +1,173 @@ # Novarix Networks Website -Static marketing site for `Novarix Networks`, prepared for this deployment model: +Static Tailwind CSS website for `Novarix Networks`. -- `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 +The site is designed for this workflow: + +- edit locally +- push changes to your internal `Gitea` repo +- run one deploy command on the Ubuntu Nginx VM +- serve the site from `/var/www/novarixnet.com/public` +- expose it publicly through `Nginx Proxy Manager` ## 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 +- `public/index.html` main website content +- `public/styles.css` generated CSS served by Nginx after `npm run build` +- `public/script.js` small navigation and reveal animation script +- `public/assets/` logo and favicon assets +- `src/styles.css` Tailwind source file +- `EDITING.md` simple guide for changing content +- `deploy.sh` server-side update script +- `ops/nginx/novarixnet.com.conf.example` example Nginx config -## Current Recommended Architecture +## Important Tailwind Note -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: +This project uses the current Tailwind CSS v4 CLI setup: ```bash -git clone /opt/novarix-website +npm install tailwindcss @tailwindcss/cli ``` -Deploy updated files: +Tailwind builds `src/styles.css` into this generated file: -```bash -sudo mkdir -p /var/www/novarixnet.com -sudo rsync -av --delete /opt/novarix-website/public/ /var/www/novarixnet.com/ +```text +public/styles.css ``` -Reload Nginx: +Nginx serves the compiled `public/styles.css` file. It does not understand Tailwind directly, so the build step must run after the repo is pulled. + +## Ubuntu 24.04 Nginx Server Setup + +Install Nginx and Git: ```bash +sudo apt update +sudo apt install -y nginx git +sudo systemctl enable nginx +sudo systemctl start nginx +``` + +Install Node.js 20 or newer. NodeSource currently supports Ubuntu 24.04 with Node 22, which is a good choice for this server: + +```bash +sudo apt install -y curl +curl -fsSL https://deb.nodesource.com/setup_22.x -o nodesource_setup.sh +sudo -E bash nodesource_setup.sh +sudo apt install -y nodejs +``` + +After installing, confirm: + +```bash +node --version +npm --version +``` + +Create the web directory and make your normal sudo user the owner: + +```bash +sudo mkdir -p /var/www +sudo chown -R $USER:$USER /var/www +``` + +Clone the Gitea repo: + +```bash +git clone http://10.10.10.11:3000/kismet.hasanaj/novarix-networks-homepage.git /var/www/novarixnet.com +``` + +Install the website dependencies and build the CSS: + +```bash +cd /var/www/novarixnet.com +npm install --no-package-lock +npm run build +``` + +Use the Nginx config in: + +```text +ops/nginx/novarixnet.com.conf.example +``` + +The important Nginx root is: + +```nginx +root /var/www/novarixnet.com/public; +``` + +Enable the site: + +```bash +sudo ln -s /etc/nginx/sites-available/novarixnet.com /etc/nginx/sites-enabled/ +sudo rm -f /etc/nginx/sites-enabled/default +sudo nginx -t sudo systemctl reload nginx ``` -## Nginx Proxy Manager Flow +## Updating The Live Website -- 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 +After pushing changes to Gitea from your local machine, SSH into the Nginx VM and run: -## Canonical Domain Suggestion +```bash +cd /var/www/novarixnet.com +./deploy.sh +``` -Your strongest current options are: +The deploy script does this: -- `novarixnet.com` for broad and international branding -- `novarix.co.uk` for a stronger UK-local trust signal +```bash +git pull origin main +npm install --no-package-lock +npm run build +sudo nginx -t +sudo systemctl reload nginx +``` -Pick one as the canonical domain and redirect the others to it. +If the script is not executable yet, run this once: -## Notes For This Site +```bash +chmod +x /var/www/novarixnet.com/deploy.sh +``` -- 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 +## Editing The Site -## Included Nginx Example +For simple content changes, edit: -Use the example config here as a starting point: +```text +public/index.html +``` -- `ops/nginx/novarixnet.com.conf.example` +For visual styling changes, edit: -Review the domain names, root path, and cache rules before using it in production. +```text +src/styles.css +``` + +The quick editing guide is: + +```text +EDITING.md +``` + +## Nginx Proxy Manager + +Create a proxy host: + +- Domain: `novarixnet.com` +- Scheme: `http` +- Forward hostname/IP: private IP of the Ubuntu Nginx VM +- Forward port: `80` +- SSL: request certificate and force SSL +- Enable `Block Common Exploits` + +## Canonical Domain + +Recommended primary domain: + +```text +novarixnet.com +``` + +Redirect the other Novarix domains to the primary domain once DNS and Nginx Proxy Manager are ready. diff --git a/deploy.sh b/deploy.sh new file mode 100755 index 0000000..6ecf3be --- /dev/null +++ b/deploy.sh @@ -0,0 +1,12 @@ +#!/usr/bin/env bash +set -e + +cd /var/www/novarixnet.com + +git pull origin main +npm install --no-package-lock +npm run build +sudo nginx -t +sudo systemctl reload nginx + +echo "Novarix Networks website deployed." diff --git a/ops/nginx/novarixnet.com.conf.example b/ops/nginx/novarixnet.com.conf.example index fbabf85..b2f9f60 100644 --- a/ops/nginx/novarixnet.com.conf.example +++ b/ops/nginx/novarixnet.com.conf.example @@ -2,7 +2,7 @@ server { listen 80; server_name novarixnet.com www.novarixnet.com; - root /var/www/novarixnet.com; + root /var/www/novarixnet.com/public; index index.html; location / { diff --git a/package.json b/package.json new file mode 100644 index 0000000..e1d73c6 --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "novarix-networks-homepage", + "version": "1.0.0", + "private": true, + "description": "Static Tailwind CSS website for Novarix Networks.", + "scripts": { + "build": "tailwindcss -i ./src/styles.css -o ./public/styles.css --minify", + "watch": "tailwindcss -i ./src/styles.css -o ./public/styles.css --watch", + "serve": "npx serve public" + }, + "devDependencies": { + "@tailwindcss/cli": "latest", + "tailwindcss": "latest" + } +} diff --git a/public/index.html b/public/index.html index 0c52e5e..6819253 100644 --- a/public/index.html +++ b/public/index.html @@ -3,255 +3,215 @@ - Novarix Networks | Agile Connectivity, Managed Services, and Transit + Novarix Networks | ISP, MSP and Transit Provider - + -
    -
    - - Novarix Networks - - - -
    - -
    -
    -
    -

    Connectivity without the drag

    -

    Network infrastructure built to move as fast as the environment around it.

    -

    - 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. -

    -
    - Start the conversation - Explore services -
    -
      -
    • Business connectivity and routed access
      • -
    • Managed network and edge services
      • -
    • Transit, interconnect, and custom builds
      • -
    -
    - -
    -
    -
    - Animated Novarix Networks logo -
    - Positioning - ISP / MSP / Transit -

    Built for flexible projects, modern routing, and growth-ready delivery.

    -
    -
    - Operating model - Lean, technical, responsive -

    A brand direction designed to feel more engineering-led than corporate.

    -
    -
    -
    -
    - -
    -
    - For businesses -

    Connectivity and managed networking designed around uptime, reach, and clarity.

    -
    -
    - For operators -

    Transit and interconnect conversations grounded in routing, performance, and fit.

    -
    -
    - For projects -

    Flexible enough for bespoke deployments, migrations, and edge-focused solutions.

    -
    -
    - -
    -
    -

    Services

    -

    Three service pillars, one consistent operating mindset.

    -

    - 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. -

    -
    -
    -
    - 01 -

    ISP

    -

    - Business internet, routed connectivity, and infrastructure built for organisations - that need more than a generic off-the-shelf link. -

    -
      -
    • Dedicated access
      • -
    • Static addressing
      • -
    • Custom network design
      • -
    -
    -
    - 02 -

    MSP

    -

    - Managed network services for teams that want stronger visibility, better change - control, and a partner that can operate close to the infrastructure. -

    -
      -
    • Managed edge and routing
      • -
    • Operational support
      • -
    • Network evolution planning
      • -
    -
    -
    - 03 -

    Transit

    -

    - Transit and interconnect positioning for carriers, platforms, and demanding environments - that care about path quality, flexibility, and engineering credibility. -

    -
      -
    • IP transit
      • -
    • Peering and interconnect
      • -
    • Scalable routing posture
      • -
    -
    -
    -
    - -
    -
    -

    Approach

    -

    Designed to feel modern, direct, and technically credible.

    -
    -
    -
    -
    -

    Agile by default

    -

    - The tone and structure lean into speed, clarity, and practical execution rather than - generic telecom language. -

    -
    -
    -

    Engineering-led presentation

    -

    - Visual direction is based on the geometry and colour depth of your logo, helping the - brand feel network-native without looking dated. -

    -
    -
    -

    Launch small, scale cleanly

    -

    - 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. -

    -
    -
    -
    -
    - - - -
    - Novarix - Networks -
    -
    -
    -
    -
    - -
    -
    -

    Deployment

    -

    Built to drop straight into your Proxmox and NPM workflow.

    -
    -
    -
    -

    1. Host the site privately

    -

    - Run Nginx on a private VM or container in Proxmox and serve this static site locally on your LAN. -

    -
    -
    -

    2. Publish through NPM

    -

    - Add a proxy host in Nginx Proxy Manager pointing the public domain to the private web server. -

    -
    -
    -

    3. Add SSL and redirects

    -

    - Let NPM issue the certificate, force HTTPS, and redirect every secondary domain to the canonical one. -

    -
    -
    -

    4. Expand later

    -

    - Keep the website separate from future customer portals, looking glass tools, monitoring pages, or APIs. -

    -
    -
    -
    - -
    -
    -
    -

    Next step

    -

    Launch the brand, then sharpen the details.

    -

    - 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. -

    -
    -
    - Use placeholder contact - View brand asset -
    -
    -
    -
    - - -
    + + + + + +
    + +
    + +
    +

    Independent network operator in buildout

    +

    Novarix Networks

    +

    + Agile ISP, MSP and transit services for businesses, operators and projects that need + networking handled with pace, clarity and engineering discipline. +

    +
    + Discuss connectivity + View services +
    +
    +
    +
    + Focus + ISP / MSP / Transit +
    +
    + Built for + Fast-moving network requirements +
    +
    + Primary domain + novarixnet.com +
    +
    +
    + +
    +

    + Novarix Networks is being built for organisations that want a networking partner with a + direct technical conversation, a practical operating model and the flexibility to shape + connectivity around the real environment. +

    +
    + + +
    +
    +

    Services

    +

    Connectivity, managed networking and transit under one engineering-led brand.

    +
    +
    +
    + 01 +

    Business Connectivity

    +

    + Internet access and routed connectivity for businesses that need static addressing, + clear support routes and a provider able to work close to the network. +

    +
      +
    • Business internet access
      • +
    • Static IP addressing
      • +
    • Custom routed handoff options
      • +
    +
    +
    + 02 +

    Managed Network Services

    +

    + Managed edge, routing and operational support for teams that want reliable network + ownership without carrying every change, incident and upgrade alone. +

    +
      +
    • Managed edge infrastructure
      • +
    • Change and migration support
      • +
    • Network health and visibility
      • +
    +
    +
    + 03 +

    Transit and Interconnect

    +

    + Transit-focused services for operators, platforms and technical environments that care + about routing posture, interconnection options and scalable delivery. +

    +
      +
    • IP transit planning
      • +
    • Peering and interconnect readiness
      • +
    • Carrier and operator engagement
      • +
    +
    +
    +
    + +
    +
    +

    Operating model

    +

    Built to stay sharp as networking conditions change.

    +

    + The Novarix site should feel like the company it represents: direct, technically capable + and quick to adapt. The layout keeps the offer visible while leaving room for future pages + such as looking glass tools, network status, peering policy and customer portals. +

    +
    +
    +
    + 01 +
    +

    Lean delivery

    +

    Shorter paths from requirement to answer, with practical engineering at the centre.

    +
    +
    +
    + 02 +
    +

    Clear ownership

    +

    Service boundaries, routing decisions and support expectations explained plainly.

    +
    +
    +
    + 03 +
    +

    Room to grow

    +

    A static marketing site today, with clean paths for portals and network tools later.

    +
    +
    +
    +
    + +
    +
    +

    Who it serves

    +

    A clearer first impression for the customers you want to attract.

    +
    +
    +
    +

    Businesses

    +

    Connectivity that can be discussed with someone who understands the technical detail.

    +
    +
    +

    IT teams

    +

    Managed network support for teams that need capacity without losing visibility.

    +
    +
    +

    Operators

    +

    Transit and interconnect conversations that start from routing reality, not sales theatre.

    +
    +
    +

    Projects

    +

    Bespoke networking support for migrations, edge deployments and unusual requirements.

    +
    +
    +
    + + +
    +
    +

    Start here

    +

    Bring us the network problem. We will help shape the route forward.

    +

    + This contact point is ready to be replaced with your production inbox, quote form or CRM + endpoint when you decide how you want enquiries handled. +

    +
    +
    + contact@novarixnet.com + novarixnet.com +
    +
    +
    + +
    + Novarix Networks +

    ISP, MSP and transit services for modern network environments.

    +
    diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..88087dc --- /dev/null +++ b/src/styles.css @@ -0,0 +1,278 @@ +@import "tailwindcss"; + +@source "../public"; + +@theme { + --font-sans: "Aptos", "Satoshi", "Space Grotesk", ui-sans-serif, system-ui, sans-serif; + --color-ink: #071014; + --color-graphite: #11181d; + --color-panel: #f5f8f8; + --color-line: #d9e5e5; + --color-cyan: #38d1d4; + --color-teal: #147d89; + --color-blueprint: #205c8c; + --color-lime: #c8f05a; +} + +@layer base { + html { + scroll-behavior: smooth; + } + + body { + @apply m-0 min-w-80 bg-panel font-sans text-ink antialiased; + } + + img { + @apply block max-w-full; + } + + a { + @apply text-inherit no-underline; + } +} + +@layer components { + .site-header { + @apply fixed left-1/2 top-4 z-50 flex w-[calc(100%_-_1rem)] max-w-[74rem] -translate-x-1/2 items-center justify-between gap-4 border border-white/10 bg-ink/86 px-4 py-3 text-white shadow-2xl shadow-ink/25 backdrop-blur-xl md:top-6 md:w-[calc(100%_-_3rem)] md:px-5; + } + + .brand-link { + @apply w-48 shrink-0 md:w-60; + } + + .site-nav { + @apply hidden items-center gap-7 text-sm font-medium text-white/72 md:flex; + } + + .site-nav a { + @apply transition hover:text-white focus-visible:text-white focus-visible:outline-none; + } + + .nav-toggle { + @apply grid h-11 w-11 place-items-center border border-white/12 bg-white/8 md:hidden; + } + + .nav-toggle span { + @apply block h-0.5 w-5 bg-white transition; + } + + .nav-toggle span + span { + @apply mt-1.5; + } + + .site-header.nav-open .site-nav { + @apply absolute left-0 right-0 top-[calc(100%+0.5rem)] flex flex-col items-stretch gap-0 border border-white/10 bg-ink p-2 text-white shadow-xl md:static md:flex-row md:items-center md:gap-7 md:border-0 md:bg-transparent md:p-0 md:shadow-none; + } + + .site-header.nav-open .site-nav a { + @apply px-3 py-3; + } + + .site-header.nav-open .nav-toggle span:first-child { + @apply translate-y-1 rotate-45; + } + + .site-header.nav-open .nav-toggle span:last-child { + @apply -translate-y-1 -rotate-45; + } + + .hero-section { + @apply relative grid min-h-[92svh] overflow-hidden bg-ink px-4 pb-10 pt-28 text-white md:px-8 md:pb-12 md:pt-32; + } + + .hero-section::before { + content: ""; + @apply absolute inset-0 opacity-50; + background-image: + linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); + background-size: 42px 42px; + mask-image: linear-gradient(180deg, transparent, black 20%, black 78%, transparent); + } + + .hero-section::after { + content: ""; + @apply absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-panel to-transparent; + } + + .hero-bg { + @apply pointer-events-none absolute inset-0 overflow-hidden; + } + + .hero-bg img { + @apply absolute left-1/2 top-1/2 w-[74rem] max-w-none -translate-x-1/2 -translate-y-1/2 opacity-20 blur-[1px] saturate-150; + } + + .hero-content { + @apply relative z-10 mx-auto grid w-full max-w-6xl content-center; + } + + .eyebrow { + @apply mb-4 text-xs font-bold uppercase text-cyan; + } + + .hero-content h1 { + @apply max-w-5xl text-6xl font-black leading-[0.9] text-white text-shadow-lg/35 md:text-8xl lg:text-9xl; + } + + .hero-lede { + @apply mt-7 max-w-3xl text-lg leading-8 text-white/76 md:text-xl; + } + + .hero-actions, + .contact-actions { + @apply mt-8 flex flex-wrap gap-3; + } + + .button-primary, + .button-secondary { + @apply inline-flex min-h-12 items-center justify-center px-5 text-sm font-bold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan; + } + + .button-primary { + @apply bg-lime text-ink shadow-lg shadow-lime/20 hover:-translate-y-0.5; + } + + .button-secondary { + @apply border border-current bg-transparent text-current hover:-translate-y-0.5 hover:bg-white/8; + } + + .hero-status { + @apply relative z-10 mx-auto mt-10 grid w-full max-w-6xl gap-px border border-white/12 bg-white/12 md:grid-cols-3; + } + + .hero-status div { + @apply bg-ink/70 p-5 backdrop-blur; + } + + .hero-status span { + @apply mb-2 block text-xs font-bold uppercase text-white/52; + } + + .hero-status strong { + @apply block text-lg text-white; + } + + .intro-band { + @apply mx-auto -mt-2 w-[calc(100%_-_2rem)] max-w-[74rem] border-x border-line bg-panel px-0 py-14 md:py-20; + } + + .intro-band p { + @apply max-w-5xl text-3xl font-semibold leading-tight md:text-5xl; + } + + .content-section { + @apply mx-auto w-[calc(100%_-_2rem)] max-w-[74rem] py-16 md:py-24; + } + + .section-heading { + @apply max-w-4xl; + } + + .section-heading h2, + .network-copy h2, + .contact-section h2 { + @apply text-4xl font-black leading-tight md:text-6xl; + } + + .service-grid { + @apply mt-10 grid gap-4 md:grid-cols-3; + } + + .service-card, + .customer-card { + @apply border border-line bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl hover:shadow-ink/8; + } + + .service-number { + @apply mb-12 block text-sm font-black text-teal; + } + + .service-card h3, + .customer-card h3, + .network-row h3 { + @apply text-2xl font-black leading-tight; + } + + .service-card p, + .customer-card p, + .network-copy p, + .network-row p, + .contact-section p { + @apply mt-4 leading-7 text-graphite/72; + } + + .service-card ul { + @apply mt-6 space-y-2 border-t border-line pt-5 text-sm font-semibold text-graphite/74; + } + + .service-card li { + @apply flex gap-2; + } + + .service-card li::before { + content: ""; + @apply mt-2 h-1.5 w-1.5 shrink-0 bg-cyan; + } + + .network-section { + @apply grid gap-0 bg-graphite text-white md:grid-cols-2; + } + + .network-copy { + @apply mx-auto w-full max-w-[37rem] px-4 py-16 md:ml-auto md:px-8 md:py-24; + } + + .network-copy p { + @apply text-white/70; + } + + .network-panel { + @apply grid border-t border-white/10 md:border-l md:border-t-0; + } + + .network-row { + @apply grid grid-cols-[4rem_1fr] gap-4 border-b border-white/10 px-4 py-10 md:px-8; + } + + .network-row span { + @apply text-sm font-black text-cyan; + } + + .network-row p { + @apply text-white/68; + } + + .customer-grid { + @apply mt-10 grid gap-4 md:grid-cols-2; + } + + .customer-card { + @apply min-h-48; + } + + .contact-section { + @apply mx-auto mb-8 grid w-[calc(100%_-_2rem)] max-w-[74rem] gap-8 bg-ink p-6 text-white md:grid-cols-[1fr_auto] md:p-10; + } + + .contact-section p { + @apply max-w-3xl text-white/72; + } + + .site-footer { + @apply mx-auto flex w-[calc(100%_-_2rem)] max-w-[74rem] flex-col gap-4 border-t border-line py-10 text-sm text-graphite/70 md:flex-row md:items-center md:justify-between; + } + + .site-footer img { + @apply w-52 invert; + } + + .reveal { + @apply translate-y-5 opacity-0 transition duration-700 ease-out; + } + + .reveal.is-visible { + @apply translate-y-0 opacity-100; + } +}