diff --git a/projects/acg-website-showcase/multipage/css/styles.css b/projects/acg-website-showcase/multipage/css/styles.css index 0b30688a..48590660 100644 --- a/projects/acg-website-showcase/multipage/css/styles.css +++ b/projects/acg-website-showcase/multipage/css/styles.css @@ -213,7 +213,7 @@ a:hover { color: var(--ink); } .wrap { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; } .wrap--narrow { width: min(100% - 3rem, 760px); margin-inline: auto; } -section { padding-block: calc(var(--base) * 3.5); } +section { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); } .section-tag { font-family: var(--f-mono); font-size: 0.72rem; @@ -315,7 +315,20 @@ h3 { font-size: 1.5rem; font-weight: 600; } .nav__link--cta { color: var(--accent-ink) !important; font-weight: 600; } .nav__link--cta:hover { color: var(--accent) !important; } .nav__link--cta::after { background: var(--accent); } -.nav__phone { font-family: var(--f-mono); color: var(--ink) !important; font-weight: 500; } +.nav__phone { + font-family: var(--f-mono); color: var(--ink) !important; font-weight: 500; + display: flex; align-items: center; gap: 0.5rem; +} +.radio-badge { + font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; + background: var(--accent); color: var(--on-accent); + padding: 1px 5px; border-radius: 2px; + animation: pulse-subtle 2s ease-in-out infinite; +} +@keyframes pulse-subtle { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.75; } +} .theme-toggle, .nav__toggle { background: transparent; border: 1px solid var(--rule); border-radius: 2px; width: 44px; height: 44px; cursor: pointer; color: var(--ink); @@ -402,7 +415,11 @@ h3 { font-size: 1.5rem; font-weight: 600; } } /* ---- Services (continuous ledger list, not cards) ----------------------- */ -.svc-list { border-top: 1px solid var(--rule); margin-top: var(--base); } +.svc-list { + border-top: 1px solid var(--rule); + margin-top: var(--base); + margin-bottom: calc(var(--base) * 1.5); +} .svc { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 1.25rem; align-items: baseline; padding-block: calc(var(--base) * 0.9); @@ -420,6 +437,18 @@ h3 { font-size: 1.5rem; font-weight: 600; } .svc__no { font-family: var(--f-mono); font-size: 0.8rem; color: var(--ink-3); } .svc__name { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; } .svc__desc { color: var(--ink-2); font-size: 0.98rem; margin-top: 0.25rem; max-width: 60ch; } +.svc__calc-link { + font-family: var(--f-mono); + font-size: 0.85rem; + color: var(--accent-ink); + text-decoration: none; + white-space: nowrap; + transition: color var(--t-fast); +} +.svc__calc-link:hover { + color: var(--accent); + text-decoration: underline; +} .svc__meta { font-family: var(--f-mono); font-size: 0.82rem; color: var(--accent-ink); text-align: right; white-space: nowrap; } @media (max-width: 680px) { @@ -790,6 +819,7 @@ select:focus, .stepper input:focus, input:focus { outline: 2px solid var(--accen background: var(--rule); border: 1px solid var(--rule); margin-top: var(--base); + margin-bottom: calc(var(--base) * 1.5); } .dispatch-card { @@ -892,6 +922,82 @@ select:focus, .stepper input:focus, input:focus { outline: 2px solid var(--accen font-weight: 700; } +/* ---- 3-Step Funnel ---------------------------------------------------- */ +.funnel-steps { + padding-block: calc(var(--base) * 1.25); + background: var(--surface); + border-block: 1px solid var(--rule); +} +.funnel-track { + display: flex; + align-items: center; + justify-content: center; + gap: clamp(1rem, 3vw, 2rem); + flex-wrap: wrap; +} +.funnel-step { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + text-align: center; + min-width: 140px; +} +.funnel-step__num { + font-family: var(--f-display); + font-size: 2rem; + font-weight: 700; + color: var(--accent-ink); + width: 48px; + height: 48px; + border: 2px solid var(--accent); + border-radius: 2px; + display: grid; + place-items: center; + transition: background var(--t-med), color var(--t-med), transform var(--t-fast); +} +.funnel-step:hover .funnel-step__num { + background: var(--accent); + color: var(--on-accent); + transform: translateY(-2px); +} +.funnel-step__label { + font-family: var(--f-display); + font-size: 0.95rem; + font-weight: 600; + color: var(--ink); +} +.funnel-step__link { + font-family: var(--f-mono); + font-size: 0.8rem; + color: var(--accent-ink); + text-decoration: none; + transition: color var(--t-fast); +} +.funnel-step__link:hover { + color: var(--accent); + text-decoration: underline; +} +.funnel-step__note { + font-family: var(--f-mono); + font-size: 0.75rem; + color: var(--ink-2); +} +.funnel-connector { + font-family: var(--f-mono); + font-size: 1.5rem; + color: var(--rule); +} +@media (max-width: 640px) { + .funnel-connector { + display: none; + } + .funnel-track { + flex-direction: column; + gap: 1.5rem; + } +} + /* ---- Radio Ticker Marquee (Pauseable on Hover) ------------------------- */ .radio-ticker { position: fixed; diff --git a/projects/acg-website-showcase/multipage/index.html b/projects/acg-website-showcase/multipage/index.html index f99a452c..492fca52 100644 --- a/projects/acg-website-showcase/multipage/index.html +++ b/projects/acg-website-showcase/multipage/index.html @@ -43,7 +43,7 @@ About Contact - 520.304.8300 + 520.304.8300 ▶ LIVE @@ -72,6 +72,15 @@ + + +
@@ -82,6 +91,31 @@
+ +
+
+
+
+
1
+
Build your estimate
+ Calculator +
+ +
+
2
+
Talk it through
+ Contact +
+ +
+
3
+
Month-to-month start
+ No lock-in +
+
+
+
+
@@ -103,12 +137,12 @@

What we do

-
01

Managed IT (GPS)

24/7 monitoring, automated patching, and a help desk that knows your name.

from $19 /endpoint
-
02

Cybersecurity

EDR, email security, dark-web monitoring, and training that catch what antivirus misses.

in GPS-Pro & up
-
03

Backup & Recovery

Tested backups, offsite copies, and ransomware rollback.

in GPS-Pro & up
-
04

Microsoft 365 & Email

Migrations, licensing, and email that is configured, secured, and supported.

from $2 /mailbox
-
05

Business Phones

Cloud phone systems with mobile and desktop apps, porting, and no usage surprises.

from $22 /user
-
06

Web & Email Hosting

Managed hosting with free SSL, daily backups, and real humans on support.

from $15 /mo
+
01

Managed IT (GPS)

24/7 monitoring, automated patching, and a help desk that knows your name. See what this costs →

from $19 /endpoint
+
02

Cybersecurity

EDR, email security, dark-web monitoring, and training that catch what antivirus misses. See what this costs →

in GPS-Pro & up
+ +
04

Microsoft 365 & Email

Migrations, licensing, and email that is configured, secured, and supported. See what this costs →

from $2 /mailbox
+
05

Business Phones

Cloud phone systems with mobile and desktop apps, porting, and no usage surprises. See what this costs →

from $22 /user
+
06

Web & Email Hosting

Managed hosting with free SSL, daily backups, and real humans on support. See what this costs →

from $15 /mo
See all services
@@ -126,8 +160,8 @@

GPS-Advanced

$39 / endpoint / mo

Enterprise-grade security and compliance.

- Full pricing breakdown - Build an estimate + Build your exact price + See full pricing breakdown