/* ================================================================
Invoti Design System — Shared Styles
Modern responsive site: mobile-first, all breakpoints
Fonts: Montserrat (display) + Nunito Sans (body)
Note: Google Fonts CSS is enqueued via functions.php (invoti-fonts);
do not @import here — that would duplicate the network request.
================================================================ */
/* ================================================================
DESIGN DIRECTION — Invoti Brand Vocabulary
Source: Invoti Brandbook (June 2026)
Brand character: Trust-first B2B for state, local, and enterprise
clients. Deep navy authority, steel-blue precision, and a single
purposeful purple brand accent. No warmth, no orange, no gradient
decoration.
BRAND PALETTE (from Brandbook, canonical):
#0E4374 --n800 Primary navy
#19578F --n700 Medium navy
#0070C0 --b600 Brand blue
#40AFFF --b400 Light blue
#631BA0 --accent Brand purple (primary accent - CTA buttons, links)
#7F7F7F --g700 Mid gray
#404040 --g900 Dark gray
Typography: Montserrat (display, heavy weight) + Nunito Sans (body,
generous line-height). Helvetica as system fallback. Never inject
serif; never mix a third family.
Motion: Functional, purposeful, fast. UI transitions under 250ms.
Ease-out for all enters (user is watching the opening moment). No
bounce. No infinite loops on repeated-use components. Stagger grids
at 60-80ms intervals (not 150-300ms - too slow reads as laggy).
Easing vocabulary:
--ease-out → strong expo ease-out: all UI interactions entering
--ease-in-out → strong S-curve: elements moving across the screen
--ease-spring → subtle spring: card lifts, icon pops
Anti-patterns (banned):
- transition: all (always specify exact properties)
- ease-in on any UI element (starts slow, feels broken)
- Side-stripe border-left accents on callouts / list items
- Gradient text (background-clip: text)
- Identical card grids with no visual variation
- Uppercase eyebrow above every section header (max 1 per 3 sections)
- Numbered section markers (01 / 02 / 03) as default scaffolding
- scale(0) entry animations (start from scale(0.95) + opacity 0)
- Animations without prefers-reduced-motion fallback
- Any orange/amber tones (#A34A0E and family) - NOT in brand palette
================================================================ */
/* ── Tokens ──────────────────────────────────────────────────── */
/* Color migrated to OKLCH (perceptually uniform). Source hex kept in
trailing comments — values are visually identical to the prior sRGB
palette, so no brand color drifts. Property NAMES are unchanged;
nothing in JS/PHP/selectors references token values, only var() reads. */
:root {
--n900: oklch(27.2% 0.0536 238.7); /* #072A3E primary dark navy */
--n800: oklch(37.7% 0.0992 251.2); /* #0E4374 primary navy */
--n700: oklch(44.8% 0.1105 250.1); /* #19578F medium navy */
--b600: oklch(53.6% 0.1504 249.7); /* #0070C0 brand blue */
--b400: oklch(72.7% 0.1526 244.3); /* #40AFFF light blue */
--b200: oklch(86.2% 0.0740 243.2); /* #A8D8FF pale blue */
--s600: oklch(52.0% 0.0339 248.5); /* #5A6B7C steel */
--s500: oklch(52.0% 0.0339 248.5); /* alias of s600 (kept for refs) */
--s400: oklch(73.3% 0.0300 246.6); /* #9AABBB */
--s300: oklch(84.3% 0.0184 245.4); /* #C2CDD7 */
--s100: oklch(95.2% 0.0076 241.7); /* #EBF0F4 */
--g900: oklch(26.9% 0.0000 240); /* #262626 ink */
--g700: oklch(37.1% 0.0000 240); /* #404040 */
--g500: oklch(47.5% 0.0000 240); /* #5C5C5C */
--accent: oklch(41.6% 0.1943 302.8); /* #631BA0 brand purple */
--accent-dark: oklch(35.6% 0.1628 302.4); /* #4E1680 purple hover */
--accent-tint: oklch(41.6% 0.1943 302.8 / .10);
--green: oklch(41.9% 0.0868 134.3); /* #385723 */
--bg: oklch(97.5% 0.0045 258.3); /* #F5F7FA cool paper */
--border: oklch(92.9% 0.0126 255.5);/* #E2E8F0 */
--white: #fff;
/* Portal (PRODUCT) aliases — previously undefined, so portal.css fell
back to a non-brand blue (#1a56db). Defining them aligns the portal
to the Invoti brand palette without renaming any portal selectors. */
--brand: oklch(53.6% 0.1504 249.7); /* = b600 brand blue */
--s50: oklch(98.2% 0.0060 250); /* faint blue surface */
--s200: oklch(89.0% 0.0150 250); /* subtle blue border */
--font-d: 'Montserrat', Helvetica, Arial, sans-serif;
--font-b: 'Nunito Sans', Helvetica, Arial, sans-serif;
--ease: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out — all UI entries */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* alias for clarity */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* S-curve — on-screen movement */
--ease-spring: cubic-bezier(0.34, 1.20, 0.64, 1); /* light spring — card lifts */
--r4: 4px; --r8: 8px; --r12: 12px; --r16: 16px;
/* Spacing scale (additive — existing px paddings still valid) */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
/* Elevation — tinted toward navy (n900 7,42,62) instead of pure black */
--shadow-sm: 0 1px 3px rgba(7,42,62,.10), 0 1px 2px rgba(7,42,62,.06);
--shadow-md: 0 4px 16px rgba(7,42,62,.12);
--shadow-lg: 0 12px 40px rgba(7,42,62,.16);
}
/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-b); color: var(--g900); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* ── Layout ──────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.sec { padding: clamp(56px,8vw,100px) 0; }
.sec-sm{ padding: clamp(32px,5vw,56px) 0; }
/* ── Typography ──────────────────────────────────────────────── */
/* Eyebrow = Invoti's deliberate section kicker (a brand system element,
not per-section scaffolding). Distinctive pip + hairline treatment so
repetition reads as voice. */
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-d); font-size: 11px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--n700);
margin-bottom: 16px;
}
.eyebrow::before {
content:''; display:block; width:6px; height:6px; flex-shrink:0;
background:var(--b600); border-radius:50%;
box-shadow: 0 0 0 4px var(--accent-tint);
}
/* On dark navy surfaces keep the kicker legible (light blue, not navy). */
.hero .eyebrow, .page-hero .eyebrow, .cta-sect .eyebrow, .stats-band .eyebrow {
color: var(--b400);
}
.hero .eyebrow::before, .page-hero .eyebrow::before,
.cta-sect .eyebrow::before, .stats-band .eyebrow::before {
background: var(--b400); box-shadow: 0 0 0 4px rgba(64,175,255,.18);
}
.h-display { font-family: var(--font-d); font-size: clamp(38px,6vw,72px); font-weight: 900; line-height:1.02; letter-spacing:-.035em; text-wrap: balance; }
.h-section { font-family: var(--font-d); font-size: clamp(27px,4vw,44px); font-weight: 800; line-height:1.12; letter-spacing:-.025em; text-wrap: balance; }
.h-card { font-family: var(--font-d); font-size: 18px; font-weight: 700; line-height:1.3; text-wrap: balance; }
.body-lg { font-size: clamp(15px,2vw,18px); color: var(--s600); line-height:1.75; text-wrap: pretty; max-width: 68ch; }
.body-md { font-size: 15px; color: var(--g700); line-height:1.7; text-wrap: pretty; max-width: 72ch; }
/* Accessibility: skip link, visible on keyboard focus only */
.skip-link {
position:absolute; left:0; top:-48px;
background:var(--n800); color:#fff; font-weight:700; font-size:14px;
padding:10px 16px; border-radius:0 0 8px 0;
z-index:9999; transition:top 150ms ease;
}
.skip-link:focus { top:0; outline:2px solid var(--accent); outline-offset:2px; }
main:focus { outline:none; }
.body-sm { font-size: 13px; color: var(--s500); line-height:1.6; }
.label { font-size: 11px; font-weight: 700; letter-spacing:.08em; text-transform:uppercase; color:var(--s500); }
/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-b); font-weight: 700; font-size: 14px;
padding: 13px 28px; border-radius: var(--r8); border: 2px solid transparent;
cursor: pointer; white-space: nowrap; letter-spacing:.01em;
transition: background-color 160ms ease, border-color 160ms ease,
color 150ms ease, transform 180ms var(--ease-out),
box-shadow 200ms var(--ease-out), gap 180ms var(--ease-out);
}
.btn:active { transform: scale(0.97) !important; box-shadow: none !important; }
.btn-primary { background:var(--n800); color:#fff; border-color:var(--n800); }
.btn-primary:hover { background:var(--n900); border-color:var(--n900); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline { background:transparent; color:var(--n800); border-color:var(--n800); }
.btn-outline:hover { background:var(--n800); color:#fff; transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--b600); border-color:transparent; padding-left:0; }
.btn-ghost:hover { color:var(--n800); gap:12px; }
.btn-white { background:#fff; color:var(--n800); border-color:#fff; }
.btn-white:hover { background:var(--s100); transform:translateY(-2px); }
.btn-accent { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-accent:hover { background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-2px); box-shadow:0 4px 16px rgba(99,27,160,.28); }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn-lg { padding: 16px 36px; font-size: 16px; }
.btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
/* ── Nav ─────────────────────────────────────────────────────── */
.nav {
position: sticky; top: 0; z-index: 200;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
transition: box-shadow 200ms var(--ease);
}
.nav.scrolled { box-shadow: var(--shadow-md); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height: 68px; gap: 24px; }
.nav-logo img { height: 44px; }
.nav-links { display:none; align-items:center; gap:4px; }
.nav-link {
font-size: 15px; font-weight: 600; color: var(--g700);
padding: 9px 15px; border-radius: var(--r8);
transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.nav-link:hover { background-color:var(--s100); color:var(--n800); }
.nav-link.is-active { color:var(--n800); background:var(--s100); }
.nav-actions { display:none; align-items:center; gap:8px; }
/* hamburger */
.ham { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:8px; border:none; background:none; }
.ham span { width:22px; height:2px; background:var(--n800); border-radius:2px; transition:transform 220ms var(--ease-out), opacity 180ms ease; display:block; }
.ham.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.ham.open span:nth-child(2) { opacity:0; }
.ham.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
/* mobile drawer */
.nav-drawer {
display:none; position:fixed; inset:68px 0 0 0; background:#fff;
z-index:199; flex-direction:column; padding:20px 16px 32px; gap:4px;
border-top:1px solid var(--border); overflow-y:auto;
}
.nav-drawer.open { display:flex; }
.nav-drawer .nav-link { font-size:17px; padding:14px 16px; }
.nav-drawer-cta { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
@media(min-width:900px){
.nav-links, .nav-actions { display:flex; }
.ham { display:none; }
}
/* ── Hero (dark) ─────────────────────────────────────────────── */
.hero {
background: var(--n900);
position:relative; overflow:hidden;
padding: clamp(80px,10vw,130px) 0 clamp(64px,8vw,100px);
}
.hero-bg {
position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(ellipse 70% 60% at 110% 50%, rgba(64,175,255,.10) 0%, transparent 70%),
radial-gradient(ellipse 40% 80% at -10% 80%, rgba(14,67,116,.6) 0%, transparent 60%);
}
/* abstract digital pattern — diagonal hex/line grid, very subtle */
.hero-bg::before {
content:''; position:absolute; inset:0; opacity:.18;
background-image: url("data:image/svg+xml;utf8,");
background-size: 280px 280px;
mix-blend-mode: screen;
}
/* dot grid */
.hero-bg::after {
content:''; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
background-size: 32px 32px;
}
.hero-grid { display:grid; grid-template-columns:1fr; gap:48px; align-items:center; position:relative; }
.hero-tag { display:inline-flex; align-items:center; gap:8px; background:rgba(64,175,255,.12); border:1px solid rgba(64,175,255,.25); border-radius:999px; padding:6px 16px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--b400); margin-bottom:20px; }
.hero h1 { color:#fff; margin-bottom:20px; }
.hero h1 em { font-style:normal; color:var(--b400); }
.hero-sub { max-width:520px; margin-bottom:36px; }
.hero-sub, .hero p { color:var(--s400); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-stats { display:flex; flex-wrap:wrap; gap: clamp(16px,4vw,48px); margin-top:clamp(40px,6vw,72px); padding-top:clamp(32px,4vw,48px); border-top:1px solid rgba(255,255,255,.1); }
.hero-stat .num { font-family:var(--font-d); font-size:clamp(28px,4vw,42px); font-weight:900; color:#fff; line-height:1; letter-spacing:-.03em; }
.hero-stat .num em { color:var(--b400); font-style:normal; }
.hero-stat .lbl { font-size:12px; color:var(--s500); margin-top:5px; }
@media(min-width:768px){ .hero-grid { grid-template-columns:1fr 1fr; } }
/* ── Page Hero (interior pages) ──────────────────────────────── */
/* Interior page hero — intentionally calmer than the home flagship hero:
no dot-grid/hex motif; an asymmetric corner glow + a brand-blue baseline
give interior routes their own identity. */
.page-hero { background:var(--n900); padding:clamp(56px,8vw,96px) 0 clamp(40px,5vw,64px); position:relative; overflow:hidden;
border-bottom:2px solid var(--b600); }
.page-hero::before { content:''; position:absolute; inset:0;
background:
radial-gradient(ellipse 50% 70% at 0% 0%, rgba(64,175,255,.10) 0%, transparent 58%),
linear-gradient(110deg, transparent 55%, rgba(14,67,116,.55) 100%);
pointer-events:none; z-index:0; }
.page-hero::after { content:''; position:absolute; inset:auto 0 0 0; height:1px;
background:linear-gradient(90deg, transparent, rgba(64,175,255,.55), transparent);
pointer-events:none; z-index:1; }
.page-hero .wrap { position:relative; z-index:1; }
.page-hero .breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--s500); margin-bottom:20px; }
.page-hero .breadcrumb a { color:var(--s400); transition:color 150ms; }
.page-hero .breadcrumb a:hover { color:#fff; }
.page-hero .breadcrumb span { color:var(--s600); }
.page-hero h1 { color:#fff; margin-bottom:16px; }
.page-hero p { color:var(--s400); max-width:600px; font-size:clamp(15px,2vw,18px); line-height:1.7; }
/* ── Service Cards ───────────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px; }
.svc-card {
background:#fff; border:1px solid var(--border); border-radius:var(--r12);
padding:28px; display:flex; flex-direction:column; gap:0;
transition: border-color 220ms var(--ease-out), box-shadow 240ms var(--ease-out),
transform 220ms var(--ease-spring), background-color 220ms var(--ease-out);
cursor:pointer; position:relative; overflow:hidden;
}
.svc-card::before {
content:''; position:absolute; inset:0; background:var(--n800); opacity:0;
transition:opacity 220ms var(--ease);
}
.svc-card:hover::before { opacity:1; }
.svc-card:hover { border-color:var(--n800); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.svc-card:active { transform:translateY(-1px); box-shadow:var(--shadow-sm); }
/* stagger children within services grid */
.services-grid .svc-card:nth-child(1) { animation-delay: 0ms; }
.services-grid .svc-card:nth-child(2) { animation-delay: 60ms; }
.services-grid .svc-card:nth-child(3) { animation-delay:120ms; }
.services-grid .svc-card:nth-child(4) { animation-delay:180ms; }
.services-grid .svc-card:nth-child(5) { animation-delay:240ms; }
.services-grid .svc-card:nth-child(6) { animation-delay:300ms; }
.services-grid .svc-card:nth-child(7) { animation-delay:360ms; }
.services-grid .svc-card:nth-child(8) { animation-delay:400ms; }
.services-grid .svc-card:nth-child(9) { animation-delay:440ms; }
.svc-card > * { position:relative; z-index:1; }
.svc-icon { width:48px; height:48px; background:var(--s100); border-radius:var(--r8); display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:background 220ms; flex-shrink:0; }
.svc-icon svg { width:22px; height:22px; stroke:var(--n800); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke 220ms; }
.svc-card:hover .svc-icon { background:rgba(255,255,255,.12); }
.svc-card:hover .svc-icon svg { stroke:#fff; }
.svc-card h3 { font-family:var(--font-d); font-size:16px; font-weight:700; color:var(--n900); margin-bottom:10px; line-height:1.3; transition:color 220ms; }
.svc-card p { font-size:14px; color:var(--g500); line-height:1.65; flex:1; transition:color 220ms; }
.svc-card:hover h3, .svc-card:hover p { color:#fff; }
.svc-link { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--b600); margin-top:20px; transition:color 180ms var(--ease-out), gap 200ms var(--ease-spring); letter-spacing:.02em; }
.svc-link svg { width:11px; height:11px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:.8; transition:transform 200ms var(--ease-spring), opacity 180ms ease; }
.svc-card:hover .svc-link svg { transform:translateX(4px); opacity:1; }
.svc-card:hover .svc-link { color:var(--b400); gap:10px; }
/* ── Stats Band ──────────────────────────────────────────────── */
.stats-band { background:var(--n800); }
.stats-row { display:grid; grid-template-columns:repeat(2,1fr); }
@media(min-width:640px){ .stats-row { grid-template-columns:repeat(4,1fr); } }
.stat-cell { padding:clamp(28px,5vw,48px) clamp(20px,4vw,40px); border-right:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.stat-cell:nth-child(2n){ border-right:none; }
@media(min-width:640px){
.stat-cell:nth-child(2n){ border-right:1px solid rgba(255,255,255,.08); }
.stat-cell:nth-child(4n){ border-right:none; }
.stat-cell { border-bottom:none; }
}
.stat-cell .n { font-family:var(--font-d); font-size:clamp(32px,4vw,48px); font-weight:900; color:#fff; line-height:1; letter-spacing:-.03em; }
.stat-cell .n em { color:var(--b400); font-style:normal; }
.stat-cell .l { font-size:13px; color:var(--s400); margin-top:6px; line-height:1.4; }
/* ── Why cards ───────────────────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.why-card { background:#fff; border:1px solid var(--border); border-radius:var(--r12); padding:28px;
position:relative; overflow:hidden;
transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-spring), border-color 180ms ease; }
/* top accent rule that wipes in on hover — distinguishes why-cards from svc-cards */
.why-card::before {
content:''; position:absolute; inset:0 0 auto 0; height:3px;
background:var(--accent); transform:scaleX(0); transform-origin:left;
transition:transform 320ms var(--ease-out);
}
.why-card:hover::before { transform:scaleX(1); }
.why-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--s300); }
.why-num { font-family:var(--font-d); font-size:52px; font-weight:900; color:var(--b200); line-height:1; margin-bottom:12px; letter-spacing:-.04em;
transition:color 220ms var(--ease-out); }
.why-card:hover .why-num { color:var(--b400); }
.why-card h4 { font-family:var(--font-d); font-size:15px; font-weight:700; color:var(--n800); margin-bottom:8px; }
.why-card p { font-size:14px; color:var(--g500); line-height:1.65; }
/* ── CTA Banner ──────────────────────────────────────────────── */
.cta-sect {
background:var(--n900); padding:clamp(64px,8vw,100px) 0;
position:relative; overflow:hidden; text-align:center;
}
.cta-sect::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 120%, rgba(64,175,255,.08) 0%,transparent 60%); pointer-events:none; z-index:0; }
.cta-sect::after { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; z-index:0; }
.cta-sect .wrap { position:relative; z-index:1; }
.cta-sect h2 { color:#fff; margin-bottom:16px; }
.cta-sect p { color:var(--s400); font-size:clamp(15px,2vw,18px); max-width:520px; margin:0 auto 36px; line-height:1.7; }
.cta-acts { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
/* ── Contact form ────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:640px){ .form-grid-2 { grid-template-columns:1fr 1fr; } }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:13px; font-weight:600; color:var(--g700); }
.field input, .field select, .field textarea {
font-family:var(--font-b); font-size:15px; color:var(--g900);
background:#fff; border:1.5px solid var(--border); border-radius:var(--r8);
padding:12px 16px; outline:none; width:100%;
transition:border-color 180ms, box-shadow 180ms;
}
.field input:focus,.field select:focus,.field textarea:focus {
border-color:var(--b600); box-shadow:0 0 0 3px rgba(0,112,192,.12);
}
.field textarea { resize:vertical; min-height:140px; }
.field .hint { font-size:12px; color:var(--s500); }
/* ── Footer ──────────────────────────────────────────────────── */
footer { background:#fff !important; color:var(--g700); border-top:1px solid var(--border); }
.footer-main { padding:clamp(48px,6vw,80px) 0 clamp(32px,4vw,48px); }
.footer-grid { display:grid; grid-template-columns:1fr; gap:40px; }
@media(min-width:640px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media(min-width:900px){ .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; } }
.footer-brand p { font-size:14px; line-height:1.75; margin-top:16px; max-width:280px; color:var(--g500); }
.footer-logo { display:inline-block; margin-bottom:8px; }
.footer-logo img { height:40px; filter:none !important; }
.footer-col .footer-h { font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--n800); margin-bottom:16px; }
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col li a { font-size:14px; color:var(--g500); transition:color 160ms var(--ease-out), transform 160ms var(--ease-spring); display:inline-block; }
.footer-col li a:hover { color:var(--n800); transform:translateX(3px); }
.footer-bottom { border-top:1px solid var(--border); padding:20px 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; color:var(--g500); }
.footer-bottom a { color:var(--g500); transition:color 150ms; }
.footer-bottom a:hover { color:var(--n800); }
/* ── Divider ─────────────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:0; }
/* ── Responsive helpers ──────────────────────────────────────── */
@media(max-width:767px){ .hide-mobile { display:none !important; } }
@media(min-width:768px){ .hide-desktop { display:none !important; } }
/* ── Utility ─────────────────────────────────────────────────── */
.text-center { text-align:center; }
.text-white { color:#fff !important; }
.bg-subtle { background:var(--bg); }
.mt-8 { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mt-32 { margin-top:32px; }
.mt-48 { margin-top:48px; }
.gap-12 { gap:12px; }
.flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.col { flex-direction:column; }
/* ── Fade-in animation ───────────────────────────────────────── */
@keyframes fadeUp {
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:translateY(0); }
}
.fade-up { animation: fadeUp 520ms var(--ease-out) both; }
.fade-up-2 { animation: fadeUp 520ms 80ms var(--ease-out) both; }
.fade-up-3 { animation: fadeUp 520ms 160ms var(--ease-out) both; }
.fade-up-4 { animation: fadeUp 520ms 240ms var(--ease-out) both; }
.fade-up-5 { animation: fadeUp 520ms 320ms var(--ease-out) both; }
.fade-up-6 { animation: fadeUp 520ms 400ms var(--ease-out) both; }
/* ── Shared nav JS ───────────────────────────────────────────── */
/* ============================================================================
WPForms + Contact Form 7 styling overrides
============================================================================
The Contact form (page-contact.php) renders via WPForms Lite (.wpforms-form).
The Business Inquiry form (page-business-inquiry.php) renders via Contact
Form 7 (.wpcf7-form). Both shortcodes emit their own markup with their own
classes — these rules normalize both to the Invoti design system so the
plugin-rendered forms look identical to the original handcoded markup.
============================================================================ */
/* ── Reset both plugin containers ──────────────────────────── */
.wpforms-container,
.wpcf7 {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.wpforms-form,
.wpcf7-form {
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hide the form title/description rendered by plugins (we use page H2 instead) */
.wpforms-head-container,
.wpforms-title { display: none !important; }
.wpcf7-form > h1, .wpcf7-form > h2, .wpcf7-form > h3:first-child { display: none; }
/* ── Field row spacing ─────────────────────────────────────── */
.wpforms-form .wpforms-field,
.wpcf7-form p,
.wpcf7-form label {
padding: 0 !important;
margin: 0 0 16px 0 !important;
border: none !important;
}
/* ── Labels ────────────────────────────────────────────────── */
.wpforms-form .wpforms-field-label,
.wpcf7-form label {
display: block !important;
font-family: var(--font-d) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: var(--n900) !important;
margin-bottom: 8px !important;
padding: 0 !important;
}
/* Required-field asterisk colored to match accent */
.wpforms-required-label,
.wpcf7-form .wpcf7-not-valid-tip + label,
.wpcf7-form span.wpcf7-form-control-wrap[data-name^="*"]::before {
color: var(--accent) !important;
font-weight: 700 !important;
}
/* ── Inputs, textareas, selects ────────────────────────────── */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form input[type="number"],
.wpforms-form textarea,
.wpforms-form select,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
width: 100% !important;
max-width: 100% !important;
font-family: var(--font-b) !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
color: var(--n900) !important;
background-color: #fff !important;
border: 1px solid var(--border) !important;
border-radius: var(--r4) !important;
padding: 12px 14px !important;
margin: 0 !important;
transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease) !important;
box-shadow: none !important;
}
.wpforms-form textarea,
.wpcf7-form textarea {
min-height: 120px !important;
font-family: var(--font-b) !important;
resize: vertical;
}
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
outline: none !important;
border-color: var(--b600) !important;
box-shadow: 0 0 0 3px rgba(0,112,192,0.12) !important;
}
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
color: var(--s500) !important;
opacity: 1;
}
/* Select arrow — single chevron, no repeat */
.wpforms-form select,
.wpcf7-form select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 12px 8px !important;
padding-right: 40px !important;
}
/* Hide the IE/Edge native arrow (just in case) */
.wpforms-form select::-ms-expand,
.wpcf7-form select::-ms-expand {
display: none !important;
}
/* ── Checkboxes (CF7 services-of-interest pattern) ─────────── */
.wpcf7-form .wpcf7-checkbox {
display: flex !important;
flex-wrap: wrap;
gap: 10px;
}
@media (min-width: 700px) {
.wpcf7-form .wpcf7-checkbox { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
}
.wpcf7-form .wpcf7-list-item {
display: block !important;
margin: 0 !important;
}
.wpcf7-form .wpcf7-list-item label {
display: flex !important;
align-items: center;
gap: 10px;
padding: 11px 14px !important;
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: var(--r4) !important;
cursor: pointer;
font-family: var(--font-b) !important;
font-size: 13.5px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--g700) !important;
transition: background 160ms, border-color 160ms;
margin: 0 !important;
}
.wpcf7-form .wpcf7-list-item label:hover {
border-color: var(--n800) !important;
background: var(--bg) !important;
}
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
margin: 0 !important;
flex-shrink: 0;
accent-color: var(--n800);
}
/* ── WPForms checkbox / radio (Reason dropdown is a select; this is for any future checkbox use) ── */
.wpforms-form .wpforms-field-checkbox ul,
.wpforms-form .wpforms-field-radio ul {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: 1fr; gap: 10px;
}
@media (min-width: 700px) {
.wpforms-form .wpforms-field-checkbox ul,
.wpforms-form .wpforms-field-radio ul { grid-template-columns: 1fr 1fr; }
}
.wpforms-form .wpforms-field-checkbox li,
.wpforms-form .wpforms-field-radio li { margin: 0; }
.wpforms-form .wpforms-field-checkbox label,
.wpforms-form .wpforms-field-radio label {
display: flex !important; align-items: center; gap: 10px !important;
padding: 11px 14px !important;
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: var(--r4) !important;
cursor: pointer;
font-size: 13.5px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--g700) !important;
margin: 0 !important;
}
/* ── File upload field (CF7) ──────────────────────────────── */
.wpcf7-form input[type="file"] {
width: 100% !important;
padding: 14px !important;
background: var(--bg) !important;
border: 1.5px dashed var(--s300) !important;
border-radius: var(--r4) !important;
font-family: var(--font-b) !important;
font-size: 13px !important;
color: var(--g700) !important;
cursor: pointer;
}
.wpcf7-form input[type="file"]:hover {
background: #fff !important;
border-color: var(--n800) !important;
}
.wpcf7-form input[type="file"]::file-selector-button {
font-family: var(--font-d);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
background: var(--n800);
color: #fff;
border: none;
padding: 8px 14px;
border-radius: var(--r4);
cursor: pointer;
margin-right: 14px;
}
/* ── Submit buttons ────────────────────────────────────────── */
.wpforms-form button.wpforms-submit,
.wpforms-form input.wpforms-submit,
.wpcf7-form input.wpcf7-submit,
.wpcf7-form button.wpcf7-submit {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-d) !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: .04em !important;
line-height: 1 !important;
text-transform: uppercase !important;
padding: 16px 28px !important;
background: var(--accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--r4) !important;
cursor: pointer;
transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background-color 180ms !important;
box-shadow: 0 2px 6px rgba(99,27,160,0.28);
margin: 8px 0 0 0 !important;
}
.wpforms-form button.wpforms-submit:hover,
.wpforms-form input.wpforms-submit:hover,
.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form button.wpcf7-submit:hover {
background: #4E1680 !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99,27,160,0.35);
}
.wpforms-form button.wpforms-submit:active,
.wpcf7-form input.wpcf7-submit:active { transform: translateY(0) scale(0.97); }
/* ── Validation states ─────────────────────────────────────── */
.wpforms-form .wpforms-error,
.wpcf7-form .wpcf7-not-valid-tip,
.wpcf7-form .wpcf7-response-output {
font-size: 12.5px !important;
font-weight: 600 !important;
color: #b91c1c !important;
margin-top: 6px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.wpforms-form input.wpforms-error,
.wpforms-form textarea.wpforms-error,
.wpforms-form select.wpforms-error,
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid {
border-color: #b91c1c !important;
}
.wpcf7-form .wpcf7-response-output {
margin-top: 16px !important;
padding: 12px 16px !important;
border-radius: var(--r4) !important;
}
.wpcf7-form .wpcf7-mail-sent-ok ~ .wpcf7-response-output,
.wpcf7-form .wpcf7-mail-sent-ok {
background: rgba(56,87,35,0.08) !important;
border: 1px solid rgba(56,87,35,0.25) !important;
color: var(--green) !important;
}
/* ── Section-header helpers (CF7 manual section breaks) ────── */
/* ── Section dividers (text-only, no number badge) ────────── */
.ff-section-head {
display: block !important;
margin: 36px 0 20px 0 !important;
padding: 24px 0 0 0 !important;
border-top: 1px solid var(--border) !important;
}
.ff-section-head:first-of-type,
.wpcf7-form > p:first-of-type .ff-section-head,
.wpcf7-form .ff-section-head:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
}
/* Hide the legacy number circle markup if it's still in the form */
.ff-section-num { display: none !important; }
.ff-section-head h3 {
font-family: var(--font-d) !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--b600) !important;
line-height: 1.4 !important;
margin: 0 !important;
padding: 0 !important;
}
/* If CF7 wraps the section head in a , neutralize wrapper margin */
.wpcf7-form p:has(> .ff-section-head) {
margin: 0 !important;
padding: 0 !important;
}
/* ── Form heading + subtitle (rendered above CF7/WPForms shortcode) ── */
.ff-form-heading {
font-family: var(--font-d);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--s500);
line-height: 1.4;
margin: 0 0 8px 0;
}
.ff-form-sub {
font-family: var(--font-b);
font-size: 14px;
color: var(--g700);
line-height: 1.65;
margin: 0 0 28px 0;
max-width: 580px;
}
.ff-form-sub a { color: var(--b600); font-weight: 700; }
.ff-form-sub a:hover { color: var(--n800); }
/* ── Hide WPForms branding link (Lite-tier) ────────────────── */
/* If you've decided to remove the "Powered by WPForms" link, uncomment: */
/*
.wpforms-container::after,
.wpforms-container .wpforms-credit { display: none !important; }
*/
/* ── Reduced motion (mandatory) ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Keep opacity/color for comprehension; strip movement */
.btn, .nav-link, .svc-card, .why-card, .footer-col li a {
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease !important;
transform: none !important;
}
.fade-up, .fade-up-2, .fade-up-3, .fade-up-4, .fade-up-5, .fade-up-6 {
animation: none !important;
opacity: 1 !important;
}
}