commit 0d3af334620a31e7ea20db8e857dd63f9b9e1af3 Author: null Date: Mon May 11 23:56:42 2026 -0500 v0.0.1: project initialization diff --git a/DEVELOPMENT_LOG.md b/DEVELOPMENT_LOG.md new file mode 100644 index 0000000..72a9734 --- /dev/null +++ b/DEVELOPMENT_LOG.md @@ -0,0 +1,8 @@ +# Queue-North-Website — Development Log + +## v0.0.1 — 2026-05-11 + +**Ripley** — Project initialized +- Created project directory at `/home/kaspa/.openclaw/Projects/Queue-North-Website/` +- Set up PROJECT.md, STRUCTURE.md, FUTURE.md, HISTORY.md, DEVELOPMENT_LOG.md +- Git repo not yet initialized (awaiting first code) \ No newline at end of file diff --git a/FUTURE.md b/FUTURE.md new file mode 100644 index 0000000..88fd046 --- /dev/null +++ b/FUTURE.md @@ -0,0 +1,8 @@ +# Queue-North-Website — Planning + +## Next Items +*Awaiting project requirements from _null.* + +--- + +*Add items here as they are defined. Priority levels: CRITICAL, HIGH, MEDIUM, LOW* \ No newline at end of file diff --git a/HISTORY.md b/HISTORY.md new file mode 100644 index 0000000..b47c87b --- /dev/null +++ b/HISTORY.md @@ -0,0 +1,6 @@ +# Queue-North-Website — Changelog + +## v0.0.1 + +### Added +- Project initialized with PROJECT.md, STRUCTURE.md, FUTURE.md, HISTORY.md, DEVELOPMENT_LOG.md \ No newline at end of file diff --git a/PROJECT.md b/PROJECT.md new file mode 100644 index 0000000..3b379ac --- /dev/null +++ b/PROJECT.md @@ -0,0 +1,23 @@ +# Queue North Website + +## Overview +Project: Queue-North-Website +Created: 2026-05-11 +Status: Active + +## Description +Website project for Queue North. Details TBD. + +## Directory Structure +- `/home/kaspa/.openclaw/Projects/Queue-North-Website/` — Project root +- All project files live here + +## Git +- **Branch:** `dev` (working), `main` (stable) +- **Remote:** `ssh://forgejo/null/Queue-North-Website.git` + +## Conventions +- Follow AGENTS.md for agent dispatch protocol +- Ripley coordinates, Neo codes, Scarlett styles, Bishop verifies, Hudson secures +- All agents read STRUCTURE.md before starting tasks +- Ripley owns git — no agent touches git directly \ No newline at end of file diff --git a/STRUCTURE.md b/STRUCTURE.md new file mode 100644 index 0000000..4a725a6 --- /dev/null +++ b/STRUCTURE.md @@ -0,0 +1,25 @@ +# Queue-North-Website — Project Structure + +## Agent Roles + +| Agent | Role | Focus Area | +|-------|------|------------| +| Neo | Backend Coder | Server code, APIs, database, build system | +| Scarlett | UI/Design | Frontend components, Tailwind CSS, layout, visuals | +| Bishop | Verification | Build, runtime tests, documentation, version bumps | +| Private_Hudson | Security | Auth, data exposure, input validation, dependency audit | +| Ripley | Coordinator | Git, deploy, pipeline, task dispatch | + +## Code Ownership +TBD — will be defined as the project takes shape. + +## Key Files +- `PROJECT.md` — Project overview and conventions +- `STRUCTURE.md` — This file. Agent roles, code ownership, critical paths +- `FUTURE.md` — Planning doc (what to build next) +- `HISTORY.md` — Version changelog +- `DEVELOPMENT_LOG.md` — Agent activity log + +## Cross-Cutting Concerns +- All agents must read this file before starting any task +- All agents report back to Ripley — no agent-to-agent handoffs \ No newline at end of file diff --git a/assets/8x8_Logo_White.svg b/assets/8x8_Logo_White.svg new file mode 100644 index 0000000..5688274 --- /dev/null +++ b/assets/8x8_Logo_White.svg @@ -0,0 +1,13 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/Cabling.png b/assets/Cabling.png new file mode 100644 index 0000000..0c11adc Binary files /dev/null and b/assets/Cabling.png differ diff --git a/assets/Consulting & Training.png b/assets/Consulting & Training.png new file mode 100644 index 0000000..8b62d8d Binary files /dev/null and b/assets/Consulting & Training.png differ diff --git a/assets/Financial Services.png b/assets/Financial Services.png new file mode 100644 index 0000000..58aff01 Binary files /dev/null and b/assets/Financial Services.png differ diff --git a/assets/Healthcare.png b/assets/Healthcare.png new file mode 100644 index 0000000..78af388 Binary files /dev/null and b/assets/Healthcare.png differ diff --git a/assets/JointLogoWhite.png b/assets/JointLogoWhite.png new file mode 100644 index 0000000..bc0629c Binary files /dev/null and b/assets/JointLogoWhite.png differ diff --git a/assets/Local Networking.png b/assets/Local Networking.png new file mode 100644 index 0000000..4da244c Binary files /dev/null and b/assets/Local Networking.png differ diff --git a/assets/Managed Support.png b/assets/Managed Support.png new file mode 100644 index 0000000..8f132fe Binary files /dev/null and b/assets/Managed Support.png differ diff --git a/assets/Manufacturing.png b/assets/Manufacturing.png new file mode 100644 index 0000000..625191b Binary files /dev/null and b/assets/Manufacturing.png differ diff --git a/assets/Modern call center in action.png b/assets/Modern call center in action.png new file mode 100644 index 0000000..e6d03dc Binary files /dev/null and b/assets/Modern call center in action.png differ diff --git a/assets/Retail.png b/assets/Retail.png new file mode 100644 index 0000000..bb3a9ed Binary files /dev/null and b/assets/Retail.png differ diff --git a/assets/Unified communications in a modern office.png b/assets/Unified communications in a modern office.png new file mode 100644 index 0000000..f0e3690 Binary files /dev/null and b/assets/Unified communications in a modern office.png differ diff --git a/assets/Wireless.png b/assets/Wireless.png new file mode 100644 index 0000000..1a55539 Binary files /dev/null and b/assets/Wireless.png differ diff --git a/assets/about-image.png b/assets/about-image.png new file mode 100644 index 0000000..c6e5b0b Binary files /dev/null and b/assets/about-image.png differ diff --git a/assets/contact.png b/assets/contact.png new file mode 100644 index 0000000..a63d78b Binary files /dev/null and b/assets/contact.png differ diff --git a/assets/hero-tech.png b/assets/hero-tech.png new file mode 100644 index 0000000..65fd32e Binary files /dev/null and b/assets/hero-tech.png differ diff --git a/assets/icons/logo128.png b/assets/icons/logo128.png new file mode 100644 index 0000000..e832c43 Binary files /dev/null and b/assets/icons/logo128.png differ diff --git a/assets/icons/logo16.png b/assets/icons/logo16.png new file mode 100644 index 0000000..825d809 Binary files /dev/null and b/assets/icons/logo16.png differ diff --git a/assets/icons/logo180.png b/assets/icons/logo180.png new file mode 100644 index 0000000..89098e6 Binary files /dev/null and b/assets/icons/logo180.png differ diff --git a/assets/icons/logo192.png b/assets/icons/logo192.png new file mode 100644 index 0000000..98fe7bb Binary files /dev/null and b/assets/icons/logo192.png differ diff --git a/assets/icons/logo256.png b/assets/icons/logo256.png new file mode 100644 index 0000000..8f0513c Binary files /dev/null and b/assets/icons/logo256.png differ diff --git a/assets/icons/logo32.png b/assets/icons/logo32.png new file mode 100644 index 0000000..5e7362b Binary files /dev/null and b/assets/icons/logo32.png differ diff --git a/assets/icons/logo48.png b/assets/icons/logo48.png new file mode 100644 index 0000000..2789bf6 Binary files /dev/null and b/assets/icons/logo48.png differ diff --git a/assets/icons/logo512.png b/assets/icons/logo512.png new file mode 100644 index 0000000..9028c1c Binary files /dev/null and b/assets/icons/logo512.png differ diff --git a/assets/icons/logo64.png b/assets/icons/logo64.png new file mode 100644 index 0000000..cf35d2b Binary files /dev/null and b/assets/icons/logo64.png differ diff --git a/assets/icons/logo96.png b/assets/icons/logo96.png new file mode 100644 index 0000000..b2a7948 Binary files /dev/null and b/assets/icons/logo96.png differ diff --git a/assets/logo.svg b/assets/logo.svg new file mode 100644 index 0000000..61e8dbf --- /dev/null +++ b/assets/logo.svg @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/assets/logo2.png b/assets/logo2.png new file mode 100644 index 0000000..61038a5 Binary files /dev/null and b/assets/logo2.png differ diff --git a/assets/old-logo.png b/assets/old-logo.png new file mode 100644 index 0000000..db8106d Binary files /dev/null and b/assets/old-logo.png differ diff --git a/assets/services-image.png b/assets/services-image.png new file mode 100644 index 0000000..6f137b0 Binary files /dev/null and b/assets/services-image.png differ diff --git a/assets/support.png b/assets/support.png new file mode 100644 index 0000000..341d83c Binary files /dev/null and b/assets/support.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8f64a46 --- /dev/null +++ b/index.html @@ -0,0 +1,768 @@ + + + + + Queue North Technologies + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+ +
+
+
+ +
+

UCaaS & Contact Center Experts

+

+ Queue North Technologies is an official 8x8 Certified Partner holding Sales, Sales Engineer, Build, Deployment, and Support Certifications. + We design, implement, and operate secure, scalable communication environments for SMB and enterprise organizations. +

+ +
+ +
+ +
+ Official 8x8 Certified Partner + Veteran Owned + 25+ Years Experience + SMB to Enterprise +
+
+ + +
+ Technician working in a data center + + + +
+ +
+
+ + +
+
+
+

End-to-End Ownership

+

Architecture, deployment, adoption, and long-term operational support — with documentation and accountability.

+
+
+

Operational Clarity

+

We align platform features to workflows, call flows, and real-world staffing — not marketing checklists.

+
+
+

Reliable Support

+

Consistent escalation management, change control, and an operator mindset that sticks after go-live.

+
+
+
+
+ + +
+
+
+

About Queue North Technologies

+

+ Veteran-owned communications and networking partner focused on reliable, future-ready systems. + We tell you the truth and align technology to operations — not licensing structures. +

+
+ +
+

What Sets Us Apart

+
    +
  • Trustworthy, straightforward guidance
    • +
  • Veteran-owned leadership and discipline
    • +
  • 25+ years in telecommunications and networking
    • +
  • Flexible service levels and support governance
    • +
  • Only pay for the features and services you actually need
    • +
+
+
+
+ + + +
+
+
+

Services

+

+ Modern communication, networking, and support services built around your operations today and your growth tomorrow +

+
+
+ +
+
+ + + Unified Communications +
+

Unified Communications

+

Voice, meetings, and messaging that keep your people connected without adding operational friction.

+
+ + + + Contact Center +
+

Contact Center

+

Customer engagement built with routing, reporting, and workflow control that support real operational performance.

+
+ + + + Managed Services and Support +
+

Managed Services & Support

+

Consistent support, clear accountability, and lifecycle management that keep your environment stable long after deployment.

+
+ + + + Consulting and Training +
+

Consulting & Training

+

Straightforward guidance and practical training that help your team use technology with confidence and discipline.

+
+ + + + Infrastructure Cabling +
+

Infrastructure Cabling

+

Clean structured cabling that gives your business the physical foundation for reliable communication and growth.

+
+ + + + Wireless Access +
+

Wireless Access

+

Business Wi‑Fi designed for usable coverage, dependable performance, and fewer support headaches across your environment.

+
+ + + + Local Networking +
+

Local Networking

+

Switching and routing built for stability, visibility, and secure local network performance.

+
+ + +
+
+
+ + +
+
+
+

Unified Communications

+ Unified Communications service +

Voice, meetings, and messaging that keep your people connected without adding operational friction.

+
+
+
+ +
+
+
+

Contact Center

+ Contact Center service +

Customer engagement built with routing, reporting, and workflow control that support real operational performance.

+
+
+
+ +
+
+
+

Managed Services & Support

+ Managed Services and Support service +

Consistent support, clear accountability, and lifecycle management that keep your environment stable long after deployment.

+
+
+
+ +
+
+
+

Consulting & Training

+ Consulting and Training service +

Straightforward guidance and practical training that help your team use technology with confidence and discipline.

+
+
+
+ +
+
+
+

Infrastructure Cabling

+ Infrastructure Cabling service +

Clean structured cabling that gives your business the physical foundation for reliable communication and growth.

+
+
+
+ +
+
+
+

Wireless Access

+ Wireless Access service +

Business Wi‑Fi designed for usable coverage, dependable performance, and fewer support headaches across your environment.

+
+
+
+ +
+
+
+

Local Networking

+ Local Networking service +

Switching and routing built for secure local performance, clean management, and the operational visibility your business needs.

+
+
+
+ + +
+
+
+
+

8x8 Certified Partner

+ +
    +
  • Solution design, licensing strategy, and platform fit
    • +
  • Deployment planning, number porting, and migrations
    • +
  • Configuration, routing, reporting, and operational governance
    • +
  • Post-deployment support, escalation, and change control
    • +
+
+ +
+
+ Queue North Technologies | 8x8 Certified Partner +
+ Queue North holds 8x8 Sales, Sales Engineer, Build, Deployment, and Support Certifications — enabling full lifecycle delivery. +
+
+
+
+
+ +
+
+
+

UCaaS

+

Voice, meetings, and messaging delivered with documentation, governance, and operational clarity.

+
+
+

Contact Center

+

Queue strategy, routing logic, reporting, and workforce workflows built for real performance visibility.

+
+
+

Lifecycle Support

+

We stay accountable after go-live — support structure, escalation, and change control that doesn’t fall apart.

+
+
+
+
+ + +
+
+
+
+

Industries We Serve

+

+ We focus on sectors where communication, reliability, and integration directly impact operations and customer experience. +

+
+
+
+ +
+
+ +
+ Healthcare +
+

Healthcare

+

Patient experience, scheduling, and staff coordination with a focus on compliance.

+
+
+ +
+ Retail +
+

Retail

+

Connect stores, back office, and support teams while improving customer interaction.

+
+
+ +
+ Manufacturing +
+

Manufacturing

+

Reliable office-to-plant communications including paging and alerting for production environments.

+
+
+ +
+ + Education & Finance +
+

Education & Finance

+

Campus communications and customer-facing communications in tightly regulated environments.

+
+
+ +
+
+
+ +
+
+
+

Healthcare

+ Healthcare industry +

Patient experience, scheduling, and staff coordination with a focus on compliance.

+
+
+
+ +
+
+
+

Retail

+ Retail industry +

Connect stores, back office, and support teams while improving customer interaction.

+
+
+
+ +
+
+
+

Manufacturing

+ Manufacturing industry +

Reliable office-to-plant communications including paging and alerting for production environments.

+
+
+
+ +
+
+
+

Education & Finance

+ Education and Finance industry +

Campus communications and customer-facing communications in tightly regulated environments.

+
+
+
+ + +
+
+
+
+

Contact Us

+

+ If your environment provides no insight or accountability — or support is slow and inconsistent — we can help. + Share a few details and we’ll provide clear direction. +

+
+
+ +
+ +
+
+
+

What we’ll help you do

+
    +
  • Identify the features you actually need
    • +
  • Align solutions with operations and budget
    • +
  • Plan deployment, migration, and training
    • +
  • Ask how you qualify for our free migration
    • +
+
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + +

+
+ + + + + + + +
+
+
+
+ + + +
+
+
+ +
+

Support

+

+ Need to sign up for the Queue North Support Center? Create an account to access our knowledge base and submit support tickets. +

+ +
+ Create Account + +

Already a member?

+ + Sign In + +
+ Or call our support team + (321) 730-8020 +
+
+
+ + +
+ Support agent assisting a customer +
+
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..66111a2 --- /dev/null +++ b/main.js @@ -0,0 +1,332 @@ +document.addEventListener("DOMContentLoaded", function () { + const pages = Array.from(document.querySelectorAll(".page")); + const navLinks = Array.from(document.querySelectorAll("[data-route]")); + const dropdowns = Array.from(document.querySelectorAll(".nav-dropdown")); + const siteNav = document.querySelector(".site-nav"); + const mobileNavToggle = document.querySelector(".mobile-nav-toggle"); + + function closeMobileNav() { + if (!siteNav || !mobileNavToggle) return; + siteNav.classList.remove("open"); + mobileNavToggle.setAttribute("aria-expanded", "false"); + } + + function openMobileNav() { + if (!siteNav || !mobileNavToggle) return; + siteNav.classList.add("open"); + mobileNavToggle.setAttribute("aria-expanded", "true"); + } + + function toggleMobileNav() { + if (!siteNav || !mobileNavToggle) return; + const willOpen = !siteNav.classList.contains("open"); + if (willOpen) { + openMobileNav(); + } else { + closeMobileNav(); + closeAllDropdowns(); + } + } + + + function closeAllDropdowns(exceptDropdown = null) { + if (mobileNavToggle) { + mobileNavToggle.addEventListener("click", (e) => { + e.preventDefault(); + toggleMobileNav(); + }); + } + + dropdowns.forEach((dropdown) => { + if (dropdown === exceptDropdown) return; + dropdown.classList.remove("open"); + const toggle = dropdown.querySelector(".nav-dropdown-toggle"); + if (toggle) { + toggle.setAttribute("aria-expanded", "false"); + } + }); + } + + function syncDropdownState() { + dropdowns.forEach((dropdown) => { + const toggle = dropdown.querySelector(".nav-dropdown-toggle"); + if (!toggle) return; + const expanded = dropdown.classList.contains("open") ? "true" : "false"; + toggle.setAttribute("aria-expanded", expanded); + }); + } + + dropdowns.forEach((dropdown) => { + const toggle = dropdown.querySelector(".nav-dropdown-toggle"); + const dropdownMenuLinks = Array.from(dropdown.querySelectorAll(".nav-dropdown-menu [data-route]")); + + if (!toggle) return; + + toggle.addEventListener("click", (e) => { + e.preventDefault(); + const parentRoute = toggle.dataset.route || "home"; + + if (window.innerWidth <= 900) { + closeAllDropdowns(); + window.location.hash = parentRoute === "eightx8" ? "8x8" : parentRoute; + setActive(parentRoute); + return; + } + + const willOpen = !dropdown.classList.contains("open"); + closeAllDropdowns(dropdown); + dropdown.classList.toggle("open", willOpen); + toggle.setAttribute("aria-expanded", willOpen ? "true" : "false"); + + if (willOpen) { + window.location.hash = parentRoute === "eightx8" ? "8x8" : parentRoute; + setActive(parentRoute); + } + }); + + dropdownMenuLinks.forEach((link) => { + link.addEventListener("click", () => { + closeAllDropdowns(); + + window.setTimeout(() => { + if (document.activeElement) { + document.activeElement.blur(); + } + }, 0); + }); + }); + }); + + document.addEventListener("click", (e) => { + const clickedInsideDropdown = dropdowns.some((dropdown) => dropdown.contains(e.target)); + const clickedInsideNav = siteNav ? siteNav.contains(e.target) : false; + const clickedMobileToggle = mobileNavToggle ? mobileNavToggle.contains(e.target) : false; + + if (!clickedInsideDropdown) { + closeAllDropdowns(); + } + + if (window.innerWidth <= 900 && !clickedInsideNav && !clickedMobileToggle) { + closeMobileNav(); + } + }); + + document.addEventListener("keydown", (e) => { + if (e.key === "Escape") { + closeAllDropdowns(); + closeMobileNav(); + } + }); + + const serviceRoutes = new Set([ + "services", + "unified-communications", + "contact-center", + "managed-support", + "consulting-training", + "infrastructure-cabling", + "wireless-access", + "local-networking" + ]); + + const industryRoutes = new Set([ + "industries", + "healthcare", + "retail", + "manufacturing", + "education-finance" + ]); + + function setActive(route) { + const requested = route || "home"; + const hasRoute = pages.some((p) => p.dataset.page === requested); + const target = hasRoute ? requested : "home"; + + pages.forEach((p) => { + const isActive = p.dataset.page === target; + p.classList.toggle("active", isActive); + p.setAttribute("aria-hidden", isActive ? "false" : "true"); + }); + + navLinks.forEach((a) => { + const routeName = a.dataset.route; + const isServiceParent = routeName === "services" && serviceRoutes.has(target); + const isIndustryParent = routeName === "industries" && industryRoutes.has(target); + const isActive = routeName === target || isServiceParent || isIndustryParent; + a.classList.toggle("active", isActive); + if (isActive) { + a.setAttribute("aria-current", "page"); + } else { + a.removeAttribute("aria-current"); + } + }); + + syncDropdownState(); + + window.scrollTo({ top: 0, behavior: "instant" }); + + if (target === "home") { + startHeroMotion(); + } else { + stopHeroMotion(); + } + } + + function routeFromHash() { + const hash = (window.location.hash || "#home").replace("#", "").trim(); + if (hash === "8x8") return "eightx8"; + return hash || "home"; + } + + navLinks.forEach((a) => { + a.addEventListener("click", (e) => { + const route = a.dataset.route; + if (!route) return; + + e.preventDefault(); + window.location.hash = route === "eightx8" ? "8x8" : route; + setActive(route); + + if (window.innerWidth <= 900) { + closeMobileNav(); + closeAllDropdowns(); + } + }); + }); + + const cta = document.getElementById("cta-consultation"); + if (cta) { + cta.addEventListener("click", () => { + window.location.hash = "contact"; + setActive("contact"); + closeMobileNav(); + closeAllDropdowns(); + }); + } + + window.addEventListener("hashchange", () => { + setActive(routeFromHash()); + }); + + window.addEventListener("resize", () => { + if (window.innerWidth <= 900) { + closeAllDropdowns(); + } + }); + + const yearSpan = document.getElementById("year"); + if (yearSpan) yearSpan.textContent = new Date().getFullYear(); + + const rotatorEl = document.getElementById("hero-rotator-text"); + const lockupEl = document.getElementById("hero-lockup"); + + const phrases = [ + "Technical Precision", + "Operational Clarity", + "Human-Centered Support" + ]; + + const phraseFadeIn = 1100; + const phraseHold = 1900; + const phraseFadeOut = 1100; + const betweenGap = 500; + const lockupFadeIn = 1200; + const lockupHold = 6500; + const loopGap = 800; + + let heroTimer = null; + let heroRunId = 0; + + function showEl(el) { + if (!el) return; + el.classList.add("is-visible"); + el.classList.remove("is-hidden"); + } + + function hideEl(el) { + if (!el) return; + el.classList.remove("is-visible"); + el.classList.add("is-hidden"); + } + + function setText(el, text) { + if (!el) return; + el.textContent = text; + } + + function sleep(ms) { + return new Promise((resolve) => { + heroTimer = window.setTimeout(resolve, ms); + }); + } + + function clearHeroTimer() { + if (heroTimer) { + window.clearTimeout(heroTimer); + heroTimer = null; + } + } + + async function heroLoop(runId) { + if (!rotatorEl || !lockupEl) return; + + hideEl(lockupEl); + hideEl(rotatorEl); + + while (runId === heroRunId) { + for (let i = 0; i < phrases.length; i++) { + if (runId !== heroRunId) return; + + setText(rotatorEl, phrases[i]); + + rotatorEl.style.setProperty("--hero-fade-ms", `${phraseFadeIn}ms`); + rotatorEl.style.setProperty("--hero-drift-ms", `${phraseFadeIn + phraseHold + phraseFadeOut}ms`); + showEl(rotatorEl); + await sleep(phraseFadeIn); + + await sleep(phraseHold); + + hideEl(rotatorEl); + await sleep(phraseFadeOut); + + await sleep(betweenGap); + } + + if (runId !== heroRunId) return; + + lockupEl.style.setProperty("--hero-lockup-fade-ms", `${lockupFadeIn}ms`); + showEl(lockupEl); + await sleep(lockupFadeIn); + + await sleep(lockupHold); + + hideEl(lockupEl); + await sleep(loopGap); + } + } + + function startHeroMotion() { + if (!rotatorEl || !lockupEl) return; + + heroRunId += 1; + clearHeroTimer(); + hideEl(lockupEl); + hideEl(rotatorEl); + heroLoop(heroRunId); + } + + function stopHeroMotion() { + heroRunId += 1; + clearHeroTimer(); + hideEl(lockupEl); + hideEl(rotatorEl); + } + + window.addEventListener("resize", () => { + if (window.innerWidth > 900) { + closeMobileNav(); + } + }); + + setActive(routeFromHash()); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..6b58460 --- /dev/null +++ b/styles.css @@ -0,0 +1,2629 @@ +/* + Queue North Technologies - Global Styles + Color Palette: + Background: #07293A (deep navy) + Text: #C7BEA1 (beige) + Accent: #3BA3FF (button / link highlight) +*/ + +/* ========================= + CSS Variables +========================= */ +:root { + --background: #07293A; + --background-alt: #0B3246; + --background-panel: #0F3A51; + --background-panel-soft: #0D364B; + + --text: #C7BEA1; + --text-muted: #9E9476; + + --border-subtle: rgba(199, 190, 161, 0.25); + + --accent: #3BA3FF; + --accent-hover: #1990ff; +} + +/* ========================= + Reset / Base +========================= */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html, body { + height: 100%; +} + +body { + font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + color: var(--text); + background: radial-gradient(circle at top, #0E3A52 0%, #07293A 45%, #041720 100%); + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} + +/* Global element defaults */ +img { + max-width: 100%; + display: block; +} + +a { + color: var(--accent); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +p, h1, h2, h3, h4, h5, h6, li, label { + color: var(--text); +} + +/* ========================= + Layout Helpers +========================= */ +.container { + max-width: 1120px; + margin: 0 auto; + padding: 0 20px; +} + +.section { + padding: 70px 0; + background: transparent; +} + +.alt-section { + background: linear-gradient(135deg, #07293A 0%, #0B3246 40%, #07293A 100%); +} + +.section h2 { + font-size: 32px; + margin-bottom: 16px; + letter-spacing: 0.03em; +} + +.section-intro { + max-width: 1250px; + margin-bottom: 30px; + font-size: 21px; + color: var(--text-muted); +} + +/* ========================= + Header (compact + logo bleed) +========================= */ +.site-header { + position: sticky; + top: 0; + z-index: 50; + background: rgba(4, 23, 32, 0.9); + backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(59, 163, 255, 0.15); + + height: 84px; + padding: 0 20px; + + display: flex; + align-items: center; + justify-content: flex-end; /* nav stays right */ +} + +/* Logo does NOT take layout width (prevents nav wrapping) */ +.logo { + position: absolute; + left: 5px; + top: 125%; + transform: translateY(-50%); + z-index: 60; +} + +.logo-link { + display: inline-flex; + align-items: center; +} + +/* Desktop logo size + bleed */ +.logo-link img { + height: 300px; + width: auto; + transform: translateY(14px); /* bleed down */ + filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)); +} + +/* Make room below so bleed doesn't collide */ +.app { + min-height: calc(100vh - 140px); + padding-top: 18px; +} + +/* ========================= + Nav (tab-like view switching) + - No layout shift underline +========================= */ +.site-nav { + display: flex; + align-items: center; + justify-content: space-between; + + flex-wrap: nowrap; /* IMPORTANT: prevent wrap on desktop */ + gap: 24px; + + width: min(100%, 1240px); + margin-left: auto; + padding-left: 140px; /* reserves space so nav doesn't collide with logo */ +} + +.site-nav a { + font-size: 16px; + color: var(--text-muted); + letter-spacing: 0.04em; + text-transform: uppercase; + white-space: nowrap; + + position: relative; + padding: 6px 0; + transition: color 0.25s ease; +} + +.site-nav a:hover { + color: var(--text); + text-decoration: none; +} + +/* underline (hidden by default) */ +.site-nav a::after { + content: ""; + position: absolute; + left: 0; + bottom: -2px; + width: 100%; + height: 2px; + background: rgba(59, 163, 255, 0.65); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.25s ease; +} + +/* Active link */ +.site-nav a.active { + color: var(--text); + text-decoration: none; +} + +.site-nav a.active::after { + transform: scaleX(1); +} + +.site-nav a:hover::after { + transform: scaleX(1); +} + +/* ========================= + Mobile +========================= */ +@media (max-width: 900px) { + .site-header { + height: 76px; + padding: 0 16px; + } + + .logo { + left: 16px; + } + + .logo-link img { + height: 56px; + transform: translateY(10px); + } + + .app { + padding-top: 8px; + } + + /* On mobile, allow wrap so links don't get microscopic */ + .site-nav { + padding-left: 86px; + justify-content: flex-end; + flex-wrap: wrap; + gap: 12px 16px; + width: auto; + } +} + +/* ========================= + Hero +========================= */ +.hero { + min-height: 70vh; + display: flex; + align-items: center; + background: radial-gradient(circle at top left, #0E3A52 0%, #07293A 40%, #020910 100%); + padding: 80px 0 90px; +} + +.hero-inner { + max-width: 1360px; + margin: 0 auto; + padding: 0 20px; +} + +.hero h1 { + font-size: 38px; + margin-bottom: 16px; + letter-spacing: 0.04em; +} + +.hero p { + font-size: 18px; + max-width: 840px; + margin-bottom: 26px; + color: var(--text-muted); +} + +/* Center the CTA under the copy (and no "View Services" now) */ +.hero-actions { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 22px; +} + +.hero-trust { + display: flex; + flex-wrap: nowrap; /* keep them on one row when possible */ + gap: 10px; + font-size: 13px; + opacity: 0.92; +} + +.hero-trust span { + border-radius: 999px; + border: 1px solid rgba(199, 190, 161, 0.35); + padding: 6px 13px; + background: rgba(11, 50, 70, 0.7); + white-space: nowrap; +} + +/* ========================= + Buttons +========================= */ +.primary-btn { + background: var(--accent); + color: #031019; + border: none; + padding: 11px 24px; + border-radius: 999px; + cursor: pointer; + font-size: 15px; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.primary-btn:hover { + background: var(--accent-hover); +} + +.secondary-link { + font-size: 14px; + color: var(--text-muted); +} + +/* ========================= + Highlights (pain points) +========================= */ +.highlights { + padding: 60px 0; + background: linear-gradient(180deg, #07293A 0%, #0B3246 60%, #07293A 100%); +} + +.highlights h2 { + text-align: center; + margin-bottom: 30px; +} + +.highlight-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 24px; +} + +.highlight-card { + background: var(--background-panel); + padding: 24px; + border-radius: 10px; + box-shadow: 0 10px 30px rgba(3, 10, 17, 0.7); + border: 1px solid var(--border-subtle); +} + +.highlight-card h3 { + margin-bottom: 10px; + color: var(--text); +} + +.highlight-card p { + color: var(--text-muted); +} + +/* ========================= + Two-column layout +========================= */ +.two-column { + display: grid; + grid-template-columns: 1.25fr 1fr; + gap: 40px; +} + +/* ========================= + Lists +========================= */ +.bullet-list { + list-style: disc; + padding-left: 20px; + color: var(--text-muted); +} + +.bullet-list li + li { + margin-top: 6px; +} + +/* ========================= + Cards grid (Services / Industries / etc.) +========================= */ +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 24px; +} + +.card { + background: var(--background-panel-soft); + padding: 22px; + border-radius: 10px; + box-shadow: 0 8px 26px rgba(3, 10, 17, 0.7); + border: 1px solid var(--border-subtle); +} + +/* ========================= + Forms +========================= */ +.contact-form { + background: var(--background-panel); + padding: 22px; + border-radius: 10px; + box-shadow: 0 10px 30px rgba(3, 10, 17, 0.9); + border: 1px solid var(--border-subtle); +} + +.contact-form label { + display: block; + font-size: 13px; + margin-bottom: 10px; +} + +.contact-form input, +.contact-form textarea { + width: 100%; + margin-top: 4px; + padding: 9px 10px; + border-radius: 6px; + border: 1px solid rgba(199, 190, 161, 0.35); + font-size: 14px; + background: #031521; + color: var(--text); +} + +.contact-form input::placeholder, +.contact-form textarea::placeholder { + color: rgba(199, 190, 161, 0.6); +} + +.contact-form input:focus, +.contact-form textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 1px rgba(59, 163, 255, 0.3); +} + +.contact-form button { + margin-top: 10px; +} + +.form-status { + margin-top: 8px; + font-size: 13px; + color: #5ee0b1; +} + + +/* ========================= + Footer +========================= */ +.site-footer { + background: #020910; + color: var(--text-muted); + padding: 28px 0 18px; + font-size: 13px; + border-top: 1px solid rgba(59, 163, 255, 0.15); +} + +.footer-main { + display: grid; + grid-template-columns: minmax(220px, 1.35fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr); + gap: 28px; + align-items: start; +} + +.footer-brand, +.footer-column { + min-width: 0; +} + +.footer-heading { + font-size: 15px; + font-weight: 600; + color: var(--text); + margin-bottom: 10px; +} + +.footer-brand p, +.footer-phone a, +.footer-link-list a, +.footer-linkedin { + color: var(--text-muted); +} + +.footer-brand p { + max-width: 280px; +} + +.footer-phone, +.footer-social { + display: flex; + flex-direction: column; + gap: 8px; +} + +.footer-phone a, +.footer-linkedin { + display: inline-flex; + align-items: center; + gap: 10px; +} + +.footer-phone a:hover, +.footer-link-list a:hover, +.footer-linkedin:hover { + color: var(--text); + text-decoration: none; +} + +.footer-quick-links .footer-link-list { + display: flex; + flex-wrap: wrap; + gap: 10px 18px; +} + +.footer-link-list a { + display: inline-block; +} + +.linkedin-badge { + width: 22px; + height: 22px; + border-radius: 5px; + display: inline-flex; + align-items: center; + justify-content: center; + background: #0a66c2; + color: #ffffff; + font-size: 13px; + font-weight: 700; + line-height: 1; + flex: 0 0 22px; + text-transform: lowercase; +} + +.footer-legal { + display: grid; + gap: 8px; + margin-top: 22px; + padding-top: 16px; + border-top: 1px solid rgba(199, 190, 161, 0.12); + font-size: 12px; + color: var(--text-muted); +} + + +/* ========================= + Pages (tabbed views\) +========================= */ +.page { + display: none; +} + +.page.active { + display: block; +} + +/* ========================= + Split hero (content + image area) +========================= */ +.hero-split-inner { + display: grid; + grid-template-columns: 0.7fr 1.3fr; + gap: 28px; + align-items: center; +} + +.hero-media { + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; +} + +/* NEW: unboxed hero image */ +.hero-photo { + width: 100%; + max-width: 980px; + height: auto; + border-radius: 14px; /* keep the soft rounding */ + display: block; + filter: drop-shadow(0 16px 30px rgba(3, 10, 17, 0.55)); +} + + +/* ========================= + Hero image overlay: rotating phrases + lockup +========================= */ +.hero-media-overlay { + position: absolute; + left: 18px; + right: 18px; + bottom: 0px; + pointer-events: none; + display: flex; + flex-direction: column; + gap: 6px; +} + +.hero-rotator-text, +.hero-lockup-subtitle { + color: #ffffff; + font-size: 32px; + font-weight: 600; + text-align: center; + letter-spacing: 0.06em; + text-shadow: 0 2px 10px rgba(0,0,0,0.55); +} + +.hero-brand { + color: #1F8FB3; + font-size: 36px; + font-weight: 700; + letter-spacing: 0.08em; + margin-bottom: 6px; +} + +.hero-rotator-text { + display: inline-block; +} + +/* Visibility toggles driven by main.js */ +.is-hidden { + opacity: 0; + visibility: hidden; + transform: translateY(6px); +} + +.is-visible { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.hero-rotator-text { + transition: + opacity var(--hero-fade-ms, 900ms) ease, + transform var(--hero-fade-ms, 900ms) ease, + visibility 0ms linear var(--hero-fade-ms, 900ms); +} + +.hero-lockup { + transition: + opacity var(--hero-lockup-fade-ms, 1100ms) ease, + transform var(--hero-lockup-fade-ms, 1100ms) ease, + visibility 0ms linear var(--hero-lockup-fade-ms, 1100ms); +} +/* Shared media card (images / placeholders) */ +.media-card { + width: 100%; + max-width: 820px; + border-radius: 14px; + border: 1px solid var(--border-subtle); + background: rgba(15, 58, 81, 0.65); + box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75); + overflow: hidden; +} +.about-meaning-image { + width: 100%; + height: auto; + display: block; + border-radius: 14px; + object-fit: cover; +} +.media-placeholder { + padding: 26px; + min-height: 300px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 6px; + color: var(--text-muted); + background: + radial-gradient(circle at 20% 20%, rgba(59,163,255,0.18), transparent 45%), + radial-gradient(circle at 80% 30%, rgba(199,190,161,0.10), transparent 40%), + rgba(3, 21, 33, 0.35); +} + +.media-placeholder span { + color: var(--text); + font-weight: 400; + letter-spacing: 0.02em; +} + +.media-placeholder small { + color: var(--text-muted); +} + +/* ========================= + Page-level hero +========================= */ +.page-hero { + padding: 70px 0 30px; + background: transparent; +} + +.page-hero-inner { + display: grid; + grid-template-columns: 0.9fr 1.1fr; + gap: 28px; + align-items: center; +} + +/* ========================= + ABOUT: full-bleed image canvas +========================= */ +.about-canvas{ + position: relative; + min-height: calc(100vh - 84px); /* header height */ + padding: 130px 60px 80px; /* space so we don’t fight the logo bleed */ + background: + linear-gradient(rgba(4,23,32,0.20), rgba(4,23,32,0.20)), + url("assets/about-image.png"); + background-size: 67%; + background-position: center 5%; + background-repeat: no-repeat; +} + +.about-canvas::before{ + content:""; + position:absolute; + inset:0; + pointer-events:none; + + /* 1) vignette fade on edges + 2) warm paper tint */ + background: + radial-gradient( + ellipse at center, + rgba(0,0,0,0) 55%, + rgba(0,0,0,0.35) 78%, + rgba(0,0,0,0.65) 100% + ), + linear-gradient( + rgba(210, 190, 140, 0.06), + rgba(210, 190, 140, 0.02) + ); +} + +#page-services{ + position: relative; + min-height: calc(100vh - 84px); /* header height */ + padding: 130px 60 80px; + background: + linear-gradient(rgba(4,23,32,0.25), rgba(4,23,32,0.25)), + url("assets/services-image.png"); + background-size: 45%; + background-position: center 45%; + background-repeat: no-repeat; +} + +#page-services::before{ + content:""; + position:absolute; + inset:0; + pointer-events:none; + background: + radial-gradient( + ellipse at center, + rgba(0,0,0,0) 55%, + rgba(0,0,0,0.85) 78%, + rgba(0,0,0,0.45) 100% + ); +} + +/* Keep Services content above the background + vignette */ +#page-services > section{ + position: relative; + z-index: 2; +} + +/* Center the Services header at the top */ +#page-services .page-hero{ + padding: 0 0 26px; + background: transparent; +} + +#page-services .page-hero-inner{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 10px; +} + +/* Pull the cards up so they sit over the image more tightly */ +#page-services .section{ + padding-top: 0; +} + +@media (max-width: 900px){ + #page-services{ + padding: 110px 0 50px; + min-height: auto; + } +} + +.about-panel{ + position: relative; + z-index: 2; +} + +.about-canvas{ + z-index: 0; +} + +/* Panels */ +.about-panel{ + max-width: 520px; + padding: 22px 22px; + border-radius: 14px; + background: rgba(11, 50, 70, 0.72); /* matches your alt-section blues */ + border: 1px solid rgba(199, 190, 161, 0.25); + box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75); + backdrop-filter: blur(10px); +} + +.about-panel h2{ + font-size: 24px; + margin-bottom: 10px; +} + +.about-panel h3{ + font-size: 24px; + margin-bottom: 10px; +} + +.about-panel p{ + color: var(--text-muted); + font-size: 18px; + font-weight: 300; + color: #C7BEA1; +} + +.about-panel ul{ + color: var(--text-muted); + font-size: 18px; + font-weight: 300; + color: #C7BEA1; +} + +/* Placement: keep away from the compass area */ +.about-panel-left{ + position: absolute; + top: 140px; + left: 80px; +} + +.about-panel-right{ + position: absolute; + top: 140px; + right: 80px; +} + +.services-full-image { + width: 100%; + display: block; +} + +.container h2{ + font-size: 38px; + margin-bottom: 10px; + text-align: center; + padding-top: 15px; +} + +/* Mobile: stack panels and stop absolute positioning */ +@media (max-width: 900px){ + .about-canvas{ + padding: 110px 18px 40px; + min-height: auto; + } + + .about-panel-left, + .about-panel-right{ + position: static; + max-width: 100%; + margin-bottom: 18px; + } +} + +/* Make the 8x8 hero give more space to the logo */ +#page-8x8 .page-hero-inner { + grid-template-columns: 1fr 1fr; /* 50/50 on the 8x8 tab */ +} + +.page-hero-media .media-card { + max-width: 820px; + margin-left: auto; +} + +/* ===== 8x8 joint logo lockup (no box) ===== */ +.partner-lockup { + display: flex; + flex-direction: column; + align-items: center; /* centers the logo block */ + justify-content: center; + gap: 12px; + width: 100%; +} + +.partner-lockup-img { + width: min(100%, 760px); /* make it bigger, but still safe */ + height: auto; + display: block; + margin: 0 auto; + + filter: drop-shadow(0 12px 22px rgba(0,0,0,0.4)); +} + +.partner-lockup-caption { + text-align: center; + width: 100%; + font-size: 14px; + color: var(--text-muted); + margin: 0; +} + +@media (max-width: 900px) { + .partner-lockup-img { + width: min(100%, 520px); + } +} + +.partner-logo { + max-width: 240px; + height: auto; + display: block; + margin: 22px auto 0; + padding: 10px 0; +} + +.small-muted { + color: var(--text-muted); + font-size: 18px; + text-align: center; +} + +/* ========================= + Responsive +========================= */ +@media (max-width: 900px) { + .site-header { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + + /* keep logo readable, reduce bleed */ + .logo-link img { + height: 64px; + transform: translateY(10px); + } + + /* match the bleed to avoid overlap */ + .app { + padding-top: 10px; + } + + .site-nav { + width: 100%; + justify-content: flex-start; + gap: 10px 14px; + } + + .hero { + padding: 60px 0 70px; + } + + .hero h1 { + font-size: 30px; + } + + /* allow pills to wrap on smaller screens */ + .hero-trust { + flex-wrap: wrap; + } + + .two-column { + grid-template-columns: 1fr; + } + + .hero-split-inner, + .page-hero-inner { + grid-template-columns: 1fr; + } + + .hero-media, + .page-hero-media { + justify-content: flex-start; + } + + .hero-photo { + max-width: 100%; + } + +@media (max-width: 900px) { + .site-footer { + padding-top: 24px; + } + + .footer-main { + grid-template-columns: 1fr; + gap: 20px; + } + + .footer-brand p { + max-width: none; + } + + .footer-quick-links .footer-link-list { + gap: 10px 16px; + } +} +} + +/* ========================================= + Services + Industries: force 2x2 layout + (Only affects these two tabs) +========================================= */ + +/* Desktop / large screens: always 2 columns */ +#page-services .card-grid, +#page-industries .card-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + max-width: 980px; /* keeps the 2-column layout looking intentional */ + margin-left: auto; + margin-right: auto; +} + +/* Make cards slightly “longer” (taller) so the layout feels balanced */ +#page-services .card, +#page-industries .card { + min-height: 150px; /* adjust to taste: try 160–200 */ +} + +/* Medium screens: still 2 columns until it truly needs to stack */ +@media (max-width: 900px) { + #page-services .card-grid, + #page-industries .card-grid { + grid-template-columns: 1fr; /* single column on mobile */ + max-width: 720px; + } + + #page-services .card, + #page-industries .card { + min-height: 0; /* let content define height on mobile */ + } +} + +/* ========================= + SERVICES: make cards feel like About panels +========================= */ + +/* Spread the 2x2 grid out more (less cramped) */ +#page-services .card-grid { + max-width: 1120px; /* wider than the current 980px */ + gap: 200px 200px; /* more breathing room */ + padding: 10px 0 0; /* tiny separation from the header */ +} + +/* Glassy / semi-transparent cards (match About panel vibe) */ +#page-services .card { + background: rgba(11, 50, 70, 0.72); /* same family as .about-panel */ + border: 1px solid rgba(199, 190, 161, 0.25); + box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75); + backdrop-filter: blur(10px); +} + +/* Optional: slightly bigger headings for presence */ +#page-services .card h3 { + font-size: 20px; + margin-bottom: 10px; +} + +/* Optional: make body copy a touch more readable on photo background */ +#page-services .card p { + color: rgba(199, 190, 161, 0.92); +} + +/* Balance last service card when odd number of services */ +#page-services .card-grid > .card:last-child { + grid-column: 1 / -1; + width: min(100%, calc((100% - 28px) / 2)); + justify-self: center; +} + +@media (max-width: 900px) { + #page-services .card-grid > .card:last-child { + grid-column: auto; + width: 100%; + } +} + +/* ========================= + INDUSTRIES: images beside cards (images NOT inside cards) +========================= */ + +#page-industries .industries-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 58px; + max-width: 1620px; + margin: 0 auto; +} + +/* Each item is a 2-column mini-layout: big image + card */ +#page-industries .industry-item { + display: grid; + gap: 18px; + align-items: stretch; +} + +/* Big image, no container */ +#page-industries .industry-image { + width: 100%; + height: 100%; + min-height: 80px; + min-width: 80px; + object-fit: cover; + border-radius: 14px; + border: 1px solid rgba(199, 190, 161, 0.25); + box-shadow: 0 12px 30px rgba(3, 10, 17, 0.6); + background: transparent; +} + +/* Card stays card (container for text only) */ +#page-industries .industry-card { + min-height: 80px; + min-width: 80px; + display: flex; + flex-direction: column; + justify-content: center; +} + +/* ========================= + INDUSTRIES: center text inside cards + larger font +========================= */ + +#page-industries .industry-card { + display: flex; + flex-direction: column; + justify-content: center; /* vertical center */ + align-items: center; /* horizontal center */ + text-align: center; /* center text itself */ + padding: 28px; /* a little more breathing room */ +} + +/* Larger headline */ +#page-industries .industry-card h3 { + font-size: 24px; /* was default ~20px */ + margin-bottom: 12px; +} + +/* Larger body copy */ +#page-industries .industry-card p { + font-size: 18px; + max-width: 520px; /* keeps lines from stretching too wide */ + color: rgba(199, 190, 161, 0.92); +} + +/* Mobile: stack image above card */ +@media (max-width: 900px) { + #page-industries .industries-grid { + grid-template-columns: 1fr; + } + + #page-industries .industry-item { + grid-template-columns: 1fr; + } + + #page-industries .industry-image { + min-height: 220px; + } +} +/* ========================= + INDUSTRIES: center page title + intro like Services +========================= */ + +#page-industries .page-hero { + padding: 30px 0 10px; /* was 70px 0 30px */ +} + +#page-industries .page-hero-inner{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 10px; +} + +#page-industries .section { + padding-top: 20px; /* was 70px default */ +} + +#page-industries .section-intro{ + margin-left: auto; + margin-right: auto; + text-align: center; + max-width: 650px; /* tweak if you want wider/narrower */ +} + +/* ========================= + Contact Hero Background +========================= */ + +.contact-hero { + position: relative; + background: + linear-gradient( + rgba(7, 41, 58, 0.85), + rgba(7, 41, 58, 0.85) + ), + url("assets/contact.png"); + + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + padding: 120px 20px; + text-align: center; +} + +/* Keeps content above overlay */ +.contact-hero > * { + position: relative; + z-index: 2; +} +.contact-hero h1 { + font-size: 3rem; + margin-bottom: 10px; +} + +.contact-hero p { + max-width: 800px; + margin: 0 auto; + font-size: 1.2rem; + line-height: 1.6; +} + +/* CONTACT hero background image */ +#page-contact .page-hero{ + /* keep your existing spacing from the global .page-hero */ + background: + linear-gradient(rgba(7,41,58,0.55), rgba(7,41,58,0.55)), + url("assets/contact.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +/* center the hero text block */ +#page-contact .page-hero-inner{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} +#page-contact .section-intro{ + max-width: 900px; +} +/* Left column title */ +#page-contact h3{ + font-size: 1.8rem; /* increase heading size */ + margin-bottom: 18px; +} + +/* Bullet list text */ +#page-contact .bullet-list li{ + font-size: 1.15rem; /* larger body text */ + line-height: 1.6; + margin-bottom: 8px; +} +#page-contact .contact-form label{ + font-size: 1.05rem; + font-weight: 500; +} +#page-contact .contact-form label{ + font-size: 1.05rem; + font-weight: 500; +} +#page-contact .contact-form button{ + font-size: 1rem; + padding: 14px 28px; +} +/* ========================= + SUPPORT page layout (scoped) +========================= */ + +#page-support .container{ + max-width: 1320px; +} + +#page-support .support-hero-inner{ + display: grid; + grid-template-columns: 0.7fr 1.3fr; + gap: 200px; + align-items: center; +} + +/* Left column: center the title + intro + form */ +#page-support .support-hero-left{ + display: flex; + flex-direction: column; + align-items: center; + text-align: left; +} + +/* Keep the intro readable and centered */ +#page-support .support-hero-left .section-intro{ + max-width: 560px; +} + +/* Right column image: not in a “card”, just a clean image */ +#page-support .support-hero-image{ + width: 100%; + max-width: 1050px; /* was 720px */ + height: auto; + display: block; + border-radius: 18px; + box-shadow: 0 30px 65px rgba(0,0,0,0.55); +} + +/* Push the photo farther right without shifting the left column */ +#page-support .support-hero-right{ + justify-self: end; +} + +#page-support .support-hero-image{ + margin-left: auto; +} + + +#page-support .support-action-card{ + width: 100%; + max-width: 420px; + padding: 28px 28px 34px; + background: var(--background-panel); + border: 1px solid var(--border-subtle); + border-radius: 10px; + box-shadow: 0 10px 30px rgba(3, 10, 17, 0.9); + display: flex; + flex-direction: column; + align-items: center; + gap: 18px; + text-align: center; +} + +#page-support .support-action-btn{ + min-width: 180px; + text-align: center; + text-decoration: none; +} + +#page-support .support-member-text{ + margin: 2px 0 -4px; + color: var(--text-muted); + font-size: 16px; +} + +#page-support .support-phone-block{ + margin-top: 6px; + padding-top: 18px; + border-top: 1px solid rgba(199, 190, 161, 0.25); + width: 100%; + display: flex; + flex-direction: column; + gap: 8px; + color: var(--text-muted); + font-size: 16px; +} + +#page-support .support-phone-block a{ + color: var(--accent); + font-size: 20px; + font-weight: 700; + text-decoration: none; +} + +#page-support .support-phone-block a:hover{ + color: var(--accent-hover); +} + +/* Make the support form thinner + taller */ +#page-support .support-form{ + width: 100%; + max-width: 420px; /* thinner */ + padding: 28px 28px 34px; + text-align: left; +} + +#page-support .support-form .primary-btn{ + display: block; + margin: 24px auto 0; /* centers only the button */ +} + +/* Larger form font like your Contact page improvements */ +#page-support .support-form label{ + font-size: 16px; +} + +#page-support .support-form input, +#page-support .support-form textarea{ + font-size: 16px; + padding: 12px 14px; +} + +/* Taller textarea to make the card feel taller */ +#page-support .support-form textarea{ + min-height: 190px; + resize: vertical; +} + +/* Mobile stacking */ +@media (max-width: 980px){ + #page-support .support-hero-inner{ + grid-template-columns: 1fr; + gap: 28px; + } + + #page-support .support-hero-right{ + order: 2; + } + + #page-support .support-hero-left{ + order: 1; + } + + #page-support .support-hero-image{ + max-width: 720px; + margin: 0 auto; + } +} +#page-support .section-intro{ + text-align: center; +} + +/* ========================= + Services Dropdown +========================= */ +.nav-dropdown { + position: relative; + display: flex; + align-items: center; + padding-bottom: 12px; + margin-bottom: -12px; +} + +.nav-dropdown-toggle { + appearance: none; + background: transparent; + border: 0; + cursor: pointer; + font: inherit; + font-size: 16px; + color: var(--text-muted); + letter-spacing: 0.04em; + text-transform: uppercase; + white-space: nowrap; + position: relative; + padding: 6px 18px 6px 0; + transition: color 0.25s ease; +} + +.nav-dropdown-toggle::before { + content: ""; + position: absolute; + left: 0; + bottom: -2px; + width: calc(100% - 12px); + height: 2px; + background: rgba(59, 163, 255, 0.65); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.25s ease; +} + +.nav-dropdown-toggle::after { + content: ""; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 12px; + height: 12px; /* gives us room for clean spacing */ + + background: + linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, + linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat, + linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat; +} + +.nav-dropdown:hover .nav-dropdown-toggle, +.nav-dropdown:focus-within .nav-dropdown-toggle, +.nav-dropdown.open .nav-dropdown-toggle, +.nav-dropdown-toggle.active { + color: var(--text); +} + +.nav-dropdown:hover .nav-dropdown-toggle::before, +.nav-dropdown:focus-within .nav-dropdown-toggle::before, +.nav-dropdown.open .nav-dropdown-toggle::before, +.nav-dropdown-toggle.active::before { + transform: scaleX(1); +} + +.nav-dropdown-menu { + position: absolute; + top: calc(100% - 2px); + left: 0; + min-width: 320px; + display: none; + flex-direction: column; + padding: 10px; + background: rgba(4, 23, 32, 0.97); + border: 1px solid rgba(59, 163, 255, 0.2); + border-radius: 14px; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); +} + +.nav-dropdown:hover .nav-dropdown-menu, +.nav-dropdown:focus-within .nav-dropdown-menu, +.nav-dropdown.open .nav-dropdown-menu { + display: flex; +} + +.nav-dropdown-menu a { + padding: 10px 12px; + border-radius: 10px; + color: var(--text); + font-size: 15px; + letter-spacing: 0.02em; + text-transform: none; +} + +.nav-dropdown-menu a::after { + display: none; +} + +.nav-dropdown-menu a:hover, +.nav-dropdown-menu a.active { + color: var(--text); + text-decoration: none; + background: rgba(59, 163, 255, 0.12); +} + +/* ========================= + Service Detail Pages +========================= */ +.service-page-section { + min-height: calc(100vh - 180px); + display: flex; + align-items: center; + justify-content: center; + padding: 70px 0 90px; +} + +.service-page-content { + text-align: center; +} + +.service-page-title { + font-size: 36px; + margin-bottom: 28px; + letter-spacing: 0.03em; +} + +.service-page-image { + width: min(100%, 860px); + max-height: 64vh; + margin: 0 auto 24px; + object-fit: contain; + border-radius: 18px; + box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); +} + +.service-page-tagline { + max-width: 920px; + margin: 0 auto; + font-size: 26px; + color: var(--text-muted); +} + +@media (max-width: 900px) { + .nav-dropdown { + width: 100%; + align-items: flex-start; + } + + .nav-dropdown-toggle { + font-size: 15px; + padding-right: 16px; + } + + .nav-dropdown-menu { + position: static; + min-width: 100%; + margin-top: 8px; + } + + .service-page-title { + font-size: 30px; + } + + .service-page-tagline { + font-size: 21px; + } +} + + +/* ========================= + Mobile Navigation + Cleanup Overrides + Added to preserve desktop while fixing phone layout +========================= */ +.mobile-nav-toggle { + display: none; + appearance: none; + background: transparent; + border: 1px solid rgba(59, 163, 255, 0.28); + border-radius: 10px; + width: 48px; + height: 44px; + padding: 0; + align-items: center; + justify-content: center; + gap: 5px; + flex-direction: column; + cursor: pointer; +} + +.mobile-nav-toggle span { + display: block; + width: 20px; + height: 2px; + background: var(--text); + border-radius: 999px; +} + +@media (max-width: 900px) { + .site-header { + height: auto; + min-height: 76px; + padding: 12px 16px; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 12px; + } + + .logo { + position: static; + left: auto; + top: auto; + transform: none; + z-index: auto; + } + + .logo-link img { + height: 52px; + width: auto; + transform: none; + filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35)); + } + + .mobile-nav-toggle { + display: inline-flex; + margin-left: auto; + } + + .app { + padding-top: 0; + min-height: calc(100vh - 92px); + } + + .site-nav { + display: none; + width: 100%; + margin-left: 0; + padding: 10px 0 0; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + gap: 8px; + } + + .site-nav.open { + display: flex; + } + + .site-nav > a, + .site-nav > .nav-dropdown { + width: 100%; + } + + .site-nav a, + .nav-dropdown-toggle { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 12px 14px; + border-radius: 12px; + background: rgba(11, 50, 70, 0.55); + border: 1px solid rgba(199, 190, 161, 0.12); + font-size: 14px; + line-height: 1.2; + } + + .site-nav a::after { + display: none; + } + + .nav-dropdown { + display: block; + padding-bottom: 0; + margin-bottom: 0; + } + + .nav-dropdown-toggle { + padding-right: 36px; + } + + .nav-dropdown-toggle::before { + display: none; + } + + .nav-dropdown-toggle::after { + right: 14px; + width: 12px; + height: 12px; + } + + .nav-dropdown-menu { + position: static; + display: none; + min-width: 0; + width: 100%; + margin-top: 8px; + padding: 8px; + border-radius: 12px; + } + + .nav-dropdown:hover .nav-dropdown-menu, + .nav-dropdown:focus-within .nav-dropdown-menu { + display: none; + } + + .nav-dropdown.open .nav-dropdown-menu { + display: flex; + } + + .nav-dropdown-menu a { + background: transparent; + border: 0; + padding: 10px 12px; + font-size: 14px; + } + + .hero { + min-height: auto; + padding: 32px 0 46px; + } + + .hero-inner { + padding: 0 16px; + } + + .hero-split-inner, + .page-hero-inner, + .two-column, + .footer-main { + grid-template-columns: 1fr; + } + + .hero-content { + order: 1; + } + + .hero-media { + order: 2; + justify-content: center; + } + + .hero h1 { + font-size: 28px; + line-height: 1.15; + } + + .hero p { + font-size: 16px; + max-width: none; + } + + .hero-actions { + justify-content: flex-start; + } + + .hero-trust { + flex-wrap: wrap; + gap: 8px; + } + + .hero-trust span { + font-size: 12px; + padding: 6px 10px; + } + + .hero-photo { + max-width: 100%; + border-radius: 12px; + } + + .hero-media-overlay { + left: 12px; + right: 12px; + bottom: 12px; + gap: 4px; + } + + .hero-rotator-text, + .hero-lockup-subtitle { + font-size: 18px; + letter-spacing: 0.04em; + } + + .hero-brand { + font-size: 22px; + margin-bottom: 2px; + } + + .section, + .page-hero { + padding: 42px 0; + } + + .container { + padding: 0 16px; + } + + .section h2, + .service-page-title { + font-size: 28px; + line-height: 1.15; + } + + .section-intro, + .service-page-tagline { + font-size: 18px; + max-width: none; + } + + .service-page-section { + min-height: auto; + padding: 42px 0 56px; + } + + .service-page-image { + width: 100%; + max-height: none; + margin-bottom: 18px; + border-radius: 14px; + } + + .card-grid { + grid-template-columns: 1fr; + } + + .about-canvas { + min-height: auto; + padding: 108px 16px 48px; + background-size: 92%; + background-position: center 72px; + } + + #page-services { + min-height: auto; + padding: 108px 0 48px; + background-size: 88%; + background-position: center 180px; + } + + #page-industries .industry-item { + grid-template-columns: 1fr; + gap: 16px; + } + + .industry-image img { + width: 100%; + } + + #page-8x8 .page-hero, + #page-contact .page-hero, + #page-support .page-hero { + padding-top: 36px; + } + + .site-footer { + padding-top: 24px; + } +} + +/* ========================= + Mobile layout refinement only + Tightens phone layout without changing desktop +========================= */ +@media (max-width: 900px) { + .site-header { + min-height: 68px; + padding: 10px 16px; + gap: 8px; + position: sticky; + top: 0; + z-index: 120; + } + + .logo-link img { + height: 72px; + width: auto; + max-width: 132px; + } + + .mobile-nav-toggle { + width: 42px; + height: 40px; + border-radius: 12px; + border-color: rgba(59, 163, 255, 0.22); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); + } + + .mobile-nav-toggle span { + width: 18px; + } + + .site-nav { + position: absolute; + top: calc(100% + 1px); + left: 0; + right: 0; + display: none; + padding: 10px 16px 14px; + background: rgba(4, 23, 32, 0.96); + backdrop-filter: blur(14px); + border-top: 1px solid rgba(59, 163, 255, 0.12); + box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3); + gap: 8px; + } + + .site-nav a, + .nav-dropdown-toggle { + padding: 10px 14px; + min-height: 48px; + border-radius: 14px; + background: rgba(11, 50, 70, 0.46); + border: 1px solid rgba(199, 190, 161, 0.1); + font-size: 13px; + letter-spacing: 0.06em; + } + + .nav-dropdown-toggle { + padding-right: 34px; + } + + .nav-dropdown-toggle::after { + right: 14px; + width: 11px; + height: 11px; + opacity: 0.9; + } + + .nav-dropdown-menu { + margin-top: 6px; + padding: 6px; + border-radius: 14px; + background: rgba(8, 33, 45, 0.88); + border: 1px solid rgba(199, 190, 161, 0.1); + } + + .nav-dropdown-menu a { + min-height: 40px; + padding: 8px 10px; + font-size: 12.5px; + border-radius: 10px; + } + + .app { + min-height: calc(100vh - 76px); + } + + .hero { + padding: 18px 0 40px; + } + + .hero-inner { + padding: 0 14px; + } + + .hero h1 { + font-size: 27px; + line-height: 1.08; + margin-bottom: 14px; + } + + .hero p { + font-size: 15px; + line-height: 1.55; + margin-bottom: 22px; + } + + .primary-btn { + width: 100%; + max-width: 340px; + padding: 12px 18px; + font-size: 13px; + } + + .hero-trust { + gap: 6px; + } + + .hero-trust span { + font-size: 11px; + padding: 5px 9px; + } + + .hero-media { + margin-top: 6px; + } + + .hero-photo { + border-radius: 14px; + } + + .hero-media-overlay { + left: 10px; + right: 10px; + bottom: 10px; + } + + .hero-rotator-text, + .hero-lockup-subtitle { + font-size: 16px; + } + + .hero-brand { + font-size: 20px; + } +} + +/* ========================= + Mobile corrections only - visible tabs, larger logo, no hamburger + Keeps desktop unchanged +========================= */ +@media (max-width: 900px) { + .mobile-nav-toggle { + display: none !important; + } + + .site-header { + height: auto; + min-height: 94px; + padding: 10px 14px 12px; + align-items: center; + justify-content: flex-end; + flex-wrap: nowrap; + gap: 10px; + } + + .logo { + position: absolute; + left: 8px; + top: 50%; + transform: translateY(-50%); + z-index: 60; + } + + .logo-link img { + height: 110px; + width: auto; + max-width: none; + transform: translateY(6px); + filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)); + } + + .app { + padding-top: 4px; + min-height: calc(100vh - 110px); + } + + .site-nav { + display: flex !important; + position: static; + width: 100%; + margin-left: auto; + padding: 0 0 0 108px; + background: transparent; + backdrop-filter: none; + border-top: 0; + box-shadow: none; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + gap: 8px 14px; + } + + .site-nav.open { + display: flex !important; + } + + .site-nav > a, + .site-nav > .nav-dropdown { + width: auto; + } + + .site-nav a, + .nav-dropdown-toggle { + display: inline-flex; + width: auto; + min-height: 0; + padding: 6px 0; + background: transparent; + border: 0; + border-radius: 0; + font-size: 12px; + line-height: 1.2; + letter-spacing: 0.05em; + text-transform: uppercase; + } + + .site-nav a::after { + display: block; + } + + .nav-dropdown { + display: flex; + width: auto; + align-items: center; + padding-bottom: 10px; + margin-bottom: -10px; + } + + .nav-dropdown-toggle { + padding: 6px 18px 6px 0; + } + + .nav-dropdown-toggle::before { + display: block; + } + + .nav-dropdown-toggle::after { + right: 0; + width: 11px; + height: 11px; + opacity: 1; + } + + .nav-dropdown-menu { + position: absolute; + top: calc(100% - 2px); + left: 0; + right: auto; + width: max-content; + min-width: 260px; + max-width: min(88vw, 340px); + margin-top: 0; + padding: 8px; + background: rgba(4, 23, 32, 0.98); + backdrop-filter: blur(12px); + border: 1px solid rgba(59, 163, 255, 0.2); + border-radius: 14px; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); + } + + .nav-dropdown:hover .nav-dropdown-menu, + .nav-dropdown:focus-within .nav-dropdown-menu, + .nav-dropdown.open .nav-dropdown-menu { + display: flex; + } + + .nav-dropdown-menu a { + display: block; + width: 100%; + min-height: 0; + padding: 9px 12px; + background: transparent; + border: 0; + border-radius: 10px; + font-size: 14px; + letter-spacing: 0.02em; + text-transform: none; + } + + .hero { + padding: 26px 0 40px; + } + + .hero-inner, + .container { + padding: 0 14px; + } + + #page-services { + padding: 104px 0 48px; + background-size: 118%; + background-position: center 170px; + } + + #page-services .page-hero { + padding-bottom: 18px; + } + + #page-services .card-grid { + gap: 18px; + } + + .service-page-section { + padding: 36px 0 52px; + } + + .service-page-image { + width: 100%; + max-width: 100%; + display: block; + margin: 0 auto 18px; + max-height: none; + } +} + +@media (max-width: 520px) { + .site-header { + min-height: 102px; + padding: 10px 12px 12px; + } + + .logo { + left: 6px; + } + + .logo-link img { + height: 124px; + } + + .site-nav { + padding-left: 96px; + gap: 7px 12px; + } + + .site-nav a, + .nav-dropdown-toggle { + font-size: 11px; + letter-spacing: 0.045em; + } + + .nav-dropdown-menu { + min-width: 232px; + max-width: min(90vw, 320px); + } + + .hero h1 { + font-size: 26px; + } + + .hero p { + font-size: 15px; + } + + #page-services { + background-size: 132%; + background-position: center 188px; + } +} + + +/* ========================================================= + Services overview image grid +========================================================= */ +#page-services .services-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 28px; +} + +#page-services .service-item { + display: block; + text-decoration: none; +} + +#page-services .service-item:hover { + text-decoration: none; +} + +#page-services .service-overview-image { + width: 100%; + height: 320px; + object-fit: cover; + object-position: center; + border-radius: 22px; + box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75); +} + +#page-services .service-overview-card { + margin-top: 16px; + text-align: center; +} + +#page-services .service-overview-card h3 { + font-size: 28px; + margin-bottom: 10px; +} + +#page-services .service-overview-card p { + font-size: 20px; + line-height: 1.6; + color: var(--text-muted); +} + +/* ========================================================= + Mobile navigation + layout cleanup +========================================================= */ +@media (max-width: 900px) { + .mobile-nav-toggle { + display: none !important; + } + + .site-header { + height: auto !important; + padding: 14px 12px 12px !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + } + + .logo { + position: static !important; + left: auto !important; + top: auto !important; + transform: none !important; + margin: 0 auto 10px !important; + } + + .logo-link img { + height: 120px !important; + width: auto !important; + transform: none !important; + } + + .app { + padding-top: 0 !important; + } + + .site-nav { + position: static !important; + inset: auto !important; + opacity: 1 !important; + visibility: visible !important; + pointer-events: auto !important; + transform: none !important; + display: flex !important; + width: 100% !important; + margin: 0 auto !important; + padding: 0 !important; + justify-content: center !important; + align-items: center !important; + flex-wrap: wrap !important; + gap: 10px 18px !important; + background: transparent !important; + border: 0 !important; + box-shadow: none !important; + } + + .site-nav > a, + .site-nav > .nav-dropdown { + flex: 0 0 auto !important; + } + + .site-nav a, + .nav-dropdown-toggle { + font-size: 14px !important; + letter-spacing: 0.04em !important; + padding: 6px 0 !important; + white-space: nowrap !important; + } + + .nav-dropdown { + position: relative !important; + width: auto !important; + } + + .nav-dropdown-toggle { + min-width: 0 !important; + justify-content: flex-start !important; + background: transparent !important; + border: 0 !important; + box-shadow: none !important; + border-radius: 0 !important; + } + + .nav-dropdown-toggle::before { + bottom: -2px !important; + } + + .nav-dropdown-menu { + position: absolute !important; + top: calc(100% + 8px) !important; + left: 50% !important; + right: auto !important; + transform: translateX(-50%) !important; + min-width: 220px !important; + max-width: min(92vw, 320px) !important; + padding: 10px 0 !important; + z-index: 120 !important; + } + + .nav-dropdown-menu a { + padding: 10px 18px !important; + font-size: 14px !important; + } + + .hero { + padding-top: 42px !important; + } + + #page-services .services-grid { + grid-template-columns: 1fr !important; + gap: 24px !important; + } + + #page-services .service-overview-image { + height: auto !important; + aspect-ratio: 16 / 10; + } + + #page-services .service-overview-card h3 { + font-size: 24px !important; + } + + #page-services .service-overview-card p { + font-size: 18px !important; + } +} + +/* ========================================================= + Final mobile nav override: force horizontal tab flow + without changing desktop layout +========================================================= */ +@media (max-width: 900px) { + .site-header { + align-items: center !important; + } + + .site-nav { + display: flex !important; + flex-direction: row !important; + flex-wrap: wrap !important; + justify-content: center !important; + align-items: center !important; + align-content: center !important; + width: min(100%, 360px) !important; + max-width: 360px !important; + margin: 0 auto !important; + padding: 0 !important; + gap: 12px 18px !important; + } + + .site-nav > a, + .site-nav > .nav-dropdown { + display: inline-flex !important; + flex: 0 0 auto !important; + width: auto !important; + max-width: none !important; + min-width: 0 !important; + margin: 0 !important; + } + + .site-nav a, + .nav-dropdown-toggle { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: auto !important; + min-width: 0 !important; + max-width: none !important; + margin: 0 !important; + text-align: center !important; + line-height: 1.1 !important; + font-size: 13px !important; + padding: 4px 0 !important; + } + + .nav-dropdown { + display: inline-flex !important; + align-items: center !important; + } + + .nav-dropdown-toggle::after { + margin-left: 8px !important; + } + + .nav-dropdown-menu { + top: calc(100% + 6px) !important; + } +} + + +/* ========================================================= + Mobile-only: remove Services/Industries dropdown behavior + and keep nav as simple wrapped tabs +========================================================= */ +@media (max-width: 900px) { + .site-nav { + width: 100% !important; + max-width: 100% !important; + justify-content: center !important; + gap: 10px 16px !important; + padding: 0 12px !important; + } + + .site-nav a, + .nav-dropdown-toggle { + font-size: 12px !important; + padding: 4px 0 !important; + letter-spacing: 0.035em !important; + } + + .nav-dropdown-toggle::after, + .nav-dropdown-toggle::before { + display: none !important; + content: none !important; + } + + .nav-dropdown-menu { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; + } + + .nav-dropdown.open .nav-dropdown-menu, + .nav-dropdown:hover .nav-dropdown-menu { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; + } + + .nav-dropdown, + .site-nav > .nav-dropdown { + display: inline-flex !important; + width: auto !important; + } + + .nav-dropdown-toggle { + background: transparent !important; + border: 0 !important; + box-shadow: none !important; + border-radius: 0 !important; + } + + .nav-dropdown.open .nav-dropdown-toggle, + .nav-dropdown:hover .nav-dropdown-toggle { + color: var(--text) !important; + } +} + +/* Zoho CRM Webform splash message - scoped to Contact page form only */ +.wf_customMessageBox { + font-family: Arial, Helvetica, sans-serif; + color: #132C14; + background: #F5FAF5; + box-shadow: 0 2px 6px 0 rgba(0,0,0,0.25); + max-width: 90%; + width: max-content; + word-break: break-word; + z-index: 11000; + border-radius: 6px; + border: 1px solid #A9D3AB; + min-width: 100px; + padding: 10px 15px; + align-items: center; + position: fixed; + top: 20px; + left: 50%; + transform: translate(-50%, 0); +} +.wf_customCircle { + position: relative; + background-color: #12AA67; + border-radius: 100%; + width: 20px; + height: 20px; + flex: none; + margin-right: 7px; +} +.wf_customCheckMark { + box-sizing: unset !important; + position: absolute; + transform: rotate(45deg) translate(-50%, -50%); + left: 6px; + top: 9px; + height: 8px; + width: 3px; + border-bottom: 2px solid #fff; + border-right: 2px solid #fff; +} +.wf_customClose { + box-sizing: border-box; + position: relative; + width: 18px; + height: 18px; + margin-left: 12px; + border: 0; + background: transparent; + cursor: pointer; +} +.wf_customClose::after, +.wf_customClose::before { + content: ''; + display: block; + box-sizing: border-box; + position: absolute; + width: 12px; + height: 1.5px; + background: #616E88; + transform: rotate(45deg); + border-radius: 5px; + top: 8px; + left: 3px; +} +.wf_customClose::after { + transform: rotate(-45deg); +}