/* ==========================================================================
AK ENTERPRISES — UTILITY CLASSES
Small, single-purpose helpers to apply via Elementor's "CSS Classes" field
instead of repeating inline styles.
========================================================================== */
/* Text gradient (headline accents) */
.ak-text-gradient {
background: var(--ak-gradient-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Backgrounds */
.ak-bg-navy { background-color: var(--ak-navy) !important; }
.ak-bg-blue { background-color: var(--ak-blue) !important; }
.ak-bg-teal { background-color: var(--ak-teal) !important; }
.ak-bg-light-grey { background-color: var(--ak-light-grey) !important; }
.ak-bg-dark { background-color: var(--ak-dark-bg) !important; }
/* Used as the "Ready to..." CTA banner background across the homepage,
every inner page, and all 34 CPT single posts (About/Services/Products/
Industries/AMC + every service & industry detail page) -- enhanced
2026-08-18 with a richer 3-stop gradient and a subtle water motif
(soft bubble dots + a wave silhouette along the bottom edge, both via
inline SVG/CSS so no extra image request), so the improvement lands
consistently everywhere this class is already used. content_width
varies per page, but every usage wraps its content in at least one
child container, so `position:relative` on that gives the overlay a
containing block without needing to touch each page's structure. */
.ak-bg-gradient-primary {
background: linear-gradient(120deg, var(--ak-navy) 0%, var(--ak-blue-text) 55%, var(--ak-teal) 130%) !important;
position: relative;
overflow: hidden !important;
}
/* !important throughout both pseudo-elements: 0000071 (and every other
usage of this class) is an Elementor Container, and Elementor's own
generated CSS gives every container's ::before/::after a background-
overlay/border role that loads after this stylesheet and otherwise wins
the cascade outright for every property here, not just the ones it
actually sets meaningfully -- the exact bug already hit and fixed the
same way on the process section's connector line and card accent bar. */
.ak-bg-gradient-primary::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background-image:
radial-gradient(2px 2px at 8% 25%, rgba(255,255,255,0.35), transparent),
radial-gradient(2px 2px at 18% 65%, rgba(255,255,255,0.22), transparent),
radial-gradient(3px 3px at 32% 15%, rgba(255,255,255,0.28), transparent),
radial-gradient(2px 2px at 48% 55%, rgba(255,255,255,0.2), transparent),
radial-gradient(2px 2px at 63% 30%, rgba(255,255,255,0.25), transparent),
radial-gradient(3px 3px at 78% 60%, rgba(255,255,255,0.2), transparent),
radial-gradient(2px 2px at 90% 20%, rgba(255,255,255,0.25), transparent),
radial-gradient(2px 2px at 95% 70%, rgba(255,255,255,0.18), transparent) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.ak-bg-gradient-primary::after {
content: '' !important;
position: absolute !important;
left: 0 !important; right: 0 !important; bottom: -1px !important;
height: 70% !important;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.07) 100%) !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120C220 60 480 160 720 110C960 60 1220 140 1440 90V200H0Z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120C220 60 480 160 720 110C960 60 1220 140 1440 90V200H0Z'/%3E%3C/svg%3E") !important;
-webkit-mask-size: 100% 100% !important;
mask-size: 100% 100% !important;
pointer-events: none !important;
z-index: 0 !important;
}
.ak-bg-gradient-primary > * { position: relative; z-index: 1; }
/* The text block and button sit side by side in a space-between row
(Elementor data, post 22) -- but Elementor Containers default their own
`width` to 100% of the parent unless told otherwise (the same mechanism
that stretched the header logo and a process-section child earlier),
which let the text block alone claim the whole row and wrap the button
onto its own line. Capping the text block's width and locking the
button's to its content fixes it regardless of viewport. */
.ak-bg-gradient-primary .ak-prose {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0;
}
.ak-bg-gradient-primary .ak-prose ~ div {
flex: 0 0 auto !important;
width: auto !important;
}
.ak-bg-gradient-accent { background: var(--ak-gradient-accent) !important; }
/* Text colors
NOTE: Elementor's "CSS Classes" control lands on a widget's *wrapper* div,
not the rendered heading/paragraph tag inside it, and that inner tag
usually carries its own explicit color from global.css/Elementor's own
generated CSS. The universal "* " descendant selector + !important below
guarantees the color actually reaches the visible text regardless of
which inner tag Elementor rendered (h1-h6, p, span, li...). */
.ak-text-navy, .ak-text-navy * { color: var(--ak-navy) !important; }
.ak-text-blue, .ak-text-blue * { color: var(--ak-blue-text) !important; }
.ak-text-teal, .ak-text-teal * { color: var(--ak-teal) !important; }
.ak-text-white, .ak-text-white * { color: var(--ak-white) !important; }
.ak-text-muted, .ak-text-muted * { color: var(--ak-text-muted) !important; }
.ak-text-left { text-align: left !important; }
/* Shadows (also cover a nested ![]()
, since these are frequently applied to Image widgets) */
.ak-shadow-sm, .ak-shadow-sm img { box-shadow: var(--shadow-sm) !important; }
.ak-shadow-md, .ak-shadow-md img { box-shadow: var(--shadow-md) !important; }
.ak-shadow-lg, .ak-shadow-lg img { box-shadow: var(--shadow-lg) !important; }
.ak-shadow-glow, .ak-shadow-glow img { box-shadow: var(--shadow-glow) !important; }
.ak-shadow-none, .ak-shadow-none img { box-shadow: none !important; }
/* Radius (also cover a nested ![]()
, since these are frequently applied to Image widgets) */
.ak-radius-sm, .ak-radius-sm img { border-radius: var(--radius-sm) !important; }
.ak-radius-md, .ak-radius-md img { border-radius: var(--radius-md) !important; }
.ak-radius-lg, .ak-radius-lg img { border-radius: var(--radius-lg) !important; }
.ak-radius-xl, .ak-radius-xl img { border-radius: var(--radius-xl) !important; }
.ak-radius-pill, .ak-radius-pill img { border-radius: var(--radius-pill) !important; }
/* Spacing (margin-top helpers most commonly needed between stacked Elementor widgets) */
.ak-mt-1 { margin-top: var(--space-1) !important; }
.ak-mt-2 { margin-top: var(--space-2) !important; }
.ak-mt-3 { margin-top: var(--space-3) !important; }
.ak-mt-4 { margin-top: var(--space-4) !important; }
.ak-mt-5 { margin-top: var(--space-5) !important; }
.ak-mt-6 { margin-top: var(--space-6) !important; }
.ak-mt-7 { margin-top: var(--space-7) !important; }
/* Visibility helpers (in addition to Elementor's own responsive visibility) */
.ak-hide-mobile { }
@media (max-width: 767px) { .ak-hide-mobile { display: none !important; } }
.ak-hide-desktop { }
@media (min-width: 768px) { .ak-hide-desktop { display: none !important; } }
/* Animation-ready base state (Phase 4 GSAP toggles these via ScrollTrigger) */
.ak-reveal { opacity: 0; }
.ak-reveal.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.ak-reveal { opacity: 1 !important; }
}
/* Border helpers */
.ak-border-top { border-top: 1px solid rgba(11,31,58,0.08); }
.ak-border-bottom { border-bottom: 1px solid rgba(11,31,58,0.08); }
/* Max-width content wrapper for long-form text inside wide containers */
.ak-prose { max-width: 720px; }